/* Chapter Select: the site's one visual world.
   A story game's chapter-select menu, quiet and cinematic: near-black ground, warm white
   type, one brass accent, Archivo throughout. This sheet holds the shared parts and the
   inner pages (Production, Writing, Photos, the republished articles, the 404); the home
   page adds home.css for its menu, stage and scenes. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --bg: #0c0d0f;
  --bg-raise: #16181b;
  --ink: #ece8df;
  --ink-soft: rgba(236, 232, 223, 0.8);
  --ink-body: rgba(236, 232, 223, 0.88);
  --mute: #9a9ca0;
  --line: rgba(236, 232, 223, 0.18);
  --line-strong: rgba(236, 232, 223, 0.4);
  --brass: #c9a45c;
  --on-ink-mute: #45474b;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: 5vw;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--ink);
  scrollbar-color: #3a3c40 var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-stretch: 100%;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

::selection { background: var(--brass); color: var(--bg); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: var(--line-strong);
}
a:hover { text-decoration-color: currentColor; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--fill { fill: currentColor; stroke: none; }

.skip {
  position: absolute;
  z-index: 20;
  left: 16px;
  top: -80px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 16px; }

/* The menu's lettering: wide-tracked capitals, used for every label */
.who, .top-nav, .menu-title, .part, .kick, .meta dt, .result b, .progress, .prompts,
.credit, .scene-label, .link, .cta, .foot, .show-role, .credit-links, .key-link, .label {
  font-stretch: 104%;
  text-transform: uppercase;
}

.label {
  color: var(--mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
}

/* ---------- Top bar ---------- */

.top {
  position: absolute;
  z-index: 10;
  left: var(--gutter);
  right: var(--gutter);
  top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  letter-spacing: 0.3em;
}
.who { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 600; text-decoration: none; }
a.who:hover { color: var(--brass); }
.top-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 34px; }
.top-nav a,
.top-nav button {
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--mute);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s, box-shadow 0.2s;
}
.top-nav a:hover,
.top-nav button:hover,
.top-nav button[aria-expanded="true"] { color: var(--ink); }
.top-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass); }

.email-reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.email-reveal[hidden] { display: none; }
.email-reveal a {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration-color: var(--brass);
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--ink); }
.copy-btn .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.top .email-reveal {
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  padding: 14px 16px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
}

/* ---------- The chapter list: the menu, and every inner page's index ---------- */

.menu-title {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(24px, 3.3vh, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.32em;
}

.part {
  display: flex;
  align-items: flex-end;
  height: clamp(32px, 4.9vh, 44px);
  padding-bottom: 9px;
  color: var(--brass);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1;
}

.row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  min-height: clamp(34px, 4.7vh, 42px);
  margin: 0 -16px;
  padding: 4px 16px;
  color: var(--ink-soft);
  font-size: clamp(19px, 2.6vh, 23px);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.16s, color 0.16s;
}
.row .no,
.row .yr {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--mute);
  transition: color 0.16s;
}
.row:hover { background: rgba(236, 232, 223, 0.07); color: var(--ink); }
.row.is-current { background: var(--ink); color: var(--bg); font-weight: 500; }
.row.is-current .no,
.row.is-current .yr { color: var(--on-ink-mute); }
.row:focus-visible { outline-offset: 0; }
.rows--plain .row { grid-template-columns: 1fr auto; }

/* ---------- Keycaps ---------- */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 32px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(236, 232, 223, 0.55);
  border-radius: 5px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.key .ic { font-size: 14px; }

/* a way back, set as a keycap prompt */
.key-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--mute);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-decoration: none;
  transition: color 0.2s;
}
.key-link:hover { color: var(--ink); }
.key-link:hover .key { border-color: var(--brass); color: var(--brass); }

/* ---------- Titles and cards ---------- */

.title {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(38px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* an organization's mark above its chapter's title */
.title-mark { display: block; align-self: flex-start; justify-self: start; width: auto; height: 52px; margin-bottom: 22px; }
.title-mark--line { height: 64px; margin-bottom: 18px; }

.kick {
  color: var(--brass);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.3em;
}

.meta {
  display: grid;
  grid-template-columns: minmax(86px, max-content) 1fr;
  gap: 9px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.4;
}
.meta dt {
  padding-top: 3px;
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.22em;
}

.desc { margin-top: 18px; max-width: 34em; color: var(--ink-body); }

.result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 22px; }
.result b {
  color: var(--brass);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.24em;
}
.result b.is-time { text-transform: none; letter-spacing: 0.04em; }
.result span { color: var(--mute); font-size: 14px; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: background-color 0.2s;
}
.cta:hover { background: var(--brass); }
.cta .ic { font-size: 18px; }

/* ---------- Links, lists and labels ---------- */

.scene-label {
  color: var(--mute);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0 7px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.link:hover { color: var(--brass); border-color: var(--brass); }
.link .ic { font-size: 14px; }
.link--strong { color: var(--brass); border-color: var(--brass); }
.link--strong:hover { color: var(--ink); border-color: var(--ink); }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 22px; }

.tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
  column-gap: 22px;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 15px;
}
.tags li { padding: 7px 0; border-top: 1px solid var(--line); }

.bar { position: relative; display: block; height: 2px; background: var(--line); }
.bar i {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
}

/* a list of pieces, each a link row with its date */
.titles { margin-top: 10px; --cursor: -9; }
.titles li { border-bottom: 1px solid var(--line); }
.titles a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -12px;
  padding: 9px 12px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  background: rgba(236, 232, 223, calc(0.14 * clamp(0, calc(1 - (var(--cursor) - var(--i, -99))), 1) * clamp(0, calc(1 + (var(--cursor) - var(--i, -99))), 1)));
  transition: color 0.16s;
}
.titles a:hover { color: var(--ink); background: rgba(236, 232, 223, 0.07); }
.titles .d { flex: none; color: var(--mute); font-size: 13px; letter-spacing: 0.1em; }

/* a dated log: when, what, and links to watch or listen */
.log li {
  display: grid;
  grid-template-columns: 120px 1fr;
  column-gap: 20px;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--line);
}
.log li:first-child { border-top: 1px solid var(--line); }
.log .when { color: var(--mute); font-size: 13px; letter-spacing: 0.08em; line-height: 1.6; }
.log .what { display: flex; flex-direction: column; gap: 3px; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.log .what strong { color: var(--ink); font-size: 17px; font-weight: 500; }
.vods { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 4px; }
.vods a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 14px; text-decoration-color: var(--brass); }
.vods .ic { font-size: 11px; color: var(--brass); }

.log .tag { margin-top: 4px; color: var(--brass); font-size: 11px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.24em; text-transform: uppercase; }

/* plain facts, one to a hairline row */
.facts li { padding: 11px 0 10px; border-bottom: 1px solid var(--line); color: var(--ink-body); font-size: 16px; line-height: 1.5; }
.facts li:first-child { border-top: 1px solid var(--line); }

.credit { color: var(--mute); font-size: 12px; letter-spacing: 0.16em; text-wrap: balance; }

/* a row of photos at one height: each print carries its aspect ratio (--ar) */
.strip { display: flex; gap: 10px; margin-top: 18px; }
.strip .print { flex: var(--ar, 1.5) 1 0; min-width: 0; }
.strip .print img { width: 100%; height: auto; aspect-ratio: var(--ar, 1.5); object-fit: cover; }

/* a wide photo; on the home page it unrolls from left to right (--reveal) */
.banner { --reveal: 1; }
.banner .print { width: 100%; clip-path: inset(0 calc((1 - var(--reveal)) * 100%) 0 0); }
.banner .print img { width: 100%; }
.banner figcaption { margin-top: 10px; }
.block > p + .banner,
.entry-body > p + .banner { margin-top: 18px; }

/* artwork in one row at one height, each artist named beneath */
.art { display: flex; gap: 12px; margin-top: 12px; }
.art figure { flex: var(--ar, 1) 1 0; min-width: 0; }
.art .print img { width: 100%; }
.art figcaption { margin-top: 8px; color: var(--mute); font-size: 12px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.24em; text-transform: uppercase; overflow-wrap: anywhere; }
.art figcaption a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: color 0.2s; }
.art figcaption a:hover { color: var(--brass); }
.art figcaption .ic { font-size: 12px; }
.art--wall + .art--wall { margin-top: 14px; }
.art--wall .print { position: relative; }
.art--wall .print::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background-color: rgba(12, 13, 15, 0.72);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ece8df' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  opacity: 0.75;
  transition: opacity 0.2s, background-color 0.2s;
}
.art--wall .print:hover::after,
.art--wall .print:focus-visible::after { opacity: 1; background-color: rgba(12, 13, 15, 0.9); }
.art--wall figcaption { display: grid; gap: 1px; color: var(--ink-soft); font-size: 13px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; text-transform: none; }
.art--wall figcaption .wall-watch { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--ink); font-size: 12px; text-decoration-color: var(--brass); text-underline-offset: 3px; transition: color 0.2s; }
.art--wall figcaption .wall-watch:hover { color: var(--brass); }
.wall-watch .ic { font-size: 11px; color: var(--brass); }
.art--wall figcaption span { color: var(--mute); font-size: 11px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.18em; text-transform: uppercase; }

/* the player select: one card per player; on hover or focus the player's card rises above them */
.roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px 12px; margin-top: 10px; }
.roster li { position: relative; padding-top: 10px; border-top: 2px solid var(--line-strong); }
.roster li:first-child { border-top-color: var(--ink); }
.roster b { display: block; font-size: 17px; font-weight: 500; line-height: 1.25; }
.roster > li > span:not(.pcard) { display: block; margin-top: 3px; color: var(--mute); font-size: 13px; line-height: 1.35; }
.roster--cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 10px; }
.roster--cards li { padding-top: 0; border-top: 0; cursor: default; }
.roster--cards > li > span:not(.pcard) { font-size: 12px; }
/* each player's portrait stands on the rule like a nameplate: grey until the player is picked, in colour on hover
   or focus, and it opens that player's portraits from every edition in the lightbox (the others ride along hidden) */
.roster--cards .portrait { width: 100%; margin-bottom: 10px; border-bottom: 2px solid var(--line-strong); transition: border-color 0.2s; }
.roster--cards li:first-child .portrait { border-bottom-color: var(--ink); }
.roster--cards li:hover .portrait,
.roster--cards li:focus-within .portrait { border-bottom-color: var(--brass); }
.roster--cards .portrait img { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) brightness(0.78); }
.roster--cards li:hover .portrait img,
.roster--cards li:focus-within .portrait img { filter: none; }
.print[hidden] { display: none; }
/* the card stays out of the layout until its player is hovered or focused */
.pcard {
  position: absolute;
  z-index: 5;
  left: -10px;
  bottom: calc(100% + 12px);
  width: max(190px, calc(100% + 20px));
  display: none;
  gap: 6px;
  padding: 14px 14px 13px;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--brass);
  background: var(--bg-raise);
  pointer-events: none;
  transition: opacity 0.18s, translate 0.18s;
}
.roster--cards li:nth-child(n + 4) .pcard { left: auto; right: -10px; }
.roster--cards li:hover .pcard,
.roster--cards li:focus-within .pcard { display: grid; }
@starting-style {
  .roster--cards li:hover .pcard,
  .roster--cards li:focus-within .pcard { opacity: 0; translate: 0 6px; }
}
@media (max-width: 640px) {
  .roster--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roster--cards li:nth-child(n + 4) .pcard { left: -10px; right: auto; }
  .roster--cards li:nth-child(3n) .pcard { left: auto; right: -10px; }
}
.pcard-title { color: var(--brass); font-size: 11px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.22em; line-height: 1.4; text-transform: uppercase; }
.pcard-record { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.25; }
.pcard-line { color: var(--ink-soft); font-size: 13px; line-height: 1.45; }

/* the editions: each Windsor Showdown with its mark, its champion, the games and the broadcast. They share one
   set of rows (subgrid), so the champion, the games and the watch link line up across the cards */
.editions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 14px; margin-top: 10px; }
.edition {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(236, 232, 223, 0.025);
}
.edition-logo { width: 64px; height: 64px; object-fit: contain; }
.edition-name { font-size: 17px; font-weight: 500; line-height: 1.25; }
.edition-name small { display: block; margin-top: 2px; color: var(--mute); font-size: 13px; font-weight: 400; letter-spacing: 0.06em; }
/* the label over the name, like the games under it, so every card reads the same at any width */
.edition-result { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--mute); font-size: 12px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.2em; text-transform: uppercase; }
.edition-result b { color: var(--ink); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.edition-result + .edition-result { padding-top: 0; border-top: 0; }
.edition-games { display: grid; align-content: start; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.edition-games > span { color: var(--mute); font-size: 12px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.2em; text-transform: uppercase; }
.edition-games ul { display: grid; gap: 2px; color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
/* a game on the list that didn't get played */
.edition-games s { color: var(--mute); text-decoration-thickness: 1px; }
.edition-watch { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--ink); font-size: 13px; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.edition-watch .ic { font-size: 11px; color: var(--brass); }
.edition-watch:hover { color: var(--brass); }

/* leagues by rank: each league takes its band of the ladder (--row, --span), on the Production page */
.ladder { display: grid; grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); grid-auto-rows: minmax(38px, auto); column-gap: 22px; margin-top: 12px; }
.ladder > ol { display: contents; }
.ranks li { grid-column: 1; grid-row: var(--row); display: flex; align-items: center; border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; letter-spacing: 0.06em; line-height: 1.3; }
.leagues li {
  --fill: 1;
  position: relative;
  grid-column: 2;
  grid-row: var(--row) / span var(--span, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 8px 0 8px 18px;
  border-top: 1px solid var(--line);
}
.ranks li:last-child,
.leagues li:last-child { border-bottom: 1px solid var(--line); }
.leagues li::before,
.league-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  background: var(--brass);
  transform-origin: 50% 0;
  transform: scaleY(var(--fill, 1));
}
.leagues b,
.league-list b { font-size: 17px; font-weight: 500; line-height: 1.3; }
.league-list b a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color 0.2s; }
.league-list b a:hover { color: var(--brass); }
.league-list b .ic { font-size: 13px; color: var(--mute); }
.leagues small,
.league-list small { margin-left: 8px; color: var(--brass); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
.leagues span,
.league-list span { color: var(--ink-soft); font-size: 14px; line-height: 1.4; }

/* the leagues an organization ran, one to a row */
.league-list { margin-top: 10px; }
.league-list li { position: relative; display: grid; gap: 2px; padding: 10px 0 10px 18px; border-top: 1px solid var(--line); }
.league-list li:last-child { border-bottom: 1px solid var(--line); }

/* press passes: the shows a site covered, each show's logo on its own lanyard card with the word under it, like a credential */
.passes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-top: 10px; }
.pass {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: 12px;
  min-height: 108px;
  padding: 26px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(236, 232, 223, 0.055), rgba(236, 232, 223, 0.015));
}
/* the slot the lanyard goes through */
.pass::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 26px;
  height: 5px;
  margin-left: -13px;
  border-radius: 3px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.pass::after {
  content: "Press";
  color: var(--brass);
  font-size: 11px;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.pass-logo { display: block; width: auto; height: auto; max-width: min(100%, 118px); max-height: 46px; }

/* the gamer profile's hall of fame: covers on a shelf at one height, the game under the cursor in detail (--cursor against each --i) */
.hall { --cursor: 1; }
.hall-shelf { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.hall-shelf li { flex: var(--ar) 1 0; min-width: 0; }
.hall-game {
  --on: calc(clamp(0, calc(1 - 2 * (var(--cursor) - var(--i))), 1) * clamp(0, calc(1 + 2 * (var(--cursor) - var(--i))), 1));
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  box-shadow: 0 0 0 calc(2px * var(--on)) var(--brass);
  cursor: pointer;
  translate: 0 calc(-4px * var(--on));
  transition: translate 0.2s;
}
.hall-game img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; border-radius: 3px; filter: brightness(calc(0.5 + 0.5 * var(--on))); transition: filter 0.2s; }
.hall-game:focus-visible { outline-offset: 5px; }
/* on a phone the shelf wraps at one height, three or four to a row, so six covers stay readable */
@media (max-width: 640px) {
  .hall-shelf { flex-wrap: wrap; row-gap: 12px; }
  .hall-shelf li { flex: 0 0 auto; }
  .hall-game img { width: auto; height: 100px; }
}
.hall-detail { display: grid; margin-top: 16px; }
.hall-card {
  --on: calc(clamp(0, calc(1 - 2 * (var(--cursor) - var(--i))), 1) * clamp(0, calc(1 + 2 * (var(--cursor) - var(--i))), 1));
  grid-area: 1 / 1;
  opacity: var(--on);
  pointer-events: none;
}
.hall-card h3,
.hall-list h4 { font-size: 21px; font-weight: 400; line-height: 1.2; }
.hall-card small,
.hall-list small { margin-left: 10px; color: var(--mute); font-size: 12px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.2em; }
.hall-card p,
.hall-list p { margin-top: 6px; max-width: 34em; color: var(--ink-body); font-size: 15px; line-height: 1.45; }
.ranks { margin-top: 24px; }
/* on the Games media page, one game to a row */
.hall-list { display: grid; gap: 16px; margin-top: 14px; }
.hall-list li { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.hall-list img { width: 104px; height: 104px; object-fit: contain; object-position: left center; }
.peak-list { margin-top: 6px; }
.peak-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.peak-list li:last-child { border-bottom: 0; }
.peak-list b { color: var(--brass); font-size: 12px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }

/* the inventory: a slot for every piece of gear, and the selected piece in detail (--cursor against each --i) */
.inventory {
  --cursor: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px 26px;
  align-items: start;
}
.inv-label { display: flex; justify-content: space-between; color: var(--mute); font-size: 12px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.24em; text-transform: uppercase; }
.inv-label + .inv-slots { margin-top: 8px; }
.inv-slots + .inv-label { margin-top: 16px; }
.inv-label span { color: var(--brass); }
.inv-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.inv-slot {
  --on: calc(clamp(0, calc(1 - 2 * (var(--cursor) - var(--i))), 1) * clamp(0, calc(1 + 2 * (var(--cursor) - var(--i))), 1));
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 42%, rgba(236, 232, 223, calc(0.05 + 0.07 * var(--on))), rgba(236, 232, 223, 0) 70%),
    rgba(236, 232, 223, 0.025);
  box-shadow: inset 0 0 0 calc(1.5px * var(--on)) var(--brass);
  cursor: pointer;
  transition: background-color 0.2s;
}
.inv-slot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.inv-slot:hover { background-color: rgba(236, 232, 223, 0.06); }
.inv-slot:focus-visible { outline-offset: 2px; }
.inv-detail { display: grid; min-width: 0; }
.inv-card {
  --on: calc(clamp(0, calc(1 - 2 * (var(--cursor) - var(--i))), 1) * clamp(0, calc(1 + 2 * (var(--cursor) - var(--i))), 1));
  grid-area: 1 / 1;
  display: grid;
  gap: 4px;
  align-content: start;
  opacity: var(--on);
  pointer-events: none;
}
.inv-card img { width: 100%; max-width: 300px; aspect-ratio: 1; object-fit: contain; margin: -6px auto 2px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)); translate: 0 calc((1 - var(--on)) * 8px); }
.inv-kind { margin-bottom: 2px; color: var(--brass); font-size: 11px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.24em; text-transform: uppercase; }
.inv-name { font-size: 21px; font-weight: 400; line-height: 1.2; }
.inv-stats { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.inv-stats dt { color: var(--mute); font-size: 11px; font-weight: 600; font-stretch: 104%; letter-spacing: 0.2em; line-height: 1.9; text-transform: uppercase; }
.inv-stats dd { color: var(--ink-soft); }
@media (max-width: 640px) {
  .inventory { grid-template-columns: minmax(0, 1fr); }
  .inv-detail { order: -1; }
  .inv-card img { max-width: 220px; }
}

/* ---------- Inner pages: the part's index on the left, its entries on the right ---------- */

.codex {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  column-gap: 6vw;
  padding: 140px var(--gutter) 120px;
}
.codex-index { position: sticky; top: 48px; align-self: start; padding-top: 4px; }
.codex-index .desc { margin: 20px 0 36px; font-size: 17px; }
/* a page with no intro (Photos) keeps the same step down to its chapter list */
.codex-index .page-title + nav { margin-top: 36px; }
.codex-index .menu-title { font-size: 13px; letter-spacing: 0.3em; padding-bottom: 14px; }
.codex-main { min-width: 0; max-width: 780px; padding-top: 6px; }
.codex--wide .codex-main { max-width: none; }

.page-title { font-size: clamp(44px, 5.4vw, 76px); }

.entry { padding: 0 0 120px; scroll-margin-top: 48px; }
.entry + .entry { padding-top: 64px; border-top: 1px solid var(--line); }
.entry .title { font-size: clamp(34px, 3.6vw, 52px); }
.entry .meta { max-width: 560px; }
.entry-body { margin-top: 30px; }
.entry-body > p { max-width: 36em; color: var(--ink-body); }
.entry-body > p + p { margin-top: 14px; }
.entry-body strong { color: var(--ink); font-weight: 600; }
/* an entry that opens on its logo */
.entry-lead { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 28px; align-items: center; max-width: 40em; color: var(--ink-body); }
.entry-logo { width: 100%; height: auto; }
.entry-body .prints { margin-top: 18px; }
.entry-body .credit { margin-top: 12px; }
.block { margin-top: 44px; }
.block > h3 { margin-bottom: 14px; font-size: 22px; font-weight: 500; line-height: 1.25; }
.block > h3 + .label { margin: -8px 0 14px; }
.block > p { max-width: 36em; color: var(--ink-body); }
.block > p + p { margin-top: 12px; }
.block > p + .log,
.block > p + .facts,
.block > p + .titles { margin-top: 18px; }
.block .links { margin-top: 16px; }
.block-logo { display: block; width: 56px; height: 56px; margin-bottom: 14px; object-fit: contain; object-position: left center; }
.block-logo--wide { width: 168px; height: auto; }
/* a round or square event mark, as tall as a wide one */
.block-logo--mark { width: 100px; height: 100px; }
.block .passes + p { margin-top: 18px; }
.block-grid { display: grid; gap: 44px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 44px; }
.block-grid .block { margin-top: 0; }

/* ---------- Photos ---------- */

.set + .set,
#album + .set { margin-top: 96px; padding-top: 64px; border-top: 1px solid var(--line); }
.set, #album { scroll-margin-top: 48px; }
.index-sets { margin-top: 34px; }
.set-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-bottom: 26px; }
.set-head h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 400; line-height: 1.1; }
.prints { columns: 3 240px; column-gap: 14px; }
.prints .print { width: 100%; margin: 0 0 14px; break-inside: avoid; }
.prints--small { columns: 4 150px; column-gap: 12px; }
.prints--small .print { margin-bottom: 12px; }
.print {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.print img { width: 100%; height: auto; filter: saturate(0.9) brightness(0.92); transition: filter 0.3s; }
.print:hover img,
.print:focus-visible img { filter: none; }

/* ---------- Articles ---------- */

.article {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  column-gap: 6vw;
  padding: 140px var(--gutter) 120px;
}
.article-head { position: sticky; top: 48px; align-self: start; }
.article-head .title { font-size: clamp(34px, 3.6vw, 52px); }
.article-head .desc { font-size: 18px; }
.article-head .links { margin-top: 34px; }
.article-head .result { margin-top: 26px; }

.prose { max-width: 68ch; color: var(--ink-body); font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; color: var(--ink); font-size: 26px; font-weight: 500; line-height: 1.25; }
.prose a { color: var(--ink); text-decoration-color: var(--brass); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: ""; position: absolute; left: -1.1em; top: 0.8em; width: 0.5em; height: 1px; background: var(--brass); }
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--brass); }
.prose li + li { margin-top: 0.4em; }
.prose blockquote {
  margin: 1.8em 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 21px;
  line-height: 1.5;
}
.prose img { margin: 2em 0; width: 100%; height: auto; }
.prose .note .link { margin-top: 0; }
.article-foot { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--mute); font-size: 15px; }
.article-foot .links { margin-top: 14px; }

/* ---------- 404 ---------- */

.lost { max-width: 560px; }
.lost .key-link { margin-top: 36px; }

/* ---------- Footer and lightbox ---------- */

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 36px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.2em;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot a { color: var(--ink); text-decoration: none; }
.foot a:hover { color: var(--brass); }

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 9, 10, 0.96);
  color: var(--ink);
}
.lightbox::backdrop { background: rgba(8, 9, 10, 0.7); }
.lightbox figure {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 18px;
  height: 100%;
  padding: 28px var(--gutter);
}
.lightbox img { justify-self: center; align-self: center; max-height: calc(100vh - 140px); width: auto; object-fit: contain; }
.lightbox figcaption { display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 15px; }
.lb-count { color: var(--mute); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.lightbox .controls { display: flex; gap: 10px; }
.lightbox .controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: none;
  font-size: 20px;
  cursor: pointer;
}
.lightbox .controls button:hover { border-color: var(--ink); }

/* ---------- Narrower screens ---------- */

@media (max-width: 1023px) {
  .codex,
  .article { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .codex-index,
  .article-head { position: static; }
  .codex-main { max-width: none; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .top { top: 18px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 11px; letter-spacing: 0.2em; }
  .top-nav { justify-content: flex-start; gap: 2px 18px; }
  .top .email-reveal { left: 0; right: auto; }
  .menu-title { font-size: 22px; letter-spacing: 0.24em; }
  .row { font-size: 20px; min-height: 44px; }
  .meta { grid-template-columns: minmax(70px, max-content) 1fr; column-gap: 16px; font-size: 15px; }
  .codex,
  .article { padding: 120px var(--gutter) 88px; row-gap: 44px; }
  .entry { padding-bottom: 88px; }
  .entry + .entry { padding-top: 48px; }
  .log li { grid-template-columns: 1fr; row-gap: 2px; }
  .prose { font-size: 17px; }
  .prints { columns: 2 140px; column-gap: 10px; }
  /* the wide piece takes its own row; the two tall ones share the next */
  .art { flex-wrap: wrap; }
  .art:not(.art--even):not(.art--wall) figure:first-child { flex-basis: 100%; }
  /* the wall of events: one run of two to a row, each framed square so posters keep their text; the newest
     event, the ninth, takes the full width at the end */
  .events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .events .art--wall { display: contents; }
  .art--wall .print img { aspect-ratio: 1; object-fit: contain; background: rgba(236, 232, 223, 0.04); }
  .events .art--wall:last-child figure:last-child { grid-column: 1 / -1; }
  .events .art--wall:last-child figure:last-child .print img { aspect-ratio: auto; }
  /* a row of equals wraps three to a line */
  .art--even figure { flex: 0 0 calc((100% - 24px) / 3); }
  .prints .print { margin-bottom: 10px; }
  .lightbox figure { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}