/* ditmobile.com "The Flask": page layer over scrollcraft.css.
   Tokens first (six colours, one family). Everything below styles markup this
   page wrote; nothing restyles .sc-world or a [data-sc-*] mechanism. */

:root {
  --sc-canvas:      #0e0c1c;
  --sc-surface:     #161428;
  --sc-ink:         #f4f3fa;
  --sc-ink-soft:    #cfc8ef;   /* lavender-tinted, never flat grey */
  --sc-accent:      #8b5cf6;   /* the brand violet: focus, rail, marks */
  --sc-accent-ink:  #0e0c1c;
  --sc-font-display: "Montserrat", system-ui, sans-serif;
  --sc-font-text:    "Montserrat", system-ui, sans-serif;
  --sc-shadow-color: 250 45% 4%;

  --btn:        #7c3aed;       /* same hue, one step deeper, so white type clears 4.5:1 */
  --btn-hover:  #6d28d9;
  --gold:       #f2c94c;
  --rail-w:     4.5rem;
}

body { font-weight: 500; line-height: 1.65; letter-spacing: 0.002em; }

.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;
}
.skip {
  position: fixed; left: var(--sc-gutter); top: -4rem; z-index: 90;
  padding: 0.6rem 1rem; border-radius: var(--sc-r-md);
  background: var(--sc-surface); color: var(--sc-ink);
}
.skip:focus-visible { top: 1rem; }

:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 6px; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

/* The world pictures: the engine styles direct media children, a <picture>
   wrapper needs the same box. */
.sc-world__seg > picture { position: absolute; inset: 0; }
.sc-world__seg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.55rem 1.1rem;
  border-radius: var(--sc-r-md); border: 1px solid transparent;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              transform 120ms var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:disabled { cursor: default; opacity: 0.45; transform: none; }
.btn--primary { background: var(--btn); color: #fff; box-shadow: var(--sc-e2), var(--sc-edge); }
.btn--ghost {
  background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
  color: var(--sc-ink); border-color: var(--sc-hairline-strong);
}
.btn--lg { min-height: 52px; padding: 0.8rem 1.5rem; font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--btn-hover); text-decoration: none; }
  .btn--ghost:hover:not(:disabled) { border-color: var(--sc-ink-soft); text-decoration: none; }
}

/* ------------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: 4.25rem; padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent),
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 70%, transparent);
}
.bar__mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.bar__mark img { width: 36px; height: 36px; }
.bar__end { display: flex; align-items: center; gap: 0.6rem; }

.sound {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.4rem 0.8rem;
  border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong);
  background: color-mix(in oklab, var(--sc-canvas) 50%, transparent);
  color: var(--sc-ink-soft); font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.sound .sound__waves { display: none; }
.sound[aria-pressed="true"] { color: var(--sc-ink); border-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); }
.sound[aria-pressed="true"] .sound__waves { display: inline; }
.sound[aria-pressed="true"] .sound__mute { display: none; }
@media (hover: hover) and (pointer: fine) { .sound:hover { color: var(--sc-ink); } }

/* the menu button: the sound button's twin, so the bar reads as one set */
.menu-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.4rem 0.85rem;
  border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline-strong);
  background: color-mix(in oklab, var(--sc-canvas) 50%, transparent);
  color: var(--sc-ink); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.menu-btn[aria-expanded="true"] { border-color: color-mix(in oklab, var(--sc-accent) 70%, transparent); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { border-color: var(--sc-ink-soft); } }

/* ------------------------------------------------------------- site menu -- */
/* A sheet from the right over the dimmed, softened film. Native <dialog>:
   focus stays inside, Esc and the backdrop close it, the page behind is inert. */
html { scrollbar-gutter: stable; }
html.menu-open { overflow: hidden; }
.menu {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(27.5rem, 100%); height: 100dvh; max-width: none; max-height: none;
  background: var(--sc-surface); color: var(--sc-ink);
  border-left: 1px solid var(--sc-hairline);
  box-shadow: -18px 0 48px hsl(var(--sc-shadow-color) / 0.55), -2px 0 6px hsl(var(--sc-shadow-color) / 0.3);
  opacity: 0; translate: 2.5rem 0;
  transition: opacity 260ms var(--sc-ease-out), translate 420ms var(--sc-ease-out);
}
.menu.is-open { opacity: 1; translate: 0 0; }
.menu::backdrop {
  background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  backdrop-filter: blur(6px) saturate(0.85); -webkit-backdrop-filter: blur(6px) saturate(0.85);
  opacity: 0; transition: opacity 260ms var(--sc-ease-out);
}
.menu.is-open::backdrop { opacity: 1; }
.menu__panel {
  display: flex; flex-direction: column; gap: 1.6rem; min-height: 100%;
  padding: 0 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin;
}
.menu__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.25rem; padding-block: 0.75rem; border-bottom: 1px solid var(--sc-hairline);
}
.menu__close {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -0.4rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md);
  background: transparent; color: var(--sc-ink); cursor: pointer;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu__close:hover { border-color: var(--sc-ink-soft); } }
.menu__nav { display: grid; gap: 0.5rem; }
.menu__group {
  margin: 1rem 0 0.15rem; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.01em; color: var(--sc-ink-soft);
}
.menu__group:first-child { margin-top: 0; }
.menu__rows { list-style: none; margin: 0 -0.75rem; padding: 0; display: grid; gap: 0.15rem; }
.row {
  display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0.75rem; border-radius: var(--sc-r-md);
  text-decoration: none; color: var(--sc-ink);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.row__icon { width: 3rem; height: 3rem; border-radius: 50%; box-shadow: 0 2px 6px hsl(var(--sc-shadow-color) / 0.45); }
.row__icon--glyph {
  display: grid; place-items: center; color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-accent) 22%, var(--sc-surface));
}
.row__text { display: grid; gap: 0.1rem; min-width: 0; }
.row__name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; }
.row__line { font-size: 0.86rem; line-height: 1.45; color: var(--sc-ink-soft); }
.row__go { color: var(--sc-ink-soft); transition: translate var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); }
.row:focus-visible { outline-offset: -2px; border-radius: var(--sc-r-md); }
.row:hover, .row:focus-visible { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.row:hover .row__go, .row:focus-visible .row__go { color: var(--sc-ink); translate: 3px 0; }
.menu__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.menu__legal a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.35rem 0.9rem;
  border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-pill);
  font-size: 0.88rem; font-weight: 600; text-decoration: none; color: var(--sc-ink);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.menu__legal a:hover, .menu__legal a:focus-visible { border-color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); }
.menu__foot { margin-top: auto; display: grid; gap: 0.9rem; padding-top: 1.2rem; border-top: 1px solid var(--sc-hairline); }
.menu__small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; margin: 0; font-size: 0.8rem; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------------ rail -- */
.rail {
  position: fixed; right: calc(var(--sc-gutter) * 0.45); top: 50%; translate: 0 -50%;
  z-index: var(--sc-z-chrome);
}
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; position: relative; }
.rail__track {
  position: absolute; right: calc(22px - 1px); top: 22px; bottom: 22px; width: 2px;
  background: var(--sc-hairline); border-radius: 2px; overflow: hidden;
}
.rail__fill {
  position: absolute; inset: 0; background: var(--sc-accent);
  transform-origin: 50% 0; transform: scaleY(0);
}
.rail button {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
  min-height: 44px; min-width: 44px; padding: 0 12px 0 0.5rem;
  background: none; border: 0; cursor: pointer; color: var(--sc-ink-soft);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.rail__dot {
  order: 2; width: 20px; height: 20px; border-radius: 50%; flex: none; position: relative;
}
.rail__dot::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  background: var(--sc-canvas); border: 1.5px solid var(--sc-ink-soft);
  transition: transform var(--sc-d-base) var(--sc-ease-out), background-color var(--sc-d-base) var(--sc-ease-out);
}
.rail__label {
  order: 1; opacity: 0; translate: 6px 0;
  transition: opacity var(--sc-d-base) var(--sc-ease-out), translate var(--sc-d-base) var(--sc-ease-out);
  text-shadow: 0 1px 8px var(--sc-canvas);
}
.rail button[aria-current="step"] { color: var(--sc-ink); }
.rail button[aria-current="step"] .rail__dot::before { background: var(--sc-accent); border-color: var(--sc-accent); transform: scale(1.35); }
.rail button[aria-current="step"] .rail__label,
.rail button:focus-visible .rail__label { opacity: 1; translate: 0 0; }
@media (hover: hover) and (pointer: fine) {
  .rail:hover .rail__label { opacity: 0.85; translate: 0 0; }
  .rail button:hover { color: var(--sc-ink); }
}

/* ------------------------------------------------------------ copy layer -- */
.blk { position: absolute; }
.h-hero, .h-way, .h-close {
  font-family: var(--sc-font-display); font-weight: 800; margin: 0;
  letter-spacing: -0.032em; line-height: 1.0; text-wrap: balance;
}
.h-hero  { font-size: clamp(2.5rem, 1rem + 3.7vw, 4.7rem); margin-bottom: 1.25rem; }
.h-way   { font-size: clamp(2rem, 1.1rem + 2.3vw, 3.4rem); margin-bottom: 1rem; }
.h-way--quiet { font-size: clamp(1.6rem, 1.05rem + 1.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.024em; }
.h-close { font-size: clamp(2.2rem, 1.15rem + 2.8vw, 4rem); margin-bottom: 1.1rem; }
.lede { margin: 0; max-width: 33ch; font-size: clamp(1.05rem, 0.92rem + 0.5vw, 1.35rem); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }
.body { margin: 0; max-width: 36ch; font-size: clamp(1rem, 0.94rem + 0.25vw, 1.14rem); line-height: 1.66; color: var(--sc-ink-soft); text-wrap: pretty; }

.blk--hero  { left: var(--sc-gutter); top: 21vh; width: min(44rem, 52vw); }
.blk--lead  { left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(30rem, 36vw); }
.blk--trail { right: calc(var(--sc-gutter) + var(--rail-w)); top: 50%; translate: 0 -50%; width: min(29rem, 34vw); }
.blk--high  { top: 22vh; translate: none; }

.app-link {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.5rem;
  min-height: 44px; font-weight: 700; text-decoration: none;
}
.app-link img { width: 40px; height: 40px; border-radius: 12px; box-shadow: var(--sc-e2); }
.app-link span { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--sc-ink) 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .app-link:hover span { text-decoration-color: var(--sc-ink); } }

/* scrim plates: one per block, shaped to where that block sits */
.plate { opacity: 0; will-change: opacity; }
.plate--hero {
  /* the cartoon lab is brighter behind the headline than the round-1 desk was */
  background: radial-gradient(92% 88% at 12% 36%,
    color-mix(in oklab, var(--sc-canvas) 93%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 38%,
    color-mix(in oklab, var(--sc-canvas) 36%, transparent) 58%, transparent 76%);
}
.plate--lead {
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 84%, transparent) 32%,
    color-mix(in oklab, var(--sc-canvas) 38%, transparent) 48%, transparent 60%);
}
.plate--trail {
  background: linear-gradient(to left,
    color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 62%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 18%, transparent) 48%, transparent 60%);
}
.plate--high { background: radial-gradient(64% 72% at 96% 34%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 45%, transparent 80%); }
.plate--table {
  background:
    radial-gradient(34% 22% at 50% 27%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%, transparent 100%),
    radial-gradient(44% 64% at 50% 54%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 64%, transparent) 55%, transparent 100%);
}
.plate--close {
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 34%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 64%);
}

/* ----------------------------------------------------- hero depth planes -- */
.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fore { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fore img {
  position: absolute; bottom: -2vh; height: auto;
  filter: blur(5px) brightness(0.8);
  will-change: transform, opacity; transform-origin: 50% 100%;
}
/* widths keep each cutout at the scale it had in the generated 16:9 plate */
.fore__l { left: -3vw; width: 42vw; }
.fore__r { right: -2vw; width: 40vw; }

/* ------------------------------------------------------- the King's claim -- */
.blk--nerve {
  left: 50%; top: 52%; translate: -50% -50%;
  width: min(40rem, calc(100vw - 2 * var(--sc-gutter)));
  display: grid; justify-items: center; gap: clamp(0.8rem, 1.6vh, 1.25rem);
  text-align: center;
}
.king { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0; min-height: 56px; }
.king__av { width: 56px; height: 56px; border-radius: 14px; box-shadow: var(--sc-e2); flex: none; }
.king__say {
  font-size: clamp(1.1rem, 0.92rem + 0.7vw, 1.45rem); font-weight: 600; font-style: italic;
  line-height: 1.35; max-width: 30ch; text-align: left; text-wrap: balance;
}
.table { display: grid; justify-items: center; gap: clamp(0.6rem, 1.4vh, 1rem); }
.hand { display: flex; gap: clamp(0.6rem, 1vw, 0.9rem); }
.card {
  width: clamp(62px, 6.4vw, 92px); aspect-ratio: 300 / 420; perspective: 900px;
  opacity: 0; transform: translate(var(--dx, 0), var(--dy, -40px)) rotate(var(--dr, -8deg)) scale(0.92);
  transition: transform 560ms var(--sc-ease-out), opacity 260ms var(--sc-ease-out);
}
.hand--king .card:nth-child(1) { --dx: 60px; --dy: -30px; --dr: 10deg; }
.hand--king .card:nth-child(2) { --dx: 20px; --dy: -40px; --dr: 6deg; transition-delay: 110ms; }
.hand--you .card:nth-child(1)  { --dx: 50px; --dy: -160px; --dr: -12deg; transition-delay: 220ms; }
.hand--you .card:nth-child(2)  { --dx: 10px; --dy: -170px; --dr: -6deg;  transition-delay: 330ms; }
.is-dealt .card { opacity: 1; transform: none; }
.card__in {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: rotateY(calc((1 - var(--flip, 1)) * 180deg));
}
.hand--king .card__in { --flip: 0; }
.card__face, .card__back {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 9% / 6.5%; box-shadow: var(--sc-e2);
}
.card__face { object-fit: cover; background: #fff; }
/* the King's two possible hands are both loaded with the page; the reveal only picks one */
.hand--king .card__face[data-face="call"],
.hand--king[data-faces="call"] .card__face[data-face="believe"] { display: none; }
.hand--king[data-faces="call"] .card__face[data-face="call"] { display: block; }
.card__back {
  transform: rotateY(180deg);
  /* the app's own opponent card back: deep blue, light-blue edge */
  background:
    repeating-linear-gradient(45deg, rgba(129, 212, 250, 0.16) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(129, 212, 250, 0.16) 0 2px, transparent 2px 9px),
    #01579b;
  border: 2px solid #81d4fa;
}
.claim { display: grid; justify-items: center; gap: 0.3rem; margin: 0; opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
.claim__who { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.chip {
  display: inline-block; padding: 0.2rem 0.85rem; border-radius: var(--sc-r-md);
  background: linear-gradient(180deg, #7c3aed, #5b21b6);
  border: 2px solid var(--gold); color: #ffd966;
  font-weight: 800; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); letter-spacing: 0.05em; line-height: 1.3;
  box-shadow: var(--sc-e2), var(--sc-edge);
}
[data-stage="claim"] .claim, [data-stage="reveal"] .claim, [data-stage="verdict"] .claim { opacity: 1; }

.choice, .hint, .verdict { grid-area: act; }
.blk--nerve { grid-template-areas: "king" "table" "act"; }
.king { grid-area: king; } .table { grid-area: table; }
.blk--nerve > .choice { display: flex; gap: 0.75rem; justify-content: center; align-self: start; }
.hint { margin: 0; align-self: start; font-size: 0.85rem; color: var(--sc-ink-soft); translate: 0 3.6rem; }
.choice, .hint { opacity: 0; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
[data-stage="claim"] .choice, [data-stage="claim"] .hint { opacity: 1; }
.choice [aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 2px; }
.verdict { display: grid; gap: 0.6rem; max-width: 36rem; opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); pointer-events: none; }
.verdict p { margin: 0; font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.06rem); line-height: 1.6; color: var(--sc-ink-soft); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); }
.verdict__lesson { color: var(--sc-ink) !important; font-weight: 600; }
.verdict__lesson a { white-space: nowrap; }
[data-stage="verdict"] .verdict { opacity: 1; pointer-events: auto; }
[data-confess] .verdict__confess, [data-lesson] .verdict__lesson { opacity: 1; }

/* ---------------------------------------------------------------- close -- */
.blk--close { left: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(34rem, 40vw); }
.close__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.2rem; margin-top: 1.8rem; }
.stores { font-size: 0.9rem; color: var(--sc-ink-soft); }
.colophon { display: grid; gap: 0.2rem; margin: 2.4rem 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--sc-ink-soft); }

.phone {
  position: absolute; margin: 0; right: calc(var(--sc-gutter) + var(--rail-w) + 3vw); bottom: 6vh;
  height: min(60vh, 560px); aspect-ratio: 540 / 1100; opacity: 0;
  display: grid; grid-template-rows: 1fr auto; gap: 0.7rem; justify-items: center;
  will-change: opacity; pointer-events: none;
}
.phone__body {
  height: 100%; aspect-ratio: 540 / 1040; padding: 9px; border-radius: 34px;
  background: #0b0a14; border: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent);
  box-shadow: var(--sc-e3), var(--sc-edge);
  rotate: -3deg;
}
.phone__screen { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; background: #161428; }
.phone figcaption { font-size: 0.75rem; color: var(--sc-ink-soft); text-shadow: 0 1px 10px var(--sc-canvas); }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  :root { --rail-w: 0rem; }
  .bar { height: 3.6rem; }
  .bar__mark span { font-size: 0.92rem; }
  .bar__mark img { width: 30px; height: 30px; }
  .sound { padding-inline: 0.65rem; }
  .sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bar .btn { min-height: 40px; padding: 0.45rem 0.8rem; font-size: 0.85rem; }
  .menu-btn { padding-inline: 0.65rem; }
  .menu-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bar__end { gap: 0.45rem; }
  .menu { width: 100%; border-left: 0; box-shadow: none; }
  .menu__head { min-height: 3.6rem; }
  .menu__head .bar__mark img { width: 30px; height: 30px; }

  /* The rail stays a vertical column, as on desktop (a vertical scroll reads as a vertical map):
     right edge, just under the bar, dots inside the gutter. Only the current section's name shows,
     to the left of its own dot (never on the other dots), and only while the page moves
     (.is-moving, page.js) or a dot has keyboard focus: at rest it would sit on the copy. */
  .rail { top: 4.1rem; right: 0; translate: none; }
  .rail ol { gap: 0; }
  .rail__track { right: 9px; top: 13px; bottom: 13px; }
  .rail button { position: relative; min-height: 26px; min-width: 30px; padding: 0 0 0 10px; }
  .rail__label {
    position: absolute; right: 22px; top: 50%; translate: 0 -50%;
    font-size: 0.7rem; white-space: nowrap; pointer-events: none; opacity: 0;
    transition: opacity 420ms var(--sc-ease-out);
  }
  .rail .rail__label,
  .rail:hover .rail__label,
  .rail button[aria-current="step"] .rail__label { opacity: 0; translate: 0 -50%; }
  .rail.is-moving button[aria-current="step"] .rail__label,
  .rail button:focus-visible .rail__label { opacity: 1; translate: 0 -50%; transition-duration: 160ms; }

  .blk--hero { left: var(--sc-gutter); right: var(--sc-gutter); top: 8.2rem; width: auto; }
  .h-hero { font-size: clamp(2.15rem, 1.4rem + 3.6vw, 2.9rem); }
  .blk--lead, .blk--trail, .blk--high, .blk--close {
    left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    top: auto; bottom: calc(5vh + env(safe-area-inset-bottom)); translate: none;
  }
  .h-way { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.3rem); }
  .body, .lede { max-width: none; }
  .app-link { margin-top: 1rem; }

  .plate--hero { background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 40%, transparent) 44%, transparent 58%); }
  .plate--lead, .plate--trail, .plate--high, .plate--close {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 34%, transparent) 50%, transparent 64%);
  }
  .plate--close { background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 42%,
      color-mix(in oklab, var(--sc-canvas) 40%, transparent) 62%, transparent 76%); }

  .blk--nerve { top: 54%; gap: 0.7rem; }
  .king__av { width: 46px; height: 46px; border-radius: 12px; }
  .king__say { font-size: 1.05rem; }
  .card { width: clamp(56px, 16vw, 72px); }
  .plate--table { background:
    radial-gradient(80% 16% at 50% 31%, color-mix(in oklab, var(--sc-canvas) 86%, transparent) 0%, transparent 100%),
    radial-gradient(90% 60% at 50% 55%,
      color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 62%, transparent) 55%, transparent 100%); }

  .h-close { font-size: clamp(1.8rem, 1.2rem + 2.8vw, 2.4rem); }
  .close__act { margin-top: 1.1rem; }
  .colophon { margin-top: 1.2rem; font-size: 0.74rem; }
  .phone { right: auto; left: 50%; translate: -50% 0; top: 7.4rem; bottom: auto; height: min(30vh, 300px); }
  .phone figcaption { display: none; }

  .fore__l { width: 66vw; left: -14vw; }
  .fore__r { width: 60vw; right: -12vw; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .phone { display: none; }
  .colophon span:last-child { display: none; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (max-width: 400px) {
  /* with the menu button the wordmark no longer fits beside the flask; the flask stays the home link */
  .bar > .bar__mark > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .menu { translate: none; transition: opacity 160ms linear; }
  .row__go { transition: none; }
  .row:hover .row__go, .row:focus-visible .row__go { translate: none; }
  .card { transition: opacity 200ms linear; transform: none !important; }
  .card__in { transform: none !important; }
  .hand--king .card__back { transform: none; opacity: calc(1 - var(--flip, 0)); transition: opacity 200ms linear; }
  .hand--king .card__face { opacity: var(--flip, 0); transition: opacity 200ms linear; }
  .fore img { transform: none !important; }
  .phone__body { rotate: 0deg; }
}