/* ==========================================================================
   HEADER + HERO + PROOF STRIP
   Editorial split: portrait 5/12, copy 7/12, 48px gutter. Caption and the
   pause/play control live inside the circle. Logo block sits 24px under the
   hero row as a six-column grid.
   ========================================================================== */

/* ---- Header ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-hairline);
  transition: box-shadow var(--motion-state) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-resting); }
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: var(--nav-height); }

.brand-mark { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-serif); font-size: var(--text-2xl); letter-spacing: var(--tracking-heading); color: var(--ink-primary); }
/* SW monogram: the S arc runs into the first stroke of the W (assets/brand) */
.brand-mark .brand-monogram { display: block; width: auto; height: 26px; }
@media (min-width: 768px) { .brand-mark .brand-monogram { height: 30px; } }

.nav-links { display: none; align-items: center; gap: var(--space-2xl); list-style: none; }
.nav-link { font-size: var(--text-sm); font-weight: 500; color: var(--ink-secondary); padding: var(--space-xs) 0; }
.nav-link:hover { color: var(--brand-green-accent); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-primary); }
.nav-toggle:hover { background: var(--wash-hover); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1023.98px) {
  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    padding: var(--space-md) var(--gutter) var(--space-xl);
    background: var(--bg-white);
    border-bottom: 1px solid var(--rule-hairline);
    box-shadow: var(--shadow-popover);
  }
  .nav-links.is-open .nav-link { display: block; padding: var(--space-sm) 0; font-size: var(--text-base); border-bottom: 1px solid var(--rule-hairline); }
  .nav-links.is-open li:last-child .nav-link { border-bottom: 0; }
  .nav-cta { display: none; }
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

/* ---- Hero band ---- */
.hero-section { position: relative; overflow: hidden; background: var(--bg-white); padding-top: calc(var(--nav-height) + var(--space-xs)); padding-bottom: var(--space-lg); }
.hero-grid { display: grid; grid-template-columns: 1fr; row-gap: var(--space-xl); margin-bottom: var(--space-xs); }

@media (min-width: 768px) {
  .hero-section { padding-top: calc(var(--nav-height) + var(--space-3xl)); padding-bottom: var(--space-xl); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-4xl); align-items: center; }
}

/* Portrait */
.hero-photo { display: flex; justify-content: center; }
@media (min-width: 768px) { .hero-photo { justify-content: flex-start; } }

/* Only the person: the stipple stands free on the white page, no crop shape, scrim or caption. */
.hero-portrait { width: 100%; max-width: min(360px, 46vh); margin: var(--space-md) 0 0; }
/* Two columns: shift by the crop's inner margin (6.5 of 730) so the shoulder sits on the column edge */
@media (min-width: 768px) { .hero-portrait { max-width: min(600px, 66vh); margin: 0; translate: -0.89% 0; } }
/* The frame is cropped tight to the person (data-crop="100 98 730 676" in the 960 source),
   so the outline sits on the column edge and scales with the column. */
.hero-photo-frame {
  position: relative;
  width: 100%; aspect-ratio: 730 / 676;
  overflow: hidden;
  background: var(--bg-white);
  isolation: isolate;
}
.hero-photo-frame video, .hero-photo-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.portrait-canvas { z-index: 1; opacity: 0; transition: opacity var(--motion-enter) var(--ease); }
.portrait-canvas.is-ready { opacity: 1; }
/* Square poster placed through the same window: 960/730 wide, offset 100/730 left and 98/676 up */
.portrait-poster { position: absolute; z-index: 0; left: -13.699%; top: -14.497%; width: 131.507%; max-width: none; height: auto; }

/* Pause control for the moving stipple, a bare icon in the empty top corner beside the head */
.hero-portrait-toggle {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; color: var(--ink-muted); cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--motion-state) var(--ease), color var(--motion-state) var(--ease);
}
.hero-portrait-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.hero-portrait-toggle svg { width: 14px; height: 14px; }
.hero-portrait-toggle svg[hidden] { display: none; }
.hero-portrait:hover .hero-portrait-toggle, .hero-portrait-toggle:hover, .hero-portrait-toggle:focus-visible { opacity: 1; color: var(--ink-primary); }
.hero-portrait-toggle:focus-visible { outline: 2px solid var(--brand-green-sage); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (hover: none) { .hero-portrait-toggle { opacity: 1; } }

/* Copy */
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hero-eyebrow { margin-bottom: var(--space-sm); font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-ui); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-green-accent); }
.hero-title { margin: 0 0 var(--space-lg); font-size: var(--type-title); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
@media (min-width: 768px) { .hero-title { font-size: var(--type-title-inset); } }
.hero-title .accent { font-style: italic; color: var(--brand-green-accent); }
.hero-invite { max-width: var(--measure); margin: 0 0 var(--space-xl); font-size: var(--text-lg); line-height: var(--leading-body); color: var(--ink-primary); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero-availability { margin: var(--space-md) 0 0; font-size: var(--text-sm); line-height: var(--leading-body); color: var(--ink-secondary); }

/* Per-character title reveal (mirrors the reference's stagger) */
.hero-title.is-split { visibility: visible; }
.hero-title .word { display: inline-block; white-space: nowrap; }
.hero-title .char { display: inline-block; opacity: 0; transform: translateY(8px); animation: charIn var(--motion-enter) var(--ease-enter) forwards; animation-delay: calc(80ms + var(--char-i, 0) * 22ms); }
@keyframes charIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-title .word { display: inline; white-space: normal; }
  .hero-title .char { display: inline; animation: none; opacity: 1; transform: none; }
}

/* ---- Proof strip ---- */
.logo-block { margin: var(--space-xl) 0 var(--space-md); }
.logo-label { margin-bottom: var(--space-lg); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-muted); }
.logo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); list-style: none; }
/* Nine marks: three by three on phones and tablets, five over four on small laptops, one row on wide screens.
   The laptop grid runs on double tracks so the four underneath sit centred. */
@media (min-width: 1024px) {
  .logo-strip { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-md); }
  .logo-strip > li { grid-column: span 2; }
  .logo-strip > li:nth-child(6) { grid-column: 2 / span 2; }
}
@media (min-width: 1280px) {
  .logo-strip { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-sm); }
  .logo-strip > li, .logo-strip > li:nth-child(6) { grid-column: auto; }
}
.logo-cell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 56px; padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius-sm); }
.logo-link { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border-radius: var(--radius-sm); }
.logo-link:focus-visible { outline: 2px solid var(--brand-green-sage); outline-offset: 2px; }
.logo-cell img { width: auto; max-width: 100%; height: auto; max-height: 2.25rem; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: 0.72; transition: opacity var(--motion-state) var(--ease), filter var(--motion-state) var(--ease); }
.logo-cell:hover img, .logo-link:focus-visible img { opacity: 1; filter: none; }
/* The Müller mark is mostly its column-and-scales emblem, so it needs more height for the name to read */
.logo-cell img.logo-mueller { max-height: 3rem; }
.logo-wordmark { font-family: var(--font-sans); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ink-muted); transition: color var(--motion-state) var(--ease); }
.logo-wordmark small { display: block; font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); }
.logo-cell:hover .logo-wordmark { color: var(--ink-primary); }