/* =========================================================================
   Beyond The Ordinary — "The Reading Room"
   Moody editorial: ink charcoal · bone ivory · one vivid saffron accent
   Type: DM Serif Display (display) · Spectral (reading) · Space Grotesk (ui)
   ========================================================================= */



:root{
  --ink:#161519;
  --ink-2:#211f26;
  --ink-3:#2c2933;
  --bone:#f4efe3;
  --bone-2:#e9e1cf;
  --paper:#faf7ef;
  --gold:#c98a12;
  --gold-2:#e6a824;
  --gold-ink:#5c3d05;
  --muted:#6a655c;
  --line:#d8cfba;
  --line-dk:rgba(244,239,227,.16);
  --wide:1220px;
  --read:themed;
  --shadow:0 24px 60px -28px rgba(22,21,25,.45);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Spectral',Georgia,serif;
  font-size:23px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-2)}
h1,h2,h3,h4{font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.08;margin:0}
p{margin:0 0 1.15em}
.wrap{width:100%;max-width:var(--wide);margin:0 auto;padding:0 28px}

/* kicker / eyebrow label */
.kicker{
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--gold);margin:0 0 .8rem;display:inline-block;
}
.kicker.on-dark{color:var(--gold-2)}

/* ============================ HEADER / NAV ============================ */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(22,21,25,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line-dk);
  color:var(--bone);
}
.head-inner{
  max-width:var(--wide);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.brand:hover{color:inherit}
.brand .b-main{
  font-family:'DM Serif Display',serif;color:var(--bone);
  font-size:1.5rem;letter-spacing:.01em;
}
.brand .b-main em{color:var(--gold-2);font-style:italic}
.brand .b-sub{
  font-family:'Space Grotesk',sans-serif;font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;color:#a49a86;margin-top:6px;
}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  font-family:'Space Grotesk',sans-serif;font-size:.95rem;font-weight:500;
  color:var(--bone);padding:10px 14px;border-radius:2px;position:relative;
}
.nav a:hover{color:var(--gold-2)}
.nav a.cta{
  border:1px solid var(--gold);color:var(--gold-2);margin-left:8px;
}
.nav a.cta:hover{background:var(--gold);color:var(--ink)}
/* authors dropdown (CSS hover, details on mobile) */
.nav .has-menu{position:relative}
.nav .has-menu>details{position:relative}
.nav summary{
  list-style:none;cursor:pointer;font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;font-weight:500;color:var(--bone);padding:10px 14px;
}
.nav summary::-webkit-details-marker{display:none}
.nav summary:hover{color:var(--gold-2)}
.nav .menu{
  position:absolute;top:100%;left:0;min-width:250px;
  background:var(--ink-2);border:1px solid var(--line-dk);
  padding:10px;display:flex;flex-direction:column;box-shadow:var(--shadow);z-index:60;
}
.nav .menu a{padding:9px 12px;font-size:.9rem}
.nav .menu a:hover{background:var(--ink-3);color:var(--gold-2)}
/* mobile toggle */
.nav-toggle,.nav-toggle-lbl{display:none}
.nav-toggle-lbl{
  cursor:pointer;font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone);border:1px solid var(--line-dk);padding:9px 14px;border-radius:2px;
}

/* ============================ HERO ============================ */
.hero{
  background:var(--ink);color:var(--bone);position:relative;overflow:hidden;
}
.hero-inner{
  max-width:var(--wide);margin:0 auto;padding:clamp(56px,9vw,120px) 28px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,84px);align-items:center;
}
.hero h1{
  font-size:clamp(3rem,7.5vw,6rem);line-height:.98;letter-spacing:-.01em;margin:0 0 1.4rem;
}
.hero h1 em{font-style:italic;color:var(--gold-2)}
.hero .lead{
  font-size:1.32rem;line-height:1.6;color:#d9d1c1;max-width:40ch;margin:0 0 2rem;font-weight:300;
}
.hero-figure{position:relative}
.hero-figure .frame{
  aspect-ratio:4/5;background:var(--ink-3);overflow:hidden;position:relative;
  border:1px solid var(--line-dk);
}
.hero-figure .frame img{width:100%;height:100%;object-fit:cover}
.hero-figure .tag{
  position:absolute;left:-14px;bottom:26px;background:var(--gold);color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;
}
.btn{
  display:inline-flex;align-items:center;gap:.6em;font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:1rem;letter-spacing:.02em;padding:15px 26px;border-radius:2px;
  border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease;
}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-2);color:var(--ink);transform:translateY(-2px)}
.btn-line{border-color:currentColor;color:var(--bone);background:transparent}
.btn-line:hover{background:var(--bone);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--ink-3);color:var(--gold-2);transform:translateY(-2px)}

/* marquee-ish strip of themes under hero */
.themes-strip{
  background:var(--gold);color:var(--ink);overflow:hidden;border-top:1px solid rgba(0,0,0,.12);
}
.themes-strip ul{
  display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none;
  justify-content:center;max-width:var(--wide);margin:0 auto;
}
.themes-strip li{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;
  letter-spacing:.16em;text-transform:uppercase;padding:16px 22px;
}
.themes-strip li:not(:last-child){border-right:1px solid rgba(0,0,0,.14)}

/* ============================ SECTIONS ============================ */
section{scroll-margin-top:90px}
.band{padding:clamp(56px,8vw,104px) 0}
.band.paper{background:var(--paper)}
.band.bone{background:var(--bone)}
.band.ink{background:var(--ink);color:var(--bone)}
.sec-head{max-width:760px;margin:0 0 clamp(32px,5vw,56px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.01em}
.sec-head .sub{font-size:1.18rem;color:var(--muted);margin-top:1rem;font-weight:300}
.band.ink .sec-head .sub{color:#c7bfae}

/* ethos / pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-dk)}
.pillar{background:var(--ink);padding:clamp(28px,3vw,44px);position:relative}
.pillar .num{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.85rem;
  color:var(--gold-2);letter-spacing:.2em;
}
.pillar h3{font-size:1.8rem;margin:.9rem 0 .7rem;color:var(--bone)}
.pillar p{font-size:1.05rem;line-height:1.7;color:#c3bbaa;font-weight:300;margin:0}

/* ============================ ESSAY INDEX ============================ */
.essay-list{border-top:1px solid var(--line)}
.essay-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,56px);
  align-items:center;padding:clamp(26px,3.5vw,40px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .2s ease;
}
.essay-row:hover{padding-left:14px;color:inherit}
.essay-row .idx{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:var(--gold);
  min-width:2.4ch;
}
.essay-row .e-body{max-width:60ch}
.essay-row .e-cat{
  font-family:'Space Grotesk',sans-serif;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;
}
.essay-row h3{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.12;transition:color .15s}
.essay-row:hover h3{color:var(--gold)}
.essay-row p{font-size:1.02rem;color:var(--muted);margin:.6rem 0 0;font-weight:300;line-height:1.6}
.essay-row .e-thumb{
  width:130px;height:96px;object-fit:cover;background:var(--bone-2);flex:none;
}
.essay-row .arrow{
  font-family:'Space Grotesk',sans-serif;color:var(--gold);font-size:1.4rem;font-weight:500;
}

/* ============================ LIBRARY SHELF ============================ */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.book{
  background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease;
}
.book:hover{transform:translateY(-5px);box-shadow:var(--shadow);color:inherit}
.book .cover{aspect-ratio:3/4;overflow:hidden;background:var(--ink-3)}
.book .cover img{width:100%;height:100%;object-fit:cover}
.book .b-meta{padding:22px 20px 24px}
.book .b-role{
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.book h3{font-size:1.35rem;margin:.5rem 0 .3rem;line-height:1.15}
.book .b-book{font-size:.98rem;color:var(--muted);font-style:italic;font-weight:300}

/* ============================ PARTNERS ============================ */
.partners-grid{display:grid;gap:clamp(16px,2vw,24px)}
.partners-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.partner-card{
  background:var(--paper);border:1px solid var(--line);padding:26px 24px 24px;
  display:flex;flex-direction:column;position:relative;
}
.band.ink .partner-card{background:var(--ink-2);border-color:var(--line-dk);color:var(--bone)}
.partner-logo{
  width:100%;height:64px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);margin-bottom:18px;padding:8px 16px;
}
.band.ink .partner-logo{background:#fff;border-color:transparent}
.partner-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.partner-name{font-size:1.4rem;margin:0 0 .5rem}
.partner-name a{color:inherit}
.partner-name a:hover{color:var(--gold)}
.partner-toggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.partner-desc{
  font-size:1rem;line-height:1.6;color:var(--muted);margin:0 0 .4rem;font-weight:300;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.band.ink .partner-desc{color:#bcb4a3}
.partner-toggle:checked ~ .partner-desc{-webkit-line-clamp:unset;display:block}
.partner-readmore{
  font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  color:var(--gold);cursor:pointer;margin-bottom:14px;align-self:flex-start;
}
.partner-readmore::after{content:'Read more +'}
.partner-toggle:checked ~ .partner-readmore::after{content:'Read less \2013'}
.partner-cta{
  margin-top:auto;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.92rem;
  letter-spacing:.02em;color:var(--ink);border-top:1px solid var(--line);padding-top:16px;
}
.band.ink .partner-cta{color:var(--gold-2);border-top-color:var(--line-dk)}
.partner-cta:hover{color:var(--gold)}

/* alternate partner band (near footer) — horizontal list style */
.partners-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line-dk)}
.partners-row .partner-card{background:var(--ink);border:0;border-radius:0}

/* ============================ QUOTE INTERLUDE ============================ */
.interlude{background:var(--ink);color:var(--bone);text-align:center}
.interlude .wrap{padding:clamp(64px,9vw,120px) 28px}
.interlude blockquote{
  font-family:'DM Serif Display',serif;font-size:clamp(1.8rem,4.2vw,3.1rem);
  line-height:1.22;margin:0 auto;max-width:16ch;font-style:italic;
}
.interlude blockquote span{color:var(--gold-2)}
.interlude cite{
  display:block;margin-top:1.8rem;font-family:'Space Grotesk',sans-serif;font-style:normal;
  font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:#a49a86;
}

/* ============================ ARTICLE (posts/pages) ============================ */
.post-hero{background:var(--ink);color:var(--bone)}
.post-hero .wrap{padding:clamp(48px,7vw,92px) 28px clamp(40px,6vw,72px);max-width:900px}
.post-hero .crumbs{
  font-family:'Space Grotesk',sans-serif;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:#a49a86;margin-bottom:1.4rem;
}
.post-hero .crumbs a{color:#a49a86}
.post-hero .crumbs a:hover{color:var(--gold-2)}
.post-hero .cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.4rem}
.post-hero .cats span{
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-2);border:1px solid var(--line-dk);padding:6px 12px;
}
.post-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.01em}
.post-hero .dek{font-size:1.3rem;color:#d5cdbc;font-weight:300;margin-top:1.4rem;max-width:60ch}

.figure-full{margin:0;background:var(--bone)}
.figure-full img{width:100%;max-height:560px;object-fit:cover}
.figure-full figcaption,.article figure figcaption{
  font-family:'Space Grotesk',sans-serif;font-size:.86rem;color:var(--muted);
  padding:12px 0 0;letter-spacing:.02em;
}
.figure-full figcaption{max-width:900px;margin:0 auto;padding:14px 28px 0}

.article{max-width:780px;margin:0 auto;padding:clamp(44px,6vw,72px) 28px}
.article>p,.article>ul,.article>ol,.article>h2,.article>h3,.article>figure,
.article>blockquote,.article>.callout,.article>.takeaways,.article>.factbox{margin-left:auto;margin-right:auto}
.article p{font-size:1.28rem;line-height:1.78}
.article>p:first-of-type::first-letter,.article .lead-drop::first-letter{
  font-family:'DM Serif Display',serif;float:left;font-size:4.6rem;line-height:.82;
  padding:.06em .12em 0 0;color:var(--gold);
}
.article .lead{font-size:1.5rem;line-height:1.6;font-weight:400;color:var(--ink)}
.article h2{
  font-size:clamp(1.8rem,3.4vw,2.5rem);margin:2.4em 0 .6em;line-height:1.12;position:relative;
}
.article h2::before{
  content:'';display:block;width:52px;height:3px;background:var(--gold);margin-bottom:.5em;
}
.article h3{font-size:1.55rem;margin:1.8em 0 .5em}
.article figure{margin:2.4em 0}
.article figure img{width:100%;border:1px solid var(--line)}
.article figure.wide{margin-left:calc(50% - 49vw);margin-right:calc(50% - 49vw);max-width:none}
.article figure.wide img{border-left:0;border-right:0}
.article a{border-bottom:1px solid rgba(201,138,18,.4)}
.article a:hover{border-bottom-color:var(--gold-2)}
.article strong{font-weight:600}
.article em{font-style:italic}

/* lists */
.article ul,.article ol{padding:0;margin:1.6em auto;list-style:none;counter-reset:li}
.article ol>li,.article ul>li{
  position:relative;padding:0 0 0 3rem;margin:0 0 1em;font-size:1.22rem;line-height:1.66;
}
.article ol>li{counter-increment:li}
.article ol>li::before{
  content:counter(li);position:absolute;left:0;top:.1em;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--gold);
  border:2px solid var(--gold);width:2rem;height:2rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.article ul>li::before{
  content:'';position:absolute;left:.4rem;top:.75em;width:12px;height:2px;background:var(--gold);
}

/* blockquote / pull quote */
.article blockquote{
  margin:2.2em auto;padding:0 0 0 1.4em;border-left:3px solid var(--gold);
  font-family:'DM Serif Display',serif;font-size:1.7rem;line-height:1.32;
  font-style:italic;color:var(--ink);
}
.pull{
  margin:2.4em auto;text-align:center;max-width:720px;
  font-family:'DM Serif Display',serif;font-size:clamp(1.7rem,3.4vw,2.4rem);
  line-height:1.24;color:var(--ink);font-style:italic;
}
.pull::before{content:'\201C';color:var(--gold);font-size:1.4em;line-height:0;vertical-align:-.35em;margin-right:.05em}

/* callout / highlight */
.callout{
  background:var(--bone);border:1px solid var(--line);padding:28px 30px;margin:2.2em auto;
  border-left:4px solid var(--gold);
}
.callout .c-label{
  font-family:'Space Grotesk',sans-serif;font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);font-weight:600;display:block;margin-bottom:.5rem;
}
.callout p{margin:0;font-size:1.18rem;line-height:1.6}

/* takeaways box */
.takeaways{
  background:var(--ink);color:var(--bone);padding:34px 34px 30px;margin:2.6em auto;
}
.takeaways .t-label{
  font-family:'Space Grotesk',sans-serif;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-2);font-weight:600;margin-bottom:1.1rem;display:block;
}
.takeaways ul{margin:0;padding:0;list-style:none;counter-reset:none}
.takeaways li{
  position:relative;padding:0 0 0 2.2rem;margin:0 0 .9rem;font-size:1.12rem;
  line-height:1.55;color:#e3dccd;
}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{
  content:'\2192';position:absolute;left:0;top:0;color:var(--gold-2);font-weight:700;
  font-family:'Space Grotesk',sans-serif;
}

/* fact / quick-facts row (author pages) */
.factbox{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  margin:2.4em auto;border:1px solid var(--line);
}
.factbox .f{background:var(--paper);padding:22px 20px}
.factbox .f .k{
  font-family:'Space Grotesk',sans-serif;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;
}
.factbox .f .v{font-size:1.12rem;line-height:1.4}

/* map embed */
.map-embed{margin:2.4em auto;border:1px solid var(--line)}
.map-embed iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(.2)}

/* post footer / related */
.post-foot{border-top:1px solid var(--line);background:var(--bone)}
.post-foot .wrap{padding:clamp(44px,6vw,72px) 28px;max-width:1080px}
.author-card{
  display:flex;gap:24px;align-items:center;background:var(--paper);border:1px solid var(--line);
  padding:26px 28px;margin-bottom:clamp(40px,5vw,56px);
}
.author-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:none;background:var(--bone-2)}
.author-card .a-name{font-family:'DM Serif Display',serif;font-size:1.5rem;margin-bottom:.3rem}
.author-card p{margin:0;font-size:1.05rem;color:var(--muted);font-weight:300;line-height:1.55}
.related h2{font-size:1.9rem;margin-bottom:1.4rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rel-card{
  background:var(--paper);border:1px solid var(--line);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:inherit}
.rel-card img{aspect-ratio:16/10;object-fit:cover;background:var(--bone-2)}
.rel-card .r-cat{
  font-family:'Space Grotesk',sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);padding:18px 20px 0;
}
.rel-card h3{font-size:1.25rem;padding:.4rem 20px 22px;line-height:1.18}

/* prev/next */
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.pager a{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);
  border:1px solid var(--line);padding:14px 20px;flex:1;min-width:220px;
}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager .pg-lbl{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}

/* ============================ CONTACT (bespoke) ============================ */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:70vh}
.contact-left{background:var(--ink);color:var(--bone);padding:clamp(44px,6vw,88px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.contact-left h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;margin-bottom:1.4rem}
.contact-left .lead{font-size:1.28rem;color:#d5cdbc;font-weight:300;line-height:1.6;max-width:44ch}
.contact-left blockquote{
  margin:2rem 0 0;padding-left:1.2em;border-left:3px solid var(--gold);
  font-family:'DM Serif Display',serif;font-style:italic;font-size:1.35rem;line-height:1.3;color:var(--gold-2);
}
.contact-right{background:var(--bone);padding:clamp(44px,6vw,88px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.contact-methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;background:var(--line)}
.contact-methods li{background:var(--paper);padding:0}
.contact-methods a,.contact-methods .cm{
  display:flex;align-items:baseline;gap:16px;padding:24px 26px;text-decoration:none;color:var(--ink);
}
.contact-methods a:hover{background:#fff}
.contact-methods .cm-k{
  font-family:'Space Grotesk',sans-serif;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);min-width:92px;flex:none;font-weight:600;
}
.contact-methods .cm-v{font-size:1.2rem;line-height:1.4}
.contact-methods .cm-v small{display:block;font-size:.92rem;color:var(--muted);font-family:'Space Grotesk',sans-serif}

/* ============================ FOOTER ============================ */
.site-foot{background:var(--gold);color:var(--gold-ink)}
.foot-inner{
  max-width:var(--wide);margin:0 auto;padding:clamp(40px,5vw,64px) 28px clamp(24px,3vw,34px);
}
.foot-top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px);
  align-items:start;padding-bottom:clamp(28px,4vw,44px);border-bottom:1px solid rgba(92,61,5,.28);
}
.foot-brand .f-name{font-family:'DM Serif Display',serif;font-size:2rem;line-height:1;margin-bottom:.7rem}
.foot-brand p{font-size:1.05rem;line-height:1.55;color:#6b4906;max-width:38ch;margin:0}
.foot-col h4{
  font-family:'Space Grotesk',sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;margin-bottom:1rem;color:var(--gold-ink);
}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0;padding:0}
.foot-links a{
  font-family:'Space Grotesk',sans-serif;font-size:.98rem;font-weight:500;color:var(--gold-ink);
}
.foot-links a:hover{color:#fff}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:22px;font-family:'Space Grotesk',sans-serif;font-size:.86rem;color:#6b4906;
}
.foot-bottom a{color:#6b4906}
.foot-bottom a:hover{color:#fff}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-figure{max-width:440px}
  .pillars{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,1fr)}
  .partners-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .partners-row{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:20px}
  /* mobile nav */
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--ink-2);
    flex-direction:column;align-items:stretch;gap:0;padding:88px 22px 32px;
    transform:translateX(100%);transition:transform .28s ease;box-shadow:var(--shadow);
    overflow-y:auto;
  }
  .nav a,.nav summary{padding:14px 8px;font-size:1.1rem;border-bottom:1px solid var(--line-dk)}
  .nav a.cta{margin:14px 0 0;text-align:center;border-radius:2px}
  .nav .menu{position:static;box-shadow:none;border:0;background:transparent;padding:4px 0 4px 14px}
  .nav .has-menu>details[open] summary{color:var(--gold-2)}
  .nav-toggle-lbl{display:inline-block;z-index:60}
  .nav-toggle:checked ~ .nav{transform:translateX(0)}
  .nav-toggle:checked ~ .nav-toggle-lbl{color:var(--gold-2)}
  .contact-split{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .essay-row{grid-template-columns:auto 1fr;gap:16px}
  .essay-row .e-thumb{display:none}
  .factbox{grid-template-columns:1fr}
  .article ol>li,.article ul>li{font-size:1.12rem}
  /* compact footer: 2-across */
  .foot-top{grid-template-columns:1fr 1fr;gap:24px 20px}
  .foot-brand{grid-column:1 / -1}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:440px){
  .shelf{grid-template-columns:1fr 1fr}
  .partners-grid.cols-3,.partners-row{grid-template-columns:1fr}
  .book .b-meta{padding:16px 14px 18px}
  .themes-strip li{padding:12px 14px;font-size:.8rem}
}

/* 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}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.partner-card > .sponsor{flex:0 0 auto!important}
.partner-logo{flex-wrap:wrap!important}
.partner-logo > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

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

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.partners-grid.cols-3 .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.partners-grid.cols-3 .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}
.partners-grid.cols-3 .partner-card.partner-card img{height:46px!important;display:block!important;width:100%!important;background:transparent!important;width:100%!important;padding:0!important}
.partners-row .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.partners-row .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}
.partners-row .partner-card.partner-card img{height:46px!important;display:block!important;width:100%!important;background:transparent!important;width:100%!important;padding:0!important}

/* op-drawer-clip: the mobile nav is position:fixed and parked off-canvas to the RIGHT, so its box
   added its full width to the document's scroll width — the page was hundreds of px wider than the
   phone. overflow-x:clip on the root stops a parked panel contributing to scroll width; `clip`
   rather than `hidden` because hidden creates a scroll container and breaks position:sticky
   elsewhere. Verified per build: the drawer still opens and lands fully on screen. */
/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the parked off-canvas drawer only exists at phone widths, so the clip has no business at desktop. */
@media (max-width:900px){html,body{overflow-x:clip}}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   3720px at 390, 29% of the whole page. Two columns bring it to
   2073px (44% shorter). Checked before writing: no new overflow, smallest mark still
   81px wide, longest blurb 3 lines, tile heights 326-353px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.partners-grid.cols-3, .partners-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .partners-grid.cols-3{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
    .partners-grid.cols-3 > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partners-grid.cols-3 > * *{min-width:0!important;max-width:100%}
    .partners-grid.cols-3 img,.partners-grid.cols-3 svg{max-width:100%;height:auto}
  .partners-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px!important}
    .partners-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partners-row > * *{min-width:0!important;max-width:100%}
    .partners-row img,.partners-row svg{max-width:100%;height:auto}
}

/* op-name-fit: "Transsensual" (131px at 22.4px) ran past its ~91px name box and the tile's border at 360. The name is set a little smaller on narrow phones — min(22.4px, 4.83vw): 17.4px at 360, Design's 22.4px again from ~464px — so every brand stays WHOLE. Money tiles only. */
@media (max-width:640px){
  [data-partner] .partner-name{font-size:min(22.4px,4.83vw)!important}
}
/* op-name-fit:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.book > span.cover > img,
  article.article > figure > img,
  body > figure.figure-full > img,
  div.related-grid > a.rel-card > img,
  div.wrap > div.author-card > img,
  div.wrap > figure > img,
  figure.hero-figure > div.frame > img){height:auto}
/* op-img-dims:end */