/* Class Action Games: the studio site, in the "Case files" look.
   Fonts: SIL Open Font License 1.1, no Reserved Font Name, self-hosted in /fonts with their licences:
   Zilla Slab (headings), Public Sans (body), Courier Prime (filing labels).
   Colours: site/brand/tokens.css (the brand palette); the dark set is "night court".
   Game pages: everything the studio frame takes from a game is a --g-* token (see "Game zone" below). */

@font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url("../fonts/zilla-slab-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("../fonts/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f6f0e1;        /* the page: a legal pad left in the sun */
  --sheet: #fffdf7;        /* a fresh sheet on top */
  --manila: #e7cf98;       /* folders */
  --manila-deep: #d4b46e;
  --manila-edge: #b8964f;
  --ink: #1d1b22;          /* 15.0:1 on paper, 16.8 on sheet, 11.2 on manila */
  --ink-2: #4f4954;        /* 7.7:1 on paper, 8.6 on sheet, 5.7 on manila */
  --rule: #d9cdb0;
  --rule-strong: #8a7d64;  /* 3.5:1 on paper, 4.0 on sheet: borders that must show */
  --red: #b0281f;          /* stamp red: buttons, the seal (5.8:1 on paper) */
  --red-hover: #8f1f18;
  --on-red: #fffdf7;       /* 6.5:1 on red */
  --red-text: #8f1f18;     /* small red text and stamps: 7.8:1 on paper, 5.8 on manila */
  --link: #a3241c;         /* 6.5:1 on paper, 7.3 on sheet */
  --sticker: #f3dc6b;      /* exhibit stickers; ink on it 12.4:1 */
  --sticker-ink: #1d1b22;
  --footer-bg: #1d1b22;
  --footer-ink: #f6f0e1;   /* 15.0:1 */
  --footer-muted: #bdb5a6; /* 8.4:1 */
  --shadow: 0 1px 0 rgba(29, 27, 34, .06), 0 10px 24px -12px rgba(29, 27, 34, .28);
  --radius: 4px;
  --wrap: 1120px;
  --display: "Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #17161b; --sheet: #221f28; --manila: #3b3324; --manila-deep: #54482f; --manila-edge: #6e5e3c;
    --ink: #f1ebdc; --ink-2: #bdb5a6; --rule: #36323d; --rule-strong: #7a7385;
    --red: #e0574b; --red-hover: #f07468; --on-red: #17161b; --red-text: #f28b80; --link: #f08a7f;
    --sticker: #e6cf5c; --sticker-ink: #1d1b22;
    --footer-bg: #0f0e12; --footer-ink: #f1ebdc; --footer-muted: #bdb5a6;
    --shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17161b; --sheet: #221f28; --manila: #3b3324; --manila-deep: #54482f; --manila-edge: #6e5e3c;
  --ink: #f1ebdc; --ink-2: #bdb5a6; --rule: #36323d; --rule-strong: #7a7385;
  --red: #e0574b; --red-hover: #f07468; --on-red: #17161b; --red-text: #f28b80; --link: #f08a7f;
  --sticker: #e6cf5c; --sticker-ink: #1d1b22;
  --footer-bg: #0f0e12; --footer-ink: #f1ebdc; --footer-muted: #bdb5a6;
  --shadow: 0 10px 24px -12px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------ Game zone
   A game's page (and its docket card) carries class="game-zone" data-game="<slug>" and loads
   css/games/<slug>.css, which sets only these tokens. A game without its own file gets these neutral
   studio colours, so a new game's page works before it has a palette.
   --g-accent         the strip on the case folder's tab
   --g-stage          behind the game's key art, trailer and clips (the game's own darkest colour)
   --g-stage-ink      text on the stage (at least 7:1)
   --g-stage-muted    secondary text on the stage (at least 4.5:1)
   --g-highlight      labels on the stage (at least 4.5:1)                                        */
.game-zone {
  --g-accent: var(--ink);
  --g-stage: #1d1b22;
  --g-stage-ink: #f1ebdc;
  --g-stage-muted: #bdb5a6;
  --g-highlight: #f3dc6b;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
/* On dark grounds (the footer, a game's stage) the red ring is too faint: a light ring there instead. */
.site-footer :focus-visible { outline-color: var(--footer-ink); }
.stage :focus-visible, .player-card :focus-visible { outline-color: var(--g-stage-ink); }
[hidden] { display: none !important; }
/* long unbroken addresses (the studio Gmail) may wrap anywhere rather than push the page sideways */
a[href^="mailto:"] { overflow-wrap: anywhere; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; border-radius: var(--radius); }
.skip:focus { top: 12px; }
.pixel { image-rendering: pixelated; }
/* artwork with a light and a dark version (the seal, the mark) */
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none !important; }
  :root:not([data-theme="light"]) .only-dark { display: block !important; }
}
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }

/* Filing labels: the typewriter voice */
.label, .eyebrow {
  font-family: var(--mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8125rem; color: var(--ink-2);
}
.eyebrow { display: block; margin-bottom: .6rem; }
.eyebrow::before { content: "§ "; color: var(--red-text); }
.small { font-size: .9375rem; color: var(--ink-2); }
.note { font-size: .9375rem; color: var(--ink-2); }

/* ------------------------------------------------------------ header */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.brand { display: block; margin-right: auto; line-height: 0; }
.brand img { width: auto; }
.brand .lk-h { height: 64px; }
.brand .lk-c { height: 32px; display: none; }
.brand .on-dark { display: none; }
.site-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  display: inline-block; padding: 10px 12px; color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 1rem; border-radius: var(--radius);
}
.site-nav a:hover { background: var(--sheet); box-shadow: inset 0 -2px 0 var(--red); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--red); }
.theme-toggle {
  flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0;
  border: 1.5px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); background: var(--sheet); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .on-light { display: none; }
  :root:not([data-theme="light"]) .brand .lk-h.on-dark { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: none; }
}
:root[data-theme="dark"] .brand .on-light { display: none; }
:root[data-theme="dark"] .brand .lk-h.on-dark { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* breadcrumb strip under the header */
.docket {
  font-family: var(--mono); font-size: .875rem; color: var(--ink-2);
  border-bottom: 1px dashed var(--rule-strong); background: var(--sheet);
}
.docket .wrap { display: flex; gap: 6px 22px; flex-wrap: wrap; padding-block: 8px; }
.docket a { color: inherit; }
.docket b { color: var(--ink); }

/* ------------------------------------------------------------ buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px;
  border: 2px solid var(--b); border-radius: var(--radius);
  font: 700 1rem/1.15 var(--body); text-decoration: none; color: var(--ink); background: transparent;
  cursor: pointer; transition: transform .08s ease, background-color .15s ease; text-align: center;
}
.btn:hover { background: var(--sheet); }
.btn:active { transform: translateY(1px); }
.btn.primary { --b: var(--red); background: var(--red); color: var(--on-red); }
.btn.primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn .sz { font: 400 .875rem/1 var(--mono); color: inherit; opacity: .9; }
/* "Wishlist on Steam: coming soon": a real disabled button, never a dead link */
.btn:disabled, .btn.is-soon {
  --b: var(--rule-strong); color: var(--ink-2); background: transparent; cursor: not-allowed; border-style: dashed; transform: none;
}
.btn:disabled:hover { background: transparent; }
.btn .soon {
  font: 700 .8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--red-text); border: 1.5px solid currentColor; padding: 4px 6px 3px; border-radius: 2px; transform: rotate(-3deg);
}
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px;
  font: 700 .8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--sheet); border: 1.5px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
}
.copy-btn:hover { border-color: var(--ink); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn[data-done] { border-color: var(--red); color: var(--red-text); }

/* ------------------------------------------------------------ stamps */
.stamp {
  display: inline-block; font: 700 .9375rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-text); padding: 8px 12px 7px; border: 3px double currentColor; border-radius: 3px;
  transform: rotate(-5deg); opacity: .95;
  -webkit-mask-image: url("../img/ink-grain.svg"); mask-image: url("../img/ink-grain.svg");
  -webkit-mask-size: 180px 180px; mask-size: 180px 180px;
}

/* ------------------------------------------------------------ home: hero */
.hero { padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 6vw, 72px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lede { font-size: 1.22rem; max-width: 34em; }
.hero .lede em { font-style: normal; font-weight: 700; }

/* The court order on pleading paper. The numbers are printed on the paper, one per line, like real
   pleading paper: every line of the order is exactly --lh tall, so wrapped lines take the next number. */
.order {
  --lh: 1.75rem;
  position: relative; margin: 0; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow);
  border: 1px solid var(--rule); padding: var(--lh) 22px var(--lh) 62px; font: 400 .9375rem/var(--lh) var(--mono);
  background-image: linear-gradient(to right, transparent 46px, var(--red) 46px, var(--red) 47px, transparent 47px, transparent 50px, var(--red) 50px, var(--red) 51px, transparent 51px);
  transform: rotate(1.2deg);
}
.order .ln {
  position: absolute; left: 6px; width: 30px; top: var(--lh); bottom: var(--lh); overflow: hidden;
  white-space: pre; text-align: right; font: 400 .8125rem/var(--lh) var(--mono); color: var(--ink-2);
}
.order p, .order li { margin: 0; line-height: var(--lh); }
.order .gap { height: var(--lh); }
.order .court { text-align: center; font-weight: 700; letter-spacing: .04em; }
.order .court span { display: block; text-wrap: balance; }
/* The caption: parties | a column of colons | the action and its number, between two full-width rules.
   The rules are borders pulled into the lines around them by negative margins, so they take no height
   (the lines keep their numbers) and survive printing and Windows High Contrast. Fixed rows: 1 blank,
   2 the plaintiffs (as many lines as they wrap to), 3 "Plaintiffs," 4 blank, 5 "v." 6 blank, 7 the
   defendant, 8 "Defendant." The right column sits level with rows 3, 5 and 6, as on a real filing. */
.order .caption {
  --cap-rule: 2px; --cap-colon: 3ch;
  /* the same proportions at every width keep the colons a little right of the middle, as on a filing;
     on the smallest phones the right column's min-content (CLASS ACTION on one line) takes over */
  display: grid; grid-template-columns: minmax(0, 1.4fr) var(--cap-colon) minmax(min-content, 1fr);
  grid-template-rows: repeat(8, minmax(var(--lh), auto));
  margin: calc(-1 * var(--cap-rule)) -6px; padding-inline: 6px; border-block: var(--cap-rule) solid;
}
.order .caption > p { grid-column: 1; padding-right: 1ch; }
/* the plaintiffs break where the filing breaks them ("... of themselves / and all others ...") whenever
   the column holds the longer half on one line (32 characters: change 32.25ch with the plaintiffs in
   data/studio.json); narrower, they wrap as one sentence */
.order .cap-pl { grid-row: 2; text-wrap: pretty; container: cap-pl / inline-size; }
@container cap-pl (min-width: 32.25ch) { .order .cap-pl > span { display: block; } }
.order .cap-pl-role { grid-row: 3; }
.order .cap-df { grid-row: 7; }
.order .cap-df-role { grid-row: 8; }
/* the roles sit well to the right, as typed with tabs, never so far that they wrap; "v." about halfway */
.order .cap-role { padding-left: min(44%, 100% - 12.5ch); }
.order .cap-vs { grid-row: 5; padding-left: calc(min(44%, 100% - 12.5ch) * .55); }
.order .caption > .cap-action, .order .caption > .cap-no, .order .caption > .cap-more { grid-column: 3; padding: 0 0 0 2.5ch; white-space: nowrap; }
.order .cap-action { grid-row: 3; }
.order .cap-no { grid-row: 5; }
/* "and counting" in smaller grey type, its left edge (2.5ch of the order's type) in line with NO.: */
.order .cap-more { grid-row: 6; color: var(--ink-2); }
.order .cap-more > span { font-size: .8125rem; line-height: 1; }
/* one colon per line, as tall as the caption: size containment keeps the 30 colons from stretching it */
.order .cap-colons { grid-column: 2; grid-row: 1 / -1; contain: size; overflow: hidden; white-space: pre; text-align: center; user-select: none; }
.order .title { text-align: center; font-weight: 700; letter-spacing: .06em; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.order ol { margin: 0; padding-left: 3ch; }
.order .so { font-weight: 700; letter-spacing: .08em; }
.order .seal-imp { position: absolute; right: -22px; bottom: -34px; width: 136px; transform: rotate(-14deg); opacity: .92; }

/* ------------------------------------------------------------ sections */
.section { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--rule); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { margin-bottom: 0; }
.section-head p { margin: 0; color: var(--ink-2); max-width: 36em; }
.section-head + .case-file { margin-top: 56px; }

/* "Three jokes, one name" */
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.count { background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 18px 20px 20px; position: relative; }
.count .label { color: var(--red-text); display: block; margin-bottom: 6px; }
.count h3 { font-size: 1.5rem; margin-bottom: .35em; }
.count p { margin: 0; }
.count:nth-child(1) { transform: rotate(-.6deg); }
.count:nth-child(3) { transform: rotate(.5deg); }
.pun-fine { margin: 22px 0 0; font-family: var(--mono); font-size: .9375rem; color: var(--ink-2); }

/* ------------------------------------------------------------ folders (game cards) */
.docket-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: stretch; }
.folder {
  position: relative; background: var(--manila); border-radius: 0 6px 6px 6px; padding: 22px;
  box-shadow: var(--shadow); margin-top: 32px; border: 1px solid var(--manila-edge);
  display: flex; flex-direction: column;
}
.folder-tab {
  position: absolute; left: -1px; top: -33px; height: 33px; padding: 9px 16px 0; max-width: calc(100% + 2px);
  background: var(--manila); border: 1px solid var(--manila-edge); border-bottom: 0; border-radius: 6px 10px 0 0;
  font: 700 .875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-tab::after { /* the game's colour strip on the tab */
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 4px; background: var(--g-accent, var(--ink)); border-radius: 0 0 2px 2px;
}
.photo {
  position: relative; background: var(--sheet); padding: 8px 8px 10px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45);
  transform: rotate(-.8deg); margin: 4px 4px 18px;
}
.photo img { width: 100%; image-rendering: pixelated; } /* key art: big art pixels stay crisp */
.clip { position: absolute; width: 22px; height: 64px; top: -22px; left: 26px; z-index: 2; }
.folder h3 { font-size: 1.7rem; margin: 2px 0 6px; }
.folder h3 a { color: var(--ink); text-decoration: none; }
.folder h3 a:hover { text-decoration: underline; }
.folder .pitch { font-size: 1.05rem; }
.folder .meta { font: 400 .9375rem/1.5 var(--mono); color: var(--ink-2); margin-bottom: 16px; }
.case-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.case-head .stamp { flex: none; margin: 4px 4px 14px; }
.folder .links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.folder .links .btn { background: var(--sheet); }
.folder .links .btn.primary { background: var(--red); }
.folder.sealed {
  background: repeating-linear-gradient(135deg, var(--manila) 0 14px, color-mix(in srgb, var(--manila) 88%, var(--manila-deep)) 14px 28px);
  justify-content: center; text-align: center; min-height: 320px;
}
.folder.sealed .folder-tab::after { background: var(--rule-strong); }
.seal-tape {
  margin: 0 auto 16px; background: var(--sheet); border: 1px solid var(--rule-strong); padding: 18px 16px; max-width: 290px;
  box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .4); transform: rotate(2deg);
}
.seal-tape .stamp { font-size: 1.15rem; margin-bottom: 12px; }
.seal-tape p { margin: 0; color: var(--ink-2); }

/* ------------------------------------------------------------ service list (Find us) */
.service { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.service a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 14px;
  background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-weight: 600;
}
.service a:hover { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--red); }
.service .via { font: 700 .8125rem/1 var(--mono); color: var(--red-text); text-transform: uppercase; letter-spacing: .06em; }
.contact-line { margin: 22px 0 0; font-size: 1.05rem; }
.contact-line a { font-weight: 700; }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 48px 0 28px; }
.site-footer a { color: var(--footer-ink); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-footer h2 { font: 700 .8125rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--footer-muted); margin: 6px 0 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer .fine { border-top: 1px solid rgba(246, 240, 225, .16); margin-top: 36px; padding-top: 18px; display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; color: var(--footer-muted); font-size: .9375rem; }
.site-footer .fine p { margin: 0; }
.site-footer .foot-lockup { height: 64px; width: auto; }

/* ------------------------------------------------------------ game page */
.case-hero { padding: 30px 0 0; }
.case-file {
  position: relative; border: 1px solid var(--manila-edge); background: var(--manila); padding: 12px;
  border-radius: 0 6px 6px 6px; margin-top: 33px; box-shadow: var(--shadow);
}
.keyart { position: relative; overflow: hidden; border-radius: 2px; background: var(--g-stage); aspect-ratio: 3840 / 1240; }
.keyart img.bg { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.keyart img.logo { position: absolute; left: 3%; top: 8%; width: 27%; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .18)); }
.case-intro { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px, 4vw, 56px); padding: 36px 0 12px; align-items: start; }
.case-intro h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); margin-bottom: .3em; }
.case-intro .tagline { font: 700 1.25rem/1.35 var(--display); margin-bottom: .6em; }
.case-intro .short { font-size: 1.15rem; }
.facts-card { background: var(--sheet); border: 1px solid var(--rule); padding: 18px 20px; box-shadow: var(--shadow); }
.facts-card dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 1rem; }
.facts-card dt { font: 700 .8125rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.facts-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.btn-note { font-size: .9375rem; color: var(--ink-2); margin-top: 12px; }

/* the stage: the game's own colours, inside a case folder */
.stage { background: var(--g-stage); color: var(--g-stage-ink); padding: clamp(14px, 2.4vw, 26px); border-radius: 2px; }
.stage .label { color: var(--g-highlight); }
.stage a { color: var(--g-stage-ink); }
.stage .muted { color: var(--g-stage-muted); }
.media-row { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
.player { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vid-meta { font: 400 .9375rem/1.5 var(--mono); margin: 10px 0 0; }
.vid-files { margin: 6px 0 0; }
.cuts { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.cuts li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
.cuts img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(255, 255, 255, .25); }
.cuts b { display: block; font-size: 1.02rem; }
.cuts .muted { font: 400 .875rem/1.5 var(--mono); display: block; }
.cuts .file-links { margin-top: 2px; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; align-items: center; }
.about .block h3 { margin-top: .2em; }
.about .block > :last-child { margin-bottom: 0; }
.clip-card { margin: 0; background: var(--sheet); border: 1px solid var(--rule); padding: 8px; box-shadow: var(--shadow); }
.clip-card video, .clip-card img { width: 100%; aspect-ratio: 1170 / 660; background: var(--g-stage); }
.clip-media { position: relative; }
/* Pause/Play on a looping clip: ink with a cream rim, so it shows on any frame; its focus ring is two
   rings (cream, then ink) for the same reason. */
.clip-toggle {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px 6px 10px;
  font: 700 .8125rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: #fffdf7; background: #1d1b22; border: 1.5px solid #fffdf7; border-radius: var(--radius); cursor: pointer; opacity: .92;
}
.clip-toggle:hover { opacity: 1; }
.clip-toggle:focus-visible { outline: 3px solid #fffdf7; outline-offset: 0; box-shadow: 0 0 0 6px #1d1b22; opacity: 1; }
.clip-toggle svg { width: 14px; height: 14px; }
.clip-toggle .i-play { display: none; }
.clip-toggle[data-state="paused"] .i-play { display: block; }
.clip-toggle[data-state="paused"] .i-pause { display: none; }
.clip-card figcaption { font: 400 .9375rem/1.45 var(--mono); color: var(--ink-2); padding: 8px 4px 2px; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.feature-list li { padding-left: 34px; position: relative; }
.feature-list li::before { /* a ticked box on a form */
  content: ""; position: absolute; left: 0; top: .22em; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 2px; background: var(--sheet);
}
.feature-list li::after {
  content: ""; position: absolute; left: 6px; top: calc(.22em + 1px); width: 7px; height: 13px;
  border: solid var(--red); border-width: 0 3px 3px 0; transform: rotate(40deg);
}
.block .feature-list { margin-bottom: 1em; }

/* exhibits (screenshots) */
.exhibits { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
.exhibit { grid-column: span 4; margin: 0; }
.exhibit.big { grid-column: span 8; grid-row: span 2; }
.exhibit.quarter { grid-column: span 3; }
.exhibit a { display: block; position: relative; background: var(--sheet); padding: 6px; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.exhibit a:hover { border-color: var(--ink); }
.exhibit img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* screenshots shrink smoothly: their text stays legible */
.tag {
  position: absolute; left: -8px; top: 14px; background: var(--sticker); color: var(--sticker-ink); padding: 6px 9px 5px;
  font: 700 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transform: rotate(-3deg);
}
.exhibit figcaption { font-size: .9375rem; color: var(--ink-2); padding: 8px 2px 0; }

.press-callout { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; background: var(--manila); border: 1px solid var(--manila-edge); padding: 24px; box-shadow: var(--shadow); }
.press-callout img { width: 84px; }
.press-callout h2 { font-size: 1.6rem; margin-bottom: .2em; }
.press-callout p { margin: 0; }

/* ------------------------------------------------------------ press kit */
.pk-top { padding: 36px 0 8px; }
.pk-top h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); margin-bottom: .15em; }
.pk-top .sub { color: var(--ink-2); margin: 0 0 18px; max-width: 46em; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pk-actions + .note { margin: 12px 0 0; }
.pk-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 18px 0 0; margin: 0; font: 400 .9375rem/1.5 var(--mono); }
.pk-toc a { color: var(--ink); }
.pk-layout { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 40px; align-items: start; padding: 28px 0 64px; }
.pk-main > section { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--rule); scroll-margin-top: 16px; }
.pk-main > section:last-child { border-bottom: 0; margin-bottom: 0; }
.pk-main h2 { font-size: 1.75rem; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.pk-main h2 .label { font-size: .8125rem; }
.pk-main h3 { margin-top: 28px; }

.filing { /* the fact sheet, on pleading paper; it stays in view on wide screens */
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--sheet); border: 1px solid var(--rule); box-shadow: var(--shadow);
  padding: 16px 16px 14px 46px; font-size: .875rem; line-height: 1.35;
  background-image: linear-gradient(to right, transparent 32px, var(--red) 32px, var(--red) 33px, transparent 33px, transparent 36px, var(--red) 36px, var(--red) 37px, transparent 37px);
}
.filing h2 { font: 700 1rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; margin: 0 0 10px; }
.filing dl { margin: 0; counter-reset: line; }
.filing .row { position: relative; display: grid; grid-template-columns: 6.9rem minmax(0, 1fr); gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--rule); counter-increment: line; }
.filing .row::before { content: counter(line); position: absolute; left: -44px; width: 24px; text-align: right; font: 400 .8125rem/1.45 var(--mono); color: var(--ink-2); }
.filing dt { font: 700 .8125rem/1.45 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.filing dd { margin: 0; overflow-wrap: break-word; }
.filing .btn { width: 100%; margin-top: 12px; min-height: 44px; padding: 10px 14px; font-size: .9375rem; }

.desc { background: var(--sheet); border: 1px solid var(--rule); padding: 16px 18px; margin: 0 0 14px; }
.desc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.desc-head .label { color: var(--ink); }
.desc-head .count-chars { font: 400 .8125rem/1 var(--mono); color: var(--ink-2); margin-left: 8px; text-transform: none; letter-spacing: 0; }
.desc-body > :last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--sheet); }
.dl-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.dl-table th, .dl-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.dl-table thead th { font: 700 .8125rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); background: var(--paper); }
.dl-table tr:last-child td { border-bottom: 0; }
.dl-table .thumb-cell { width: 120px; }
.dl-table .thumb-cell img { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; background: var(--g-stage); }
.dl-table b { display: block; }
.dl-table .muted { display: block; color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
/* download links: pills 32 px tall with room between them, easy to hit on a phone */
.file-links { display: flex; flex-wrap: wrap; gap: 8px; }
.file-links a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--rule-strong); border-radius: 16px; background: var(--sheet);
  font-weight: 600; font-size: .9375rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.file-links a:hover { border-color: var(--ink); text-decoration: underline; }
.stage .file-links a { background: transparent; border-color: var(--g-stage-muted); color: var(--g-stage-ink); }
.stage .file-links .sz { color: var(--g-stage-muted); }
figcaption .file-links { margin-top: 8px; }
.dl-table .file-links { margin-top: 8px; }
.sz { font: 400 .875rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.btn .sz, .btn.primary .sz { color: inherit; }

.player-card { background: var(--g-stage); padding: 10px; margin-bottom: 14px; }
.player-card video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.thumb { margin: 0; background: var(--sheet); border: 1px solid var(--rule); padding: 6px; display: flex; flex-direction: column; }
.thumb > a { display: block; }
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.thumb.art img { object-fit: contain; background: var(--paper); image-rendering: pixelated; }
.thumb figcaption { font-size: .875rem; padding: 6px 2px 0; color: var(--ink-2); line-height: 1.45; }
.thumb figcaption b { color: var(--ink); font-weight: 600; }
.thumb figcaption a { white-space: nowrap; }
.thumb figcaption .file-links a { font-size: .875rem; }
.logo-tile img { object-fit: contain; image-rendering: auto; padding: 14px; aspect-ratio: 16 / 9; }
.logo-tile.on-dark > a { background: #17161b; }
.logo-tile.on-light > a { background: #f6f0e1; }
.logo-tile.on-stage > a { background: var(--g-stage); }
.logo-tile.pixel img { image-rendering: pixelated; }
.quote-empty { border: 2px dashed var(--rule-strong); padding: 18px 20px; color: var(--ink-2); }
.terms { background: var(--sheet); border-left: 4px solid var(--red); padding: 14px 18px; }
.terms > :last-child { margin-bottom: 0; }
.grid-3 + .terms { margin-top: 18px; }
.dl-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.dl-list a { font-weight: 600; }

/* press index */
.kit-list { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.swatches li { background: var(--sheet); border: 1px solid var(--rule); padding: 8px; font: 400 .875rem/1.4 var(--mono); }
.swatches .chip { display: block; height: 56px; border: 1px solid rgba(0, 0, 0, .15); margin-bottom: 8px; }
.swatches b { display: block; font-family: var(--body); font-size: .9375rem; }
.chip-f6f0e1 { background: #f6f0e1; } .chip-1d1b22 { background: #1d1b22; } .chip-b0281f { background: #b0281f; }
.chip-e7cf98 { background: #e7cf98; } .chip-17161b { background: #17161b; } .chip-c8352b { background: #c8352b; }

/* 404 */
.dismissed { padding: clamp(48px, 9vw, 120px) 0; }
.dismissed .stamp { font-size: 1.4rem; margin-bottom: 26px; }
.dismissed h1 { max-width: 16ch; }
.dismissed .lede { font-size: 1.15rem; max-width: 34em; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1240px) { .order .seal-imp { right: 6px; } }
/* where the hero's two columns are narrowest, a blank line at the foot keeps the seal off item 3 */
@media (min-width: 961px) and (max-width: 1199px) { .order { padding-bottom: calc(var(--lh) * 2); } }
@media (max-width: 960px) {
  .hero .wrap, .docket-grid, .case-intro, .media-row, .about, .pk-layout, .kit-list { grid-template-columns: minmax(0, 1fr); }
  .order { transform: none; margin-right: 8px; }
  .order .seal-imp { right: -4px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .filing { position: static; max-height: none; }
  .exhibit, .exhibit.big, .exhibit.quarter { grid-column: span 6; grid-row: auto; }
  .exhibit.big { grid-column: span 12; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts { grid-template-columns: minmax(0, 1fr); }
  .count:nth-child(n) { transform: none; }
  .about .clip-card { order: 0; }
}
@media (max-width: 760px) {
  .brand .lk-h { display: none !important; }
  .brand .lk-c.on-light { display: block; }
  .site-header .wrap { flex-wrap: wrap; row-gap: 4px; padding-block: 12px 6px; }
  .site-nav { order: 3; width: 100%; }
  .site-nav ul { margin-left: -12px; }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .lk-c.on-light { display: none; }
  :root:not([data-theme="light"]) .brand .lk-c.on-dark { display: block; }
}
@media (max-width: 760px) {
  :root[data-theme="dark"] .brand .lk-c.on-light { display: none; }
  :root[data-theme="dark"] .brand .lk-c.on-dark { display: block; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .hero .lede { font-size: 1.1rem; }
  .order {
    --lh: 1.5rem; padding: var(--lh) 14px calc(var(--lh) * 2) 44px; font-size: .8125rem;
    background-image: linear-gradient(to right, transparent 32px, var(--red) 32px, var(--red) 33px, transparent 33px, transparent 36px, var(--red) 36px, var(--red) 37px, transparent 37px);
  }
  .order .ln { left: 2px; width: 24px; bottom: calc(var(--lh) * 2); }
  .order .court { letter-spacing: .02em; }
  .order .caption { --cap-rule: 1.5px; --cap-colon: 2.4ch; margin-inline: -4px; padding-inline: 4px; }
  .order .caption > p { padding-right: .5ch; }
  .order .caption > .cap-action, .order .caption > .cap-no, .order .caption > .cap-more { padding-left: 1ch; }
  .order .cap-more > span { font-size: inherit; line-height: inherit; }
  .order .seal-imp { width: 96px; right: 4px; bottom: -26px; }
  .folder { padding: 16px; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .exhibit, .exhibit.big, .exhibit.quarter { grid-column: span 12; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .press-callout { grid-template-columns: 1fr; }
  .press-callout img { width: 64px; }
  .keyart { aspect-ratio: 4 / 3; }
  .keyart img.logo { width: 56%; left: 4%; top: 5%; }
  .docket .wrap span + span + span { display: none; }
  .btns .btn, .pk-actions .btn { width: 100%; }
  .folder .links .btn { width: auto; flex: 1 1 auto; }
  .filing { padding-left: 46px; }
  .dl-table .thumb-cell { display: none; }
  .cuts li { grid-template-columns: 96px 1fr; }
  .cuts img { width: 96px; }
}
@media (max-width: 640px) {
  /* the download tables become one card per row */
  .table-wrap { overflow: visible; }
  .dl-table thead { display: none; }
  .dl-table, .dl-table tbody { display: block; }
  .dl-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
  .dl-table tr:last-child { border-bottom: 0; }
  .dl-table td { display: block; padding: 0; border: 0; }
  .dl-table td { white-space: nowrap; }
  .dl-table td:first-child, .dl-table td.thumb-cell + td { white-space: normal; }
  .filing .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 420px) {
  .service { grid-template-columns: 1fr; }
}
/* the smallest phones (375 px, 360 px Androids, 320 px): a narrower line-number gutter and tighter caption
   columns keep the caption in two columns with text at 13 px (the court's name may wrap, balanced) */
@media (max-width: 380px) {
  .order {
    margin-right: 0; padding: var(--lh) 8px calc(var(--lh) * 2) 36px;
    background-image: linear-gradient(to right, transparent 26px, var(--red) 26px, var(--red) 27px, transparent 27px, transparent 29px, var(--red) 29px, var(--red) 30px, transparent 30px);
  }
  .order .ln { left: 0; width: 21px; }
  .order .court { letter-spacing: 0; }
  .order .caption { --cap-colon: 2ch; }
  .order .caption > p { padding-right: .5ch; }
  .order .caption > .cap-action, .order .caption > .cap-no, .order .caption > .cap-more { padding-left: .5ch; }
}
@media print {
  .site-header, .site-footer, .theme-toggle, .copy-btn, video { display: none !important; }
  body { background: #fff; color: #000; }
}