/* ============================================================
   ATLAS & GUIDE — shared design system
   The palette IS the book's (pipeline/templates/design/atlas.css):
   page navy #0D1626, gallery ground #070C15, bone ink, copper as
   the one accent. The site and the object a customer holds are
   the same room. docs/17: instrument not incense · dark is a room,
   not a mood · restraint is the luxury (accent under 10%).
   ============================================================ */
:root {
  --bg: #0D1626;          /* the book's page ground                  */
  --bg-2: #070C15;        /* the book's gallery/gutter — deeper      */
  --gold: #A8683A;        /* copper: the book's "you" colour         */
  --gold-bright: #C08A5F; /* copper-soft                             */
  --copper: #A8683A;
  --rule: #22303F;        /* the book's hairline rule                */
  --ink: #EDEFF3;         /* bone                                    */
  --ink-dim: rgba(237,239,243,.78);
  --ink-faint: rgba(237,239,243,.50);
  --blue: #4FC3F7;
  --green: #43C79A;
  --purple: #8B5CF6;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}
/* ═══ THE TYPE LAW ═══════════════════════════════════════════════════
   Matched to the frozen Claude Design canvas (atlas-design.dc.html):
   IBM Plex Mono ×79 · Cormorant Garamond ×32 · Inter ×2 · weight 300 ×78.
   The design is MONO-LED and LIGHT. So:
     Cormorant 300   display — titles, ledes (italic), maxims, numerals
     Plex Mono 300   the workhorse — kickers, labels, buttons, captions,
                     specs, prices, field labels, nav, short copy
     Inter 300       long reading paragraphs ONLY
   Nothing on the site sets heavier than 400. Bold display is banned
   (docs/17 §B). Letterspacing on mono small caps: .14em–.3em, per canvas.
   ══════════════════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  /* opaque base lives HERE (z: auto, behind negative-z layers) — never above the bg video.
     One navy, everywhere: the book's ground gate says every blue page is the same blue,
     so the site holds a single flat ground rather than drifting through three. */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--gold-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 3px;
}

/* ---------- ambient cosmic background (Style B video, subtle) ---------- */
.cosmic-bg {
  position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%;
  object-fit: cover; background-size: cover; background-position: center;
  opacity: .40; pointer-events: none;
}
.cosmic-bg.feature { opacity: .72; }
.cosmic-bg-veil {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(10,10,15,.30), rgba(6,6,10,.74) 82%),
    linear-gradient(180deg, rgba(6,6,10,.55), rgba(10,10,15,.48));
}
body.bg-feature .cosmic-bg-veil {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(10,10,15,.18), rgba(6,6,10,.58) 88%),
    linear-gradient(180deg, rgba(6,6,10,.30) 0%, transparent 30%, transparent 70%, rgba(10,10,15,.6) 100%);
}

/* ---------- starfield specks (transparent overlay — must NEVER occlude the bg video) ---------- */
/* Stars are plain round points in bone, with one copper among them.
   The violet and green specks that used to sit here broke two explicit bans
   at once — docs/17 §C bans violet/purple as a mysticism cue, and the §H
   DON'T column reads "a void with floating symbols". They were painting on
   every page that loads this sheet, so the fix belongs here rather than in a
   per-page override. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(237,239,243,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(237,239,243,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 64%, rgba(168,104,58,.42) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 82%, rgba(237,239,243,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 48%, rgba(237,239,243,.26) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 38%, rgba(237,239,243,.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(237,239,243,.24) 50%, transparent 51%);
}

/* ---------- header ---------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.1rem 2.4rem;
  background: linear-gradient(180deg, rgba(5,5,8,.92), rgba(5,5,8,.72) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wordmark {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
header.site nav { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-left: auto; }
header.site nav a {
  color: var(--ink-dim); text-decoration: none;
  font-family: var(--mono); font-weight: 300;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  transition: color .3s; text-shadow: 0 1px 5px rgba(0,0,0,.85); white-space: nowrap;
}
header.site nav a:hover, header.site nav a[aria-current="page"] { color: var(--ink); }
header.site nav a[aria-current="page"] { border-bottom: 1px solid var(--copper); padding-bottom: 2px; }
.header-cta {
  display: inline-block; white-space: nowrap;
  font-family: var(--mono); font-weight: 300;
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-bright); background: none; border: 1px solid var(--copper);
  padding: .7rem 1.3rem .62rem; border-radius: 2px; text-decoration: none;
  transition: background .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1);
}
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  background: none; border: 0; color: var(--gold-bright); cursor: pointer;
}
@media (max-width: 880px) {
  header.site { flex-wrap: wrap; padding: 1rem 1.3rem; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  header.site nav {
    display: none; order: 4; flex-basis: 100%; flex-direction: column; gap: .1rem;
    margin: .8rem 0 0; padding: .5rem .9rem;
    background: rgba(7,12,21,.97); border: 1px solid var(--rule); border-radius: 2px;
  }
  body.nav-open header.site nav { display: flex; }
  header.site nav a { padding: .8rem .3rem; font-size: .85rem; }
}

/* ---------- layout ---------- */
main.site { position: relative; z-index: 1; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 2rem; }
section.band { padding: 5rem 0; position: relative; }
section.band.tight { padding: 3.2rem 0; }

/* hero banner (image pages) */
.page-hero {
  position: relative; min-height: 62dvh; min-height: 62vh;
  display: flex; align-items: flex-end;
  padding: 8.5rem 0 3.5rem;
  isolation: isolate;
}
.page-hero .hero-img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.15) 40%, rgba(10,10,15,.88) 92%, var(--bg) 100%);
}
/* the book's instrument voice: mono small caps, letterspaced, copper */
.kicker {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 1rem; font-weight: 300;
}
/* Display weight follows the book: Cormorant at 300, line-height 1.14 */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; line-height: 1.14; color: var(--ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); margin-bottom: 1rem; }
h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.lede {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 1.32rem; line-height: 1.55; color: var(--ink-dim); max-width: 640px;
}
.lede strong, p strong { color: var(--ink); font-weight: 400; }
p { color: var(--ink-dim); }

/* ---------- glass panel ---------- */
.glass {
  position: relative;
  background: linear-gradient(135deg, rgba(14,14,22,.62) 0%, rgba(8,8,12,.5) 50%, rgba(18,15,26,.6) 100%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 14px; padding: 2.2rem; overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1px;
  background: linear-gradient(120deg, rgba(229,200,119,.5), rgba(255,255,255,.12) 30%, rgba(139,92,246,.26) 60%, rgba(52,211,153,.22) 85%, rgba(229,200,119,.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .65;
}

/* ---------- buttons ---------- */
.cta {
  display: inline-block; cursor: pointer;
  font-family: var(--mono); font-weight: 300;
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-bright); background: none;
  border: 1px solid var(--copper); border-radius: 2px;
  padding: .95rem 1.9rem .88rem; text-decoration: none;
  transition: background .3s cubic-bezier(.16,1,.3,1), color .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
}
.cta:hover { background: var(--copper); color: var(--bg); }
.cta:active { background: var(--gold-bright); }
.cta.ghost {
  /* the secondary action is frame, not you: bone hairline, dim ink */
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--rule);
}
.cta.ghost:hover { background: transparent; color: var(--bone); border-color: rgba(237,239,243,.6); }
.cta.small { padding: .7rem 1.4rem; font-size: .7rem; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.cols-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column;
  background: rgba(14,14,22,.55);
  border: 1px solid rgba(200,162,75,.18);
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s, box-shadow .35s;
}
.card:hover { transform: translateY(-4px); border-color: rgba(229,200,119,.5); box-shadow: 0 14px 44px rgba(0,0,0,.5); }
.card .card-img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.card .card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.card .card-body h3 { color: var(--gold-bright); }
.card .card-body p { font-size: .92rem; color: var(--ink-faint); }
.card .card-more { margin-top: auto; padding-top: .8rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* features list */
ul.features { list-style: none; margin: 1rem 0 1.6rem; }
ul.features li { padding: .5rem 0 .5rem 1.6rem; position: relative; color: var(--ink-dim); }
ul.features li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--gold);
}

/* steps */
.steps { counter-reset: step; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.step { counter-increment: step; position: relative; padding: 1.6rem 1.5rem 1.5rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif); font-size: 2.2rem; color: var(--gold);
  display: block; margin-bottom: .5rem; opacity: .9;
}

/* price tiers */
.tier { text-align: center; padding: 2.2rem 1.6rem; }
.tier .price { font-family: var(--serif); font-size: 2.3rem; color: #fff; margin: .4rem 0; }
.tier .per { font-size: .8rem; color: var(--ink-faint); }
.tier.hero-tier { border: 1px solid rgba(229,200,119,.65); box-shadow: 0 0 44px rgba(200,162,75,.12); }
.tier .tag { display: inline-block; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bg); background: var(--gold-bright); border-radius: 2px; padding: .2rem .6rem; margin-bottom: .8rem; font-weight: 400; }

/* chips (selectors) */
.chip {
  display: inline-block; cursor: pointer; user-select: none;
  font-family: var(--mono); font-weight: 300;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 2px;
  background: rgba(7,12,21,.5); color: var(--ink-dim);
  padding: .6rem 1rem .54rem; margin: .25rem .35rem .25rem 0;
  transition: border-color .25s cubic-bezier(.16,1,.3,1), color .25s cubic-bezier(.16,1,.3,1), background .25s cubic-bezier(.16,1,.3,1);
}
.chip:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.chip.selected, .chip[aria-pressed="true"] {
  background: linear-gradient(120deg, var(--gold), var(--gold-bright));
  color: var(--bg); border-color: transparent; font-weight: 400;
}

/* explainer video block */
.explainer {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(200,162,75,.25);
  background: #000; aspect-ratio: 16/9;
}
.explainer video { width: 100%; height: 100%; object-fit: cover; }
.explainer .play-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(5,5,8,.15), rgba(5,5,8,.4));
  cursor: pointer; border: 0; width: 100%;
}
.explainer .play-badge span {
  display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(10,10,15,.55); border: 1.5px solid var(--gold-bright);
  backdrop-filter: blur(6px); transition: transform .3s;
}
.explainer .play-badge:hover span { transform: scale(1.08); }
.explainer .play-badge svg { margin-left: 4px; }
.explainer.playing .play-badge { display: none; }
.vid-note { font-size: .74rem; color: var(--ink-faint); margin-top: .55rem; letter-spacing: .06em; }

/* forms */
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-family: var(--mono); font-weight: 300; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .45rem; }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(255,255,255,.045);
  border: 1px solid rgba(200,162,75,.35); border-radius: 4px;
  color: var(--ink); font: inherit; font-size: .95rem; padding: .9rem 1.1rem;
}
.field .hint { font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }

/* trust strip */
.trust-strip {
  border-top: 1px solid rgba(200,162,75,.16); border-bottom: 1px solid rgba(200,162,75,.16);
  padding: 1.1rem 0; font-size: .8rem; color: var(--ink-faint); text-align: center;
}

/* divider */
.gold-rule { width: 64px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: 0 0 1.4rem; border: 0; }
.center .gold-rule, .gold-rule.center { margin: 0 auto 1.4rem; background: linear-gradient(90deg, transparent, var(--gold), transparent); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* footer */
footer.site {
  position: relative; z-index: 1; margin-top: 4rem;
  border-top: 1px solid rgba(200,162,75,.16);
  background: rgba(8,8,12,.85); padding: 3.2rem 0 2rem;
}
footer.site .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
footer.site h4 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; }
footer.site a { display: block; color: var(--ink-faint); text-decoration: none; font-size: .88rem; padding: .22rem 0; }
footer.site a:hover { color: var(--gold-bright); }
footer.site .legal { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.06); font-size: .76rem; color: var(--ink-faint); text-align: center; line-height: 1.8; }

.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }