/* ═══════════════════════════════════════════════════════════════
   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,.40);
  --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:  'Inter', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

*{ 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: 300;
  -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:10.5px; font-weight:300; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ink-faint);
}
.kicker-gold{ color:var(--ink-dim); }

.sec-title{
  font-family:var(--serif); font-weight:300;
  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:italic; font-weight:300; }

.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:10.5px; font-weight:300; letter-spacing:.26em; 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:10.5px; font-weight:300; letter-spacing:.22em; 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. */
/* 180svh of scroll on the sheet: the first screen scrubs the film (the hand
   leaves), the rest reveals the worlds on the same paper before the first stop */
.hero{ position:relative; height:180svh; 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:1180px; text-align:left;
  will-change:transform, opacity;
}
.hero-inner a{ pointer-events:auto; }
.hero-kicker{
  font-family:var(--mono); font-weight:300; font-size:10.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim);
}
.hero-title{
  font-family:var(--serif); font-weight:300;
  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(--serif); font-weight:300; font-style:italic;
  font-size:clamp(1.15rem, 1.7vw, 1.45rem); line-height:1.5; color:var(--ink);
}
.hero-spec{
  margin-top:22px; font-family:var(--mono); font-weight:300; font-size:10.5px;
  letter-spacing:.18em; 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 */
.scroll-cue{
  position:absolute; right:7vw; bottom:30px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:auto;
}
@media (max-width:900px){ .scroll-cue{ display:none; } }
.cue-line{
  width:1px; height:52px;
  background:linear-gradient(180deg, transparent, rgba(237,239,243,.9));
  animation:cue 2.6s ease-in-out infinite;
}
.cue-text{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(237,239,243,.85); text-shadow:0 1px 8px rgba(13,22,38,.9);
}
@keyframes cue{ 0%,100%{ transform:scaleY(.55); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform .9s ease; }
.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:290vh; z-index:2; }
.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:10.5px; font-weight:300;
  letter-spacing:.32em; text-transform:uppercase; color:var(--white);
  transition:color .3s ease;
}
.p-label .cap{
  display:block; margin-top:6px; font-family:var(--mono);
  font-size:9px; font-weight:300; letter-spacing:.24em;
  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:300;
  font-size:clamp(1.9rem, 3vw, 2.6rem);
  line-height:1.1; color:var(--white); margin-top:12px;
}
.panel p{ font-size:13.5px; line-height:1.8; 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:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim);
  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 */
.rail{
  position:absolute; right:26px; top:50%; transform:translateY(-50%);
  z-index:5; display:flex; flex-direction:column; gap:16px;
  pointer-events:auto;
}
.rail button{
  position:relative; width:14px; height:14px;
  background:none; border:none; cursor:pointer; padding:0;
}
.rail button::after{
  content:''; position:absolute; inset:4px; border-radius:50%;
  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::after{ background:var(--gold); transform:scale(1.35); }
/* The names are always visible. This rail is the only always-on inventory of
   what the press actually sells; hiding it behind hover meant a visitor could
   read the whole page without ever learning there are exactly three things. */
.rail button span{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-family:var(--mono);
  font-size:9px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
  padding:5px 0 4px;
  text-shadow:0 1px 10px rgba(13,22,38,.95), 0 0 3px rgba(13,22,38,.9);
  opacity:.72; transition:color .3s ease, opacity .3s ease; pointer-events:none;
}
.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:300; font-size:10.5px; letter-spacing:.22em; 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:300; font-size:10px; 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:9.5px; letter-spacing:.2em; }
  .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 used to vanish below 900px, which left a phone visitor with no
     way to know where they were in a 390vh journey, no way to move through
     it, and no inventory of the range. It becomes a horizontal register under
     the header instead: three marks, the current one named. */
  .rail{
    position:fixed; right:auto; left:0; top:auto; bottom:14px; transform:none;
    flex-direction:row; justify-content:center; align-items:center;
    gap:26px; width:100%; padding:0 6vw;
  }
  /* a comfortable touch target around a small mark */
  .rail button{ width:30px; height:30px; }
  .rail button::after{ inset:12px; }
  .rail button.active::after{ transform:scale(1.5); }
  /* the panel heading already names where you are — the marks only need to
     show how many stops there are and which one you are on */
  .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-line{ 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-line{ 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:300; color:var(--white);
  font-size:clamp(26px,3.4vw,40px); line-height:1.12; margin:0 0 14px;
}
.home-band h2 em{ font-style:italic; }
.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-size:10px; letter-spacing:.3em; color:var(--ink-faint); }
.home-steps h3{ font-family:var(--serif); font-weight:300; 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-size:10px;
  letter-spacing:.24em; 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-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); }
.fig-col h3{ font-family:var(--serif); font-weight:300; 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-size:10.5px; letter-spacing:.2em; 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:14px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
  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-size:10px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-bright);
}
.fig-gate h3{
  font-family:var(--serif); font-weight:300; 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);
}