/* ══════════════════════════════════════════════════════════════
   ArrowHound ($ARHD) — a field guide

   The page is a naturalist's plate book about a creature that
   tracks. Structure comes from apparatus, not decoration: plate
   numbers, hairline rules, dot leaders, registration marks and
   contour lines. Two voices only — Instrument Serif carries the
   guide, Archivo carries the data. Four colours, no more.
   ══════════════════════════════════════════════════════════════ */

:root{
  --ink:#0B1A11;
  --ink-2:#0F2317;
  --bone:#EDE7D8;
  --bone-2:#E4DCC8;
  --lime:#C8FF2E;
  --rh:#00C805;

  --graphite:#16241A;        /* type on bone */
  --muted:#4F5F4C;           /* secondary type on bone — 6.1:1 */
  --rh-ink:#046B12;          /* green type on bone — 5.9:1 */
  --rule:#C3B9A0;            /* hairline on bone */

  --cream:#EDE7D8;           /* type on ink */
  --cream-2:rgba(237,231,216,.62);
  --rule-d:rgba(237,231,216,.18);

  --wrap:1200px;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:Archivo,system-ui,-apple-system,sans-serif;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

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

html{scroll-behavior:smooth;scroll-padding-top:5rem}

body{
  margin:0;
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.72;
  color:var(--graphite);
  background:var(--bone);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.005em}
h1,h2{font-family:var(--serif);line-height:1.02}
h1{font-size:clamp(3.2rem,7.4vw,6.4rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.5rem)}
h3{font-family:var(--sans);font-weight:600;font-size:1.06rem;line-height:1.35;
  letter-spacing:-.01em}
p{margin:0 0 1.1rem}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto;position:relative;z-index:2}
.sec{padding:clamp(4.5rem,8vw,7.5rem) 0;position:relative;overflow:hidden}

.lede{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.6;color:var(--muted);
  max-width:34rem}
.lede--gap{margin-bottom:clamp(2.6rem,5vw,3.6rem)}
.body{max-width:33rem;color:var(--muted)}
.wide{max-width:16ch}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

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

.skip{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--lime);
  color:var(--ink);padding:.7rem 1.15rem;font-weight:600;transition:top .2s}
.skip:focus{top:0}

:focus-visible{outline:2px solid var(--rh);outline-offset:3px}
.sec--ink :focus-visible,.hero :focus-visible,.close :focus-visible,
.foot :focus-visible,.nav :focus-visible{outline-color:var(--lime)}

/* ── Surfaces ────────────────────────────────────────────── */

.sec--ink,.hero,.close,.foot{background:var(--ink);color:var(--cream)}
.sec--ink .lede,.hero .lede,.close .lede{color:var(--cream-2)}
.sec--bone{background:var(--bone)}
.sec--bone + .sec--bone{border-top:1px solid var(--rule)}

.topo{position:absolute;inset:-8% 0;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  transform:translate3d(0,var(--ty,0px),0) scaleX(var(--fx,1));will-change:transform}
.topo--dark{opacity:.5;background-image:url(../img/topo-dark.svg)}
.topo--light{opacity:.55;background-image:url(../img/topo-light.svg)}
.topo--flip{--fx:-1}

.sec--bone::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);mix-blend-mode:multiply;opacity:.5}

/* ── Plate label: numeral, caption, rule ─────────────────── */

.slabel{display:flex;align-items:center;gap:.85rem;margin:0 0 1.6rem;
  font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted)}
.slabel span{flex:none;border:1px solid var(--rule);padding:.24rem .62rem;
  letter-spacing:.14em;color:var(--graphite)}
.slabel::after{content:"";flex:1;height:1px;background:var(--rule)}
.sec--ink .slabel,.hero .slabel{color:var(--cream-2)}
.sec--ink .slabel span,.hero .slabel span{border-color:var(--rule-d);color:var(--lime)}
.sec--ink .slabel::after,.hero .slabel::after{background:var(--rule-d)}

/* ── Buttons: square, one notched corner ─────────────────── */

.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  min-height:46px;padding:.7rem 1.7rem;text-decoration:none;border:1px solid transparent;
  transition:background-color .2s,color .2s,border-color .2s}
.btn--go{color:var(--ink);
  background:linear-gradient(315deg,transparent 11px,var(--rh) 0)}
.btn--go:hover{background:linear-gradient(315deg,transparent 11px,var(--lime) 0)}
.btn--line{border-color:var(--lime);color:var(--lime)}
.btn--line:hover{color:var(--ink)}
.btn--line-dark{border-color:var(--rh-ink);color:var(--rh-ink)}
.btn--line-dark:hover{color:var(--bone)}

.badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.4rem;
  padding:.4rem .95rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime);border:1px solid rgba(200,255,46,.4);
  background:rgba(0,200,5,.1)}

.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 2.2rem}
.cta--mid{justify-content:center;margin-bottom:0}

/* ── Specimen ID row, with dot leader ────────────────────── */

.idrow{display:flex;align-items:baseline;gap:.6rem;max-width:100%;
  padding-bottom:.55rem;border-bottom:1px solid var(--rule-d)}
.idrow__k{flex:none;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-2)}
.idrow__dots{flex:1;min-width:.7rem;border-bottom:1px dotted var(--rule-d);
  transform:translateY(-.28em)}
.idrow code{flex:0 1 auto;min-width:0;font-family:var(--sans);font-size:.75rem;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--lime);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idrow__btn{flex:none;cursor:pointer;font-family:var(--sans);font-weight:600;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;min-height:40px;
  padding:.4rem .9rem;border:1px solid var(--lime);background:none;color:var(--lime);
  transition:background-color .2s,color .2s}
.idrow__btn:hover{background:var(--lime);color:var(--ink)}
.idrow--wide{margin-top:clamp(2.4rem,4vw,3.2rem)}

/* On a phone the 42-character ID cannot share a line with its label,
   and a truncated contract address is worth nothing. Give it its own row. */
@media (max-width:640px){
  .idrow{flex-wrap:wrap;align-items:center;row-gap:.7rem}
  .idrow__k{order:0}
  .idrow__dots{order:1}
  .idrow__btn{order:2}
  .idrow code{order:3;flex:1 1 100%;white-space:normal;word-break:break-all;
    line-height:1.5}
}

/* ── Social icon buttons ─────────────────────────────────── */

.social{display:flex;align-items:center;gap:.5rem;list-style:none;margin:0;padding:0}
.social a{display:grid;place-items:center;width:44px;height:44px;color:inherit;
  border:1px solid var(--rule-d);
  transition:background-color .22s,color .22s,border-color .22s,transform .22s}
.social a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);
  transform:translateY(-3px)}
.social svg{display:block}

/* on paper the hairline and the hover swap to the light palette */
.sec--bone .social a,.social--foot-light a{border-color:var(--rule);color:var(--graphite)}
.sec--bone .social a:hover{background:var(--rh-ink);color:var(--bone);border-color:var(--rh-ink)}

.social--nav a{width:40px;height:40px}
.social--nav{margin-right:.2rem}
@media (max-width:979px){.social--nav{display:none}}

.social--drawer{display:none;padding-top:1rem;gap:.6rem}
@media (max-width:799px){.social--drawer{display:flex}}

.follow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin:0 0 1.9rem}
.follow__k{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-2)}
.follow--mid{justify-content:center;margin:2rem 0 0}

/* ── Navigation ──────────────────────────────────────────── */

.nav{position:sticky;top:0;z-index:70;background:var(--ink);color:var(--cream);
  border-bottom:1px solid var(--rule-d);transition:border-color .25s}
.nav.scrolled{border-bottom-color:rgba(200,255,46,.34)}
.nav__in{display:flex;align-items:center;gap:1.4rem;min-height:4.2rem}

.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  margin-right:auto;min-height:44px}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__txt b{font-family:var(--serif);font-weight:400;font-size:1.28rem;
  letter-spacing:0;color:var(--cream)}
.brand__txt i{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime)}

.nav__menu{display:flex;gap:1.5rem}
.nav__menu a{display:flex;align-items:baseline;gap:.42rem;text-decoration:none;
  font-size:.85rem;font-weight:500;color:rgba(237,231,216,.74);transition:color .18s}
.nav__menu a em{font-family:var(--serif);font-style:normal;font-size:.78rem;
  color:var(--lime);opacity:.75}
.nav__menu a:hover{color:var(--lime)}

/* The buy button is the point of the page — it stays in the bar on a
   phone, only the section links fold into the drawer. */
.nav__cta{min-height:40px;padding:.45rem 1.15rem;font-size:.85rem;
  white-space:nowrap}
@media (max-width:560px){.nav__cta{padding:.42rem .85rem;font-size:.8rem}}
@media (max-width:400px){
  .brand__txt i{display:none}
  .brand__txt b{font-size:1.1rem}
}

.nav__toggle{display:none;width:44px;height:44px;border:0;background:none;
  cursor:pointer;align-items:center;justify-content:center}
.nav__bars,.nav__bars::before,.nav__bars::after{display:block;width:21px;height:1.5px;
  background:var(--lime)}
.nav__bars{position:relative}
.nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0}
.nav__bars::before{top:-6px}
.nav__bars::after{top:6px}

@media (max-width:799px){
  .nav__toggle{display:flex}
  .nav__in{gap:.7rem}
  .nav__menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--ink);border-bottom:1px solid var(--rule-d);
    padding:.2rem 1.3rem 1rem;display:none}
  .nav__menu.open{display:flex}
  .nav__menu a{padding:.85rem 0;border-bottom:1px solid var(--rule-d);font-size:1rem}
}

/* ── Plate I: the specimen ───────────────────────────────── */

.hero{position:relative;overflow:hidden;
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(3.5rem,6vw,5rem)}
.hero__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:1.6rem;align-items:center}
.hero__head{grid-column:1;grid-row:1;align-self:end}
.hero__body{grid-column:1;grid-row:2;align-self:start}
.specimen{grid-column:2;grid-row:1/span 2}

.tagline{font-family:var(--serif);font-size:clamp(1.5rem,2.7vw,2.15rem);
  line-height:1.2;color:var(--cream);max-width:19ch;margin:.9rem 0 0}
.hero .body{color:var(--cream-2);margin-bottom:0}

.specimen{display:grid;grid-template-columns:minmax(0,1fr);gap:1.15rem;position:relative;
  margin:0}
.specimen__frame{position:relative;border:1px solid var(--rule-d);
  padding:clamp(1.1rem,2.4vw,1.9rem);
  background:
    radial-gradient(circle at 50% 46%,rgba(0,200,5,.34),rgba(124,226,26,.1) 40%,rgba(0,200,5,0) 66%)}
.specimen__frame img{width:min(100%,400px);margin-inline:auto;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.55))}
.specimen figcaption{font-family:var(--serif);font-style:italic;font-size:.86rem;
  color:var(--cream-2);text-align:center}

.reg{position:absolute;width:13px;height:13px;border:1px solid var(--lime);opacity:.6}
.reg--tl{top:7px;left:7px;border-right:0;border-bottom:0}
.reg--tr{top:7px;right:7px;border-left:0;border-bottom:0}
.reg--bl{bottom:7px;left:7px;border-right:0;border-top:0}
.reg--br{bottom:7px;right:7px;border-left:0;border-top:0}

.leaders{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.leaders li{font-size:.78rem;line-height:1.45;color:var(--cream-2);
  padding-top:.6rem;border-top:1px solid var(--rule-d)}
.leaders b{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1rem;color:var(--lime);margin-bottom:.1rem}

@media (min-width:1180px){
  .specimen{grid-template-columns:minmax(0,1fr) 10.5rem;column-gap:0}
  .specimen__frame{grid-row:1;grid-column:1}
  .specimen figcaption{grid-column:1/-1}
  .leaders{grid-row:1;grid-column:2;display:block;position:relative}
  .leaders li{position:absolute;top:var(--y);left:0;right:0;transform:translateY(-50%);
    padding:0 0 0 3rem;border:0}
  .leaders li::before{content:"";position:absolute;left:0;top:.62em;width:2.4rem;
    height:1px;background:var(--lime);opacity:.55}
  .leaders li::after{content:"";position:absolute;left:-3px;top:.62em;width:6px;height:6px;
    background:var(--lime);transform:translate(-50%,-50%) rotate(45deg)}
}

@media (max-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .hero__head{grid-column:1;grid-row:1}
  .specimen{grid-column:1;grid-row:2;max-width:460px;margin-inline:auto;width:100%}
  .hero__body{grid-column:1;grid-row:3}
  .tagline{max-width:none}
}
@media (max-width:520px){
  .leaders{grid-template-columns:minmax(0,1fr)}
}

/* ── Field strip ─────────────────────────────────────────── */

.strip{overflow:hidden;background:var(--ink-2);color:var(--lime);
  border-block:1px solid var(--rule-d);padding:.7rem 0}
.strip__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.strip__grp{display:flex;align-items:center}
.strip__grp span{white-space:nowrap;font-size:.72rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;padding:0 1.6rem;position:relative}
.strip__grp span::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;
  background:var(--rh);transform:translateY(-50%) rotate(45deg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── Plate II: field notes ───────────────────────────────── */

.notes{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.6rem,4vw,3.5rem);align-items:start;
  margin-bottom:clamp(3rem,6vw,4.5rem)}
.pull{margin:0;font-family:var(--serif);font-size:clamp(1.45rem,2.9vw,2.25rem);
  line-height:1.32;color:var(--graphite)}
.pull i{font-style:italic;color:var(--rh-ink)}

.obs{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:minmax(0,1fr);gap:0;
  border-top:1px solid var(--rule)}
.obs li{padding:1.6rem 0}
.obs li + li{border-top:1px solid var(--rule)}

@media (min-width:620px){
  .obs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .obs li{padding:1.7rem 1.7rem 1.7rem 0}
  .obs li:nth-child(2){border-top:0;border-left:1px solid var(--rule);padding-left:1.7rem}
  .obs li:nth-child(3){grid-column:1/-1;border-top:1px solid var(--rule);padding-left:0}
}
@media (min-width:1020px){
  .obs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .obs li{padding:1.8rem 1.8rem 0 0}
  .obs li + li{border-top:0;border-left:1px solid var(--rule);padding-left:1.8rem}
  .obs li:nth-child(3){grid-column:auto}
}
.obs__n{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--rh-ink);
  margin-bottom:.55rem}
.obs h3{margin-bottom:.5rem}
.obs p{margin:0;color:var(--muted);font-size:.96rem;max-width:30rem}

@media (max-width:880px){
  .notes{grid-template-columns:minmax(0,1fr)}
}

/* ── Plate III: measurements ─────────────────────────────── */

.meas__head{max-width:44rem;margin-bottom:clamp(2.6rem,5vw,3.6rem)}
.meas__head h2{margin:0 0 1.1rem}

.ledger{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(2rem,5vw,4.5rem)}
.ledger>div{display:flex;align-items:baseline;padding:1.05rem 0;
  border-bottom:1px solid var(--rule-d)}
.ledger dt{order:0;flex:none;font-size:.95rem;color:var(--cream-2)}
.ledger>div::before{content:"";order:1;flex:1;min-width:1.2rem;margin:0 .8rem .3em;
  border-bottom:1px dotted var(--rule-d)}
.ledger dd{order:2;flex:none;margin:0;font-family:var(--serif);font-size:1.5rem;
  line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}

.fair{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.6rem,4vw,3rem);
  margin-top:clamp(2.6rem,5vw,3.6rem)}
.fair__quiver{display:flex;align-items:flex-end;gap:10px;flex:none;padding-top:13px}
.fair__quiver i{position:relative;width:5px;height:62px;background:var(--rh)}
.fair__quiver i::before{content:"";position:absolute;left:50%;top:-11px;
  transform:translateX(-50%);border-left:6px solid transparent;
  border-right:6px solid transparent;border-bottom:12px solid var(--lime)}
.fair__quiver i:nth-child(2){height:78px}
.fair__quiver i:nth-child(3){height:56px}
.fair__quiver i:nth-child(4){height:88px}
.fair__quiver i:nth-child(5){height:68px}
.fair__quiver i:nth-child(6){height:82px}
.fair__quiver i:nth-child(7){height:60px}
.fair__quiver i:nth-child(8){height:74px}
.fair p{flex:1 1 22rem;margin:0;color:var(--cream-2);max-width:34rem}
.fair b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.15rem;
  color:var(--cream)}

@media (max-width:820px){
  .ledger{grid-template-columns:minmax(0,1fr)}
}

/* ── Plate IV: tracking instructions ─────────────────────── */

.steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--rule)}
.steps li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.4rem;
  padding:1.9rem 2.2rem 1.9rem 0;border-bottom:1px solid var(--rule)}
.steps li:nth-child(even){border-left:1px solid var(--rule);padding-left:2.2rem}
.steps__n{font-family:var(--serif);font-size:1.55rem;line-height:1;color:var(--rh-ink)}
.steps h3{margin-bottom:.45rem}
.steps p{margin:0;color:var(--muted);font-size:.96rem}

@media (max-width:619px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li,.steps li:nth-child(even){padding:1.6rem 0;border-left:0}
}

/* ── Plate V: the trail ──────────────────────────────────── */

.way{list-style:none;margin:0;padding:0;position:relative;display:grid;
  gap:2.2rem}
.way::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;
  border-left:1px dashed rgba(200,255,46,.34)}
.way__pt{position:relative;padding-left:2.6rem}
.way__pt::before{content:"";position:absolute;left:0;top:.5rem;width:11px;height:11px;
  border:1px solid var(--lime);background:var(--ink);transform:rotate(45deg)}
.way__pt--done::before{background:var(--lime)}
.way__k{display:flex;align-items:center;gap:.6rem;font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-2);margin-bottom:.45rem}
.way__k b{font-size:.62rem;letter-spacing:.12em;padding:.14rem .5rem;
  background:var(--lime);color:var(--ink)}
.way h3{font-family:var(--serif);font-weight:400;font-size:1.85rem;line-height:1;
  margin-bottom:.55rem;color:var(--cream)}
.way p{margin:0;color:var(--cream-2);font-size:.96rem;max-width:30rem}

@media (min-width:620px) and (max-width:1019px){
  .way{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem;row-gap:2rem}
  /* the dashed rail only reads when the markers sit on one line */
  .way::before{display:none}
  .way p{max-width:none}
}
@media (min-width:1020px){
  .way{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
  .way::before{left:5px;right:5px;top:5px;bottom:auto;height:0;
    border-left:0;border-top:1px dashed rgba(200,255,46,.34)}
  .way__pt{padding:2.4rem 1.4rem 0 0}
  .way__pt::before{top:0}
}

/* ── Plate VI: questions ─────────────────────────────────── */

.qa{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.qa__side{position:sticky;top:6rem}
.qa__side h2{margin:0 0 1rem}
.qa__side p{color:var(--muted);max-width:26rem}
.qa__side .btn{margin-top:.5rem}

.qa__list{border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule)}
.q summary{cursor:pointer;list-style:none;position:relative;padding:1.35rem 2.5rem 1.35rem 0;
  font-family:var(--serif);font-size:1.35rem;line-height:1.25;color:var(--graphite)}
.q summary::-webkit-details-marker{display:none}
.q summary::before,.q summary::after{content:"";position:absolute;right:.4rem;top:2.05rem;
  background:var(--rh-ink);transition:transform .25s}
.q summary::before{width:13px;height:1.5px}
.q summary::after{width:1.5px;height:13px;right:.98rem;top:1.7rem}
.q[open] summary::after{transform:scaleY(0)}
.q p{margin:-.2rem 0 1.5rem;color:var(--muted);max-width:34rem}
.q em{font-family:var(--serif);font-style:italic;color:var(--graphite)}

/* Inline links inside body copy — `a{color:inherit}` would hide them */
.steps p a,.q p a,.fair p a{color:var(--rh-ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color .2s,background-color .2s}
.steps p a:hover,.q p a:hover{color:var(--bone);background:var(--rh-ink)}
.fair p a{color:var(--lime)}
.fair p a:hover{color:var(--ink);background:var(--lime)}

@media (max-width:900px){
  .qa{grid-template-columns:minmax(0,1fr)}
  .qa__side{position:static}
}

/* ── Closing ─────────────────────────────────────────────── */

.close{position:relative;overflow:hidden;padding:clamp(4rem,7vw,6.5rem) 0;
  border-top:1px solid var(--rule-d)}
.close__in{text-align:center}
.close__plate{margin:0 0 clamp(2.2rem,4vw,3rem)}  /* figure default margin reset */
.close__plate img{width:100%;max-width:860px;margin-inline:auto;
  border:1px solid var(--rule-d);aspect-ratio:1400/467}
.close__plate figcaption{margin-top:.85rem;font-family:var(--serif);font-style:italic;
  font-size:.86rem;color:var(--cream-2)}
.close h2{margin-bottom:.9rem}
.close__in>p{color:var(--cream-2);max-width:30rem;margin-inline:auto}

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

.foot{padding:clamp(3rem,5vw,4rem) 0 2rem;border-top:1px solid var(--rule-d)}
.foot__in{display:flex;flex-wrap:wrap;gap:2.4rem;align-items:flex-start;
  justify-content:space-between;padding-bottom:2.4rem}
.foot__brand p{margin:.9rem 0 0;color:var(--cream-2);font-size:.9rem;max-width:26rem}
.foot__brand i{font-family:var(--serif);font-style:italic;color:var(--lime)}
.foot__nav{display:flex;flex-direction:column;gap:.6rem}
.foot__nav a{text-decoration:none;font-size:.9rem;color:rgba(237,231,216,.72);
  transition:color .18s}
.foot__nav a:hover{color:var(--lime)}

.foot__legal{border-top:1px solid var(--rule-d);padding-top:1.7rem}
.foot__legal p{color:rgba(237,231,216,.58);font-size:.82rem;line-height:1.65;max-width:34rem}
.foot__cc{margin:.8rem 0 0;letter-spacing:.04em}

/* ── Toast ───────────────────────────────────────────────── */

.toast{position:fixed;left:50%;bottom:2rem;z-index:120;
  opacity:0;visibility:hidden;transform:translate(-50%,140%);
  background:var(--lime);color:var(--ink);padding:.75rem 1.4rem;
  font-weight:600;font-size:.85rem;letter-spacing:.04em;
  transition:transform .35s cubic-bezier(.2,.9,.3,1),opacity .35s,visibility .35s}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ══════════════════════════════════════════════════════════
   MOTION
   One orchestrated arrival in the hero, then movement only
   where it carries meaning: reading progress, the specimen
   answering the cursor, arrows climbing the dark sections.
   ══════════════════════════════════════════════════════════ */

/* Reading progress, pinned above the sticky bar */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;
  background:rgba(237,231,216,.1)}
.progress span{display:block;height:100%;width:100%;transform-origin:left;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--rh),var(--lime))}

/* Hero arrival — staggered blur-fade, one time, on load */
.js [data-lift]{opacity:0;transform:translateY(20px);filter:blur(7px)}
[data-lift="1"]{--i:0}[data-lift="2"]{--i:1}[data-lift="3"]{--i:2}
[data-lift="4"]{--i:3}[data-lift="5"]{--i:4}[data-lift="6"]{--i:5}
[data-lift="7"]{--i:6}
body.lit [data-lift]{opacity:1;transform:none;filter:none;
  transition:opacity .85s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 95ms),
             transform .85s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 95ms),
             filter .85s ease calc(var(--i,0) * 95ms)}

/* Section reveals */
.js .reveal{opacity:0;transform:translateY(24px)}
.reveal.in{opacity:1;transform:none;
  transition:opacity .75s ease var(--rd,0ms),
             transform .75s cubic-bezier(.2,.7,.3,1) var(--rd,0ms)}

/* Arrows climbing the dark sections */
.arrows{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.arrows i{position:absolute;bottom:-24vh;width:1px;height:24vh;opacity:0;
  background:linear-gradient(to top,rgba(200,255,46,0),var(--lime));
  transform:rotate(24deg);animation:climb 12s linear infinite}
.arrows i::after{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:7px solid var(--lime)}
.arrows i:nth-child(1){left:7%;animation-delay:0s}
.arrows i:nth-child(2){left:21%;animation-delay:4.1s;height:17vh}
.arrows i:nth-child(3){left:38%;animation-delay:7.6s}
.arrows i:nth-child(4){left:55%;animation-delay:2.2s;height:20vh}
.arrows i:nth-child(5){left:71%;animation-delay:9.3s}
.arrows i:nth-child(6){left:84%;animation-delay:5.5s;height:16vh}
.arrows i:nth-child(7){left:95%;animation-delay:11s}
@keyframes climb{
  0%{transform:translateY(0) rotate(24deg);opacity:0}
  10%{opacity:.42}
  80%{opacity:.14}
  100%{transform:translateY(-150vh) rotate(24deg);opacity:0}
}

/* The specimen answers the cursor */
.specimen__frame{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.specimen__frame img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.specimen:hover .specimen__frame img{transform:translateZ(30px) scale(1.03)}
.specimen__glow{position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,46%),
    rgba(200,255,46,.26),rgba(200,255,46,0) 70%)}
.specimen:hover .specimen__glow{opacity:1}
.specimen:hover .reg{opacity:1}
.reg{transition:opacity .35s ease}

/* Leader lines draw in when the plate is hovered */
@media (min-width:1180px){
  .leaders li::before{transform-origin:left;transform:scaleX(.55);
    transition:transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s}
  .specimen:hover .leaders li::before{transform:scaleX(1);opacity:.9}
  .leaders li{transition:color .35s ease}
  .specimen:hover .leaders li{color:var(--cream)}
}

/* Row hovers — a rule that lights, not a card that jumps */
.obs li,.steps li{transition:background-color .3s ease}
.obs li:hover,.steps li:hover{background:rgba(4,107,18,.05)}
.obs__n,.steps__n{transition:color .3s ease,transform .3s ease}
.obs li:hover .obs__n,.steps li:hover .steps__n{color:var(--graphite);transform:translateY(-2px)}

.ledger>div{transition:border-color .3s ease}
.ledger>div:hover{border-bottom-color:rgba(200,255,46,.5)}
.ledger dd{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.ledger>div:hover dd{transform:translateX(-4px)}

.q summary{transition:color .25s ease}
.q summary:hover{color:var(--rh-ink)}

.way__pt::before{transition:transform .4s cubic-bezier(.2,.7,.3,1),background-color .3s}
.way__pt:hover::before{transform:rotate(135deg) scale(1.25)}

.strip:hover .strip__track{animation-play-state:paused}

.btn--line,.btn--line-dark{background-repeat:no-repeat;background-position:bottom;
  background-size:100% 0;transition:background-size .32s cubic-bezier(.2,.7,.3,1),color .25s}
.btn--line{background-image:linear-gradient(var(--lime),var(--lime))}
.btn--line-dark{background-image:linear-gradient(var(--rh-ink),var(--rh-ink))}
.btn--line:hover,.btn--line-dark:hover{background-size:100% 100%}


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

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .strip__track{animation:none}
  .arrows{display:none}
  .topo{transform:none}
  [data-lift],.reveal{opacity:1;transform:none;filter:none}
  .specimen__frame,.specimen__frame img{transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
}