/* ===========================================================
   The Train Between Worlds — trainbetweenworlds.com
   =========================================================== */

:root{
  --ink:        #080B0F;
  --ink-1:      #0C1117;
  --ink-2:      #121A22;
  --cream:      #F4EDE0;
  --muted:      rgba(244,237,224,.62);
  --faint:      rgba(244,237,224,.40);
  --line:       rgba(244,237,224,.13);
  --amber:      #E9A94D;
  --amber-soft: rgba(233,169,77,.14);

  --navy:       #2E4A63;
  --teal:       #1F7F84;
  --oxblood:    #A33141;

  --maxw:       1180px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

/* fixed header clearance for #anchor jumps */
:target,
.book, .section, #top, #books, #author{ scroll-margin-top:92px }
#top{ scroll-margin-top:0 }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-size:clamp(1rem, .96rem + .18vw, 1.09rem);
  line-height:1.72;
  font-weight:350;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }

a{ color:var(--amber); text-decoration-thickness:1px; text-underline-offset:3px }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
}

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

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:var(--ink);
  padding:.75rem 1.25rem; font-weight:600; border-radius:0 0 6px 0;
}
.skip:focus{ left:0 }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px }

/* --- grain overlay ------------------------------------------------ */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===================== NAV ======================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1rem var(--gutter);
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,11,15,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
  padding-block:.7rem;
}
.nav__brand{
  font-family:var(--display);
  font-size:.95rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--cream); text-decoration:none; white-space:nowrap;
}
.nav__brand span{ color:var(--amber) }
.nav__links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem) }
.nav__links a{
  color:var(--muted); text-decoration:none;
  font-size:.83rem; letter-spacing:.11em; text-transform:uppercase; font-weight:500;
  transition:color .2s ease;
}
.nav__links a:hover{ color:var(--cream) }
.nav__links .btn{ color:var(--ink) }
.nav__links .btn:hover{ color:var(--ink) }
.nav__brand{ min-width:0; overflow:hidden; text-overflow:ellipsis }
.btn__short{ display:none }

@media (max-width:760px){
  .nav__hide{ display:none }
}
@media (max-width:520px){
  .nav{ gap:.75rem }
  .nav__brand{ font-size:.68rem; letter-spacing:.09em }
  .nav__links .btn{ padding:.6rem 1rem; font-size:.7rem; letter-spacing:.08em }
  .btn__long{ display:none }
  .btn__short{ display:inline }
}

/* ===================== BUTTONS ==================================== */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.78rem 1.5rem;
  font-family:var(--body); font-size:.83rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:2px; border:1px solid var(--amber);
  background:var(--amber); color:var(--ink);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px -8px rgba(233,169,77,.5);
}
.btn--ghost{
  background:transparent; color:var(--cream);
  border-color:var(--line);
}
.btn--ghost:hover{
  border-color:var(--cream); background:rgba(244,237,224,.05);
  box-shadow:none;
}
.btn__arrow{ font-size:1.05em; line-height:1; transition:transform .18s ease }
.btn:hover .btn__arrow{ transform:translateX(3px) }

/* ===================== HERO ======================================= */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:grid; place-items:center;
  padding:9rem 0 5rem;
  text-align:center;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 42%, #16222E 0%, #0A0E13 55%, var(--ink) 100%);
}
/* passing train windows */
.hero__lights{
  position:absolute; left:-60%; right:-60%; top:46%; height:150px;
  background:repeating-linear-gradient(90deg,
    rgba(233,169,77,.62) 0 24px,
    rgba(233,169,77,0) 24px 74px);
  filter:blur(30px);
  opacity:.20;
  animation:slide 24s linear infinite;
}
.hero__lights--far{
  top:38%; height:70px;
  background:repeating-linear-gradient(90deg,
    rgba(233,169,77,.4) 0 12px,
    rgba(233,169,77,0) 12px 52px);
  filter:blur(20px);
  opacity:.10;
  animation-duration:52s;
  animation-direction:reverse;
}
@keyframes slide{ to{ transform:translateX(-592px) } }

.hero__rail{
  position:absolute; left:0; right:0; top:54%; height:1px; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(233,169,77,.35),transparent);
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 50% 50%, transparent 30%, rgba(8,11,15,.85) 100%);
}

.hero__inner{ position:relative; z-index:1; max-width:56rem; margin-inline:auto }

.eyebrow{
  font-size:.78rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--amber);
  margin:0 0 1.6rem;
}
.eyebrow--dark{ color:var(--faint) }

.hero h1{
  font-size:clamp(2.9rem, 9.5vw, 7rem);
  line-height:.96;
  letter-spacing:-.028em;
  margin-bottom:1.5rem;
  text-wrap:balance;
}
.hero h1 em{
  display:block; font-style:italic; font-weight:400;
  font-size:.42em; letter-spacing:.01em; color:var(--muted);
  margin-bottom:.35em;
}
.hero__byline{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.45rem);
  color:var(--cream); margin:0 0 2rem;
}
.hero__byline a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(233,169,77,.5) }
.hero__byline a:hover{ border-bottom-color:var(--amber) }

.hero__line{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.15rem, 2.9vw, 1.7rem);
  line-height:1.5; color:var(--cream);
  max-width:38ch; margin:0 auto 2.75rem;
  text-wrap:balance;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center }
.hero__ku{
  margin:1.75rem 0 0;
  font-size:.83rem; letter-spacing:.05em; color:var(--faint);
}

.scroll-hint{
  position:absolute; bottom:2rem; left:50%; translate:-50% 0; z-index:1;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--faint); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-hint::after{
  content:""; width:1px; height:36px;
  background:linear-gradient(180deg,var(--faint),transparent);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
@media (max-height:680px){ .scroll-hint{ display:none } }
@media (max-width:520px){ .hero{ padding-bottom:8rem } }

/* ===================== SECTION SHELL ============================== */
.section{ padding:clamp(5rem, 11vw, 9rem) 0; position:relative }
.section--tight{ padding-block:clamp(3.5rem,7vw,6rem) }
.rule{ height:1px; background:var(--line); border:0; margin:0 }

.section__title{
  font-size:clamp(1.9rem, 4.6vw, 3.1rem);
  margin-bottom:1.5rem; text-wrap:balance;
}

/* ===================== PREMISE ==================================== */
.premise{ background:var(--ink-1) }
.premise__inner{ max-width:46rem; margin-inline:auto; text-align:center }
.premise p{ color:var(--muted); font-size:clamp(1.02rem,1.9vw,1.16rem); margin:0 0 1.4rem }
.premise p:last-child{ margin-bottom:0 }
.premise strong{ color:var(--cream); font-weight:500 }

.premise .pullquote{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem, 4vw, 2.35rem);
  line-height:1.36; color:var(--cream);
  max-width:34ch; margin:0 auto clamp(2rem,4vw,3rem);
  text-wrap:balance;
  position:relative; padding-top:2.5rem;
}
.premise .pullquote::before{
  content:""; position:absolute; top:0; left:50%; translate:-50% 0;
  width:52px; height:1px; background:var(--amber);
}

/* ===================== BOOKS ====================================== */
.books{ counter-reset:book }

.book{
  --accent:var(--amber);
  position:relative;
  padding:clamp(4rem,9vw,7.5rem) 0;
  border-top:1px solid var(--line);
}
.book:first-of-type{ border-top:0 }

.book__grid{
  display:grid;
  grid-template-columns:minmax(0,clamp(230px,26vw,330px)) minmax(0,1fr);
  gap:clamp(2.25rem, 6vw, 5.5rem);
  align-items:center;
}
.book--flip .book__grid{ direction:rtl }
.book--flip .book__body{ direction:ltr }
.book--flip .book__cover{ direction:ltr }

@media (max-width:800px){
  .book__grid, .book--flip .book__grid{
    grid-template-columns:1fr; direction:ltr; gap:2.5rem;
  }
  .book__cover{ max-width:270px }
}

/* cover */
.book__cover{ position:relative }
.book__cover img{
  width:100%; border-radius:2px 5px 5px 2px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.5),
    0 24px 60px -18px rgba(0,0,0,.85),
    0 0 0 1px rgba(244,237,224,.07);
  transition:transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .5s ease;
}
.book__cover::before{ /* spine */
  content:""; position:absolute; z-index:2; inset:0 auto 0 0; width:9px;
  border-radius:2px 0 0 2px;
  background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(255,255,255,.09) 55%, rgba(0,0,0,.16));
  pointer-events:none;
}
.book__cover::after{ /* accent glow */
  content:""; position:absolute; inset:8% -12% -14% -12%; z-index:-1;
  background:radial-gradient(closest-side, var(--accent), transparent 72%);
  opacity:.30; filter:blur(46px);
}
.book__cover a{ display:block }
.book__cover a:hover img{
  transform:translateY(-7px) rotate(-.5deg);
  box-shadow:
    0 2px 4px rgba(0,0,0,.5),
    0 34px 70px -18px rgba(0,0,0,.9),
    0 0 0 1px rgba(244,237,224,.12);
}

/* body */
.book__num{
  display:flex; align-items:center; gap:.85rem;
  font-size:.74rem; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.15rem;
}
.book__num::after{
  content:""; height:1px; width:clamp(28px,6vw,64px);
  background:currentColor; opacity:.45;
}
.book__title{
  font-size:clamp(1.85rem, 4.4vw, 3rem);
  margin-bottom:.75rem; text-wrap:balance;
}
.book__sub{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1rem,2vw,1.2rem); line-height:1.45;
  color:var(--faint); margin:0 0 1.75rem; max-width:44ch;
}
.book__blurb{ max-width:54ch; color:var(--muted); margin:0 }
.book__blurb p{ margin:0 0 1.05rem }
.book__blurb p:last-child{ margin-bottom:0 }
.book__blurb .lede{
  color:var(--cream); font-size:1.06em; font-weight:400;
}
.book__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-top:2rem;
}
.book__standalone{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.5rem;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint);
}
.book__standalone{ align-items:flex-start }
.book__standalone::before{
  content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--accent); opacity:.8; margin-top:.55em;
}

/* ===================== START ANYWHERE ============================= */
.start{ background:var(--ink-1); text-align:center }
.start__inner{ max-width:calc(48rem + 2 * var(--gutter)); margin-inline:auto }
.start p{ color:var(--muted); margin:0 auto 2.5rem; max-width:52ch }
.start__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:1.25rem; text-align:left; margin-bottom:2.75rem;
}
.card{
  padding:1.6rem 1.5rem;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .3s ease, transform .3s ease;
}
.card:hover{ border-color:rgba(233,169,77,.4); transform:translateY(-3px) }
.card h3{
  font-size:1.12rem; margin-bottom:.5rem;
  font-family:var(--body); font-weight:600; letter-spacing:0;
}
.card p{ font-size:.92rem; color:var(--muted); margin:0 }
.card__tag{
  display:block; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); margin-bottom:.7rem; font-weight:600;
}

/* comps */
.comps{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
  list-style:none; padding:0; margin:1.75rem 0 0;
}
.comps li{
  font-family:var(--display); font-style:italic; font-size:.98rem;
  color:var(--muted);
  padding:.4rem 1rem;
  border:1px solid var(--line); border-radius:100px;
}

/* ===================== AUTHOR ===================================== */
.author__inner{ max-width:44rem; margin-inline:auto; text-align:center }
.author__name{
  font-size:clamp(2rem,5vw,3.2rem); margin-bottom:1.5rem;
}
.author__inner p{ color:var(--muted); margin:0 auto 1.3rem; max-width:52ch }

/* ===================== FOOTER ===================================== */
.footer{
  border-top:1px solid var(--line);
  background:var(--ink-1);
  padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;
  text-align:center;
}
.footer__cta{ margin-bottom:3.5rem }
.footer__cta h2{ font-size:clamp(1.6rem,4vw,2.5rem); margin-bottom:1.75rem; text-wrap:balance }
.footer__meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; justify-content:center; align-items:center;
  padding-top:2.25rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--faint);
}
.footer__meta a{ color:var(--muted); text-decoration:none }
.footer__meta a:hover{ color:var(--cream) }
.footer__fine{ margin:1.5rem 0 0; font-size:.75rem; color:rgba(244,237,224,.28); line-height:1.6 }

/* ===================== REVEAL ===================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.8,.3,1) }
.reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
}

/* ===========================================================
   Guide / book / FAQ pages
   =========================================================== */

/* ---- page header ------------------------------------------------- */
.phead{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(8rem,14vw,11rem) 0 clamp(3rem,6vw,4.5rem);
  border-bottom:1px solid var(--line);
}
.phead__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden }
.phead__bg::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(110% 90% at 50% 0%, #16222E 0%, #0A0E13 60%, var(--ink) 100%);
}
.phead__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(75% 70% at 50% 40%, transparent 30%, rgba(8,11,15,.9) 100%);
}
.phead__inner{ max-width:calc(52rem + 2 * var(--gutter)); margin-inline:auto }
.phead h1{
  font-size:clamp(2.3rem, 6vw, 4rem);
  margin-bottom:1.25rem; text-wrap:balance;
}
.phead__stand{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.1rem,2.4vw,1.45rem); line-height:1.5;
  color:var(--muted); margin:0; max-width:46ch; text-wrap:balance;
}

/* ---- breadcrumbs -------------------------------------------------- */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin-bottom:1.6rem;
}
.crumbs a{ color:var(--muted); text-decoration:none }
.crumbs a:hover{ color:var(--cream) }
.crumbs__sep{ opacity:.4 }

/* ---- prose column -------------------------------------------------- */
.prose{ max-width:calc(46rem + 2 * var(--gutter)); margin-inline:auto }
.prose p{ color:var(--muted); margin:0 0 1.25rem }
.prose p:last-child{ margin-bottom:0 }
.prose strong{ color:var(--cream); font-weight:500 }
.prose em{ color:inherit }
.prose .section__title{ margin-bottom:1.25rem }
.section__stand{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.02rem,2vw,1.22rem); color:var(--muted);
  max-width:52ch; margin:0 0 2.5rem;
}

/* ---- short-answer box ---------------------------------------------- */
.answer{
  position:relative;
  margin:0 0 2.5rem;
  padding:1.6rem 1.75rem 1.75rem;
  background:linear-gradient(180deg, rgba(233,169,77,.07), rgba(233,169,77,.02));
  border:1px solid rgba(233,169,77,.28);
  border-radius:3px;
}
.answer__label{
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber); margin:0 0 .7rem !important;
}
.answer p:last-child{ margin-bottom:0 }
.answer p{ color:var(--cream) }

/* ---- numbered picks ------------------------------------------------ */
.picks{ list-style:none; margin:2.25rem 0 0; padding:0; counter-reset:pick }
.pick{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.25rem;
  padding:1.9rem 0;
  border-top:1px solid var(--line);
}
.pick:last-child{ border-bottom:1px solid var(--line) }
.pick__n{
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--amber); opacity:.55; margin:0; line-height:1.35;
  font-variant-numeric:tabular-nums;
}
.pick__title{
  font-size:clamp(1.2rem,2.6vw,1.5rem); margin:0 0 .5rem; line-height:1.25;
}
.pick__author{
  display:block; font-family:var(--body); font-style:normal;
  font-size:.82rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); margin-top:.45rem;
}
.pick__tag{
  display:inline-block; margin-bottom:.75rem;
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber);
  padding:.28rem .7rem;
  border:1px solid rgba(233,169,77,.32); border-radius:100px;
}
.pick__why{ color:var(--muted); margin:0 }
@media (max-width:560px){
  .pick{ grid-template-columns:1fr; gap:.4rem }
  .pick__n{ font-size:1rem }
}

/* ---- "where this series fits" card --------------------------------- */
.fitcard-wrap{ padding-block:clamp(3rem,7vw,5rem) }
.fitcard{
  --accent:var(--amber);
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,clamp(190px,22vw,260px)) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
  padding:clamp(1.75rem,4vw,3rem);
  background:var(--ink-1);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:3px;
}
.fitcard::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 120% at 0% 50%, var(--accent), transparent 70%);
  opacity:.10;
}
.fitcard__cover img{
  width:100%; border-radius:2px 4px 4px 2px;
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 20px 46px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(244,237,224,.07);
  transition:transform .4s cubic-bezier(.22,.8,.3,1);
}
.fitcard__cover a:hover img{ transform:translateY(-5px) }
.fitcard__body .book__title{ margin-bottom:.6rem }
.fitcard__body .book__title a{ color:inherit; text-decoration:none }
.fitcard__body .book__title a:hover{ color:var(--amber) }
.fitcard__body p{ color:var(--muted) }
.fitcard__body .book__sub{ margin-bottom:1.25rem }
.fitcard__body .book__actions{ margin-top:1.5rem }
@media (max-width:760px){
  .fitcard{ grid-template-columns:1fr; text-align:left }
  .fitcard__cover{ max-width:200px }
}

/* ---- spec table ----------------------------------------------------- */
.specs{ margin:2rem 0 0; padding:0 }
.spec{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.5rem 1.75rem;
  padding:1.05rem 0;
  border-top:1px solid var(--line);
}
.spec:last-child{ border-bottom:1px solid var(--line) }
.spec dt{
  font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber); margin:0; padding-top:.18rem;
}
.spec dd{ margin:0; color:var(--muted) }
@media (max-width:640px){
  .spec{ grid-template-columns:1fr; gap:.3rem }
}

/* ---- related guide cards -------------------------------------------- */
.relgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.25rem;
}
.relgrid--wide{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.relcard{
  display:block; text-decoration:none;
  padding:1.65rem 1.55rem;
  background:var(--ink-2);
  border:1px solid var(--line); border-radius:3px;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.relcard:hover{ border-color:rgba(233,169,77,.42); transform:translateY(-3px); background:#16202A }
.relcard h3{
  font-family:var(--body); font-weight:600; font-size:1.08rem; letter-spacing:0;
  color:var(--cream); margin:0 0 .5rem;
}
.relcard p{ font-size:.92rem; color:var(--muted); margin:0 }
.morelink{ margin:2.5rem 0 0 }
.morelink a{
  font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none;
}
.morelink a:hover{ text-decoration:underline }

/* ---- FAQ ------------------------------------------------------------- */
.faq{ background:var(--ink-1); border-top:1px solid var(--line) }
.faq__inner{ max-width:calc(48rem + 2 * var(--gutter)); margin-inline:auto }
.faq__item{
  border-top:1px solid var(--line);
}
.faq__item:last-of-type{ border-bottom:1px solid var(--line) }
.faq__item summary{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.35rem 0; cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary h3{
  font-family:var(--body); font-weight:500; font-size:clamp(1rem,2vw,1.12rem);
  letter-spacing:0; line-height:1.5; color:var(--cream); margin:0; flex:1 1 auto;
}
.faq__item summary::after{
  content:"+"; flex:0 0 auto;
  font-size:1.4rem; line-height:1.15; color:var(--amber);
  transition:transform .25s ease;
}
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__item summary:hover h3{ color:var(--amber) }
.faq__a{ padding:0 0 1.5rem; max-width:62ch }
.faq__a p{ color:var(--muted); margin:0 0 1rem }
.faq__more{ margin:0 !important }
.faq__more a{
  font-size:.78rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  text-decoration:none;
}
.faq__more a:hover{ text-decoration:underline }

/* ---- book page header ------------------------------------------------ */
.bookhead{
  display:grid; grid-template-columns:minmax(0,clamp(200px,24vw,290px)) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.bookhead__cover{ position:relative }
.bookhead__cover img{
  width:100%; border-radius:2px 5px 5px 2px;
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 26px 60px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(244,237,224,.08);
}
.bookhead__cover::after{
  content:""; position:absolute; inset:10% -14% -14% -14%; z-index:-1;
  background:radial-gradient(closest-side, var(--accent,var(--amber)), transparent 72%);
  opacity:.28; filter:blur(46px);
}
.bookhead h1{ font-size:clamp(2.1rem,5.4vw,3.6rem); margin-bottom:.85rem; text-wrap:balance }
.bookhead .book__sub{ margin-bottom:1.75rem }
.bookhead .hero__ku{ margin-top:1.25rem }
@media (max-width:800px){
  .bookhead{ grid-template-columns:1fr; gap:2.25rem }
  .bookhead__cover{ max-width:220px }
}

.hero--404{ min-height:78svh }