/* ============================================================================
   OBLIQUITY — Instruments of deep time.
   Design system / shared stylesheet
   Basalt + Bone + one Solstice Amber · Zodiak / General Sans / Space Mono
   ========================================================================== */

/* ---------- TOKENS ------------------------------------------------------- */
:root{
  /* colour — warm-black void, weathered bone, one ember */
  --basalt:        #0E0B09;   /* base surface (never #000) */
  --basalt-1:      #131009;   /* hair-elevated panel */
  --basalt-2:      #1A1510;   /* card / vitrine tile */
  --basalt-3:      #221B14;   /* hovered / active surface */
  --bone:          #DED6C9;   /* primary ink (never #FFF) */
  --bone-dim:      rgba(222,214,201,.64);
  --bone-faint:    rgba(222,214,201,.40);
  --bone-ghost:    rgba(222,214,201,.18);
  --hair:          rgba(222,214,201,.13);
  --hair-strong:   rgba(222,214,201,.26);
  --amber:         #EF7A2D;   /* the solstice beam — the only colour */
  --amber-soft:    #FFB35C;   /* bloom-warm highlight */
  --amber-deep:    #B6541A;
  --amber-glow:    rgba(239,122,45,.16);
  --amber-line:    rgba(239,122,45,.42);

  /* inverted "bone plate" surface (light = proof, used sparingly) */
  --paper:         #E7E0D3;
  --ink:           #16120D;
  --ink-dim:       rgba(22,18,13,.66);
  --paper-hair:    rgba(22,18,13,.16);

  /* type families */
  --f-display: "Zodiak", "Times New Roman", Georgia, serif;
  --f-sans:    "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* fluid type scale (1.25 minor-third, fluid 390 → 1600) */
  --t-eyebrow: clamp(.66rem, .58rem + .35vw, .8rem);
  --t-small:   clamp(.8rem, .74rem + .3vw, .92rem);
  --t-body:    clamp(1rem, .95rem + .3vw, 1.18rem);
  --t-lead:    clamp(1.25rem, 1.1rem + .9vw, 1.7rem);
  --t-h4:      clamp(1.3rem, 1.1rem + 1vw, 1.85rem);
  --t-h3:      clamp(1.7rem, 1.3rem + 2vw, 3rem);
  --t-h2:      clamp(2.4rem, 1.6rem + 4.2vw, 5.2rem);
  --t-h1:      clamp(3rem, 1.4rem + 8.4vw, 9.5rem);
  --t-mega:    clamp(4rem, 1rem + 15vw, 15rem);

  /* spacing scale */
  --s-1:.5rem; --s-2:.75rem; --s-3:1rem; --s-4:1.5rem; --s-5:2rem;
  --s-6:3rem; --s-7:4.5rem; --s-8:7rem; --s-9:10rem; --s-10:14rem;

  /* layout */
  --maxw: 1340px;
  --pad:  clamp(1.25rem, 1rem + 4vw, 4.5rem);
  --rail-w: 4.5rem;

  /* motion */
  --ease-out:     cubic-bezier(.16,1,.3,1);     /* reveals */
  --ease-orbital: cubic-bezier(.7,0,.3,1);      /* scene moves, transitions */
  --grain: .045;

  /* z layers */
  --z-scene: 0; --z-content: 1; --z-rail: 40; --z-nav: 60;
  --z-overlay: 80; --z-grain: 9000; --z-cursor: 9999;

  color-scheme: dark;
}

/* ---------- RESET / BASE ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--f-sans);
  font-size:var(--t-body);
  line-height:1.62;
  color:var(--bone);
  background:var(--basalt);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv01";
}

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--amber); color:var(--basalt); }

/* thin custom scrollbar (native hidden look) */
html{ scrollbar-width:thin; scrollbar-color:var(--hair-strong) transparent; }
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--hair-strong); border-radius:99px; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

/* ---------- TYPE PRIMITIVES --------------------------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:.92;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-eyebrow);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--bone-faint);
  font-weight:400;
}
.eyebrow .amber{ color:var(--amber); }
.lead{ font-size:var(--t-lead); line-height:1.4; color:var(--bone-dim); font-weight:400; text-wrap:pretty; }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.amber{ color:var(--amber); }
em,.italic{ font-style:italic; }

h1,h2,h3{ font-family:var(--f-display); font-weight:400; line-height:.96; letter-spacing:-.015em; }
h1{ font-size:var(--t-h1); line-height:.9; letter-spacing:-.025em; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); }
h4{ font-family:var(--f-sans); font-weight:600; font-size:var(--t-h4); line-height:1.1; letter-spacing:-.01em; }
p{ text-wrap:pretty; }

/* ---------- LAYOUT ------------------------------------------------------ */
.wrap{ width:min(100% - (var(--pad) * 2), var(--maxw)); margin-inline:auto; }
.wrap--wide{ --maxw:1560px; }
.wrap--narrow{ --maxw:760px; }
.section{ position:relative; padding-block:clamp(var(--s-7), 9vw, var(--s-9)); }
.section--tight{ padding-block:clamp(var(--s-6), 6vw, var(--s-8)); }
.section--bone{ background:var(--paper); color:var(--ink); }
.section--bone .eyebrow{ color:rgba(22,18,13,.5); }
.section--bone .lead{ color:var(--ink-dim); }
.section--bone .hair,.section--bone hr{ background:var(--paper-hair); }

/* the vertical "axis" — a true-north rule that threads sections */
.axis{
  position:relative;
  border-left:1px solid var(--hair);
  padding-left:clamp(1.25rem, 3vw, 3.5rem);
}
.axis::before{
  content:""; position:absolute; left:-3px; top:0; width:5px; height:5px;
  background:var(--amber); border-radius:50%; box-shadow:0 0 12px 2px var(--amber-glow);
}

hr,.hair{ border:0; height:1px; background:var(--hair); width:100%; }

/* asymmetric editorial grid */
.grid{ display:grid; gap:clamp(1.5rem, 4vw, 4rem); }
.grid-12{ grid-template-columns:repeat(12,1fr); }
.span-lead{ grid-column:1 / 8; }
.span-aside{ grid-column:8 / 13; align-self:end; }
@media (max-width:860px){
  .grid-12{ grid-template-columns:1fr; }
  .span-lead,.span-aside{ grid-column:1 / -1; }
}

/* ---------- GRAIN OVERLAY ----------------------------------------------- */
body::after{
  content:""; position:fixed; inset:0; z-index:var(--z-grain);
  pointer-events:none; opacity:var(--grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  animation:grain .5s steps(3) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-1%)} }
@media (prefers-reduced-motion: reduce){ body::after{ animation:none; } }

/* ---------- SURVEYOR RETICLE CURSOR ------------------------------------- */
.reticle{
  position:fixed; top:0; left:0; z-index:var(--z-cursor);
  width:46px; height:46px; pointer-events:none;
  transform:translate(-50%,-50%); opacity:0;
  transition:opacity .35s ease, width .3s var(--ease-out), height .3s var(--ease-out);
  will-change:transform;
}
.reticle.is-on{ opacity:1; }
.reticle::before,.reticle::after{
  content:""; position:absolute; background:var(--amber-line);
}
.reticle::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-.5px); }
.reticle::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-.5px); }
.reticle__ring{
  position:absolute; inset:32%; border:1px solid var(--amber); border-radius:50%;
  transition:inset .3s var(--ease-out), opacity .3s;
}
.reticle__ticks{ position:absolute; inset:0; }
.reticle__ticks span{ position:absolute; background:var(--bone-faint); }
.reticle__ticks span:nth-child(1){ top:0;left:50%;width:1px;height:6px;transform:translateX(-.5px); }
.reticle__ticks span:nth-child(2){ bottom:0;left:50%;width:1px;height:6px;transform:translateX(-.5px); }
.reticle__ticks span:nth-child(3){ left:0;top:50%;height:1px;width:6px;transform:translateY(-.5px); }
.reticle__ticks span:nth-child(4){ right:0;top:50%;height:1px;width:6px;transform:translateY(-.5px); }
.reticle__read{
  position:absolute; left:120%; top:55%; white-space:nowrap;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  color:var(--amber); text-transform:uppercase; opacity:.85;
}
.reticle.is-active .reticle__ring{ inset:14%; border-color:var(--amber); }
.reticle.is-active{ width:62px; height:62px; }
@media (pointer:fine){
  html.cursor-ready, html.cursor-ready *{ cursor:none; }
}
@media (pointer:coarse), (prefers-reduced-motion: reduce){
  .reticle{ display:none; }
  html.cursor-ready, html.cursor-ready *{ cursor:auto; }
}

/* ---------- NAVIGATION -------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); padding:clamp(1rem,2vw,1.6rem) var(--pad);
  transition:background .5s var(--ease-out), border-color .5s, transform .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--basalt) 72%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--hair);
}
.nav.is-hidden{ transform:translateY(-105%); }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--f-display); font-size:1.18rem; letter-spacing:.01em; }
.brand__mark{ width:22px; height:22px; flex:none; }
.brand__mark .slab{ transform-origin:center; }
.nav__links{ display:flex; align-items:center; gap:clamp(1.2rem,2.4vw,2.6rem); }
.nav__links a{
  font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-dim); position:relative; padding-block:.3rem;
  transition:color .35s var(--ease-out);
}
.nav__links a .idx{ color:var(--bone-faint); margin-right:.5em; font-size:.85em; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--amber); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out);
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--bone); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--hair-strong); padding:.6rem 1rem; border-radius:99px; color:var(--bone);
  transition:border-color .35s, background .35s, color .35s;
}
.nav__cta:hover{ border-color:var(--amber); color:var(--amber); }

/* mobile nav */
.nav__burger{ display:none; width:40px; height:40px; position:relative; z-index:2; }
.nav__burger span{ position:absolute; left:9px; right:9px; height:1.5px; background:var(--bone); transition:transform .4s var(--ease-out), opacity .3s; }
.nav__burger span:nth-child(1){ top:15px; } .nav__burger span:nth-child(2){ bottom:15px; }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-5px) rotate(-45deg); }
.nav__panel{ display:contents; }

@media (max-width:880px){
  .nav__burger{ display:block; }
  /* transform / backdrop-filter on .nav would become the containing block for the
     fixed menu panel and leak it into view — neutralise both on mobile. */
  .nav.is-hidden{ transform:none; }
  .nav.is-scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none;
    background:color-mix(in srgb, var(--basalt) 92%, transparent); }
  .nav__panel{
    display:flex; flex-direction:column; justify-content:center; gap:var(--s-4);
    position:fixed; inset:0; padding:var(--pad);
    background:color-mix(in srgb, var(--basalt) 96%, transparent);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    transform:translateY(-100%); transition:transform .6s var(--ease-orbital);
  }
  .nav.is-open .nav__panel{ transform:translateY(0); }
  .nav__links{ flex-direction:column; align-items:flex-start; gap:var(--s-3); }
  .nav__links a{ font-size:clamp(1.4rem,7vw,2.4rem); letter-spacing:.04em; color:var(--bone); }
  .nav__links a::after{ display:none; }
  .nav__cta{ align-self:flex-start; font-size:.8rem; }
}

/* ---------- AXIS PROGRESS RAIL (right side, desktop) -------------------- */
.rail{
  position:fixed; right:clamp(.8rem,1.5vw,1.6rem); top:50%; transform:translateY(-50%);
  z-index:var(--z-rail); display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--bone-faint);
  text-transform:uppercase; pointer-events:none; user-select:none;
}
.rail__track{ position:relative; width:1px; height:36vh; background:var(--hair); overflow:hidden; }
.rail__fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--amber); box-shadow:0 0 8px var(--amber-glow); }
.rail__read{ writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:.22em; color:var(--bone-dim); }
.rail__read .amber{ color:var(--amber); }
@media (max-width:1100px){ .rail{ display:none; } }

/* ---------- BUTTONS / LINKS -------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--f-mono); font-size:var(--t-small); letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.6rem; border-radius:99px; border:1px solid var(--hair-strong);
  color:var(--bone); transition:border-color .4s var(--ease-out), background .4s, color .4s, gap .4s;
}
.btn:hover{ border-color:var(--amber); gap:1.1rem; }
.btn .arr{ transition:transform .4s var(--ease-out); }
.btn:hover .arr{ transform:translate(3px,-3px); }
.btn--solid{ background:var(--amber); color:var(--basalt); border-color:var(--amber); }
.btn--solid:hover{ background:var(--amber-soft); border-color:var(--amber-soft); }
.btn--ghost{ border-color:transparent; padding-inline:0; }
.btn--ghost:hover{ border-color:transparent; color:var(--amber); }
.link-u{ border-bottom:1px solid var(--amber-line); padding-bottom:1px; transition:border-color .3s, color .3s; }
.link-u:hover{ color:var(--amber); border-color:var(--amber); }

/* ---------- COMPONENTS -------------------------------------------------- */
/* data table — almanac calendars, specs */
.dtable{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:var(--t-small); }
.dtable caption{ text-align:left; color:var(--bone-faint); font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; padding-bottom:1rem; }
.dtable th,.dtable td{ text-align:left; padding:.95rem 1rem; border-bottom:1px solid var(--hair); font-variant-numeric:tabular-nums; vertical-align:baseline; }
.dtable th{ color:var(--bone-faint); font-weight:400; letter-spacing:.1em; text-transform:uppercase; font-size:var(--t-eyebrow); }
.dtable td{ color:var(--bone-dim); }
.dtable td:first-child{ color:var(--bone); }
.dtable tr{ transition:background .3s; }
.dtable tbody tr:hover{ background:var(--basalt-1); }
.dtable .hl{ color:var(--amber); }

/* dtable + components on the inverted bone (light) surface */
.section--bone .dtable th{ color:rgba(22,18,13,.5); }
.section--bone .dtable td{ color:var(--ink-dim); }
.section--bone .dtable td:first-child{ color:var(--ink); }
.section--bone .dtable th,.section--bone .dtable td{ border-bottom-color:var(--paper-hair); }
.section--bone .dtable caption{ color:rgba(22,18,13,.5); }
.section--bone .dtable tbody tr:hover{ background:rgba(22,18,13,.045); }
.section--bone .dtable .hl{ color:var(--amber-deep); }
.section--bone .deflist > div{ border-color:var(--paper-hair); }
.section--bone .deflist dd{ color:var(--ink-dim); }
.section--bone .muted{ color:var(--ink-dim); }
.section--bone .pull{ color:var(--ink); border-color:var(--amber-deep); }
.section--bone .pull em{ color:var(--amber-deep); }
.section--bone .amber{ color:var(--amber-deep); }
.section--bone .btn{ color:var(--ink); border-color:var(--paper-hair); }
.section--bone .btn:hover{ color:var(--amber-deep); border-color:var(--amber-deep); }
.section--bone .tile{ background:rgba(22,18,13,.03); border-color:var(--paper-hair); }
.section--bone .field{ border-color:var(--paper-hair); }
.section--bone .field input,.section--bone .field textarea,.section--bone .field select{ color:var(--ink); }
.section--bone .field label{ color:rgba(22,18,13,.5); }

/* definition list / principles */
.deflist{ display:grid; gap:0; }
.deflist > div{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.4rem,3vw,2.2rem) 0; border-top:1px solid var(--hair); align-items:baseline;
}
.deflist dt{ font-family:var(--f-display); font-size:var(--t-h4); line-height:1; }
.deflist dt .num{ font-family:var(--f-mono); font-size:.55em; color:var(--amber); display:block; margin-bottom:.6rem; letter-spacing:.1em; }
.deflist dd{ color:var(--bone-dim); }
@media (max-width:700px){ .deflist > div{ grid-template-columns:1fr; gap:.8rem; } }

/* vitrine / cards — deliberately varied sizes (anti 3-equal-cards) */
.vitrine{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,1.6rem); }
.tile{
  position:relative; background:var(--basalt-1); border:1px solid var(--hair);
  padding:clamp(1.5rem,2.5vw,2.4rem); border-radius:3px; overflow:hidden;
  transition:border-color .5s var(--ease-out), background .5s, transform .5s var(--ease-out);
  display:flex; flex-direction:column; gap:1rem; min-height:240px;
}
.tile:hover{ border-color:var(--hair-strong); background:var(--basalt-2); transform:translateY(-3px); }
.tile::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--amber);
  transition:width .6s var(--ease-out);
}
.tile:hover::after{ width:100%; }
.tile__idx{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.18em; color:var(--bone-faint); }
.tile__title{ font-family:var(--f-display); font-size:var(--t-h3); line-height:.98; margin-top:auto; }
.tile__meta{ font-family:var(--f-mono); font-size:var(--t-small); color:var(--amber); letter-spacing:.06em; }
.tile--xl{ grid-column:span 7; min-height:380px; }
.tile--lg{ grid-column:span 5; }
.tile--md{ grid-column:span 4; }
.tile--sm{ grid-column:span 3; }
.tile--wide{ grid-column:span 8; }
/* photographic plate tiles — image fills, caption sits at the base over a scrim */
.tile--photo{ justify-content:flex-end; min-height:300px; }
.tile--photo.tile--xl{ min-height:460px; }
.tile__img{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  filter:contrast(1.03) saturate(.9); transition:transform 1.4s var(--ease-out); }
.tile--photo:hover .tile__img{ transform:scale(1.05); }
.tile__img::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(14,11,9,.5) 0%, transparent 20%, transparent 40%, rgba(14,11,9,.55) 62%, rgba(14,11,9,.95)); }
.tile--photo .tile__idx{ text-shadow:0 1px 12px rgba(8,6,4,.8); }
.tile--photo > *:not(.tile__img){ position:relative; z-index:1; }
.tile--photo .tile__idx{ margin-bottom:auto; }
.tile--photo:hover::after{ width:100%; }
@media (max-width:980px){ .tile--xl,.tile--lg,.tile--md,.tile--sm,.tile--wide{ grid-column:span 6; } }
@media (max-width:620px){ .tile{ grid-column:1 / -1 !important; min-height:200px; } }

/* statline */
.statline{ display:flex; flex-wrap:wrap; gap:clamp(2rem,6vw,5rem); }
.stat{ display:flex; flex-direction:column; gap:.4rem; }
.stat__n{ font-family:var(--f-display); font-size:var(--t-h2); line-height:.9; }
.stat__n .u{ font-family:var(--f-mono); font-size:.32em; color:var(--amber); vertical-align:super; letter-spacing:0; }
.stat__l{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); max-width:22ch; }

/* pullquote */
.pull{
  font-family:var(--f-display); font-size:var(--t-h3); line-height:1.15; letter-spacing:-.01em;
  text-wrap:balance; padding-left:clamp(1.25rem,3vw,2.5rem); border-left:2px solid var(--amber);
  color:var(--bone);
}
.pull em{ color:var(--amber); }

/* figure / diagram frame */
.figframe{ border:1px solid var(--hair); background:var(--basalt-1); border-radius:3px; padding:clamp(1.2rem,2.5vw,2rem); }
.figframe figcaption{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); margin-top:1.2rem; display:flex; justify-content:space-between; gap:1rem; }

/* accordion */
.acc{ border-top:1px solid var(--hair); }
.acc__item{ border-bottom:1px solid var(--hair); }
.acc__head{ width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:clamp(1.3rem,2.6vw,1.9rem) 0; text-align:left; }
.acc__q{ font-family:var(--f-display); font-size:var(--t-h4); line-height:1.1; transition:color .3s; }
.acc__head:hover .acc__q{ color:var(--amber); }
.acc__sign{ flex:none; width:18px; height:18px; position:relative; margin-top:.4em; }
.acc__sign::before,.acc__sign::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--amber); transition:transform .4s var(--ease-out); }
.acc__sign::before{ width:100%; height:1px; } .acc__sign::after{ width:1px; height:100%; }
.acc__item[open] .acc__sign::after{ transform:scaleY(0); }
.acc__body{ overflow:hidden; }
.acc__body-inner{ padding-bottom:clamp(1.3rem,2.6vw,1.9rem); color:var(--bone-dim); max-width:62ch; }
details.acc__item summary{ list-style:none; cursor:pointer; }
details.acc__item summary::-webkit-details-marker{ display:none; }

/* form */
.field{ position:relative; border-bottom:1px solid var(--hair-strong); padding-top:1.6rem; }
.field input,.field textarea,.field select{
  width:100%; background:none; border:none; color:var(--bone); font-family:var(--f-sans); font-size:var(--t-body);
  padding:.6rem 0 .9rem; resize:vertical;
}
.field label{
  position:absolute; left:0; top:1.7rem; font-family:var(--f-mono); font-size:var(--t-small);
  letter-spacing:.08em; text-transform:uppercase; color:var(--bone-faint);
  transition:transform .35s var(--ease-out), color .35s, font-size .35s; pointer-events:none;
}
.field input:focus + label,.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.7rem); font-size:var(--t-eyebrow); color:var(--amber);
}
.field input::placeholder,.field textarea::placeholder{ color:transparent; }
.field:focus-within{ border-color:var(--amber); }

/* ---------- FOOTER (centered logo crest) ------------------------------- */
.footer{ position:relative; padding-block:clamp(var(--s-7),8vw,var(--s-9)) var(--s-6); border-top:1px solid var(--hair); }
.footer__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.5rem,3vw,3rem); }
.footer__col{ grid-column:span 3; display:flex; flex-direction:column; gap:.7rem; }
.footer__col h5{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:.5rem; }
.footer__col a{ color:var(--bone-dim); transition:color .3s; width:fit-content; }
.footer__col a:hover{ color:var(--amber); }
@media (max-width:760px){ .footer__col{ grid-column:span 6; } }
.crest{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; padding-block:clamp(var(--s-6),7vw,var(--s-8)) var(--s-5); }
.crest__mark{ width:54px; height:54px; }
.crest__name{ font-family:var(--f-display); font-size:var(--t-h4); letter-spacing:.02em; }
.crest__est{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.3em; text-transform:uppercase; color:var(--bone-faint); }
.footer__base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:var(--s-5); border-top:1px solid var(--hair); font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint); }

/* ---------- REVEAL ANIMATIONS ------------------------------------------ */
.reveal{ opacity:0; transform:translateY(1.6rem); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay:calc(var(--i,0) * 80ms); }
.reveal.is-in{ opacity:1; transform:none; }
.line{ display:block; overflow:hidden; }
.line > span{ display:block; transform:translateY(112%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms); }
.line.is-in > span,.is-in .line > span{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal,.line > span{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- SCENE CANVAS / HERO ---------------------------------------- */
#scene{ position:fixed; inset:0; z-index:var(--z-scene); pointer-events:none; }
#scene canvas{ width:100%; height:100%; display:block; }
.scene-fallback{ position:fixed; inset:0; z-index:var(--z-scene); background:var(--basalt) center/cover no-repeat; display:none; }
body.no-webgl .scene-fallback{ display:block; }
.scrim{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(14,11,9,.55) 100%); }

/* stations — copy floating over the scene on the home page */
.station{ position:relative; z-index:var(--z-content); min-height:100svh; display:flex; align-items:center; padding-block:14vh; }
.station__inner{ max-width:46ch; }
.home-main{ position:relative; z-index:var(--z-content); }

/* page hero (inner pages) */
.phero{ position:relative; padding-top:clamp(8rem,16vh,12rem); padding-bottom:clamp(2rem,5vw,4rem); }
.phero__coord{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem; font-family:var(--f-mono); font-size:var(--t-small); color:var(--bone-faint); letter-spacing:.08em; }
.phero__coord span .amber{ color:var(--amber); }

/* utility */
.flow > * + *{ margin-top:var(--s-4); }
.flow-lg > * + *{ margin-top:var(--s-6); }
.muted{ color:var(--bone-dim); }
.faint{ color:var(--bone-faint); }
.center{ text-align:center; }
.maxw-prose{ max-width:64ch; }
.tnum{ font-variant-numeric:tabular-nums; }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- APERTURE-WIPE PAGE TRANSITION (View Transitions API) -------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:ap-out .45s var(--ease-orbital) both; }
::view-transition-new(root){ animation:ap-in .6s var(--ease-orbital) both; }
@keyframes ap-out{ to{ opacity:0; clip-path:inset(0 0 0 0); filter:brightness(1.4); } }
@keyframes ap-in{
  from{ clip-path:inset(50% 49% 50% 49%); opacity:.2; }
  to{ clip-path:inset(0 0 0 0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}

/* JS-driven aperture overlay fallback (for non-VT browsers / hard control) */
.aperture{ position:fixed; inset:0; z-index:var(--z-overlay); pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, transparent 0, var(--basalt) 0);
}

/* ---------- HOME: stations over the scene ------------------------------ */
.station__inner{ position:relative; text-shadow:0 1px 30px rgba(8,6,4,.7), 0 1px 4px rgba(8,6,4,.5); }
.station__inner .eyebrow{ text-shadow:none; }
.station--center{ justify-content:center; text-align:center; }
.station--center .station__inner{ margin-inline:auto; }
.station--end{ justify-content:flex-start; }
.station--right{ justify-content:flex-end; }
.home-lower{ position:relative; z-index:var(--z-content); background:var(--basalt);
  box-shadow:0 -40px 80px 40px var(--basalt); }

/* scroll cue */
.cue{ position:absolute; left:50%; bottom:3vh; transform:translateX(-50%); z-index:var(--z-content);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.24em; text-transform:uppercase; color:var(--bone-faint); }
.cue__line{ width:1px; height:46px; background:linear-gradient(var(--amber),transparent); position:relative; overflow:hidden; }
.cue__line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--bone); animation:cueRun 2.2s var(--ease-out) infinite; }
@keyframes cueRun{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }
@media (prefers-reduced-motion: reduce){ .cue__line::after{ animation:none; } }

/* the deep-time datestamp — the TICK readout */
.stamp{
  display:inline-flex; flex-direction:column; gap:.5rem; margin-top:2.5rem;
  border:1px solid var(--hair); border-left:2px solid var(--hair-strong);
  padding:1.1rem 1.4rem; background:color-mix(in srgb, var(--basalt) 50%, transparent);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .6s var(--ease-out), box-shadow .6s, background .6s;
  text-shadow:none;
}
.stamp__label{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.24em; text-transform:uppercase; color:var(--bone-faint); }
.stamp__year{ font-family:var(--f-display); font-size:var(--t-h3); line-height:1; color:var(--bone); transition:color .6s; font-variant-numeric:tabular-nums; }
.stamp__meta{ font-family:var(--f-mono); font-size:var(--t-small); letter-spacing:.08em; color:var(--bone-dim); }
.stamp.is-struck{ border-left-color:var(--amber); border-color:var(--amber-line); box-shadow:0 0 50px -6px var(--amber-glow); background:color-mix(in srgb, var(--amber) 8%, var(--basalt) 50%); }
.stamp.is-struck .stamp__year{ color:var(--amber-soft); }

/* "01 / 04" station index marks down the left axis */
.station__idx{ font-family:var(--f-mono); font-size:var(--t-eyebrow); letter-spacing:.2em; color:var(--bone-faint); margin-bottom:1.4rem; }
.station__idx b{ color:var(--amber); font-weight:400; }

/* ---------- HOME: pinned stage + scrubbed captions --------------------- */
#journey{ position:relative; height:600vh; }
.stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.cap{
  position:absolute; inset:0; display:flex; align-items:center;
  padding-inline:var(--pad); z-index:var(--z-content);
  opacity:0; visibility:hidden; transform:translateY(2.2rem);
  transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out), visibility .9s;
}
.cap.is-vis{ opacity:1; visibility:visible; transform:none; }
.cap[data-align="center"]{ justify-content:center; text-align:center; }
.cap[data-align="end"]{ justify-content:flex-start; }
.cap__inner{ position:relative; max-width:46ch; text-shadow:0 1px 30px rgba(8,6,4,.72), 0 1px 4px rgba(8,6,4,.5); }
.cap[data-align="center"] .cap__inner{ margin-inline:auto; }
.cap__inner .eyebrow,.cap__inner .stamp{ text-shadow:none; }
/* no-WebGL / no-progress fallback: un-pin and stack the captions */
#journey.is-static{ height:auto; }
#journey.is-static .stage{ position:static; height:auto; }
#journey.is-static .cap{ position:relative; inset:auto; opacity:1; visibility:visible; transform:none; min-height:84svh; }