:root {
  /* Palette taken from the Book 1-3 covers: deep navy bands, golden coastal light */
  --bg: #17242d; --fg: #ece6da; --muted: #a9b1bd; --accent: #d9a659;
  --card: #1f2f3a; --line: #2c3a4e;
  /* Expanded Path marker colour: placeholder until covers are approved */
  --x: #c77a96;
  --serif: "Libre Caslon Text", Georgia, serif;
  --text: "Source Serif 4", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 1.125rem/1.65 var(--text); }
main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1, h2, h3, .logo { font-family: var(--serif); line-height: 1.2; }
h1 { font-family: var(--display); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: .5rem 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: .5rem; z-index: 10; }
.draft-banner { background: #b8860b; color: #000; text-align: center; font-size: .85rem; padding: .25rem; }
.site-header { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; max-width: 64rem; margin: 0 auto; padding: 1rem; }
.logo { font-size: 1.4rem; color: var(--fg); text-decoration: none; }
.site-header ul { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0; }
.site-header nav a { text-decoration: none; padding: .25rem 0; }
.site-footer { background: #0b111a; text-align: center; padding: 1.5rem 1rem; color: #e6e2da; }
.site-footer a { color: #bcd0ea; } .site-footer .small { color: #a9b2bf; } .site-footer .logo { color: #fff; font-size: 1.1rem; }
.small { font-size: .85rem; color: var(--muted); }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; color: var(--muted); margin: 0; }
.lead { font: italic 1.3rem/1.5 var(--serif); color: var(--muted); }
h1, h2 { font-weight: 400; }
h2 { font-size: 1.9rem; margin: 3rem 0 1rem; }
.intro p { font: italic 1.35rem/1.6 var(--serif); max-width: 38rem; margin: 2rem auto; text-align: center; }
main p { max-width: 40rem; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; padding: 2.5rem 0 1.5rem; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1.02; }
/* Abstract sea/horizon placeholder until real imagery is approved */
.horizon { aspect-ratio: 4/3; border-radius: .4rem; background:
  linear-gradient(180deg, #17242d 0%, #4d4551 26%, #a2734f 44%, #efcca1 50%, #754b2d 56%, #2c3445 72%, #17242d 100%); }
@media (max-width: 44rem) { .hero { grid-template-columns: 1fr; } .horizon { aspect-ratio: 4/3; border-radius: .4rem; background:
  linear-gradient(180deg, #17242d 0%, #4d4551 26%, #a2734f 44%, #efcca1 50%, #754b2d 56%, #2c3445 72%, #17242d 100%); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.center { text-align: center; }
.timeline { width: 100%; height: auto; display: block; }
.timeline .tl-shared, .timeline .tl-x { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.timeline .tl-x { stroke: var(--x); }
.timeline .tl-dot { fill: var(--accent); }
.timeline .tl-label { font: 600 13px var(--sans); fill: var(--muted); text-anchor: middle; letter-spacing: .1em; }
.timeline .tl-path { font: italic 19px var(--serif); fill: var(--fg); }
.timeline .tl-path-x { fill: var(--x); }
.btn { display: inline-block; background: var(--accent); color: #17242d; padding: .65rem 1.3rem; border-radius: 0; text-decoration: none; border: 1px solid var(--accent); font: 500 .8rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .14em; cursor: pointer; margin: .25rem; }
.btn-ghost { background: transparent; color: var(--accent); }
.badge { display: inline-block; background: var(--x); color: #fff; font: 600 .75rem var(--sans); padding: .1rem .45rem; border-radius: .3rem; vertical-align: middle; }
.grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; }
.card a { display: block; text-decoration: none; color: inherit; }
.card h3 { margin: .7rem 0 0; font: 500 .72rem var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); } .card p { margin: .2rem 0 0; font: 1rem/1.3 var(--serif); color: var(--fg); }
.cover { aspect-ratio: 2/3; background: #1c2a34; border: 1px solid var(--line); color: var(--muted); border-radius: 0; font-style: italic; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); font-size: 2rem; text-align: center; padding: 1rem; }
.cover small { font: .75rem var(--sans); opacity: .8; }
.cover-x { border-top: .6rem solid var(--x); }
.book { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 1.5rem; align-items: start; margin: 2rem 0; }
@media (max-width: 40rem) { .book { grid-template-columns: 1fr; } .book .cover { max-width: 12rem; } }
.pager { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1rem; }
.note { border-left: 2px solid var(--accent); padding: .25rem 0 .25rem 1.25rem; margin: 2rem 0; }
.fork-diagram { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: center; }
.fork-diagram li { background: var(--card); border: 1px solid var(--line); padding: 1rem; border-radius: .4rem; }
.fork-diagram .shared { grid-column: 1 / -1; }
.fork-diagram .expanded { border-top: 4px solid var(--x); }
@media (max-width: 34rem) { .fork-diagram { grid-template-columns: 1fr; } }
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.path { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 1.5rem; }
.path-x { border-top: 6px solid var(--x); }
.cta { text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.5rem 1rem; margin-top: 3rem; }
.form { max-width: 30rem; display: grid; gap: .5rem; }
.form input[type=text], .form input[type=email] { font: inherit; padding: .6rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--card); color: var(--fg); }
.form fieldset { border: 1px solid var(--line); border-radius: .3rem; } .form fieldset label, .check { display: block; margin: .25rem 0; }
.gate { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 20; }
.gate[hidden] { display: none; }
.gate-box { background: var(--card); max-width: 28rem; padding: 2rem; border-radius: .5rem; text-align: center; }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 0; }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.1rem; }
.cover-img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: contain; background: #0b111a; border-radius: 0; display: block; }
.hero-img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 0; display: block; }
.site-header nav a { font: 500 .74rem var(--sans); text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.site-header nav a:hover { color: var(--accent); }
.site-header { border-bottom: 1px solid var(--line); }

/* ---- Paper edition: light, printed-book feel ---- */
:root { --bg:#f3eee4; --fg:#23201c; --muted:#6b645a; --accent:#9b3d23; --card:#ebe4d7; --line:#d6cdbd; color-scheme: light; }
body { background: var(--bg); }
.draft-banner { background:#23201c; color:#f3eee4; font: .75rem var(--sans); }
.site-header { border-bottom: 0; padding: 1.75rem 1rem 1rem; align-items: baseline; }
.logo { font: 1.6rem var(--display); letter-spacing: .01em; }
.site-header nav a { font: italic 1rem var(--serif); text-transform: none; letter-spacing: 0; color: var(--fg); }
.site-header nav a:hover { color: var(--accent); text-decoration: underline; }
.hero { grid-template-columns: 1fr; gap: 1.5rem; padding-top: .5rem; }
.hero > img { order: -1; aspect-ratio: 21/9; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); max-width: 14ch; }
.eyebrow { font: italic 1rem var(--serif); text-transform: none; letter-spacing: 0; color: var(--accent); }
.lead { font: 1.25rem/1.5 var(--text); color: var(--fg); }
.btn { background: none; border: 0; border-bottom: 1px solid currentColor; padding: .1rem 0; margin: .25rem 1.5rem .25rem 0; color: var(--accent); font: italic 1.1rem var(--serif); text-transform: none; letter-spacing: 0; }
.btn::after { content: " →"; }
.btn-ghost { color: var(--fg); }
.intro p { font: 1.2rem/1.7 var(--text); text-align: left; margin: 3rem 0; border-top: 1px solid var(--fg); padding-top: 1.5rem; }
.intro p::first-letter { float: left; font: 4.2rem/.8 var(--display); padding: .3rem .5rem 0 0; color: var(--accent); }
.timeline .tl-shared { stroke: var(--fg); stroke-width: 1; }
.timeline .tl-dot { fill: var(--bg); stroke: var(--fg); stroke-width: 1; }
.timeline .tl-label { font: italic 15px var(--serif); letter-spacing: 0; fill: var(--muted); }
h2 { font-size: 1.6rem; font-style: italic; }
.card h3 { font: .9rem var(--serif); text-transform: none; letter-spacing: 0; color: var(--muted); }
.card p { font-size: 1.05rem; }
.cover { background: var(--card); color: var(--muted); font-size: 1.4rem; }
.cover-img { background: var(--card); }
.card a:hover p { color: var(--accent); }
.faq summary { font-style: italic; }
.cta { text-align: left; border-bottom: 0; }
.site-footer { background: var(--bg); color: var(--muted); border-top: 1px solid var(--fg); max-width: 60rem; margin: 0 auto; text-align: left; }
.site-footer a { color: var(--accent); } .site-footer .small { color: var(--muted); } .site-footer .logo { color: var(--fg); }
.gate-box { background: var(--bg); }

/* ---- Poster edition: editorial, oversized, image-led ---- */
:root { --bg:#efe8da; --fg:#141414; --accent:#c2411c; --muted:#5d574e; }
.site-header { max-width: none; padding: 1.25rem 2rem; position: relative; z-index: 2; }
main { max-width: none; padding: 0; }
main > section { max-width: 76rem; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
.hero { max-width: none !important; padding: 0 !important; display: grid; grid-template-columns: 1fr; position: relative; min-height: 88vh; color: #f6f1e7; }
.hero > * { grid-area: 1 / 1; }
.hero > img { aspect-ratio: auto; height: 88vh; width: 100%; object-fit: cover; filter: brightness(.62); }
.hero > div { align-self: end; padding: 0 2rem 3.5rem; max-width: 76rem; width: 100%; margin: 0 auto; z-index: 1; }
.hero h1 { font: 400 clamp(3.5rem, 13vw, 11rem)/.86 var(--display); letter-spacing: -.035em; max-width: 9ch; margin: .2em 0 .25em; }
.hero .eyebrow, .hero .lead, .hero .btn, .hero .btn-ghost { color: #f6f1e7; }
.hero .eyebrow { font: 500 .8rem var(--sans); text-transform: uppercase; letter-spacing: .3em; }
.hero .lead { font: italic clamp(1.2rem, 2.2vw, 1.7rem) var(--serif); max-width: 30ch; }
.hero .btn:first-child { background: var(--accent); border: 0; padding: .9rem 1.6rem; font: 600 .85rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.hero .btn:first-child::after { content: ""; }
.intro p { font: 400 clamp(1.7rem, 3.6vw, 3rem)/1.18 var(--display); max-width: 22ch; border: 0; margin: 6rem 0 4rem; padding: 0; letter-spacing: -.01em; }
.intro p::first-letter { float: none; font: inherit; padding: 0; color: var(--accent); }
.fork { padding-top: 2rem !important; padding-bottom: 4rem !important; border-top: 1px solid var(--fg); }
h2 { font: 400 clamp(2.4rem, 6vw, 5rem)/1 var(--display); font-style: normal; letter-spacing: -.02em; margin: 5rem 0 1.5rem; }
.grid { grid-auto-flow: column; grid-auto-columns: minmax(13rem, 1fr); grid-template-columns: none; overflow-x: auto; gap: 1.5rem; padding-bottom: 1rem; scroll-snap-type: x mandatory; }
.card { scroll-snap-align: start; }
.card a { transition: transform .4s ease; } .card a:hover { transform: translateY(-.5rem); }
.card h3 { font: 600 .75rem var(--sans); text-transform: uppercase; letter-spacing: .2em; color: var(--accent); margin-top: 1rem; }
.card p { font: 1.3rem/1.2 var(--display); }
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 3rem; padding-bottom: 4rem !important; }
.faq h2 { grid-row: span 9; }
.faq summary { font: 1.25rem var(--serif); font-style: normal; }
@media (max-width: 50rem) { .faq { grid-template-columns: 1fr; } }
.cta { max-width: none !important; background: var(--accent); color: #f6f1e7; border: 0; margin: 0; padding: 6rem 2rem !important; }
.cta h2 { margin-top: 0; color: #f6f1e7; font-size: clamp(3rem, 10vw, 8rem); }
.cta p { font: italic 1.4rem var(--serif); }
.cta .btn { color: #f6f1e7; font: italic 1.3rem var(--serif); }
.site-footer { max-width: none; background: var(--fg); color: #bdb5a7; border: 0; padding: 3rem 2rem; }
.site-footer .logo { color: #f6f1e7; font: 400 clamp(2rem, 6vw, 4.5rem) var(--display); display: block; }
.site-footer a { color: #f0a283; }
main > .book, main > p, main > h1, main > ul, main > ol, main > div, main > nav, main > form, main > details, main > header { max-width: 60rem; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }

/* ---- Candlelight palette: warm, intimate (styling only; copy stays non-explicit) ---- */
:root { --bg:#f5ebe3; --fg:#2a1218; --accent:#8e1f3a; --muted:#6e5359; --card:#ead8cf; --line:#dcc3b8; }
.hero > img { filter: brightness(.55) saturate(1.15) sepia(.18); }
.hero::after { content:""; grid-area: 1/1; background: radial-gradient(ellipse at 30% 100%, rgba(80,10,30,.55), transparent 60%); pointer-events:none; }
.hero > div { z-index: 2; }
.hero h1 { font-style: italic; }
.intro p { font-style: italic; }
.cta { background: #3a0d1a; }
.cta h2 { font-style: italic; }
.site-footer { background: #1c0a0f; }
.card img { box-shadow: 0 1.5rem 3rem -1.5rem rgba(60,10,25,.55); }

/* ---- Type swap: Bodoni Moda (display) + Crimson Pro (text) ---- */
:root { --display: "Bodoni Moda", Didot, serif; --serif: "Crimson Pro", Georgia, serif; --text: "Crimson Pro", Georgia, serif; }
body { font-size: 1.22rem; }
.hero h1 { letter-spacing: -.02em; }
.cta h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .5rem; } .cta { padding: 3.5rem 2rem !important; }