/* BL-2026-007 haze study: extras on top of ../ev-roads/ev-roads.css (the estate's report sheet; charter §4 tokens).
   Sans only, ink and lime, red for fire detections, 0-2 px radii, flat fills (charter rows 109-123). */
nav.pages { border-bottom: 1px solid var(--rule); }
nav.pages .wrap { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
nav.pages a { color: var(--ink-2); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav.pages a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { nav.pages a:hover { color: var(--ink); border-bottom-color: var(--rule); } }
@media (max-width: 720px) { nav.pages .wrap { gap: 2px 16px; } }
.fnote { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; max-width: var(--measure); }
.scroll { overflow-x: auto; max-width: 100%; }
.nw { white-space: nowrap; }
/* name chips that point at a place (charter §4.3): sans, 2 px radius, 1 px rule */
a.gref.nm { font: 600 13px/1.25 var(--sans); border: 1px solid var(--rule); color: var(--ink); }
/* hover and keyboard focus flip the chip to ink ground, canvas text (same specificity as the rest state, so it wins) */
@media (hover: hover) and (pointer: fine) { a.gref.nm:hover { background: var(--ink); color: var(--canvas); border-color: var(--ink); } }
a.gref.nm:focus-visible { background: var(--ink); color: var(--canvas); border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 2px; }
.views { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.views button { font: 500 14px var(--sans); border: 1px solid var(--ink); background: var(--canvas); color: var(--ink); border-radius: 2px; padding: 5px 10px; cursor: pointer; }
.views button:active { transform: scale(.97); }
/* inline regional map (scripts/haze/svgmap.py CSS, copied verbatim) */
.hzmap { display: block; width: 100%; height: auto; margin-top: 4px; }
.hzmap .p path { stroke: #ffffff; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.hzmap .s path { stroke: #dfe2e6; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.hzmap .coast { fill: none; stroke: #9aa0a8; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hzmap .c path { fill: #f7f8f9; stroke: #c4c8ce; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.hzmap .frame { fill: #ffffff; stroke: #171b21; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hzmap .pt circle { fill: #171b21; stroke: #ffffff; stroke-width: 1.5; vector-effect: non-scaling-stroke; r: calc(3.5px * var(--zs, 1)); }
.hzmap .lab text { font: 600 calc(13px * var(--zs, 1)) var(--sans, 'Chivo', sans-serif); fill: #171b21; paint-order: stroke; stroke: #ffffff; stroke-width: calc(3px * var(--zs, 1)); stroke-linejoin: round; }
.hzmap .lab .note { font-weight: 400; fill: #4a5059; }
.hzmap .lab text { transform: translate(calc(var(--dx, 0px) * var(--zs, 1)), calc(var(--dy, 0px) * var(--zs, 1))); }
.hzmap .lab text.hid { display: none; }
.hzmap [data-prov].sel, .hzmap [data-s].sel { stroke: #171b21; stroke-width: 2; }
.hzmap .selo path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.hzmap .selo .halo { stroke: #ffffff; stroke-width: 6; }
.hzmap .selo .line { stroke: #171b21; stroke-width: 2; }
.hzmap.zoomed .p path:not(.sel), .hzmap.zoomed .s path:not(.sel) { opacity: 0.4; }
@media (max-width: 600px) { .hzmap .lab text { font-size: calc(26px * var(--zs, 1)); stroke-width: calc(6px * var(--zs, 1)); } .hzmap .lab text:not(.k):not(.on) { display: none; } }

/* map and chip zoom: the viewBox moves in hz.js (<=300 ms, instant under reduced motion) */
@media print { details.fold > summary::after { content: ''; } }

/* masthead study code in sans: no mono anywhere in this study (plan 5, charter row 117) */
.ref { font-family: var(--sans); }
/* Figure 1: chip row above the map, picked shapes, the zoom note */
.mapbar .refs { display: flex; flex-wrap: wrap; gap: 6px; }
.mapbar .refs .gref { margin: 0; }
.mapbar button[disabled] { opacity: .45; cursor: default; }
.hzmap path[data-prov], .hzmap path[data-s] { cursor: pointer; }
.zoomed-to { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; min-height: 1.2em; }
.keys .ramp { margin: 0; }
.keys .ramp b { color: var(--ink); font-weight: 600; }
.keys .ramp .n { color: var(--ink-3); }

/* Fire detections in red (charter row 123, operator 2026-11-01 "Use shades of red for fire"). A figure or table whose
   marks count 2026 detections carries class "fire": its 2026 mark takes the red ramp's middle step with the darkest as
   its 1 px edge (lime's grammar, red hexes), and "other provinces, 2026" the ramp's lightest. Past seasons stay grey;
   lime keeps 2026 on every non-fire figure and Sumatra on the trajectory figures. Ramp: svgmap.FIRE. */
.fire { --subject: #c2404c; --subject-ink: #701e28; --fire-pale: #e7a0a2; }
.fire .sw.pl, .fire table.hb .bar.pl { background: var(--fire-pale); }

/* small charts beside a finding (scripts/haze/charts.py): ruled HTML, so labels hold their size on a phone */
.sw { display: inline-block; width: 14px; height: 10px; flex: none; }
.sw.ink { background: var(--ink); }
.sw.fx { background: var(--bench); }
.sw.su { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
.sw.ka { background: var(--bench); }
.sw.mx { background: #c4c8ce; }
.sw.nf { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--ink); }
.fc .clegend { margin: 0 0 6px; }
table.hb { margin: 0; font-size: 13px; max-width: none; }
table.hb th, table.hb td { padding: 3px 8px 3px 0; vertical-align: middle; border-bottom-color: var(--rule); font-weight: 400; }
table.hb th { width: 1%; white-space: nowrap; }
table.hb th .gref { font-size: 12px; padding: 2px 5px; }
table.hb td.b { width: 100%; padding-right: 10px; }
table.hb .bar { display: block; height: 6px; min-width: 1px; }
table.hb .bar.ink { background: var(--ink); }
table.hb .bar.fx { background: var(--bench); margin-top: 2px; height: 4px; }
table.hb td.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); padding-right: 0; }
table.hb td.r .sub { display: inline; color: var(--ink-3); font-size: 12px; margin-left: 4px; }
ol.cols { list-style: none; margin: 22px 0 0; padding: 0; display: flex; align-items: flex-end; gap: 3px; height: 170px; border-bottom: 1px solid var(--ink); }
ol.cols li { flex: 1; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
ol.cols .c { display: block; background: #c4c8ce; }
ol.cols .bm .c { background: var(--bench); }
ol.cols .sub .c { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
ol.cols .cap { display: block; border: 1px dashed var(--subject-ink); border-bottom: 0; }
ol.cols .v { position: absolute; bottom: calc(100% + 2px); font-size: 12px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
ol.cols .bm .v { left: 0; }
ol.cols .sub .v { right: 0; }
ol.cols .y { position: absolute; top: calc(100% + 4px); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
ol.cols li:last-child .y { right: 0; }
.fc ol.cols + .fnote { margin-top: 26px; }
.stacks { display: grid; gap: 12px; }
.stack p { margin: 0; }
.stack .sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.stack .sh .gref { margin: 0; }
.stack .sh .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bar100 { display: flex; height: 16px; margin: 6px 0 4px !important; }
.bar100 span { display: block; height: 100%; }
.bar100 .su { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
.bar100 .ka { background: var(--bench); }
.bar100 .mx { background: #c4c8ce; }
.bar100 .nf { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--ink); }
.stack .clegend { font-size: 12px; gap: 2px 10px; }
@media print { .mapbar, .zoomed-to { display: none; } }
.src li, .figcap { overflow-wrap: anywhere; }
/* the overview H1 is a full finding sentence (plan 2.1): a step down from the report sheet's display size */
body[data-page="overview"] h1, body[data-page="landed"] h1 { font-size: clamp(28px, 3.3vw, 34px); line-height: 1.18; max-width: 36ch; }

/* where-it-landed (plan 2.2). DOE bands and day counts on the row 77 ink ramp; missing hours a pale hatch (row 118) */
.sw.b0, .heat td.b0 { background: #f3f4f5; }
.sw.b1, .heat td.b1 { background: #d5d8dc; }
.sw.b2, .heat td.b2 { background: #a9aeb5; }
.sw.b3, .heat td.b3 { background: #6b717a; }
.sw.b4, .heat td.b4 { background: #171b21; }
.sw.x, .heat td.x, .dcols .gap .c { background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 7L7 -1M5 7L7 5M-1 1L1 -1' stroke='%23b8bdc4' stroke-width='1'/%3E%3C/svg%3E"); }
.sw.b0, .sw.x { box-shadow: inset 0 0 0 1px var(--rule); }
.sw.tk { background: var(--bench); height: 3px; }
.sw.hr { background: var(--ink); height: 1px; }
.clegend .n { color: var(--ink-3); }
.heatbox { overflow: auto; max-width: 100%; max-height: min(78vh, 760px); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: 6px; }
.heatbox:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table.heat { border-collapse: separate; border-spacing: 0; margin: 0; width: auto; max-width: none; font-size: 12px; }
.heat th, .heat td { padding: 0; border: 0; }
.heat td { width: 14px; min-width: 14px; height: 18px; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }
.heat thead th { position: sticky; top: 0; z-index: 2; background: var(--canvas); font-weight: 400; color: var(--ink-3); text-align: center; vertical-align: bottom;
  font-variant-numeric: tabular-nums; padding: 4px 0 3px; border-bottom: 1px solid var(--ink); min-width: 15px; line-height: 1.1; }
.heat thead th .mo { display: block; color: var(--ink); font-weight: 600; }
.heat thead th.wk { box-shadow: inset 1px 0 0 var(--rule); }
.heat thead th.gap { color: var(--ink); }
.heat th.stn, .heat tbody th { position: sticky; left: 0; z-index: 1; background: var(--canvas); text-align: left; white-space: nowrap; }
.heat th.stn { z-index: 3; color: var(--ink-2); font-weight: 600; padding-right: 10px; text-align: left; }
.heat th.stn .n, .heat tbody th .n { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.heat tbody th { padding: 1px 10px 1px 0; min-width: 168px; max-width: 200px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-right: 1px solid var(--rule); }
.heat tbody th .gref { font-size: 12px; padding: 1px 5px; margin: 0; }
.heat tr.grp th { display: table-cell; padding: 10px 0 3px; border-right: 0; position: static; }
.heat tr.grp th > span { position: sticky; left: 0; display: inline-block; background: var(--canvas); }
.heat tr.grp .gref { font-size: 13px; }
.heat tr:target th, .heat tr:target td { box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
table.rt { margin-top: 0; font-size: 14px; }
table.rt td.num, table.rt th.r { font-variant-numeric: tabular-nums; }
table.rt td.num { font-weight: 600; padding-right: 14px; }
table.rt .gref { margin: 0; }
table.rt tr.grp th { padding-top: 16px; border-bottom-color: var(--rule); color: var(--ink); }
.sub-h { font-size: 16px; font-weight: 600; margin: 22px 0 4px; }
table.hb .bar.ink.mob { outline: 1px dashed var(--ink); outline-offset: 2px; margin: 3px 0; }
table.rt td .sub { margin-top: 2px; }
@media (max-width: 600px) {
  table.facts thead { display: none; }
  table.facts tr:not(.grp) { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  table.facts td { border: 0; padding: 0; }
  table.facts td:nth-child(3), table.facts td:nth-child(4) { grid-column: 2; font-size: 13px; color: var(--ink-2); }
  table.facts td.num { text-align: left; }
  .heat tbody th { min-width: 150px; }
}
.figure.fc { max-width: 620px; }
/* Figure 3: one ink column per MYT day, a grey tick for fixed stations only, an ink hairline at ten million */
ol.dcols { list-style: none; margin: 26px 0 0; padding: 0; display: flex; align-items: flex-end; gap: 2px; height: 190px; border-bottom: 1px solid var(--ink); position: relative; max-width: 900px; }
ol.dcols li { flex: 1; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
ol.dcols .c { display: block; background: var(--ink); }
ol.dcols .gap .c { height: 100%; }
ol.dcols .t { position: absolute; left: -1px; right: -1px; height: 2px; background: var(--bench); margin-bottom: -1px; }
ol.dcols .v { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
ol.dcols .y { position: absolute; top: calc(100% + 4px); left: 0; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
ol.dcols li:last-child .y { left: auto; right: 0; }
ol.dcols li.ten { position: absolute; z-index: 1; left: 0; right: 0; height: 0; border-top: 1px solid var(--ink); flex: none; pointer-events: none; }
ol.dcols li.ten span { position: absolute; right: 0; bottom: 2px; font-size: 12px; background: rgba(255, 255, 255, .85); padding: 0 2px; }
ol.dcols + .figcap { margin-top: 30px; }
@media (max-width: 600px) { ol.dcols { gap: 1px; height: 160px; } }
#map { height: min(72vh, 680px); }
@media print { .heatbox { max-height: none; overflow: visible; } }

/* where-it-burned and why-2026 (plan 2.3, 2.5; scripts/haze/burned_html.py). Lime = 2026 or the one named item,
   grey = past seasons and benchmarks, #c4c8ce = the rest; a pair is bracketed in ink, never both lime (row 115) */
.sw.pl { background: #c4c8ce; }
.sw.ln26 { height: 3px; background: var(--subject); box-shadow: 0 0 0 .5px var(--subject-ink); }
.sw.lnp { height: 2px; background: var(--bench); }
table.hb .bar.lm { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); height: 8px; }
table.hb .bar.gy { background: var(--bench); }
table.hb .bar.pl { background: #c4c8ce; height: 8px; }
table.hb .trk, table.dry .trk { position: relative; display: block; }
table.hb .tk, table.dry .tk { position: absolute; top: 50%; width: 2px; height: 14px; margin: -7px 0 0 -1px; background: var(--bench); }
.wks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 900px; }
.wk p { margin: 0; }
.wk .wh .gref { margin: 0; }
.wk svg, .lc svg { display: block; width: 100%; overflow: visible; }
.wk svg { height: 96px; margin: 8px 0 4px; border-bottom: 1px solid var(--ink); }
.wk svg polyline, .lc svg polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wk .yp, .lc .yp { stroke: var(--bench); stroke-width: 1.25; }
.wk .y26, .lc .y26 { stroke: var(--subject); stroke-width: 2.5; }
.wk .wn, .rp .wn { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .wks { grid-template-columns: minmax(0, 1fr); } }
.pair2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.pair2 .wh { margin: 0 0 4px; }
.pair2 th { font-variant-numeric: tabular-nums; color: var(--ink-2); }
@media (max-width: 600px) { .pair2 { grid-template-columns: minmax(0, 1fr); } }
i.rec { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; }
i.rec.full { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
i.rec.win { background: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--subject-ink); }
table.rec-t td:first-child { white-space: nowrap; }
/* Figure 7: Sumatra + Kalimantan bracketed in ink as a pair, Papua apart behind a white gap, the rest pale */
.rstack { display: flex; gap: 4px; max-width: 900px; font-size: 13px; }
.rstack .rs { min-width: 0; }
.rstack p { margin: 0; }
.rstack .brk { height: 22px; font-weight: 600; white-space: nowrap; border: 1px solid var(--ink); border-bottom: 0; padding: 2px 6px 0; }
.rstack .pa .brk, .rstack .ot .brk { border-color: transparent; }
.rstack .bar100 { margin: 0 0 4px !important; height: 18px; }
.rstack .bar100 .s2 { box-shadow: inset 2px 0 0 var(--canvas); }
.rstack .sl { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rstack .sl { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 600px) { .rstack { flex-direction: column; gap: 10px; } .rstack .rs { width: 100% !important; } .rstack .pa .brk, .rstack .ot .brk { display: none; } }
/* Figure 5: 2026 as a share of 2015, a lime dot against the ink rule at 100% */
table.dots td.dp { width: 100%; height: 22px; padding-right: 16px; }
table.dots .trk { position: relative; display: block; height: 18px; }
table.dots .hund { position: absolute; left: 100%; top: 0; bottom: 0; width: 1px; background: var(--ink); }
table.dots .dot { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
table.dots tr.ax td, table.dots tr.ax th { border-bottom: 0; font-size: 12px; color: var(--ink-3); padding-top: 0; }
table.dots tr.ax .l0 { position: absolute; left: 0; }
table.dots tr.ax .l1 { position: absolute; left: 100%; transform: translateX(-50%); white-space: nowrap; }
table.rt.sp td[data-src] .num { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
table.rt.sp td[data-src] .sub, table.rt td .sub2 { display: block; font-size: 12px; color: var(--ink-3); }
/* why-2026 Figure 1: RONI lines with HTML end labels and axes, so text keeps its size on a phone */
.two-up { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px 36px; align-items: start; max-width: 1040px; }
@media (max-width: 760px) { .two-up { grid-template-columns: minmax(0, 1fr); } }
.lc { display: grid; grid-template-columns: 36px minmax(0, 1fr) 40px; grid-template-rows: 220px 22px; font-size: 12px; color: var(--ink-3); }
.lc .ya { position: relative; font-variant-numeric: tabular-nums; }
.lc .ya span { position: absolute; right: 6px; transform: translateY(-50%); }
.lc .pl { position: relative; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.lc svg { height: 100%; }
.lc .z { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc .el { position: absolute; transform: translate(6px, -50%); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lc .el.s { color: var(--ink); font-weight: 600; }
.lc .xa { grid-column: 2; position: relative; }
.lc .xa span { position: absolute; top: 4px; transform: translateX(-50%); }
.lc .xa span:first-child { transform: none; }
table.jas td.hl { font-weight: 600; box-shadow: inset 3px 0 0 var(--subject); padding-left: 8px; }
/* Figure 2: one small column chart per fire point, grouped Sumatra, Kalimantan, Papua */
.rain .rg { margin-top: 14px; }
.rain .rgh { font-weight: 600; margin: 0 0 6px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.rain .rps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 22px; }
.rp p { margin: 0; }
.rp .wh { font-size: 13px; font-weight: 600; }
.rp .wh .sub .gref { font-size: 11px; padding: 1px 4px; margin: 0 0 0 4px; font-weight: 600; }
ol.mc { list-style: none; margin: 6px 0 4px; padding: 0; height: 56px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--ink); }
ol.mc li { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
ol.mc .c { display: block; background: var(--bench); }
ol.mc .sub .c { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
.rain .xr { display: flex; justify-content: space-between; max-width: 150px; font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }
table.dry td.b { min-width: 120px; }
table.dry th .sub .gref { font-size: 11px; padding: 1px 4px; margin: 0 0 0 4px; }
table.dry .bar { display: block; height: 8px; }
table.dry .bar.lm { background: var(--subject); box-shadow: inset 0 0 0 1px var(--subject-ink); }
table.dry .bar.pl { background: #c4c8ce; }
table.dry .tk { background: var(--ink-2); }
table.dry th { white-space: nowrap; font-weight: 600; }
body[data-page="burned"] h1, body[data-page="why"] h1 { font-size: clamp(28px, 3.3vw, 34px); line-height: 1.18; max-width: 36ch; }
.figure.fc + .col, .figure + .col, .figure + section { margin-top: 44px; }
.figure > details.fold { margin-top: 24px; }
table.rt tbody th { border-bottom-color: var(--rule); }
.rp .wh .sub { display: block; margin-top: 3px; }
.rp .wh .sub .gref { margin: 0; }
table.past td.num { white-space: nowrap; }
.rstack .pr .sl { padding-right: 10px; }
/* Phone and narrow-tablet width (the dry-spell table needs ~810 px): the dry-spell, past-peak and SiPongi tables stack each row as a ruled block, so no column sits off-screen.
   Labels come from data-l (words only; figures stay in the cell). */
td[data-l]::before { display: none; }
@media (max-width: 860px) {
  table.dry, table.past, table.sp { display: block; }
  table.dry thead, table.past thead, table.sp thead { display: none; }
  table.dry tbody, table.past tbody, table.sp tbody { display: block; }
  table.dry tr, table.past tr, table.sp tr { display: grid; column-gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.dry th, table.dry td, table.past td, table.sp td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; }
  td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
  table.dry tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  table.dry tbody th, table.dry td.b { grid-column: 1 / -1; }
  table.dry td.b { min-width: 0; padding: 2px 0; }
  table.dry th .sub .gref { margin: 0 0 0 6px; }
  table.dry td.sub2 { font-size: 14px; color: var(--ink); }
  table.dry td .sub { display: inline; margin: 0 0 0 4px; }
  table.past tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  table.past td.wh { font-weight: 600; }
  table.past td.num { grid-column: 2; grid-row: 1 / span 2; text-align: right; padding-right: 0; }
  table.past td.num::before { text-align: right; }
  table.past td.pl { grid-column: 1; color: var(--ink-2); }
  table.past td.wt, table.past td.by, table.sp td.by { grid-column: 1 / -1; }
  table.past td.wt { margin-top: 4px; }
  table.past td.by, table.sp td.by { margin-top: 4px; }
  td.by[data-l]::before { display: inline; margin-right: 6px; }
  table.sp tr { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  table.sp td.nw { font-weight: 600; }
}
/* where-it-burned #indonesia: the MODIS finding is its own finding, set off by a rule */
.col.split { margin-top: 44px; padding-top: 4px; border-top: 1px solid var(--rule); }

/* how-it-travelled (plan 2.4; scripts/haze/travelled_html.py). One colour rule in every trajectory figure (row 119):
   Sumatra lime, Kalimantan grey, the rest pale, no fire contact white with an ink rule; agreed solid, the rest hollow */
body[data-page="travelled"] h1 { font-size: clamp(28px, 3.3vw, 34px); line-height: 1.18; max-width: 36ch; }
.trp { max-width: 1100px; }
.rpan { scroll-margin-top: 16px; }
.rpan:target .wh .gref { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
.rpan .wh, .pair2 .wh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.rpan .wh .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trmap { display: block; width: 100%; height: auto; margin: 6px 0 0; border: 1px solid var(--rule); background: var(--canvas); }
.trmap .land { fill: #f3f4f5; stroke: #c4c8ce; stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.trmap .su rect { fill: var(--subject); stroke: var(--subject-ink); stroke-width: 0.4; vector-effect: non-scaling-stroke; }
.trmap .ka rect { fill: var(--bench); }
.trmap .mx rect { fill: #c4c8ce; }
.trmap .pa polyline { fill: none; stroke: var(--ink); stroke-opacity: 0.15; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trmap .rc circle { fill: var(--ink); stroke: var(--canvas); stroke-width: 2; vector-effect: non-scaling-stroke; }
.trmap .tl text { font: 600 15px var(--sans); fill: var(--ink-2); paint-order: stroke; stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round; }
.trmap .tl .rn { fill: var(--ink); }
@media (max-width: 600px) { .trmap .tl text { font-size: 24px; stroke-width: 5px; } }
.sw.un, .bar100 .un { background: var(--canvas); box-shadow: inset 0 0 0 1px var(--ink-3); }
/* S10: not agreed reads apart from no fire contact: a short hollow segment after a white gap, never full height */
.bar100.agr { align-items: center; }
.bar100.agr .un { height: 6px; margin-left: 4px; }
.sw.un { height: 6px; }
.sw.hl { height: 1px; background: var(--ink); opacity: .5; }
.bar100.agr { margin-top: 10px !important; }
.agn { font-size: 12px; color: var(--ink-3); margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.tkey { font-size: 12px; }
.trp { gap: 24px 28px; }
/* Figure 2: Sumatra's share per setting, a lime dot against the 70% rule */
table.sens td.dp { padding-right: 18px; }
table.sens .rule { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ink); }
table.sens .hund { display: none; }
table.sens tr.mn th { font-weight: 600; }
table.sens th { white-space: normal; width: 42%; font-size: 12px; line-height: 1.3; }
table.sens tr.ax .l7 { position: absolute; transform: translateX(-50%); white-space: nowrap; }
table.sens tr.ax .l0 { position: absolute; left: 0; }
table.sens tr.ax .l1 { position: absolute; left: 100%; transform: translateX(-100%); white-space: nowrap; }
table.sens tr.ax td { height: 18px; }
/* Table 1 and Figure 3 */
table.last { max-width: 420px; }
table.last th .sw { margin-right: 8px; vertical-align: -1px; }
table.last tr.tot th, table.last tr.tot td { color: var(--ink-2); font-weight: 400; }
table.diag th { white-space: normal; width: 36%; font-size: 12px; line-height: 1.3; }
table.diag td.b { padding-right: 10px; }
table.diag .bar100 { margin: 0 !important; height: 12px; }
table.diag td.v2 { font-size: 12px; }
table.diag td.v2 span { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
table.diag tr.grp th { padding-top: 12px; font-weight: 600; color: var(--ink-2); width: auto; }
/* Figure 4: compass glyphs, ink arrow downwind, bearing ticks to the fire points on the rim */
table.wind { width: auto; }
table.wind th.c, table.wind td.c { text-align: center; padding-left: 10px; padding-right: 10px; }
table.wind tbody th { white-space: nowrap; }
.cg { display: block; width: 36px; height: 36px; margin: 0 auto; overflow: visible; }
.cg circle { fill: none; stroke: var(--rule); stroke-width: 1; }
.cg line { stroke-width: 2; stroke-linecap: butt; }
.cg .su { stroke: var(--subject); }
.cg .ka { stroke: var(--bench); }
.cg .mx { stroke: #c4c8ce; }
.cg .ar { stroke: var(--ink); stroke-width: 1.5; }
.cg .ah { fill: var(--ink); }
table.wind .dg { display: block; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Figure 5: r at lags 0-4, small multiples */
.lags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; max-width: 1040px; }
.lg p { margin: 0; }
.lg .wh { font-size: 13px; font-weight: 600; min-height: 2.6em; }
.lp { position: relative; height: 110px; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 6px; }
.lp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lp polyline { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp .z { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.lp .ld { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); }
.lp .zl { position: absolute; left: 2px; transform: translateY(-100%); font-size: 11px; line-height: 1; padding-bottom: 1px; color: var(--ink-3); }  /* inside the panel, over the zero line (S10) */
.lv, .lx { position: relative; height: 16px; font-size: 11px; font-variant-numeric: tabular-nums; }
.lv span, .lx span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.lv { color: var(--ink); margin-top: 3px !important; }
.lx { color: var(--ink-3); }
.lxn { font-size: 12px; color: var(--ink-3); margin: 6px 0 0; }
@media (max-width: 760px) { .lags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Figure 6: modelled PM2.5 by week, drawn by date */
.cm { max-width: 1040px; }
.lc.cams { grid-template-columns: 30px minmax(0, 1fr) 82px; grid-template-rows: 180px 22px; margin-top: 6px; }
.lc.cams .xa span:last-child { transform: translateX(-50%); }
table.reg td.num { white-space: nowrap; }
.lc.cams { grid-template-columns: 30px minmax(0, 1fr) 100px; }
.lc.cams .el { white-space: nowrap; }
table.wind td.c[data-l]::before { display: none; }
@media (max-width: 600px) {
  table.wind, table.wind tbody { display: block; width: 100%; }
  table.wind thead { display: none; }
  table.wind tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px 0; border-bottom: 1px solid var(--rule); }
  table.wind tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 4px; }
  table.wind td.c { border: 0; padding: 2px 0; }
  table.wind td.c[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--ink-3); }
  .lc.cams { grid-template-columns: 30px minmax(0, 1fr) 92px; }
}
table.sens tr.ax .l7 { transform: translateX(-100%); padding-right: 4px; }
@media (max-width: 600px) { .lags { grid-template-columns: minmax(0, 1fr); } .lg .wh { min-height: 0; } }

/* method and credits (plan 2.6; scripts/haze/method_html.py): ruled tables only. Every table stacks its rows as ruled
   blocks at phone width, labels from data-l (words only; figures stay in the cell), so no column sits off-screen. */
table.mt th[scope="row"] { font-weight: 600; text-align: left; vertical-align: top; }
table.mt th .sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); margin-top: 2px; }
table.mt td { vertical-align: top; }
table.mt td[data-src] .num { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
table.mt td[data-src] .sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
table.mt td[data-src] .num .sub2 { font-weight: 400; color: var(--ink-2); font-size: 13px; }
table.mt td.nt { color: var(--ink-2); font-size: 13px; }
table.mt tr.grp th { font-weight: 600; }
table.mt tr.grp th .sub { display: block; margin: 2px 0 0; }
table.mt td.num { text-align: right; }
table.mt td.num .sub2 { font-weight: 400; }
.cr ul.cite { margin: 4px 0 0; padding-left: 18px; }
.cr ul.cite li { margin-bottom: 4px; }
details.fold > summary h3 { margin: 0; font-size: 18px; }
#trajectories > details.fold { margin-top: 28px; }
#trajectories > details.fold + details.fold { margin-top: 16px; }
details.fold > .figcap, details.fold > table { max-width: 760px; }
.cr { overflow-wrap: anywhere; }
.cr ul.urls { margin: 6px 0 0; padding-left: 18px; }
.cr ul.urls li { margin-bottom: 2px; }
@media (max-width: 760px) {
  table.mt, table.mt tbody { display: block; }
  table.mt.qa tr { grid-template-columns: minmax(0, 1fr) auto; }
  table.mt thead { display: none; }
  table.mt tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  table.mt th, table.mt td { display: block; border: 0; padding: 0; text-align: left; white-space: normal; }
  table.mt:not(.qa) tbody th[scope="row"], table.mt td.nt, table.mt td[data-src], table.mt.asmc td.nt { grid-column: 1 / -1; }
  table.mt td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
  table.mt td.num { padding-right: 0; text-align: left; }
  table.mt.qa td.num { text-align: right; }
  table.mt tr.grp { display: block; padding: 18px 0 6px; border-bottom: 1px solid var(--ink); }
  table.mt tr.grp th .sub { display: block; margin: 2px 0 0; }
}
/* print: every credit link prints its URL unless its text already is the URL (class u) */
@media print { #credits a[href]:not(.u)::after { content: " (" attr(href) ")"; } }