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

/* 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: footers made of a flipping marquee band, social tiles and colour cards. Colours are the Mench Cafe palette (Plum night first, Day for light). */
.sr-page {
  --bg: #14171b;
  --surface: #171030;
  --ink: #f0ebff;
  --muted: #b3a8d6;
  --hair: #33285a;
  --red: #ff5b52;
  --yellow: #ffd731;
  --blue: #4fa6ff;
  --green: #35e08b;
  --purple: #b977ff;
  --on-red: #0b0717;
  --on-yellow: #0b0717;
  --on-blue: #0b0717;
  --on-green: #0b0717;
  --on-purple: #0b0717;
  --paper: #f0ebff;
  --on-paper: #0b0717;
  --display: "Big Shoulders Display", "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --spring: cubic-bezier(0.3, 1.6, 0.5, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  .sr-page:not([data-theme="dark"]) {
    --bg: #fffbf0;
    --surface: #ffffff;
    --ink: #1a1714;
    --muted: #5b5045;
    --hair: #e3d8c0;
    --red: #db2e27;
    --blue: #2f8fff;
    --green: #1fb36a;
    --purple: #9542fb;
    --on-red: #ffffff;
    --on-yellow: #1a1714;
    --on-blue: #1a1714;
    --on-green: #1a1714;
    --on-purple: #ffffff;
    --paper: #1a1714;
    --on-paper: #fffbf0;
    color-scheme: light;
  }
}
.sr-page[data-theme="light"] {
  --bg: #fffbf0;
  --surface: #ffffff;
  --ink: #1a1714;
  --muted: #5b5045;
  --hair: #e3d8c0;
  --red: #db2e27;
  --blue: #2f8fff;
  --green: #1fb36a;
  --purple: #9542fb;
  --on-red: #ffffff;
  --on-yellow: #1a1714;
  --on-blue: #1a1714;
  --on-green: #1a1714;
  --on-purple: #ffffff;
  --paper: #1a1714;
  --on-paper: #fffbf0;
  color-scheme: light;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.sr-page {
  background: var(--bg);
  color: var(--ink);
}
.sr-page {
  font-family: var(--body);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- page chrome (variations page) ---------- */
.page {
  max-width: 1440px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 72px;
}
.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding-block: 14px;
  border-bottom: 1px solid var(--hair);
}
.top h1 {
  margin: 0 auto 0 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1;
  text-transform: uppercase;
}
.var {
  margin-block: 0 64px;
  scroll-margin-top: 90px;
}
.stage {
  container: foot / inline-size;
}
.page[data-view="phone"] .stage {
  max-width: 400px;
  margin-inline: auto;
  outline: 2px solid var(--hair);
  outline-offset: 12px;
  border-radius: 20px;
}
.solo .stage {
  padding-block: 12px 16px;
}
.solo .ft > :not(.marquee) {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---------- shared footer parts ---------- */
.ft {
  --gap: clamp(8px, 1cqi, 12px);
  --r: clamp(18px, 2.4cqi, 30px);
  display: grid;
  gap: var(--gap);
  color: var(--ink);
}
.small {
  font-weight: 700;
  font-stretch: 105%;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.kicker {
  margin: 0;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.copy {
  margin: 0;
  align-self: end;
}
.card {
  min-width: 0;
  border-radius: var(--r);
  padding: clamp(22px, 2.8cqi, 36px);
}
.headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 3.6cqi, 48px);
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}
.headline span {
  display: block;
}
.headline .slant {
  font-style: italic;
  font-synthesis: style;
}
.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  padding-top: 4px;
}

/* marquee */
.marquee {
  overflow: hidden;
  padding-block: 12px;
  margin-block: -12px;
  --band: clamp(88px, 17cqi, 220px);
}
.marquee.thin {
  --band: clamp(50px, 7cqi, 92px);
}
.track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  height: var(--band);
  will-change: transform;
}
.badge {
  flex: none;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c);
  color: var(--on);
  --cut: var(--c);
}
.badge svg {
  width: 46%;
  height: 46%;
  transform: rotate(var(--spin, 0deg));
}
.c {
  fill: var(--cut);
}
.cs {
  stroke: var(--cut);
  fill: none;
}

/* flip boards: front face + back face spun on the horizontal axis */
.flip {
  display: grid;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg);
  transition: transform 0.75s cubic-bezier(0.34, 1.45, 0.55, 1);
}
.flip:hover,
.flip:focus-visible {
  transform: perspective(900px) rotateX(180deg);
}
.flip:focus-visible {
  outline: none;
}
.flip:focus-visible .face {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.face {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.front {
  background: var(--c);
  color: var(--on);
}
.back {
  background: var(--b, var(--paper));
  color: var(--onb, var(--on-paper));
  transform: rotateX(180deg);
}
.pill {
  flex: none;
  height: 100%;
  font-family: var(--display);
  font-weight: 900;
  font-size: calc(var(--band) * 0.86);
  line-height: 1;
  letter-spacing: -0.01em;
}
.pill .face {
  padding-inline: calc(var(--band) * 0.12);
  border-radius: min(var(--r), calc(var(--band) * 0.2));
}
.pill .face span {
  transform: translateY(0.035em);
}

/* social tiles */
.tile {
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: var(--r);
  background: var(--tb);
  color: var(--tc);
  container-type: size;
  transition:
    background-color 0.2s,
    color 0.2s,
    transform 0.35s var(--spring);
}
.tile svg {
  width: 40%;
  height: 40%;
  fill: currentColor;
  transition: transform 0.35s var(--spring);
}
.tile:hover,
.tile:focus-visible {
  background: var(--hb);
  color: var(--hc);
  transform: rotate(-2deg);
}
.tile:hover svg,
.tile:focus-visible svg {
  transform: scale(1.12) rotate(4deg);
}
.tile .word {
  font-family: var(--display);
  font-weight: 900;
  font-size: 27cqi;
  line-height: 1;
  transition: transform 0.35s var(--spring);
}
.tile:hover .word,
.tile:focus-visible .word {
  transform: scale(1.1) rotate(-4deg);
}

/* ---------- A: classic ---------- */

/* ---------- B: big wordmark ---------- */
.fb-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.fb-head {
  grid-column: span 7;
  background: var(--yellow);
  color: var(--on-yellow);
  display: grid;
  align-content: space-between;
  gap: 32px;
  min-height: clamp(260px, 30cqi, 380px);
}
.fb-head .headline {
  font-size: clamp(44px, 6.2cqi, 92px);
}
.btn {
  justify-self: start;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(24px, 2.6cqi, 34px);
  line-height: 1;
  text-transform: uppercase;
}
.btn .face {
  padding: 0.4em 0.8em 0.36em;
  border-radius: 999px;
}
.fb-menu {
  grid-column: span 5;
  background: var(--blue);
  color: var(--on-blue);
  display: grid;
  align-content: start;
  gap: 18px;
}
.fb-find {
  grid-column: span 5;
  background: var(--purple);
  color: var(--on-purple);
  display: grid;
  align-content: space-between;
  gap: 20px;
}
.fb-find h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(38px, 4.6cqi, 64px);
  line-height: 0.92;
  text-transform: uppercase;
}
.fb-find .addr {
  margin: 6px 0 0;
  font-weight: 600;
  font-size: 16px;
}
.fit {
  overflow: hidden;
}
.fit-in {
  display: inline-flex;
  white-space: nowrap;
}

/* ---------- C: bento menu ---------- */

/* ---------- D: flip rows ---------- */
.row {
  height: clamp(58px, 7cqi, 92px);
}
.row .face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: clamp(16px, 2.4cqi, 32px);
  border-radius: clamp(12px, 1.4cqi, 18px);
}
.row .front {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.row b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 4.4cqi, 60px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.row em {
  font-style: normal;
  font-weight: 600;
  font-size: clamp(12.5px, 1.3cqi, 16px);
  line-height: 1.25;
  color: var(--muted);
  text-align: right;
}
.row .back em {
  color: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Menus (inside A's green card) ---------- */
/* M1 flip links */
/* M2 chips */
/* M3 game menu */
.m-game {
  display: grid;
  gap: 10px;
}
.gm {
  --glide: cubic-bezier(0.22, 1.2, 0.36, 1);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, max-content));
  column-gap: 30px;
  align-content: start;
}
.gm li:not(.cursor):not(.hl) {
  padding-left: 26px;
}
.gm a {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(24px, 2.5cqi, 32px);
  line-height: 1.12;
  text-transform: uppercase;
  transition:
    transform 0.2s var(--glide),
    color 0.18s;
}
.gm:not([data-select]) a.on {
  transform: translateX(6px);
}
/* the arrow glides to the chosen link and nudges in place */
.gm .cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 15px;
  height: 18px;
  padding: 0;
  pointer-events: none;
  color: var(--cursor-c, currentColor);
  transition: transform 0.26s var(--glide);
}
.gm .cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: nudge 0.5s ease-in-out infinite alternate;
}
.gm .cursor.r::before {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  animation-name: nudge-r;
}
@keyframes nudge {
  to {
    transform: translateX(4px);
  }
}
@keyframes nudge-r {
  to {
    transform: translateX(-4px);
  }
}
.gm[data-cursor="pixel"] .cursor {
  width: 15px;
  height: 27px;
}
.gm[data-cursor="pixel"] .cursor::before {
  clip-path: polygon(
    0 0,
    20% 0,
    20% 11.1%,
    40% 11.1%,
    40% 22.2%,
    60% 22.2%,
    60% 33.3%,
    80% 33.3%,
    80% 44.4%,
    100% 44.4%,
    100% 55.6%,
    80% 55.6%,
    80% 66.7%,
    60% 66.7%,
    60% 77.8%,
    40% 77.8%,
    40% 88.9%,
    20% 88.9%,
    20% 100%,
    0 100%
  );
}
.gm[data-cursor="meeple"] .cursor {
  width: 26px;
  height: 26px;
  transition-duration: 0.34s;
}
.gm[data-cursor="meeple"] .cursor::before {
  content: none;
}
.gm[data-cursor="meeple"] .cursor svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: hop 0.5s ease-in-out infinite alternate;
}
@keyframes hop {
  to {
    transform: translateY(-3px) rotate(-6deg);
  }
}
.gm[data-cursor="twin"] li:not(.cursor):not(.hl),
.gm[data-align="center"] li:not(.cursor):not(.hl) {
  padding-inline: 26px;
  text-align: center;
}
/* solid highlight bar that glides to the chosen link */
.gm .hl {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 0;
  z-index: 0;
  border-radius: 5px;
  background: var(--cardink);
  pointer-events: none;
  transition:
    transform 0.26s var(--glide),
    width 0.26s var(--glide),
    height 0.2s;
}
.gm:not(.ready) .hl,
.gm:not(.ready) .cursor {
  transition: none;
}
.gm[data-select="bar"] a {
  padding: 0 0.16em;
  margin-left: -0.16em;
}
.gm[data-select="bar"][data-align="center"] a,
.gm[data-select="bar"][data-cursor="twin"] a {
  margin-left: 0;
}
.gm[data-select="bar"] a.on {
  color: var(--card);
}
.wt .gm a {
  font-size: clamp(18px, 2.1cqi, 28px);
}
/* which card the menu sits on (for the bar marker) */
.fb-menu {
  --card: var(--blue);
  --cardink: var(--on-blue);
}
/* M4 icon rows */

/* ---------- phone width (by container, so the Phone preview works too) ---------- */
@container foot (max-width: 760px) {
  .fb-grid > * {
    grid-column: 1 / -1;
  }
  .fb-head {
    min-height: 0;
  }
  .row .face {
    flex-wrap: wrap;
    align-content: center;
    gap: 0 12px;
  }
  .row em {
    text-align: left;
  }
  .row {
    height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip,
  .tile,
  .tile svg,
  .tile .word,
  .gm a,
  .gm .cursor {
    transition: none !important;
  }
  .gm .cursor::before,
  .gm .cursor svg {
    animation: none;
  }
  .gm .cursor,
  .gm .hl,
  .gm a {
    transition: none !important;
  }
}

/* ================= Round 2 (built from A, B and the game menu) ================= */

/* V4: wordmark on top */

/* V5: title screen */

@container foot (max-width: 760px) {
  .gm {
    --cols: 1 !important;
  }
}
/* round 2 fixes */
.gm[data-cols]:not([data-cols="1"]) {
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 4), auto);
  column-gap: 22px;
}
.fb-menu .gm a {
  font-size: clamp(22px, 2.15cqi, 30px);
}
@container foot (max-width: 760px) {
  .gm[data-cols]:not([data-cols="1"]) {
    grid-auto-flow: row;
    grid-template-rows: none;
  }
}

/* ================= Round 2 revisions ================= */
.wt {
  display: grid;
  align-content: center;
  gap: 10px;
}
.wt .m-game {
  gap: 12px;
}
/* V1: tiles, headline card and menu card side by side, all the height of the tiles */
/* V2: headline + tiles on top, address + menu below */
/* V3: headline card stacked over the menu card, beside the tiles */
/* V4: centred cards */
/* V5: solid-colour menu card */

/* ================= Round 3 ================= */
/* V1: bigger squares beside a shorter Find us card */
.r3-find {
  grid-column: span 4;
  padding: clamp(18px, 2.4cqi, 36px);
  gap: 10px;
  align-content: space-between;
  min-height: 0;
}
.r3-find h3 {
  font-size: clamp(30px, 4.2cqi, 60px);
}
.r3-find .addr {
  font-size: clamp(13px, 1.3cqi, 16px);
}
.r3-tiles8 {
  grid-column: span 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  align-content: start;
}
.r3-tiles8 .tile {
  aspect-ratio: 1;
}
/* V3 and V5: a 24-column grid so the square tile block can match the headline card */
/* V5: the menu card reaches down into the Find us row; headline leans left */
/* V4: tiles, headline card and menu card side by side */

@container foot (max-width: 760px) {
  .r3-find,
  .r3-tiles8 {
    grid-column: 1 / -1;
  }
}

.fb-menu.wt {
  align-content: start;
}

/* ================= Round 4 ================= */
.r4-big .gm a {
  font-size: clamp(24px, 3.4cqi, 46px);
  line-height: 1.14;
}
.r4-big .m-game {
  gap: 14px;
}
.r4-big .gm[data-cursor="pixel"] .cursor {
  width: 18px;
  height: 32px;
}
/* Find us: kicker sits just above the street, which is centred in the card */
.r4-find {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: 6px;
  align-content: stretch;
}
.r4-find .kicker {
  align-self: end;
}
.r4-find h3 {
  margin: 0;
}
.r4-find .addr {
  align-self: start;
  margin: 0;
}
/* brand-coloured tiles on plain white squares */

/* ================= Round 5 ================= */
.r5-v1 .gm a {
  font-size: clamp(26px, 3.9cqi, 52px);
}
.r5-v1 .gm[data-cursor="pixel"] .cursor {
  width: 20px;
  height: 36px;
}
.ctile {
  box-shadow: none;
  color: #ffffff;
}
.ctile:hover,
.ctile:focus-visible {
  background: var(--tb);
  color: var(--tc);
}
.ctile.ev {
  --tb: #1fb36a;
  --tc: #0b0717;
}
.ctile.ev .word {
  color: #0b0717;
}
.ctile.ig {
  --tb: linear-gradient(45deg, #feda77, #f58529 25%, #dd2a7b 50%, #8134af 75%, #515bd4);
  --tc: #ffffff;
}
.ctile.tt {
  --tb: #0b0717;
  --tc: #ffffff;
  box-shadow: inset 0 0 0 2px var(--hair);
}
.ctile.gm4 {
  --tb: linear-gradient(135deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc04 50% 75%, #34a853 75%);
  --tc: #ffffff;
}
.ctile.ig,
.ctile.gm4 {
  background: var(--tb);
}

/* ================= Round 6 ================= */
.r6 {
  --hover-bg: #0b0717;
  --hover-fg: #fffbf0;
  --hover-ring: 0 0 0 0 transparent;
}
@media (prefers-color-scheme: dark) {
  .sr-page:not([data-theme="light"]) .r6 {
    --hover-ring: inset 0 0 0 2px #fffbf0;
  }
}
.sr-page[data-theme="dark"] .r6 {
  --hover-ring: inset 0 0 0 2px #fffbf0;
}
/* no flip: hover turns the sign or button black with ivory text */
.r6 .flip,
.r6 .flip:hover,
.r6 .flip:focus-visible {
  transform: none;
  transition: none;
}
.r6 .flip .front {
  transition:
    background-color 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.r6 .flip:hover .front,
.r6 .flip:focus-visible .front {
  background: var(--hover-bg);
  color: var(--hover-fg);
  box-shadow: var(--hover-ring);
}
.r6 .marquee.r6big {
  --band: clamp(74px, 10.5cqi, 138px);
}
.r6 .marquee[data-drag] {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.r6 .marquee.dragging {
  cursor: grabbing;
}
.r6 .marquee[data-drag] a {
  -webkit-user-drag: none;
}
/* V1 */
.r6 .fb-menu.wt {
  align-content: center;
  padding-left: clamp(36px, 5.2cqi, 76px);
}
.r6 .r4-find {
  justify-items: center;
  text-align: center;
}
/* V3 */

/* ================= V1.1 ================= */
.r61 .fb-head {
  padding-top: clamp(36px, 4.4cqi, 58px);
}
/* Events: marquee-sign square */
/* phone: Where to links become a 2x2 mosaic of big tap targets */
@container foot (max-width: 760px) {
  .r61 .fb-menu.wt {
    padding-left: clamp(22px, 2.8cqi, 36px);
  }
  .r61 .fb-menu .gm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .r61 .fb-menu .gm {
    row-gap: 0;
    column-gap: 10px;
  }
  .r61 .fb-menu .gm li:not(.cursor):not(.hl) {
    padding-left: 26px;
    display: flex;
    align-items: center;
    min-height: 64px;
  }
  .r61 .fb-menu .gm a {
    font-size: 24px;
    line-height: 1.05;
    min-height: 0;
    display: inline-block;
    place-items: initial;
    text-align: left;
    border-radius: 5px;
    transition: color 0.18s;
  }
  .r61 .fb-head {
    padding-right: 16px;
  }
  .r61 .fb-head .headline {
    font-size: 12cqi;
  }
}

/* V1.1: roomier highlight bar */
.r61 .gm[data-select="bar"] a {
  padding: 0.2em 0.3em 0.12em;
  margin-left: -0.3em;
  border-radius: 7px;
}

/* ================= V1.2 (phone only) ================= */
@container foot (max-width: 760px) {
  /* order: headline, Where to, squares, Find us */
  .r62 .fb-head {
    order: 1;
  }
  .r62 .fb-menu {
    order: 2;
  }
  .r62 .r3-tiles8 {
    order: 3;
  }
  .r62 .r4-find {
    order: 4;
  }
  /* Where to: plain mosaic cells with a thin black outline, no arrow, no highlight */
  .r62 .fb-menu .gm .cursor,
  .r62 .fb-menu .gm .hl {
    display: none;
  }
  .r62 .fb-menu .gm {
    gap: 8px;
  }
  .r62 .fb-menu .gm li:not(.cursor):not(.hl) {
    padding: 0;
    display: grid;
    min-height: 0;
  }
  .r62 .fb-menu .gm a,
  .r62 .fb-menu .gm a.on,
  .r62 .gm[data-select="bar"] a {
    display: grid;
    place-items: center;
    min-height: 68px;
    margin: 0;
    padding: 8px 10px;
    text-align: center;
    border: 1px solid #0b0717;
    border-radius: 10px;
    background: none;
    color: inherit;
    transform: none;
    transition: none;
  }
  .r62 .fb-menu .gm a:hover,
  .r62 .fb-menu .gm a:active,
  .r62 .fb-menu .gm a:focus-visible {
    background: #0b0717;
    color: #fffbf0;
    border-color: #0b0717;
  }
  /* no hover effects on touch screens */
  .r62 .tile:hover,
  .r62 .tile:focus-visible {
    background: var(--tb);
    color: var(--tc);
    transform: none;
  }
  .r62 .tile:hover svg,
  .r62 .tile:hover .word {
    transform: none;
  }
  .r62 .flip:hover .front,
  .r62 .flip:focus-visible .front {
    background: var(--c);
    color: var(--on);
    box-shadow: none;
  }
}

.sr-page {
  margin: 0;
}
.sr-page {
  background: transparent !important;
}
.solo .stage {
  padding-block: 0 16px !important;
}
.solo .ft > :not(.marquee) {
  padding-left: clamp(16px, 4vw, 40px) !important;
  padding-right: clamp(16px, 4vw, 40px) !important;
}
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
}