/* Layout: full-bleed cinematic hero, then a scrolling shelf of books, author, schools, footer. */
:root{
  --ink:#050a18; --deep:#0a1430; --panel:#0d1938; --line:#1d2d56;
  --gold:#e3b04b; --gold-lo:#8d6a2a;
  --cream:#f4ecdc; --mute:#a8b4cd;
  --f-dsp:'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-txt:'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);font:400 16px/1.65 var(--f-txt);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-dsp);font-weight:700;text-wrap:balance;margin:0;letter-spacing:.01em}
a{color:inherit}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:20px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(5,10,24,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navi{display:flex;align-items:center;gap:24px;min-height:68px;flex-wrap:wrap;padding-block:10px}
.lg{font-family:var(--f-dsp);font-size:19px;line-height:1.05;color:var(--gold);letter-spacing:.06em;text-decoration:none}
.lg small{display:block;font-size:11px;letter-spacing:.22em;color:var(--gold-lo)}
.nl{margin-left:auto;display:flex;gap:22px;flex-wrap:wrap}
.nl a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding-block:6px}
.nl a:hover,.nl a:focus-visible{color:var(--gold)}

/* buttons */
.btn{display:inline-block;background:linear-gradient(180deg,var(--gold),var(--gold-lo));color:#1a1204;
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:13px 24px;border-radius:3px;border:1px solid #f0cb7a}
.btn:hover,.btn:focus-visible{filter:brightness(1.1)}
.btn.sm{padding:10px 16px;font-size:11.5px;width:100%;text-align:center}
.btn.out{background:none;color:var(--cream);border:1px solid #3a4b7d}
.btn.ghost{background:none;color:var(--mute);border:1px solid var(--line);cursor:default}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--deep)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:76% 50%}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,10,24,.96) 0%,rgba(5,10,24,.88) 30%,rgba(5,10,24,.25) 62%,rgba(5,10,24,.5) 100%)}
.heroc{position:relative;z-index:2;padding-block:78px 86px;max-width:560px}
.hero h1{font-size:clamp(34px,6.2vw,58px);line-height:1.08;color:var(--gold)}
.hero p{font-size:clamp(16px,2.1vw,18.5px);color:#e2dcd0;margin:22px 0 30px;max-width:44ch}
.cta{display:flex;gap:14px;flex-wrap:wrap}

/* section headers */
.sec{padding-block:70px}
.shd{text-align:center;margin-bottom:44px}
.shd h2{font-size:clamp(17px,2.6vw,23px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.rule{display:block;width:74px;height:1px;background:var(--gold-lo);margin:16px auto 0}

/* books */
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:22px}
.bk{display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);
  border-radius:5px;overflow:hidden}
.cv{width:100%;aspect-ratio:1;object-fit:cover}
.cv.ph{display:grid;place-items:center;background:linear-gradient(150deg,#12204a,#0a1430);
  font-family:var(--f-dsp);color:#2f4477;font-size:15px;letter-spacing:.14em;text-align:center;line-height:1.7}
.bkb{padding:16px 15px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.st{margin:0;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700}
.st.live{color:#7fc47f}.st.soon{color:var(--gold-lo)}
.bk h3{font-size:12px;font-weight:500;line-height:1.5;color:var(--mute);letter-spacing:.04em}
.bk h3 b{display:block;font-size:15.5px;font-weight:700;color:var(--cream);letter-spacing:.02em;margin-top:2px}
.bl{margin:0;font-size:13px;line-height:1.6;color:#95a2bd;flex:1}
.bkb .btn{margin-top:4px}
.more{text-align:center;margin:34px 0 0;font-size:13.5px;letter-spacing:.06em;color:#8b98b5}

/* author */
.auth{background:var(--deep);border-block:1px solid var(--line)}
.authg{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:start;padding-block:62px}
.pfp{width:150px;height:150px;border-radius:50%;border:2px solid var(--gold-lo);
  object-fit:cover;object-position:50% 45%;background:#0a1430;box-shadow:0 6px 26px rgba(0,0,0,.45)}
.eb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lo);margin:0 0 6px}
.auth h2{font-size:clamp(21px,3.4vw,28px);color:var(--gold);margin-bottom:14px}
.auth p{color:#c9d2e4;max-width:60ch}
.q{margin:24px 0 0;padding-left:22px;border-left:2px solid var(--gold-lo);
  font-family:var(--f-dsp);font-size:clamp(16px,2.3vw,19px);line-height:1.55;color:var(--cream)}
.sig{font-family:var(--f-dsp);font-size:19px;color:var(--gold);margin-top:20px}

/* schools */
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pnl{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:30px 26px;min-width:0}
.pnl h2{font-size:15px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.tk{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:11px}
.tk li{display:flex;gap:11px;font-size:15px;color:#d3dbea}
.tk li::before{content:"✓";color:var(--gold);font-weight:700;flex:none}
.pnl p{font-size:14.5px;color:#9dabc6;margin:0}
form{display:grid;gap:11px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
input,textarea{width:100%;min-width:0;font:400 14.5px var(--f-txt);color:var(--cream);
  background:#081228;border:1px solid var(--line);border-radius:3px;padding:12px 13px}
input::placeholder,textarea::placeholder{color:#63739a}
input:focus,textarea:focus{outline:2px solid var(--gold-lo);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:88px}
form .btn{margin-top:4px;justify-self:stretch;text-align:center}
.note{font-size:13px;color:#7fc47f;margin:0;min-height:1.4em}

/* footer */
.ft{border-top:1px solid var(--line);background:var(--ink)}
.ftg{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:34px}
.ft p{margin:0;font-size:13px;color:#7c8aa8}
.tag{font-family:var(--f-dsp);color:var(--gold);font-size:15px}

@media (max-width:820px){
  .authg{grid-template-columns:1fr;justify-items:start}
  .two{grid-template-columns:1fr}
  .nl{width:100%;margin-left:0;gap:16px}
}
@media (max-width:420px){ .row2{grid-template-columns:1fr} .heroc{padding-block:56px 62px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------------------------------------------------------------
   STRUCTURAL FIX — <picture> wrappers
   Images are now <picture><img></picture> for WebP support. <picture> is
   inline by default, so the img lost its width constraint. These three
   rules restore the exact sizing the original markup had. No design change.
   --------------------------------------------------------------- */
.bk picture,.bk>a,.hero picture,.bherog picture,.authg picture{display:block}
.bk picture,.bk>a{width:100%}
.hero picture{position:absolute;inset:0;width:100%;height:100%}
.bherog picture{width:100%}
/* width/height attrs are on the <img> for layout stability (stops content jumping
   as images load). They'd otherwise override aspect-ratio, so height goes auto. */
.bk .cv,.bherog img{height:auto}

/* ---------------------------------------------------------------
   BOOK DETAIL PAGES
   New components only. Nothing above this line has been changed,
   so every existing section renders exactly as before.
   --------------------------------------------------------------- */
.bhero{background:var(--deep);border-bottom:1px solid var(--line)}
.bherog{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:center;padding-block:62px}
.bherog img{width:100%;border-radius:5px;border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.5)}
.bhero h1{font-size:clamp(28px,4.6vw,44px);color:var(--gold);line-height:1.1}
.bhero .sub{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lo);margin:0 0 10px}
.bhero .lede{font-size:clamp(16px,2vw,18px);color:#e2dcd0;margin:18px 0 0;max-width:52ch}
.meta{display:flex;gap:22px;flex-wrap:wrap;margin:22px 0 26px;font-size:13px;color:var(--mute)}
.meta b{color:var(--cream);font-weight:700}
.bcta{display:flex;gap:12px;flex-wrap:wrap}
.prose{max-width:66ch;margin-inline:auto}
.prose p{color:#c9d2e4;font-size:16.5px}
.vid{position:relative;aspect-ratio:16/9;max-width:860px;margin-inline:auto;border-radius:5px;
  overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.also{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,330px));gap:22px;justify-content:center}
.crumb{font-size:12.5px;color:var(--mute);padding-block:18px}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{color:var(--gold)}
.crumb span{color:#5a688a;margin-inline:7px}
@media (max-width:820px){ .bherog{grid-template-columns:1fr;gap:28px;padding-block:44px} }

/* ---------------------------------------------------------------
   HERO LEGIBILITY ON NARROW SCREENS
   On a phone the hero is portrait, so the original left-to-right
   scrim runs out before the text does and the paragraph lands on
   bright artwork. Same colour, same design — the wash is just
   re-angled so it covers the text block. Desktop is untouched.
   --------------------------------------------------------------- */
@media (max-width:820px){
  .hero::after{background:
    linear-gradient(180deg,rgba(5,10,24,.9) 0%,rgba(5,10,24,.78) 50%,rgba(5,10,24,.22) 100%),
    linear-gradient(90deg,rgba(5,10,24,.42) 0%,rgba(5,10,24,0) 70%)}
}

/* ---------------------------------------------------------------
   LOOK INSIDE — interior artwork gallery on book pages
   New component. Uses the existing panel/border tokens so it sits
   inside the established design rather than beside it.
   --------------------------------------------------------------- */
.lookp{max-width:60ch;margin:0 auto 34px;text-align:center;color:#b9c4da;font-size:15.5px}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:940px;margin:0 auto}
.gi{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--deep);box-shadow:0 12px 34px rgba(0,0,0,.42);line-height:0}
.gi picture{display:block}
.gi img{width:100%;height:auto;display:block;transition:transform .5s ease}
.gi:hover img{transform:scale(1.035)}
@media (max-width:620px){ .gal{grid-template-columns:1fr;gap:14px} }
@media (prefers-reduced-motion:reduce){ .gi img,.gi:hover img{transition:none;transform:none} }

/* ---------------------------------------------------------------
   BOOK HERO BALANCE + 404
   The book hero grid had no max width, so on a wide screen the text
   column stretched and left a block of dead space on the right.
   Constraining and centring it keeps the same look, composed.
   --------------------------------------------------------------- */
.bherog{max-width:900px;margin-inline:auto;grid-template-columns:340px minmax(0,1fr)}
@media (max-width:820px){ .bherog{max-width:none;margin-inline:0;grid-template-columns:1fr} }

.lost{text-align:center}
.lost h1{font-size:clamp(28px,4.4vw,42px);color:var(--gold);line-height:1.15;margin:6px 0 0}
.lostp{color:#b9c4da;font-size:16.5px;max-width:52ch;margin:20px auto 30px;line-height:1.7}
.lost .cta{justify-content:center}