/* ============================================================================
   The Predictive Present — shared site styles for the inner pages.
   Design system lifted from index.html (house "Classic" brand):
   Newsreader serif + Archivo UI + EB Garamond wordmark, graphite + steel-blue,
   neutral hairlines, dark/light, reveal-on-scroll. Pair with site.js.
   ============================================================================ */

:root{
  --bg:#121212; --bg-2:#1B1B1B; --text:#EAEAEA; --text-2:#A4AAB1; --text-3:#8C939B;
  --line:#282828; --line-2:#353535; --accent:#82AAD0; --accent-ink:#121212;
  --hair:.5px;
  --hair-color:color-mix(in srgb,#9A9A9A 40%,transparent);
  --shadow:0 44px 90px rgba(0,0,0,.62);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wordmark:"EB Garamond",Georgia,"Times New Roman",serif;
  --pad:clamp(20px,5vw,80px);
  --maxw:1320px;
}
body.light{
  --bg:#F4F4F4; --bg-2:#EAEAEA; --text:#15171A; --text-2:#54585E; --text-3:#646A71;
  --line:#E2E2E2; --line-2:#D4D4D4; --accent:#2C66B5; --accent-ink:#F4F4F4;
  --hair-color:color-mix(in srgb,#777777 70%,transparent);
  --shadow:0 40px 70px rgba(20,22,26,.18);
}
@media (min-width:1440px){ :root{ --maxw:1560px; } }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);font-family:var(--serif);
  font-optical-sizing:auto;font-size:18px;line-height:1.6;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;transition:background .45s ease,color .45s ease;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.label{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent)}
.muted-label{color:var(--text-3)}
.i{font-style:italic}
.accent{color:var(--accent)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:100;background:var(--bg-2);
  font-family:var(--ui);font-size:13px;padding:10px 14px;border:1px solid var(--line)}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:var(--hair) solid var(--hair-color);
  transition:background .45s ease,border-color .45s ease}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:74px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mark{font-family:var(--wordmark);line-height:1;white-space:nowrap}
.mark__name{font-size:21px;font-weight:500;letter-spacing:.04em;color:var(--text)}
.nav__links{display:flex;gap:28px;align-items:center}
.nav__links a{font-family:var(--ui);font-size:12.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);transition:color .2s;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:var(--accent);transition:right .25s ease}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--text)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{right:0}
.nav__right{display:flex;align-items:center;gap:14px}
.nav__order{display:none}
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;background:none;border:1px solid var(--line-2);
  border-radius:2px;cursor:pointer}
.nav__burger span{display:block;height:1.5px;width:100%;background:var(--text);
  transition:transform .25s ease,opacity .2s ease}
.nav.open .nav__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){opacity:0}
.nav.open .nav__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.btn{font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:11px 20px;border-radius:2px;cursor:pointer;display:inline-block;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn--ghost{background:none;color:var(--text);border:1px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--text);filter:none}
.invert{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);background:none;border:1px solid var(--line-2);
  padding:9px 13px;border-radius:2px;cursor:pointer;transition:color .2s,border-color .2s}
.invert:hover{color:var(--text);border-color:var(--text)}

/* ---------------- page hero ---------------- */
.phero{position:relative;text-align:center;padding-top:clamp(56px,11vh,130px);
  padding-bottom:clamp(40px,7vh,80px);overflow:hidden}
.phero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 18%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.phero__in{position:relative;z-index:1}
.phero__eyebrow{margin-bottom:22px}
.phero__title{font-size:clamp(40px,6.4vw,86px);line-height:.98;letter-spacing:-.025em}
.phero__title .i{font-style:italic}
.phero__rule{width:60px;height:1px;background:var(--accent);margin:28px auto 0}
.phero__sub{font-style:italic;color:var(--text-2);font-size:clamp(17px,1.9vw,23px);
  line-height:1.4;margin-top:26px;max-width:30ch;margin-inline:auto}

/* ---------------- generic section ---------------- */
.sec{padding-block:clamp(56px,9vh,120px);border-top:var(--hair) solid var(--hair-color)}
.sec--tint{background:var(--bg-2);transition:background .45s ease}
.sec__head{text-align:center;max-width:60ch;margin:0 auto clamp(34px,5vh,60px)}
.sec__head .label{justify-content:center;display:flex}
.sec__title{font-size:clamp(28px,4.2vw,52px);line-height:1.05;letter-spacing:-.02em;margin-top:16px}
.sec__sub{font-style:italic;color:var(--text-2);font-size:clamp(17px,1.7vw,21px);margin-top:14px}

/* measured prose column */
.prose{max-width:64ch;margin:0 auto}
.prose p{color:var(--text-2);font-size:clamp(16px,1.45vw,18.5px);line-height:1.72}
.prose p+p{margin-top:1.2em}
.prose .lede{color:var(--text);font-size:clamp(19px,1.7vw,22px);line-height:1.6}
.prose .lede .i{font-style:italic;color:var(--accent)}
.prose .dropcap::first-letter{font-family:var(--serif);font-weight:500;font-size:3.3em;line-height:.72;
  float:left;padding:6px 14px 0 0;color:var(--accent)}

/* numbered / lead-in points (e.g. "What this book will show") */
.points{max-width:66ch;margin:0 auto;display:grid;gap:clamp(26px,3.4vh,40px)}
.point{border-top:var(--hair) solid var(--line);padding-top:22px}
.point h3{font-size:clamp(20px,2.1vw,26px);line-height:1.18;letter-spacing:-.01em;margin-bottom:12px}
.point p{color:var(--text-2);font-size:clamp(15.5px,1.4vw,18px);line-height:1.7}

/* card grid (five threads, topics) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{border:var(--hair) solid var(--line);border-radius:3px;padding:clamp(22px,2.4vw,34px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 55%,transparent),transparent);
  transition:border-color .3s,transform .3s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 50%,transparent);transform:translateY(-3px)}
.card__n{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:16px}
.card__name{font-size:clamp(22px,2.3vw,29px);line-height:1.06;letter-spacing:-.01em;margin-bottom:6px}
.card__sub{font-style:italic;color:var(--text-3);margin-bottom:16px}
.card__body{color:var(--text-2);font-size:15.5px;line-height:1.66}
.card__body p+p{margin-top:.9em}

/* simple bulleted list (topics) */
.tlist{max-width:62ch;margin:0 auto;list-style:none}
.tlist li{position:relative;padding:14px 0 14px 26px;color:var(--text-2);line-height:1.6;
  border-bottom:var(--hair) solid var(--line)}
.tlist li::before{content:"";position:absolute;left:0;top:24px;width:8px;height:8px;border-radius:50%;
  background:var(--accent)}

/* pull quote */
.pull{max-width:48ch;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.pull p{font-style:italic;font-size:clamp(21px,2.8vw,32px);line-height:1.24;letter-spacing:-.012em;color:var(--text)}
.pull__rule{width:60px;height:1px;background:var(--accent);margin:24px auto 0}

/* accordion (FAQ / pre-order FAQ) */
.acc{max-width:66ch;margin:0 auto}
.acc__group{margin-bottom:clamp(30px,4vh,48px)}
.acc__glabel{text-align:center;margin-bottom:6px}
.acc__gsub{text-align:left;font-style:italic;color:var(--text-3);margin-bottom:18px}
.acc__item{border-top:var(--hair) solid var(--line)}
.acc__item:last-child{border-bottom:var(--hair) solid var(--line)}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--text);
  font-family:var(--serif);font-size:clamp(17px,1.6vw,20px);line-height:1.4;padding:22px 2px}
.acc__q:hover{color:var(--accent)}
.acc__icon{flex:0 0 auto;width:16px;height:16px;position:relative;transition:transform .3s}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;background:var(--accent);
  top:50%;left:50%;transform:translate(-50%,-50%)}
.acc__icon::before{width:16px;height:1.5px}
.acc__icon::after{width:1.5px;height:16px;transition:transform .3s}
.acc__q[aria-expanded="true"] .acc__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__a{overflow:hidden;max-height:0;transition:max-height .35s ease}
.acc__a p{color:var(--text-2);font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.7;padding:0 2px 24px}

/* contact / press address blocks */
.addr{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);max-width:74ch;margin:0 auto}
.addr--1{grid-template-columns:1fr;max-width:60ch}
.addr__item{border:var(--hair) solid var(--line);border-radius:3px;padding:clamp(20px,2.2vw,30px)}
.addr__k{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:10px}
.addr__name{font-size:clamp(19px,1.9vw,24px);margin-bottom:8px}
.addr__desc{color:var(--text-2);font-size:15.5px;line-height:1.6;margin-bottom:14px}
.addr__mail{font-family:var(--ui);font-size:14px;letter-spacing:.02em;color:var(--accent);
  border-bottom:var(--hair) solid color-mix(in srgb,var(--accent) 55%,transparent);padding-bottom:1px}
.addr__mail:hover{filter:brightness(1.1)}

/* author block */
.author{display:grid;grid-template-columns:280px 1fr;gap:clamp(28px,4vw,60px);align-items:start;
  max-width:var(--maxw);margin:0 auto}
.author__portrait img{width:min(100%,280px);aspect-ratio:1;object-fit:cover;object-position:50% 30%;
  border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);display:block;margin-inline:auto}
.author__role{font-style:italic;color:var(--text-2);margin:6px 0 22px}

/* pre-order book cover — transparent, no frame, centered */
.po-book{text-align:center}
.po-book__cover img{display:block;margin-inline:auto;background:transparent;border:0}

/* retailer rows (pre-order) */
.retail{max-width:70ch;margin:0 auto;display:grid;gap:0}
.retail__row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:20px 2px;border-top:var(--hair) solid var(--line)}
.retail__row:last-child{border-bottom:var(--hair) solid var(--line)}
.retail__name{font-size:clamp(18px,1.8vw,22px)}
.retail__sub{font-family:var(--ui);font-size:12px;letter-spacing:.04em;color:var(--text-3);text-transform:uppercase}
.retail__go{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* format pills */
.formats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.format{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 20px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2)}

/* CTA band */
.cta{text-align:center;border-top:var(--hair) solid var(--hair-color);padding-block:clamp(56px,9vh,110px)}
.cta__title{font-size:clamp(30px,4.4vw,56px);line-height:1.04;letter-spacing:-.02em;margin:14px 0 16px}
.cta__sub{color:var(--text-2);max-width:46ch;margin:0 auto 30px;line-height:1.6}
.cta__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* mailing-list note */
.note{max-width:56ch;margin:0 auto;text-align:center;color:var(--text-3);font-family:var(--ui);
  font-size:13px;letter-spacing:.02em;border:var(--hair) dashed var(--line-2);border-radius:3px;padding:22px}

/* ---------------- footer ---------------- */
.foot{border-top:var(--hair) solid var(--hair-color);padding-block:clamp(40px,6vh,64px)}
.foot__in{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
.foot__mark{font-family:var(--wordmark);font-size:24px;color:var(--text)}
.foot__house{font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-top:8px}
.foot__nav{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--ui);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
.foot__nav a:hover{color:var(--text)}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .cards,.cards--3{grid-template-columns:1fr}
  .addr{grid-template-columns:1fr}
  .author{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
  .nav__burger{display:flex}
  .nav__right .btn{display:none}
  .nav__links{position:absolute;top:74px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;gap:0;padding:6px var(--pad) 16px;
    background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:saturate(140%) blur(12px);
    border-bottom:var(--hair) solid var(--hair-color)}
  .nav.open .nav__links{display:flex}
  .nav__links a{font-size:15px;letter-spacing:.08em;padding:14px 2px;width:100%;
    border-bottom:var(--hair) solid var(--line);color:var(--text)}
  .nav__links a::after{display:none}
  .nav__order{display:block;color:var(--accent)}
}
@media (max-width:560px){
  .nav__in{gap:12px}
  .mark__name{font-size:16px}
  .foot__in{flex-direction:column;align-items:flex-start;gap:24px}
  .retail__row{flex-wrap:wrap;gap:6px}
}

/* Cookie consent banner (JS-injected by /assets/js/consent.js) */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(110%);transition:transform .5s cubic-bezier(.22,.9,.24,1);background:rgba(18,18,18,.97);border-top:1px solid rgba(255,255,255,.14);color:#e8e6e3;}
.cookie-banner.is-in{transform:translateY(0);}
.cookie-banner__in{max-width:920px;margin:0 auto;padding:18px 24px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;}
.cookie-banner__text{margin:0;font-size:14px;line-height:1.5;max-width:600px;}
.cookie-banner__text a{color:inherit;text-decoration:underline;}
.cookie-banner__actions{display:flex;gap:10px;}
.cookie-banner button{font:inherit;font-size:13px;letter-spacing:.04em;padding:9px 20px;cursor:pointer;border-radius:2px;}
.cookie-banner #cookie-accept{background:#e8e6e3;color:#121212;border:1px solid #e8e6e3;}
.cookie-banner #cookie-decline{background:transparent;color:#e8e6e3;border:1px solid rgba(255,255,255,.35);}
body.light .cookie-banner{background:rgba(250,249,247,.97);border-top-color:rgba(0,0,0,.14);color:#1c1c1c;}
body.light .cookie-banner #cookie-accept{background:#121212;color:#faf9f7;border-color:#121212;}
body.light .cookie-banner #cookie-decline{color:#1c1c1c;border-color:rgba(0,0,0,.3);}