/* ── BetweenBooks.space · editorial atelier design system ─────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400;1,9..144,500&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --paper:#f6f0e4;
  --paper-2:#ece2d0;
  --paper-3:#e2d4bd;
  --cream:#fbf7ee;
  --ink:#1a1511;
  --espresso:#141009;
  --espresso-2:#211a12;
  --muted:#6f6355;
  --clay:#a3502e;
  --clay-deep:#7c3a20;
  --brass:#c09a5e;
  --line:rgba(26,21,17,.16);
  --line-soft:rgba(26,21,17,.09);
  --line-light:rgba(251,247,238,.14);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Hanken Grotesk',Helvetica,sans-serif;
  --max:1280px;
  --ease:cubic-bezier(.22,.9,.24,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--clay);color:var(--cream)}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  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='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.dark-page .grain{mix-blend-mode:screen;opacity:.35}

.wrap{width:min(calc(100% - 48px),var(--max));margin:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;padding:10px 16px;background:var(--cream);z-index:999;border:1px solid var(--line)}

/* ── header ── */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--clay);z-index:90;transition:width .1s linear}
.header{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid transparent}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:17px;color:#fff;transition:color .35s var(--ease)}
.brand svg{width:26px;height:26px;flex:none}
.brand small{font-weight:400;opacity:.62;letter-spacing:0}
.header.scrolled,.header.on-light{background:rgba(246,240,228,.92);backdrop-filter:blur(18px);border-bottom-color:var(--line-soft)}
.header.scrolled .brand,.header.on-light .brand{color:var(--ink)}
.navlinks{display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.86);transition:color .35s var(--ease)}
.header.scrolled .navlinks,.header.on-light .navlinks{color:var(--ink)}
.navlinks a{position:relative;padding:4px 0;opacity:.85;transition:opacity .2s}
.navlinks a:hover{opacity:1}
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .3s var(--ease)}
.navlinks a:hover::after{right:0}
.navlinks a[aria-current="page"]{opacity:1}
.navlinks a[aria-current="page"]::after{right:0;height:2px;background:var(--clay)}
.nav-right{display:flex;align-items:center;gap:14px}
.social-mini{display:flex;gap:6px}
.social-mini a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:inherit;opacity:.72;transition:opacity .2s,transform .2s}
.social-mini a:hover{opacity:1;transform:translateY(-1px)}
.social-mini svg{width:15px;height:15px}
.menu{display:none;background:none;border:1px solid currentColor;border-radius:50%;width:42px;height:42px;color:#fff;font-size:18px;cursor:pointer}
.header.scrolled .menu,.header.on-light .menu{color:var(--ink)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:85;background:var(--espresso);color:var(--cream);display:flex;flex-direction:column;padding:26px 30px;transform:translateY(-102%);transition:transform .5s var(--ease)}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center}
.drawer nav{display:grid;gap:6px;margin:auto 0;font-family:var(--serif);font-size:clamp(34px,8vw,52px);line-height:1.15}
.drawer nav a{opacity:.9}
.drawer nav a:hover{color:var(--brass)}
.drawer nav span{font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--brass);margin-right:14px;vertical-align:super}
.drawer-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-light);padding-top:20px;font-size:13px}
.drawer-foot .social-mini{color:var(--cream)}

/* ── hero ── */
.hero{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.06);animation:heroIn 2.4s var(--ease) forwards}
@keyframes heroIn{to{transform:scale(1)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,9,6,.5),rgba(12,9,6,.18) 36%,rgba(12,9,6,.62) 72%,rgba(12,9,6,.92)),
             linear-gradient(100deg,rgba(12,9,6,.5) 8%,rgba(12,9,6,0) 62%)}
.hero-content{position:relative;padding:170px 0 0;max-width:1080px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
.kicker::before{content:"";width:34px;height:1px;background:currentColor}
.dark .kicker,.hero .kicker,.photo .kicker,.page-hero .kicker,.book-hero .kicker,.genre .kicker{color:var(--brass)}
.navcta{background:var(--clay);color:#fff;padding:10px 20px;border-radius:100px;font-weight:600;font-size:13px;transition:background .25s,color .25s}
.navcta:hover{background:var(--brass);color:var(--ink)}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:26px 0}
.chips span{font-size:12px;font-weight:500;border:1px solid var(--line);padding:8px 15px;border-radius:100px;color:var(--muted);transition:all .2s}
.chips span:hover{border-color:var(--clay);color:var(--clay)}
.hero h1{font:300 clamp(52px,7.4vw,104px)/.98 var(--serif);letter-spacing:-.045em;margin:22px 0 26px;text-wrap:balance}
.hero h1 em{font-style:italic;font-weight:400;color:var(--brass)}
.hero .lede{font-size:clamp(17px,1.5vw,20px);max-width:700px;color:rgba(255,255,255,.85);margin:0}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;align-items:center}
.hero-meta{display:flex;gap:34px;flex-wrap:wrap;margin:56px 0 44px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);font-size:12.5px;color:rgba(255,255,255,.68)}
.hero-meta strong{display:block;font:500 26px/1.1 var(--serif);color:#fff;letter-spacing:-.02em}

/* staggered load reveal */
.rise{opacity:0;transform:translateY(26px);animation:rise .9s var(--ease) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.18s}.rise.d3{animation-delay:.3s}.rise.d4{animation-delay:.42s}.rise.d5{animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:12px 24px;border:1px solid transparent;font-size:13.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:var(--clay)}
.btn-clay{background:var(--clay);color:#fff}
.btn-clay:hover{background:var(--clay-deep)}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(4px)}
.btn-outline:hover{background:rgba(255,255,255,.14)}
.btn-paper{border-color:var(--ink);color:var(--ink)}
.btn-paper:hover{background:var(--ink);color:var(--cream)}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;border-bottom:1px solid currentColor;padding-bottom:3px}
.textlink svg{width:13px;height:13px}

/* ── sections ── */
.section{padding:clamp(80px,10vw,130px) 0}
.section.tight{padding:clamp(60px,7vw,90px) 0}
.dark{background:var(--espresso);color:var(--cream)}
.dark-2{background:var(--espresso-2);color:var(--cream)}
.paper2{background:var(--paper-2)}
.paper3{background:var(--paper-3)}
.index{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:34px}
.index::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.dark .index{color:rgba(251,247,238,.5)}
.dark .index::after{background:var(--line-light)}
h2.display{font:300 clamp(38px,4.8vw,66px)/1.04 var(--serif);letter-spacing:-.04em;margin:0;text-wrap:balance}
h2.display em{font-style:italic;font-weight:400;color:var(--clay)}
.dark h2.display em{color:var(--brass)}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6}
.muted{color:var(--muted)}
.dark .muted{color:rgba(251,247,238,.62)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:start}

/* ── marquee ── */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;background:var(--paper)}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font:italic 400 15px/1 var(--serif);letter-spacing:.02em;white-space:nowrap;padding:0 26px;color:var(--ink)}
.marquee-track i{font-style:normal;color:var(--clay)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ── process pathway ── */
.pathway{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:64px}
.path{padding:38px 34px 30px 0;border-bottom:1px solid var(--line);position:relative;transition:background .3s}
.path:nth-child(2),.path:nth-child(3){padding-left:34px;border-left:1px solid var(--line)}
.path-no{font:italic 400 15px var(--serif);color:var(--clay)}
.path h3{font:400 clamp(30px,3vw,42px)/1 var(--serif);letter-spacing:-.03em;margin:14px 0 14px}
.path p{color:var(--muted);max-width:380px;margin:0;font-size:15px}
.path-link{margin-top:18px;display:inline-block}

/* ── statement ── */
.statement{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.statement h3{font:300 clamp(30px,3.4vw,46px)/1.1 var(--serif);letter-spacing:-.03em;margin:0}
.statement-copy{font-size:clamp(19px,1.8vw,24px);line-height:1.55;max-width:840px}
.statement-copy strong{font-weight:600}
.statement-copy em{font-family:var(--serif);font-style:italic}

/* ── photo bands ── */
.photo{min-height:74vh;position:relative;background-size:cover;background-position:center;color:#fff;display:flex;align-items:flex-end;isolation:isolate}
.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,9,6,.15),rgba(12,9,6,.82))}
.photo-inner{position:relative;padding:60px 0 64px;max-width:860px}
.photo h2{font:300 clamp(40px,5vw,64px)/1 var(--serif);letter-spacing:-.04em;margin:16px 0 20px}
.photo p{color:rgba(255,255,255,.82);font-size:18px;max-width:720px}

/* ── service features ── */
.feature{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:56px}
.feature:nth-of-type(1){border-top:0}
.media{min-height:560px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.media::after{content:"";position:absolute;inset:0;background:rgba(20,16,9,.08);transition:background .4s}
.feature:hover .media::after{background:rgba(20,16,9,0)}
.copy{padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.copy h3{font:300 clamp(34px,3.6vw,52px)/1.05 var(--serif);letter-spacing:-.035em;margin:14px 0 18px}
.copy p{margin:0 0 26px;max-width:520px}
.svc-list{list-style:none;padding:0;margin:0 0 30px;display:grid;gap:9px;font-size:14.5px;color:var(--muted)}
.svc-list li{display:flex;gap:12px;align-items:baseline}
.svc-list li::before{content:"—";color:var(--clay);flex:none}

/* ── stats strip ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:38px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;font:300 clamp(40px,4.5vw,62px)/1 var(--serif);letter-spacing:-.04em;color:var(--clay)}
.stat b i{font-style:italic;font-size:.55em}
.stat span{display:block;margin-top:10px;font-size:12.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.dark .stat{border-color:var(--line-light)}
.dark .stat b{color:var(--brass)}
.dark .stat span{color:rgba(251,247,238,.55)}

/* ── case library ── */
.case-intro{display:flex;justify-content:space-between;gap:50px;align-items:end;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0}
.filters button{border:1px solid var(--line-light);background:none;color:rgba(251,247,238,.7);padding:9px 16px;font-size:12px;font-weight:500;border-radius:100px;cursor:pointer;transition:all .25s}
.filters button:hover{border-color:rgba(251,247,238,.5);color:#fff}
.filters button.active{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.case-wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:10px}
.case{background:rgba(251,247,238,.045);border:1px solid rgba(251,247,238,.1);overflow:hidden;transition:transform .3s var(--ease),background .3s,border-color .3s}
.case:hover{transform:translateY(-6px);background:rgba(251,247,238,.08);border-color:rgba(251,247,238,.22)}
.case-cover{aspect-ratio:2/3;display:block;overflow:hidden;background:#2c2520;padding:0}
.case-cover img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 20px rgba(0,0,0,.4));transition:transform .35s var(--ease)}
.case:hover .case-cover img{transform:scale(1.03)}
.case-body{padding:18px 18px 20px}
.case-label{font-size:9px;letter-spacing:.16em;color:rgba(251,247,238,.45);text-transform:uppercase;font-weight:600}
.case h3{font:400 24px/1.05 var(--serif);letter-spacing:-.02em;margin:9px 0 4px}
.case .author{font-size:12.5px;color:rgba(251,247,238,.62)}
.case p{font-size:12px;color:rgba(251,247,238,.55);margin:11px 0 0;line-height:1.5}
.case-link{font-size:12px;font-weight:600;color:var(--brass);display:inline-block;margin-top:14px}

/* ── genres ── */
.genres{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:46px}
.genre{min-height:300px;position:relative;background-size:cover;background-position:center;color:#fff;padding:22px;display:flex;align-items:flex-end;overflow:hidden;border:0;text-align:left;cursor:pointer;font:inherit;width:100%;isolation:isolate}
.genre::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,9,6,.05) 30%,rgba(12,9,6,.85));transition:opacity .35s}
.genre:hover::before{opacity:.92}
.genre h3{font:400 clamp(22px,1.9vw,28px)/1.05 var(--serif);letter-spacing:-.02em;margin:7px 0 6px}
.genre p{font-size:12px;color:rgba(255,255,255,.75);margin:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .4s}
.genre:hover p,.genre:focus-visible p{max-height:70px;opacity:1}
.g-romance{background-image:url(img/g-romance.webp)}
.g-thriller{background-image:url(img/g-thriller.webp)}
.g-literary{background-image:url(img/g-literary.webp)}
.g-children{background-image:url(img/g-children.webp)}
.g-fantasy{background-image:url(img/g-fantasy.webp)}
.g-mystery{background-image:url(img/g-mystery.webp)}
.g-crime{background-image:url(img/g-crime.webp)}
.g-ya{background-image:url(img/g-ya.webp)}
.g-memoir{background-image:url(img/g-memoir.webp)}
.g-nonfiction{background-image:url(img/g-nonfiction.webp)}

/* genre modal */
.genre-modal{position:fixed;inset:0;z-index:100;background:rgba(14,10,6,.74);backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.genre-modal.open{opacity:1;pointer-events:auto}
.genre-dialog{width:min(780px,100%);max-height:min(740px,calc(100svh - 48px));overflow:auto;background:var(--cream);border:1px solid var(--line);box-shadow:0 40px 110px rgba(0,0,0,.45);padding:40px;position:relative;transform:translateY(16px);transition:transform .35s var(--ease)}
.genre-modal.open .genre-dialog{transform:none}
.genre-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;font-size:18px;line-height:1}
.genre-close:hover{background:var(--ink);color:var(--cream)}
.genre-dialog h3{font:300 clamp(34px,4vw,46px)/1 var(--serif);letter-spacing:-.03em;margin:12px 48px 12px 0}
.assessment-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);margin-top:24px}
.assessment-item{padding:20px 18px 20px 0;border-bottom:1px solid var(--line)}
.assessment-item:nth-child(even){padding-left:18px;border-left:1px solid var(--line)}
.assessment-item strong{display:block;font:400 21px/1.1 var(--serif);margin-bottom:7px}
.assessment-item span{font-size:13px;color:var(--muted)}
.genre-tip{margin-top:26px;padding:20px 22px;background:var(--paper-2);font-size:14px;border-left:3px solid var(--clay)}
.genre-tip strong{display:block;font-family:var(--serif);font-weight:500;font-size:17px;margin-bottom:6px}

/* ── book finder ── */
.finder-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end}
.finder-form{display:flex;gap:10px;margin-top:28px;max-width:560px}
.finder-form input{flex:1;padding:15px 18px;background:rgba(255,255,255,.55);border:1px solid var(--line);outline:none;transition:border-color .2s,background .2s}
.finder-form input:focus{border-color:var(--clay);background:rgba(255,255,255,.8)}
.finder-status{font-size:13px;color:var(--muted);margin-top:12px;min-height:20px}
.book-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.book-card{background:rgba(255,255,255,.5);border:1px solid var(--line-soft);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.book-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -18px rgba(26,21,17,.3)}
.book-cover{aspect-ratio:2/3;background:#cfc2af;display:grid;place-items:center;overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:contain}
.book-cover .no-cover{font:italic 400 15px var(--serif);color:#8d7f6c}
.book-info{padding:16px 16px 4px}
.book-title{font:400 21px/1.1 var(--serif);letter-spacing:-.02em}
.book-author{font-size:12.5px;color:var(--muted);margin-top:5px}
.book-meta{font-size:11px;color:var(--muted);margin-top:4px}
.book-open{padding:12px 16px 16px;font-size:12px;font-weight:600;color:var(--clay)}
.skeleton{background:linear-gradient(100deg,rgba(255,255,255,.35) 40%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.35) 60%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ── before / after ── */
.beforeafter{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;border:1px solid var(--line)}
.ba{padding:clamp(30px,4vw,50px)}
.ba.before{background:var(--paper-2)}
.ba.after{background:var(--espresso);color:var(--cream)}
.ba h3{font:300 clamp(26px,2.6vw,36px)/1.2 var(--serif);letter-spacing:-.02em;margin:12px 0}
.ba small{display:block;color:var(--muted);margin-top:16px;font-size:13px}
.ba.after small{color:rgba(251,247,238,.5)}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;cursor:pointer;font:400 clamp(19px,1.8vw,24px)/1.25 var(--serif);letter-spacing:-.015em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:300;color:var(--clay);transition:transform .3s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 4px 26px;color:var(--muted);max-width:680px}
.dark .faq{border-color:var(--line-light)}
.dark .faq details{border-color:var(--line-light)}
.dark .faq .faq-a{color:rgba(251,247,238,.62)}

/* ── big CTA ── */
.dark .directory{border-color:var(--line-light)}
.dark .entry{border-color:var(--line-light)}
.dark .entry:hover{background:var(--espresso-2)}
.dark .entry p{color:rgba(251,247,238,.6)}
.dark .timeline{border-color:var(--line-light)}
.dark .step{border-color:var(--line-light)}
.dark .step p{color:rgba(251,247,238,.62)}
.dark .copy p,.dark .svc-list li{color:rgba(251,247,238,.62)}
.dark .feature{border-color:var(--line-light)}
.dark .genre-tip{background:var(--espresso-2);color:rgba(251,247,238,.8)}
.dark .bigmail{color:var(--cream)}
.cta-final{text-align:left}
.cta-final h2{font:300 clamp(44px,6vw,84px)/1 var(--serif);letter-spacing:-.045em;margin:18px 0 22px;max-width:900px}
.cta-final h2 em{font-style:italic;color:var(--brass)}

/* ── page hero (subpages) ── */
.page-hero{min-height:72svh;position:relative;color:#fff;display:flex;align-items:flex-end;isolation:isolate;background-size:cover;background-position:center}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,9,6,.44),rgba(12,9,6,.24) 40%,rgba(12,9,6,.88))}
.page-hero .wrap{padding:180px 0 70px}
.page-hero h1{font:300 clamp(46px,6.4vw,92px)/.98 var(--serif);letter-spacing:-.045em;margin:20px 0 22px;max-width:940px;text-wrap:balance}
.page-hero h1 em{font-style:italic;font-weight:400;color:var(--brass)}
.page-hero p{font-size:clamp(16px,1.4vw,19px);max-width:660px;color:rgba(255,255,255,.85);margin:0}

/* ── entry lists (services detail) ── */
.directory{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.entry{padding:36px 30px 36px 0;border-bottom:1px solid var(--line);transition:background .25s}
.entry:nth-child(even){padding-left:30px;border-left:1px solid var(--line)}
.entry:hover{background:var(--paper-2)}
.entry h3{font:400 clamp(26px,2.4vw,34px)/1.05 var(--serif);letter-spacing:-.02em;margin:10px 0 10px}
.entry p{color:var(--muted);margin:0;font-size:14.5px}
.entry .no{font:italic 400 14px var(--serif);color:var(--clay)}

/* ── timeline ── */
.timeline{border-top:1px solid var(--line);margin-top:52px}
.step{display:grid;grid-template-columns:110px 1fr 1.4fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step-no{font:italic 300 clamp(28px,3vw,40px)/1 var(--serif);color:var(--clay)}
.step h3{font:400 clamp(24px,2.2vw,32px)/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 8px}
.step p{color:var(--muted);margin:0;font-size:15px}

/* ── book page ── */
.book-hero{padding:150px 0 90px;background:var(--espresso);color:var(--cream);position:relative;overflow:hidden}
.book-layout{display:grid;grid-template-columns:360px 1fr;gap:clamp(44px,6vw,90px);align-items:start}
.book-stage{background:#2b231b;padding:26px;position:sticky;top:120px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.book-stage img{width:100%;aspect-ratio:2/3;object-fit:contain;display:block}
.book-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600}
.book-hero h1{font:300 clamp(46px,6vw,84px)/.96 var(--serif);letter-spacing:-.045em;margin:14px 0 10px}
.book-sub{font-size:17px;color:rgba(251,247,238,.66)}
.book-copy{font-size:18px;color:rgba(251,247,238,.84);max-width:760px;line-height:1.65}
.book-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);margin-top:44px}
.fact{padding:20px 22px 20px 0;border-right:1px solid var(--line-light)}
.fact:not(:first-child){padding-left:22px}
.fact:last-child{border-right:0}
.fact span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(251,247,238,.45);font-weight:600}
.fact strong{display:block;margin-top:5px;font-size:13.5px;font-weight:500}
.book-body{padding:clamp(70px,8vw,110px) 0}
.book-body-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,6vw,90px)}
.book-body h2{font:300 clamp(34px,4vw,54px)/1.05 var(--serif);letter-spacing:-.035em;margin:0 0 22px}
.lens-list{border-top:1px solid var(--line)}
.lens{padding:20px 0;border-bottom:1px solid var(--line)}
.lens strong{display:block;font:400 23px/1.1 var(--serif);margin-bottom:7px;letter-spacing:-.02em}
.lens span{color:var(--muted);font-size:14.5px}
.related{background:var(--paper-2);padding:clamp(70px,8vw,100px) 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.rel-card{background:var(--cream);border:1px solid var(--line-soft);transition:transform .3s var(--ease),box-shadow .3s}
.rel-card:hover{transform:translateY(-5px);box-shadow:0 24px 44px -20px rgba(26,21,17,.28)}
.rel-card img{width:100%;aspect-ratio:2/3;object-fit:contain;background:#e4d8c5;padding:14px}
.rel-body{padding:16px 18px 20px;border-top:1px solid var(--line-soft)}
.rel-body b{display:block;font:400 21px/1.1 var(--serif)}
.rel-body span{font-size:12px;color:var(--muted)}

/* ── contact ── */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(44px,6vw,90px)}
.form{display:grid;gap:18px}
.field label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;background:rgba(255,255,255,.55);border:1px solid var(--line);outline:none;transition:border-color .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--clay);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.form-note{font-size:12.5px;color:var(--muted)}
.contact-aside{display:grid;gap:30px;align-content:start}
.contact-block h3{font:400 26px/1.1 var(--serif);margin:0 0 10px}
.contact-block p{margin:0;color:var(--muted);font-size:14.5px}
.contact-block a.bigmail{font:400 clamp(20px,2vw,26px)/1.2 var(--serif);border-bottom:1px solid var(--line)}

/* social row */
.social-row{display:flex;gap:10px;flex-wrap:wrap}
.social-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border:1px solid var(--line);border-radius:100px;font-size:13px;font-weight:600;transition:all .25s var(--ease)}
.social-pill svg{width:15px;height:15px}
.social-pill:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:translateY(-2px)}
.dark .social-pill,.footer .social-pill{border-color:var(--line-light);color:var(--cream)}
.dark .social-pill:hover,.footer .social-pill:hover{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:translateY(-2px)}

/* ── footer ── */
.footer{background:var(--espresso);color:var(--cream);padding:clamp(70px,8vw,100px) 0 34px}
.footergrid{display:grid;grid-template-columns:1.3fr .7fr .7fr .9fr;gap:clamp(30px,4vw,60px)}
.footer h2{font:300 clamp(34px,3.4vw,48px)/1.05 var(--serif);letter-spacing:-.035em;margin:12px 0 16px}
.footer h2 em{font-style:italic;color:var(--brass)}
.footer p{color:rgba(251,247,238,.55);max-width:380px;font-size:14.5px}
.footlabel{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--brass);margin-bottom:18px}
.footlinks{display:grid;gap:10px;font-size:14px}
.footlinks a{color:rgba(251,247,238,.72);transition:color .2s;width:fit-content}
.footlinks a:hover{color:var(--cream)}
.footerbottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:30px;margin-top:56px;border-top:1px solid var(--line-light);font-size:12px;color:rgba(251,247,238,.4)}

/* ── reveal on scroll ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

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

/* ── responsive ── */
@media(max-width:1100px){
  .case-wrap{grid-template-columns:repeat(3,1fr)}
  .genres{grid-template-columns:repeat(3,1fr)}
  .book-grid{grid-template-columns:repeat(3,1fr)}
  .book-layout{grid-template-columns:300px 1fr}
}
@media(max-width:1000px){
  .navlinks{display:none}
  .menu{display:grid;place-items:center}
  .grid2,.split,.finder-grid,.feature,.statement,.contact-grid,.book-body-grid{grid-template-columns:1fr}
  .feature .media{min-height:380px;order:-1}
  .pathway,.beforeafter{grid-template-columns:1fr}
  .path,.path:nth-child(2),.path:nth-child(3){padding:26px 0;border-left:0}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat{border-top:1px solid var(--line)}
  .stat:nth-child(-n+2){border-top:0}
  .dark .stat{border-color:var(--line-light)}
  .directory{grid-template-columns:1fr}
  .entry:nth-child(even){padding-left:0;border-left:0}
  .step{grid-template-columns:60px 1fr;gap:18px}
  .step p{grid-column:2}
  .footergrid{grid-template-columns:1fr 1fr}
  .book-layout{grid-template-columns:1fr}
  .book-stage{position:static;max-width:400px}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .wrap{width:min(calc(100% - 36px),var(--max))}
  .hero{min-height:92svh}
  .hero-content{padding-top:130px}
  .hero-meta{gap:22px}
  .section{padding:72px 0}
  .case-wrap,.genres,.book-grid,.footergrid,.beforeafter,.related-grid{grid-template-columns:1fr}
  .genres{gap:10px}
  .genre{min-height:230px}
  .finder-form{flex-direction:column}
  .photo{min-height:66vh}
  .book-facts{grid-template-columns:1fr 1fr}
  .fact{border-right:0!important;padding-left:0!important;padding-right:14px}
  .fact:nth-child(even){padding-left:14px;border-left:1px solid var(--line-light)!important}
  .assessment-grid{grid-template-columns:1fr}
  .assessment-item:nth-child(even){padding-left:0;border-left:0}
  .social-mini{display:none}
  .genre-dialog{padding:30px 22px}
}