/* ---- cover typography: the same faces used on the printed cover ---- */
@font-face{font-family:"Unica One";src:url("/assets/fonts/UnicaOne.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/fonts/Jost.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/assets/fonts/LibreFranklin.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --dusk:#2b2230;
  --dusk-deep:#1a151d;
  --ember:#e07a3f;
  --sand:#d9b48c;
  --crt:#8fd4e8;
  --paper:#f2e7da;
  --muted:#a99a92;
  --rule:rgba(217,180,140,.22);
  --measure:62ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body,p,li,h1,h2,h3{overflow-wrap:break-word}
body{
  margin:0;background:var(--dusk-deep);color:var(--paper);
  font-family:"Libre Franklin",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.12rem);line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(217,180,140,.4)}
a:hover{color:var(--paper);border-bottom-color:var(--paper)}
a:focus-visible,audio:focus-visible,.btn:focus-visible{outline:2px solid var(--crt);outline-offset:3px}
.wrap{max-width:66rem;margin:0 auto;padding:0 1.5rem}

/* ---------- site nav ---------- */
.nav{border-bottom:1px solid var(--rule);background:var(--dusk-deep)}
.nav .wrap{display:flex;gap:1.25rem;column-gap:1.25rem;align-items:baseline;
  padding-top:.9rem;padding-bottom:.9rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;white-space:nowrap}
.nav .wrap::-webkit-scrollbar{display:none}
.nav .brand{flex:0 0 auto}
.nav .brand{font-family:"Unica One",sans-serif;font-weight:400;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;border:0;color:var(--paper)}
.nav a:not(.brand){font-size:.95rem;border:0;color:var(--muted);margin-left:1.2rem;flex:0 0 auto;padding:.25rem 0}
.nav a:not(.brand):hover{color:var(--paper)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(3rem,9vw,6rem) 0 clamp(2.5rem,7vw,4.5rem);
  background:
    radial-gradient(120% 90% at 72% 88%, rgba(224,122,63,.55) 0%, rgba(224,122,63,0) 58%),
    linear-gradient(178deg, var(--dusk) 0%, #3d2b2c 46%, #7a4a35 80%, #a9663c 100%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg, rgba(169,102,60,0) 0%, rgba(120,72,44,.85) 55%, var(--dusk-deep) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(min-width:48rem){.hero .wrap{grid-template-columns:minmax(0,1fr) 16rem}}
h1{
  font-family:"Unica One","Jost",system-ui,sans-serif;font-weight:400;
  font-size:3.4rem;font-size:clamp(3.4rem,13.5vw,7.5rem);line-height:.88;margin:0 0 1.1rem;
  text-transform:uppercase;letter-spacing:.055em;color:#f8f1e6;
  text-shadow:0 3px 0 rgba(26,15,20,.28), 0 14px 34px rgba(18,11,16,.5)
}
h1 .line{display:block}
h1.h1-sub{font-size:2.5rem;font-size:clamp(2.5rem,9vw,4.75rem);letter-spacing:.04em}
.subtitle{font-family:"Jost",sans-serif;font-weight:400;
  font-size:.95rem;font-size:clamp(.95rem,.82rem + .6vw,1.3rem);color:#efe1cf;margin:0 0 1.6rem;
  text-transform:uppercase;letter-spacing:.225em;line-height:1.45}
.standfirst{max-width:var(--measure);margin:0 0 1.75rem;color:#f6ece1;
  font-size:1.05rem;font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.byline{color:var(--muted);margin:0 0 1.5rem;font-size:.98rem}
.cover-shadow{border-radius:2px;box-shadow:0 18px 50px rgba(15,10,18,.6);justify-self:start;
  width:min(17rem,68vw)}
@media(min-width:48rem){.cover-shadow{width:100%;max-width:17rem}}

/* ---------- buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.9rem}
.btn{
  display:inline-block;border:0;border-radius:2px;padding:.85rem 1.5rem;min-height:44px;
  font-family:"Jost",sans-serif;font-weight:500;font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--ember);color:#1a151d;transition:background .15s ease
}
.btn:hover{background:#f08c4f;color:#1a151d}
.btn-quiet{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(242,231,218,.45)}
.btn-quiet:hover{background:rgba(242,231,218,.1);color:var(--paper)}
.btn-note{font-size:.9rem;color:var(--muted);margin:.75rem 0 0}

/* ---------- sections ---------- */
/* .wrap sets padding:0 1.5rem and was zeroing this section spacing; target section.wrap so top/bottom padding wins */
main section,main section.wrap{padding-top:clamp(3rem,8vw,5rem);padding-bottom:clamp(3rem,8vw,5rem);border-top:1px solid var(--rule)}
main section:first-child{border-top:0}
h2{font-family:"Jost",sans-serif;font-weight:500;letter-spacing:.01em;
  font-size:1.8rem;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);line-height:1.05;margin:0 0 1.25rem}
h3{font-family:"Jost",sans-serif;font-weight:700;font-size:1.4rem;margin:0 0 .5rem;color:var(--sand)}
p{max-width:var(--measure)}
.lede{font-size:1.15rem;color:#f6ece1}
.two-col{display:grid;gap:2.5rem}
@media(min-width:48rem){.two-col{grid-template-columns:1fr 1fr;gap:3.5rem}}
.author-grid{display:grid;gap:2rem;align-items:start}
@media(min-width:44rem){.author-grid{grid-template-columns:12rem minmax(0,1fr);gap:2.5rem}}
.author-photo{width:100%;max-width:12rem;height:auto;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.chapters{columns:2;column-gap:2.5rem;max-width:44rem;padding:0;margin:0;list-style:none;color:#efe3d6}
@media(max-width:38rem){.chapters{columns:1}}
.chapters li{padding:.3rem 0;break-inside:avoid}
dl.specs{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;margin:0;max-width:40rem}
dl.specs dt{color:var(--muted)}
dl.specs dd{margin:0}
audio{width:100%;max-width:38rem;display:block;margin:1rem 0 .5rem}
.episode{border-top:1px solid var(--rule);padding:2rem 0 2.25rem;max-width:var(--measure)}
.meta{color:var(--muted);font-size:.95rem;margin:0 0 1rem}
.pullquote{
  font-family:"Jost",sans-serif;font-weight:600;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem);line-height:1.15;color:var(--sand);
  max-width:24ch;margin:0
}
footer{border-top:1px solid var(--rule);padding:2.5rem 0 3.5rem;color:var(--muted);font-size:.92rem}
footer p{max-width:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- review form ---------- */
.review-form{max-width:44rem}
fieldset{border:0;padding:0;margin:0 0 2rem}
legend{font-family:"Jost",sans-serif;font-weight:500;font-size:1.1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sand);padding:0;margin-bottom:.9rem}
.stars{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}
.star{
  background:none;border:0;padding:.35rem;cursor:pointer;line-height:0;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  color:rgba(242,231,218,.28);transition:color .12s ease,transform .12s ease
}
.star svg{width:2.4rem;height:2.4rem;fill:currentColor}
.star:hover,.star:focus-visible{transform:translateY(-2px)}
.star.on{color:var(--ember)}
.rating-readout{margin-left:.9rem;color:var(--muted);font-size:.95rem}

.field{margin:0 0 1.5rem}
.field-row{display:grid;gap:1.5rem}
@media(min-width:40rem){.field-row{grid-template-columns:1fr 1fr}}
label{display:block;margin-bottom:.4rem;font-size:.98rem;color:#efe3d6}
input[type=text],input[type=email],select,textarea{
  width:100%;padding:.7rem .85rem;border-radius:2px;
  border:1px solid rgba(217,180,140,.3);background:rgba(242,231,218,.05);
  color:var(--paper);font-family:inherit;font-size:1rem
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--crt);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;line-height:1.6}
.field-note{color:var(--muted);font-size:.9rem;margin:.5rem 0 0}
.check{display:flex;gap:.6rem;align-items:flex-start;color:#efe3d6}
.check input{margin-top:.25rem;accent-color:var(--ember)}
button.btn{cursor:pointer;font-family:"Jost",sans-serif}


/* ---------- small-screen refinements ---------- */
@media(max-width:26rem){
  .actions{flex-direction:column;align-items:stretch}
  .btn{width:100%;text-align:center}
  .star svg{width:2rem;height:2rem}
  .rating-readout{margin-left:0;flex-basis:100%;margin-top:.4rem}
}
@media(max-width:48rem){
  .wrap{padding-left:1.25rem;padding-right:1.25rem}
  h1{letter-spacing:.035em}
  .stars{gap:.15rem}
}
/* iOS: inputs below 16px trigger an automatic zoom on focus */
input[type=text],input[type=email],select,textarea{font-size:16px}
/* respect the notch when a phone renders edge to edge */
@supports(padding:max(0px)){
  .wrap{padding-left:max(1.25rem,env(safe-area-inset-left));
        padding-right:max(1.25rem,env(safe-area-inset-right))}
}

/* ---------- long-form excerpt ---------- */
.prose{max-width:38rem}
.prose p{margin:0 0 1.1rem;font-size:1.08rem;line-height:1.75;max-width:none}
.prose p:first-of-type::first-letter{
  float:left;font-family:"Unica One",serif;font-size:3.9rem;line-height:.82;
  padding:.1rem .5rem 0 0;color:var(--ember)
}
.scene-break{text-align:center;color:var(--sand);margin:1.8rem 0!important;font-size:.9rem}
.req{color:var(--muted);font-size:.85rem;font-weight:400;letter-spacing:.04em;text-transform:uppercase}

/* skip link for keyboard users */
.skip{position:absolute;left:-9999px;top:0;background:var(--ember);color:#1a151d;
  padding:.7rem 1.1rem;z-index:50;border:0}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- homepage chapter list links to notes ---------- */
.chapters a{color:inherit;border-bottom:1px solid transparent}
.chapters a:hover{color:var(--paper);border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--paper)}

/* ---------- notes & sources ---------- */
.notes-head{padding:clamp(2.5rem,7vw,4.5rem) 1.5rem clamp(1.5rem,4vw,2.5rem)}
.notes-head h1{margin-bottom:1.25rem}
.notes-index{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.1rem 2rem;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));max-width:60rem}
.notes-index a{display:flex;gap:.8rem;align-items:baseline;padding:.45rem 0;border:0;
  border-bottom:1px solid var(--rule);color:#efe3d6;min-height:44px}
.notes-index a:hover{color:var(--paper)}
.notes-index .n{font-family:"Jost",sans-serif;font-weight:500;color:var(--ember);
  min-width:1.6rem;text-align:right;font-variant-numeric:tabular-nums}
.notes-body{padding-bottom:3rem}
.note-chapter{padding:clamp(2.5rem,6vw,3.75rem) 0;border-top:1px solid var(--rule);scroll-margin-top:1rem}
.note-kicker{font-family:"Jost",sans-serif;font-weight:500;font-size:.85rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ember);margin:0 0 .4rem}
.note-chapter h2{margin-bottom:1.75rem}
.note-src{font-family:"Jost",sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .75rem}
.note-label{font-family:"Libre Franklin",sans-serif;font-weight:600;font-size:1rem;color:var(--sand);
  margin:1.4rem 0 .5rem}
.note-label:first-of-type{margin-top:0}
.cites{list-style:none;padding:0;margin:0;max-width:var(--measure)}
.cites li{padding-left:1.5em;text-indent:-1.5em;margin:0 0 .8rem;color:#efe3d6;font-size:.98rem;line-height:1.6}
.cites a{overflow-wrap:anywhere;text-indent:0}
.cites .date{font-family:"Jost",sans-serif;font-size:.85rem;color:var(--ember);margin-right:.5rem;letter-spacing:.04em}
.in-book.prose p{color:#efe3d6}
.since{margin-top:1.75rem;padding:1rem 1.25rem;border-left:3px solid var(--ember);
  background:rgba(224,122,63,.06);max-width:calc(var(--measure) + 2.5rem)}
.since .cites li:last-child{margin-bottom:0}
.note-empty{color:var(--muted);font-style:italic;margin:0}
.to-top{margin:1.75rem 0 0;font-size:.9rem}
.to-top a{color:var(--muted);border-bottom-color:var(--rule)}
@media(max-width:38rem){.cites li{padding-left:.9em;text-indent:-.9em}.since{padding:.9rem 1rem}}

/* ---------- accessibility: contrast on the hero glow (WCAG 1.4.3) ---------- */
.hero .byline,.hero .btn-note{color:#f6e8d8}
.hero p a:not(.btn){color:#fff6ea;border-bottom-color:rgba(255,246,234,.6)}
/* ---------- accessibility page ---------- */
.a11y dl.specs{max-width:46rem}
.a11y h3{margin-top:2rem}
.star:focus-visible{outline:2px solid var(--crt);outline-offset:2px;border-radius:4px}
.star{color:rgba(242,231,218,.55)} /* unselected stars: 3:1 against the page (WCAG 1.4.11) */
.star.on{color:var(--ember)}
/* press hero: contact line sits on the brightest part of the glow; give it a dark backing */
.hero .byline-chip{display:inline-block;background:rgba(26,21,29,.62);padding:.2rem .6rem;border-radius:2px}
.two-col > *,.author-grid > *{min-width:0} /* no sideways scroll at 320px / 400% zoom (WCAG 1.4.10) */

/* no orphaned last words: balance headings, avoid lone words in paragraphs and list items */
h1,h2,h3,.chapters li{text-wrap:balance}
p,li{text-wrap:pretty}


/* Amazon badge: unaltered, 140px wide (min 125px per Amazon), clear space around it */
.amazon-badge{margin:1.25rem 0 0}
.amazon-badge a{display:inline-block;padding:.6rem 1.1rem;margin-left:-1.1rem;border:0}
.amazon-badge img{display:block;width:140px;height:auto}
/* Google Play badge: official SVG from Google's badge kit, unaltered; ~150px wide to sit level with the Amazon logo */
.store-badges{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem}
.store-badges .gp-badge{padding:.6rem 0}
.store-badges .gp-badge img{display:block;width:150px;height:auto}
/* Store badges: Apple Books first (Apple rule); Apple and Google badges the same height (Google: same size or larger) */
.store-badges{column-gap:1.5rem;row-gap:.25rem}
.store-badges a{margin-left:0}
.store-badges a.amz-badge{padding:.6rem 0}
.store-badges .ap-badge{padding:.6rem 0}
.store-badges .ap-badge img{display:block;height:45px;width:auto}
.store-badges .gp-badge img{height:45px;width:auto}
