/* The House Across The Street.
   The hero is a photograph of one house through the whole season. Everything else is the street at night:
   dark ground, warm light, and a strand of real bulbs that only light up when something's legal. */

@font-face { font-family: 'Bricolage Grotesque'; src: url(../fonts/bricolage.woff2) format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url(../fonts/archivo-black.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fonts/courier-prime.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url(../fonts/courier-prime-bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --night: #140d08; --panel: #281b11; --panel-line: #503a25;
  --ink: #f6f3ea; --soft: #e6dbc9; --dim: #bdab93;
  --glow: #ffb84d; --glow-ink: #1a1204; --no: #ff9f80; --yes: #ffd98a; --wire: #5a7d3f;
  --display: 'Archivo Black', Impact, sans-serif;
  --body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --typed: 'Courier Prime', 'Courier New', monospace;
  --control-h: 48px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1200px;
  --dock-h: 86px;
  --thumb: url(../img/bulb-red.webp);
  --scrim: 14, 9, 4;
}
[data-phase='offseason'] { --night: #12100d; --panel: #211d17; --panel-line: #3f382d; --glow: #d3cab8; --dim: #b3aa9a; }
[data-phase='october'] { --night: #150c06; --panel: #2c1a0c; --panel-line: #57361a; --glow: #ff9d42; --dim: #c2ad95; --thumb: url(../img/bulb-orange.webp); }
/* Evergreen from the moment the lights come on until Christmas. */
[data-phase='lights'], [data-phase='thanksgiving'], [data-phase='season'] { --night: #07170f; --panel: #0f2a1e; --panel-line: #25503c; --soft: #d3dfd3; --dim: #a3b9a9; --wire: #4f7d47; --scrim: 3, 14, 9; --thumb: url(../img/bulb-gold.webp); }
[data-phase='christmas'] { --night: #170a07; --panel: #30130d; --panel-line: #5c2618; --glow: #ffd54f; --dim: #c9ada2; --thumb: url(../img/bulb-gold.webp); }
[data-phase='too-late'] { --night: #191816; --panel: #282622; --panel-line: #44413b; --glow: #d0c9b5; --no: #e7a999; --yes: #d0c9b5; --dim: #b1aea6; --thumb: url(../img/bulb-off.webp); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 500 1.0625rem/1.45 var(--body);
  transition: background-color .4s ease;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--night); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
html:not(.js) .needs-js { display: none !important; }
[hidden] { display: none !important; }
main { position: relative; z-index: 1; }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 18px;
  background: var(--glow); color: var(--glow-ink); border: 2px solid var(--glow); border-radius: 6px;
  font: 800 1rem/1.1 var(--body); text-decoration: none; cursor: pointer; transition: transform .08s ease, background-color .3s ease, border-color .3s ease;
}
.btn:active { transform: translateY(2px); }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn-quiet { background: rgba(var(--scrim), .35); color: var(--ink); border-color: var(--ink); }
.linkish { background: none; border: 0; padding: 4px 2px; font: 800 .9375rem/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: inherit; white-space: nowrap; }
label { display: block; font: 800 .9375rem/1.3 var(--body); margin-bottom: 6px; }
input[type='text'], input[type='date'], select {
  display: block; width: 100%; height: var(--control-h); padding: 0 12px; background: #fff; color: #14181f;
  border: 2px solid transparent; border-radius: 6px; font: 500 1rem/1.2 var(--body);
}
select { -webkit-appearance: none; appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, #14181f 50%), linear-gradient(-45deg, transparent 50%, #14181f 50%); background-size: 7px 7px, 7px 7px; background-position: right 17px center, right 11px center; background-repeat: no-repeat; }
input[type='date'] { -webkit-appearance: none; appearance: none; }

/* The hero: one house, one date */
.verdict-zone { position: relative; }
.hero { position: relative; height: calc(100svh - var(--dock-h)); min-height: 620px; overflow: hidden; background: var(--night); isolation: isolate; }
.house { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; transition: opacity .55s ease; z-index: -2; }
#houseB { opacity: 0; }
#houseB.up { opacity: 1; }
.scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(var(--scrim), .78), rgba(var(--scrim), .2) 34%, rgba(var(--scrim), 0) 46%, rgba(var(--scrim), .35) 60%, rgba(var(--scrim), .94) 86%); }
.masthead { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 42px 16px 0; }
.masthead .sound { position: absolute; right: 16px; top: calc(50% + 21px - 22px); }
.masthead-name { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo { display: block; height: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .55)); }
.logo-title { margin: 0; line-height: 0; }
.masthead .logo { width: min(68vw, 300px); }
.masthead-name .logo { width: 170px; }

/* The strand across the top of the house. Installed in October, lit on the same dates as the house. */
.garland {
  --gap: 44px;
  position: absolute; inset: 0 0 auto 0; height: 44px; display: flex; overflow: hidden; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14' preserveAspectRatio='none'%3E%3Cpath d='M0 1Q22 21 44 1' fill='none' stroke='%234c7340' stroke-width='2'/%3E%3C/svg%3E") 0 0 / var(--gap) 14px repeat-x;
}
.garland i { position: relative; flex: 0 0 var(--gap); --lit: url(../img/bulb-red.webp); --c: #ff5a4f; --wait: 0s; }
.garland i:nth-child(5n+2) { --lit: url(../img/bulb-gold.webp); --c: #ffd54f; --wait: .09s; }
.garland i:nth-child(5n+3) { --lit: url(../img/bulb-green.webp); --c: #5fe07a; --wait: .18s; }
.garland i:nth-child(5n+4) { --lit: url(../img/bulb-blue.webp); --c: #63b4ff; --wait: .27s; }
.garland i:nth-child(5n) { --lit: url(../img/bulb-orange.webp); --c: #ff9d42; --wait: .36s; }
.garland i::before, .garland i::after {
  content: ''; position: absolute; left: 50%; top: 7px; width: 32px; height: 32px; margin-left: -16px;
  background: url(../img/bulb-off.webp) center / contain no-repeat; transform: rotate(180deg);
}
.garland i::after { background-image: var(--lit); opacity: 0; filter: drop-shadow(0 0 6px var(--c)); transition: opacity .25s ease var(--wait); }
[data-phase='lights'] .garland i::after, [data-phase='thanksgiving'] .garland i::after, [data-phase='season'] .garland i::after, [data-phase='christmas'] .garland i::after,
[data-tacky] .garland i::after, [data-phase='too-late'] .garland i:nth-child(3n)::after { opacity: 1; }
.sound { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: rgba(var(--scrim), .55); color: var(--ink); border: 1.5px solid rgba(246, 243, 234, .55); border-radius: 50%; cursor: pointer; }
.sound[aria-pressed='true'] .sound-mute, .sound[aria-pressed='false'] .sound-waves { display: none; }
.hero-top { padding: 8px 16px 0; text-align: center; }
h1 { font-size: clamp(1.75rem, 7.6vw, 2.75rem); line-height: 1.02; max-width: 13em; }
.session { color: var(--soft); font-size: .9375rem; line-height: 1.25; margin-top: 4px; min-height: 1.25em; }
.word-wrap { position: relative; margin: 6px 16px 0; }
.word { font: 400 min(36vw, 170px)/.95 var(--display); color: #f4efe0; white-space: nowrap; letter-spacing: -.02em; text-align: center; }
.word.bulbed { color: transparent; text-shadow: none; }
.bulbs { position: absolute; left: 0; top: 0; pointer-events: none; }
.word-wrap.jolt { animation: jolt .28s ease; }
@keyframes jolt { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 14px; text-align: center; }
.line { font: 800 clamp(1.45rem, 6vw, 2rem)/1.1 var(--body); letter-spacing: -.015em; max-width: 21em; margin-inline: auto; }
.count { color: var(--glow); margin-top: 6px; line-height: 1.25; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.hero-actions .btn { flex: 1 1 auto; padding: 0 12px; font-size: .9375rem; }
#heroAppeal { flex: 2 1 100%; }
.reply { font-weight: 800; color: var(--glow); margin-top: 8px; line-height: 1.25; }
.reply:empty { display: none; }

/* Snow: only once it's legal */
.snow { display: none; pointer-events: none; }
#snowHero { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
[data-phase='season'] #snowHero, [data-phase='christmas'] #snowHero, [data-tacky] #snowHero { display: block; }
.page-snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
[data-tacky] .page-snow { display: block; }

/* The two big ones */
.spine { max-width: var(--max); margin: 0 auto; padding: clamp(34px, 7vw, 72px) var(--gutter) 0; display: grid; gap: 4px; }
.spine a { font: 400 clamp(1.3rem, 6.9vw, 5.6rem)/1.1 var(--display); text-decoration: none; letter-spacing: -.025em; white-space: nowrap; color: var(--dim); }
.spine b { font-weight: 400; color: var(--no); }
.spine b[data-state='yes'], .spine b[data-state='fine'] { color: var(--yes); text-shadow: 0 0 26px color-mix(in srgb, var(--glow) 70%, transparent); }
.spine a:hover { text-decoration: underline; text-decoration-thickness: .05em; }

/* Section heads */
.section-head { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section-head h2 { font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; }
.deck { font-size: clamp(1.0625rem, 2.4vw, 1.3rem); line-height: 1.35; margin-top: 8px; color: var(--soft); max-width: 40em; }
.board, .vote, .ask, .quiz, .report, .faq { padding-top: clamp(52px, 9vw, 100px); }
.docket { color: var(--glow); margin-top: 10px; font-weight: 800; }

/* Short phones: keep Share and Save Image clear of the date slider. */
@media (max-height: 700px) and (max-width: 899px) {
  .hero { min-height: 580px; }
  .masthead { padding-top: 34px; }
  .masthead .logo { width: min(60vw, 230px); }
  .hero-top { padding-top: 4px; }
  h1 { font-size: 1.5rem; }
  .sound { width: 38px; height: 38px; }
  .garland { height: 34px; background-size: 36px 12px; --gap: 36px; }
  .garland i::before, .garland i::after { width: 26px; height: 26px; margin-left: -13px; top: 5px; }
}

/* The Ruling Board: a strand of real bulbs */
.rows { max-width: var(--max); margin: 18px auto 0; padding: 0 var(--gutter) clamp(40px, 7vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 0; }
.row::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--wire); }
.bulb { position: relative; z-index: 1; width: 42px; height: 48px; align-self: start; background: url(../img/bulb-off.webp) center / contain no-repeat; }
.row[data-state='yes'] .bulb { background-image: var(--lit); filter: drop-shadow(0 0 7px var(--c)) drop-shadow(0 0 20px var(--c)); }
.row-main { min-width: 0; }
.ask-q { font: 800 clamp(1.4rem, 5.6vw, 2.125rem)/1.06 var(--body); letter-spacing: -.02em; }
.ask-q a { text-decoration: none; }
.row-head { display: inline; padding: 0; background: none; border: 0; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; color: inherit; }
.row-head::after { content: ''; position: absolute; inset: 0; }
.row[data-state='no'] .ask-q, .row[data-state='never'] .ask-q { color: var(--dim); }
.rline { color: var(--soft); margin-top: 3px; line-height: 1.25; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.stamp { font: 400 clamp(1.25rem, 5vw, 2.25rem)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; transition: color .25s ease; }
.stamp[data-state='yes'] { color: var(--yes); text-shadow: 0 0 16px color-mix(in srgb, var(--glow) 80%, transparent); }
.stamp[data-state='no'] { color: var(--no); }
.stamp[data-state='never'] { color: var(--no); }
.row-appeal { position: relative; z-index: 2; min-height: 36px; padding: 0 12px; background: none; color: var(--ink); border: 1.5px solid var(--dim); border-radius: 5px; font: 800 .875rem/1 var(--body); cursor: pointer; }
.row-appeal:active { transform: translateY(1px); }
.row-body { position: relative; z-index: 2; grid-column: 2 / -1; padding-top: 10px; }
.why { max-width: 42em; line-height: 1.45; }
.why b { color: var(--glow); }
.meta { color: var(--glow); font-weight: 800; margin-top: 8px; }
.appeal-reply { font-weight: 800; color: var(--no); margin-top: 8px; line-height: 1.25; }
.appeal-reply:empty { display: none; }
.row-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.mini { min-height: 40px; padding: 0 12px; background: none; color: var(--ink); border: 1.5px solid var(--dim); border-radius: 5px; font: 800 .875rem/1 var(--body); cursor: pointer; }
.mini.chosen { background: var(--glow); border-color: var(--glow); color: var(--glow-ink); }
.mini[disabled] { cursor: default; }
.row-tally { font-size: .9375rem; color: var(--soft); }
.row-link { font-weight: 800; font-size: .9375rem; }
.row.deep { outline: 2px solid var(--glow); outline-offset: 4px; border-radius: 6px; }
/* Before JS takes over, and without JS: the rule and the reasoning, in plain text */
.row > .ask-q, .row > .rule, .row > .why { grid-column: 2 / -1; }
.row > .rule { color: var(--glow); font-weight: 800; }
.row > .why { margin-top: 4px; color: var(--soft); }
.js .row > .rule, .js .row > .why { display: none; }

.exhibit { margin: 18px 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding-left: 0; }
.exhibit img { width: 112px; }
.exhibit figcaption { font-size: 1rem; line-height: 1.3; color: var(--soft); }
.exhibit b { display: block; font: 800 1.25rem/1.1 var(--body); color: var(--ink); margin-bottom: 3px; }

/* Date Scrubber: rides along with the verdicts and stops where they stop */
.dock {
  position: sticky; bottom: 0; z-index: 10; background: var(--panel); color: var(--ink);
  border-top: 2px solid var(--panel-line); padding: 6px 16px calc(2px + env(safe-area-inset-bottom)); height: var(--dock-h); transition: background-color .4s ease;
}
.dock-top { display: flex; align-items: center; gap: 4px 12px; max-width: var(--max); margin: 0 auto; min-height: 24px; font: 800 .875rem/1.15 var(--body); white-space: nowrap; }
.dock-top label { font: inherit; margin: 0; }
.contempt { margin-left: auto; }
.contempt .lng { display: none; }
.contempt b { color: var(--no); font-size: 1.1em; }
.contempt.hot { animation: hot .3s ease; }
@keyframes hot { 50% { transform: scale(1.16); } }
#restoreDock { margin-left: auto; }
.track { position: relative; max-width: var(--max); margin: 0 auto; }
#scrub { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 0; background: none; cursor: grab; }
#scrub::-webkit-slider-runnable-track { height: 4px; background: var(--wire); border-radius: 2px; }
#scrub::-moz-range-track { height: 4px; background: var(--wire); border-radius: 2px; }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 36px; margin-top: -16px; background: var(--thumb) center / contain no-repeat; border: 0; filter: drop-shadow(0 0 6px var(--glow)); }
#scrub::-moz-range-thumb { width: 30px; height: 36px; background: var(--thumb) center / contain no-repeat; border: 0; }
#scrub:focus-visible { outline: 2px solid var(--glow); outline-offset: 0; }
.ticks { position: relative; height: 14px; font: 800 .6875rem/1 var(--body); }
.ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; color: var(--dim); }
.ticks span.first { transform: none; }
.ticks span.last { transform: translateX(-100%); }
.ticks .today { color: var(--glow); }

/* Panels */
.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px; padding: clamp(16px, 3vw, 30px); transition: background-color .4s ease; }
.vote > .panel, .quiz > .panel { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 18px var(--gutter) 0; }
@media (min-width: 1312px) { .vote > .panel, .quiz > .panel { margin-left: auto; margin-right: auto; } }
.vote-q { font: 800 clamp(1.5rem, 5vw, 2.4rem)/1.08 var(--body); letter-spacing: -.02em; }
.vote-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.vote-btns .btn { flex: 1 1 200px; }
.bar { display: flex; height: 50px; margin-top: 14px; border-radius: 6px; overflow: hidden; font: 800 1rem/1 var(--body); background: var(--panel-line); }
.bar span { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; min-width: 0; transition: width .4s ease; }
#voteYes { background: #b3261a; color: #fff; }
#voteNo { background: #0b6b45; color: #fff; justify-content: flex-end; }
.vote-note { margin-top: 10px; color: var(--soft); }

/* Ask The Judge: he leans on the panel */
.ask-stage { max-width: calc(var(--max) - 2 * var(--gutter)); margin: 8px var(--gutter) 0; }
@media (min-width: 1312px) { .ask-stage { margin-left: auto; margin-right: auto; } }
.judge { width: min(64%, 300px); margin: 0 12px -10px auto; position: relative; z-index: 1; }
.ask-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.chips button { background: none; border: 0; padding: 4px 0; text-align: left; font: 500 .9375rem/1.25 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--soft); min-height: 32px; }
.transcript { margin-top: 16px; border-top: 1px solid var(--panel-line); padding-top: 14px; }
.t-q { color: var(--soft); }
.t-a { margin-top: 8px; font-size: clamp(1.25rem, 4.6vw, 1.625rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.t-a b { color: var(--glow); }
.transcript .btn { margin-top: 14px; }

/* Cross-Examination */
.q-count { color: var(--glow); font-weight: 800; }
.q-ask { font: 800 clamp(1.5rem, 5vw, 2.4rem)/1.08 var(--body); letter-spacing: -.02em; margin-top: 6px; }
.q-answers { display: grid; gap: 8px; margin-top: 14px; }
.q-answers button { text-align: left; min-height: 54px; padding: 10px 14px; background: none; border: 1.5px solid var(--dim); border-radius: 6px; font: 500 1.0625rem/1.25 var(--body); color: inherit; cursor: pointer; }
.q-answers button:hover { background: var(--glow); color: var(--glow-ink); border-color: var(--glow); }
.quiz-start { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.result { display: grid; gap: 16px; }
.result img { width: 100%; max-width: 420px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.result h3 { font: 800 clamp(2rem, 7vw, 3.5rem)/1 var(--body); letter-spacing: -.025em; margin-top: 2px; }
.result .found { color: var(--glow); font-weight: 800; }
.result .charge { margin-top: 10px; font-size: 1.125rem; line-height: 1.35; }
.result .sentence { margin-top: 8px; color: var(--soft); }
.result-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Report A Neighbor */
.report-grid { max-width: var(--max); margin: 18px auto 0; padding: 0 var(--gutter); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.report-form { display: grid; gap: 12px; align-content: start; }
.report-form .btn { width: 100%; }
.fine { font-size: .875rem; line-height: 1.3; color: var(--soft); }
.notice { background: #fff; color: #14181f; padding: clamp(18px, 4vw, 34px); border-radius: 3px; font: 400 1rem/1.5 var(--typed); }
.notice-head { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; border-bottom: 4px solid #14181f; padding-bottom: 10px; }
.notice-head img { width: 62px; height: 62px; }
.notice-court { font: 700 .8125rem/1.25 var(--typed); text-transform: uppercase; letter-spacing: .05em; }
.notice h3 { margin: 2px 0 0; font: 400 clamp(1.25rem, 3.6vw, 1.75rem)/1.08 var(--display); letter-spacing: -.01em; }
.notice p { margin-top: 12px; }
.notice .docket-no { font-weight: 700; font-size: .875rem; }
.notice .finding { font-weight: 700; border: 3px solid #14181f; padding: 8px 10px; }
.notice .sig { margin-top: 26px; border-top: 2px solid #14181f; padding-top: 6px; max-width: 280px; font-weight: 700; }
.notice .disclaimer { font-size: .8125rem; line-height: 1.35; margin-top: 18px; }

/* FAQ */
.faq-list { max-width: var(--max); margin: 16px auto 0; padding: 0 var(--gutter); }
.faq details { border-top: 1px solid var(--panel-line); }
.faq details:last-child { border-bottom: 1px solid var(--panel-line); }
.faq summary { cursor: pointer; padding: 14px 0; font: 800 clamp(1.125rem, 3.2vw, 1.5rem)/1.2 var(--body); letter-spacing: -.01em; }
.faq details p { padding: 0 0 16px; max-width: 42em; color: var(--soft); }

/* Footer */
.foot { position: relative; z-index: 1; max-width: var(--max); margin: clamp(52px, 9vw, 100px) auto 0; padding: 0 var(--gutter) 26px; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: end; }
.foot p { overflow-wrap: anywhere; }
.foot-big { font: 800 clamp(1.125rem, 3vw, 1.6rem)/1.2 var(--body); letter-spacing: -.01em; margin-bottom: 10px; }

/* Ad slots. Deliberately not styled like the site: they're a preview of what real ads will look like. */
.ad-slot { display: none; position: relative; z-index: 2; text-align: center; margin: 64px auto; padding: 0; background: var(--night); }
.ad-slot.on { display: block; }
.ad-slot[data-slot='home-after-board'] { margin-top: 80px; }
.ad-label { font: 500 .6875rem/1 Arial, sans-serif; color: #9aa0ac; letter-spacing: .04em; margin-bottom: 6px; }
.ad-box { display: flex; align-items: center; justify-content: center; max-width: 100%; margin: 0 auto; background: #e4e4e4; color: #666; font: 400 .75rem/1 Arial, sans-serif; overflow: hidden; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 100px; transform: translate(-50%, 12px); background: var(--ink); color: var(--night); padding: 10px 14px; border-radius: 6px; font: 800 .9375rem/1.2 var(--body); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 40; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* The Court gives up, in the page and never over it */
.gave-up { display: grid; gap: 10px; padding: 16px; background: #fffbe0; color: #0a5c2f; text-align: center; }
.gave-up img { width: min(100%, 360px); margin: 0 auto; }
.gave-up h2 { font: 700 clamp(2rem, 8vw, 3.2rem)/1 var(--tacky-font, var(--body)); }
.gave-up p { margin-top: 8px; color: #7a1014; }
.gave-up-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.gave-up .btn-quiet { color: #0a5c2f; border-color: #0a5c2f; background: none; }

/* Text pages: rulings, About, Privacy */
.page-head { display: flex; align-items: center; justify-content: space-between; max-width: 780px; margin: 0 auto; padding: 16px var(--gutter) 0; }
.page-head a { text-decoration: none; }
.page-house { display: block; width: 100%; height: clamp(150px, 26vw, 300px); max-width: none; object-fit: cover; object-position: 50% 62%; background: var(--panel); margin-top: 12px; }
.text-page { max-width: 780px; margin: 0 auto; padding: 22px var(--gutter) 40px; }
.text-page h1 { font-size: clamp(2.1rem, 8vw, 3.75rem); line-height: 1; letter-spacing: -.03em; max-width: none; }
.text-page h2 { font-size: clamp(1.3rem, 4vw, 1.75rem); margin-top: 28px; line-height: 1.1; }
.text-page p { margin-top: 14px; line-height: 1.5; }
.text-page ul { padding-left: 1.1em; }
.text-page li { margin-top: 6px; }
.text-page .btn { margin-top: 18px; }
.today-box { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 10px; padding: 12px 14px; margin-top: 18px; }
.today-box[data-state='yes'] .bulb { background-image: url(../img/bulb-gold.webp); filter: drop-shadow(0 0 8px var(--glow)); }
.today-box .tline { margin: 0; font-weight: 800; line-height: 1.2; }
.today-box .tmeta { margin: 2px 0 0; color: var(--soft); font-size: .9375rem; line-height: 1.25; }
.today-box .stamp { margin: 0; }
.answer { font: 800 clamp(1.3rem, 4.6vw, 1.75rem)/1.2 var(--body); letter-spacing: -.015em; margin-top: 20px !important; }
.rule-box { border-left: 4px solid var(--glow); padding: 2px 0 2px 14px; margin-top: 22px; }
.rule-box p { margin-top: 4px; }
.rule-box b { color: var(--glow); }
.related { margin-top: 28px; }
.related a { font-weight: 800; }
.fine-print { color: var(--dim); font-size: .9375rem; }
.index-list { columns: 2 280px; column-gap: 28px; margin-top: 8px; padding-left: 0; list-style: none; }
.index-list li { break-inside: avoid; margin-top: 8px; }

/* Wider screens */
@media (min-width: 620px) {
  .contempt .lng { display: inline; }
  .ask-row { grid-template-columns: minmax(0, 1fr) auto; }
  .result { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: center; gap: 28px; }
  .q-answers { grid-template-columns: 1fr 1fr; }
  .exhibit { grid-template-columns: 160px minmax(0, 1fr); margin-left: 54px; }
  .exhibit img { width: 160px; }
  .foot { grid-template-columns: 130px minmax(0, 1fr); }
  .hero-actions .btn, #heroAppeal { flex: 0 1 auto; padding: 0 16px; font-size: 1rem; }
  .row { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 16px; padding: 14px 0; }
  .row::before { left: 25px; }
  .bulb { width: 52px; height: 58px; }
}
@media (min-width: 900px) {
  .hero { min-height: 640px; }
  .house { object-position: 100% 100%; }
  .scrim { background: radial-gradient(ellipse 62% 90% at 50% 52%, rgba(var(--scrim), .82), rgba(var(--scrim), .45) 62%, rgba(var(--scrim), .15)); }
  .masthead { padding: 54px 5vw 0; }
  .masthead .sound { right: 5vw; top: calc(50% + 27px - 22px); }
  .garland { --gap: 58px; height: 54px; }
  .garland i::before, .garland i::after { width: 40px; height: 40px; margin-left: -20px; top: 9px; }
  .masthead .logo { width: 360px; }
  .hero-top { padding: 14px 5vw 0; }
  h1 { font-size: clamp(2.2rem, 3.2vw, 3rem); }
  .word-wrap { margin: 8px auto 0; width: min(44vw, 660px); }
  .word { font-size: min(17vw, 260px); }
  .hero-foot { right: auto; left: 50%; transform: translateX(-50%); width: min(60vw, 760px); padding: 0 0 22px; }
  .line { font-size: clamp(1.6rem, 2.3vw, 2.125rem); }
  .dock { padding-left: 5vw; padding-right: 5vw; }
  .rows { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 34px; }
  .row { grid-column: 1; grid-row: var(--r); }
  .exhibit { grid-column: 2; grid-row: var(--s) / span 6; display: block; margin: 12px 0 0; }
  .exhibit img { width: 100%; }
  .exhibit figcaption { margin-top: 6px; }
  .judge { width: 340px; margin-right: 40px; }
  .report-grid { grid-template-columns: 380px minmax(0, 1fr); align-items: start; }
  .gave-up { grid-template-columns: 360px minmax(0, 1fr); text-align: left; align-items: center; padding: 22px 5vw; }
  .gave-up-btns { justify-content: flex-start; }
}
@media (hover: hover) {
  .row:hover .ask-q { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .btn:hover { filter: brightness(1.1); }
}

/* Tacky Mode */
[data-tacky] {
  --night: #b5121b; --panel: #0a5c2f; --panel-line: #ffe14d; --ink: #fff; --soft: #fff; --dim: #fff; --glow: #ffe14d; --no: #ffe14d; --yes: #ffe14d; --wire: #ffe14d;
  --tacky-font: 'Mountains Of Christmas', var(--body);
}
[data-tacky] .hero { height: calc(100svh - var(--dock-h) - 36px); }
[data-tacky] .rline, [data-tacky] .deck, [data-tacky] .docket, [data-tacky] .exhibit figcaption { text-shadow: 1px 1px 2px #000; }
[data-tacky] body { background-image: repeating-linear-gradient(135deg, #b5121b 0 46px, #0a7a3c 46px 92px); background-attachment: fixed; }
.tacky-ticker { display: none; }
[data-tacky] .tacky-ticker { display: block; position: relative; z-index: 2; overflow: hidden; height: 36px; background: #ffe14d; color: #a3141b; font: 700 1.125rem/36px var(--tacky-font); white-space: nowrap; }
[data-tacky] .tacky-ticker span { display: inline-block; animation: marquee 18s linear infinite; padding-left: 100%; }
@keyframes marquee { to { transform: translateX(-100%); } }
[data-tacky] h1, [data-tacky] h2:not(.notice h2), [data-tacky] .line, [data-tacky] .ask-q, [data-tacky] .q-ask, [data-tacky] .vote-q, [data-tacky] .foot-big { font-family: var(--tacky-font); font-weight: 700; letter-spacing: 0; text-shadow: 2px 2px 0 #0a5c2f, -1px -1px 0 #e0b400; }
[data-tacky] .spine a { color: #fff; font-family: var(--tacky-font); font-weight: 700; text-shadow: 3px 3px 0 #0a5c2f; }
[data-tacky] .stamp { background: #ffe14d; color: #a3141b; padding: 3px 7px; border-radius: 4px; text-shadow: none; animation: blink 1s steps(2) infinite; }
[data-tacky] .stamp[data-state='never'] { background: #fff; color: #0a5c2f; animation: none; }
@keyframes blink { 50% { background: #ff8fb0; } }
[data-tacky] .btn { border: 3px dashed #fff; background: #0a7a3c; color: #fff; font-family: var(--tacky-font); font-size: 1.1875rem; }
[data-tacky] .row:nth-child(odd) { transform: rotate(-.5deg); }
[data-tacky] .row:nth-child(even) { transform: rotate(.4deg); }
[data-tacky] .board::before, [data-tacky] .vote::before, [data-tacky] .ask::before, [data-tacky] .quiz::before, [data-tacky] .report::before, [data-tacky] .faq::before {
  content: ''; display: block; height: 80px; margin-bottom: 16px; background: url(../img/tinsel.webp) center / auto 100% repeat-x;
}
[data-tacky] .dock { background: #ffe14d; color: #0a5c2f; border-top: 4px dashed #d40f1a; --wire: #0a5c2f; --dim: #0a5c2f; --no: #a3141b; --glow: #a3141b; }
/* Whatever the Court does to the page, an ad stays clear and plain */
[data-tacky] .ad-slot { background: #fff; padding: 14px 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-tacky] .tacky-ticker span { padding-left: 0; }
}

/* The printed notice, alone on the page */
@media print {
  @page { margin: .6in; }
  html, body { background: #fff !important; color: #000 !important; }
  body > *:not(main), main > *:not(#report), #report > .section-head, .report-form, .ad-slot { display: none !important; }
  #report { padding: 0 !important; }
  #report::before { display: none !important; }
  .report-grid { display: block; padding: 0; margin: 0; max-width: none; }
  .notice { padding: 0; font-size: 13pt; line-height: 1.5; color: #000; }
  .notice h3 { font-size: 26pt; }
}

/* The narrowest phones: Decorations? and Go Ahead. have to share one line. */
@media (max-width: 350px) {
  .ask-q { font-size: 1.125rem; overflow-wrap: anywhere; }
  .stamp { font-size: 1.0625rem; }
  .ticks span { font-size: .5625rem; }
}

/* The shop */
.shop-band { max-width: var(--max); margin: clamp(52px, 9vw, 100px) auto 0; padding: 0 var(--gutter); display: grid; gap: 22px; align-items: center; }
@media (min-width: 760px) { .shop-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; } }
.shop-pic { display: block; background: #efe7d8; border-radius: 10px; overflow: hidden; }
.shop-band h2 { font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; }
.shop-band .section-lede { margin-top: 10px; color: var(--soft); font-size: 1.1875rem; }
.shop-from { margin: 14px 0; font: 700 1rem/1.3 var(--typed); color: var(--glow); }
.store-head { max-width: var(--max); }
.store-cart { font: 800 1rem/1.2 var(--body); }
.shop-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 22px; }
.shop-card { display: block; text-decoration: none; }
.shop-card h2 { font: 400 clamp(1.75rem, 4vw, 2.5rem)/1.05 var(--display); margin-top: 12px; }
.shop-card p { color: var(--soft); margin-top: 4px; }
.shop-card:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.store { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px; }
.store h1 { font: 400 clamp(3rem, 8vw, 5.5rem)/.95 var(--display); letter-spacing: -.02em; margin: 6px 0 10px; }
#cart-page h1, #thanks-page h1, .store.text-page h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); }
.store.text-page { max-width: 780px; }
.store-crumb { font-size: .9375rem; color: var(--soft); margin-bottom: 14px; }
.store-lede { color: var(--soft); font-size: 1.1875rem; margin-bottom: 14px; }
.store a { color: inherit; }
.eyebrow { font: 700 .9375rem/1.2 var(--typed); color: var(--glow); }
.pdp-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .pdp-grid { grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; } }
.merch-img { position: relative; background: #efe7d8; border-radius: 10px; overflow: hidden; }
.side-btns { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.side-btns .opt-btn { min-height: 44px; min-width: 64px; }
.side-btns .opt-btn[aria-pressed='false'] { background: var(--night); }
.merch-img:has(img.print) { background: var(--garment, #1a1a1a); }
.merch-img img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.merch-img img.print { padding: 14%; }
.pdp-price { font: 800 1.625rem/1.2 var(--body); }
.opt { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.opt legend { padding: 0; margin-bottom: 8px; font: 800 .9375rem/1.3 var(--body); }
.opt legend span { color: var(--soft); font-weight: 500; }
.opt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-btn { min-height: var(--control-h); min-width: 52px; padding: 8px 14px; border: 1.5px solid var(--panel-line); border-radius: 6px; background: var(--panel); color: var(--ink); font: 700 .9375rem/1.2 var(--body); cursor: pointer; }
.opt-btn:hover { border-color: var(--soft); }
.opt-btn[aria-pressed='true'] { background: var(--glow); border-color: var(--glow); color: var(--glow-ink); }
.style-group { margin: 14px 0 6px; font: 700 .8125rem/1.2 var(--typed); letter-spacing: 0; color: var(--soft); }
.style-group:first-child { margin-top: 0; }
.style-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .style-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.style-btn { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 62px; padding: 8px 10px; text-align: left; }
.style-price { font-weight: 500; color: var(--soft); }
.style-btn[aria-pressed='true'] .style-price { color: inherit; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(246, 243, 234, .45); cursor: pointer; }
.swatch[aria-pressed='true'] { outline: 3px solid var(--glow); outline-offset: 2px; }
.pdp-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.pdp-buy .btn { flex: 1 1 220px; }
.btn[disabled] { cursor: not-allowed; }
.fine { font-size: .875rem; color: var(--soft); margin-top: 14px; }
.style-info { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--panel-line); font-size: .9375rem; }
.style-info summary { font-weight: 800; cursor: pointer; }
.style-info ul { margin: 10px 0 0; padding-left: 18px; color: var(--soft); }
.cart-lines { margin-top: 20px; border-top: 1px solid var(--panel-line); }
.cart-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--panel-line); }
.cart-pic { width: 84px; height: 84px; }
.cart-pic img.print { padding: 12%; }
.cart-body .fine { margin-top: 2px; }
.cart-ctl { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.cart-qty { width: 76px; }
.cart-ctl .clear { background: none; border: 0; padding: 4px 2px; color: var(--soft); font: 700 .875rem/1.2 var(--body); text-decoration: underline; cursor: pointer; }
.cart-price { font-weight: 800; }
.cart-foot { max-width: 420px; margin: 24px 0 0 auto; }
.cart-total { display: flex; justify-content: space-between; font-size: 1.125rem; }
.cart-foot .btn { width: 100%; margin-top: 14px; }
.cart-error { color: var(--no); margin-top: 10px; font-size: .9375rem; }
.cart-empty { margin-top: 18px; color: var(--soft); }