:root { color-scheme:light; --paper:#F6F7F3; --ink:#191814; --muted:#5B625F; --rule:#B8BFBA; --ranked:#1D5B45; --focus:#005FCC; --command:#ECEFEB; --command-wash:rgba(246,247,243,.84); --command-hover:rgba(29,91,69,.09); }
:root[data-theme="dark"] { color-scheme:dark; --paper:#101412; --ink:#F1F3EC; --muted:#AAB3AC; --rule:#3B4540; --ranked:#79D6AD; --focus:#7EB7FF; --command:#1A201D; --command-wash:rgba(16,20,18,.84); --command-hover:rgba(121,214,173,.1); }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --paper:#101412; --ink:#F1F3EC; --muted:#AAB3AC; --rule:#3B4540; --ranked:#79D6AD; --focus:#7EB7FF; --command:#1A201D; --command-wash:rgba(16,20,18,.84); --command-hover:rgba(121,214,173,.1); } }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); scroll-behavior:smooth; }
body { max-width:1240px; margin:auto; padding:0 clamp(20px,5vw,72px); font:1rem/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--ranked); }
a:focus-visible, button:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.skip, .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip:focus { z-index:2; width:auto; height:auto; clip:auto; padding:10px 14px; background:var(--paper); }
header { padding:24px 0 0; }
.topline, .meta, .spine, th, .label, .section-kicker { font:650 .75rem/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; letter-spacing:.05em; text-transform:uppercase; }
.topline { display:flex; justify-content:space-between; gap:20px; padding-bottom:18px; border-bottom:1px solid var(--rule); }
.topline-meta { display:flex; align-items:center; gap:20px; }
.command-bar { display:flex; align-items:stretch; min-width:0; margin-top:14px; border:1px solid var(--rule); border-radius:18px; background:var(--command); overflow:visible; }
.command-bar nav { display:flex; flex:1 1 auto; min-width:0; gap:2px; padding:4px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; }
.command-bar nav::-webkit-scrollbar { display:none; }
.command-bar nav a { display:inline-flex; flex:none; align-items:center; min-height:44px; padding:0 13px; border-radius:13px; font:650 .75rem/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; letter-spacing:.02em; text-decoration:none; white-space:nowrap; }
.command-bar nav a:hover { background:var(--command-hover); }
.theme-toggle { display:inline-flex; flex:none; align-items:center; gap:8px; min-height:44px; margin:4px; padding:0 13px; border:0; border-left:1px solid var(--rule); border-radius:0 13px 13px 0; color:inherit; background:none; font:650 .75rem/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; cursor:pointer; }
.theme-toggle[hidden] { display:none; }
.theme-toggle::before { content:""; width:14px; height:14px; flex:none; border:1px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.theme-toggle:hover { color:var(--ranked); background:var(--command-hover); }
@supports (backdrop-filter:blur(10px)) { .command-bar { background:var(--command-wash); backdrop-filter:blur(10px); } }
.links a { display:inline-flex; align-items:center; min-height:44px; }
.hero { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr); gap:48px; padding:clamp(48px,9vw,108px) 0 54px; border-bottom:1px solid var(--rule); }
h1, h2, h3 { font-family:ui-serif,Charter,"Bitstream Charter","Iowan Old Style","Palatino Linotype",Georgia,serif; font-weight:400; letter-spacing:-.03em; }
h1 { max-width:11ch; margin:0; font-size:clamp(3.4rem,8vw,7.6rem); line-height:.91; }
h2 { margin:0; font-size:clamp(2.2rem,4vw,4rem); line-height:1; }
h3 { margin:0; font-size:1.55rem; line-height:1.08; }
p { max-width:70ch; }
.dek { margin:28px 0 0; font-size:clamp(1.15rem,2vw,1.45rem); }
.reading-key { align-self:end; border-top:3px solid var(--ink); padding-top:14px; }
.reading-key p { margin:0 0 12px; color:var(--muted); }
.key { margin:0; padding:0; list-style:none; }
.key li { display:flex; gap:12px; padding:6px 0; border-top:1px solid var(--rule); }
main > section { padding:54px 0; border-bottom:1px solid var(--rule); }
.section-head { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; margin-bottom:26px; }
.section-head p { margin:4px 0 0; color:var(--muted); }
.spine { flex:none; display:inline-block; min-width:2.5em; color:var(--muted); }
.rank { color:var(--ranked); }
.score { font:650 1.15rem/1 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; white-space:nowrap; }
table { width:100%; border-collapse:collapse; }
caption { padding:0 0 12px; text-align:left; color:var(--muted); }
th { text-align:left; color:var(--muted); }
th, td { padding:16px 12px; vertical-align:top; border-top:1px solid var(--rule); }
th:first-child, td:first-child { padding-left:0; }
th:last-child, td:last-child { padding-right:0; }
.artifact { display:block; font:400 1.35rem/1.1 ui-serif,Georgia,serif; }
.subtle { color:var(--muted); }
.links { display:flex; flex-wrap:wrap; gap:0 16px; margin-top:8px; }
.links a { font-size:.9rem; }
.breakdown { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.breakdown div { min-height:112px; padding:14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.breakdown dt { color:var(--muted); font-size:.85rem; }
.breakdown dd { margin:20px 0 0; font:650 1.25rem/1 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; }
.record-list { margin:0; padding:0; list-style:none; }
.record { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; padding:18px 0; border-top:1px solid var(--rule); }
.record:first-child { border-top:0; }
.record p { margin:6px 0 0; }
.record .meta { color:var(--muted); }
.exhibition { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.exhibition article { padding:18px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.exhibition h3 { margin:10px 0 6px; }
.exhibition p { margin:0; color:var(--muted); }
.notes { columns:2 28rem; gap:48px; }
.notes p { margin-top:0; break-inside:avoid; }
footer { display:flex; justify-content:space-between; gap:24px; padding:22px 0 42px; color:var(--muted); font-size:.9rem; }
@media (max-width:800px) { .hero, .section-head, .record { display:block; } .section-kicker { display:block; margin-bottom:14px; } .breakdown, .exhibition { grid-template-columns:1fr 1fr; } .hero { padding-top:56px; } }
@media (max-width:620px) { body { padding-inline:20px; } .topline, footer { display:block; } .topline-meta { margin-top:8px; } .command-bar nav a { padding-inline:11px; } .theme-toggle { padding-inline:11px; } footer p + p { display:block; margin-top:8px; } .breakdown, .exhibition { grid-template-columns:1fr; } table, tbody, tr, td { display:block; width:100%; } thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } tr { padding:16px 0; border-top:1px solid var(--rule); } td { padding:5px 0; border:0; } td::before { content:attr(data-label); display:block; margin-bottom:3px; color:var(--muted); font:650 .7rem/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; letter-spacing:.05em; text-transform:uppercase; } td:first-child::before { content:"Record"; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { transition:none !important; } }