@font-face { font-family: 'Alegreya'; src: url(fonts/alegreya-normal-400-700-latin.woff2) format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url(fonts/alegreya-italic-400-latin.woff2) format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alegreya SC'; src: url(fonts/alegreya-sc-normal-500-latin.woff2) format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
/* The cover's type, cut down to the capitals of KILL THIS EMPIRE (scratch/website-backdrop.py). */
@font-face { font-family: 'Metamorphous'; src: url(fonts/metamorphous-title.woff) format('woff'); font-display: block; }
/* The other tongues the title flickers through: Noto serifs cut to site.js's letters (scratch/website-tongues.py). */
@font-face { font-family: 'Tongues'; src: url(fonts/tongues-greek-cyrillic.woff) format('woff'); unicode-range: U+391,U+395,U+397,U+399,U+39A,U+39D,U+39F,U+3A1,U+3A3,U+3A4,U+3A5,U+3A9,U+411,U+415,U+418,U+419,U+41C,U+41F,U+420,U+422,U+423,U+42D,U+42E; font-display: block; }
@font-face { font-family: 'Tongues'; src: url(fonts/tongues-cjk.woff) format('woff'); unicode-range: U+3053,U+305B,U+306E,U+3092,U+4E2A,U+56FD,U+5E1D,U+6740,U+6B7B,U+6BBA,U+8FD9,U+AD6D,U+B77C,U+C5EC,U+C744,U+C774,U+C81C,U+C8FD; font-display: block; }
@font-face { font-family: 'Tongues'; src: url(fonts/tongues-hebrew.woff) format('woff'); unicode-range: U+5D0,U+5D2,U+5D4,U+5D5,U+5D9,U+5DE,U+5E4,U+5E8,U+5EA; font-display: block; }
@font-face { font-family: 'Tongues'; src: url(fonts/tongues-georgian.woff) format('woff'); unicode-range: U+10D0,U+10D4,U+10D8,U+10D9,U+10DA,U+10DB,U+10DD,U+10DE,U+10E0,U+10E1; font-display: block; }

/* The official cover's colours. */
:root {
  --black: #060203; --cream: #ecdcbe; --red: #c83630; --red-light: #e0675e; --ring: rgba(150, 20, 22, 0.8);
  --dim: rgba(236, 220, 190, 0.72); --faint: rgba(236, 220, 190, 0.5); --line: rgba(236, 220, 190, 0.3);
  --gutter: clamp(16px, 5vw, 64px);
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0L10 5L5 10L0 5Z' fill='%23ecdcbe'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--cream); font: 18px/1.55 'Alegreya', Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- The backdrop: the cover's art over the whole screen, always ---- */

/* The art is 2336x1760 and covers the whole screen. It hangs from its top, so her whole head shows
   (only the black above it and the antennae's tips are cut) and a wide screen loses the bottom of
   her collar instead; a tall screen loses the wings' ends. */
:root { --bw: max(100vw, 133svh); --bh: calc(var(--bw) * 0.75342); }
.backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--black); }
.breathe {
  position: absolute; left: 50%; width: var(--bw); aspect-ratio: 2336 / 1760; translate: -50% 0;
  top: max(calc(100svh - var(--bh)), calc(var(--bh) * -0.03));
  container-type: inline-size; transform-origin: 50% 40%;
  animation: breathe 22s ease-in-out infinite alternate;
}
.breathe img { width: 100%; height: 100%; }

/* The cover's rings, centred above her head, one ring per 7.4% of the art's width, drifting outward.
   The mask keeps them to the dark red background, as on the cover. */
@property --o { syntax: '<length>'; inherits: false; initial-value: 0px; }
.rings {
  position: absolute; inset: 0;
  background: repeating-radial-gradient(circle at 50% 27.81%,
    transparent var(--o), var(--ring) calc(var(--o) + 0.15cqw),
    var(--ring) calc(var(--o) + 2.72cqw), transparent calc(var(--o) + 2.87cqw),
    transparent calc(var(--o) + 7.426cqw));
  -webkit-mask: var(--rings-mask) 0 0 / 100% 100% no-repeat; mask: var(--rings-mask) 0 0 / 100% 100% no-repeat;
  animation: rings 11s linear infinite, fade-in 3s ease-out both;
}
@keyframes rings { to { --o: 7.426cqw; } }
@keyframes breathe { to { transform: scale(1.035); } }
@keyframes fade-in { from { opacity: 0; } }

/* Dark at the top for the links, at the sides for the title and at the foot, clear over her face. */
.veil { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6, 2, 3, 0.7), transparent 16%, transparent 76%, rgba(6, 2, 3, 0.5) 90%, rgba(6, 2, 3, 0.9)),
    linear-gradient(to right, rgba(6, 2, 3, 0.55), transparent 24%, transparent 76%, rgba(6, 2, 3, 0.55)); }

/* ---- Links along the top ---- */

.top { position: fixed; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: clamp(16px, 3vw, 40px);
  padding: 18px var(--gutter); font: 500 16px/1 'Alegreya SC', serif; letter-spacing: 0.14em; }
.top a { text-decoration: none; color: var(--dim); padding: 6px 0; transition: color 0.2s; }
.top a:hover, .top a:focus-visible { color: var(--cream); }

/* ---- The first screen ---- */

/* Only the art and the title: KILL THIS down the left, EMPIRE down the right, her face clear between.
   Each column's letters stand upright, sized so the words fit in --colh (site.js sets --n, the letter
   count, as the words change tongue). */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 96px var(--gutter) calc(28px + 1svh); }
h1 { margin: 0; font-family: 'Metamorphous', 'Tongues', serif; font-weight: 400; text-transform: uppercase; line-height: 1; }
h1 [lang]:not([lang|='en']) { text-transform: none; }
/* An upright Latin, Cyrillic, Greek or Georgian letter stands about 1.36em tall with its spacing, a Chinese,
   Japanese or Korean one 1.14em (--k); the column stays clear of the links at the top. */
.kill, .empire { position: absolute; top: 50%; translate: 0 var(--ty, -50%); writing-mode: vertical-rl; text-orientation: upright;
  white-space: nowrap; letter-spacing: 0.12em; --colh: min(76svh, 100svh - 184px); --k: 1.36;
  font-size: min(var(--base), calc(var(--colh) / (var(--n) * var(--k)))); }
h1 :is([lang|='ja'], [lang|='zh'], [lang|='ko']) { --k: 1.14; }
.kill { --n: 9; --base: min(7svh, 6vw); left: max(var(--gutter), 5vw); color: var(--cream);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8); animation: fade-in 2.5s ease-out both; }
.empire { --n: 6; --base: min(11.5svh, 9vw); right: max(var(--gutter), 5vw); color: var(--red);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7); animation: fade-in 2.5s ease-out both, glow 7s ease-in-out 2.5s infinite alternate; }
.lost .kill { --n: 7; }
.lost .empire { --n: 4; }
@keyframes glow { to { text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7), 0 0 42px rgba(200, 54, 48, 0.55); } }
/* site.js's glitch at each change of tongue: a jump sideways, the colours split, sometimes only a slice. */
h1 .off { visibility: hidden; }
h1 .glitch { translate: var(--tx, 0) var(--ty, -50%); clip-path: var(--clip, none);
  filter: drop-shadow(var(--gx) 0 0 rgba(255, 30, 70, 0.85)) drop-shadow(calc(var(--gx) * -1) 0 0 rgba(40, 220, 255, 0.75)); }

.tagline { margin: 0 0 14px; font-style: italic; font-size: clamp(18px, 1.6vw, 23px); color: var(--cream); text-shadow: 0 2px 12px #000; }
.under { margin: 0; font: 500 14px/1.4 'Alegreya SC', serif; letter-spacing: 0.2em; color: var(--dim); }
/* Below the first screen. */
.intro { padding: 16svh var(--gutter) 0; text-align: center; }
.intro .tagline { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.3; }

/* A slow nudge to scroll. */
.cue { position: absolute; bottom: 0; left: 50%; width: 44px; height: 40px; margin-left: -22px; }
.cue::before { content: ''; position: absolute; left: 15px; top: 6px; width: 14px; height: 14px;
  border-right: 1px solid var(--faint); border-bottom: 1px solid var(--faint); rotate: 45deg; animation: cue 2.8s ease-in-out infinite; }
@keyframes cue { 50% { translate: 0 6px; opacity: 0.4; } }

/* ---- Buttons: a framed plate with a diamond on each corner ---- */

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 38px;
  font: 500 19px/1 'Alegreya SC', serif; letter-spacing: 0.14em; color: var(--cream); text-decoration: none;
  background: linear-gradient(#b8302b, #7a1416); border: 1px solid rgba(236, 220, 190, 0.6);
  box-shadow: inset 0 0 0 3px rgba(6, 2, 3, 0.35), 0 10px 34px rgba(0, 0, 0, 0.55); }
.btn::before { content: ''; position: absolute; inset: -5px; pointer-events: none;
  background: var(--diamond) 0 0 / 10px no-repeat, var(--diamond) 100% 0 / 10px no-repeat,
    var(--diamond) 0 100% / 10px no-repeat, var(--diamond) 100% 100% / 10px no-repeat; }
.btn-quiet { background: rgba(6, 2, 3, 0.65); }
a.btn:hover, a.btn:focus-visible { filter: brightness(1.15); }

/* ---- Sections over the backdrop, which darkens behind them ---- */

main { background: linear-gradient(to bottom, transparent, rgba(6, 2, 3, 0.8) 40svh); }
section { padding: 14svh var(--gutter); text-align: center; }
h2 { margin: 0; font: 500 clamp(30px, 4vw, 52px)/1.1 'Alegreya SC', serif; letter-spacing: 0.06em; }
h2::after, .who h3::after { content: ''; display: block; width: 180px; height: 10px; margin: 18px auto 0;
  background: var(--diamond) center / 10px no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.lead { max-width: 34em; margin: 20px auto 0; color: var(--dim); font-size: clamp(18px, 1.4vw, 21px); }

/* How it plays: clips from the game, each beside its words, sides taking turns. */
.clips { max-width: 1240px; margin: 8svh auto 0; display: grid; gap: clamp(56px, 11svh, 120px); }
.clip { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: clamp(24px, 4vw, 60px); margin: 0; text-align: left; }
.clip:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.clip:nth-child(even) video { order: 2; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--black);
  border: 1px solid rgba(236, 220, 190, 0.22); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 6px rgba(6, 2, 3, 0.6); }
.clip h3 { margin: 0 0 16px; font: 500 clamp(28px, 3vw, 42px)/1.05 'Alegreya SC', serif; letter-spacing: 0.04em; }
.clip h3::after { content: ''; display: block; width: 120px; height: 10px; margin: 14px 0 0;
  background: var(--diamond) left / 10px no-repeat, linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.clip p { margin: 0; max-width: 22em; font-size: clamp(18px, 1.4vw, 21px); color: var(--dim); }

/* The company: faces to pick, then one person large. */
.pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6svh auto 0; max-width: 720px; }
.pick[hidden] { display: none; }
.pick button { width: 64px; height: 64px; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: radial-gradient(closest-side, rgba(150, 20, 22, 0.5), rgba(6, 2, 3, 0.8));
  transition: border-color 0.2s, box-shadow 0.2s; }
.pick img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; transform: scale(1.5); transform-origin: 50% 10%; }
.pick button:hover, .pick button:focus-visible { border-color: var(--cream); outline: none; }
.pick button[aria-selected='true'] { border: 2px solid var(--red); box-shadow: 0 0 0 4px rgba(200, 54, 48, 0.3); }

.show { max-width: 1100px; margin: 5svh auto 0; display: grid; gap: 10svh; }
.show.one { gap: 0; }
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(24px, 5vw, 72px); text-align: left; }
.who[hidden] { display: none; }
/* One at a time, all in the same place, so the block keeps the height of the tallest. */
.show.one > .who { grid-area: 1 / 1; }
.show.one > .who[hidden] { display: grid; visibility: hidden; }
.who img { justify-self: end; width: 100%; max-width: 420px; height: auto;
  background: radial-gradient(closest-side, rgba(150, 20, 22, 0.45), transparent);
  -webkit-mask: linear-gradient(to bottom, #000 80%, transparent); mask: linear-gradient(to bottom, #000 80%, transparent);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6)); }
.who .title { margin: 0; font: 500 16px/1.3 'Alegreya SC', serif; letter-spacing: 0.2em; color: var(--red-light); }
.who h3 { margin: 10px 0 22px; font: 500 clamp(38px, 5vw, 70px)/1.02 'Alegreya SC', serif; letter-spacing: 0.03em; }
.who h3::after { margin-left: 0; }
.who p:last-child { margin: 0; max-width: 24em; font-style: italic; font-size: clamp(19px, 1.6vw, 23px); color: var(--dim); }
.one .who:not([hidden]) img { animation: rise 0.9s ease-out both; }
.one .who:not([hidden]) .who-text { animation: rise 0.9s 0.12s ease-out both; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }

/* Swear on it. */
.follow { padding-bottom: 12svh; }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 38px 0 0; }

footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px var(--gutter) 44px;
  background: rgba(6, 2, 3, 0.94); border-top: 1px solid rgba(236, 220, 190, 0.12); text-align: center; }
footer .small { margin: 6px 0 0; font-size: 14px; color: var(--faint); }

:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }

/* ---- Narrow screens ---- */

@media (max-width: 760px) {
  /* Too narrow for columns beside her face: the title lies across the foot, KILL THIS over EMPIRE. */
  .kill, .empire { position: static; display: block; translate: none; writing-mode: horizontal-tb; --ty: 0;
    --colh: calc(100vw - 2 * var(--gutter)); --k: 1; }
  .kill { --base: 22px; letter-spacing: 0.45em; padding-left: 0.45em; margin-bottom: 0.35em; }
  .empire { --base: 12vw; letter-spacing: 0.05em; padding-left: 0.05em; }
  .lost h1 { margin-bottom: 18px; }
  .who { grid-template-columns: 1fr; text-align: center; gap: 8px; }
  .who img { justify-self: center; max-width: min(300px, 78vw); }
  .who h3::after { margin-left: auto; }
  .who p:last-child { margin: 0 auto; }
  .clip, .clip:nth-child(even) { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .clip:nth-child(even) video { order: 0; }
  .clip h3::after { margin: 14px auto 0; background-position: center, center; }
  .clip p { margin: 0 auto; }
}
@media (max-width: 520px) {
  .top { justify-content: center; }
  .pick { gap: 8px; }
  .pick button { width: 52px; height: 52px; }
  .btn { padding: 0 26px; font-size: 17px; }
  .row { gap: 20px; }
}

/* Everything still for those who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rings { --o: 0.42cqw; }
}
/* Nothing in the footer until P4 or P7 goes in. */
footer:not(:has(*)) { display: none; }