/* ============================================================
   STAY AWHILE
   House style, same as the guide and the hub: black ground,
   photographs that dissolve into it, translucent glass on top.
   Photos are graded (never scrimmed) so white type stays readable.

   The page is deliberately short. Three questions, one button, two
   rows of dials. Everything else is a link you can choose to click.
============================================================ */

:root {
  --ground:  #0B0A0C;
  --ink:     #F4EFE9;
  --muted:   #A2988E;
  --faint:   #6E655D;

  --ember:   #FF6B35;   /* deep water   */
  --gold:    #E8B04B;   /* waist deep   */
  --lake:    #5BC8F5;   /* shallow end  */

  --glass:   rgba(255, 255, 255, .045);
  --glass-2: rgba(255, 255, 255, .075);
  --line:    rgba(255, 255, 255, .10);
  --line-2:  rgba(255, 255, 255, .18);

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --grade: saturate(.72) contrast(.88) brightness(.78);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------------- HERO (unchanged — the good half) ---------------- */

.hero {
  position: relative; min-height: 92svh;
  display: flex; align-items: flex-end;
  padding: 0 24px 72px; overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0;
  background: url('../assets/img/hero.jpg') center 38% / cover no-repeat;
  filter: var(--grade);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11,10,12,.55) 0%, rgba(11,10,12,0) 28%,
              rgba(11,10,12,.35) 62%, var(--ground) 100%);
}
.hero-copy { position: relative; z-index: 2; max-width: 720px; }

.eyebrow {
  margin: 0 0 18px; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244,239,233,.72); font-weight: 500;
}
.hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 13vw, 132px); line-height: .92; letter-spacing: -.015em;
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.hero h1 em { font-style: italic; color: var(--gold); }
.lede {
  margin: 26px 0 0; max-width: 30em;
  font-size: clamp(17px, 2.1vw, 20px);
  color: rgba(244,239,233,.9); text-shadow: 0 1px 18px rgba(0,0,0,.5);
}
.count { margin: 14px 0 0; font-size: 13px; letter-spacing: .06em; color: rgba(244,239,233,.62); }

.pill {
  display: inline-block; margin-top: 30px; padding: 13px 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500;
  transition: background .25s, border-color .25s, transform .25s;
}
.pill:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); transform: translateY(-1px); }

.credit {
  position: absolute; right: 20px; bottom: 16px; z-index: 2;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,239,233,.35);
}

/* ---------------- LAYOUT ---------------- */

.wrap {
  max-width: 1040px; margin: 0 auto;
  padding: 76px 24px 40px;
  display: flex; flex-direction: column; gap: 44px;
}

/* ---------------- QUESTIONS OF THE WEEK ---------------- */

.qotw {
  background: linear-gradient(150deg, rgba(232,176,75,.14), rgba(255,107,53,.06));
  border: 1px solid rgba(232,176,75,.34);
  border-radius: 20px; padding: 26px 30px 24px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.qotw-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.qotw-label {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.qotw-date { font-size: 12px; color: var(--faint); }

.week { list-style: none; margin: 0; padding: 0; }
.week-q { padding: 20px 0; border-bottom: 1px solid rgba(232,176,75,.2); }
.week-q:last-child { border-bottom: 0; padding-bottom: 0; }
.week-question {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 3.1vw, 30px); line-height: 1.2; letter-spacing: -.01em;
}
.week-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ============================================================
   THE TABLE — three questions, one button, two rows of dials.
============================================================ */

/* Equal-height cards: it's a hand you've been dealt, not three loose notes.
   .q-text takes up the slack, so the three footers line up along the bottom. */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}

.q {
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.028));
  border: 1px solid var(--line-2);
  border-radius: 18px;
  padding: 22px 22px 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column;
  animation: rise .45s cubic-bezier(.16,1,.3,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.q-depth {
  font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 14px;
}
.q-depth[data-d="light"] { color: var(--lake); }
.q-depth[data-d="warm"]  { color: var(--gold); }
.q-depth[data-d="deep"]  { color: var(--ember); }

/* No font-size here on purpose: js grows it, per card, to the biggest size that
   still fits (see fitQuestion).

   The HEIGHT has to be fixed, not flexed. That was the bug the first time: with
   `flex: 1` the card simply grew to accept whatever size was tried, so every
   question "fitted" at the maximum and then overflowed once the grid re-laid
   out. A box that yields to its contents cannot be a box you fit contents into.

   Fixed height also means all three cards are identical whatever they say, and
   the card can still grow downward when the town's answers open beneath it. */
.q-text {
  height: clamp(185px, 15vw, 235px);
  margin: 0 0 20px;
  font-family: var(--serif); font-weight: 400;
  line-height: 1.14; letter-spacing: -.012em;
  overflow: hidden;
}

.q-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.q-reveal, .q-copy {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; color: var(--faint);
  transition: color .18s;
}
.q-reveal:hover, .q-copy:hover { color: var(--gold); }
.q-copy { flex: none; }

.q-town { margin-top: 16px; }

.trio-empty { grid-column: 1 / -1; margin: 0; padding: 30px 0; color: var(--faint); font-style: italic; }

.deal-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.deal-note { margin: 0; font-size: 13px; color: var(--faint); }

/* ---------------- the dials — the whole filter surface ---------------- */

.dials {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.dial { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dial-label {
  flex: none; width: 68px;
  font-size: 11px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint);
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  padding: 7px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-2);
  color: var(--muted); cursor: pointer;
  font-family: var(--sans); font-size: 13.5px;
  transition: background .18s, border-color .18s, color .18s;
}
.chip:hover { border-color: rgba(255,255,255,.36); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--glass-2); color: var(--ink); border-color: rgba(255,255,255,.44);
}
.chip-depth[aria-pressed="true"][data-d="light"] { background: rgba(91,200,245,.16);  border-color: var(--lake);  color: var(--lake); }
.chip-depth[aria-pressed="true"][data-d="warm"]  { background: rgba(232,176,75,.16);  border-color: var(--gold);  color: var(--gold); }
.chip-depth[aria-pressed="true"][data-d="deep"]  { background: rgba(255,107,53,.16);  border-color: var(--ember); color: var(--ember); }
.chip-burn { margin-left: 8px; }
.chip-burn[aria-pressed="true"] { background: rgba(255,107,53,.16); border-color: var(--ember); color: var(--ember); }

/* ---------------- the two other ways in ----------------
   These used to be two underlined sentences, which is how you dress something
   you want ignored. They're the two best things on the page after the cards, so
   they get to be objects: a real wheel you can see spinning, and a deck of
   cards. */

.ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.way {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--line-2);
  color: var(--ink); cursor: pointer; text-align: left;
  font-family: var(--sans);
  transition: background .2s, border-color .2s, transform .2s;
}
.way:hover { background: var(--glass-2); border-color: rgba(255,255,255,.36); transform: translateY(-1px); }
.way:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.way-icon { flex: none; display: flex; }
.way-icon svg { display: block; }

/* The wheel turns when you reach for it — so it reads as a wheel, not a pie. */
.way-wheel { transform-origin: 20px 20px; transition: transform .9s cubic-bezier(.16,1,.3,1); }
.way:hover .way-wheel { transform: rotate(150deg); }

.way-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.way-text strong { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.way-text small { font-size: 12.5px; color: var(--muted); font-weight: 300; }

.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font-family: var(--sans); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--line-2);
}
.linkish:hover { color: var(--gold); text-decoration-color: var(--gold); }

/* ---------------- BUTTONS ---------------- */

.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: 12px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s, opacity .2s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-go { background: var(--ember); color: #14100E; border-color: var(--ember); font-weight: 600; }
.btn-go:hover:not(:disabled) { background: #ff835a; border-color: #ff835a; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: var(--glass-2); border-color: rgba(255,255,255,.35); }
.btn-quiet { background: var(--glass-2); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover:not(:disabled) { background: rgba(255,255,255,.12); }

/* ---------------- PANELS (wheel, whole deck) ---------------- */

.panel {
  position: relative;
  background: var(--glass); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.panel-head h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 34px); line-height: 1.1; letter-spacing: -.01em;
}
.panel-head p { margin: 8px 0 0; max-width: 52ch; color: var(--muted); font-size: 14.5px; }
.panel-close {
  position: absolute; top: 20px; right: 22px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--glass-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.panel-close:hover { background: var(--ember); color: #14100E; border-color: var(--ember); }

/* ---------------- the wheel ---------------- */

.namer { display: flex; gap: 10px; margin-top: 22px; }
.namer input {
  flex: 1; min-width: 0; padding: 12px 18px; border-radius: 999px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--sans); font-size: 15px;
}
.namer input::placeholder { color: var(--faint); }
.namer input:focus { outline: none; border-color: var(--gold); }

.players { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.player {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 8px 7px 15px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--line);
  font-size: 14px; font-weight: 500;
}
.player .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.player button {
  width: 21px; height: 21px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.09); color: var(--muted); font-size: 13px; line-height: 1;
}
.player button:hover { background: var(--ember); color: #14100E; }

.switch {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  cursor: pointer;
}
.switch input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--ember); flex: none; }
.switch span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.switch strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 1px; }
.switch select {
  display: block; margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: rgba(0,0,0,.3); border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--sans); font-size: 13px;
}
.switch select:disabled { opacity: .45; }

.wheel-stage {
  position: relative; margin-top: 30px;
  display: flex; flex-direction: column; align-items: center;
}
.wheel-wrap { position: relative; width: min(300px, 74vw); height: min(300px, 74vw); }
.wheel {
  width: 100%; height: 100%; border-radius: 50%;
  position: relative; overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 0 0 8px rgba(0,0,0,.22);
  transition: transform 4s cubic-bezier(.16, 1, .3, 1);
}
.wheel svg { display: block; }
.pointer {
  position: absolute; top: -2px; left: 50%; z-index: 3; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid var(--ink);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88px; height: 88px; border-radius: 50%;
  background: #131013; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--serif); font-size: 21px; cursor: pointer; z-index: 2;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  transition: background .2s, color .2s, transform .15s;
}
.wheel-hub:hover:not(:disabled) { background: var(--ember); color: #14100E; }
.wheel-hub:active:not(:disabled) { transform: translate(-50%,-50%) scale(.96); }
.wheel-hub:disabled { cursor: default; opacity: .75; }

.whose-turn {
  margin: 24px 0 0; min-height: 1.3em;
  font-family: var(--serif); font-size: clamp(22px, 3.4vw, 28px);
  text-align: center; letter-spacing: -.01em;
}
.whose-turn em { font-style: italic; color: var(--gold); }

.card {
  width: 100%; margin-top: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--line-2); border-radius: 18px;
  padding: 24px 24px 20px;
  animation: rise .45s cubic-bezier(.16,1,.3,1);
}
.card .q-text { height: clamp(130px, 15vh, 180px); margin-bottom: 0; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------------- the answer timer ---------------- */

.timer { display: flex; align-items: center; gap: 13px; margin-top: 20px; }
.timer-track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.timer-bar { height: 100%; width: 100%; background: var(--gold); }
.timer-left {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--muted); min-width: 42px; text-align: right;
}
.timer-more {
  background: none; border: 1px solid var(--line-2); border-radius: 999px;
  padding: 4px 11px; cursor: pointer; color: var(--muted);
  font-family: var(--sans); font-size: 12px;
}
.timer-more:hover { color: var(--ink); border-color: rgba(255,255,255,.35); }
.timer.up .timer-bar { background: var(--ember); }
.timer.up .timer-left { color: var(--ember); font-weight: 600; }

/* ---------------- the whole deck ---------------- */

.all-search {
  width: 100%; margin-top: 22px;
  padding: 12px 18px; border-radius: 999px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--sans); font-size: 15px;
}
.all-search::placeholder { color: var(--faint); }
.all-search:focus { outline: none; border-color: var(--gold); }

.all-list {
  list-style: none; margin: 20px 0 0; padding: 0;
  max-height: 60vh; overflow-y: auto;
  columns: 2; column-gap: 28px;
}
.all-list li { break-inside: avoid; margin-bottom: 2px; }
.all-q {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: 0; padding: 7px 6px; border-radius: 8px;
  text-align: left; cursor: pointer;
  color: var(--muted); font-family: var(--sans); font-size: 14px; line-height: 1.4;
}
.all-q:hover { background: var(--glass-2); color: var(--ink); }
.all-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-1px); }
.all-dot[data-d="light"] { background: var(--lake); }
.all-dot[data-d="warm"]  { background: var(--gold); }
.all-dot[data-d="deep"]  { background: var(--ember); }

/* ---------------- the town ---------------- */

.town-list { display: flex; flex-direction: column; gap: 9px; }
.answer { padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.26); border: 1px solid var(--line); }
.answer p { margin: 0; font-size: 14px; color: rgba(244,239,233,.94); white-space: pre-wrap; }
.answer-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.answer-meta .who { color: var(--gold); font-weight: 500; }
.answer-empty { color: var(--faint); font-size: 13.5px; font-style: italic; margin: 0; }

.answer-heart {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  color: var(--faint); font-family: var(--sans); font-size: 11.5px;
  font-variant-numeric: tabular-nums; transition: color .18s, transform .15s;
}
.answer-heart:hover:not(:disabled) { color: var(--ember); transform: scale(1.08); }
.answer-heart.on { color: var(--ember); }
.answer-heart:disabled { cursor: default; }

.answer-flag {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--faint); font-size: 11px; text-decoration: underline; text-underline-offset: 2px;
}
.answer-flag:hover { color: var(--ember); }
.answer-flag:disabled { opacity: .5; cursor: default; text-decoration: none; }

.town-status { margin: 10px 0 0; font-size: 12.5px; color: var(--gold); }

/* ---------------- the answer box ----------------
   Always on the card, never behind a click — but one quiet line tall, muted,
   and it says "optional" on it. Nobody has to write anything to play this, and
   the box has to look like it knows that. It grows as you type; the name field
   only turns up once there's something worth signing. */

.q-answer { margin-bottom: 16px; }

.ans-row { display: flex; align-items: flex-end; gap: 8px; }

.ans {
  flex: 1; min-width: 0;
  min-height: 38px; max-height: 150px;
  padding: 9px 13px; border-radius: 11px;
  background: rgba(0, 0, 0, .24);
  border: 1px solid var(--line);
  color: var(--ink); font-family: var(--sans); font-size: 13.5px;
  line-height: 1.45; resize: none; overflow-y: auto;
  transition: border-color .18s, background .18s;
}
.ans::placeholder { color: var(--faint); }
.ans:focus {
  outline: none;
  border-color: rgba(232, 176, 75, .55);
  background: rgba(0, 0, 0, .34);
}

.ans-go {
  flex: none; width: 34px; height: 34px; margin-bottom: 2px;
  border-radius: 50%; cursor: pointer;
  background: var(--ember); border: 1px solid var(--ember); color: #14100E;
  font-size: 15px; line-height: 1;
  transition: opacity .18s, transform .15s;
}
.ans-go:hover:not(:disabled) { transform: translateY(-1px); }
/* Dormant until there's something to send — so an empty card reads as "you
   don't have to", not "you haven't yet". */
.ans-go:disabled {
  background: transparent; border-color: var(--line);
  color: var(--faint); cursor: default;
}

.ans-more {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px;
}
.ans-name {
  flex: none; width: 140px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .24); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--sans); font-size: 12.5px;
}
.ans-name::placeholder { color: var(--faint); }
.ans-name:focus { outline: none; border-color: rgba(232, 176, 75, .55); }
.ans-note { font-size: 11.5px; color: var(--faint); }

/* ---------------- one question, by link ---------------- */

.single { padding-top: 40px; }
.single .wrap { gap: 24px; }
.q-open { max-width: 720px; margin: 0 auto; width: 100%; }
.q-open .q-text { height: clamp(200px, 26vh, 300px); }
.single .back { margin: 0; display: flex; justify-content: center; }

/* ---------------- FOOT ---------------- */

.foot {
  max-width: 1040px; margin: 0 auto; padding: 36px 24px 60px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--faint);
}
.foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.foot a:hover { color: var(--ink); }

/* ---------------- SMALL SCREENS ---------------- */

@media (max-width: 900px) {
  .trio { grid-template-columns: 1fr; }
  .all-list { columns: 1; }
  .ways { grid-template-columns: 1fr; }
  /* One column: nothing to line up with, so the box hugs the question rather
     than padding every card out to a common height. Vertical space is cheap on
     a phone; a half-empty card is not. Size is fluid here, not js-fitted. */
  .q-text {
    height: auto;
    min-height: 0;
    /* overflow:hidden exists only to make the desktop fit measurable. With an
       auto height there is nothing to clip, and leaving it on shaves the tails
       off descenders in a serif this size. */
    overflow: visible;
    font-size: clamp(32px, 9.4vw, 42px);
    margin-bottom: 24px;
  }
}

@media (max-width: 640px) {
  .wrap { padding: 52px 16px 30px; gap: 34px; }
  .hero { padding: 0 20px 56px; }
  .panel, .qotw { padding: 22px 18px; border-radius: 16px; }
  .dial { align-items: flex-start; }
  .dial-label { width: 100%; }
  .chip-burn { margin-left: 0; }
  .deal-row .btn, .week-actions .btn { flex: 1 1 auto; }
  .foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .wheel { transition-duration: .8s; }
  .q, .card { animation: none; }
  html { scroll-behavior: auto; }
}