/* self-hosted fonts (Fraunces + Archivo) — vendored local, no runtime */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-italic-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-italic-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-italic-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-italic-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-normal-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/archivo-normal-lat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Crestfield — a field guide to leaving
   Cool dusk: pine / slate / mist, one warm accent (firelight amber).
   Self-contained: system serif stack, no external fonts. */

:root{
  --ink:#1d2926;
  --pine:#2b3a36;
  --slate:#44554f;
  --sage:#7a8a84;
  --mist:#b9c6c2;
  --paper:#eef1f0;
  --band1:#e2e8e6;
  --band2:#adbcb7;
  --band3:#5c6d67;
  --dark:#232d2a;
  --amber:#b25f2e;         /* warm accent on light */
  --amber-bright:#d08a55;  /* warm accent on dark */
  --serif:'Fraunces',Georgia,'Iowan Old Style',Palatino,serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:315;font-size:19px;line-height:1.65;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;border-radius:10px}
.dusk-photo,.sponsor img,.org-logo{border-radius:0}
.sponsor img{border-radius:6px}.org-logo{border-radius:2px}
a{color:var(--pine);text-decoration-color:var(--mist);text-underline-offset:3px;transition:color .2s}
a:hover{color:var(--amber)}
h1,h2,h3{font-weight:300;line-height:1.18;margin:0;text-wrap:balance}
p{margin:0 0 1.35em}

.kicker{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage)}
.k-link{text-decoration:none;color:inherit}
.k-link:hover{color:var(--amber)}

/* ---------- Header ---------- */
.site-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px clamp(20px,4vw,56px);position:relative;z-index:40}
.wordmark{font-family:var(--serif);font-size:21px;letter-spacing:.3em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark:hover{color:var(--pine)}
.tagline{font-style:italic;color:var(--sage);font-size:15px;margin-left:2px;white-space:nowrap}
.brand{display:flex;align-items:baseline;gap:16px;min-width:0}
.site-nav{display:flex;flex-wrap:wrap;gap:4px;font-family:var(--sans);font-size:12.5px;letter-spacing:.13em}
.site-nav>div{position:relative}
.site-nav a{text-decoration:none;color:var(--slate);padding:10px 12px;display:inline-block;white-space:nowrap}
.site-nav a:hover{color:var(--amber)}
.site-nav .navtop::after{content:" ▾";font-size:9px;color:var(--sage)}
.dropdown{position:absolute;left:0;top:100%;min-width:250px;background:#f6f8f7;border:1px solid #d3dcd9;box-shadow:0 14px 34px rgba(29,41,38,.14);padding:10px 0;display:none;z-index:60}
.site-nav div:hover>.dropdown,.site-nav div:focus-within>.dropdown{display:block}
.dropdown a{display:block;padding:9px 20px;font-family:var(--serif);font-size:15.5px;letter-spacing:0;color:var(--ink)}
.dropdown a:hover{background:#e9eeec;color:var(--amber)}
.dropdown .dd-all{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);border-top:1px solid #dde4e2;margin-top:8px;padding-top:12px}
.head-dark .wordmark{color:#eef1f0}
.head-dark .site-nav a{color:#c6d1cd}
.head-dark .tagline{color:#9fb0aa}
/* Homepage: header floats over the hero photo, which starts at the very top */
.home .site-head{position:absolute;top:0;left:0;right:0}
.home .dusk-open{min-height:100vh;padding-top:120px}

/* ---------- Homepage: the descent ---------- */
.dusk-open{position:relative;min-height:82vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:70px 24px 80px;overflow:hidden;background:linear-gradient(180deg,#e9edeb 0%,#ccd6d2 55%,#9fb0aa 100%)}
.dusk-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:0}
.dusk-scrim{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(238,241,240,.5) 0%,rgba(224,231,228,.32) 50%,rgba(170,186,180,.12) 100%)}
.dusk-open .mist-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.dusk-open>h1,.dusk-open>p,.dusk-open>a{position:relative;z-index:1}
.dusk-title{font-size:clamp(44px,6.5vw,74px);line-height:1.1;color:var(--ink)}
.dusk-line{font-size:clamp(17px,1.6vw,21px);font-style:italic;color:var(--slate);margin-top:26px;max-width:34em}
.descend{margin-top:6vh;font-family:var(--sans);font-size:11.5px;letter-spacing:.34em;color:#54655f;text-decoration:none}
.descend:hover{color:var(--amber)}

.clearing{padding:clamp(56px,8vw,104px) clamp(20px,4.5vw,64px)}
.clearing-inner{max-width:1280px;margin:0 auto}
.clearing .kicker a{color:inherit;text-decoration:none}
.clearing .kicker a:hover{color:var(--amber)}
.feat{display:flex;gap:clamp(28px,4vw,60px);margin-top:30px;align-items:flex-start}
.feat.rev{flex-direction:row-reverse}
.feat-media{flex:0 1 560px;min-width:0}
.feat-media img{width:100%;aspect-ratio:3/2;object-fit:cover}
.feat-body{flex:1 1 380px;min-width:0;padding-top:6px}
.feat-title{font-size:clamp(28px,3vw,40px)}
.feat-title a{color:inherit;text-decoration:none}
.feat-title a:hover{color:var(--amber)}
.feat-dek{font-size:clamp(17px,1.5vw,20px);line-height:1.6;margin:16px 0 0}
.feat-meta{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-top:14px}
.quiet-links{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:17.5px}
.quiet-links a{text-decoration:none}
.quiet-links a::before{content:"→  ";letter-spacing:0}
.quiet-links .ql-read{font-family:var(--sans);font-size:12px;letter-spacing:.1em;margin-left:10px}

.c1{background:var(--band1)}
.c1 .kicker{color:#7a8a84}.c1 .feat-dek{color:var(--slate)}.c1 .feat-meta{color:#7a8a84}
.c2{background:var(--band2)}
.c2 .kicker{color:#4c5c56}.c2 .feat-title{color:#17211e}.c2 .feat-dek{color:#2b3a36}.c2 .feat-meta{color:#4c5c56}
.c2 .quiet-links a{color:#17211e}.c2 .quiet-links .ql-read{color:#4c5c56}
.c3{background:var(--band3)}
.c3 .kicker{color:#b9c6c2}.c3 .feat-title{color:#eef1f0}.c3 .feat-dek{color:#ccd6d2}.c3 .feat-meta{color:#9fb0aa}
.c3 .quiet-links a{color:#e2e8e6}.c3 .quiet-links .ql-read{color:#9fb0aa}
.c3 .quiet-links a:hover,.c3 .feat-title a:hover,.c3 .kicker a:hover{color:var(--amber-bright)}
.c4{background:linear-gradient(180deg,#33403c,#202926)}
.c4 .kicker{color:#8a9a94}.c4 .feat-title{color:#f0ece5}.c4 .feat-dek{color:#b9c4c0}.c4 .feat-meta{color:#8a9a94}
.c4 .quiet-links a{color:var(--amber-bright)}.c4 .quiet-links .ql-read{color:#8a9a94}
.c4 .quiet-links a:hover,.c4 .feat-title a:hover,.c4 .kicker a:hover{color:#e8b48a}
.clearing--lakeside{position:relative;overflow:hidden}
.ripple-layer{position:absolute;inset:auto 0 0 0;height:46%;z-index:0;pointer-events:none;opacity:.35}
.clearing--lakeside .clearing-inner{position:relative;z-index:1}

/* Coda + footer */
.coda{background:#202926;color:#b9c4c0;padding:clamp(56px,7vw,90px) clamp(20px,4.5vw,64px) 40px;text-align:center}
.coda p{max-width:38em;margin:18px auto;font-size:19px;line-height:1.75}
.coda .kicker{color:#77867f}
.coda a{color:#d9e0dd}
.coda a:hover{color:var(--amber-bright)}
.coda .index-link{font-family:var(--sans);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid #4a5a54;padding-bottom:5px}

.site-foot{background:#1a2220;color:#8a9a94;padding:44px clamp(20px,4.5vw,64px) 40px;font-family:var(--sans);font-size:12.5px;letter-spacing:.12em}
.foot-row{display:flex;flex-wrap:wrap;gap:18px 34px;justify-content:space-between;align-items:baseline;max-width:1280px;margin:0 auto}
.foot-whisper{font-family:var(--serif);font-style:italic;font-size:17px;letter-spacing:0;color:#9fb0aa}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 26px}
.site-foot a{color:#b9c4c0;text-decoration:none;text-transform:uppercase}
.site-foot a:hover{color:var(--amber-bright)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:26px;font-size:11.5px;color:#5f6f69;max-width:1280px;margin-inline:auto}
.foot-legal a{color:#77867f;text-transform:none;letter-spacing:.06em}

/* ---------- Sponsors ---------- */
.sponsor-block{padding:clamp(34px,4vw,52px) clamp(20px,4.5vw,64px)}
.sponsor-block .kicker{text-align:center;display:block}
.sponsor-grid{max-width:1280px;margin:22px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.sponsor{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.sponsor img{width:100%;aspect-ratio:3/1;object-fit:contain;background:#24302c;padding:12px 18px;border-radius:2px}
.sponsor-blurb{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--sage);min-height:0}
.sponsor-blurb:empty{display:none}
.sponsors-mid{background:var(--band2)}
.sponsors-mid .kicker{color:#4c5c56}
.sponsors-mid .sponsor-blurb{color:#3c4a45}
.sponsors-foot{background:#1a2220}
.sponsors-foot .kicker{color:#77867f}
.sponsors-foot img{background:#243029;outline:1px solid #33403a}
.sponsors-foot .sponsor-blurb{color:#8a9a94}

/* ---------- Standard page shell (light) ---------- */
.page-head-band{background:var(--paper);border-bottom:1px solid #dde4e2}
.page-hero{padding:clamp(40px,6vw,80px) clamp(20px,4.5vw,64px) clamp(28px,4vw,52px);max-width:1280px;margin:0 auto}
.page-hero h1{font-size:clamp(38px,5vw,60px);max-width:18em}
.page-hero .lead,.page-lead{font-size:clamp(19px,1.8vw,23px);font-style:italic;color:var(--slate);line-height:1.6;max-width:33em;margin-top:20px}
.page-body{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4.5vw,64px) clamp(56px,7vw,96px)}

/* ---------- Quiet Index ---------- */
.dials{display:flex;flex-wrap:wrap;gap:36px 56px;padding:30px clamp(20px,4.5vw,64px);border-top:1px solid #d3dcd9;border-bottom:1px solid #d3dcd9;max-width:1280px;margin:0 auto;font-family:var(--sans);align-items:flex-end}
.dial .kicker{display:block;margin-bottom:14px}
.dial-range{width:280px;max-width:70vw}
input[type=range].qr{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--pine),var(--mist));outline-offset:6px}
input[type=range].qr::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--amber);border:none;cursor:pointer}
input[type=range].qr::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--amber);border:none;cursor:pointer}
.dial-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sage);margin-top:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 16px;border:1px solid var(--mist);border-radius:99px;background:transparent;color:var(--slate);font-family:var(--sans);font-size:13px;cursor:pointer}
.chip:hover{border-color:var(--slate)}
.chip[aria-pressed=true]{background:var(--pine);border-color:var(--pine);color:var(--paper)}
.dial-note{font-family:var(--serif);font-style:italic;color:var(--sage);font-size:14.5px;margin-left:auto;align-self:flex-end}
.dial-note button{font:inherit;background:none;border:none;color:var(--slate);text-decoration:underline;cursor:pointer;padding:0}
.dial-note button:hover{color:var(--amber)}

.ledger{list-style:none;margin:0;padding:14px 0 0}
.ledger li{border-bottom:1px solid #dde3e1;transition:opacity .45s}
.ledger li.dim{opacity:.3}
.ledger a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:17px 2px;text-decoration:none;color:var(--ink)}
.ledger a:hover .l-title{color:var(--amber)}
.l-title{font-size:clamp(20px,2vw,25px);flex:0 1 auto}
.l-dek{font-style:italic;color:var(--sage);font-size:15.5px;flex:1 1 260px}
.l-meta{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);white-space:nowrap;margin-left:auto}

/* ---------- Category pages ---------- */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid #dde3e1}
.cat-list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding:22px 2px;text-decoration:none;color:var(--ink)}
.cat-list a:hover .l-title{color:var(--amber)}
.cat-elsewhere{margin-top:60px}

/* ---------- Article template ---------- */
.article-hero{max-width:1280px;margin:0 auto;padding:clamp(36px,5vw,66px) clamp(20px,4.5vw,64px) 30px}
.article-hero h1{font-size:clamp(40px,5.4vw,64px);max-width:15em}
.article-hero .art-dek{font-size:clamp(19px,1.9vw,24px);font-style:italic;color:var(--slate);line-height:1.55;max-width:30em;margin-top:22px}
.art-meta{font-family:var(--sans);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-top:22px}
.art-meta a{color:inherit;text-decoration:none}
.art-meta a:hover{color:var(--amber)}
.article-opener{max-width:1280px;margin:10px auto 0;padding:0 clamp(20px,4.5vw,64px)}
.article-opener img{width:100%;aspect-ratio:5/2;object-fit:cover}
.article-opener figcaption{font-family:var(--sans);font-size:13.5px;color:var(--sage);padding-top:10px}

.article-body{max-width:76ch;margin:0 auto;padding:clamp(30px,4vw,54px) clamp(22px,5vw,44px) 20px;font-size:20.5px;line-height:1.78}
.article-body .lead{font-size:24px;line-height:1.6;font-style:italic;color:var(--slate)}
.article-body>p.opener::first-letter{float:left;font-size:74px;line-height:.82;padding:8px 12px 0 0;color:var(--pine)}
.article-body h2{font-size:clamp(27px,2.6vw,33px);margin:1.9em 0 .8em;counter-increment:sec}
.article-body h2 .sec-num{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.3em;color:var(--amber);margin-bottom:10px}
.article-body hr{border:none;text-align:center;margin:2.4em 0;height:auto}
.article-body hr::after{content:"· · ·";color:var(--sage);letter-spacing:.6em;font-size:17px}
.article-body em{font-style:italic}

/* Aside treatment: boxed pull-asides IN the column */
.aside-box{background:#e3e9e7;padding:24px 28px;margin:2em 0}
.aside-box .kicker{display:block;margin-bottom:12px;color:#68786f}
.aside-box dl{margin:0;font-size:16.5px;line-height:1.6}
.aside-box dt{font-weight:bold;display:inline}
.aside-box dt::after{content:" — "}
.aside-box dd{display:inline;margin:0}
.aside-box .dpair{margin:0 0 8px}
.aside-box .dpair:last-child{margin:0}
.aside-box p{margin:0;font-size:16.5px;line-height:1.6}

/* Palette components */
.pullquote{margin:2.2em 0;padding:0;border:none;text-align:center}
.pullquote p{font-size:clamp(24px,2.4vw,30px);line-height:1.45;font-style:italic;color:var(--pine);margin:0;text-wrap:pretty}
.pullquote::before{content:"”";display:block;font-size:64px;line-height:.4;color:var(--amber);margin-bottom:18px}
.blockquote{margin:2em 0;padding:6px 0 6px 26px;border-left:2px solid var(--mist)}
.blockquote p{font-style:italic;color:var(--slate);margin:0 0 10px}
.blockquote cite{font-family:var(--sans);font-size:13.5px;letter-spacing:.08em;color:var(--sage);font-style:normal}
.callout{background:var(--pine);color:#e6ece9;padding:26px 30px;margin:2em 0}
.callout p{margin:0;font-size:18.5px;line-height:1.65}
.callout p strong{color:#fff}
.note{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--slate);background:#e9eeec;padding:14px 18px;margin:1.6em 0}

.versus{width:100%;border-collapse:collapse;margin:2em 0;font-size:17px}
.versus caption{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);text-align:left;padding-bottom:12px}
.versus th{font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-align:left;padding:10px 14px;color:#fff}
.versus th:first-child{background:var(--slate)}
.versus th:last-child{background:var(--amber)}
.versus td{width:50%;vertical-align:top;padding:12px 14px;border:1px solid #d3dcd9;line-height:1.55}
.datatable{width:100%;border-collapse:collapse;margin:2em 0;font-size:16.5px}
.datatable caption{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);text-align:left;padding-bottom:12px}
.datatable th{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--slate);border-bottom:2px solid var(--pine);padding:8px 12px 10px}
.datatable td{padding:11px 12px;border-bottom:1px solid #dde3e1;vertical-align:top;line-height:1.5}
.datatable tr td:first-child{font-style:italic;color:var(--pine)}

.statrow{display:flex;flex-wrap:wrap;gap:16px;margin:2.2em 0}
.statblock{flex:1 1 140px;background:#e3e9e7;padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-size:44px;line-height:1;color:var(--pine)}
.stat-label{font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--slate)}

.timeline{list-style:none;margin:2.2em 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1.5px;background:var(--mist)}
.timeline li{position:relative;padding:0 0 26px 38px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:1px;top:7px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2.5px solid var(--amber)}
.t-when{display:block;font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin-bottom:5px}
.t-what{display:block;font-size:17.5px;line-height:1.6;color:var(--ink)}

.chart{margin:2.2em 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-family:var(--sans);font-size:13.5px;color:var(--sage);padding-top:12px;line-height:1.5}
.chart .axis{stroke:#c8d2ce;stroke-width:1}
.chart .bar-rect{fill:var(--slate)}
.chart .bar-rect.hi{fill:var(--amber)}
.chart .blabel{font-family:var(--sans);font-size:13px;fill:var(--slate)}
.chart .bval{font-family:var(--sans);font-size:13px;fill:var(--ink)}
.chart .lpath{fill:none;stroke:var(--pine);stroke-width:2.5}
.chart .larea{fill:rgba(68,85,79,.12)}
.chart .ldot{fill:var(--amber)}

.article-figure{margin:2.4em 0}
.article-figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-figure figcaption{font-family:var(--sans);font-size:13.5px;color:var(--sage);padding-top:11px;line-height:1.5}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:2.4em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-family:var(--sans);font-size:12.5px;color:var(--sage);padding-top:8px}

.map-figure{margin:2.4em 0}
.map-figure .map-slot{aspect-ratio:16/8;background:#e3e9e7;outline:1px solid #cfd9d5;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
.map-figure figcaption{font-family:var(--sans);font-size:13.5px;color:var(--sage);padding-top:11px}

.profile-grid{display:flex;gap:16px;flex-wrap:wrap;margin:2.2em 0}
.profile-card{flex:1 1 260px;background:#e3e9e7;padding:26px 28px;font-size:16.5px;line-height:1.6}
.profile-card .p-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;margin-bottom:16px}
.profile-card h3{font-size:21px;margin:0 0 4px}
.profile-card .p-role{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 14px}
.profile-card p{margin:0 0 10px}
.profile-card .p-links{margin:0}
.profile-card .p-links a{font-family:var(--sans);font-size:13.5px}
.profile-card.no-photo .p-photo{display:none}
.p-attr{font-family:var(--sans);font-size:12px;color:var(--sage)}
.org-grid{display:flex;gap:14px;flex-wrap:wrap;margin:2.2em 0}
.org-card{flex:1 1 200px;display:flex;flex-direction:column;gap:4px;background:#e3e9e7;padding:20px 22px;text-decoration:none}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;margin-bottom:8px;background:#24302c;padding:6px;border-radius:2px}
.org-card.no-logo .org-logo{display:none}
.org-name{font-size:18px;color:var(--ink)}
.org-host{font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;color:var(--sage)}
.org-card:hover .org-name{color:var(--amber)}
.entity-ref{white-space:nowrap}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:2.2em 0}
.further-grid a{background:#e3e9e7;padding:22px 24px;text-decoration:none;font-size:18px;line-height:1.45;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.further-grid a:hover{color:var(--amber)}
.further-grid .fg-kicker{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sage)}

/* Related + article footer */
.article-related{max-width:76ch;margin:0 auto;padding:10px clamp(22px,5vw,44px) clamp(56px,7vw,90px)}
.article-related h2{font-family:var(--sans);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage);font-weight:normal;border-top:1px solid #d3dcd9;padding-top:30px;margin:0 0 6px}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-bottom:1px solid #e0e6e4}
.related-links a{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:16px 2px;text-decoration:none;font-size:20px;color:var(--ink)}
.related-links a:hover{color:var(--amber)}
.related-links .rl-meta{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-left:auto;white-space:nowrap}
.art-next{max-width:76ch;margin:0 auto;padding:0 clamp(22px,5vw,44px) 70px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.art-next a{text-decoration:none;color:var(--slate)}
.art-next a:hover{color:var(--amber)}

/* Contact form */
.contact-form{max-width:560px;display:flex;flex-direction:column;gap:22px;margin-top:36px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-family:var(--sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.contact-form input,.contact-form textarea{font-family:var(--serif);font-size:18px;padding:12px 14px;border:1px solid var(--mist);background:#f6f8f7;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.contact-form button{align-self:flex-start;font-family:var(--sans);font-size:13px;letter-spacing:.22em;text-transform:uppercase;background:var(--pine);color:#eef1f0;border:none;padding:15px 34px;cursor:pointer}
.contact-form button:hover{background:var(--amber)}

/* 404 */
.lost{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:60px 24px;background:linear-gradient(180deg,#e9edeb,#b9c6c2)}
.lost h1{font-size:clamp(44px,6vw,70px)}
.lost p{font-size:20px;font-style:italic;color:var(--slate);max-width:26em}

/* Styleguide */
.sg-section{max-width:900px;margin:0 auto;padding:40px clamp(20px,4.5vw,44px)}
.sg-section>h2{font-family:var(--sans);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);border-top:1px solid #d3dcd9;padding-top:26px;margin:0 0 26px}
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.swatch{width:120px;font-family:var(--sans);font-size:12px;color:var(--slate)}
.swatch i{display:block;height:64px;margin-bottom:6px;outline:1px solid rgba(29,41,38,.15)}

/* CSS-only expander */
.expander{position:relative}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .exp-rest{display:none}
.expander input:checked~.exp-rest{display:block}
.exp-toggle{display:inline-block;font-family:var(--sans);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);cursor:pointer;padding:16px 2px;border-bottom:1px solid var(--mist)}
.exp-toggle:hover{color:var(--amber)}
.expander input:checked~.exp-toggle{display:none}

/* ---------- Responsive ---------- */
@media (max-width:1220px){
  .tagline{display:none}
}
@media (max-width:1160px){
  .site-head{flex-direction:column;align-items:flex-start;gap:8px}
  .home .site-head{position:static;background:linear-gradient(180deg,#e9edeb,#e4eae8)}
  .home .dusk-open{min-height:82vh;padding-top:70px}
}
@media (max-width:920px){
  .feat,.feat.rev{flex-direction:column}
  .feat-media{flex-basis:auto;width:100%}
}
@media (max-width:640px){
  body{font-size:18px}
  .article-body{font-size:18.5px;line-height:1.72}
  .article-body .lead{font-size:21px}
  .dials{gap:26px}
  .dial-note{margin-left:0}
  .l-meta{margin-left:0}
  .gallery{grid-template-columns:1fr}
  .versus{font-size:15.5px}
  .versus td{display:block;width:100%}
  .versus th{display:block;width:100%}
  .versus tr{display:block}
  .art-next{flex-direction:column}
  .site-nav{font-size:12px;letter-spacing:.1em}
  .site-nav a{padding:8px 8px}
}
@media (prefers-reduced-motion:reduce){
  .mist-layer,.ripple-layer{display:none}
}

/* pipeline: sponsor link-treatment variety (footprint) */
.sponsor::before{content:none!important;}
.sponsor a.sp-logo{display:contents;}   /* logo link is layout-transparent so Design's img sizing still applies */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.sponsor-blurb a:hover{opacity:.8;}
.sponsor .sp-domain{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;opacity:.75;font-size:.9em;letter-spacing:.02em;}
.sponsor .sp-domain:hover{text-decoration:underline;opacity:1;}

/* ledger: keep each row to ONE line on desktop — truncate long deks (op req 2026-07-14) */
@media(min-width:721px){.ledger a{flex-wrap:nowrap}.ledger .l-title{flex:0 0 auto}.ledger .l-dek{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ledger .l-meta{flex:0 0 auto;margin-left:auto;white-space:nowrap;padding-left:18px}}

/* Fraunces sits heavy at 400 in running text — lighten reading paragraphs (op req 2026-07-14) */
.article-body{font-weight:320}
.article-body .lead{font-weight:340}
.feed-dek,.l-dek,.sponsor-blurb{font-weight:355}

/* 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-grid .sponsor.sponsor img{height:76px!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1751px at 390, 26% of the whole page. Two columns bring it to
   981px (44% shorter). Checked before writing: no new overflow, smallest mark still
   165px wide, longest blurb 3 lines, tile heights 152-152px.
   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-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){
  .sponsor-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sponsor-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-grid > * *{min-width:0!important;max-width:100%}
    .sponsor-grid img,.sponsor-grid svg{max-width:100%;height:auto}
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 886px (99 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 76ch (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{max-width:min(1004px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(1004px, 69.722vw, 1205px), 100%)!important}
  div.article-body > :is(p, p:not([class])), div.article-body > :is(ol.timeline) > li{font-size:clamp(20.5px,1.4236vw,24.6px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-opener > img,
  body.home > section.dusk-open > img.dusk-photo,
  div.article-body > figure.article-figure > img,
  div.feat > div.feat-media > img,
  div.feat.rev > div.feat-media > img){height:auto}
/* op-img-dims:end */