/* Averse Lands website: the game's Teal Trim kit (the players' vote on /ui-vote, B7, 2026-10-14; Prototype/index.html
   .tt-* and the character window, js/charwin.js), drawn on the web pages. The kit pieces are copies of the game's
   (assets/ui/teal/*.webp): the frame and the tabs are border-images, so a window of any size takes the same painting. */
@font-face { font-family: 'IM Fell English SC'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-sc-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/im-fell-english-400-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/alegreya-sans-400-latin.woff2) format('woff2'); }
/* IM Fell's numerals are old-style ("0" reads "o"): as in the game, digits come from the UI face */
@font-face { font-family: 'AL Numerals'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/alegreya-sans-500-latin.woff2) format('woff2'); unicode-range: U+0030-0039; }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/alegreya-sans-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/alegreya-sans-700-latin.woff2) format('woff2'); }
/* the kit's heading face (the game's --heading): Cinzel 600, latin */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/cinzel-600-latin.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --ink: #120f0c;
  --ink-2: #1c1713;
  --bronze: #9c7a47;
  --bronze-hi: #d8b676;
  --bronze-lo: #5a4326;
  --parch: #ece1c8;
  --cream: #f1e6cc;
  --text: #e9e2d2;
  --text-2: #c9c2b0;
  --muted: #9da7a2;
  --gold: #e2c27a;
  --teal: #5f9e94;
  --teal-hi: #6fc4b6;
  --rim: #2f4a46;
  --blood: #c0392b;
  --ok: #7ed36a;
  --display: 'AL Numerals', 'IM Fell English SC', 'Palatino Linotype', Palatino, Georgia, serif;
  --heading: 'AL Numerals', 'Cinzel', 'IM Fell English SC', 'Palatino Linotype', Palatino, Georgia, serif;
  --lore: 'AL Numerals', 'IM Fell English', 'Palatino Linotype', Palatino, Georgia, serif;
  --ui: 'AL Numerals', 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
  /* the kit's pieces */
  --kit-frame: url(ui/teal/frame.webp);
  --kit-tab: url(ui/teal/tab.webp);
  --kit-tab-on: url(ui/teal/tab_on.webp);
  --kit-red: url(ui/teal/btn_red.webp);
  --kit-dark: url(ui/teal/btn_dark.webp);
  --kit-slot: url(ui/teal/slot.webp);
  --kit-ring: url(ui/teal/ring.webp);
  --kit-divider: url(ui/teal/divider.webp);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  background: var(--ink); color: var(--text); font: 17px/1.55 var(--ui);
}
a { color: var(--teal-hi); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ---------- header / footer ---------- */
.top {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.92), rgba(10, 8, 6, 0.55));
  border-bottom: 1px solid rgba(95, 158, 148, 0.28);
}
.brand { display: block; line-height: 0; }
.brand img { width: clamp(118px, 22vw, 168px); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7)); }
.nav { display: flex; align-items: center; gap: clamp(8px, 2vw, 18px); font-size: 15.5px; }
.nav a:not(.btn) { color: var(--cream); text-decoration: none; }
.nav a:not(.btn):hover { color: var(--gold); }
/* the Play link, as the kit's red button */
.nav a.play {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; color: #fff1e0;
  border: 7px solid transparent; border-image: var(--kit-red) 18 fill / 7px stretch;
  font: 600 14px/1 var(--heading); letter-spacing: 0.05em;
}
.nav a.play:hover { color: #fff; filter: brightness(1.15); }
/* the character-name field's wrapper takes no box of its own: its label and hint sit in the form's grid */
#char-block { display: contents; }
.nav .who { color: var(--muted); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- the site header on narrow phones ----------
   Under 400 px the nav (Updates, Log in, Create account) would wrap onto two lines. The current page's own link goes, the rest tighten up. */
.nav a { white-space: nowrap; }
@media (max-width: 520px) { .nav { font-size: 14px; gap: 10px; } .nav .who { display: none; } .nav a.play { min-height: 30px; padding: 0 10px; font-size: 13px; } }
@media (max-width: 400px) {
  .top { gap: 8px; }
  .nav { gap: 12px; font-size: 15px; }
  .nav a[aria-current="page"] { display: none; }
  .brand img { width: 100px; }
  .nav .btn.small { padding: 6px 10px; }
  .nav a:not(.btn) { padding: 10px 2px; }
}
/* Ranks (the PvP rankings) and Database are in the nav where the line has room; on a phone they give way, so the nav
   keeps its one line, and the footer's links are the way there */
@media (max-width: 520px) { .nav a[href="/ranks"], .nav a[href="/database"] { display: none; } }
.foot {
  margin-top: auto; padding: 22px clamp(16px, 4vw, 40px); text-align: center; font-size: 14px; color: var(--muted);
  border-top: 1px solid rgba(95, 158, 148, 0.2); background: rgba(10, 8, 6, 0.6);
}
.foot a { color: var(--muted); }

/* ---------- buttons: the kit's dark and red buttons (.tt-mini / .tt-red in the game) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px;
  font: 500 15.5px/1 var(--ui); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  padding: 4px 16px; color: #e6dcc4;
  background: none; border: 6px solid transparent; border-image: var(--kit-dark) 12 fill / 6px stretch;
}
.btn:hover { color: #fff; filter: brightness(1.2); }
.btn:disabled { opacity: 0.45; cursor: progress; filter: none; }
.btn.primary {
  min-height: 48px; padding: 4px 24px; color: #fff1e0;
  font: 600 18px/1 var(--heading); letter-spacing: 0.05em;
  border: 9px solid transparent; border-image: var(--kit-red) 18 fill / 9px stretch;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}
.btn.primary:hover { filter: brightness(1.15) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.btn.ghost { color: var(--text-2); }
.btn.small { min-height: 32px; padding: 2px 12px; font-size: 14px; }
.btn.danger { color: #fff1e0; border: 6px solid transparent; border-image: var(--kit-red) 18 fill / 6px stretch; }

/* ---------- landing ---------- */
/* The paintings (Tools/scenes_to_web.py) are AVIF with a WebP fallback. Each background is declared twice: a browser
   without image-set() type() drops the second declaration and keeps the WebP one. No var() in them, or the second
   would always win and fail at computed-value time instead: their colour layer is --ink written out (#120f0c). */
.hero {
  position: relative; flex: 1; display: grid; place-items: center; padding: clamp(28px, 6vw, 64px) 16px;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(18, 15, 12, 0.5), rgba(12, 9, 7, 0.1) 45%, rgba(12, 9, 7, 0.75) 85%),
    linear-gradient(180deg, rgba(12, 9, 7, 0.45), rgba(12, 9, 7, 0) 35%, rgba(12, 9, 7, 0.85)),
    url(hero-tyt.webp) center 35% / cover no-repeat,
    #120f0c;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(18, 15, 12, 0.5), rgba(12, 9, 7, 0.1) 45%, rgba(12, 9, 7, 0.75) 85%),
    linear-gradient(180deg, rgba(12, 9, 7, 0.45), rgba(12, 9, 7, 0) 35%, rgba(12, 9, 7, 0.85)),
    image-set(url(hero-tyt.avif) type('image/avif'), url(hero-tyt.webp) type('image/webp')) center 35% / cover no-repeat,
    #120f0c;
}
@media (max-width: 720px) {
  .hero {
    background:
      radial-gradient(ellipse at 50% 45%, rgba(18, 15, 12, 0.55), rgba(12, 9, 7, 0.15) 45%, rgba(12, 9, 7, 0.8) 85%),
      linear-gradient(180deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0.05) 35%, rgba(12, 9, 7, 0.88)),
      url(hero-tyt-sm.webp) center 35% / cover no-repeat,
      #120f0c;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(18, 15, 12, 0.55), rgba(12, 9, 7, 0.15) 45%, rgba(12, 9, 7, 0.8) 85%),
      linear-gradient(180deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0.05) 35%, rgba(12, 9, 7, 0.88)),
      image-set(url(hero-tyt-sm.avif) type('image/avif'), url(hero-tyt-sm.webp) type('image/webp')) center 35% / cover no-repeat,
      #120f0c;
  }
}
.hero { overflow: hidden; }
.hero-inner { position: relative; z-index: 1; width: min(760px, 100%); text-align: center; }
/* the logo; dust.js draws over it (the image stays for layout and alt text) */
.logo-wrap { position: relative; display: inline-block; width: min(640px, 92%); line-height: 0; }
.logo-wrap img { width: 100%; }
/* dust in the light (dust.js): sun shafts and the dust in them over the whole hero, and the logo lit by the shafts */
.dust-air { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
.logo-gleam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.8)); }
.logo-wrap.gleaming img { visibility: hidden; }
.eyebrow { margin: 0; font: 600 12.5px/1.4 var(--heading); letter-spacing: 0.32em; text-transform: uppercase; color: var(--teal-hi); text-shadow: 0 1px 2px #000; }
.hero h1 { margin: 10px auto 6px; line-height: 0; }
.hero h1 img { filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.8)); }
.lead { margin: 4px 0 0; font: italic 21px/1.4 var(--lore); color: #d9c8a3; text-shadow: 0 1px 3px #000; }
.sub { margin: 14px auto 0; max-width: 46ch; color: var(--cream); text-shadow: 0 1px 3px #000; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; }
.welcome-back { margin-top: 22px; color: var(--muted); }
/* the Updates teaser under the buttons */
.news { margin: 22px auto 0; font-size: 15.5px; }
.news a { display: inline-block; max-width: 100%; line-height: 1.35; color: #f0dba8; text-decoration: none; padding: 7px 16px; border: 1px solid rgba(216, 182, 118, 0.45); border-radius: 18px; background: rgba(10, 8, 6, 0.5); text-shadow: 0 1px 3px #000; }
.news a:hover { color: var(--gold); border-color: var(--bronze-hi); }

/* ---------- panels and forms: every panel is a kit frame ---------- */
.page {
  flex: 1; padding: clamp(24px, 5vw, 56px) 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(47, 74, 70, 0.35), rgba(10, 8, 6, 0) 60%), var(--ink);
}
/* log in, sign up, reset: the painted valley, framed by the town (left) and the ruins (right), with the form in the
   open middle */
.page.scene {
  display: grid; align-content: center;
  background:
    linear-gradient(180deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0) 25%, rgba(12, 9, 7, 0) 70%, rgba(12, 9, 7, 0.65)),
    url(login-bg.webp) center / cover no-repeat,
    #120f0c;
  background:
    linear-gradient(180deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0) 25%, rgba(12, 9, 7, 0) 70%, rgba(12, 9, 7, 0.65)),
    image-set(url(login-bg.avif) type('image/avif'), url(login-bg.webp) type('image/webp')) center / cover no-repeat,
    #120f0c;
}
@media (max-width: 720px) {
  .page.scene {
    background:
      linear-gradient(180deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0) 25%, rgba(12, 9, 7, 0) 70%, rgba(12, 9, 7, 0.65)),
      url(login-bg-sm.webp) center / cover no-repeat,
      #120f0c;
    background:
      linear-gradient(180deg, rgba(12, 9, 7, 0.5), rgba(12, 9, 7, 0) 25%, rgba(12, 9, 7, 0) 70%, rgba(12, 9, 7, 0.65)),
      image-set(url(login-bg-sm.avif) type('image/avif'), url(login-bg-sm.webp) type('image/webp')) center / cover no-repeat,
      #120f0c;
  }
}
.stack { width: min(480px, 100%); margin: 0 auto; display: grid; gap: 22px; }
.stack.wide { width: min(740px, 100%); }
/* the frame: its painted edge is 120 px of the 467 px picture, drawn --fw wide; the middle fills the panel */
.panel {
  --fw: clamp(16px, 3.2vw, 28px);
  position: relative; padding: clamp(10px, 2vw, 16px) clamp(8px, 2vw, 18px);
  border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch; background: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65));
}
.panel h1, .panel h2 { margin: 0 0 16px; font: 600 24px/1.15 var(--heading); color: var(--gold); letter-spacing: 0.04em; }
/* the kit's divider under a heading's words (it was drawn across the whole heading, its line through the words) */
.panel h1::after, .panel h2::after {
  content: ""; display: block; width: min(100%, 360px); aspect-ratio: 640 / 30; margin-top: 8px;
  background: var(--kit-divider) left center / 100% 100% no-repeat;
}
.panel h2 { font-size: 19px; }
.muted { color: var(--muted); margin: 0 0 18px; }
.panel > .muted:last-child { margin-bottom: 0; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-weight: 500; font-size: 15.5px; color: var(--text-2); }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: 11px 12px; font: 17px var(--ui); color: var(--cream);
  background: rgba(8, 10, 10, 0.78); border: 1px solid var(--rim); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(95, 158, 148, 0.16);
}
input::placeholder { color: #6f7a77; }
input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(226, 194, 122, 0.18); }
input[aria-invalid=true] { border-color: var(--blood); }
.hint { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: #b3261e; flex: none; }
.error, .ok {
  padding: 10px 12px; border-radius: 3px; font-size: 15px;
}
.error.spaced, .ok.spaced { margin: 0 0 14px; }
.step { margin: 0 0 8px; font: 600 13px/1.2 var(--heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.error { color: #ffd2c8; background: rgba(192, 57, 43, 0.14); border: 1px solid rgba(192, 57, 43, 0.55); }
.ok { color: #d6f5cc; background: rgba(126, 211, 106, 0.1); border: 1px solid rgba(126, 211, 106, 0.4); }
.progress { display: grid; gap: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.progress .bar { height: 6px; border: 1px solid #6b5a33; border-radius: 2px; background: rgba(0, 0, 0, 0.6); position: relative; overflow: hidden; }
.progress .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#f6d77a, #c08f2c 60%, #8a6424); transition: width 0.2s; }
.alt { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--muted); }
.note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; }

/* ---------- account: one 1120 width top to bottom (the website layout rule, 2026-11-11) ----------
   The welcome bar (name, dates, the world, Log out), the character window, then Password and Signed-in devices as two
   equal halves; on a phone everything stacks. */
.acct { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 24px; }
.acct > * { min-width: 0; }
.acct-hello { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.acct-who { display: grid; gap: 8px; min-width: 0; }
.acct-who h1 { margin-bottom: 8px; }
.acct-who .kv { margin: 0; }
.acct-who .muted { margin: 0; }
.acct-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.acct-halves > .panel { display: grid; gap: 16px; align-content: start; min-width: 0; }
.acct-halves .panel h2, .acct-halves .muted { margin: 0; }
.acct-halves .list { margin: 0; }
@media (max-width: 760px) {
  .acct-hello { grid-template-columns: minmax(0, 1fr); }
  .acct-hello > .btn { justify-self: stretch; }
  .acct-halves { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- account rows ---------- */
.kv { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--muted); font-size: 15px; }
.kv b { color: var(--cream); font-weight: 500; }
/* rows as the game's settings rows (.esc-row): a teal rim on dark */
.list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(95, 158, 148, 0.22); border-radius: 3px;
}
.list .name { font: 600 16px/1.3 var(--heading); color: var(--cream); letter-spacing: 0.02em; }
.list .meta { font-size: 14px; color: var(--muted); }
.list .tag { font: 600 11.5px/1 var(--heading); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-hi); }
.empty { margin: 12px 0 0; padding: 14px; text-align: center; color: var(--muted); border: 1px dashed rgba(95, 158, 148, 0.45); border-radius: 3px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.row .muted, .row h2 { margin: 0; }

/* ---------- the character window: the game's own (js/charwin.js), read-only (sheet.js) ---------- */
.stack.wide { width: min(1120px, 100%); }
.stack.wide > .panel { width: min(740px, 100%); justify-self: center; }
.sheet-panel { width: 100%; }
.sheet-panel .empty { width: min(740px, 100%); margin: 0 auto; }
.acct .sheet-panel .empty { width: 100%; }
/* ?v=39: the atlas grew to 39 rows; the query makes browsers holding a day-cached older picture fetch the new one */
.ic { display: block; background: url(ui/icons.webp?v=50) no-repeat; background-size: 600% 5000%; pointer-events: none; }
.cw {
  --fw: clamp(16px, 3.4vw, 34px);
  position: relative; container-type: inline-size; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(4px, 1.4vw, 12px) clamp(2px, 1.2vw, 10px) clamp(6px, 1.4vw, 10px);
  border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch; background: none;
  color: var(--text); font: 15px/1.35 var(--ui); user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65));
}
.cw, .cw * { box-sizing: border-box; }
/* the kit's tab (.tt-tab): a dark plate, lit red when on */
.tt-tab {
  position: relative; min-width: 0; padding: 4px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 7px solid transparent; border-image: var(--kit-tab) 14 fill / 7px stretch; background: none;
  color: var(--text-2); font: 400 15px/1.1 var(--display); letter-spacing: 0.04em;
}
.tt-tab.on, .tt-tab[aria-selected='true'] { border-image-source: var(--kit-tab-on); color: #fff3df; }
.tt-tab:not(.on):not([aria-selected='true']):hover { color: #fff; filter: brightness(1.18); }
.tt-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* the top row: one tab a character (the game's Character · Spells · Journal row), the slots on the right */
.cw-top { display: flex; align-items: center; gap: 6px; padding: 0 2px; }
.cw-top .char-tab { flex: 0 1 auto; max-width: 48%; font-size: 15.5px; padding: 5px 12px; }
.cw-top .char-tab small { font-size: 12.5px; color: inherit; opacity: 0.75; margin-left: 6px; letter-spacing: 0.02em; }
.char-tab .cn-first { display: none; }
/* a phone: each character tab is the first name over the level, the three tabs equal, the slot count in the welcome bar */
@media (max-width: 560px) {
  .cw-top .char-tab { flex: 1 1 0; max-width: none; text-align: center; padding: 4px 6px; }
  .char-tab .cn-full { display: none; }
  .char-tab .cn-first { display: block; }
  .cw-top .char-tab small { display: block; margin: 2px 0 0; }
  .cw-top .cw-slots { display: none; }
}
.cw-slots { margin-left: auto; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
/* the header: the portrait in its ring, name, level and class, the experience bar and its %, the moral standing */
.cw-head { display: flex; align-items: center; gap: 16px; padding: 4px 8px 2px; }
.cw-port { position: relative; flex: 0 0 84px; height: 84px; display: grid; place-items: center; }
.cw-port::after { content: ''; position: absolute; inset: -8px; background: var(--kit-ring) center / contain no-repeat; pointer-events: none; }
.cw-face { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 40% 35%, #1d2a28, #070a0a 70%); }
.cw-who { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cw-name { font: 600 23px/1.1 var(--heading); letter-spacing: 0.03em; color: var(--cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-lv { font: 400 15px/1.2 var(--ui); color: #d9d2c0; }
.cw-xp { display: flex; align-items: center; gap: 12px; }
.cw-xpbar { flex: 1; height: 12px; border: 1px solid #6b5a33; border-radius: 2px; background: rgba(0, 0, 0, 0.6); overflow: hidden; }
.cw-xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(#f6d77a, #c08f2c 60%, #8a6424); box-shadow: 0 0 6px rgba(243, 210, 122, 0.45); }
.cw-xp b { min-width: 40px; font: 600 15px/1 var(--ui); color: var(--gold); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.cw-moral { display: flex; align-items: center; gap: 10px; font: 400 15px/1.2 var(--ui); color: #d9d2c0; }
.cw-moral b { font-weight: 500; color: var(--mc, #c9c2b0); }
.cw-medal { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--mc, #c9c2b0), #2a2418 72%); box-shadow: 0 0 0 2px #6b5a33, 0 1px 3px #000; }
/* Gear / Details: tabs on a narrow page, both pages side by side on a wide one */
.cw-sub { display: flex; gap: 12px; padding: 0 4px; }
.cw-sub .tt-tab { flex: 1; padding: 5px 8px; font-size: 16px; text-align: center; }
.cw-pages { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 4px; }
.cw-pages > * { min-width: 0; }
.pg-h { display: none; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--rim); font: 600 17px/1.1 var(--heading); letter-spacing: 0.03em; color: var(--gold); }
@media (max-width: 899.9px) {
  .cw[data-sub='gear'] .st, .cw[data-sub='details'] .inv { display: none; }
}
@media (min-width: 900px) {
  .cw-sub { display: none; }
  .cw-pages { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .pg-h { display: block; }
}
@media (max-width: 560px) {
  .cw-head { gap: 12px; }
  .cw-port { flex-basis: 64px; height: 64px; } .cw-face { width: 56px; height: 56px; } .cw-name { font-size: 20px; }
  .cw-top .char-tab { font-size: 14px; padding: 4px 8px; }
}

/* Gear (the game's inventory.js): the ten slots in two columns beside the figure, AT · DF · MA · MD in a row, the bag's
   filter tabs, all 30 cells ten to a row, where the character is and the Barr at the foot */
.inv { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }
.inv-doll { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
.inv-col { --slot: clamp(36px, 11cqw, 60px); display: grid; grid-auto-rows: var(--slot); gap: 6px; align-content: center; }
.inv-slot, .inv-cell {
  position: relative; display: grid; place-items: center; padding: 0; margin: 0; border: 0; color: inherit; border-radius: 0.4cqw;
  background: var(--kit-slot) center / 100% 100% no-repeat; transition: box-shadow 0.15s;
}
.inv-slot { width: var(--slot); height: var(--slot); }
.inv-alcove { position: relative; min-height: 0; }
/* the figure's niche (the game's .inv-view: a live render; here the pre-rendered figure, Tools/render_portraits.py) */
.inv-view {
  position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: 3 / 4; max-width: 100%; transform: translateX(-50%);
  border-radius: 50% / 42%; overflow: hidden; clip-path: ellipse(50% 50% at 50% 50%);
  background: radial-gradient(ellipse at 50% 72%, rgba(95, 158, 148, 0.2), rgba(8, 10, 10, 0.9) 70%);
  box-shadow: inset 0 0 0 0.35cqw rgba(95, 158, 148, 0.4), inset 0 0 3cqw rgba(0, 0, 0, 0.8);
}
.inv-view img.figure { position: absolute; left: 50%; bottom: 1%; height: 97%; width: auto; max-width: none; transform: translateX(-50%); }
.inv-view img.face { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; transform: translate(-50%, -50%); box-shadow: 0 0 0 0.4cqw rgba(95, 158, 148, 0.45), 0 1cqw 3cqw rgba(0, 0, 0, 0.8); }
.inv-slot .ic, .inv-cell .ic { width: 86%; height: 86%; filter: drop-shadow(0 0.3cqw 0.35cqw rgba(0, 0, 0, 0.85)); }
.inv-empty { color: rgba(216, 182, 118, 0.16); display: grid; place-items: center; width: 42%; }
.inv-empty svg { width: 100%; height: auto; display: block; }
.inv-glyph { color: #c8b27a; width: 50%; display: grid; place-items: center; font: 700 2.6cqw var(--ui); }
/* the copy's tier (the game's toneCell): Basic cells are plain; Uncommon, Rare and Epic get a thin inner border and a
   soft inner glow in the tier's colour (--tone) */
.inv-slot.filled, .inv-cell.filled { box-shadow: var(--tier-glow, none); }
.inv-slot[data-rarity='uncommon'], .inv-cell[data-rarity='uncommon'], .inv-slot[data-rarity='rare'], .inv-cell[data-rarity='rare'],
.inv-slot[data-rarity='epic'], .inv-cell[data-rarity='epic'] {
  --tier-glow: inset 0 0 0 0.28cqw color-mix(in srgb, var(--tone) 80%, transparent), inset 0 0 1.8cqw color-mix(in srgb, var(--tone) 34%, transparent);
}
.inv-slot.filled:hover, .inv-cell.filled:hover { box-shadow: inset 0 0 1.8cqw rgba(226, 189, 88, 0.35), 0 0 0 0.3cqw rgba(226, 189, 88, 0.7), 0 0 1.6cqw rgba(226, 189, 88, 0.35); }
/* the tier's gem top-left, the material tier's painted shield bottom-right, the count bottom-left, a hone's +N top-right */
.inv-gem { position: absolute; left: 6%; top: 6%; width: 11%; aspect-ratio: 1; color: var(--tone); pointer-events: none; filter: drop-shadow(0 0 0.25cqw rgba(0, 0, 0, 0.85)); }
.inv-gem[data-g='rare'], .inv-gem[data-g='epic'] { width: 14%; left: 5%; top: 5%; }
.inv-gem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.inv-tier { position: absolute; right: 3%; bottom: 3%; width: 30%; aspect-ratio: 1; background: url(ui/tier_badges.webp) 0 0 / 600% 100% no-repeat; pointer-events: none; filter: drop-shadow(0 0.2cqw 0.3cqw rgba(0, 0, 0, 0.85)); }
.inv-n, .inv-hone { position: absolute; font: 700 2.3cqw/1 var(--ui); color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; font-variant-numeric: tabular-nums; pointer-events: none; }
.inv-n { left: 7%; bottom: 4%; }
.inv-hone { right: 7%; top: 5%; color: #9fe0ff; }
/* dark plaques with a teal rim: AT · DF · MA · MD, and the Barr */
.inv-plaques { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.inv-plaque, .inv-barr { background: rgba(10, 13, 12, 0.82); border: 1px solid var(--rim); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(95, 158, 148, 0.18); }
.inv-plaque { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: var(--parch); }
.inv-plaque span { font: 400 15px/1 var(--display); color: #e7cf98; letter-spacing: 0.03em; }
.inv-plaque b { font: 500 15.5px/1 var(--ui); color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.inv-filter { display: flex; gap: 5px; }
.inv-f { flex: 1; min-height: 32px; padding: 2px 4px; font-size: 14px; text-align: center; }
.inv-bag { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.inv-cell { aspect-ratio: 1; }
.inv-cell.inv-out { opacity: 0.22; }
.inv-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.inv-where { padding: 0 4px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-where.dead { color: #ff9a7a; }
.inv-barr { height: 36px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px; font: 500 17px/1 var(--ui); color: #f2dca6; text-shadow: 0 1px 2px #000; font-variant-numeric: lining-nums tabular-nums; }
.inv-barr span { font: 400 15px/1 var(--ui); color: var(--text-2); }
.inv-barr .coin { height: 22px; aspect-ratio: 1; filter: drop-shadow(0 1px 2px #000); }
@media (max-width: 420px) {
  .inv-plaque, .inv-barr { padding: 0 6px; } .inv-plaque span, .inv-plaque b { font-size: 13px; }
  .inv-f { font-size: 12px; padding: 1px 2px; }
}

/* Details (the game's status.js, Status A): Attributes with their bars beside Combat, then Weapon skills, Magic and
   Crafting, each row its name, its value to one decimal and a bar against the best of its section */
.st { container-type: inline-size; }
.st-a { display: grid; gap: 3px; padding: 0 4px 6px; }
.st-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; }
.st-cols section { display: grid; align-content: start; gap: 3px; min-width: 0; }
@container (max-width: 430px) { .st-cols { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* Weapon skills | Magic and Crafting: two columns from 470 px, each row its name, value and a shorter bar */
.st-skills { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 8px; }
.st-skills .st-skill { grid-template-columns: minmax(0, 1fr) 34px 52px; gap: 8px; }
.st-skills section > .st-h ~ .st-h { margin-top: 12px; }
@container (max-width: 470px) {
  .st-skills { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .st-skills .st-skill { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.3fr); gap: 12px; }
  .st-skills section > .st-h { margin-top: 8px; }
}
.st-h { margin: 8px 0 4px; padding-bottom: 5px; border-bottom: 1px solid var(--rim); font: 600 17px/1.1 var(--heading); letter-spacing: 0.03em; color: var(--gold); }
.st-cols .st-h { margin-top: 0; }
.st-row { display: grid; align-items: center; gap: 12px; min-height: 25px; padding: 1px 6px; border-radius: 2px; }
.st-row:hover, .cw-head [data-tip]:hover { background: rgba(255, 255, 255, 0.045); }
.st-attr { grid-template-columns: 38px minmax(0, 1fr) 42px; }
.st-cmb { grid-template-columns: minmax(0, 1fr) auto; }
.st-skill { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1.3fr); }
.st-l { font: 400 15px/1.2 var(--ui); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-n { font: 500 15px/1.2 var(--ui); color: var(--gold); text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.st-n.dim { color: var(--muted); }
.st-bar { height: 8px; border: 1px solid #4a4433; border-radius: 1px; background: rgba(0, 0, 0, 0.6); overflow: hidden; }
.st-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#f6d77a, #c08f2c 60%, #8a6424); }

/* the tooltip (the game's .skin-tip): a small kit frame beside the line you point at */
.tip {
  position: fixed; z-index: 30; width: 270px; max-width: calc(100vw - 16px); padding: 10px 12px 9px; pointer-events: none;
  font-size: 13.5px; line-height: 1.38; color: var(--parch); font-variant-numeric: lining-nums;
  border: 14px solid transparent; border-image: var(--kit-frame) 120 fill / 14px stretch; background: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7));
}
.tip b { display: block; font: 400 18px/1.15 var(--display); color: #f1ddb0; }
.tip em { display: block; font-style: normal; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 2px 0 5px; }
.tip p { margin: 6px 0 4px; font: 14.5px/1.35 var(--lore); color: #d8ccb0; }
.tip .row { display: flex; justify-content: space-between; gap: 12px; }
.tip .row span:last-child { font-variant-numeric: tabular-nums; color: var(--parch); }
.tip .dim { color: #8f8470; } .tip .good { color: #9fd67c; }
.tip .ladder { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 6px; font-size: 12.5px; }
.tip .ladder u { text-decoration: underline; }

/* ---------- rankings (/ranks, ranks.js) ----------
   Two boards behind a row of the kit's tabs (.rk-boards), Level and PvP. The PvP board's bracket tabs are the kit's tabs
   too; the tables are plain text on the frame, their heads ruled as the game's status headings (.st-h). On a phone the
   PvP table's Rank and Weapon columns fold under the name, and Kills and Deaths shorten to K and D; the Level table's
   two weapon columns fold under the name the same way, icons and names. */
.stack.wide > .panel.rk-panel { width: min(860px, 100%); }
.rk-boards { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rk-boards .tt-tab { flex: 0 1 auto; padding: 5px 22px; font-size: 17px; }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.rk-tabs .tt-tab { flex: 0 1 auto; padding: 4px 12px; font-size: 15.5px; }
.rk-tabs .tt-tab small { margin-left: 7px; font: 400 12.5px/1 var(--ui); color: inherit; opacity: 0.75; font-variant-numeric: lining-nums tabular-nums; }
.rk-panel .error { margin: 0 0 12px; }
.rk-board[aria-busy='true'] .rk-wrap { opacity: 0.55; transition: opacity 0.2s 0.15s; }
.rk-wrap { overflow-x: auto; }
.rk { width: 100%; border-collapse: collapse; font: 15px/1.3 var(--ui); color: var(--text-2); }
.rk-caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rk th {
  padding: 2px 10px 7px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--rim);
  font: 600 13px/1.1 var(--heading); letter-spacing: 0.08em; color: var(--gold);
}
.rk td { padding: 8px 10px; vertical-align: middle; }
.rk tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.022); }
.rk tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.rk .n { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.rk .pos { width: 1%; padding-left: 4px; color: var(--muted); }
.rk tr.podium .pos { color: var(--gold); }
.rk .title { white-space: nowrap; font: 600 12px/1.2 var(--heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-hi); }
.rk .nm { font: 600 16px/1.25 var(--heading); letter-spacing: 0.02em; color: var(--cream); overflow-wrap: anywhere; }
.rk tr.podium .nm { color: #f6e7c4; }
/* a worn title (the records book's, 044) under the name, in the lore face */
.rk-named { display: block; min-width: 0; }
.rk-named .nm { display: block; }
.rk .wt { display: block; margin-top: 1px; font: italic 400 14px/1.2 var(--lore); color: var(--gold); overflow-wrap: anywhere; }
.rk .weapon { white-space: nowrap; }
.rk .pts { font-weight: 500; color: var(--gold); }
.rk .sub, .rk .short { display: none; }
/* the Level table: the name beside its portrait (the kit's ring around a small round face, or the sex's sign when the
   picture will not load), and each weapon as its painted class icon in the kit's dark slot with the name after it */
.rk-lv .weapon { width: 26%; }
.rk-id { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.rk-port { position: relative; grid-row: 1 / span 2; width: 28px; height: 28px; margin: 0 5px; }
.rk-port:empty { display: none; }
.rk-port::after { content: ''; position: absolute; inset: -5px; background: var(--kit-ring) center / contain no-repeat; pointer-events: none; }
.rk-face { display: block; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: radial-gradient(circle at 40% 35%, #1d2a28, #070a0a 70%); }
.rk-badge { display: grid; place-items: center; font: 600 17px/1 var(--ui); color: var(--text-2); }
.rk-w { display: inline-flex; align-items: center; gap: 8px; }
.rk-wicon { flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 3px; background: var(--kit-slot) center / 100% 100% no-repeat; }
.rk-empty { margin: 8px 0 4px; padding: 14px 0; text-align: center; color: var(--muted); font: italic 17px/1.4 var(--lore); }
.rk-ladder { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.rk-ladder-h { font: 600 12px/1.6 var(--heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.rk-ladder .step b { font-weight: 500; color: var(--text-2); font-variant-numeric: lining-nums tabular-nums; }
/* a rank's painted icon (2026-11-10): one cell of the game's strip of ten (ranks.js rankIcon sets its place) */
.rk-ic { display: inline-block; width: 22px; height: 22px; margin-right: 6px; vertical-align: -6px; background: url(/assets/pvp_ranks.webp) no-repeat; background-size: 1000% 100%; }
.rk-ladder .rk-ic { width: 18px; height: 18px; margin-right: 4px; vertical-align: -4px; }
.rk-updated { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.rk-privacy { margin: 14px 0 0; font-size: 13.5px; }
.panel > .rk-privacy:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .rk .wide, .rk .long { display: none; }
  .rk .short { display: inline; }
  .rk .sub { display: block; margin-top: 2px; font: 600 11px/1.2 var(--heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-hi); }
  .rk th { padding: 2px 6px 7px; font-size: 12px; }
  .rk td { padding: 7px 6px; }
  .rk .nm { font-size: 15px; }
  .rk-boards .tt-tab { font-size: 15.5px; padding: 4px 18px; }
  .rk-tabs .tt-tab { font-size: 14px; padding: 3px 9px; }
  /* the Level table's weapons: under the name, icons and names, the plain text face rather than the PvP table's title caps */
  .rk-lv .sub { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; max-width: none; font: 400 13.5px/1.2 var(--ui); letter-spacing: 0; text-transform: none; color: var(--text-2); text-shadow: none; }
  .rk-lv .sub .rk-w { gap: 6px; }
  .rk-lv .sub .rk-wicon { width: 24px; height: 24px; padding: 2px; }
  .rk-id { column-gap: 8px; }
}

/* ---------- prose (privacy) ---------- */
.prose h1 { margin-bottom: 14px; }
.prose h2 { margin-top: 22px; font-size: 18px; padding-bottom: 4px; border-bottom: 1px solid var(--rim); }
.prose h2::after { display: none; }
.prose p, .prose li { color: #ddd0b4; }
.prose ul { padding-left: 20px; }

/* ---------- the landing page's sections and the press kit (the website layout rule, 2026-11-11) ----------
   Both are 1120 wide; their text runs 760 and is centred; cards take halves of the row, or the whole of it on a
   phone; every frame is the kit's; gaps from 8, 16, 24, 32 and 48. */
.landing { flex: 1; display: grid; align-content: start; }
.landing .hero { min-height: min(88svh, 860px); }
.ld-wrap, .press {
  width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0;
  display: grid; gap: 48px;
}
.ld-wrap > *, .press > * { min-width: 0; }
.ld-band { display: grid; gap: 8px; justify-items: center; text-align: center; }
.ld-band h2, .ld-feat-text h2, .ld-end h2 { margin: 0; font: 600 clamp(24px, 3.6vw, 30px)/1.15 var(--heading); color: var(--gold); letter-spacing: 0.03em; text-wrap: balance; }
.ld-band p { margin: 0; max-width: 760px; font: italic 18px/1.5 var(--lore); color: #dccaa4; }
.ld-div { display: block; width: min(360px, 80%); aspect-ratio: 640 / 30; background: var(--kit-divider) center / 100% 100% no-repeat; }
.ld-sec { display: grid; gap: 24px; }
/* the clip beside what the game is: one kit frame across the row */
.ld-feat {
  --fw: 24px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 8px;
  border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6));
}
.ld-clip { margin: 0; display: grid; gap: 8px; }
.ld-clip video, .pr-clip video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 2px; background: #0c0a08; box-shadow: 0 0 0 1px rgba(95, 158, 148, 0.35); }
.ld-clip figcaption, .pr-clip figcaption { font-size: 14px; color: var(--muted); }
.ld-feat-text { display: grid; gap: 16px; align-content: center; }
.ld-feat-text p { margin: 0; color: #ddd0b4; }
.ld-facts { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #ddd0b4; }
.ld-facts li::marker { color: var(--bronze-hi); }
.ld-facts b { color: var(--cream); font-weight: 500; }
/* what is in the beta: four cards, two to a row */
.ld-cards, .pr-shots, .pr-clips { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .ld-cards, .pr-shots, .pr-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ld-card, .pr-shot, .pr-clip {
  --fw: 18px;
  display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 4px 4px 8px;
  border: var(--fw) solid transparent; border-image: var(--kit-frame) 120 fill / var(--fw) stretch;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6));
}
.ld-card img, .pr-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: #0c0a08; box-shadow: 0 0 0 1px rgba(95, 158, 148, 0.35); }
.ld-card h3, .pr-shot b, .pr-clip b { margin: 0; font: 600 17px/1.3 var(--heading); color: var(--cream); letter-spacing: 0.02em; text-wrap: balance; }
.ld-card p { margin: 0; font-size: 15.5px; color: #ddd0b4; }
.ld-end { display: grid; gap: 16px; justify-items: center; text-align: center; }
.ld-end p { margin: 0; max-width: 760px; color: #ddd0b4; }
.ld-end .cta { margin-top: 8px; }
@media (max-width: 860px) {
  .ld-feat { --fw: 18px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* the press kit */
.pr-head { display: grid; gap: 16px; justify-items: center; text-align: center; }
.pr-head .eyebrow { margin: 0; }
.pr-head h1 { margin: 0; font: 400 clamp(32px, 6vw, 50px)/1.08 var(--display); color: var(--gold); letter-spacing: 0.02em; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.pr-head p { margin: 0; max-width: 760px; color: #ddd0b4; }
.pr-halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pr-halves > .panel { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pr-halves .panel h2 { margin: 0; }
.pr-halves p { margin: 0; color: #ddd0b4; }
.pr-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; }
.pr-facts dt { font: 600 12.5px/1.9 var(--heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze-hi); }
.pr-facts dd { margin: 0; color: var(--cream); overflow-wrap: anywhere; }
.pr-mail { font-size: 18px; color: var(--gold); user-select: all; }
.pr-gap { font-style: italic; color: #ffb3a3; }
.pr-logo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; }
.pr-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.8)); }
.pr-logo-text { display: grid; gap: 16px; justify-items: start; }
.pr-logo-text h2 { margin: 0; }
.pr-logo-text p { margin: 0; color: #ddd0b4; }
.pr-shot { color: inherit; text-decoration: none; transition: filter 0.15s; }
.pr-shot:hover { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.6)) brightness(1.12); }
.pr-shot:hover b { color: var(--gold); }
.pr-shot span, .pr-clip span { font-size: 14px; color: var(--muted); }
.pr-clip a { color: var(--teal-hi); }
@media (max-width: 760px) {
  .pr-halves, .pr-logo { grid-template-columns: minmax(0, 1fr); }
}
.cta-note { margin: 16px auto 0; max-width: 46ch; font-size: 15.5px; color: var(--text-2); text-shadow: 0 1px 3px #000; }

/* ---------- the painted header (direction A, "the Gatehouse": the user, 2026-11-13, "I still think A is the one")
   ----------
   Two pieces painted for it in the ChatGPT art chat, from the kit's own: the bar (assets/gate/bar.webp, 1552 x 206: one
   thick band of the kit's stone between two thin bronze rims, a dragon head as each end cap, no taller than the bar)
   and the crest (assets/gate/crest.webp, 1323 x 511: a winged plaque with an empty dark face, made to hold the logo and
   hang from the bar's left end). The first bar's band was a third of its height, and a logo and a name plate laid
   across its rims was no answer (the user, 2026-11-14: "The logo and sir sullen box overlap the bar"; "if you need to
   create new assets do it"). So the sizes below come from the pictures:
     the bar's clear stone is 77 % of its height: at 72 px tall, 55 px, and the tabs, the name plate and Play (36) sit
     inside it with room; its dragon ends are the border (160 of 206 px), its band stretches between them;
     the crest's face is 79 % of its width and 63 % of its height, centred a little above its middle: the logo is
     sized to that face, and the crest hangs 20 px below the bar by design.
   No markup changed: the hundreds of built pages keep their header. From 900 px the nav's links are kit tabs. At 760 px
   and under the band alone runs edge to edge and the logo sits in it without the crest (36 px in 43 px of stone). */
.top {
  width: min(1296px, 100%); height: 72px; margin: 10px auto 20px; padding: 0; gap: 16px; align-items: center;
  background: none; border: solid transparent; border-width: 0 56px;
  border-image: url(gate/bar.webp) 0 160 fill / 0 56px stretch;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.6));
}
.brand {
  position: relative; z-index: 1; flex: none; align-self: flex-start; display: grid; place-items: center;
  width: 249px; height: 96px; margin: -4px 0 -20px; padding-bottom: 7px;
  background: url(gate/crest.webp) center / 100% 100% no-repeat;
}
.brand img { width: 122px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); }
/* who is signed in: a kit plate with the first character's face, not a bare word in the bar; it opens My account */
.nav a.who {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: none; padding: 0 10px 0 2px; overflow: visible;
  font: 500 15px/1 var(--ui); letter-spacing: 0.02em; color: var(--cream); text-decoration: none;
  border: 5px solid transparent; border-image: var(--kit-dark) 12 fill / 5px stretch;
}
.nav a.who img { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 1px var(--bronze); }
.nav a.who span { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav a.who:hover { color: #fff; filter: brightness(1.2); }
.nav a.play { height: 36px; min-height: 0; }
.nav .btn.small { height: 34px; min-height: 0; padding-block: 0; }
@media (min-width: 900px) {
  .nav { gap: 8px; }
  .nav a:not(.btn):not(.play):not(.who) {
    display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
    font: 400 15px/1 var(--display); letter-spacing: 0.04em; color: #cfc6ae;
    border: 7px solid transparent; border-image: var(--kit-tab) 14 fill / 7px stretch;
  }
  .nav a:not(.btn):not(.play):not(.who):hover { color: #fff; }
  .nav a[aria-current="page"]:not(.btn):not(.play):not(.who) { border-image-source: var(--kit-tab-on); color: #fff3df; }
  .nav a.who { margin-right: 8px; }
}
/* The crest in the middle (the user's pick of six header treatments, 2026-11-14: "3, crest in the middle"; the six are
   on the picks page, headers.html). Where the band has room for a group each side of it, a larger crest hangs from the
   bar's centre, the pages (Updates, Database, Ranks) sit on its left and the account (the name plate, Play, Log out;
   or Log in and the sign-up button) on its right. Still no markup: the links are ordered and pushed apart by CSS.
   Under 1100 px the two groups and the crest no longer fit side by side, and the crest stays at the left end. */
@media (min-width: 1100px) {
  .top { position: relative; margin-bottom: 40px; }
  .brand {
    position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
    width: 290px; height: 112px; margin: 0; padding-bottom: 8px;
  }
  .brand img { width: 146px; }
  .nav { flex: 1; }
  .nav a[href="/updates"], .nav a[href="/database"], .nav a[href="/ranks"] { order: -1; }
  .nav a.who, .nav a[href="/login"] { margin-left: auto; }
}
@media (max-width: 899px) {
  .top { height: 64px; margin: 8px auto 16px; border-width: 0 50px; border-image-width: 0 50px; gap: 12px; }
  .brand { width: 207px; height: 80px; margin: -4px 0 -12px; padding-bottom: 6px; }
  .brand img { width: 100px; }
  .nav a.who, .nav a.play, .nav .btn.small { height: 32px; }
  .nav a.who img { width: 22px; height: 22px; }
  .nav a:not(.btn):not(.play):not(.who) { padding: 0; }
}
@media (max-width: 760px) {
  .top { width: 100%; height: 56px; margin: 0; padding: 0 16px; border-width: 0; border-image-width: 0; }
  .brand { align-self: center; width: auto; height: auto; margin: 0; padding: 0; background: none; }
  .brand img { width: auto; height: 36px; }
}
/* a phone's row has no room for the name: the plate is the face alone, still the way to My account */
@media (max-width: 520px) {
  .nav a.who { display: inline-flex; padding: 0 1px; }
  .nav a.who span { display: none; }
}