/* Header and hero layout ("01 · Inline row", set on <html data-hero="1">): a quiet row of links that
   condenses into a bar on scroll, with a menu sheet on phones. Breakpoints: tablet ≤1000px, phone ≤650px. */

/* ---------- Shared pieces ---------- */
.menu-button{display:none}
.menu-button{align-items:center;gap:10px;padding:8px 0;border:0;background:none;font:400 12px/1 var(--mono);text-transform:uppercase;color:var(--ink);cursor:pointer}
.menu-button__icon{position:relative;width:18px;height:9px}
.menu-button__icon::before,.menu-button__icon::after{content:'';position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1),top .35s}
.menu-button__icon::before{top:0}.menu-button__icon::after{top:7.5px}
.is-open .menu-button__icon::before{top:3.75px;transform:rotate(45deg)}.is-open .menu-button__icon::after{top:3.75px;transform:rotate(-45deg)}
.menu-locked{overflow:hidden}
.nowrap{white-space:nowrap}

:root[data-hero]:not([data-hero="0"]) .site-header nav{grid-template-rows:none;grid-auto-flow:row}
:root[data-hero]:not([data-hero="0"]) .site-header nav a{min-height:0}
:root[data-hero]:not([data-hero="0"]) .hero-content{transform:none}
@media(max-width:650px){
  :where(:root[data-hero]:not([data-hero="0"])) .sub-break{display:none}
  :where(:root[data-hero]:not([data-hero="0"])) .hero-description{font-size:17px;max-width:32ch;margin-inline:auto}
  :where(:root[data-hero]:not([data-hero="0"])) .hero{min-height:680px;max-height:860px}
  :where(:root[data-hero]:not([data-hero="0"])) .hero h1{font-size:44px}
}

/* ---------- 01 · Inline row: one quiet row of links; a menu sheet on phones ---------- */
[data-hero="1"] .site-header{align-items:center}
[data-hero="1"] .site-header nav{display:flex;gap:30px;padding:0}
[data-hero="1"] .site-header nav a{font-size:12px}
@media(max-width:1000px){[data-hero="1"] .wordmark{font-size:44px}[data-hero="1"] .site-header nav{gap:18px}[data-hero="1"] .site-header nav a{font-size:11px}}

/* ---------- Condensing bar: the header stays with you, slimming once you scroll, with the current section marked ---------- */
[data-hero="1"] .site-header{position:fixed}
[data-hero="1"] .wordmark{transition:color var(--hover),letter-spacing var(--hover),font-size .4s cubic-bezier(.2,.7,.2,1)}
[data-hero="1"] .site-header nav a.is-active{background:color-mix(in srgb,var(--nav-tint) 40%,transparent)}
[data-hero="1"] .site-header.is-condensed{padding-top:12px;padding-bottom:12px;background:color-mix(in srgb,var(--hero-bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent)}
[data-hero="1"] .site-header.is-condensed .wordmark{font-size:30px;letter-spacing:-1.4px!important}
/* Over a dark section the condensed bar turns dark; the active link keeps the same accent tint, tuned for the dark bar. */
[data-hero="1"] .site-header{transition:padding .4s cubic-bezier(.2,.7,.2,1),background .4s,box-shadow .4s,color .3s}
[data-hero="1"] .site-header.is-condensed.is-over-dark{background:color-mix(in srgb,var(--deep) 78%,transparent);box-shadow:0 1px 0 color-mix(in srgb,var(--deep-ink) 10%,transparent);color:var(--deep-ink)}
[data-hero="1"] .site-header.is-over-dark .wordmark,[data-hero="1"] .site-header.is-over-dark .menu-button{color:var(--deep-ink)}
[data-hero="1"] .site-header.is-over-dark nav a.is-active{background:color-mix(in srgb,var(--nav-tint) 32%,transparent);box-shadow:none}
[data-hero="1"] .site-header.is-over-dark nav a:not(.is-active):hover{background:color-mix(in srgb,var(--nav-tint) 20%,transparent);box-shadow:none}
@media(max-width:650px){[data-hero="1"] .site-header.is-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;box-shadow:none}}

/* Phones: the links fold away into a slide-down sheet of large links. */
@media(max-width:650px){
  [data-hero="1"] .menu-button{display:inline-flex}
  [data-hero="1"] .site-header nav{position:fixed;inset:0 0 auto;z-index:-1;display:flex;flex-direction:column;gap:0;padding:104px var(--pad) 30px;background:color-mix(in srgb,var(--hero-bg) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px #0b10120f;transform:translateY(-102%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
  [data-hero="1"] .site-header.is-open nav{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  [data-hero="1"] .site-header nav a{font:200 34px/1.15 var(--serif);text-transform:none;letter-spacing:-.02em!important;padding:10px 10px;margin:2px -10px 0;border-radius:6px}
}

/* With the phone menu open, the sheet is light whatever section sits behind it. */
[data-hero="1"] .site-header.is-open.is-over-dark,[data-hero="1"] .site-header.is-open.is-over-dark :is(.wordmark,.menu-button){color:var(--ink)}
[data-hero="1"] .site-header.is-open.is-over-dark nav a.is-active{background:color-mix(in srgb,var(--nav-tint) 40%,transparent);color:inherit}

.site-header nav a{--nav-tint:var(--a1)}

/* Over any light section (the hero and the light sections below, bar or no bar), the header multiplies onto the page:
   its dark text stays dark and the links' lavender tint takes on whatever colours sit behind it, so it never clashes.
   Over the dark sections the bar turns dark and the lavender tint sits on it as usual. (Phones keep their menu sheet.) */
@media(min-width:651px){
  [data-hero="1"] .site-header:not(.is-over-dark){mix-blend-mode:multiply}
  [data-hero="1"] .site-header:not(.is-over-dark) nav a:hover,[data-hero="1"] .site-header:not(.is-over-dark) nav a:focus-visible{background:color-mix(in srgb,var(--a1) 45%,transparent);box-shadow:none}
  [data-hero="1"] .site-header:not(.is-over-dark) nav a.is-active{background:color-mix(in srgb,var(--a1) 32%,transparent)}
}