/*
 * snowdaycalculator.website — the look.
 * A school's changeable-letter sign at five in the morning: the night sky (blue hour), the lit sign
 * face (lamp), the bus-yellow name plate, snow on the ground; the pages are snow-white paper with
 * dark ink. One family for the sign and headings (League Gothic, "SDC Sign"), one for reading
 * (Atkinson Hyperlegible Next, "SDC Text"). Text keeps 7:1 contrast or better on its own panel and
 * is 15 px or more (table headings 14 px).
 * Everything else is built from the sign's own materials: name plates (square corners, a bus-yellow
 * edge), letter tiles (a lamp face in a frame), steel frames (a 1.5 px edge, corners of 8 px or
 * less) and wooden yardsticks. No floating cards: the sign is the only thing with a deep shadow.
 */

@font-face { font-family: "SDC Sign"; src: url(../fonts/sign.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SDC Text"; src: url(../fonts/text.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
	--night: #16233b;
	--night-2: #1d2d4a;
	--night-3: #2b3e62;
	--night-ink: #eaf0f8;
	--night-ink-2: #b9c7da;
	--drift: #f3f6fa;
	--paper: #ffffff;
	--ink: #121c2b;
	--ink-2: #37465a;
	--line: #d3dce7;
	--line-2: #e6ecf3;
	--frame: #c3cedb;
	--field: #66758b;
	--lamp: #fff9ea;
	--lamp-2: #fff1d2;
	--bus: #f2a900;
	--bus-deep: #b07c00;
	--bus-ink: #1b1405;
	--red: #9b1c15;
	--red-mark: #9b1c15;
	--steel: #2b313a;
	--steel-2: #59616b;
	--wood: #e9c98f;
	--wood-ink: #36270b;
	--snow: #ffffff;
	--snow-shade: #c9d6e6;
	--ground: var(--drift);
	--bank: var(--paper);
	--split-open: #4a5568;
	--dot-0: #8d99aa;
	--dot-1: #6da7ec;
	--dot-2: #2a78d6;
	--dot-3: #1c5cab;
	--dot-4: #0d366b;
	--map-land: #e3e9f1;
	--map-edge: #ffffff;
	--map-focus: #cfdbe9;
	--scroll-shade: rgba(18, 28, 43, .34);
	--radius: 6px;
	--font-sign: "SDC Sign", "League Gothic", "Arial Narrow", "Roboto Condensed", sans-serif;
	--font-text: "SDC Text", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--drift: #0f1829;
		--paper: #17233a;
		--ink: #e9eff7;
		--ink-2: #b8c5d7;
		--line: #2c3d5c;
		--line-2: #22314d;
		--frame: #33476a;
		--field: #8596b4;
		--red-mark: #ff9b8f;
		--dot-0: #6f7d93;
		--dot-1: #256abf;
		--dot-2: #3987e5;
		--dot-3: #86b6ef;
		--dot-4: #cde2fb;
		--map-land: #22314d;
		--map-edge: #0f1829;
		--map-focus: #31456b;
		--wood: #d9b97f;
		/* Snow stays snow at night: the ground under the school and the bank on the ZIP box, in moonlight. */
		--ground: #c4d0df;
		--bank: #dfe7f1;
		--scroll-shade: rgba(0, 0, 0, .55);
		color-scheme: dark;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--drift); color: var(--ink); font: 400 17px/1.62 var(--font-text); font-variant-numeric: lining-nums; overflow-wrap: break-word; }
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--bus-deep); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }
/* Focus: a dark ring on paper, a bus-yellow one on the night sky. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.indep :focus-visible, .site-head :focus-visible, .hero :focus-visible, .page-head :focus-visible, .site-foot :focus-visible { outline-color: var(--bus); }
.hero .zip :focus-visible { outline-color: var(--ink); }
.indep a, .site-head a, .hero a, .page-head a, .site-foot a { text-decoration-color: var(--bus); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--bus); color: var(--bus-ink); padding: 10px 14px; border-radius: 4px; font-weight: 700; }
.skip:focus { top: 12px; }
.skip:focus-visible { outline-color: #ffffff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.wrap--mid { max-width: 940px; }
.wrap--narrow { max-width: 760px; }
@media (min-width: 700px) { .wrap { padding: 0 24px; } }

/* ---- Top of the page: the independence line, the name, the menu, on the night sky ---------- */
.indep { background: #0e1828; color: var(--night-ink); font-size: 15px; line-height: 1.4; }
.indep .wrap { padding-top: 7px; padding-bottom: 7px; }
.indep b { color: #ffffff; }
.indep__more { display: none; }
@media (min-width: 760px) { .indep__more { display: inline; } }

.site-head { background: var(--night); color: var(--night-ink); border-bottom: 1px solid var(--night-3); }
.site-head__row { display: flex; align-items: center; gap: 2px 26px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: #ffffff; }
.brand__mark { width: 34px; height: 34px; }
.brand__name { font: 400 27px/1 var(--font-sign); letter-spacing: .04em; text-transform: uppercase; }
.brand__name span { color: var(--bus); }
/* The menu: name plates. The page you are on is lit, with a bus-yellow bar under its name. */
.site-nav { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.site-nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px; text-decoration: none; color: var(--night-ink); font-weight: 600; font-size: 15px; }
.site-nav a:hover { background: var(--night-2); }
/* The menu scrolls, so its box would cut a ring drawn outside a link: the ring goes just inside. */
.site-nav a:focus-visible { outline-offset: -3px; }
.site-nav a[aria-current="page"] { background: var(--night-2); color: #ffffff; box-shadow: inset 0 0 0 1px var(--night-3); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; border-radius: 1px; background: var(--bus); }
/* On a phone the menu scrolls sideways: its edges fade so the cut-off names show there is more. */
@media (max-width: 999px) {
	.site-nav { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%); }
	.site-nav ul { padding-right: 34px; }
}
@media (min-width: 1000px) {
	.site-head__row { padding-top: 8px; padding-bottom: 8px; }
	.site-nav { flex: 0 1 auto; margin: 0 0 0 auto; padding: 0; }
}

/* ---- The hero: night sky, the school, falling snow, the sign -------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--night-ink); padding: 26px 0 0; }
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, #121d33 0%, #172540 52%, #22345a 74%, #33456c 86%, #3d5076 100%); }
.scene__school { position: absolute; left: 0; right: 0; bottom: 52px; width: 100%; min-width: 900px; height: 170px; max-width: none; opacity: .95; }
@media (min-width: 1000px) { .scene__school { height: 190px; bottom: 58px; } }
.scene__school .bldg { fill: #0f1a2e; }
.scene__school .bldg--mid { fill: #0d1729; }
.scene__school .roof { fill: #0d1729; }
.scene__school .bldg--door { fill: #0a1220; }
.scene__school .win { fill: #1b2a45; }
.scene__school .win--lit { fill: #e8b95c; }
.scene__school .clock { fill: #26385a; }
.scene__school .clock__hands { fill: none; stroke: #8aa0c2; stroke-width: 2; stroke-linecap: round; }
.scene__ground { position: absolute; left: -10%; right: -10%; bottom: 0; height: 74px; background: var(--ground); border-radius: 50% 50% 0 0 / 46px 46px 0 0; box-shadow: 0 -6px 0 -2px rgba(255, 255, 255, .35); }
/* At night the snow's crest catches the light and its foot runs into the dark page below. */
@media (prefers-color-scheme: dark) { .scene__ground { background: linear-gradient(180deg, var(--ground) 0, var(--ground) 34%, #8597b1 68%, var(--drift) 100%); } }
/*
 * Falling snow: one layer of flakes (four patterns, each 240 px tall, so a 240 px fall comes back to
 * where it started without a jump), moved by transform, which the graphics chip does alone. It falls
 * for about a minute and a half (four 22-second falls), then stays still.
 */
.scene__flakes { position: absolute; left: 0; right: 0; top: -240px; bottom: 0; opacity: .55; background-image:
	radial-gradient(circle at 20px 30px, #fff 0 1.6px, transparent 2.2px),
	radial-gradient(circle at 90px 110px, #fff 0 1.1px, transparent 1.7px),
	radial-gradient(circle at 150px 60px, #fff 0 2px, transparent 2.6px),
	radial-gradient(circle at 60px 170px, #fff 0 1.3px, transparent 1.9px);
	background-size: 180px 240px, 140px 240px, 220px 240px, 120px 240px;
	animation: snowfall 22s linear 4; will-change: transform; }
@keyframes snowfall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 240px, 0); } }
@media (max-width: 999px) { .scene__flakes { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .scene__flakes { animation: none; } }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 54px; }
.hero__grid > * { min-width: 0; }
.kicker { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bus); }
.kicker__when { white-space: nowrap; }
.hero__title { margin: 0; font: 400 clamp(52px, 13vw, 92px)/.9 var(--font-sign); letter-spacing: .01em; text-transform: uppercase; color: #ffffff; }
.hero .lede { margin: 12px 0 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--night-ink); }
/* A phone: the title, a short summary, the picture and the sign, with the ZIP box at the fold. */
@media (max-width: 699px) {
	.hero { padding-top: 14px; }
	.hero .kicker { display: none; }
	.hero__title { font-size: clamp(34px, 13vw, 46px); }
	.hero--404 .hero__title { font-size: clamp(38px, 12vw, 46px); }
	.hero .lede { margin-top: 6px; font-size: 17px; line-height: 1.45; }
	.lede__more { display: none; }
	.hero .sdc-figure { margin-top: 12px; }
	.hero .sdc-figure figcaption { display: none; }
	.hero__grid { gap: 4px; padding-bottom: 46px; }
	.hero .sign { margin-top: calc(16px + var(--snow) * 30px); }
	.hero .sign__legs { height: 22px; }
}
/* A tablet: one column, centred on the sign. */
@media (min-width: 700px) and (max-width: 999px) {
	.hero .sdc-figure { margin-left: auto; margin-right: auto; }
}
@media (min-width: 1000px) {
	.hero { padding-top: 38px; }
	.hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 56px; align-items: start; padding-bottom: 74px; }
	.hero__title { font-size: 104px; }
}

/* The sign (the page's one signature): name plate, lit face of changeable letters, two legs. */
.calc { position: relative; max-width: 560px; margin: 0 auto; width: 100%; }
.sign { --snow: .3; position: relative; margin: calc(18px + var(--snow) * 34px) 0 0; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); }
.sign__cap { position: absolute; z-index: 2; left: -8px; right: -8px; top: calc(-10px - var(--snow) * 34px); height: calc(16px + var(--snow) * 36px); background: radial-gradient(120% 90% at 50% 100%, #ffffff 60%, #eef3f9 100%); border-radius: 40% 46% 12px 12px / 100% 100% 12px 12px; box-shadow: 0 3px 0 -1px #dfe7f1, inset 0 -6px 8px -6px var(--snow-shade); transition: top .6s ease, height .6s ease; }
.sign__cap::after { content: ""; position: absolute; right: 12%; bottom: -9px; width: 26px; height: 14px; background: var(--snow); border-radius: 0 0 50% 50%; }
.sign__plate { position: relative; z-index: 1; margin: 0; background: var(--bus); color: var(--bus-ink); border: 7px solid var(--steel); border-bottom: 0; border-radius: 8px 8px 0 0; text-align: center; padding: 9px 12px 7px; font: 400 clamp(22px, 6.4vw, 31px)/1 var(--font-sign); letter-spacing: .16em; text-transform: uppercase; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.sign__face { container-type: inline-size; position: relative; margin: 0; display: grid; gap: 4px; padding: 14px 10px 16px; min-height: 9em; align-content: center;
	background: linear-gradient(180deg, #fffdf7 0%, var(--lamp) 45%, var(--lamp-2) 100%);
	border: 7px solid var(--steel); border-top-width: 5px; border-radius: 0 0 8px 8px;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), inset 0 14px 26px rgba(255, 210, 120, .28), inset 0 -1px 0 rgba(0, 0, 0, .1); }
.sign__row { display: flex; justify-content: center; align-items: flex-end; gap: .045em; min-height: 1.08em; padding: 0 2px 3px; border-bottom: 2px solid rgba(43, 49, 58, .13); font: 400 clamp(25px, 9.4cqi, 60px)/1 var(--font-sign); color: #151515; white-space: nowrap; }
.sign__row:last-of-type { border-bottom: 0; }
.sign__row--red { color: var(--red); }
.sign__l { display: inline-block; transform: translateY(var(--d, 0)) rotate(var(--t, 0)); text-shadow: 0 1px 0 rgba(0, 0, 0, .16), 1px 2px 2px rgba(0, 0, 0, .14); }
.sign__gap { display: inline-block; width: .3em; }
.sign__legs { display: flex; justify-content: space-around; height: 30px; margin: 0 18%; }
.sign__legs span { width: 15px; background: linear-gradient(90deg, #262b33, var(--steel-2) 45%, #23282f); border-radius: 0 0 3px 3px; }
.sign.is-turning .sign__l { animation: slot .46s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--i, 0) * 26ms); }
.sign.is-reading .sign__face { animation: flicker 1.2s ease-in-out infinite alternate; }
@keyframes slot { from { transform: translateY(-.8em) rotate(-9deg); opacity: 0; } }
@keyframes flicker { to { filter: brightness(.94); } }
@media (prefers-reduced-motion: reduce) {
	.sign.is-turning .sign__l, .sign.is-reading .sign__face { animation: none; }
	.sign__cap { transition: none; }
}

/* The ZIP box: a snowbank the sign's legs stand in (the bank stays snow at night). */
.zip { position: relative; display: block; margin: -2px 0 0; background: var(--paper); color: var(--ink); border-radius: 8px; padding: 20px 16px 16px; }
.zip::before { content: ""; position: absolute; left: 6px; right: 6px; top: -12px; height: 18px; background: radial-gradient(circle at 12px 14px, var(--bank) 12px, transparent 12.5px) 0 0 / 30px 18px repeat-x; }
.zip__label { display: block; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.zip__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.zip__input { flex: 1 1 180px; min-width: 0; font: 700 30px/1.1 var(--font-text); letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--drift); border: 2px solid var(--field); border-radius: 6px; padding: 11px 14px; }
.zip__input::placeholder { color: #7b8698; }
.zip__input:focus { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.zip__input[aria-invalid="true"] { border-color: var(--red-mark); }
.zip__go { flex: 1 1 100%; min-height: 56px; font: 400 25px/1 var(--font-sign); letter-spacing: .07em; text-transform: uppercase; color: var(--bus-ink); background: var(--bus); border: 0; border-radius: 6px; padding: 12px 20px; box-shadow: inset 0 -4px 0 var(--bus-deep); cursor: pointer; }
.zip__go:hover { background: #ffb81a; }
.zip__go:active { box-shadow: inset 0 -2px 0 var(--bus-deep); transform: translateY(1px); }
.zip__go[disabled] { opacity: .7; cursor: progress; }
@media (min-width: 520px) { .zip__go { flex: 0 1 auto; } }
.zip__hint { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.zip__error { display: block; margin-top: 10px; font-weight: 700; color: var(--red-mark); }
@media (prefers-color-scheme: dark) {
	/* At night a band of snow lies along the top of the box, under the drifts. */
	.zip { box-shadow: inset 0 7px 0 var(--bank); padding-top: 24px; }
	.zip::before { top: -11px; }
}
@media (max-width: 699px) {
	.zip { padding: 18px 14px 14px; }
}

/* The page's picture under its title (every page), and pictures inside a page's text. */
.sdc-figure { margin: 18px 0 0; }
.sdc-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--night-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.sdc-figure figcaption { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hero .sdc-figure figcaption, .page-head .sdc-figure figcaption { color: var(--night-ink-2); }
.hero .sdc-figure { max-width: 560px; }
@media (prefers-color-scheme: dark) { .sdc-figure img, .card__pic { filter: brightness(.88); } }

/* ---- The answer ----------------------------------------------------------------------------- */
.answer-wrap { scroll-margin-top: 12px; }
.answer-wrap:empty { display: none; }
.answer-wrap .wrap { padding-top: 26px; padding-bottom: 6px; }
.answer { background: var(--paper); border: 1.5px solid var(--frame); border-top: 6px solid var(--bus); border-radius: 8px; padding: 16px 16px 20px; }
@media (min-width: 700px) { .answer { padding: 22px 28px 28px; } }
.answer--error { border-top-width: 1.5px; border-top-color: var(--frame); border-left: 6px solid var(--red); }
.answer__error { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 700; }
.answer__error .icon { color: var(--red-mark); }
.answer__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.answer__where { margin: 0; font: 400 30px/1.05 var(--font-sign); letter-spacing: .02em; text-transform: uppercase; }
.answer__source { margin: 0; font-size: 15px; color: var(--ink-2); }
.alerts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.alert { --c: #7b68ee; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding: 10px 14px 10px 16px; background: var(--drift); border-radius: 4px; border-left: 7px solid var(--c); }
.alert strong { font-weight: 800; }
/* The Weather Service's own map colours for these alerts, as an edge only (the words carry the meaning). */
.alert--winter-storm-warning { --c: #ff69b4; }
.alert--blizzard-warning { --c: #ff4500; }
.alert--ice-storm-warning { --c: #8b008b; }
.alert--winter-storm-watch { --c: #4682b4; }
.alert--winter-weather-advisory { --c: #7b68ee; }
.alert--lake-effect-snow-warning { --c: #008b8b; }
.alert--extreme-cold-warning { --c: #0000ff; }
.alert--extreme-cold-watch { --c: #5f9ea0; }
.alert--cold-weather-advisory { --c: #afeeee; }
.alert--snow-squall-warning { --c: #c71585; }
.alert--dense-fog-advisory, .alert--freezing-fog-advisory { --c: #708090; }

.day { margin-top: 14px; border: 1.5px solid var(--frame); border-radius: var(--radius); background: var(--paper); }
.day__sum { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 14px; cursor: pointer; list-style: none; }
.day__sum::-webkit-details-marker { display: none; }
.day__sum::after { content: ""; justify-self: end; width: 12px; height: 12px; margin-top: -26px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.day[open] .day__sum::after { transform: rotate(-135deg); margin-top: -20px; }
/* From 760 px the day's name stands beside its bar, with the verdict under the bar; from 1100 px,
   where the bar keeps room for its line of words, the verdict moves beside it. */
@media (min-width: 760px) {
	.day__sum { grid-template-columns: 200px minmax(0, 1fr) 18px; align-items: center; column-gap: 16px; row-gap: 8px; }
	.day__when { grid-row: 1 / span 2; }
	.day__sum > .split, .day__sum > .day__none, .day__verdict { grid-column: 2; }
	.day__sum::after { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
	.day[open] .day__sum::after { margin-top: 6px; }
}
@media (min-width: 1100px) {
	.day__sum { grid-template-columns: 200px minmax(0, 1fr) auto 18px; }
	.day__when { grid-row: auto; }
	.day__verdict { grid-column: 3; }
	.day__sum::after { grid-column: 4; grid-row: auto; }
}
.day__when { font: 400 28px/1 var(--font-sign); letter-spacing: .03em; text-transform: uppercase; }
.day__date { display: block; margin-top: 3px; font: 600 15px/1.3 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.day__verdict { font-weight: 800; }
.day__body { padding: 0 14px 16px; }
.day__note { margin: 0 0 12px; padding: 10px 14px; background: var(--drift); border-radius: 4px; font-size: 16px; }
.day__grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .day__grid { grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; } }

/*
 * The three outcomes, one bar: snow day, late start, school. Each part is exactly its share wide (no
 * padding of its own), and shows its number only where it fits: 20% or more, and at least 52 px on
 * the screen (a container query hides it in a narrower part). The line under the bar names all
 * three in words, each with its colour.
 */
.split { display: grid; gap: 6px; min-width: 0; }
.split__bar { display: flex; width: 100%; min-height: 32px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--paper); }
.split__bar > span { flex: var(--p) 1 0; min-width: 0; display: flex; align-items: center; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; container-type: inline-size; }
.split__label { padding: 0 6px; }
@container (max-width: 51.9px) { .split__label { visibility: hidden; } }
.split__bar > span[style="--p:0"] { display: none; }
.split__close { background: var(--red); color: #ffffff; }
.split__delay { background: var(--bus); color: var(--bus-ink); }
.split__open { background: var(--split-open); color: #ffffff; }
.split__key { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.split__k { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.split__k::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 3px; }
.split__k strong { color: var(--ink); font-weight: 800; }
.split__k--close::before { background: var(--red); }
.split__k--delay::before { background: var(--bus); box-shadow: inset 0 0 0 1.5px var(--bus-ink); }
.split__k--open::before { background: var(--split-open); }

.why__title { margin: 4px 0 10px; font: 400 26px/1 var(--font-sign); letter-spacing: .03em; text-transform: uppercase; }
.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.why__item { display: flex; gap: 12px; align-items: flex-start; }
.why__item .icon { margin-top: 2px; color: var(--ink-2); }
.why--snow .icon, .why--alert .icon { color: #2a78d6; }
.why--ice .icon { color: #7b3fb0; }
.why--cold .icon { color: #1c5cab; }
.whatif { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; background: var(--drift); border-radius: var(--radius); font-weight: 600; }
.whatif .icon { margin-top: 2px; color: var(--wood-ink); }
@media (prefers-color-scheme: dark) { .whatif .icon { color: var(--wood); } .why--ice .icon { color: #c9a4ef; } .why--snow .icon, .why--alert .icon, .why--cold .icon { color: #86b6ef; } }
.whatif__ctl { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border: 1.5px dashed var(--frame); border-radius: var(--radius); }
.whatif__ctl label { font-weight: 800; }
.whatif__out { font-weight: 800; }

/*
 * Sliders (what if, the guides' tools): a wooden yardstick to slide a bus-yellow plate along. The
 * whole control is 44 px tall to tap, the plate 28 px.
 */
.tool input[type="range"], .whatif__ctl input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; }
.tool input[type="range"]::-webkit-slider-runnable-track, .whatif__ctl input[type="range"]::-webkit-slider-runnable-track { height: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1.5px), rgba(54, 39, 11, .55) calc(100% / 24 - 1.5px) calc(100% / 24)), linear-gradient(180deg, #f1d7a6, var(--wood)); box-shadow: inset 0 0 0 1.5px rgba(54, 39, 11, .55); }
.tool input[type="range"]::-moz-range-track, .whatif__ctl input[type="range"]::-moz-range-track { height: 12px; border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1.5px), rgba(54, 39, 11, .55) calc(100% / 24 - 1.5px) calc(100% / 24)), linear-gradient(180deg, #f1d7a6, var(--wood)); box-shadow: inset 0 0 0 1.5px rgba(54, 39, 11, .55); }
.tool input[type="range"]::-webkit-slider-thumb, .whatif__ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -8px; border: 2.5px solid var(--steel); border-radius: 5px; background: var(--bus); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16); }
.tool input[type="range"]::-moz-range-thumb, .whatif__ctl input[type="range"]::-moz-range-thumb { width: 23px; height: 23px; border: 2.5px solid var(--steel); border-radius: 5px; background: var(--bus); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16); }
.tool input[type="range"]:focus-visible, .whatif__ctl input[type="range"]:focus-visible { outline-offset: 0; border-radius: 4px; }

/* The yardstick: forecast snow against the usual closing point. */
.ruler { margin: 0; display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: stretch; }
.ruler__stick { position: relative; height: 230px; border-radius: 4px; background: linear-gradient(90deg, #d8b676, var(--wood) 30%, #f1d7a6 60%, #d9b878); box-shadow: inset 0 0 0 1.5px rgba(54, 39, 11, .4); overflow: hidden; }
.ruler__tick { position: absolute; left: 0; bottom: calc(8px + var(--at) * (100% - 16px) - .55em); width: 100%; padding-left: 26px; font: 400 17px/1.1 var(--font-sign); color: var(--wood-ink); }
.ruler__tick::before { content: ""; position: absolute; left: 0; top: .55em; width: 20px; height: 2px; background: var(--wood-ink); }
.ruler__snow { position: absolute; left: 0; right: 0; bottom: 0; height: calc(8px + var(--snow) * (100% - 16px)); background: linear-gradient(180deg, #ffffff, #e9f0f8); box-shadow: 0 -2px 0 #ffffff, inset 0 3px 6px -2px var(--snow-shade); border-radius: 8px 8px 0 0; }
.ruler__limit { position: absolute; left: -4px; right: -4px; bottom: calc(8px + var(--limit) * (100% - 16px) - 1.5px); height: 3px; background: var(--red); box-shadow: 0 0 0 1.5px #ffffff; }
.ruler__cap { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; font-size: 15px; line-height: 1.35; }
.ruler__key { display: flex; gap: 8px; align-items: flex-start; }
.ruler__key::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 3px; }
.ruler__key--snow::before { background: #ffffff; box-shadow: inset 0 0 0 2px var(--snow-shade); }
.ruler__key--limit::before { height: 4px; margin-top: 8px; background: var(--red); }
@media (prefers-color-scheme: dark) { .ruler__key--limit::before { background: var(--red-mark); } }

/* Hour by hour: the night before to the end of the school day. */
.hours { margin: 18px 0 0; }
.hours__cap { margin-bottom: 8px; font-weight: 800; }
.hours__bars { list-style: none; margin: 0 0 30px; padding: 0 0 4px; display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 2px; align-items: end; height: 132px; border-bottom: 2px solid var(--line); position: relative; z-index: 0; }
.hours__h { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.hours__bar { display: block; height: calc(var(--v) * 100px); min-height: 2px; background: #6da7ec; border-radius: 2px 2px 0 0; }
.hours__h--ice .hours__bar { background: repeating-linear-gradient(135deg, #7b3fb0 0 4px, #a77fd0 4px 8px); }
.hours__h--none .hours__bar { background: transparent; border: 1px dashed var(--line); height: 16px; }
.hours__h--bus::before { content: ""; position: absolute; inset: 0 -1px 0; background: rgba(242, 169, 0, .16); border-radius: 3px; z-index: -1; }
/* Every third hour's time, centred under its bar (on a phone it is wider than the bar). */
.hours__t { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 15px; line-height: 1; white-space: nowrap; color: var(--ink-2); }
.hours__key { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.hours__key-bus { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.hours__key-bus::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: rgba(242, 169, 0, .35); }

/* "Your district usually…": three changeable-letter tiles; the one in use is lit like the sign's name plate. */
.habit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.habit__q { font-weight: 800; margin-right: 4px; }
.habit__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 12px 5px; border: 2px solid var(--ink-2); border-radius: 4px; background: linear-gradient(180deg, #fffdf7, var(--lamp) 55%, var(--lamp-2)); color: #151515; text-decoration: none; text-align: center; font: 400 21px/1 var(--font-sign); letter-spacing: .05em; text-transform: uppercase; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.habit__opt:hover { border-color: var(--ink); }
.habit__opt[aria-current="true"] { background: var(--bus); color: var(--bus-ink); border-color: var(--steel); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
@media (max-width: 559px) {
	.habit__q { flex: 1 1 100%; }
	.habit__opt { flex: 1 1 0; min-width: 0; padding: 6px 6px 4px; font-size: 20px; line-height: 1.05; }
}
.answer__more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.answer__state { font-weight: 800; color: var(--ink); }
.answer__share { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 4px; border: 2px solid var(--ink-2); background: var(--paper); color: var(--ink); font: 700 15px/1 var(--font-text); cursor: pointer; }
.answer__share:hover { border-color: var(--ink); }

/* ---- Bands (sections of a page) ------------------------------------------------------------- */
.band { padding: 44px 0; }
.band--paper { background: var(--paper); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.band__title { margin: 0 0 10px; font: 400 clamp(36px, 7vw, 54px)/1 var(--font-sign); letter-spacing: .01em; text-transform: uppercase; }
.band__lede { margin: 0 0 22px; max-width: 46em; color: var(--ink-2); font-size: 18px; }
.band__split { display: grid; gap: 28px; }
@media (min-width: 960px) { .band__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; } }
.band__text.prose { padding: 0; }

/* The map. */
.mapbox { display: grid; gap: 18px; }
@media (min-width: 1000px) { .mapbox { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; } .mapbox__head { grid-column: 1 / -1; } }
.mapbox__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.mapbox__when { margin: 0; font-weight: 800; }
.mapbox__wait { margin: 0; padding: 12px 16px; border-radius: var(--radius); background: var(--paper); border: 1.5px solid var(--frame); grid-column: 1 / -1; }
.mapbox__map { margin: 0; background: var(--paper); border: 1.5px solid var(--frame); border-radius: 8px; padding: 12px; }
.mapbox__cap { margin: 8px 4px 0; font-size: 15px; color: var(--ink-2); }
.mapbox__tap { display: none; }
@media (min-width: 700px) { .mapbox__tap { display: inline; } .mapbox__to-list { display: none; } }
.mapbox__list { background: var(--paper); border: 1.5px solid var(--frame); border-radius: 8px; padding: 16px; }
.mapbox__h { margin: 0 0 10px; font: 400 26px/1 var(--font-sign); letter-spacing: .03em; text-transform: uppercase; }
.mapbox__none { margin: 0; }
.mapbox__more { margin: 8px 0 0; font-weight: 800; }
.mapbox__more a { display: inline-flex; align-items: center; min-height: 44px; }
.usmap { display: block; width: 100%; height: auto; }
.usmap__state { fill: var(--map-land); stroke: var(--map-edge); stroke-width: 1.2; transition: fill .15s; }
.usmap__link:hover .usmap__state { fill: var(--map-focus); }
/* A state reached with the keyboard lights up bus-yellow, edged in ink (instead of a box around it). */
.usmap__link:focus { outline: none; }
.usmap__link:focus-visible .usmap__state { fill: var(--bus); stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.usmap__state.is-faint { fill: var(--line-2); }
.usmap__state.is-focus { fill: var(--map-focus); stroke: var(--ink-2); stroke-width: 1.4; }
.usmap--state .usmap__state { stroke-width: .6; }
.usmap__dot { stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.usmap__dot.dot--0 { fill: var(--paper); stroke: var(--dot-0); stroke-width: 1.6; }
/* A state's map: the chance beside each likely dot, in words over the drawing. */
.usmap-box { position: relative; }
.usmap__pct { position: absolute; font-size: 15px; font-weight: 800; line-height: 20px; color: var(--ink); white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px var(--paper), 0 0 3px var(--paper), 0 0 4px var(--paper), 0 0 5px var(--paper); }
.usmap__pct--right, .usmap__pct--left { transform: translateY(-50%); }
.usmap__pct--above, .usmap__pct--below { transform: translateX(-50%); }
/* A dot's colour and size both say its chance (sizes as the map's, SDC_BAND_SIZE in map.php). */
.dot--0 { --k: .62; }
.dot--1 { --k: .8; fill: var(--dot-1); background: var(--dot-1); }
.dot--2 { --k: 1; fill: var(--dot-2); background: var(--dot-2); }
.dot--3 { --k: 1.25; fill: var(--dot-3); background: var(--dot-3); }
.dot--4 { --k: 1.5; fill: var(--dot-4); background: var(--dot-4); }
span.dot { display: inline-block; flex: none; width: calc(12px * var(--k, 1)); height: calc(12px * var(--k, 1)); border-radius: 50%; vertical-align: middle; }
span.dot--0 { background: transparent; box-shadow: inset 0 0 0 2px var(--dot-0); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; color: var(--ink-2); }
.legend__title { font-weight: 800; color: var(--ink); }
.legend__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.legend__list li { display: inline-flex; align-items: center; gap: 6px; }
.cities { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.city { display: grid; grid-template-columns: 18px 1fr auto; gap: 0 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.city > .dot { justify-self: center; align-self: center; }
.city:last-child { border-bottom: 0; }
.city__name { font-weight: 700; }
.city__pct { white-space: nowrap; font-size: 15px; }
.city__pct b { font-size: 17px; }
.city__more { grid-column: 2 / -1; font-size: 15px; color: var(--ink-2); }
.city--none { grid-template-columns: 1fr auto; color: var(--ink-2); }

/* How much snow closes school: one yardstick a city. */
.snowbars { margin: 0; background: var(--drift); border: 1.5px solid var(--frame); border-radius: 8px; padding: 16px; }
.snowbars__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.snowbars__row { display: grid; grid-template-columns: minmax(0, 150px) 1fr 54px; gap: 10px; align-items: center; }
.snowbars__city { font-weight: 800; line-height: 1.15; }
.snowbars__city small { display: block; font-weight: 400; font-size: 15px; color: var(--ink-2); }
.snowbars__stick { position: relative; height: 22px; border-radius: 3px; background: repeating-linear-gradient(90deg, transparent 0 calc(6.6667% - 1.5px), rgba(54, 39, 11, .55) calc(6.6667% - 1.5px) 6.6667%), linear-gradient(180deg, #f1d7a6, var(--wood)); box-shadow: inset 0 0 0 1.5px rgba(54, 39, 11, .4); overflow: hidden; }
.snowbars__snow { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: linear-gradient(180deg, #ffffff, #e9f0f8); box-shadow: 2px 0 0 var(--red), inset 0 -3px 5px -2px var(--snow-shade); }
.snowbars__val { font: 400 22px/1 var(--font-sign); letter-spacing: .02em; text-align: right; }
.snowbars figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
/* A phone: each city's name and snowfall on one line, its yardstick the full width under it. */
@media (max-width: 559px) {
	.snowbars { padding: 14px 12px; }
	.snowbars__list { gap: 10px; }
	.snowbars__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "city val" "stick stick"; gap: 4px 10px; align-items: end; }
	.snowbars__city { grid-area: city; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
	.snowbars__city small { display: inline; }
	.snowbars__stick { grid-area: stick; }
	.snowbars__val { grid-area: val; }
}

/* The states: each a frame holding its two-letter tile; a tile lights up under the pointer. */
.states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; }
@media (min-width: 900px) { .states { grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); } }
.states__tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; align-items: center; height: 100%; padding: 10px 12px; border-radius: var(--radius); background: var(--paper); border: 1.5px solid var(--frame); text-decoration: none; }
.states__tile:hover { border-color: var(--ink-2); }
.states__tile:hover .states__code { background: var(--bus); }
.states__tile.is-off { opacity: .55; }
.states__code { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 40px; border-radius: 4px; background: var(--lamp); color: #151515; border: 3px solid var(--steel); font: 400 24px/1 var(--font-sign); letter-spacing: .04em; }
.states__name { font-weight: 800; font-size: 15px; line-height: 1.2; min-width: 0; overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; }
.states__now { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-2); }

/* Cards (guides): a picture over a bus-yellow edge, like the sign's name plate over its face. */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; height: 100%; background: var(--paper); border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--frame); text-decoration: none; }
.card:hover { border-color: var(--ink-2); }
.card:hover .card__title { text-decoration: underline; text-decoration-color: var(--bus-deep); text-decoration-thickness: 2px; }
.card__pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night); border-bottom: 4px solid var(--bus); }
.card__pic--icon { display: grid; place-items: center; color: var(--bus); }
.card__pic--icon .icon { width: 56px; height: 56px; }
.card__title { margin: 14px 16px 4px; font-weight: 800; font-size: 19px; line-height: 1.25; }
.card__text { margin: 0 16px 16px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }

/* Questions. */
.qa__q { margin: 26px 0 6px; font-size: 21px; line-height: 1.25; font-weight: 800; }
.qa__q:first-child { margin-top: 6px; }
.qa__a p { margin: 0 0 10px; }
.page-meta { margin: 26px 0 0; font-size: 15px; color: var(--ink-2); }

/* ---- Inner pages ------------------------------------------------------------------------------ */
.page-head { background: var(--night); color: var(--night-ink); padding: 18px 0 30px; }
.page-head__top { display: grid; gap: 16px; }
@media (min-width: 1000px) { .page-head--tool .page-head__top--pic { grid-template-columns: minmax(0, 1fr) 470px; gap: 40px; align-items: start; } }
.page-head__title { margin: 0; font: 400 clamp(40px, 9vw, 72px)/.95 var(--font-sign); letter-spacing: .01em; color: #ffffff; text-wrap: balance; }
.page-head .lede { margin: 12px 0 0; font-size: 18.5px; line-height: 1.55; color: var(--night-ink); max-width: 40em; }
.crumbs ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 15px; color: var(--night-ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 4px; opacity: .7; }
.crumbs a { color: var(--night-ink); }
@media (max-width: 999px) {
	.page-head { padding-top: 8px; }
	.crumbs ol { margin-bottom: 4px; }
	.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}
.page-tool { padding: 24px 0 8px; }
.with-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; }
.with-map > * { min-width: 0; }
@media (min-width: 1100px) { .with-map { grid-template-columns: minmax(0, 760px) 300px; justify-content: center; } .with-map__side { order: 2; } }
.with-map__side { padding-top: 34px; }
@media (max-width: 1099px) { .with-map__side { display: none; } }

/* Long reading. Links keep the words' own weight, underlined in bus yellow. */
.prose { padding-top: 28px; padding-bottom: 36px; font-size: 18px; line-height: 1.68; }
.prose > * { max-width: 100%; }
.prose h2 { margin: 42px 0 12px; font: 400 clamp(32px, 6vw, 44px)/1.02 var(--font-sign); letter-spacing: .01em; scroll-margin-top: 16px; }
.prose h3 { margin: 30px 0 8px; font-size: 21px; line-height: 1.3; font-weight: 800; scroll-margin-top: 16px; }
.prose p, .prose ul, .prose ol { margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.prose a { font-weight: inherit; }
.prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 5px solid var(--bus); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0; }
.prose figure { margin: 26px 0; }
.prose figcaption { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.prose .answer-box { padding: 16px 18px; background: var(--paper); border-radius: var(--radius); border: 1.5px solid var(--frame); border-left: 6px solid var(--bus); font-size: 18px; }
.prose .answer-box p:last-child { margin-bottom: 0; }
.prose .sources { font-size: 15px; color: var(--ink-2); }
.prose .note { font-size: 15px; color: var(--ink-2); }
.cite { font-size: 15px; color: var(--ink-2); }

/*
 * Tables: the title over the box (it stays put while a wide table scrolls), headings that wrap, the
 * first column held in place, and a shadow at the right edge while there is more to scroll to.
 */
.table-title { margin: 24px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.45; }
.table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1.5px solid var(--frame); border-radius: var(--radius);
	background:
		linear-gradient(270deg, var(--paper) 45%, transparent) 100% 0 / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) 100% 0 / 18px 100% no-repeat scroll,
		var(--paper); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table thead th { font-size: 14px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--line); vertical-align: bottom; }
.table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: inset -1px 0 0 var(--line-2); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .table__group > th { background: var(--drift); font-weight: 800; box-shadow: none; }
.table__flag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--field); border-radius: 3px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; }
.table td .dot { margin-right: 6px; }
.download { margin: 0 0 18px; font-weight: 800; }
.download a { display: inline-block; padding: 7px 0; }
@media (max-width: 559px) { .table th, .table td { padding: 9px 10px; } }

/* Reading map. */
.toc { position: sticky; top: 18px; padding: 14px 18px; background: var(--paper); border: 1.5px solid var(--frame); border-radius: var(--radius); font-size: 15px; }
.toc__title { margin: 0 0 4px; font: 400 22px/1 var(--font-sign); letter-spacing: .04em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0 0 0 20px; display: grid; gap: 0; }
.toc a { display: block; padding: 11px 0; line-height: 1.5; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc--inline { position: static; margin: 0 0 24px; }
@media (min-width: 1100px) { .toc--inline { display: none; } }

/*
 * Mind maps: the middle on a steel name plate, its branches on a bus-yellow post. On a phone the
 * post runs down the left with an arm to each branch; from 760 px the branches hang either side of
 * a post down the middle, like signs on a signpost.
 */
.mindmap { margin: 28px 0; }
.mindmap__root { position: relative; display: inline-block; margin: 0 0 14px; padding: 9px 16px 8px; border-radius: 4px; background: var(--steel); color: #ffffff; font: 400 24px/1 var(--font-sign); letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 -3px 0 var(--bus); }
.mindmap__root::after { content: ""; position: absolute; left: 22px; top: 100%; width: 3px; height: 14px; background: var(--bus); }
.mindmap .mindmap__branches { list-style: none; margin: 0 0 0 22px; padding: 0 0 0 20px; display: grid; gap: 10px; }
.mindmap__branch { position: relative; padding: 10px 14px; background: var(--paper); border: 1.5px solid var(--frame); border-radius: var(--radius); }
/* The arm, and the post beside each branch: from the branch above (or the plate) down to it, and past it to the next. */
.mindmap__branch::before { content: ""; position: absolute; left: -21.5px; top: 21px; width: 20px; height: 3px; background: var(--bus); }
.mindmap__branch::after { content: ""; position: absolute; left: -21.5px; top: -11.5px; bottom: -1.5px; width: 3px; background: var(--bus); }
.mindmap__branch:last-child::after { bottom: auto; height: 35.5px; }
.mindmap__branch b { display: block; margin-bottom: 4px; }
.mindmap__branch ul { margin: 0; padding-left: 18px; font-size: 16px; }
@media (min-width: 760px) {
	.mindmap { text-align: center; }
	.mindmap__root::after { left: 50%; margin-left: -1.5px; }
	.mindmap .mindmap__branches { position: relative; margin: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 44px; text-align: left; }
	.mindmap__branches::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--bus); }
	.mindmap__branch::after { display: none; }
	.mindmap__branch:nth-child(odd)::before { left: auto; right: -23.5px; width: 22px; }
	.mindmap__branch:nth-child(even)::before { left: -23.5px; width: 22px; }
}
@media (prefers-color-scheme: dark) { .mindmap__root { background: var(--night-3); } }

/* Tools inside guides: a frame with the bus-yellow name plate edge along its top. */
.tool { margin: 26px 0; padding: 16px 16px 18px; background: var(--paper); border: 1.5px solid var(--frame); border-top: 6px solid var(--bus); border-radius: var(--radius); }
.tool__title { margin: 0 0 10px; font: 400 28px/1 var(--font-sign); letter-spacing: .03em; text-transform: uppercase; }
.tool__row { display: grid; gap: 4px; margin: 12px 0; }
.tool__row label { font-weight: 800; }
.tool select, .tool input[type="number"] { min-height: 48px; font: 600 18px/1.2 var(--font-text); padding: 10px 12px; border: 2px solid var(--field); border-radius: var(--radius); background: var(--drift); color: var(--ink); max-width: 100%; }
.tool__out { margin: 12px 0 0; padding: 12px 14px; background: var(--drift); border-radius: var(--radius); font-weight: 700; }
.tool__big { font: 400 46px/1 var(--font-sign); letter-spacing: .01em; }
.tool__note { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); }

/* Alerts ladder (watch, advisory, warning). */
.ladder { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 10px; }
.ladder li { --c: #7b68ee; display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 12px 14px; background: var(--paper); border-radius: var(--radius); border: 1.5px solid var(--frame); border-left: 8px solid var(--c); }
.ladder b { font: 400 24px/1 var(--font-sign); letter-spacing: .03em; text-transform: uppercase; }

/* Timeline of a snow morning. */
.timeline { list-style: none; margin: 26px 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 66px; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(180deg, var(--night-3), var(--bus)); border-radius: 2px; }
.timeline li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding: 8px 0; }
.timeline time { font: 400 24px/1.1 var(--font-sign); letter-spacing: .02em; text-align: right; }
.timeline li::after { content: ""; position: absolute; left: 61px; top: 15px; width: 13px; height: 13px; border-radius: 50%; background: var(--paper); border: 3px solid var(--bus); }
.timeline__src { font-size: 15px; color: var(--ink-2); }

/* A state's cities right now (the band under a state's title). */
.statenow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.statenow > * { min-width: 0; }
@media (min-width: 900px) { .statenow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.statenow__map { margin: 0; background: var(--paper); border: 1.5px solid var(--frame); border-radius: 8px; padding: 14px; }
.statenow__map figcaption { margin-top: 8px; font-size: 15px; color: var(--ink-2); display: grid; gap: 6px; }
.statenow__side { background: var(--paper); border: 1.5px solid var(--frame); border-radius: 8px; padding: 16px; }
.statenow__h { margin: 0 0 4px; font: 400 30px/1 var(--font-sign); letter-spacing: .02em; text-transform: uppercase; }
.statenow__when { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.zipmini { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.zipmini label { display: block; font-weight: 800; font-size: 15px; }
.zipmini__row { display: flex; gap: 8px; margin-top: 6px; }
.zipmini input { flex: 1; min-width: 0; font: 700 22px/1.1 var(--font-text); letter-spacing: .1em; padding: 9px 12px; border: 2px solid var(--field); border-radius: var(--radius); background: var(--drift); color: var(--ink); }
.zipmini input::placeholder { color: #7b8698; }
.zipmini button { min-height: 48px; font: 400 22px/1 var(--font-sign); letter-spacing: .06em; text-transform: uppercase; padding: 0 18px; border: 0; border-radius: var(--radius); background: var(--bus); color: var(--bus-ink); box-shadow: inset 0 -3px 0 var(--bus-deep); cursor: pointer; }

/* A lit school sign in 3D inside a guide. */
.sign3d { margin: 30px auto; max-width: 440px; perspective: 900px; }
.sign3d__tilt { transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg)); transform-style: preserve-3d; transition: transform .25s ease-out; }
.sign--small { --snow: .3; }
.sign--small .sign__plate { font-size: 20px; }
.sign--small .sign__face { min-height: 0; }
.sign--small .sign__row { font-size: clamp(24px, 11cqi, 52px); }
@media (prefers-reduced-motion: reduce) { .sign3d__tilt { transition: none; } }

/* Long tables folded away under a plate that opens them; small extras. */
.bigtable { margin: 0 0 18px; }
.bigtable summary { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; cursor: pointer; list-style: none; font-weight: 800; background: var(--paper); border: 1.5px solid var(--field); border-radius: var(--radius); }
.bigtable summary::-webkit-details-marker { display: none; }
.bigtable summary::before { content: ""; flex: none; width: 10px; height: 10px; margin-left: 2px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.bigtable summary:hover { border-color: var(--ink); }
.bigtable[open] summary { margin-bottom: 8px; }
.bigtable[open] summary::before { transform: rotate(45deg); }
.bigtable .table-wrap { margin-bottom: 0; }
.table__gap td { text-align: center; color: var(--ink-2); }
.tool__words { margin: 10px 0 0; }
.tool .split { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .bigtable summary::before, .day__sum::after { transition: none; } }

/* ---- Footer ---------------------------------------------------------------------------------- */
.site-foot { background: #0e1828; color: var(--night-ink); padding: 40px 0 20px; font-size: 15.5px; }
.site-foot a { color: var(--night-ink); }
.site-foot__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .site-foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.site-foot__small { color: var(--night-ink-2); font-size: 15px; }
.site-foot__h { margin: 0 0 6px; font: 400 22px/1 var(--font-sign); letter-spacing: .05em; text-transform: uppercase; color: var(--bus); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; line-height: 1.3; }
@media (max-width: 899px) { .site-foot ul.site-foot__short { display: block; columns: 2; column-gap: 20px; } .site-foot__short li { break-inside: avoid; } }
@media (min-width: 1000px) { .site-foot li a { min-height: 34px; } }
.site-foot__base { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--night-3); font-size: 15px; color: var(--night-ink-2); }
.brand--foot { margin-bottom: 8px; }
/* At night the footer and the page are nearly the same dark: a line marks where the footer starts. */
@media (prefers-color-scheme: dark) { .site-foot { border-top: 1px solid var(--night-3); } }

/* Ads (empty unless the owner adds code, after the privacy page says so). */
.ad { margin: 20px auto; max-width: 1180px; padding: 0 16px; text-align: center; }
.ad__label { display: block; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }

/* 404 and inline heroes. */
.hero--404 .hero__grid { padding-bottom: 60px; }
.hero--inline { padding: 22px 16px 40px; border-radius: 8px; margin: 24px 0; }

@media print {
	.site-head, .site-nav, .scene, .zip, .site-foot, .habit, .ad { display: none !important; }
	body { background: #fff; color: #000; }
	.hero, .page-head { background: #fff; color: #000; }
}