/* ============================================================
   AOSD — The Modularity Chronicle
   Sunset palette: plum / coral / gold
   ============================================================ */

:root{
  --plum-deep:#26082b;
  --plum:#3c1140;
  --plum-soft:#571f52;
  --coral:#f4553b;
  --coral-deep:#d63c2a;
  --rose:#c2417c;
  --gold:#ffb52a;
  --gold-soft:#ffd678;
  --sand:#fff3e4;
  --paper:#fdeedd;
  --paper-deep:#f9e2c8;
  --ink:#331327;
  --ink-soft:#6d4258;
  --line:#e5c9ae;
  --grad-sunset:linear-gradient(168deg,#26082b 0%,#3c1140 34%,#75204e 62%,#c2417c 82%,#f4553b 100%);
  --grad-horizon:linear-gradient(90deg,var(--coral),var(--gold) 50%,var(--rose));
  --ff-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --ff-body:"Source Serif 4",Georgia,serif;
  --ff-mono:"Spline Sans Mono","SFMono-Regular",ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:23px;
  line-height:1.62;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--coral-deep);text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--rose)}
::selection{background:var(--coral);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}
.j-entry:focus-visible,.room-card:focus-visible,.partner-card:focus-visible{outline-offset:-2px}
[id]{scroll-margin-top:104px}
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;color:var(--plum-deep)}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700}
h3{font-size:clamp(1.3rem,2.4vw,1.65rem);font-weight:700}
p{margin:0 0 1.2em}
.wrap{max-width:1220px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,52px)}
.center{text-align:center}

.kicker{
  font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--coral);font-weight:500;margin:0 0 14px;display:block;
}
.kicker::before{content:"\25E2 ";color:var(--gold)}
.kicker a{color:inherit;text-decoration:none}

/* ============ HEADER ============ */
.site-head{background:var(--plum-deep);color:var(--sand);border-bottom:3px solid var(--gold);position:sticky;top:0;z-index:100}
.head-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;max-width:1220px;margin:0 auto;padding:16px clamp(16px,4vw,52px)}
.wordmark{display:flex;flex-direction:column;gap:3px;text-decoration:none;line-height:1}
.wordmark b{font-family:var(--ff-display);font-weight:800;font-size:1.85rem;letter-spacing:.01em;color:var(--sand)}
.wordmark span{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--coral)}
.site-nav{display:flex;gap:clamp(14px,2.2vw,32px);align-items:center}
.site-nav a{
  font-family:var(--ff-mono);font-size:.86rem;letter-spacing:.05em;color:var(--sand);
  text-decoration:none;padding:8px 2px;border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a.is-here{color:var(--gold-soft);border-bottom-color:var(--coral)}
.nav-toggle-box{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.nav-toggle{display:none;cursor:pointer;padding:11px;border-radius:10px;line-height:0}
.nav-toggle svg{overflow:visible;display:block}
.nav-toggle .bar{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease;transform-box:fill-box;transform-origin:center}
.nav-toggle-box:checked ~ .nav-toggle .bar-1{transform:translateY(7px) rotate(45deg)}
.nav-toggle-box:checked ~ .nav-toggle .bar-2{opacity:0}
.nav-toggle-box:checked ~ .nav-toggle .bar-3{transform:translateY(-7px) rotate(-45deg)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;font-family:var(--ff-mono);font-size:.9rem;letter-spacing:.05em;
  padding:15px 30px;border-radius:999px;text-decoration:none;border:2px solid transparent;
  transition:background .15s,color .15s,border-color .15s;
}
.btn.solid{background:var(--gold);color:var(--plum-deep);font-weight:600}
.btn.solid:hover{background:var(--gold-soft);color:var(--plum-deep)}
.btn.ghost{border-color:currentColor;color:#ffdcc9}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-soft)}

/* ============ HOME HERO ============ */
.hero{
  background:var(--plum-deep);
  color:#fff;position:relative;overflow:hidden;
  padding:clamp(72px,11vw,150px) clamp(20px,6vw,90px) clamp(96px,13vw,180px);
}
.hero>*{position:relative;z-index:1;max-width:920px}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;z-index:0;max-width:none}
.hero-tint{
  position:absolute;inset:0;z-index:0;max-width:none;
  background:linear-gradient(168deg,rgba(38,8,43,.93) 0%,rgba(60,17,64,.89) 30%,rgba(117,32,78,.82) 55%,rgba(194,65,124,.74) 78%,rgba(244,85,59,.64) 100%);
}
.hero .kicker{color:var(--gold-soft)}
.hero h1{color:#fff;margin:0 0 24px;font-size:clamp(2.9rem,7.6vw,5.4rem)}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .sub{font-size:clamp(1.15rem,2.2vw,1.5rem);color:#ffdcc9;max-width:42ch;margin:0 0 38px;line-height:1.5}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px}

/* ============ SECTIONS (generic) ============ */
.home-sec{padding-block:clamp(58px,8vw,104px)}
.sec-head{max-width:760px;margin-bottom:clamp(30px,4vw,54px)}
.sec-head h2{margin:0 0 .35em}
.sec-head p{color:var(--ink-soft);font-size:1.06rem;margin:0}

/* --- idea strip --- */
.idea-strip{padding-block:clamp(54px,7vw,92px);background:var(--paper)}
.idea-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(22px,3vw,40px)}
.idea{border-top:3px solid var(--coral);padding-top:22px}
.idea .n{font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-deep);display:block;margin-bottom:12px}
.idea h3{margin:0 0 10px;color:var(--plum-deep)}
.idea p{color:var(--ink-soft);font-size:1rem;margin:0;line-height:1.5}

/* --- journal grid --- */
.journal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px}
.j-entry{
  display:flex;flex-direction:row;align-items:center;gap:16px;
  background:var(--sand);border:2px solid var(--line);border-radius:13px;
  overflow:hidden;text-decoration:none;padding:10px;
  transition:border-color .15s,transform .15s;
}
.j-entry:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(38,8,43,.45)}
.j-thumb{width:64px;height:64px;border-radius:9px;object-fit:cover;display:block;flex-shrink:0}
.j-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.j-entry .no{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;color:var(--coral)}
.j-entry h3{margin:0;color:var(--plum-deep);font-size:.98rem;line-height:1.28;font-weight:700}
.j-entry .cat{
  order:3;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}
.j-entry p{display:none}
@media (max-width:640px){.journal{grid-template-columns:1fr}}

/* --- reading room --- */
.room{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(18px,2.4vw,26px)}
.room-card{
  display:flex;flex-direction:column;gap:12px;background:var(--sand);
  border:2px solid var(--line);border-radius:18px;padding:32px 28px;text-decoration:none;
  transition:border-color .15s,transform .15s;
}
.room-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(38,8,43,.45)}
.room-card .glyph{font-family:var(--ff-display);font-size:2.7rem;line-height:1;color:var(--coral)}
.room-card h3{margin:0;color:var(--plum-deep)}
.room-card p{margin:0;color:var(--ink-soft);font-size:1rem;flex:1;line-height:1.5}

/* --- timeline band (always dark) --- */
.tl-band{padding-block:clamp(58px,8vw,104px);background:var(--plum-deep);color:var(--sand)}
.tl-band .sec-head h2{color:#fff}
.tl-band .sec-head p{color:#f0cdbc}
.tl-band .kicker{color:var(--gold-soft)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:96px;top:8px;bottom:8px;width:2px;background:var(--grad-horizon)}
.timeline li{position:relative;padding:16px 0 16px 138px;border-bottom:1px solid rgba(255,255,255,.09)}
.timeline li:last-child{border-bottom:none}
.timeline .yr{
  position:absolute;left:0;top:16px;width:78px;text-align:right;
  font-family:var(--ff-mono);font-weight:600;font-size:1.4rem;color:var(--gold);text-decoration:none;
}
.timeline .yr:hover{color:var(--gold-soft)}
.timeline li::after{
  content:"";position:absolute;left:89px;top:24px;width:16px;height:16px;border-radius:50%;
  background:var(--coral);border:3px solid var(--plum-deep);box-shadow:0 0 0 2px var(--coral);
}
.timeline .place{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.2rem;color:#fff}
.timeline .note{margin:6px 0 0;font-size:.95rem;color:#e6bfb0;max-width:60ch;line-height:1.45}

/* ============ PARTNER CARDS ============ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(18px,2.4vw,26px)}
.sponsor-guide{padding-block:clamp(58px,8vw,104px);background:var(--paper-deep)}
.sponsor-dusk{padding-block:clamp(58px,8vw,104px);background:var(--grad-sunset)}
.sponsor-dusk .sec-head h2{color:#fff}
.sponsor-dusk .sec-head p{color:#ffdcc9}
.sponsor-dusk .kicker{color:var(--gold-soft)}
.rail{display:flex;gap:18px;overflow-x:auto;padding:4px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail .partner-card{flex:0 0 clamp(230px,74vw,290px);scroll-snap-align:start}
.partner-card{
  background:var(--sand);border:2px solid var(--line);border-radius:18px;
  padding:24px;display:flex;flex-direction:column;gap:14px;transition:border-color .15s;
}
.partner-card:hover{border-color:var(--gold);box-shadow:0 16px 30px -20px rgba(38,8,43,.4)}
.partner-logo{
  width:100%;height:64px;background:#fff;border:1px solid var(--line);border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:8px 16px;
}
.partner-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;margin:auto}
.partner-name{font-family:var(--ff-display);font-weight:700;font-size:1.14rem;margin:0}
.partner-name a{color:var(--plum-deep);text-decoration:none}
.partner-name a:hover{color:var(--coral-deep)}
.partner-desc{font-size:.9rem;color:var(--ink-soft);margin:0;flex:1;line-height:1.45}
.partner-cta{
  align-self:flex-start;font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--coral-deep);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px;
}
.partner-cta:hover{color:var(--rose)}

/* ============ CONTENT PAGE HERO ============ */
.reading{max-width:820px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.post-hero,.arch-hero{
  background:var(--grad-sunset);color:#fff;
  padding-block:clamp(52px,8vw,98px);border-bottom:4px solid var(--gold);
}
.post-hero .kicker,.arch-hero .kicker{color:var(--gold-soft)}
.post-hero h1,.arch-hero h1{color:#fff;margin:0}
.standfirst{font-size:clamp(1.12rem,2vw,1.4rem);color:#ffdcc9;margin:20px 0 0;max-width:60ch;line-height:1.5}
.place-line{font-family:var(--ff-mono);font-size:.9rem;letter-spacing:.03em;color:#ffcdb8;margin:16px 0 0}
.yr-big{font-family:var(--ff-display);font-weight:800;font-size:clamp(3.4rem,10vw,6rem);line-height:.9;color:var(--gold-soft);margin-bottom:8px}
.post-meta-row{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:#ffcdb8}
.post-meta-row span+span{position:relative}
.post-meta-row span+span::before{content:"\2022";position:absolute;left:-15px;color:var(--gold)}

/* ============ ARTICLE BODY ============ */
.prose{padding-block:clamp(42px,6vw,74px);font-size:1.04em}
.prose>p,.prose>ul,.prose>ol{margin-block:0 1.2em}
.prose h2{margin:1.9em 0 .5em;color:var(--plum-deep);clear:both}
.prose h2 .idx{
  display:block;font-family:var(--ff-mono);font-size:.42em;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--coral);margin-bottom:10px;
}
.prose h3{margin:1.5em 0 .4em;color:var(--plum-deep);clear:both}
.prose ul,.prose ol{padding-left:1.15em;margin:1.3em 0}
.prose li{margin:0 0 .6em}
.prose strong{color:var(--plum)}
.prose>ul:first-child{margin-top:.4em}
.dropcap::first-letter{
  font-family:var(--ff-display);font-weight:800;font-size:3.6em;float:left;
  line-height:.7;padding:8px 14px 0 0;color:var(--coral);
}

/* figures */
.fig{margin:2.4em 0}
.fig img{border-radius:14px;width:100%;object-fit:cover}
.fig figcaption{font-family:var(--ff-mono);font-size:.74rem;color:var(--ink-soft);margin-top:12px;letter-spacing:.02em;line-height:1.5}
.fig figcaption::before{content:"\2301 ";color:var(--coral)}
.fig.half-r,.fig.half-l{margin:1.2em 0}
@media(min-width:720px){
  .fig.half-r{float:right;width:46%;margin:.4em 0 1.4em 2.2em}
  .fig.half-l{float:left;width:46%;margin:.4em 2.2em 1.4em 0}
}

/* pull quote */
.pullquote{
  margin:2.4em 0;padding:6px 0 6px 30px;border-left:5px solid var(--gold);
  font-family:var(--ff-display);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.92rem);
  line-height:1.3;color:var(--plum);font-style:normal;clear:both;
}
.pullquote cite{display:block;font-family:var(--ff-mono);font-size:.46em;font-weight:400;font-style:normal;color:var(--ink-soft);margin-top:14px;letter-spacing:.08em}
.pullquote cite::before{content:"\2014 "}

/* about-page pullquote alias */
blockquote.pullquote{background:none;margin-inline:0}

/* callouts */
.callout{
  background:var(--sand);border:2px solid var(--line);border-left:6px solid var(--coral);
  border-radius:0 16px 16px 0;padding:22px 26px;margin:2.4em 0;font-size:.96em;clear:both;
}
.callout.gold{border-left-color:var(--gold)}
.callout-tag{display:block;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:14px}
.callout.gold .callout-tag{color:#b6791a}
.callout ul{margin:0;padding-left:1.15em}
.callout li{margin:0 0 .55em}
.callout li:last-child{margin-bottom:0}

/* quick-facts row */
.facts-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:2px;
  background:var(--line);border:2px solid var(--line);border-radius:14px;overflow:hidden;margin:2.4em 0;clear:both;
}
.fact{background:var(--sand);padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.fact b{font-family:var(--ff-display);font-weight:800;font-size:1.28rem;color:var(--coral-deep);line-height:1.05}
.fact small{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}

/* map embed */
.map-embed{margin:2.4em 0;border:3px solid var(--plum-deep);border-radius:16px;overflow:hidden;background:var(--sand);clear:both}
.map-embed iframe{display:block;width:100%;height:360px;border:0}
.map-cap{font-family:var(--ff-mono);font-size:.74rem;line-height:1.5;padding:14px 18px;margin:0;color:var(--ink-soft);border-top:2px solid var(--line)}

/* speaker card */
.speaker{
  display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;
  margin:2.4em 0;padding:24px;background:var(--sand);border:2px solid var(--line);border-radius:18px;clear:both;
}
.speaker img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}
.speaker h3{margin:0 0 2px;color:var(--plum-deep)}
.speaker .role{display:block;font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);margin-bottom:12px}
.speaker p{margin:0;font-size:.98em}

/* endnote */
.endnote{font-size:.92em;color:var(--ink-soft);border-top:2px solid var(--line);padding-top:20px;margin-top:2.4em;clear:both}
.endnote b{color:var(--plum-deep)}

/* archive prev/next */
.arch-nav{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  margin-top:2.8em;padding-top:24px;border-top:2px solid var(--line);clear:both;
}
.arch-nav a{font-family:var(--ff-mono);font-size:.86rem;color:var(--coral-deep);text-decoration:none}
.arch-nav a:hover{color:var(--rose)}

/* next-read CTA panel */
.next-read{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;
  margin:2.8em 0 0;padding:28px 32px;background:var(--plum-deep);border-radius:18px;clear:both;
}
.next-read>div{max-width:40ch}
.next-read .kicker{color:var(--gold-soft);margin-bottom:8px}
.next-read h3{margin:0;color:#fff;line-height:1.2}
.go{
  font-family:var(--ff-mono);font-size:.85rem;letter-spacing:.05em;color:var(--coral-deep);
  text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px;white-space:nowrap;
}
.go::after{content:" \2192"}
.go:hover{color:var(--rose)}
.next-read .go{color:var(--gold-soft);border-bottom-color:var(--coral)}
.next-read .go:hover{color:#fff}

/* ============ CONTACT ============ */
.contact-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:start;padding-block:clamp(42px,6vw,74px)}
.contact-card{background:var(--plum-deep);color:var(--sand);border-radius:22px;padding:clamp(28px,4vw,46px)}
.contact-card h2{color:#fff;margin:0 0 8px}
.c-row{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.c-row:last-child{border-bottom:none;padding-bottom:0}
.c-row small{display:block;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:10px}
.c-row a{font-family:var(--ff-display);font-weight:700;font-size:1.3rem;color:#fff;text-decoration:none;border-bottom:2px solid var(--coral);word-break:break-word}
.c-row a:hover{color:var(--gold-soft)}
.c-row p{margin:.7em 0 0;font-size:.95rem;color:#f0cdbc;line-height:1.5}
.contact-aside{display:flex;flex-direction:column;gap:20px}
.contact-note{background:var(--sand);border:2px solid var(--line);border-radius:16px;padding:24px 26px}
.contact-note h3{margin:0 0 10px;color:var(--plum-deep)}
.contact-note p{margin:0 0 10px;font-size:.95rem;color:var(--ink-soft)}
.contact-note ul{margin:0;padding-left:1.1em;font-size:.95rem}
.contact-note li{margin:0 0 .5em}

/* ============ FOOTER (ornamental) ============ */
.site-foot{background:var(--plum-deep);color:var(--sand);text-align:center;padding:0 20px clamp(30px,5vw,46px);position:relative;overflow:hidden}
.horizon{position:relative;height:84px;margin-bottom:26px;overflow:hidden}
.horizon .sun{
  position:absolute;left:50%;bottom:-72px;transform:translateX(-50%);
  width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft) 0%,var(--gold) 55%,var(--coral) 100%);
}
.horizon .rays{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-horizon)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:0 0 16px;padding:0;list-style:none}
.foot-links a{font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.04em;color:var(--sand);text-decoration:none}
.foot-links a:hover{color:var(--gold-soft)}
.foot-line{font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.02em;color:#c79bb1;margin:0}
.foot-line a{color:var(--gold-soft);text-decoration:none}
.foot-line a:hover{color:#fff}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .contact-split{grid-template-columns:1fr}
  .speaker{grid-template-columns:84px 1fr;gap:18px}
  .speaker img{width:84px;height:84px}
}
@media (max-width:760px){
  body{font-size:21px}
  .nav-toggle{display:block;order:2}
  .nav-toggle:hover{background:var(--plum-soft)}
  .site-nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;display:none;margin-top:4px}
  .nav-toggle-box:checked ~ .site-nav{display:flex}
  .site-nav a{padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.09)}
  .site-nav a:last-child{border-bottom:none}
  .site-nav a:hover,.site-nav a.is-here{border-bottom-color:rgba(255,255,255,.09);color:var(--gold-soft)}
  .timeline::before{left:12px}
  .timeline li{padding:12px 0 12px 44px}
  .timeline .yr{position:static;display:block;text-align:left;width:auto;margin-bottom:2px;font-size:1.25rem}
  .timeline li::after{left:5px;top:20px;width:14px;height:14px}
  .next-read{padding:24px 22px}
  .pullquote{font-size:1.3rem;padding-left:20px}
  .dropcap::first-letter{font-size:3.1em}
  .fig.half-r,.fig.half-l{float:none;width:100%;margin:1.6em 0}
  .map-embed iframe{height:300px}
}
@media (max-width:440px){
  .grid{grid-template-columns:1fr}
  .facts-row{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* 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-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.partner-cta.partner-cta{color:rgb(205,57,40)!important;opacity:1!important}

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


/* sp-rail-wrap: the reader-recommendation rail must not scroll sideways.
   Design built .rail as flex + overflow-x:auto with scroll-snap and fixed-basis cards, so it ran
   1530px wide inside a 1116px column. It wraps onto further rows instead; the cards keep the
   width Design chose, and may grow to share the row evenly rather than leaving a ragged tail. */
/* sp-rail-wrap: the rail is a grid matching .grid on the same page — RESPONSIVELY.
   ⚠️ THE FIRST VERSION WAS AN UNGUARDED THREE-COLUMN GRID AND IT BROKE MOBILE. At 390px the
   rail's container is 350px, so repeat(3,1fr) plus two 26px gaps forced 533px of minimum content
   and the PAGE overflowed — pre-edit it was 390px with the rail scrolling sideways inside itself,
   which was Design's mobile answer. Column count now steps down with the viewport, so there is
   no sideways scrolling at any width and nothing overflows.

   aosd carries two money containers: .grid is a CSS grid of three 354.664px columns with a 26px
   gap, and .rail was a flex row that scrolled. Matching .grid means a card is the same box
   wherever it appears on the page. */
.rail{display:grid!important;gap:26px!important;overflow-x:visible!important;
      scroll-snap-type:none!important;padding:4px 0 16px!important;
      grid-template-columns:1fr!important}
.rail .partner-card{flex:none!important;width:auto!important;scroll-snap-align:none!important}
@media (min-width:601px){ .rail{grid-template-columns:repeat(2,1fr)!important} }
@media (min-width:901px){ .rail{grid-template-columns:repeat(3,1fr)!important} }


/* sp-mark-frame (revised): same repair as agirpourlaplanete — the dark panel takes the uniform
   box and centres the artwork inside it, instead of the height being forced onto the <img> at
   38px with width:100%, which both shrank the mark and defeated its centring. */
.rail .partner-card .partner-logo.partner-logo{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:62px!important}
.rail .partner-card.partner-card img{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   3013px at 390, 29% of the whole page. Two columns bring it to
   1846px (39% shorter). Checked before writing: no new overflow, smallest mark still
   87px wide, longest blurb 4 lines, tile heights 252-304px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. 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 (.grid, .rail), 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){
  .grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .grid > * *{min-width:0!important;max-width:100%}
    .grid img,.grid svg{max-width:100%;height:auto}
  .rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .rail > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .rail > * *{min-width:0!important;max-width:100%}
    .rail img,.rail svg{max-width:100%;height:auto}
  .grid .partner-desc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
  .rail .partner-desc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 4 rows at 390, 1846px 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){
  .grid .partner-desc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
  .rail .partner-desc{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:63px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .rail (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){
  .rail:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--ff-display); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; color: var(--plum-deep);}
h2:where(.rt-h3){font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 700;}
.idea h2:where(.rt-h3){margin: 0px 0px 10px; color: var(--plum-deep);}
.j-entry h2:where(.rt-h3){margin: 0px; color: var(--plum-deep); font-size: 0.98rem; line-height: 1.28; font-weight: 700;}
.room-card h2:where(.rt-h3){margin: 0px; color: var(--plum-deep);}
.prose h2:where(.rt-h3){margin: 1.5em 0px 0.4em; color: var(--plum-deep); clear: both;}
.speaker h2:where(.rt-h3){margin: 0px 0px 2px; color: var(--plum-deep);}
.next-read h2:where(.rt-h3){margin: 0px; color: rgb(255, 255, 255); line-height: 1.2;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.prose.reading > div.speaker > img,
  article.prose.reading > figure.fig > img,
  article.prose.reading > figure.fig.half-l > img,
  article.prose.reading > figure.fig.half-r > img,
  div.journal > a.j-entry > img.j-thumb,
  main > section.hero > img.hero-photo){height:auto}
/* op-img-dims:end */