/* ============================================================
   Art Inconnu — The Underrated Art
   Shared stylesheet
   ============================================================ */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd,figcaption{margin:0}
ul,ol{list-style:none;padding:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}

/* ---- Palette & tokens ---- */
:root{
  --paper:#f0f2ef;          /* cool off-white */
  --paper-2:#e7ebe6;        /* faint sage-tinted panel */
  --card:#f8f9f6;
  --ink:#22262a;            /* near-black, cool */
  --ink-soft:#4b5258;
  --line:#d3d9d2;

  --sage:#8ba593;
  --sage-deep:#566f5d;
  --sage-ink:#33463a;
  --blush:#dcab9f;
  --blush-deep:#b9776a;
  --powder:#a7c3cf;
  --powder-deep:#5f8797;

  --link:#a26173;           /* dusty plum-rose */
  --link-hover:#7c4657;

  --wrap:1180px;
  --read:820px;

  --f-display:"Marcellus",Georgia,serif;
  --f-read:"Newsreader",Georgia,serif;
  --f-ui:"Archivo","Helvetica Neue",Arial,sans-serif;
}

/* ---- Base ---- */
body{
  font-family:var(--f-read);
  font-size:1.45rem;          /* ~23px reading text */
  line-height:1.68;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
}
a{color:var(--link);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--link-hover)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2.75rem)}
.read{max-width:var(--read);margin-inline:auto}

/* ---- Type utilities ---- */
.eyebrow{
  font-family:var(--f-ui);font-weight:600;
  font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage-deep);
}
.eyebrow.blush{color:var(--blush-deep)}
.eyebrow.powder{color:var(--powder-deep)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.08;letter-spacing:.005em}
.section-title{font-size:clamp(2.1rem,5vw,3.4rem);margin:.35em 0 .2em}
.lede{font-size:1.62rem;line-height:1.55;color:var(--ink-soft)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(240,242,239,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:.95rem}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.brand .mark{
  font-family:var(--f-display);font-size:1.65rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink)}
.brand .sub{
  font-family:var(--f-ui);font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--sage-deep);margin-top:.4rem}
.brand:hover .mark{color:var(--sage-deep)}

/* nav */
.nav{font-family:var(--f-ui)}
.nav>ul{display:flex;align-items:center;gap:.35rem}
.nav a{
  display:block;padding:.55rem .85rem;border-radius:999px;
  font-size:.95rem;font-weight:500;letter-spacing:.02em;color:var(--ink)}
.nav a:hover{background:var(--paper-2);color:var(--sage-ink)}
.has-menu{position:relative}
.has-menu>ul{
  position:absolute;top:calc(100% + .3rem);left:0;min-width:250px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -22px rgba(34,38,42,.4);
  padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:all .18s ease}
.has-menu:hover>ul,.has-menu:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0)}
.has-menu>ul a{border-radius:9px;font-size:.9rem;white-space:nowrap}
.has-menu>a::after{content:"·";margin-left:.4rem;color:var(--sage)}

/* mobile nav (CSS-only) */
.nav-toggle,.nav-close{display:none}
.hamburger{display:none;font-family:var(--f-ui);font-size:.85rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  padding:.6rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--ink)}
.hamburger:hover{background:var(--paper-2)}

@media(max-width:860px){
  .hamburger{display:inline-block}
  .nav{position:fixed;inset:0;background:var(--paper);z-index:60;
    transform:translateX(100%);transition:transform .28s ease;
    padding:5.5rem 1.5rem 2rem;overflow-y:auto}
  .nav-toggle:checked ~ .nav{transform:translateX(0)}
  .nav-toggle:checked ~ .hamburger{position:fixed;top:1.1rem;right:1.15rem;z-index:70}
  .nav>ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .nav a{font-size:1.15rem;padding:.7rem .4rem;border-bottom:1px solid var(--line);border-radius:0}
  .has-menu>ul{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:transparent;padding:0 0 .3rem 1rem;min-width:0}
  .has-menu>ul a{font-size:1rem;border-bottom:none;color:var(--ink-soft)}
  .has-menu>a::after{display:none}
  .nav-close{display:block;position:fixed;top:1.1rem;right:1.15rem;z-index:70;
    font-family:var(--f-ui);font-size:1.6rem;line-height:1;cursor:pointer;
    width:2.6rem;height:2.6rem;border-radius:999px;border:1px solid var(--line);
    background:var(--card);text-align:center}
  body:has(.nav-toggle:checked){overflow:hidden}
}

/* ============================================================
   HERO (home) — placard style
   ============================================================ */
.hero{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,3.5rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.hero-kicker{font-family:var(--f-ui);font-size:.86rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--blush-deep)}
.hero h1{font-size:clamp(3.4rem,10vw,7rem);margin:.12em 0 .1em;letter-spacing:.02em}
.hero .translate{font-family:var(--f-read);font-style:italic;font-size:1.5rem;color:var(--ink-soft)}
.hero .tag{font-size:1.55rem;line-height:1.5;margin-top:1.4rem;max-width:30ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.btn{font-family:var(--f-ui);font-weight:600;font-size:.95rem;letter-spacing:.03em;
  padding:.85rem 1.6rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.btn.solid:hover{background:var(--sage-ink);border-color:var(--sage-ink);color:#fff}
.hero-frame{position:relative;padding:1rem;background:var(--card);
  border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(34,38,42,.5)}
.hero-frame::before{content:"";position:absolute;inset:.5rem;border:1px solid var(--line);pointer-events:none;z-index:2}
.hero-frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero-frame .placard{font-family:var(--f-ui);font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);padding:.85rem .4rem .3rem;text-align:center}

@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr}
  .hero-frame{order:-1;max-width:420px}
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{position:relative}
.band{padding:clamp(3rem,7vw,6rem) 0}
.band--panel{background:var(--paper-2)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--sage{background:var(--sage-deep);color:#fff}
.sec-head{max-width:720px;margin-bottom:clamp(1.8rem,4vw,3rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.band--ink .section-title,.band--sage .section-title{color:#fff}
.band--ink .lede,.band--sage .lede{color:rgba(255,255,255,.8)}

/* Manifesto */
.manifesto{padding:clamp(3rem,8vw,6.5rem) 0}
.manifesto .read{text-align:center}
.manifesto p{font-size:clamp(1.7rem,3.5vw,2.35rem);line-height:1.42;font-family:var(--f-display);color:var(--ink)}
.manifesto .drop::first-letter{
  float:left;font-family:var(--f-display);font-size:5.2rem;line-height:.78;
  padding:.06em .12em 0 0;color:var(--blush-deep)}
.manifesto .sign{font-family:var(--f-ui);font-size:.9rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sage-deep);margin-top:2rem}

/* The Overlooked — masters index */
.masters{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.master{background:var(--paper);padding:1.7rem 1.5rem;transition:background .2s ease}
.master:hover{background:var(--card)}
.master .idx{font-family:var(--f-ui);font-size:.78rem;letter-spacing:.2em;color:var(--blush-deep)}
.master h3{font-size:1.75rem;margin:.5rem 0 .5rem}
.master p{font-size:1.15rem;line-height:1.5;color:var(--ink-soft)}
.master .yr{font-family:var(--f-ui);font-size:.82rem;letter-spacing:.06em;color:var(--sage-deep);margin-top:.9rem}

/* Journal — numbered reading index */
.journal-list{border-top:1px solid var(--line)}
.jrow{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);
  align-items:center;padding:1.7rem 0;border-bottom:1px solid var(--line);transition:padding .2s ease}
.jrow:hover{padding-left:.7rem}
.jrow .num{font-family:var(--f-display);font-size:1.9rem;color:var(--sage);min-width:2.4ch}
.jrow .jbody h3{font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.12}
.jrow:hover .jbody h3{color:var(--link-hover)}
.jrow .jbody p{font-size:1.18rem;color:var(--ink-soft);margin-top:.4rem;max-width:60ch}
.jrow .cat{font-family:var(--f-ui);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--powder-deep);white-space:nowrap}
@media(max-width:640px){
  .jrow{grid-template-columns:auto 1fr;gap:1rem}
  .jrow .cat{display:none}
}

/* Cities & schools */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.cities{display:flex;flex-direction:column;gap:.2rem}
.city{display:flex;align-items:baseline;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.city .cn{font-family:var(--f-display);font-size:1.55rem;min-width:8ch}
.city .cc{font-family:var(--f-ui);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.map-embed{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);min-height:340px}
.map-embed iframe{display:block;width:100%;height:100%;min-height:340px;border:0;filter:grayscale(.25) contrast(1.02)}
@media(max-width:820px){.cs-grid{grid-template-columns:1fr}}

/* ============================================================
   PARTNER CARDS (shared, spread across sections)
   ============================================================ */
.partners-grid{display:grid;gap:clamp(1rem,2.5vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.partner-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.5rem 1.5rem 1.35rem;display:flex;flex-direction:column;gap:1rem}
.band--ink .partner-card,.band--sage .partner-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.partner-logo{
  width:100%;height:64px;border-radius:10px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--line)}
.band--ink .partner-logo,.band--sage .partner-logo{background:rgba(255,255,255,.9);border-color:transparent}
.partner-logo img{max-width:82%;max-height:70%;object-fit:contain}
.partner-name{font-family:var(--f-display);font-size:1.45rem;line-height:1.1}
.partner-name a{color:inherit}
.partner-name a:hover{color:var(--link-hover)}
.band--ink .partner-name,.band--sage .partner-name{color:#fff}
.band--ink .partner-name a:hover,.band--sage .partner-name a:hover{color:var(--powder)}
.partner-desc{font-size:1.08rem;line-height:1.55;color:var(--ink-soft);margin:0}
.band--ink .partner-desc,.band--sage .partner-desc{color:rgba(255,255,255,.78)}
/* CSS-only read-more */
.pm-toggle{position:absolute;opacity:0;pointer-events:none}
.partner-desc.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-toggle:checked ~ .partner-desc.clamp{-webkit-line-clamp:unset;overflow:visible;display:block}
.pm-label{font-family:var(--f-ui);font-size:.82rem;font-weight:600;letter-spacing:.05em;
  color:var(--sage-deep);cursor:pointer;align-self:flex-start;margin-top:-.3rem}
.pm-label:hover{color:var(--sage-ink)}
.pm-label .more{display:inline}.pm-label .less{display:none}
.pm-toggle:checked ~ .pm-label .more{display:none}
.pm-toggle:checked ~ .pm-label .less{display:inline}
.band--ink .pm-label,.band--sage .pm-label{color:var(--powder)}

/* partner section variants */
.patrons--row .partners-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post-hero{padding:clamp(2rem,5vw,3.5rem) 0 1.5rem}
.post-hero .kicker{font-family:var(--f-ui);font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blush-deep)}
.post-hero h1{font-size:clamp(2.5rem,6.5vw,4.6rem);margin:.3em 0 .35em;max-width:16ch}
.post-hero .meta{font-family:var(--f-ui);font-size:.9rem;letter-spacing:.06em;color:var(--ink-soft);
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;align-items:center}
.post-hero .meta .dot{color:var(--sage)}
.figure-full{margin:clamp(1.5rem,4vw,2.5rem) 0}
.figure-full img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:4px}
figcaption{font-family:var(--f-ui);font-size:.86rem;color:var(--ink-soft);
  margin-top:.7rem;padding-left:1rem;border-left:2px solid var(--sage)}

.article{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.article p{margin:0 0 1.35em}
.article > .read > p:first-of-type,.article .lead-para{font-size:1.55rem}
.article .lead-para::first-letter{
  float:left;font-family:var(--f-display);font-size:4.6rem;line-height:.72;
  padding:.05em .12em 0 0;color:var(--blush-deep)}
.article h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:1.9em 0 .4em;position:relative;padding-top:.6em}
.article h2::before{content:"";position:absolute;top:0;left:0;width:2.6rem;height:2px;background:var(--sage)}
.article h3{font-size:clamp(1.5rem,3vw,2rem);margin:1.6em 0 .4em;color:var(--sage-ink)}
.article a{border-bottom:1px solid color-mix(in srgb,var(--link) 40%,transparent)}
.article a:hover{border-bottom-color:var(--link-hover)}
.article figure{margin:2em 0}
.article figure img{border-radius:4px}
.figure-inline{margin:2em 0}
.figure-right{float:right;width:min(42%,360px);margin:.4em 0 1.4em 2rem}
.figure-left{float:left;width:min(42%,360px);margin:.4em 2rem 1.4em 0}
@media(max-width:640px){.figure-right,.figure-left{float:none;width:100%;margin:2em 0}}

/* lists */
.article ol,.article ul{margin:1.2em 0 1.6em;padding-left:0;counter-reset:li}
.article ol.styled>li{list-style:none;position:relative;padding:1.1rem 0 1.1rem 3.4rem;border-top:1px solid var(--line)}
.article ol.styled>li::before{counter-increment:li;content:counter(li,decimal-leading-zero);
  position:absolute;left:0;top:1rem;font-family:var(--f-display);font-size:1.5rem;color:var(--blush-deep)}
.article ol.styled>li strong,.article ol.styled>li b{font-family:var(--f-display);font-weight:400;font-size:1.25em;display:block;margin-bottom:.2em}
.article ul.ticks>li{list-style:none;position:relative;padding:.5rem 0 .5rem 1.9rem}
.article ul.ticks>li::before{content:"—";position:absolute;left:0;color:var(--sage)}

/* pull quote */
.pullquote{margin:2.2em 0;padding:0 0 0 1.6rem;border-left:3px solid var(--blush);
  font-family:var(--f-display);font-size:clamp(1.7rem,3.5vw,2.35rem);line-height:1.32;color:var(--sage-ink)}

/* callout / takeaways box */
.callout{background:var(--paper-2);border-radius:16px;padding:clamp(1.4rem,3vw,2rem);margin:2.2em 0;
  border:1px solid var(--line)}
.callout .eyebrow{margin-bottom:.7rem}
.callout h4{font-family:var(--f-display);font-size:1.5rem;margin-bottom:.6rem}
.callout p{font-size:1.15rem;margin-bottom:.7em}
.callout ul{margin:0}
.callout ul li{list-style:none;position:relative;padding:.4rem 0 .4rem 1.7rem;font-size:1.15rem;line-height:1.45}
.callout ul li::before{content:"◆";position:absolute;left:0;font-size:.7rem;top:.75rem;color:var(--sage)}
.callout.blush{background:#f3e2dc;border-color:#e6c9bf}
.callout.powder{background:#e0ebf0;border-color:#c9dde4}

/* quick facts row */
.qfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:2em 0}
.qfacts div{background:var(--card);padding:1.2rem 1.1rem}
.qfacts dt{font-family:var(--f-ui);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-deep)}
.qfacts dd{font-family:var(--f-display);font-size:1.35rem;margin-top:.35rem;line-height:1.15}

/* info card (real-world enrichment) */
.infocard{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:1.3rem 1.4rem;margin:1.6em 0;font-size:1.08rem;line-height:1.5}
.infocard .eyebrow{margin-bottom:.5rem}
.infocard .rows{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin-top:.5rem}
.infocard .rows dt{font-family:var(--f-ui);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.infocard .rows dd{font-size:1.05rem}

/* post nav (prev/next) */
.postnav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:clamp(2rem,5vw,3.5rem)}
.postnav a{background:var(--paper);padding:1.5rem clamp(1rem,3vw,2rem);font-family:var(--f-ui)}
.postnav a:hover{background:var(--card)}
.postnav .lbl{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-deep)}
.postnav .t{font-family:var(--f-display);font-size:1.25rem;margin-top:.4rem;color:var(--ink);line-height:1.15}
.postnav a.next{text-align:right}
@media(max-width:600px){.postnav{grid-template-columns:1fr}}

/* author card */
.authorcard{display:flex;gap:1.3rem;align-items:center;background:var(--paper-2);
  border-radius:16px;padding:1.4rem;margin:2.4em 0 0}
.authorcard img{width:74px;height:74px;border-radius:999px;object-fit:cover;flex:none}
.authorcard .an{font-family:var(--f-display);font-size:1.35rem}
.authorcard .ab{font-size:1.05rem;color:var(--ink-soft);line-height:1.45;margin-top:.2rem}

/* ============================================================
   GENERIC PAGE (about, contact, schools, privacy)
   ============================================================ */
.page-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.page-hero h1{font-size:clamp(2.6rem,7vw,5rem)}
.page-hero .lede{margin-top:.7rem;max-width:40ch}

/* contact split */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--sage-deep);color:#fff;border-radius:20px;padding:clamp(1.8rem,4vw,2.6rem)}
.contact-card .eyebrow{color:rgba(255,255,255,.7)}
.contact-card h2{color:#fff;font-size:2rem;margin:.3em 0 .6em}
.contact-line{display:flex;gap:.9rem;align-items:baseline;padding:1rem 0;border-top:1px solid rgba(255,255,255,.18)}
.contact-line .k{font-family:var(--f-ui);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.7);min-width:6.5ch;flex:none}
.contact-line .v{font-size:1.15rem}
.contact-line a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.contact-line a:hover{color:var(--powder)}
.contact-note{font-size:1.3rem;line-height:1.6}

/* schools list */
.school{padding:clamp(1.6rem,4vw,2.4rem) 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:.5rem clamp(1.5rem,4vw,3rem)}
.school .rank{font-family:var(--f-display);font-size:2.6rem;color:var(--sage);grid-row:span 2;line-height:1}
.school h2{margin:0;font-size:clamp(1.7rem,3.5vw,2.4rem)}
.school h2::before{display:none}
.school .loc{font-family:var(--f-ui);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blush-deep);margin-top:.3rem}
.school p{grid-column:2;font-size:1.25rem;margin:.6rem 0 0}
.school .visit{grid-column:2;margin-top:.7rem;font-family:var(--f-ui);font-size:.9rem;font-weight:600}
@media(max-width:600px){
  .school{grid-template-columns:1fr}
  .school .rank{grid-row:auto;font-size:1.9rem}
  .school p,.school .visit{grid-column:1}
}

/* ============================================================
   FOOTER — full-bleed sage block, compact on mobile
   ============================================================ */
.site-footer{background:var(--sage-deep);color:#fff;padding:clamp(2.6rem,6vw,4.2rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:start}
.foot-brand .mark{font-family:var(--f-display);font-size:1.9rem;letter-spacing:.14em;text-transform:uppercase}
.foot-brand p{color:rgba(255,255,255,.78);font-size:1.1rem;line-height:1.5;margin-top:.7rem;max-width:34ch}
.foot-col h4{font-family:var(--f-ui);font-size:.78rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:.9rem}
.foot-col ul{display:flex;flex-direction:column;gap:.5rem}
.foot-col a{color:rgba(255,255,255,.92);font-family:var(--f-ui);font-size:1rem}
.foot-col a:hover{color:var(--powder)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--f-ui);font-size:.86rem;color:rgba(255,255,255,.7);align-items:center}
.foot-bottom .legal{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.foot-bottom a{color:rgba(255,255,255,.85)}
.foot-bottom a:hover{color:var(--powder)}

@media(max-width:720px){
  .foot-top{grid-template-columns:1fr 1fr;gap:1.4rem 1.5rem}
  .foot-brand{grid-column:1 / -1}
  .foot-col ul{gap:.35rem}
}

/* utilities */
.center{text-align:center}
.mt-cta{margin-top:2rem}
.clear{clear:both}

/* 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 .partner-card .partner-logo.partner-logo{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important}
.partners-grid .partner-card .partner-logo.partner-logo{display:block!important;width:100%!important}
.partners-grid .partner-card.partner-card img{box-sizing:border-box!important;height:38px!important;display:block!important;width:100%!important;padding:8px 12px!important;background:transparent!important;width:100%!important;padding:0!important}

/* op-hero-gutter: operator: "look how all elements touch edges. this is major issue" (393px).
   The band is <section class="hero wrap">, so .wrap already supplies
   padding-inline:clamp(1.15rem,4vw,2.75rem) — but .hero sets the padding SHORTHAND
   (`padding: <block> 0 <block>`) on the same element and later in the sheet, which resets
   padding-left/right to 0. Every element in the hero then starts at x=0. The build's own gutter
   value is restated for the inline axis only; the vertical rhythm .hero sets is untouched. */
/* ⚠️ 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 hero only lost its gutter at phone width. */
@media (max-width:900px){.hero.wrap{padding-inline:clamp(1.15rem,4vw,2.75rem)}}
/* op-drawer-clip: the mobile nav is position:fixed and parked off-canvas to the RIGHT (x=390,
   390px wide), so its box added its full width to the document's scroll width — the page measured
   780px at a 390px viewport. overflow-x:clip on the root stops a parked panel contributing to
   scroll width; `clip` rather than `hidden` because hidden would create a scroll container and
   break position:sticky elsewhere on the page. Verified: 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-recentre-plate: operator: "adult logo insertions drifted from center" (pre-existing — the
   gaps measured 38/88 at 390px AND 38/87 at 1440px, so the padding fix above did not cause it).
   ⚠️ THE CAUSE IS OURS: sp-mark-frame forces .partner-logo{display:block!important}, which
   replaces Design's own `display:flex; align-items:center; justify-content:center` on that plate —
   and with the image capped at max-width:82% and no auto margins, it then sits off to one side.
   Design already supplies the plate here (width:100%, fixed height, ground), so the block
   override was redundant. Its centring is restored at the same specificity. */
.partners-grid .partner-card .partner-logo.partner-logo{display:flex!important;align-items:center!important;justify-content:center!important}

/* op-drawer-containing-block: the menu opened UNDERNEATH the page and its list ran off the
   right edge. `.nav{position:fixed;inset:0;z-index:60;transform:translateX(100%)}` is correct
   in itself, but `.site-header{position:sticky;backdrop-filter:blur(10px)}` makes the header
   the CONTAINING BLOCK for every position:fixed descendant — so `inset:0` resolved against the
   120px header strip instead of the viewport. Measured at 390: the nav computed 390x120 at
   0,0 with its <ul> reaching right=756 (the page's horizontal overflow), and the panel sat
   inside the header's own stacking context, which is why it read as "under page content".
   Dropping the blur for phone widths hands the drawer back to the viewport. The strip stays
   86% opaque with its background, border, sticky behaviour and z-index intact; desktop keeps
   the blur. */
@media(max-width:860px){
  .site-header{backdrop-filter:none}
}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   2687px at 390, 23% of the whole page. Two columns bring it to
   1702px (37% shorter). Checked before writing: no new overflow, smallest mark still
   91px wide, longest blurb 2 lines, tile heights 256-281px.
   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.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.partners-grid), 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{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .partners-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .partners-grid > * *{min-width:0!important;max-width:100%}
    .partners-grid img,.partners-grid svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .partners-grid (5 tiles), .partners-grid (5 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){
  .partners-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .partners-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h4){margin: 0px;}
h2:where(.rt-h3){margin: 0px;}
h2:where(.rt-h4){font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: 0.005em;}
h2:where(.rt-h3){font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: 0.005em;}
.article h2:where(.rt-h3){font-size: clamp(1.5rem, 3vw, 2rem); margin: 1.6em 0px 0.4em; color: var(--sage-ink);}
.callout h2:where(.rt-h4){font-family: var(--f-display); font-size: 1.5rem; margin-bottom: 0.6rem;}
.foot-col h2:where(.rt-h4){font-family: var(--f-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.9rem;}
h2.rt-h4.rt-h4{position:static;margin-top:0px;padding-top:0px}
h2.rt-h3.rt-h3{position:static;padding-top:0px}
/* 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:901px) and (max-width:1199px){
  div.hero-grid{padding-left:max(clamp(1.15rem,4vw,2.75rem), 18px);padding-right:max(clamp(1.15rem,4vw,2.75rem), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article.read.wrap > div.authorcard > img,
  div.article.read.wrap > figure.figure-left > img,
  div.article.read.wrap > figure.figure-right > img,
  div.hero-grid > figure.hero-frame > img,
  div.wrap > figure.figure-full > img){height:auto}
/* op-img-dims:end */
@media (min-width:640px) and (max-width:939px){.partners-grid:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}