/* ==========================================================================
   Linwood Technologies - the home stage

   One screen, seven worlds. The house theme is quiet paper and ink with tree
   rings drawn behind it. Each product has its own theme, and switching
   products morphs the whole page into it: the page colors are registered
   custom properties, so the browser interpolates them, and each scene's
   choreography (js/home/*.js) plays over the top.

   Without JS (or before it runs) every scene stacks into one long page.
   ========================================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('../fonts/press-start-2p-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Registered so that changing them animates instead of snapping. */
@property --bg     { syntax: '<color>'; inherits: true; initial-value: #f2eee6; }
@property --fg     { syntax: '<color>'; inherits: true; initial-value: #171512; }
@property --muted  { syntax: '<color>'; inherits: true; initial-value: #6b655b; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #c2462b; }
@property --line   { syntax: '<color>'; inherits: true; initial-value: #d9d2c5; }

:root {
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --rounded: ui-rounded, 'SF Pro Rounded', 'Nunito', 'Segoe UI Variable Display', system-ui, sans-serif;
  --pixel: 'Press Start 2P', var(--mono);

  --font-display: var(--serif);
  --font-body: var(--sans);

  --mast-h: 4rem;
  --nav-h: 4.25rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --morph: 900ms;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* House theme */
  --bg: #f2eee6;
  --fg: #171512;
  --muted: #6b655b;
  --accent: #c2462b;
  --line: #d9d2c5;

  color-scheme: light;
  transition: --bg var(--morph) var(--ease), --fg var(--morph) var(--ease),
    --muted var(--morph) var(--ease), --accent var(--morph) var(--ease),
    --line var(--morph) var(--ease);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme='home'] {
    --bg: #12110f;
    --fg: #ece6da;
    --muted: #9a9284;
    --accent: #e2694c;
    --line: #2c2924;
    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Product themes
   -------------------------------------------------------------------------- */

:root[data-theme='dealers-choice'] {
  --bg: #0e3b2c; --fg: #f6f0e1; --muted: #a9c4b4; --accent: #d8b25a; --line: #1f5a45;
  color-scheme: dark;
}
:root[data-theme='community-chest'] {
  --bg: #f5f2eb; --fg: #1d2433; --muted: #5a5f6b; --accent: #1a4a9e; --line: #d6d1c4;
  --font-display: var(--rounded);
}
:root[data-theme='313-help'] {
  --bg: #0b1410; --fg: #f1f5f2; --muted: #8fa79a; --accent: #4fcf93; --line: #1e3329;
  color-scheme: dark;
}
:root[data-theme='menurizer'],
.mz-card[data-brand='house'] {
  --bg: #fafaf9; --fg: #111111; --muted: #5c5c5c; --accent: #8f5a33; --line: #e5e5e5;
}
:root[data-theme='menurizer'][data-brand='type'],
.mz-card[data-brand='type'] {
  --bg: #fbfaf7; --fg: #111111; --muted: #555555; --accent: #111111; --line: #dddddd;
}
:root[data-theme='menurizer'][data-brand='steak'],
.mz-card[data-brand='steak'] {
  --bg: #0f0e0c; --fg: #efe6d2; --muted: #a39780; --accent: #c9a45c; --line: #2c2720;
  color-scheme: dark;
}
:root[data-theme='menurizer'][data-brand='taqueria'],
.mz-card[data-brand='taqueria'] {
  --bg: #ffd23f; --fg: #2a0f2e; --muted: #6b3a5c; --accent: #d81b60; --line: #f0b929;
}
:root[data-theme='menurizer'][data-brand='wine'],
.mz-card[data-brand='wine'] {
  --bg: #3b0b18; --fg: #f6dfe2; --muted: #d0a3ac; --accent: #f0a6b4; --line: #5a1a2b;
  color-scheme: dark;
}
:root[data-theme='flower-power'] {
  --bg: #bfe7ff; --fg: #1d3b1a; --muted: #35602f; --accent: #e8478f; --line: #9fd6f5;
  --font-display: var(--pixel);
}
:root[data-theme='hearth'] {
  --bg: #0a0806; --fg: #f3e2c3; --muted: #9a876d; --accent: #ff9a3c; --line: #2a2018;
  --font-display: var(--mono);
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

h1, h2, h3 {
  font-weight: 400;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

kbd {
  font-family: var(--mono);
  font-size: 0.78em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 0.35em;
}

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

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: 0.5rem;
}

.skip-link:focus {
  top: 0.75rem;
}

/* Shared bits that every scene restyles in its own voice */
.status {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.8em 1.3em;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.1;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.btn::after {
  content: '\2192';
  transition: transform 200ms var(--ease);
}

.btn:hover::after {
  transform: translateX(0.2em);
}

.more {
  color: inherit;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.more:hover {
  text-decoration-thickness: 2px;
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* A secondary action: outlined, same height as .btn */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.75em 1.15em;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.1;
  transition: background 200ms, color 200ms;
}

.chip:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Policies, support, source: small but always there */
.fine-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-size: 0.85rem;
}

.fine-links a {
  color: inherit;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  opacity: 0.85;
}

.fine-links a:hover {
  opacity: 1;
  text-decoration-thickness: 2px;
}

/* A phone, for app screens */
.device {
  margin: 0;
  padding: 0.55rem;
  border-radius: 2.4rem;
  background: #0d0d0f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.55);
}

.device > img,
.device > div {
  display: block;
  border-radius: 1.9rem;
  overflow: hidden;
}

.screen-img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: calc(var(--mast-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(var(--gutter) + env(safe-area-inset-right)) 0
    calc(var(--gutter) + env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.masthead > * {
  pointer-events: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  color: var(--fg);
}

.wm-rest {
  color: var(--muted);
}

/* Three growth rings - the mark */
.wm-mark {
  position: relative;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  flex: none;
}

.wm-mark::before,
.wm-mark::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.wm-mark::before {
  inset: 3px 2px 2px 3px;
  border: 1.5px solid var(--fg);
}

.wm-mark::after {
  width: 4px;
  height: 4px;
  left: 50%;
  top: 52%;
  translate: -40% -50%;
  background: var(--accent);
}

.meta {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.meta a {
  text-decoration: none;
  color: var(--muted);
  transition: color 200ms;
}

.meta a:hover {
  color: var(--fg);
}

@media (max-width: 30rem) {
  .wm-rest {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Product index
   -------------------------------------------------------------------------- */

.index {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}

/* One row, evenly gapped, centered. When it doesn't fit it scrolls
   sideways; the auto margins (rather than justify-content: center) keep the
   first item reachable when it does. */
.index ol {
  list-style: none;
  margin: 0;
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  gap: clamp(0.25rem, 1.6vw, 1.75rem);
  padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) 0
    calc(var(--gutter) + env(safe-area-inset-left));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.index ol::-webkit-scrollbar {
  display: none;
}

.index li {
  position: relative;
  flex: none;
}

.index li:first-child {
  margin-left: auto;
}

.index li:last-child {
  margin-right: auto;
}

.index a {
  position: relative;
  height: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.6rem;
  text-decoration: none;
  color: var(--muted);
  transition: color 250ms;
  white-space: nowrap;
}

/* The swatch: a dot in the product's colors that opens up on hover */
.index a::before {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sw) 50%, var(--sw2) 50%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 25%, transparent);
  transition: width 300ms var(--ease);
}

/* The active bar, across the top edge of the item */
.index a::after {
  content: '';
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  top: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}

.index a:hover,
.index a[aria-current='true'] {
  color: var(--fg);
}

.index a:hover::before {
  width: 1.4rem;
}

.index a[aria-current='true']::after {
  transform: scaleX(1);
}

.index .n {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.75;
}

.index .name {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
}

.index .soon {
  font-size: 0.58rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3em 0.55em 0.25em;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.7;
}

/* Narrower than the full row: it scrolls, so fade the edges to say so. */
@media (max-width: 75rem) {
  .index ol {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
    scroll-padding: 0 2rem;
    padding: 0 calc(1.25rem + env(safe-area-inset-right)) 0 calc(1.25rem + env(safe-area-inset-left));
  }
}

/* Phones: the swatch already tells the products apart. */
@media (max-width: 40rem) {
  .index ol {
    gap: 0.1rem;
    padding: 0 calc(1rem + env(safe-area-inset-right)) 0 calc(1rem + env(safe-area-inset-left));
  }

  .index .n {
    display: none;
  }

  .index .name {
    font-size: 1.1rem;
  }
}

/* --------------------------------------------------------------------------
   Stage and scenes
   -------------------------------------------------------------------------- */

.scene {
  position: relative;
  min-height: 100vh;
  padding: calc(var(--mast-h) + env(safe-area-inset-top) + 2rem)
    calc(var(--gutter) + env(safe-area-inset-right)) calc(var(--nav-h) + 3rem)
    calc(var(--gutter) + env(safe-area-inset-left));
}

/* With JS: one scene at a time, fixed between the masthead and the index. */
.js body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.js .stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.js .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 30%, transparent) transparent;
}

.js .scene:not(.is-current) {
  display: none;
}

/* Overlays the choreographies put over the whole stage */
.stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* ==========================================================================
   HOME
   ========================================================================== */

.scene-home {
  display: grid;
  align-content: center;
}

.rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.home-copy {
  position: relative;
  max-width: 54rem;
  display: grid;
  gap: 1.4rem;
}

.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.scene-home h1 {
  font-family: var(--serif);
  font-size: clamp(2.75rem, 1.2rem + 6.4vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.scene-home h1 em {
  font-style: italic;
  color: var(--accent);
}

.lede {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: var(--muted);
  text-wrap: pretty;
}

.home-dir {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-width: 40rem;
  border-top: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}

.home-dir li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
}

.dir-name {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.1;
  text-decoration: none;
}

.dir-name:hover {
  color: var(--accent);
}

.dir-cta {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.dir-cta::after {
  content: ' \2197';
}

.dir-cta:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.home-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.home-meta a {
  color: var(--fg);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}

.hint {
  font-size: 0.85rem;
  color: var(--muted);
}

.hint-touch {
  display: none;
}

@media (hover: none) {
  .hint-fine { display: none; }
  .hint-touch { display: inline; }
}

/* ==========================================================================
   DEALER'S CHOICE
   ========================================================================== */

.scene-dc {
  --card: #fbf7ec;
  --card-ink: #1d1a14;
  --card-red: #b3262d;
  font-family: var(--sans);
}

.js .scene-dc {
  background: radial-gradient(120% 90% at 50% 35%, #17604a 0%, #0e3b2c 55%, #072519 100%);
}

/* Felt grain */
.scene-dc::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dc-table {
  position: relative;
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.95fr);
  grid-template-areas:
    'hero hero f1 shot'
    'hero hero f2 shot'
    'f3 f4 why shot'
    'trick trick trick shot';
}

.card {
  --r: 0deg;
  position: relative;
  background: var(--card);
  color: var(--card-ink);
  border-radius: 0.9rem;
  padding: 1.25rem 1.25rem 1.4rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 2px 3px rgba(0, 0, 0, 0.18),
    0 18px 30px -12px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--r));
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}

.dc-hero  { grid-area: hero; --r: -0.6deg; }
.dc-shot  { grid-area: shot; --r: 1.6deg; }
.dc-f1    { grid-area: f1; --r: 1.2deg; }
.dc-f2    { grid-area: f2; --r: -1.4deg; }
.dc-f3    { grid-area: f3; --r: 0.8deg; }
.dc-f4    { grid-area: f4; --r: -0.7deg; }
.dc-why   { grid-area: why; --r: 0.5deg; }
.dc-trick { grid-area: trick; --r: -0.4deg; }

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-6px) rotate(0deg);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 0 0 1px rgba(0, 0, 0, 0.08),
      0 4px 6px rgba(0, 0, 0, 0.18),
      0 30px 40px -14px rgba(0, 0, 0, 0.6);
  }
}

/* The back of a card, shown while it flies */
.card-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 9px),
    #8c1f26;
  box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 2;
}

.dc-hero {
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: clamp(3.25rem, 5vw, 3.5rem) clamp(2.75rem, 5vw, 3.5rem);
  min-height: 18rem;
}

.dc-hero .status {
  color: #6f6655;
}

.dc-hero h2 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.dc-hero .tagline {
  max-width: 26rem;
  font-size: 1.15rem;
  color: #4a4335;
}

.pip {
  position: absolute;
  display: grid;
  justify-items: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 0.9;
  color: var(--card-ink);
}

.pip i {
  font-style: normal;
  font-size: 1.1rem;
}

.pip-tl { top: 0.9rem; left: 1rem; }
.pip-br { bottom: 0.9rem; right: 1rem; rotate: 180deg; }

.dc-fact {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  font-size: 0.98rem;
  line-height: 1.45;
}

.dc-fact .suit {
  font-size: 1.6rem;
  line-height: 1;
}

.dc-fact.red .suit {
  color: var(--card-red);
}

.dc-fact strong {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6em;
  display: block;
  line-height: 1.05;
}

.dc-hero .ctas {
  margin-top: 0.5rem;
}

.dc-hero .btn {
  background: #0e3b2c;
  color: #fbf7ec;
}

.dc-hero .btn:hover {
  box-shadow: 0 0 0 3px #d8b25a;
}

.dc-hero .fine-links {
  color: #5d5547;
}

/* The app itself, as a photo card on the table */
.dc-shot {
  margin: 0;
  padding: 0.6rem;
  align-self: start;
}

.dc-shot .screen-img {
  border-radius: 1.6rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The trick */
.dc-trick {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'say say' 'fan go';
  gap: 1rem 1.25rem;
  align-items: end;
  padding: 1.25rem 1.5rem 1.4rem;
}

.trick-say {
  grid-area: say;
  font-size: 0.98rem;
  color: #4a4335;
  min-height: 3em;
}

.trick-say strong {
  color: var(--card-ink);
}

.trick-fan {
  grid-area: fan;
  position: relative;
  height: 6.4rem;
  min-width: 15rem;
}

.mini {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3rem;
  height: 4.2rem;
  margin-left: -1.5rem;
  padding: 0.2rem 0 0 0.3rem;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), -2px 2px 5px rgba(0, 0, 0, 0.18);
  transform-origin: 50% 230%;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 0.95;
  text-align: left;
  color: var(--card-ink);
}

.mini.red {
  color: var(--card-red);
}

/* Index corner: rank over suit, top left, where a fanned hand shows it */
.mini small {
  display: block;
  width: 1ch;
  font-size: 0.85rem;
}

.mini::after {
  content: attr(data-suit);
  position: absolute;
  right: 0.3rem;
  bottom: 0.25rem;
  font-size: 1.3rem;
  opacity: 0.85;
}

.trick-go {
  grid-area: go;
  border: 0;
  cursor: pointer;
  padding: 0.7em 1.1em;
  border-radius: 999px;
  background: #8c1f26;
  color: #fbf7ec;
  font-weight: 600;
  white-space: nowrap;
}

.trick-go:hover {
  background: #a3252d;
}

.trick-go[hidden] {
  display: none;
}

/* The deck that deals - created by JS */
.dc-deck {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-h) + 1.5rem);
  width: 5.5rem;
  height: 7.7rem;
  margin-left: -2.75rem;
  z-index: 31;
}

.dc-deck .card-back {
  border-radius: 0.6rem;
  box-shadow: inset 0 0 0 5px #fbf7ec, inset 0 0 0 6px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.35);
}

@media (max-width: 62rem) {
  .dc-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'hero hero'
      'shot f1'
      'shot f2'
      'shot f3'
      'f4 why'
      'trick trick';
  }
}

@media (max-width: 34rem) {
  .dc-table {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'hero' 'shot' 'f1' 'f2' 'f3' 'f4' 'why' 'trick';
  }

  .dc-shot {
    justify-self: center;
    width: min(100%, 17rem);
  }

  .dc-hero {
    min-height: 0;
  }

  .dc-trick {
    grid-template-columns: 1fr;
    grid-template-areas: 'say' 'fan' 'go';
    justify-items: center;
  }
}

/* ==========================================================================
   COMMUNITY CHEST
   ========================================================================== */

.scene-cc {
  --cc-ink: #1d2433;
  --cc-blue: #1a4a9e;
  --cc-sun: #fabf24;
  --cc-green: #339e5c;
  color: var(--cc-ink);
  isolation: isolate;
  display: grid;
  align-content: start;
}

.js .scene-cc {
  background: linear-gradient(180deg, #fbefd6 0%, #f5f2eb 45%, #f7f5ef 100%);
}

/* Late-afternoon light through the blinds, slowly drifting on the wall */
.js .scene-cc::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    172deg,
    rgba(255, 196, 120, 0.22) 0 26px,
    transparent 26px 58px
  );
  animation: cc-light 18s ease-in-out infinite alternate;
}

@keyframes cc-light {
  to { transform: translate3d(-3%, 2%, 0) skewY(-1deg); }
}

.cc-sun {
  position: absolute;
  z-index: -1;
  right: clamp(-6rem, 6vw, 8rem);
  top: clamp(4rem, 12vh, 8rem);
  width: clamp(12rem, 30vw, 22rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffd86b, #fabf24 70%);
  box-shadow: 0 0 0 1.5rem rgba(255, 190, 80, 0.18), 0 0 0 3.5rem rgba(255, 190, 80, 0.1),
    0 0 8rem 2rem rgba(255, 170, 60, 0.35);
}

.cc-street {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  width: 100%;
  height: clamp(9rem, 26vh, 16rem);
}

.no-js-hide,
html:not(.js) .cc-street,
html:not(.js) .cc-sun {
  display: none;
}

.cc-layout {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: clamp(8rem, 24vh, 15rem);
}

.cc-copy {
  max-width: 40rem;
  display: grid;
  gap: 1.25rem;
}

.scene-cc .status {
  color: #5a5f6b;
}

.scene-cc h2 {
  color: var(--cc-blue);
}

.cc-links {
  display: grid;
  gap: 0.75rem;
}

/* The launch splash, as the app draws it: the scene, the wordmark low
   down, the tagline beneath. JS plays its zoom and the wordmark's entry. */
.cc-phone {
  width: clamp(15rem, 24vw, 19rem);
  position: relative;
  z-index: 1;
}

.cc-splash {
  position: relative;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  background: #f5f2eb;
}

.cc-splash-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 55%;
}

.cc-splash-brand {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 9%;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

.cc-splash-wordmark {
  width: 100%;
  height: auto;
}

.cc-splash-tag {
  font-family: var(--rounded);
  font-weight: 700;
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  line-height: 1.35;
  text-align: center;
  color: #1a4a9e;
}

@media (max-width: 56rem) {
  .cc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-phone {
    justify-self: center;
    width: min(72vw, 17rem);
  }
}

.scene-cc h2 {
  font-family: var(--rounded);
  font-weight: 800;
  font-size: clamp(3rem, 1.6rem + 6vw, 6.25rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.scene-cc .tagline {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.35;
  max-width: 30rem;
}

.cc-points {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
}

.cc-points li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 20px -10px rgba(120, 60, 20, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.cc-num {
  font-family: var(--rounded);
  font-weight: 800;
  color: var(--cc-blue);
}

.scene-cc .btn {
  background: var(--cc-blue);
  color: #fff;
}

.scene-cc .btn:hover {
  box-shadow: 0 8px 20px -6px rgba(26, 74, 158, 0.55);
  transform: translateY(-1px);
}

/* The blinds - created by JS over the whole stage */
.blinds {
  perspective: 1400px;
  display: flex;
  flex-direction: column;
}

.blinds .rail {
  flex: none;
  height: 0.9rem;
  background: linear-gradient(#fbf6ee, #ddd1bf);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 2;
}

.blinds .slat {
  flex: 1;
  margin-top: -1px;
  background: linear-gradient(180deg, #fbf6ee 0%, #eee4d4 55%, #d8cab4 100%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 3px 6px -3px rgba(0, 0, 0, 0.25);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.blinds .cord {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(140, 120, 95, 0.55);
  z-index: 1;
}

/* ==========================================================================
   313 HELP
   ========================================================================== */

.scene-313 {
  --g: #4fcf93;
  --g-deep: #0b6b43;
  --amber: #ffc24d;
  font-family: 'Helvetica Neue', Helvetica, Arial, var(--sans);
}

.js .scene-313 {
  background:
    radial-gradient(80% 60% at 85% 10%, rgba(79, 207, 147, 0.12), transparent 70%),
    #0b1410;
}

/* A faint street grid */
.scene-313::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(143, 167, 154, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 167, 154, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}

.h313-ticker {
  position: relative;
  max-width: 68rem;
  margin: 0 auto 2rem;
  overflow: hidden;
  border-radius: 0.4rem;
  background: #050906;
  border: 1px solid #1e3329;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 6px rgba(255, 194, 77, 0.6);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.h313-ticker-track {
  display: flex;
  width: max-content;
  padding: 0.55rem 0;
  animation: ticker 38s linear infinite;
}

.h313-ticker-track span {
  padding: 0 1.75rem;
}

.h313-ticker-track span::before {
  content: '\25B8  ';
  color: var(--g);
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

.h313-sign {
  position: relative;
  max-width: 68rem;
  margin: 0 auto clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}

.h313-badge {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 10vw, 7rem);
  aspect-ratio: 1;
  border-radius: 1.1rem;
  background: var(--g);
  color: #04140c;
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  letter-spacing: -0.04em;
  box-shadow: 0 0 0 4px #0b1410, 0 0 0 6px var(--g);
}

.scene-313 .status {
  color: var(--g);
}

.scene-313 h2 {
  font-weight: 700;
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.scene-313 .tagline {
  margin-top: 0.6rem;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: #c9d6cf;
  max-width: 34rem;
}

.h313-map {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.h313-phone {
  width: clamp(13rem, 19vw, 16rem);
  box-shadow: 0 0 0 1px #1e3329, 0 30px 60px -20px rgba(79, 207, 147, 0.35);
}

.h313-line,
.h313-bus {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.h313-line {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.h313-track,
.h313-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.h313-track {
  stroke: #1e3329;
  stroke-width: 6;
}

.h313-path {
  stroke: var(--g);
  stroke-width: 6;
  filter: drop-shadow(0 0 6px rgba(79, 207, 147, 0.45));
}

html:not(.js) .h313-line,
html:not(.js) .h313-bus {
  display: none;
}

.h313-bus {
  z-index: 3;
  width: 2.2rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -1.1rem;
  border-radius: 0.35rem;
  background: #f1f5f2;
  box-shadow: 0 0 0 2px #0b1410, 0 0 14px rgba(241, 245, 242, 0.6);
  opacity: 0;
  will-change: transform;
}

.h313-bus span {
  position: absolute;
  inset: 0.25rem 0.35rem 0.25rem 0.55rem;
  background: repeating-linear-gradient(90deg, #0b1410 0 0.3rem, transparent 0.3rem 0.45rem);
  border-radius: 0.1rem;
}

.h313-bus::after {
  content: '';
  position: absolute;
  right: -0.2rem;
  top: 50%;
  width: 0.35rem;
  height: 0.35rem;
  margin-top: -0.175rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px 3px rgba(255, 194, 77, 0.8);
}

.h313-stops {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5rem 2rem;
}

/* Snake: left to right along the top, then back along the bottom */
.h313-stops .stop:nth-child(4) { grid-area: 2 / 3; }
.h313-stops .stop:nth-child(5) { grid-area: 2 / 2; }
.h313-stops .stop:nth-child(6) { grid-area: 2 / 1; }

.stop {
  position: relative;
  padding: 2.4rem 0 0 2.25rem;
}

.stop .dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #0b1410;
  border: 4px solid var(--g);
}

.stop .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--g);
  opacity: 0;
}

.stop.is-arrived .dot::after {
  animation: ding 900ms var(--ease);
}

@keyframes ding {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

.stop h3 {
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.stop p {
  color: #b6c6bd;
  font-size: 0.97rem;
  line-height: 1.5;
  max-width: 22rem;
}

.stop.terminus .dot {
  background: var(--g);
  border-color: #f1f5f2;
}

.stop .more {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--g);
  font-weight: 600;
}

@media (max-width: 64rem) {
  .h313-map {
    grid-template-columns: minmax(0, 1fr);
  }

  .h313-phone {
    justify-self: center;
    width: min(70vw, 16rem);
  }
}

@media (max-width: 52rem) {
  .h313-stops {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .h313-stops .stop:nth-child(n) {
    grid-area: auto;
  }

  .stop {
    padding: 0 0 0 2.75rem;
  }

  .stop .dot {
    top: 0.05rem;
  }
}

/* ==========================================================================
   MENURIZER
   ========================================================================== */

.scene-mz {
  display: grid;
  justify-items: center;
}

.mz-card {
  --mz-title: var(--sans);
  --mz-head: var(--sans);
  --mz-body: var(--sans);
  --mz-title-size: clamp(2.8rem, 1.8rem + 4.4vw, 5rem);
  --mz-title-case: none;
  --mz-title-track: -0.045em;
  --mz-title-style: normal;
  --mz-head-case: none;
  --mz-head-track: -0.01em;
  --mz-head-size: 1.15rem;
  --mz-head-weight: 650;
  --mz-title-weight: 750;
  --mz-btn: var(--accent);
  --mz-radius: 0;
  --mz-desc-style: normal;
  --mz-frame: transparent;
  --mz-paper: var(--bg);
  position: relative;
  width: 100%;
  max-width: 44rem;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  background: var(--mz-paper, var(--bg));
  color: var(--fg);
  outline: 1px solid var(--mz-frame);
  outline-offset: -0.75rem;
  border-radius: var(--mz-radius);
  text-align: center;
}

.mz-card[data-brand='house'] {
  --mz-paper: #ffffff;
  --mz-btn: var(--fg);
  --mz-radius: 1rem;
  box-shadow: 0 0 0 1px #e5e5e5, 0 1px 3px rgba(0, 0, 0, 0.08), 0 20px 40px -24px rgba(0, 0, 0, 0.18);
}

.mz-layout {
  width: 100%;
  max-width: 70rem;
  display: grid;
  grid-template-columns: minmax(0, 44rem) auto;
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

.mz-links {
  justify-content: center;
  margin-top: 1.5rem;
  font-family: var(--sans);
}

.mz-links .chip {
  color: var(--fg);
}

.mz-phone {
  position: sticky;
  top: 0;
  width: clamp(13rem, 19vw, 16rem);
}

@media (max-width: 64rem) {
  .mz-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .mz-phone {
    position: static;
    width: min(70vw, 16rem);
  }
}

/* The next brand, printed over the current one by a sweeping head */
.mz-clone {
  position: absolute;
  margin: 0;
  pointer-events: none;
  z-index: 2;
}

.mz-head {
  position: absolute;
  z-index: 3;
  height: 2px;
  margin-top: -1px;
  background: var(--accent);
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent) 60%, transparent);
  pointer-events: none;
}

.mz-house {
  font-family: var(--mz-body);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

.mz-title {
  font-family: var(--mz-title);
  font-size: var(--mz-title-size);
  font-weight: var(--mz-title-weight);
  font-style: var(--mz-title-style);
  text-transform: var(--mz-title-case);
  letter-spacing: var(--mz-title-track);
  line-height: 1;
  margin: 0.5rem 0 0.75rem;
  color: var(--fg);
}

.mz-sub {
  font-family: var(--mz-body);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--muted);
}

.mz-rule {
  height: 1px;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto;
  max-width: 16rem;
  background: var(--accent);
  position: relative;
}

.mz-rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--bg);
  border: 1px solid var(--accent);
}

.mz-items {
  margin: 0;
  display: grid;
  gap: 1.6rem;
  text-align: left;
}

.mz-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  column-gap: 0.75rem;
}

/* The dotted leader between dish and price */
.mz-item::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  border-bottom: 2px dotted color-mix(in srgb, var(--fg) 35%, transparent);
  transform: translateY(-0.3em);
}

.mz-item dt {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mz-head);
  font-size: var(--mz-head-size);
  font-weight: var(--mz-head-weight);
  text-transform: var(--mz-head-case);
  letter-spacing: var(--mz-head-track);
  line-height: 1.15;
}

.mz-item dd {
  margin: 0;
}

.mz-price {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--mz-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
}

.mz-desc {
  grid-column: 1 / -1;
  margin-top: 0.3rem !important;
  font-family: var(--mz-body);
  font-style: var(--mz-desc-style);
  font-size: 0.97rem;
  color: var(--muted);
  max-width: 32rem;
}

.mz-foot {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}

.mz-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.mz-brands-label {
  width: 100%;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.mz-brands button {
  cursor: pointer;
  padding: 0.5em 0.95em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  background: transparent;
  transition: background 250ms, color 250ms, border-color 250ms;
}

.mz-brands button:hover {
  border-color: var(--fg);
}

.mz-brands button[aria-pressed='true'] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

.scene-mz .btn {
  font-family: var(--sans);
  background: var(--mz-btn);
  color: var(--mz-paper, var(--bg));
}

/* Brand: a plain typed menu */
.mz-card[data-brand='type'] {
  --mz-title: 'Courier New', Courier, 'Nimbus Mono PS', var(--mono);
  --mz-head: var(--mz-title);
  --mz-body: var(--mz-title);
  --mz-title-size: clamp(2.4rem, 1.6rem + 3.5vw, 4rem);
  --mz-title-case: uppercase;
  --mz-title-track: 0.08em;
  --mz-head-size: 1.1rem;
  --mz-head-case: uppercase;
  --mz-head-track: 0.04em;
  --mz-head-weight: 700;
  --mz-title-weight: 700;
}

/* Brand: steakhouse - black, gold, engraved capitals */
.mz-card[data-brand='steak'] {
  --mz-title: var(--serif);
  --mz-head: var(--serif);
  --mz-title-weight: 400;
  --mz-head-weight: 400;
  --mz-title-case: uppercase;
  --mz-title-track: 0.14em;
  --mz-title-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --mz-head-case: uppercase;
  --mz-head-track: 0.12em;
  --mz-head-size: 1.25rem;
  --mz-frame: #c9a45c;
  --mz-desc-style: italic;
}

.mz-card[data-brand='steak'] .mz-title {
  color: var(--accent);
}

/* Brand: taqueria - loud, bold, hand-painted energy */
.mz-card[data-brand='taqueria'] {
  --mz-title: var(--sans);
  --mz-head: var(--sans);
  --mz-title-weight: 900;
  --mz-head-weight: 800;
  --mz-title-case: uppercase;
  --mz-title-track: -0.04em;
  --mz-title-size: clamp(3rem, 1.6rem + 6.4vw, 6.5rem);
  --mz-head-case: uppercase;
  --mz-head-size: 1.3rem;
  --mz-paper: #fff7d6;
  --mz-frame: #d81b60;
}

.mz-card[data-brand='taqueria'] .mz-title {
  color: var(--accent);
  text-shadow: 0.06em 0.06em 0 #2a0f2e;
  transform: rotate(-2deg);
}

/* Brand: wine bar - all italics, candlelit */
.mz-card[data-brand='wine'] {
  --mz-title: var(--serif);
  --mz-head: var(--serif);
  --mz-title-weight: 400;
  --mz-head-weight: 400;
  --mz-title-size: clamp(3.4rem, 2rem + 6vw, 6.5rem);
  --mz-title-track: -0.02em;
  --mz-title-style: italic;
  --mz-head-size: 1.7rem;
  --mz-desc-style: italic;
}

.mz-card[data-brand='wine'] .mz-item dt {
  font-style: italic;
}

.mz-card[data-brand='wine'] .mz-title {
  color: var(--accent);
}

/* The typewriter caret */
.type-caret::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.05em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: caret 0.8s step-end infinite;
}

@keyframes caret {
  50% { opacity: 0; }
}

/* ==========================================================================
   FLOWER POWER
   ========================================================================== */

.scene-fp {
  --fp-ink: #1d3b1a;
  --fp-honey: #ffb627;
  --fp-pink: #ff6fae;
  color: var(--fp-ink);
  font-family: var(--rounded);
  isolation: isolate;
}

.js .scene-fp {
  background: linear-gradient(180deg, #8fd3ff 0%, #bfe7ff 45%, #e6f8ff 100%);
}

.fp-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
}

html:not(.js) .fp-canvas {
  display: none;
}

.fp-copy {
  position: relative;
  max-width: 36rem;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
  pointer-events: none;
}

.fp-copy > * {
  pointer-events: auto;
}

.scene-fp .status {
  color: #35602f;
  font-weight: 700;
}

.scene-fp h2 {
  font-family: var(--pixel);
  font-size: clamp(1.7rem, 1rem + 3.4vw, 3.4rem);
  line-height: 1.2;
  color: #fff;
  text-shadow:
    3px 0 0 var(--fp-ink), -3px 0 0 var(--fp-ink), 0 3px 0 var(--fp-ink), 0 -3px 0 var(--fp-ink),
    3px 3px 0 var(--fp-ink), -3px 3px 0 var(--fp-ink), 3px -3px 0 var(--fp-ink), -3px -3px 0 var(--fp-ink),
    0 7px 0 var(--fp-ink), 3px 7px 0 var(--fp-ink), -3px 7px 0 var(--fp-ink);
  padding-bottom: 0.2em;
}

.scene-fp .tagline {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 800;
  line-height: 1.25;
}

.fp-points {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.fp-points li {
  position: relative;
  padding: 0.6rem 1rem 0.6rem 2.6rem;
  border-radius: 1.2rem;
  background: #fffdf3;
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--fp-ink), 0 5px 0 3px var(--fp-ink);
  margin-bottom: 0.4rem;
}

/* A tiny flower for a bullet */
.fp-points li::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-radius: 50%;
  background: var(--fp-honey);
  box-shadow: 0 -0.42rem 0 -0.04rem var(--fp-pink), 0 0.42rem 0 -0.04rem var(--fp-pink),
    -0.42rem 0 0 -0.04rem var(--fp-pink), 0.42rem 0 0 -0.04rem var(--fp-pink);
}

.fp-hint {
  font-size: 0.85rem;
  font-weight: 700;
  color: #35602f;
}

@media (hover: hover) and (pointer: fine) {
  .fp-hint::after {
    content: ' The bees will follow you, too.';
  }
}

/* ==========================================================================
   HEARTH
   ========================================================================== */

.scene-hearth {
  --ember: #ff9a3c;
  --f0: #2a1206;
  --f1: #7a2a08;
  --f2: #c9480c;
  --f3: #ff8a1e;
  --f4: #ffd27a;
  --speech: #ffd9a0;
  --hit: #ff6b4a;
  --good: #9fd67a;
  font-family: var(--mono);
  color: #f3e2c3;
  transition: --f0 1.2s, --f1 1.2s, --f2 1.2s, --f3 1.2s, --f4 1.2s;
}

@property --f0 { syntax: '<color>'; inherits: true; initial-value: #2a1206; }
@property --f1 { syntax: '<color>'; inherits: true; initial-value: #7a2a08; }
@property --f2 { syntax: '<color>'; inherits: true; initial-value: #c9480c; }
@property --f3 { syntax: '<color>'; inherits: true; initial-value: #ff8a1e; }
@property --f4 { syntax: '<color>'; inherits: true; initial-value: #ffd27a; }

/* The fire takes on the mood of the room */
.scene-hearth[data-mood='grief'] { --f0: #0c1220; --f1: #1d3557; --f2: #3d6a9e; --f3: #7fa7d6; --f4: #d6e6ff; }
.scene-hearth[data-mood='dread'] { --f0: #0d0a08; --f1: #2a1c12; --f2: #4d3420; --f3: #6e5236; --f4: #9b8061; }
.scene-hearth[data-mood='fury']  { --f0: #2a0606; --f1: #6e0d0d; --f2: #b81d12; --f3: #ff3d1f; --f4: #ffb36b; }
.scene-hearth[data-mood='awe']   { --f0: #1b1206; --f1: #6b3d0a; --f2: #c97b12; --f3: #ffc94a; --f4: #fff4c9; }

.js .scene-hearth {
  background: radial-gradient(70% 55% at 30% 30%, color-mix(in srgb, var(--f2) 18%, transparent), transparent 70%), #0a0806;
}

.hearth-grid {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.hearth-ascii {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.5rem, 1.25vw, 0.95rem);
  line-height: 1.15;
  color: var(--f4);
  text-shadow: 0 0 8px var(--f3), 0 0 22px var(--f2);
  white-space: pre;
}

.hearth-fire {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: clamp(0.5rem, 1.25vw, 0.95rem);
  line-height: 1;
  white-space: pre;
  min-height: 7em;
}

.hearth-fire:empty {
  display: none;
}

.hearth-fire .h1 { color: var(--f0); }
.hearth-fire .h2 { color: var(--f1); }
.hearth-fire .h3 { color: var(--f2); }
.hearth-fire .h4 { color: var(--f3); text-shadow: 0 0 6px var(--f3); }
.hearth-fire .h5 { color: var(--f4); text-shadow: 0 0 8px var(--f3); }
.hearth-fire .wood { color: #5b3a22; }

.hearth-log {
  margin-top: 1.25rem;
  font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
  line-height: 1.6;
  max-height: 52vh;
  max-height: 52dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 0.5rem;
}

.hearth-log:empty {
  display: none;
}

.hearth-log .ln {
  position: relative;
  margin: 0 0 0.45rem;
  white-space: pre-wrap;
}

.hearth-log .sys   { color: #9a876d; letter-spacing: 0.04em; }
.hearth-log .cmd   { color: var(--ember); }
.hearth-log .cmd::before { content: '> '; opacity: 0.7; }
.hearth-log .say   { color: var(--speech); }
.hearth-log .hit   { color: var(--hit); }
.hearth-log .good  { color: var(--good); }
.hearth-log .hush  { color: #c9b89c; font-style: italic; }
.hearth-log .big   { color: #fff4d6; font-weight: 700; letter-spacing: 0.02em; }

.hearth-log .mood {
  display: block;
  margin: 1.1rem 0 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--f3);
}

.hearth-log .mood::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: currentColor;
}

.hearth-status {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #9a876d;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hearth-status:empty {
  display: none;
}

.hearth-status b {
  font-weight: 400;
  color: var(--hit);
}

.hearth-status i {
  font-style: normal;
  color: var(--good);
}

.hearth-info {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  justify-items: start;
  position: sticky;
  top: 0;
}

.scene-hearth .status {
  color: var(--ember);
}

.scene-hearth h2 {
  font-family: var(--mono);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff4d6;
  text-shadow: 0 0 18px rgba(255, 138, 30, 0.45);
}

.scene-hearth .tagline {
  font-size: 1.05rem;
  line-height: 1.5;
}

.hearth-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  color: #d8c6a6;
  font-size: 0.95rem;
}

.hearth-points li::before {
  content: '* ';
  color: var(--ember);
}

.hearth-replay {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--ember);
  color: var(--ember);
  padding: 0.6em 1em;
  border-radius: 0.25rem;
  font-family: var(--mono);
  font-size: 0.85rem;
}

.hearth-replay:hover {
  background: var(--ember);
  color: #0a0806;
}

.scene-hearth .fine {
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8b7a63;
  max-width: 26rem;
}

.hearth-controls {
  position: fixed;
  z-index: 35;
  right: calc(var(--gutter) + env(safe-area-inset-right));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem);
  display: none;
  gap: 0.5rem;
}

.scene-hearth.is-playing .hearth-controls {
  display: flex;
}

.hearth-controls button {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.65em 0.95em;
  border-radius: 0.3rem;
  border: 1px solid #3a2c20;
  background: rgba(10, 8, 6, 0.85);
  color: #f3e2c3;
  display: inline-flex;
  gap: 0.6em;
  align-items: center;
}

.hearth-controls button:hover {
  border-color: var(--ember);
}

.hearth-controls kbd {
  border-color: #3a2c20;
}

@media (hover: none) {
  .hearth-controls kbd {
    display: none;
  }
}

/* While the evening plays, the info card waits its turn - faded, but
   still there for screen readers */
.hearth-info {
  transition: opacity 900ms var(--ease);
}

.scene-hearth.is-playing .hearth-info {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 56rem) {
  .hearth-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hearth-info {
    position: static;
  }

  .hearth-log {
    max-height: none;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   No JS: a calm, stacked page
   -------------------------------------------------------------------------- */

html:not(.js) .scene + .scene {
  border-top: 1px solid var(--line);
}

html:not(.js) .scene-dc { background: #0e3b2c; color: #f6f0e1; }
html:not(.js) .scene-cc { background: #f5f2eb; }
html:not(.js) .scene-313 { background: #0b1410; color: #f1f5f2; }
html:not(.js) .scene-fp { background: #bfe7ff; }
html:not(.js) .scene-hearth { background: #0a0806; }
html:not(.js) .hearth-log,
html:not(.js) .hearth-fire,
html:not(.js) .hearth-controls,
html:not(.js) .hearth-replay,
html:not(.js) .mz-brands,
html:not(.js) .dc-trick,
html:not(.js) .h313-ticker {
  display: none;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --morph: 1ms;
  }

  .h313-ticker-track,
  .js .scene-cc::before,
  .type-caret::after {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
  }
}