/* Headroom website: landing page and the "all busy" page. Tokens come from ui/theme.css, shared with every dashboard.
   Material: frosted glass panes over the shared backdrop (theme.css). Every pane catches a sheen that moves with
   its place on screen (--hr-p, written by ui/motion.js), so scrolling reads like tilting a sheet of glass. */
:root { --warn: var(--s-trim); --off: var(--s-off); --grid: var(--s-grid); --local: var(--s-backup); }
/* the landing holds little small text, so its panes can be clearer than the dashboards' */
body[data-lens-mode="strong"] { --glass: rgba(255, 255, 255, 0.46); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- glass panes ---------- */
.stepcol, .ladder li, .loop, .tablewrap, .shot, .card, .lenti-card, .nav {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }
.stepcol, .ladder li, .loop, .tablewrap, .shot, .card { position: relative; border-radius: var(--r-lg); isolation: isolate; }
/* the sheen: a soft band of light that slides across a pane as it travels up the screen (behind the pane's content) */
.stepcol::after, .ladder li::after, .loop::after, .shot::after, .card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%) no-repeat;
  background-size: 320% 100%; background-position: calc(var(--hr-p, 0.5) * 100%) 0; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, 0.46); border-width: 0 0 1px; border-radius: 0;
  box-shadow: inset 0 -1px 0 var(--glass-rule); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.nav nav { display: flex; align-items: center; gap: 28px; font-size: var(--fs-sm); font-weight: 600; }
.nav nav a:not(.hr-btn) { text-decoration: none; color: var(--muted); transition: color var(--dur-fast, 160ms) ease; }
.nav nav a:not(.hr-btn):hover { color: var(--ink); }
.nav-cta { min-height: 38px; padding: 9px 16px; font-size: var(--fs-sm); }
@media (max-width: 760px) { .nav nav a:not(.keep):not(.nav-cta) { display: none; } .nav nav { gap: 16px; } }
@media (max-width: 420px) { .nav nav .keep { display: none; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 96px; }
.kicker { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow-lo); padding: 6px 12px; border-radius: var(--r-pill); margin: 0 0 20px; }
h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.035em; margin: 0 0 20px; font-weight: 800; }
.lede { font-size: var(--fs-md); color: var(--muted); margin: 0 0 28px; max-width: 34em; }
.lede strong { color: var(--ink); font-weight: 700; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.slots { font-size: var(--fs-sm); color: var(--muted); margin: 16px 0 0; display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; }
.dot.ok { background: var(--s-limit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-limit) 20%, transparent); }
.dot.full { background: var(--s-off); }
.hero-art { margin: 0; }
.shot figcaption { font-size: var(--fs-xs); color: var(--muted); padding: 10px 4px 2px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 56px; } }
/* on a desktop screen the hero holds still for a short stretch of scroll while the print turns (see .lenti) */
@media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .hero-pin { height: calc(100vh - 64px + var(--pin, 380px)); }
  .hero { position: sticky; top: 64px; min-height: calc(100vh - 64px); align-content: center; padding-top: 24px; padding-bottom: 40px; }
}

/* ---------- the lenticular print ----------
   Two pictures of the same town share one card: .lenti-a is a normal day, .lenti-b the shutoff (dark, with only the
   critical sites lit). motion.js sets --flip from 0 to 1 as the hero scrolls up; .lenti-b shows through vertical
   strips whose width is --flip of each 7 px lens, exactly how a lenticular sheet interleaves its two images.
   --mid peaks halfway through the turn: the card tilts and the lens ridges catch the light only then. */
.lenti { perspective: 1400px; }
.lenti-card { padding: 10px; border-radius: 22px; transform-origin: 50% 60%;
  transform: rotateY(calc(var(--mid, 0) * -8deg)) rotateX(calc(var(--mid, 0) * 2deg)) scale(calc(1 - var(--mid, 0) * 0.015)); }
.lenti-print { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--blush); }
.lenti-print img { display: block; width: 100%; height: auto; }
.lenti-b, .lenti-b > *, .lenti-sheen { position: absolute; inset: 0; width: 100%; height: 100%; }
.lenti-b { --lw: calc(var(--flip, 0) * 7px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 var(--lw), transparent var(--lw) 7px);
  mask-image: repeating-linear-gradient(90deg, #000 0 var(--lw), transparent var(--lw) 7px); }
.lenti.at-a .lenti-b { visibility: hidden; }
.lenti.at-b .lenti-b { -webkit-mask-image: none; mask-image: none; }
.lenti-dark { filter: grayscale(1) brightness(0.6) contrast(1.08); }
.lenti-tint { background: rgba(40, 30, 112, 0.42); mix-blend-mode: multiply; }
/* the sites on backup power during the recorded shutoff (pages/src/rec_headroom.json): hospital, Oak St homes (most of
   the cut), medical homes, cooling hub, 911 dispatch and the fire station. Pine St homes and the substation go dark. */
.lenti-lit { filter: saturate(1.12) brightness(1.04);
  -webkit-mask-image: radial-gradient(ellipse 7.1% 11.5% at 51.0% 18.7%, #000 62%, transparent),
    radial-gradient(ellipse 6.2% 10.8% at 62.9% 19.3%, #000 62%, transparent),
    radial-gradient(ellipse 5.8% 13.4% at 74.0% 17.5%, #000 62%, transparent),
    radial-gradient(ellipse 10.8% 18.7% at 87.8% 14.5%, #000 62%, transparent),
    radial-gradient(ellipse 8.6% 12.5% at 58.0% 64.7%, #000 62%, transparent),
    radial-gradient(ellipse 6.0% 12.9% at 83.4% 64.2%, #000 62%, transparent);
  mask-image: radial-gradient(ellipse 7.1% 11.5% at 51.0% 18.7%, #000 62%, transparent),
    radial-gradient(ellipse 6.2% 10.8% at 62.9% 19.3%, #000 62%, transparent),
    radial-gradient(ellipse 5.8% 13.4% at 74.0% 17.5%, #000 62%, transparent),
    radial-gradient(ellipse 10.8% 18.7% at 87.8% 14.5%, #000 62%, transparent),
    radial-gradient(ellipse 8.6% 12.5% at 58.0% 64.7%, #000 62%, transparent),
    radial-gradient(ellipse 6.0% 12.9% at 83.4% 64.2%, #000 62%, transparent); }
.lenti-glow { mix-blend-mode: screen;
  background: radial-gradient(ellipse 7.9% 14.1% at 51.0% 18.7%, rgba(255, 206, 128, 0.36), transparent),
    radial-gradient(ellipse 6.9% 13.1% at 62.9% 19.3%, rgba(255, 206, 128, 0.36), transparent),
    radial-gradient(ellipse 6.5% 16.3% at 74.0% 17.5%, rgba(255, 206, 128, 0.36), transparent),
    radial-gradient(ellipse 12.0% 22.8% at 87.8% 14.5%, rgba(255, 206, 128, 0.36), transparent),
    radial-gradient(ellipse 9.6% 15.2% at 58.0% 64.7%, rgba(255, 206, 128, 0.36), transparent),
    radial-gradient(ellipse 6.7% 15.7% at 83.4% 64.2%, rgba(255, 206, 128, 0.36), transparent); }
.lenti-sheen { pointer-events: none; opacity: var(--mid, 0); mix-blend-mode: soft-light;
  background: linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, 0.9) 46%, rgba(255, 255, 255, 0.2) 54%, transparent 68%) no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 7px);
  background-size: 260% 100%, auto; background-position: calc((1 - var(--flip, 0)) * 100%) 0, 0 0; }

.lenti figcaption { display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px 0; font-size: var(--fs-xs); color: var(--muted); }
.lenti-switch { position: relative; flex: none; display: inline-grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-pill); padding: 3px;
  background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow-lo);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.lenti-switch button { position: relative; z-index: 1; font: 700 var(--fs-xs)/1.2 var(--font); padding: 5px 11px; border: 0; border-radius: var(--r-pill);
  background: none; text-align: center; white-space: nowrap; color: var(--muted); cursor: pointer; transition: color 200ms ease; }
.lenti-switch button:hover { color: var(--ink); }
.lenti-switch button:first-of-type, .lenti.is-flipped .lenti-switch button + button { color: var(--on-primary); }
.lenti.is-flipped .lenti-switch button:first-of-type { color: var(--muted); }
.lenti-switch i { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-pill); background: var(--primary);
  transition: transform 200ms var(--ease-out, ease-out); box-shadow: 0 4px 12px -4px rgba(76, 61, 168, 0.6); }
/* the switch reports a state (it flips with the labels at the half-way point) while the print itself turns continuously */
.lenti.is-flipped .lenti-switch i { transform: translateX(100%); }
.lenti-cap { display: grid; padding-top: 3px; line-height: 1.5; }
.lenti-cap > span { grid-area: 1 / 1; }
.cap-a { --k: clamp(0, calc((0.5 - var(--flip, 0)) * 6), 1); opacity: var(--k); filter: blur(calc((1 - var(--k)) * 3px)); }
.cap-b { --k: clamp(0, calc((var(--flip, 0) - 0.5) * 6), 1); opacity: var(--k); filter: blur(calc((1 - var(--k)) * 3px)); color: var(--ink); }
@media (max-width: 520px) { .lenti figcaption { flex-direction: column; } .lenti-card { padding: 6px; border-radius: 18px; } }

/* ---------- sections ---------- */
section.band { padding: 88px 0; scroll-margin-top: 64px; }
h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; margin: 0 0 12px; line-height: 1.12; font-weight: 800; }
h3 { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.sub { color: var(--muted); margin: 0 0 36px; max-width: 44em; font-size: var(--fs-md); }
@media (max-width: 700px) { section.band { padding: 60px 0; } }

/* one storm: three panes that arrive as a wave */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stepcol { padding: 28px; }
.stepcol p { margin: 0; color: var(--muted); font-size: var(--fs-base); }
.step { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.step i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; gap: 14px; } }

/* priority: one glass slat per tier */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; gap: 32px; } }
.ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ladder li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 13px 18px; font-weight: 600; border-radius: var(--r-md);
  transition: background-color var(--dur, 260ms) var(--ease-out, ease); }
.ladder li:hover { background: var(--glass-strong); }
.ladder .t { font-size: var(--fs-xs); font-weight: 800; color: var(--primary); background: var(--primary-soft); border-radius: var(--r-pill); text-align: center; padding: 4px 0; }
.ladder li:first-child .t { background: var(--primary); color: var(--on-primary); }
.ladder .w { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); text-align: right; }
.loops { display: grid; gap: 14px; padding-top: 8px; }
.loop { padding: 22px 24px; }
.loop p { margin: 0; color: var(--muted); }
.kv { font-size: var(--fs-xs); font-weight: 700; color: var(--primary); margin-top: 10px !important; letter-spacing: 0.01em; }

/* results */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
th, td { padding: 14px 16px; text-align: right; border-bottom: 1px solid var(--glass-rule); white-space: nowrap; vertical-align: top; }
th:first-child, td:first-child { text-align: left; }
thead th { font-size: var(--fs-sm); color: var(--ink); font-weight: 700; background: rgba(255, 255, 255, 0.45); vertical-align: bottom; }
th small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--faint); }
tbody th { font-weight: 700; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
td .cell { display: block; font-size: var(--fs-md); font-weight: 600; }
td .bar { display: block; height: 4px; margin-top: 8px; margin-left: auto; width: 100%; min-width: 72px; border-radius: 2px; background: rgba(76, 61, 168, 0.08); overflow: hidden; }
td .bar i { display: block; height: 100%; margin-left: auto; background: var(--faint); border-radius: 2px; }
td.best .cell { color: var(--primary); font-weight: 800; }
td.best .bar i { background: var(--primary); }
tr.us { background: rgba(76, 61, 168, 0.06); }
tr.us th { color: var(--primary); }
.results-lead { font-size: var(--fs-lg); line-height: 1.5; margin: -12px 0 28px; max-width: 44em; }
.results-lead b { font-weight: 800; color: var(--primary); }
.note { font-size: var(--fs-xs); color: var(--muted); margin-top: 12px; }

/* what is real */
.real { align-items: start; }
.shot { margin: 0; padding: 8px; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.real-text { text-align: center; margin-top: 56px; }
.real-text .sub { margin-left: auto; margin-right: auto; }

footer { box-shadow: inset 0 1px 0 var(--glass-rule); padding: 28px 0 40px; color: var(--muted); font-size: var(--fs-sm); }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- "all simulations busy" page ---------- */
.center { min-height: calc(100vh - 65px); display: grid; place-items: center; text-align: center; padding: 40px 16px; }
.card { padding: 36px 32px; }
.center .card { max-width: 520px; }
.center h1 { font-size: 28px; letter-spacing: -0.025em; }
.center .sub { margin: 0 auto 20px; font-size: var(--fs-base); }
.center .slots { margin: 4px 0 24px; justify-content: center; }

/* results on a phone: keep the policy names pinned while the numbers scroll, and show that they scroll */
@media (max-width: 700px) {
  #results tbody th small { display: none; }
  #results th, #results td { padding: 10px; }
  #results td .bar { min-width: 44px; }
  #results th:first-child, #results td:first-child { position: sticky; left: 0; z-index: 1; white-space: normal; min-width: 112px; background: var(--surface); }
  #results thead th:first-child { background: #F7F6FA; }
  #results tr.us th { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }
  #results .tablewrap { -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.25)); mask-image: linear-gradient(90deg, #000 86%, rgba(0, 0, 0, 0.25)); }
  #results .tablewrap.at-end { -webkit-mask-image: none; mask-image: none; }
}