:host {
  all: initial;
  display: block;
}

/* the Replays photos are <picture>s (AVIF with a JPEG fallback): no box of their own, as in css/page/01-base.css */
picture {
  display: contents;
}
picture > source {
  display: none;
}

/* off screen: looping animations hold still until the section comes back (js/pause-offscreen.js) */
:host(.is-offscreen) *,
:host(.is-offscreen) *::before,
:host(.is-offscreen) *::after {
  animation-play-state: paused !important;
}

/* Layout: one column on phones, the Box Office grid from 1040px wide. Widths come from container queries on .frame, so the section adapts to the space it gets. */
.sr-page {
  /* Plum night is the default; :root[data-mode="day"] swaps to day. */
  --bg: #14171b;
  --surface: #171030;
  --ink: #f0ebff;
  --muted: #b3a8d6;
  --hair: #33285a;
  --edge: #f0ebff;
  --yellow: #ffd731;
  --on-yellow: #0b0717;
  --blue: #4fa6ff;
  --on-blue: #0b0717;
  --red: #ff5b52;
  --on-red: #0b0717;
  --green: #35e08b;
  --on-green: #0b0717;
  --purple: #b977ff;
  --on-purple: #0b0717;
  --board: #08050f;
  --board-line: #2a2140;
  --board-text: #b3a8d6;
  --sign: #0b0717;
  --sign-text: #f0ebff;
  --bulb: #ffd731;
  --tile: #fffbf0;
  --tile-ink: #1a1714;
  --qr-bg: #ffffff;
  --qr-ink: #1a1714;
  --chrome: #120c24;
  --chrome-ink: #b3a8d6;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --boing: cubic-bezier(0.25, 3, 0.5, 1);
  color-scheme: dark;
}
.sr-page[data-mode="day"] {
  --bg: #fffbf0;
  --surface: #ffffff;
  --ink: #1a1714;
  --muted: #5b5045;
  --hair: #e3d8c0;
  --edge: #1a1714;
  --on-yellow: #1a1714;
  --blue: #2f8fff;
  --on-blue: #1a1714;
  --red: #db2e27;
  --on-red: #ffffff;
  --green: #1fb36a;
  --on-green: #1a1714;
  --purple: #9542fb;
  --on-purple: #ffffff;
  --board: #ffffff;
  --board-line: #e3d8c0;
  --board-text: #5b5045;
  --sign: #000000;
  --sign-text: #fffbf0;
  --chrome: #f3ecdb;
  --chrome-ink: #5b5045;
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.sr-page {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.is-y {
  --c: var(--yellow);
  --on-c: var(--on-yellow);
}
.is-b {
  --c: var(--blue);
  --on-c: var(--on-blue);
}
.is-r {
  --c: var(--red);
  --on-c: var(--on-red);
}
.is-g {
  --c: var(--green);
  --on-c: var(--on-green);
}
.is-p {
  --c: var(--purple);
  --on-c: var(--on-purple);
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
@keyframes chase {
  50% {
    background-position:
      11px 0,
      11px 100%,
      0 22px,
      100% 22px;
  }
}

/* preview bar (not part of the section) */

/* frame + section shell */
.frame {
  container: ev / inline-size;
  margin-inline: auto;
  background: var(--bg);
  transition: background-color 0.35s ease;
}
.frame.phone {
  max-width: 390px;
  margin-block: 28px 56px;
  border: 1.5px solid var(--hair);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}
.ev {
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}
.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-block: 56px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.frame.phone .wrap {
  padding-left: 16px;
  padding-right: 16px;
}

/* type */
.wh {
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  cursor: default;
}
.wh span {
  transition: font-weight 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.wh:hover span,
.wh.weigh span {
  font-weight: 700;
}
.kick {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.muted {
  color: var(--muted);
}
.lead {
  font-size: 18px;
  line-height: 1.5;
  max-width: 44ch;
}
.h3 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.blockhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}
.blockhead > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sect {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0.9em 1.25em;
  border: 2px solid var(--edge);
  border-radius: 12px;
  font: 600 16px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 var(--edge);
  transition:
    transform 150ms var(--boing),
    box-shadow 150ms var(--boing);
}
.btn:active {
  transform: scale(0.94);
  box-shadow: 0 0 0 var(--edge);
}
@media (hover: hover) {
  .btn:hover {
    transform: translate(-4px, -4px) rotate(-2.5deg);
    box-shadow: 4px 4px 0 var(--edge);
  }
}
.btn-main {
  background: var(--red);
  color: var(--on-red);
}
.btn-alt {
  background: var(--surface);
  color: var(--ink);
}
/* the header's "See our current events": 80% bigger than .btn (16px -> 28.8px text, 52px -> 93.6px tall).
   At full size it is 444px wide, so on narrow phones the text shrinks with the section's width (cqi) and
   everything else is in em so it shrinks along with it. */
.btn-lg {
  gap: 0.625em;
  min-height: 3.25em;
  border-radius: 0.75em;
  font-size: min(28.8px, 5.4cqi);
}

/* shared shapes: night look first, day overrides */
.cc {
  background: var(--c);
  color: var(--on-c);
  border: 3px solid var(--c);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--c);
}
.sr-page[data-mode="day"] .cc {
  border-color: var(--edge);
  box-shadow: 4px 4px 0 var(--edge);
}
.wc {
  background: var(--surface);
  color: var(--ink);
  border: 1.5px solid var(--hair);
  border-radius: 14px;
}
.sr-page[data-mode="day"] .wc {
  border: 3px solid var(--edge);
  box-shadow: 4px 4px 0 var(--edge);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--c, var(--edge));
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  transform: rotate(var(--tt, -1.5deg));
}
.sr-page[data-mode="day"] .tag {
  border-color: var(--edge);
}
.bulbs {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  background:
    radial-gradient(circle, var(--bulb) 0 3px, transparent 3.8px) 0 0/22px 11px repeat-x,
    radial-gradient(circle, var(--bulb) 0 3px, transparent 3.8px) 0 100%/22px 11px repeat-x,
    radial-gradient(circle, var(--bulb) 0 3px, transparent 3.8px) 0 11px/11px 22px repeat-y,
    radial-gradient(circle, var(--bulb) 0 3px, transparent 3.8px) 100% 11px/11px 22px repeat-y;
  animation: chase 1.1s steps(1) infinite;
}
.bulbs.still {
  animation: none;
}
/* header sign */
.hd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.sign {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 38px 32px;
  background: var(--sign);
  color: var(--sign-text);
  border: 3px solid var(--yellow);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px var(--yellow),
    0 0 44px -10px color-mix(in srgb, var(--yellow) 70%, transparent);
  transform: rotate(-2deg);
}
/* by day the sign, the YOUR EVENT HERE board and the scoreboard are red marquees (Mench Events Board A1 Bloom):
   a 14px red frame (the 3px border plus an 11px inset shadow, so the boxes keep their size and padding) round a
   white panel, outlined in ink with a hard ink shadow. The bulbs on the frame are further down. */
.sr-page[data-mode="day"] :is(.sign, .lboard, .score) {
  border-color: #db2e27;
  background: #ffffff;
  color: #1a1714;
  box-shadow:
    inset 0 0 0 11px #db2e27,
    0 0 0 3px #1a1714,
    6px 6px 0 3px #1a1714;
}
.sign .kick {
  color: var(--yellow);
}
.sr-page[data-mode="day"] .sign .kick {
  color: #db2e27;
}
.hd-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
}

/* scoreboard */
.score {
  position: relative;
  padding: 20px;
  background: var(--board);
  color: var(--sign-text);
  border: 3px solid var(--yellow);
  border-radius: 22px;
  box-shadow: 0 0 0 1px var(--yellow);
}
.score .bulbs {
  inset: 5px;
}
.score-in {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--board-line);
  border-radius: 12px;
}
.score-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 3px solid var(--board-line);
}
.score-top .kick {
  font-size: 10px;
  color: var(--board-text);
  white-space: nowrap;
}
.score-title {
  font-size: clamp(14px, 4.6cqi, 18px); /* a little smaller on small phones, so MENCH and ALL-TIME keep their room */
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bulb);
  text-shadow: none;
}
/* very narrow phones: no room for both side labels, so the "Mench" one goes (it's Mench's own site) */
@container ev (max-width:380px) {
  .score-top {
    grid-template-columns: 1fr auto;
  }
  .score-top .kick:first-child {
    display: none;
  }
}
.score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  border-bottom: 2px solid var(--board-line);
}
.cell:nth-child(odd) {
  border-right: 2px solid var(--board-line);
}
.cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.led {
  /* grows with the section so "$20,000+" always fits its half-width cell on phones: the text is about 4.6x the
     font size wide, and a cell has about half the section's width minus 75px for it; 30px from about 430px wide */
  font-size: clamp(18px, 10.8cqi - 16.5px, 30px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--lc);
  text-shadow: none;
}
.cell span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--board-text);
}
.l-y {
  --lc: #ffd731;
}
.l-b {
  --lc: #4fa6ff;
}
.l-g {
  --lc: #35e08b;
}
.l-p {
  --lc: #b977ff;
}
.l-r {
  --lc: #ff5b52;
}
/* light mode: the title in red and the numbers in plain ink on the white board (glowing LEDs wash out on white) */
.sr-page[data-mode="day"] .score-title {
  color: #db2e27;
  text-shadow: none;
}
.sr-page[data-mode="day"] .led {
  --lc: #1a1714;
  text-shadow: none;
}

/* the day bulbs (A1 Bloom): a dark socket and a dim pink bulb at every spot on the frame, and two lit layers, the
   even spots (i::before) and the odd ones (i::after, half a cycle behind), taking turns. As a bulb lights it swells
   from bulb size to 1.5x with a white-hot core, with no glow around it;
   it holds, then cools off. --la is registered in css/page/01-base.css so they animate smoothly. */
.bulbs i {
  display: none; /* night keeps the yellow chasing dots drawn on .bulbs itself */
}
.sr-page[data-mode="day"] .bulbs {
  --s: 22px;
  --b: 11px;
  --r: 3px;
  --rr: 4px;
  inset: -1.5px; /* dot centres on the middle of the 14px frame */
  background: none;
  animation: none;
}
.sr-page[data-mode="day"] .bulbs::before,
.sr-page[data-mode="day"] .bulbs::after,
.sr-page[data-mode="day"] .bulbs i,
.sr-page[data-mode="day"] .bulbs i::before,
.sr-page[data-mode="day"] .bulbs i::after {
  content: "";
  position: absolute;
  inset: 0;
}
.sr-page[data-mode="day"] .bulbs i {
  display: block;
  z-index: 1;
}
.sr-page[data-mode="day"] .bulbs::before {
  background:
    radial-gradient(circle, #4a0f0b 0 var(--rr), transparent calc(var(--rr) + 0.7px)) 0 0 / var(--s) var(--b) repeat-x,
    radial-gradient(circle, #4a0f0b 0 var(--rr), transparent calc(var(--rr) + 0.7px)) 0 100% / var(--s) var(--b)
      repeat-x,
    radial-gradient(circle, #4a0f0b 0 var(--rr), transparent calc(var(--rr) + 0.7px)) 0 var(--b) / var(--b) var(--s)
      repeat-y,
    radial-gradient(circle, #4a0f0b 0 var(--rr), transparent calc(var(--rr) + 0.7px)) 100% var(--b) / var(--b) var(--s)
      repeat-y;
}
.sr-page[data-mode="day"] .bulbs::after {
  background:
    radial-gradient(circle, #e9998c 0 var(--r), transparent calc(var(--r) + 0.7px)) 0 0 / var(--s) var(--b) repeat-x,
    radial-gradient(circle, #e9998c 0 var(--r), transparent calc(var(--r) + 0.7px)) 0 100% / var(--s) var(--b) repeat-x,
    radial-gradient(circle, #e9998c 0 var(--r), transparent calc(var(--r) + 0.7px)) 0 var(--b) / var(--b) var(--s)
      repeat-y,
    radial-gradient(circle, #e9998c 0 var(--r), transparent calc(var(--r) + 0.7px)) 100% var(--b) / var(--b) var(--s)
      repeat-y;
}
.sr-page[data-mode="day"] .bulbs i::before,
.sr-page[data-mode="day"] .bulbs i::after {
  --lit: radial-gradient(
    circle at calc(var(--s) / 2) calc(var(--b) / 2),
    #fffdf2 0 calc(var(--la) * 0.4),
    #ffd21f calc(var(--la) * 0.65) var(--la),
    transparent calc(var(--la) + 0.7px)
  );
  --lit-v: radial-gradient(
    circle at calc(var(--b) / 2) calc(var(--s) / 2),
    #fffdf2 0 calc(var(--la) * 0.4),
    #ffd21f calc(var(--la) * 0.65) var(--la),
    transparent calc(var(--la) + 0.7px)
  );
  background:
    var(--lit) 0 0 / calc(var(--s) * 2) var(--b) repeat-x,
    var(--lit) 0 100% / calc(var(--s) * 2) var(--b) repeat-x,
    var(--lit-v) 0 var(--b) / var(--b) calc(var(--s) * 2) repeat-y,
    var(--lit-v) 100% var(--b) / var(--b) calc(var(--s) * 2) repeat-y;
  animation: bulb-bloom 10s linear infinite; /* each half stays lit for 5 seconds, then they swap */
}
.sr-page[data-mode="day"] .bulbs i::after {
  background-position:
    var(--s) 0,
    var(--s) 100%,
    0 calc(var(--b) + var(--s)),
    100% calc(var(--b) + var(--s));
  animation-delay: -5s;
}
@keyframes bulb-bloom {
  0% {
    --la: 3px;
    opacity: 0.5;
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  5% {
    --la: 4.5px;
    opacity: 1;
  }
  46% {
    --la: 4.5px;
    opacity: 1;
    animation-timing-function: ease-in;
  }
  50%,
  100% {
    --la: 3px;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sr-page[data-mode="day"] .bulbs i::before {
    animation: none;
    --la: 4.5px;
  }
  .sr-page[data-mode="day"] .bulbs i::after {
    animation: none;
    opacity: 0;
  }
}

/* Replays: the film strip and its viewer are styled in css/film-strip.css, shared with the page's Gallery */
.go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}

/* hosting ideas: the "your event here" sign, a few nights people could run at Mench, and what they get */
.act {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 20px;
  min-width: 0;
}
.act .body {
  font-size: 16px;
  line-height: 1.5;
  max-width: 46ch;
}
.lboard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 18px 30px;
  background: var(--sign);
  color: var(--sign-text);
  border: 3px solid var(--yellow);
  border-radius: 16px;
  box-shadow: none;
  text-align: center;
  transform: rotate(-1deg);
}
.sr-page[data-mode="day"] .lb-word span {
  border: 2px solid #1a1714; /* cream tiles with an ink edge on the white panel */
}
.lboard .bulbs {
  inset: 7px;
}
/* a line wraps only between words; .lb-word keeps a word's tiles together (nowrap) */
.lb-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px; /* row gap matches the gap between lines, column gap is the space between words */
}
.lb-word {
  display: flex;
  gap: 4px;
}
.lb-word span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 34px;
  padding: 0 3px;
  background: var(--tile);
  color: var(--tile-ink);
  border-radius: 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.chips2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mini {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--hair);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transform: rotate(var(--tt, 0deg));
}
.sr-page[data-mode="day"] .mini {
  border-color: var(--edge);
}
.host-head {
  display: grid;
  gap: 18px;
}
.host-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ideas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.idea {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-content: center; /* a card with less text than the tallest in its row keeps its content in the middle */
  padding: 14px 16px;
  background: var(--c);
  color: var(--on-c);
  border: 3px solid var(--c);
  border-radius: 12px;
  box-shadow: none;
  transform: rotate(var(--tt, 0deg));
}
.sr-page[data-mode="day"] .idea {
  border-color: var(--edge);
  box-shadow: 3px 3px 0 var(--edge);
}
.idea-ic {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--on-c) 14%, transparent);
}
.idea-ic .i {
  width: 22px;
  height: 22px;
}
.idea h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}
.idea p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
/* a link inside a card's text (Language Exchange's "events site"): it takes the card's text colour,
   so the underline and the weight are what mark it as a link */
.idea p a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.idea p a:hover {
  text-decoration-thickness: 2px;
}
/* the last card is the visitor's own idea: an empty slot with a dashed outline */
.idea-open,
.sr-page[data-mode="day"] .idea-open {
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--yellow);
  box-shadow: none;
}
.sr-page[data-mode="day"] .idea-open {
  border-color: var(--edge);
}
.idea-open .idea-ic {
  background: color-mix(in srgb, var(--yellow) 24%, transparent);
}
/* team building and private events: a wide card under the ideas; "Learn more" below opens the popup */
.host-team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  background: var(--c);
  color: var(--on-c);
  border: 3px solid var(--c);
  border-radius: 14px;
  box-shadow: none;
  transform: rotate(-0.4deg);
}
.sr-page[data-mode="day"] .host-team {
  border-color: var(--edge);
  box-shadow: 4px 4px 0 var(--edge);
}
.host-team h4 {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}
.host-team p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  max-width: 70ch;
}
.host-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@container ev (min-width:1040px) {
  .ideas {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* eight ideas: two even rows */
  }
}
@container ev (min-width:1040px) {
  .host-head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); /* sign beside the text; narrower, "EVENT" would break */
    align-items: center;
    gap: 36px;
  }
}

/* ===== tablet: 720px and up ===== */
@container ev (min-width:720px) {
  .wrap {
    gap: 72px;
    padding-block: 72px;
  }
  .wh {
    font-size: 80px;
  }
  .h3 {
    font-size: clamp(28px, 4cqi, 36px);
  }
  .score-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .cell {
    border-right: 2px solid var(--board-line);
  }
  .cell:nth-child(3n) {
    border-right: 0;
  }
  .cell:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
}

/* ===== desktop: 1040px and up ===== */
@container ev (min-width:1040px) {
  .wrap {
    gap: 92px;
    padding-block: 96px;
    padding-left: max(40px, env(safe-area-inset-left, 0px));
    padding-right: max(40px, env(safe-area-inset-right, 0px));
  }
  .wh {
    font-size: 96px;
  }
  .lead {
    font-size: 21px;
  }
  .kick {
    font-size: 12px;
  }
  .sect {
    gap: 30px;
  }
  .hd {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }
  .sign {
    padding: 40px 60px 44px;
    border-radius: 24px;
    transform: rotate(-1.5deg);
  }
  .bulbs {
    inset: 11px;
  }
  .hd-copy {
    gap: 18px;
    margin-top: 0;
  }
  .score {
    padding: 26px;
    border-radius: 24px;
  }
  .score .bulbs {
    inset: 8px;
  }
  .score-in {
    border-radius: 14px;
  }
  .score-top {
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    padding: 18px 26px;
  }
  .score-top .kick {
    font-size: 12px;
  }
  .score-title {
    font-size: 30px;
    letter-spacing: 0.28em;
  }
  .cell {
    gap: 8px;
    padding: 24px 22px 22px;
  }
  .led {
    font-size: clamp(30px, 3cqi, 42px);
    text-shadow: none;
  }
  .cell span {
    font-size: 14px;
  }
  .go {
    font-size: 15px;
  }
  .act {
    gap: 16px;
    padding: 38px;
  }
  .act .body {
    font-size: 17px;
  }
  .lboard {
    padding: 34px 24px 36px;
    border-radius: 18px;
  }
  .lb-line {
    column-gap: 26px;
  }
  .lb-word {
    gap: 6px;
  }
  .lb-word span {
    min-width: 34px;
    height: 44px;
    font-size: 26px;
  }
  .mini {
    font-size: 13.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* ---------- inside the Mench Cafe page: same side gutters as the site, no preview bar ---------- */
.sr-page {
  background: transparent;
}
.wrap {
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}