/* QWTF Play: the Slipgate system (October 2026). See docs/DESIGN.md.
   Warm oxidised darks, bone text, one fire-orange action colour, team red
   and blue only where a team is meant. Display: Big Shoulders Display;
   body: Atkinson Hyperlegible; readouts: Chivo Mono. All self-hosted. */

/* Tokens, the skip link and the site header live in chrome.css, shared by
   every page (the record page included). */
:root {
  --bg-0: #15110e; --bg-1: #1c1613; --bg-2: #261e19; --bg-3: #322822;
  --line: #3a2e26; --line-strong: #55443a;
  --text: #f2e9d8; --text-2: #cfc2aa; --muted: #9a8c78;
  --ember: #ff7a1f; --ember-hot: #ffa052; --ember-ink: #1a0f08; --ember-soft: rgba(255, 122, 31, 0.14);
  --brass: #e2b24c; --live: #8fe388;
  --team-blue: #4d8dff; --team-red: #ff4a3d;
  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --sans: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
  --wrap: 1280px; --gutter: clamp(1rem, 4vw, 3rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 4px;
  /* Legacy token names: every subpage and inline stylesheet written for the
     teal system keeps working, but renders in this palette. */
  --ink: var(--bg-0); --panel: var(--bg-1); --cyan: var(--ember); --cyan-dim: #c4601a;
  --gold: var(--brass); --teal: #c4601a; --dim: var(--muted);
}
@supports (color: oklch(50% 0.1 50)) {
  :root {
    --bg-0: oklch(14% 0.012 55); --bg-1: oklch(17% 0.014 55); --bg-2: oklch(21% 0.016 55); --bg-3: oklch(26% 0.018 55);
    --line: oklch(31% 0.02 55); --line-strong: oklch(42% 0.025 55);
    --text: oklch(94% 0.02 85); --text-2: oklch(82% 0.025 80); --muted: oklch(66% 0.03 75);
    --ember: oklch(72% 0.2 48); --ember-hot: oklch(80% 0.17 65); --brass: oklch(80% 0.13 85);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { color-scheme: dark; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
[hidden] { display: none !important; }
body { background: var(--bg-0); color: var(--text); font: 400 1.0625rem/1.65 var(--sans);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.86  0 0 0 0 0.7  0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ember); text-decoration: none; }
a:hover { color: var(--ember-hot); text-decoration: underline; text-underline-offset: 0.18em; }
button { font: inherit; color: inherit; }
::selection { background: var(--ember); color: var(--ember-ink); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }


/* ---- type ------------------------------------------------------------- */
h1, h2, h3.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.92; color: var(--text); }
h1 { font-size: clamp(3.6rem, 10vw, 9rem); }
h2 { font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
h1 em, h2 em { font-style: normal; color: var(--ember); }
/* No orphaned last words: headings share their words evenly across lines,
   running text avoids ending a paragraph on a single word. */
h1, h2, h3, h4, .lede, .section-intro, .film-card-title, .film-kicker { text-wrap: balance; }
p, li, figcaption, .hud-item, .dl-hint { text-wrap: pretty; }
h3 { font: 700 1.375rem/1.2 var(--sans); }
.lede { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--text-2); max-width: 36rem; }
.kicker { display: inline-flex; align-items: center; gap: 0.6rem; font: 500 0.8rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); }
.kicker-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 4px var(--ember-soft); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255, 122, 31, 0.06); } }
.text-link { font: 600 0.9rem var(--mono); color: var(--ember); }
.empty-note { font: 400 0.9rem var(--mono); color: var(--muted); padding: 1rem 0; }

#next-event:not([hidden]) { display:flex; align-items:center; gap:.75rem; min-width:0; margin:1rem 0 0; padding:.7rem .9rem; border:1px solid var(--line); background:var(--bg-1); font:500 .85rem/1.35 var(--mono); }
.next-event-details { display:flex; align-items:baseline; min-width:0; overflow:hidden; white-space:nowrap; }
.next-event-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.next-event-meta { flex:none; margin-left:.5em; color:var(--muted); }
#next-event a { flex:none; margin-left:auto; color:var(--ember); font-weight:600; white-space:nowrap; }
@media (max-width:480px) { #next-event:not([hidden]) { font-size:.72rem; gap:.4rem; padding:.65rem; } }

/* ---- buttons ---------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.7rem 1.3rem;
  font: 600 0.95rem var(--mono); letter-spacing: 0.01em; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); background: transparent; cursor: pointer; text-decoration: none; transition: color 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.btn:hover { text-decoration: none; color: var(--text); border-color: var(--ember); transform: translateY(-1px); }
.btn-ember, .btn-gold { background: var(--ember); color: var(--ember-ink); border-color: var(--ember); }
.btn-ember:hover, .btn-gold:hover { background: var(--ember-hot); border-color: var(--ember-hot); color: var(--ember-ink); }
.btn-ghost { color: var(--text); }
.btn-xl { min-height: 3.5rem; padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.btn-small { min-height: 2.4rem; padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.btn-disabled { color: var(--muted); border-color: var(--line); cursor: default; pointer-events: none; }
.cta-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-top: 1.8rem; }


/* ---- the launcher (hero) --------------------------------------------- */
.launcher { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.launcher::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 50% at 78% 30%, rgba(255, 122, 31, 0.16), transparent 70%),
              radial-gradient(40% 40% at 10% 90%, rgba(226, 178, 76, 0.08), transparent 70%); }
.launcher-inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 4vw, 3.2rem) var(--gutter) clamp(2rem, 4vw, 3rem); }
.launcher-grid { display: grid; grid-template-columns: minmax(20rem, 0.95fr) minmax(0, 1.55fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; }
.launcher-side { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); align-content: start; min-width: 0; }
.launcher-side > * { min-width: 0; }
.launcher-head h1 { font-size: clamp(3rem, 4.9vw, 4.9rem); margin: 0.7rem 0 1rem; overflow-wrap: anywhere; }
.launcher-head .lede { font-size: clamp(1rem, 1.2vw, 1.1rem); max-width: 32rem; }
.launcher-head .cta-row { margin-top: 1.4rem; }

.profile-rail { display: grid; gap: 1rem; align-content: start; margin-top: clamp(2.2rem, 4vw, 3.2rem); padding-top: clamp(1.4rem, 2.5vw, 2rem); border-top: 1px solid var(--line); }
.rail-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.profile-col { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.rail-title { font: 800 1.1rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.profile-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem 1.25rem; align-items: start; }
.profile-list > .watch-live, .profile-list > .profile-empty { grid-column: 1 / -1; }
.profile-row { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'dot name status' 'dot meta status'; column-gap: 0.75rem; align-items: center;
  padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-1); color: var(--text); transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); }
.profile-row:hover { text-decoration: none; border-color: var(--line-strong); background: var(--bg-2); color: var(--text); }
.profile-row.is-selected { border-color: var(--ember); background: var(--bg-2); }
.profile-row.is-selected::after { content: ''; position: absolute; inset: -1px; border-radius: 6px; pointer-events: none; box-shadow: 0 0 0 3px var(--ember-soft); }
.profile-live { grid-area: dot; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); }
.profile-row.is-live .profile-live { background: var(--live); box-shadow: 0 0 0 4px rgba(143, 227, 136, 0.14); animation: pulse-live 2.4s ease-in-out infinite; }
@keyframes pulse-live { 50% { box-shadow: 0 0 0 7px rgba(143, 227, 136, 0.05); } }
.profile-name { grid-area: name; font: 800 1.45rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.profile-meta { grid-area: meta; font: 400 0.76rem var(--mono); color: var(--muted); margin-top: 0.25rem; }
.profile-status { grid-area: status; font: 500 0.7rem var(--mono); color: var(--text-2); text-align: right; white-space: nowrap; }
.profile-row.is-live .profile-status { color: var(--live); }
.watch-live { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--ember); border-radius: 6px; background: var(--ember-soft); color: var(--text); font: 600 0.85rem var(--mono); }
.watch-live:hover { text-decoration: none; background: rgba(255, 122, 31, 0.22); color: var(--text); }
.watch-live span { color: var(--ember); animation: pulse 2.4s ease-in-out infinite; }
.profile-group { font: 500 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.1rem; }
.profile-empty { padding: 0.9rem 1rem; border: 1px dashed var(--line-strong); border-radius: 6px; font: 500 0.82rem var(--mono); color: var(--muted); }
/* Status dot: drawn, not a glyph, so it looks the same in every font. */
.dot { display: inline-block; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; align-self: center; }
.live-proof { display: flex; gap: 0.5rem; align-items: baseline; font: 500 0.82rem var(--mono); color: var(--text-2); }
.live-proof.is-live { color: var(--live); }

.arena-wrap { display: grid; gap: 1rem; min-width: 0; }
.arena-frame { position: relative; aspect-ratio: 16 / 10; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 122, 31, 0.08); }
.arena-wrap.expanded { grid-column: 1 / -1; }
.arena-wrap.expanded .arena-frame, .arena-wrap.expanded .arena-frame:has(iframe) { aspect-ratio: 16 / 9; height: auto; max-height: 90vh; }
.arena-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* Once the client loads, the frame is tall enough for the whole ready room. */
.arena-frame:has(iframe) { aspect-ratio: auto; height: min(86vh, 52rem); }
.arena-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: var(--bg-1); cursor: pointer; text-align: left; color: var(--text); }
.arena-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.05); transition: transform 600ms var(--ease-out), filter 300ms var(--ease-out); }
.arena-poster:hover img { transform: scale(1.025); filter: saturate(1) contrast(1.08); }
.arena-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 17, 14, 0.05) 30%, rgba(21, 17, 14, 0.88) 100%); }
.arena-poster-copy { position: absolute; left: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 1; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'badge title' 'badge sub'; column-gap: 1rem; align-items: center; }
.arena-play-badge { grid-area: badge; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; background: var(--ember); color: var(--ember-ink); font-size: 1.4rem; padding-left: 0.3rem; box-shadow: 0 0 0 8px var(--ember-soft); transition: transform 240ms var(--ease-out); }
.arena-poster:hover .arena-play-badge { transform: scale(1.06); }
.arena-poster-copy strong { grid-area: title; font: 900 clamp(1.8rem, 3.2vw, 2.6rem)/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.arena-poster-copy span:not(.arena-play-badge) { grid-area: sub; font: 500 0.8rem var(--mono); color: var(--text-2); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.arena-controls:not([hidden]) { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.arena-controls-label { font: 500 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 0.3rem; }
.arena-controls button, .arena-controls a { min-height: 2.4rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-1); color: var(--text); font: 600 0.78rem var(--mono); cursor: pointer; display: inline-flex; align-items: center; }
.arena-controls button:hover, .arena-controls a:hover { border-color: var(--ember); text-decoration: none; color: var(--text); }
.launch-steps { counter-reset: step; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 0.4rem; }
.launch-steps li { counter-increment: step; padding-top: 0.7rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--text-2); line-height: 1.5; }
.launch-steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 800 1.6rem/1 var(--display); color: var(--ember); margin-bottom: 0.4rem; }
.launch-steps strong { color: var(--text); }
.launcher-fineprint { font-size: 0.85rem; color: var(--muted); }

.hud-strip { border-top: 1px solid var(--line); background: var(--bg-1); }
.hud-strip-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; }
.hud-item { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.85rem 1.4rem 0.85rem 0; margin-right: 1.4rem; border-right: 1px solid var(--line); font: 500 0.78rem var(--mono); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.hud-item b { font: 600 1.15rem var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.hud-item:last-child { border-right: 0; margin-right: 0; }
.hud-item[hidden] { display: none; }
.hud-item-end { margin-left: auto; }
.hud-item a { color: var(--ember); }

/* ---- sections --------------------------------------------------------- */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) var(--gutter) 0; }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.section-head h2 { margin-bottom: 0.9rem; }
.section-head h2:only-child { margin-bottom: 0; }
.section-intro { color: var(--text-2); max-width: 44rem; font-size: 1.05rem; }
.section-head > .btn, .section-head > .hero-note { align-self: end; }
.hero-note { display: grid; gap: 0.35rem; font: 400 0.8rem var(--mono); color: var(--muted); justify-items: start; }
.hero-note #hero-download { font: 600 0.95rem var(--mono); color: var(--ember-ink); background: var(--ember); border: 1px solid var(--ember); border-radius: var(--radius); padding: 0.75rem 1.3rem; }
.hero-note #hero-download:hover { background: var(--ember-hot); text-decoration: none; }

/* ---- films ------------------------------------------------------------ */
.film-featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.film-facade { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.film-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.film-facade:hover img { transform: scale(1.02); }
.film-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-play { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: end end; padding: clamp(0.8rem, 2.2vw, 1.4rem); border: 0; background: linear-gradient(180deg, rgba(21, 17, 14, 0) 40%, rgba(21, 17, 14, 0.7)); cursor: pointer; color: var(--text); }
.film-play span { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.4rem 0.8rem 1rem; border-radius: 999px; background: var(--ember); color: var(--ember-ink); font: 700 0.95rem var(--mono); box-shadow: 0 0 0 10px var(--ember-soft); transition: transform 240ms var(--ease-out); }
.film-play:hover span { transform: scale(1.04); }
.film-featured-copy { display: grid; gap: 0.8rem; }
.film-kicker { font: 500 0.78rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.film-featured-copy h3 { font: 900 clamp(2rem, 3.4vw, 3rem)/0.95 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.film-featured-copy p { color: var(--text-2); }
.film-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font: 500 0.78rem var(--mono); color: var(--muted); }
/* The series list runs under the grid, not beside it: beside it, the short
   list ended early and left the grid squeezed into a narrow column. */
.films-more { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
.films-grid { display: grid; gap: 1.75rem; min-width: 0; }
.films-grid:empty { display: none; }
.film-group { min-width: 0; }
.film-group-title { font: 800 1.2rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.8rem; }
.film-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.75rem; }
/* Each card spans three shared rows (thumbnail, title, meta) so titles of
   different lengths still leave every meta line in a row at one height. */
.film-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.6rem; align-content: start; color: var(--text); }
.film-card .film-facade { box-shadow: none; border-radius: 6px; }
/* The thumbnails carry their own text in different corners, so the play
   control stays out of the way until the card is hovered or focused; the
   whole thumbnail is the button either way. */
.film-card .film-play { place-items: center; padding: 0; background: rgba(21, 17, 14, 0); transition: background 200ms var(--ease-out); }
.film-card .film-play span { padding: 0.5rem 0.9rem 0.5rem 0.7rem; font-size: 0.8rem; box-shadow: 0 0 0 6px var(--ember-soft); opacity: 0; transform: scale(0.92); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.film-card .film-play:hover, .film-card .film-play:focus-visible { background: rgba(21, 17, 14, 0.45); }
.film-card .film-play:hover span, .film-card .film-play:focus-visible span { opacity: 1; transform: none; }
.film-card-title { font: 700 0.98rem/1.3 var(--sans); }
.film-card-meta { font: 400 0.74rem var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.series-roster h3 { font: 800 1.1rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.series-list { list-style: none; padding: 0; display: grid; }
.series-list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; grid-template-areas: 'n name status' 'n format status'; column-gap: 0.6rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.series-list li:last-child { border-bottom: 1px solid var(--line); }
.series-n { grid-area: n; font: 800 1.2rem/1 var(--display); color: var(--muted); }
.series-name { grid-area: name; font: 700 0.95rem var(--sans); }
.series-format { grid-area: format; font: 400 0.74rem var(--mono); color: var(--muted); }
.series-status { grid-area: status; font: 500 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.series-status.is-public { color: var(--live); border-color: rgba(143, 227, 136, 0.4); }
.series-status.is-pilot, .series-status.is-material { color: var(--brass); border-color: rgba(226, 178, 76, 0.4); }
.films-how { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
.films-how h3 { font: 800 1.5rem var(--display); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.6rem; }
.films-how p { color: var(--text-2); max-width: 44rem; }

/* ---- the record (find your career) ----------------------------------- */
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.stat { display: grid; gap: 0.2rem; padding: 1.2rem 1rem 1.2rem 0; border-right: 1px solid var(--line); margin-right: 1rem; }
.stat:last-child { border-right: 0; margin-right: 0; }
.stat-value { font: 800 clamp(2rem, 3.6vw, 3rem)/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.stat-label { font: 500 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.player-find { position: relative; margin-top: 2rem; max-width: 40rem; }
.player-find-label { display: block; font: 800 1.3rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.6rem; }
.player-find-input { width: 100%; min-height: 3.4rem; padding: 0.8rem 1.1rem; font: 500 1.05rem var(--mono); color: var(--text); background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 6px; outline: none; }
.player-find-input:focus { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }
.player-find-input::placeholder { color: var(--muted); }
.player-find-results { position: absolute; left: 0; right: 0; z-index: 5; list-style: none; padding: 0.3rem; margin: 0.3rem 0 0; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.player-find-hit a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem; border-radius: var(--radius); color: var(--text); font: 700 0.95rem var(--sans); }
.player-find-hit a:hover, .player-find-hit[aria-selected="true"] a { background: var(--bg-3); text-decoration: none; }
.player-find-empty { padding: 0.6rem 0.8rem; color: var(--muted); font: 400 0.9rem var(--sans); }
.player-find-meta { font: 400 0.74rem var(--mono); color: var(--muted); }
.community-discover { margin-top: 2.2rem; }
.community-discover-label { font: 500 0.74rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
.community-discover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--line); }
.community-discover-grid:empty { display: none; }
.community-discover-card { display: grid; gap: 0.15rem; padding: 0.9rem 1rem 0.9rem 0; margin-right: 1rem; border-bottom: 1px solid var(--line); color: var(--text); }
.community-discover-card:hover { text-decoration: none; color: var(--text); }
.community-discover-card:hover .community-discover-name { color: var(--ember); }
.community-discover-card strong { font: 500 0.7rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.community-discover-name { font: 800 1.4rem/1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.community-discover-meta { font: 400 0.76rem var(--mono); color: var(--muted); }
.community-discover-more { display: flex; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--line); font: 600 0.85rem var(--mono); }

/* ---- watch ------------------------------------------------------------ */
.experience-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.experience-chips span { font: 500 0.68rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 0.25rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; }
.watch-hero { margin-top: 0.5rem; }
.watch-hero-frame { position: relative; aspect-ratio: 16 / 10; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.watch-hero-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.watch-hero-frame .empty-note { display: grid; place-items: center; height: 100%; margin: 0; }
.archive-hero-card { min-height: 100%; position: relative; display: grid; align-content: end; gap: 0.6rem; padding: clamp(1.2rem, 4vw, 3rem); overflow: hidden; background: var(--bg-1); }
.archive-hero-card img, .archive-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.archive-hero-card img { object-fit: cover; }
.archive-hero-shade { background: linear-gradient(90deg, rgba(21, 17, 14, 0.92), rgba(21, 17, 14, 0.4) 65%, rgba(21, 17, 14, 0.2)); }
.archive-hero-card > :not(img):not(.archive-hero-shade) { position: relative; z-index: 1; width: fit-content; }
.archive-hero-kicker { font: 500 0.72rem var(--mono); letter-spacing: 0.12em; color: var(--ember); }
.archive-hero-card strong { font: 900 clamp(2.4rem, 6vw, 5.5rem)/0.92 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.archive-hero-score { font: 500 clamp(1.1rem, 2.4vw, 1.8rem) var(--mono); color: var(--brass); }
.archive-hero-date { font: 400 0.82rem var(--mono); color: var(--muted); }
.archive-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1rem; margin-top: 0.45rem; }
.archive-hero-card a { font: 600 0.8rem var(--mono); }
.archive-hero-card .archive-hero-watch { padding: 0.55rem 0.8rem; color: var(--ember-ink); background: var(--ember); border-radius: var(--radius); text-decoration: none; }
.archive-hero-card .archive-hero-watch:hover { background: var(--ember-hot); }
.watch-caption { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.watch-hero-note { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.45rem; }
.watch-hero-note:empty, .watch-hero-bio:empty { display: none; }
.watch-hero-map { display: inline-flex; align-items: center; padding: 0.35rem 0.7rem; background: var(--ember); color: var(--ember-ink); border-radius: var(--radius); font: 800 1.05rem var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.watch-hero-stat { display: inline-grid; align-content: center; gap: 0.1rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); font: 500 0.88rem var(--mono); color: var(--text); }
.watch-hero-stat small, .watch-meta-item small { display: block; font: 500 0.6rem var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.watch-hero-bio { display: flex; flex-wrap: wrap; gap: 0.45rem 1.2rem; }
.watch-meta-item { font: 400 0.82rem var(--mono); color: var(--text-2); }
.watch-achievement { color: var(--brass); }
.watch-library-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid var(--line-strong); }
.watch-library-head h3 { font: 800 1.5rem var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.watch-library-head p { font: 400 0.82rem var(--mono); color: var(--muted); }
.watch-library-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.9rem 0 1.2rem; }
.watch-search { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 16rem; min-height: 2.75rem; padding: 0 0.8rem; background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--radius); font: 500 0.85rem var(--mono); color: var(--muted); }
.watch-search:focus-within { border-color: var(--ember); }
.watch-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: inherit; }
.watch-sort-label { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.78rem var(--mono); color: var(--muted); }
.watch-sort-label select { min-height: 2.75rem; padding: 0 0.6rem; background: var(--bg-1); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); font: 500 0.82rem var(--mono); }
.watch-random { min-height: 2.75rem; padding: 0 1rem; background: transparent; color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); font: 600 0.82rem var(--mono); cursor: pointer; }
.watch-random:hover { border-color: var(--ember); color: var(--ember); }
.watch-results { font: 400 0.76rem var(--mono); color: var(--muted); margin-left: auto; }
.watch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.watch-card { display: grid; grid-template-rows: auto 1fr; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color 160ms var(--ease-out), transform 240ms var(--ease-out); }
.watch-card-playable { cursor: pointer; }
.watch-card-playable:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.watch-card-live { border-color: var(--ember); box-shadow: 0 0 0 3px var(--ember-soft); }
.watch-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); }
.watch-thumb-static { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 0.7rem 0.8rem; }
.watch-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.watch-thumb-static > :not(img) { position: relative; z-index: 1; }
.watch-thumb-static::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21, 17, 14, 0.2), rgba(21, 17, 14, 0.75)); }
.watch-badge-row { display: flex; justify-content: flex-end; font: 500 0.7rem var(--mono); color: var(--text-2); }
.watch-views { padding: 0.15rem 0.45rem; background: rgba(21, 17, 14, 0.7); border-radius: 999px; }
.watch-thumb-mid { display: grid; align-content: end; gap: 0.1rem; }
.watch-map-big { font: 900 1.9rem/0.95 var(--display); letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }
.watch-score-big { font: 500 1rem var(--mono); color: var(--brass); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.watch-thumb-foot { display: flex; justify-content: space-between; font: 500 0.66rem var(--mono); letter-spacing: 0.06em; color: var(--text-2); text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.watch-play-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, rgba(255, 122, 31, 0.28), transparent 60%); transition: opacity 200ms var(--ease-out); }
.watch-card-playable:hover .watch-play-overlay { opacity: 1; }
.watch-card-body { display: grid; gap: 0.6rem; padding: 0.8rem 0.9rem 0.9rem; }
.watch-card-facts { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font: 400 0.76rem var(--mono); color: var(--text-2); }
.watch-card-facts small { display: block; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted); }
.watch-card-facts b { color: var(--text); font-weight: 600; }
.watch-play-btn { display: flex; justify-content: space-between; align-items: center; min-height: 2.6rem; padding: 0.45rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--text); font: 600 0.8rem var(--mono); cursor: pointer; }
.watch-play-btn:hover { border-color: var(--ember); color: var(--ember); text-decoration: none; }
.pick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; font: 400 0.7rem var(--mono); color: var(--muted); }
.pick-actions button { background: none; border: 0; padding: 0; color: var(--ember); font: inherit; cursor: pointer; }
.pick-actions a { font: inherit; }
.matches-more { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.6rem 1.2rem; margin-top: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--text); font: 600 0.85rem var(--mono); cursor: pointer; }
.matches-more:hover { border-color: var(--ember); color: var(--ember); }
.watch-archive-expand { width: 100%; }
.watch-no-results { grid-column: 1 / -1; }

/* ---- download --------------------------------------------------------- */
.download-panel { display: grid; gap: 0.9rem; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.8rem; }
.dl-card { display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content; gap: 0.35rem 1rem; align-content: start; align-items: baseline; padding: 1.1rem 1.2rem; background: var(--bg-1); border: 1px solid var(--line); border-radius: 6px; color: var(--text); transition: border-color 160ms var(--ease-out), transform 200ms var(--ease-out); }
.dl-card:hover { text-decoration: none; border-color: var(--ember); transform: translateY(-2px); color: var(--text); }
.dl-label { grid-column: 1; font: 800 1.35rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.dl-meta { grid-column: 1; font: 400 0.82rem var(--mono); color: var(--muted); }
.dl-sha { grid-column: 1; font: 400 0.72rem var(--mono); color: var(--muted); }
.dl-hint { grid-column: 1; font: 400 0.74rem var(--mono); color: var(--brass); }
.dl-action { grid-column: 2; grid-row: 1; align-self: baseline; white-space: nowrap; font: 600 0.82rem var(--mono); color: var(--ember); }
.backlog-row:empty { display: none; }
.backlog-row { font: 400 0.78rem var(--mono); color: var(--muted); }
.backlog-link { color: var(--text-2); }
.backlog-link:hover { color: var(--ember); }
.dl-meter { max-width: 30rem; }
.dl-total { font: 600 1rem var(--mono); }
.dl-total #dl-count { color: var(--ember); font-variant-numeric: tabular-nums; }
.release-details { margin-top: 1.4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.release-details summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem 0; cursor: pointer; }
.release-details summary::-webkit-details-marker { display: none; }
.release-details summary strong { font: 800 1.3rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.release-details summary span { font: 500 0.78rem var(--mono); color: var(--ember); }
.release-details[open] summary { border-bottom: 1px solid var(--line); }
.arena-sheet { padding: 1.2rem 0; display: grid; gap: 0.8rem; }
.arena-sheet img { border-radius: 6px; border: 1px solid var(--line); }
.arena-sheet figcaption { font-size: 0.9rem; color: var(--text-2); }
/* The panel follows the published build's phase (widgets.js); hidden must win over display rules. */
.release-details [data-release-phase][hidden] { display: none; }
.release-points { padding: 1.2rem 0; display: grid; gap: 0.8rem; max-width: 62rem; }
.release-points ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.6rem; }
.release-points li strong { color: var(--text); }
.release-points p { margin: 0; font-size: 0.9rem; color: var(--text-2); }

/* ---- community -------------------------------------------------------- */
.community-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.community-join { display: grid; gap: 0.8rem; }
.community-join h3 { font: 800 1.5rem var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.archive-line { font: 500 0.85rem var(--mono); color: var(--ember); }
.archive-line:empty { display: none; }
.community-join p { color: var(--text-2); }
.community-links { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.recent-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.recent-panel > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; cursor: pointer; font: 800 1.1rem var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.recent-panel > summary::-webkit-details-marker { display: none; }
.recent-panel > summary span { font: 500 0.74rem var(--mono); color: var(--ember); letter-spacing: 0; text-transform: none; }
.recent-panel-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 1.1rem 0.5rem; }
.recent-panel-head h3 { font: 500 0.74rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.matches-link { font: 600 0.78rem var(--mono); }
.matches-list { display: grid; }
.match-row { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.8rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--line); color: var(--text); font: 400 0.82rem var(--mono); }
.match-row:hover { background: var(--bg-2); text-decoration: none; color: var(--text); }
.match-date { color: var(--muted); }
.match-map { font-weight: 600; }
.match-score { color: var(--brass); font-variant-numeric: tabular-nums; }
.recent-panel .matches-more { margin: 0.8rem 1.1rem 1rem; }

/* ---- footer ----------------------------------------------------------- */
.site-footer { margin-top: clamp(4rem, 9vw, 7.5rem); border-top: 1px solid var(--line); }
.footer-rally { display: flex; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.2rem var(--gutter); font: 500 0.78rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: var(--bg-1); border-bottom: 1px solid var(--line); }
.footer-rally strong { font: 900 1.4rem var(--display); letter-spacing: 0.08em; color: var(--ember); }
.footer-rally i { flex: 1; max-width: 10rem; height: 1px; background: var(--line-strong); }
.footer { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-top: 3rem; padding-bottom: 2rem; }
.footer-brand p { color: var(--text-2); margin-top: 0.6rem; }
.footer-wordmark { font: 800 1.4rem var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.footer-wordmark span { color: var(--brass); }
.footer-links { display: grid; gap: 0.4rem; align-content: start; }
.footer-links h2, .footer-foundation h2 { font: 500 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.footer-links a { color: var(--text-2); font-size: 0.95rem; }
.footer-links a:hover { color: var(--ember); }
.footer-foundation p { color: var(--text-2); font-size: 0.95rem; }
.footer-floor { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 0.6rem; }
.footer-thanks { color: var(--text-2); font-size: 0.92rem; max-width: 60rem; }
.legal { font-size: 0.78rem; color: var(--muted); max-width: 60rem; }
.eof { font: 400 0.74rem var(--mono); color: var(--muted); }

/* ---- page heads for subpages that use this sheet --------------------- */
.page-head { max-width: var(--wrap); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0; }
.page-head h1 { font-size: clamp(3rem, 8vw, 7rem); margin: 0.6rem 0 1rem; }

/* ---- reveal (progressive, never hidden on load) ---------------------- */
@media (prefers-reduced-motion: no-preference) {
  .section.is-in { animation: rise 420ms var(--ease-out) both; }
  @keyframes rise { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
  .launcher-grid { grid-template-columns: 1fr; }
  .film-featured, .community-grid, .films-how { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 8rem; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .launch-steps { grid-template-columns: 1fr; gap: 0.8rem; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; margin-right: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .hud-strip-inner { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
  .hud-item { padding: 0.7rem 1rem; margin: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .hud-item:nth-child(odd) { border-right: 1px solid var(--line); }
  .hud-item-end { grid-column: 1 / -1; border-right: 0; border-bottom: 0; justify-content: center; }
  .match-row { grid-template-columns: 5.6rem 1fr auto; font-size: 0.76rem; }
  .arena-play-badge { width: 3rem; height: 3rem; font-size: 1.1rem; }
  .footer { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 480px) {
  .btn-xl { width: 100%; }
  .watch-grid { grid-template-columns: 1fr; }
  .dl-grid { grid-template-columns: 1fr; }
  .series-list li { grid-template-columns: 2rem minmax(0, 1fr); grid-template-areas: 'n name' 'n format' 'n status'; }
  .series-status { justify-self: start; margin-top: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
/* Your record */
.your-record { width:min(100% - 2rem, 900px); min-height:60vh; margin:0 auto; padding:clamp(2rem,5vw,4rem) 0 5rem; }
.your-record h1 { font:900 clamp(3.5rem,9vw,6rem)/.92 var(--display); text-transform:uppercase; margin:0 0 2rem; }
.your-record h2 { font:800 clamp(1.7rem,4vw,2.2rem)/1 var(--display); text-transform:uppercase; margin:2rem 0 .75rem; }
#record-signin { display:flex; flex-wrap:wrap; gap:.75rem; }
#record-signin[hidden], #record-content[hidden], #record-find[hidden] { display:none; }
#record-status:not(:empty) { margin-bottom:1rem; color:var(--ember); }
.record-row, .record-server { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.record-person { display:grid; gap:.25rem; min-width:0; }
.record-person strong, .record-person a, .record-server h2 { font:800 clamp(1.6rem,4vw,2.2rem)/1 var(--display); text-transform:uppercase; overflow-wrap:anywhere; }
.record-person span, .record-server span { font:500 .85rem/1.5 var(--mono); color:var(--muted); }
.record-row .btn, .record-server .btn { flex:none; min-height:44px; white-space:nowrap; }
#record-find input { display:block; width:100%; min-height:48px; margin:1rem 0; padding:.7rem 1rem; color:var(--text); background:var(--bg-1); border:1px solid var(--line-strong); border-radius:2px; font:inherit; }
.record-server.primary { border-top:2px solid var(--ember); background:var(--bg-2); padding:1.25rem; margin-top:1.5rem; }
.record-server h2 { margin:0 0 .3rem; }
.record-joined { color:var(--live) !important; }
@media (max-width:480px) { .record-row, .record-server { align-items:flex-start; } .record-person span { font-size:.72rem; } .record-row .btn, .record-server .btn { font-size:.7rem; padding:.65rem .75rem; } }