/* BrushArena pages. Gallery ink: white walls, ink type and controls, no chromatic accent — the painting is the only colour. Kept deliberately quiet so
   the works are the loudest thing on the page. Single theme: paper. */
/* Fraunces is served from here (latin subset, variable weight 300–600, optical size axis intact) so first paint never waits on a third-party stylesheet. */
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-latin.woff2) format("woff2"); font-style: normal; font-weight: 300 600; font-stretch: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces-italic-latin.woff2) format("woff2"); font-style: italic; font-weight: 300 600; font-stretch: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sagittaire Display"; src: url(../vendor/Sagittaire-Display-Italic.otf) format("opentype"); font-style: italic; font-weight: 400; font-display: swap; }
:root {
  --brush-ink: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-20' width='140' height='44' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='1' seed='5' result='grain'/%3E%3CfeColorMatrix in='grain' type='luminanceToAlpha' result='ga'/%3E%3CfeComposite in='SourceGraphic' in2='ga' operator='arithmetic' k1='0' k2='1' k3='-0.35' k4='0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M1 2.4 C 20 1.2, 40 3.2, 60 2.1 S 90 1.4, 99 2.2' fill='none' stroke='%23222222' stroke-width='2.2' stroke-linecap='round' filter='url(%23g)'/%3E%3C/svg%3E");
  --pencil-hair: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-20' width='140' height='44' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.3' numOctaves='1' seed='5' result='grain'/%3E%3CfeColorMatrix in='grain' type='luminanceToAlpha' result='ga'/%3E%3CfeComposite in='SourceGraphic' in2='ga' operator='arithmetic' k1='0' k2='1' k3='-0.35' k4='0'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M1 2.4 C 20 1.2, 40 3.2, 60 2.1 S 90 1.4, 99 2.2' fill='none' stroke='%23d9d4c8' stroke-width='1.6' stroke-linecap='round' filter='url(%23g)'/%3E%3C/svg%3E");
  /* --page is the reading ground: gallery-wall white. --paper is the warm painted paper, kept for the
     painting's own ground, which the white dissolves into just above the footer. */
  --page: #ffffff;
  --paper: #f4eedc; --paper-2: #f3f3f3; --paper-3: #e9e9e9; --ink: #222222; --ink-soft: #666666; --ink-faint: rgba(34, 34, 34, .46);
  --wash-good: rgba(34, 168, 74, .11); --wash-bad: rgba(224, 58, 52, .09); --good: #1c8a3e; --bad: #c9302c;
  --hair: rgba(34, 34, 34, .14); --hair-strong: rgba(34, 34, 34, .32);
  /* the accent is ink itself (brand option 3, "gallery ink"); the names below keep the old hooks alive */
  --accent: #222222; --accent-deep: #000000; --accent-ink: #222222; --accent-wash: rgba(34, 34, 34, .05);
  --gold: var(--accent); --gold-deep: var(--accent-deep); --gold-ink: var(--accent-ink); --gold-wash: var(--accent-wash);
  --ok: #222222; --bad: #222222; --label: 500 11.5px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; --data: 400 13.5px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; color: var(--ink); background: var(--page); font: 16px/1.55 "Fraunces", Georgia, "Times New Roman", serif; font-weight: 350; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- header ----
   The bar sticks to the top, slips away while you read downward and returns on the first scroll up. */
#nav { position: sticky; top: 0; z-index: 20; background: var(--page); transition: transform .28s ease, box-shadow .28s ease; }
#nav.nav-hidden { transform: translateY(-100%); }
#nav.nav-scrolled { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { #nav { transition: none; } }
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 18px 28px 0; }
.top .wordmark { justify-self: start; }
.top .nav { justify-self: center; }
.top-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.wordmark { font: italic 400 28px/1 "Sagittaire Display", "Instrument Serif", Georgia, serif; text-decoration: none; opacity: .92; -webkit-text-stroke: .5px var(--ink); paint-order: stroke fill; letter-spacing: .005em; }
.nav { display: flex; gap: 22px; font: var(--label); letter-spacing: .1em; text-transform: uppercase; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); position: relative; text-decoration: none; }
/* the current page is underlined by hand: one brushed stroke, drawn from an inline SVG so it wobbles and skips */
.nav a[aria-current]::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: 3px; height: 4px; background: var(--brush-ink) no-repeat center / 100% 100%; }
/* Playground: the P leans back a touch and P, L, A, Y each take a colour from the paint box; ground stays ink. */
.nav-playground { position: relative; }
.nav-playground .play i { font-style: normal; display: inline-block; }
/* the current-page underline is drawn by hand here, since the coloured letters are inline blocks the text underline skips */
.nav a[aria-current].nav-playground { text-decoration: none; }
/* My Taste: a small vermilion paint dot when an anonymous voter's taste is ready and unseen */
.nav a.nav-taste { position: relative; }
.taste-dot { position: absolute; top: 6px; right: -9px; width: 7px; height: 7px; border-radius: 50%; background: #c9302c; filter: url(#pt-wash); }
@media (max-width: 700px) { .taste-dot { top: 12px; right: 12px; filter: url(#pt-wash-lite); } }
.nav-playground .play { display: inline-block; }
.nav-playground .play .p { color: #c9302c; transform: rotate(-9deg) translateY(-.5px); transform-origin: 60% 70%; }
.nav-playground .play .l { color: #1c8a3e; }
.nav-playground .play .a { color: #3b6fb6; }
.nav-playground .play .y { color: #b8962e; }
.nav-playground:hover .play i, .nav-playground[aria-current] .play i { filter: saturate(1.15); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 28px 28px 80px; }
.page-head { margin: 8px 0 22px; }
.eyebrow { font: var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; font-weight: 400; letter-spacing: -.005em; margin: 6px 0 10px; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 500; margin: 32px 0 12px; }
.lede { color: var(--ink-soft); max-width: 62ch; margin: 0; font-size: 16.5px; }
.muted { color: var(--ink-faint); }
.small { font-size: 14px; }
.stat { font: var(--data); font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--hair); margin: 26px 0; }

/* ---- pills ---- */
.pill { display: inline-block; font: var(--label); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--hair-strong); color: var(--ink-soft); white-space: nowrap; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffffff; background: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 14px 18px; cursor: pointer; transition: background .15s, transform .05s; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn.quiet { background: transparent; border-color: var(--hair-strong); color: var(--ink); }
.btn.quiet:hover { background: var(--paper-2); border-color: var(--hair-strong); }
.btn.quiet:hover { background: var(--paper-2); }
.btn.text { background: transparent; border-color: transparent; color: var(--ink-soft); padding: 10px 12px; }
.btn.text:hover { color: var(--ink); background: transparent; border-color: transparent; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
kbd { font: 500 10.5px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .04em; border: 1px solid var(--hair-strong); border-radius: 3px; padding: 3px 5px; color: var(--ink-soft); background: rgba(255,255,255,.35); }
.btn:not(.quiet):not(.text) kbd { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); background: transparent; }

/* ---- work frames (arena + galleries) ---- */
.frame { position: relative; aspect-ratio: 1; background: var(--paper-2); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.frame .empty { font: var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); text-align: center; padding: 20px; }
.frame .empty i { display: block; width: 28px; height: 28px; margin: 0 auto 10px; border: 1px solid var(--hair-strong); border-radius: 50%; font-style: normal; }
.frame.zoomable { cursor: zoom-in; }

/* ---- tables ---- */
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; white-space: nowrap; }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
th.num, td.num { text-align: right; }
td.num { font: var(--data); font-variant-numeric: tabular-nums; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: rgba(255,255,255,.28); }
.name { font-size: 17px; font-weight: 450; }
.sub { font: var(--label); letter-spacing: .06em; color: var(--ink-faint); text-transform: uppercase; margin-top: 2px; }
.ci { color: var(--ink-faint); font-size: 12px; margin-left: 4px; }
.rec b { font-weight: 500; }
.rec .w { color: var(--ok); } .rec .l { color: var(--bad); } .rec .d { color: var(--ink-faint); }

/* ---- bars ---- */
.bar { height: 4px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); border-radius: 2px; }

/* ---- cards / grids ---- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card { display: block; text-decoration: none; border: 1px solid var(--hair); border-radius: 6px; padding: 16px 16px 14px; background: rgba(255,255,255,.22); transition: border-color .15s; }
.card:hover { border-color: var(--hair-strong); }
.card h3 { font-size: 18px; font-weight: 450; margin: 6px 0 6px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.card .foot { margin-top: 12px; font: var(--data); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---- code ---- */
/* a fixed height so a 200-line program and a 30-line one leave the two sides level; both scroll inside */
pre.code { margin: 0; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #2b1d16; color: #f4eedc; padding: 16px; border-radius: 6px; overflow: auto; height: clamp(260px, 42vh, 420px); white-space: pre; }
details.code summary { cursor: pointer; font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 0; list-style: none; display: flex; gap: 8px; align-items: center; }
details.code summary::before { content: "+"; width: 14px; text-align: center; }
details.code[open] summary::before { content: "–"; }

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(43, 29, 22, .86); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox.on { display: grid; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 92vh; background: var(--paper); border-radius: 4px; }

/* ---- footer: the page's paper dissolves into the painting ----
   Zones top to bottom: paper (type lives here), the plate (label + credit), then flowers alone. */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { width: 100%; flex: 1 0 auto; }
/* The painting is the footer. It fills the whole band; the page's near-white lies over it and thins out
   on the way down, so the field surfaces through the white rather than the white turning into paper. */
.foot { position: relative; margin-top: 36px; background: transparent; }
.band { position: relative; min-height: clamp(440px, 54vh, 600px); overflow: hidden; background: var(--page); }
.band-img { position: absolute; inset: 0; }
.band-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
/* The white holds at full strength behind the whole plate and only starts to let go at the credit line, so the
   field comes up under "Painted with p5.brush" and not behind the signup. The dissolve then hangs off the plate's
   bottom edge. */
.band-inner { position: relative; z-index: 2;
  background: linear-gradient(to bottom, var(--page) 0%, var(--page) 86%, rgba(255, 255, 255, .8) 100%); }
.band-inner::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 150px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .42) 40%, rgba(255, 255, 255, .12) 75%, rgba(255, 255, 255, 0) 100%); }
/* the type sits low on the paper, so the field gets the top of the band and everything below the rule */
.foot-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vh, 96px) 28px 30px; }

.foot-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 28px 72px; align-items: start; }
.foot-id .wordmark { font-size: 26px; display: inline-block; }
.foot-id .tag { margin: 8px 0 0; font-size: 16px; color: var(--ink-soft); max-width: 40ch; }

/* closing rule: lineage on the left, who keeps it on the right */
.foot-bottom { margin: 38px 0 0; padding-top: 14px; border-top: 1px solid var(--hair-strong);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; }
.foot-bottom p { margin: 0; }
.credit { font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }
.credit a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair-strong); }
.credit a:hover { border-bottom-color: var(--ink); }
.lineage { font-size: 14.5px; color: var(--ink-soft); }
.lineage a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.lineage a:hover { border-bottom-color: var(--ink); }

/* ---- segmented control (leaderboard lens, gallery order) ---- */
.seg { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 6px; overflow: hidden; background: var(--page); }
.seg button { font: var(--label); letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--ink-soft); border: 0; border-right: 1px solid var(--hair); padding: 11px 16px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: rgba(255, 255, 255, .35); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---- filter selects: native menu, our own chevron, so the control is the same height everywhere ---- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sel { position: relative; display: inline-flex; }
.sel select { appearance: none; -webkit-appearance: none; font: 14.5px/1 "Fraunces", Georgia, serif; color: var(--ink);
  background: var(--page); border: 1px solid var(--hair-strong); border-radius: 6px; padding: 11px 38px 11px 13px; cursor: pointer; }
.sel select:hover { border-color: var(--ink-faint); }
.sel select:focus { outline: none; }
.sel select:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(43, 29, 22, .12); }
.sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.6px solid var(--ink-faint); border-bottom: 1.6px solid var(--ink-faint);
  transform: translateY(-70%) rotate(45deg); }
.sel:hover::after { border-color: var(--ink); }

/* ---- sortable table headers ---- */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
th.sortable::after { content: "↕"; opacity: .32; margin-left: 5px; font-size: 10px; }
th.sortable[data-dir="asc"]::after { content: "↑"; opacity: 1; color: var(--gold-ink); }
th.sortable[data-dir="desc"]::after { content: "↓"; opacity: 1; color: var(--gold-ink); }

.signup { max-width: 460px; width: 100%; }
.signup .pitch { margin: 0 0 12px; font-size: 16.5px; color: var(--ink); }
.signup .row { display: flex; gap: 8px; }
.signup .row input { flex: 1; min-width: 0; font: 16px/1.2 "Fraunces", Georgia, serif; color: var(--ink); background: rgba(255, 255, 255, .7); border: 1px solid rgba(43, 29, 22, .3); border-radius: 6px; padding: 12px 13px; outline: none; transition: border-color .15s, box-shadow .15s; }
.signup .row input::placeholder { color: rgba(43, 29, 22, .38); }
.signup .row input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(34, 34, 34, .14); }
.signup .row button { font: 600 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffffff; background: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 0 18px; cursor: pointer; white-space: nowrap; }
.signup .row button:hover { background: var(--accent-deep); }
.signup .row button[disabled] { opacity: .6; cursor: wait; }
.signup .row button .bell { display: none; }
.signup .msg { min-height: 1.4em; margin-top: 8px; font-size: 14.5px; }
.signup.is-error input { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(34, 34, 34, .14); }
.signup.is-error .msg { color: var(--bad); }
.signup.is-success .row { display: none; }
.signup.is-success .msg { color: var(--ok); font-size: 17px; }
.signup.is-success .msg::before { content: "✓ "; }
/* the one call to action: a vote pill in the header on every page except the arena itself */
.nav-vote { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 17px; background: var(--ink); color: var(--page); font: var(--label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.nav-vote:hover { opacity: .88; }
/* the vote-mode switch: two words in one outlined pill, ink on the one you are in */
.mode { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 17px; overflow: hidden; flex: none; }
.mode a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; background: var(--page); color: var(--ink-soft); text-decoration: none; font: 500 11.5px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mode a:hover { color: var(--ink); }
.mode a[aria-current] { background: var(--ink); color: var(--page); }
.mode .mode-icon { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.vote-only .arena-intro .mode { display: inline-flex; }
/* /vote: the arena with nothing else — wordmark, pair, vote bar, prompt */
.vote-only .top .nav, .vote-only .top .account, .vote-only .top-right, .vote-only #leaderboard-preview, .vote-only #foot { display: none !important; }
@media (max-width: 760px) {
  .nav-vote { min-height: 30px; padding: 0 11px; font-size: 10.5px; }
  /* the field shows through more on phones: less white in the band */
  .band { min-height: 620px; }
  .band-inner { background: linear-gradient(to bottom, var(--page) 0%, var(--page) 80%, rgba(255, 255, 255, .7) 100%); }
  .band-inner::after { height: 110px; background: linear-gradient(to bottom, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 100%); }
  .foot { margin-top: 8px; }
  .band { min-height: 560px; }
  .foot-wrap { padding: 36px 18px 24px; }
  .foot-bottom { margin-top: 28px; flex-direction: column; gap: 8px; }
  .credit, .lineage { font-size: 13.5px; white-space: normal; }
  .foot-id .wordmark { font-size: 24px; }
  .foot-id .tag { margin: 6px 0 0; font-size: 15.5px; }
  .signup .row { position: relative; gap: 0; }
  .signup .row input { padding-right: 52px; }
  .signup .row button { position: absolute; right: 5px; top: 50%; width: 36px; height: 36px; padding: 0; transform: translateY(-50%); border-radius: 50%; display: grid; place-items: center; font-size: 0; }
  .signup .row button .label { display: none; }
  .signup .row button .bell { display: block; width: 17px; height: 17px; }
}

/* ---- empty / notices ---- */
.notice { border: 1px solid var(--hair-strong); border-left: 3px solid var(--gold); background: var(--gold-wash); padding: 12px 16px; border-radius: 0 6px 6px 0; font-size: 15px; }

@media (max-width: 700px) {
  .top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px 0; }
  .wordmark { font-size: 25px; }
  .nav { gap: 16px; font-size: 11px; flex-wrap: wrap; }
  main { padding: 20px 18px 120px; }
  th, td { padding-right: 8px; }
  .hide-m { display: none; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* Shared page rhythm. The painted footer retains its original palette and geometry. */
main { --ink-soft: #655e53; --ink-faint: #797164; --accent-blue: #526f7e; padding-top: 42px; }
main .page-head { margin: 0 0 32px; }
main h1 { font-size: clamp(29px, 3.5vw, 44px); line-height: 1.12; letter-spacing: -.025em; margin: 9px 0 16px; }
main h2 { font-size: 24px; line-height: 1.25; font-weight: 450; margin-top: 36px; }
main .lede { font-size: 18px; line-height: 1.65; max-width: 65ch; }
main a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
main a:hover { color: var(--accent-blue); }
main :focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 4px; }
main .frame { border-color: #d8d1c3; border-radius: 5px; }
main .side { background: var(--page); color: var(--accent-blue); border-color: #b9c3c5; padding: 7px 9px; }
main .btn { border-radius: 5px; }
main .btn.quiet { border-color: #bdbdbd; }
main .notice { background: #f6f6f6; border-color: #dcdcdc; border-left-color: var(--ink); }
main details > summary { color: var(--ink-soft); cursor: pointer; padding-block: 12px; }
main details > summary:hover { color: var(--ink); }
main .pill { border-color: #cfcfcf; color: #444444; background: #f4f4f4; letter-spacing: .035em; }
main .sub { text-transform: none; letter-spacing: .025em; font-size: 12px; line-height: 1.5; }
main .stats { background: #f5f2e9; border-radius: 5px; padding: 24px; gap: 24px; margin: 24px 0 34px; }
main .stats .k { font-size: 10.5px; letter-spacing: .07em; }
main .stats .v { font-size: 23px; line-height: 1.4; }
main .strength .row { border-bottom: 1px solid var(--hair); padding: 10px 0; }
main .strength .t { align-items: baseline; }
main .strength .n { font-size: 12px; }
main .entry { padding-bottom: 18px; border-bottom: 1px solid var(--hair); align-content: start; }
main .entry .facts { gap: 6px 14px; line-height: 1.6; }
main .spec { border-left: 2px solid #cabe9d; padding-left: 22px; margin-top: 24px; line-height: 1.65; }
main .prose { max-width: 72ch; line-height: 1.8; }
main .prose h2 { padding-top: 12px; }
main .prose p { margin-block: 14px 22px; }
main .formula { border: 1px solid var(--hair); border-radius: 5px; line-height: 1.9; }
main .seg { display: inline-flex; padding: 4px; gap: 2px; border: 1px solid var(--hair); border-radius: 6px; background: #f3f0e7; }
main .seg button { padding: 10px 14px; border: 0; border-radius: 3px; background: transparent; color: var(--ink-soft); font: var(--data); cursor: pointer; }
main .seg button[aria-pressed="true"] { background: var(--page); color: var(--ink); box-shadow: 0 1px 3px #2b1d1612; }
main .filters { display: flex; gap: 10px; }
main select { font: var(--data); color: var(--ink); background: var(--page); border: 1px solid var(--hair-strong); border-radius: 5px; padding: 12px 30px 12px 12px; }
main .tiles { gap: 14px; }
main .tile { border-radius: 5px; }
main .tile:focus-visible { outline-offset: 3px; }
.top { max-width: 1440px; width: 100%; margin-inline: auto; padding-top: 24px; padding-bottom: 12px; }
.top .nav a { padding-block: 10px; }
.foot-directory { display: flex; flex-wrap: wrap; gap: 16px; font: var(--data); margin-top: 24px; color: var(--ink-soft); }
.foot-directory a { text-decoration: none; }
.foot-directory a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Phone layouts keep content scrollable within its own panel and controls reachable. */
.tbl, .plot { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
main .work, main .entry, main section, main .two > *, main .strip > * { min-width: 0; }
@media (max-width: 700px) {
  .foot-id { grid-template-columns: 1fr; gap: 20px; }
  .top { padding: 18px 18px 4px; gap: 10px; }
  .top .nav { display: grid; grid-template-columns: 1fr auto repeat(4, minmax(0, 1fr)); width: 100%; gap: 4px; font-size: 10px; letter-spacing: .035em; }
  .top .nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding-block: 10px; }
  main { padding-top: 26px; padding-bottom: 56px; }
  main .page-head { margin-bottom: 24px; }
  main h1 { font-size: 30px; line-height: 1.15; margin-bottom: 12px; }
  main .lede { font-size: 16px; line-height: 1.6; }
  main h2 { font-size: 22px; margin-top: 28px; }
  main .prose { font-size: 16px; line-height: 1.75; }
  main .formula { font-size: 12px; padding: 12px; }
  main .stats { padding: 18px; gap: 20px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main .stats .v { font-size: 20px; overflow-wrap: anywhere; }
  main .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  main .strength .t { display: block; }
  main .strength .t .m { display: block; margin-top: 3px; font-size: 10px; }
  main .strength .row, main .h2h .row { min-height: 52px; }
  main .spec { padding-left: 15px; }
  main .entry .who a { font-size: 15px; line-height: 1.4; }
  main .entry .facts { font-size: 12px; }
  main .controls { align-items: stretch; gap: 12px; }
  main .seg { width: 100%; }
  main .seg button { flex: 1; min-height: 44px; padding: 8px; font-size: 11px; letter-spacing: .035em; }
  main .filters { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  main .sel, main .sel select { min-width: 0; width: 100%; }
  main .sel select { min-height: 44px; font-size: 13px; padding-left: 10px; }
  main .btn, main details > summary, main .board-tabs button, main .board-table th button { min-height: 44px; }
  main .snapshot-line { gap: 8px 16px; font-size: 12px; line-height: 1.6; }
  main .snapshot-id dl { display: block; }
  main .snapshot-id dt { margin-top: 12px; font-weight: 600; }
  main .snapshot-id dd { margin: 3px 0 10px; overflow-wrap: anywhere; }
  .signup .row button { width: 44px; height: 44px; }
  .signup .row input { min-height: 54px; padding-right: 58px; font-size: 16px; }
  .foot-directory a { min-height: 44px; display: inline-flex; align-items: center; }
  .foot-directory { gap: 0 16px; }
}

/* Accounts: ink controls on the same gallery paper. */
.account { position: relative; font: var(--data); flex-shrink: 0; }
/* The pencil: an easter egg in the corner of the painting. The field is code; this opens its knobs. */
/* Residency credit: the Prime Intellect wordmark in plain ink, drawn through a mask so it takes the page's colour. */
.credit a.residency { border-bottom: 0; color: var(--ink-soft); white-space: nowrap; }
.credit a.residency:hover { color: var(--ink); }
/* The wordmark is 6:1. Its height is set to the credit's cap height so it reads as a word in the sentence, sitting on the baseline. */
.prime-mark { display: inline-block; width: 84px; height: 14px; margin: 0 .28em 0 .1em; vertical-align: -3px; background: currentColor; -webkit-mask: url(/assets/logos/prime-intellect.svg) no-repeat center / contain; mask: url(/assets/logos/prime-intellect.svg) no-repeat center / contain; }
@media (max-width: 700px) { .prime-mark { width: 78px; height: 13px; } }
/* Community: the Discord mark in plain ink, footer only. */
.discord-glyph { width: 15px; height: 15px; fill: currentColor; display: block; }
.discord-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.discord-inline:hover { border-bottom-color: var(--ink); }
.discord-inline .discord-glyph { width: 15px; height: 15px; }
.foot-directory .discord-inline { border-bottom: 0; margin-left: auto; }
.foot .nav .discord-inline { border-bottom: 0; margin-left: auto; }
/* Signed in: no box, just the avatar, name and a chevron. */
.auth-menu.is-user > summary { border-color: transparent; background: transparent; padding-left: 4px; padding-right: 6px; min-height: 44px; font: var(--data); letter-spacing: 0; text-transform: none; }
.auth-menu.is-user > summary:hover, .auth-menu.is-user[open] > summary { background: var(--paper-2); }
.auth-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-soft); transition: transform .18s ease; }
.auth-menu[open] .auth-chevron { transform: rotate(180deg); }

/* Sign in is a pill, the same height and weight as Vote, outlined in ink instead of filled. */
.auth-menu > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 34px; padding: 0 14px; cursor: pointer; border: 1px solid var(--ink); border-radius: 17px; list-style: none; font: var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.auth-menu > summary:hover { background: var(--paper-2); }
.auth-menu > summary::-webkit-details-marker { display: none; }
.avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-fallback { display: grid; place-items: center; background: var(--paper-2); }
.auth-handle { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 244px; max-width: calc(100vw - 36px); padding: 8px; border: 1px solid var(--hair-strong); border-radius: 6px; background: var(--page); box-shadow: 0 8px 24px #22222212; z-index: 30; }
.auth-option { display: flex; align-items: center; min-height: 44px; width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--ink); text-decoration: none; font: var(--data); cursor: pointer; text-align: left; }
.auth-option:hover { background: var(--paper-2); }
.auth-note { margin: 8px 12px; font: var(--data); color: var(--ink-soft); }
.auth-note:empty { display: none; }
/* Phones: wordmark, the Vote pill and one menu button on a single row. The page links and the account
   options live in a sheet under the header; signed in, the button becomes the avatar. */
.menu { display: none; }
@media (max-width: 850px) {
  .top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 10px; position: relative; }
  .top .wordmark { grid-column: 1; grid-row: 1; }
  .top-right { grid-column: 2; grid-row: 1; }
  .top .nav, .top .account { display: none; }
  .menu { display: block; grid-column: 3; grid-row: 1; }
  .menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 4px; cursor: pointer; border-radius: 5px; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--paper-2); }
  .menu-burger { display: grid; gap: 5px; width: 20px; }
  .menu-burger i { display: block; height: 1.5px; background: var(--ink); border-radius: 1px; }
  .menu > summary .avatar { width: 30px; height: 30px; }
  .menu-sheet { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--page); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); box-shadow: 0 12px 24px #22222210; padding: 6px 0 8px; }
  .menu-sheet nav { display: grid; }
  .menu-sheet nav a { display: flex; align-items: center; min-height: 48px; padding: 0 18px; text-decoration: none; color: var(--ink-soft); font: var(--label); letter-spacing: .1em; text-transform: uppercase; }
  .menu-sheet nav a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .menu-account { border-top: 1px solid var(--hair); margin-top: 6px; padding: 6px 6px 0; }
  .menu-account:empty { display: none; }
  .menu-account .auth-option { min-height: 48px; padding: 0 12px; }
  .menu-who { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; font: var(--data); color: var(--ink-soft); }
  .vote-only .menu { display: none; }
}

/* Contributions share the gallery's paper, type and ink. */
.community-form { display: grid; gap: 10px; min-width: 0; }
.community-form label { font: var(--data); color: var(--ink); }
.community-form input, .community-form textarea, .community-form select { width: 100%; min-width: 0; min-height: 44px; padding: 12px; border: 1px solid var(--hair-strong); border-radius: 5px; background: var(--page); color: var(--ink); font: 16px/1.5 "Fraunces", Georgia, serif; }
.community-form textarea { resize: vertical; }
.community-form .btn { justify-self: start; min-height: 44px; }
.field-hint, .form-message { margin: 0; font: var(--data); color: var(--ink-soft); }
.form-message:empty { display: none; }
.comments { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--hair); }
.comments h3 { margin: 0 0 16px; font-size: 20px; font-weight: 450; }
.comment { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.comment-byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: var(--data); overflow-wrap: anywhere; }
.comment-byline time { color: var(--ink-soft); font-size: 12px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; margin: 10px 0 0; }
.comment-empty { font: var(--data); color: var(--ink-soft); margin: 0 0 18px; }
.comment-delete { min-height: 44px; min-width: 44px; padding: 8px 0; border: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; font: var(--data); cursor: pointer; }
.comment-signin > summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font: var(--data); }
.comment-verification { min-width: 0; max-width: 100%; }

.community-form[hidden] { display: none; }

/* ---- Paint as a design language: paint is data and emphasis, ink is chrome. Filters come from AB.paintDefs. ---- */
.paint-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pt-wash { filter: url(#pt-wash); mix-blend-mode: multiply; }
.pt-dry { filter: url(#pt-dry); mix-blend-mode: multiply; }
.pt-graphite { filter: url(#pt-graphite); }
.pt-rule { filter: url(#pt-rule); }
/* a name underlined by hand, the same stroke as the nav */
.brush-u { text-decoration: none; padding-bottom: 3px; background: var(--brush-ink) no-repeat center bottom / 100% 4px; }
/* a number or word sitting on a chip of wash */
.pt-chip { display: inline-block; padding: 1px 7px; border-radius: 3px; background: #c9e7d3; color: var(--ink); filter: url(#pt-wash); mix-blend-mode: multiply; }
.pt-chip.bad { background: #f3d1cf; }
.pt-chip.ink { background: #e2ded4; }
/* section rules drawn with a pencil */
.pencil-rule { border: 0 !important; background: var(--pencil-hair) no-repeat center bottom / 100% 3px; }
/* the compact board's score bars, in graphite */
.board-compact .score-bar { filter: url(#pt-graphite); }
@media (max-width: 700px) { .pt-wash, .pt-chip { filter: url(#pt-wash-lite); } .pt-dry, .pt-graphite, .pt-rule, .board-compact .score-bar { filter: none; } }

/* Arena inspection leaves the frame itself as the choice target. */
.arena-expand { position:absolute; top:7px; right:7px; z-index:2; display:grid; place-items:center; width:36px; height:36px; padding:8px; border:1px solid var(--hair-strong); border-radius:50%; background:color-mix(in srgb, var(--page) 88%, transparent); color:var(--ink); cursor:zoom-in; }
.arena-expand svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; }
/* On a phone the corner chip is small, and a wider invisible edge keeps it easy to hit. */
@media (max-width:700px) {
  .arena-expand { top:6px; right:6px; width:28px; height:28px; padding:6px; }
  .arena-expand svg { width:15px; height:15px; }
  .arena-expand::before { content:""; position:absolute; inset:-8px; }
}
.pair .frame { position:relative; }
@media (hover:hover) and (pointer:fine) {
  .arena-expand { opacity:0; }
  .quick-image:hover .arena-expand,.pair .frame:hover .arena-expand,.arena-expand:focus-visible { opacity:1; }
}
.arena-inspecting { overflow:hidden; }
.arena-lightbox { padding:0; border:0; color:var(--ink); background:transparent; max-width:100vw; max-height:100dvh; overflow:auto; }
.arena-lightbox::backdrop { background:var(--paper); opacity:.97; }
.arena-inspector { display:grid; justify-items:center; gap:10px; padding:48px 24px 16px; background:var(--paper); }
.arena-close { position:absolute; right:12px; top:4px; width:40px; height:40px; background:none; border:0; color:var(--ink); font-size:28px; cursor:pointer; }
.arena-full-image { width:min(calc(100vw - 48px),calc(100dvh - 170px)); aspect-ratio:1; display:grid; place-items:center; }
.arena-full-image img { width:100%; height:100%; object-fit:contain; }
.arena-full-image [hidden],.arena-lightbox [hidden] { display:none; }
.arena-inspector-nav { display:flex; align-items:center; gap:24px; font-size:14px; }
.arena-inspector-nav button { background:none; border:0; color:var(--ink); min-width:40px; min-height:36px; font-size:22px; cursor:pointer; }
.arena-lightbox .arena-choose { padding:8px 22px; }
@media(prefers-reduced-motion:reduce) { .arena-lightbox,.arena-lightbox *,.arena-expand { animation:none!important; transition:none!important; } }

.top .brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* Live training run (arena.js liveNav): a red dot and "Live" beside the wordmark in the nav's own label type, only while
   a run is live and switched on. Nothing is reserved while it is hidden. The dot breathes unless motion is reduced. */
.nav-live { display: inline-flex; align-items: center; gap: 7px; font: var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.nav-live:hover { color: var(--ink); }
.nav-live i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #c9302c; }
@media (prefers-reduced-motion: no-preference) { .nav-live i { animation: nav-live-pulse 2.2s ease-out infinite; } }
@keyframes nav-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 48, 44, .32); } 70% { box-shadow: 0 0 0 5px rgba(201, 48, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(201, 48, 44, 0); } }
/* Where the word would crowd a neighbour ("Arena" on narrow desktops, Vote on the narrowest phones) the dot stands alone,
   with a 23 px hit area that takes no room; the label stays for screen readers and the tooltip. */
@media (min-width: 851px) and (max-width: 999px), (max-width: 359px) {
  .top .brand { gap: 8px; }
  .nav-live { position: relative; }
  .nav-live span { display: none; }
  .nav-live::after { content: ""; position: absolute; inset: -8px; }
}

/* The footer painting (arena.js footer): the band keeps the painting's 2:1 shape and grows if the type needs more room.
   The painting's sky fades into the page at the top; the type starts on the grass below the hills. Kept last in the
   file so the white type wins over the footer's own colours (.credit a.residency and the rest). */
.band--painting { min-height: auto; height: auto; aspect-ratio: 2600 / 1300; }
.band--painting .band-img { inset: 0; height: 100%; object-position: 50% 0%; }
.band--painting .band-inner { background: transparent; }
.band--painting .band-inner::after { display: none; }
.band--painting .foot-wrap { padding-top: 25.5%; }
@media (min-width: 1101px) {
  /* white type with a faint shadow for the busy grass */
  .band--painting .wordmark, .band--painting .foot-id .tag, .band--painting .foot-id .pitch,
  .band--painting .foot-directory, .band--painting .foot-directory a, .band--painting .foot-bottom,
  .band--painting .foot-bottom p, .band--painting .foot-bottom a, .band--painting .msg, .band--painting .nav a {
    color: #fff; text-shadow: 0 1px 2px rgba(20,30,15,.5), 0 0 10px rgba(20,30,15,.3); }
  .band--painting .foot-directory, .band--painting .foot-bottom, .band--painting .foot-id .pitch { font-weight: 600; }
  /* all white: the base .wordmark thickens the thin face with an ink stroke, which reads as a black outline on the
     painting, so the stroke is white here and a touch heavier; full opacity so the grass doesn't show through */
  .band--painting .wordmark { text-shadow: none; -webkit-text-stroke: .65px #fff; opacity: 1; }
  .band--painting .foot-bottom a, .band--painting .foot-directory a { border-bottom-color: rgba(255,255,255,.55); }
  .band--painting .foot-bottom { border-top-color: rgba(255,255,255,.6); }
  .band--painting .foot-directory svg { filter: drop-shadow(0 1px 2px rgba(20,30,15,.45)); }
}
@media (max-width: 1100px) {
  .band--painting { aspect-ratio: auto; height: auto; min-height: 0; display: flex; flex-direction: column; }
  .band--painting .foot-wrap { padding-top: clamp(36px, 6vh, 64px); }
  .band--painting .band-inner { order: 1; background: var(--page); }
  .band--painting .band-img { order: 2; position: relative; height: auto; aspect-ratio: 4 / 3; object-position: 64% 100%; }
}