/* Whiff — The Ledger. Shared web skin, mirrors the app (Theme.swift + Grade.swift).
   Monochrome editorial; the grade is the only color. */

@font-face { font-family:"Hanken"; font-weight:400; font-display:swap; src:url("/fonts/HankenGrotesk_400Regular.ttf") format("truetype"); }
@font-face { font-family:"Hanken"; font-weight:500; font-display:swap; src:url("/fonts/HankenGrotesk_500Medium.ttf") format("truetype"); }
@font-face { font-family:"Hanken"; font-weight:700; font-display:swap; src:url("/fonts/HankenGrotesk_700Bold.ttf") format("truetype"); }
@font-face { font-family:"Hanken"; font-weight:800; font-display:swap; src:url("/fonts/HankenGrotesk_800ExtraBold.ttf") format("truetype"); }
@font-face { font-family:"Hanken"; font-weight:900; font-display:swap; src:url("/fonts/HankenGrotesk_900Black.ttf") format("truetype"); }
@font-face { font-family:"Geist Mono"; font-weight:400; font-display:swap; src:url("/fonts/GeistMono_400Regular.ttf") format("truetype"); }
@font-face { font-family:"Geist Mono"; font-weight:500; font-display:swap; src:url("/fonts/GeistMono_500Medium.ttf") format("truetype"); }

:root {
  --paper:#FAFAF8; --ink:#111214; --ink-soft:#5C5F66; --ink-faint:#9EA1A7;
  --hairline:#E7E7E3; --tile:#EFEFEC; --surface:#F4F4F1;
  --g-a:#17835A; --g-b:#4B9A46; --g-c:#DE7A2C; --g-d:#D85A30; --g-f:#D23B34;
  --sans:"Hanken", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0E0F11; --ink:#F3F3EF; --ink-soft:#A6A9AF; --ink-faint:#6C6F76;
    --hairline:#26282C; --tile:#1A1C1F; --surface:#161719;
    --g-a:#2AA974; --g-b:#63B85C; --g-c:#E88C42; --g-d:#E4703F; --g-f:#E24F47;
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
main { max-width:44rem; margin:0 auto; padding:2rem 1.25rem 5rem; }
.wide { max-width:56rem; }

a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--ink-faint); }
a:hover { text-decoration-color:var(--ink); }

/* --- masthead / nav --- */
.mast { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.1rem 0 1.2rem; border-bottom:1px solid var(--hairline); flex-wrap:wrap; }
.wordmark { font-weight:900; font-size:1.35rem; letter-spacing:-0.02em; text-decoration:none; color:var(--ink); }
.wordmark:hover { text-decoration:none; }
.nav { display:flex; gap:1.1rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; }
.nav a { color:var(--ink-soft); text-decoration:none; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--ink); }

/* --- type scale --- */
.eyebrow { font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); }
h1 { font-weight:800; font-size:2.05rem; line-height:1.12; letter-spacing:-0.02em; margin:.5rem 0 0; }
h2 { font-weight:800; font-size:1.3rem; letter-spacing:-0.01em; margin:2.6rem 0 .8rem;
  padding-top:1.7rem; border-top:1px solid var(--hairline); }
h3 { font-weight:700; font-size:1.05rem; margin:1.4rem 0 .4rem; }
p { margin:.8rem 0; }
p.lead { font-size:1.2rem; line-height:1.4; color:var(--ink); margin:1rem 0 0; }
ul, ol { margin:.8rem 0 .8rem 1.3rem; }
li { margin:.4rem 0; }
strong { font-weight:700; }
.muted { color:var(--ink-soft); }
.faint { color:var(--ink-faint); }
.small { font-size:.9rem; }
.mono { font-family:var(--mono); }

/* --- the grade flood: the signature money-shot --- */
.flood { position:relative; border-radius:14px; margin:1.4rem 0; padding:1.4rem 1.5rem;
  min-height:11rem; display:flex; flex-direction:column; justify-content:space-between;
  color:var(--paper); overflow:hidden; }
.flood .flood-top { font-family:var(--mono); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.9; }
.flood .flood-letter { font-weight:900; font-size:7.5rem; line-height:.9; letter-spacing:-0.04em; }
.flood .flood-score { position:absolute; right:1.5rem; bottom:1.3rem; text-align:right;
  font-family:var(--mono); }
.flood .flood-score b { font-weight:500; font-size:2.6rem; display:block; line-height:1; }
.flood .flood-score span { font-size:.85rem; opacity:.85; }

/* --- grade chips / tiles --- */
.chip { display:inline-flex; align-items:center; justify-content:center; min-width:2.1rem;
  padding:.05rem .4rem; border-radius:6px; font-weight:800; font-size:.95rem; color:var(--paper); }
.badge { display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--hairline);
  border-radius:999px; padding:.18rem .55rem; }

/* --- cards / rows --- */
.card { background:var(--surface); border:1px solid var(--hairline); border-radius:12px;
  padding:1.1rem 1.25rem; margin:1rem 0; }
.tierline { display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-top:1.1rem; margin-top:1.1rem; border-top:1px solid var(--hairline); }
.tierline:first-child { border-top:none; margin-top:0; padding-top:0; }
.tierline .k { font-weight:700; }
.tierline .v { font-family:var(--mono); font-size:.95rem; color:var(--ink-soft); white-space:nowrap; }

/* signal grid (WSAVA credibility, label facts) */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem,1fr)); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline); border-radius:12px; overflow:hidden; margin:1.1rem 0; }
.grid .cell { background:var(--surface); padding:.85rem 1rem; }
.grid .cell .lab { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); }
.grid .cell .val { font-weight:700; font-size:1.02rem; margin-top:.15rem; }

/* directory list */
.dir { list-style:none; margin:1.2rem 0; padding:0; }
.dir li { margin:0; border-top:1px solid var(--hairline); }
.dir li:last-child { border-bottom:1px solid var(--hairline); }
.dir a { display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.85rem .2rem; text-decoration:none; }
.dir a:hover { background:var(--surface); }
.dir .name { font-weight:700; }
.dir .sub { color:var(--ink-faint); font-size:.85rem; font-family:var(--mono); }

/* recall table */
.recalls { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem; }
.recalls th, .recalls td { text-align:left; vertical-align:top; padding:.6rem .6rem;
  border-top:1px solid var(--hairline); }
.recalls th { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:500; border-top:none; }
.recalls td.d { font-family:var(--mono); white-space:nowrap; color:var(--ink-soft); }
.tablewrap { overflow-x:auto; }

.sources { font-size:.85rem; color:var(--ink-soft); word-break:break-word; }
.sources li { margin:.3rem 0; }
.sources a { color:var(--ink-soft); }

.answer { background:var(--surface); border:1px solid var(--hairline); border-radius:12px;
  padding:1.2rem 1.4rem; margin:1.4rem 0; }
.answer .q { font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); }
.answer .a { font-weight:800; font-size:1.5rem; line-height:1.2; margin-top:.3rem; }

footer.site { margin-top:3.5rem; padding-top:1.4rem; border-top:1px solid var(--hairline);
  color:var(--ink-soft); font-size:.88rem; }
footer.site .nav { margin-bottom:.9rem; }
.updated { color:var(--ink-faint); font-family:var(--mono); font-size:.8rem; margin-top:.7rem; }

@media (max-width:520px) {
  h1 { font-size:1.7rem; }
  .flood .flood-letter { font-size:5.5rem; }
  .flood .flood-score b { font-size:2rem; }
}