/* ============================================================
   Lotus & Stone — shared stylesheet
   Sumi-ink / jade / cinnabar on rice paper. Type runs large.
   ============================================================ */


:root{
  --ink:#22201c;
  --ink-soft:#3c392f;
  --ink-faint:#6f6a58;
  --paper:#ece5d6;
  --paper-2:#e3dbc8;
  --paper-card:#f3eee1;
  --line:rgba(34,32,28,.16);
  --line-soft:rgba(34,32,28,.10);
  --jade:#5e7c6b;
  --jade-deep:#2c332b;
  --jade-ink:#26302a;
  --cinnabar:#a8452e;
  --cinnabar-soft:#c17a5c;
  --acc-tea:#8c3b2e;
  --acc-gardens:#5e7c6b;
  --acc-movement:#6e7a5a;
  --acc-philosophy:#4a4a54;
  --acc-craft:#a8823c;
  --serif:'Gowun Batang',Georgia,serif;
  --read:'Spectral',Georgia,serif;
  --sans:'Gowun Dodum',system-ui,sans-serif;
  --wrap:1320px;
  --measure:38rem;
}

*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--read);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--cinnabar);text-decoration:none}
a:hover{color:var(--acc-tea)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.12;margin:0;color:var(--ink)}
p{margin:0 0 1.1em;text-wrap:pretty}
::selection{background:var(--jade);color:#f4f1e6}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(20px,5vw,72px)}
.kicker{font-family:var(--sans);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--jade)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.section-head{display:flex;align-items:baseline;gap:20px;margin-bottom:34px}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.section-head .rule{flex:1}
.section-head .more{font-family:var(--sans);font-size:.92rem;color:var(--jade);white-space:nowrap}
.seal{display:inline-flex;align-items:center;justify-content:center;background:var(--cinnabar);color:#f3ecdd;font-family:var(--serif);border-radius:5px}

/* ---------- Site header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(236,229,214,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;font-size:1.42rem;letter-spacing:.03em;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .seal{width:30px;height:30px;font-size:1rem}
.nav{display:flex;gap:26px;font-family:var(--sans);font-size:.98rem}
.nav a{color:var(--ink-soft)}
.nav a:hover,.nav a[aria-current]{color:var(--cinnabar)}
.nav-toggle{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--jade-deep);color:#cdd6c6;margin-top:80px}
.site-footer .wrap{padding-block:56px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:#f4f1e6;letter-spacing:.03em}
.foot-brand p{font-family:var(--read);font-size:.98rem;color:#a9b3a1;margin:.6em 0 0;max-width:26em}
.foot-nav{display:flex;gap:44px;flex-wrap:wrap}
.foot-col h4{font-family:var(--sans);font-weight:400;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:#8ea083;margin-bottom:12px}
.foot-col a{display:block;font-family:var(--read);font-size:1rem;color:#cdd6c6;margin-bottom:8px}
.foot-col a:hover{color:#f0b8a4}
.disclaimer{font-family:var(--sans);font-size:.9rem;line-height:1.6;color:#8b967f;max-width:60em;margin-top:26px}

/* ---------- Even-height card grid ---------- */
.card-grid{display:grid;gap:38px 34px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;background:var(--paper-card);border-radius:8px;overflow:hidden;border:1px solid var(--line-soft);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(34,32,28,.5)}
.card .thumb{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.card .tag{font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:11px}
.card h3{font-size:1.42rem;line-height:1.16;margin-bottom:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.32em}
.card .dek{font-family:var(--read);font-size:1.02rem;color:var(--ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto;padding-top:16px;font-family:var(--sans);font-size:.86rem;color:var(--ink-faint)}

/* ---------- Home hero ---------- */
.hero{position:relative;min-height:600px;display:grid;grid-template-columns:1.05fr .95fr;background:var(--jade-deep)}
.hero-media{position:relative}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-copy{color:#f4f1e6;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,72px)}
.hero-copy .kicker{color:#f0b8a4}
.hero-copy h1{color:#f6f3e9;font-size:clamp(2.4rem,5vw,4.2rem);margin:22px 0 20px;text-wrap:balance}
.hero-copy .dek{font-family:var(--read);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;color:#e3ddce;max-width:30em;margin-bottom:30px}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:1rem;align-self:flex-start}
.btn.solid{background:var(--cinnabar);color:#fff;padding:15px 30px;border-radius:3px}
.btn.solid:hover{background:#93381f;color:#fff}
.btn.underline{color:#f4f1e6;border-bottom:1.5px solid var(--cinnabar);padding-bottom:6px}
.btn.underline.dark{color:var(--ink)}

/* ---------- Way of tea (step flow) ---------- */
.band{padding-block:clamp(56px,7vw,84px)}
.band.dark{background:var(--jade-deep);color:#e7eadf}
.band.panel{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
.step{border-top:2px solid rgba(255,255,255,.22);padding-top:18px}
.step:first-child{border-top-color:#f0b8a4}
.step .n{font-family:var(--serif);font-weight:700;font-size:1.7rem;color:#a9c1af;margin-bottom:10px}
.step:first-child .n{color:#f0b8a4}
.step h3{font-size:1.28rem;color:#f4f1e6;margin-bottom:8px}
.step p{font-family:var(--read);font-size:1rem;color:#c2ccbc;margin:0}

/* ---------- Seasonal practice ---------- */
.seasons{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.season{background:var(--paper-card);border:1px solid var(--line-soft);border-radius:8px;padding:26px 26px 30px;border-top:3px solid var(--jade)}
.season .s-name{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.season .s-name b{font-family:var(--serif);font-weight:700;font-size:1.42rem}
.season .s-name span{font-family:var(--serif);font-size:1.2rem;color:var(--jade)}
.season p{font-family:var(--read);font-size:1.04rem;color:var(--ink-soft);margin:0}

/* ---------- Browse by section ---------- */
.section-nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.section-nav a{padding:26px 22px;border-right:1px solid var(--line-soft);display:block}
.section-nav a:last-child{border-right:0}
.section-nav .sn-no{font-family:var(--sans);font-size:.78rem;letter-spacing:.2em;color:var(--jade)}
.section-nav h3{font-family:var(--serif);font-size:1.5rem;margin:8px 0 8px}
.section-nav p{font-family:var(--read);font-size:.98rem;color:var(--ink-faint);margin:0}
.section-nav a:hover h3{color:var(--cinnabar)}

/* ---------- Sponsors (tiered) ---------- */
.sponsor-band .head-block{max-width:40em;margin-bottom:30px}
.sponsor-band .head-block h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.sponsor-band .head-block p{font-family:var(--sans);font-size:1rem;color:var(--ink-faint);margin:.5em 0 0}
.sponsor-featured{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.sponsor{display:flex;flex-direction:column;gap:12px;background:transparent;border-radius:8px}
.sponsor img{width:100%;aspect-ratio:12/5;object-fit:cover;background:var(--jade-deep);border-radius:6px;border:1px solid rgba(0,0,0,.2)}
.sponsor-featured .sponsor img{aspect-ratio:12/4.4}
.sponsor-blurb{font-family:var(--sans);font-size:.9rem;line-height:1.5;color:var(--ink-faint)}
.sponsor-blurb:empty{display:none}
.sponsor-regulars{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sponsor-regulars .sponsor img{aspect-ratio:12/4}
.sponsor-regulars .sponsor-blurb{font-size:.82rem}

/* ============================================================
   ARTICLE + palette components
   ============================================================ */
.article-hero{position:relative;min-height:560px;display:flex;align-items:flex-end;color:#f4f1e6}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,26,20,.5) 0%,rgba(20,26,20,.15) 40%,rgba(20,26,20,.8) 100%)}
.article-hero .wrap{position:relative;padding-block:56px;width:100%}
.article-hero .kicker{color:#f0b8a4}
.article-hero h1{color:#f6f3e9;font-size:clamp(2.2rem,5vw,3.8rem);margin:18px 0 18px;max-width:18em;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.article-hero .dek{font-family:var(--read);font-size:clamp(1.15rem,1.8vw,1.4rem);color:#e8e4d6;max-width:34em;margin:0;text-shadow:0 1px 20px rgba(0,0,0,.4)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-family:var(--sans);font-size:.98rem;color:var(--ink-soft)}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--cinnabar)}
.byline-band{border-bottom:1px solid var(--line);padding-block:24px}

/* reading column — carries its OWN padding-inline (mobile gutter) */
.article-body{max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,4vw,40px);padding-block:clamp(40px,5vw,64px);font-size:1.28rem;line-height:1.75}
.article-body>p{margin:0 0 1.2em}
.article-body h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:2em 0 .6em;padding-top:.4em}
.article-body h2 .h-no{font-family:var(--sans);font-weight:400;font-size:.9rem;letter-spacing:.2em;color:var(--jade);display:block;margin-bottom:.5em}
.article-body h3{font-size:1.4rem;margin:1.6em 0 .5em}
.article-body em,.article-body i{font-style:italic}
.article-body p.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:4.4rem;line-height:.82;padding:.05em .12em 0 0;color:var(--cinnabar)}
.article-body a{border-bottom:1px solid rgba(168,69,46,.4)}
.article-body a:hover{border-bottom-color:var(--cinnabar)}
.footnote-ref{font-family:var(--sans);font-size:.7em;vertical-align:super;color:var(--cinnabar);border:0;padding:0 .1em;font-weight:700}

/* breakout width for figures/components inside reading column */
.breakout{max-width:min(60rem,92vw);margin-inline:auto}

.lead{font-family:var(--read);font-weight:500;font-size:1.5rem;line-height:1.5;color:var(--jade-ink);margin:0 0 1.2em}
.pullquote{margin:1.8em 0;padding:0 0 0 30px;border-left:3px solid var(--cinnabar)}
.pullquote p{font-family:var(--serif);font-weight:700;font-size:1.9rem;line-height:1.32;color:var(--jade-ink);margin:0}
.blockquote{margin:1.8em 0;padding:22px 28px;background:var(--paper-2);border-radius:6px}
.blockquote p{font-family:var(--read);font-style:italic;font-size:1.28rem;margin:0 0 .5em}
.blockquote cite{font-family:var(--sans);font-style:normal;font-size:.92rem;color:var(--ink-faint)}
.callout{margin:1.8em 0;padding:24px 28px;background:var(--jade-deep);color:#e7eadf;border-radius:8px}
.callout p{margin:0;font-family:var(--read);font-size:1.16rem;line-height:1.6}
.callout p+p{margin-top:.6em}
.note{margin:1.6em 0;padding:16px 20px 16px 46px;background:rgba(94,124,107,.12);border-radius:6px;font-family:var(--sans);font-size:1.02rem;line-height:1.55;color:var(--ink-soft);position:relative}
.note::before{content:"";position:absolute;left:18px;top:20px;width:14px;height:14px;border-radius:50%;border:2px solid var(--jade)}
.note::after{content:"i";position:absolute;left:23px;top:19px;font-family:var(--serif);font-size:.8rem;color:var(--jade)}

/* versus / datatable */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.8em 0;font-family:var(--sans);font-size:1rem}
.versus caption,.datatable caption{font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);text-align:left;margin-bottom:12px}
.versus th,.versus td,.datatable th,.datatable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.versus thead th,.datatable thead th{font-family:var(--serif);font-weight:700;font-size:1.06rem;border-bottom:2px solid var(--ink)}
.versus tbody th{font-weight:400;color:var(--ink-faint);font-size:.94rem}
.datatable tbody tr:nth-child(even){background:rgba(34,32,28,.03)}
.versus td:not(:first-child){border-left:1px solid var(--line-soft)}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2px;margin:1.8em 0;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.statblock{background:var(--paper-card);padding:24px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--serif);font-weight:700;font-size:2.4rem;line-height:1;color:var(--cinnabar)}
.stat-label{font-family:var(--sans);font-size:.9rem;line-height:1.4;color:var(--ink-soft)}

/* timeline */
.timeline{list-style:none;margin:1.8em 0;padding:0}
.timeline li{position:relative;padding:0 0 26px 34px;border-left:2px solid var(--line)}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--jade);border:2px solid var(--paper)}
.t-when{display:block;font-family:var(--sans);font-size:.9rem;letter-spacing:.06em;color:var(--cinnabar);margin-bottom:4px}
.t-what{display:block;font-family:var(--read);font-size:1.12rem;line-height:1.5;color:var(--ink)}

/* charts */
.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .bar-rect{fill:var(--jade)}
.chart .bar-rect.alt{fill:var(--cinnabar)}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .b-label{font-family:var(--sans);font-size:12px;fill:var(--ink-soft)}
.chart .b-val{font-family:var(--sans);font-size:12px;fill:var(--ink-faint)}
.chart .line-path{fill:none;stroke:var(--jade);stroke-width:2.5}
.chart .line-dot{fill:var(--cinnabar)}
.chart figcaption,.article-figure figcaption,.map-figure figcaption{font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--ink-faint);margin-top:12px;text-align:left}

/* figures / gallery */
.article-figure{margin:2em 0}
.article-figure img{width:100%;border-radius:6px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.gallery figcaption{font-family:var(--sans);font-size:.84rem;color:var(--ink-faint);margin-top:8px}

/* map figure — frame only */
.map-figure{margin:2em 0}
.map-slot{aspect-ratio:16/9;background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 12px,var(--paper-card) 12px,var(--paper-card) 24px);border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center}
.map-slot::after{content:"Locator map";font-family:var(--sans);font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:1.8em 0}
.profile-card{background:var(--paper-card);border:1px solid var(--line-soft);border-radius:8px;padding:24px;display:flex;flex-direction:column}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo::before{content:"";width:44px;height:44px;border-radius:50%;background:var(--jade);opacity:.2;margin-bottom:14px}
.profile-card h3{font-size:1.24rem;margin-bottom:4px}
.profile-card .p-role{font-family:var(--sans);font-size:.9rem;color:var(--jade);margin:0 0 10px}
.profile-card p{font-family:var(--read);font-size:1.02rem;color:var(--ink-soft);margin:0 0 12px}
.profile-card .p-links{margin-top:auto}
.profile-card .p-links a,.p-attr{font-family:var(--sans);font-size:.88rem}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.8em 0}
.org-card{display:flex;align-items:center;gap:14px;background:var(--paper-card);border:1px solid var(--line-soft);border-radius:8px;padding:14px 18px}
.org-card:hover{border-color:var(--jade)}
.org-logo{width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--jade-deep);flex:none}
.org-card .org-name{font-family:var(--serif);font-weight:700;font-size:1.06rem;color:var(--ink)}
.org-card .org-host{font-family:var(--sans);font-size:.82rem;color:var(--ink-faint);display:block}
.entity-ref{font-family:var(--sans);font-weight:400;white-space:nowrap;border-bottom:1px solid rgba(168,69,46,.4)}

/* endnotes */
.endnotes{max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,4vw,40px);padding-block:20px 10px}
.endnotes h2{font-size:1.4rem;margin-bottom:18px}
.endnotes ol{margin:0;padding-left:1.3em}
.endnotes li{font-family:var(--read);font-size:1.06rem;line-height:1.55;color:var(--ink-soft);margin-bottom:14px;padding-left:6px}
.endnotes li::marker{font-family:var(--sans);font-size:.86rem;color:var(--cinnabar)}
.endnotes .en-back{font-family:var(--sans);font-size:.8rem;margin-left:6px}

/* related / further */
.further,.related-wrap{background:var(--paper-2);border-top:1px solid var(--line)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.further-grid a{display:flex;flex-direction:column;gap:8px;background:var(--paper-card);border:1px solid var(--line-soft);border-radius:8px;padding:20px 22px}
.further-grid a:hover{border-color:var(--jade);transform:translateY(-3px)}
.further-grid .fg-tag{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--jade)}
.further-grid .fg-title{font-family:var(--serif);font-weight:700;font-size:1.24rem;line-height:1.18;color:var(--ink)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related-links li a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid var(--line);font-family:var(--serif);font-weight:700;font-size:1.24rem;color:var(--ink)}
.related-links li a:hover{color:var(--cinnabar)}
.related-links li:last-child a{border-bottom:1px solid var(--line)}

/* ---------- Category / index pages ---------- */
.page-masthead{background:var(--jade-deep);color:#f4f1e6;position:relative;overflow:hidden}
.page-masthead .wrap{padding-block:clamp(48px,7vw,88px);position:relative}
.page-masthead .kicker{color:#f0b8a4}
.page-masthead h1{color:#f6f3e9;font-size:clamp(2.4rem,5vw,3.8rem);margin:16px 0 16px}
.page-masthead .intro{font-family:var(--read);font-size:clamp(1.15rem,1.8vw,1.4rem);color:#e3ddce;max-width:34em;margin:0}
.page-masthead .cjk{position:absolute;right:4vw;top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:clamp(6rem,16vw,15rem);color:rgba(240,184,164,.14);line-height:1;pointer-events:none}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li a{display:grid;grid-template-columns:64px 1fr auto;gap:28px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.cat-list li:last-child a{border-bottom:1px solid var(--line)}
.cat-list .cl-no{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--jade)}
.cat-list .cl-title{font-family:var(--serif);font-weight:700;font-size:1.6rem;line-height:1.14;color:var(--ink);margin:0 0 6px}
.cat-list .cl-dek{font-family:var(--read);font-size:1.08rem;color:var(--ink-soft);margin:0;max-width:46em}
.cat-list .cl-meta{font-family:var(--sans);font-size:.86rem;color:var(--ink-faint);white-space:nowrap;text-align:right}
.cat-list li a:hover .cl-title{color:var(--cinnabar)}

/* prose pages (about/contact) */
.prose{max-width:44rem;margin:0 auto;padding-inline:clamp(20px,4vw,40px);padding-block:clamp(40px,5vw,64px);font-size:1.24rem;line-height:1.72}
.prose h2{font-size:1.7rem;margin:1.6em 0 .5em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
.contact-list{list-style:none;padding:0;margin:1.4em 0;display:grid;gap:14px}
.contact-list li{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-size:1.06rem}
.contact-list svg{width:22px;height:22px;stroke:var(--jade);flex:none}

/* 404 */
.errpage{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px}
.errpage .big{font-family:var(--serif);font-weight:700;font-size:clamp(4rem,14vw,9rem);color:var(--jade);line-height:1}
.errpage h1{font-size:2rem;margin:10px 0 12px}
.errpage p{font-family:var(--read);font-size:1.2rem;color:var(--ink-soft);max-width:26em}

/* styleguide */
.sg-section{padding-block:44px;border-top:1px solid var(--line)}
.sg-section>h2{font-size:1.9rem;margin-bottom:6px}
.sg-section>.sg-note{font-family:var(--sans);font-size:.94rem;color:var(--ink-faint);margin-bottom:26px}
.sg-label{font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--jade);margin:28px 0 12px}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.sw{border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.sw .chip{height:70px}
.sw .name{font-family:var(--sans);font-size:.8rem;padding:8px 10px;background:var(--paper-card);color:var(--ink-soft)}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero-media{min-height:340px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .seasons{grid-template-columns:repeat(2,1fr)}
  .section-nav{grid-template-columns:repeat(2,1fr)}
  .section-nav a{border-bottom:1px solid var(--line-soft)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  html{font-size:17px}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 0}
  .nav.open{display:flex}
  .nav a{padding:13px clamp(20px,5vw,72px)}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;background:none;border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer}
  .nav-toggle svg{width:22px;height:22px;stroke:currentColor}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .seasons{grid-template-columns:1fr}
  .section-nav{grid-template-columns:1fr}
  .hero{min-height:0}
  .article-hero{min-height:0;padding-top:200px}
  .cat-list li a{grid-template-columns:40px 1fr;gap:16px}
  .cat-list .cl-meta{grid-column:2;text-align:left;margin-top:4px}
  .statrow{grid-template-columns:1fr 1fr}
  .foot-nav{gap:28px}
  .article-body{font-size:1.16rem}
  .pullquote p{font-size:1.5rem}
}
@media (max-width:400px){
  .statrow{grid-template-columns:1fr}
}

/* vocabulary aside */
.lexicon{max-width:var(--measure);margin:0 auto;padding-inline:clamp(20px,4vw,40px);padding-block:8px 28px}
.lexicon h3{font-size:1.35rem;margin-bottom:14px}
.lexicon dl{margin:0;display:grid;gap:13px}
.lexicon dt{font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--jade-ink)}
.lexicon dt em{font-style:italic}
.lexicon dd{margin:3px 0 0;font-family:var(--read);font-size:1.05rem;color:var(--ink-soft);line-height:1.5}

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

/* logo fix: contain + padding so wordmarks aren't cropped (was object-fit:cover) */
.sponsor img{object-fit:contain!important}
/* 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. */
.sponsor-blurb.sponsor-blurb{color:rgb(108,103,86)!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. */
.sponsor-featured .sponsor.sponsor img{box-sizing:border-box!important;padding:12px 20px!important}
.sponsor-regulars .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 14px!important}

/* op-4up-both-runs: operator: 'top row should be 4 items not 5, and bottom row should be made
   into 4 items multi row setup.' The fifth featured tile was MOVED into the regulars run
   (move_tile.py) so the top row is four tiles, not four columns with one wrapping alone; both
   runs are then four columns, so the regulars lay out 4+4. Desktop only — Design's auto-fit still
   decides the narrow layout. */
@media (min-width:900px){
  .sponsor-featured{grid-template-columns:repeat(4,1fr)}
  .sponsor-regulars{grid-template-columns:repeat(4,1fr)}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1499px at 390, 17% of the whole page. Two columns bring it to
   953px (36% shorter). Checked before writing: no new overflow, smallest mark still
   167px wide, longest blurb 5 lines, tile heights 131-173px.
   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. Only the tier(s) that were one-per-row are touched (.sponsor-featured), 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){
  .sponsor-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:20px!important}
    .sponsor-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-featured > * *{min-width:0!important;max-width:100%}
    .sponsor-featured img,.sponsor-featured svg{max-width:100%;height:auto}
  .sponsor-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 649px of tier across
   8 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-regulars .sponsor-blurb{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-page-overflow: the page scrolled sideways at 320 — span.section-head.more reached
   355px in a 320px screen (+35px), inside
   div.section-head. Remedy: let the row wrap. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.section-head{flex-wrap:wrap!important}
  span.section-head.more{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 604px (60 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{--measure:min(1115px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(1115px, 77.431vw, 1338px), 100%)!important}
  div.article-body > :is(p.dropcap, p:not([class])), div.article-body > :is(ol.timeline.breakout) > li{font-size:clamp(23.04px,1.6000vw,27.65px)!important}
}
/* op-article-width:end */

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

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.thumb > img,
  article > header.article-hero > img,
  div.article-body > figure.article-figure.breakout > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */