/* --- Shell --- */
.sl-shell {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: var(--sl-gutter);
}

.sl-main { display: block; }

.sl-section {
  position: relative;
  padding-block: var(--sl-s-section);
  background: var(--ctx-surface);
  color: var(--ctx-ink);
  scroll-margin-top: 5rem;
}

.sl-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Skip link --- */
.sl-skip {
  position: fixed;
  top: var(--sl-s-4);
  left: var(--sl-s-4);
  z-index: 200;
  padding: var(--sl-s-3) var(--sl-s-5);
  background: var(--sl-abisso);
  color: var(--sl-gold);
  border: 1px solid var(--sl-hairline-gold);
  border-radius: var(--sl-r-sm);
  font-size: var(--sl-t-small);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sl-s-6)));
  transition: transform var(--sl-d-fast) var(--sl-ease);
}

.sl-skip:focus-visible { transform: translateY(0); }

/* --- Type primitives --- */
.sl-t1 { font-size: var(--sl-t-h1); }
.sl-t2 { font-size: var(--sl-t-h2); }
.sl-t3 { font-size: var(--sl-t-h3); line-height: 1.18; letter-spacing: -0.012em; }

.sl-label {
  max-width: none;
  font-family: var(--sl-text);
  font-size: var(--sl-t-label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--sl-track-label);
  text-transform: uppercase;
  color: var(--sl-gold);
}

.sl-lead {
  max-width: 46ch;
  font-size: var(--sl-t-lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ctx-ink-soft);
}

/* --- Icons --- */
.sl-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: transform var(--sl-d-base) var(--sl-ease-expo);
}

/* --- Buttons --- */
.sl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-s-4) var(--sl-s-5);
  align-items: center;
  max-width: none;
}

.sl-actions--center { justify-content: center; }

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-s-2);
  min-height: 2.875rem;
  padding: 0 var(--sl-s-5);
  border: 1px solid transparent;
  border-radius: var(--sl-r-sm);
  background: none;
  font-family: var(--sl-text);
  font-size: var(--sl-t-label);
  font-weight: 500;
  letter-spacing: var(--sl-track-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--sl-d-fast) var(--sl-ease),
    border-color var(--sl-d-fast) var(--sl-ease),
    background-color var(--sl-d-fast) var(--sl-ease);
}

.sl-btn--outline {
  border-color: var(--sl-gold);
  color: var(--sl-gold);
}

.sl-btn--outline:hover {
  border-color: var(--sl-gold-hover);
  color: var(--sl-abisso);
  background: var(--sl-gold);
}

.sl-btn--lg { min-height: 3.375rem; padding-inline: var(--sl-s-7); }

/* --- Inline link --- */
.sl-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-s-3);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--sl-hairline-gold);
  font-family: var(--sl-text);
  font-size: var(--sl-t-label);
  font-weight: 500;
  letter-spacing: var(--sl-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ctx-ink);
  transition: color var(--sl-d-fast) var(--sl-ease), border-color var(--sl-d-fast) var(--sl-ease);
}

.sl-link:hover { color: var(--sl-gold); border-bottom-color: var(--sl-gold); }
.sl-link:hover .sl-icon--arrow { transform: translateX(0.25rem); }
.sl-link:hover .sl-icon--down { transform: translateY(0.2rem); }

/* --- Media primitives --- */
.sl-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--sl-r-md);
  background: var(--sl-rilievo);
}

.sl-frame--wide { aspect-ratio: 4 / 3; }
.sl-frame--tall { aspect-ratio: 5 / 6; }

.sl-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sl-frame img[data-sl-parallax],
.sl-frame[data-sl-parallax] img {
  position: relative;
  top: -8%;
  height: 116%;
}

.sl-caption {
  margin-top: var(--sl-s-4);
  font-family: var(--sl-text);
  font-size: var(--sl-t-label);
  font-weight: 500;
  letter-spacing: var(--sl-track-label);
  text-transform: uppercase;
  color: var(--ctx-ink-mute);
}

/* --- Header --- */
.sl-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--sl-d-base) var(--sl-ease),
    border-color var(--sl-d-base) var(--sl-ease),
    transform var(--sl-d-base) var(--sl-ease);
}

.sl-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sl-abisso) 72%, transparent), transparent);
  transition: opacity var(--sl-d-base) var(--sl-ease);
  pointer-events: none;
}

.sl-header.is-scrolled,
.sl-header.is-solid {
  background: var(--sl-abisso);
  border-bottom-color: var(--sl-hairline);
}

.sl-header.is-scrolled::before,
.sl-header.is-solid::before { opacity: 0; }
.sl-header.is-hidden { transform: translateY(-100%); }
.sl-header.has-open-nav { background: var(--sl-abisso); }

.sl-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sl-s-5);
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  padding: var(--sl-s-4) var(--sl-gutter);
}

.sl-wordmark {
  font-family: var(--sl-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sl-cream);
  white-space: nowrap;
}

.sl-wordmark--head { justify-self: center; font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem); }
.sl-wordmark--foot { font-size: 1.25rem; }
a.sl-wordmark:hover { color: var(--sl-gold); }

/* Brand logo (gold on dark chrome; ink reserved for light surfaces) */
.sl-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.sl-logo-link--head {
  justify-self: center;
}

.sl-logo {
  display: block;
  width: auto;
  /* PNG includes tagline — taller than wordmark-only SVG */
  height: clamp(1.85rem, 1.45rem + 1.1vw, 2.55rem);
  max-width: min(16.5rem, 58vw);
}

.sl-logo--foot {
  height: clamp(2rem, 1.6rem + 1vw, 2.75rem);
  max-width: 18rem;
}

.sl-logo-link:hover .sl-logo,
.sl-logo-link:focus-visible .sl-logo {
  opacity: 0.88;
  outline: none;
}

.sl-logo-link:focus-visible {
  outline: 2px solid var(--sl-gold);
  outline-offset: 4px;
}

/* --- Primary navigation --- */
.sl-nav--start { justify-self: start; }

.sl-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  list-style: none;
}

.sl-nav__list li { max-width: none; }

.sl-nav__list a {
  position: relative;
  display: block;
  padding-block: 0.35rem;
  font-size: var(--sl-t-label);
  font-weight: 500;
  letter-spacing: var(--sl-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sl-cream-soft);
  transition: color var(--sl-d-fast) var(--sl-ease);
}

.sl-nav__list a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--sl-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--sl-d-base) var(--sl-ease-expo);
}

.sl-nav__list a:hover,
.sl-nav__list .current-menu-item > a { color: var(--sl-cream); }

.sl-nav__list a:hover::after,
.sl-nav__list .current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

.sl-header__end {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--sl-s-5);
}

/* --- Language switcher --- */
.sl-lang {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
  font-size: var(--sl-t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.sl-lang__link {
  padding: 0.25rem;
  text-decoration: none;
  color: var(--sl-cream-mute);
  transition: color var(--sl-d-fast) var(--sl-ease);
}

.sl-lang__link:hover { color: var(--sl-cream); }
.sl-lang__link.is-active { color: var(--sl-gold); }
.sl-lang__sep { color: var(--sl-cream-mute); opacity: 0.45; }

/* --- Menu toggle --- */
.sl-menu-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  color: var(--sl-cream);
  cursor: pointer;
}

.sl-menu-toggle:focus-visible {
  outline: 2px solid var(--sl-gold);
  outline-offset: 3px;
  border-radius: var(--sl-r-sm);
}

.sl-menu-toggle__bars {
  position: absolute;
  inset: 0;
  display: block;
}

.sl-menu-toggle__bar {
  position: absolute;
  left: 50%;
  width: 1.375rem;
  height: 1px;
  margin-left: -0.6875rem;
  background: var(--sl-cream);
  transition: transform var(--sl-d-base) var(--sl-ease-expo);
}

.sl-menu-toggle__bar:nth-child(1) { top: 1.1875rem; }
.sl-menu-toggle__bar:nth-child(2) { top: 1.5625rem; }

.sl-menu-toggle[aria-expanded='true'] .sl-menu-toggle__bar:nth-child(1) { transform: translateY(0.1875rem) rotate(45deg); }
.sl-menu-toggle[aria-expanded='true'] .sl-menu-toggle__bar:nth-child(2) { transform: translateY(-0.1875rem) rotate(-45deg); }

body.sl-nav-lock { overflow: hidden; }

/* --- Footer --- */
.sl-footer { padding-block: clamp(3.5rem, 6vw, 5.5rem) var(--sl-s-7); }

.sl-footer::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--sl-hairline);
}

.sl-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
  gap: var(--sl-s-8) clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.sl-footer__tag {
  max-width: 32ch;
  margin-top: var(--sl-s-4);
  font-size: var(--sl-t-small);
  color: var(--sl-cream-mute);
}

.sl-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-s-7) var(--sl-s-6);
}

.sl-footer__col > .sl-label { margin-bottom: var(--sl-s-5); color: var(--sl-cream-mute); }

.sl-footer__links {
  display: grid;
  gap: 0.65rem;
  list-style: none;
}

.sl-footer__links li { max-width: none; }

.sl-footer__links a {
  font-size: var(--sl-t-small);
  text-decoration: none;
  color: var(--sl-cream-soft);
  transition: color var(--sl-d-fast) var(--sl-ease);
}

.sl-footer__links a:hover { color: var(--sl-gold); }

.sl-footer__addr {
  max-width: 26ch;
  margin-top: var(--sl-s-4);
  font-size: var(--sl-t-small);
  font-style: normal;
  color: var(--sl-cream-mute);
}

.sl-footer__bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-s-3) var(--sl-s-6);
  justify-content: space-between;
  padding-top: var(--sl-s-5);
  border-top: 1px solid var(--sl-hairline);
  font-size: var(--sl-t-small);
  color: var(--sl-cream-mute);
}

.sl-footer__bar p { max-width: none; }
.sl-footer__credit {
  text-align: right;
  line-height: 1.55;
}
.sl-footer__credit a {
  color: var(--sl-cream-soft);
  text-decoration: underline;
  text-decoration-color: var(--sl-hairline-gold);
}
.sl-footer__credit a:hover { color: var(--sl-gold); }


/* --- Responsive chrome --- */
@media (max-width: 900px) {
  .sl-menu-toggle { display: block; }
  .sl-header__inner { grid-template-columns: auto 1fr; }
  .sl-logo-link--head { justify-self: start; order: -1; }
  .sl-header__cta { display: none; }

  .sl-header__end {
    position: relative;
    z-index: 120;
  }

  .sl-nav--start {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    align-content: center;
    justify-items: start;
    padding: var(--sl-s-9) var(--sl-gutter);
    background: var(--sl-abisso);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sl-d-base) var(--sl-ease), visibility var(--sl-d-base);
  }

  .sl-nav.is-open,
  .sl-nav--start.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .sl-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sl-s-5);
  }

  .sl-nav__list a {
    font-family: var(--sl-display);
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--sl-cream);
  }

  .sl-nav__list a::after { display: none; }

  .sl-header.has-open-nav { background: var(--sl-abisso); }
  .sl-header.has-open-nav::before { opacity: 0; }

  .sl-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 44rem) {
  .sl-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sl-s-6); }
  .sl-footer__bar { flex-direction: column; }
  .sl-footer__credit { text-align: left; }
}

.sl-js [data-sl-reveal] { opacity: 0; }
.sl-js[data-sl-motion='off'] [data-sl-reveal] { opacity: 1; }