/* ============================================================
   Rainbow Bookstore — shared styles
   ============================================================ */
:root{
  --paper:#ece2cf; --card:#f4ecdb; --band:#efe4cd;
  --ink:#2a2018; --head:#241d15; --serif-body:#514636; --muted:#8a7c66;
  --border:#d8c9a8; --border2:#dfd0af;
  --link:#6f2b2b; --link-h:#8f3a3a;
  --green:#2f4632; --green-2:#3b5840; --green-line:#3f583f;
  --amber:#e9c46a; --amber-2:#c6862b;
  /* rainbow spectrum */
  --c-red:#b0453b; --c-amber:#c6862b; --c-green:#4b7a4e;
  --c-teal:#2f7079; --c-blue:#41508a; --c-purple:#7a4a72;
  --serif:'Spectral',Georgia,serif;
  --sans:'Karla',system-ui,sans-serif;
  --wrap:1240px; --measure:70ch;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:var(--link); text-decoration:none;}
a:hover{color:var(--link-h);}
h1,h2,h3,h4{font-family:var(--serif); color:var(--head); margin:0; line-height:1.1; letter-spacing:-0.01em;}
p{margin:0 0 1.1em;}
::selection{background:var(--amber); color:#2a2018;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}
.eyebrow{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 12px;}
.skip{position:absolute; left:-9999px;}
.skip:focus{position:fixed; left:16px; top:16px; z-index:200; background:var(--green); color:#f4ecdb; padding:10px 16px; border-radius:8px;}

/* rainbow top rule ---------------------------------------- */
.rainbow-rule{display:flex; height:5px;}
.rainbow-rule span{flex:1;}
.rainbow-rule span:nth-child(1){background:var(--c-red);}
.rainbow-rule span:nth-child(2){background:var(--c-amber);}
.rainbow-rule span:nth-child(3){background:var(--c-green);}
.rainbow-rule span:nth-child(4){background:var(--c-teal);}
.rainbow-rule span:nth-child(5){background:var(--c-blue);}
.rainbow-rule span:nth-child(6){background:var(--c-purple);}

/* ---- header / nav --------------------------------------- */
.site-head{background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100;}
.head-inner{display:flex; align-items:center; justify-content:space-between; height:84px; gap:16px;}
.brand{display:flex; align-items:center; gap:11px; color:var(--green); flex-shrink:0;}
.brand:hover{color:var(--green);}
.brand-bars{display:inline-flex; gap:2px;}
.brand-bars i{width:4px; height:24px; border-radius:1px; display:block;}
.brand-bars i:nth-child(1){background:var(--c-red);}
.brand-bars i:nth-child(2){background:var(--c-amber);}
.brand-bars i:nth-child(3){background:var(--c-green);}
.brand-bars i:nth-child(4){background:var(--c-teal);}
.brand-bars i:nth-child(5){background:var(--c-blue);}
.brand-bars i:nth-child(6){background:var(--c-purple);}
.brand-name{font-family:var(--serif); font-weight:700; font-size:22px; line-height:1; white-space:nowrap;}

.nav-toggle,.nav-toggle-label{display:none;}
.site-nav{display:flex; align-items:center; gap:2px;}
.nav-list{list-style:none; display:flex; align-items:center; gap:0; margin:0; padding:0;}
.nav-list > li{position:relative;}
.nav-list > li > a{display:block; padding:9px 9px; font-size:13.5px; font-weight:600; color:var(--ink); border-radius:6px; white-space:nowrap;}
.nav-list > li > a:hover{background:#e9ddc3; color:var(--green);}
.has-sub > a::after{content:"▾"; font-size:9px; margin-left:5px; opacity:.55; vertical-align:middle;}
.nav-sub{list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 6px); left:0; min-width:216px;
  background:var(--card); border:1px solid var(--border); border-top:3px solid var(--sub,#333);
  border-radius:0 0 9px 9px; box-shadow:0 16px 34px -14px rgba(58,42,20,.42);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease; z-index:120;}
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub{opacity:1; visibility:visible; transform:translateY(0);}
/* hover-safety bridge so cursor never crosses a dead gap */
.has-sub::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px;}
.nav-sub a{display:block; padding:9px 11px; font-size:14px; font-weight:500; color:#4a4038; border-radius:6px;}
.nav-sub a:hover{background:#e9ddc3; color:var(--head);}
.nav-cta{margin-left:8px; padding:10px 15px; background:var(--green); color:#f4ecdb; font-size:13.5px; font-weight:700; border-radius:999px; white-space:nowrap; flex-shrink:0;}
.nav-cta:hover{background:var(--green-2); color:#f4ecdb;}

/* ---- generic even-height card grid ---------------------- */
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border2); border-radius:12px; overflow:hidden; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-4px); box-shadow:0 22px 40px -20px rgba(47,34,15,.5); color:var(--ink);}
.card-media{position:relative; aspect-ratio:16/10; background:#e4d7bf; overflow:hidden;}
.card-media img{width:100%; height:100%; object-fit:cover;}
.card-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1;}
.card-title{font-size:21px; line-height:1.18; margin:0 0 9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-dek{font-size:15px; line-height:1.5; color:var(--serif-body); font-family:var(--serif); margin:0 0 16px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.card-meta{font-size:13.5px; color:var(--muted); font-weight:600;}
.tag-pill{position:absolute; top:12px; left:12px; color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px; border-radius:999px;}

/* section heading rule */
.sec-head{display:flex; align-items:center; gap:16px; margin-bottom:28px;}
.sec-dot{width:11px; height:11px; border-radius:50%; flex-shrink:0;}
.sec-head h2{font-size:30px;}
.sec-head .rule{flex:1; height:1px; background:var(--border);}
.sec-head .more{font-size:14px; font-weight:700; white-space:nowrap;}

/* ---- footer --------------------------------------------- */
.site-foot{background:var(--green); color:#cabd9f;}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding:54px 0 40px; border-bottom:1px solid var(--green-line);}
.foot-brand .brand-name{color:#f4ecdb;}
.foot-brand p{font-size:15px; line-height:1.55; margin:14px 0 0; max-width:28em;}
.foot-col h3{font-size:16px; color:#f4ecdb; margin-bottom:12px;}
.foot-col a{display:block; font-size:14.5px; color:#cabd9f; padding:5px 0;}
.foot-col a:hover{color:#f4ecdb;}
.foot-bottom{padding:24px 0 40px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.foot-bottom p{font-size:13.5px; color:#a89a7c; margin:0; max-width:44em;}
.foot-bottom .made{font-size:13.5px; color:#a89a7c;}

/* ============================================================
   HOMEPAGE
   ============================================================ */
.hero{padding:56px 0 40px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.hero h1{font-size:58px; font-weight:800; line-height:1.03; margin:0 0 22px; text-wrap:balance;}
.hero .dek{font-family:var(--serif); font-size:22px; line-height:1.5; color:var(--serif-body); margin:0 0 30px; max-width:30ch; text-wrap:pretty;}
.hero-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-size:15px; font-weight:700; cursor:pointer; border:none; font-family:var(--sans);}
.btn-oxblood{background:var(--link); color:#f4ecdb;} .btn-oxblood:hover{background:#853636; color:#f4ecdb;}
.btn-amber{background:var(--amber-2); color:#2a1e0c;} .btn-amber:hover{background:#d9992f; color:#2a1e0c;}
.btn-green{background:var(--green); color:#f4ecdb;} .btn-green:hover{background:var(--green-2); color:#f4ecdb;}
.btn-ghost{border:1.5px solid #c9b78f; color:#4a4038; background:transparent;} .btn-ghost:hover{background:#e9ddc3; color:#4a4038;}
.hero-figure{position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(47,34,15,.55); border:1px solid var(--border);}
.hero-figure img{width:100%; height:100%; object-fit:cover;}
.read-meta{font-size:14.5px; color:var(--muted); font-weight:600;}

/* shelf spotlight (signature) */
.spotlight{background:var(--green); color:#eadfc8;}
.spotlight-inner{padding:60px 0;}
.spotlight-head{display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap;}
.spotlight-head .eyebrow{color:var(--amber);}
.spotlight-head h2{font-size:38px; font-weight:700; color:#f4ecdb;}
.spotlight-head p{max-width:24em; font-size:15px; line-height:1.55; color:#c4b896; margin:0;}
.shelf-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
.shelf-card{display:flex; flex-direction:column; background:var(--card); color:var(--head); border-radius:10px; overflow:hidden; min-height:196px; transition:transform .18s ease;}
.shelf-card:hover{transform:translateY(-4px); color:var(--head);}
.shelf-card .top{height:8px;}
.shelf-card .in{padding:18px 16px 20px; display:flex; flex-direction:column; flex:1;}
.shelf-icon{font-size:26px; margin-bottom:12px; line-height:1;}
.shelf-name{font-family:var(--serif); font-weight:700; font-size:18px; line-height:1.15; margin-bottom:8px;}
.shelf-desc{font-size:13px; line-height:1.45; color:#6a5d4a; flex:1;}
.shelf-count{font-size:12.5px; font-weight:700; margin-top:12px;}

/* fresh reviews */
.reviews{padding:68px 0 20px;}
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.stars{color:var(--amber-2); font-size:14px; letter-spacing:1px;}
.rating-word{font-size:12.5px; color:var(--muted); font-weight:600; margin-left:6px;}

/* reading-list module */
.rl-module{padding:68px 0;}
.rl-box{background:var(--card); border:1px solid var(--border2); border-radius:18px; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;}
.rl-pitch{padding:52px 48px;}
.rl-pitch .eyebrow{color:var(--amber-2);}
.rl-pitch h2{font-size:40px; font-weight:800; line-height:1.06; margin:0 0 18px;}
.rl-pitch .dek{font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--serif-body); margin:0 0 26px;}
.rl-actions{display:flex; gap:14px; flex-wrap:wrap;}
.rl-list{background:#efe4cd; border-left:1px solid var(--border2); padding:34px 40px;}
.rl-list .lbl{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#9a8a6f; margin-bottom:8px;}
.rl-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid #e0d1b0;}
.rl-row:last-child{border-bottom:none;}
.rl-n{font-family:var(--serif); font-weight:700; font-size:17px; width:22px; flex-shrink:0;}
.rl-t{font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.25;}
.rl-a{font-size:13px; color:var(--muted); margin-top:2px;}
.rl-add{margin-left:auto; border:none; background:transparent; cursor:pointer; width:30px; height:30px; border-radius:50%; font-size:17px; line-height:1; color:var(--green); flex-shrink:0;}
.rl-add:hover{background:#e4d7bf;}
.rl-add[aria-pressed="true"]{background:var(--green); color:#f4ecdb;}
.rl-count{font-size:13px; color:#9a8a6f; margin-top:14px;}

/* talked-about */
.talked{background:#efe4cd; border-top:1px solid var(--border2); border-bottom:1px solid var(--border2);}
.talked-inner{padding:66px 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start;}
.talked-intro{position:sticky; top:108px;}
.talked-intro .eyebrow{color:var(--c-teal);}
.talked-intro h2{font-size:38px; font-weight:800; line-height:1.08; margin:0 0 18px; text-wrap:balance;}
.talked-intro p{font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--serif-body); margin:0;}
.talked-rows{display:flex; flex-direction:column; gap:16px;}
.talked-row{display:grid; grid-template-columns:76px 1fr; gap:20px; background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:20px 22px; align-items:center; color:var(--ink); transition:transform .16s ease;}
.talked-row:hover{transform:translateX(4px); color:var(--ink);}
.spine{width:76px; height:104px; border-radius:4px 6px 6px 4px; box-shadow:inset 4px 0 0 rgba(0,0,0,.18), 0 6px 14px -6px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:8px;}
.spine span{font-family:var(--serif); font-weight:600; font-size:13px; color:rgba(255,255,255,.95); text-align:center; line-height:1.15;}
.talked-row h3{font-size:20px; line-height:1.2; margin:0 0 5px;}
.talked-row .auth{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:9px;}
.talked-row p{font-size:14.5px; line-height:1.5; color:var(--serif-body); margin:0;}

/* feature cards */
.features{padding:68px 0;}
.features-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.feature{position:relative; border-radius:16px; overflow:hidden; min-height:380px; color:#fff; display:flex; align-items:end; box-shadow:0 24px 48px -22px rgba(47,34,15,.55);}
.feature img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.feature .cap{position:relative; z-index:2; padding:34px 32px; width:100%;}
.feature.indie .cap{background:linear-gradient(to top, rgba(30,22,44,.94), rgba(30,22,44,.15) 72%, transparent);}
.feature.life .cap{background:linear-gradient(to top, rgba(58,32,54,.94), rgba(58,32,54,.15) 72%, transparent);}
.feature .eyebrow{margin-bottom:10px;}
.feature.indie .eyebrow{color:#b7b0e0;}
.feature.life .eyebrow{color:#dcb9d4;}
.feature h3{font-size:28px; line-height:1.12; margin:0 0 8px; color:#fff;}
.feature p{font-size:15px; line-height:1.5; margin:0; max-width:34ch;}
.feature.indie p{color:#e4e0f2;} .feature.life p{color:#f1e2ee;}

/* ---- supporters (woven, native voice) ------------------- */
.supporter{border-top:1px dashed #d3c19c; border-bottom:1px dashed #d3c19c; margin:8px 0;}
.supporter-inner{padding:30px 0; display:grid; grid-template-columns:.7fr 1.3fr; gap:36px; align-items:center;}
.supporter .kicker{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-2); margin:0 0 8px;}
.supporter h3{font-family:var(--serif); font-size:24px; line-height:1.15; margin:0 0 8px;}
.supporter .say{font-size:14.5px; line-height:1.5; color:var(--serif-body); margin:0; max-width:40ch; font-family:var(--serif);}
.sponsor-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.sponsor-roll{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.sponsor{display:flex; flex-direction:column; gap:8px; background:#241d15; border:1px solid #3a3122; border-radius:10px; padding:14px; color:#eadfc8; overflow:hidden;}
.sponsor:hover{border-color:rgba(233,196,106,.5); color:#eadfc8;}
.sponsor img{width:100%; height:52px; object-fit:contain; border-radius:5px;}
.sponsor-blurb{font-size:12.5px; line-height:1.4; color:#b6ac93; min-height:0;}
.sponsor-blurb:empty{display:none;}

/* ============================================================
   CATEGORY / SECTIONS HUB
   ============================================================ */
.page-head{padding:52px 0 30px;}
.page-head .eyebrow{color:var(--accent,#4b7a4e);}
.page-head h1{font-size:48px; font-weight:800; line-height:1.04; margin:0 0 14px;}
.page-head .intro{font-family:var(--serif); font-size:20px; line-height:1.5; color:var(--serif-body); margin:0; max-width:46ch;}
.cat-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--border);}
.cat-list li{border-bottom:1px solid var(--border);}
.cat-list a{display:grid; grid-template-columns:120px 1fr auto; gap:26px; align-items:center; padding:24px 6px; color:var(--ink);}
.cat-list a:hover{color:var(--ink); background:#f4ecdb;}
.cat-thumb{width:120px; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:#e4d7bf;}
.cat-thumb img{width:100%; height:100%; object-fit:cover;}
.cat-copy h3{font-size:23px; line-height:1.18; margin:0 0 6px;}
.cat-copy p{font-size:15px; color:var(--serif-body); font-family:var(--serif); margin:0; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.cat-copy .m{font-size:13px; color:var(--muted); font-weight:600; margin-top:8px;}
.cat-go{font-size:22px; color:var(--muted);}
.hub-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:14px 0 60px;}
.hub-card{display:block; background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:26px 26px 28px; color:var(--ink); border-top:5px solid var(--accent,#4b7a4e); transition:transform .16s ease;}
.hub-card:hover{transform:translateY(-4px); color:var(--ink);}
.hub-card .ic{font-size:26px;}
.hub-card h3{font-size:22px; margin:12px 0 8px;}
.hub-card p{font-size:14.5px; color:var(--serif-body); font-family:var(--serif); margin:0 0 12px; line-height:1.45;}
.hub-card .n{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post{padding-bottom:20px;}
.post-head{max-width:900px; margin:0 auto; padding:54px 32px 22px;}
.crumb{display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:22px; flex-wrap:wrap;}
.crumb a{font-weight:700;}
.crumb .sep{color:#b6a685;}
.crumb .cur{color:var(--muted);}
.post-head h1{font-size:clamp(38px,5vw,56px); font-weight:800; line-height:1.04; margin:0 0 20px; text-wrap:balance;}
.post-dek{font-family:var(--serif); font-size:23px; line-height:1.45; color:var(--serif-body); margin:0 0 26px; text-wrap:pretty;}
.byline{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--border2); border-bottom:1px solid var(--border2);}
.byline .who{display:flex; align-items:center; gap:12px;}
.avatar{width:44px; height:44px; border-radius:50%; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:17px; flex-shrink:0;}
.byline .name{font-size:14.5px; font-weight:700;}
.byline .sub{font-size:13.5px; color:var(--muted);}
.post-hero{max-width:1180px; margin:8px auto 0; padding:8px 32px 0;}
.post-hero figure{margin:0;}
.post-hero .frame{position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; box-shadow:0 28px 56px -26px rgba(47,34,15,.5); border:1px solid var(--border);}
.post-hero img{width:100%; height:100%; object-fit:cover;}
.post-hero figcaption{font-size:14px; color:var(--muted); margin:12px 2px 0; font-style:italic; font-family:var(--serif); max-width:70ch;}

/* body: off-centre measure with breathing room for marginal quotes */
.article-body{max-width:760px; margin:44px auto 0; padding-inline:32px; font-family:var(--serif); font-size:21px; line-height:1.66; color:#33291d;}
.article-body > p{margin:0 0 1.15em; max-width:var(--measure);}
.article-body .lead{font-size:24px; line-height:1.5; color:#2a2018;}
.article-body .lead::first-letter{float:left; font-weight:700; font-size:4.4em; line-height:.82; padding:6px 12px 0 0; color:var(--accent,#6f2b2b);}
.sec-num{display:flex; align-items:baseline; gap:16px; margin:48px 0 14px;}
.sec-num .no{font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:.1em; color:var(--accent,#6f2b2b); background:transparent; border:1.5px solid currentColor; border-radius:999px; padding:3px 11px; flex-shrink:0;}
.sec-num h2{font-size:29px; line-height:1.18;}
.article-body h3{font-size:23px; margin:32px 0 10px;}
.article-body a{color:var(--link); text-decoration:underline; text-decoration-color:rgba(111,43,43,.35); text-underline-offset:3px;}
.article-body a:hover{text-decoration-color:var(--link-h);}
.article-body hr{border:none; border-top:1px solid var(--border); max-width:120px; margin:34px 0;}
.entity-ref{white-space:nowrap;}

/* components */
.lead{}
.pullquote{margin:34px 0; padding:6px 0 6px 26px; border-left:4px solid var(--accent,#b0453b);}
.pullquote p{font-family:var(--serif); font-style:italic; font-weight:500; font-size:27px; line-height:1.34; color:var(--head); margin:0; max-width:22ch;}
/* full-bleed marginal pullquote on wide screens */
@media(min-width:1260px){  /* was 1100: the 340px marginal pullquote only fits from 1260 */
  .pullquote.margin{float:right; width:340px; margin:10px -280px 20px 34px; padding-left:0; padding-right:24px; border-left:none; border-right:4px solid var(--accent,#b0453b); text-align:right;}
  .pullquote.margin p{max-width:none;}
}
.blockquote{margin:30px 0; padding:18px 24px; background:var(--band); border-radius:12px;}
.blockquote p{font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.4; margin:0 0 8px;}
.blockquote cite{font-family:var(--sans); font-style:normal; font-size:14px; font-weight:600; color:var(--muted);}
.callout{margin:30px 0; padding:22px 24px; background:var(--band); border:1px solid var(--border2); border-left:5px solid var(--accent,#c6862b); border-radius:10px;}
.callout p{font-family:var(--sans); font-size:16px; line-height:1.55; color:#4a4038; margin:0;}
.note{font-family:var(--sans); font-size:15.5px; line-height:1.5; color:var(--muted); background:#f4ecdb; border:1px dashed var(--border); border-radius:8px; padding:14px 16px; margin:24px 0; max-width:var(--measure);}
.note::before{content:"Note — "; font-weight:700; color:var(--accent,#6f2b2b);}

/* data */
.versus,.datatable{width:100%; border-collapse:collapse; margin:30px 0; font-family:var(--sans); font-size:15.5px;}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--border2); vertical-align:top;}
.versus thead th,.datatable thead th{font-weight:700; color:var(--head); background:var(--band); font-size:13px; letter-spacing:.05em; text-transform:uppercase;}
.versus tbody tr:nth-child(even),.datatable tbody tr:nth-child(even){background:#f4ecdb;}
.versus th[scope=row]{font-family:var(--serif); font-weight:600; color:var(--head);}
.statrow{display:flex; flex-wrap:wrap; gap:16px; margin:30px 0;}
.statblock{flex:1; min-width:150px; background:var(--card); border:1px solid var(--border2); border-top:4px solid var(--accent,#4b7a4e); border-radius:10px; padding:20px 18px; text-align:center;}
.stat-num{display:block; font-family:var(--serif); font-weight:800; font-size:40px; line-height:1; color:var(--head);}
.stat-label{display:block; font-family:var(--sans); font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.35;}

.timeline{list-style:none; margin:30px 0; padding:0; border-left:2px solid var(--border);}
.timeline li{position:relative; padding:0 0 22px 26px;}
.timeline li::before{content:""; position:absolute; left:-7px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--accent,#4b7a4e); border:2px solid var(--paper);}
.t-when{display:block; font-family:var(--sans); font-weight:700; font-size:14px; color:var(--accent,#4b7a4e); margin-bottom:3px;}
.t-what{display:block; font-family:var(--serif); font-size:17px; line-height:1.4; color:#33291d;}

.chart{margin:30px 0; font-family:var(--sans);}
.chart svg{width:100%; height:auto; display:block; overflow:visible;}
.chart figcaption{font-size:14px; color:var(--muted); margin-top:12px; font-family:var(--sans);}
.chart .bar-rect{transition:opacity .2s;}
.chart text{font-family:var(--sans);}

.article-figure{margin:34px 0;}
.article-figure img{width:100%; border-radius:12px; border:1px solid var(--border);}
.article-figure figcaption{font-size:14px; color:var(--muted); margin-top:10px; font-style:italic; font-family:var(--serif);}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:34px 0;}
.gallery figure{margin:0;} .gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--border);}
.gallery figcaption{font-size:12.5px; color:var(--muted); margin-top:6px;}

.map-figure{margin:34px 0;}
.map-slot{aspect-ratio:16/9; background:repeating-linear-gradient(45deg,#e4d7bf,#e4d7bf 12px,#e9dcc0 12px,#e9dcc0 24px); border:1px dashed var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; text-align:center; padding:20px;}
.map-figure figcaption{font-size:14px; color:var(--muted); margin-top:10px; font-style:italic; font-family:var(--serif);}

.profile-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0;}
.profile-card{background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:22px; display:flex; flex-direction:column;}
.profile-card .p-photo{width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:12px;}
.profile-card.no-photo::before{content:""; width:56px; height:56px; border-radius:50%; background:var(--accent,#4b7a4e); margin-bottom:12px; opacity:.16;}
.profile-card h3{font-size:20px; margin:0 0 3px;}
.profile-card .p-role{font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent,#4b7a4e); margin:0 0 10px;}
.profile-card p{font-family:var(--serif); font-size:15.5px; line-height:1.5; color:var(--serif-body); margin:0 0 10px;}
.profile-card .p-links a{font-family:var(--sans); font-size:14px; font-weight:600; margin-right:14px;}

.org-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0;}
.org-card{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; color:var(--ink);}
.org-card:hover{color:var(--ink); border-color:var(--accent,#4b7a4e);}
.org-logo{width:40px; height:40px; border-radius:8px; object-fit:cover; background:#e4d7bf; flex-shrink:0;}
.org-card.no-logo .org-logo{background:var(--accent,#4b7a4e); opacity:.18;}
.org-name{font-family:var(--serif); font-weight:700; font-size:16px; line-height:1.1;}
.org-host{font-family:var(--sans); font-size:12.5px; color:var(--muted); display:block;}

.further-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:30px 0;}
.further-grid a{display:block; background:var(--card); border:1px solid var(--border2); border-left:4px solid var(--accent,#4b7a4e); border-radius:10px; padding:16px 18px; color:var(--ink); font-family:var(--serif); font-size:16px; line-height:1.3;}
.further-grid a:hover{background:var(--band); color:var(--ink);}
@media(max-width:1000px){.further-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.further-grid{grid-template-columns:1fr;}}
.related-links{margin:0;}
.related{max-width:900px; margin:56px auto 0; padding:36px 32px 0; border-top:1px solid var(--border);}
.related h2{font-size:24px; margin-bottom:20px;}
.related-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.related-links li{margin:0;}
.related-links a{display:grid; grid-template-columns:46px 1fr; gap:15px; align-items:center; background:var(--card); border:1px solid var(--border2); border-radius:10px; padding:14px 16px; color:var(--ink);}
.related-links a:hover{background:var(--band); color:var(--ink);}
.rel-spine{width:46px; height:66px; border-radius:3px 5px 5px 3px; box-shadow:inset 3px 0 0 rgba(0,0,0,.2), 0 4px 10px -4px rgba(0,0,0,.4);}
.rel-t{font-family:var(--serif); font-weight:700; font-size:15.5px; line-height:1.18;}
.rel-c{font-size:12px; color:var(--muted); margin-top:3px; font-family:var(--sans);}

/* simple prose pages (about/contact/404) */
.prose{max-width:720px; margin:0 auto; padding:44px 32px 64px; font-family:var(--serif); font-size:20px; line-height:1.62; color:#33291d;}
.prose h1{font-family:var(--serif); font-size:44px; font-weight:800; margin:0 0 20px; line-height:1.05;}
.prose h2{font-size:26px; margin:36px 0 12px;}
.prose p{margin:0 0 1.1em; max-width:var(--measure);}
.prose .lede{font-size:23px; color:#2a2018;}
.contact-methods{list-style:none; padding:0; margin:24px 0; display:grid; gap:12px;}
.contact-methods li{display:flex; gap:14px; align-items:center; background:var(--card); border:1px solid var(--border2); border-radius:10px; padding:16px 18px; font-family:var(--sans); font-size:16px;}
.contact-methods svg{width:22px; height:22px; color:var(--link); flex-shrink:0;}
.err-wrap{max-width:640px; margin:0 auto; padding:90px 32px 120px; text-align:center;}
.err-wrap .big{font-family:var(--serif); font-weight:800; font-size:96px; color:var(--green); line-height:1; letter-spacing:-.02em;}
.err-wrap h1{font-size:32px; margin:14px 0 12px;}
.err-wrap p{font-family:var(--serif); font-size:19px; color:var(--serif-body); margin:0 0 26px;}

/* styleguide helpers */
.sg-section{padding:40px 0; border-bottom:1px solid var(--border);}
.sg-section > h2{font-size:26px; margin-bottom:6px;}
.sg-section > .sg-note{font-family:var(--sans); font-size:14px; color:var(--muted); margin:0 0 24px;}
.sg-body{max-width:760px; font-family:var(--serif); font-size:20px; line-height:1.62; color:#33291d;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .nav-toggle-label{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--border); border-radius:8px; cursor:pointer; color:var(--green);}
  .site-nav{position:fixed; inset:89px 0 0 0; background:var(--card); display:none; flex-direction:column; align-items:stretch; padding:16px 24px 40px; overflow-y:auto; gap:0; border-top:1px solid var(--border);}
  .nav-toggle:checked ~ .site-nav{display:flex;}
  .nav-list{flex-direction:column; align-items:stretch; width:100%;}
  .nav-list > li > a{font-size:17px; padding:14px 6px; border-bottom:1px solid var(--border2);}
  .has-sub > a::after{display:none;}
  .nav-sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; border-top:none; min-width:0; padding:4px 0 10px 14px; background:transparent; border-radius:0;}
  .nav-sub a{font-size:15px; color:var(--serif-body);}
  .has-sub::after{display:none;}
  .nav-cta{margin:16px 0 0; text-align:center; padding:14px; font-size:15px;}
  .hero-grid{grid-template-columns:1fr; gap:30px;}
  .hero h1{font-size:44px;}
  .hero-figure{aspect-ratio:16/10;}
  .shelf-grid{grid-template-columns:repeat(3,1fr);}
  .reviews-grid{grid-template-columns:1fr 1fr;}
  .rl-box{grid-template-columns:1fr;}
  .talked-inner{grid-template-columns:1fr; gap:30px;}
  .talked-intro{position:static;}
  .features-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .supporter-inner{grid-template-columns:1fr; gap:18px;}
  .sponsor-roll{grid-template-columns:repeat(3,1fr);}
  .hub-grid{grid-template-columns:1fr 1fr;}
  .related-links,.gallery,.org-grid{grid-template-columns:1fr 1fr;}
  .profile-grid{grid-template-columns:1fr;}
  .pullquote.margin{float:none; width:auto; margin:34px 0; padding:6px 0 6px 26px; border-right:none; border-left:4px solid var(--accent,#b0453b); text-align:left;}
}
@media(max-width:620px){
  body{font-size:17px;}
  .wrap{padding:0 20px;}
  .hero h1{font-size:36px;} .hero .dek{font-size:19px;}
  .shelf-grid{grid-template-columns:1fr 1fr;}
  .reviews-grid{grid-template-columns:1fr;}
  .rl-pitch{padding:36px 24px;} .rl-list{padding:26px 24px;}
  .rl-pitch h2{font-size:32px;}
  .talked-row{grid-template-columns:56px 1fr; gap:14px; padding:16px;}
  .spine{width:56px; height:80px;}
  .foot-grid{grid-template-columns:1fr; gap:28px;}
  .sponsor-row,.sponsor-roll{grid-template-columns:1fr 1fr;}
  .hub-grid{grid-template-columns:1fr;}
  .related-links,.gallery,.org-grid{grid-template-columns:1fr;}
  .cat-list a{grid-template-columns:1fr; gap:12px;}
  .cat-thumb{width:100%; max-width:none;}
  .cat-go{display:none;}
  .post-head{padding:36px 20px 20px;} .post-hero{padding:8px 20px 0;}
  .article-body{padding-inline:20px; font-size:19px;}
  .article-body .lead{font-size:21px;}
  .sec-num h2{font-size:24px;}
  .prose{padding:32px 20px 56px; font-size:19px;}
  .page-head{padding:36px 0 22px;} .page-head h1{font-size:34px;}
  .spotlight-head h2,.rl-pitch h2,.talked-intro h2{font-size:30px;}
  .statblock{min-width:120px;}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-blurb-link: money-link anchors in blurbs must inherit blurb colour (readable on dark OR light) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1052px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:54px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:54px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-row (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-roll 5 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.cat-list a{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); color: var(--head); margin: 0px; line-height: 1.1; letter-spacing: -0.01em;}
.foot-col h2:where(.rt-h3){font-size: 16px; color: rgb(244, 236, 219); margin-bottom: 12px;}
.cat-copy h2:where(.rt-h3){font-size: 23px; line-height: 1.18; margin: 0px 0px 6px;}
.hub-card h2:where(.rt-h3){font-size: 22px; margin: 12px 0px 8px;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:1101px) and (max-width:1299px){
  blockquote.pullquote.margin > p{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
}
@media (min-width:681px) and (max-width:1299px){
  div.spotlight-head{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
  div.wrap.page-head{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
}
@media (min-width:681px) and (max-width:1099px){
  div.talked-intro{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
  div.wrap.supporter-inner > div{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
}
@media (min-width:1001px) and (max-width:1299px){
  div.wrap.supporter-inner{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
  div.wrap.talked-inner{padding-left:max(32px, 18px);padding-right:max(32px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.cat-thumb > img,
  a.card > span.card-media > img,
  div.features-grid.wrap > a.feature.indie > img,
  div.features-grid.wrap > a.feature.life > img,
  div.hero-grid.wrap > div.hero-figure > img,
  figure > div.frame > img){height:auto}
/* op-img-dims:end */
@media (min-width:1001px) and (max-width:1059px){.nav-toggle-label { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--green); }.site-nav { position: fixed; inset: 89px 0px 0px; background: var(--card); display: none; flex-direction: column; align-items: stretch; padding: 16px 24px 40px; overflow-y: auto; gap: 0px; border-top: 1px solid var(--border); }.nav-toggle:checked ~ .site-nav { display: flex; }.nav-list { flex-direction: column; align-items: stretch; width: 100%; }.nav-list > li > a { font-size: 17px; padding: 14px 6px; border-bottom: 1px solid var(--border2); }.nav-sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; min-width: 0px; padding: 4px 0px 10px 14px; background: transparent; border-radius: 0px; }.nav-sub a { font-size: 15px; color: var(--serif-body); }.nav-cta { margin: 16px 0px 0px; text-align: center; padding: 14px; font-size: 15px; }}