/* The live lucky draw (public/assets/lucky-draw-live.js): the stage on /lucky-draw/
   and the homepage band. Self-contained: both homes and the rules page load it,
   and the pre-launch home has its own frozen token copies, so every value it
   needs is set here, from the web design system (theunideals brand/design-system/
   web/DESIGN.md). The stage is the homepage's warm dark ground (home-dark.css)
   on purpose: the draw is an evening event and the frame the founder records.
   The tickets on it are light islands, the site's deal ticket rows, and the prize
   art is the founder's own drawing from the referral campaign. Light mode only. */
.ldl {
  --ldl-ground: #1A1613;
  --ldl-paper-d: #241F1A;
  --ldl-raised: #2E2822;
  --ldl-line: #352E27;
  --ldl-line-2: #443B32;
  --ldl-control: #8C7F71;
  --ldl-cream: #F6EFE4;
  --ldl-soft-d: #CBBFB0;
  --ldl-muted-d: #B3A696;
  --ldl-link: #FF8A5C;
  --ldl-orange: #FF5C26;
  --ldl-ink: #141412;
  --ldl-paper: #FFFFFF;
  --ldl-soft: #55504A;
  --ldl-muted: #6B6660;
  --ldl-card-line: #E2D6CA;
  --ldl-grand: #FFE6A8;
  --ldl-shop: #D3E2F2;
  --ldl-food: #C9E4DC;
  --ldl-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative;
  isolation: isolate;
  color: var(--ldl-cream);
  background: var(--ldl-ground);
  font-family: 'Outfit', var(--tud-font-primary, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.ldl[hidden] { display: none; }
.ldl ::selection { background: var(--ldl-link); color: var(--ldl-ink); }
.ldl :focus-visible { outline: 2px solid var(--ldl-cream); outline-offset: 2px; }
.ldl .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the page stage: the app stage's 28px radius ---------- */
.ldl[data-ld-live="page"] { margin: 0 0 clamp(56px, 7vw, 88px); padding: clamp(28px, 3.6vw, 48px); border-radius: 28px; }
.ldl-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.ldl-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.ldl .ldl-title { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ldl-cream); font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.ldl-dot { display: none; flex: none; position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--ldl-orange); }
.ldl[data-view="drawing"] .ldl-dot, .ldl[data-view="reveal"] .ldl-dot { display: block; }
.ldl-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ldl-orange); opacity: 0; animation: ldl-pulse 1.6s var(--ldl-ease) infinite; }
@keyframes ldl-pulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* Line pills, as .ls-btn--line in cream: 1.5px edge, 15px/700, 44px. */
.ldl-tools { display: flex; gap: 8px; }
.ldl-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px 8px 16px; border: 1.5px solid var(--ldl-control); border-radius: 999px; background: transparent; color: var(--ldl-cream); font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .16s var(--ldl-ease), border-color .16s var(--ldl-ease), color .16s var(--ldl-ease); }
.ldl-btn[hidden] { display: none; }
@media (hover: hover) { .ldl-btn:hover { border-color: var(--ldl-cream); background: rgba(246, 239, 228, .06); } }
.ldl-btn[aria-pressed="true"] { border-color: var(--ldl-cream); background: var(--ldl-cream); color: var(--ldl-ink); }
.ldl-btn .ldl-wave { display: none; }
.ldl-btn[aria-pressed="true"] .ldl-wave { display: inline; }
.ldl-btn[aria-pressed="true"] .ldl-mute { display: none; }
.ldl[data-view="countdown"] [data-sound], .ldl[data-view="closed"] [data-sound], .ldl[data-view="open"] [data-sound], .ldl[data-view="offline"] [data-sound], .ldl[data-view="static"] [data-sound], .ldl[data-view="soon"] [data-sound], .ldl[data-view="results"] [data-sound]:not([aria-pressed="true"]) { display: none; }

.ldl-sub { margin: 0; color: var(--ldl-soft-d); font-size: 18px; font-weight: 500; line-height: 1.5; }
.ldl-sub[hidden] { display: none; }
.ldl-sub a { color: var(--ldl-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* The countdown: the saving type (Space Grotesk 700, tight, tabular); the colons are the orange moment. */
.ldl-clock { display: flex; align-items: baseline; margin: 0; color: var(--ldl-cream); font-family: 'Space Grotesk', var(--tud-font-secondary, sans-serif); font-size: clamp(64px, 10.4vw, 148px); font-weight: 700; line-height: .86; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldl-clock[hidden] { display: none; }
.ldl-clock i { color: var(--ldl-orange); font-style: normal; padding: 0 .05em 0 .03em; }
.ldl[data-view="open"] .ldl-clock { font-size: clamp(52px, 7vw, 96px); }

/* Sealed: the app's status pill, the fingerprint in the machine voice, a text link. */
.ldl-more { color: var(--ldl-link); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }

/* The countdown's doodles (sets B and C only; set A has none): centred in their own column, untilted. */
.ldl-doodles { display: none; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); }
.ldl-doodles img { display: block; width: clamp(80px, 8vw, 120px); height: auto; }
.ldl-doodles img:only-child { width: clamp(150px, 15vw, 210px); }
.ldl[data-ld-live="page"]:is([data-view="countdown"], [data-view="open"], [data-view="static"], [data-view="offline"], [data-view="soon"]) .ldl-doodles { display: flex; }
@media (min-width: 901px) {
  .ldl[data-ld-live="page"]:not([data-doodles="none"]):is([data-view="countdown"], [data-view="open"], [data-view="static"], [data-view="offline"], [data-view="soon"]) .ldl-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 64px); align-content: start; }
  .ldl[data-ld-live="page"] .ldl-in > :not(.ldl-doodles) { grid-column: 1; }
  .ldl[data-ld-live="page"] .ldl-doodles { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
}

/* ---------- tickets: the homepage's deal ticket rows, as light islands ---------- */
.ldt { --ldt-tone: var(--ldl-food); position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr) 132px; min-height: 112px; border-radius: 18px; background: var(--ldl-paper); color: var(--ldl-ink); box-shadow: inset 0 0 0 1px var(--ldl-card-line); }
.ldt[hidden] { display: none; }
.ldt--grand { --ldt-tone: var(--ldl-grand); }
.ldt--shop { --ldt-tone: var(--ldl-shop); }
.ldt--food { --ldt-tone: var(--ldl-food); }
/* The stub: the pool on its tone; the right edge is the signature scallop (12px on a 24px pitch). */
.ldt-stub { display: grid; place-items: center; border-radius: 18px 0 0 18px; background: var(--ldt-tone);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / calc(100% - 6px) 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 5.5px, #000 6px) 100% 0 / 12px 24px repeat-y;
  mask: linear-gradient(#000 0 0) 0 0 / calc(100% - 6px) 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 5.5px, #000 6px) 100% 0 / 12px 24px repeat-y; }
.ldt-stub b { font-family: 'Space Grotesk', var(--tud-font-secondary, sans-serif); font-size: 32px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
/* The winner sits centred in the ticket, both ways; long campus names wrap balanced. */
.ldt-body { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 16px 20px; text-align: center; }
.ldt-prize { color: var(--ldl-muted); font-size: 14px; font-weight: 600; line-height: 1.35; }
/* Founder, 1 Nov: the prize label is pinned at the top of the white section;
   the name and campus are one block centred in the ticket. An invisible copy of
   the label at the bottom balances the real one, so the block sits mid-ticket. */
.ldt-body { justify-content: space-between; }
.ldt-who { display: flex; flex-direction: column; align-items: center; gap: inherit; width: 100%; min-width: 0; }
.ldt-ghost { visibility: hidden; }
.ldt-campus { color: var(--ldl-ink); font-size: clamp(21px, 2vw, 26px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: balance; }
.ldt.is-empty .ldt-campus { color: var(--ldl-muted); }
/* The winner's display name ("S. Noor") sits over the campus, centred like it. */
.ldt-name { max-width: 100%; color: var(--ldl-ink); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.ldt-name[hidden] { display: none; }
/* The tear-off foil: tone, its scallops bulging into the body, holding the prize art and the stamp. */
.ldt-foil { position: relative; display: grid; place-items: center; border-radius: 0 18px 18px 0; background:
  radial-gradient(circle at 100% 50%, var(--ldt-tone) 5.5px, #0000 6px) 0 0 / 6px 24px repeat-y,
  linear-gradient(var(--ldt-tone) 0 0) 6px 0 / calc(100% - 6px) 100% no-repeat; }
.ldt-art { display: block; width: 70%; height: auto; grid-area: 1 / 1; }
/* The stamp sits in the foil's bottom right corner, the same inset from both edges, over a corner of the art. */
.ldt-stamp { position: absolute; right: 8px; bottom: 8px; width: 48%; max-width: 72px; }
.ldt-stamp svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(20, 20, 18, .22)); }
.ldt.is-empty .ldt-art { opacity: .4; }
/* Founder, 1 Nov: pools go public at 8:00, 8:10 and 8:20. A pool still to come shows its time, muted. */
.ldt.is-locked .ldt-campus { color: var(--ldl-muted); }
.ldt.is-locked .ldt-art { opacity: .4; }

/* Winners: the grand prize across the top, the other four in two columns. */
.ldl-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ldl-results[hidden] { display: none; }
.ldl-results > .ldt:first-child { grid-column: 1 / -1; grid-template-columns: 120px minmax(0, 1fr) 200px; min-height: 148px; }
.ldl-results > .ldt:first-child .ldt-stub b { font-size: 44px; }
.ldl-results > .ldt:first-child .ldt-campus { font-size: clamp(26px, 2.8vw, 36px); }
.ldl-results > .ldt:first-child .ldt-stamp { max-width: 96px; right: 12px; bottom: 12px; }
.ldl[data-view="results"] .ldl-results > .ldt, .ldl[data-view="reveal"] .ldl-results > .ldt:not([hidden]) { animation: ldl-settle .56s var(--ldl-ease) both; }
.ldl[data-view="results"] .ldl-results > .ldt:nth-child(2) { animation-delay: .06s; }
.ldl[data-view="results"] .ldl-results > .ldt:nth-child(3) { animation-delay: .12s; }
.ldl[data-view="results"] .ldl-results > .ldt:nth-child(4) { animation-delay: .18s; }
.ldl[data-view="results"] .ldl-results > .ldt:nth-child(5) { animation-delay: .24s; }
@keyframes ldl-settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Stamp type: tracked caps on the arc, the kit's stamp language. */
.ldl-stamp-arc { fill: #141412; font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; }
.ldl-stamp-word { fill: #141412; font-family: 'Space Grotesk', sans-serif; font-size: 27px; font-weight: 700; letter-spacing: -.02em; }

/* ---------- the live stage ---------- */
.ldl-stage { position: relative; }
.ldl-stage[hidden] { display: none; }
.ldt.ldt--big { grid-template-columns: clamp(112px, 12vw, 156px) minmax(0, 1fr) clamp(180px, 19vw, 248px); min-height: 252px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--ldl-card-line), 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px -20px rgba(0, 0, 0, .7); transform-origin: 50% 100%; will-change: transform, opacity; }
.ldt--big .ldt-stub { border-radius: 22px 0 0 22px; }
.ldt--big .ldt-foil { border-radius: 0 22px 22px 0; }
.ldt--big .ldt-stub b { font-size: clamp(52px, 5.6vw, 76px); }
.ldt--big .ldt-body { gap: 6px; padding: 28px clamp(22px, 3vw, 40px); }
/* Founder, 1 Nov: prize, name and campus read as one centred block. The reel's
   window is two rows tall for the shuffle, but it takes one row of layout (the
   landed row's), so the campus sits close under the name and the block centres. */
.ldt--big .ldl-reel { margin-block: -.6em; }
.ldt--big .ldt-prize { font-size: clamp(15px, 1.3vw, 17px); font-weight: 700; color: var(--ldl-soft); }
.ldt--big .ldt-name { min-height: 1.3em; font-size: clamp(17px, 1.6vw, 20px); }
/* The stage keeps the name line reserved, so landing a name never moves the page. */
.ldt--big .ldt-name.is-off { visibility: hidden; }
.ldt--big .ldt-art { width: 62%; margin: 0 0 22% 0; }

.ldl-reel { --blur: 0px; position: relative; display: block; align-self: stretch; height: 2.4em; font-size: clamp(30px, 4.3vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.2; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 80%, transparent 100%); }
.ldl-reel[hidden] { display: none; }
.ldl-row { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center; height: 1.2em; white-space: nowrap; filter: blur(var(--blur)); transition: opacity .35s var(--ldl-ease); }
.ldl-reel.is-landed .ldl-row:not(:nth-child(3)) { opacity: 0; }
.ldl-none { display: block; color: var(--ldl-muted); font-size: clamp(30px, 4.3vw, 60px); font-weight: 800; letter-spacing: -.035em; line-height: 1.2; padding: .6em 0; text-align: center; }
.ldl-none[hidden] { display: none; }

/* The stamp lands centred on the foil, untilted, over the prize art. */
.ldl-stamp { --stamp-scale: 1; --spark: 0; position: absolute; z-index: 2; right: 16px; bottom: 16px; width: min(58%, 136px); opacity: 0; transform: scale(var(--stamp-scale)); transform-origin: 50% 50%; filter: drop-shadow(0 6px 10px rgba(20, 20, 18, .3)); pointer-events: none; }
.ldl-stamp-art { position: relative; display: block; width: 100%; height: auto; }
.ldl-sparks { position: absolute; inset: -22%; width: 144%; height: 144%; opacity: calc(1 - var(--spark)); transform: scale(calc(.7 + var(--spark) * .55)); }
.ldl-sparks g { stroke: var(--ldl-ink); }

/* Five pills in reveal order: a tone dot with the pool, the campus once landed. Equal inset. */
.ldl-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ldl-rail[hidden] { display: none; }
.ldr { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--ldl-paper-d); box-shadow: inset 0 0 0 1.5px var(--ldl-line-2); color: var(--ldl-muted-d); font-size: 14px; font-weight: 700; line-height: 1.25; transition: box-shadow .3s var(--ldl-ease), opacity .3s var(--ldl-ease), background-color .3s var(--ldl-ease); }
.ldr b { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ldl-line-2); color: var(--ldl-muted-d); font-family: 'Space Grotesk', var(--tud-font-secondary, sans-serif); font-size: 15px; font-weight: 700; letter-spacing: -.03em; transition: background-color .3s var(--ldl-ease), color .3s var(--ldl-ease); }
.ldr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; }
.ldr--grand { --ldt-tone: var(--ldl-grand); }
.ldr--shop { --ldt-tone: var(--ldl-shop); }
.ldr--food { --ldt-tone: var(--ldl-food); }
.ldr[data-state="next"] { opacity: .6; }
.ldr[data-state="now"] { box-shadow: inset 0 0 0 1.5px var(--ldl-cream); color: var(--ldl-cream); }
.ldr[data-state="now"] b { color: var(--ldl-cream); box-shadow: inset 0 0 0 1.5px var(--ldl-cream); }
.ldr[data-state="done"] { background: var(--ldl-raised); color: var(--ldl-cream); }
.ldr[data-state="done"] b { box-shadow: none; background: var(--ldt-tone); color: var(--ldl-ink); }
.ldr[data-state="done"] span { visibility: visible; }

/* ---------- the homepage band: full bleed, the wrap inside ---------- */
.ldl[data-ld-live="band"] { width: 100%; }
.ldl[data-ld-live="band"] .ldl-in { width: min(100% - 48px, 1120px); margin-inline: auto; padding: 22px 0; row-gap: 20px; }
.ldl[data-ld-live="band"] .ldl-title { font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -.03em; }
.ldl[data-ld-live="band"] .ldl-top { min-height: 44px; }
.ldl[data-ld-live="band"] .ldl-sub, .ldl[data-ld-live="band"] .ldl-doodles { display: none; }
.ldl[data-ld-live="band"]:is([data-view="countdown"], [data-view="open"], [data-view="offline"], [data-view="static"], [data-view="soon"]) .ldl-in { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; }
.ldl[data-ld-live="band"] .ldl-clock { font-size: clamp(40px, 4.2vw, 56px); }
.ldl[data-ld-live="band"] .ldl-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 8px 18px; border: 1.5px solid var(--ldl-control); border-radius: 999px; color: var(--ldl-cream); font-size: 15px; text-decoration: none; }
@media (hover: hover) { .ldl[data-ld-live="band"] .ldl-more:hover { border-color: var(--ldl-cream); background: rgba(246, 239, 228, .06); } }
.ldl[data-ld-live="band"] .ldl-more[hidden] { display: none; }
.ldl[data-ld-live="band"] .ldl-more svg { flex: none; }
.ldl[data-ld-live="band"]:is([data-view="reveal"], [data-view="drawing"], [data-view="results"]) .ldl-in { padding: 28px 0 32px; }
/* In the band the winners stay compact: five equal tickets, three to a row. */
.ldl[data-ld-live="band"] .ldl-results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt, .ldl[data-ld-live="band"] .ldl-results > .ldt:first-child { grid-column: auto; grid-template-columns: 64px minmax(0, 1fr) 96px; min-height: 96px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt .ldt-stub b { font-size: 26px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt .ldt-body { padding: 12px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt .ldt-campus { font-size: 19px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt .ldt-prize, .ldl[data-ld-live="band"] .ldl-results > .ldt .ldt-name { font-size: 13px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt .ldt-stamp { max-width: 50px; right: 6px; bottom: 6px; }

/* After the evening: one quiet line for a week, the smartwatch leading it. */
.ldl[data-mode="strip"] { background: var(--ldl-ground); }
.ldl-strip { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 6px 24px; color: var(--ldl-cream); font-size: 16px; font-weight: 700; text-decoration: none; }
.ldl-strip img { width: 24px; height: auto; }
.ldl-strip svg { flex: none; }
@media (hover: hover) { .ldl-strip:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } }

/* ---------- phones ---------- */
@media (max-width: 900px) {
  .ldl[data-ld-live="page"] { border-radius: 22px; padding: 22px 18px; }
  .ldl-in { row-gap: 18px; }
  .ldl .ldl-title { font-size: clamp(26px, 7vw, 32px); gap: 12px; }
  .ldl-btn { padding: 8px 14px 8px 12px; }
  /* Between pools the title, Sound and Replay share the row: the buttons drop under the title rather than run off the panel. */
  .ldl-top { flex-wrap: wrap; row-gap: 12px; }
  .ldl-sub { font-size: 17px; }
  .ldl-clock { font-size: clamp(60px, 19vw, 104px); }
  .ldl[data-ld-live="page"] .ldl-doodles { margin-top: 6px; }
  .ldl-doodles img { width: min(24vw, 96px); }
  .ldl-doodles img:only-child { width: min(40vw, 150px); }

  /* The big ticket stacks: a tone strip (the pool, then the prize art and the stamp) over the body. */
  .ldt.ldt--big { grid-template-columns: minmax(0, 1fr) 136px; grid-template-rows: 112px auto; min-height: 0; }
  .ldt--big .ldt-stub { grid-column: 1; grid-row: 1; place-items: center start; padding-left: 20px; border-radius: 20px 0 0 0;
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 100% / 24px 12px repeat-x;
    mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 100% / 24px 12px repeat-x; }
  .ldt--big .ldt-foil { grid-column: 2; grid-row: 1; border-radius: 0 20px 0 0; background: var(--ldt-tone);
    -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 100% / 24px 12px repeat-x;
    mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 100% / 24px 12px repeat-x; }
  .ldt--big .ldt-body { grid-column: 1 / -1; grid-row: 2; padding: 16px 20px 18px; gap: 4px; }
  .ldt--big .ldt-stub b { font-size: 52px; }
  /* Art sits left in the foil, the stamp lands on its right edge like a postmark. */
  .ldt--big .ldt-art { width: 84px; }
  .ldl-stamp { width: 64px; right: 10px; bottom: 16px; }
  .ldt--big .ldt-art { margin: 0 46px 0 0; }
  .ldl-reel, .ldl-none { font-size: clamp(28px, 8.2vw, 38px); }

  .ldl-rail { gap: 6px; }
  .ldr { justify-content: center; padding: 5px; min-height: 46px; }
  .ldr span { display: none; }

  .ldl-results { grid-template-columns: 1fr; gap: 10px; }
  .ldt, .ldl-results > .ldt:first-child { grid-template-columns: 60px minmax(0, 1fr) 80px; min-height: 100px; }
  .ldt-art { width: 78%; margin-bottom: 14px; }
  .ldt-stub b, .ldl-results > .ldt:first-child .ldt-stub b { font-size: 26px; }
  .ldt-body { padding: 14px 12px; }
  .ldt-campus, .ldl-results > .ldt:first-child .ldt-campus { font-size: 21px; }
  .ldt-name { font-size: 15px; }
  .ldt-stamp, .ldl-results > .ldt:first-child .ldt-stamp { width: 46px; right: 6px; bottom: 6px; }

  .ldl[data-ld-live="band"] .ldl-in { width: min(100% - 32px, 1120px); padding: 18px 0; }
  .ldl[data-ld-live="band"]:is([data-view="countdown"], [data-view="open"], [data-view="offline"], [data-view="static"], [data-view="soon"]) .ldl-in { row-gap: 8px; column-gap: 16px; }
  .ldl[data-ld-live="band"] .ldl-top { flex: 1 0 100%; }
  .ldl[data-ld-live="band"] .ldl-clock { font-size: 44px; }
  .ldl[data-ld-live="band"] .ldl-results { grid-template-columns: 1fr; gap: 8px; }
  .ldl[data-ld-live="band"] .ldl-results > .ldt, .ldl[data-ld-live="band"] .ldl-results > .ldt:first-child { grid-template-columns: 56px minmax(0, 1fr) 76px; min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .ldl-dot::after { animation: none; }
  .ldl *, .ldl *::after { transition: none !important; }
  .ldl[data-view="results"] .ldl-results > .ldt, .ldl[data-view="reveal"] .ldl-results > .ldt:not([hidden]) { animation: ldl-fade .4s linear both; animation-delay: 0s; }
  @keyframes ldl-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- set A (no doodles): the stamp alone, centred in the foil ---------- */
.ldl .ldt:not(.has-art) .ldt-stamp { position: static; width: 62%; max-width: 84px; }
.ldl .ldl-results > .ldt:first-child:not(.has-art) .ldt-stamp { max-width: 112px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt:not(.has-art) .ldt-stamp { max-width: 60px; }
.ldl .ldt--big:not(.has-art) .ldl-stamp { top: 50%; left: 50%; right: auto; bottom: auto; translate: -50% -50%; width: min(64%, 150px); }
@media (max-width: 900px) {
  .ldl .ldt:not(.has-art) .ldt-stamp, .ldl .ldl-results > .ldt:first-child:not(.has-art) .ldt-stamp { width: 58px; }
  .ldl .ldt--big:not(.has-art) .ldl-stamp { width: 76px; }
}

/* ---------- sets B and C: the doodle fills the stub, the stamp is a sticker on the corner ----------
   Founder, 1 Nov: the doodle fills the right stub, centred with even padding,
   untilted and whole (object-fit: contain never crops a person); the WON stamp
   sits on the ticket's top right corner like a sticker slapped on, hanging
   about a third of its size over the edge so it stays clear of the faces.
   Its box is always there (opacity only), so nothing moves when it lands.
   --st is the stamp's size per ticket; containers leave room for the overhang. */
.ldl .ldt.has-art { --st: 60px; --fp: 12px; }
.ldl .ldt.has-art .ldt-foil { position: static; display: flex; align-items: center; justify-content: center; padding: var(--fp) var(--fp) var(--fp) calc(var(--fp) + 6px); }
.ldl .ldt.has-art .ldt-art { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; object-fit: contain; margin: 0; grid-area: auto; }
.ldl .ldt.has-art .ldt-stamp, .ldl .ldt.has-art .ldl-stamp { position: absolute; z-index: 3; top: calc(var(--st) * -.32); right: calc(var(--st) * -.32); bottom: auto; left: auto; width: var(--st); max-width: none; translate: none; rotate: -12deg; transform-origin: 50% 50%; }
.ldl .ldt.has-art .ldt-stamp svg { filter: drop-shadow(0 3px 5px rgba(20, 20, 18, .3)); }
.ldl .ldl-results > .ldt.has-art:first-child { --st: 84px; --fp: 16px; }
.ldl .ldt--big.has-art { --st: 112px; --fp: 20px; }
.ldl[data-ld-live="band"] .ldl-results > .ldt.has-art { --st: 46px; --fp: 8px; }
/* small band tickets: the sticker hangs further out so the high five stays clear */
.ldl[data-ld-live="band"] .ldl-results > .ldt.has-art .ldt-stamp { top: calc(var(--st) * -.45); right: calc(var(--st) * -.45); }
/* room for the overhang: above the stage and the list, between rows and columns */
.ldl .ldl-stage { padding-top: 14px; }
.ldl .ldl-results { gap: 26px 24px; padding-top: 10px; }
.ldl[data-ld-live="band"] .ldl-results { gap: 22px 26px; padding-top: 6px; }
/* the band runs edge to edge: the corner sticker's sparks never widen the page */
.ldl[data-ld-live="band"] { overflow-x: clip; }
@media (max-width: 900px) {
  .ldl .ldt.ldt--big.has-art { grid-template-columns: minmax(0, 1fr) 176px; --st: 76px; --fp: 12px; }
  .ldl .ldl-results > .ldt.has-art, .ldl .ldl-results > .ldt.has-art:first-child { --st: 46px; --fp: 8px; }
  .ldl[data-ld-live="band"] .ldl-results > .ldt.has-art { --st: 42px; --fp: 7px; }
  .ldl .ldt.has-art .ldt-stamp, .ldl .ldt.has-art .ldl-stamp { top: calc(var(--st) * -.3); right: calc(var(--st) * -.3); }
  .ldl .ldl-stage { padding-top: 8px; }
  .ldl .ldl-results { gap: 20px; padding-top: 8px; }
  .ldl[data-ld-live="band"] .ldl-results { gap: 18px; }
  /* the band is edge to edge on phones: the sticker stays inside the screen */
  .ldl[data-ld-live="band"] .ldt--big.has-art .ldl-stamp { right: -6px; }
  .ldl[data-ld-live="band"] .ldl-results > .ldt.has-art .ldt-stamp { top: calc(var(--st) * -.3); right: -6px; }
}