/* Layout: a picture book that fills one screen. Desktop shows an open spread (illustration | story) and turns leaves around the spine; phones show one side at a time. Ribbon bookmarks hang over the top edge. */
:root {
  --paper: #e9e2d2; --page: #faf6ec; --ink: #233038; --ink-soft: #5d6a70; --rule: #ddd3c0;
  --forest: #3e6b4b; --leaf: #7fa86a; --peat: #6b4a33; --peat-2: #94694a; --water: #5b93a8; --tea: #5a5233; --tea-hi: #9c8a58;
  --sky: #d9e6e4; --haze: #c9c5bb; --plane: #7d7a74; --sun: #f2b45a; --sun-pale: #ecd9b0; --ember: #d0561b; --ember-2: #f29a4a; --smoke: #9c968e; --gold: #c99a2e;
  --sea: #dfe9e8; --land: #efe6d2; --land-other: #e4dccb; --coast: #b9ab92;
  --ash: #6f6a63; --good: #3f8a52; --mid: #c49a12; --bad: #d0561b; --vbad: #b02e3a; --haz: #6d2f72;
  --shade: rgba(40, 28, 12, .28);
  --display: "Young Serif", Georgia, serif;
  --body: "Literata", Georgia, serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #12171a; --page: #1f262b; --ink: #ece4d3; --ink-soft: #a6aca9; --rule: #343d43;
  --forest: #5f9a6c; --leaf: #8fbf7a; --peat: #7d5a40; --peat-2: #a57a58; --water: #4f8aa0; --tea: #3f3a28; --tea-hi: #7d6f48;
  --sky: #2a3a44; --haze: #3a3a36; --plane: #8a867e; --sun: #f0a94e; --sun-pale: #5e5642; --ember: #f07f3a; --ember-2: #f7b06b; --smoke: #7b766f; --gold: #e0b24a;
  --sea: #1a2a33; --land: #343a35; --land-other: #2a2f2c; --coast: #56604f;
  --ash: #a39c93; --good: #6cc27f; --mid: #e3c046; --bad: #f07f3a; --vbad: #f0606c; --haz: #c98ad0; --shade: rgba(0, 0, 0, .5); color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #12171a; --page: #1f262b; --ink: #ece4d3; --ink-soft: #a6aca9; --rule: #343d43;
  --forest: #5f9a6c; --leaf: #8fbf7a; --peat: #7d5a40; --peat-2: #a57a58; --water: #4f8aa0; --tea: #3f3a28; --tea-hi: #7d6f48;
  --sky: #2a3a44; --haze: #3a3a36; --plane: #8a867e; --sun: #f0a94e; --sun-pale: #5e5642; --ember: #f07f3a; --ember-2: #f7b06b; --smoke: #7b766f; --gold: #e0b24a;
  --sea: #1a2a33; --land: #343a35; --land-other: #2a2f2c; --coast: #56604f;
  --ash: #a39c93; --good: #6cc27f; --mid: #e3c046; --bad: #f07f3a; --vbad: #f0606c; --haz: #c98ad0; --shade: rgba(0, 0, 0, .5); color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: clamp(14.5px, 1.6vh, 17px)/1.6 var(--body); padding: 0 16px; overflow: hidden }
.wrap { max-width: 1440px; height: 100%; margin: 0 auto; padding-block: 6px 12px; display: flex; flex-direction: column }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; text-wrap: balance; margin: 0 }
h2 { font-size: clamp(1.6rem, 3.6vh, 2.5rem) }
h3 { font-size: 1.1rem }
p { margin: 0; max-width: 62ch }
button { font: inherit; color: inherit; cursor: pointer }
:focus-visible { outline: 2.5px solid var(--ember); outline-offset: 2px }
.hand { font-family: var(--hand); font-size: 1.4rem; line-height: 1.1; color: var(--ember) }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums }
.soft { color: var(--ink-soft) }
.small { font-size: .88rem }

/* ribbon bookmarks */
.ribbons { flex: none; height: 50px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; position: relative; z-index: 0 }
.left-top { display: flex; align-items: flex-end; gap: 16px; height: 100%; min-width: 0; padding-left: 30px }
.brand { font-family: var(--display); font-size: 1.15rem; align-self: center; flex: none }
.tabs-l { justify-content: flex-start; padding-right: 0 }
.tabs { display: flex; align-items: flex-end; justify-content: flex-end; gap: 4px; padding-right: 26px; min-width: 0; overflow: hidden; height: 100% }
.tabs::-webkit-scrollbar { display: none }
.bm { flex: none; border: 0; color: var(--page); background: var(--c, var(--forest)); font: .8rem/1 var(--display); padding: 13px 12px 18px; height: 40px; margin-bottom: -10px;
  clip-path: polygon(0 0, 50% 6px, 100% 0, 100% 100%, 0 100%); opacity: .78; transition: height .25s, opacity .25s; box-shadow: inset 0 -12px 10px -10px rgba(0,0,0,.35) }
.bm:hover { opacity: .95 }
.bm[aria-current="true"] { height: 50px; opacity: 1; padding-top: 16px }
.bm { min-width: 30px; padding-left: 9px; padding-right: 9px }
.bm .n { font-family: var(--mono); font-size: .74rem }
.bm[aria-current="true"] .n { opacity: .8; margin-right: 5px }
.bm:not([aria-current="true"]) .t { display: none }

/* book */
.stage { flex: 1; min-height: 0; position: relative; perspective: 2600px; z-index: 1 }
.page { position: absolute; inset: 0; background: var(--page); border-radius: 6px 12px 12px 6px; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(16px, 3vh, 34px) clamp(16px, 3vw, 40px) 12px;
  box-shadow: 0 1px 0 var(--rule), 0 22px 40px -24px rgba(30,25,15,.55), 0 2px 0 -1px var(--page), 0 4px 0 -1px var(--rule), 0 6px 0 -2px var(--page), 0 8px 0 -2px var(--rule) }
.page::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; transform: translateX(-50%); pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--shade) 48%, rgba(0,0,0,.12) 50%, var(--shade) 52%, transparent); opacity: .45 }
.page::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.body { flex: 1; min-height: 0; position: relative; z-index: 1 }
.spread { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px) }
.col { min-width: 0; min-height: 0; height: 100%; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 12px }
.story { justify-content: safe center }
.art { justify-content: center }
.art > svg { width: 100%; flex: 1 1 auto; min-height: 0; display: block }
.folio { flex: none; display: flex; justify-content: space-between; padding-top: 8px; font: .75rem var(--mono); color: var(--ink-soft); position: relative; z-index: 1 }
.mobile-only { display: none !important }
.page.flat::before { display: none }

/* flipping leaf */
.flip-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; transform-style: preserve-3d }
.flip-layer .page { box-shadow: none }
.flip-layer .page * { animation: none !important }
.leaf { position: absolute; inset: 0; transform-style: preserve-3d }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden }
.face.back { transform: rotateY(180deg) }
.face .shade { position: absolute; inset: 0; z-index: 20; opacity: 0 }
.drop { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0 }

/* controls */
.controls { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px }
.turn { white-space: nowrap; border: 1px solid var(--ink); background: var(--page); border-radius: 999px; padding: 7px 18px; font-family: var(--display) }
.turn.primary { background: var(--ink); color: var(--page) }
.turn:disabled { opacity: .35; cursor: default }
.mid { display: flex; align-items: center; gap: 14px }
.snd { border: 1px solid var(--rule); background: var(--page); border-radius: 999px; padding: 4px 10px; display: inline-flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--ink-soft) }
.snd svg { width: 16px; height: 16px }
.snd[aria-pressed="false"] .wave { display: none }
.dots { display: flex; gap: 6px; align-items: center }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule) }
.dots i.on { background: var(--ember) }
.dots i.half { width: 14px; border-radius: 4px }
.pageno { font: .78rem var(--mono); color: var(--ink-soft) }

/* illustration classes */
.f-sky { fill: var(--sky) } .f-sun { fill: var(--sun) } .f-sun-pale { fill: var(--sun-pale) } .f-forest { fill: var(--forest) } .f-leaf { fill: var(--leaf) }
.f-peat { fill: var(--peat) } .f-peat2 { fill: var(--peat-2) } .f-water { fill: var(--water) } .f-ember { fill: var(--ember) } .f-ember2 { fill: var(--ember-2) }
.f-smoke { fill: var(--smoke) } .f-haze { fill: var(--haze) } .f-ash { fill: var(--ash) } .f-plane { fill: var(--plane) } .f-tea { fill: var(--tea) } .s-ripple { stroke: var(--tea-hi) } .f-vbad { fill: var(--vbad) } .f-ink { fill: var(--ink) } .f-page { fill: var(--page) } .f-gold { fill: var(--gold) }
.s-ink { stroke: var(--ink) }
.wobble { filter: url(#wobble) }
.drift { animation: drift 16s linear infinite }
.drift.b { animation-duration: 22s; animation-delay: -8s }
.drift.c { animation-duration: 19s; animation-delay: -4s }
@keyframes drift { 0% { transform: translateX(-60px); opacity: 0 } 15% { opacity: .75 } 85% { opacity: .55 } 100% { transform: translateX(420px); opacity: 0 } }
.flick { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 1.1s ease-in-out infinite alternate }
.flick.b { animation-delay: -.5s; animation-duration: .9s }
@keyframes flick { 0% { transform: scale(.92, .82) skewX(-5deg) } 50% { transform: scale(1.04, 1.06) skewX(2deg) } 100% { transform: scale(.97, 1.14) skewX(5deg) } }
.flap { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .7s ease-in-out infinite alternate }
@keyframes flap { from { transform: scaleY(1) } to { transform: scaleY(-.6) } }
.glide { animation: glide 9s ease-in-out infinite alternate }
@keyframes glide { from { transform: translate(0, 0) } to { transform: translate(60px, -14px) } }
.pulse { animation: pulse 1.6s ease-in-out infinite alternate }
@keyframes pulse { from { opacity: .35 } to { opacity: 1 } }

/* cover */
.cover h1 { font-size: clamp(3rem, 9vh, 6rem); letter-spacing: -.01em }
.cover .lede { font-size: 1.1rem }
.cover .start { align-self: flex-start }

/* forest markers */
.marker { cursor: pointer }
.marker circle { fill: var(--page); stroke: var(--ember); stroke-width: 2.5 }
.marker text { fill: var(--ember); font: 700 15px var(--mono); text-anchor: middle; pointer-events: none }
.marker:hover circle, .marker:focus-visible circle, .marker[aria-pressed="true"] circle { fill: var(--ember) }
.marker[aria-pressed="true"] text, .marker:hover text { fill: var(--page) }
.marker:focus, .marker:focus-visible { outline: none }
.marker:focus-visible circle { stroke-width: 4 }
.factbox { flex: none; border-left: 3px solid var(--ember); padding: 2px 4px 2px 14px; height: 9.5em; overflow-y: auto; scrollbar-width: thin }
.factbox h3 { margin-bottom: 2px }

/* peat */
input[type=range] { width: 100%; accent-color: var(--ember) }
.risk { display: inline-block; font: 600 .82rem var(--mono); padding: 3px 11px; border-radius: 999px; color: var(--page) }
.peat-ctl { flex: none; display: flex; flex-direction: column; gap: 6px }

/* scale */
.big { font: 400 clamp(2.6rem, 7vh, 4.4rem)/1 var(--display); color: var(--ember) }
.squares { display: flex; flex-wrap: wrap; gap: 4px }
.unit-box { flex: none; background: var(--paper); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px }
.unit-box .chips { flex-wrap: wrap; overflow: visible }
.result { flex: none; display: flex; flex-direction: column; gap: 2px; padding-top: 4px }
.prov-table { flex: none; width: 100%; border-collapse: collapse; font-size: .84rem }
.prov-table th { text-align: left; font: 600 .7rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); padding: 0 0 4px; border-bottom: 1px solid var(--rule) }
.prov-table td { padding: 5px 0; border-bottom: 1px solid var(--rule) }
.prov-table th:not(:first-child), .prov-table td.mono { text-align: right; font-variant-numeric: tabular-nums }
.prov-table .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px }
.sq-panel { flex: none; background: var(--paper); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px }
.sq-panel .squares { gap: 5px }
.sq-panel .sq { width: 24px; height: 24px }
.unit-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.unit-pick select { font: inherit; font-size: .95rem; padding: 6px 30px 6px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--page); color: var(--ink); max-width: 100%;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat }
.big { font-size: clamp(2rem, 5.6vh, 3.6rem) }
.sq { width: 18px; height: 18px; border-radius: 3px 5px 4px 6px; background: var(--rule); position: relative; overflow: hidden }
.sq i { position: absolute; top: 0; bottom: 0 }
svg text { fill: var(--ink-soft); font: 11px var(--mono) }
.bar { cursor: pointer; opacity: .5; transition: opacity .15s }
.bar:hover { opacity: .8 }
.bar.on { opacity: 1 }
.bar:focus-visible { outline: none; opacity: .9 }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font: .74rem var(--mono); color: var(--ink-soft) }
.legend span { display: inline-flex; align-items: center; gap: 5px }
.legend b { width: 10px; height: 10px; border-radius: 50%; display: inline-block }

/* map */
.map-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: clamp(40px, 5vw, 80px) }
.map-grid .col.a { overflow: visible }
.map-grid.full .col.b { padding-right: 4px }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none }
.chips::-webkit-scrollbar { display: none }
.chip { flex: none; border: 1px solid var(--rule); background: var(--page); border-radius: 999px; padding: 3px 11px; font-size: .8rem; color: var(--ink-soft) }
.chip[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--page) }
.map-wrap { position: relative; flex: 1 1 auto; min-height: 150px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--sea); touch-action: pan-y }
#map { position: absolute; inset: 0; width: 100%; height: 100% }
.sea { fill: var(--sea) }
.land-id { fill: var(--land); stroke: var(--coast); stroke-width: .6; vector-effect: non-scaling-stroke }
.land-other { fill: var(--land-other); stroke: var(--coast); stroke-width: .4; vector-effect: non-scaling-stroke; opacity: .8 }
.hs { stroke: var(--ember); stroke-width: 1.6; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; opacity: .28 }
.fl { pointer-events: auto }
.city { stroke: var(--page); vector-effect: non-scaling-stroke; stroke-width: 1.2; cursor: pointer }
.city.sel { stroke: var(--ink); stroke-width: 2.5 }
.stn { fill: var(--page); stroke-width: 3; vector-effect: non-scaling-stroke; cursor: pointer }
.stn-box { background: var(--paper); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: .82rem }
.stn-box .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--ink-soft); background: var(--page) }
.map-foot { flex: none; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: center }
.toggle { display: inline-flex; gap: 5px; align-items: center; font-size: .82rem }
.toggle input { accent-color: var(--ember); width: 15px; height: 15px; margin: 0 }
.search { position: relative; flex: none }
.search input { width: 100%; font: inherit; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--page); color: var(--ink) }
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px; background: var(--page); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); max-height: 240px; overflow-y: auto }
.sugg li { padding: 6px 10px; border-radius: 7px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: .9rem }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--paper) }
.sugg small { color: var(--ink-soft) }
.mini { flex: none; display: flex; align-items: center; gap: 8px; font-size: .88rem }
.mini button { margin-left: auto; border: 1px solid var(--ink); background: none; border-radius: 999px; padding: 2px 10px; font-size: .8rem }
.card { border: 1px solid var(--rule); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--page); flex: none }
.card .read { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px }
.card .val { font: 400 2.6rem/1 var(--display) }
.pill { font: 600 .8rem var(--mono); padding: 3px 10px; border-radius: 999px; color: var(--page) }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.stats div { background: var(--paper); border-radius: 8px; padding: 6px 9px; display: flex; flex-direction: column }
.stats b { font: 500 1.05rem var(--mono) }
.stats span { font-size: .72rem; color: var(--ink-soft) }
.advice { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 3px; font-size: .9rem }
.regions { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: center; font-size: .82rem }
.regions .tr { height: 7px; background: var(--rule); border-radius: 4px; overflow: hidden }
.regions .tr i { display: block; height: 100%; background: var(--ember) }
.note { font-size: .75rem; color: var(--ink-soft) }
.explain { font-size: .82rem; background: var(--paper); border-radius: 8px; padding: 6px 10px }
.explain summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; gap: 6px }
.explain summary::-webkit-details-marker { display: none }
.explain summary::before { content: "i"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--page); font: 700 .7rem/1 var(--mono) }
.explain p { margin: 6px 0; color: var(--ink-soft) }
.ispu-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-top: 4px }
.ispu-scale span { color: var(--page); border-radius: 5px; padding: 4px 5px; font-size: .66rem; line-height: 1.2; display: flex; flex-direction: column }
.ispu-scale b { font: 600 .68rem var(--mono) }

/* skies */
.skies { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; flex: 1; min-height: 0; align-content: center }
.skies figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-height: 0 }
.skies svg { width: 100%; max-height: 52vh }
.skies figcaption { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; flex-wrap: wrap }

/* emergency */
.sos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
.sos .n { border: 1.5px solid var(--rule); border-radius: 12px; padding: 9px 12px; display: flex; flex-direction: column; background: var(--page) }
.sos .n.main { border-color: var(--ember); grid-column: span 2 }
.sos a { font: 400 1.8rem/1.1 var(--display); color: var(--ink); text-decoration: none }
.sos .n.main a { color: var(--ember); font-size: 2.4rem }
.sos small { color: var(--ink-soft); font-size: .78rem }
.sos button { align-self: flex-start; margin-top: 2px; border: 0; background: none; padding: 0; font: .72rem var(--mono); color: var(--ink-soft); text-decoration: underline }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px }
.checks label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .92rem }
.checks input { width: 17px; height: 17px; margin-top: 4px; accent-color: var(--ember); flex: none }
.checks input:checked + span { color: var(--ink-soft); text-decoration: line-through }
.sources { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; font-size: .9rem }
.sources a { color: var(--ink) }

.air-badge { font: 600 .7rem var(--mono); padding: 1px 8px; border-radius: 999px; background: var(--rule); color: var(--ink-soft); vertical-align: 1px }
.air-badge[data-live="true"] { background: var(--good); color: var(--page) }
.ties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.ties > div { background: var(--paper); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px }
.ties h3 { font-size: .98rem }
@media (max-width: 1100px) { .ties { grid-template-columns: 1fr } }
.srcs { font-size: .72rem; color: var(--ink-soft); white-space: normal }
.src { color: inherit; text-decoration: underline; text-underline-offset: 2px }
.src::after { content: " ↗"; font-size: .9em }
.src:hover { color: var(--ember) }
/* 2026 timeline */
.tl { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; display: flex; flex-direction: column; gap: 2px }
.tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(var(--mid), var(--ember) 45%, var(--vbad)) }
.tl button { width: 100%; text-align: left; border: 0; background: none; padding: 3px 8px; border-radius: 8px; display: grid; grid-template-columns: 7.6em 1fr; gap: 8px; position: relative; font-size: .86rem; line-height: 1.45 }
.tl button::before { content: ""; position: absolute; left: -19px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--page); border: 2.5px solid var(--ember) }
.tl button:hover, .tl button[aria-expanded="true"] { background: var(--paper) }
.tl button[aria-expanded="true"]::before { background: var(--ember) }
.tl .d { font: 500 .78rem/1.6 var(--mono); color: var(--ember); white-space: nowrap; align-self: start }
.tl .more { margin: 0 0 6px calc(6.54rem + 16px); font-size: .82rem; line-height: 1.5; color: var(--ink-soft) }
.tl li.now .d { color: var(--vbad) }
.tl .tag { font: 600 .66rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--water); border: 1px solid currentColor; border-radius: 999px; padding: 2px 6px; margin-left: 4px; vertical-align: 2px; white-space: nowrap }
.tl li.aid button::before { border-color: var(--water) }
.tl li.aid button[aria-expanded="true"]::before { background: var(--water) }
#kal-mini { flex: none; align-self: flex-start; display: block; height: min(34vh, 34vw); aspect-ratio: 11 / 9; width: auto; max-width: 100%; border-radius: 10px }
#stats2026 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1100px) { #stats2026 { grid-template-columns: 1fr 1fr } }
@media (max-width: 760px) { #kal-mini { height: auto; width: 100%; align-self: stretch } }
/* quiz */
.quiz { display: flex; flex-direction: column; gap: 8px }
.q { border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 6px }
.q p { font-size: .92rem }
.q .opts { display: flex; gap: 6px }
.q .opts button { border: 1.5px solid var(--ink); background: var(--page); border-radius: 999px; padding: 2px 12px; font-size: .82rem }
.q .ans { font-size: .82rem; color: var(--ink-soft) }
.q .ans b { color: var(--ink) }
#beam, #pan-l, #pan-r { transition: transform .8s cubic-bezier(.3,1.4,.5,1) }

/* phones: one side of the book at a time */
@media (max-width: 760px) {
  body { padding: 0 10px }
  .left-top { display: none }
  .ribbons { grid-template-columns: minmax(0, 1fr); height: 46px }
  .tabs { justify-content: flex-start; padding: 0 10px }
  .bm { font-size: .72rem; padding: 12px 6px 16px; height: 36px; min-width: 24px }
  .tabs { gap: 3px }
  .bm[aria-current="true"] { height: 46px }
  .page { border-radius: 4px 12px 12px 4px; padding: 16px 16px 10px }
  .page::before { left: 0; width: 22px; transform: none; background: linear-gradient(90deg, var(--shade), transparent) }
  .spread, .map-grid { grid-template-columns: minmax(0, 1fr) }
  .page[data-show="a"] [data-side="b"], .page[data-show="b"] [data-side="a"] { display: none !important }
  .cover .spread { grid-template-rows: auto minmax(0, 1fr); gap: 14px }
  .cover .art > svg { flex: none; width: 100%; height: auto }
  .cover .story { justify-content: flex-start }
  .cover h1 { font-size: 2.8rem }
  .mobile-only { display: flex !important }
  .page.flat::before { display: block }
  .desk-only { display: none !important }
  .controls { padding-top: 10px }
  .turn { padding: 6px 13px; font-size: .9rem }
  .snd .lbl { display: none }
  .mid { gap: 8px }
  .dots { display: none }
  .sos .n.main { grid-column: 1 / -1 }
  .skies { grid-template-columns: 1fr; }
  .skies svg { max-height: 26vh }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }