@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   ORIA Global — one page.
   Palette and type from "ORIA — Visual Universe v.1".
   Body sets in Lato Light at 1.75. One serif, one sans.
   Organic. Daylight, soil, the human hand — never a spacecraft.
   ═══════════════════════════════════════════════════════════ */

/* ── Type ─────────────────────────────────────────────────── */

@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-300.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-300.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;
  src:url(../assets/fonts/cormorant-garamond-300-italic.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;
  src:url(../assets/fonts/lato-300.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../assets/fonts/lato-700.woff2) format('woff2')}

/* ── Tokens ───────────────────────────────────────────────── */

:root{
  /* Palette — §2.1. Hexes exact. */
  --linen:#F5EEE1;      /* Raw Linen   */
  --gold:#D2853A;       /* Golden Root */
  --earth:#6B3A24;      /* Deep Earth  */
  --sage:#97A177;       /* Sage        */
  --sage-lift:#BBC894;  /* Sage, lifted for quiet text on the night arc (AA over the brighter globe, r17.1) */
  --moss:#556A31;       /* Moss        */
  --ink:#111311;        /* Ink         */
  --stone:#CFC8B8;      /* Stone       */

  /* Accents — under 5% of any surface, never behind type.
     The one exception is the Muted Gold glow behind the logo O. */
  --clay:#B0563A;
  --teal:#2E7A76;       /* the atmospheric limb, and nothing else */
  --muted-gold:#C9A24A;

  --serif:'Cormorant Garamond',Cormorant,Garamond,'Times New Roman',serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  /* Wordmark cap height, 72–150px. The hero's clear space is measured from it. */
  --mark-h:clamp(4.5rem,9.5vw,9.375rem);

  --lh:1.75;
  --measure:34rem;
  --gutter:clamp(1.5rem,6vw,5rem);
  --breath:clamp(4.5rem,14vh,11rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --daylight:0;

  /* The surface arc, §2.4. Orbit and soil are Ink-dominant; the human
     sections are Raw Linen. The switch happens once, coming up out of
     the soil, and everything that carries colour reads from here. */
  --page:var(--ink);
  --fg:var(--linen);
  --fg-soft:var(--stone);
  --fg-quiet:var(--sage-lift);
  --rule:rgba(207,200,184,.14);
  --panel:rgba(245,238,225,.035);
  --accent:var(--gold);
}

:root.is-daylight{
  --page:var(--linen);
  --fg:var(--ink);
  --fg-soft:var(--earth);
  --fg-quiet:var(--moss);
  --rule:rgba(17,19,17,.16);
  --panel:rgba(85,106,49,.05);
  --accent:var(--earth);
}

/* ── Reset ────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,li,figure,figcaption{margin:0;padding:0}
ul{list-style:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0}
/* Author styles beat the UA sheet, so `display:block` above would otherwise
   un-hide any [hidden] image. */
[hidden]{display:none !important}
summary::-webkit-details-marker{display:none}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* BODY — Lato Light · 18–27px · 1.75 · no tracking */
body{
  background:var(--page);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1.125rem,1rem + .55vw,1.6875rem);
  line-height:var(--lh);
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .9s var(--ease),color .9s var(--ease);
}

/* ── Utility ──────────────────────────────────────────────── */

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:0;left:0;z-index:100;
  padding:.75rem 1.25rem;background:var(--linen);color:var(--ink);
  font-family:var(--sans);font-size:.9rem;text-decoration:none;
  transform:translateY(-120%);
}
.skip-link:focus{transform:none}

:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Grain ────────────────────────────────────────────────────
   §2.5 — real grain, low opacity, and it must not tile. One large
   turbulence field covers the viewport at any size. */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root.is-daylight .grain{opacity:.04}

/* ── Language toggle ──────────────────────────────────────── */

.lang{
  position:fixed;top:0;right:0;z-index:40;
  display:flex;align-items:center;gap:.5rem;
  padding:clamp(1rem,2.5vw,1.75rem) clamp(1.1rem,3vw,2rem);
  font-size:.9375rem;
}
.lang__btn{
  cursor:pointer;padding:.35rem .15rem;
  color:var(--fg-soft);opacity:.55;
  transition:opacity .3s var(--ease),color .3s var(--ease);
}
.lang__btn:hover{opacity:.9}
.lang__btn.is-current{opacity:1;color:var(--fg)}
.lang__sep{color:var(--fg-soft);opacity:.35}
.lang--foot{position:static;padding:0}

/* ── Globe ────────────────────────────────────────────────── */

.globe{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background:var(--ink);
  opacity:calc(1 - var(--daylight));
}
/* Stage one. Paints with the first frame of CSS, before any JS or texture. */
.globe__seed{
  position:absolute;top:50%;left:50%;
  width:var(--globe-size,min(92vmin,780px));height:var(--globe-size,min(92vmin,780px));
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#16191C 0%,#0E1114 62%,#0A0C0E 100%);
  box-shadow:
    0 0 1px 1px rgba(46,122,118,.42),
    0 0 26px 3px rgba(46,122,118,.20),
    0 0 90px 18px rgba(46,122,118,.10);
  transition:opacity .6s linear;
}
.globe.is-lit .globe__seed{opacity:0}
.globe__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .6s linear;
}
.globe.is-ready .globe__canvas{opacity:1}
.globe__still{
  position:absolute;top:50%;left:50%;
  width:var(--globe-size,min(92vmin,780px));height:auto;
  transform:translate(-50%,-50%);
}
.scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 50%,rgba(17,19,17,.94) 0%,rgba(17,19,17,.80) 45%,rgba(17,19,17,.62) 100%);
  opacity:calc(var(--scrim,0) * (1 - var(--daylight)));
}

/* ── Sections and rhythm ──────────────────────────────────── */

.s{
  position:relative;z-index:2;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--breath) var(--gutter);
}
.s__in{width:100%;max-width:var(--measure);margin-inline:auto}
.s__in--wide{max-width:min(92vw,64rem)}

/* §4 — content moves right, then left, then centre down the page, like a
   timeline, instead of sitting centred throughout. Collapses to a single
   stack on phones. */
@media (min-width:56rem){
  .s__in--right{margin-left:auto;margin-right:clamp(2rem,8vw,7rem)}
  .s__in--left{margin-right:auto;margin-left:clamp(2rem,8vw,7rem)}
  .s__in--panel{margin-inline:auto}
}

/* §4 — a connecting through-line carrying the eye down between sections. */
.s::before{
  content:"";
  position:absolute;left:50%;top:0;
  width:1px;height:var(--breath);
  transform:translateX(-50%);
  background:linear-gradient(var(--rule),transparent);
  opacity:.85;
  pointer-events:none;
}
.s--hero::before{display:none}

/* §4 — a soft panel behind section titles so the move between sections is
   visible instead of one continuous surface. */
/* §5 — the wash marks a change of section, never every element. It sits
   behind the chapter markers alone, thickest at the centre and gone before
   it reaches an edge, so it reads as light on the surface, not a panel. */
.s__in > .eyebrow,
.s__in > .marker{
  position:relative;
}
.s__in > .marker::before{
  content:"";
  position:absolute;
  inset:-.9em -3.5em;
  z-index:-1;
  background:radial-gradient(ellipse 100% 120% at 50% 50%,
    rgba(85,106,49,.16) 0%,
    rgba(85,106,49,.07) 55%,
    rgba(85,106,49,0) 100%);
  pointer-events:none;
}
:root.is-daylight .s__in > .marker::before{
  background:radial-gradient(ellipse 100% 120% at 50% 50%,
    rgba(85,106,49,.10) 0%,
    rgba(85,106,49,.04) 55%,
    rgba(85,106,49,0) 100%);
}

.reveal{opacity:1}
.js .reveal{
  opacity:0;transform:translateY(1.5rem);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.js .reveal.is-in{opacity:1;transform:none}

/* ── Typography roles ─────────────────────────────────────── */

/* LABELS — Lato Regular 400 · 15–19px · +400 tracking · caps */
.marker,.status,.caption,.field__label,.hub__state,.hub__place,
.branch__status,.foot__link,.lang,.scrollcue__word,.counter__label,
.fm__rootLabel,.person__role,.fm__tool{
  font-family:var(--sans);font-weight:400;
  letter-spacing:.4em;text-transform:uppercase;
  line-height:1.8;
}
.marker{
  font-size:clamp(.9375rem,.9rem + .2vw,1.1875rem);
  color:var(--fg-quiet);
  margin-bottom:clamp(1.75rem,4vh,3rem);
}
.marker--sub{margin-top:clamp(2.5rem,5vh,3.5rem);margin-bottom:1rem;font-size:.9375rem}

/* SUB-TITLES — Lato Bold 700 · 28–46px · 1.2 · +220 tracking · caps */
.eyebrow{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.75rem,1.45rem + 1.35vw,2.875rem);
  letter-spacing:.22em;text-transform:uppercase;
  line-height:1.2;
  color:var(--fg);
  margin-bottom:clamp(1.75rem,4vh,2.75rem);
}

/* SECOND TITLES — Cormorant Garamond Regular 400 · 36–52px · 1.15 · +10
   §2.6 — a soft bloom so words lift off the background. Light, not a box. */
.serif-moment{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.25rem,1.8rem + 2vw,3.25rem);
  line-height:1.15;
  letter-spacing:.01em;
  text-wrap:balance;
  color:var(--fg);
  text-shadow:0 0 38px rgba(245,238,225,.20), 0 0 90px rgba(245,238,225,.10);
}
:root.is-daylight .serif-moment{text-shadow:none}
.serif-moment--sm{font-size:clamp(2rem,1.7rem + 1.35vw,2.75rem)}
.serif-moment__turn{display:block;color:var(--fg-soft);margin-top:.35em}

/* QUOTES — Cormorant Garamond Light Italic 300 · 36–48px · 1.15
   Lowercase, and no full stop. That is part of the voice, not a slip. */
.quote{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(2rem,1.65rem + 1.5vw,3rem);
  line-height:1.15;
  text-transform:lowercase;
  color:var(--fg-soft);
  margin-top:clamp(2.25rem,5vh,3.5rem);
  text-wrap:balance;
}

.body{
  max-width:var(--measure);
  line-height:var(--lh);
  color:var(--fg-soft);
  margin-top:clamp(1.35rem,3vh,2.25rem);
}
.body--lede{color:var(--fg)}
.body--quiet{color:var(--fg-quiet)}
.body--weight{
  color:var(--fg);
  border-left:1px solid rgba(210,133,58,.38);
  padding-left:clamp(1rem,2.5vw,1.6rem);
}
.status{
  font-size:clamp(.9375rem,.9rem + .15vw,1.0625rem);
  color:var(--gold);
  margin-top:clamp(2rem,4vh,3rem);
}
.caption{
  font-size:clamp(.9375rem,.9rem + .1vw,1rem);
  color:var(--fg-quiet);margin-top:1.5rem;
}

/* ── Racine · hero ────────────────────────────────────────── */

/* The name sits in the sky above the curve of the planet, the way it does on
   the Instagram page. The gradient keeps it legible when the Earth is bright
   underneath — this screen gets projected, and it has to hold at three metres. */
.s--hero{
  min-height:100svh;
  justify-content:flex-start;
  /* the wordmark sits ON the face of the planet, matching the logo
     artwork — the horizon curves through the upper third above it */
  padding-top:min(36svh,26rem);
  text-align:center;
}
.s--hero .s__in{max-width:min(90vw,58rem);position:relative;z-index:1}
/* the shade pools under the letters themselves and travels with them */
/* not a box: a continuous vignette with no plateau and no edge — the
   falloff never sits flat, so there is nothing for the eye to outline.
   It exists because the hub glow can drift behind the tagline. */
.s--hero .s__in::before{
  content:"";position:absolute;inset:-30% -34%;z-index:-1;
  background:radial-gradient(ellipse at center,
    rgba(17,19,17,.68) 0%,
    rgba(17,19,17,.50) 45%,
    rgba(17,19,17,.20) 70%,
    rgba(17,19,17,0) 88%);
  pointer-events:none;
}
.s--hero::after{
  content:"";
  position:absolute;inset:0;
  /* only the band of space at the top and the foot are eased, plus a soft
     pool of shade under the letters themselves — the planet's surface stays
     visible behind and around the letterforms */
  background:
    linear-gradient(to bottom,
      rgba(17,19,17,.34) 0%,
      rgba(17,19,17,.10) 16%,
      rgba(17,19,17,0) 34%,
      rgba(17,19,17,0) 78%,
      rgba(17,19,17,.16) 90%,
      rgba(17,19,17,.42) 100%);
  pointer-events:none;z-index:0;
}

.wordmark{
  position:relative;
  display:inline-block;
  width:calc(var(--mark-h) * 3.0504);
  min-width:120px;
  margin-inline:auto;
}
.wordmark__mark{
  position:relative;z-index:1;
  display:block;
  width:100%;height:var(--mark-h);
  background-color:var(--linen);
  -webkit-mask:url(../assets/img/oria-wordmark.svg) center/contain no-repeat;
  mask:url(../assets/img/oria-wordmark.svg) center/contain no-repeat;
}
/* §6 — the Mission Ally treatment: a thin diagonal streak of white light
   crossing the O, lower-left to upper-right, brightest through the counter
   and falling off softly at both ends. Specular, not a glow: it sits ON the
   letter (above the mask layer), carries no warmth, and stays narrow. The
   O's centre is at 16.56% across the wordmark. */
/* The specular on the O — the Mission Ally treatment. A thin white light
   ON the letterform itself, riding the upper-right arc of the ring and
   angled square to the earth's sun, which stands over the right shoulder. */
.wordmark::before{
  content:"";
  position:absolute;z-index:2;
  left:16.56%;top:50%;
  width:calc(var(--mark-h) * 0.92);height:calc(var(--mark-h) * 0.92);
  transform:translate(calc(-50% + var(--mark-h)*.29), calc(-50% - var(--mark-h)*.29)) rotate(38deg);
  background:linear-gradient(to bottom,
    transparent 45.5%,
    rgba(255,255,255,.12) 48%,
    rgba(255,255,255,.88) 50%,
    rgba(255,255,255,.12) 52%,
    transparent 54.5%);
  -webkit-mask:linear-gradient(to right, transparent 26%, #000 42%, #000 60%, transparent 74%);
  mask:linear-gradient(to right, transparent 26%, #000 42%, #000 60%, transparent 74%);
  pointer-events:none;
}
.hero__line{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.35rem,1.05rem + 1.4vw,2.125rem);
  line-height:1.4;letter-spacing:.02em;
  color:var(--linen);
  text-shadow:0 1px 22px rgba(0,0,0,.55);
  margin-top:calc(var(--mark-h) * .55);   /* raised — §5. Clear space now ~half a cap */
  text-wrap:balance;
}
.scrollcue{
  position:absolute;left:50%;bottom:clamp(1.75rem,5vh,3.5rem);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  z-index:1;
}
.scrollcue__word{font-size:.9375rem;color:var(--linen)}
.scrollcue__line{
  width:1px;height:clamp(2.25rem,5vh,3.5rem);
  background:linear-gradient(var(--fg-quiet),transparent);
  transform-origin:top;
  animation:cue 3.4s var(--ease) infinite;
}
@keyframes cue{
  0%,100%{transform:scaleY(.35);opacity:.35}
  50%{transform:scaleY(1);opacity:.9}
}
.s--recognition{text-align:center}
/* r20.4 — wider measure so the statements breathe, and a real break
   between the statements and the question */
.s--recognition .s__in{max-width:min(92vw,62rem)}
.recognition__second{display:block;margin-top:.35em}
.s--recognition .recognition__ask{margin-top:1.15em}
.globe-hint{margin-top:2rem}

/* ── Élévation · branches ─────────────────────────────────── */

.branches{border-top:1px solid var(--rule)}
.branch{
  display:grid;grid-template-columns:1fr auto;
  gap:.15rem clamp(1rem,3vw,2rem);
  padding:clamp(1.25rem,3vh,1.9rem) 0;
  border-bottom:1px solid var(--rule);
}
.branch__name{
  grid-column:1;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);
  line-height:1.4;color:var(--fg);
}
.branch__status{
  grid-column:2;grid-row:1;align-self:baseline;
  font-size:.9375rem;letter-spacing:.28em;
  line-height:2.1;color:var(--fg-quiet);white-space:nowrap;
}
.branch__line{grid-column:1/-1;font-size:.92em;line-height:1.7;color:var(--fg-soft)}

/* ── Expansion · hubs ─────────────────────────────────────── */

.hub__name{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.25rem);
  line-height:1.15;letter-spacing:.01em;color:var(--fg);
}
.hub__place{display:block;font-size:.9375rem;color:var(--fg-quiet);margin-top:.85rem}
.hub__state{
  display:flex;align-items:center;gap:.7rem;
  font-size:.9375rem;
  margin-top:1.1rem;margin-bottom:clamp(1.5rem,3.5vh,2.5rem);
}
.hub__dot{width:7px;height:7px;border-radius:50%;flex:none}
.hub__state--bright{color:var(--muted-gold)}
.hub__state--bright .hub__dot{
  background:#E8C46A;
  box-shadow:0 0 8px 2px rgba(201,162,74,.6),0 0 18px 6px rgba(201,162,74,.26);
  animation:breathe 5.5s ease-in-out infinite;
}
.hub__state--ember{color:var(--fg-quiet)}
.hub__state--ember .hub__dot{
  background:#8A6B32;
  box-shadow:0 0 5px 1px rgba(138,107,50,.42);
  animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.72}50%{opacity:1}}

.house{border-top:1px solid var(--rule)}
.house:last-of-type{border-bottom:1px solid var(--rule)}
.house__name{
  cursor:pointer;list-style:none;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,1.05rem + .55vw,1.5rem);
  line-height:1.5;color:var(--fg);
  padding:1rem 1.6rem 1rem 0;
  position:relative;
}
.house__name::after{
  content:"+";position:absolute;right:.2rem;top:50%;
  transform:translateY(-50%);color:var(--fg-quiet);font-family:var(--sans);
}
.house[open] .house__name::after{content:"–"}
.house__body{padding-bottom:1.4rem}
.house__dates{font-size:.92em}

/* ── The soil · Field Map ─────────────────────────────────── */

.s--fieldmap{min-height:auto;padding-block:clamp(3rem,9vh,7rem)}
.fm__head{margin-bottom:clamp(2rem,5vh,3.5rem)}
.fm__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,5vw,3.5rem);
  align-items:start;
}
.fm__stage{min-height:22rem}
.fm__q{opacity:1}
.js .fm__q{opacity:0;transform:translateY(.8rem);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .fm__q.is-in{opacity:1;transform:none}

.fm__question{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.75rem,1.4rem + 1.6vw,2.6rem);
  line-height:1.15;color:var(--fg);
  text-wrap:balance;
}
.fm__hint{
  font-family:var(--sans);font-weight:400;
  font-size:.9375rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-quiet);margin-top:1rem;line-height:1.8;
}
.fm__options{margin-top:clamp(1.5rem,3.5vh,2.25rem);display:grid;gap:.55rem}
.fm__opt{
  position:relative;width:100%;text-align:left;cursor:pointer;
  display:block;
  padding:.85rem clamp(1rem,2.5vw,1.4rem);
  padding-right:2.6rem;
  border:1px solid var(--rule);
  color:var(--fg-soft);
  line-height:1.5;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.fm__opt:hover{border-color:rgba(201,162,74,.5);color:var(--fg)}
.fm__opt.is-on{
  border-color:var(--muted-gold);
  background:rgba(201,162,74,.09);
  color:var(--fg);
}
.fm__optLabel{display:block;font-size:1.02rem}
.fm__optNote{
  display:block;margin-top:.3rem;
  font-size:.9rem;line-height:1.55;color:var(--fg-soft);
}
.fm__order{
  position:absolute;right:1rem;top:.9rem;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.1em;
  color:var(--muted-gold);
}
.fm__text{
  width:100%;margin-top:1.5rem;padding:.9rem 1rem;
  font-family:var(--sans);font-weight:300;font-size:1.05rem;line-height:1.7;
  color:var(--fg);background:transparent;
  border:1px solid var(--rule);border-radius:0;resize:vertical;
}
.fm__text:focus{outline:none;border-color:var(--muted-gold)}
.fm__nav{display:flex;align-items:center;gap:1.25rem;margin-top:clamp(1.5rem,3.5vh,2.25rem);flex-wrap:wrap}
.fm__nav-btn{
  cursor:pointer;font-family:var(--sans);font-size:.9375rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--fg-quiet);
  padding:.5rem 0;
}
.fm__nav-btn:hover{color:var(--fg)}
.btn:disabled{opacity:.35;cursor:not-allowed}

/* The result — an editorial page, not a dashboard. */
.fm__result{display:none}
.is-result .fm__result{display:block;margin-top:clamp(2.5rem,6vh,4rem)}
.is-result .fm__grid{display:none}
/* the result carries its own "Your Field Map" heading — hiding the intro
   head is what stops the title appearing twice */
.is-result .fm__head{display:none}
.fm__resultHead{
  font-family:var(--sans);font-weight:700;
  font-size:.9375rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-quiet);
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.fm__portrait{margin:clamp(1.5rem,4vh,2.5rem) 0}
.fm__portrait canvas{
  display:block;width:100%;max-width:34rem;margin-inline:auto;
  aspect-ratio:4/5;border:1px solid var(--rule);
}
.fm__root{margin-top:1.75rem}
/* Muted Gold reads at 7.8:1 on Ink but only 2.1:1 on Raw Linen, so on the
   light surface this label drops to Deep Earth. */
.fm__rootLabel{font-size:.875rem;color:var(--muted-gold);margin-bottom:.2rem}
:root.is-daylight .fm__rootLabel{color:var(--earth)}
:root.is-daylight .fm__near li::before{background:var(--moss)}
.fm__near{margin-top:1.25rem;display:grid;gap:.6rem}
.fm__near li{
  padding-left:1.1rem;position:relative;
  color:var(--fg-soft);line-height:1.6;
}
.fm__near li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:5px;height:5px;border-radius:50%;background:var(--muted-gold);
}
.fm__closing{margin-top:clamp(2rem,5vh,3rem)}
.fm__book{
  margin-top:clamp(2.5rem,6vh,4rem);
  padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--rule);background:var(--panel);
}
.fm__tools{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:clamp(2rem,5vh,3rem)}
.fm__tool{
  cursor:pointer;font-size:.875rem;color:var(--fg-quiet);
  border-bottom:1px solid var(--rule);padding-bottom:.25rem;
}
.fm__tool:hover{color:var(--fg);border-bottom-color:var(--muted-gold)}

/* ── Intégration · the pillars ────────────────────────────── */

/* §6.1 — an even weave. No hierarchy of size or position, and no first slot
   that reads as the leader. */
.weave{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
  margin-top:clamp(2.5rem,6vh,4rem);
}
.person{border:1px solid var(--rule);background:var(--panel);height:100%}
.person__head{
  cursor:pointer;list-style:none;display:block;
  padding:clamp(1rem,2vw,1.4rem);
}
.person__portrait{
  display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(160deg,rgba(85,106,49,.18),rgba(107,58,36,.14));
  border:1px solid var(--rule);
}
.person__portrait img{width:100%;height:100%;object-fit:cover}
.person__name{
  display:block;margin-top:1rem;
  font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.35;color:var(--fg);
}
.person__role{display:block;font-size:.8125rem;color:var(--fg-quiet);margin-top:.4rem}
.person__body{padding:0 clamp(1rem,2vw,1.4rem) clamp(1rem,2vw,1.4rem)}
.person__body .body{margin-top:0;font-size:.95rem}
.person__link{
  display:inline-block;margin-top:1rem;
  font-family:var(--sans);font-weight:400;
  font-size:.8125rem;letter-spacing:.18em;
  color:var(--fg-quiet);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:.15rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.person__link:hover{color:var(--fg);border-bottom-color:var(--accent)}

/* These two are built from js/config.js, so with scripting off there is
   nothing to show. Everything else on the page reads without JavaScript;
   an empty heading over an empty list would just look broken. */
html:not(.js) .weave,
html:not(.js) #integration-counter{display:none}

/* ── Intégration · the counter ────────────────────────────── */

/* Four figures, and they must never break 3 + 1 — an orphaned number reads as
   a mistake. Two across, then four, and nothing in between. */
.counter{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3rem);
  margin-top:clamp(2rem,5vh,3rem);
}
@media (min-width:48rem){
  .counter{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.counter__cell{text-align:center}
.counter__n{
  display:block;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,2rem + 4vw,5.5rem);
  line-height:1;color:#FFFFFF;
  text-shadow:0 0 16px rgba(201,162,74,.85), 0 0 44px rgba(201,162,74,.40);
}
.counter__label{
  display:block;margin-top:.9rem;
  font-size:.8125rem;letter-spacing:.28em;color:var(--fg-quiet);
}

/* ── Intégration · form, held, FAQ, triad ─────────────────── */

.form{margin-top:clamp(2.25rem,5vh,3.25rem)}
.field{margin-bottom:clamp(1.35rem,3vh,1.9rem)}
.field__label{display:block;font-size:.9375rem;color:var(--fg-quiet);margin-bottom:.6rem}
.field__input{
  width:100%;padding:.85rem .1rem;
  font-family:var(--sans);font-weight:300;font-size:1.15rem;line-height:1.7;
  color:var(--fg);background:transparent;
  border:0;border-bottom:1px solid var(--rule);border-radius:0;
  transition:border-color .3s var(--ease);
}
.field__input::placeholder{color:var(--fg-quiet);opacity:.55}
.field__input:hover{border-bottom-color:var(--fg-quiet)}
.field__input:focus{outline:none;border-bottom-color:var(--accent)}
.field__input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.field__input[aria-invalid="true"]{border-bottom-color:var(--clay)}
.field__error{
  font-family:var(--sans);font-weight:400;font-size:.9375rem;line-height:1.7;
  color:#E0A183;margin-top:.6rem;
}
/* Clay is 4.3:1 on Raw Linen — just under AA for text this size. It stays as
   the underline on the invalid field, where 3:1 is the bar, and the message
   itself takes Deep Earth. */
:root.is-daylight .field__error{color:var(--earth)}
.field__error:empty{margin-top:0}

.btn{
  cursor:pointer;
  margin-top:clamp(1rem,2.5vh,1.75rem);
  padding:1rem clamp(2rem,5vw,3rem);
  font-family:var(--sans);font-weight:400;
  font-size:.9375rem;letter-spacing:.4em;text-transform:uppercase;
  line-height:1.8;
  color:var(--fg);
  border:1px solid var(--fg);
  display:inline-block;text-decoration:none;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.btn:hover{background:var(--fg);color:var(--page)}
.form__done{
  font-family:var(--serif);font-weight:400;font-size:1.35rem;line-height:1.6;
  color:var(--accent);margin-top:1.5rem;
}

.held{
  max-width:var(--measure);line-height:var(--lh);color:var(--fg-soft);
  padding-left:clamp(1rem,2.5vw,1.6rem);
  border-left:1px solid rgba(151,161,119,.32);
  margin-top:clamp(1.6rem,3.5vh,2.4rem);
}

.faq{border-bottom:1px solid var(--rule)}
.faq:first-of-type{border-top:1px solid var(--rule)}
.faq__q{
  cursor:pointer;list-style:none;position:relative;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);
  line-height:1.5;color:var(--fg);
  padding:1.1rem 2rem 1.1rem 0;
}
.faq__q::after{
  content:"+";position:absolute;right:.2rem;top:50%;
  transform:translateY(-50%);color:var(--fg-quiet);font-family:var(--sans);
}
.faq[open] .faq__q::after{content:"–"}
.faq .body{margin-top:0;padding-bottom:1.4rem}

.s--triad{text-align:center}
.s--triad .s__in{max-width:min(90vw,50rem)}
.triad{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.6rem,1.05rem + 2.1vw,3rem);
  line-height:1.35;letter-spacing:.01em;color:var(--fg);
}
.triad span{display:block}
.triad span+span{margin-top:.3em}
.branches__close{margin-top:clamp(1.6rem,4vh,2.6rem)}
/* r22 §2 — the coming-soon chip over the matchmaking framing */
.myc-match__soon{
  width:fit-content;margin-top:clamp(2rem,5vh,3rem);
  font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted-gold);border:1px solid var(--rule);
  padding:.35em .9em;border-radius:2em;
}
.house--more{margin-top:.9rem}
.house--more .house__name{font-size:1rem}
/* r20 §3 — the closing triad takes its capitals and its full stop.
   The copy was correct in the JSON since r14; .quote's lowercase
   transform was overriding it — which is why three rounds of copy
   edits changed nothing on screen. */
.hands__triad{text-transform:none}

/* ── Footer ───────────────────────────────────────────────── */

.foot{
  position:relative;z-index:2;
  padding:clamp(2.5rem,6vh,4rem) var(--gutter) clamp(3rem,7vh,4.5rem);
  /* the page closes in the dark of the hands — the footer carries it
     through instead of snapping back to daylight */
  background:var(--ink);
  --fg:var(--linen);--fg-soft:var(--stone);--fg-quiet:var(--sage);
  --rule:rgba(207,200,184,.14);
  border-top:0;
}
.foot__in{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(1.25rem,4vw,2.5rem);justify-content:center;
}
.foot__link{
  font-size:.9375rem;color:var(--fg-soft);text-decoration:none;
  transition:color .3s var(--ease);
}
.foot__link:hover{color:var(--fg)}

/* ── Small screens ────────────────────────────────────────── */

@media (max-width:36rem){
  :root{--measure:100%}
  .s{min-height:auto;padding-block:clamp(5rem,16vh,8rem)}
  /* padding-block above would drag the wordmark back into the sky */
  .s--hero{min-height:100svh;padding-top:min(34svh,24rem)}
  .branch{grid-template-columns:1fr}
  .branch__status{grid-column:1;grid-row:3;line-height:1.9;margin-top:.5rem}
  .fm__stage{min-height:auto}
  #fieldmap-roots{aspect-ratio:1/1;max-height:52vh}
  .counter__n{font-size:clamp(2.75rem,10vw,3.5rem)}
}

/* ── The leaving invitation ───────────────────────────────────
   Ships disabled. Desktop only, once ever, and it reads as an open
   door rather than a grab at the sleeve. */
.leaving{
  position:fixed;right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);
  z-index:70;width:min(92vw,26rem);
  padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--page);
  border:1px solid var(--rule);
  box-shadow:0 18px 60px rgba(0,0,0,.38);
  opacity:0;transform:translateY(1rem);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.leaving.is-in{opacity:1;transform:none}
.leaving .body{margin-top:1rem}
.leaving__row{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.5rem}
.leaving__close{
  cursor:pointer;font-family:var(--sans);font-size:.9375rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--fg-quiet);
}
.leaving__close:hover{color:var(--fg)}

/* ── Gatherings ───────────────────────────────────────────── */

.s--events{min-height:auto}
.ev{
  display:grid;grid-template-columns:1fr;
  gap:clamp(1.5rem,3.5vw,3rem);
  margin-top:clamp(2rem,5vh,3rem);
  align-items:start;
}
@media (min-width:56rem){
  .ev{grid-template-columns:1.05fr .95fr}
  .ev__panel{order:0;position:sticky;top:clamp(1rem,4vh,3rem)}
  .ev__list{order:1}
}
.ev__group{
  font-family:var(--sans);font-weight:400;
  font-size:.9375rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--fg-quiet);line-height:1.8;
  padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.ev__item + .ev__item .ev__row,
.ev__group + .ev__item .ev__row{border-top:0}
.ev__row{
  width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;
  padding:1.1rem .2rem;
  border:0;border-bottom:1px solid var(--rule);
  transition:background-color .25s var(--ease);
}
.ev__row:hover{background:var(--panel)}
.ev__row[aria-expanded="true"] .ev__name{color:var(--accent)}
.ev__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,1.15rem + .8vw,1.8rem);
  line-height:1.3;color:var(--fg);
  transition:color .25s var(--ease);
}
.ev__meta{
  grid-column:1;
  font-size:.95rem;color:var(--fg-soft);line-height:1.6;
}
.ev__marks{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  display:flex;flex-direction:column;gap:.3rem;align-items:flex-end;
}
.ev__mark{
  font-family:var(--sans);font-weight:400;
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-quiet);white-space:nowrap;
}
.ev__mark--upcoming{color:var(--accent)}

.ev__detail{
  overflow:hidden;
  padding:clamp(1.25rem,2.5vw,2rem);
  border:1px solid var(--rule);
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(85,106,49,.10) 0%, rgba(85,106,49,.04) 55%, rgba(85,106,49,0) 100%);
}
.js .ev__detail{animation:ev-open .45s var(--ease)}
@keyframes ev-open{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.ev__list .ev__detail{margin:.75rem 0 1.25rem}
.ev__detail .body{margin-top:1.1rem}
.ev__detail .body:first-child{margin-top:0}
.ev__poster{margin-bottom:1.25rem}
.ev__poster img{width:100%;height:auto;border:1px solid var(--rule)}
.ev__credit{
  margin-top:1.25rem;
  font-family:var(--sans);font-size:.85rem;letter-spacing:.14em;
  color:var(--fg-quiet);
}
.ev__credit a{color:var(--fg-soft);text-decoration:none;border-bottom:1px solid var(--rule)}
.ev__credit a:hover{color:var(--fg)}

/* ── The gallery — native scroll-snap, no library ─────────── */

.gal{margin-top:1.5rem}
.gal__strip{
  display:flex;gap:.6rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* it reads as continuing, not ending */
  -webkit-mask:linear-gradient(to right,#000 88%,transparent);
  mask:linear-gradient(to right,#000 88%,transparent);
}
.gal__strip::-webkit-scrollbar{display:none}
.gal__cell{
  flex:0 0 auto;scroll-snap-align:start;
  height:clamp(11rem,30vw,17rem);
  margin:0;
}
.gal__cell img{height:100%;width:auto;display:block;border:1px solid var(--rule)}
.gal__track{
  height:2px;margin-top:.75rem;
  background:var(--rule);overflow:hidden;position:relative;
}
.gal__bar{
  display:block;height:100%;width:20%;
  background:var(--muted-gold);
  will-change:transform;
}

/* ── The Instagram cards — ours, not theirs ───────────────── */

.reels{
  display:grid;grid-template-columns:1fr;gap:1rem;
  margin-top:1.5rem;
}
@media (min-width:40rem){.reels{grid-template-columns:1fr 1fr}}
.reel{
  display:flex;flex-direction:column;gap:.9rem;
  padding:1rem;
  border:1px solid var(--rule);text-decoration:none;
  background:radial-gradient(ellipse 120% 100% at 50% 0%,
    rgba(85,106,49,.08) 0%, rgba(85,106,49,0) 100%);
  transition:border-color .25s var(--ease);
}
.reel:hover{border-color:var(--muted-gold)}
.reel__still{position:relative;display:block;overflow:hidden}
.reel__still img{width:100%;height:auto;display:block}
.reel__play{
  position:absolute;inset:0;margin:auto;
  width:3rem;height:3rem;
  border-radius:50%;
  background:rgba(17,19,17,.35);
  display:flex;align-items:center;justify-content:center;
}
.reel__play::after{
  content:"";display:block;margin-left:.3rem;
  border-style:solid;border-width:.55rem 0 .55rem .9rem;
  border-color:transparent transparent transparent rgba(245,238,225,.85);
}
.reel__pull{
  font-family:var(--serif);font-weight:400;
  font-size:1.15rem;line-height:1.5;color:var(--fg);
}
.reel__foot{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-quiet);
}
.reel__glyph{width:1em;height:1em;color:var(--muted-gold)}

/* ── Contact ──────────────────────────────────────────────── */

.contact{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
  margin-top:clamp(2rem,5vh,3rem);
}
@media (min-width:56rem){.contact{grid-template-columns:.9fr 1.1fr}}
.contact__globe{margin:0}
.contact__globe img{
  width:100%;max-width:26rem;margin-inline:auto;display:block;
  border-radius:50%;
}
.contact__msg{
  resize:vertical;min-height:7rem;
  border:1px solid var(--rule);padding:.85rem;
}
.contact__msg:focus{border-color:var(--accent)}

/* ── The hands ────────────────────────────────────────────────
   The one human image on the page, and the last thing before the
   footer. Ink ground on purpose: the layers composite with
   mix-blend-mode screen, which makes their near-black grounds vanish
   while keeping every bit of haze and rim light. */

.s--hands{
  position:relative;
  /* twice the scroll — the gesture plays across the whole descent.
     No overflow:hidden here: it would make this box the sticky frame's
     scroll container and the pin would never engage. The frame box
     below clips its own oversized image. */
  min-height:260svh;
  background:var(--ink);
  padding:0;
  display:block;
}
/* §3.2 — the image emerges from the Raw Linen page above it and returns
   to it below: eased fades at both seams, never a hard line */
.s--hands::before{
  /* the generic .s::before is a 1px hairline — undo it fully here */
  content:"";position:absolute;top:0;left:0;right:0;width:auto;height:18svh;
  transform:none;opacity:1;z-index:3;
  pointer-events:none;
  background:linear-gradient(to bottom,
    var(--linen) 0%,
    rgba(245,238,225,.86) 22%,
    rgba(245,238,225,.55) 46%,
    rgba(245,238,225,.24) 68%,
    rgba(245,238,225,.07) 86%,
    rgba(245,238,225,0) 100%);
}

/* the frame pins fullscreen while the section's scroll drives the scrub */
.hands{position:sticky;top:0;height:100svh;width:100%;overflow:hidden}
/* one photographic frame at a time, full-bleed, composited normally —
   no blending, no masks, nothing to ghost or glitch */
.hands__frame{
  position:absolute;left:50%;top:50%;
  width:max(100vw, calc(100svh * 1.798));   /* cover the pinned viewport */
  max-width:none;height:auto;
  translate:-50% -50%;
  pointer-events:none;
}

.hands__copy{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  z-index:2;width:100%;
  text-align:center;
  /* the words sit clear above the Raw Linen fade at the foot */
  padding:0 var(--gutter) clamp(4.5rem,10vh,7rem);
  max-width:min(90vw,46rem);
}
/* the section is Ink whatever the page surface is doing — the type says so too */
.s--hands .body--quiet{color:var(--sage)}
.s--hands .body--lede{color:var(--linen)}
.hands__triad{color:var(--stone);margin-top:clamp(1.5rem,3.5vh,2.5rem)}
/* a scrim band behind the copy, never a flat overlay across the image */
/* AA against the LIGHTEST pixel of the photograph, not the average — the
   plateau must cover the whole copy block, only the outer edges feather. */
.hands__copy::before{
  content:"";position:absolute;top:-34%;bottom:-24%;left:-100vw;right:-100vw;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(17,19,17,0) 0%, rgba(17,19,17,.90) 22%,
    rgba(17,19,17,.90) 88%, rgba(17,19,17,0) 100%);
}


/* ── Capture mode (?still=1) ──────────────────────────────── */
.is-capturing main,.is-capturing .foot,.is-capturing .lang,
.is-capturing .scrim,.is-capturing .skip-link,.is-capturing .grain{display:none !important}
.is-capturing body{background:var(--ink) !important}
.is-capturing .globe{opacity:1 !important}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js .reveal,.js .fm__q{opacity:1;transform:none}
  .scrollcue__line{opacity:.6}
}

/* ── The one consent choice, at the end of the Field Map ── */
.fm__consent {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  margin-top: 1.4rem;
  cursor: pointer;
  color: var(--fg-soft);
  font-size: .92rem;
  line-height: 1.55;
  max-width: 34rem;
}
.fm__consent input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .18rem;
  border: 1px solid rgba(201, 162, 74, .55);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.fm__consent input:checked { background: rgba(201, 162, 74, .18); }
.fm__consent input:checked::after {
  content: "";
  position: absolute;
  inset: 2px 3px 4px 3px;
  border-right: 2px solid #C9A24A;
  border-bottom: 2px solid #C9A24A;
  transform: rotate(40deg) scale(.9);
}
.fm__consent input:focus-visible {
  outline: 2px solid rgba(201, 162, 74, .7);
  outline-offset: 2px;
}



/* ── §5-round3: the sky's edges fall to near-black ──
   A quiet vignette on the globe layer only — the brand surfaces
   below keep their ink. */
#globe::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 130% 120% at 50% 42%,
      transparent 52%,
      rgba(2,3,2,.30) 78%,
      rgba(2,3,2,.55) 100%);
}

/* the bot trap takes no part in layout — it was widening the page on phones */
.honeypot{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Decorative washes (the chapter markers' glow) bleed past their text by
   design; on a phone that bleed was widening the whole document. Clip is
   not a scroll container, so the sticky events panel keeps working. */
main{overflow-x:clip}


/* ── §2.2 round 5: the panel clips, the scroller scrolls, the page never ──
   Belt and braces on every event container, so no future child can widen
   the document. */
.ev__detail{max-width:100%;overflow:hidden}
#events-panel{max-width:100%;overflow:hidden}
.gal{max-width:100%}
.gal__strip{max-width:100%;overflow-x:auto}
.gal__strip > *{flex:0 0 auto}

/* ── The Québec panel ─────────────────────────────────────────
   Desktop: hovering to the left of the earth, the globe visible
   and lit beside it. Phone: a sheet over the lower three quarters,
   the globe dimmed — never hidden — above it. */
.qpanel{
  position:fixed;z-index:34;
  top:clamp(1rem,4vh,3rem);bottom:clamp(1rem,4vh,3rem);left:clamp(1rem,3.5vw,3rem);
  width:min(30rem,42vw);
  display:flex;flex-direction:column;
  background:linear-gradient(160deg, rgba(17,19,17,.96), rgba(17,19,17,.90));
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.qpanel__head{
  display:flex;align-items:center;gap:1rem;
  padding:1.1rem 1.25rem .9rem;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.qpanel__grip{display:none}
.qpanel__title{
  font-family:var(--serif);font-weight:300;
  font-size:1.3rem;letter-spacing:.02em;color:var(--fg);
  flex:1;
}
.qpanel__close{
  cursor:pointer;
  font-size:1.6rem;line-height:1;
  padding:.2rem .55rem;
  color:var(--fg-soft);
  border-radius:3px;
}
.qpanel__close:hover{color:var(--fg)}
.qpanel__list{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:.5rem .75rem 1.25rem;
  flex:1;
}
.qpanel__item{border-bottom:1px solid var(--rule)}
.qpanel__item:last-child{border-bottom:0}
.qpanel__row{
  width:100%;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:.15rem;
  padding:.95rem .5rem;
}
.qpanel__row:hover .qpanel__name{color:var(--fg)}
.qpanel__name{
  font-family:var(--serif);font-weight:300;
  font-size:1.35rem;color:var(--fg-soft);
  transition:color .25s var(--ease);
}
.qpanel__meta{font-size:.85rem;color:var(--fg-quiet)}
/* Émergence — the one that is coming. Muted Gold, first, unmissable. */
.qpanel__item.is-upcoming{
  border-left:2px solid var(--muted-gold);
  background:linear-gradient(90deg, rgba(201,162,74,.10), rgba(201,162,74,0) 65%);
  border-radius:3px 0 0 3px;
}
.qpanel__item.is-upcoming .qpanel__name{color:var(--fg)}
.qpanel__mark{
  align-self:flex-start;
  margin-top:.3rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-gold);
}
.qpanel__mark::before{
  content:"";display:inline-block;
  width:.5em;height:.5em;margin-right:.5em;
  border-radius:50%;background:var(--muted-gold);
  box-shadow:0 0 8px rgba(201,162,74,.8);
}
.qpanel__detail{
  padding:0 .5rem 1.25rem;
  max-width:100%;overflow:hidden;
}
.qpanel__detail .ev__poster img{border-radius:4px}

/* the sheet */
.qpanel--sheet{
  top:auto;left:0;right:0;bottom:0;
  width:auto;height:76svh;
  background:linear-gradient(180deg, rgba(17,19,17,.985), rgba(17,19,17,.97));
  border-radius:14px 14px 0 0;
  border-left:0;border-right:0;border-bottom:0;
  animation:qpanel-rise .4s var(--ease);
}
@keyframes qpanel-rise{from{transform:translateY(12%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.qpanel--sheet{animation:none}}
.qpanel--sheet .qpanel__grip{
  display:block;position:absolute;top:.45rem;left:50%;
  width:2.6rem;height:.28rem;border-radius:99px;
  transform:translateX(-50%);
  background:var(--rule);
}
/* the globe dims behind the sheet — it does not disappear */
.qpanel-dim{
  position:fixed;inset:0;z-index:33;
  background:rgba(17,19,17,.38);
}
html.qpanel-open{overflow:hidden}

/* the panel is the place: its words, its houses, then its gatherings */
.qpanel__body{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:1rem 1.25rem 1.5rem;
  flex:1;
}
.qpanel__list{overflow:visible;padding:0;flex:none}
.qpanel__serif{
  font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:1.25rem;color:var(--fg);
  margin-bottom:.6rem;
}
.qpanel__intro{
  font-size:.92rem;line-height:1.65;color:var(--fg-soft);
  margin-bottom:1.4rem;
}
.qpanel__section{
  font-family:var(--sans);font-weight:400;
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-quiet);
  margin:1.6rem 0 .6rem;
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
}
.qpanel__house{
  padding:.55rem 0 .8rem;
}
.qpanel__houseName{
  font-family:var(--serif);font-weight:300;
  font-size:1.2rem;color:var(--fg);
}
.qpanel__houseBody{
  font-size:.88rem;line-height:1.6;color:var(--fg-soft);
}
.qpanel__house.is-flash .qpanel__houseName{
  color:var(--muted-gold);
  transition:color .4s var(--ease);
}

/* §1.3 r7 — the expanded gathering wears the panel's own scale, not the
   standalone section's. Nothing looks transplanted. */
.qpanel__detail .body{font-size:.9rem;line-height:1.62;max-width:none;margin-top:.7rem}
.qpanel__detail .body--lede{font-size:.98rem}
.qpanel__detail .ev__credit{font-size:.82rem;margin-top:.7rem}
.qpanel__detail .ev__poster{margin-top:.8rem}
.qpanel__detail .gal__cell{flex-basis:78%}
.qpanel__detail .reels{gap:.75rem}
.qpanel__detail .reel__pull{font-size:.9rem}

/* ── The gatherings, inside Québec ── */
.ev-in-quebec{
  margin-top:clamp(2.5rem,6vh,4.5rem);
}
.ev-in-quebec .ev{margin-top:clamp(1rem,3vh,2rem)}
/* Émergence leads in gold — the one still coming */
.ev__item:has(.ev__mark--upcoming) .ev__row,
.ev__item.is-upcoming .ev__row{
  border-left:2px solid var(--muted-gold);
  padding-left:1rem;
  background:linear-gradient(90deg, rgba(201,162,74,.10), rgba(201,162,74,0) 60%);
}
.ev__mark--upcoming{color:var(--muted-gold)}

/* ══ THE TRANSITION — space to root, and back ══════════════════
   Layered parallax over the live scenes. transform and opacity
   only; layers outside their stage are hidden entirely. */
.s--descent,.s--ascent{
  position:relative;
  min-height:340svh;
  padding:0;display:block;
  background:transparent;      /* the live globe/soil show through */
}
.s--ascent{min-height:300svh}
.descent{
  position:sticky;top:0;height:100svh;width:100%;
  overflow:hidden;
  pointer-events:none;
}
.descent__dim{
  position:absolute;inset:-2%;
  background:var(--ink);
  opacity:0;
}
.descent__layer{
  position:absolute;left:50%;top:50%;
  width:120%;max-width:none;height:auto;
  translate:-50% -50%;
  opacity:0;
  transform:translate3d(0,0,0);
}
.descent__layer--far{width:118%}
.descent__layer--mid{width:132%}
.descent__layer--near{width:142%}
.descent__layer--bark{width:46%;top:50%}
.descent__layer--barkL{left:6%;translate:-50% -50%}
.descent__layer--barkR{left:94%;translate:-50% -50%;transform:scaleX(-1)}
.descent__layer--dust{width:126%}
/* portrait phones: the wide plates would letterbox into a band —
   size the two that remain by height so their edges leave the frame */
@media (max-width:768px){
  .descent__layer--far{width:auto;height:96svh}
  .descent__layer--near{width:auto;height:108svh}
  /* the bark is portrait art on a portrait screen: ONE trunk, full
     height, passing off-centre — two mirrored plates have no room here
     and meet in a seam; one reads as the forest closing past you */
  .descent__layer--bark{width:auto;height:114svh}
  .descent__layer--barkL{left:24%}
  .descent__layer--barkR{display:none}
}
.descent__rise{
  position:absolute;left:50%;top:50%;
  width:min(64vw,720px);height:auto;aspect-ratio:9/16;
  translate:-50% -50%;
  opacity:0;
}
.ascent__copy{
  position:absolute;bottom:14svh;left:50%;transform:translateX(-50%);
  width:100%;max-width:min(90vw,40rem);
  text-align:center;z-index:2;
}
/* the words ride over the lit night side of the earth — a quiet pool
   of dark keeps the city lights from washing through them */
.ascent__copy::before{
  content:"";position:absolute;inset:-3.5rem -5rem;z-index:-1;
  background:radial-gradient(ellipse at 50% 52%,
    rgba(10,12,10,.82) 0%, rgba(10,12,10,.62) 58%, rgba(10,12,10,0) 84%);
}
.ascent__copy .body{color:var(--linen,#EDE8D9)}
.ascent__copy .body--quiet{opacity:1;color:#D8D3C2}
/* reduced motion, or no JS: a single composed still, nothing moves */
@media (prefers-reduced-motion:reduce){
  .s--descent,.s--ascent{min-height:100svh}
  .descent__layer,.descent__dim,.descent__rise{display:none}
  .descent{background:url(../assets/img/transition/still.webp) center/cover no-repeat}
}
html:not(.js) .s--descent,html:not(.js) .s--ascent{min-height:100svh}
html:not(.js) .descent__layer,html:not(.js) .descent__dim{display:none}
html:not(.js) .descent{background:url(../assets/img/transition/still.webp) center/cover no-repeat}

/* ── r11: the page breathes closer — less empty road between rooms.
   The two short rooms give up their full viewport; the location hubs
   and circulation pull nearer without losing their air. */
.s--expansion-open{min-height:52svh}
.s--counter{min-height:56svh}
.s--hub{min-height:78svh}
.s--circulation{min-height:70svh}

/* ── r14 §1: the words hold their own ground over the living soil ──
   Soft pools of Ink behind everything readable in the two mycelium
   rooms — thickest behind the text, gone before any edge, never a
   box. The section titles carry the moss wash the other chapter
   markers already wear. */
/* r17.1 — night pools. The viewport scrim was carrying the whole
   legibility load and flattening the planet to do it. Now the scrim
   sits lighter and each night section shades only its own words —
   the same edgeless vignette the hero and the mycelium use. */
.s--recognition .s__in,.s--shift .s__in,.s--branches .s__in,
.s--expansion-open .s__in,.s--hub .s__in,.s--circulation .s__in{position:relative}
.s--recognition .s__in::before,.s--shift .s__in::before,.s--branches .s__in::before,
.s--expansion-open .s__in::before,.s--hub .s__in::before,.s--circulation .s__in::before{
  content:"";position:absolute;inset:-9rem -16rem;z-index:-1;
  /* fixed-rem horizontal radius: the falloff reaches zero before the
     box edge whatever the section's width, so the pool never draws a
     line across the globe — while the words sit inside the strong
     middle of the curve */
  background:radial-gradient(ellipse 40rem 55% at 50% 48%,
    rgba(17,19,17,.85) 0%, rgba(17,19,17,.72) 45%, rgba(17,19,17,0) 82%);
  pointer-events:none;
}

.s--mycelia .s__in--right{position:relative}
.s--mycelia .s__in--right::before{
  content:"";position:absolute;inset:-2.5rem -3.5rem;z-index:-1;
  background:radial-gradient(ellipse 95% 100% at 50% 42%,
    rgba(17,19,17,.72) 0%, rgba(17,19,17,.48) 58%, rgba(17,19,17,0) 88%);
  pointer-events:none;
}
/* r19 §2 — ONE shared edge. Every plate in a text column spans the
   column exactly: left edge to the same right edge as the content box
   beneath it. The geometry lives in this single rule; each plate
   brings only its own light (--plate-light) and depth (--plate-y).
   GATHERINGS and MY-CELIA titles use the same rule — no fourth copy. */
.fm__head .eyebrow,.fm__head .serif-moment,
.s--mycelia .s__in--right > .eyebrow,
.s__in > .marker--sub,
.fm__form,.fm__result{position:relative;width:100%}
.fm__head .eyebrow::before,.fm__head .serif-moment::before,
.s--mycelia .s__in--right > .eyebrow::before,
.s__in > .marker--sub::before,
.fm__form::before,.fm__result::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:var(--plate-y,-.9em);bottom:var(--plate-y,-.9em);
  left:calc(-1 * var(--plate-pad,clamp(.8rem,2.5vw,1.4rem)));
  right:calc(-1 * var(--plate-pad,clamp(.8rem,2.5vw,1.4rem)));
  background:var(--plate-light,radial-gradient(ellipse 120% 130% at 30% 50%,
    rgba(85,106,49,.34) 0%, rgba(85,106,49,.16) 60%, rgba(85,106,49,.05) 100%));
}
.fm__head .serif-moment{
  --plate-y:-1.1rem;
  --plate-light:radial-gradient(ellipse 110% 130% at 40% 50%,
    rgba(17,19,17,.70) 0%, rgba(17,19,17,.44) 60%, rgba(17,19,17,.10) 100%);
}
.fm__form{
  --plate-y:-2rem;
  --plate-light:radial-gradient(ellipse 115% 105% at 50% 45%,
    rgba(17,19,17,.74) 0%, rgba(17,19,17,.50) 62%, rgba(17,19,17,.12) 100%);
}
.fm__result{
  --plate-y:-2rem;
  --plate-light:radial-gradient(ellipse 115% 105% at 50% 45%,
    rgba(17,19,17,.70) 0%, rgba(17,19,17,.46) 62%, rgba(17,19,17,.10) 100%);
}

/* ── r14 §5: gatherings typography — the words carry more weight ── */
.ev__detail .body,.ev__meta{font-weight:400;color:var(--linen)}
.ev__detail .body--quiet{color:var(--stone)}
.ev__mark{font-weight:700}
.hub__ig{margin-top:.6rem;position:relative;width:fit-content}
/* the handle sits at the panel's foot, past the section pool's reach,
   and the daylit crescent can pass right behind it — it carries its
   own small pool (r17.1) */
.hub__ig::before{
  content:"";position:absolute;inset:-1.4rem -2.8rem;z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(17,19,17,.85) 0%, rgba(17,19,17,.55) 55%, rgba(17,19,17,0) 98%);
  pointer-events:none;
}
/* r20.6 — the recognition pool matches its widened measure (62rem):
   the shared 40rem ellipse left the line-ends over the bright crescent */
.s--recognition .s__in::before{
  background:radial-gradient(ellipse 52rem 58% at 50% 50%,
    rgba(17,19,17,.82) 0%, rgba(17,19,17,.66) 52%, rgba(17,19,17,0) 80%);
}
/* r21 §2 — the hub cards: a photograph of the place, its own words,
   and its links. The venue is credited by name beneath its image. */
.house__photo{margin:.4rem 0 1rem}
.house__photo img{display:block;width:100%;max-width:34rem;height:auto;border:1px solid var(--rule)}
.house__photo .caption{margin-top:.45rem}
.house__quote{font-style:italic}
.house__links a{color:var(--fg);text-decoration:underline;text-underline-offset:.2em}
.house__links a:hover{color:var(--accent)}
.hub__ig a{color:var(--fg-soft);text-decoration:none;letter-spacing:.12em}
.hub__ig a:hover{color:var(--fg)}

/* ── r15 §10/§11/§13 layout ── */
/* gatherings note reads white over the globe */
.ev-in-quebec > .body--quiet{color:var(--linen)}
/* Brighton and Tulum sit closer — the dead space goes */
#expansion-brighton,#expansion-tulum{min-height:56svh}
/* the One Tree Planted link */
.body-link{color:var(--fg);text-decoration:underline;text-underline-offset:.2em}
.body-link:hover{color:var(--accent)}
/* the three My-celia cards */
.myc-cards{margin-top:clamp(2rem,5vh,3rem)}
.myc-cards__row{display:grid;gap:1rem;margin-top:1.2rem}
@media (min-width:56rem){.myc-cards__row{grid-template-columns:repeat(3,1fr)}}
.myc-card{border:1px solid var(--rule);background:rgba(17,19,17,.55);padding:1.2rem 1.3rem}
.myc-card__glyph{font-size:1.5rem;color:var(--muted-gold);line-height:1}
.myc-card__t{margin-top:.6rem;font-weight:700;font-size:1.02rem;color:var(--fg)}
.myc-card__b{margin-top:.35rem;font-size:.95rem;color:var(--fg-soft);line-height:1.6}

/* ── r15 §14.1: the Field Map's meter, and the roots panel reveal ── */
.fm__meter{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
.fm__count{font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-quiet)}
.fm__bar{margin-top:.5rem;height:2px;background:var(--rule);overflow:hidden}
.fm__bar-fill{display:block;height:100%;background:var(--muted-gold);transition:width .5s var(--ease)}
/* ── r16 §10/§12/§14/§15 layout ── */
/* WHAT IS ALREADY ALIVE: bigger, white, close to the Québec block */
#expansion-open{min-height:30svh;padding-bottom:clamp(.5rem,2vh,1.25rem)}
#expansion-open .marker{
  font-size:clamp(1.4rem,.9rem + 2.1vw,2.5rem);
  color:var(--fg);margin-bottom:0;line-height:1.3;
}
#expansion-quebec{padding-top:clamp(1.25rem,3.5vh,2.5rem)}
/* the three places read as one field */
#expansion-brighton,#expansion-tulum{min-height:42svh;padding-top:clamp(1.5rem,4vh,2.5rem)}
/* four cards sit two by two */
@media (min-width:56rem){.myc-cards__row{grid-template-columns:repeat(2,1fr)}}
/* Mission Ally Collective — one idea, low height */
.s--mac{min-height:34svh}

/* ── r17 §2: a branch that opens — same arrow the hubs wear ── */
.house--branch{border:0}
.house--branch .branch__disclose{display:grid;grid-template-columns:1fr auto;gap:.15rem clamp(1rem,3vw,2rem);padding:0}
.house--branch .house__body{padding:.75rem 0 .5rem;max-width:38rem}

/* ── r17 §5: the exit modal ── */
.exit{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(rgba(17,19,17,.52), rgba(17,19,17,.52)),
    url("../assets/img/exit-myc.webp") center/cover no-repeat,
    var(--ink);
  animation:exit-in .35s var(--ease);
}
.exit--still{animation:none}
.exit__box{
  position:relative;max-width:min(92vw,30rem);
  background:rgba(17,19,17,.93);border:1px solid var(--rule);
  padding:clamp(2rem,5vw,3rem);text-align:center;
}
.exit__title{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,4vw,2rem);line-height:1.3;color:var(--fg)}
.exit__body{margin:1.1rem 0 1.6rem;color:var(--fg-soft)}
.exit__close{
  position:absolute;top:.4rem;right:.75rem;cursor:pointer;
  font-size:1.6rem;color:var(--fg-quiet);line-height:1;padding:.4rem;
}
.exit__close:hover{color:var(--fg)}
.exit__later{
  display:block;margin:1rem auto 0;cursor:pointer;
  color:var(--fg-quiet);font-size:.95rem;text-decoration:underline;text-underline-offset:.2em;
}
.exit__later:hover{color:var(--fg)}
@keyframes exit-in{from{opacity:0}to{opacity:1}}