/* buymysoul - one soul, sold to whoever pays the most */

/* Dark only. The soul is a light in a void, and a pale page around it turns
   that into a photograph of a lamp. There is no light theme and no toggle. */
:root {
  --bg:        #000000;
  --fg:        #F2F4F8;
  --muted:     #969BA6;
  --card:      #101219;
  --soft:      #171A22;
  --line:      rgba(255,255,255,.11);
  --primary:   #7C97FF;
  --on-primary:#0A0C12;
  --live:      #4ECB71;
  --shadow:    0 1px 2px rgba(0,0,0,.5);

  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 896px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .92em; }

.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- header ---------- */

.site { padding: 16px 16px 0; }
.site-in {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.logo { display: flex; align-items: center; gap: 7px; min-width: 0; }
.logo-mark { width: 20px; height: 20px; color: var(--primary); flex: none; }
.logo-word { font-size: 19px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.logo-tld { color: var(--primary); }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav > a { padding: 6px 10px; font-size: 14px; font-weight: 500; border-radius: 999px; white-space: nowrap; }
.site-nav > a:hover { background: var(--soft); }
.icon-btn {
  background: none; border: 0; cursor: pointer; color: var(--fg);
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
}
.icon-btn .i { width: 17px; height: 17px; }
.icon-btn:hover { background: var(--soft); }

@media (max-width: 560px) {
  .site { padding: 14px 12px 0; }
  .site-in { gap: 8px; }
  .logo-mark { width: 18px; height: 18px; }
  .logo-word { font-size: 17px; }
  .site-nav { gap: 0; }
  .site-nav > a { font-size: 13px; padding: 6px 7px; }
  .icon-btn { width: 30px; height: 30px; }
}
@media (max-width: 400px) {
  .logo-word { font-size: 15.5px; }
  .site-nav > a { font-size: 12px; padding: 6px 5px; }
}

/* ---------- hero ---------- */

main { max-width: var(--wrap); margin-inline: auto; padding: 0 16px 64px; }

.statpill {
  margin: 32px auto 0; width: fit-content; max-width: 100%;
  display: flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--soft); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: var(--muted);
  white-space: nowrap;
}
.dot-live {
  width: 7px; height: 7px; border-radius: 999px; background: var(--live); flex: none;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(78,203,113,.45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(78,203,113,0); } }
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }
.statpill .online { color: var(--live); font-weight: 600; }
.statpill .sep { opacity: .5; }
@media (max-width: 560px) { .statpill .eco { display: none; } }

.kicker {
  margin-top: 22px; text-align: center;
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 600; letter-spacing: -.01em;
  color: var(--primary);
}

.claim {
  margin-top: 8px; text-align: center;
  font-size: clamp(21px, 6.2vw, 54px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
  display: flex; align-items: center; justify-content: center; gap: .22em;
  white-space: nowrap;
}
/* The minus, the price and the plus travel as one unit, never split apart. */
.stepper { display: inline-flex; align-items: center; gap: .22em; flex: none; }
.price { color: var(--primary); font-variant-numeric: tabular-nums; padding: 0 2px; cursor: text; }
/* editing shows a caret; an outline round the number reads as a bug */
.price:focus, .price:focus-visible { outline: none; }
/* Sized in its own em, so the circle tracks the headline as it scales. */
.step {
  width: 1.62em; height: 1.62em; flex: none;
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  font-size: .38em; font-weight: 500; line-height: 1;
  display: grid; place-items: center;
}
.step:hover { background: color-mix(in srgb, var(--primary) 28%, transparent); }
.step:active { transform: translateY(1px); }

.sub {
  margin: 12px auto 0; max-width: 480px; text-align: center;
  font-size: 15px; color: var(--muted); line-height: 1.45;
}
.sub b { display: block; color: var(--primary); font-weight: 600; }

/* ---------- bid bar ---------- */

.bidbar {
  margin: 0 auto; max-width: 470px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px;
}

.bb-input {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 16px; height: 44px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.bb-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.bb-input > .i { width: 17px; height: 17px; color: var(--muted); }
.bb-input input { border: 0; background: none; outline: none; width: 100%; min-width: 0; font-size: 15px; }
.bb-input input::placeholder { color: var(--muted); }

.bb-go {
  border: 0; border-radius: 999px; cursor: pointer; padding: 0 24px;
  background: var(--primary); color: var(--on-primary);
  font-size: 15px; font-weight: 600; height: 44px; white-space: nowrap;
}
.bb-go:hover:not(:disabled) { filter: brightness(1.06); }
.bb-go:disabled { opacity: .45; cursor: not-allowed; }

.bidhint { margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); min-height: 1.2em; }
.bidhint.err { color: #E5484D; font-weight: 500; }
/* the bid is the rank; tax rides on top, and saying so beats a surprise */
.vatnote { margin: 24px auto 5px; text-align: center; font-size: 10.5px; color: var(--muted); opacity: .65; }

/* ---------- what you are about to buy ---------- */

.preview {
  margin: 18px auto 0; max-width: 560px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, var(--card));
  border-radius: 16px; padding: 14px 16px;
}
.preview-img {
  width: 56px; height: 56px; flex: none; border-radius: 10px;
  object-fit: cover; background: var(--soft);
}
.preview-body { min-width: 0; }
.preview-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.preview-line { margin-top: 4px; font-size: 15px; line-height: 1.4; font-weight: 500; }
.preview.thinking { opacity: .55; }

/* ---------- the soul ---------- */

/* Full bleed: escapes main's 896px column and its 16px of padding, so the
   picture runs to both edges of the window at any width. The negative top
   margin is what lets the hero text sit over it rather than being pushed
   down by it. */
.soul-wrap {
  position: relative;
  z-index: 0;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* Overlap is capped deliberately. The figure's head starts about 13% down
     the picture, so anything deeper than this puts grey text across a glowing
     skull. It scales with the window because the picture does. */
  margin-top: clamp(-104px, -7vw, -56px);
}

/* Everything in the hero rides above the picture. */
.statpill, .kicker, .soulline, .claim, .sub, .bidbar, .bidhint, .vatnote, .preview {
  position: relative;
  z-index: 2;
}

/* No rounded corners and no side mask now that it reaches the window edges:
   the streams of light are meant to run off the sides. Only the bottom is
   faded, so the picture melts into the page above the sentence. The top needs
   nothing, being already black on black. */
.soul {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  -webkit-mask: linear-gradient(to bottom, #000 78%, transparent 100%);
          mask: linear-gradient(to bottom, #000 78%, transparent 100%);
}

/* The top bidder's mark, sat in the brightest part of the figure. Those two
   percentages are measured off the picture, not eyeballed: the centroid of
   every pixel above 245/255 sits at 50.4% across and 42% down, and it holds
   at every threshold from 235 up.

   The plate underneath is what makes it legible. The light there is blown out
   to pure white, so a logo dropped straight on would vanish; a dark disc gives
   it something to sit against and reads as a medallion set into the glow. */
.soul-logo {
  position: absolute;
  left: 50.4%;
  top: 42%;
  translate: -50% -50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(46px, 5.4vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(4, 6, 12, .82);
  border: 1px solid rgba(255, 255, 255, .34);
  /* The dark ring seats the disc in the glare; the two coloured rings are the
     aura's inner edge, tight to the rim where a bloom is brightest. */
  box-shadow:
    0 0 0 5px rgba(4, 6, 12, .3),
    0 0 16px 2px rgba(124, 151, 255, .75),
    0 0 34px 6px rgba(124, 151, 255, .45),
    0 0 26px rgba(0, 0, 0, .5);
  backdrop-filter: blur(2px);
  transition: scale .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* The standing invitation, above the mark on the upper chest.
   Measured before placing: brightness across that band runs from 13 to 255,
   so no single text colour is legible on its own and it needs the plate. Sat
   at 27% to clear the top of the medallion's aura, which reaches about 31%. */
.soul-tag {
  position: absolute;
  left: 50%;
  top: 27%;
  translate: -50% -50%;
  z-index: 3;
  margin: 0;
  padding: 7px 17px;
  border-radius: 999px;
  background: rgba(4, 6, 12, .72);
  border: 1px solid rgba(255, 255, 255, .17);
  backdrop-filter: blur(3px);
  font-size: clamp(11.5px, 1.35vw, 17px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 7px;
}

/* The seller's face, so it is on the page whoever happens to own the soul.
   The medallion below belongs to the buyer; this one never changes. */
.soul-tag img {
  width: 1.85em;
  height: 1.85em;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .3);
}

/* The aura proper: a soft halo spilling well past the rim.
   It is coloured rather than white on purpose. The light it sits in is already
   blown out to pure white, so a white glow there is invisible; periwinkle is
   the one thing that reads against both the glare at the centre and the black
   further out. Sits behind the disc (z-index -1 inside the stacking context
   .soul-logo makes for itself), so only the spill shows and the plate stays
   clean under the mark. */
.soul-logo::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(146, 170, 255, .62) 0%,
    rgba(124, 151, 255, .34) 38%,
    rgba(110, 140, 255, .12) 62%,
    rgba(110, 140, 255, 0) 78%);
  animation: aura 3.8s ease-in-out infinite;
}

@keyframes aura {
  0%, 100% { opacity: .72; scale: .93; }
  50%      { opacity: 1;   scale: 1.07; }
}

.soul-logo:hover {
  scale: 1.06;
  border-color: rgba(255, 255, 255, .7);
  box-shadow:
    0 0 0 5px rgba(4, 6, 12, .3),
    0 0 22px 3px rgba(150, 175, 255, .9),
    0 0 48px 10px rgba(124, 151, 255, .6),
    0 0 26px rgba(0, 0, 0, .5);
}
.soul-logo:hover::before { animation-play-state: paused; opacity: 1; scale: 1.12; }

@media (prefers-reduced-motion: reduce) {
  .soul-logo::before { animation: none; opacity: .9; scale: 1; }
}
.soul-logo img {
  width: 62%; height: 62%;
  object-fit: contain;
  border-radius: 6px;
}
/* a face reads better filling the disc than floating inside it */
.soul-logo img[src$="/nico.jpg"] {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* On a phone the picture is cropped to 4:3, so the same point in the image is
   no longer the same point in the box. `cover` keeps the height and trims the
   sides, which moves nothing vertically and nothing horizontally at centre. */

/* 16:9 across a phone is a letterbox two fingers tall. The figure is centred,
   so `cover` takes the crop off the sides and loses nothing that matters. */
@media (max-width: 640px) {
  .soul { aspect-ratio: 4 / 3; }
  /* No overlap on a phone. The 4:3 crop has no black band at the top to hide
     text in, so any overlap at all drops the VAT line onto the figure's face. */
  .soul-wrap { margin-top: 10px; }
}

/* ---------- the sentence ---------- */

/* The whole reason the site exists, so it is set like a pull quote and not
   like a caption. */
.soulline {
  margin: 14px auto 18px; max-width: 880px; text-align: center;
  font-size: clamp(17px, 3.2vw, 26px);
  letter-spacing: -.03em; line-height: 1.25;
  text-wrap: balance;
}

/* Three parts, three lines. The first two are the claim and carry the weight;
   the third is the half the buyer paid for and reads as quoted copy, so it is
   set regular and quieter rather than shouting alongside them. */
.soulline .ln-name,
.soulline .ln-sold {
  display: block; font-weight: 700; color: var(--fg);
  max-width: 720px; margin-inline: auto;
}
/* Scraped copy runs long, and at the claim's size it swallowed the hero.
   Smaller and on a wider measure: fewer lines for the same words, and the
   tighter leading stops the extra width reading as a separate block. */
.soulline .ln-does {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: .68em;
  line-height: 1.36;
  letter-spacing: -.015em;
  /* wider than the two lines above it, so the extra words cost width rather
     than height. `balance` is off here: it evens the line lengths out, which
     is right for a headline and wrong for a paragraph trying to fill the row. */
  max-width: 860px;
  text-wrap: pretty;
  margin: 7px auto 0;
}
.soulline .ln-name { margin-bottom: 1px; }
.soulline .amt {
  color: var(--primary); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px color-mix(in srgb, var(--primary) 55%, transparent);
}
/* The buyer's name is a link now. Underlined rather than coloured: it sits
   between an accent-coloured price and muted grey copy, and a third colour in
   one sentence is one too many. */
.soulline .co {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.soulline a.co:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* the buyer's mark, inline beside their name. Sized in em so it tracks the
   sentence as it scales, and nudged down to sit on the text's optical centre
   rather than its baseline. */
.soulline .co-logo {
  width: .8em;
  height: .8em;
  /* a touch more air before the mark than after it, so "to" does not crowd
     the circle the way it crowds a letter */
  margin-left: .18em;
  margin-right: .24em;
  vertical-align: -.06em;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(255, 255, 255, .07);
}

/* played once when a bid lands and the sentence changes under you */
.soulline.fresh { animation: rise .55s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .soulline.fresh { animation: none; } }

.soul-credit {
  margin: 10px auto 0; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.soul-credit a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- the buyers ---------- */

.board-h {
  margin-top: 48px; font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  scroll-margin-top: 20px;
}
.board { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 40px 56px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--card);
  transition: border-color .14s ease;
}
.row:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.row:hover .title a { color: var(--primary); }

/* the one that owns the sentence reads differently from the rest */
.row.owner {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 6%, var(--card));
}

.rank-n {
  justify-self: start;
  background: var(--primary); color: var(--on-primary);
  border-radius: 999px; padding: 3px 9px;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.row.plain .rank-n { background: var(--soft); color: var(--muted); }

.face {
  width: 56px; height: 56px; border-radius: 12px; object-fit: cover;
  display: grid; place-items: center;
  background: var(--soft);
  font-size: 21px; font-weight: 700; color: #fff;
  text-transform: uppercase;
}

.body { min-width: 0; }
.title { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; overflow-wrap: anywhere; }
.title .dom { font-size: 14px; font-weight: 500; color: var(--muted); }
.desc {
  margin-top: 2px; font-size: 14.5px; color: var(--muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.meta {
  margin-top: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.meta .clicks { display: inline-flex; align-items: center; gap: 5px; color: var(--fg); font-weight: 600; }
.meta .clicks::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); }
/* time on the throne. The one still holding it gets the accent and a tabular
   figure, so a ticking clock does not shuffle the text beside it. */
.meta .held { font-variant-numeric: tabular-nums; }
.meta .held.now { color: var(--primary); font-weight: 600; }
.badge {
  display: inline-block; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 999px; padding: 1px 7px;
}

.amount {
  align-self: start;
  font-size: 17px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* the quiet way to take the top spot off whoever has it */
.take {
  position: absolute; right: 14px; bottom: 0; transform: translateY(50%);
  z-index: 2;
  background: var(--primary); color: var(--on-primary);
  border: 2px solid var(--bg); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.45);
}
.take:hover { filter: brightness(1.08); }

@media (hover: hover) and (pointer: fine) {
  .take {
    right: auto; bottom: auto; top: 0; left: 50%;
    transform: translate(-50%, -50%);
    border: 0; box-shadow: none; padding: 5px 14px; font-size: 13px;
    opacity: 0; pointer-events: none; transition: opacity .12s ease;
  }
  .row:hover .take, .take:focus-visible { opacity: 1; pointer-events: auto; }
}

@media (max-width: 700px) {
  /* One picture on the left with the rank over its corner, everything else in
     one block on the right, price pinned to the top corner. */
  .row { grid-template-columns: 64px minmax(0, 1fr); row-gap: 8px; padding: 12px 14px; }
  .face { grid-area: 1 / 1 / 3 / 2; align-self: start; width: 64px; height: 64px; }
  .rank-n {
    position: absolute; top: 16px; left: 18px; z-index: 2;
    font-size: 9.5px; font-weight: 700; padding: 1px 5px;
  }
  .body { grid-area: 1 / 2 / 3 / 3; padding-right: 56px; }
  .amount { position: absolute; top: 12px; right: 14px; font-size: 16px; }
  .title { font-size: 15.5px; }
  .desc { font-size: 13.5px; }
  .meta { margin-top: 5px; font-size: 12px; gap: 8px; }
  .take { display: none; }
}

.board-empty { padding: 28px 0; text-align: center; color: var(--muted); }

/* ---------- activity ---------- */

.activity { margin-top: 40px; }
.activity h2 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
/* The list is the grid, not each row, so one column is one width for every row
   and a long name cannot shunt the columns beside it. */
.activity ul {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content;
}
.activity li { display: contents; }
.activity li > * {
  display: flex; align-items: center; min-width: 0;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
/* the gap is padding, not column-gap: a gap would cut the row divider into
   three pieces with daylight between them */
.activity li > * + * { padding-left: 14px; }
.activity li > :first-child { padding-left: 16px; }
.activity li > :last-child { padding-right: 16px; }
.activity li:last-child > * { border-bottom: 0; }
.activity li b { color: var(--fg); font-weight: 600; }
.activity li .amt { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.activity li .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.activity li .when {
  font-family: var(--mono); font-size: 12px; white-space: nowrap; justify-content: flex-end;
}
.activity .nodata { display: block; border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- about ---------- */

.about { margin-top: 44px; scroll-margin-top: 20px; }
.about h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.about-grid > div { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: var(--card); }
.about-grid h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.about-grid p { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
/* the one rule that gets someone removed reads differently from the rest */
.about-grid > div.rule-hard {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--line));
  background: color-mix(in srgb, var(--primary) 7%, var(--card));
}
.about-grid .rule-hard h3 { color: var(--primary); }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .about-grid { grid-template-columns: 1fr; } }

.foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 70;
  background: var(--fg); color: var(--bg);
  padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.6);
  max-width: calc(100vw - 32px);
}

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

.stats { max-width: 940px; margin-inline: auto; padding: 40px 24px 64px; }
.stats h1 { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.stats-sub { margin-top: 8px; font-size: 15px; color: var(--muted); }
.stats-note { margin-top: 32px; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 62ch; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 26px 0 0; }
.tiles > div { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: var(--card); min-width: 0; }
.tiles dt { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.tiles dd { margin: 5px 0 0; font-size: 27px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tiles p { margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  /* an odd tile left alone on the last row fills the width instead of half of it */
  .tiles > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tiles > div { padding: 14px; }
  /* seven-figure counts have to fit a half-width tile */
  .tiles dd { font-size: clamp(19px, 5.6vw, 27px); }
}

.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
@media (max-width: 760px) { .charts { grid-template-columns: 1fr; } }

.chart { margin: 0; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 10px; background: var(--card); }
.chart-wide { margin-top: 8px; }
.chart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.chart h2 { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.chart .cap { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.plot { width: 100%; }
.plot svg { display: block; width: 100%; height: auto; overflow: visible; }

/* recessive frame, prominent data */
.plot .grid { stroke: var(--line); stroke-width: 1; }
.plot .ytick, .plot .xtick { fill: var(--muted); font-family: var(--mono); font-size: 10px; }
.plot .ytick { text-anchor: end; }
.plot .line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .end { fill: var(--primary); stroke: var(--card); stroke-width: 2; }
.plot .cross { stroke: var(--primary); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.plot .dot { fill: var(--primary); stroke: var(--card); stroke-width: 2; }
.plot .catch { cursor: crosshair; }

.bars { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; }
.bar {
  display: grid; grid-template-columns: 178px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 5px 0; border-radius: 6px;
}
.bar:hover, .bar:focus-visible { background: var(--soft); outline: none; }
.bar-label {
  font-size: 13px; color: var(--fg); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { height: 14px; }
.bar-fill { display: block; height: 100%; background: var(--primary); border-radius: 0 4px 4px 0; }
.bar-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-value i { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 6px; }
@media (max-width: 560px) { .bar { grid-template-columns: 108px minmax(0, 1fr) auto; } }

.nodata { font-size: 13.5px; color: var(--muted); padding: 14px 0; }

.tableview { margin-top: 22px; }
.tableview summary { cursor: pointer; font-size: 13.5px; color: var(--muted); }
.tableview summary:hover { color: var(--fg); }
.tablewrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.tableview table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.tableview th, .tableview td { text-align: left; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.tableview th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tableview td { font-variant-numeric: tabular-nums; }
.tableview tr:last-child td { border-bottom: 0; }

.tip {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--fg); color: var(--bg);
  padding: 7px 11px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
}
.tip b { font-weight: 700; }
.tip span { display: block; opacity: .7; font-family: var(--mono); font-size: 10.5px; }

.prose-foot { max-width: 940px; margin-inline: auto; padding: 20px 24px 40px; }
.prose-foot a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.stats-foot { max-width: 940px; }