:root{
  --red:#8E1B26;          /* book cloth */
  --red-deep:#641019;     /* spine shadow */
  --red-bright:#A62732;   /* hover / highlights */
  --gold:#C9A227;         /* gilt embossing */
  --gold-soft:#E3C766;
  --paper:#F7F1E5;        /* page stock */
  --paper-dim:#EFE6D4;
  --ink:#2B2118;          /* body text */
  --ink-soft:#6B5D4E;
  --white:#FFFDF8;
  --display:'Fraunces',serif;
  --body:'Newsreader',serif;
  --ui:'Archivo',sans-serif;
  --maxw:1120px;
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:1.1rem;line-height:1.65}
img{max-width:100%}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--ui);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.on-red .eyebrow{color:var(--gold-soft)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.3rem}
p.lede{font-size:clamp(1.15rem,2vw,1.35rem);color:var(--ink-soft)}
.btn{display:inline-block;font-family:var(--ui);font-weight:600;font-size:.95rem;letter-spacing:.02em;padding:.85rem 1.7rem;border-radius:999px;border:2px solid var(--red);cursor:pointer;text-decoration:none;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--red);color:var(--white)}
.btn-solid:hover{background:var(--red-bright)}
.btn-ghost{background:transparent;color:var(--red)}
.btn-ghost:hover{background:rgba(142,27,38,.08)}
.on-red .btn-solid{background:var(--gold);border-color:var(--gold);color:var(--red-deep)}
.on-red .btn-solid:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.on-red .btn-ghost{color:var(--paper);border-color:var(--paper)}
.on-red .btn-ghost:hover{background:rgba(247,241,229,.12)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:var(--red);color:var(--paper);border-bottom:3px solid var(--gold)}
.nav{display:flex;align-items:center;gap:1.5rem;padding:.9rem 24px;max-width:var(--maxw);margin:0 auto}
.brand{font-family:var(--display);font-weight:700;font-size:1.25rem;color:var(--paper);text-decoration:none;display:flex;align-items:center;gap:.6rem}
.brand .mark{width:26px;height:34px;background:linear-gradient(105deg,var(--red-bright),var(--red-deep));border:1.5px solid var(--gold);border-radius:2px 5px 5px 2px;box-shadow:inset 3px 0 0 rgba(0,0,0,.25);display:inline-block;flex:none}
.brand .tld{color:var(--gold-soft);font-size:.8em}
nav.menu{margin-left:auto;display:flex;gap:1.1rem;align-items:center}
nav.menu a{font-family:var(--ui);font-size:.9rem;font-weight:500;color:var(--paper);text-decoration:none;padding:.35rem .2rem;border-bottom:2px solid transparent}
nav.menu a:hover{border-bottom-color:var(--gold)}
nav.menu a[aria-current="page"]{border-bottom-color:var(--gold);color:var(--gold-soft)}
.nav-cta{margin-left:.4rem}
.menu-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--paper);color:var(--paper);border-radius:8px;font-family:var(--ui);font-weight:600;padding:.4rem .8rem;cursor:pointer}
@media(max-width:820px){
  .menu-toggle{display:block}
  nav.menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--red-deep);flex-direction:column;align-items:stretch;padding:1rem 24px;gap:.4rem;border-bottom:3px solid var(--gold)}
  nav.menu.open{display:flex}
  nav.menu a{padding:.7rem .2rem;font-size:1rem}
  .nav-cta{margin:0.5rem 0 0}
}

/* ---------- Pages ---------- */
.page{display:none}
.page.active{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .page.active{animation:none}
  html{scroll-behavior:auto}
  .book{transition:none !important}
  .type-caret{animation:none !important}
}

/* ---------- Hero ---------- */
.hero{background:var(--red);color:var(--paper);padding:4.5rem 0 5rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:14px;background:repeating-linear-gradient(90deg,var(--gold) 0 24px,transparent 24px 48px);opacity:.5}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero h1{color:var(--white)}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero p.lede{color:#EAD9C9;margin:1.2rem 0 1.8rem;max-width:34rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.interview-line{margin-top:2.4rem;font-family:var(--ui);font-size:.95rem;color:var(--gold-soft);display:flex;gap:.6rem;align-items:baseline;min-height:2.6em}
.interview-line .label{flex:none;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#D8B9A6;border:1px solid rgba(247,241,229,.35);border-radius:999px;padding:.2rem .6rem}
.type-caret{display:inline-block;width:2px;height:1em;background:var(--gold-soft);margin-left:2px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* The Big Red Book */
.book-stage{display:flex;justify-content:center;perspective:1200px}
.book{position:relative;width:min(280px,70vw);aspect-ratio:3/4;transform:rotateY(-18deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s ease}
.book:hover{transform:rotateY(-8deg) rotateX(2deg)}
.book .cover{position:absolute;inset:0;background:linear-gradient(115deg,#A32833 0%,#8E1B26 45%,#6E141E 100%);border-radius:6px 14px 14px 6px;border:2px solid var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 40px rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}
.book .cover::before{content:"";position:absolute;inset:14px;border:1.5px solid rgba(201,162,39,.65);border-radius:4px 10px 10px 4px;pointer-events:none}
.book .spine{position:absolute;top:0;bottom:0;left:-16px;width:16px;background:linear-gradient(90deg,var(--red-deep),#7A1620);border-radius:6px 0 0 6px;transform:rotateY(-70deg);transform-origin:right;border-left:1.5px solid var(--gold)}
.book .pages{position:absolute;top:8px;bottom:8px;right:-10px;width:10px;background:repeating-linear-gradient(180deg,#F7F1E5 0 2px,#E4DAC4 2px 4px);border-radius:0 3px 3px 0;transform:rotateY(70deg);transform-origin:left}
.book .cover .gilt-top{font-family:var(--ui);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1rem}
.book .cover .gilt-title{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4vw,2rem);line-height:1.15;color:var(--gold);text-shadow:0 1px 0 rgba(0,0,0,.4)}
.book .cover .gilt-rule{width:56px;height:2px;background:var(--gold);margin:1.1rem auto}
.book .cover .gilt-name{font-family:var(--body);font-style:italic;color:var(--gold-soft);font-size:1rem}
@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr;text-align:left}
  .book-stage{order:-1;margin-bottom:1rem}
}

/* ---------- Sections ---------- */
section.band{padding:4.5rem 0}
section.band.dim{background:var(--paper-dim)}
section.band.red{background:var(--red);color:var(--paper)}
section.band.red h2{color:var(--white)}
.section-head{max-width:44rem;margin-bottom:2.6rem}
.section-head p{margin-top:.8rem;color:var(--ink-soft)}
.red .section-head p{color:#EAD9C9}

/* Steps — a genuine sequence */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;counter-reset:step}
.step{background:var(--white);border:1.5px solid #E2D6BE;border-radius:var(--radius);padding:1.8rem 1.6rem;position:relative}
.step::before{counter-increment:step;content:"Chapter " counter(step);font-family:var(--ui);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.7rem}
.step h3{margin-bottom:.5rem}
.step p{font-size:1rem;color:var(--ink-soft)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* Feature list */
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 2.6rem}
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature .tick{flex:none;width:34px;height:34px;border-radius:50%;background:var(--red);color:var(--gold-soft);display:grid;place-items:center;font-family:var(--ui);font-weight:700}
.feature h3{font-size:1.1rem;margin-bottom:.25rem}
.feature p{font-size:.98rem;color:var(--ink-soft)}
@media(max-width:820px){.features{grid-template-columns:1fr}}

/* Sample question strip */
.q-strip{display:flex;gap:1rem;flex-wrap:wrap}
.q-chip{font-family:var(--body);font-style:italic;background:rgba(247,241,229,.1);border:1px solid rgba(201,162,39,.5);color:var(--paper);border-radius:999px;padding:.55rem 1.2rem;font-size:1rem}

/* CTA band */
.cta-band{text-align:center;padding:4.5rem 0}
.cta-band h2{margin-bottom:.8rem}
.cta-band p{color:var(--ink-soft);margin-bottom:1.8rem}

/* ---------- Generic inner pages ---------- */
.inner{padding:4rem 0 5rem}
.inner .section-head{margin-bottom:2rem}
.prose{max-width:44rem}
.prose p{margin-bottom:1.1rem}
.prose h3{margin:2rem 0 .6rem}

/* Values / about cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.card{background:var(--white);border:1.5px solid #E2D6BE;border-radius:var(--radius);padding:1.6rem}
.card h3{margin-bottom:.4rem}
.card p{font-size:.98rem;color:var(--ink-soft)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* ---------- Forms ---------- */
.form-shell{max-width:480px;background:var(--white);border:1.5px solid #E2D6BE;border-radius:var(--radius);padding:2.2rem;box-shadow:0 12px 30px rgba(43,33,24,.08)}
.form-shell.center{margin:0 auto}
.field{margin-bottom:1.2rem}
label{display:block;font-family:var(--ui);font-size:.8rem;font-weight:600;letter-spacing:.04em;margin-bottom:.4rem;color:var(--ink)}
input,textarea,select{width:100%;font-family:var(--body);font-size:1rem;padding:.7rem .85rem;border:1.5px solid #D8CBB0;border-radius:8px;background:var(--paper);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--red)}
.hint{font-family:var(--ui);font-size:.78rem;color:var(--ink-soft);margin-top:.35rem}
.form-msg{font-family:var(--ui);font-size:.9rem;margin-top:1rem;padding:.7rem .9rem;border-radius:8px;display:none}
.form-msg.ok{display:block;background:#EAF3E4;border:1.5px solid #7BA05B;color:#2F4A1D}
.form-msg.err{display:block;background:#F8E7E7;border:1.5px solid var(--red);color:var(--red-deep)}
.form-switch{font-family:var(--ui);font-size:.88rem;margin-top:1.2rem;color:var(--ink-soft)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-details p{margin-bottom:.9rem}
.contact-details .k{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:block}

/* ---------- Account ---------- */
.account-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:start}
@media(max-width:820px){.account-grid{grid-template-columns:1fr}}
.progress-row{display:flex;justify-content:space-between;font-family:var(--ui);font-size:.85rem;margin-bottom:.4rem;color:var(--ink-soft)}
.progress-bar{height:12px;background:var(--paper-dim);border-radius:999px;overflow:hidden;border:1px solid #E2D6BE}
.progress-bar span{display:block;height:100%;width:32%;background:linear-gradient(90deg,var(--red),var(--red-bright))}
.chapter-list{list-style:none;margin-top:1.4rem}
.chapter-list li{display:flex;align-items:center;gap:.8rem;padding:.85rem .4rem;border-bottom:1px solid #E9DEC8;font-size:1rem}
.chapter-list .dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--red)}
.chapter-list .done .dot{background:var(--red)}
.chapter-list .state{margin-left:auto;font-family:var(--ui);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- Footer ---------- */
footer{background:var(--red-deep);color:#E8D3C3;padding:3rem 0 2.2rem;margin-top:0}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
footer h4{font-family:var(--ui);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.8rem}
footer a{color:#F2E4D6;text-decoration:none;font-family:var(--ui);font-size:.9rem;display:block;margin-bottom:.5rem}
footer a:hover{color:var(--gold-soft)}
footer .fine{grid-column:1/-1;border-top:1px solid rgba(247,241,229,.2);padding-top:1.2rem;font-family:var(--ui);font-size:.78rem;color:#C9AC97}
@media(max-width:820px){footer .wrap{grid-template-columns:1fr}}

/* ---------- Legal page ---------- */
.prose.legal h3{font-size:1.15rem;margin:2.2rem 0 .6rem;color:var(--red-deep)}
.prose.legal p{font-size:1rem}
.prose.legal strong{font-weight:600}

/* ---------- Cookie banner ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--red-deep);color:var(--paper);border-top:3px solid var(--gold);box-shadow:0 -10px 30px rgba(0,0,0,.3)}
.cookie-banner[hidden]{display:none}
.cookie-inner{max-width:var(--maxw);margin:0 auto;padding:1.1rem 24px;display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
.cookie-inner p{flex:1 1 380px;font-family:var(--ui);font-size:.9rem;line-height:1.5;margin:0}
.cookie-inner a{color:var(--gold-soft)}
.cookie-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.cookie-actions .btn-solid{background:var(--gold);border-color:var(--gold);color:var(--red-deep)}
.cookie-actions .btn-solid:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.cookie-actions .btn-ghost{color:var(--paper);border-color:var(--paper)}
.cookie-actions .btn-ghost:hover{background:rgba(247,241,229,.12)}