:root {
  --black: #060606; --off: #F1F1ED; --graphite: #171717; --grey: #8B8B86; --hair: #2A2A28; --white: #FAFAFA;
  --bg: var(--off); --fg: var(--black); --muted: #5f5f5b; --line: #d6d6d0; --card: #e9e9e4;
  --sans: "Geist", "Geist Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: var(--black); --fg: var(--off); --muted: #a3a39e; --line: var(--hair); --card: var(--graphite); }
  :root:not([data-theme="light"]) .top-mark, :root:not([data-theme="light"]) .hero-lock { filter: invert(1); }
}
:root[data-theme="dark"] { --bg: var(--black); --fg: var(--off); --muted: #a3a39e; --line: var(--hair); --card: var(--graphite); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.65 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; background: var(--fg); color: var(--bg); padding: 8px 12px; z-index: 10; }
.mono { font-family: var(--mono); letter-spacing: .06em; } .small { font-size: 13px; }
.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 32px; align-items: center; padding: 14px clamp(16px, 4vw, 48px);
  background: var(--bg); border-bottom: 1px solid var(--line); overflow-x: auto; }
.top-mark { height: 22px; width: auto; flex: none; }
nav { display: flex; gap: 20px; font: 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
nav a { text-decoration: none; color: var(--muted); } nav a:hover, nav a:focus-visible { color: var(--fg); }
main { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
section { padding: 72px 0; border-bottom: 1px solid var(--line); }
h2 { font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 32px; }
h3 { font-weight: 600; font-size: 17px; margin: 28px 0 8px; }
.eyebrow { font: 12px var(--mono); letter-spacing: .12em; color: var(--muted); margin: 0 0 40px; }
.hero-lock { width: min(720px, 100%); margin-left: -2.5%; }
.tagline { font-size: clamp(26px, 4vw, 44px); line-height: 1.2; margin: 8px 0 16px; }
.lede { max-width: 62ch; color: var(--muted); }
.hero-img { margin: 40px 0 0; } .hero-img img { width: 100%; max-height: 640px; object-fit: cover; }
figcaption { font: 12px var(--mono); color: var(--muted); letter-spacing: .06em; margin-top: 8px; }
figure { margin: 0; } .missing img { display: none; }
.missing::before { content: "Image missing locally"; display: block; padding: 40px; background: var(--card); font: 13px var(--mono); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 48px; }
.cols p { margin: 0; }
ul.ok, ul.no { list-style: none; padding: 0; margin: 0; }
ul.ok li, ul.no li { padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--line); }
ul.ok li::before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; background: var(--fg); }
ul.no li::before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 10px; border: 2px solid var(--fg); }
.msg { display: grid; margin: 0 0 40px; } .msg div { display: grid; grid-template-columns: 260px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.msg dt { font: 12px var(--mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } .msg dd { margin: 0; }
.msg .big { font-size: 28px; } .msg .mono { font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .msg div { grid-template-columns: 1fr; gap: 4px; } }
.grid { display: grid; gap: 20px; padding: 0; margin: 0; list-style: none; }
.marks { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 24px; }
.tile { aspect-ratio: 3/2; display: grid; place-items: center; padding: 24px; border: 1px solid var(--line); }
.tile img { max-height: 100%; } .tile.light { background: var(--off); } .tile.dark { background: var(--black); }
.swatches { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sw { border: 1px solid var(--line); } .sw b { display: block; height: 96px; } .sw p { margin: 0; padding: 10px; font-size: 14px; } .sw code { font: 13px var(--mono); }
.note { color: var(--muted); font-size: 15px; max-width: 80ch; }
.type-spec p { margin: 0; } .spec { font: 12px var(--mono); color: var(--muted); margin: 6px 0 28px !important; letter-spacing: .06em; }
.t-display { font-weight: 600; font-size: clamp(36px, 7vw, 72px); letter-spacing: .16em; }
.t-h { font-weight: 500; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; }
.t-mono { font: 500 13px var(--mono); letter-spacing: .08em; }
.comps { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: none; color: var(--fg); border: 1px solid var(--line); padding: 7px 12px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chips button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.lib { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; }
.card .ph { aspect-ratio: 4/3; background: var(--graphite); overflow: hidden; } .card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card dl { margin: 0; padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; }
.card dt { font: 11px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.card dd { margin: 0; overflow-wrap: anywhere; }
.status { font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.status[data-s="approved-for-preview"]::before { content: "■ "; } .status[data-s="needs-human-review"]::before { content: "□ "; } .status[data-s="rejected"]::before { content: "× "; }
.card a.dl { margin: auto 12px 12px; font: 12px var(--mono); }
.icons { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.icons figure { border: 1px solid var(--line); padding: 14px; text-align: center; background: var(--off); }
.icons img { width: 36px; height: 36px; margin: 0 auto 8px; } .icons figcaption { color: #5f5f5b; font-size: 10px; }
code { font: 14px var(--mono); }
.foot { padding: 32px clamp(16px, 4vw, 48px); color: var(--muted); }