:root { color-scheme: light; --page:#e2e6e6; --ink:#343b3b; --muted:#606969; --line:#bfc7c7; --blue:#0000ee; --toolbar-height:88px; }
* { box-sizing:border-box; }
html { scroll-padding-top:calc(var(--toolbar-height) + 24px); }
body { margin:0; background:var(--page); color:var(--ink); font:16px/1.65 'DM Sans',Arial,sans-serif; }
a,a:visited { color:var(--blue); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
[hidden] { display:none !important; }
.wrap { width:min(960px,calc(100% - 64px)); margin-inline:auto; }
.home { display:inline-block; margin:32px 0 64px; font-size:14px; }
.eyebrow,.meta,.number,figcaption,.hint,footer { font-size:12px; }
.eyebrow { letter-spacing:.14em; text-transform:uppercase; margin:0 0 18px; color:var(--muted); }
h1,h2,h3,summary { font-family:'Jost',Arial,sans-serif; }
h1 { max-width:780px; font-weight:500; font-size:clamp(36px,5.2vw,62px); line-height:1.08; letter-spacing:-.035em; margin:0 0 28px; }
.lede { max-width:630px; font-size:19px; line-height:1.6; margin:0 0 18px; }
.intro-note { max-width:630px; color:var(--muted); font-size:14px; margin:0; }
.principles { margin:32px 0 48px; max-width:780px; border-block:1px solid var(--line); }
summary { cursor:pointer; padding:17px 0; font-size:17px; }
.principles ol { display:grid; grid-template-columns:1fr 1fr; gap:22px 36px; list-style:none; padding:4px 0 26px; margin:0; }
.principles li { font-size:14px; }
.principles strong { display:block; font-weight:500; font-family:'Jost',sans-serif; font-size:17px; margin-bottom:4px; }
.principles li p { margin:0; color:var(--muted); }
.toolbar { position:sticky; top:0; z-index:10; background:var(--page); border-block:1px solid var(--line); }
.toolbar-inner { display:flex; min-height:86px; gap:20px; align-items:center; }
.filter { display:flex; align-items:center; gap:12px; min-width:0; }
.filter label { font-size:13px; color:var(--muted); }
select { max-width:100%; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:var(--page); padding:11px 30px 11px 12px; font:14px 'DM Sans',sans-serif; cursor:pointer; }
.browse-controls { display:flex; gap:8px; align-items:center; margin-left:auto; }
.counter { font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap; min-width:74px; text-align:center; }
.arrow { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); cursor:pointer; font-size:21px; }
.arrow:hover:not(:disabled) { border-color:var(--ink); background:#d5dcdc; }
.arrow:disabled { opacity:.3; cursor:default; }
.hint { color:var(--muted); margin:15px 0 0; }
.group-title { margin:48px 0 0; font-size:13px; font-family:'DM Sans',sans-serif; font-weight:400; color:var(--muted); }
.example { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(32px,7vw,100px); align-items:center; border-bottom:1px solid var(--line); padding:48px 0; scroll-margin-top:24px; min-height:650px; }
figure { margin:0; }
.image-link { display:block; border-radius:5px; overflow:hidden; background:#d6dcdc; }
img { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:#171b1b; }
figcaption { color:var(--muted); margin-top:9px; }
.number { display:block; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.12em; margin-bottom:15px; }
.meta { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; color:var(--muted); margin:0 0 14px; }
.kind { border:1px solid var(--line); border-radius:3px; padding:2px 7px; }
.example h3 { font-size:clamp(27px,3.3vw,37px); font-weight:500; letter-spacing:-.025em; line-height:1.16; margin:0 0 20px; }
.example p { margin:0 0 24px; max-width:470px; }
.links { display:flex; gap:24px; align-items:center; font-size:14px; }
.permalink,.permalink:visited { color:var(--muted); }
footer { color:var(--muted); padding:36px 0 64px; }
footer p { margin:0 0 10px; }
.skip { position:absolute; top:8px; left:16px; padding:8px; background:white; z-index:20; transform:translateY(-200%); }
.skip:focus { transform:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:700px) {
 .wrap { width:calc(100% - 40px); }
 .home { margin:24px 0 44px; }
 h1 { font-size:42px; }
 .lede { font-size:17px; }
 .toolbar-inner { gap:10px; min-height:80px; }
 .filter { flex:1; }
 .filter label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 select { width:100%; font-size:12px; padding-left:8px; padding-right:24px; }
 .browse-controls { gap:5px; }
 .counter { min-width:55px; font-size:12px; }
 .arrow { width:40px; height:44px; }
 .example { grid-template-columns:1fr; gap:26px; min-height:0; padding:34px 0 40px; align-items:start; }
 figure { width:min(300px,100%); margin-inline:auto; }
 .example h3 { font-size:30px; }
 .example p { max-width:none; }
 .number { margin-bottom:10px; }
 .principles ol { grid-template-columns:1fr; gap:18px; }
 .group-title { margin-top:30px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }