/* ============================================================
 BEDROCK TO BOARDROOM
 Palette and type taken from the book's own identity.
 Ink dominant, paper as ground, one oxblood accent.
 ============================================================ */

:root{
 --paper:#F4EFE4; /* warm paper — the book's ground */
 --paper-deep:#EAE3D4; /* recessed panels */
 --ink:#161628; /* deep navy-black — the book's ink */
 --ink-soft:#3A3A4E;
 --mute:#6E6A62;
 --ox:#6B2E2E; /* the single accent. use sparingly */
 --rule:#CFC6B4;
 --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
 margin:0;
 background:var(--paper);
 color:var(--ink);
 font-family:"Newsreader",Georgia,serif;
 font-size:19px;
 line-height:1.62;
 font-optical-sizing:auto;
 -webkit-font-smoothing:antialiased;
}

a{color:var(--ox);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
 outline:2px solid var(--ox);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:99}

/* ── HERO ───────────────────────────────────────────────────
 Ink field, not paper. The panel is the hero, the type sits
 beside it. Deliberately not a headline floating on cream. */
.hero{
 background:var(--ink);
 color:var(--paper);
 display:grid;
 grid-template-columns:1.15fr .85fr;
 align-items:center;
 gap:clamp(2rem,5vw,4.5rem);
 padding:clamp(2rem,5vw,4rem);
 min-height:82vh;
}
.hero__panel{position:relative;aspect-ratio:16/10;background:#101020;overflow:hidden}
.hero__panel img{width:100%;height:100%;object-fit:cover;display:block}

.hero__text .kicker{
 font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
 color:#9A9384;margin:0 0 1.4rem;font-weight:500}

.hero h1{
 font-size:clamp(2.9rem,6.4vw,5rem);
 line-height:.94;font-weight:400;margin:0;letter-spacing:-.022em}
.hero h1 span{
 display:block;font-size:.34em;font-style:italic;color:#8E8879;
 letter-spacing:.04em;margin:.28em 0 .18em;font-weight:300}

.hero .sub{
 font-size:clamp(1.05rem,1.9vw,1.4rem);
 color:#CFC6B4;margin:1.5rem 0 0;font-weight:300;line-height:1.4}

.hero .tag{
 margin:1.9rem 0 0;padding-left:1.1rem;
 border-left:2px solid var(--ox);
 font-style:italic;color:#E5DDCC;font-size:1.06rem}

.count{margin:2.4rem 0 1.7rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.count__label{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:#8E8879}
.count__num{font-size:1.7rem;color:var(--paper);font-weight:400}

.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap}

.btn{
 display:inline-block;background:var(--paper);color:var(--ink);
 padding:.82rem 1.5rem;text-decoration:none;font-size:1rem;
 border:1px solid var(--paper);transition:background .18s,color .18s}
.btn:hover{background:transparent;color:var(--paper)}
.btn--ghost{background:transparent;color:var(--paper);border-color:#5A5468}
.btn--ghost:hover{background:var(--paper);color:var(--ink)}

/* on paper sections the buttons invert */
main .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
main .btn:hover{background:transparent;color:var(--ink)}
main .btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
main .btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* ── shared ─────────────────────────────────────────────── */
.section-h{
 font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;
 margin:0 0 2.4rem;letter-spacing:-.01em}

.premise{
 max-width:640px;margin:0 auto;
 padding:clamp(4rem,9vw,7rem) 1.5rem clamp(2.5rem,5vw,4rem)}
.premise__lead{
 font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.3;
 margin:0 0 1.5rem;letter-spacing:-.015em}
.premise p{color:var(--ink-soft);margin:0 0 1.2rem}

/* ── THE SEAM DEVICE ────────────────────────────────────────
 A hairline runs down the whole section. Each seam block
 interrupts it. The line is continuous; the seams open it. */
.seams{
 position:relative;max-width:var(--max);margin:0 auto;
 padding:clamp(2rem,5vw,3.5rem) 1.5rem clamp(4rem,8vw,6rem)}
.seams::before{
 content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
 background:var(--rule);transform:translateX(-.5px)}

.seam{
 position:relative;display:grid;grid-template-columns:1fr 1fr;
 gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
 padding:clamp(2rem,4vw,3rem) 0}
/* the gap in the line — this is the whole idea */
.seam::before{
 content:"";position:absolute;left:50%;top:32%;height:36%;width:9px;
 background:var(--paper);transform:translateX(-50%)}
.seam:nth-child(even) .seam__art{order:2}

.seam__art{position:relative;aspect-ratio:4/3;background:var(--paper-deep);overflow:hidden}
.seam__art img{width:100%;height:100%;object-fit:cover;display:block}

.seam__el{
 font-size:.76rem;letter-spacing:.19em;text-transform:uppercase;
 color:var(--ox);margin:0 0 .5rem}
.seam__body h3{
 font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:400;
 margin:0 0 .8rem;letter-spacing:-.012em}
.seam__body p{margin:0;color:var(--ink-soft);max-width:42ch}

/* ── THE TRADE — the conversion point, so it gets the ink ── */
.trade{
 background:var(--ink);color:var(--paper);
 padding:clamp(3.5rem,8vw,6rem) 1.5rem}
.trade h2{
 max-width:var(--max);margin:0 auto .9rem;
 font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:400;
 letter-spacing:-.015em;text-align:center}
.trade__lead{
 max-width:44ch;margin:0 auto 2.6rem;text-align:center;
 color:#C5BCAB;font-size:1.02rem}

.trade__form{
 max-width:620px;margin:0 auto;
 display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.42rem}
.field:nth-of-type(4),.trade__form button,.fineprint{grid-column:1/-1}
.field label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#9A9384}
.field input,.field select{
 background:#22223A;border:1px solid #3B3B55;color:var(--paper);
 padding:.75rem .85rem;font-family:inherit;font-size:1rem;border-radius:0}
.field input::placeholder{color:#6E6A7E}

.trade__form button{
 background:var(--paper);color:var(--ink);border:none;
 padding:.95rem 1.5rem;font-family:inherit;font-size:1.05rem;
 cursor:pointer;transition:background .18s,color .18s}
.trade__form button:hover{background:var(--ox);color:var(--paper)}
.fineprint{font-size:.86rem;color:#8E8879;margin:.3rem 0 0;line-height:1.5}

/* ── CAST ───────────────────────────────────────────────── */
.cast{max-width:var(--max);margin:0 auto;padding:clamp(4rem,8vw,6rem) 1.5rem}
.cast__lead{max-width:48ch;color:var(--ink-soft);margin:-1.6rem 0 2.6rem}
.cast__row{
 list-style:none;padding:0;margin:0;
 display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem)}
.cast__img{position:relative;aspect-ratio:3/4;background:var(--paper-deep);overflow:hidden}
.cast__img img{width:100%;height:100%;object-fit:cover;display:block}
.cast__name{margin:.8rem 0 .1rem;font-size:1.02rem}
.cast__role{margin:0;font-size:.88rem;color:var(--mute)}
.cast__more{margin:2.4rem 0 0}

/* ── BUY ────────────────────────────────────────────────── */
.buy{
 max-width:var(--max);margin:0 auto;
 padding:0 1.5rem clamp(4rem,8vw,6rem);
 border-top:1px solid var(--rule);padding-top:clamp(3rem,6vw,4.5rem)}
.buy h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:400;margin:0 0 1.6rem}
.buy__row{display:flex;gap:.9rem;flex-wrap:wrap}
.buy__note{color:var(--mute);font-size:.92rem;margin:1.4rem 0 0;max-width:52ch}

/* ── FOOTER ─────────────────────────────────────────────── */
footer{
 background:var(--ink);color:#9A9384;
 padding:clamp(2.5rem,5vw,3.5rem) 1.5rem;text-align:center;font-size:.94rem}
footer p{margin:.35rem 0}
footer strong{color:var(--paper);font-weight:400}
footer a{color:#C5BCAB}
.footer__fine{font-size:.84rem;color:#6E6A62;margin-top:1.2rem}

/* ── IMAGE PLACEHOLDERS ─────────────────────────────────────
 Shown only when the real image is missing, so the site looks
 deliberate before the art is dropped in. Delete nothing —
 they disappear on their own once the files exist. */
.ph{display:none}
.is-empty img{display:none}
.is-empty .ph{
 display:flex;align-items:center;justify-content:center;
 position:absolute;inset:0;
 background:repeating-linear-gradient(45deg,var(--paper-deep),
 var(--paper-deep) 11px,#E3DBCA 11px,#E3DBCA 22px)}
.is-empty .ph span{
 font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--mute);background:var(--paper);padding:.4rem .8rem}
.hero__panel.is-empty .ph{
 background:repeating-linear-gradient(45deg,#1D1D33,#1D1D33 11px,#22223A 11px,#22223A 22px)}
.hero__panel.is-empty .ph span{background:var(--ink);color:#8E8879}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:900px){
 .hero{grid-template-columns:1fr;min-height:0;padding-top:2.5rem}
 .hero__panel{aspect-ratio:16/9}
 .seams::before{left:22px}
 .seam{grid-template-columns:1fr;gap:1.4rem;padding-left:52px}
 .seam::before{left:22px;top:26%;height:22%}
 .seam:nth-child(even) .seam__art{order:0}
 .cast__row{grid-template-columns:repeat(2,1fr);gap:1.5rem}
}
@media (max-width:560px){
 body{font-size:18px}
 .trade__form{grid-template-columns:1fr}
 .field:nth-of-type(4){grid-column:auto}
}

/* ══════════════════════════════════════════════════════════
 TOP BAR — wordmark, three links, one button.
 Same ink as the hero so the page opens as one field.
 Not sticky: a sticky bar would cover the #trade anchor.

 ALIGNMENT RULE: the bar must start where the content below it
 starts, or the wordmark floats. Inner pages (cast, strips,
 about) use outer padding + a centred 1180px box; the homepage
 hero is full-width with its own padding. So the bar follows
 whichever page it sits on.
 ══════════════════════════════════════════════════════════ */
.topbar{
 background:var(--ink);color:var(--paper);
 border-bottom:1px solid #26263F;
 padding:0 1.5rem} /* inner pages: matches .casthead etc. */
.topbar__in{
 max-width:var(--max);margin:0 auto;padding:.95rem 0;
 display:flex;align-items:center;gap:.9rem 1.8rem}

/* homepage: match the full-width hero's padding exactly */
.home .topbar{padding:0 clamp(2rem,5vw,4rem)}
.home .topbar__in{max-width:none}

.wordmark{
 display:inline-flex;align-items:center;gap:.72rem;margin-right:auto;
 color:var(--paper);text-decoration:none;
 font-size:1.3rem;letter-spacing:.012em;font-weight:400}
/* the mark: a hairline broken by five gaps — the seam device, as a logo */
.wordmark__mark{height:1.75rem;width:.155rem;flex:none;fill:currentColor}

.topnav{display:flex;align-items:center;gap:1.7rem}
.topnav a{color:#C5BCAB;text-decoration:none;font-size:.97rem;
 padding:.3rem 0;transition:color .15s}
.topnav a:hover{color:var(--paper)}
.topnav a[aria-current="page"]{
 color:var(--paper);text-decoration:underline;
 text-decoration-color:#6E6A7E;text-underline-offset:7px;text-decoration-thickness:1px}

.topbar__cta{
 background:var(--paper);color:var(--ink);text-decoration:none;
 padding:.5rem 1.1rem;font-size:.95rem;border:1px solid var(--paper);
 transition:background .18s,color .18s;white-space:nowrap}
.topbar__cta:hover{background:transparent;color:var(--paper)}

/* the page-wide focus colour is oxblood, which vanishes on ink */
.topbar a:focus-visible{outline-color:var(--paper)}

@media (max-width:640px){
 .topbar__in{flex-wrap:wrap;padding:.8rem 0}
 .topbar__cta{order:2;padding:.45rem .9rem;font-size:.9rem}
 .topnav{order:3;flex-basis:100%;gap:1.4rem}
}

/* Homepage only: on wide screens the hero already carries two buttons in view,
 so the bar's button would duplicate them. On narrow screens the hero buttons
 fall below the fold and this one is the only visible action — so it stays. */
@media (min-width:901px){ .home .topbar__cta{display:none} }

/* footer line that says what the site is */
.footer__lede{
 font-style:italic;color:#C5BCAB;max-width:46ch;
 margin:0 auto 1.5rem;font-size:1rem;line-height:1.5}