/* ═══════════════════════════════════════════════════════════════════════════
   MODERN PRIMAL — the site design system, v2: THE REBALANCE
   ═══════════════════════════════════════════════════════════════════════════
   Approved by the founder 2026-09-09 and recorded in CLAUDE.md and brand/04
   ("REBALANCED, 2026-09-09"). Not up for relitigation.

   The digital build had drifted from brand/04 — dark plates leading every
   page, monospace everywhere, targeting-style corner brackets, "field survey"
   in place of "field journal" — and every drift ran the same way. The spec did
   not change. This file returns the build to it:

     · Light, sun-warmed, tactile field journal. Cliff appears as a hairline.
     · 🔴 NO MONOSPACE, ANYWHERE. Brass foil (--foil) does the job the mono
       used to do. Do not reintroduce IBM Plex Mono or request it from Google.
     · Material depth — paper tooth, ONE light source (above-left), three-part
       shadows, the fine-press double frame, letterpress lift.
     · Corner brackets are retired. Botanical ornaments were tried, rejected.
     · Clay rose --rose #BC9184 is the one soft accent, so the palette is not
       all earth and fire.
     · The logo is the tactile three-stones-and-flame mark, sitting on the
       paper with a drop shadow — never struck into a disc.

   ── Where it came from ────────────────────────────────────────────────────
   Lifted from design/canvas/book-sales-page/_system.css, the Claude Design
   canvas the founder signed off (artifact bcf5cb48-ee37-4af7-be42-e232cb0d6bea).
   The canvas artboards were verified byte-identical to that directory at port
   time, so nothing of his was lost on the way in.
   🔁 STANDING RULE: only one side is live at a time. Between seeding and
   porting, the canvas is the truth. After a port — now — THIS FILE is. Any
   further design round starts by re-seeding the canvas from site/book.html.
   Procedure: design/canvas/book-sales-page/README.md §"Re-seeding after a port".

   ── Where it is used ──────────────────────────────────────────────────────
     /book (site/book.html)  → linked. Phase 1, the first page rebalanced.
     /     (site/index.html) → linked. Phase 2 (2026-09-20): the quiz, with a
                               quiz-only block inline for the progress bar, the
                               answer scale, the terrain wheel and the profile.
     /card.html              → the same tokens copied in, not linked: the card
                               is rendered headless on its own for the share
                               image and must not depend on a stylesheet fetch.
     /reset (site/reset.html) → linked. Phase 3 (2026-09-20), with its one
                               "your Type" callout inline.
     the guide (guide/the-reawakening.html) → the same tokens, in its own single
                               stylesheet: it is an A4 print document with page
                               geometry this file has no business carrying.
     the app (companion-hub/)  → the same palette and faces, expressed as its
                               Tailwind tokens and four utilities (.eyebrow,
                               .sheet, .plate, .btn-amber) in app/globals.css.
                               Phase 4 (2026-09-23). Change a token here, change
                               it there — the app cannot link this file.
   site/_system.css (the old look) is DELETED — nothing runs on it. Every
   surface is now on this system. The printed cover is out of scope —
   approved, print-permanent, and an object, not an interface.

   ── Fonts ─────────────────────────────────────────────────────────────────
   A page linking this file must load Fraunces at 300/400/500/600 (roman AND
   italic — 300 italic carries .sub, .quote and the h1 accent) and Instrument
   Sans at 400/500/600. It must NOT load IBM Plex Mono.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5ECD8; --paper2:#EFE4CD; --paperHi:#FCF7EA;
  --sheet1:#FEFAF0; --sheet2:#F8F0DE;
  --panel1:#FFFDF7; --panel2:#FAF3E2; --panel3:#F4EAD3;
  --ink:#332C1F; --soft:#4A4030; --muted:#8A7A5C; --deep:#63543E;
  --edge:rgba(120,100,64,.22); --edge-soft:rgba(120,100,64,.14);
  --cliff:#272C21;
  --amber:#BA7848; --amber-hi:#CC8B5B; --amber-lo:#A96538;
  --palm:#748640; --rose:#BC9184; --roseMuted:#A08876;
  --foil:linear-gradient(100deg,#8A6A3E,#D9BC7C 38%,#AE8B4B 52%,#E8D3A0 68%,#9A7A45);
  --foilLine:linear-gradient(90deg, transparent, #C9A961 22%, #E8D3A0 50%, #C9A961 78%, transparent);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--paper2); }
body{ font-family:var(--font-body); color:var(--ink); line-height:1.62; -webkit-font-smoothing:antialiased;
  position:relative;
  background:linear-gradient(178deg, var(--paperHi) 0%, var(--paper) 55%, var(--paper2) 100%); }

/* paper tooth, milled in with multiply */
.grain{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.09; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* one light source, above-left */
.vignette{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 70% at 22% -8%, rgba(255,255,255,.72), transparent 58%); }

.wrap{ position:relative; z-index:1; width:100%; max-width:37.5rem; margin:0 auto;
  display:flex; flex-direction:column; padding:1.3rem 1.3rem 2.6rem; }

/* ── masthead ── */
.survey{ display:flex; align-items:center; justify-content:space-between; padding:.2rem 0 .9rem; }
.survey .id{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); font-weight:500; }
.survey .id b{ color:var(--deep); font-weight:600; }
.survey a{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; font-weight:500; }
.survey a:hover{ color:var(--ink); }

/* ── the hero panel: a sheet of paper, lit from above-left ── */
.plate{ position:relative; border-radius:16px; overflow:hidden; text-align:center;
  background:linear-gradient(174deg, var(--panel1) 0%, var(--panel2) 58%, var(--panel3) 100%);
  border:1px solid var(--edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(120,100,64,.06) inset,
    0 2px 3px -1px rgba(58,44,14,.16),
    0 30px 60px -34px rgba(58,44,14,.45); }
/* the fine-press double frame — this is what the corner brackets used to do */
.plate::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(185,148,80,.30);
  border-radius:11px; pointer-events:none; z-index:3; }
.plate::before{ content:""; position:absolute; inset:12px; border:1px solid rgba(201,169,97,.18);
  border-radius:7px; pointer-events:none; z-index:3; }
.plate .inner{ position:relative; z-index:2; padding:2.3rem 1.6rem 2rem; }
/* ── the logo: three stones and flame ── */
.mark{ display:block; width:76px; height:auto; margin:0 auto .7rem;
  filter:drop-shadow(0 6px 10px rgba(58,44,14,.22)) drop-shadow(0 1px 1px rgba(58,44,14,.16)); }

.eyebrow{ font-family:var(--font-display); font-size:.73rem; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; }

.coverwrap{ display:flex; flex-direction:column; align-items:center; }
.cover{ width:146px; height:auto; display:block; margin-top:1.25rem; border-radius:2px;
  box-shadow:0 0 0 1px rgba(58,44,14,.10), 0 2px 3px rgba(58,44,14,.22),
    0 18px 30px -14px rgba(58,44,14,.42); }
.contact{ width:156px; height:14px; margin-top:2px;
  background:radial-gradient(50% 100% at 50% 0%, rgba(58,44,14,.28), rgba(58,44,14,.06) 55%, transparent 78%);
  filter:blur(1px); }

h1{ font-family:var(--font-display); font-weight:600; line-height:1.05; letter-spacing:-.014em;
  font-size:clamp(1.95rem,7.4vw,2.45rem); color:var(--ink); text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.85); }
h1 .serifitalic{ font-style:italic; font-weight:300; color:#6E5B3C; }
h2{ font-family:var(--font-display); font-weight:600; font-size:1.42rem; line-height:1.14; text-wrap:balance; }
p{ color:var(--soft); }
.serifitalic{ font-family:var(--font-display); font-style:italic; font-weight:400; }

.plate .sub{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:1.1rem;
  color:#7A6A4E; max-width:28ch; margin:.55rem auto 0; }
.foilrule{ width:104px; height:1px; margin:1.15rem auto; background:var(--foilLine); }
.coordstrip{ display:flex; justify-content:center; font-family:var(--font-display);
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.coordstrip span{ padding:0 .65rem; border-right:1px solid var(--edge); }
.coordstrip span:last-child{ border-right:0; }
.herocta{ margin-top:1.3rem; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.herocta .note{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:500; }

/* ── buttons ── */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; cursor:pointer;
  border:none; text-decoration:none;
  font-family:var(--font-display); font-weight:600; font-size:.88rem; letter-spacing:.05em;
  color:#FFF8EA; border-radius:100px; padding:.86rem 1.65rem;
  background:linear-gradient(180deg, var(--amber-hi) 0%, var(--amber) 58%, var(--amber-lo) 100%);
  box-shadow:0 1px 0 rgba(255,226,190,.55) inset, 0 -1px 0 rgba(90,45,15,.25) inset,
    0 2px 3px -1px rgba(120,60,10,.3), 0 16px 26px -12px rgba(186,120,72,.62);
  transition:transform .14s, filter .2s; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn.wide{ width:100%; }
.btn.ghost{ background:linear-gradient(180deg,#FFFDF6,#F6EEDB); color:var(--deep);
  border:1px solid var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(58,44,14,.08); }

/* ── sheets ── */
.sheet{ position:relative; border-radius:16px; padding:1.7rem 1.4rem 1.8rem; margin-top:1.15rem;
  background:linear-gradient(176deg, var(--sheet1), var(--sheet2));
  border:1px solid rgba(120,100,64,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 3px -1px rgba(58,44,14,.12),
    0 26px 50px -36px rgba(58,44,14,.4); }

.section-label{ font-family:var(--font-display); font-size:.77rem; letter-spacing:.18em;
  text-transform:uppercase; color:#7A6A4E; font-weight:600; margin:1.75rem 0 .75rem;
  display:flex; align-items:center; gap:.75rem; }
.section-label::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg,#C9A961, rgba(201,169,97,.14)); }

.lede{ font-size:1.06rem; color:var(--ink); font-weight:500; line-height:1.62; }
.body p + p{ margin-top:.75rem; }

.steps{ list-style:none; margin-top:.4rem; }
.steps li{ display:flex; gap:.95rem; padding:.85rem 0; border-bottom:1px solid var(--edge-soft); }
.steps li:last-child{ border-bottom:0; }
.steps .k{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.1em; font-weight:600;
  flex:0 0 3.9rem; padding-top:.18rem; text-transform:uppercase;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; }
.steps .c{ font-size:.96rem; color:var(--soft); font-weight:400; }
.steps .c b{ color:var(--ink); font-weight:600; display:block; }

.perks{ list-style:none; margin:.6rem 0 .2rem; display:flex; flex-direction:column; gap:.6rem; }
.perks li{ font-size:.96rem; color:var(--ink); font-weight:400; padding-left:1.7rem; position:relative; }
.perks li::before{ content:""; position:absolute; left:.15rem; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--palm); }

.plain{ border:1px solid var(--edge); border-radius:13px; padding:1.05rem 1.1rem; margin-top:1.15rem;
  background:rgba(255,253,246,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset; }
.plain .k{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:.45rem; }
.plain p{ font-size:.93rem; }
.plain p + p{ margin-top:.5rem; }

/* ── form ── */
.field{ margin:.9rem 0; }
.field label{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-weight:600; }
.field input{ width:100%; margin-top:.4rem; padding:.88rem .95rem; border:1px solid var(--edge);
  border-radius:11px; background:#FFFDF7; color:var(--ink);
  font-family:var(--font-body); font-size:1rem;
  box-shadow:0 1px 2px rgba(58,44,14,.06) inset; }
.field input:focus{ outline:none; border-color:#C9A961; background:#fff; }
.privacy{ font-family:var(--font-display); font-size:.76rem; color:var(--muted); text-align:center;
  margin-top:.85rem; }
.privacy b{ color:var(--deep); font-weight:600; }
.err{ text-align:center; color:#A8451A; font-family:var(--font-display); font-size:.78rem;
  margin-top:.6rem; min-height:1rem; }
.done{ text-align:center; padding:.6rem 0 .2rem; }
.done .mark{ width:46px; height:46px; border-radius:50%; margin:0 auto .9rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(116,134,64,.12); border:1.5px solid var(--palm); color:var(--palm);
  font-size:1.3rem; font-weight:700; }
.done p{ max-width:32ch; margin:.6rem auto 0; font-size:.96rem; }

/* ── signature ── */
.signature{ display:flex; gap:.85rem; align-items:center; justify-content:center; margin:1.9rem auto .2rem; }
.avatar{ width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:#4A3A1C;
  background:radial-gradient(circle at 38% 30%, #F0DDAE, #C9A961 55%, #9A7A45 100%);
  box-shadow:0 1px 0 rgba(255,246,222,.8) inset, 0 6px 12px -6px rgba(90,66,26,.5); }
.sigtext{ text-align:left; }
.sigtext b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  color:var(--ink); line-height:1.15; }
.sigtext span{ font-family:var(--font-display); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); }

.disc{ font-size:.75rem; color:var(--muted); text-align:center; margin-top:1.8rem; line-height:1.6;
  border-top:1px solid var(--edge-soft); padding-top:1.15rem; }
.disc b{ color:var(--deep); }
.footlinks{ text-align:center; margin-top:1.15rem; font-family:var(--font-display); font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase; }
.footlinks a{ color:var(--muted); text-decoration:none; padding:0 .5rem; }
.footlinks a:hover{ color:var(--ink); }
a{ color:var(--amber); } a:hover{ color:var(--amber-lo); }

/* ── Page-readiness, added at the port (not on the artboard) ───────────────
   The canvas artboard is a fixed-size, static, mouse-only box. A live page is
   none of those things. These four rules are the difference; nothing here
   changes how the design looks. */

/* An artboard cannot scroll sideways. A phone can — one over-wide child and
   the whole page rocks. Carried over from v1. */
html,body{ overflow-x:hidden; max-width:100%; }
/* Short pages (a thank-you, a done state) should still fill the screen so the
   paper ground reaches the bottom rather than stopping mid-viewport. */
.wrap{ min-height:100dvh; }

/* Nobody tabs through an artboard. Keyboard and screen-reader users tab
   through this. A focus ring is not optional — brass, to stay in the system. */
.btn:focus-visible,
.field input:focus-visible{ outline:2px solid #C9A961; outline-offset:3px; }

/* Forms on the artboard never submit. Live ones do, and the button spends a
   second disabled saying "Adding you…" — it has to look unavailable. */
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; filter:grayscale(.35);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(58,44,14,.1); }

/* The rebalance removed the animation; the one transform transition left
   still deserves an opt-out. */
@media (prefers-reduced-motion:reduce){
  .btn{ transition:none; }
  .btn:hover{ transform:none; }
}