/* ============================================================
   DA DAILY JUQ (beta, mockup only, /mockups/daily/)

   The homepage with a third daily. The paper opens from its card beside the
   Heist and the Panel, in their overlay shell (.overlay, .mid, .panel from
   juq.css), with an opening of its own: the Heist opens a vault, the Panel a
   case file, and the paper is THROWN, spinning in like the front page in an
   old film. Every class is dy- or dj- prefixed (juq.css owns the short
   names) and every colour is a token, so the paper wears the viewer's skin.
   ============================================================ */

/* ---------- the homepage row, three wide ----------
   Live, juq.css's .featured-row takes the third column itself; here the
   mockup widens its copy of the row. Two classes, so the narrow rule has to
   be restated or the three would squeeze onto a phone. */
.featured-row.dy-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* a third of the row is too narrow for the pair's title size: "The JuqBuq
   Heist" broke onto two lines and dropped its button below the other two.
   A size down, and the buttons pinned to the bottom whatever the titles do. */
.featured-row.dy-three .featured { grid-template-rows: 1fr auto; }
.featured-row.dy-three .featured .disp { font-size: clamp(26px, 2.5vw, 36px); }
@media (max-width: 860px) { .featured-row.dy-three { grid-template-columns: minmax(0, 1fr); } }

/* OBJECT SIZES, not type steps: the thrown paper is a thing at a fixed size,
   and its masthead and headline are display sizes past the type ramp. Named
   here so they move together and the drift check has something honest to
   read (the Panel's folder does the same). */
.dj-wrap { --dj-toss-w: 500px; --dj-toss-h: 350px; --dj-mast: 44px; --dj-hed: 34px; --dj-gap: 3vh; }

/* ---------- the popup ----------
   Anchored to a fixed top like the Panel's, because each page of the paper
   is a different height and a centred popup would jump on every turn. Wider
   than the games: a newspaper needs its columns. */
.dj-wrap { align-items: start; padding-top: var(--dj-gap); padding-bottom: var(--dj-gap); }
.dj-wrap .mid { align-items: start; }
.dj-wrap .panel { width: 1180px; max-width: 96vw; max-height: calc(100vh - var(--dj-gap) * 2); max-height: calc(100dvh - var(--dj-gap) * 2); transform-origin: center; }
.dj-wrap .tabs .p-bank { font-weight: 700; }

/* ---------- THE THROW ----------
   Pinned to the viewport's centre, never to the popup behind it (panel.css
   explains why). Two full turns out of nothing, an overshoot so it lands
   rather than stops, and a resting tilt, because a thrown paper never lands
   square. Then the paper you read grows out of it: daily-mockup.js measures
   the two boxes and djEmerge carries the popup from the thrown paper's
   rectangle to its own. */
@keyframes djSpin {
  0% { opacity: 0; transform: rotate(-720deg) scale(0.03); }
  14% { opacity: 1; }
  76% { transform: rotate(-1deg) scale(1.07); }
  90% { transform: rotate(-4deg) scale(0.985); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}
@keyframes djGone { from { opacity: 1; transform: rotate(-3deg) scale(1); } to { opacity: 0; transform: rotate(-3deg) scale(1.08); } }
@keyframes djEmerge {
  from { transform: translate(var(--dj-dx, 0px), var(--dj-dy, 0px)) rotate(-3deg) scale(var(--dj-s, 0.4)); opacity: 0; }
  16% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
.dj-toss {
  position: fixed; z-index: 2; top: 50%; left: 50%;
  width: var(--dj-toss-w); height: var(--dj-toss-h);
  margin: calc(var(--dj-toss-h) / -2) 0 0 calc(var(--dj-toss-w) / -2);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: var(--radius); box-shadow: 9px 9px 0 var(--accent);
  opacity: 0; transform: rotate(-3deg); pointer-events: none;
}
.dj-wrap.show .dj-toss { opacity: 1; animation: djSpin 0.9s cubic-bezier(0.15, 0.7, 0.3, 1) 0.05s backwards; }
.dj-wrap.open .dj-toss { animation: djGone 0.28s ease-in 0.3s forwards; }
/* LIFTED OFF THE HOMEPAGE CARD instead (daily.js liftFrom): from the card's
   own front page, its place, size and tilt (--dj-fx, --dj-fy, --dj-fs),
   SPINNING up to the middle the way the thrown one spins in (the user,
   2026-10-08: the spin is the paper's), two full turns on the same curve,
   a little past full size so it is caught rather than parked, and down to
   its resting tilt. -723deg IS the card's -3deg, two turns back, and every
   frame names the same three steps (translate, rotate, scale) so the turns
   are turned rather than worked out as one matrix, which would skip them.
   The sound is timed to these turns (daily.js TURNS, LANDS). */
@keyframes djLift {
  0% { transform: translate(var(--dj-fx, 0px), var(--dj-fy, 0px)) rotate(-723deg) scale(var(--dj-fs, 0.5)); }
  76% { transform: translate(0px, 0px) rotate(-1deg) scale(1.07); }
  90% { transform: translate(0px, 0px) rotate(-4deg) scale(0.985); }
  100% { transform: translate(0px, 0px) rotate(-3deg) scale(1); }
}
.dj-wrap.show.lift .dj-toss { animation: djLift 0.9s cubic-bezier(0.15, 0.7, 0.3, 1) both; }
/* THE PAPER IS SOLID FROM ITS FIRST FRAME: the overlay fades in as a whole,
   which made the lifted paper a ghost of itself on the way up. Lifting, the
   layer is there at once and only its dimming fades in behind the paper. */
.dj-wrap.lift { opacity: 1; transition: background-color 0.3s ease; }
.dj-wrap.lift:not(.show) { background-color: transparent; }
.dj-wrap.open.lift .dj-toss { animation: djGone 0.28s ease-in 0.3s forwards; }
.dj-wrap.open .panel { z-index: 3; animation: djEmerge 0.62s cubic-bezier(0.2, 0.85, 0.25, 1) 0.04s both; }
/* ABOVE THE FOLD, like a real front page: the masthead, the date, the
   headline and its deck. It takes the room it needs and never shares it:
   the body below cannot reach up into the headline, whatever its length. */
.dj-toss-top { flex: none; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7) var(--s-7) var(--s-5); }
.dj-toss-mast { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--dj-mast); letter-spacing: -0.05em; line-height: 0.9; text-align: center; white-space: nowrap; }
.dj-toss-mast em { color: var(--accent); }
.dj-toss-date { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; border-top: var(--bw) solid var(--ink); border-bottom: 1px solid var(--ink); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: var(--ls-label); text-transform: uppercase; white-space: nowrap; }
.dj-toss-hed { margin-top: var(--s-1); font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--dj-hed); letter-spacing: -0.035em; line-height: 0.95; text-wrap: balance; }
.dj-toss-hed em { font-style: inherit; color: var(--accent-ink); background: var(--accent); padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dj-toss-deck { margin: var(--s-1) 0 0; font-size: var(--t-sm); line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* BELOW THE FOLD: the crease, the lower half a shade into it, two columns
   of type and the cartoon as the front page's picture */
.dj-toss-below { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-5) var(--s-7) var(--s-6); border-top: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--shadow), transparent 40%); overflow: hidden; }
.dj-toss-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-content: start; }
.dj-toss-cols div { display: grid; gap: var(--s-2); align-content: start; }
.dj-toss-cols i { display: block; height: 5px; border-radius: 1px; background: var(--line-strong); }
.dj-toss-cols i.s { width: 55%; }

/* the paper's number chip, with the papers either side */
.dj-wrap .tabs .p-bank { display: inline-flex; align-items: center; gap: var(--s-2); }
.dj-edn { cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; font: inherit; font-size: var(--t-lg); line-height: 1; color: var(--ink); background: none; border: var(--bw) solid var(--line-strong); border-radius: var(--radius); }
.dj-edn:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dj-edn:disabled { opacity: 0.35; cursor: default; }
/* the speaker, where the homepage card lifts the paper (daily.js speaker) */
.dj-wrap .dj-snd { margin-left: var(--s-3); }
.dj-snd svg { width: 16px; height: 16px; }
.dj-snd[aria-pressed="false"] { color: var(--muted); }

/* ---------- the paper, inside the popup, and how its pages turn ---------- */
.dy-paper { position: relative; padding: var(--s-8) var(--s-9) var(--s-9); perspective: 1800px; }
.dy-sheet { transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .dy-sheet.out-fwd { animation: dy-out-fwd 0.22s ease-in forwards; }
  .dy-sheet.in-fwd { animation: dy-in-fwd 0.34s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
  .dy-sheet.out-back { animation: dy-out-back 0.22s ease-in forwards; transform-origin: 100% 50%; }
  .dy-sheet.in-back { animation: dy-in-back 0.34s cubic-bezier(0.2, 0.8, 0.25, 1) both; transform-origin: 100% 50%; }
  /* the date lands as the paper finishes growing, once an opening */
  .dy-paper.stamp .dy-dateline b { animation: dy-stamp 0.34s cubic-bezier(0.3, 1.4, 0.5, 1) 1.8s both; }
}
@keyframes dy-out-fwd { to { opacity: 0; transform: rotateY(-10deg) translateX(-3%); } }
@keyframes dy-in-fwd { from { opacity: 0; transform: rotateY(8deg) translateX(3%); } to { opacity: 1; transform: none; } }
@keyframes dy-out-back { to { opacity: 0; transform: rotateY(10deg) translateX(3%); } }
@keyframes dy-in-back { from { opacity: 0; transform: rotateY(-8deg) translateX(-3%); } to { opacity: 1; transform: none; } }
@keyframes dy-stamp { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dj-toss { display: none; }
  .dj-wrap .panel { animation: none !important; }
}


/* ---------- masthead, ears, dateline, folio ---------- */
.dy-mast { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.dy-mast h1 { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(44px, 7.4vw, 92px); letter-spacing: -0.05em; line-height: 0.86; margin: 0; text-align: center; white-space: nowrap; }
.dy-mast h1 em { color: var(--accent); }
.dy-tagline { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: var(--t-md); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); margin-top: var(--s-3); text-align: center; }
.dy-ear { border: var(--bw) solid var(--ink); padding: var(--s-4) var(--s-5); font-size: var(--t-sm); line-height: 1.45; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--s-1); }
.dy-ear .u-lbl { color: var(--ink); }
.dy-ear-big { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); line-height: 1.05; }
.dy-ear small { color: var(--muted); font-size: var(--t-sm); }
/* the weather ear: the word, the chance, the day */
.dy-ear-w .dy-ear-big { font-size: var(--t-h1); }
.dy-wx { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.dy-wx-pct { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--muted); }
/* the Forecaster's face, upright beside the word; "Partly cloudy" is set a size down so the ear stays one line */
.dy-wx-face { font-style: normal; margin-right: 0.18em; }
.dy-ear-w .dy-ear-big.dy-long { font-size: var(--t-h3); }
/* the other ear: the quote of the night, the chatter's face and name under it */
.dy-ear-q q { display: block; font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: var(--t-lg); line-height: 1.3; quotes: "\201C" "\201D"; text-wrap: balance; overflow-wrap: anywhere; }
.dy-by { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
.dy-dateline {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: var(--s-5); margin-top: var(--s-6); padding: var(--s-3) 0;
  border-top: var(--bw) solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.dy-dateline b { display: inline-block; font-weight: 700; text-align: center; }
.dy-dateline > span:last-child { text-align: right; }
/* who wrote this paper: the beta's own note, so they can be compared */
.dy-betanote { margin: var(--s-2) 0 0; font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.dy-folio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding-bottom: var(--s-3); border-bottom: var(--bw) solid var(--ink); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.dy-folio strong { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--t-h2); letter-spacing: -0.03em; text-transform: uppercase; }
.dy-folio strong em { color: var(--accent); }
.dy-section-h { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 0.95; margin: var(--s-7) 0 var(--s-6); }
.dy-section-h em { color: var(--accent); }

/* ---------- people and emotes in the text ---------- */
.dy-face { width: 22px; height: 22px; flex: none; overflow: hidden; display: inline-grid; place-items: center; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; vertical-align: middle; }
.dy-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dy-face-lg { width: 40px; height: 40px; font-size: var(--t-mono); }
.dy-face-xl { width: 64px; height: 64px; font-size: var(--t-md); }
.dy-who { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); text-decoration: none; vertical-align: baseline; font-size: var(--t-sm); }
.dy-who b { font-weight: 700; }
.dy-who .dy-face { width: 20px; height: 20px; }
/* a name inside a sentence: the sentence's own font and size, a small face */
.dy-who-p { display: inline; font-size: inherit; white-space: nowrap; }
.dy-who-p .dy-face { width: 1.15em; height: 1.15em; margin-right: 0.3em; vertical-align: -0.18em; }
.dy-face-md { width: 32px; height: 32px; }
a.dy-who:hover b { color: var(--accent); text-decoration: underline; }
.dy-when { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
.dy-emote { height: 1.6em; width: auto; vertical-align: middle; margin: -0.3em 0.05em; }
.dy-aside { margin: var(--s-4) 0 0; font-size: var(--t-sm); line-height: 1.5; font-style: italic; color: var(--muted); }
.dy-paper a:not(.dy-who):not(.btn) { color: inherit; text-decoration: none; }

/* ---------- headlines: the beat above, the payoff in the accent ---------- */
.dy-kicker { display: inline-block; margin-bottom: var(--s-4); padding: var(--s-1) var(--s-3); border-radius: var(--radius); background: var(--ink); color: var(--surface); font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; }
.dy-headline em, .dy-second h3 em, .dy-teaser b em { font-style: inherit; color: var(--accent); }
/* a page's lead marks both ends of the joke, alternating like the masthead
   (*Da* Daily *Juq*): the setup in the accent, the punchline in a block of it */
.dy-hit em:last-of-type { color: var(--accent-ink); background: var(--accent); padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- A1 ---------- */
.dy-front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-9); margin-top: var(--s-8); }
.dy-headline { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 4.8vw, 62px); letter-spacing: -0.035em; line-height: 0.92; margin: 0; text-wrap: balance; }
.dy-headline-b { font-size: clamp(28px, 3.4vw, 44px); }
/* the accent block hangs below the line box, so the deck stands off it */
.dy-hit + .dy-deck { margin-top: var(--s-7); }
.dy-deck { font-size: var(--t-lg); line-height: 1.5; color: var(--muted); margin: var(--s-5) 0 var(--s-6); max-width: 58ch; }
.dy-cols { column-count: 2; column-gap: var(--s-8); column-rule: 1px solid var(--line); }
.dy-cols p { font-size: var(--t-md); line-height: 1.65; margin: 0 0 var(--s-5); }
.dy-q { break-inside: avoid; margin: 0 0 var(--s-5); padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 3px solid var(--accent); }
.dy-q q { display: block; font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: var(--t-h3); line-height: 1.3; quotes: "\201C" "\201D"; margin-bottom: var(--s-2); overflow-wrap: anywhere; }
/* a quote inside a box (the loyalty corner): the box's size, not the page's */
.dy-q-s { margin: var(--s-4) 0 0; }
.dy-q-s q { font-size: var(--t-md); }
.dy-q figcaption { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dy-box { border-top: var(--bw) solid var(--ink); padding-top: var(--s-4); }
.dy-box + .dy-box { margin-top: var(--s-8); }
.dy-box-h { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: var(--s-4); display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.dy-box-h span { color: var(--muted); font-weight: 400; }
.dy-big { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--t-h1); line-height: 1; font-variant-numeric: tabular-nums; }
.dy-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
.dy-nums .u-lbl { display: block; margin-top: var(--s-1); }
/* PLAYED WRAPS (2026-10-01): u-row keeps its value on one line, and a night
   of five games ran off the side of the paper */
.dy-played { justify-content: flex-start; align-items: baseline; }
.dy-played b { white-space: normal; min-width: 0; overflow-wrap: break-word; }
/* A RECORD: tonight beat every earlier paper (2026-10-09) */
.dy-record { margin: var(--s-4) 0 0; font-size: var(--t-sm); line-height: 1.4; }
.dy-record b { margin-right: var(--s-2); padding: 1px var(--s-2); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius); }
.dy-word { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.03em; line-height: 1; color: var(--accent); margin-bottom: var(--s-3); overflow-wrap: anywhere; }
.dy-motto { margin-top: var(--s-9); padding: var(--s-7) var(--s-6); text-align: center; border-top: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); }
.dy-motto q { display: block; font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: var(--t-h2); line-height: 1.3; quotes: "\201C" "\201D"; max-width: 46ch; margin: var(--s-3) auto 0; text-wrap: balance; }
.dy-teasers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); margin-top: var(--s-8); }
.dy-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: center; text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: none; padding: var(--s-5); border: var(--bw) solid var(--ink); border-radius: 0; }
.dy-teaser:hover { background: var(--accent-soft); }
.dy-teaser .dy-go { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-top: var(--s-3); display: block; }
.dy-teaser b { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); display: block; line-height: 1.05; margin-top: var(--s-1); }
.dy-teaser p { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
/* the teaser's art: the blotter's mugshots */
.dy-mugs { display: grid; grid-template-columns: repeat(2, auto); gap: var(--s-1); }

/* ---------- B1: the lead and chat's own words ---------- */
.dy-leadb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-9); align-items: start; }
/* a story reads in short paragraphs at a comfortable measure */
.dy-story p { font-size: var(--t-md); line-height: 1.7; margin: 0 0 var(--s-5); max-width: 62ch; }
.dy-story .dy-deck { font-size: var(--t-lg); color: var(--ink); opacity: 0.8; }
.dy-overheard { border: var(--bw) solid var(--ink); padding: var(--s-5) var(--s-6); background: var(--bg); }
/* the box of a story moved up to the front page, under its columns */
.dy-frontbox { margin-top: var(--s-6); }
/* one line a message, the way chat reads */
.dy-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.dy-log li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.dy-log-t { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
.dy-log p { margin: 0; font-size: var(--t-sm); line-height: 1.55; overflow-wrap: anywhere; }
.dy-colon { color: var(--muted); }
.dy-log-sys p { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--accent); }
/* the two smaller stories, half the page each, a column rule between them */
.dy-second { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--bw) solid var(--ink); align-items: stretch; }
.dy-second .dy-story + .dy-story { position: relative; }
.dy-second .dy-story + .dy-story::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--s-9) / -2); border-left: 1px solid var(--line); }
.dy-second .dy-overheard { margin: var(--s-5) 0; }
.dy-second h3 { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h2); letter-spacing: -0.02em; line-height: 1; margin: 0 0 var(--s-4); text-wrap: balance; }
.dy-second .dy-story p { font-size: var(--t-sm); line-height: 1.65; }
.dy-deck-s { font-weight: 700; }
.dy-second .dy-q q { font-size: var(--t-lg); }
/* the snap six, as a roster */
.dy-roster { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); }
.dy-roster li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.dy-roster li .dy-face { width: 30px; height: 30px; }
.dy-roster span { display: grid; min-width: 0; }
.dy-roster .dy-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-roster small { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
/* what the roster typed, above them, emotes at twice text height; a member who
   typed something else shows it under their sentence */
.dy-typed { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.dy-typed .dy-lab { margin: 0; }
.dy-typed p { margin: 0; font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.dy-typed .dy-emote { height: 2.2em; margin: -0.4em 0.05em; }
.dy-roster-own { font-style: normal; font-size: var(--t-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the deep fry order's co-signers, as a row of faces */
.dy-signed { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-5); }
/* wowzer135's half hour, as a timeline */
.dy-steps { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: 0; }
.dy-steps li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line); align-items: start; }
.dy-steps li:first-child { border-top: 0; padding-top: 0; }
.dy-step-t { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); padding-top: var(--s-1); }
.dy-steps b { font-size: var(--t-sm); }
.dy-steps q { display: block; margin-top: var(--s-2); font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--t-sm); line-height: 1.4; quotes: "\201C" "\201D"; }
.dy-step-s { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-md); color: var(--accent); white-space: nowrap; }

/* ---------- B1: the story kit's other shapes ---------- */
/* the vote: a bar per answer, how many chose it */
.dy-vote { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.dy-vote-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 44px; gap: var(--s-3); align-items: center; }
.dy-vote-row b { font-family: var(--f-display); font-weight: 900; font-style: italic; font-size: var(--t-lg); }
.dy-vote-bar { display: block; height: 14px; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.dy-vote-bar i { display: block; height: 100%; background: var(--accent); }
/* the storm: the emote, large, and how many sent it */
.dy-storm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; margin: 0 0 var(--s-4); }
.dy-storm img { width: 72px; height: 72px; object-fit: contain; }
.dy-storm small { display: block; margin-top: var(--s-1); font-size: var(--t-sm); color: var(--muted); }
/* the duel: two faces squared up, then the exchange */
.dy-duel-h { display: flex; align-items: center; gap: var(--s-4); margin: 0 0 var(--s-4); }
.dy-duel-h b { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); color: var(--accent); }
/* the clip: a link to watch it */
.dy-clip { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); border: var(--bw) solid var(--ink); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.dy-clip b { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-h3); }
.dy-clip small { color: var(--muted); font-size: var(--t-sm); }
.dy-clip:hover b { color: var(--accent); }
/* the new word: a dictionary entry */
.dy-dict { margin: 0 0 var(--s-4); padding-left: var(--s-5); border-left: 3px solid var(--accent); }
.dy-dict > b { font-family: var(--f-display); font-weight: 900; font-size: var(--t-h2); }
.dy-dict-pos { margin-left: var(--s-3); font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.dy-dict p { margin: var(--s-2) 0; font-size: var(--t-md); font-style: italic; }
.dy-dict small { font-size: var(--t-sm); color: var(--muted); }
/* the word of the day's definition, in his voice (2026-10-01) */
.dy-wod-def { margin: var(--s-3) 0 var(--s-2); font-size: var(--t-md); font-style: italic; line-height: 1.45; }
/* the chart: messages every five minutes */
.dy-chart svg { width: 100%; height: 70px; display: block; overflow: visible; }
.dy-withheld { font-style: italic; color: var(--muted); }

/* ---------- B1: the blotter, one case a row, with its evidence ----------
   Each case reads like a charge sheet: the label beside its answer, one
   line each, so a row is only as tall as its evidence. */
.dy-blotter-box { margin-top: var(--s-10); }
.dy-blotter { list-style: none; margin: 0; padding: 0; display: grid; }
.dy-case { display: grid; grid-template-columns: 72px minmax(0, 1fr) 200px; gap: var(--s-6); padding: var(--s-5) 0; border-top: 1px solid var(--line); align-items: start; }
.dy-case:first-child { border-top: 0; padding-top: var(--s-2); }
.dy-case-faces { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.dy-lab { display: block; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.dy-case-main { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: var(--s-3) var(--s-5); align-items: baseline; }
.dy-case-main .dy-lab { margin: 0; }
.dy-case-who { font-size: var(--t-md); line-height: 1.5; }
.dy-case-who .dy-who { font-size: inherit; }
/* PRIORS: the earlier papers, each a button back to it (2026-10-09) */
.dy-priors { margin: 0; }
.dy-prior { padding: 0; font: inherit; color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dy-prior:hover, .dy-prior:focus-visible { color: var(--ink); outline: none; }
.dy-comma { color: var(--muted); }
.dy-case-main p { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.dy-case-side { display: grid; gap: var(--s-1); padding-left: var(--s-6); border-left: 1px solid var(--line); }
.dy-case-side b { font-family: var(--f-display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: var(--t-lg); line-height: 1.15; color: var(--accent); }
.dy-case-side .dy-when { margin-top: var(--s-1); }
/* exhibits: the message as typed, lettered A, B, C */
.dy-exhibits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); justify-items: start; }
.dy-ex { max-width: 100%; display: grid; grid-template-columns: 14px 58px minmax(0, 1fr) auto; gap: var(--s-3); align-items: baseline; padding: var(--s-1) var(--s-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.dy-ex-k { font-family: var(--f-mono); font-size: var(--t-mono); font-weight: 700; color: var(--accent); }
.dy-ex-say { font-size: var(--t-sm); line-height: 1.5; overflow-wrap: anywhere; }
.dy-ex-note { grid-column: 3 / -1; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
/* the worst is sealed: bars until the reader presses Reveal */
.dy-sealed { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; vertical-align: middle; }
.dy-sealed i { display: block; height: 12px; border-radius: 2px; background: var(--ink); }
.dy-sealed i:nth-child(1) { width: 64px; }
.dy-sealed i:nth-child(2) { width: 36px; }
.dy-sealed i:nth-child(3) { width: 92px; }
.dy-sealed small { margin-left: var(--s-2); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dy-ex-sealed .dy-ex-text { display: none; }
.dy-ex-sealed.open .dy-ex-text { display: inline; }
.dy-ex-sealed.open .dy-sealed { display: none; }
.dy-unseal { font-family: var(--f-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--s-1) var(--s-3); cursor: pointer; color: var(--accent); background: none; border: var(--bw) solid var(--accent); border-radius: var(--radius); }
.dy-unseal:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- B1: the rest ---------- */
.dy-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); margin-top: var(--s-10); align-items: start; }
.dy-market { display: grid; }
.dy-tick { display: grid; grid-template-columns: 26px minmax(0, 1fr) 64px auto 62px; gap: var(--s-3); align-items: center; width: 100%; padding: var(--s-2) 0; background: none; border: 0; border-top: 1px solid var(--line); font-family: var(--f-mono); font-size: var(--t-mono); color: var(--ink); cursor: pointer; text-align: left; }
.dy-tick:first-child { border-top: 0; }
.dy-tick img { width: 24px; height: 24px; object-fit: contain; }
.dy-tick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dy-tick:hover b, .dy-tick.on b { color: var(--accent); }
.dy-sp svg { width: 64px; height: 22px; display: block; overflow: visible; }
.dy-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.dy-chg { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.dy-up { color: var(--ok); }
.dy-down { color: var(--muted); }
.dy-tickbig { padding: var(--s-4) 0 var(--s-3); border-top: 1px solid var(--line); }
.dy-tickbig[hidden] { display: none; }
.dy-tickbig svg { width: 100%; height: 80px; display: block; overflow: visible; }
.dy-tickaxis { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); }
.dy-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.dy-person small { display: block; font-size: var(--t-sm); color: var(--muted); line-height: 1.45; margin-top: var(--s-1); }
.dy-births { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.dy-births li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.dy-births small { display: block; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--muted); margin-top: var(--s-1); }
.dy-births q { display: block; font-family: var(--f-display); font-weight: 800; font-style: italic; font-size: var(--t-md); line-height: 1.3; quotes: "\201C" "\201D"; margin-top: var(--s-1); overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .dy-front, .dy-second, .dy-grid3, .dy-teasers, .dy-mast, .dy-leadb, .dy-case { grid-template-columns: minmax(0, 1fr); }
  .dy-case-side { padding-left: 0; border-left: 0; }
  .dy-cols { column-count: 1; }
  .dy-paper { padding: var(--s-7) var(--s-6); }
  .dy-mast h1 { white-space: normal; }
}
@media (max-width: 560px) {
  .dj-wrap { --dj-toss-w: 88vw; --dj-toss-h: 64vw; --dj-mast: 28px; --dj-hed: 21px; }
  .dj-toss-deck { display: none; }
}
.dy-link { color: var(--accent); text-decoration: underline; }

/* the calendar in the number chip: its popup above the paper's overlay (100) */
.u-dp-pop { z-index: 110; }
.dj-wrap .tabs .p-bank .u-dp-btn { min-width: 0; padding: var(--s-1) var(--s-3); font-size: var(--t-mono); }
.dj-ed-no { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; }
/* a sealed line inside a timeline step */
.dy-ex-inline { display: inline-flex; margin-top: var(--s-2); }

/* ---------- THE NEW SHAPES (2026-10-09, docs/DAILY-JUQ-IDEAS.md) ---------- */
/* FACT CHECK: the claim, a six-step meter, the jury */
.dy-claim { margin-bottom: var(--s-4); }
.dy-claim p { margin: 0; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: var(--t-lg); line-height: 1.25; }
.dy-meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin-bottom: var(--s-4); }
.dy-meter-step { padding: var(--s-2) var(--s-1); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.2; color: var(--muted); background: var(--surface-2); border-radius: var(--radius); }
.dy-meter-step.on { color: var(--accent-ink); background: var(--accent); }
.dy-jury { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.dy-jury li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.dy-jury li > span { min-width: 0; font-size: var(--t-sm); line-height: 1.35; }
.dy-jury em { margin: 0 var(--s-2); font-style: normal; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.dy-jury li.right em { color: var(--muted); }
.dy-jury q { display: block; color: var(--muted); }
/* MOST WANTED: a poster */
.dy-wanted { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-4); text-align: center; border: var(--bw) dashed var(--line-strong); border-radius: var(--radius); }
.dy-wanted-h { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: var(--t-h1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.dy-wanted .dy-face-lg { width: 72px; height: 72px; }
.dy-wanted-name { font-size: var(--t-md); }
.dy-wanted q { font-size: var(--t-sm); color: var(--muted); }
.dy-wanted-priors { margin: var(--s-2) 0 0; font-size: var(--t-sm); }
.dy-wanted-priors .dy-lab { display: inline; margin-right: var(--s-2); }
/* THE WAIT: every ask a tick on the stream */
.dy-wait-bar { position: relative; height: 26px; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.dy-wait-bar i { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: var(--accent); border-radius: 1px; }
.dy-wait-ends { display: flex; justify-content: space-between; margin-top: var(--s-1); font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dy-wait-n { margin: var(--s-3) 0 var(--s-3); font-size: var(--t-sm); }