/* ==========================================================================
   SAM WEBSTER — AUTHOR SITE
   Design tokens: obsidian ink, parchment, brass-gold, oxblood accent.
   Display: Fraunces (ritual/manuscript serif) · Body: Spectral (reading serif)
   Chrome/UI: Space Grotesk (modern/open-source counterpoint)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,340;0,9..144,400;0,9..144,480;0,9..144,600;1,9..144,340;1,9..144,400&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  /* --- color: monochromatic tension w/ a single owned accent --- */
  --ink:        #0c0a08;
  --ink-2:      #15110d;
  --ink-3:      #1d1712;
  --parchment:  #f3ede0;
  --parchment-70: rgba(243,237,224,.72);
  --parchment-50: rgba(243,237,224,.52);
  --parchment-30: rgba(243,237,224,.30);
  --gold:       #c69a4e;
  --gold-bright:#e8c67c;
  --oxblood:    #8a3226;
  --line:       rgba(243,237,224,.12);
  --line-2:     rgba(243,237,224,.22);

  /* --- type --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body:    'Spectral', ui-serif, Georgia, serif;
  --font-ui:      'Space Grotesk', ui-sans-serif, sans-serif;

  --fs-hero:  clamp(3.4rem, 10.4vw, 9.5rem);
  --fs-h1:    clamp(2.6rem, 6.2vw, 5rem);
  --fs-h2:    clamp(2rem, 4.4vw, 3.4rem);
  --fs-h3:    clamp(1.4rem, 2.4vw, 1.9rem);
  --fs-lead:  clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-body:  1.125rem;
  --fs-small: .82rem;
  --fs-eyebrow: .78rem;

  /* --- motion --- */
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-in-out-expo: cubic-bezier(.87,0,.13,1);
  --ease-out-back:  cubic-bezier(.34,1.56,.64,1);

  /* --- layout --- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1400px;
  --radius: 2px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
svg{ display:block; }

::selection{ background:var(--gold); color:var(--ink); }

/* focus states — visible AND on-brand */
:focus-visible{
  outline: 1.5px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- utility type classes ---------- */
.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--fs-eyebrow);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:1.6em; height:1px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow.no-rule::before{ display:none; }

.h-display{
  font-family:var(--font-display);
  font-weight:480;
  font-optical-sizing:auto;
  letter-spacing:-.01em;
  line-height:.98;
  text-wrap:balance;
}
.h-display em{ font-style:italic; font-weight:340; color:var(--gold-bright); }

.lede{
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-lead);
  color:var(--parchment-70);
  line-height:1.55;
  max-width:38em;
}

.small-caps{
  font-family:var(--font-ui);
  font-size:var(--fs-small);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--parchment-50);
}

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.hairline{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- buttons & links ---------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  font-family:var(--font-ui);
  font-size:.86rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:1rem 1.75rem;
  border:1px solid var(--line-2);
  overflow:hidden;
  isolation:isolate;
  transition:color .5s var(--ease-out-expo), border-color .5s var(--ease-out-expo);
  width: fit-content;
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease-out-expo);
  z-index:-1;
}
.btn:hover{ color:var(--ink); border-color:var(--gold); }
.btn:hover::before{ transform:scaleX(1); }
.btn-solid{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn-solid::before{ background:var(--parchment); }
.btn-solid:hover{ color:var(--ink); }

.link-draw{
  background-image:linear-gradient(currentColor,currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1px;
  transition:background-size .5s var(--ease-out-expo);
  padding-bottom:.15em;
  width: fit-content;
}
.link-draw:hover{ background-size:100% 1px; }

/* ---------- reveal utilities (paired with GSAP / IO) ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(48px);
}
.reveal-ready [data-reveal]{
  transition:opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ---------- custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gold-bright);
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width .3s var(--ease-out-expo), height .3s var(--ease-out-expo), background .3s;
}
.cursor-ring{
  position:fixed; top:0; left:0;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--parchment-50);
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:width .4s var(--ease-out-expo), height .4s var(--ease-out-expo), border-color .4s, opacity .4s;
}
.cursor.is-active{ width:14px; height:14px; }
.cursor-ring.is-active{ width:64px; height:64px; border-color:var(--gold); }
@media (hover:none), (pointer:coarse){
  .cursor,.cursor-ring{ display:none; }
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:1.5rem;
}
.preloader__mark{
  font-family:var(--font-display);
  font-size:1.4rem;
  letter-spacing:.3em;
  color:var(--parchment-70);
  text-transform:uppercase;
}
.preloader__bar{
  width:220px; height:1px; background:var(--line-2); position:relative; overflow:hidden;
}
.preloader__fill{
  position:absolute; inset:0; background:var(--gold);
  transform-origin:left;
}

/* ---------- nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem var(--gutter);
  font-family:var(--font-ui);
  transition:padding .5s var(--ease-out-expo), background .5s var(--ease-out-expo), border-color .5s var(--ease-out-expo);
  border-bottom:1px solid transparent;
}
.site-nav.is-scrolled{
  padding:1rem var(--gutter);
  background:rgba(12,10,8,.86);
  backdrop-filter:blur(10px);
  border-color:var(--line);
}
.site-nav__mark{
  display:flex; align-items:center; gap:.7rem;
  font-size:1rem; letter-spacing:.04em;
}
.site-nav__mark svg{ width:30px; height:30px; }
.site-nav__logo{ width:30px; height:30px; object-fit:contain; flex-shrink:0; }
.site-nav__mark .name{ display:flex; flex-direction:column; line-height:1.1; }
.site-nav__mark .name b{ font-family:var(--font-display); font-weight:500; font-size:1.05rem; letter-spacing:.01em; }
.site-nav__mark .name span{ font-size:.62rem; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; }

.site-nav__links{ display:flex; align-items:center; gap:2.4rem; }
.site-nav__links a{
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  position:relative; padding-bottom:3px;
}
.site-nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
}
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.site-nav__links a.is-active{ color:var(--gold-bright); }

.site-nav__cta{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.7rem 1.3rem; border:1px solid var(--line-2);
  transition:background .4s var(--ease-out-expo), color .4s var(--ease-out-expo), border-color .4s;
}
.site-nav__cta:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }

.nav-burger{ display:none; width:26px; height:18px; position:relative; }
.nav-burger span{ position:absolute; left:0; right:0; height:1px; background:var(--parchment); transition:transform .4s var(--ease-out-expo), opacity .4s; }
.nav-burger span:nth-child(1){ top:0; }
.nav-burger span:nth-child(2){ top:50%; transform:translateY(-50%); }
.nav-burger span:nth-child(3){ bottom:0; }

/* ---------- mobile drawer ---------- */
.mobile-drawer{
  position:fixed; inset:0; z-index:490;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gutter);
  transform:translateY(-100%);
  transition:transform .6s var(--ease-in-out-expo);
}
.mobile-drawer.is-open{ transform:translateY(0); }
.mobile-drawer a{
  font-family:var(--font-display); font-size:2.4rem; font-weight:400;
  padding:.5rem 0; border-bottom:1px solid var(--line);
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:5rem var(--gutter) 2.5rem;
  margin-top:8rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:4rem;
}
.footer-col h4{
  font-family:var(--font-ui); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.2rem;
}
.footer-col a, .footer-col p{ color:var(--parchment-70); font-size:.94rem; line-height:2; }
.footer-col a:hover{ color:var(--parchment); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:2rem; border-top:1px solid var(--line);
  font-family:var(--font-ui); font-size:.76rem; color:var(--parchment-50); letter-spacing:.03em;
}

/* ---------- newsletter ---------- */
.newsletter{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:5rem var(--gutter);
}
.newsletter__inner{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:end;
}
.newsletter-form{ display:flex; gap:0; border-bottom:1px solid var(--line-2); padding-bottom:.9rem; }
.newsletter-form input{
  flex:1; background:none; border:none; color:var(--parchment);
  font-family:var(--font-body); font-size:1.15rem; padding:.4rem 0;
}
.newsletter-form input::placeholder{ color:var(--parchment-30); }
.newsletter-form button{
  font-family:var(--font-ui); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold); white-space:nowrap; display:flex; align-items:center; gap:.5rem;
}
.newsletter-form button svg{ width:16px; height:16px; transition:transform .4s var(--ease-out-expo); }
.newsletter-form button:hover svg{ transform:translateX(6px); }
.newsletter-note{ font-size:.8rem; color:var(--parchment-50); margin-top:.8rem; }

/* ---------- section scaffolding ---------- */
section{ position:relative; }
.section-pad{ padding-block:8rem; }
.section-pad-sm{ padding-block:5rem; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; margin-bottom:3.5rem; flex-wrap:wrap;
}

/* ---------- inner-page banner (About / Books / Writings / Contact / Wholesale) ---------- */
.page-hero{
  padding-block: 11rem 5rem;
  position:relative;
}
.page-hero::after{
  content:'';
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:0;
  height:1px; background:var(--line);
}
.page-hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:4rem; align-items:end; }
.page-hero__img{ position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line); }
.page-hero__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); transition:transform 1.2s var(--ease-out-quart); }
.page-hero__img:hover img{ transform:scale(1.04); }
@media (max-width:640px){
  .page-hero{ padding-block:8.5rem 3rem; }
  .page-hero__grid{ grid-template-columns:1fr; gap:2rem; }
}

/* split-type line reveal masks (legacy, kept for compatibility) */
.split-line-mask{ overflow:hidden; display:block; }
.split-line{ display:block; transform:translateY(100%); opacity:0; will-change:transform; }

/* split-type WORD reveal masks — per-word mask cascade */
.split-word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-word{
  display:inline-block;
  transform:translateY(120%);
  opacity:0;
  will-change:transform, opacity;
}

/* grain / atmosphere overlay */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9997;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .site-nav__links{ display:none; }
  .site-nav__cta{ display:none; }
  .nav-burger{ display:block; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .newsletter__inner{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .section-pad{ padding-block:5.5rem; }
}

/* ==========================================================================
   HOME — hero
   ========================================================================== */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
  padding-top:6rem;
  overflow:hidden;
}
.hero__sigil{
  position:absolute; top:50%; left:50%;
  width:min(92vw, 900px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  color:var(--gold);
  opacity:.16;
  pointer-events:none;
}
.hero__sigil svg{ width:100%; height:100%; opacity:0; }
.hero__inner{ position:relative; z-index:2; }
.hero__title{
  font-size:var(--fs-hero);
  display:flex; flex-direction:column;
  margin-top:1.4rem;
}
.reveal-line{ overflow:hidden; display:block; }
.hero__lede{ margin-top:2.2rem; }
.hero__cta{ display:flex; gap:1.1rem; margin-top:2.8rem; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; bottom:2.6rem; left:var(--gutter);
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--parchment-50);
}
.hero__scroll svg{ animation:bob 2.2s var(--ease-in-out-expo) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ---------- thesis ---------- */
.thesis__grid{
  display:grid; grid-template-columns:1fr 2fr; gap:2rem; align-items:end;
  padding-bottom:3.5rem; border-bottom:1px solid var(--line);
  margin-bottom:3.5rem;
}
.thesis__body{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:5rem; }
.thesis__body .lede{ max-width:none; }

.stats{ border-top:1px solid var(--line); padding-top:4rem; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; }
.stat{ display:flex; flex-direction:column; gap:.6rem; }
.stat__num{
  font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,3.4vw,3.1rem);
  color:var(--gold-bright); line-height:1;
}
.stat .small-caps{ max-width:22ch; }

/* ---------- book carousel / cards ---------- */
.books-swiper{ padding:0 var(--gutter) 1rem; overflow:visible; }
.book-card{ display:flex; flex-direction:column; }
.book-card__cover{
  display:block; aspect-ratio:3/4.3; overflow:hidden; background:var(--ink-3);
  margin-bottom:1.4rem; border:1px solid var(--line);
}
.book-card__cover img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out-quart); }
.book-card__cover:hover img{ transform:scale(1.05); }
.book-card__ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-display); font-size:1.2rem; color:var(--gold); padding:1rem;
  background:linear-gradient(160deg, var(--ink-3), var(--ink-2));
}
.book-card .small-caps{ margin-bottom:.5rem; }
.book-card__desc{ color:var(--parchment-50); font-size:.94rem; margin-top:.6rem; line-height:1.6; }

/* ---------- books bento grid (award-winning asymmetric composition) ---------- */
/* ---------- about teaser ---------- */
.about-teaser__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:0; align-items:stretch; position:relative; }
.about-teaser__img{position:relative;aspect-ratio:auto;overflow:hidden;border:1px solid var(--line);margin-right:-8vw;z-index:2;}
.about-teaser__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.05); }
.about-teaser__img-tag{
  position:absolute; left:1.6rem; bottom:1.6rem; z-index:3;
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); border:1px solid var(--line-2); color:var(--gold-bright);
  padding:.5rem 1rem; border-radius:20px;
}
.about-teaser__copy{
  background:var(--ink-2); border:1px solid var(--line); padding:4rem 3.5rem 4rem 9vw;
  display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1;
}
.about-teaser__stat{
  position:absolute;
  top: 2.4rem;
  right:2.4rem;
  z-index:4;
  background:var(--gold);
  color:var(--ink);
  padding:1.1rem 1.5rem;
  text-align:center;
  min-width:110px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.6);
}
.about-teaser__stat b{ display:block; font-family:var(--font-display); font-size:1.8rem; line-height:1; }
.about-teaser__stat span{ font-family:var(--font-ui); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:980px){
  .about-teaser__grid{ grid-template-columns:1fr; }
  .about-teaser__img{ margin-right:0; aspect-ratio:4/5; }
  .about-teaser__copy{ padding:3rem var(--gutter); }
  .about-teaser__stat{ top:auto; bottom:-1.6rem; right:1.6rem; }
}
.tag-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin:2rem 0 2.4rem; }
.tag-row li{
  font-family:var(--font-ui); font-size:.76rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:.5rem 1rem; color:var(--parchment-70);
}

/* ---------- praise ---------- */
.praise__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:3rem; }
.praise__card{
  border:1px solid var(--line); padding:2.2rem; margin:0;
  font-family:var(--font-display); font-size:1.15rem; font-style:italic; color:var(--parchment-70);
}
.praise__card cite{
  display:block; margin-top:1.4rem; font-family:var(--font-ui); font-style:normal;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--parchment-50);
}
.praise__card--fact{ display:flex; flex-direction:column; justify-content:center; text-align:center; }
.praise__card--fact p{ font-style:normal; }

@media (max-width:980px){
  .thesis__grid{ grid-template-columns:1fr; }
  .thesis__body{ grid-template-columns:1fr; gap:2rem; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .about-teaser__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .praise__grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   BOOKS PAGE
   ========================================================================== */
.featured-book{ display:grid; grid-template-columns:.7fr 1.3fr; gap:5rem; align-items:center; }
.featured-book__cover{ position:relative; isolation:isolate; }
.featured-book__cover img{ display:block; width:100%; border:1px solid var(--line); }
.featured-book__badge{
  position:absolute; top:-14px; left:-14px; z-index:4;
  background:var(--accent, var(--gold)); color:var(--ink); font-family:var(--font-ui);
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.5rem .9rem;
}
.featured-book__meta{ display:flex; gap:2rem; margin:1.6rem 0 2rem; }
.featured-book__meta div{ display:flex; flex-direction:column; gap:.3rem; }
.featured-book__meta b{ font-family:var(--font-display); font-size:1.3rem; color:var(--gold-bright); }
body[data-accent] .featured-book__meta b{ color:var(--accent-hover); }

/* ---- featured-book scroll-synced intro (data-book-*) ---- */
.featured-book__cover-inner{ overflow:hidden; }
.featured-book__cover-inner img{
  will-change:transform;
  transition:filter .6s var(--ease-out-expo);
}
.featured-book__glow{
  position:absolute; z-index:-1; inset:-18% -22%;
  background:radial-gradient(60% 60% at 50% 42%,
    color-mix(in srgb, var(--accent-hover, var(--gold-bright)) 55%, transparent) 0%,
    color-mix(in srgb, var(--accent, var(--gold)) 22%, transparent) 45%,
    transparent 75%);
  filter:blur(46px);
  opacity:0; pointer-events:none;
}
.featured-book__curtain{
  position:absolute; inset:0; z-index:2;
  background:var(--accent, var(--gold));
  transform-origin:right center;
  transform:scaleX(0); /* safe default: uncovered — JS flips to 1 then wipes back to 0 */
  pointer-events:none;
}
[data-book-eyebrow], [data-book-desc], [data-book-stat], [data-book-cta], [data-book-badge]{ opacity:0; }
[data-book-title]{ perspective:900px; }
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .featured-book__glow{ background:radial-gradient(60% 60% at 50% 42%, var(--accent-hover, var(--gold-bright)), transparent 70%); opacity:0; }
}

.book-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.4rem; }
.book-grid .book-card__cover{ aspect-ratio:3/4.5; }
.book-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem; }

.catalog-banner{
  border:1px solid var(--line); padding:4.5rem var(--gutter);
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
  background:linear-gradient(160deg, var(--ink-2), var(--ink));
}

.role-pill{
  display:inline-block; font-family:var(--font-ui); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); padding:.3rem .7rem; margin-bottom:.7rem;
}

@media (max-width:980px){
  .featured-book{ grid-template-columns:1fr; gap:2.5rem; }
  .book-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .book-grid, .book-grid-2{ grid-template-columns:1fr; }
  .featured-book__meta{ flex-wrap:wrap; gap:1.4rem; }
}

/* ==========================================================================
   BLOG / WRITINGS PAGE
   ========================================================================== */
.filter-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:3.5rem; }
.filter-btn{
  font-family:var(--font-ui); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:.6rem 1.2rem; color:var(--parchment-50);
  transition:all .35s var(--ease-out-expo);
}
.filter-btn.is-active, .filter-btn:hover{ border-color:var(--gold); color:var(--gold-bright); }

.essay-list{ border-top:1px solid var(--line); }
.essay{
  display:grid; grid-template-columns:6rem 1fr auto; gap:2rem; align-items:baseline;
  padding:2.2rem 0; border-bottom:1px solid var(--line);
  transition:opacity .4s var(--ease-out-expo);
}
.essay__year{ font-family:var(--font-ui); font-size:.85rem; color:var(--gold); }
.essay__title{ font-family:var(--font-display); font-size:1.4rem; font-weight:480; }
.essay__title span{ background-image:linear-gradient(currentColor,currentColor); background-position:0 100%; background-repeat:no-repeat; background-size:0 1px; transition:background-size .5s var(--ease-out-expo); padding-bottom:.1em; }
.essay:hover .essay__title span{ background-size:100% 1px; }
.essay__desc{ color:var(--parchment-50); font-size:.92rem; margin-top:.5rem; max-width:56ch; }
.essay__tag{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--parchment-50); white-space:nowrap; }
.essay.is-hidden{ display:none; }

.blog-source-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.blog-source{ border:1px solid var(--line); padding:2.4rem; }
.blog-source h4{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:.7rem; }
.blog-source p{ color:var(--parchment-50); font-size:.9rem; line-height:1.6; margin-bottom:1.2rem; }

@media (max-width:768px){
  .essay{ grid-template-columns:1fr; gap:.5rem; }
  .blog-source-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:5rem; }
.form-field{ margin-bottom:2rem; }
.form-field label{ display:block; font-family:var(--font-ui); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment-50); margin-bottom:.7rem; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:none; border:none; border-bottom:1px solid var(--line-2);
  color:var(--parchment); font-family:var(--font-body); font-size:1.1rem; padding:.6rem 0;
  transition:border-color .4s var(--ease-out-expo);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--gold); }
.form-field textarea{ resize:vertical; min-height:120px; }
.form-field select option{ background:var(--ink); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }

.contact-info-card{ border:1px solid var(--line); padding:2.4rem; margin-bottom:1.6rem; }
.contact-info-card h4{ font-family:var(--font-ui); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.contact-info-card p, .contact-info-card a{ color:var(--parchment-70); line-height:1.7; }

@media (max-width:980px){
  .contact-grid{ grid-template-columns:1fr; gap:3rem; }
  .form-row{ grid-template-columns:1fr; gap:0; }
}

/* ==========================================================================
   ARTICLE / ESSAY DETAIL PAGE
   ========================================================================== */
.article-hero{ padding:11rem 0 3rem; }
.article-hero__meta{ display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; margin-bottom:1.6rem; }
.article-hero__meta .essay__tag{ border:1px solid var(--line-2); padding:.35rem .8rem; border-radius:20px; }
.article-hero__title{ font-size:var(--fs-h1); max-width:22ch; }
.article-hero__dek{ margin-top:1.8rem; max-width:60ch; }
.article-media{ margin:0 0 5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-media img{ width:100%; aspect-ratio:21/9; object-fit:cover; filter:grayscale(.2) contrast(1.05); }
.article-body{ max-width:720px; }
.article-body p{ font-size:var(--fs-lead); line-height:1.8; color:var(--parchment-70); margin-bottom:1.8rem; }
.article-body p:first-of-type{ color:var(--parchment); }
.article-body p::first-letter{ font-family:var(--font-display); font-size:1.1em; }
.article-layout{ display:grid; grid-template-columns:1fr .55fr; gap:5rem; align-items:start; }
.article-aside{ position:sticky; top:9rem; display:flex; flex-direction:column; gap:1.6rem; }
.article-source-note{ border:1px solid var(--line); padding:1.8rem; }
.article-source-note h4{ font-family:var(--font-ui); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:.8rem; }
.article-source-note p{ color:var(--parchment-50); font-size:.88rem; line-height:1.7; }
.article-nav{ display:flex; justify-content:space-between; gap:2rem; border-top:1px solid var(--line); padding-top:3rem; margin-top:2rem; }
.article-nav a{ max-width:20ch; }
.article-nav .small-caps{ display:block; margin-bottom:.6rem; }
.article-nav__title{ font-family:var(--font-display); font-size:1.15rem; }
.article-nav__prev{ text-align:left; }
.article-nav__next{ text-align:right; margin-left:auto; }
@media (max-width:980px){
  .article-layout{ grid-template-columns:1fr; gap:3rem; }
  .article-aside{ position:static; flex-direction:row; flex-wrap:wrap; }
}

/* ==========================================================================
   BOOK DETAIL PAGE
   ========================================================================== */
.book-detail__extra{ margin-top:5rem; padding-top:4rem; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.book-detail__extra h3{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:1.2rem; }
.book-detail__extra p{ color:var(--parchment-70); line-height:1.75; }
.breadcrumb{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.05em; color:var(--parchment-50); text-transform:uppercase; margin-bottom:2rem; display:block; }
.breadcrumb a{ color:var(--parchment-50); }
.breadcrumb a:hover{ color:var(--gold-bright); }
@media (max-width:980px){
  .featured-book{ grid-template-columns:1fr; gap:2.5rem; }
  .book-detail__extra{ grid-template-columns:1fr; gap:2.5rem; }
}
/* ==========================================================================
   THE SHELF — horizontal scroll-driven book rail (home page)
   Covers render at TRUE book proportion (2:3), never cropped or blown up.
   ========================================================================== */
.shelf{ position:relative; overflow:hidden; }
.shelf__viewport{ overflow:hidden; }
.shelf__track{
  display:flex; align-items:flex-end; gap:clamp(1.4rem,3vw,3rem);
  padding:0 var(--gutter); will-change:transform;
}
.shelf__intro{
  flex:0 0 auto; width:clamp(240px,26vw,360px); padding-bottom:1rem;
  border-left:1px solid var(--gold); padding-left:1.6rem;
}
.shelf__intro h3{ font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:480; line-height:1.15; margin-bottom:1rem; }
.shelf__intro p{ color:var(--parchment-50); font-size:.92rem; line-height:1.65; }

.shelf-book{
  flex:0 0 auto;
  width:clamp(150px, 15vw, 215px);   /* the fix: modest, book-sized */
  display:flex; flex-direction:column;
  position:relative;
}
.shelf-book__frame{
  position:relative; width:100%; aspect-ratio:2/3;
  overflow:hidden; background:var(--ink-3);
  border:1px solid var(--line);
  transition:transform .7s var(--ease-out-expo), border-color .5s var(--ease-out-expo), box-shadow .7s var(--ease-out-expo);
  transform-origin:bottom center;
}
.shelf-book__frame img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform 1.1s var(--ease-out-quart), filter .6s var(--ease-out-expo);
  filter:grayscale(.22) contrast(1.04) brightness(.9);
}
.shelf-book:hover .shelf-book__frame{
  transform:translateY(-14px) rotate(-1.1deg);
  border-color:var(--gold);
  box-shadow:0 34px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(198,154,78,.25);
}
.shelf-book:hover .shelf-book__frame img{ transform:scale(1.05); filter:grayscale(0) contrast(1.06) brightness(1); }
/* spine highlight */
.shelf-book__frame::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:9px; z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
.shelf-book__idx{
  position:absolute; top:-.4rem; right:0; z-index:3;
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.14em; color:var(--gold);
}
.shelf-book__oop{
  position:absolute; left:.7rem; top:.7rem; z-index:3;
  font-family:var(--font-ui); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--oxblood); color:var(--parchment); padding:.28rem .6rem;
}
.shelf-book__meta{ padding-top:1rem; }
.shelf-book__imprint{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold); display:block; margin-bottom:.45rem;
}
.shelf-book__title{
  font-family:var(--font-display); font-size:.98rem; font-weight:480; line-height:1.25;
  color:var(--parchment); margin-bottom:.3rem;
}
.shelf-book__author{ font-family:var(--font-ui); font-size:.72rem; color:var(--parchment-50); }
.shelf-book__price{ font-family:var(--font-ui); font-size:.72rem; color:var(--parchment-70); margin-top:.35rem; display:block; }

.shelf__end{
  flex:0 0 auto; width:clamp(200px,20vw,280px); align-self:center;
  padding-left:1.6rem; border-left:1px solid var(--line-2);
}
.shelf__end h3{ font-family:var(--font-display); font-size:1.4rem; font-weight:480; margin-bottom:1rem; line-height:1.2; }

.shelf__progress{
  height:1px; background:var(--line); margin:3.5rem var(--gutter) 0; position:relative;
}
.shelf__progress span{
  position:absolute; left:0; top:-1px; height:3px; background:var(--gold);
  width:0%; transition:width .1s linear;
}
.shelf__hint{
  display:flex; align-items:center; gap:.6rem; margin:1.2rem var(--gutter) 0;
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-50);
}

/* mobile / reduced-motion: plain horizontal swipe, no pinning */
.shelf.is-static .shelf__track{ overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.5rem; }
.shelf.is-static .shelf-book{ scroll-snap-align:start; }
@media (max-width:900px){
  .shelf-book{ width:clamp(140px,42vw,180px); }
  .shelf__intro{ width:min(78vw,320px); }
  .shelf__end{ width:min(70vw,260px); }
}

/* ==========================================================================
   TWO WORLDS — the Press vs the Writings
   ========================================================================== */
.worlds{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-block:1px solid var(--line); }
.world{
  position:relative; background:var(--ink); padding:clamp(2.6rem,5vw,5.5rem) clamp(1.5rem,4vw,4rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem;
  min-height:clamp(340px,42vh,520px); overflow:hidden;
  transition:background .6s var(--ease-out-expo);
}
.world__inner{ position:relative; z-index:1; }
/* sweep that wipes up on hover */
.world::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(198,154,78,.10), rgba(198,154,78,0) 65%);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .75s var(--ease-out-expo);
}
.world::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .75s var(--ease-out-expo);
}
.world:hover{ background:var(--ink-2); }
.world:hover::before{ transform:scaleY(1); }
.world:hover::after{ transform:scaleX(1); }
.world__go{ position:relative; z-index:1; }

.world__num{
  font-family:var(--font-ui); font-size:.68rem; letter-spacing:.2em; color:var(--gold);
  display:flex; align-items:center; gap:.8rem;
}
.world__num::after{ content:''; flex:1; height:1px; background:var(--line-2); }
.world__title{
  font-family:var(--font-display); font-size:clamp(1.9rem,3.8vw,3.1rem); font-weight:480; line-height:1.05;
  margin:1.3rem 0 .9rem;
}
.world__title em{ font-style:italic; color:var(--gold-bright); }
.world__site{
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.06em; color:var(--parchment-50);
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.3rem; flex-wrap:wrap;
}
.world__site b{ color:var(--gold); font-weight:500; }
.world__desc{ color:var(--parchment-70); line-height:1.7; max-width:42ch; }
.world__stats{ display:flex; gap:clamp(1.4rem,3vw,2.4rem); margin-top:1.9rem; flex-wrap:wrap; }
.world__stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--gold-bright); line-height:1; margin-bottom:.4rem; }
.world__stat span{ font-family:var(--font-ui); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment-50); }
.world__go{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--font-ui); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-bright);
}
.world__go svg{ width:20px; height:12px; transition:transform .5s var(--ease-out-expo); }
.world:hover .world__go svg{ transform:translateX(10px); }
/* entrance state — GSAP clears these */
[data-world-el]{ opacity:0; transform:translateY(26px); }
@media (max-width:860px){ .worlds{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ [data-world-el]{ opacity:1; transform:none; } }

/* section label chip — tells the reader which "world" a page belongs to */
.world-chip{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:.45rem .9rem; color:var(--parchment-70);
  margin-bottom:1.6rem;
}
.world-chip i{ width:6px; height:6px; border-radius:50%; background:var(--gold); font-style:normal; }
.world-chip.is-desk i{ background:var(--oxblood); }

/* ==========================================================================
   BOOKS PAGE — imprint-grouped catalog
   ========================================================================== */
.imprint-nav{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:3.5rem; }
.imprint-nav button{
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  border:1px solid var(--line-2); padding:.6rem 1.2rem; color:var(--parchment-50);
  transition:all .35s var(--ease-out-expo);
}
.imprint-nav button.is-active, .imprint-nav button:hover{ border-color:var(--gold); color:var(--gold-bright); }

.imprint-block{ margin-bottom:5.5rem; }
.imprint-block.is-hidden{ display:none; }
.imprint-head{
  display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap;
  padding-bottom:1.2rem; border-bottom:1px solid var(--line); margin-bottom:2.8rem;
}
.imprint-head h3{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:480; }
.imprint-head p{ color:var(--parchment-50); font-size:.9rem; max-width:52ch; }
.imprint-head .count{ font-family:var(--font-ui); font-size:.72rem; color:var(--gold); letter-spacing:.1em; }

.catalog-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(clamp(150px,16vw,200px), 1fr));
  gap:clamp(1.6rem,2.6vw,2.6rem);
}
.cat-book{ display:flex; flex-direction:column; }
.cat-book__frame{
  position:relative; width:100%; aspect-ratio:2/3; overflow:hidden;
  background:var(--ink-3); border:1px solid var(--line);
  transition:transform .6s var(--ease-out-expo), border-color .5s, box-shadow .6s var(--ease-out-expo);
}
.cat-book__frame img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  filter:grayscale(.22) brightness(.9); transition:transform 1s var(--ease-out-quart), filter .6s;
}
.cat-book:hover .cat-book__frame{
  transform:translateY(-10px); border-color:var(--gold);
  box-shadow:0 28px 50px -26px rgba(0,0,0,.8);
}
.cat-book:hover .cat-book__frame img{ transform:scale(1.05); filter:grayscale(0) brightness(1); }
.cat-book__frame::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:8px; z-index:2;
  background:linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0)); pointer-events:none;
}
.cat-book__tag{
  position:absolute; left:.6rem; top:.6rem; z-index:3;
  font-family:var(--font-ui); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .6rem; background:var(--gold); color:var(--ink);
}
.cat-book__tag.is-oop{ background:var(--oxblood); color:var(--parchment); }
.cat-book__body{ padding-top:.9rem; }
.cat-book__title{ font-family:var(--font-display); font-size:.98rem; font-weight:480; line-height:1.25; margin-bottom:.3rem; }
.cat-book__author{ font-family:var(--font-ui); font-size:.7rem; color:var(--parchment-50); display:block; }
.cat-book__price{ font-family:var(--font-ui); font-size:.72rem; color:var(--gold); margin-top:.4rem; display:block; }

/* ==========================================================================
   WRITINGS — expanded archive
   ========================================================================== */
.archive-meta{
  display:flex; gap:2.5rem; flex-wrap:wrap; padding:1.6rem 0 2.4rem;
  border-bottom:1px solid var(--line); margin-bottom:2.5rem;
}
.archive-meta div b{ font-family:var(--font-display); font-size:1.5rem; color:var(--gold-bright); display:block; line-height:1; margin-bottom:.35rem; }
.archive-meta div span{ font-family:var(--font-ui); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment-50); }
.essay__ext{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--parchment-30); border:1px solid var(--line); padding:.2rem .5rem; margin-left:.6rem;
  white-space:nowrap;
}
.essay-empty{ padding:3rem 0; color:var(--parchment-50); font-style:italic; }

/* ==========================================================================
   ESSAY READER
   ========================================================================== */
.essay-hero{ padding-block:10rem 3rem; position:relative; }
.essay-hero__title{ font-size:clamp(2.1rem,5.2vw,4.2rem); margin:1.2rem 0 1.8rem; max-width:18ch; }
.essay-hero__meta{
  display:flex; gap:2rem; flex-wrap:wrap; padding-top:1.4rem; border-top:1px solid var(--line);
  font-family:var(--font-ui); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment-50);
}
.essay-body{ padding-block:2rem 4rem; }
.essay-body__col{ max-width:68ch; }
.essay-body__col p{ margin-bottom:1.5rem; line-height:1.85; color:var(--parchment-70); font-size:1.09rem; }
.essay-body__col p:first-child::first-letter{
  float:left; font-family:var(--font-display); font-size:3.6em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--gold-bright);
}
.content-pending{
  border:1px solid var(--line-2); border-left:2px solid var(--gold);
  padding:1.6rem 1.8rem; margin-top:2.4rem; background:var(--ink-2);
}
.content-pending .small-caps{ color:var(--gold); display:block; margin-bottom:.7rem; }
.content-pending p{ font-size:.94rem !important; color:var(--parchment-50) !important; margin:0 !important; line-height:1.7 !important; }

.next-essay-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.next-essay{
  border:1px solid var(--line); padding:1.8rem; display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .45s var(--ease-out-expo), transform .45s var(--ease-out-expo);
}
.next-essay:hover{ border-color:var(--gold); transform:translateY(-6px); }
.next-essay__cat{ font-family:var(--font-ui); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.next-essay__title{ font-family:var(--font-display); font-size:1.12rem; font-weight:480; line-height:1.3; }
@media (max-width:820px){ .next-essay-grid{ grid-template-columns:1fr; } }

/* stream browser on the writings index */
.stream-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.stream-card{
  border:1px solid var(--line); padding:2rem 1.8rem; text-align:left;
  display:flex; flex-direction:column; gap:.6rem; position:relative;
  transition:border-color .45s var(--ease-out-expo), transform .45s var(--ease-out-expo);
}
.stream-card:hover{ border-color:var(--gold); transform:translateY(-6px); }
.stream-card__n{
  font-family:var(--font-display); font-size:2rem; color:var(--gold-bright); line-height:1;
}
.stream-card h4{ font-family:var(--font-display); font-size:1.2rem; font-weight:480; }
.stream-card p{ color:var(--parchment-50); font-size:.88rem; line-height:1.6; flex:1; }
@media (max-width:900px){ .stream-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .stream-grid{ grid-template-columns:1fr; } }

/* ---- responsive hardening ---- */
@media (max-width:640px){
  .essay-hero{ padding-block:8.5rem 2rem; }
  .featured-book__meta{ gap:1.2rem; }
  .archive-meta{ gap:1.5rem; }
  .archive-meta div{ min-width:40%; }
  .catalog-banner{ padding:2.6rem 1.4rem; }
  .imprint-head{ gap:.6rem; }
  .world{ min-height:auto; }
}
img{ height:auto; }
.container, section{ max-width:100%; }

/* cover fallback plate — shown only if a cover image fails to load */
.cover-fallback{
  width:100%; height:100%; min-height:160px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1.2rem;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(198,154,78,.12), transparent 60%),
    linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border:1px solid var(--line);
}
.cover-fallback span{
  font-family:var(--font-display); font-size:.95rem; font-weight:480;
  line-height:1.3; color:var(--gold-bright); text-wrap:balance;
}
.featured-book__cover .cover-fallback{ aspect-ratio:2/3; }

.praise__card--lead{ border-color:var(--line-2); }
.praise__card--lead p{ font-size:1.02rem; line-height:1.65; }
/* ==========================================================================
   ACCENT SYSTEM  —  data-accent / data-accent-hover
   Every book carries its own colour. Hovering a cover bleeds that colour
   into the card, its type, and the surrounding section's ambient field.
   ========================================================================== */

[data-accent]{
  --accent: var(--gold);
  --accent-hover: var(--gold-bright);
}

/* --- the ambient field: one soft wash per section, driven by JS --- */
.accent-field{
  --accent-live: var(--gold);
  position:relative;
  isolation:isolate;
}
.accent-field::after{
  content:'';
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .75s var(--ease-out-expo), background .75s var(--ease-out-expo);
  background:
    radial-gradient(80% 120% at var(--accent-x, 50%) var(--accent-y, 40%),
      color-mix(in srgb, var(--accent-live) 26%, transparent) 0%,
      color-mix(in srgb, var(--accent-live) 8%, transparent) 38%,
      transparent 72%);
}
.accent-field.is-accented::after{ opacity:1; }
.accent-field > *{ position:relative; z-index:1; }

/* --- shelf cards --- */
.shelf-book__frame,
.cat-book__frame{
  transition:transform .7s var(--ease-out-expo),
             border-color .45s var(--ease-out-expo),
             box-shadow .7s var(--ease-out-expo);
}
.shelf-book:hover .shelf-book__frame{
  border-color:var(--accent-hover);
  box-shadow:
    0 34px 60px -28px rgba(0,0,0,.85),
    0 0 0 1px color-mix(in srgb, var(--accent-hover) 45%, transparent),
    0 0 38px -8px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cat-book:hover .cat-book__frame{
  border-color:var(--accent-hover);
  box-shadow:
    0 28px 50px -26px rgba(0,0,0,.8),
    0 0 0 1px color-mix(in srgb, var(--accent-hover) 40%, transparent),
    0 0 32px -10px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* colour wash over the cover itself */
.shelf-book__frame::after,
.cat-book__frame::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 40%, transparent),
    color-mix(in srgb, var(--accent-hover) 12%, transparent) 55%,
    transparent 85%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .55s var(--ease-out-expo);
}
.shelf-book:hover .shelf-book__frame::after,
.cat-book:hover .cat-book__frame::after{ opacity:1; }

/* the type picks the colour up too */
.shelf-book__title,
.cat-book__title,
.shelf-book__idx,
.shelf-book__price,
.cat-book__price,
.shelf-book__imprint{
  transition:color .45s var(--ease-out-expo);
}
.shelf-book:hover .shelf-book__title,
.cat-book:hover .cat-book__title,
.shelf-book:hover .shelf-book__idx,
.shelf-book:hover .shelf-book__price,
.cat-book:hover .cat-book__price{
  color:var(--accent-hover);
}
.shelf-book:hover .shelf-book__imprint{ color:var(--accent); }

/* a hairline that draws itself under the hovered card */
.shelf-book::after,
.cat-book::after{
  content:''; position:absolute; left:0; bottom:-.55rem; height:1px; width:100%;
  background:var(--accent-hover);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease-out-expo);
}
.cat-book{ position:relative; }
.shelf-book:hover::after,
.cat-book:hover::after{ transform:scaleX(1); }

/* featured tag adopts the accent instead of flat gold */
.cat-book:hover .cat-book__tag:not(.is-oop){ background:var(--accent-hover); }

/* --- book detail pages: accent drives the page furniture --- */
body[data-accent] .book-hero .eyebrow,
body[data-accent] .breadcrumb a:hover{ color:var(--accent-hover); }
body[data-accent] .btn--primary:hover{
  border-color:var(--accent-hover);
  box-shadow:0 0 30px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* graceful degradation where color-mix is unsupported */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .shelf-book__frame::after,
  .cat-book__frame::after{ background:linear-gradient(160deg, var(--accent), transparent 80%); opacity:0; }
  .accent-field::after{ background:radial-gradient(70% 110% at 50% 40%, var(--accent-live), transparent 70%); }
  .accent-field.is-accented::after{ opacity:.14; }
}

@media (prefers-reduced-motion: reduce){
  .accent-field::after,
  .shelf-book__frame::after,
  .cat-book__frame::after,
  .shelf-book::after,
  .cat-book::after{ transition-duration:.01ms !important; }
}

/* featured cover on a book detail page picks up that book's accent */
body[data-accent] .featured-book__cover img{
  transition:box-shadow .8s var(--ease-out-expo), border-color .6s var(--ease-out-expo), transform .9s var(--ease-out-expo);
}
body[data-accent] .featured-book__cover:hover img{
  border-color:var(--accent-hover);
  transform:translateY(-8px);
  box-shadow:0 40px 70px -34px rgba(0,0,0,.9),
             0 0 46px -12px color-mix(in srgb, var(--accent) 55%, transparent);
}
body[data-accent] .featured-book__meta b{ color:var(--accent-hover); }
body[data-accent] .featured-book__badge{ background:var(--accent); color:var(--ink); }

/* ==========================================================================
   NAV DROPDOWN — "About" reveals the About-adjacent pages (Authors etc.)
   Matches the site-nav visual language exactly: same font, same underline-
   draw hover, same gold accents, same easing.
   ========================================================================== */
.nav-dropdown{ position:relative; }
.nav-dropdown__trigger{
  display:inline-flex; align-items:center; gap:.4rem;
}
.nav-dropdown__caret{
  color:var(--parchment-50);
  transition:transform .4s var(--ease-out-expo), color .4s var(--ease-out-expo);
}
.nav-dropdown:hover .nav-dropdown__caret,
.nav-dropdown.is-open .nav-dropdown__caret{
  transform:rotate(180deg);
  color:var(--gold);
}

.nav-dropdown__menu{
  position:absolute;
  top:calc(100% + 1.4rem);
  left:50%;
  transform:translate(-50%, 10px);
  min-width:220px;
  background:rgba(12,10,8,.94);
  backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  padding:.6rem;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease-out-expo), transform .35s var(--ease-out-expo), visibility .35s;
  z-index:501;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.nav-dropdown__menu a{
  display:block;
  font-family:var(--font-ui); font-size:.78rem; letter-spacing:.05em; text-transform:none;
  color:var(--parchment-70);
  padding:.65rem .9rem;
  border-radius:var(--radius);
  transition:background .3s var(--ease-out-expo), color .3s var(--ease-out-expo), padding-left .3s var(--ease-out-expo);
  position:relative;
}
.nav-dropdown__menu a::after{ content:none; }
.nav-dropdown__menu a:hover{
  background:rgba(243,237,224,.05);
  color:var(--gold-bright);
  padding-left:1.15rem;
}
.nav-dropdown__menu a b{ color:var(--parchment); font-weight:500; }
.nav-dropdown__menu a:hover b{ color:var(--gold-bright); }
.nav-dropdown__menu a span{
  display:block; font-size:.72rem; color:var(--parchment-30); margin-top:.15rem; letter-spacing:.02em;
}

/* ---------- mobile drawer submenu ---------- */
.mobile-drawer__group{ border-bottom:1px solid var(--line); }
.mobile-drawer__group > .mobile-drawer__trigger{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-size:2.4rem; font-weight:400;
  padding:.5rem 0; border-bottom:none; cursor:pointer;
  color:var(--parchment);
}
.mobile-drawer__trigger svg{
  width:16px; height:16px; color:var(--parchment-30);
  transition:transform .4s var(--ease-out-expo);
}
.mobile-drawer__group.is-open .mobile-drawer__trigger svg{ transform:rotate(180deg); color:var(--gold); }
.mobile-drawer__sub{
  max-height:0; overflow:hidden;
  transition:max-height .5s var(--ease-out-expo);
}
.mobile-drawer__group.is-open .mobile-drawer__sub{ max-height:16rem; }
.mobile-drawer__sub a{
  font-family:var(--font-ui); font-size:1.05rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:400; padding:.9rem 0 .9rem 1.2rem; border-bottom:1px solid var(--line);
  color:var(--parchment-70);
}
.mobile-drawer__sub a:last-child{ border-bottom:none; }
.mobile-drawer__sub a:hover{ color:var(--gold-bright); }