/* brand.css — the shared look for gabefitz.com and anything that borrows it.
   Also linked cross-origin by the Weekly Bets scoreboard (weekly-bets-picks.netlify.app),
   so treat class names here as public: add, don't rename or remove without updating it.
   Graphite, snow and one accent color. One type family (Archivo): wide caps for labels,
   normal width for reading. Damascus-style layered lines are the only ornament.
   "band" is the dark stripe (hero, footer); "sheen" lights the Damascus lines.
   Per-site dials (set in a :root block after this file): --accent, --band, --band-deep,
   and the band pattern (override .contours). Everything else stays shared. */
:root {
  --snow: #f4f5f6;
  --surface: #ffffff;
  --ink: #111316;
  --muted: #5a6068;
  --rule: #d9dce0;
  --band: #15171a;       /* per-site dial */
  --band-deep: #0c0d0f;  /* per-site dial */
  --on-band: #eef0f2;
  --on-band-muted: #a3a9b1;
  --sheen-hi: rgba(228, 233, 240, 0.3);
  --sheen-lo: rgba(170, 180, 192, 0.09);
  --accent: #f59ac2;     /* per-site dial: anodized pink */
  --accent-tint: color-mix(in srgb, var(--accent) 30%, #ffffff);
  --link: #111316;
  --claude: #d97757;
  --gpt: #10a37f;
  --win: #1b7442;
  --loss: #b42318;
  --bad: #ff8b7b;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --snow: #0c0d0f;
    --surface: #141619;
    --ink: #e9ebee;
    --muted: #969ca4;
    --rule: #26292e;
    --sheen-hi: rgba(228, 233, 240, 0.24);
    --sheen-lo: rgba(170, 180, 192, 0.06);
    --accent-tint: color-mix(in srgb, var(--accent) 13%, #0c0d0f);
    --link: var(--accent);
    --win: #6fd394;
    --loss: #ff7b6b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --snow: #0c0d0f;
  --surface: #141619;
  --ink: #e9ebee;
  --muted: #969ca4;
  --rule: #26292e;
  --sheen-hi: rgba(228, 233, 240, 0.24);
  --sheen-lo: rgba(170, 180, 192, 0.06);
  --accent-tint: color-mix(in srgb, var(--accent) 13%, #0c0d0f);
  --link: var(--accent);
  --win: #6fd394;
  --loss: #ff7b6b;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--snow);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }

.wrap { max-width: 74rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.num { font-variant-numeric: tabular-nums; }

/* wide caps: the gear-label voice, used sparingly */
.label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- dark band + Damascus lines ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; background: var(--band); color: var(--on-band); }
/* inside a band everything reads as dark mode, whatever the page mode is */
.band { --ink: var(--on-band); --muted: var(--on-band-muted); --rule: rgba(241, 245, 238, 0.14); --surface: rgba(241, 245, 238, 0.04); --win: #6fd394; --loss: #ff7b6b; --link: var(--accent); }
.contours {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, var(--sheen-lo) 0%, var(--sheen-hi) 36%, var(--sheen-lo) 60%, var(--sheen-hi) 86%, var(--sheen-lo) 100%);
  /* the lines, faded toward the left so text sits on cleaner metal */
  -webkit-mask: url(damascus.svg) right center / cover no-repeat, linear-gradient(to right, rgba(0, 0, 0, 0.3), #000 62%);
  -webkit-mask-composite: source-in;
  mask: url(damascus.svg) right center / cover no-repeat intersect, linear-gradient(to right, rgba(0, 0, 0, 0.3), #000 62%);
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.8125rem; font-weight: 700; font-stretch: 125%; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
}
.mark svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--accent); }
.mark span { white-space: nowrap; }
@media (max-width: 520px) { .mark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.nav { display: flex; gap: clamp(0.9rem, 3vw, 1.75rem); font-size: 0.9375rem; font-weight: 500; }
.nav a { color: var(--on-band-muted); text-decoration: none; }
.nav a:hover { color: var(--on-band); }

/* ---------- text ---------- */
.lede { max-width: 34ch; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.38; color: var(--on-band-muted); }
.lede strong { font-weight: 500; color: var(--on-band); }
/* quiet links inside running text */
.prose { display: grid; gap: 1.1rem; max-width: 62ch; }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.prose a:hover { background: var(--accent); color: #0f1c17; text-decoration: none; }
.caption { color: var(--muted); font-size: 0.9375rem; }
mark { padding: 0 0.15em; background: var(--accent); color: #0f1c17; }
code { font-family: var(--mono); font-size: 0.86em; padding: 0.1em 0.35em; background: var(--accent-tint); }

/* ---------- buttons ---------- */
.buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--accent); border-radius: 2px;
  background: var(--accent); color: #0f1c17;
  font-size: 0.8125rem; font-weight: 700; font-stretch: 125%; letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.btn:hover { background: transparent; color: var(--accent); }
.btn.ghost { background: transparent; border-color: rgba(241, 245, 238, 0.35); color: var(--on-band); }
.btn.ghost:hover { border-color: var(--on-band); }
/* on light backgrounds */
.btn.line { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn.line:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- status dot ---------- */
.running { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); }
.running::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--band); }

/* ---------- result card (a Kalshi play) ---------- */
.card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.card-head, .card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding: 0.9rem 1.1rem; }
.card-head { border-bottom: 1px solid var(--rule); }
.who { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.who i, .tag i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; }
.who.claude i, .tag.claude i { background: var(--claude); }
.who.gpt i, .tag.gpt i { background: var(--gpt); }
.card ul { list-style: none; margin: 0; padding: 0.4rem 0; }
.card li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.25rem 1rem; align-items: baseline; padding: 0.5rem 1.1rem; }
.card .pick { font-weight: 600; }
.card .price { color: var(--muted); }
.card .note { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--muted); }
.card .won { color: var(--win); font-weight: 600; }
.card-foot { border-top: 1px solid var(--rule); color: var(--muted); }
.card-foot b { color: var(--ink); font-weight: 600; }
.payout { padding: 0.1rem 0.4rem; background: var(--accent); color: #0f1c17; font-weight: 700; }
.card .lost { color: var(--loss); font-weight: 600; }
.who.me i { background: var(--accent); box-shadow: 0 0 0 1.5px var(--band); }
.tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; }
.tag.me i { background: var(--accent); box-shadow: 0 0 0 1.5px var(--band); }

/* ---------- footer ---------- */
.foot-band { background: var(--band-deep); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 2rem; color: var(--on-band-muted); font-size: 0.9375rem; }
.foot a { text-decoration: none; }
.foot-links { display: flex; gap: 1.5rem; }
.foot a:hover { color: var(--on-band); }
.band .foot { border-top: 1px solid rgba(241, 245, 238, 0.12); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}