/* Byron — the public site's styles.

   Same tokens as the app's "Classical" design system
   (ios/Shared/Palette.swift): warm paper, ink, a single gilt accent, Cormorant
   Garamond for display type and Lora for body copy and letters. The layout is
   the site's own: full-bleed sections that alternate paper with the ink of the
   app's colophon head, real photos of Byron, and the game's letter tiles as
   the recurring ornament.

   Light paper is still the only theme. The dark sections are part of the
   design, not a dark mode: the app has none to mirror.

   admin.html does not load this file. It has a frozen copy of the old sheet,
   admin-base.css, so a change here can't move the console. */

:root {
  --paper:        #f3f2f2;
  --paper-deep:   #eae9e9;
  --card:         #f8f4f4;
  --ink:          #201f1d;
  --ink-deep:     #1a1917;
  --ink-black:    #111010;
  /* neutral700, not the app's neutral600: body-size grey on paper needs the
     contrast. */
  --ink-soft:     #605d5d;
  --ink-faint:    #9b9797;
  --rule:         rgba(32, 31, 29, 0.14);
  --rule-strong:  rgba(32, 31, 29, 0.28);

  --gilt:         #b68235;
  --gilt-100:     #fff3e4;
  --gilt-200:     #ffe3bf;
  --gilt-300:     #facb8d;
  --gilt-400:     #e1ad66;
  --gilt-700:     #7d5411;
  --gilt-800:     #5a3b0a;

  --on-ink:       #f3f2f2;
  --on-ink-soft:  rgba(243, 242, 242, 0.7);
  --on-ink-faint: rgba(243, 242, 242, 0.42);
  --rule-on-ink:  rgba(255, 255, 255, 0.12);

  /* Older names the subpages' markup still reaches for. */
  --accent:        var(--gilt);
  --accent-strong: var(--gilt-700);
  --accent-soft:   var(--gilt-100);

  --tile-border:      #bab6b6;
  --tile-top:         #f8f4f4;
  --tile-bottom:      #eae7e7;
  --tile-gilt-border: #e1ad66;
  --tile-gilt-top:    #fff3e4;
  --tile-gilt-bottom: #eae7e7;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 74rem;
  --header-h: 4.25rem;
  --radius: 14px;
  --shadow-lift: 0 1px 2px rgba(17, 16, 16, 0.08), 0 12px 32px -8px rgba(17, 16, 16, 0.28);
  --shadow-deep: 0 2px 4px rgba(17, 16, 16, 0.12), 0 30px 60px -18px rgba(17, 16, 16, 0.5);
}

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

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.7 var(--font-body);
  overflow-x: clip;
}

img, video { max-width: 100%; }

a { color: var(--gilt-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gilt); }

:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; border-radius: 4px; }

.container {
  width: min(var(--max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.container.narrow { width: min(46rem, 100% - 2 * var(--gutter)); }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--gilt-100);
  color: var(--ink);
  border-radius: 8px;
}
.skip:focus { top: 1rem; }

/* ---------------------------------------------------------------- Type -- */

.kicker {
  display: inline-block;
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gilt-700);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 5.4rem);
  line-height: 1.02;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  margin: 0 0 1.1rem;
}

h3 {
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 1.75rem 0 0.4rem;
}

h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gilt-700);
}

p, li { color: var(--ink); }
p { margin: 0 0 1rem; }

.lead {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 38rem;
}

.meta { color: var(--ink-soft); font-size: 0.92rem; }

ul { padding-left: 1.25rem; }
li { margin: 0.4rem 0; }

/* ---------------------------------------------------------------- Dark --
   Any section on the ink ground. Re-points the type colours rather than
   restating every rule. */

.dark {
  background: var(--ink-deep);
  color: var(--on-ink);
}

.dark p, .dark li, .dark h1, .dark h2, .dark h3 { color: var(--on-ink); }
.dark .lead, .dark .meta { color: var(--on-ink-soft); }
.dark .kicker { color: var(--gilt-400); }
.dark h1 em, .dark h2 em { color: var(--gilt-300); }
.dark a { color: var(--gilt-300); }
.dark a:hover { color: var(--gilt-200); }

/* ------------------------------------------------------------- Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}

.btn:hover { transform: translateY(-1px); }

.btn-gilt { background: var(--gilt); color: #fff; }
.btn-gilt:hover { background: var(--gilt-700); color: #fff; }
.dark .btn-gilt, .dark .btn-gilt:hover { color: var(--ink-black); }
.dark .btn-gilt:hover { background: var(--gilt-400); }

.btn-line { border-color: var(--gilt); color: var(--gilt-700); background: transparent; }
.btn-line:hover { background: var(--gilt-100); color: var(--gilt-700); }
.dark .btn-line { border-color: var(--gilt-400); color: var(--gilt-300); }
.dark .btn-line:hover { background: rgba(225, 173, 102, 0.12); color: var(--gilt-200); }

.btn-sm { padding: 0.5rem 1.1rem; font-size: 1rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* Store buttons. Built in type rather than the stores' badge artwork: same
   two-line shape people know, in the site's own face. Every page uses the
   .downloads group; invite/join/league/live reorder its children by id. */

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 1.5rem;
}

.downloads a {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 11.5rem;
  padding: 0.6rem 1.5rem 0.7rem;
  border-radius: 14px;
  background: var(--ink-black);
  color: var(--on-ink);
  border: 1px solid var(--ink-black);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.05;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.downloads a small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin-bottom: 0.2rem;
}

.downloads a:hover { transform: translateY(-2px); background: #2a2826; color: var(--on-ink); }

.dark .downloads a { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dark .downloads a small { color: var(--ink-soft); }
.dark .downloads a:hover { background: #fff; color: var(--ink); }

@media (max-width: 30rem) {
  .downloads a { flex: 1 1 10rem; min-width: 0; padding-inline: 1.1rem; }
}

/* --------------------------------------------------------------- Tiles --
   The game's engraved letter tile. Rarity tiers follow the same Scrabble
   values as Rarity.of() in the apps. */

.tile {
  --size: 3.2rem;
  width: var(--size);
  height: var(--size);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: calc(var(--size) * 0.13);
  background: linear-gradient(to bottom, var(--tile-top), var(--tile-bottom));
  border: 1px solid var(--tile-border);
  box-shadow: 0 1px 1px rgba(32, 31, 29, 0.16), 0 6px 14px -6px rgba(32, 31, 29, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--ink);
}

.tile.gilt {
  background: linear-gradient(to bottom, var(--tile-gilt-top), var(--tile-gilt-bottom));
  border-color: var(--tile-gilt-border);
}

.tile b {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(var(--size) * 0.45);
  line-height: 1;
}

.tile em {
  position: absolute;
  right: calc(var(--size) * 0.09);
  bottom: calc(var(--size) * 0.05);
  font-family: var(--font-body);
  font-style: normal;
  font-size: calc(var(--size) * 0.18);
  font-weight: 600;
  color: var(--ink-soft);
}

.tile-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.5rem 0; }
.tile-row .tile { --size: 2.6rem; }

/* -------------------------------------------------------------- Header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(26, 25, 23, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule-on-ink);
  color: var(--on-ink);
}

.site-header .bar {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  color: var(--on-ink);
  text-decoration: none;
}

.brand:hover { color: var(--on-ink); }

.brand img { width: 2.6rem; height: auto; margin-bottom: -0.2rem; }

/* Byron is cut off flat at the chest, so in the header he stands on the
   bottom rule instead of floating mid-bar. */
.site-header .brand { align-self: stretch; gap: 0.2rem; }
.site-header .brand img { align-self: flex-end; width: auto; height: calc(var(--header-h) - 0.6rem); margin-bottom: 0; }

.brand b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav-links { display: flex; align-items: center; gap: 1.6rem; }

.nav-links a {
  color: var(--on-ink-soft);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--on-ink); }
.nav-links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gilt-400); }

.site-header .btn-gilt { color: var(--ink-black); }
.site-header .btn-gilt:hover { background: var(--gilt-400); color: var(--ink-black); }

/* The small-screen menu: a <details>, so it works without script. site.js
   only closes it after an in-page jump. */

.menu { display: none; position: relative; }

.menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--rule-on-ink);
  cursor: pointer;
}

.menu summary::-webkit-details-marker { display: none; }

.menu summary span,
.menu summary span::before,
.menu summary span::after {
  display: block;
  width: 1.1rem;
  height: 1.5px;
  background: var(--on-ink);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu summary span { position: relative; }
.menu summary span::before, .menu summary span::after { content: ""; position: absolute; left: 0; }
.menu summary span::before { top: -0.36rem; }
.menu summary span::after { top: 0.36rem; }

.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { transform: translateY(0.36rem) rotate(45deg); }
.menu[open] summary span::after { transform: translateY(-0.36rem) rotate(-45deg); }

.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.75rem);
  width: min(17rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: var(--ink-deep);
  border: 1px solid var(--rule-on-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-deep);
}

.menu nav a {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  color: var(--on-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}

.menu nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-ink); }
.menu nav a[aria-current="page"] { color: var(--gilt-300); }
.menu nav hr { width: 100%; border: 0; border-top: 1px solid var(--rule-on-ink); margin: 0.4rem 0; }

@media (max-width: 62rem) {
  .nav-links { display: none; }
  .menu { display: block; }
}

@media (max-width: 26rem) {
  .site-header .nav-cta { display: none; }
}

/* ---------------------------------------------------------------- Hero --
   Desktop: copy on the left, Byron's field clip in a tall arch on the right.
   Phones: the clip fills the screen behind the copy. */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem);
}

/* The colophon head's big faint letter, at billboard size. */
.hero::before {
  content: "B";
  position: absolute;
  z-index: -1;
  right: -4vw;
  bottom: -18vw;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 62vw;
  line-height: 1;
  color: rgba(225, 173, 102, 0.06);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.8rem); }

.hero .lead { color: var(--on-ink-soft); margin-bottom: 0; }

.hero-note { margin-top: 0.25rem; font-size: 0.9rem; color: var(--on-ink-faint); }

.hero-media {
  position: relative;
  justify-self: center;
  width: min(25rem, 100%);
}

.hero-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 999px 999px 1.5rem 1.5rem;
  overflow: hidden;
  background: #2b2a1f url("img/photos/field-poster.webp") center / cover;
  box-shadow: var(--shadow-deep);
  outline: 1px solid rgba(225, 173, 102, 0.35);
  outline-offset: 10px;
}

.hero-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tiles drifting round the arch. */
.hero-tiles .tile { position: absolute; --size: 4.2rem; }
.hero-tiles .t1 { left: -2.75rem; top: 16%; transform: rotate(-8deg); }
.hero-tiles .t2 { right: -2.25rem; top: 42%; transform: rotate(7deg); --size: 3.6rem; }
.hero-tiles .t3 { left: -1.5rem; bottom: 9%; transform: rotate(5deg); --size: 3.4rem; }

@media (prefers-reduced-motion: no-preference) {
  .hero-tiles .tile { animation: drift 7s ease-in-out infinite alternate; }
  .hero-tiles .t2 { animation-delay: -2.5s; animation-duration: 8s; }
  .hero-tiles .t3 { animation-delay: -5s; animation-duration: 6.5s; }
}

@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 0 -0.9rem; }
}

@media (max-width: 52rem) {
  .hero {
    min-height: calc(100svh - var(--header-h));
    display: flex;
    align-items: flex-end;
    padding-bottom: 2.5rem;
  }
  .hero::before { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media {
    position: absolute;
    inset: 0;
    width: auto;
    z-index: -1;
  }
  .hero-frame {
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
  }
  /* Darken the bottom of the clip so the copy reads over it. */
  .hero-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26, 25, 23, 0.15) 0%, rgba(26, 25, 23, 0.35) 35%, rgba(26, 25, 23, 0.94) 72%, var(--ink-deep) 100%);
  }
  .hero-tiles { display: none; }
  .hero .lead { color: rgba(243, 242, 242, 0.84); }
}

/* Pause/play button site.js adds to each autoplaying video (WCAG 2.2.2). */
.media-toggle {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(17, 16, 16, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.media-toggle:hover, .media-toggle:focus-visible { opacity: 1; }
.media-toggle svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }

@media (max-width: 52rem) {
  .hero .media-toggle { top: 0.85rem; bottom: auto; }
}

/* ------------------------------------------------------------ Sections -- */

.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section.tint { background: var(--paper-deep); }

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }

/* --------------------------------------------------------------- Steps --
   Four phones in a staggered rail; a sideways scroll on phones. */

.steps-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps-rail > li { margin: 0; }
.steps-rail > li:nth-child(even) { margin-top: 3.5rem; }

.step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gilt);
  margin: 1.5rem 0 0.15rem;
}

.steps-rail h3 { margin: 0 0 0.4rem; font-size: 1.75rem; }
.steps-rail p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; margin: 0; }
.steps-rail .step-more { margin-top: 0.6rem; color: var(--ink); font-style: italic; }

@media (max-width: 60rem) {
  .steps-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(17rem, 72vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 var(--gutter) 1.5rem;
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .steps-rail::-webkit-scrollbar { display: none; }
  .steps-rail > li { scroll-snap-align: center; }
  .steps-rail > li:nth-child(even) { margin-top: 0; }
}

.swipe-hint { display: none; margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
@media (max-width: 60rem) { .swipe-hint { display: block; } }

/* A phone, drawn round a full-screen App Store capture (1320 x 2868). The
   radii are percentages so the corners stay true at any width. */
.phone {
  position: relative;
  aspect-ratio: 1320 / 2868;
  padding: 3.2%;
  border-radius: 15% / 7%;
  background: linear-gradient(145deg, #3a3835, #121110 40%);
  box-shadow: var(--shadow-deep), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12% / 5.6%;
  background: var(--paper);
}

/* --------------------------------------------------------- Photo band -- */

.band {
  position: relative;
  isolation: isolate;
  min-height: clamp(26rem, 70vh, 44rem);
  display: flex;
  align-items: flex-end;
  padding: clamp(3rem, 8vw, 6rem) 0;
  color: var(--on-ink);
  overflow: hidden;
}

.band > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(17, 16, 16, 0.82), rgba(17, 16, 16, 0.15) 70%);
}

.band blockquote { margin: 0; max-width: 40rem; }

.band blockquote p:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.2rem, 5.5vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
  color: var(--on-ink);
  text-wrap: balance;
}

.band blockquote p { color: rgba(243, 242, 242, 0.84); font-size: 1.1rem; max-width: 30rem; }

/* --------------------------------------------------------------- Reels -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.split.flip > :first-child { order: 2; }

@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
}

.reel {
  position: relative;
  justify-self: center;
  width: min(21rem, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--paper) center / cover;
  box-shadow: var(--shadow-deep);
}

.reel video { display: block; width: 100%; height: 100%; object-fit: cover; }

.reel-launch { background-image: url("img/screens/launch-poster.webp"); }
.reel-watch {
  background-color: #000;
  background-image: url("img/screens/applewatch-poster.webp");
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -30px rgba(225, 173, 102, 0.35);
}

.callouts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.85rem; }

.callouts li {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
}

.callouts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 0.15rem;
}

.dark .callouts li { background: rgba(255, 255, 255, 0.04); border-color: var(--rule-on-ink); color: var(--on-ink-soft); }
.dark .callouts b { color: var(--on-ink); }

.health-note { margin-top: 1.5rem; }

.watch-section { background: var(--ink-black); }

/* Lines lifted from the reels' own cards. */
.beats { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: beat; }

.beats li {
  counter-increment: beat;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}

.beats li::before {
  content: counter(beat, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gilt);
  padding-top: 0.15rem;
}

.beats b { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.25; }
.beats span { color: var(--ink-soft); font-size: 0.95rem; }
.dark .beats li { border-color: var(--rule-on-ink); }
.dark .beats span { color: var(--on-ink-soft); }

/* -------------------------------------------------------------- Mosaic -- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(9rem, 17vw, 15rem);
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1vw, 0.85rem);
  margin: 0;
}

.mosaic figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--paper-deep); }

.mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mosaic figure:hover img { transform: scale(1.04); }

.mosaic .wide { grid-column: span 2; }
.mosaic .tall { grid-row: span 2; }
.mosaic .big  { grid-column: span 2; grid-row: span 2; }

@media (max-width: 40rem) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .mosaic .hide-sm { display: none; }
}

.meet-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.meet-foot img {
  width: 8.5rem;
  height: 8.5rem;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50%;
  border: 3px solid var(--card);
  box-shadow: var(--shadow-lift);
}

.meet-foot p { margin: 0 0 0.75rem; }
.meet-foot .btn-row { margin-top: 0; }

@media (max-width: 34rem) {
  .meet-foot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .meet-foot .btn-row { justify-content: center; }
}

/* The live Instagram grid instagram-feed.js fills. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9rem, 30%), 1fr));
  gap: 0.6rem;
  margin: 2rem 0 0;
}

.ig-tile {
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-deep);
}

.ig-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ig-tile:hover img { transform: scale(1.05); }

/* ------------------------------------------------------------- Compete -- */

.compete-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.go-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 13rem;
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.go-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gilt-400); }

.go-card .tile { --size: 2.6rem; margin-bottom: auto; }
.go-card h3 { margin: 1.25rem 0 0.15rem; }
.go-card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.go-card .arrow { position: absolute; right: 1.4rem; top: 1.4rem; font-size: 1.3rem; color: var(--gilt); transition: transform 0.2s ease; }
.go-card:hover .arrow { transform: translateX(3px); }

@media (max-width: 52rem) {
  .compete-grid { grid-template-columns: 1fr; }
  .go-card { min-height: 0; }
}

/* ------------------------------------------------------------- Support -- */

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.support-grid .callouts { margin-top: 0; }
.support-grid .callouts li { padding: 1.4rem 1.5rem; }
.support-grid .callouts h3 { margin: 0; }
.support-grid .callouts p { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.98rem; }
.support-grid .callouts p b { display: inline; font-family: inherit; font-size: inherit; color: var(--ink); }

@media (max-width: 52rem) { .support-grid { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- CTA -- */

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: clamp(5rem, 12vw, 9rem) 0;
}

.cta > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2);
}

.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(17, 16, 16, 0.55), rgba(17, 16, 16, 0.88) 75%);
}

.cta .byron-mark { width: 9rem; height: auto; margin: 0 auto 0.5rem; display: block; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.45)); }

.cta h2 {
  font-size: clamp(4rem, 12vw, 8.5rem);
  line-height: 0.9;
  margin-bottom: 0.75rem;
}

.cta .lead { margin-inline: auto; color: rgba(243, 242, 242, 0.84); }
.cta .downloads { justify-content: center; }

/* -------------------------------------------------------------- Footer -- */

.site-footer {
  background: var(--ink-black);
  color: var(--on-ink-soft);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2rem;
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}

.site-footer .brand { margin: 0 0 0.75rem; }
.site-footer .tagline { margin: 0 0 1.25rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-faint); }
.site-footer .tile-row { margin: 0 0 1.25rem; }
.site-footer .tile-row .tile { --size: 2.2rem; }
.site-footer p { color: var(--on-ink-soft); margin: 0; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gilt-400);
  margin: 0.4rem 0 1rem;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 0.55rem; }
.site-footer a { color: var(--on-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--on-ink); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-on-ink);
  color: var(--on-ink-faint);
  font-size: 0.85rem;
}

.footer-base a { color: var(--on-ink-soft); }

@media (max-width: 52rem) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------- Reveal on scroll --
   CSS scroll-driven where the browser has it; elsewhere things are simply
   there. Nothing is ever hidden waiting on script. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================ Subpages ==
   Leaderboard, leagues, privacy, the forms and the link landings. A dark
   page head, like the colophon head on every screen of the app, then a
   reading column on paper. */

.page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.page-head::before {
  content: "B";
  position: absolute;
  z-index: -1;
  right: max(-2rem, calc(50% - 32rem));
  bottom: -9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26rem;
  line-height: 1;
  color: rgba(225, 173, 102, 0.07);
  pointer-events: none;
}

.page-head .container { display: flex; align-items: flex-end; gap: 2rem; }
.page-head .head-copy { flex: 1 1 auto; min-width: 0; }
.page-head h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); margin-bottom: 0.9rem; overflow-wrap: anywhere; }
.page-head .lead:last-child, .page-head .meta:last-child { margin-bottom: 0; }

.page-head .head-byron {
  flex: 0 0 auto;
  width: 8.5rem;
  height: auto;
  margin-bottom: calc(-1 * clamp(2.5rem, 6vw, 4rem) - 1px);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
}

@media (max-width: 40rem) {
  .page-head .head-byron { width: 5.5rem; }
}

/* Not .page: leaderboard.js already uses that for its pager links. */
.page-body { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 9vw, 6rem); }

.page-body h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 2.75rem 0 0.85rem; }
.page-body h2:first-child { margin-top: 0; }

/* Callout used for plain-English summaries and code blocks. */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}

.card h2 { margin-top: 0; }
.card ul { margin-bottom: 0; }

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.75rem 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}

th { color: var(--ink-soft); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }

.scroller { overflow-x: auto; }

/* Forms (delete-data.html, feedback.html). Scoped under .form. */

.form { margin: 1.75rem 0 2rem; }

.form label {
  display: block;
  margin: 1.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}

.form label .opt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.form input,
.form select,
.form textarea {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form textarea { resize: vertical; }

.form input::placeholder,
.form textarea::placeholder { color: var(--ink-faint); }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--gilt);
  box-shadow: 0 0 0 3px rgba(182, 130, 53, 0.22);
}

.field-note { margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--ink-soft); }

.form-error {
  margin: 1.25rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: #f7e9e7;
  color: #a8352b;
  font-size: 0.9rem;
}

.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }

.form button {
  padding: 0.75rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  background: var(--gilt);
  border: 1px solid var(--gilt);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.form button:hover { background: var(--gilt-700); }
.form button.ghost { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); }
.form button.ghost:hover { background: var(--paper-deep); color: var(--ink); }

.composed {
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* All-time leaderboard (leaderboard.html, league.html). Sits above the
   [hidden] rule below on purpose: .pager sets display:flex, and
   same-specificity rules are decided by source order. */

.board-status { margin: 0 0 0.5rem; }

.board { font-size: 1rem; margin: 0 0 0.25rem; }

.board td {
  vertical-align: middle;
  padding: 0.75rem 0.75rem 0.75rem 0;
}

.board tbody tr { transition: background 0.15s ease; }
.board tbody tr:hover { background: rgba(182, 130, 53, 0.06); }

.board th.num, .board td.num { text-align: right; }
.board th:last-child, .board td:last-child { padding-right: 0; }

.board .col-rank { width: 3.5rem; }

/* Lora, not Cormorant: the display face sets old-style figures, so "11" and
   "12" come out at mismatched heights in a column that has to line up. Same
   reason the app's tiles use the body face for their letters. */
.board td.col-rank {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Top three wear the engraved gilt tile from the game's rare letters. */
.board .rank-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gilt-700);
  background: linear-gradient(to bottom, var(--tile-gilt-top), var(--tile-gilt-bottom));
  border: 1px solid var(--tile-gilt-border);
  box-shadow: 0 1px 1px rgba(32, 31, 29, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Display names run to 40 characters and needn't contain a space. */
.board td.player { overflow-wrap: anywhere; }

.board td.num { color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.board td.points { color: var(--ink); font-weight: 600; }

.board-note { margin-top: 2.25rem; line-height: 1.6; }

/* Pager */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1.75rem 0 0;
}

.pager .page {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.45rem 0.7rem;
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--gilt-700);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background 0.15s ease;
}

.pager a.page:hover { background: var(--gilt-100); }

.pager .page.current { background: var(--gilt-100); border-color: var(--gilt); }
.pager .page.disabled { color: var(--ink-faint); border-color: transparent; }

.pager .page.gap {
  min-width: 1rem;
  padding: 0.45rem 0.15rem;
  border-color: transparent;
  color: var(--ink-faint);
}

/* Retry, offered inline in the status line when a fetch fails. */

.retry {
  margin-left: 0.15rem;
  padding: 0.2rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gilt-700);
  background: var(--gilt-100);
  border: 1px solid var(--gilt);
  border-radius: 999px;
  cursor: pointer;
}

@media (max-width: 30rem) {
  .board { font-size: 0.95rem; }
  .board td { padding-right: 0.5rem; }
  .pager .page { min-width: 2.2rem; padding: 0.4rem 0.55rem; }
}

/* The invite code on invite/join/live. Big, spaced and selectable, because
   the whole fallback path is someone reading it off this screen and typing it
   into a phone — the letter-spacing stops six characters reading as a word. */
.invite-code {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  font-weight: 600;
  letter-spacing: 0.35rem;
  color: var(--gilt-700);
  margin: 0.1rem 0 0.75rem;
  user-select: all;
  overflow-wrap: anywhere;
}

/* Leagues */

.league-filters { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 2rem; }
.league-filters label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-soft); }
.league-filters select {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule-strong); border-radius: 10px; padding: 0.55rem 0.7rem; min-width: 12rem;
}
.league-section { margin-bottom: 2.5rem; }
.league-section h2 { margin: 0 0 1rem; }
.league-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.85rem; }
.league-card {
  display: flex; flex-direction: column; gap: 0.25rem; padding: 1.15rem 1.25rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.league-card:hover { border-color: var(--gilt-400); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.league-name { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2; overflow-wrap: anywhere; }
.league-place { color: var(--ink); font-size: 0.95rem; }
.league-meta { color: var(--ink-soft); font-size: 0.85rem; }

/* Kept last: an element that sets a display of its own would otherwise
   outrank the browser's default for [hidden]. */
[hidden] { display: none !important; }