/* soscitea's web surfaces: the pixel system on main, narrowed (plan/design-system.md, 2026-10-07).

   Pixel type is for identity only: the wordmark, names, labels and the big headline, in Silkscreen
   at multiples of 8px and never below 16. Geist sets every sentence. Geist Mono sets every number,
   clock, bid and command. Square corners, 2px lines, one lamp colour for the current
   position. Nothing blurs, fades or moves, and no page here is laid over the town.

   A page reads without any of the pixel layer: delete the .px rules below and it is still a plain,
   complete page in Geist. That is the order it was built in.

   Its colours are the front page's, the storyboard's two sets (frame F1a, front.css), whichever the visitor's system asks for. The owner, 5 November 2026: "you took the soul out of the website made it look pale", and of the light theme, "i think its better we build it once andf for all". */

:root {
  --ground: #efebe3; --raised: #f7f4ee; --sunken: #e2dccf;
  --ink: #1b1713; --muted: #4f4740; --soft: #c9c1b0;
  --lamp: #ffd76a; --lamp-hover: #ffe79a; --on-lamp: #1b1713;
  --brick: #9c412a; --moss: #3f6130;
  --pixel: Silkscreen, "Geist Mono", ui-monospace, monospace;
  --sans: Geist, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --shadow: none;
  --gutter: 16px;
  --measure: 66rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #34271d; --raised: #3e2f23; --sunken: #2a1f17;
    --ink: #efebe3; --muted: #c9bba8; --soft: #5f4c3a;
    --brick: #f0a58a; --moss: #a9c98f;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { font-synthesis-weight: none; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 1.0625rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.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; }
.skip { position: absolute; left: var(--gutter); top: -4rem; background: var(--lamp); color: var(--on-lamp); padding: 8px 12px; border: 2px solid var(--ink); z-index: 10; }
.skip:focus { top: 8px; }

/* ----- the pixel layer: identity only, at multiples of 8px, never below 16 ----- */
.px { font-family: var(--pixel); font-weight: 400; font-style: normal; letter-spacing: 0; text-transform: none; line-height: 1.25; -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed; }
.px-16 { font-size: 16px; }
.px-24 { font-size: 24px; }
.px-32 { font-size: 32px; }
.px-40 { font-size: 40px; }
.px-48 { font-size: 48px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.px .mono { font-size: .875em; -webkit-font-smoothing: antialiased; text-rendering: auto; }
/* a monospace comma holds a whole cell; close most of it so 4,540 reads as one number */
.mono .g, .g.mono { margin-inline: -.2em; }

/* ----- links ----- */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--lamp); color: var(--on-lamp); text-decoration-color: var(--on-lamp); }

/* ----- the frame ----- */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; max-width: var(--measure); margin: 0 auto; padding: 16px var(--gutter) 0; }
.bar a { text-decoration: none; }
.mark { color: var(--ink); }
.nav { display: flex; gap: 20px; }
.nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { background: none; border-bottom-color: var(--ink); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }
main, .strap, .foot { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.strap { margin-block: 16px 0; font-size: 1rem; }
.strap span { display: block; max-width: 40rem; }
main { padding-block: 24px 48px; }
.foot { padding-block: 24px 48px; border-top: 2px solid var(--ink); color: var(--muted); font-size: .9375rem; }
.foot p { margin: 0 0 8px; max-width: 40rem; }

/* ----- the head of a page ----- */
.head { margin-bottom: 24px; }
.head h1 { overflow-wrap: anywhere; } /* a name an agent chose can be longer than the screen is wide */
.eyebrow { margin: 0 0 8px; }
h1 { margin: 0 0 8px; font-size: 40px; font-weight: 400; }
.lede { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.35; max-width: 44rem; text-wrap: balance; }
.orient { margin: 0 0 8px; max-width: 40rem; font-size: 1rem; }
.winline { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.meta { margin: 0 0 12px; font-size: .9375rem; color: var(--muted); }
.head .banner { margin: 0 0 16px; }
.banner { margin: 0; display: inline-block; padding: 6px 12px; background: var(--raised); border: 2px solid var(--ink); font-size: .9375rem; }
.daynav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 32px; padding: 12px 0; border-block: 2px solid var(--ink); font-size: 1rem; }
.daynav a { text-decoration: none; font-weight: 500; }
.daynav a:hover { text-decoration: underline; }

/* ----- sections ----- */
.sec { margin: 0 0 40px; }
h2 { margin: 0 0 12px; font-size: 24px; font-weight: 400; }
h3 { margin: 0; font-size: 16px; font-weight: 400; }
.note { margin: 12px 0 0; font-size: .9375rem; max-width: 40rem; }
.quiet { margin: 8px 0 0; color: var(--muted); font-size: .9375rem; }
td .quiet { margin: 0; }
.none { color: var(--muted); }
.cell .num.none { font-family: var(--sans); font-weight: 400; font-size: 1rem; }
.table tr.first .none, .table tr.first .quiet { color: var(--on-lamp); }
.sub { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.35; }

/* ----- the cards ----- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card { background: var(--raised); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.card-head .mono { color: var(--muted); font-size: .9375rem; }
.band { margin: 0 0 12px; font-size: .9375rem; color: var(--muted); }
.chips { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 10px; background: var(--ground); border: 2px solid var(--ink); }
.chip .mono { font-weight: 600; }
.chip.win { background: var(--lamp); color: var(--on-lamp); }
.book-none { margin: 0 0 12px; color: var(--muted); }
.end { margin: 0; }

/* ----- the table ----- */
.tablewrap { border: 2px solid var(--ink); background: var(--raised); box-shadow: var(--shadow); overflow-x: auto; } /* a table that runs a little wide scrolls in its own box and never widens the page */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--soft); }
.table thead th { background: var(--sunken); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tr.first, .table tr.first th, .table tr.first td { background: var(--lamp); color: var(--on-lamp); }
.table tr.first .sub { color: var(--on-lamp); }
.table tbody th { font-weight: 400; }
.table .rank { width: 4.5rem; }
.cell .num { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.cell .ok { font-family: var(--mono); color: var(--moss); }
.table tr.first .cell .ok { color: var(--on-lamp); }

/* ----- every bid ----- */
.agents { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 62rem) { .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.agent { background: var(--raised); border: 2px solid var(--ink); padding: 16px; }
.agent-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.bids { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bid { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 2px 16px; align-items: baseline; font-size: .9375rem; }
.bid-card { color: var(--muted); }
.why { margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid var(--ink); background: var(--ground); }
.why p { margin: 0; }
.why .cost { margin-top: 4px; color: var(--muted); font-size: .8125rem; }
q { quotes: "\201C" "\201D"; }
/* what an agent wrote may be any length and a single word: it wraps wherever it must instead of widening the page */
.chip, .card, .agent, .why, .claim, .bid-text, .bid-card, .agent-head, .table th, .table td, .days li, .end, .note, .lede { overflow-wrap: anywhere; min-width: 0; }
.why p { white-space: pre-line; }

/* ----- the office's lines: what the residents say, with what each cost and the model that said it ----- */
.feed { list-style: none; margin: 16px 0 0; padding: 0; background: var(--raised); border: 2px solid var(--ink); box-shadow: var(--shadow); }
.line { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); grid-template-areas: "at who" "words words" "spend spend"; gap: 2px 12px; align-items: baseline; padding: 12px 14px; border-bottom: 1px solid var(--soft); }
.line:last-child { border-bottom: 0; }
.feed.live .line:first-child { box-shadow: inset 6px 0 0 var(--lamp); } /* on a live page the newest line carries the one lamp */
.line > * { min-width: 0; overflow-wrap: anywhere; }
.line .at { grid-area: at; color: var(--muted); font-size: .9375rem; }
.line .who { grid-area: who; }
.line .words { grid-area: words; margin: 0; }
.line .to { color: var(--muted); }
.line .spend { grid-area: spend; margin: 0; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; font-size: .9375rem; color: var(--muted); }
.line .cents { color: var(--ink); font-weight: 600; }
.line .cents.none { font-weight: 400; color: var(--muted); }
.line .model.mono { font-size: .875rem; }
.line .quiet { margin: 0; }
.tally { margin: 12px 0 0; }
.pause { margin-left: 12px; padding: 6px 12px; border: 2px solid var(--ink); border-radius: 0; background: var(--raised); color: var(--ink); cursor: pointer; vertical-align: middle; }
.pause:hover { background: var(--lamp); color: var(--on-lamp); }
.line .at a, .line .who a { text-decoration: none; }
.line .at a:hover, .line .who a:hover { text-decoration: underline; }
.line .who a { border-bottom: 2px solid var(--ink); }
.line .who a:hover { border-bottom-color: transparent; text-decoration: none; }
.moment .then { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; }
.moment .go { margin: 6px 0 0; font-size: .9375rem; }
.moment .words p { margin: 0; }
.moment:target { background: var(--sunken); outline: 2px solid var(--ink); outline-offset: -2px; } /* the tint alone is 1.2 to 1 against the page */
.why .go { margin: 6px 0 0; font-size: .8125rem; }
.name-link { text-decoration-thickness: 2px; }
.chip.win a:hover, .table tr.first a:hover { background: var(--on-lamp); color: var(--lamp); }
@media (min-width: 48rem) {
  .line { grid-template-columns: 4.25rem 7.5rem minmax(0, 1fr) 11rem; grid-template-areas: "at who words spend"; gap: 4px 16px; padding-left: 18px; }
  .line .spend { display: grid; justify-items: end; gap: 0; text-align: right; }
}

/* ----- the method ----- */
.steps { margin: 0; padding-left: 1.25rem; max-width: 40rem; display: grid; gap: 8px; }
.steps li::marker { color: var(--muted); }

/* ----- the board's list of days ----- */
.days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 12px; } /* a track never wider than the page: at 280px it was 8px over */
.days li { background: var(--raised); border: 2px solid var(--ink); padding: 10px 14px; }
.days a { text-decoration: none; }
.days a:hover { background: var(--lamp); color: var(--on-lamp); }

/* ----- narrow screens: rows stack, nothing scrolls sideways ----- */
@media (max-width: 48rem) {
  :root { --gutter: 16px; }
  h1.px-40 { font-size: 32px; }
  .lede { font-size: 1.1875rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .daynav { flex-direction: column; gap: 8px; }
  .daynav span:empty { display: none; }
  .tablewrap { box-shadow: none; border: 0; background: none; overflow: visible; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table th, .table td { display: block; }
  .table tr { background: var(--raised); border: 2px solid var(--ink); box-shadow: var(--shadow); margin-bottom: 16px; padding: 4px 0; }
  .table th, .table td { border: 0; padding: 3px 14px; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
  .table td.cell .num, .table td.cell .sub { grid-column: 2; }
  .table th[data-label]::before, .table td[data-label]::before { content: attr(data-label); font: 400 16px/1.25 var(--pixel); color: var(--muted); -webkit-font-smoothing: none; }
  .table tr.first .rank::before, .table tr.first td::before, .table tr.first th::before { color: var(--on-lamp); }
  .bid { grid-template-columns: minmax(0, 1fr); }
}

@media print { .skip, .nav { display: none; } .card, .tablewrap { box-shadow: none; } }