/* ============================================================
   THE FINANCIAL BLUEPRINT — brand-correct stylesheet
   Palette sampled from the Rubedo crest and the approved endcap.
   Crimson / white / black. Gold survives only as a product accent
   (it appears on the book covers), never as brand furniture.
   ============================================================ */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/ArchivoBlack.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ground — warm near-black, sampled #070405, lifted slightly for text comfort */
  --ink:        #0a0507;
  --ink-2:      #12080a;
  --ink-3:      #1c0d10;

  /* crimson ramp — endcap field #c8202e, deep edge #790d17, crest #601514 */
  --crimson:      #c8202e;
  --crimson-lt:   #e0343f;
  --crimson-dp:   #7a0d17;
  --oxblood:      #4a0a12;
  --crimson-dim:  rgba(200, 32, 46, 0.26);
  --hairline:     rgba(200, 32, 46, 0.22);

  /* product accent only — the gold on the book titles */
  --gold: #e8c65a;

  --text:   #e6dedd;
  --muted:  #a09596;
  --faint:  #6d6264;

  --display: 'Archivo Black', 'Arial Black', sans-serif;
  --body: 'Montserrat', 'Helvetica Neue', sans-serif;

  --wrap: 76rem;
  --gutter: clamp(1.1rem, 4.5vw, 4rem);
  --section: clamp(3.5rem, 8vw, 7rem);
  --ease: cubic-bezier(0.16, 0.84, 0.44, 1);
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ---------- the crest as atmosphere ----------
   One very large crest, bled off the right edge, radial-masked so it
   dissolves into black. The test is whether it reads as texture rather
   than as a logo someone pasted on. */
body::before {
  content: '';
  position: fixed;
  top: 50%; right: -18vw;
  width: min(115vh, 1000px); aspect-ratio: 1100 / 1014;
  transform: translateY(-50%);
  background: url('../img/crest-emblem.webp') no-repeat center / contain;
  opacity: 0.17;
  /* screen blend lets the crimson in the crest glow out of the black instead of
     sitting on top of it as flat grey — that is what made 6% read as dirt. */
  mix-blend-mode: screen;
  filter: saturate(1.5) contrast(1.15);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 74%);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 74%);
  pointer-events: none;
  z-index: 0;
}
/* fine circuit-trace texture, echoing the traces in the crest */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* crimson halo behind the crest so it reads as a lit emblem, not a stain */
body > .glow {
  position: fixed; top: 50%; right: -14vw; transform: translateY(-50%);
  width: min(100vh, 900px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,32,46,.20), rgba(122,13,23,.07) 45%, transparent 70%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}
main, header, footer { position: relative; z-index: 2; }

img { max-width: 100%; display: block; }
::selection { background: var(--crimson); color: #fff; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--display); font-weight: 400;
  line-height: 0.97; letter-spacing: -0.02em;
  text-transform: uppercase; color: #fff; margin: 0;
}
h1 { font-size: clamp(2.5rem, 8vw, 5.6rem); }
h2 { font-size: clamp(1.8rem, 4.6vw, 3.2rem); }
h3 { font-size: clamp(1rem, 1.9vw, 1.3rem); letter-spacing: -0.01em; }
p { margin: 0 0 1.3em; }
a { color: #fff; text-decoration-color: var(--crimson-dim); text-underline-offset: 3px; }
a:hover { color: var(--crimson-lt); }
strong { color: #fff; font-weight: 700; }
em.hot { color: var(--crimson-lt); font-style: normal; font-weight: 700; }

.eyebrow {
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--crimson-lt);
  margin: 0 0 1.4rem; display: flex; align-items: center; gap: 0.9rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--crimson-dim), transparent); }
.eyebrow.on-red { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
.eyebrow.on-red::after { background: linear-gradient(90deg, rgba(255,255,255,.55), transparent); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after, .eyebrow.center::before { display: none; }

.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.6; color: #d6cccb; }
.muted { color: var(--muted); }
.small { font-size: 0.8125rem; line-height: 1.6; color: var(--faint); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section); position: relative; }
.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(10, 5, 7, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--hairline); background: rgba(10,5,7,0.96); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 72px; }

/* Brand lockup. min-width:0 lets it shrink instead of forcing overflow —
   the old header blew past the viewport at 390px because nothing could give. */
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; min-width: 0; flex-shrink: 1; }
.brand img { height: 42px; width: auto; flex-shrink: 0; }
.brand-txt { min-width: 0; }
.brand-name {
  display: block; font-family: var(--display); color: #fff;
  font-size: clamp(0.62rem, 2.4vw, 0.8125rem);
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-sub {
  display: block; font-size: 0.5rem; letter-spacing: 0.2em;
  color: var(--faint); text-transform: uppercase; white-space: nowrap;
  /* .brand-name already ellipsised; this one did not, so at 390px it kept its
     full width and ran underneath the Get Started button. */
  overflow: hidden; text-overflow: ellipsis;
}
.head-nav { display: flex; align-items: center; gap: 1.6rem; flex-shrink: 0; }
.head-nav a {
  color: var(--muted); text-decoration: none; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  transition: color .25s; white-space: nowrap;
}
.head-nav a:hover, .head-nav a.is-on { color: #fff; }
.head-nav a.is-on { color: var(--crimson-lt); }
.head-cta {
  background: var(--crimson); color: #fff !important; padding: 0.6rem 1rem;
  border-radius: 2px; font-size: 0.68rem !important;
}
.head-cta:hover { background: var(--crimson-lt); }
@media (max-width: 900px) { .head-nav { gap: 1rem; } .head-nav .hide-sm { display: none; } }
@media (max-width: 560px) {
  /* Keep "A Rubedo Ventures Company" visible — it is the legitimacy line.
     Shrink the lockup instead of hiding half of it.

     Both lines are sized to be as large as the bar allows without truncating
     or reaching the CTA. Measured at 390px: 157px of room, which tops out at
     9.75px for the name and 8.5px for the sub. The values below sit just under
     those ceilings and scale with the viewport between 360px and 560px.

     Tracking is tightened here on purpose: at these sizes wide letter-spacing
     costs more width than it buys in style, and buying that width back is what
     lets the type be bigger.

     The size is calc(), not a plain vw scale, because the space available to
     these two lines is viewport MINUS a fixed cost (gutters, burger, crest,
     gaps, CTA) that measures ~242px. Available width therefore falls 1:1 with
     the viewport while a vw font only falls by a fraction of it — so a vw scale
     fits at 390px and truncates at 375px. Dividing the leftover width by the
     characters-per-em of each line (~16 and ~19) tracks the real constraint and
     keeps both lines at their maximum size at every width.

     !important on the sub is unavoidable — every page carries an inline
     font-size on it (12px, 13px on index), and an inline style beats any
     selector. The name has no inline style, so it needs no override. */
  .brand-name { font-size: clamp(7px, calc((100vw - 242px) / 16), 13px); letter-spacing: 0.02em; }
  .brand-sub  { display: block; font-size: clamp(6px, calc((100vw - 242px) / 19), 11px) !important; letter-spacing: 0.06em; }
  .brand img { height: 34px; }
  .brand { gap: 0.5rem; }
  .head-cta { padding: 0.5rem 0.6rem; font-size: 0.6rem !important; letter-spacing: 0.08em; }
}
/* At 390px the lockup, the burger and the CTA still could not all fit, so the
   brand name truncated mid-word. Buy the width back from the gaps and the CTA
   rather than dropping the Rubedo Ventures line, which is the legitimacy cue. */
@media (max-width: 430px) {
  /* Reclaim width from the gaps, the crest and the CTA so the two brand lines
     get as much of the bar as possible. The type sizes come from the clamps
     above — nothing here shrinks the text. */
  .site-head .wrap { gap: 0.5rem; }
  .brand { gap: 0.4rem; }
  .brand img { height: 30px; }
  .head-cta { padding: 0.45rem 0.5rem; font-size: 0.53rem !important; letter-spacing: 0.05em; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--body); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding: 1.15rem 2.1rem; border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); }
.btn-red {
  background: linear-gradient(180deg, var(--crimson-lt), var(--crimson));
  color: #fff; box-shadow: 0 8px 30px -10px rgba(200,32,46,0.75);
}
.btn-red:hover { box-shadow: 0 14px 40px -10px rgba(224,52,63,0.9); color: #fff; }
.btn-red::before {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left .65s var(--ease);
}
.btn-red:hover::before { left: 115%; }
/* Gold marks a PAID action; crimson marks a free one. The split is semantic,
   not decorative — the colour tells you whether money is involved before you
   read the label.

   It also fixes an isolation problem: crimson is the brand (eyebrows, links,
   hairlines, the sticker, the hero glow), so a crimson button had nothing to
   stand out against. Measured on the #0a0507 ground, crimson gives 3.6:1 of
   contrast, gold 12.2:1.

   The label MUST be dark. White on this gold is 1.66:1 and fails WCAG outright;
   #1a1206 gives 11.2:1 on the base and 12.7:1 on the lighter top of the
   gradient. Do not "fix" this to white. */
.btn-gold {
  background: linear-gradient(180deg, #f0d478, var(--gold));
  color: #1a1206; border-color: transparent;
  box-shadow: 0 8px 30px -10px rgba(232, 198, 90, 0.55);
}
.btn-gold:hover { color: #1a1206; box-shadow: 0 14px 40px -10px rgba(240, 212, 120, 0.75); }
.btn-gold::before {
  content: ''; position: absolute; inset: 0 auto 0 -60%; width: 45%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transition: left .65s var(--ease);
}
.btn-gold:hover::before { left: 115%; }

/* "+ tax" rides alongside a price without competing with it. Prices on this
   site are exclusive of tax, and saying so next to the number is the honest
   place for it — not a footnote someone finds at checkout. */
.plus-tax {
  font-family: var(--body); font-weight: 600;
  font-size: 0.42em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-left: 0.35em; white-space: nowrap;
  vertical-align: baseline;
}
.btn .plus-tax { font-size: 0.8em; color: inherit; opacity: 0.72; margin-left: 0.3em; }
/* the amount and its "+ tax" are one idea; letting them break apart mid-button
   reads as two separate figures */
.pricegroup { white-space: nowrap; }
.tax-note { font-size: 0.74rem; color: var(--faint); margin-top: 1.1rem; }

.btn-ghost { border-color: var(--crimson-dim); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: var(--crimson); background: rgba(200,32,46,0.09); color: #fff; }
.btn-block { width: 100%; }
.btn[aria-disabled='true'] { opacity: 0.4; pointer-events: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.cta-note { font-size: 0.78rem; color: var(--faint); }

/* ---------- hero: the endcap's diagonal red field ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.hero::before {
  content: ''; position: absolute; inset: -10% -10% auto -10%; height: 78%;
  background: linear-gradient(160deg, var(--crimson) 0%, var(--crimson-dp) 55%, var(--oxblood) 100%);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
  opacity: 0.9; z-index: -1;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,5,7,0) 35%, var(--ink) 92%);
}
.hero h1 { text-shadow: 0 6px 40px rgba(0,0,0,0.5); }
.hero .lede { max-width: 44ch; }

.hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }

/* stat strip — "6 books" not "VI books" */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2.5vw, 2rem);
  margin-top: 2.2rem; max-width: 30rem;
}
.stat dt { font-family: var(--display); font-size: clamp(1.5rem,4vw,2.3rem); color: #fff; line-height: 1; }
.stat dd { margin: 0.3rem 0 0; font-size: clamp(0.56rem, 1.5vw, 0.68rem); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); line-height: 1.35; }

/* ---------- the six-book fan ---------- */
.fanwrap { position: relative; width: fit-content; margin-inline: auto; }
.fan { display: flex; justify-content: center; align-items: flex-end; padding: 1rem 0; }
.fan-item {
  width: clamp(58px, 13vw, 112px); margin-inline: clamp(-16px, -2.2vw, -8px);
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.07);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  transform-origin: bottom center;
}
.fan-item:nth-child(1) { transform: rotate(-7deg) translateY(6px); }
.fan-item:nth-child(2) { transform: rotate(-4deg) translateY(2px); }
.fan-item:nth-child(3) { transform: rotate(-1.5deg); }
.fan-item:nth-child(4) { transform: rotate(1.5deg); }
.fan-item:nth-child(5) { transform: rotate(4deg) translateY(2px); }
.fan-item:nth-child(6) { transform: rotate(7deg) translateY(6px); }
.fan-item:hover { transform: translateY(-14px) rotate(0deg) scale(1.06); z-index: 3; box-shadow: 0 26px 60px -12px rgba(200,32,46,0.55); }

/* free-book starburst, lifted from the endcap */
.burst {
  position: absolute; z-index: 4;
  left: -4%; top: -6%;
  display: grid; place-content: center; text-align: center;
  width: clamp(72px, 11vw, 104px); aspect-ratio: 1;
  background: var(--crimson); color: #fff;
  clip-path: polygon(50% 0%,61% 12%,76% 6%,80% 22%,96% 24%,91% 39%,100% 50%,91% 61%,96% 76%,80% 78%,76% 94%,61% 88%,50% 100%,39% 88%,24% 94%,20% 78%,4% 76%,9% 61%,0% 50%,9% 39%,4% 24%,20% 22%,24% 6%,39% 12%);
  font-family: var(--display); line-height: 1; transform: rotate(-14deg);
}
.burst b { display: block; font-size: clamp(0.72rem, 1.5vw, 0.95rem); }
.burst span { display: block; font-size: clamp(0.42rem, 0.8vw, 0.55rem); letter-spacing: 0.1em; margin-top: 3px; }

/* ---------- offer, promoted high ---------- */
.offer-card {
  border: 1px solid var(--hairline); border-radius: 5px;
  background: linear-gradient(165deg, var(--ink-3), var(--ink-2) 70%);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
  position: relative; overflow: hidden;
}
.offer-card.is-paid { border-color: rgba(232,198,90,0.45); }
.offer-card.is-paid::before { content:''; position:absolute; inset:0 0 auto 0; height:2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.offer-card.is-paid .kicker { color: var(--gold); }
/* the savings line sits inside a gold-accented card; leaving it crimson made
   the paid tier wear two accent colours at once */
.offer-card.is-paid .saveline { color: var(--gold); }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem,2.5vw,1.6rem); }
@media (max-width: 820px) { .offer-grid { grid-template-columns: 1fr; } }
.kicker { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--crimson-lt); margin-bottom: 0.9rem; }
.price { font-family: var(--display); font-size: clamp(2.4rem,6vw,3.6rem); color:#fff; line-height:1; margin-bottom:0.3rem; }
.price .cur { color: #fff; }
.price-what { font-size:0.78rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--muted); margin-bottom:1.5rem; }
.ticks { list-style:none; margin:0 0 1.8rem; padding:0; }
.ticks li { position:relative; padding-left:1.5rem; margin-bottom:0.65rem; font-size:0.93rem; color:#cbc2c1; }
.ticks li::before { content:''; position:absolute; left:0; top:0.62em; width:7px; height:7px; background:var(--crimson); transform:rotate(45deg); }
/* Scoped to the paid card on purpose. The same .ticks list is used in the FREE
   card and on the mission page, and gold means the collection — turning every
   diamond gold would say the free tier is the paid one. */
.offer-card.is-paid .ticks li::before { background:var(--gold); }

.capture { display:flex; gap:0.55rem; flex-wrap:wrap; }
.capture input[type=email] {
  flex:1 1 12rem; min-width:0; background:rgba(0,0,0,0.45);
  border:1px solid var(--hairline); border-radius:2px; color:#fff;
  font-family:var(--body); font-size:0.95rem; padding:1.05rem 1rem;
  transition:border-color .25s, box-shadow .25s;
}
.capture input::placeholder { color:var(--faint); }
.capture input:focus { outline:none; border-color:var(--crimson); box-shadow:0 0 0 3px rgba(200,32,46,0.18); }
.form-msg { font-size:0.8125rem; margin-top:0.85rem; min-height:1.2em; }
.form-msg.ok { color:#7fd88f; }
.form-msg.err { color:#ff8098; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }

/* ---------- books ---------- */
.books { list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2.4vw,1.6rem); grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); }
.book {
  display:grid; grid-template-columns:104px minmax(0,1fr); gap:1.2rem; align-items:start;
  border:1px solid var(--hairline); border-radius:4px; padding:1.1rem;
  background:linear-gradient(160deg, var(--ink-2), var(--ink) 80%);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.book:hover { border-color:rgba(200,32,46,0.5); transform:translateY(-3px); }
.book img { border-radius:3px; box-shadow:0 10px 26px -10px rgba(0,0,0,0.9); }
.book h3 { font-size:clamp(0.95rem,1.5vw,1.15rem); overflow-wrap:anywhere; hyphens:auto; }
/* The card label reads as the first line of the book's title, not as a
   separate crimson kicker above it — same face, colour, size and tracking
   as .book h3, so "BOOK II" and its title form one lockup. */
.book .num { font-family:var(--display); color:var(--gold);
  font-size:clamp(0.95rem,1.5vw,1.15rem); letter-spacing:-0.01em; line-height:0.97;
  text-transform:uppercase; margin-bottom:0.2rem; }
.book p { margin:0.45rem 0 0; font-size:0.875rem; line-height:1.6; color:var(--muted); }
.book .tag { display:inline-block; margin-top:0.6rem; font-size:0.58rem; font-weight:800;
  letter-spacing:0.18em; text-transform:uppercase; color:#1a1206; background:var(--gold);
  padding:0.3rem 0.6rem; border-radius:2px; }

/* ---------- honesty band ---------- */
.honesty { border:1px solid var(--hairline); border-left:3px solid var(--crimson); background:rgba(200,32,46,0.05); padding:clamp(1.3rem,3vw,2rem); border-radius:3px; }
.honesty p:last-child { margin-bottom:0; }

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--hairline); }
.faq details { border-bottom:1px solid var(--hairline); }
.faq summary { cursor:pointer; list-style:none; padding:1.4rem 3rem 1.4rem 0; position:relative; font-family:var(--display); text-transform:uppercase; color:#fff; font-size:clamp(0.9rem,1.6vw,1.05rem); transition:color .25s; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--crimson-lt); }
.faq summary::after { content:''; position:absolute; right:0.4rem; top:50%; width:10px; height:10px; margin-top:-7px; border-right:2px solid var(--crimson); border-bottom:2px solid var(--crimson); transform:rotate(45deg); transition:transform .35s var(--ease); }
.faq details[open] summary::after { transform:rotate(-135deg); margin-top:-2px; }
.faq .answer { padding:0 3rem 1.5rem 0; color:var(--muted); max-width:70ch; }
.faq .answer p:last-child { margin-bottom:0; }

/* ---------- tabs (variant B) ---------- */
.tabbar { display:flex; gap:0.4rem; flex-wrap:wrap; border-bottom:1px solid var(--hairline); margin-bottom:clamp(2rem,4vw,3rem); }
.tabbar button {
  appearance:none; background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--muted); font-family:var(--body); font-size:0.74rem; font-weight:800;
  letter-spacing:0.16em; text-transform:uppercase; padding:1rem 1.2rem; cursor:pointer;
  transition:color .25s, border-color .25s;
}
.tabbar button:hover { color:#fff; }
.tabbar button[aria-selected='true'] { color:#fff; border-bottom-color:var(--crimson); }
.tabpanel[hidden] { display:none; }

/* ---------- footer ---------- */
.site-foot { border-top:1px solid var(--hairline); padding-block:3rem 3.5rem; background:var(--ink-2); }
.foot-grid { display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:space-between; align-items:flex-start; }
.foot-nav { display:flex; flex-wrap:wrap; gap:1.4rem; }
.foot-nav a { color:var(--muted); text-decoration:none; font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase; }
.foot-nav a:hover { color:var(--crimson-lt); }
.foot-legal { margin-top:2.2rem; max-width:74ch; }
.win { font-family:var(--display); text-transform:uppercase; color:#fff; letter-spacing:0.02em; font-size:0.95rem; }
.win span { color:var(--crimson-lt); }

/* ---------- legal pages ---------- */
.doc { padding-block:clamp(2.5rem,6vw,4.5rem) var(--section); }
.doc-title { font-size:clamp(1.9rem,4.6vw,3.2rem); margin-bottom:2.2rem; }
.doc-body { max-width:68ch; }
.doc-body h2 { font-size:clamp(1.1rem,2.2vw,1.45rem); margin:2.6rem 0 0.9rem; }
.doc-body h2:first-child { margin-top:0; }
.doc-body ul { padding-left:1.2rem; }
.doc-body li { margin-bottom:0.55rem; }
.doc-toc { border:1px solid var(--hairline); padding:1.4rem 1.6rem; border-radius:3px; margin-bottom:2.6rem; }
.doc-toc ol { margin:0; padding-left:1.2rem; columns:2; column-gap:2rem; }
.doc-toc li { margin-bottom:0.35rem; font-size:0.86rem; }
@media (max-width:620px) { .doc-toc ol { columns:1; } }

/* ---------- motion + a11y ---------- */
.reveal { transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal { opacity:0; transform:translateY(22px); }
.js .reveal.is-in { opacity:1; transform:none; }
.js .stagger > * { opacity:0; transform:translateY(18px); animation:rise .85s var(--ease) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.stagger > *:nth-child(1){animation-delay:.05s}.stagger > *:nth-child(2){animation-delay:.15s}
.stagger > *:nth-child(3){animation-delay:.25s}.stagger > *:nth-child(4){animation-delay:.35s}
.stagger > *:nth-child(5){animation-delay:.45s}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > * { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .btn:hover, .fan-item:hover, .book:hover { transform:none; }
}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline:2px solid var(--crimson-lt); outline-offset:3px; border-radius:2px;
}
.skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--crimson); color:#fff; padding:0.9rem 1.3rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; font-size:0.72rem; }
.skip:focus { left:1rem; top:1rem; }

/* ============================================================
   3D BOOK DISPLAY — replaces the flat "images on a fan"
   Real preserve-3d: each cover is a face, each spine is a second
   face rotated 90deg off the left edge, so the books have actual
   thickness rather than being pictures of books.
   ============================================================ */
.display { position: relative; padding-top: clamp(6rem, 9vw, 8.5rem); }

.shelf {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(5px, 1.3vw, 20px);
  perspective: 1800px; perspective-origin: 50% 40%;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.b3d {
  --w: clamp(64px, 12vw, 158px);
  --d: clamp(9px, 1.7vw, 20px);
  position: relative; width: var(--w);
  transform-style: preserve-3d;
  transform: rotateY(24deg);
  transition: transform .55s var(--ease), filter .55s var(--ease);
}
.b3d img {
  display: block; width: 100%; border-radius: 1px 3px 3px 1px;
  box-shadow: 0 26px 52px -18px rgba(0,0,0,0.95);
}
/* the spine: same element rotated a quarter turn off its own left edge */
.b3d::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--d);
  background: linear-gradient(90deg, #160305 0%, #5c0b13 38%, #a81a26 70%, #2a0508 100%);
  transform-origin: left center; transform: rotateY(-90deg);
  border-radius: 2px 0 0 2px;
}
/* contact shadow on the ground */
.b3d::after {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -12px; height: 18px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 72%);
  filter: blur(5px);
}
/* centre pair steps forward so the row reads as a display, not a queue */
.b3d:nth-child(3), .b3d:nth-child(4) { transform: rotateY(24deg) translateZ(30px); }
.b3d:nth-child(2), .b3d:nth-child(5) { transform: rotateY(24deg) translateZ(14px); }
.b3d:hover {
  transform: rotateY(6deg) translateY(-18px) translateZ(70px);
  z-index: 6; filter: drop-shadow(0 0 34px rgba(200,32,46,0.5));
}
@media (max-width: 620px) { .b3d { --w: clamp(48px, 13vw, 74px); } }

/* ---------- round free-book sticker ----------
   Sits ABOVE the shelf in its own reserved band, so it can never
   cover a cover. */
.sticker {
  position: absolute; top: 0; left: clamp(0px, 3vw, 46px); z-index: 7;
  width: clamp(96px, 11vw, 124px); aspect-ratio: 1; border-radius: 50%;
  /* padding was `0 9%`. Percentage padding resolves against the CONTAINING
     BLOCK's width, not the element's — so on a 340px .books3d it became
     30.6px a side and left 19px of usable width inside an 80px circle.
     em is relative to this element's own font-size, which is what was meant. */
  padding: 0 0.5em;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 32% 26%, var(--crimson-lt), var(--crimson) 52%, var(--crimson-dp) 100%);
  color: #fff; font-family: var(--display); line-height: 1.04;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 14px 34px -10px rgba(200,32,46,0.75), inset 0 2px 0 rgba(255,255,255,0.3);
  transform: rotate(-12deg);
}
.sticker b { display: block; font-size: clamp(0.58rem, 1.25vw, 0.82rem); letter-spacing: 0.01em; }
.sticker span { display: block; font-size: clamp(0.4rem, 0.78vw, 0.52rem); letter-spacing: 0.12em; margin-top: 2px; }
@media (max-width: 620px) {
  .sticker { left: 6px; }
  /* The inline font-size on these two (25px/20px) is set per page and wins over
     any class rule, so the override has to be !important. At 25px "BOOK ONE"
     measures 152px against a 96px disc — it cannot fit. Desktop keeps the
     larger size; only the phone scales down. */
  .sticker b { font-size: 12px !important; }
  .sticker span { font-size: 10px !important; }
}

/* the big centrepiece version used at the top of The Books */
.display.centre .shelf { gap: clamp(6px, 1.6vw, 26px); }
.display.centre .b3d { --w: clamp(72px, 13vw, 168px); --d: clamp(10px, 1.9vw, 22px); }


/* ============================================================
   THE SIX-BOOK GRAPHIC
   Rendered from the real covers through Higgsfield, matted to a true
   alpha cutout, then composited into a receding lineup with Book I
   forward. Transparent, so it sits on the red hero field and on black
   equally well — no plinth, no mask, no pasted rectangle.
   ============================================================ */
.books3d { position: relative; width: 100%; margin-inline: auto; }
/* soft crimson bloom so the lineup feels lit rather than pasted */
.books3d::before {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: 4%; height: 46%;
  background: radial-gradient(ellipse at 50% 100%, rgba(200,32,46,0.34), transparent 70%);
  filter: blur(26px); z-index: 0; pointer-events: none;
}
/* <picture> must NOT create its own box here. As display:block with no width
   it sized itself from its content while the img sized itself from the picture
   — circular, and the browser resolved it by squashing the image. display:contents
   removes the wrapper box entirely so the img is laid out directly by .books3d. */
.books3d picture { display: contents; }
.books3d img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.books3d.centre { max-width: 940px; }
/* the grid swap is squarer, so the bloom needs to sit lower and wider */
@media (max-width: 860px) { .books3d::before { height: 30%; } }

/* ============================================================
   SIDEBAR NAVIGATION
   Persistent rail on desktop, off-canvas drawer under 1100px.
   The header stays full width so the CTA is always reachable;
   only main and the footer are inset.
   ============================================================ */
.navtoggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; padding: 0 9px; margin-right: 0.15rem;
  background: transparent; border: 1px solid var(--hairline); border-radius: 3px;
  cursor: pointer; flex-shrink: 0;
}
.navtoggle span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-head .brand { margin-right: auto; }

.sidebar {
  position: fixed; top: 72px; left: 0; bottom: 0; width: 240px; z-index: 35;
  padding: 1.75rem 1.1rem; overflow-y: auto;
  background: rgba(10, 5, 7, 0.96);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--hairline);
  transform: translateX(-100%);
  transition: transform .35s var(--ease);
}
.sidebar.is-open { transform: none; }
.sidebar .group { margin-bottom: 1.7rem; }
.sidebar h4 {
  font-family: var(--body); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 0.7rem 0.7rem;
}
.sidebar a {
  display: block; padding: 0.62rem 0.7rem; border-radius: 3px;
  color: var(--muted); text-decoration: none;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-left: 2px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.sidebar a:hover { color: #fff; background: rgba(200,32,46,0.08); }
.sidebar a.is-on { color: #fff; background: rgba(200,32,46,0.14); border-left-color: var(--crimson); }

.navscrim {
  position: fixed; inset: 72px 0 0 0; z-index: 34;
  background: rgba(0,0,0,0.62); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.navscrim.is-on { opacity: 1; pointer-events: auto; }

@media (min-width: 1100px) {
  .sidebar { transform: none; }
  .navtoggle, .navscrim { display: none; }
  main, .site-foot { padding-left: 240px; }
}

/* ============================================================
   GLASS BRAND PANEL (mission page)
   ============================================================ */
.glasspanel {
  position: relative; max-width: 560px; margin-inline: auto;
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03) 46%, rgba(200,32,46,0.12));
  border: 1px solid rgba(255,255,255,0.17);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 34px 80px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.28);
}
/* crimson bloom behind the glass so the crest reads as lit */
.glasspanel::after {
  content: ''; position: absolute; left: 50%; top: 55%; translate: -50% -50%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,32,46,0.30), transparent 68%);
  filter: blur(34px); z-index: 0; pointer-events: none;
}
/* diagonal sheen across the glass */
.glasspanel::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 38%);
}
.glasspanel img {
  position: relative; z-index: 1; width: 100%; height: auto; display: block;
  filter: drop-shadow(0 14px 34px rgba(200,32,46,0.4));
}

.mission-h {
  font-family: var(--display); text-transform: uppercase; color: #fff;
  font-size: clamp(1.15rem, 2.4vw, 1.65rem); letter-spacing: -0.01em;
  margin: 0 0 1.1rem;
}

/* struck-through list price sitting beside the launch price */
.price .was {
  display: inline-block; margin-right: 0.5rem;
  font-size: 0.42em; color: var(--faint);
  text-decoration: line-through; text-decoration-thickness: 2px;
  vertical-align: middle;
}
.saveline {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--crimson-lt); margin: -0.9rem 0 1.5rem;
}

/* per-book buy button inside a book card */
.btn-sm { padding: 0.6rem 1rem; font-size: 0.66rem; letter-spacing: 0.1em; }
/* The book label and its price are two units, separated by the button's own
   flex gap rather than a typed dash. Side by side when there is room; stacked
   and centred when there isn't — which beats wrapping mid-phrase and leaving
   "BUY" alone on a line. */
.bookbuy .btn { flex-wrap: wrap; text-align: center; }
.buylabel, .pricegroup { white-space: nowrap; }
@media (max-width: 620px) {
  .bookbuy .btn { width: 100%; padding-inline: 0.7rem; }
}
.bookbuy { margin: 0.9rem 0 0; }
.separately { font-size: 0.78rem; color: var(--faint); margin: -1.2rem 0 1.5rem; }

/* thanks.html — the delivered download list */
.thanks-books { list-style:none; padding:0; margin:2rem 0 0; }
.thanks-books li { margin:0 0 0.9rem; }
.thanks-link {
  display:inline-block; font-weight:700; color:var(--crimson-lt);
  text-decoration:none; border-bottom:1px solid rgba(224,52,63,0.35);
  padding-bottom:0.15rem;
}
.thanks-link:hover { border-bottom-color:var(--crimson-lt); }