/* Layout: a gallery wall. White paper, cobalt ink, and the guide's own watercolors hung as a straight-edged frieze;
   one solid cobalt band carries the featured guide, everything else stays on paper with hairlines.
   Single light theme on purpose: the watercolors are painted on white paper. */
:root {
  --paper: #FFFFFF;
  --paper-warm: #F6F8FC;
  --ink: #14244A;
  --ink-soft: #4B5878;
  --cobalt: #1E4FA3;
  --cobalt-deep: #173E82;
  --coral: #E2553F;
  --lemon: #F4C83C;
  --line: #D5DCEA;
  --on-cobalt: #FFFFFF;
  --on-cobalt-soft: #C9D8F2;
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.06; text-wrap: balance; margin: 0; }
p, ul, dl, dd, figure, blockquote { margin: 0; }
a { color: var(--cobalt); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cobalt); }
.rule { width: 64px; height: 3px; background: var(--coral); }

/* Header */
header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-name { display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand-name b { font-family: var(--display); font-weight: 400; font-size: 25px; }
.brand-name small { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
nav a { color: var(--ink); text-decoration: none; padding-block: 6px; border-bottom: 2px solid transparent; }
nav a:hover { border-bottom-color: var(--coral); }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: end; padding-block: 72px 56px; }
.hero h1 { font-size: clamp(44px, 6.6vw, 92px); letter-spacing: -0.01em; }
.hero h1 em { font-style: italic; color: var(--cobalt); }
.hero .side { display: flex; flex-direction: column; gap: 22px; padding-bottom: 10px; }
.hero .lead { font-size: 19px; color: var(--ink-soft); }
.now { display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.now span { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); }
.now a { font-weight: 600; text-underline-offset: 4px; }

/* Frieze: the guide's watercolors, hung edge to edge */
.frieze { overflow: hidden; border-block: 3px solid var(--ink); }
.frieze-track { display: flex; gap: 6px; width: max-content; animation: drift 80s linear infinite; }
.frieze:hover .frieze-track { animation-play-state: paused; }
.frieze img { display: block; height: clamp(240px, 34vw, 420px); width: auto; max-width: none; aspect-ratio: 1 / 2; object-fit: cover; }
@keyframes drift { to { transform: translateX(calc(-50% - 3px)); } }
.frieze-note { padding-block: 14px 0; font-size: 13px; color: var(--ink-soft); }

/* Sections */
section .wrap { padding-block: 96px; }
.head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.head h2 { font-size: clamp(34px, 4.6vw, 56px); }
.head p.intro { color: var(--ink-soft); font-size: 18px; max-width: 38em; }

/* House principles */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; }
.principles div { border-top: 3px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.principles h3 { font-size: 28px; }
.principles p { color: var(--ink-soft); font-size: 16px; }

/* Featured guide: the one solid band */
.guide-band { background: var(--cobalt); color: var(--on-cobalt); }
.guide-band .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; padding-block: 96px; }
.cover { display: block; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 560 / 794; object-fit: cover; box-shadow: 18px 18px 0 var(--cobalt-deep); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.cover:hover { transform: translate(-4px, -4px); box-shadow: 24px 24px 0 var(--cobalt-deep); }
.guide-info { display: flex; flex-direction: column; gap: 22px; }
.guide-info .eyebrow { color: var(--lemon); }
.guide-info .rule { background: var(--lemon); }
.guide-info h2 { font-size: clamp(38px, 5vw, 64px); }
.guide-info p.desc { font-size: 19px; color: var(--on-cobalt-soft); max-width: 32em; }
.guide-info p.by { font-size: 16px; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 0 36px; border-block: 1px solid rgba(255, 255, 255, 0.28); padding-block: 18px; }
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-cobalt-soft); }
.facts dd { font-family: var(--display); font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.soon b { background: var(--lemon); color: var(--ink); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 22px; }
.soon span { font-size: 15px; color: var(--on-cobalt-soft); }

/* Inside the guide */
.inside { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 64px; align-items: start; margin-top: 56px; }
.toc { list-style: none; padding: 0; display: flex; flex-direction: column; }
.toc li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px; align-items: baseline; padding-block: 16px; border-top: 1px solid var(--line); }
.toc li:last-child { border-bottom: 1px solid var(--line); }
.toc small { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.toc span { font-family: var(--display); font-size: 23px; line-height: 1.2; }
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pages figure { display: flex; flex-direction: column; gap: 10px; }
.pages figure:nth-child(2) { margin-top: 44px; }
.pages figure:nth-child(3) { margin-top: 88px; }
.pages img { display: block; width: 100%; aspect-ratio: 560 / 794; object-fit: cover; border: 1px solid var(--line); box-shadow: 8px 8px 0 var(--paper-warm); }
.pages figcaption { font-size: 13px; color: var(--ink-soft); }

/* Who it's for */
.forwho-band { background: var(--paper-warm); border-block: 1px solid var(--line); }
.forwho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.forwho div { display: flex; flex-direction: column; gap: 10px; }
.forwho h3 { font-size: 28px; }
.forwho p { color: var(--ink-soft); font-size: 16px; }

/* Expert */
.expert { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 72px; align-items: center; }
.portrait { position: relative; }
.portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.portrait::after { content: ""; position: absolute; left: 18px; top: 18px; right: -18px; bottom: -18px; border: 3px solid var(--cobalt); z-index: -1; }
.expert-text { display: flex; flex-direction: column; gap: 22px; }
.expert blockquote { font-family: var(--display); font-style: italic; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.22; }
.who { display: flex; flex-direction: column; gap: 4px; }
.who b { font-weight: 600; font-size: 18px; }
.who span { color: var(--ink-soft); font-size: 16px; }
.expert-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; padding-top: 18px; border-top: 1px solid var(--line); }
.expert-links a { font-weight: 600; text-underline-offset: 4px; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; }
.faq { display: flex; flex-direction: column; border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font-family: var(--display); font-size: 24px; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--body); color: var(--coral); font-size: 26px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 22px; color: var(--ink-soft); max-width: 40em; }

/* Footer */
footer { background: var(--ink); color: var(--on-cobalt-soft); }
footer .wrap { padding-block: 56px; display: flex; flex-direction: column; gap: 28px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
footer .brand { color: var(--on-cobalt); }
footer .brand-name small { color: var(--on-cobalt-soft); }
footer a { color: var(--on-cobalt); }
.disclaimer { font-size: 13px; max-width: 62em; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }

@media (prefers-reduced-motion: reduce) { .frieze-track { animation: none; } .cover, .cover:hover { transition: none; transform: none; } }
@media (max-width: 860px) {
  nav { display: none; }
  .hero .wrap, .guide-band .wrap, .inside, .expert, .faq-grid, .principles, .forwho { grid-template-columns: minmax(0, 1fr); }
  .hero .wrap { gap: 28px; padding-block: 44px 40px; align-items: start; }
  section .wrap, .guide-band .wrap { padding-block: 64px; }
  .guide-band .wrap, .inside, .expert, .faq-grid { gap: 44px; }
  .principles, .forwho { gap: 28px; margin-top: 40px; }
  .cover { max-width: 280px; margin-left: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
  .pages figure:nth-child(2) { margin-top: 22px; }
  .pages figure:nth-child(3) { margin-top: 44px; }
  .pages { gap: 10px; }
  .portrait { max-width: 240px; }
}

*{box-sizing:border-box}body{margin:0}img{max-width:100%}
a.buy{background:var(--lemon);color:var(--ink);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:14px 22px;text-decoration:none}
a.buy:hover{background:#fff}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.legal .wrap{max-width:760px;padding-block:72px}
.legal h1{font-size:clamp(38px,5vw,56px);margin-bottom:10px}
.legal h2{font-size:28px;margin:40px 0 10px}
.legal p,.legal li{color:var(--ink-soft)}
.legal p+p{margin-top:12px}
.legal .updated{font-size:14px}
.thanks .wrap{max-width:760px;padding-block:88px;display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.thanks h1{font-size:clamp(40px,6vw,68px)}
.thanks a.dl{background:var(--cobalt);color:#fff;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px;padding:16px 26px;text-decoration:none}
.thanks a.dl:hover{background:var(--cobalt-deep)}
.thanks p{color:var(--ink-soft);font-size:18px;max-width:34em}
[hidden]{display:none!important}
/* Early readers page */
.rv-hero .wrap{padding-block:72px 56px;display:flex;flex-direction:column;gap:22px;border-bottom:1px solid var(--line)}
.rv-hero h1{font-size:clamp(40px,6vw,76px);max-width:15em}
.rv-hero .lead{font-size:19px;color:var(--ink-soft);max-width:38em}
.rv-steps{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:3px solid var(--ink)}
.rv-steps li{display:flex;flex-direction:column;gap:6px;padding:16px 18px 0 0}
.rv-steps b{font-family:var(--display);font-weight:400;font-size:34px;color:var(--cobalt);line-height:1}
.rv-steps span{font-size:15px}
.rv-block .wrap{padding-block:64px;border-bottom:1px solid var(--line)}
.rv-grid{display:grid;grid-template-columns:minmax(0,0.6fr) minmax(0,1.4fr);gap:56px;align-items:start}
.rv-label{display:flex;flex-direction:column;gap:10px}
.rv-label h2{font-size:clamp(30px,3.6vw,42px)}
.rv-body{min-width:0;max-width:640px}
.prose{display:flex;flex-direction:column;gap:14px}
.prose p{color:var(--ink-soft)}
.prose h3{font-size:24px;margin-top:12px}
.ticks,.crosses{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ticks li,.crosses li{position:relative;padding-left:26px;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:3px;background:var(--cobalt)}
.crosses li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:3px;background:var(--coral)}
.rv-facts{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;gap:0 36px;border-block:1px solid var(--line);padding-block:14px;margin-top:8px}
.rv-facts div{display:flex;flex-direction:column}
.rv-facts dt{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.rv-facts dd{font-family:var(--display);font-size:26px}
.small{font-size:14px;color:var(--ink-soft)}
label{font-size:14px;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid #AEB9D2;border-radius:0;padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.code-form{display:flex;flex-direction:column;gap:10px}
.code-row{display:flex;gap:10px;flex-wrap:wrap}
.code-row input{flex:1 1 220px;width:auto;font-size:20px;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:0;border-radius:0}
.code-row button,.send{background:var(--cobalt);color:#fff;font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;padding:14px 26px}
.code-row button:hover,.send:hover{background:var(--cobalt-deep)}
button:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.code-msg{font-size:14px;color:var(--ink-soft)}
.code-msg.err{color:#B3321F}
.unlocked{display:flex;flex-direction:column;gap:14px;align-items:flex-start;border-top:3px solid var(--cobalt);padding-top:18px}
.unlocked .ok{font-family:var(--display);font-size:28px}
.unlocked .dl,a.dl{background:var(--cobalt);color:#fff;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px;padding:16px 26px;text-decoration:none}
.review-form{display:flex;flex-direction:column;gap:20px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;padding:0;margin:0}
fieldset{border:0;padding:0;margin:0}
legend{font-size:14px;font-weight:600;padding:0;margin-bottom:8px}
.star-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:6px}
.star-row input{position:absolute;opacity:0;width:1px;height:1px}
.star-row label{width:48px;height:48px;display:grid;place-items:center;border:1px solid #AEB9D2;font-family:var(--display);font-size:22px;font-weight:400;cursor:pointer;color:var(--ink-soft)}
.star-row input:checked~label,.star-row label:hover,.star-row label:hover~label{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.star-row input:focus-visible+label{outline:2px solid var(--cobalt);outline-offset:2px}
.consents{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:18px}
.consents label{display:flex;gap:12px;align-items:flex-start;font-weight:400;font-size:15px;color:var(--ink-soft)}
.consents input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--cobalt)}
.send{align-self:flex-start}
.fallback{display:flex;flex-direction:column;gap:10px;background:var(--paper-warm);border:1px solid var(--line);padding:18px}
.copy{align-self:flex-start;background:var(--ink);color:#fff;font-weight:600;font-size:14px;padding:10px 18px}
@media (max-width:860px){.rv-grid{grid-template-columns:minmax(0,1fr);gap:24px}.rv-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.two{grid-template-columns:minmax(0,1fr)}.rv-block .wrap{padding-block:48px}}
.part{display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--ink);padding-top:16px}
.part+.part{margin-top:22px}
.part-tag{font-family:var(--display);font-size:28px;color:var(--ink)!important;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.part-tag span{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.part-tag span.love{color:var(--coral)}
.send-note{max-width:34em}
.scripts{list-style:none;padding:0;margin:4px 0 6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;counter-reset:sc}
.scripts li{counter-increment:sc;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.sc-name{font-size:12px!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt)!important}
.sc-name::before{content:counter(sc) ". "}
.sc-hook{font-family:var(--display);font-size:22px;line-height:1.25;color:var(--ink)!important}
.sc-rest{font-size:15px}
@media (max-width:860px){.scripts{grid-template-columns:minmax(0,1fr)}}
.scripts li.sc-wide{grid-column:1/-1}
.beats{list-style:none;padding:0;margin:4px 0 8px;display:flex;flex-direction:column;border-top:3px solid var(--cobalt)}
.beats li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:baseline;padding-block:12px;border-bottom:1px solid var(--line)}
.beats b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--cobalt);font-variant-numeric:tabular-nums}
.beats span{font-size:16px;color:var(--ink-soft)}
.beats strong{color:var(--ink)}
.sc-rest{font-style:italic}