/* observergroup.net — The Working River
   Palette (5, each with a job)
   --ground  bone paper, the page                 #F2EEE4
   --ink     type and the dark bands              #16130E
   --accent  seal red, section marks + links      #B3261E
   --second  river teal, panel grounds            #0D5E58
   --flag    express-boat orange, markers/pins    #D98324
*/

:root{
  --ground:#F2EEE4;
  --paper:#FCFAF5;
  --ink:#16130E;
  --accent:#B3261E;
  --second:#0D5E58;
  --flag:#D98324;

  --ink-70:#4A4438;
  --ink-50:#6B6455;
  --rule:#C9C2B1;
  --mat:#DFD9CB;
  --on-dark:#F2EEE4;
  --on-dark-mute:#A39B89;
  --on-teal-mute:#A9C9C5;

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;

  --gutter:clamp(18px,4vw,52px);
  --measure:80ch;
  --max:1560px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.6;
  overflow-x:hidden;text-wrap:pretty;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--second)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
svg{flex:none}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- drawn device: the express-boat pennant + section marks ---------- */
.mark{stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mark-lg{stroke-width:3.1}

/* ---------- masthead ---------- */
.masthead{padding-top:clamp(14px,1.9vw,24px)}
.masthead-top{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,44px);flex-wrap:wrap}
.wordmark{display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);color:var(--accent)}
.emblem{width:auto;height:clamp(32px,3.6vw,46px)}
.wordmark-type{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.95;color:var(--ink);
  font-size:clamp(24px,3.1vw,42px);white-space:nowrap}
.wordmark-type span{display:inline}
.wordmark-type .dot{color:var(--second);margin-left:.26em}
@media (max-width:400px){.wordmark-type{font-size:24px}}
.standing-line{font-size:clamp(14px,1.2vw,16.5px);line-height:1.4;color:var(--ink-70);max-width:34ch;padding-bottom:5px}
.rule-heavy{height:2px;background:var(--ink);margin-top:clamp(10px,1.3vw,16px)}
.rule-fine{height:1px;background:var(--rule)}

.nav{display:flex;align-items:stretch;gap:clamp(12px,1.8vw,26px);flex-wrap:wrap;padding:9px 0 10px}
.nav-list{display:flex;flex-wrap:wrap;flex:0 1 auto;gap:clamp(12px,1.8vw,30px);list-style:none}
.nav-list li{flex:0 0 auto}
.nav-list a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;height:100%;color:var(--ink);
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.2}
.nav-list a:hover,.nav-list a[aria-current="page"]{color:var(--accent)}
.nav-list .mark,.nav-archive .mark{width:23px;height:23px;stroke-width:1.5}
.nav-list [data-sec="river"] .mark{color:#0D5E58}
.nav-list [data-sec="skytrain"] .mark{color:#2B5580}
.nav-list [data-sec="markets"] .mark{color:#B3261E}
.nav-list [data-sec="kitchens"] .mark{color:#D98324}
.nav-list [data-sec="monsoons"] .mark{color:#1C7C9C}
.nav-list [data-sec="ayutthaya"] .mark{color:#8A4A22}
.nav-list [data-sec="year"] .mark{color:#7A2E5C}
.nav-archive{flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;color:var(--accent);
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.2}
@media (max-width:560px){
  .nav{gap:10px}
  .nav-list{gap:12px 16px}
  .nav-list a,.nav-archive{font-size:10px;letter-spacing:.06em}
  .nav-list .mark,.nav-archive .mark{width:20px;height:20px}
  .nav-archive{margin-left:0}
}

/* ---------- band rhythm ---------- */
.band{padding-block:clamp(40px,5.4vw,84px)}
.band-tight{padding-block:clamp(28px,3.4vw,52px)}
.band-ink{background:var(--ink);color:var(--on-dark)}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--on-dark)}
.band-teal{background:var(--second);color:var(--on-dark)}
.band-teal h2,.band-teal h3{color:var(--on-dark)}
.band-paper{background:var(--paper)}

.kicker{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.kicker-quiet{color:var(--ink-50)}
.band-ink .kicker-quiet,.band-teal .kicker-quiet{color:var(--on-dark-mute)}
.band-teal .kicker{color:#F0C08A}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-bottom:2px solid currentColor;padding-bottom:15px;margin-bottom:clamp(20px,2.6vw,34px)}
.section-head h2{font-size:clamp(24px,2.5vw,38px)}
.section-head p{margin:0;font-size:16px;color:var(--ink-50);max-width:44ch}
.band-ink .section-head p{color:var(--on-dark-mute)}

/* ---------- the lead ---------- */
.lead-frame{position:relative;height:min(78vh,820px);min-height:400px;background:var(--mat);overflow:hidden}
.lead-frame img{width:100%;height:100%;object-fit:cover}
.lead-over{position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top,rgba(15,13,9,.86) 0%,rgba(15,13,9,.62) 32%,rgba(15,13,9,.12) 62%,rgba(15,13,9,0) 100%)}
.lead-over .wrap{width:100%;padding-bottom:clamp(24px,3.6vw,52px)}
.lead-over h1{font-size:clamp(32px,5.6vw,94px);line-height:.94;color:#F6F2E8;max-width:24ch;
  text-shadow:0 2px 26px rgba(10,8,5,.55)}
.lead-over h1 a{color:inherit}
.lead-over h1 a:hover{color:var(--flag)}
.lead-over .kicker{color:var(--flag);margin-bottom:16px}
.lead-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);
  align-items:start;padding-block:clamp(28px,3.6vw,52px)}
.lead-body h1{font-size:clamp(34px,5.4vw,92px);line-height:.94}
.lead-body h1 a{color:inherit}
.lead-body h1 a:hover{color:var(--accent)}
.deck{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-70);margin:0}
.signature{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px;padding-top:15px;border-top:1px solid var(--rule);
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.signature em{font-style:normal;color:var(--accent)}
.more{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}

/* ---------- picks: unequal weights ---------- */
.picks{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(22px,3vw,54px)}
.pick-lead h3{font-size:clamp(24px,2.7vw,44px);line-height:1.04;margin-top:18px}
.pick-lead h3 a{color:inherit}
.pick-lead h3 a:hover{color:var(--accent)}
.pick-lead p{font-size:17.5px;color:var(--ink-70);margin:12px 0 0;max-width:56ch}
.pick-side{display:flex;flex-direction:column;gap:26px;border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,34px)}
.pick-side article h3{font-size:clamp(19px,1.7vw,25px);line-height:1.14;letter-spacing:-.015em}
.pick-side article h3 a{color:inherit}
.pick-side article h3 a:hover{color:var(--accent)}
.pick-side article p{font-size:16px;color:var(--ink-50);margin:9px 0 0}

/* ---------- quiet line ---------- */
.quiet-line{margin:0 auto;max-width:30ch;font-family:var(--display);font-weight:400;
  font-size:clamp(24px,3vw,48px);line-height:1.12;letter-spacing:-.02em;text-align:center}
.quiet-line a{color:var(--flag)}

/* ---------- sections strip ---------- */
.section-strip{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(18px,2.2vw,34px)}
.section-strip li{border-top:1px solid var(--rule);padding-top:14px}
.section-strip .n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent)}
.section-strip h3{font-size:20px;line-height:1.16;letter-spacing:-.015em;margin-top:8px}
.section-strip h3 a{color:var(--ink)}
.section-strip h3 a:hover{color:var(--accent)}
.section-strip p{margin:8px 0 0;font-size:15.5px;line-height:1.42;color:var(--ink-50)}
.section-strip .ico{color:var(--second);margin-bottom:6px}

/* ---------- cards (even height) ---------- */
.card-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
  gap:clamp(20px,2.4vw,34px)}
.card{display:flex;flex-direction:column;height:100%;background:var(--paper);border:1px solid var(--ink);
  padding:14px 14px 18px}
.card .shot{aspect-ratio:16/10;background:var(--mat);overflow:hidden}
.card .shot img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:21px;line-height:1.16;letter-spacing:-.015em;margin-top:14px;min-height:2.32em}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}
.card p{font-size:15.5px;line-height:1.45;color:var(--ink-50);margin:10px 0 0}
.card .card-foot{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- supporters: a directory, not a gallery ---------- */
.supporters{list-style:none;border-top:2px solid var(--ink)}
.sponsor{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:15px 0;border-bottom:1px solid var(--rule);
  color:var(--ink)}
.sponsor:hover{color:var(--accent);background:rgba(179,38,30,.045)}
.sponsor-name{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.sponsor-blurb{font-size:16px;line-height:1.42;color:var(--ink-70);max-width:62ch}
.sponsor.feat{padding:19px 0}
.sponsor.feat .sponsor-name{font-size:23px}
.supporters-note{font-size:15.5px;color:var(--ink-50);margin:0 0 18px;max-width:56ch}
@media (min-width:820px){
  .sponsor{grid-template-columns:minmax(230px,.42fr) minmax(200px,1fr);gap:8px 30px;align-items:baseline}
  .sponsor .sponsor-name{grid-column:1}
  .sponsor .sponsor-blurb{grid-column:2}
  .sponsor:not(.feat) .sponsor-name{grid-column:1/-1}
}

/* ---------- figure system: four treatments, one drawing ---------- */
figure{margin:0}
figcaption{font-family:var(--body);font-size:16px;line-height:1.42;color:var(--ink-70)}
.cap-rule{display:block;width:34px;height:2px;background:var(--accent);margin-bottom:9px}
.credit{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:none;color:var(--ink-70);margin-top:8px}
.band-ink .credit,.band-teal .credit,.fig-plate .credit{color:#CFE2DF}
.band-ink figcaption,.band-teal figcaption{color:var(--on-dark)}

/* 1 · full-bleed, breaks the measure */
.fig-bleed{margin-block:clamp(30px,4vw,56px)}
.fig-bleed .shot{height:min(66vh,620px);min-height:260px;background:var(--mat);overflow:hidden}
.fig-bleed .shot img{width:100%;height:100%;object-fit:cover}
.fig-bleed figcaption{max-width:min(96ch,100%);padding-top:16px;padding-inline:var(--gutter);margin:0}
@media (min-width:900px){
  .fig-bleed figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:14px 40px;align-items:start}
  .fig-bleed figcaption .cap-rule{grid-column:1/-1}
  .fig-bleed figcaption .credit{margin-top:0;text-align:right}
}

/* 2 · mat: photograph sits on a paper card with a hairline */
.fig-mat{background:var(--paper);border:1px solid var(--ink);padding:16px 16px 20px;margin-block:clamp(26px,3vw,44px)}
.fig-mat .shot{aspect-ratio:16/10;background:var(--mat);overflow:hidden}
.fig-mat .shot img{width:100%;height:100%;object-fit:cover}
.fig-mat figcaption{padding-top:15px}

/* 3 · inset: sits in the column, teal bar keyed to the palette */
.fig-inset{display:grid;gap:16px;margin-block:clamp(24px,3vw,40px);border-left:6px solid var(--second);padding-left:18px}
.fig-inset .shot{aspect-ratio:3/2;background:var(--mat);overflow:hidden}
.fig-inset .shot img{width:100%;height:100%;object-fit:cover}
@media (min-width:760px){
  .fig-inset{grid-template-columns:minmax(0,1fr) minmax(0,250px);align-items:center;gap:26px}
}

/* 4 · plate: photograph overlaps a coloured panel */
.fig-plate{background:var(--second);color:var(--on-dark);padding:22px;margin-block:clamp(26px,3vw,44px)}
.fig-plate .shot{aspect-ratio:16/9;background:#0A4A45;overflow:hidden;margin-top:-42px}
.fig-plate .shot img{width:100%;height:100%;object-fit:cover}
.fig-plate figcaption{padding-top:16px;color:var(--on-dark)}
.fig-plate .cap-rule{background:var(--flag)}

/* .article-figure — the mat treatment under the styleguide's own class name */
.article-figure{background:var(--paper);border:1px solid var(--ink);padding:16px 16px 20px;margin-block:clamp(26px,3vw,44px)}
.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--mat)}
.article-figure figcaption{padding-top:15px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-block:clamp(24px,3vw,40px)}
.gallery figure .shot{aspect-ratio:4/3;background:var(--mat);overflow:hidden}
.gallery figure .shot img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:14.5px;padding-top:10px}

/* ---------- article ---------- */
.article-head{padding-block:clamp(26px,3.6vw,56px)}
.article-head h1{font-size:clamp(32px,4.9vw,78px);line-height:.96;max-width:30ch}
.article-head .deck{margin-top:20px;max-width:76ch;font-size:clamp(19px,1.9vw,26px);line-height:1.42;color:var(--ink)}
.measure{max-width:min(var(--measure),100%);margin:0;padding-inline:var(--gutter)}
.note-list{list-style:none;display:grid;gap:10px;margin:0 0 22px}
.note-list li{position:relative;padding-left:20px}
.note-list li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:2px;background:var(--accent)}
.prose{font-size:19px;line-height:1.66;color:#211D15}
.prose p{margin:0 0 22px}
.prose h2{font-size:clamp(23px,2.3vw,34px);line-height:1.08;margin:clamp(30px,3.4vw,48px) 0 16px;
  display:flex;gap:12px;align-items:baseline}
.prose h2::before{content:"";flex:none;width:26px;height:2px;background:var(--accent);transform:translateY(-.34em)}
.prose h3{font-size:21px;margin:28px 0 10px}
.prose em{font-style:italic}
.prose a{border-bottom:1px solid rgba(179,38,30,.35)}
.prose a:hover{border-bottom-color:var(--second)}
.lead{font-size:clamp(19px,1.8vw,23px);line-height:1.48;color:var(--ink);font-weight:400;margin:0 0 26px}

.pullquote{margin:clamp(26px,3.2vw,42px) 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:20px 0}
.pullquote p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(21px,2.2vw,32px);
  line-height:1.14;letter-spacing:-.02em}
.blockquote{margin:clamp(24px,3vw,38px) 0;padding-left:20px;border-left:6px solid var(--second)}
.blockquote p{margin:0;font-size:19.5px;line-height:1.5}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--display);font-size:13px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.callout{position:relative;background:var(--paper);border:1px solid var(--ink);padding:22px 24px;margin:clamp(26px,3vw,42px) 0}
.callout .corner{position:absolute;color:var(--accent)}
.callout .corner.tl{top:-1px;left:-1px}
.callout .corner.br{bottom:-1px;right:-1px;transform:rotate(180deg)}
.callout h3{font-size:19px;letter-spacing:-.01em;margin-bottom:12px}
.callout ul{list-style:none;display:grid;gap:10px}
.callout li{position:relative;padding-left:18px;font-size:16.5px;line-height:1.45;color:var(--ink-70)}
.callout li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--accent)}
.callout p{margin:0;font-size:17px;line-height:1.5}
.note{font-size:16.5px;line-height:1.5;color:var(--ink-50);border-left:2px solid var(--rule);padding-left:14px;margin:22px 0}

/* chronology plate — full width, breaks the reading column */
.plate{margin-block:clamp(34px,4.4vw,64px);padding-block:clamp(28px,3.4vw,48px);background:var(--ink);color:var(--on-dark)}
.plate h3{font-size:clamp(20px,2.1vw,30px);margin-bottom:22px;color:var(--on-dark)}
.timeline{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:24px 26px}
.timeline li{border-top:1px solid var(--rule);padding-top:12px;display:flex;flex-direction:column;gap:7px;min-width:0}
.t-when{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--accent)}
.t-what{font-size:16px;line-height:1.42;color:var(--ink)}
.plate .timeline li{border-top-color:#3B3529}
.plate .t-when{color:var(--flag)}
.plate .t-what{color:var(--on-dark)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:20px 26px;
  margin:clamp(26px,3vw,42px) 0}
.statblock{border-top:2px solid var(--accent);padding-top:12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.stat-num{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:.92;letter-spacing:-.03em}
.stat-label{font-size:15.5px;line-height:1.36;color:var(--ink-50)}

.datatable,.versus{width:100%;margin:clamp(24px,3vw,40px) 0;font-size:16.5px}
.datatable th,.versus th{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-50);text-align:left;padding:9px 14px 9px 0;border-bottom:2px solid var(--ink)}
.datatable td,.versus td{padding:12px 14px 12px 0;border-bottom:1px solid var(--mat);vertical-align:top;line-height:1.42}
.versus td:first-child,.datatable td:first-child{font-family:var(--display);font-weight:600}
.table-scroll{overflow-x:auto}

.chart figcaption{padding-top:12px;font-size:15px}
.chart svg{width:100%;height:auto}
.bar-label{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.05em;fill:var(--ink)}
.bar-val{font-family:var(--display);font-size:12px;font-weight:700;fill:var(--ink-50)}

/* ---------- maps: drawn from supplied geometry only ---------- */
.map-figure{margin-block:clamp(26px,3vw,44px)}
.map-slot{background:var(--ink);border:1px solid var(--ink);overflow:hidden}
.map-slot svg{width:100%;height:auto;display:block}
.map-land{fill:#2F2A20;stroke:#7A7263;stroke-width:1.8}
.map-neighbour{fill:rgba(242,234,217,.07);stroke:none}
.map-pin-dot{fill:var(--flag)}
.map-pin-ring{fill:none;stroke:var(--flag);stroke-width:3}
.map-pin-label{font-family:var(--display);font-size:26px;font-weight:600;fill:var(--on-dark);letter-spacing:.01em}
.map-legend{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:14px;font-family:var(--display);font-size:12px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50)}
.band-teal .map-legend{color:var(--on-teal-mute)}
.map-legend span{display:flex;align-items:center;gap:8px}
.map-legend i{width:10px;height:10px;border-radius:50%;background:var(--flag)}
/* ---------- supporters: a directory laid horizontally ---------- */
.supporters-row{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,236px);justify-content:start;
  align-items:stretch}
.supporters-row>li{min-width:0;display:flex}
.supporters-row .sponsor{flex:1;display:flex;flex-direction:column;gap:8px;padding:15px 18px;min-height:162px;
  border:1px solid var(--rule);border-top-color:var(--ink);margin:-1px 0 0 -1px;color:var(--ink)}
.supporters-row .sponsor:not(.feat){justify-content:center}
.supporters-row .sponsor:hover{color:var(--accent);background:rgba(179,38,30,.05)}
.supporters-row .sponsor-name{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.16;letter-spacing:-.01em}
.supporters-row .sponsor-blurb{font-size:14.5px;line-height:1.38;color:var(--ink-70);max-width:none;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.supporters-row .sponsor.feat{border-top:3px solid var(--accent)}

/* ---------- picks: an image mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(168px,18.5vw,268px);gap:14px}
.mosaic .tile{position:relative;overflow:hidden;background:var(--mat);min-width:0}
.mosaic .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mosaic .tile:hover img{transform:scale(1.045)}
.mosaic .tile>a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px 16px 16px;
  color:#F6F2E8;background:linear-gradient(to top,rgba(15,13,9,.93) 0%,rgba(15,13,9,.5) 48%,rgba(15,13,9,.06) 84%,rgba(15,13,9,0) 100%)}
.mosaic .tile>a:hover{color:var(--flag)}
.mosaic .tile .k{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--flag)}
.mosaic .tile h3{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.1vw,17px);line-height:1.16;
  color:inherit;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mosaic .tile-xl{grid-column:span 2;grid-row:span 2}
.mosaic .tile-xl h3{font-size:clamp(22px,2.5vw,40px);line-height:1.04;-webkit-line-clamp:4}
.mosaic .tile-wide{grid-column:span 2}
.mosaic .tile-wide h3{font-size:clamp(17px,1.5vw,26px);-webkit-line-clamp:2}
@media (max-width:760px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic .tile-wide{grid-column:span 2}
}

/* ---------- the map leads, the places argue second ---------- */
.map-lead{display:grid;gap:clamp(22px,3vw,50px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.map-lead{grid-template-columns:minmax(0,400px) minmax(0,1fr)}
  .place-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.place-feature{margin-top:clamp(22px,2.6vw,36px);padding-top:20px;border-top:2px solid var(--flag)}
.place-feature h3{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.1vw,32px);line-height:1.06;
  color:var(--on-dark);max-width:30ch}
.place-feature h3 a{color:inherit}
.place-feature h3 a:hover{color:var(--flag)}
.place-feature p{margin:12px 0 0;font-size:16.5px;line-height:1.45;color:var(--on-dark-mute);max-width:52ch}
.place-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 34px}
.place-list li{border-top:1px solid #3B3529;padding:13px 0}
.place-list a{display:block;color:var(--on-dark)}
.place-list .nm{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:700;font-size:15px;
  letter-spacing:.11em;text-transform:uppercase}
.place-list i{width:9px;height:9px;border-radius:50%;background:var(--flag);flex:none;transform:translateY(-2px)}
.place-list .tt{display:block;margin-top:6px;font-size:15.5px;line-height:1.35;color:var(--on-dark-mute)}
.place-list a:hover .tt{color:var(--flag)}

.split-map{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,54px)}
@media (min-width:820px){.split-map{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}

/* ---------- cards / references ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;margin:26px 0}
.profile-card{background:var(--paper);border:1px solid var(--ink);padding:18px;display:flex;flex-direction:column;gap:9px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--mat)}
.profile-card h3{font-size:20px}
.profile-card .p-role{margin:0;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.profile-card p{margin:0;font-size:16px;line-height:1.45;color:var(--ink-70)}
.profile-card .p-links{font-size:15px}
.profile-card .p-attr{font-family:var(--display);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-50)}
.profile-card.no-photo{border-left:6px solid var(--second)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin:24px 0}
.org-card{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--on-dark);padding:12px 14px;min-width:0}
.org-card:hover{color:var(--flag)}
.org-logo{height:34px;width:auto;max-width:150px;object-fit:contain}
.org-name{font-family:var(--display);font-weight:600;font-size:16px;min-width:0;overflow-wrap:anywhere}
.org-host{font-family:var(--display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute)}
.org-card.no-logo .org-name{border-left:3px solid var(--flag);padding-left:10px}
.entity-ref{white-space:nowrap;border-bottom:1px solid rgba(179,38,30,.4)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:18px}
.further-grid a{background:var(--paper);border:1px solid var(--ink);padding:16px;color:var(--ink);
  font-family:var(--display);font-weight:600;font-size:18px;line-height:1.18;display:flex;align-items:flex-start;gap:10px}
.further-grid a:hover{color:var(--accent)}
.related-links{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(16px,2vw,26px);margin-top:20px}
.related-links li{min-width:0;border-top:2px solid var(--ink)}
.related-links a{display:flex;flex-direction:column;gap:10px;padding-top:14px;height:100%;color:var(--ink)}
.related-links a:hover{color:var(--accent)}
.related-links .thumb{display:block;aspect-ratio:4/3;background:var(--mat);overflow:hidden}
.related-links .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.related-links a:hover .thumb img{transform:scale(1.05)}
.related-links .k{display:flex;align-items:center;gap:7px;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.related-links .t{font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.18;letter-spacing:-.01em}

.cat-list{list-style:none;display:grid;gap:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:16px 0;color:var(--ink)}
.cat-list a:hover{color:var(--accent)}
.cat-list .t{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.16;letter-spacing:-.015em}
.cat-list .b{font-size:16px;line-height:1.42;color:var(--ink-50);max-width:70ch}
@media (min-width:860px){
  .cat-list a{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:8px 34px;align-items:baseline}
}

/* collapsible long list, CSS only */
.expander{margin-top:16px}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .more-items{display:none}
.expander input:checked ~ .more-items{display:grid}
.expander label{display:inline-flex;align-items:center;gap:8px;margin-top:14px;cursor:pointer;
  font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.expander input:checked ~ label .lbl-open{display:none}
.expander label .lbl-shut{display:none}
.expander input:checked ~ label .lbl-shut{display:inline}

/* ---------- the dates: a horizontal timeline band ---------- */
.yearline{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
@media (min-width:640px){.yearline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.yearline{grid-template-columns:repeat(6,minmax(0,1fr))}}
.yearline li{min-width:0;border-top:2px solid var(--ink);position:relative}
.yearline li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--flag);border:2px solid var(--paper)}
.yearline a{display:block;padding:20px 20px 24px 0;color:var(--ink)}
.yearline a:hover .yr{color:var(--accent)}
.yearline .yr{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,38px);
  line-height:.94;letter-spacing:-.03em}
.yearline .ev{display:block;margin-top:9px;font-size:15px;line-height:1.36;color:var(--ink-70)}

/* ---------- sections: one row, led by the icons ---------- */
.icon-row{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vw,18px)}
.icon-row li{flex:1 1 108px;min-width:0}
.icon-row a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;height:100%;
  padding:20px 8px 18px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.icon-row a:hover{border-color:var(--ink)}
.icon-row .lb{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.icon-row .mark{stroke-width:1.4}
.icon-row [data-sec="river"] .mark{color:#0D5E58}
.icon-row [data-sec="skytrain"] .mark{color:#2B5580}
.icon-row [data-sec="markets"] .mark{color:#B3261E}
.icon-row [data-sec="kitchens"] .mark{color:#D98324}
.icon-row [data-sec="monsoons"] .mark{color:#1C7C9C}
.icon-row [data-sec="ayutthaya"] .mark{color:#8A4A22}
.icon-row [data-sec="year"] .mark{color:#7A2E5C}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-dark);padding-block:clamp(32px,4vw,54px)}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,44px);flex-wrap:wrap}
.foot-mark{display:flex;align-items:center;gap:12px;color:var(--accent)}
.foot-mark b{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--on-dark)}
.foot-cols{display:grid;gap:14px}
.foot-nav{display:flex;flex-wrap:wrap;gap:9px 22px;list-style:none;max-width:600px}
.foot-nav a{color:var(--on-dark);font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase}
.foot-nav a:hover{color:var(--flag)}
.foot-nav-sm{padding-top:13px;border-top:1px solid #3B3529}
.foot-nav-sm a{color:var(--on-dark-mute);font-weight:500;font-size:11.5px;letter-spacing:.16em}
.foot-line{font-size:15px;color:var(--on-dark-mute);max-width:32ch;line-height:1.45}

/* ---------- page furniture ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding-top:clamp(18px,2.4vw,32px)}
.crumb{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase}
.crumb:hover{background:var(--ink);color:var(--ground)}
.crumb .mark{stroke-width:1.6}
.crumb[data-sec="river"] .mark{color:#0D5E58}
.crumb[data-sec="skytrain"] .mark{color:#2B5580}
.crumb[data-sec="markets"] .mark{color:#B3261E}
.crumb[data-sec="kitchens"] .mark{color:#D98324}
.crumb[data-sec="monsoons"] .mark{color:#1C7C9C}
.crumb[data-sec="ayutthaya"] .mark{color:#8A4A22}
.crumb[data-sec="year"] .mark{color:#7A2E5C}
.crumb:hover .mark{color:currentColor}
.crumb-sep{flex:0 0 26px;height:1px;background:var(--rule)}
.crumb-title{font-family:var(--body);font-size:17px;line-height:1.3;color:var(--ink-70);max-width:46ch}
.crumb-title:hover{color:var(--accent)}
.crumb-no{margin-left:auto;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-50)}
@media (max-width:600px){.crumb-sep{display:none}.crumb-no{margin-left:0;flex-basis:100%}}

.breadcrumb{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-top:clamp(18px,2.4vw,30px)}
.breadcrumb a{color:var(--accent)}
.page-intro{font-size:clamp(17px,1.6vw,20.5px);line-height:1.5;color:var(--ink-70);max-width:62ch;margin:18px 0 0}

/* wide screens: title, body, captions and the chronology plate share one centred column;
   only the figures break out of it */
@media (min-width:1180px){
  .measure,.article-col,.plate .wrap{max-width:none;width:min(86ch,66%);margin-inline:auto;padding-inline:0}
  .prose>.fig-mat,.prose>.fig-inset,.prose>.callout,.prose>.pullquote{margin-inline:min(-8vw,-60px)}
  .fig-bleed figcaption{padding-inline:0;width:min(86ch,66%);margin-inline:auto}
}
@media (min-width:1500px){
  .prose{font-size:20px;line-height:1.68}
  .measure,.article-col,.plate .wrap,.fig-bleed figcaption{width:min(92ch,64%)}
}
@media (max-width:700px){
  body{font-size:17px}
  .lead-body,.picks{grid-template-columns:minmax(0,1fr)}
  .pick-side{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:22px}
  .fig-plate .shot{margin-top:-26px}
  .prose{font-size:18px}
}

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

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.supporters-row>li{flex-wrap:wrap!important}
.supporters-row>li > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor{padding:15px 15px!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#16130e;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:15.8}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-nav-collapse: this nav printed 152px of stacked links at 390 before any content
   (8 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "right-tab", seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (18px measured) the button carries the build's
   gutter (clamp(18px,4vw,52px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (860px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-fold{display:none}
@media (max-width:860px){
  .nav-fold{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-left:auto;border:1px solid currentColor;border-radius:2px;padding:10px 16px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .nav-fold-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .nav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .nav-fold-c:checked ~ .nav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap:has(> .nav-fold){display:flow-root}
  .nav-fold:not(:has(~ .nav)){display:none}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin: 0px; text-wrap: balance;}
.card h2:where(.rt-h3){font-size: 21px; line-height: 1.16; letter-spacing: -0.015em; margin-top: 14px; min-height: 2.32em;}
.card h2:where(.rt-h3) a{color: var(--ink);}
.card h2:where(.rt-h3) a:hover{color: var(--accent);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.thumb > img,
  figure.fig-bleed > div.shot > img,
  figure.fig-inset > div.shot > img,
  figure.fig-mat > div.shot > img,
  figure.fig-plate > div.shot > img,
  li.card > div.shot > img,
  main > div.lead-frame > img,
  ul.mosaic > li.tile > img,
  ul.mosaic > li.tile.tile-wide > img,
  ul.mosaic > li.tile.tile-xl > img){height:auto}
/* op-img-dims:end */