:root{
  --black:#161513; --iron:#221f1b; --card:#1d1a16; --bone:#EDE9E0; --bonedim:#BDB6A6;
  --ochre:#C8A86B; --gold:#E5B567; --grass:#7E7A5A; --line:#2A241D; --sting:#C2401E;
  --reading:"Atkinson Hyperlegible",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--bone);
  font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.65;
  background-image:radial-gradient(1200px 600px at 50% -10%,rgba(200,168,107,.10),transparent 60%);}
a{color:var(--ochre);text-decoration:none} a:hover{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.15;letter-spacing:-.01em}
.serif{font-family:"Cormorant Garamond",Georgia,serif}
.eyebrow{font-family:"Space Grotesk",sans-serif;text-transform:uppercase;letter-spacing:.28em;
  font-size:12px;color:var(--ochre)}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}

/* nav */
.nav{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:rgba(22,21,19,.78);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:66px}
.brandlink{display:flex;align-items:center;gap:12px;font-family:"Space Grotesk";font-weight:600;
  letter-spacing:.02em;color:var(--bone)}
.brandlink img{height:40px;width:40px;border-radius:50%}
.nav nav{margin-left:auto;display:flex;gap:24px;font-size:14px}
.nav nav a{color:var(--bonedim)} .nav nav a:hover{color:var(--gold)}

/* hero */
.hero{text-align:center;padding:80px 0 56px}
.hero img.crest{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 8px 40px rgba(229,181,103,.18))}
.hero h1{font-size:clamp(34px,6vw,62px);margin:18px 0 6px}
.hero .tag{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--gold)}
.hero p.lead{max-width:680px;margin:18px auto 0;color:var(--bonedim);font-size:18px}
.cta{display:inline-flex;gap:14px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-block;padding:12px 22px;border-radius:8px;font-weight:600;font-size:15px;
  font-family:"Space Grotesk";border:1px solid var(--ochre);color:var(--black);background:var(--ochre)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}
.btn.ghost{background:transparent;color:var(--ochre)} .btn.ghost:hover{color:var(--gold);background:rgba(229,181,103,.08)}

/* mission */
.mission{padding:40px 0}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px}
.pillar h3{margin:.2em 0 .4em;font-size:18px} .pillar p{margin:0;color:var(--bonedim);font-size:15px}
.pillar .n{font-family:"Cormorant Garamond",serif;font-size:30px;color:var(--ochre)}

/* sections */
section.series{padding:46px 0 8px}
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:22px}
.sechead h2{font-size:26px;margin:0}
.sechead .count{color:var(--grass);font-size:14px;font-family:"Space Grotesk"}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px}

/* card */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease,box-shadow .18s}
.card:hover{transform:translateY(-4px);border-color:var(--accent,var(--ochre));
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.cover{aspect-ratio:400/620;background:var(--black);display:block;width:100%;object-fit:cover;border-bottom:1px solid var(--line)}
.card a.coverlink{display:block}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .titlelink{color:inherit;display:block}
.card .titlelink:hover h3{color:var(--accent,var(--gold))}
.card .ser{font-family:"Space Grotesk";font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent,var(--ochre))}
.card h3{margin:.2em 0 0;font-size:19px;font-family:"Cormorant Garamond",serif;font-weight:600}
.card p{margin:0;color:var(--bonedim);font-size:14px;flex:1}
.badge{align-self:flex-start;font-size:11px;font-family:"Space Grotesk";letter-spacing:.08em;
  padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--grass)}
.badge.soon{color:var(--ochre);border-color:rgba(200,168,107,.4)}
.dls{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.dl{font-family:"Space Grotesk";font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:7px;
  border:1px solid var(--ochre);color:var(--ochre)} .dl:hover{background:rgba(229,181,103,.1);color:var(--gold)}
.dl.solid{background:var(--ochre);color:var(--black)} .dl.solid:hover{background:var(--gold);color:var(--black)}

/* book page */
.bookhero{display:grid;grid-template-columns:300px 1fr;gap:42px;padding:48px 0}
.bookhero .cover{aspect-ratio:400/620;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.bookhero h1{font-family:"Cormorant Garamond",serif;font-size:46px;margin:.1em 0 .1em}
.bookhero .sub{color:var(--ochre);font-family:"Space Grotesk";letter-spacing:.12em;text-transform:uppercase;font-size:13px}
.bookhero .syn{font-size:18px;color:var(--bone);margin-top:18px;max-width:60ch}
.back{font-family:"Space Grotesk";font-size:13px;color:var(--bonedim)}

/* reader — house long-form face: Atkinson Hyperlegible (EPUB/PDF parity) */
.reader{max-width:720px;margin:0 auto;padding:50px 24px 90px;
  font-family:var(--reading);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.reader h1,.reader h2,.reader h3,.reader h4,.reader p,.reader li,.reader blockquote,.reader td,.reader th{
  font-family:var(--reading)}
.reader h1{font-size:42px;text-align:center;font-weight:700;letter-spacing:-.01em}
.reader h2{font-size:30px;margin-top:2.2em;text-align:center;color:var(--gold);font-weight:700}
.reader p{margin:0 0 1.1em} .reader .rule{border:0;text-align:center;margin:2em 0}
.reader .rule:after{content:"\2766";color:var(--ochre);font-size:20px}
.letter-crest{display:block;margin:0 auto 6px;width:120px;height:120px;border-radius:50%}
.reader.letter h1{margin-bottom:.1em}
.reader.letter h2{text-align:left;font-size:25px;color:var(--gold);margin-top:1.9em;font-weight:700}
.reader.letter em{color:var(--bone)}
.readbar{position:sticky;top:0;background:rgba(22,21,19,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:12px 0}

/* house of greyling */
.house{max-width:900px;margin:0 auto;padding:54px 24px 80px;text-align:center}
.house img.crest-full{width:100%;max-width:640px;height:auto;border-radius:10px;
  box-shadow:0 22px 64px rgba(0,0,0,.55);border:1px solid var(--line)}
.house h1{font-family:"Cormorant Garamond",serif;font-size:clamp(34px,6vw,58px);margin:28px 0 .06em}
.house .motto{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--gold);font-size:clamp(19px,3vw,28px)}
.house .gloss{color:var(--bonedim);font-family:"Space Grotesk";letter-spacing:.08em;font-size:13px;margin-top:6px;text-transform:uppercase}
.blazon{text-align:left;max-width:680px;margin:30px auto 0;
  font-family:var(--reading);font-size:18px;line-height:1.65}
.blazon p.intro{color:var(--bone);font-size:19px;margin:0 0 1.2em}
.blazon h2{font-family:var(--reading);color:var(--gold);font-size:27px;text-align:center;margin:2em 0 .8em;font-weight:700}
.blazon .entry{margin:0 0 1.25em;padding-left:16px;border-left:2px solid var(--line)}
.blazon .charge{font-family:"Space Grotesk";font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);display:block;margin-bottom:3px}
.blazon .entry p{margin:0;color:var(--bone)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:60px;padding:40px 0;color:var(--grass);font-size:14px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer .badgerline{font-family:"Cormorant Garamond",serif;font-style:italic;color:var(--bonedim)}
@media(max-width:720px){.pillars{grid-template-columns:1fr}.bookhero{grid-template-columns:1fr;text-align:center}
  .bookhero .cover{max-width:260px;margin:0 auto}.nav nav{display:none}}