/* jevons.lol
   Identity: an institutional adjudicator. Ledger rows, stamped verdicts,
   tabular numerals. The numbers carry the drama; everything else stays quiet. */

:root {
  color-scheme: light dark;

  --bg:          #E7E8ED;
  --surface:     #FBFBFC;
  --surface-2:   #F1F2F5;
  --surface-3:   #E4E6EC;
  --line:        #D2D5DE;
  --line-strong: #B1B7C4;
  --ink:         #15171D;
  --ink-muted:   #5C6273;
  --ink-faint:   #878DA0;

  --accent:      #9B2A2F;
  --accent-ink:  #FBFBFC;
  --accent-soft: #F3E1E1;

  --ok:          #2C6E51;
  --ok-soft:     #DDEBE3;
  --warn:        #8A6216;
  --warn-soft:   #F1E7CE;
  --bad:         #9B2A2F;
  --bad-soft:    #F3E1E1;

  /* The top slot was bought. It reads as brass -- distinct from the board's
     cool greys, and from the ok/warn/bad semantics, which are about verdicts. */
  --feature:       #8A6A14;
  --feature-soft:  #FAF3E0;
  --feature-line:  #D8C088;

  --shadow-sm: 0 1px 2px rgba(20,22,28,.07);
  --shadow-md: 0 1px 2px rgba(20,22,28,.06), 0 10px 26px -14px rgba(20,22,28,.28);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter: 20px;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #101116;
    --surface:     #181A20;
    --surface-2:   #1E212A;
    --surface-3:   #262A34;
    --line:        #2B2F3A;
    --line-strong: #414658;
    --ink:         #E9EAEF;
    --ink-muted:   #969BAA;
    --ink-faint:   #6E7484;
    --accent:      #D9615C;
    --accent-ink:  #16080A;
    --accent-soft: #3A1E1F;
    --ok:          #63BA8D;
    --ok-soft:     #172B22;
    --warn:        #D8A648;
    --warn-soft:   #2C2415;
    --bad:         #D9615C;
    --bad-soft:    #3A1E1F;
    --feature:      #DDBA5E;
    --feature-soft: #2B2413;
    --feature-line: #5C4C22;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --bg:          #101116;
  --surface:     #181A20;
  --surface-2:   #1E212A;
  --surface-3:   #262A34;
  --line:        #2B2F3A;
  --line-strong: #414658;
  --ink:         #E9EAEF;
  --ink-muted:   #969BAA;
  --ink-faint:   #6E7484;
  --accent:      #D9615C;
  --accent-ink:  #16080A;
  --accent-soft: #3A1E1F;
  --ok:          #63BA8D;
  --ok-soft:     #172B22;
  --warn:        #D8A648;
  --warn-soft:   #2C2415;
  --bad:         #D9615C;
  --bad-soft:    #3A1E1F;
    --feature:      #DDBA5E;
    --feature-soft: #2B2413;
    --feature-line: #5C4C22;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 0 72px;
}
.wrap--narrow { max-width: 780px; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.r { text-align: right; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 22px 18px;
  border-bottom: 1px solid var(--line-strong);
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}

/* The portrait is a steel engraving keyed to transparency: the paper is gone,
   only the ink remains. So it takes the page's ground in either theme, and the
   dark one only needs the ink flipped. */
.mark {
  width: 30px;
  height: 30px;
  display: block;
  flex: 0 0 auto;
  opacity: .92;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark { filter: invert(1); }
}
:root[data-theme="dark"] .mark { filter: invert(1); }
.wordmark a { color: inherit; text-decoration: none; }
.wordmark .dot { color: var(--accent); }

.masthead-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.masthead-nav a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.masthead-nav a:hover { color: var(--accent); border-color: var(--accent); }
.masthead-nav .is-current { color: var(--accent); }

.theme-toggle {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 4px 9px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- thesis ---------- */

.thesis { padding-block: 26px 22px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.thesis h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  /* No measure cap: these headings are one short line and capping them left a
     third of the page empty. `balance` keeps a two-line heading from breaking
     badly on its own. */
  text-wrap: balance;
}
.thesis h1 em { font-style: italic; color: var(--accent); }
/* A lede is two or three lines, so it can run the full container without the
   measure becoming a problem the way long-form body copy would. */
.thesis p { margin: 0 0 10px; color: var(--ink-muted); font-size: 16.5px; line-height: 1.5; }
.thesis p:last-child { margin-bottom: 0; }

.formula {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm);
}
.formula .op { color: var(--ink-faint); }
.formula .term-a { color: var(--ink); font-weight: 600; }
.formula .term-b { color: var(--accent); font-weight: 600; }

/* ---------- top band: the pitch on the left, the thing to do on the right ---------- */

.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding-block: 28px 26px;
}
.top h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  text-wrap: balance;
  max-width: 20ch;
}
.top h1 em { font-style: italic; color: var(--accent); }
.top p { margin: 0; max-width: 52ch; color: var(--ink-muted); font-size: 14.5px; }
.top p strong { color: var(--ink); font-weight: 600; }

.top-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.top-price { text-align: right; }
.top-price .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 2px;
}
.top-price .v {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.top-list {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.top-list:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 860px) {
  .top { grid-template-columns: 1fr; gap: 20px; }
  .top-cta { justify-content: flex-start; }
}

/* ---------- board header: the question, sitting on top of what it sorted ---------- */

.board-head {
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: none;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.board-head-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 7px;
}
.board-head-q {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 3.1vw, 32px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.014em;
  color: var(--ink);
  margin: 0 0 9px;
  text-wrap: balance;
}
.board-head-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.board-head-sub strong { color: var(--ink-muted); font-weight: 600; }
.board-head-sub a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.board-head-sub a:hover { color: var(--accent); border-color: var(--accent); }
.board-head-sub .sep { padding: 0 5px; opacity: .6; }

/* ---------- modal ---------- *//* ---------- modal ---------- */

dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.45);
  overflow: hidden;
}
dialog.modal::backdrop { background: rgba(10, 11, 15, .58); }
/* showModal() focuses the dialog itself, which otherwise paints the UA focus
   ring around the whole box. Controls inside keep their own focus styles. */
dialog.modal:focus, dialog.modal:focus-visible { outline: none; }

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-title { font-family: var(--display); font-size: 21px; font-weight: 500; margin: 0 0 4px; line-height: 1.2; }
.modal-sub { margin: 0; font-size: 12.5px; color: var(--ink-muted); max-width: 46ch; line-height: 1.45; }
.modal-close {
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  padding: 4px 9px;
  cursor: pointer;
  flex: 0 0 auto;
}
.modal-close:hover { color: var(--accent); border-color: var(--accent); }

.modal-body { padding: 18px 20px; overflow-y: auto; max-height: calc(86vh - 190px); }
.modal-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.modal-foot .hint { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); flex: 1 1 180px; }

/* Without JavaScript the dialog cannot be opened, so show it inline instead of
   leaving a button that does nothing. */
.nojs-form { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 20px; }

/* ---------- section furniture ---------- *//* ---------- section furniture ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding-block: 0 8px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.section-note { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.spaced { margin-top: 32px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-pad { padding: 20px; }

/* ---------- notices ---------- */

.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--ink-muted);
}
.notice b { color: var(--ink); font-weight: 600; }
.notice--sealed { background: var(--surface-3); border: 1px solid var(--line-strong); }
.notice--warn   { background: var(--warn-soft); border: 1px solid var(--warn); color: var(--ink); }
.notice--error  { background: var(--bad-soft); border: 1px solid var(--bad); color: var(--ink); }
.notice--ok     { background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ink); }

/* ---------- byline ---------- */

.byline {
  margin: 30px 0 10px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.byline--sealed { border-left-color: var(--line-strong); }
.byline-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: block;
  margin-bottom: 9px;
}
.byline--sealed .byline-k { color: var(--ink-faint); }
.byline-question {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.14;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
  max-width: 26ch;
}
.byline-who {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.byline-who a { color: var(--accent); text-decoration: none; }
.byline-who a:hover { text-decoration: underline; }
.byline-meta {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- board ---------- */

.board-key, .brow {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 150px 112px;
  gap: 14px;
  align-items: center;
}
.board-key--attached {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-top: none;
  border-left: 3px solid var(--accent);
  padding: 8px 14px !important;
  margin-bottom: 10px;
}
.board-key {
  padding: 0 14px 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
}
.brow { padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.brow:nth-child(even) { background: var(--surface-2); }

/* The top slot is the one thing on this page somebody bought, so it is lifted
   out of the ranking rather than tinted like a warning: brass, raised, its own
   edges. The verdict inside it keeps its honest colour -- that number is the
   point -- but the row around it reads as a purchase, not a problem. */
.brow--pinned {
  background: var(--feature-soft) !important;
  border: 1px solid var(--feature-line);
  border-left: 3px solid var(--feature);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 15px 14px;
  margin-bottom: 6px;
}
.brow--pinned .brank { color: var(--feature); font-size: 16px; }
.brow--pinned .site-name { font-size: 18px; }
.feature-note {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--feature);
  display: block;
  margin-top: 4px;
}
.chip--feature {
  background: color-mix(in srgb, var(--feature) 10%, transparent);
  color: var(--feature);
  border-color: var(--feature-line);
}

.brank { font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-faint); text-align: right; }
.site-name { font-family: var(--display); font-size: 16px; font-weight: 500; line-height: 1.2; margin: 0; }
.site-url { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); text-decoration: none; }
.site-url:hover { color: var(--accent); }

.bp { display: flex; flex-direction: column; gap: 4px; }
.bp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bp-val { font-family: var(--mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bp-val.is-ok { color: var(--ok); }
.bp-val.is-mid { color: var(--warn); }
.bp-val.is-low { color: var(--bad); }
.bp-lab { font-family: var(--mono); font-size: 9px; color: var(--ink-faint); letter-spacing: .06em; }

.meter { position: relative; height: 3px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 2px; }
.meter i.is-ok { background: var(--ok); }
.meter i.is-mid { background: var(--warn); }
.meter i.is-low { background: var(--bad); }

.bstatus { text-align: right; }

.board-more {
  padding: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  text-align: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 7px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip--ok   { background: var(--ok-soft);   color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.chip--warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.chip--bad  { background: var(--bad-soft);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.chip--mute { background: var(--surface-2); color: var(--ink-faint); border-color: var(--line); }

/* ---------- the queue: paid, on the board, not yet ranked ---------- */

.queue-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding: 0 14px 7px;
  border-bottom: 1px solid var(--line-strong);
}
.queue-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.queue-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }

.brow--new { background: var(--surface-2); }
.brow--new:nth-child(even) { background: var(--surface); }
.brow--new .brank { color: var(--ink-faint); }
.brow--new .site-name { color: var(--ink-muted); }
.brow--new .bp-lab { font-size: 10px; }

/* ---------- forms ---------- */

label.field {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

input[type="text"], input[type="email"], input[type="url"], textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 9px 11px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field-err { color: var(--bad); font-size: 12px; margin: 5px 0 0; }
.field-hint { color: var(--ink-faint); font-size: 12px; margin: 5px 0 0; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.field-row > * { flex: 1 1 220px; min-width: 0; }
.field-block { margin-bottom: 14px; }

.btn {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity .12s ease, transform .06s ease;
}
.btn:hover { opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink-muted); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }
.btn--tiny { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; padding: 6px 10px; }

/* ---------- buy panel ---------- */

.buy { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 0; margin-top: 12px; }
.buy-form { padding: 20px; }
.buy-price { padding: 20px; background: var(--surface-2); border-left: 1px solid var(--line); }

.qopts { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.qopt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.qopt:hover { border-color: var(--accent); }
.qopt input { margin: 4px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
.qopt span { font-family: var(--display); font-size: 15px; font-style: italic; line-height: 1.3; }
.qopt .warm { font-family: var(--mono); font-size: 9px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 3px; }
.qopt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.price-big { font-family: var(--mono); font-size: 40px; font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.price-k { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); display: block; }

.breakdown { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.breakdown li { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }
.breakdown li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.breakdown li.markup b { color: var(--accent); }

.fineprint { margin-top: 14px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; }

/* ---------- archive ---------- */

.archive { display: flex; flex-direction: column; }
.arow {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 120px 84px;
  gap: 16px;
  align-items: baseline;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background-color .12s ease;
}
.arow:hover { background: var(--surface-2); }
.arow:hover .arow-q { color: var(--accent); }
.arow--live { background: var(--accent-soft); }
.arow-when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.arow-q { font-family: var(--display); font-size: 15px; font-style: italic; color: var(--ink-muted); line-height: 1.35; transition: color .12s ease; }
.arow-who { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink); display: block; margin-top: 2px; font-style: normal; }
.arow-held { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
.arow-paid { font-family: var(--mono); font-size: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.pager { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; }

/* ---------- ledger / stats ---------- */

.ledger-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.ledger-row .k { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.ledger-row .v { font-family: var(--mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.two-up { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; margin-top: 44px; }

/* ---------- receipt / success ---------- */

.receipt-title { font-family: var(--display); font-size: clamp(22px, 4vw, 30px); font-weight: 500; margin: 6px 0 10px; line-height: 1.2; }
.link-row { display: flex; gap: 8px; margin: 14px 0 8px; flex-wrap: wrap; }
.link-row input { flex: 1 1 260px; font-family: var(--mono); font-size: 12px; }
.copy-state { font-family: var(--mono); font-size: 10.5px; color: var(--ok); min-height: 15px; display: block; }

.progress { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin: 14px 0 8px; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .6s ease; }

/* ---------- prose ---------- */

/* Long-form keeps a measure -- running /rules to 140 characters a line would be
   genuinely hard to read -- but a wider one than body copy would normally take,
   because these pages are short and the page is wide. */
.contact { white-space: nowrap; }
.contact .at { color: var(--ink-faint); }

.prose { max-width: 92ch; }
.prose p, .prose li { max-width: 88ch; }
.prose h2 { font-family: var(--display); font-size: 22px; font-weight: 500; margin: 30px 0 10px; letter-spacing: -.01em; }
/* The lede above already supplies the separation; a full section margin on top
   of it opened a 95px hole. */
.prose > h2:first-child { margin-top: 4px; }
.prose h3 { font-family: var(--body); font-size: 15px; font-weight: 700; margin: 24px 0 6px; }
.prose p, .prose li { color: var(--ink-muted); }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--ink); }
.prose blockquote { margin: 24px 0; padding-left: 18px; border-left: 2px solid var(--accent); font-family: var(--display); font-style: italic; font-size: 18px; color: var(--ink); line-height: 1.45; }
.prose blockquote cite { display: block; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- tables (admin) ---------- */

.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 0 12px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--surface-2); }

/* ---------- colophon ---------- */

/* Two columns: the small print on the left, one quiet pointer to the sibling
   site on the right. It lives in the footer on purpose — it is an offer, not a
   claim on anybody's attention. */
.colophon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px;
  align-items: start;
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-faint);
}

.sibling {
  display: block;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.sibling-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 8px;
}
.sibling-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 7px;
}
.sibling-name .dot { color: var(--accent); }
.sibling-name:hover { color: var(--accent); }
.sibling-desc {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 10px;
  max-width: 34ch;
}
.sibling-go {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.sibling:hover { border-color: var(--line-strong); }

@media (max-width: 860px) {
  .colophon { grid-template-columns: 1fr; gap: 26px; }
  .sibling-desc { max-width: none; }
}
.colophon strong { color: var(--ink-muted); font-weight: 600; }
.colophon a { color: var(--ink-muted); }
.colophon p { margin: 0 0 10px; max-width: 84ch; }
.colophon-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .buy { grid-template-columns: 1fr; }
  .buy-price { border-left: none; border-top: 1px solid var(--line); }
  .two-up { grid-template-columns: 1fr; gap: 34px; }
  .arow { grid-template-columns: 1fr auto; row-gap: 5px; }
  .arow-when { order: 1; }
  .arow-paid { order: 2; }
  .arow-q { order: 3; grid-column: 1 / -1; }
  .arow-held { order: 4; grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 680px) {
  .board-key { display: none; }
  .brow {
    grid-template-columns: 34px minmax(0,1fr);
    grid-template-areas: "rank site" ".   p" ".   status";
    row-gap: 8px;
    padding: 14px 12px;
  }
  .brank { grid-area: rank; align-self: start; }
  .bsite { grid-area: site; }
  .bp { grid-area: p; }
  .bstatus { grid-area: status; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}