/* Cât de cald poate duce un om — one nocturnal, heat-lit world, deliberately dark.
   The page ground shifts per chapter (--bg from JS); heat colour comes from the gauge. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-normal-latin.woff2?v=48282a415e") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-normal-latin-ext.woff2?v=f120089b94") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-latin.woff2?v=01817351be") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("fonts/newsreader-latin-ext.woff2?v=cbca001188") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin.woff2?v=e384e31812") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin-ext.woff2?v=89e1d530cc") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibmplexmono-400-lat.woff2?v=08949f728d") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibmplexmono-400-ext.woff2?v=6bc0f226a5") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
  color-scheme: dark;
  --bg: #07080c;
  --ink: #07080c;
  --bone: #efe8dc;
  --bone-2: #c4bcae;
  --dust: #9a968f;
  --ember: #f08a3c;       /* the colour of heat */
  --cool: #7fb6d9;        /* the colour of what cools you */
  --line: rgba(239, 232, 220, 0.16);
  --line-soft: rgba(239, 232, 220, 0.22);
  --card: rgba(8, 9, 13, 0.82);
  --gauge-w: 96px;
  --gutter: max(16px, 4vw);
  --top: 48px;
  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-mono: "Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--bone);
  font-family: var(--f-body); font-size: 1.15rem; line-height: 1.6;
  transition: background-color 1.2s ease; overflow-x: hidden;
}
::selection { background: var(--ember); color: var(--ink); }
a { color: var(--ember); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
b, strong { font-weight: 600; color: #fff; }
sub { font-size: .7em; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--bone); color: var(--ink); padding: 8px 14px; font-family: var(--f-mono); font-size: .8rem; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--top);
  display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter) 0 calc(var(--gauge-w) + 4px);
  background: linear-gradient(rgba(4,5,8,.88), rgba(4,5,8,.55) 70%, rgba(4,5,8,0));
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
}
.topbar a { color: var(--bone-2); text-decoration: none; white-space: nowrap; }
.topbar a:hover { color: var(--bone); }
.topbar .home { letter-spacing: .1em; }
.topnav { flex: 1; min-width: 0; display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a[aria-current="true"] { color: var(--ember); }
.chip { border: 1px solid var(--line-soft); border-radius: 99px; padding: 5px 10px; min-width: 40px; text-align: center; }
@media (max-width: 860px) {
  .topbar { padding-left: var(--gutter); }
  .topnav { display: none; }
  .topbar .home { flex: 1; }
}

/* ---------------------------------------------------------------- the wet-bulb gauge */
.gauge {
  position: fixed; left: 0; top: var(--top); bottom: 0; width: var(--gauge-w); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 0 20px 18px; pointer-events: none;
  background: linear-gradient(90deg, rgba(4,5,8,.8), rgba(4,5,8,.4) 60%, rgba(4,5,8,0));
}
.gauge-readout { font-family: var(--f-mono); font-size: .68rem; color: var(--bone); line-height: 1.25; text-shadow: 0 0 12px #000; }
.gauge-readout .lab { display: block; color: var(--dust); letter-spacing: .08em; text-transform: uppercase; font-size: .6rem; }
.gauge-readout .val { font-size: 1.2rem; letter-spacing: 0; }
.gauge-readout .unit { color: var(--bone-2); }
.gauge-track { --k: 0; position: relative; flex: 1; width: 6px; margin: 14px 0 0 8px; border-radius: 3px; background: rgba(239,232,220,.08); border: 1px solid var(--line); }
.gauge-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--k) * 100%); border-radius: 3px; }
.gauge-bulb { position: absolute; left: 50%; bottom: -14px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 18px currentColor; }
.gauge-marker { position: absolute; left: 50%; bottom: calc(var(--k) * 100%); width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 16px rgba(255,160,80,.8); }
.gauge-tick { --k: 0; position: absolute; left: 10px; bottom: calc(var(--k) * 100%); width: 5px; height: 1px; background: var(--dust); }
.gauge-tick span { position: absolute; left: 9px; top: -.62em; white-space: nowrap; font-family: var(--f-mono); font-size: .58rem; color: var(--dust); }
.gauge-tick.passed span { color: var(--bone-2); }
.gauge-tick.key { width: 14px; background: var(--bone); height: 2px; }
.gauge-tick.key span { left: 18px; color: var(--bone); font-size: .6rem; max-width: 7em; white-space: normal; line-height: 1.15; top: -.55em; }
.gauge-you { --k: 0; position: absolute; left: -9px; bottom: calc(var(--k) * 100%); width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid var(--cool); margin-bottom: -6px; }
@media (max-width: 860px) {
  .gauge { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 58px; flex-direction: row; align-items: center; gap: 12px;
    padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px)) var(--gutter); background: linear-gradient(0deg, rgba(4,5,8,.92), rgba(4,5,8,.6) 70%, rgba(4,5,8,0)); }
  .gauge-readout { min-width: 64px; }
  .gauge-readout .lab { font-size: .52rem; }
  .gauge-track { height: 6px; width: auto; flex: 1; margin: 0 20px 0 0; }
  .gauge-fill { top: 0; bottom: 0; left: 0; width: calc(var(--k) * 100%); height: auto; background: linear-gradient(to right, #4678be, #f08a3c) !important; }
  .gauge-bulb { display: none; }
  .gauge-marker { bottom: 50%; left: calc(var(--k) * 100%); margin: 0 0 -6px -6px; }
  .gauge-tick { bottom: auto; top: 8px; left: calc(var(--k) * 100%); width: 1px; height: 4px; }
  .gauge-tick span { left: -.7em; top: 5px; font-size: .5rem; }
  .gauge-tick:not(.key):nth-child(odd) span { display: none; }
  .gauge-tick.key { width: 2px; height: 10px; top: -2px; }
  .gauge-tick.key span { display: none; }
  .gauge-you { bottom: auto; top: -14px; left: calc(var(--k) * 100%); margin: 0 0 0 -6px; border: 6px solid transparent; border-top: 8px solid var(--cool); }
}

/* ---------------------------------------------------------------- scenes */
.scene { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 14vh var(--gutter) 14vh calc(var(--gauge-w) + 3vw); }
.step[data-side="right"] { justify-content: flex-end; }
.step[data-side="center"] { justify-content: center; }
.step:last-child { min-height: 130vh; align-items: flex-start; padding-top: 26vh; }
.card {
  pointer-events: auto; max-width: 30rem; background: var(--card); border: 1px solid var(--line);
  padding: 1.35rem 1.5rem; border-radius: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.card p { margin: 0 0 .8em; }
.card p:last-child { margin-bottom: 0; }
.card .stamp { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; color: var(--ember); text-transform: uppercase; margin-bottom: .7em; }
.chapter-num { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .2em; color: var(--dust); margin: 0 0 .3em; }
.card h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
.card h2 a.anchor { color: inherit; text-decoration: none; }
.card h2 a.anchor:hover::after { content: " #"; color: var(--dust); }
.card .big { font-family: var(--f-display); font-size: 2.3rem; line-height: 1; margin: .1em 0 .25em; color: #fff; }
@media (max-width: 860px) {
  .step, .step[data-side] { justify-content: center; padding: 12vh var(--gutter) 18vh; }
  .card { max-width: 34rem; padding: 1.1rem 1.15rem; font-size: 1.05rem; }
}

/* hero */
.hero { justify-content: center !important; text-align: center; }
.hero-inner { max-width: 44rem; pointer-events: auto; text-shadow: 0 2px 30px rgba(0,0,0,.9); }
.kicker { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ember); }
h1 { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.5rem, 7.2vw, 5.6rem); line-height: 1.02; letter-spacing: -.02em; margin: .2em 0 .35em; }
.lede { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--bone); max-width: 36rem; margin: 0 auto; }
.cue { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; color: var(--dust); margin-top: 2.2rem; text-transform: uppercase; }
.cue::after { content: ""; display: block; width: 1px; height: 46px; margin: 12px auto 0; background: linear-gradient(var(--dust), transparent); }

/* HUDs over the stage */
.hud { position: absolute; right: var(--gutter); top: calc(var(--top) + 14px); text-align: right; font-family: var(--f-mono); pointer-events: none; text-shadow: 0 0 14px #000; }
.hud .l { font-size: .64rem; letter-spacing: .1em; color: var(--dust); text-transform: uppercase; margin: 0; }
.hud .v { font-size: 1.5rem; color: #fff; margin: .1em 0 .5em; }
@media (max-width: 860px) { .hud { top: calc(var(--top) + 6px); } .hud .v { font-size: 1.1rem; } }

/* controls */
.ctl { pointer-events: auto; margin-top: 1rem; font-family: var(--f-mono); font-size: .78rem; }
.ctl label { display: flex; justify-content: space-between; color: var(--bone-2); margin: .6em 0 .15em; }
.ctl output { color: #fff; }
.ctl input[type=range] { width: 100%; accent-color: var(--ember); height: 28px; }
.ctl .res { margin-top: .9em; padding-top: .8em; border-top: 1px solid var(--line); font-family: var(--f-body); font-size: 1rem; }
.ctl .res b { font-family: var(--f-mono); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6em; }
.presets button, .city-pick select, .age button {
  font: inherit; font-size: .72rem; color: var(--bone); background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
  border-radius: 99px; padding: 8px 12px; cursor: pointer; min-height: 36px;
}
.presets button[aria-pressed="true"], .age button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
@media (pointer: coarse) { .presets button, .age button, .city-pick select { min-height: 44px; } }
.city-pick { pointer-events: auto; }
.city-pick select { border-radius: 6px; width: 100%; font-size: .95rem; font-family: var(--f-body); padding: 10px 12px; margin: .4rem 0 .8rem; background: #111318; }
.city-say { font-size: 1.02rem; }
.city-say .n { font-family: var(--f-mono); color: #fff; }

/* the prose sections after the scroll story */
.block { position: relative; z-index: 3; max-width: 44rem; margin: 0 auto; padding: 4rem var(--gutter) 2rem calc(var(--gutter)); }
@media (min-width: 861px) { .block { padding-left: calc(var(--gauge-w) + 2rem); max-width: calc(44rem + var(--gauge-w)); } }
.block h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: 0 0 .6em; }
.block h2 a.anchor { color: inherit; text-decoration: none; }
.block h3 { font-family: var(--f-mono); font-weight: 400; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); margin: 2.2em 0 .8em; }
.do-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.do-list li { border-left: 2px solid var(--cool); padding: .2em 0 .2em 1em; }
.do-list li b { display: block; }
.srcs, .related { padding-left: 1.1em; font-size: .95rem; color: var(--bone-2); }
.srcs li, .related li { margin: .45em 0; }
.srcs a { word-break: break-word; }
.method { color: var(--bone-2); font-size: 1rem; }
.stamp-pub { font-family: var(--f-mono); font-size: .72rem; color: var(--dust); }
.foot { position: relative; z-index: 3; text-align: center; font-family: var(--f-mono); font-size: .74rem; color: var(--dust); padding: 2rem var(--gutter) 6rem; }
.foot a { color: var(--bone-2); }
@media (min-width: 861px) { .foot { padding-left: var(--gauge-w); } }

/* share */
.share { margin: 1.4rem 0 0; }
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-row .lab { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; color: var(--dust); margin-right: 4px; }
.share-row a, .share-row button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-soft); background: transparent; color: var(--bone); cursor: pointer; padding: 0; }
.share-row a:hover, .share-row button:hover, .share-row a:focus-visible, .share-row button:focus-visible { color: var(--ember); border-color: var(--ember); }
@media (pointer: coarse) { .share-row a, .share-row button { width: 44px; height: 44px; } }
.share-status { font-family: var(--f-mono); font-size: .72rem; color: var(--dust); min-height: 1.2em; margin: .4em 0 0; }

/* fallbacks: text still reads if canvases are off */
.no-js .stage canvas { display: none; }
@media (prefers-reduced-motion: reduce) { .cue::after { display: none; } }

/* night legend + coda */
.dots-legend { position: absolute; left: calc(var(--gauge-w) + 3vw); bottom: 24px; list-style: none; margin: 0; padding: 0; font-family: var(--f-mono); font-size: .66rem; color: var(--bone-2); display: flex; gap: 14px; flex-wrap: wrap; pointer-events: none; opacity: var(--legend, 0); transition: opacity .6s; }
.dots-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
@media (max-width: 860px) { .dots-legend { left: var(--gutter); right: var(--gutter); bottom: 70px; gap: 8px 12px; } }
.coda { font-family: var(--f-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.35; margin: 2.4rem 0 0; color: #fff; }
@media (max-width: 860px) {
  /* on phones the scene draws in the top half; cards with controls sit below it */
  .scene[data-scene="city"] .step, .scene[data-scene="wet"] .step:last-child, .scene[data-scene="limit"] .step, .scene[data-scene="night"] .step { align-items: flex-end; padding-bottom: 76px; }
  .scene[data-scene="city"] .step:last-child, .scene[data-scene="wet"] .step:last-child { min-height: 100svh; padding-top: 12vh; }
}
@media (max-width: 860px) { #to-top { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; } }