/* ═══════════════════════════════════════════════════════════════
   ATLAS & GUIDE
   One continuous 3D system on the book's own navy. Bone draws the
   frame; copper marks only what is yours. Restraint is the luxury.
   ═══════════════════════════════════════════════════════════════ */

/* The palette is lifted from the book itself — pipeline/templates/design/atlas.css.
   A visitor who buys should recognise the site in the object that arrives. */
:root{
  --blue:        #0D1626;   /* the book's page ground — navy, never black */
  --blue-deep:   #070C15;   /* the book's gallery ground — canvas/gutter  */
  --white:       #EDEFF3;   /* bone: the book's ink                       */
  --ink:         rgba(237,239,243,.78);
  --ink-dim:     rgba(237,239,243,.56);
  --ink-faint:   rgba(237,239,243,.52);   /* .40 measured 3.5:1 (2026-10-09) */
  --line:        #22303F;   /* the book's hairline rule                   */
  --gold:        #A8683A;   /* copper — the book's "you" colour           */
  --gold-bright: #C08A5F;   /* copper-soft                                */
  --copper:      #A8683A;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;   /* the book's own family, not Inter (2026-10-09) */
  --mono:  'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; /* founder 2026-10-02: no typewriter voice anywhere */
}

*{ margin:0; padding:0; box-sizing:border-box; }

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

body{
  background: var(--blue);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;   /* one body weight site-wide (2026-10-02 sweep) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection{ background: var(--gold); color: var(--blue); }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; }

/* ─── the one scene, fixed behind everything ───────────────────── */
/* THE SHEET. The hero film is fixed under the whole page: while the visitor
   scrolls the first screen it plays the hand finishing its line and leaving;
   after that it holds on its bare-paper frame and simply IS the paper the
   worlds and the words sit on. Before the film arrives (or under reduced
   motion) the same paper shows as a still. */
.hero-film{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--blue) center/cover no-repeat;
}
.scene-holder{
  position:fixed; top:0; left:0; right:0;
  height:100vh; height:100lvh;
  z-index:1; pointer-events:none;
  /* transparent canvas over the sheet; opacity is the reveal, written per frame */
  opacity:0;
}
#cosmos{ width:100%; height:100%; display:block; }
.label-layer{ position:absolute; inset:0; overflow:hidden; }

/* ─── the livery: the book's own rule stack ──────────────────────
   copper rule · hairline · bone — the same three weights that divide
   a page in the book (.rule-c / .rule-h / bone). Square corners, no
   glow: docs/17 §D "the Rule — fine single or double line borders". */
.livery{ width:140px; margin: 26px auto; }
.livery i{ display:block; height:1px; }
.livery i:nth-child(1){ background: var(--copper); }
.livery i:nth-child(2){ background: var(--line); margin-top:5px; }
.livery i:nth-child(3){ background: var(--white); margin-top:5px; opacity:.62; }
.livery.sm{ width:88px; margin: 20px 0 24px; }

/* ═══ THE COPPER LAW ═══════════════════════════════════════════════
   From the book's own brief (docs/34): BONE IS THE FRAME, COPPER IS YOU.
   In the book, white/bone draws everything fixed and identical in every
   copy — the grid, the rules, the running heads, the labels — and copper
   prints only the reader's own data, so brass literally means "this is
   you". The site now obeys the same law, which is why copper appears on
   so little of it:

     COPPER  the one primary action (it begins YOUR atlas), the real
             singular facts of the object (120 pages, edition of one),
             the house mark, your position in the journey, your selection.
     BONE    everything structural: kickers, running heads, labels, prices,
             plate numerals, rules, borders, bullets, icons.

   The accent lands under 10% of any screen, per docs/17 §5 — and every
   place it does land now carries meaning rather than warmth.
   ══════════════════════════════════════════════════════════════════ */

/* ─── type primitives ────────────────────────────────────────────
   The mono kicker is the book's instrument voice (atlas.css .kicker:
   IBM Plex Mono, letterspaced small caps). It is page furniture — the
   running head — so it sets in bone, not copper. */
.kicker{
  font-family:var(--mono);
  font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint);
}
.kicker-gold{ color:var(--ink-dim); }

.sec-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem, 5.4vw, 4.4rem);
  line-height:1.06; color:var(--white); letter-spacing:.01em;
  margin-top:18px;
}
.sec-title em, .hero-title em, .panel h2 em{ font-style:normal; font-weight:inherit; }

.sec-sub{
  max-width:36rem; margin:22px auto 0;
  font-size:15px; line-height:1.85; color:var(--ink);
}

.btn{
  display:inline-block;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 30px 14px;
  border:1px solid var(--line);
  color:var(--white);
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.btn-gold{ border-color:var(--gold); color:var(--gold-bright); }
.btn-gold:hover{ background:var(--gold); color:var(--blue); }
.btn-line:hover{ border-color:rgba(237,239,243,.6); }

/* ─── header ───────────────────────────────────────────────────── */
/* The header settles as you leave the hero. The height is FIXED and the
   contents ride down/up on a transform — animating padding here would relayout
   the header on every frame of the scroll threshold. Same movement, no thrash. */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 48px;
  /* the founder's ask, verbatim: a black faded gradient the wordmark protrudes
     through. Gallery-black at the top edge, gone by ~110px. Always on. */
  background:linear-gradient(180deg, rgba(7,12,21,.94) 0%, rgba(7,12,21,.62) 48%, rgba(7,12,21,0) 100%);
  transition: background .45s ease;
}
.site-head > *{
  transform:translateY(10px);
  transition:transform .45s cubic-bezier(0.16,1,0.3,1);
}
.site-head.scrolled > *{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .site-head > *, .site-head.scrolled > *{ transform:none; transition:none; }
}
.site-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 40%, rgba(237,239,243,.5) 70%, transparent);
  opacity:0; transition:opacity .45s ease;
}
.site-head.scrolled{ background:rgba(7,12,21,.92); backdrop-filter:blur(10px); padding:16px 48px; }
.site-head.scrolled::after{ opacity:.5; }

.wordmark{ display:flex; align-items:center; color:var(--white); }
.wm-text{
  /* the product pages' wordmark, site.css .wordmark: serif 300, wide tracking,
     caps, nothing else. The founder picked this one on 2026-09-24. */
  font-family:var(--serif); font-weight:300; font-size:17px;
  letter-spacing:.38em; text-transform:uppercase; color:var(--white);
  white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.7);
}

.site-nav{ display:flex; align-items:center; gap:38px; }
.site-nav a:not(.btn){
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s ease;
}
.site-nav a:not(.btn):hover{ color:var(--white); }
.site-nav .btn{ padding:11px 22px 10px; }

/* ─── hero — the film, full-bleed ────────────────────────────────
   The first screen is the craft itself: the pen laying down a copper line
   on the book's navy paper. The words sit at the foot, left-aligned, and
   name the product outright — the founder's brief was that the old headline
   never said what was for sale. A navy scrim rises from the base so type
   holds on any frame of the film. */
/* One screen only (founder 2026-10-02): the how-band follows the hero on the
   first scroll, no bare-paper interlude. The film still scrubs underneath. */
.hero{ position:relative; height:100svh; z-index:2; pointer-events:none; }
.hero-stage{
  position:sticky; top:0; height:100svh;
  display:grid; align-items:end; overflow:hidden;
}
.hero-film video{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0;   /* written per frame by fadeHero() once the film is running */
}
.hero-film.on video{ opacity:1; }
.hero-film::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* a legibility scrim, not a curtain: the paper must stay visible through it
     so the sheet reads as continuous with the ground beneath */
  background:
    linear-gradient(180deg, rgba(7,12,21,.55) 0%, rgba(7,12,21,0) 28%),
    linear-gradient(0deg, rgba(13,22,38,.70) 0%, rgba(13,22,38,.42) 30%, rgba(13,22,38,0) 60%);
  opacity:var(--scrim, 1); transition:opacity .3s linear;
}
.hero-inner{
  position:relative; z-index:1;
  padding:0 7vw clamp(64px, 9svh, 110px);
  max-width:1280px; text-align:left;
  will-change:transform, opacity;
}
/* founder 2026-10-02: the first sale sits beside the headline — a boxed,
   autoplaying film of a real copy being opened */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(26px,4vw,64px); align-items:end; width:100%;
}
.hero-box{
  margin:0; pointer-events:auto; position:relative;
}
.hero-box video{
  display:block; width:100%; height:auto; border-radius:6px;
  border:1px solid rgba(237,239,243,.16);
  box-shadow:0 34px 90px rgba(4,8,16,.6);
}
.hero-box figcaption{
  margin-top:12px; font-size:12.5px; line-height:1.6; color:var(--ink-dim);
  font-family:var(--sans);
}
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; align-items:start; gap:22px; }
  .hero-box{ max-width:560px; }
}
/* desktop (founder 2026-10-02, marked-up screenshot): the film comes up and in,
   beside the headline, not low on the right over the moon. The copy column
   narrows to a reading measure so the film can sit in the gap after "you." */
@media (min-width:981px){
  .hero-inner{ max-width:1500px; }
  .hero-grid{
    grid-template-columns:minmax(0, 33rem) minmax(0, 1fr);
    gap:clamp(28px, 3vw, 52px); align-items:center;
  }
  .hero-title{ font-size:clamp(3rem, 6vw, 5.6rem); }
  .hero-box{ max-width:720px; }
}
.hero-inner a{ pointer-events:auto; }
.hero-kicker{
  font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
}
.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(3rem, 7.4vw, 6.4rem);
  line-height:1.0; color:var(--white); letter-spacing:.005em;
  margin-top:18px; max-width:15ch; text-wrap:balance;
}
.hero-sub{
  max-width:40rem; margin:22px 0 0;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.02rem, 1.35vw, 1.2rem); line-height:1.65; color:var(--ink);
}
.hero-spec{
  margin-top:22px; font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}
.hero-spec b{ color:var(--gold-bright); font-weight:300; }
.hero-cta{ display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; margin-top:34px; }
.hero .livery{ margin:22px 0 0; }

/* the cue keeps to the right edge: the hero copy now owns the bottom-left.
   Founder 2026-10-02: larger, so it actually invites the scroll. */
.scroll-cue{
  /* founder 2026-10-09: it stays on screen all the way down, and leaves at the bottom */
  position:fixed; right:4vw; bottom:28px; z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:auto; padding:10px;
  transition:opacity .45s ease;
}
.scroll-cue.at-end{ opacity:0; pointer-events:none; }
@media (max-width:900px){ .scroll-cue{ display:none; } }
/* founder 2026-10-02: the cue is a scroll gesture, not a clickable label —
   a mouse outline with a falling copper dot, and two chevrons stepping down */
.cue-wheel{
  display:block; width:24px; height:38px; border-radius:13px;
  border:1.5px solid rgba(237,239,243,.55); position:relative;
}
.cue-dot{
  position:absolute; left:50%; top:7px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--gold-bright);
  box-shadow:0 0 10px rgba(192,138,95,.7);
  animation:cuedot 1.9s ease-in-out infinite;
}
.cue-chevs{ display:block; }
.cue-chevs i{
  display:block; width:10px; height:10px; margin:0 auto -5px;
  border-right:1.5px solid rgba(237,239,243,.75);
  border-bottom:1.5px solid rgba(237,239,243,.75);
  transform:rotate(45deg);
  animation:cuechev 1.9s ease-in-out infinite;
}
.cue-chevs i:nth-child(2){ animation-delay:.25s; }
@keyframes cuedot{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  70%{ transform:translateY(14px); opacity:1; }
  100%{ transform:translateY(18px); opacity:0; }
}
@keyframes cuechev{
  0%,100%{ opacity:.25; transform:rotate(45deg) translate(0,0); }
  50%{ opacity:1; transform:rotate(45deg) translate(3px,3px); }
}

/* no fade-in: the page is simply there (audit 2026-10-10, "fade-in on scroll" reads as a template) */
.reveal{ opacity:1; transform:none; }
.reveal.in{ opacity:1; transform:none; }

/* ─── the journey ────────────────────────────────────────────────
   Three stops, one per instrument, and a short scroll per stop: the first
   scroll off the hero lands on the first thing we sell. */
.journey-wrap{ position:relative; height:385vh; z-index:2; }   /* four stops (candles added 2026-10-02) */
.stage{
  position:sticky; top:0; height:100svh;
  pointer-events:none;
  /* the panel scrims bleed 64px past the panel box; on a phone that reaches
     past the right edge and widens the layout viewport to 417px, clipping the
     header. The stage clips its own overflow (sticky survives this; it is the
     ANCESTOR's overflow that would break it). */
  overflow:hidden;
}

.p-label{
  position:absolute; top:0; left:0; text-align:center;
  transform:translate(-50%,-100%);
  pointer-events:auto; cursor:pointer; will-change:transform,opacity;
}
.p-label .tick{
  display:block; width:1px; height:22px; margin:9px auto 0;
  background:linear-gradient(180deg, rgba(237,239,243,.55), rgba(237,239,243,.15));
}
.p-label .name{
  display:block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--white);
  transition:color .3s ease;
}
.p-label .cap{
  display:block; margin-top:6px; font-family:var(--mono);
  font-size:9.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint);
}
.p-label:hover .name{ color:var(--white); }
.p-label.nocap .cap{ display:none; }

/* content panels */
.panel{
  position:absolute; top:50%; transform:translateY(-50%);
  width:min(470px, 86vw); z-index:4;
  opacity:0; visibility:hidden;
  pointer-events:none;
}
.panel.on{ visibility:visible; pointer-events:auto; }
.panel::before{
  content:''; position:absolute; inset:-36px -40px; z-index:-1;
  /* a close, quiet pool of shadow under the type only — it must not spread
     over the sheet and dull the worlds beside it */
  background:radial-gradient(100% 100% at 50% 50%,
             rgba(13,22,38,.62) 34%, rgba(13,22,38,.30) 62%, rgba(13,22,38,0) 84%);
  pointer-events:none;
}
.side-right{ right:7vw; }
.side-left{ left:7vw; }
/* The product leads: a film of the thing being made sits at the head of
   every panel, ruled like a plate. The planet behind is the room it stands in. */
.panel-film{
  position:relative; aspect-ratio:2/1; max-height:26svh; overflow:hidden; margin:0 0 18px;
  border:1px solid var(--line); background:var(--blue-deep) center/cover no-repeat;
}
.panel-film video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .6s cubic-bezier(.16,1,.3,1);
}
.panel-film.has-film video{ opacity:1; }
.panel-film .film-cap{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--mono); font-weight:300; font-size:9px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(237,239,243,.72);
  text-shadow:0 1px 10px rgba(13,22,38,.95);
}
.panel h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.1; color:var(--white); margin-top:12px;
}
.panel p{ font-family:var(--sans); font-size:15.5px; line-height:1.75; color:var(--ink); max-width:48ch; }
/* .meta is the book's folio/running-head voice; .price-line its stat row */
.panel .meta{
  margin-top:22px; font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-faint);
}
.panel .price-line{
  margin-top:16px; font-family:var(--sans); font-size:.98rem;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.panel .btn{ margin-top:20px; }

/* The spec line: the strongest trust artefact on the page. Page counts and
   dimensions, set as instrument data; the singular facts in copper. */
.panel .spec{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; font-weight:300;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; line-height:1.9;
}
.panel .spec b{ color:var(--gold-bright); font-weight:300; }

/* Portrait: the sheet is anchored to the bottom and grows upward, so the film
   is capped in viewport units or it pushes the heading off the top. The spec
   line already carries the real numbers; the orbital footnote is flavour, and
   the phone needs the room. */
@media (max-width:900px){
  .panel-film{ aspect-ratio:auto; height:min(21svh, 170px); margin-bottom:14px; }
  .panel .meta{ display:none; }
}

/* progress rail */
/* The rail runs along the bottom, centred. The right edge belongs to the
   side-right panels, and labels there sat across the Atlas of Us book
   (founder, 2026-10-02); down here the three names collide with nothing. */
.rail{
  position:absolute; left:0; right:0; bottom:16px; z-index:5;
  display:flex; flex-direction:row; justify-content:center; gap:30px;
  pointer-events:auto;
}
.rail button{
  display:flex; align-items:center; gap:9px;
  background:none; border:none; cursor:pointer; padding:6px 4px;
}
.rail button::before{
  content:''; width:7px; height:7px; border-radius:50%; flex:none;
  background:rgba(237,239,243,.32); transition:background .3s ease, transform .3s ease;
}
/* copper marks where YOU are in the journey — the one positional fact */
.rail button.active::before{ background:var(--gold); transform:scale(1.35); }
.rail button span{
  font-family:var(--mono); font-weight:500;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
  text-shadow:0 1px 8px rgba(13,22,38,.9);
  transition:color .3s ease;
}
.rail button.active span{ color:var(--white); opacity:1; }
.rail button:hover span{ color:var(--white); opacity:1; }

/* ─── footer ───────────────────────────────────────────────────── */
.site-foot{
  position:relative; z-index:3;
  border-top:1px solid var(--line);
  background:var(--blue-deep);
  padding:52px 8vw 64px;
}
.foot-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.site-foot .wm-text{ font-size:16px; }
.foot-nav{ display:flex; gap:30px; flex-wrap:wrap; }
.foot-nav a{
  font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s ease;
}
.foot-nav a:hover{ color:var(--white); }
.foot-line{ margin-top:30px; font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.08em; line-height:1.9; color:var(--ink-faint); }

/* ─── responsive ───────────────────────────────────────────────── */
@media (max-width: 900px){
  .site-head{ padding:16px 18px; }
  .site-head.scrolled{ padding:16px 18px; }
  .site-nav a:not(.btn){ display:none; }
  .site-nav{ gap:0; }
  .site-nav .btn{ padding:9px 14px 8px; font-size:13px; letter-spacing:0; }
  .wm-text{ font-size:12px; letter-spacing:.26em; }

  .kicker{ font-size:10px; letter-spacing:.3em; }
  .hero-title{ font-size:clamp(2.35rem, 10.5vw, 4rem); }
  .hero-inner{ padding:0 6vw 92px; }
  /* the film is 16:9; a portrait crop centred on the sheet loses the hand, so
     the crop leans toward the pen (left third of the frame) */
  /* Portrait: a 16:9 film cropped to a phone puts the plate straight behind the
     headline. Instead the film keeps a band across the top — the plate and the
     working hand at full size — and is masked into the bare sheet below, where
     the words sit on clean paper. */
  .hero-film{ background-position:65% 50%; }
  .hero-film video{
    /* 2026-09-24: the re-rendered hero puts a bright engraved moon in the middle
       of frame, so the old 52% band sat straight behind the headline. The band is
       now a fifth of the screen: the moon reads as a small disc tucked under the
       header and every word below it is on bare sheet. */
    height:21%; object-position:46% 20%;
    -webkit-mask-image:linear-gradient(180deg, #000 66%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 66%, transparent 100%);
  }
  .hero-film::after{ background:
    linear-gradient(180deg, rgba(7,12,21,.55) 0%, rgba(7,12,21,0) 28%),
    linear-gradient(0deg, rgba(13,22,38,.78) 0%, rgba(13,22,38,.5) 34%, rgba(13,22,38,0) 64%); }
  .hero-sub{ font-size:1.05rem; }
  .hero-cta .btn{ padding:13px 22px 12px; }

  .panel, .side-left, .side-right{
    left:6vw; right:6vw; top:auto; bottom:7svh; transform:none;
    width:auto;
  }
  .panel p{ max-width:none; font-size:13.5px; }
  .panel h2{ font-size:clamp(1.7rem, 6.4vw, 2.2rem); }
  /* the rail is already a bottom row; on a phone the names come off and the
     marks grow into comfortable touch targets */
  .rail{ position:fixed; gap:22px; }
  .rail button{ padding:12px 8px; }
  .rail button::before{ width:8px; height:8px; }
  .rail button span{ display:none; }
  .p-label .name{ font-size:9.5px; letter-spacing:.26em; }
  .p-label .cap{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .cue-dot, .cue-chevs i{ animation:none; }
}

/* ─── no-WebGL / no-JS fallback: readable stacked page ─────────── */
body.no3d .scene-holder{ display:none; }
body.no3d .journey-wrap{ height:auto; }
body.no3d .hero{ height:auto; }
body.no3d .hero-film{ position:absolute; height:100svh; }
body.no3d .stage{ position:static; height:auto; padding:60px 8vw; pointer-events:auto; }
body.no3d .panel{
  position:static; opacity:1 !important; visibility:visible;
  transform:none; width:auto; max-width:560px; margin:70px auto;
  pointer-events:auto;
}
body.no3d .rail{ display:none; }

/* ─── review stills: html.still set by app.js for ?still/?stop/?only ── */
html.still{ scroll-behavior:auto; }
html.still .reveal{ opacity:1; transform:none; transition:none; }
html.still .cue-dot, html.still .cue-chevs i{ animation:none; }
body.dev-pin .hero, body.dev-pin .site-foot{ display:none; }
body.dev-pin .journey-wrap{ height:100svh; }


/* ─── the shelf below the journey ──────────────────────────────────
   Anything after .journey-wrap must carry its own ground: the film is
   fixed at z-index 0 and the canvas at 1, and ag-app.js only puts the
   scene to sleep once an opaque shelf has covered it (see `covered`).
   Same treatment as .site-foot: relative, z-index 3, gallery ground. */
.home-band{
  position:relative; z-index:3;
  background:var(--blue-deep);
  padding:74px 8vw 0;
}
.home-band + .home-band{ padding-top:0; }
.home-band:last-of-type{ padding-bottom:74px; }
.home-inner{ max-width:1120px; margin:0 auto; }
.home-band .kicker{ margin-bottom:14px; }
.home-band h2{
  font-family:var(--serif); font-weight:500; color:var(--white);
  font-size:clamp(26px,3.4vw,40px); line-height:1.12; margin:0 0 14px;
}
.home-band h2 em{ font-style:normal; }
.home-band .sub{ font-size:14px; line-height:1.85; color:var(--ink); max-width:52ch; }

/* three steps, one line */
.home-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:34px 0 0; padding:0; list-style:none; }
.home-steps li{ border-top:1px solid var(--line); padding-top:16px; }
.home-steps .n{ font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; color:var(--ink-faint); }
.home-steps h3{ font-family:var(--serif); font-weight:500; font-size:20px; color:var(--white); margin:8px 0 6px; }
.home-steps p{ font-size:13.5px; line-height:1.8; color:var(--ink); }

/* the value diagram */
.home-figure{ margin:34px 0 0; }
.home-figure svg{ display:block; width:100%; height:auto; }
.home-figure figcaption{
  margin-top:14px; font-family:var(--mono); font-weight:500; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}

/* the gift shelf */
.home-gift{ display:grid; grid-template-columns:1.1fr 1fr; gap:34px; align-items:center; }
.home-gift .art{ border:1px solid var(--line); border-radius:2px; overflow:hidden; aspect-ratio:16/9; background:var(--blue); }
.home-gift .art img{ width:100%; height:100%; object-fit:cover; display:block; }

.home-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

@media (max-width:860px){
  .home-band{ padding:56px 6vw 0; }
  .home-steps{ grid-template-columns:1fr; }
  .home-gift{ grid-template-columns:1fr; }
}

/* the value diagram: three blocks, hairline joined on wide screens */
/* the steps, on photographs of someone doing it (founder, 2026-09-23) */
.fig-flow.shots{ align-items:start; }
.fig-col .fig-shot{
  /* width/height attributes on the img are presentational hints, so the height
     has to be released here or aspect-ratio never applies and the photo lays
     out 880 px tall */
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;
  border:1px solid var(--line); border-radius:2px; margin:0 0 16px;
  background:var(--blue-deep);
}
@media (max-width:900px){ .fig-col .fig-shot{ margin-bottom:12px; } }
.fig-flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin:30px 0 0; padding:0; list-style:none; }
.fig-col{ position:relative; border-top:1px solid var(--line); padding-top:18px; }
.fig-col + .fig-col::before{
  content:""; position:absolute; left:-19px; top:-4px; width:7px; height:7px;
  border:1px solid rgba(237,239,243,.45); border-radius:50%;
}
.fig-step{ font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.fig-col h3{ font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.2; color:var(--white); margin:10px 0 0; }
.fig-icon{ display:block; width:100%; max-width:220px; height:auto; margin:18px 0 16px; }
.fig-icon .bone{ fill:none; stroke:rgba(237,239,243,.45); stroke-width:1.4; stroke-linecap:round; }
.fig-icon .cop{ fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; }
.fig-icon .copf{ fill:var(--gold); stroke:none; }
.fig-col p{ font-size:13.5px; line-height:1.8; color:var(--ink); }
.fig-col .fig-note{ margin-top:12px; font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:860px){
  .fig-flow{ grid-template-columns:1fr; gap:26px; }
  .fig-col + .fig-col::before{ left:0; top:-4px; }
}

/* where the prices sit, said on the first screen */
.hero-price{
  margin-top:16px; font-family:var(--sans); font-size:1.02rem;
  color:var(--ink); font-variant-numeric:tabular-nums;
}

/* the gate: the one thing the customer controls, so it carries the loud copper */
.fig-gate{
  margin-top:26px; padding:20px 22px;
  border:1px solid var(--gold); border-radius:2px;
  background:rgba(168,104,58,.06);
}
.fig-gate .gate-tag{
  font-family:var(--mono); font-weight:500; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-bright);
}
.fig-gate h3{
  font-family:var(--serif); font-weight:500; font-size:21px;
  color:var(--white); margin:8px 0 8px;
}
.fig-gate p{ font-size:13.5px; line-height:1.8; color:var(--ink); max-width:70ch; }

/* the line that frames the founder's own copy before anyone opens it */
.hero-foot{
  margin-top:18px; max-width:56ch;
  font-size:12.5px; line-height:1.8; color:var(--ink-dim);
}


/* ═══ 2026-10-02 final sweep: the homepage buttons join the site system ═══ */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none;
  border-radius: 3px; padding: 14px 26px;
}
.btn-gold { background: #B8784D; border-color: #B8784D; color: #0D1626; } /* buttons carry #B8784D, a shade of the copper that reads at 5:1 under navy text (#A8683A was 4.06, 2026-10-09) */
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #0D1626; }
.btn-line { border-color: rgba(237,239,243,.35); color: var(--white); }
.site-nav .btn { padding: 10px 18px; font-size: 14px; }
.site-nav .btn-line { background: transparent; border-color: rgba(237,239,243,.45); color: var(--white); }   /* bone, like every other page's header (audit 2026-10-10): the hero's own button is the copper one */
.site-nav .btn-line:hover { background: transparent; border-color: var(--white); }
.panel .btn { margin-top: 6px; }


/* ═══ 2026-10-02 mobile pass ═══ */
@media (max-width: 900px) {
  .p-label .name { font-size: 11px; letter-spacing: .14em; }
  .site-nav .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .hero-cta .btn { min-height: 48px; display: inline-flex; align-items: center; }
}

/* 2026-10-02 mobile pass: the homepage labels meet the 12px floor */
.kicker, .hero-kicker, .fig-step, .fig-col .fig-note, .home-figure figcaption,
.home-steps .n, .fig-gate .gate-tag, .foot-nav a, .site-nav a:not(.btn), .rail button span { font-size: 12px; }


/* ═══ 2026-10-02 mobile pass: the hero fits a phone, and the homepage gets a menu ═══ */
@media (max-width: 900px) {
  .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: 100svh; align-items: start; padding-top: 92px; overflow: visible; }
  .hero-inner { padding-bottom: 56px; }
  .site-nav .btn { font-size: 13px; letter-spacing: 0; padding: 0 14px; }
  .menu-toggle { display: inline-flex; }
}
.menu-toggle {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 6px;
  background: none; border: 1px solid rgba(237,239,243,.3); border-radius: 3px; color: var(--white); cursor: pointer;
}
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-menu {
  position: fixed; top: 76px; left: 12px; right: 12px; z-index: 40; display: none; flex-direction: column;
  background: rgba(11,19,34,.98); border: 1px solid var(--line); border-radius: 4px; padding: 6px 0;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.mobile-menu.open { display: flex; }
.mobile-menu a { padding: 14px 20px; font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--white); }
.mobile-menu a + a { border-top: 1px solid rgba(237,239,243,.08); }

@media (max-width: 900px) { .menu-toggle { display: inline-flex; } }

/* 2026-10-02: the how-band ends with its button, so it carries its own foot room */
#how { padding-bottom: 88px; }
@media (max-width: 860px) { #how { padding-bottom: 64px; } }

/* SELLING BANDS on the homepage (founder 2026-10-10, docs/55-SALES-VOICE.md). The contents
   list and the with/without table come from pr.css; this page names its hairline --line, so
   pr.css's --rule is given the same value here, and bone is --white on this page. */
:root{ --rule: #22303F; }
.home-band .contents{ margin-top:26px; }
.home-band .contents .ct-n, .home-band .versus td.area, .home-band .versus td.with, .home-band .versus th.with{ color:var(--white); }
.home-band .versus{ margin-top:26px; }
.home-band .versus td.without{ color:var(--ink-dim); }
#close .sub{ max-width:60ch; }