/* ==========================================================================
   ESN Savo — "Northern night"
   Design system. One file, layered: tokens, base, layout, components, motion.
   Palette derives from the official ESN Savo brand graphics.
   ========================================================================== */

/* ---------- 0. Typefaces (self-hosted) ------------------------------------
   Served from this domain rather than fonts.googleapis.com: one less
   third-party connection on every page load, and no visitor IP handed to
   another company before the page has even painted. Variable weight axes,
   so all weights cost one file per subset.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/instrument-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Any component that sets its own `display` beats the browser's rule for the
   hidden attribute, which silently breaks every JS toggle on the site. One
   rule, stated once, rather than a patch per component. */
[hidden] { display: none !important; }

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand hues — unchanged source of truth */
  --purple:        #7D017D;
  --purple-bright: #8400B4;
  --purple-deep:   #2A0C56;
  --teal:          #0EA89C;
  --teal-bright:   #28C7B6;
  --magenta:       #EE3D8B;
  --gold:          #F2C84B;

  /* Surfaces — roles, not hues */
  --night:      #150829;   /* primary dark ground */
  --night-deep: #0C0418;   /* deepest, hero base */
  --night-lift: #241040;   /* raised element on night */
  --paper:      #FAF7FC;   /* primary light ground */
  --paper-lift: #FFFFFF;   /* raised element on paper */
  --hairline:   #E4DCED;   /* divider on paper */
  --hairline-n: rgba(255,255,255,.14); /* divider on night */

  /* Ink */
  --ink:        #150829;
  --ink-soft:   #58496B;
  --ink-faint:  #6E6084;
  --ink-invert: #FFFFFF;
  --ink-invert-soft: rgba(255,255,255,.72);

  /* Type */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.25rem;
  --t-lg:   1.5rem;
  --t-xl:   clamp(1.75rem, 3vw, 2.25rem);
  --t-2xl:  clamp(2.25rem, 5vw, 3.5rem);
  --t-3xl:  clamp(2.15rem, 6.2vw, 5.4rem);

  /* Space — single scale */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 140px;

  /* Radius — hierarchy, not one value everywhere */
  --r-1: 3px;   /* small controls, tags */
  --r-2: 10px;  /* panels, form fields */
  --r-3: 28px;  /* the one large gesture */

  --shell: 1180px;
  --measure: 66ch;

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;
}

/* ---------- 2. Base ------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); letter-spacing: -0.012em; line-height: 1.2; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

:focus-visible {
  outline: 3px solid var(--teal-bright);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--night); color: var(--ink-invert);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-1);
  font-weight: 600; text-decoration: none;
  transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

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

/* ---------- 3. Layout ---------------------------------------------------- */

.shell {
  width: min(100% - var(--s-6), var(--shell));
  margin-inline: auto;
}
@media (min-width: 700px) { .shell { width: min(100% - var(--s-8), var(--shell)); } }

.band { padding-block: clamp(var(--s-8), 9vw, var(--s-10)); }
.band--tight { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); }

.band--night { background: var(--night); color: var(--ink-invert); }
.band--night h1, .band--night h2, .band--night h3 { color: var(--ink-invert); }
.band--night p { color: var(--ink-invert-soft); }

.band--edge { border-top: 1px solid var(--hairline); }

/* A lead paragraph that sits under a heading */
.lead { font-size: var(--t-md); color: var(--ink-soft); line-height: 1.5; }
.band--night .lead { color: var(--ink-invert-soft); }

/* Section opener: heading + optional lead, no decorative label above it */
.opener { margin-bottom: var(--s-7); }
.opener .lead { margin-top: var(--s-4); max-width: 52ch; }
.opener h2 { max-width: 22ch; }
.opener--wide h2 { max-width: 26ch; }

/* ---------- 4. Controls -------------------------------------------------- */

.btn {
  --btn-bg: var(--purple);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 13px var(--s-5);
  font: 600 var(--t-sm)/1 var(--body);
  letter-spacing: .005em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-1);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--purple); }
.btn--primary:hover { --btn-bg: var(--purple-bright); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; }

.band--night .btn--ghost, .hero .btn--ghost, .pagehead .btn--ghost { --btn-fg: #fff; --btn-bd: rgba(255,255,255,.5); }
.band--night .btn--ghost:hover, .hero .btn--ghost:hover, .pagehead .btn--ghost:hover { --btn-bg: #fff; --btn-fg: var(--night); --btn-bd: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* Inline link that reads as a link without an appended arrow */
.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
.link:hover { text-decoration-color: var(--magenta); }

/* ---------- 5. Navigation ------------------------------------------------ */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  /* At the top of the page the header meets the dark hero, where a hairline
     only adds a seam. It earns its keep once there is content behind it. */
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}
.nav[data-stuck="true"] {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--s-5);
  height: 68px;
}
.nav__mark {
  display: grid; place-items: center;
  flex: none;
  /* The paper ground is light enough for the black wordmark to sit on it
     directly; a white plate behind it only reads as a sticker. */
}
.nav__mark img { height: 30px; width: auto; }

.nav__links { display: flex; gap: var(--s-5); margin: 0 auto 0 var(--s-3); padding: 0; list-style: none; }
.nav__links a {
  position: relative;
  font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  padding-block: var(--s-2);
  color: var(--ink-soft);
  transition: color var(--dur-1) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--magenta);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__toggle {
  display: none; margin-left: auto;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1.5px solid var(--hairline);
  border-radius: var(--r-1); cursor: pointer;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ''; display: block; width: 18px; height: 1.5px;
  background: var(--ink); margin-inline: auto;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear;
}
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after  { transform: translateY(4.5px); }
.nav[data-open="true"] .nav__toggle span { background: transparent; }
.nav[data-open="true"] .nav__toggle span::before { transform: rotate(45deg); }
.nav[data-open="true"] .nav__toggle span::after  { transform: rotate(-45deg) translateY(0); }

.nav__drawer {
  display: grid; overflow: hidden;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-3) var(--ease-in-out);
  border-top: 0 solid var(--hairline);
}
.nav[data-open="true"] .nav__drawer { grid-template-rows: 1fr; border-top-width: 1px; }
.nav__drawer > div { min-height: 0; }
.nav__drawer a {
  display: block; padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--display); font-size: var(--t-lg); font-weight: 600;
  text-decoration: none;
}
.nav__drawer a:last-child { border-bottom: 0; }

@media (max-width: 780px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; place-items: center; }
}
@media (min-width: 781px) { .nav__drawer { display: none; } }

/* ---------- 6. Hero: the one bold moment --------------------------------- */

.hero {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 100%, #1E0A3E 0%, #0C0418 62%),
    var(--night-deep);
  color: var(--ink-invert);
  overflow: hidden;
  isolation: isolate;
}
.hero__sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.anim .hero__sky { opacity: 0; animation: sky-in 2400ms var(--ease-out) 200ms forwards; }
@keyframes sky-in { to { opacity: 1; } }

/* Lake horizon sits between sky and content */
.hero__horizon {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1; pointer-events: none;
  width: 100%; height: clamp(70px, 11vw, 170px);
}

.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(var(--s-8), 14vh, 190px) clamp(var(--s-9), 17vh, 210px);
}

.hero__title {
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.035em;
  max-width: 20ch;
  margin: 0;
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: block; }
.anim .hero__title .ln > span {
  transform: translateY(105%);
  animation: line-rise 900ms var(--ease-out) forwards;
}
.hero__title .ln:nth-child(1) > span { animation-delay: 120ms; }
.hero__title .ln:nth-child(2) > span { animation-delay: 220ms; }
.hero__title .ln:nth-child(3) > span { animation-delay: 320ms; }
.hero__title .ln:nth-child(4) > span { animation-delay: 420ms; }
@keyframes line-rise { to { transform: translateY(0); } }

/* The four designed lines only hold while the viewport is wide enough for the
   longest of them. Narrower than that, a forced line break leaves an orphan
   word, so the title reverts to flowing text broken only between its two
   sentences, and the entrance animation moves to the whole block. */
@media (max-width: 720px) {
  .hero__title .ln { display: inline; overflow: visible; }
  .hero__title .ln > span { display: inline; }
  .hero__title .ln:nth-child(2)::after { content: "\A"; white-space: pre; }
  .anim .hero__title .ln > span { transform: none; animation: none; }
  .anim .hero__title { opacity: 0; animation: fade-up 800ms var(--ease-out) 120ms forwards; }
}

.hero__sub {
  margin-top: var(--s-6);
  max-width: 48ch;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--ink-invert-soft);
}
.anim .hero__sub { opacity: 0; animation: fade-up 800ms var(--ease-out) 620ms forwards; }
.anim .hero .btn-row { opacity: 0; animation: fade-up 800ms var(--ease-out) 760ms forwards; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 7. Ledger (the numbers) -------------------------------------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--hairline-n);
}
.ledger__item {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-right: 1px solid var(--hairline-n);
}
.ledger__item:last-child { border-right: 0; }
.ledger__n {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--teal-bright);
}
.ledger__l {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-sm); line-height: 1.4;
  color: var(--ink-invert-soft); max-width: 22ch;
}

/* ---------- 8. Split: text beside media ---------------------------------- */

.split {
  display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8));
  grid-template-columns: 1fr;
  align-items: center;
}
.split .opener h2 { max-width: none; }

@media (min-width: 860px) {
  .split { grid-template-columns: 1.05fr 0.95fr; }
  .split--flip > *:first-child { order: 2; }
}
.split__media { border-radius: var(--r-3); overflow: hidden; }
.split__media img { width: 100%; height: auto; }

/* ---------- 9. Offer list (what we do) ----------------------------------- */
/* Hairline-separated rows, not identical shadowed cards. */

.offers { display: grid; gap: 0; }
.offer {
  display: grid; gap: var(--s-2);
  grid-template-columns: auto 1fr;
  align-items: start;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--hairline);
}
.offer:first-child { border-top: 1px solid var(--hairline); }
.offer__key {
  grid-row: span 2;
  width: 34px; height: 34px; margin-right: var(--s-4);
  display: grid; place-items: center;
  color: var(--purple);
}
.offer__key svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.offer h3 { margin-bottom: var(--s-1); }
.offer p { color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- 10. Event rows ----------------------------------------------- */
/* The date is the structure. No boxes. */

.events { border-top: 1px solid var(--hairline); }
.event {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out);
}
a.event:hover { background: color-mix(in srgb, var(--purple) 5%, transparent); }
.event__when {
  font-family: var(--display); line-height: 1;
  border-left: 3px solid var(--teal); padding-left: var(--s-4);
}
.event__d { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; }
.event__m { display: block; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-soft); }
.event__what h3 { margin-bottom: 4px; }
.event__where { font-size: var(--t-sm); color: var(--ink-soft); }
.event__where span + span::before { content: ' — '; }
.event__kind {
  font-size: var(--t-xs); font-weight: 600;
  padding: 5px 10px; border-radius: var(--r-1);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: #076A62;
  white-space: nowrap;
}
.event__kind[data-kind="trip"]     { background: color-mix(in srgb, var(--magenta) 14%, transparent); color: #A81759; }
.event__kind[data-kind="workshop"] { background: color-mix(in srgb, var(--gold) 26%, transparent); color: #7A5C00; }

@media (max-width: 640px) {
  .event { grid-template-columns: 64px 1fr; }
  .event__kind { grid-column: 2; justify-self: start; }
}

/* ---------- 11. Filters -------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* Says what the filter did, for people who cannot see the rows disappear. */
.filters__count {
  margin: var(--s-3) 0 var(--s-6);
  font-size: var(--t-sm); color: var(--ink-faint);
  min-height: 1.4em;
}
.filter {
  padding: 9px var(--s-4);
  font: 500 var(--t-sm)/1 var(--body);
  background: transparent;
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.filter:hover { border-color: var(--ink-faint); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter:active { transform: translateY(1px); }

/* ---------- 12. Values grid ---------------------------------------------- */
/* Four parallel ideas: a real grid with hairlines, no card chrome. */

.values {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--hairline-n);
  border-left: 1px solid var(--hairline-n);
}
.value {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--hairline-n);
  border-bottom: 1px solid var(--hairline-n);
}
.value h3 { margin-bottom: var(--s-3); color: var(--teal-bright); }
.value p { font-size: var(--t-sm); }

/* ---------- 13. Timeline (a real sequence, so numbers earn their place) --- */

.timeline { counter-reset: step; display: grid; gap: 0; }
.timeline__step {
  counter-increment: step;
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s-5);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--hairline);
}
.timeline__step:first-child { border-top: 1px solid var(--hairline); }
.timeline__step::before {
  content: counter(step);
  font-family: var(--display); font-size: var(--t-lg); font-weight: 700;
  color: var(--purple);
  border-top: 3px solid var(--purple);
  padding-top: var(--s-2);
}
.timeline__step h3 { margin-bottom: var(--s-2); }
.timeline__step p { color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- 14. People --------------------------------------------------- */

.people { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.person {
  padding: var(--s-5);
  background: var(--paper-lift);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
}
.person__init {
  width: 44px; height: 44px; margin-bottom: var(--s-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--purple-deep); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: var(--t-sm);
}
.person h3 { margin-bottom: 2px; font-size: var(--t-base); }
.person__role { font-size: var(--t-sm); color: var(--ink-soft); }
.person__links { margin-top: var(--s-3); display: grid; gap: 2px; font-size: var(--t-sm); }
.person__links a { color: var(--purple); text-decoration: none; }
.person__links a:hover { text-decoration: underline; }

/* ---------- 15. Channels ------------------------------------------------- */

.channels { display: grid; gap: var(--s-3); }
.channel {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--paper-lift);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
a.channel:hover { border-color: var(--purple); }
.channel__icon { display: grid; place-items: center; color: var(--purple); }
.channel__icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.channel__name { display: block; font-family: var(--display); font-weight: 700; }
.channel__note { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.channel__note a { color: var(--purple); }

/* ---------- 16. Form ----------------------------------------------------- */

.form { display: grid; gap: var(--s-4); max-width: 34rem; }
.form .btn { justify-self: start; }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field input, .field textarea {
  font: inherit; font-size: var(--t-sm);
  padding: 12px var(--s-4);
  background: var(--paper-lift);
  color: var(--ink);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-2);
  transition: border-color var(--dur-1) var(--ease-out);
}
.field input:hover, .field textarea:hover { border-color: var(--ink-faint); }
.field textarea { resize: vertical; min-height: 118px; }
.field__hint { font-size: var(--t-xs); color: var(--ink-faint); }
.field[data-invalid="true"] input, .field[data-invalid="true"] textarea { border-color: #C21D5E; }
.field__error { font-size: var(--t-xs); color: #C21D5E; min-height: 1em; }

.form__status {
  font-size: var(--t-sm); font-weight: 600;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  border: 1.5px solid transparent;
}
.form__status:empty { display: none; }
.form__status[data-state="ok"]  { background: color-mix(in srgb, var(--teal) 12%, transparent); border-color: var(--teal); color: #06584F; }
.form__status[data-state="err"] { background: #FDEBF2; border-color: #C21D5E; color: #C21D5E; }

/* ---------- 17. FAQ ------------------------------------------------------ */

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: var(--s-5);
  font-family: var(--display); font-weight: 700; font-size: var(--t-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none;
  width: 13px; height: 13px;
  border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__body { padding-bottom: var(--s-5); }
.faq__body p { color: var(--ink-soft); }

/* ---------- 18. Partner tiers -------------------------------------------- */

.tiers { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tier {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--hairline-n);
  border-radius: var(--r-2);
}
.tier--lead { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }
.tier h3 { margin-bottom: var(--s-2); }
.tier__what { font-family: var(--display); font-size: var(--t-lg); color: var(--teal-bright); margin-bottom: var(--s-4); }
.tier ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); }
.tier li { font-size: var(--t-sm); color: var(--ink-invert-soft); }

/* ---------- 19. Footer --------------------------------------------------- */

.foot { background: var(--night); color: var(--ink-invert); padding-block: var(--s-8) var(--s-6); }

/* A night band running straight into the night footer has no seam, so the two
   paddings read as one enormous void. Draw the seam and take back the double
   space instead of guessing a smaller number for both. The class is set in the
   markup because <main> and <footer> are not siblings. */
.foot--seam {
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-n);
}
.foot__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); justify-content: space-between; }
.foot__mark img { height: 34px; width: auto; }  /* light wordmark, no plate */
.foot__social { display: flex; gap: var(--s-3); }
.foot__social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--hairline-n); border-radius: var(--r-1);
  color: #fff; transition: background-color var(--dur-1) var(--ease-out);
}
.foot__social a:hover { background: rgba(255,255,255,.12); }
.foot__social svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.75; }
.foot__legal {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-n);
  display: grid; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--ink-invert-soft);
}
.foot__legal a { color: #fff; }
@media (min-width: 760px) {
  .foot__legal { grid-auto-flow: column; justify-content: space-between; align-items: center; }
}

/* ---------- 20. Motion policy -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .hero__title .ln > span { transform: none; }
  .hero__sky { opacity: 1; }
}

/* ---------- 20b. Not found ------------------------------------------------
   An empty screen is an invitation to act, so the page names where the five
   real pages are instead of apologising.
   -------------------------------------------------------------------------- */

.pagehead--tall { padding-block: clamp(var(--s-8), 11vw, var(--s-10)) clamp(var(--s-8), 8vw, var(--s-9)); }

.notfound__code {
  font-family: var(--display);
  font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.02em;
  color: var(--teal-bright);
  margin: 0 0 var(--s-3);
}
.pagehead--tall h1 { max-width: 16ch; }
.pagehead--tall .lead { margin-top: var(--s-5); max-width: 54ch; }

.notfound__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.notfound__list li { border-bottom: 1px solid var(--hairline); }
.notfound__list a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-5);
  text-decoration: none;
  transition: padding-left var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.notfound__list a:hover { padding-left: var(--s-4); background: color-mix(in srgb, var(--purple) 5%, transparent); }
.notfound__name { font-family: var(--display); font-weight: 700; font-size: var(--t-lg); color: var(--ink); min-width: 7ch; }
.notfound__note { font-size: var(--t-sm); color: var(--ink-faint); }

/* ---------- 21. Page header (interior pages) ----------------------------- */

.pagehead {
  background: var(--night);
  color: var(--ink-invert);
  padding-block: clamp(var(--s-8), 10vw, var(--s-9)) clamp(var(--s-7), 7vw, var(--s-8));
  border-bottom: 1px solid var(--hairline-n);
}
.pagehead h1 { max-width: 18ch; }
.pagehead .lead { margin-top: var(--s-5); color: var(--ink-invert-soft); max-width: 56ch; }
.pagehead__where {
  font-size: var(--t-sm); color: var(--ink-invert-soft); margin-bottom: var(--s-5);
}
.pagehead__where a { color: #fff; }

/* ---------- 22. Prose block ---------------------------------------------- */

.prose p + p { margin-top: var(--s-4); }
.prose p { color: var(--ink-soft); }
.band--night .prose p { color: var(--ink-invert-soft); }

/* ---------- 23. Empty state ---------------------------------------------- */

.empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-2);
  color: var(--ink-soft);
}

/* ---------- 24. Map ------------------------------------------------------ */

.map { border-radius: var(--r-2); overflow: hidden; border: 1px solid var(--hairline); }
.map iframe { display: block; width: 100%; height: 300px; border: 0; }

/* Click-to-load: nothing reaches Google until the visitor asks for it, and
   the panel is a real drawing of the place rather than a grey rectangle. */
.map__ask {
  height: 300px; display: grid; place-content: center; justify-items: center;
  gap: var(--s-3); padding: var(--s-5); text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #F1ECF8 0%, #E7E0F2 100%);
}
.map__glyph {
  width: 232px; height: auto; max-width: 74%;
  border-radius: var(--r-1); overflow: hidden;
}
.map__land  { fill: #EDE8F6; }
.map__water { fill: #CFC6E4; }
.map__road {
  fill: none; stroke: #FBFAFE; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.map__road--minor { stroke-width: 2; stroke: #FBFAFE; opacity: .8; }
.map__halo { fill: var(--purple); opacity: .18; }
.map__pin  { fill: var(--purple); }
.map__copy { margin: 0; max-width: 34ch; font-size: var(--t-sm); color: var(--ink-faint); }
.map__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; }
.map__out { font-size: var(--t-sm); color: var(--purple); }

/* ---------- 25. Cross-page transitions ----------------------------------- */
/* Moving between pages should feel like the site staying put and the content
   changing, not like five separate documents. Naming the header and the footer
   lifts them out of the page snapshot, so they hold still while the body
   between them slides; browsers without cross-document view transitions just
   navigate as normal and lose nothing. */

@view-transition { navigation: auto; }

.nav  { view-transition-name: site-nav; }
.foot { view-transition-name: site-foot; }
main  { view-transition-name: page-body; }

/* The chrome is named only so it is excluded from the cross-fade. */
::view-transition-old(site-nav),  ::view-transition-new(site-nav),
::view-transition-old(site-foot), ::view-transition-new(site-foot) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(page-body) {
  animation: page-leave 200ms var(--ease-in-out) both;
}
::view-transition-new(page-body) {
  animation: page-enter 320ms var(--ease-out) both;
}

@keyframes page-leave {
  to { opacity: 0; transform: translateY(-10px); }
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(14px); }
}

/* The root cross-fade underneath is what covers the colour change between a
   night header and a light one, so it stays — just quicker. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 200ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- 26. One scroll-linked thing ---------------------------------- */
/* The treeline drifts a little slower than the page, the way a far horizon
   does from a moving train. Nothing else on the site reacts to scrolling. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__horizon {
      animation: horizon-drift linear both;
      animation-timeline: view();
      animation-range: exit -20% exit 100%;
    }
    @keyframes horizon-drift { to { transform: translateY(-22%); } }
  }
}