/* op-heading-levels-ua */
:where(h2.rt-h3){display:block;font-size:1.17em;margin-block-start:1em;margin-block-end:1em;font-weight:bold}
/* op-heading-levels-ua:end */
/* Old Fort Lauderdale — Riviera Postcard (1b)
   Deep Atlantic teal bands · sunset coral · brass · shell-cream surfaces.
   Didone display over warm humanist body. Self-contained: system font stacks,
   self-hosted @font-face may be dropped in at finalize without markup changes. */

:root{
  --teal:#14555c; --teal-deep:#0d3b42; --teal-ink:#12454d;
  --ink:#173f46; --ink-soft:rgba(23,63,70,.74); --ink-faint:rgba(23,63,70,.55);
  --paper:#fff6f1; --paper-warm:#fdefe6; --cream:#fdf3ea;
  --coral:#f2705b; --coral-deep:#d95941; --brass:#a97e3f; --brass-bright:#e0ac62;
  --sand:#f3e3cc;
  --on-teal:#fdf3ea; --on-teal-soft:rgba(253,243,234,.78); --on-teal-faint:rgba(253,243,234,.55);
  --display:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --body:"Gill Sans","Gill Sans MT",Seravek,"Trebuchet MS",Calibri,"Segoe UI",Tahoma,sans-serif;
  --fs-0:1.155rem; --fs-1:1.35rem; --fs-2:1.7rem; --fs-3:2.2rem; --fs-4:3rem; --fs-5:clamp(2.6rem,5.4vw,4.4rem);
  --gutter:clamp(20px,4.5vw,52px);
  --measure:72ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-0)/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--coral-deep);text-decoration-color:rgba(217,89,65,.4);text-underline-offset:3px}
a:hover{color:var(--coral)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0 0 1.1em}
::selection{background:var(--coral);color:var(--paper)}

.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- header ---------- */
.site-head{background:var(--teal);color:var(--on-teal);position:relative;z-index:50}
.masthead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:22px var(--gutter) 12px;max-width:1440px;margin-inline:auto}
.masthead .brand{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:.04em;color:var(--cream);text-decoration:none}
.masthead .brand em{font-style:italic;color:var(--brass-bright)}
.masthead .indep{margin-left:auto;font-size:.85rem;font-style:italic;color:var(--on-teal-soft);border:1px solid rgba(253,243,234,.35);border-radius:999px;padding:5px 14px;white-space:nowrap}
.mainnav{border-top:1px solid rgba(253,243,234,.25)}
.mainnav>ul{list-style:none;margin:0;padding:0 var(--gutter);max-width:1440px;margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:center;column-gap:8px}
.mainnav>ul>li{position:relative;display:flex;align-items:center}
.mainnav>ul>li:not(:last-child)::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);margin:0 12px;flex:none}
.mainnav a.nav-link{display:block;padding:13px 6px;font-weight:600;font-size:.86rem;letter-spacing:.22em;color:var(--on-teal);text-decoration:none}
.mainnav a.nav-link:hover{color:var(--brass-bright)}
.mainnav .sub{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:300px;background:var(--teal-deep);border:1px solid rgba(224,172,98,.4);box-shadow:0 14px 30px rgba(13,59,66,.35);opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:60}
.mainnav li:hover>.sub,.mainnav li:focus-within>.sub{opacity:1;visibility:visible}
.mainnav .sub a{display:block;padding:9px 20px;font-size:.95rem;letter-spacing:0;color:var(--on-teal-soft);text-decoration:none}
.mainnav .sub a:hover{color:var(--brass-bright);background:rgba(253,243,234,.05)}
.mainnav .sub .sub-all{font-weight:600;font-size:.8rem;letter-spacing:.16em;color:var(--brass-bright)}

/* ---------- scallop dividers (wave-wall) ---------- */
.sc-b{position:relative}
.sc-b::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;pointer-events:none;background:radial-gradient(circle at 12px 0,var(--sc,var(--teal)) 11px,rgba(0,0,0,0) 12px);background-size:24px 14px;background-repeat:repeat-x;z-index:2}
.sc-t{position:relative}
.sc-t::before{content:"";position:absolute;left:0;right:0;top:-13px;height:14px;pointer-events:none;background:radial-gradient(circle at 12px 14px,var(--sc,var(--teal)) 11px,rgba(0,0,0,0) 12px);background-size:24px 14px;background-repeat:repeat-x;z-index:2}

/* ---------- bands ---------- */
.band{padding-block:clamp(52px,7vw,88px)}
.band-teal{background:var(--teal);color:var(--on-teal);--sc:var(--teal)}
.band-teal h2,.band-teal h3{color:var(--cream)}
.band-teal-deep{background:var(--teal-deep);color:var(--on-teal);--sc:var(--teal-deep)}
.band-teal-deep h2,.band-teal-deep h3{color:var(--cream)}
.band-coral{background:var(--coral);color:var(--paper);--sc:var(--coral)}
.band-warm{background:var(--paper-warm);--sc:var(--paper-warm)}
.band-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.band-head h2{font-size:var(--fs-3)}
.band-head .kicker-inline{font-style:italic;font-size:1.05rem;color:var(--brass)}
.band-teal .band-head .kicker-inline{color:var(--brass-bright)}
.band-head .band-more{margin-left:auto;font-weight:600;font-size:.82rem;letter-spacing:.16em;text-decoration:none;color:var(--coral-deep)}
.band-teal .band-head .band-more{color:var(--brass-bright)}
.kicker{font-weight:600;font-size:.84rem;letter-spacing:.32em;color:var(--brass);text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-block;font:600 .85rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:999px;padding:13px 26px;border:1.5px solid var(--teal);color:var(--teal-ink);transition:background .15s,color .15s}
.btn:hover{background:var(--teal);color:var(--cream)}
.btn-solid{background:var(--coral);border-color:var(--coral);color:var(--paper)}
.btn-solid:hover{background:var(--coral-deep);border-color:var(--coral-deep);color:var(--paper)}

/* ---------- hero / postcard ---------- */
.hero{padding-block:clamp(48px,6vw,84px)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:var(--fs-5);letter-spacing:.01em}
.hero .hero-sub{font-style:italic;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--coral-deep);margin:.4em 0 .6em}
.hero .hero-line{font-size:1.22rem;line-height:1.6;color:var(--ink-soft);max-width:34em}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.postcard{background:#fff;border:2px dashed var(--teal);padding:clamp(12px,1.6vw,20px);transform:rotate(1.4deg);box-shadow:0 14px 34px rgba(18,74,82,.16);position:relative;margin:0}
.postcard .stamp{position:absolute;top:14px;right:14px;width:52px;height:62px;border:1.5px solid var(--brass);display:flex;align-items:center;justify-content:center;font:700 .8rem var(--body);letter-spacing:.06em;color:var(--brass);background:repeating-linear-gradient(45deg,rgba(169,126,63,.09) 0 4px,rgba(0,0,0,0) 4px 8px);z-index:3}
.postcard .map-slot{min-height:clamp(280px,30vw,400px)}
.postcard figcaption{margin-top:12px;font-style:italic;font-size:1rem;color:var(--ink-faint);text-align:center}

/* ---------- map (reserved) ---------- */
.map-figure{margin:0}
.map-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:rgba(20,85,92,.06);border:1px solid rgba(20,85,92,.18);min-height:280px;text-align:center;padding:24px}
.map-slot::before{content:"";width:9px;height:9px;background:var(--brass);transform:rotate(45deg)}
.map-slot .map-note{font-weight:600;font-size:.82rem;letter-spacing:.28em;color:var(--brass)}
.map-slot .map-spec{font-style:italic;font-size:.98rem;color:var(--ink-faint);max-width:34em}
.map-figure>figcaption{margin-top:12px;font-style:italic;font-size:1rem;color:var(--ink-faint)}

/* ---------- see & do tiles ---------- */
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tile{display:flex;flex-direction:column;background:rgba(253,243,234,.07);border-top:3px solid var(--coral);text-decoration:none;color:var(--on-teal);transition:background .15s}
.tile:hover{background:rgba(253,243,234,.13);color:var(--on-teal)}
.tile img{width:100%;aspect-ratio:4/2.6;object-fit:cover}
.tile .tile-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.tile h3{font-size:1.45rem;color:var(--cream);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.tile p{margin:0;font-size:1rem;line-height:1.55;color:var(--on-teal-soft);flex:1}
.tile .tile-go{font-weight:600;font-size:.78rem;letter-spacing:.18em;color:var(--brass-bright);margin-top:auto}

/* ---------- beaches list ---------- */
.shore-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:center}
.coral-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.coral-list li{display:flex;gap:16px;padding:20px 0;border-bottom:1px dotted rgba(169,126,63,.5);align-items:baseline}
.coral-list li::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--coral);flex:none;align-self:center}
.coral-list .cl-body{font-size:1.12rem;line-height:1.55}
.coral-list a{font-family:var(--display);font-size:1.3rem;text-decoration:none;color:var(--teal-ink)}
.coral-list a:hover{color:var(--coral-deep)}
.shore-fig{margin:0}
.shore-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border:8px solid #fff;box-shadow:0 12px 30px rgba(18,74,82,.15)}
.shore-fig figcaption{margin-top:10px;font-style:italic;font-size:.98rem;color:var(--ink-faint)}

/* ---------- history ledger ---------- */
.ledger{list-style:none;margin:0;padding:0;border-top:2px solid var(--brass)}
.ledger li{border-bottom:1px solid rgba(253,243,234,.22)}
.ledger a{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:baseline;padding:22px 6px;text-decoration:none;color:var(--on-teal);transition:background .15s}
.ledger a:hover{background:rgba(253,243,234,.06);color:var(--on-teal)}
.ledger .lg-year{font-family:var(--display);font-size:1.9rem;color:var(--brass-bright);text-align:right}
.ledger .lg-what{font-size:1.14rem;line-height:1.5;color:var(--on-teal-soft);align-self:center}
.ledger .lg-go{font-weight:600;font-size:.78rem;letter-spacing:.18em;color:var(--coral);align-self:center;white-space:nowrap}

/* ---------- eat: dotted leaders ---------- */
.menu-rows{display:flex;flex-direction:column;gap:4px}
.menu-row{display:flex;align-items:baseline;gap:12px;padding:14px 4px;text-decoration:none;border-bottom:0}
.menu-row .m-name{font-family:var(--display);font-size:1.5rem;color:var(--teal-ink);white-space:nowrap}
.menu-row .m-dots{flex:1;border-bottom:2px dotted rgba(169,126,63,.55);transform:translateY(-4px)}
.menu-row .m-note{font-style:italic;font-size:1.02rem;color:var(--brass);white-space:nowrap}
.menu-row:hover .m-name{color:var(--coral-deep)}

/* ---------- events month cards ---------- */
.month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.month-card{border:1.5px solid rgba(20,85,92,.35);border-radius:12px;padding:22px 20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,transform .15s}
.month-card:hover{border-color:var(--coral);transform:translateY(-3px);color:var(--ink)}
.month-card .mo{font-weight:700;font-size:.85rem;letter-spacing:.26em;color:var(--coral-deep)}
.month-card h3{font-size:1.4rem;min-height:2.3em}
.month-card p{margin:0;font-size:1rem;color:var(--ink-soft);flex:1}
.month-card .tile-go{font-weight:600;font-size:.78rem;letter-spacing:.18em;color:var(--brass)}

/* ---------- supporters ---------- */
.patrons-intro{max-width:56em;font-size:1.12rem;color:var(--on-teal-soft)}
.sponsor-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.sponsor{display:flex;flex-direction:column;gap:10px;background:rgba(9,42,48,.65);border:1px solid rgba(224,172,98,.3);padding:16px 18px;text-decoration:none;position:relative;transition:border-color .15s}
.sponsor:hover{border-color:var(--coral)}
.sponsor::before{content:"Nº " attr(data-partner);font:600 .68rem var(--body);letter-spacing:.22em;color:var(--brass-bright)}
.sponsor img{width:100%;height:46px;object-fit:contain;opacity:.9}
.sponsor .sponsor-blurb{font-style:italic;font-size:.95rem;line-height:1.45;color:var(--on-teal-soft)}
.sponsor .sponsor-blurb:empty{display:none}

/* ---------- footer ---------- */
.wish-band{background:var(--coral);color:var(--paper);text-align:center;padding:30px var(--gutter);font-family:var(--display);font-size:clamp(1.5rem,3vw,2rem);--sc:var(--coral)}
.site-foot{background:var(--teal-deep);color:var(--on-teal);padding:44px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
.site-foot .brand{font-family:var(--display);font-size:1.5rem;color:var(--cream);text-decoration:none}
.site-foot p{color:var(--on-teal-soft);font-size:1rem}
.site-foot .indep-line{font-style:italic;color:var(--on-teal-soft)}
.foot-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-list a{color:var(--on-teal-soft);text-decoration:none;font-size:1rem}
.foot-list a:hover{color:var(--brass-bright)}
.foot-h{font-weight:600;font-size:.8rem;letter-spacing:.26em;color:var(--brass-bright);text-transform:uppercase}
.foot-base{border-top:1px solid rgba(253,243,234,.2);margin-top:36px;padding-top:20px;display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;font-size:.95rem;color:var(--on-teal-faint)}
.foot-base .diamond{color:var(--brass-bright)}

/* ---------- article pages ---------- */
.article-hero{padding:clamp(44px,5vw,72px) 0 34px}
.article-hero .kicker a{color:inherit;text-decoration:none}
.article-hero h1{font-size:clamp(2.3rem,4.6vw,3.7rem);max-width:22ch;margin:.35em 0 .3em}
.article-hero .dek{font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.45;color:var(--coral-deep);max-width:36em}
.article-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-top:18px;font-size:1rem;color:var(--ink-faint)}
.article-meta .dot{color:var(--coral)}
.hero-fig{margin:0 0 12px}
.hero-fig img{width:100%;aspect-ratio:21/9;object-fit:cover}
.hero-fig figcaption{padding:10px var(--gutter) 0;font-style:italic;font-size:1rem;color:var(--ink-faint);text-align:center}

.article-body{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);padding-block:36px 20px;font-size:1.19rem;line-height:1.72;counter-reset:sec}
.article-body>h2{font-size:var(--fs-2);margin:1.6em 0 .7em;counter-increment:sec;display:flex;gap:16px;align-items:baseline}
.article-body>h2::before{content:counter(sec,decimal-leading-zero);font:400 1.15rem var(--body);letter-spacing:.08em;color:var(--coral);border-bottom:2px solid var(--coral);padding-bottom:2px;flex:none}
.article-body>h3{font-size:1.4rem;margin:1.4em 0 .5em}
.lead{font-size:1.34rem;line-height:1.6;color:var(--teal-ink)}
.has-dropcap::first-letter{font-family:var(--display);font-size:3.4em;line-height:.82;float:left;padding:.06em .12em 0 0;color:var(--coral-deep)}

/* full-bleed-ish components inside the measure */
.article-body .article-figure,.article-body .map-figure,.article-body .gallery,.article-body .chart{margin:2em 0}

.pullquote{margin:2.2em 0;padding:0;border:0;text-align:center}
.pullquote p{font-family:var(--display);font-style:italic;font-size:1.75rem;line-height:1.35;color:var(--teal-ink);margin:0}
.pullquote::before,.pullquote::after{content:"";display:block;width:76px;height:2px;background:var(--coral);margin:18px auto}
.blockquote{margin:2em 0;padding:6px 0 6px 26px;border-left:3px solid var(--brass);}
.blockquote p{font-style:italic;font-size:1.22rem;color:var(--teal-ink);margin:0 0 .5em}
.blockquote cite{font-style:normal;font-size:.98rem;color:var(--ink-faint)}
.callout{margin:2em 0;background:var(--sand);padding:22px 26px;border:0;position:relative}
.callout::before{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:var(--coral);transform:rotate(45deg)}
.callout p{margin:0;font-size:1.08rem;line-height:1.55}
.note{font-size:1rem;background:rgba(20,85,92,.07);padding:14px 18px;border-radius:8px;color:var(--teal-ink)}
.note::before{content:"Note — ";font-weight:600;letter-spacing:.04em;color:var(--brass)}

/* key-facts aside (site treatment) */
.keyfacts{margin:2.4em 0;background:var(--teal);color:var(--on-teal);padding:26px 28px 24px;--sc:var(--teal)}
.keyfacts .kf-h{font-weight:600;font-size:.8rem;letter-spacing:.3em;color:var(--brass-bright);text-transform:uppercase;margin-bottom:16px;display:flex;gap:12px;align-items:center}
.keyfacts .kf-h::after{content:"";flex:1;height:1px;background:rgba(224,172,98,.4)}
.keyfacts dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 26px}
.keyfacts dt{font-family:var(--display);font-size:1.5rem;color:var(--cream)}
.keyfacts dd{margin:2px 0 0;font-size:.98rem;line-height:1.45;color:var(--on-teal-soft)}

/* data / comparison */
.versus,.datatable{width:100%;border-collapse:collapse;margin:2em 0;font-size:1.02rem}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--display);font-size:1.3rem;padding-bottom:12px;color:var(--teal-ink)}
.versus th,.datatable th{font-weight:600;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);text-align:left;padding:10px 14px;border-bottom:2px solid var(--brass)}
.versus td,.datatable td{padding:12px 14px;border-bottom:1px dotted rgba(169,126,63,.45);vertical-align:top}
.versus thead th:not(:first-child){color:var(--coral-deep)}
.versus td:first-child{font-weight:600;color:var(--teal-ink)}
.datatable tbody tr:hover{background:rgba(20,85,92,.05)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:2em 0}
.statblock{background:#fff;border:1.5px solid rgba(20,85,92,.3);border-radius:12px;padding:20px 18px;display:flex;flex-direction:column;gap:4px;text-align:center}
.statblock .stat-num{font-family:var(--display);font-size:2.3rem;color:var(--coral-deep)}
.statblock .stat-label{font-size:.92rem;line-height:1.4;color:var(--ink-soft)}

/* timeline */
.timeline{list-style:none;margin:2em 0;padding:0 0 0 20px;border-left:2px solid var(--brass)}
.timeline li{position:relative;padding:0 0 22px 22px}
.timeline li:last-child{padding-bottom:4px}
.timeline li::before{content:"";position:absolute;left:-27px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--coral);border:2px solid var(--paper)}
.timeline .t-when{display:block;font-family:var(--display);font-size:1.25rem;color:var(--teal-ink)}
.timeline .t-what{display:block;font-size:1.05rem;line-height:1.55;color:var(--ink-soft);max-width:52em}

/* charts */
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:10px;font-style:italic;font-size:1rem;color:var(--ink-faint)}
.chart .c-bar{fill:var(--coral)}
.chart .c-bar.alt{fill:var(--teal)}
.chart .c-axis{stroke:rgba(23,63,70,.3);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--coral-deep);stroke-width:3;stroke-linecap:round}
.chart .c-dot{fill:var(--teal)}
.chart text{font:600 13px var(--body);fill:var(--ink-soft)}
.chart .c-val{font:400 15px var(--display);fill:var(--teal-ink)}

/* figures / gallery */
.article-figure{margin:2em 0}
.article-figure img{width:100%;border:8px solid #fff;box-shadow:0 10px 26px rgba(18,74,82,.13)}
.article-figure figcaption{margin-top:10px;font-style:italic;font-size:1rem;color:var(--ink-faint)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:6px solid #fff;box-shadow:0 8px 20px rgba(18,74,82,.12)}
.gallery figcaption{margin-top:8px;font-style:italic;font-size:.92rem;color:var(--ink-faint)}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:2em 0}
.profile-card{background:#fff;border:1.5px solid rgba(20,85,92,.3);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;border:2px solid var(--brass)}
.profile-card.no-photo::before{content:"";width:76px;height:76px;border-radius:50%;background:var(--teal);opacity:.12}
.profile-card h3{font-size:1.35rem}
.profile-card .p-role{margin:0;font-style:italic;font-size:.95rem;color:var(--brass)}
.profile-card p{margin:0;font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
.profile-card .p-links{margin-top:auto;padding-top:8px}
.profile-card .p-attr{font-size:.82rem;color:var(--ink-faint)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:2em 0}
.org-card{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid rgba(20,85,92,.3);border-radius:10px;padding:12px 16px;text-decoration:none;color:var(--ink)}
.org-card:hover{border-color:var(--coral)}
.org-card .org-logo{width:40px;height:40px;object-fit:cover;border-radius:8px;flex:none}
.org-card.no-logo::before{content:"";width:40px;height:40px;border-radius:8px;background:var(--teal);opacity:.15;flex:none}
.org-card .org-name{font-weight:600;font-size:.98rem;display:block}
.org-card .org-host{display:block;font-size:.82rem;color:var(--ink-faint)}
.org-card>span{display:flex;flex-direction:column}
.entity-ref{font-weight:600;text-decoration:none;border-bottom:2px solid rgba(242,112,91,.45)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:2em 0}
.further-grid a{background:#fff;border:1.5px solid rgba(20,85,92,.3);border-radius:10px;padding:18px 20px;text-decoration:none;color:var(--teal-ink);font-family:var(--display);font-size:1.18rem;line-height:1.3;transition:border-color .15s}
.further-grid a:hover{border-color:var(--coral);color:var(--coral-deep)}

/* related + prev/next */
.related{max-width:var(--measure);margin-inline:auto;padding:10px var(--gutter) 30px}
.related h2{font-size:1.5rem;margin-bottom:14px}
.related-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.related-links li{border-bottom:1px dotted rgba(169,126,63,.5)}
.related-links a{display:flex;gap:12px;align-items:baseline;padding:13px 4px;text-decoration:none;color:var(--teal-ink);font-size:1.1rem}
.related-links a::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;align-self:center}
.related-links a:hover{color:var(--coral-deep)}
.pn-nav{max-width:var(--measure);margin-inline:auto;padding:0 var(--gutter) 56px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pn-nav a{border:1.5px solid rgba(20,85,92,.3);border-radius:12px;padding:16px 20px;text-decoration:none;color:var(--teal-ink);display:flex;flex-direction:column;gap:4px;transition:border-color .15s}
.pn-nav a:hover{border-color:var(--coral)}
.pn-nav .pn-label{font-weight:600;font-size:.74rem;letter-spacing:.22em;color:var(--brass);text-transform:uppercase}
.pn-nav .pn-title{font-family:var(--display);font-size:1.15rem;line-height:1.3}
.pn-nav a.pn-next{text-align:right;align-items:flex-end}

/* category pages */
.cat-hero{background:var(--teal);color:var(--on-teal);padding:clamp(48px,6vw,80px) 0;--sc:var(--teal)}
.cat-hero h1{color:var(--cream);font-size:clamp(2.4rem,5vw,3.8rem)}
.cat-hero .dek{font-style:italic;font-size:1.35rem;color:var(--on-teal-soft);max-width:38em;margin-top:.5em}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px dotted rgba(169,126,63,.5)}
.cat-list a{display:grid;grid-template-columns:minmax(200px,340px) 1fr auto;gap:26px;align-items:center;padding:26px 4px;text-decoration:none;color:var(--ink)}
.cat-list a:hover .cl-title{color:var(--coral-deep)}
.cat-list img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cat-list .cl-title{font-family:var(--display);font-size:1.65rem;line-height:1.2;color:var(--teal-ink);display:block}
.cat-list .cl-brief{margin:8px 0 0;font-size:1.05rem;color:var(--ink-soft)}
.cat-list .cl-meta{margin:10px 0 0;font-size:.92rem;color:var(--ink-faint)}
.cat-list .cl-go{font-weight:600;font-size:.8rem;letter-spacing:.18em;color:var(--brass);white-space:nowrap}

/* generic page */
.page-body{max-width:var(--measure);margin-inline:auto;padding:44px var(--gutter) 64px;font-size:1.16rem;line-height:1.7}
.page-body h2{font-size:var(--fs-2);margin:1.5em 0 .6em}
.page-body ul{padding-left:1.2em}
.contact-form{display:grid;gap:16px;margin:2em 0}
.contact-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.9rem;letter-spacing:.08em}
.contact-form input,.contact-form textarea{font:400 1.05rem var(--body);padding:12px 14px;border:1.5px solid rgba(20,85,92,.35);border-radius:8px;background:#fff;color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--coral);border-color:var(--coral)}
.contact-form button{justify-self:start;cursor:pointer}

/* icons */
.ic{width:1.05em;height:1.05em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* reveal motion */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .rv.in{opacity:1;transform:none}
  .postcard{transition:transform .5s ease}
  .postcard:hover{transform:rotate(0deg)}
}

/* collapsible long lists (CSS-only) */
.more-toggle{display:none}
.more-items{display:none}
.more-toggle:checked~.more-items{display:block}
.more-label{display:inline-block;cursor:pointer;font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);border:1.5px solid var(--coral);border-radius:999px;padding:10px 22px;margin-top:18px}
.more-toggle:checked~.more-label{display:none}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .tile-grid{grid-template-columns:repeat(2,1fr)}
  .month-grid{grid-template-columns:repeat(2,1fr)}
  .sponsor-row{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .shore-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--fs-0:1.08rem}
  .tile-grid{grid-template-columns:1fr}
  .month-grid{grid-template-columns:1fr}
  .sponsor-row{grid-template-columns:1fr 1fr}
  .masthead{padding-block:16px 8px}
  .masthead .indep{margin-left:0}
  .mainnav>ul{justify-content:flex-start}
  .mainnav>ul>li:not(:last-child)::after{margin:0 8px}
  .mainnav a.nav-link{padding:11px 2px;font-size:.78rem;letter-spacing:.14em}
  .mainnav .sub{display:none}
  .ledger a{grid-template-columns:84px 1fr;gap:14px}
  .ledger .lg-go{display:none}
  .ledger .lg-year{font-size:1.5rem}
  .menu-row{flex-wrap:wrap;gap:6px}
  .menu-row .m-dots{min-width:40px}
  .menu-row .m-name,.menu-row .m-note{white-space:normal}
  .cat-list a{grid-template-columns:1fr;gap:14px}
  .cat-list .cl-go{display:none}
  .pn-nav{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr 1fr}
  .keyfacts dl{grid-template-columns:1fr 1fr}
  .article-body>h2{flex-direction:column;gap:6px}
  .sponsor-row{grid-template-columns:1fr}
}
@media (max-width:400px){
  .sponsor-row{grid-template-columns:1fr}
  .keyfacts dl{grid-template-columns:1fr}
  .statrow{grid-template-columns:1fr}
}

/* mobile hamburger */
.nav-toggle{display:none}
.nav-btn{display:none;cursor:pointer;color:var(--cream);align-self:center}
.nav-btn .ic{width:26px;height:26px}
@media (max-width:640px){
  .nav-btn{display:inline-flex;margin-left:auto}
  .masthead{align-items:center}
  .masthead .indep{display:none}
  .site-head .mainnav{display:none}
  .site-head .nav-toggle:checked~.mainnav{display:block}
  .mainnav>ul{flex-direction:column;align-items:stretch;padding-block:4px 14px}
  .mainnav>ul>li{flex-direction:column;align-items:stretch}
  .mainnav>ul>li:not(:last-child)::after{display:none}
  .mainnav a.nav-link{padding:13px 2px;font-size:.92rem;border-bottom:1px solid rgba(253,243,234,.15)}
  .mainnav>ul>li:last-child a.nav-link{border-bottom:0}
}

/* op-footer-compact: the footer printed 5 rows for 5 link(s) in
   1 list(s) — 720px at 390, 7% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 720 -> 500px (31% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(8px,4.03vw,58px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   2432px at 390, 24% of the whole page. Two columns bring it to
   1241px (49% shorter). Checked before writing: no new overflow, smallest mark still
   128px wide, longest blurb 3 lines, tile heights 158-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. 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 (.sponsor-row), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-row > * *{min-width:0!important;max-width:100%}
    .sponsor-row img,.sponsor-row svg{max-width:100%;height:auto}
  .sponsor-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-row (13 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){
  .sponsor-row:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 581px (76 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(93.277ch, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(93.277ch, 61.667vw, calc(93.277ch * 1.2)), 100%)!important}
  div.article-body > :is(p:not([class])), div.article-body > :is(ol.timeline) > li{font-size:clamp(19.04px,1.3222vw,22.85px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-row 5 rows at 1024). 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-row .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-hover-pad */
.ledger a{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0px; color: var(--ink); text-wrap: balance;}
.article-body > h2:where(.rt-h3){font-size: 1.4rem; margin: 1.4em 0px 0.5em;}
h2.rt-h3.rt-h3{display:block;column-gap:normal;row-gap:normal}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-figure.hero-fig > img,
  div.article-body > figure.article-figure > img,
  div.page-body > figure.article-figure > img,
  div.shore-grid > figure.shore-fig > img,
  div.tile-grid > a.tile > img,
  li > a > img){height:auto}
/* op-img-dims:end */
