/* ============================================================
   Watchfires & Wagons — immersive site styles
   Palette: deep winter night, warm firelight, cold snow, card suits
   ============================================================ */

:root {
  --night-0: #080b11;
  --night-1: #0e131c;
  --night-2: #141b27;
  --slate:   #1b2432;
  --slate-2: #223047;

  --snow-0: #f3f7fc;
  --snow-1: #dce6f2;
  --ink:    #eaf1fa;
  --ink-dim:#bccadd;
  --ink-faint:#8091a8;

  --ember:      #ff9a3c;
  --ember-deep: #ef6d1a;
  --amber:      #ffcf7a;
  --gold:       #d8b878;

  --suit-red:  #e05b52;
  --suit-red-deep: #c33b34;
  --card-cream:#f6efe0;
  --card-ink:  #23262e;

  --fire-glow: rgba(255,150,60,.45);

  --serif:   "Spectral", Georgia, "Times New Roman", serif;
  --display: "Fraunces", Georgia, serif;
  --quote:   "Spectral", Georgia, serif;   /* italic, not a third serif family */
  --ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --maxw: 1080px;
  --prose: 40rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.22rem, 1.02rem + 0.7vw, 1.5rem);
  line-height: 1.74;
  color: var(--ink);
  background: var(--night-0);
  background-image:
    radial-gradient(1200px 700px at 50% -10%, #1a2740 0%, rgba(26,39,64,0) 55%),
    linear-gradient(180deg, #0b1019 0%, #0a0e15 40%, #090c12 100%);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#weather {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* keep content above canvas */
.hero, main, .footer, .stats, #nav { position: relative; z-index: 2; }

.s-r { color: var(--suit-red); }
.s-b { color: #cfe0f2; }

/* ---------- icons (Phosphor) ---------- */
.ph, .ph-fill { line-height: 1; vertical-align: -0.12em; }
/* icons that sit inline with heading/eyebrow text */
.eyebrow .ph, .eyebrow .ph-fill,
.mini-title .ph, .mini-title .ph-fill,
.beat h3 .ph, .beat h3 .ph-fill { margin-right: .35em; vertical-align: -0.06em; }
.cta .ph { margin-right: .4em; vertical-align: -0.1em; }

/* ---------- floating nav ---------- */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(9,12,18,0.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(216,184,120,0.12);
  transform: translateY(-110%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  z-index: 50;
}
#nav.show { transform: translateY(0); }
#nav .brand {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--amber);
  text-decoration: none;
  font-size: 1.02rem;
}
#nav .brand .ph-fill { color: var(--ember); vertical-align: -0.08em; margin-right: .1em; }
#nav .links { display: flex; gap: clamp(.7rem, 2.4vw, 2rem); }
#nav .links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: .04em;
  padding: .2rem 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
  white-space: nowrap;
}
#nav .links a:hover, #nav .links a.active { color: var(--amber); border-color: var(--ember); }

/* ---------- hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 5rem;
  overflow: hidden;
}
.hero .ridge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42vh;
  z-index: 1;
}
.hero .ridge svg { width: 100%; height: 100%; display: block; }
.hero .ridge path {
  fill: #0a0f18;
  stroke: rgba(180,205,235,0.14);
  stroke-width: 1;
}
.fireglow {
  position: absolute;
  left: 50%; bottom: -18vh;
  width: 90vw; max-width: 900px; height: 60vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,140,50,0.34) 0%, rgba(255,120,40,0.12) 34%, rgba(255,120,40,0) 68%);
  filter: blur(6px);
  z-index: 1;
  animation: flicker 5s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { opacity: .85; transform: translateX(-50%) scale(1); }
  45%     { opacity: 1;   transform: translateX(-50%) scale(1.05); }
  70%     { opacity: .78; transform: translateX(-50%) scale(.98); }
}

.hero-inner { position: relative; z-index: 3; max-width: 46rem; }

.suitline { display: flex; gap: .7rem; justify-content: center; font-size: 1.6rem; opacity: .9; margin-bottom: 1.4rem; }
.suitline.small { font-size: 1.15rem; margin: 0 0 1rem; }

.title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: .04em;
  margin: 0;
  color: var(--snow-0);
  text-shadow: 0 0 26px rgba(255,150,60,0.35), 0 2px 2px rgba(0,0,0,0.5);
  text-transform: uppercase;
}
.title .amp {
  display: block;
  font-size: .42em;
  font-weight: 600;
  color: var(--ember);
  margin: .12em 0;
  text-shadow: 0 0 18px var(--fire-glow);
}
.tagline {
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  color: var(--amber);
  margin: 1rem 0 .5rem;
  letter-spacing: .01em;
}
.pitch {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2.4vw, 1.22rem);
  color: var(--ink-dim);
  max-width: 32rem;
  margin: 0 auto .6rem;
  line-height: 1.5;
}
.pitch b { color: var(--amber); font-weight: 600; }
.meta {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .74rem;
  color: var(--ink-dim);
  margin: 0 0 1.8rem;
}
.hero-blurb {
  color: var(--ink);
  max-width: 38rem;
  margin: 0 auto 2rem;
  font-size: 1.18rem;
  line-height: 1.78;
}
.hero-blurb strong { color: var(--amber); }

.cta {
  display: inline-block;
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--night-0);
  background: linear-gradient(180deg, var(--amber), var(--ember-deep));
  padding: .85rem 2rem;
  border-radius: 2px;
  box-shadow: 0 0 24px rgba(255,140,50,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform .2s, box-shadow .2s;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 6px 34px rgba(255,140,50,0.55); }

.scrollcue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 3; width: 24px; height: 40px;
  border: 1px solid rgba(216,184,120,0.5); border-radius: 12px;
}
.scrollcue span {
  position: absolute; top: 7px; left: 50%; width: 4px; height: 8px;
  background: var(--amber); border-radius: 2px; transform: translateX(-50%);
  animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 60%{opacity:1;transform:translate(-50%,12px)} 100%{opacity:0;transform:translate(-50%,16px)} }

/* ---------- stats band ---------- */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.4rem, 6vw, 4rem);
  padding: 2.6rem 1.5rem;
  background: linear-gradient(180deg, rgba(20,27,39,0.7), rgba(14,19,28,0.7));
  border-top: 1px solid rgba(216,184,120,0.12);
  border-bottom: 1px solid rgba(216,184,120,0.12);
  text-align: center;
}
.stats .stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.stats .stat > .ph { font-size: 1.7rem; color: var(--gold); opacity: .85; margin-bottom: .1rem; }
.stats .num { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--amber); letter-spacing: .04em; }
.stats .suiticons { display: flex; gap: .35rem; font-size: 1.7rem; margin-bottom: .1rem; }
.stats .lbl { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }

/* ---------- sections ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 5vw, 2.5rem);
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .86rem;
  color: var(--ember);
  text-align: left;
  margin: 0 0 .7rem;
}
.eyebrow .ph, .eyebrow .ph-fill { font-size: 1.1em; vertical-align: -0.12em; }
.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  text-align: left;
  color: var(--snow-0);
  margin: 0 0 1.5rem;
  letter-spacing: .02em;
}
.section-title::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ember), var(--gold));
  margin-top: .9rem;
  opacity: .85;
}
.section-intro {
  text-align: left;
  max-width: var(--prose);
  margin: 0 0 2.6rem;
  font-size: 1.12rem;
  color: var(--ink-dim);
}
.section-intro.small { font-size: 1.02rem; margin-top: 2.2rem; }

/* ---------- story prose ---------- */
.prose { max-width: var(--prose); margin: 0; }
.prose p { margin: 0 0 1.4rem; }
.prose .dropcap {
  float: left;
  font-family: var(--display);
  font-size: 4rem;
  line-height: .8;
  padding: .28rem .5rem .1rem 0;
  color: var(--ember);
  text-shadow: 0 0 18px var(--fire-glow);
}
.prose .lede {
  font-family: var(--quote);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.4;
  color: var(--amber);
  text-align: left;
  margin: 2.2rem 0;
}
.suitnotes {
  border-left: 3px solid rgba(216,184,120,0.35);
  padding: .4rem 0 .4rem 1.5rem;
  margin: 1.8rem 0 2.2rem;
}
.suitnotes p { position: relative; margin: 0 0 1.25rem; padding-left: 2.2rem; }
.suitnotes p:last-child { margin-bottom: 0; }
.suitnotes .glyph {
  position: absolute;
  left: 0;
  top: .12em;
  font-size: 1.55rem;
  line-height: 1;
}
.suitnotes strong { color: var(--snow-0); }
.pull {
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.55rem, 3.4vw, 2rem);
  line-height: 1.42;
  color: var(--amber);
  text-align: left;
  margin: 2.6rem 0;
  max-width: 36rem;
  border: none;
  padding: 0 0 0 1.6rem;
  border-left: 3px solid rgba(255,150,60,0.5);
}
.pull .ph-fill { display: block; font-size: 1.4rem; color: var(--ember); margin-bottom: .4rem; font-style: normal; }
.pull.closing { color: var(--snow-0); text-shadow: 0 0 22px rgba(180,210,240,0.25); border-left-color: rgba(180,210,240,0.4); }

/* ---------- how it plays ---------- */
.beats {
  list-style: none;
  padding: 0;
  margin: 0 0 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.beat {
  position: relative;
  background: linear-gradient(180deg, rgba(27,36,50,0.7), rgba(18,25,36,0.7));
  border: 1px solid rgba(216,184,120,0.14);
  border-radius: 6px;
  padding: 2.4rem 1.5rem 1.6rem;
}
.beat-no {
  position: absolute;
  top: -1.1rem; left: 1.3rem;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  color: var(--night-0);
  background: linear-gradient(180deg, var(--amber), var(--ember-deep));
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255,140,50,0.5);
}
.beat h3 { font-family: var(--display); font-weight: 600; font-size: 1.28rem; color: var(--snow-0); margin: .2rem 0 .8rem; }
.beat h3 .ph { color: var(--gold); }
.beat ul { margin: 0; padding-left: 1.1rem; }
.beat li, .beat p { font-size: 1.08rem; line-height: 1.6; color: var(--ink); margin: .35rem 0; }
.beat li .ph-fill { vertical-align: -0.1em; margin-right: .05em; }
.beat .joker { color: var(--amber); }

.mini-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--gold);
  text-align: left;
  margin: 2.6rem 0 1.5rem;
  letter-spacing: .03em;
}
.mini-title .ph, .mini-title .ph-fill { color: var(--ember); font-size: 1.05em; }

.plays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.5rem; }
.pcard {
  padding: 1.8rem 1.4rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(20,27,39,0.6);
  position: relative;
  overflow: hidden;
}
.pcard .pico { font-size: 2rem; display: block; margin-bottom: .6rem; line-height: 1; color: #cfe0f2; }
.pcard h4 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--snow-0); margin: 0 0 .5rem; }
.pcard p { font-size: 1.05rem; line-height: 1.6; margin: 0; color: var(--ink); }
.pcard.feed { border-top: 2px solid #7fa8cf; }
.pcard.feed .pico { color: var(--ember); }
.pcard.load { border-top: 2px solid var(--suit-red); }
.pcard.load .pico { color: var(--suit-red); }
.pcard.push { border-top: 2px solid var(--amber); }
.pcard.push .pico { color: var(--amber); }
.pcard b { color: var(--amber); }
.pcard.load b, .pcard.load .s-r { color: var(--suit-red); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.5rem 0; }
.panel {
  background: linear-gradient(180deg, rgba(27,36,50,0.55), rgba(16,22,32,0.55));
  border: 1px solid rgba(216,184,120,0.14);
  border-radius: 6px;
  padding: 1.6rem 1.7rem;
}
.panel .mini-title { margin-top: 0; }
.tick { list-style: none; padding: 0; margin: 0; }
.tick li { position: relative; padding-left: 1.6rem; margin: .6rem 0; font-size: 1.08rem; line-height: 1.5; }
.tick li::before { content: "\2726"; position: absolute; left: 0; color: var(--gold); font-size: .7em; top: .45em; }
.tick b { color: var(--amber); }
.fineprint { font-size: .98rem; color: var(--ink-dim); margin: 1rem 0 0; }

.knot {
  text-align: center;
  max-width: 40rem;
  margin: 2.5rem auto 0;
  padding: 2rem;
  border: 1px solid rgba(255,150,60,0.25);
  border-radius: 6px;
  background: radial-gradient(600px 200px at 50% 0%, rgba(255,140,50,0.1), rgba(255,140,50,0) 70%);
}
.knot .mini-title { margin-top: 0; }
.knot p { margin: 0; color: var(--ink); }
.knot b { color: var(--amber); }

/* ---------- the suits (playing cards) ---------- */
.cardrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: clamp(.8rem, 2.5vw, 1.6rem);
  perspective: 1200px;
}
.card {
  position: relative;
  width: clamp(120px, 17vw, 170px);
  aspect-ratio: 5 / 7;
  background: linear-gradient(155deg, #fbf6ea 0%, var(--card-cream) 60%, #ece0c8 100%);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.08), inset 0 0 0 6px rgba(255,255,255,0.5);
  color: var(--card-ink);
  display: grid;
  place-items: center;
  cursor: default;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  outline: none;
}
.card:hover, .card:focus-visible {
  transform: translateY(-14px) rotate(-1.5deg);
  box-shadow: 0 26px 46px rgba(0,0,0,0.55), 0 0 34px rgba(255,150,60,0.28), inset 0 0 0 6px rgba(255,255,255,0.6);
}
.card .center { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; }
.card .idx {
  position: absolute;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  display: flex; flex-direction: column; align-items: center; line-height: .9;
}
.card .idx i { font-style: normal; font-size: .95em; margin-top: .1em; vertical-align: middle; }
.card .idx.tl { top: .5rem; left: .6rem; }
.card .idx.br { bottom: .5rem; right: .6rem; transform: rotate(180deg); }
.card .role {
  position: absolute;
  bottom: -1.9rem; left: 0; right: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--ink-dim);
}
.card.red { color: var(--suit-red-deep); }
.card.black { color: #23262e; }
.card.snow { color: #2b3a52; background: linear-gradient(155deg, #eef4fb 0%, #dbe6f4 60%, #c3d3e8 100%); }
.card.joker {
  color: #7a4bd0;
  background: linear-gradient(155deg, #1c1530 0%, #241a3d 55%, #14101f 100%);
  box-shadow: 0 14px 30px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(216,184,120,0.3), inset 0 0 0 6px rgba(120,75,208,0.15);
}
.card.joker .center { color: var(--amber); text-shadow: 0 0 24px rgba(255,150,60,0.6); }
.card.joker .idx { color: var(--amber); }
.card.joker .role { color: var(--amber); }

/* ---------- quick reference ---------- */
.ledger {
  max-width: 40rem;
  margin: 0 0 2rem;
  background: linear-gradient(180deg, rgba(27,36,50,0.5), rgba(16,22,32,0.5));
  border: 1px solid rgba(216,184,120,0.18);
  border-radius: 6px;
  padding: 1.8rem;
}
.ledger .mini-title { margin-top: 0; }
.ledger table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th, .ledger td { padding: .6rem .5rem; text-align: center; border-bottom: 1px solid rgba(216,184,120,0.12); }
.ledger thead th { color: var(--amber); font-family: var(--display); font-weight: 600; }
.ledger tbody th { text-align: left; color: var(--ink); font-weight: 500; }
.ledger tbody td { color: var(--snow-0); font-size: 1.22rem; }
.ledger .dim, .dim { color: var(--ink-faint); font-size: .85em; }
.refgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 40rem; margin: 0; }
.refgrid p { font-size: 1.06rem; line-height: 1.6; margin: 0 0 .6rem; }
.refgrid b { color: var(--amber); }

/* ---------- footer ---------- */
.footer {
  text-align: center;
  padding: 4rem 1.5rem 3.5rem;
  border-top: 1px solid rgba(216,184,120,0.14);
  background: linear-gradient(180deg, rgba(10,14,21,0), rgba(255,140,50,0.05));
}
.footer .ft-title { font-family: var(--display); font-size: 1.3rem; letter-spacing: .12em; color: var(--amber); margin: .6rem 0 .3rem; text-transform: uppercase; }
.footer .ft-note { color: var(--ink-dim); font-size: .9rem; margin: 0 0 .4rem; }
.footer .ft-small { font-family: var(--quote); font-style: italic; color: var(--gold); font-size: 1.15rem; margin: .3rem 0 0; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- lantern glow (follows cursor) ---------- */
#lantern {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle, rgba(255,178,90,0.22) 0%, rgba(255,150,60,0.12) 30%, rgba(255,140,50,0) 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s ease;
  transform: translate(var(--lx, 50vw), var(--ly, 50vh));
}
#lantern.on { opacity: 1; }

/* ---------- whiteout veil ---------- */
#veil {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(244,249,255,0.95), rgba(214,228,244,0.8));
}

/* fire out: pass goes cold and dark */
body.fire-out .fireglow { opacity: .1 !important; animation: none; filter: blur(10px); }
body.fire-out { background-image:
  radial-gradient(1200px 700px at 50% -10%, #16233a 0%, rgba(22,35,58,0) 55%),
  linear-gradient(180deg, #090d15 0%, #070a10 40%, #05070b 100%); }

/* ---------- scene controls ---------- */
.controls {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .7rem;
}
.ctrl-btn {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid rgba(216,184,120,0.4);
  background: rgba(14,19,28,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ember);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 0 20px rgba(255,140,50,0.3);
  transition: transform .25s, box-shadow .25s;
  order: 2;
}
.ctrl-btn .ph-fill { font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(255,140,50,0.6)); }
.ctrl-btn:hover { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 0 28px rgba(255,140,50,0.55); }
body.fire-out .ctrl-btn { color: var(--ink-dim); box-shadow: none; }

.ctrl-panel {
  order: 1;
  width: 15.5rem;
  background: rgba(12,17,25,0.82);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(216,184,120,0.22);
  border-radius: 10px;
  padding: .7rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
  transform-origin: bottom right;
  transform: translateY(10px) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1);
}
.controls[data-open="true"] .ctrl-panel { opacity: 1; transform: none; pointer-events: auto; }
.ctrl-title {
  font-family: var(--display);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: .2rem .4rem .6rem;
}
.ctrl-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .6rem .6rem;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}
.ctrl-row:hover { background: rgba(255,255,255,0.05); }
.ctrl-row .ci { font-size: 1.3rem; width: 1.3rem; text-align: center; flex: 0 0 auto; color: var(--ink-dim); transition: color .2s, filter .2s; }
.ctrl-row .cl { flex: 1 1 auto; }
.ctrl-row .cv {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--night-0);
  background: linear-gradient(180deg, var(--amber), var(--ember-deep));
  padding: .18rem .55rem;
  border-radius: 20px;
  flex: 0 0 auto;
}
/* state colouring */
.ctrl-row[data-ctrl="snow"] .ci { color: #bcd4ee; }
.ctrl-row[data-ctrl="fire"].on .ci { color: var(--ember); filter: drop-shadow(0 0 5px rgba(255,140,50,0.7)); }
.ctrl-row[data-ctrl="fire"]:not(.on) .cv,
.ctrl-row[data-ctrl="lantern"]:not(.on) .cv,
.ctrl-row[data-ctrl="snow"][data-val="clear"] .cv {
  background: rgba(255,255,255,0.08);
  color: var(--ink-dim);
}
.ctrl-row[data-ctrl="lantern"].on .ci { color: var(--amber); filter: drop-shadow(0 0 5px rgba(255,140,50,0.7)); }
.ctrl-row.wo { justify-content: center; margin-top: .3rem; border: 1px solid rgba(216,184,120,0.25); color: var(--amber); }
.ctrl-row.wo .ci { color: var(--amber); }
.ctrl-row.wo:hover { background: rgba(255,150,60,0.12); }
.ctrl-row.wo .cl { flex: 0 0 auto; font-family: var(--display); font-size: .82rem; letter-spacing: .06em; }

@media (max-width: 780px) {
  .ctrl-panel { width: 14rem; }
}

/* ---------- responsive ---------- */
@media (max-width: 780px) {
  .beats, .plays, .two-col, .refgrid { grid-template-columns: 1fr; }
  #nav .brand { display: none; }
  #nav { justify-content: center; }
  .card .role { position: static; margin-top: .5rem; }
  .cardrow { gap: 1.2rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fireglow, .scrollcue span { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}


/* ================= typography system (added with the self-hosted faces) =================
   Three roles: Fraunces displays, Faustina reads, IBM Plex Sans operates.
   Cinzel and Cormorant Garamond are gone — Cormorant was a second Garamond doing the same
   job as EB Garamond, so the "quote voice" never actually contrasted with body text. */

/* Display type was inheriting the body's 1.74 leading. At 3.3rem that put 72px of air
   between the lines of a two-line section title, so it read as separate lines, not a unit. */
.section-title,
.tagline,
.beat h3,
.mini-title,
.pcard h4,
.footer .ft-title,
.ctrl-title,
.stats .num,
.beat-no,
.ledger thead th{ line-height:1.14; }

.title,.section-title{ text-wrap:balance; }

/* Fraunces varies on optical size: large settings sharpen the serifs and open the contrast,
   small settings thicken them so they hold up at caption sizes. */
.title              { font-variation-settings:"opsz" 144; }
.section-title      { font-variation-settings:"opsz"  96; }
.tagline,.pull      { font-variation-settings:"opsz"  72; }
.beat h3,.mini-title,.pcard h4,.footer .ft-title{ font-variation-settings:"opsz" 40; }
#nav .brand,.cta,.stats .num,.ctrl-title,.card .idx,.beat-no,
.ledger thead th,.ctrl-row.wo .cl{ font-variation-settings:"opsz" 24; }

/* Spectral's x-height (0.45) sits between EB Garamond's 0.405 and Faustina's 0.494, so the
   base size is nudged up a step to hold the same reading size; 1.52 keeps the texture dense.
   Loose leading reads as atmosphere, tight leading reads as craft. */
body{ line-height:1.52; }

/* ---- setting the running text ----
   Reading text is set flush left. Centring is for the title card, where the lines are few and
   shaped; a six-line paragraph centred gives every line a different start, so the eye has to
   hunt for the next one on every return sweep. */
.hero-blurb{
  text-align:left;
  line-height:1.52;          /* was 1.78 — the loosest setting on the page */
  max-width:36rem;
  text-wrap:pretty;          /* no single word stranded on the last line */
}
.prose p,.beat li,.beat p,.refgrid p,.tick li{
  text-wrap:pretty;
}

/* Short, shaped lines break evenly instead of stranding a word.
   The pitch was breaking as "…with a doomsday / clock." */
.pitch,.tagline,.meta{ text-wrap:balance; }
.seat .d{ text-wrap:pretty; }   /* a 3-line description wants orphan control, not balancing */

/* Paragraph spacing keyed to the tighter leading, so the rhythm stays even. */
.prose p{ margin:0 0 1.15em; }

/* The blurb and the two calls share one measure and one left edge, so the block below the
   centred title card reads as composed rather than as two separately-centred things. */
.cta-row{
  max-width:36rem;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  justify-content:flex-start;
}
@media (max-width:560px){
  /* one column on a phone: full-width targets beat a ragged two-up */
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .cta{ text-align:center; }
}

/* Every figure on this site is data — scores, spaces, counts — so none of them should
   change width as they change value. */
body{ font-variant-numeric:tabular-nums; }
.prose,.prose p{ font-variant-numeric:normal; }   /* running prose keeps proportional figures */


/* ================= surfaces: one frosted material =================
   Every card-like element shares a single glass recipe, so the page reads as one material
   catching the firelight rather than a set of unrelated boxes. Frosted, not solid: the
   weather canvas and the fire glow carry through, which is the point of having them. */
.panel,.pcard,.beat,.seat,.knot,.ledger,.card{
  position:relative;
  /* Thinner fill than before: the surface is mostly the blurred scene behind it. saturate()
     is what makes it read as glass rather than grey plastic — it pulls the fire's colour
     through the panel instead of washing it out. */
  background:
    linear-gradient(157deg,
      rgba(255,255,255,.052) 0%,
      rgba(255,255,255,.015) 45%,
      rgba(255,255,255,.004) 100%);
  -webkit-backdrop-filter:blur(26px) saturate(1.75) brightness(1.06);
  backdrop-filter:blur(26px) saturate(1.75) brightness(1.06);
  border:1px solid transparent;   /* the rim is a gradient, drawn by ::before */
  border-radius:16px;
  box-shadow:
    0 20px 46px -14px rgba(0,0,0,.58),   /* ambient, thrown well below */
    0 2px 8px rgba(0,0,0,.26),           /* contact */
    inset 0 -1px 0 rgba(0,0,0,.22);      /* shaded bottom edge */
}

/* The rim: real glass catches light unevenly along its edge, so a flat 1px border always
   reads as a box outline. This is a gradient stroke — bright at the top-left where the
   light is, warming to ember at the bottom-right where the fire is. */
.panel::before,.pcard::before,.beat::before,.seat::before,
.knot::before,.ledger::before,.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,
    rgba(255,255,255,.50) 0%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,.03) 56%,
    rgba(255,183,110,.30) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}

/* The sheen: one soft specular bloom off the top-left corner, the giveaway that a surface
   has a curved edge and something is lighting it. */
.panel::after,.pcard::after,.beat::after,.seat::after,
.knot::after,.ledger::after,.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(130% 62% at 10% -12%,
    rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 58%);
  z-index:1;
}

/* Where the browser cannot blur the backdrop, a near-transparent fill would leave text on
   bare page. Thicken it and keep a plain border instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .panel,.pcard,.beat,.seat,.knot,.ledger,.card{
    background:linear-gradient(157deg, rgba(30,40,56,.88), rgba(16,22,32,.88));
    border-color:rgba(216,184,120,.18);
  }
}
/* the rim brightens on hover instead of the (transparent) border */
.panel:hover::before,.pcard:hover::before,.beat:hover::before{
  background:linear-gradient(150deg,
    rgba(255,255,255,.62) 0%, rgba(255,255,255,.16) 26%,
    rgba(255,255,255,.05) 56%, rgba(255,183,110,.42) 100%);
}
.panel,.pcard,.beat,.knot,.ledger{ transition:border-color .3s; }

/* ================= the four forces + the whiteout =================
   Five glass panels on a real grid. The old flex row ragged out and, worse, each card's
   label was positioned OUTSIDE it (bottom:-1.9rem) — so as soon as the row wrapped, a
   label from row one landed on top of the card below. The label now lives inside. */
.cardrow{
  --cw:clamp(126px, 15vw, 168px);
  display:grid;
  grid-template-columns:repeat(auto-fit, var(--cw));
  justify-content:center;
  gap:clamp(1rem, 2vw, 1.5rem);
  perspective:1200px;
}
.card{
  width:auto;
  aspect-ratio:5/7;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.85rem;
  padding:1.1rem .7rem 1.05rem;
  border-radius:16px;
  color:var(--ink);
  cursor:default;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.card:hover,.card:focus-visible{
  transform:translateY(-10px);
  box-shadow:
    0 26px 48px rgba(0,0,0,.5),
    0 0 34px rgba(255,150,60,.20),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.3);
}
.card:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* the mark is the point of the card, so give it room */
.card .center{
  font-size:clamp(3.1rem, 7vw, 4.5rem);
  line-height:1;
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.55));
}
/* corner indices keep the playing-card grammar, quietly */
.card .idx{
  position:absolute;
  font-family:var(--ui);
  font-weight:600;
  font-size:.78rem;
  letter-spacing:.02em;
  opacity:.75;
}
.card .idx.tl{ top:.6rem; left:.7rem; }
.card .idx.br{ bottom:.6rem; right:.7rem; transform:rotate(180deg); }
/* the label, now inside the card and out of the next row's way */
.card .role{
  position:static;
  font-family:var(--ui);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-align:center;
  text-wrap:balance;
  /* "Medicine wagon" wraps where "The snow" does not; reserving two lines for every label
     keeps all five suit marks on the same optical line. */
  /* 1.35 leading x 2 lines = exactly the 2.7em reserved, so one- and two-line labels
     occupy identical space and every suit mark lands on the same line. */
  line-height:1.35;
  min-height:2.7em;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* each force tinted to its own element, tint carried by border and glow, not fill */
.card.red::before{ background:linear-gradient(150deg,
  rgba(255,214,210,.55) 0%, rgba(224,91,82,.16) 30%,
  rgba(255,255,255,.03) 58%, rgba(224,91,82,.34) 100%); }
.card.red .center,.card.red .idx{ color:var(--suit-red); }
.card.black::before{ background:linear-gradient(150deg,
  rgba(255,255,255,.55) 0%, rgba(207,224,242,.14) 30%,
  rgba(255,255,255,.03) 58%, rgba(207,224,242,.26) 100%); }
.card.black .center,.card.black .idx{ color:#cfe0f2; }
.card.snow{
  background:linear-gradient(157deg, rgba(190,220,250,.11), rgba(150,190,235,.03) 45%, rgba(255,255,255,.005));
}
.card.snow::before{ background:linear-gradient(150deg,
  rgba(226,240,255,.60) 0%, rgba(190,220,250,.12) 30%,
  rgba(255,255,255,.03) 60%, rgba(150,190,235,.28) 100%); }
.card.snow .center,.card.snow .idx{ color:#dbeaff; }
.card.joker{
  background:linear-gradient(157deg, rgba(150,110,235,.14), rgba(120,75,208,.04) 45%, rgba(255,255,255,.005));
  box-shadow:
    0 20px 46px -14px rgba(0,0,0,.6),
    0 0 30px rgba(150,110,235,.16),
    0 2px 8px rgba(0,0,0,.26),
    inset 0 -1px 0 rgba(0,0,0,.22);
}
.card.joker::before{ background:linear-gradient(150deg,
  rgba(255,235,190,.60) 0%, rgba(180,140,255,.16) 30%,
  rgba(255,255,255,.03) 58%, rgba(255,183,110,.40) 100%); }
.card.joker .center{ color:var(--amber); text-shadow:0 0 26px rgba(255,150,60,.6); }
.card.joker .idx{ color:var(--amber); }
.card.joker .role{ color:var(--amber); }

/* ================= how it plays: the icon as a struck medallion ================= */
.pcard{ padding:1.9rem 1.5rem 1.6rem; }
.pcard .pico{
  display:grid;
  place-items:center;
  width:3.4rem; height:3.4rem;
  margin:0 auto .9rem;
  font-size:1.65rem;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border:1px solid rgba(216,184,120,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 6px 16px rgba(0,0,0,.35);
}
.pcard h4{ text-align:center; }
/* the body stays flush left — it is running prose, not a caption */
.pcard p{ text-align:left; }
.pcard.feed .pico{ color:var(--ember); border-color:rgba(255,154,60,.34); }
.pcard.load .pico{ color:var(--suit-red); border-color:rgba(224,91,82,.34); }
.pcard.push .pico{ color:#cfe0f2; border-color:rgba(207,224,242,.28); }
/* The medallion now carries the colour coding, so the old 2px accent rule on top is
   duplicative — and it drew a hard straight line across a rounded glass edge. */
.pcard.feed,.pcard.load,.pcard.push{ border-top:1px solid rgba(216,184,120,.16); }

/* ================= lists: separators, not bullets =================
   A gold ✦ before every line competes for attention with the amber used for real emphasis.
   A hairline does the same grouping work and stays quiet. */
.tick li{ padding-left:0; padding-top:.75rem; margin:.75rem 0 0;
  border-top:1px solid rgba(216,184,120,.13); }
.tick li:first-child{ border-top:0; padding-top:0; margin-top:0; }
.tick li::before{ content:none; }

.beat ul{ list-style:none; padding-left:0; margin:0; }
.beat ul li{ padding-top:.6rem; margin-top:.6rem;
  border-top:1px solid rgba(216,184,120,.12); }
.beat ul li:first-child{ border-top:0; padding-top:0; margin-top:0; }

/* the stats band is three items now; let them breathe rather than stretch */
.stats{ gap:clamp(1.6rem, 7vw, 4.5rem); }


/* ================= review fixes ================= */

/* Links in running text had NO rule at all, so they fell through to the UA's #0000EE —
   measured 1.98:1 on the dark panel. Amber is the page's existing link-ish accent. */
.prose a,.fineprint a,.refgrid a,.beat a,.section-intro a,.ft-note a{
  color:var(--amber);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(255,207,122,.45);
  transition:text-decoration-color .2s;
}
.prose a:hover,.fineprint a:hover,.refgrid a:hover,
.beat a:hover,.section-intro a:hover{ text-decoration-color:currentColor; }
:is(.prose,.fineprint,.refgrid,.beat,.section-intro) a:focus-visible{
  outline:2px solid var(--amber); outline-offset:3px; border-radius:2px;
}

/* The three-up grids held 3 columns down to 780px, squeezing running prose to ~20 characters
   per line. These are paragraphs, not captions — let them reflow on content width. */
.beats,.plays{ grid-template-columns:repeat(auto-fit, minmax(19rem, 1fr)); }
/* .refgrid sat in a 40rem box at 2 columns — 30 cpl at every width */
.refgrid{ max-width:var(--maxw); }

/* The hero CTA and the floating scene button overlapped by 40x23px at 375, so the tap
   landed on the scene panel instead of the link. */
@media (max-width:560px){
  .hero{ padding-bottom:7.5rem; }
  /* 1rem resolved to the value it already had. The stacked CTAs run the full width at the
     bottom of the first screen, so the button has to clear them vertically, not horizontally. */
  .controls{ bottom:max(5.5rem, env(safe-area-inset-bottom) + 5.5rem); }
}

/* The beat badge cleared the card above by 3px and its glow bled over it. */
@media (max-width:780px){
  .beats{ gap:2.4rem; }
}

/* "Take a seat" leads to the actual game but rendered identically to "Learn to play";
   .cta-play was referenced by the build and never defined. */
.cta-play{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color:var(--amber);
  border:1px solid rgba(255,207,122,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.cta-play:hover{ background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  box-shadow:0 6px 26px rgba(255,140,50,.28), inset 0 1px 0 rgba(255,255,255,.2); }

/* The push card kept an amber <b> while its medallion moved to blue-grey. */
.pcard.push b{ color:#cfe0f2; }

/* .seat had an 85%-opaque fill that left the blur nothing to do; it now simply inherits
   the shared glass recipe. */

/* Centred blocks broke the flush-left axis the rest of the page follows. */
.cardrow{ justify-content:start; }
.seatgrid{ margin-inline:0; }

/* Reduced motion covered the canvas and reveals but not the surfaces that move on hover. */
@media (prefers-reduced-motion: reduce){
  .card,.seat,.cta,.pcard,.panel,.beat{ transition:none; }
  .card:hover,.card:focus-visible,.seat:hover,.seat:focus-visible,.cta:hover{ transform:none; }
  #nav{ transition:none; }
}


/* ================= second review pass ================= */

/* The whiteout veil sat at z-index 4, under the nav (50) and the scene button (60), so the
   storm flashed around them instead of over them. */
#veil{ z-index:70; }

/* ---- amber discipline ----
   Amber was carrying four different jobs at once: headings, the CTA fill, defined game
   terms, and ordinary emphasis. Where roughly half a paragraph is amber it stops meaning
   "this is a term of the game" and becomes texture. Inline emphasis in running prose goes
   to bright ink; amber is reserved for headings, calls to action, and the hero's stake. */
.pcard p b,
.tick b,
.refgrid p b,
.knot b,
.beat p b,
.beat li b,
.fineprint b{
  color:var(--snow-0);
  font-weight:600;
}
/* the suits keep their own colours, and the joker keeps the storm's */
.beat .joker,
.pcard p b.term,.tick b.term,.refgrid p b.term{ color:var(--amber); }
.s-r,.pcard p .s-r,.refgrid p .s-r{ color:var(--suit-red); }

/* ---- the two named endgame rules ----
   They were 15.7px --ink-dim fineprint, the smallest and dimmest type on the page, set as a
   100-word slab directly under a hairline-separated list — so they read as a continuation of
   the last bullet rather than as two rules with names. */
.rulenote{
  margin:1.15rem 0 0;
  padding:1rem 1.1rem;
  border-radius:10px;
  border:1px solid rgba(216,184,120,.18);
  background:linear-gradient(157deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
}
.rulenote + .rulenote{ margin-top:.7rem; }
.rulenote .rn-name{
  display:block;
  font-family:var(--ui);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.35rem;
}

/* an anchor jump reveals its destination with no fade — see revealInstant() */
.reveal.no-anim{ transition:none; }


/* ================= added by build_site.py ================= */
/* mobile drawer nav */
.navtoggle{display:none;background:none;border:1px solid rgba(216,184,120,.28);
  color:var(--amber);border-radius:8px;padding:.42rem .6rem;font-size:1.2rem;
  line-height:1;cursor:pointer}
.navtoggle:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#nav .links a.navplay{color:var(--amber)}
#nav.always{transform:translateY(0)}

@media (max-width:780px){
  /* override the earlier mobile rule: the brand and the toggle both stay */
  #nav{justify-content:space-between}
  #nav .brand{display:inline-block}
  .navtoggle{display:block}
  /* #nav carries backdrop-filter AND transform, either of which makes it the containing
     block for position:fixed children — so the drawer is absolute inside the bar instead,
     hung from its bottom edge. */
  #nav .links{
    position:absolute;top:100%;right:0;height:100vh;width:min(78vw,20rem);
    flex-direction:column;gap:0;align-items:stretch;
    background:rgba(9,12,18,.97);
    border-left:1px solid rgba(216,184,120,.18);
    padding:1.2rem 1.4rem 2rem;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    overflow-y:auto}
  #nav .links.open{transform:translateX(0)}
  #nav .links a{padding:.95rem .2rem;font-size:1.08rem;
    border-bottom:1px solid rgba(216,184,120,.10)}
  /* below the bar (z-index 50) so the drawer stays above the dimmed page */
  #navscrim{position:fixed;inset:0;background:rgba(4,6,10,.6);
    opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}
  #navscrim.open{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion: reduce){
  #nav .links{transition:none}
  #navscrim{transition:none}
}

/* ---- take a seat (play.html) ---- */
.seatpage{padding-top:6.5rem;padding-bottom:4rem}
.seatgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem;margin:2rem auto 0;max-width:52rem}
.seat{display:block;text-decoration:none;padding:1.4rem 1.3rem;
  background:linear-gradient(180deg,rgba(27,36,50,.85),rgba(14,19,28,.85));
  border:1px solid rgba(216,184,120,.20);border-radius:14px;
  transition:border-color .25s, transform .25s, box-shadow .25s}
.seat:hover,.seat:focus-visible{border-color:rgba(255,154,60,.55);
  transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.seat:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.seat .n{font-family:var(--display);font-size:2.4rem;line-height:1;
  color:var(--amber);display:block}
.seat .t{display:block;margin-top:.5rem;font-family:var(--display);
  font-size:1rem;letter-spacing:.06em;color:var(--ink)}
.seat .d{display:block;margin-top:.45rem;font-size:.98rem;color:var(--ink-faint);
  line-height:1.5}
.seat.two{border-color:rgba(255,154,60,.35)}
.seat.two .n{font-size:2.4rem}
@media (max-width:600px){
  .seatpage{padding-top:5.2rem}
  .seatgrid{grid-template-columns:1fr;gap:.8rem}
  .seat{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 1.1rem}
  .seat .n{font-size:2rem;flex:0 0 2.4rem}
  .seat .t{margin-top:0}
  .seat .d{margin-top:.3rem}
  .seat .txt{flex:1}
}