:root { --paper:#f0ece2; --ink:#152024; --muted:#616b6e; --rust:#bb5436; --cobalt:#2454d9; --acid:#d6e45d; --line:rgba(21,32,36,.2); --display:"Arial Narrow","Helvetica Neue",Arial,sans-serif; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); }
body::before { content:""; position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.14; background-image:linear-gradient(rgba(21,32,36,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(21,32,36,.2) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
a { color:inherit; text-decoration:none; }
.artbook-top { position:relative; z-index:6; display:flex; justify-content:space-between; gap:20px; padding:20px 44px; border-bottom:1px solid var(--line); color:var(--muted); font:9px var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.artbook-top a { color:var(--ink); }
.artbook-top a:hover, .artbook-decision a:hover { color:var(--rust); }
main { max-width:1480px; margin:0 auto; padding:0 44px; }
.artbook-intro { max-width:920px; padding:105px 0 78px; }
.eyebrow { color:var(--rust); font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
h1,h2 { margin:22px 0 0; font-weight:800; letter-spacing:-.065em; line-height:.9; }
h1 { max-width:850px; font-size:clamp(60px,8.5vw,126px); }
h2 { font-size:clamp(43px,5.5vw,76px); }
.artbook-intro p { max-width:650px; margin:31px 0 0; color:var(--muted); font:17px/1.5 Inter,ui-sans-serif,sans-serif; }
.study-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.study { border:1px solid var(--line); background:#e6e0d3; }
.study-image { overflow:hidden; border-bottom:1px solid var(--line); }
.study-image img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .45s ease; }
.study:hover .study-image img { transform:scale(1.02); }
.study-meta { padding:19px 20px 22px; }
.study-meta span { color:var(--rust); font:9px var(--mono); letter-spacing:.09em; }
.study-meta strong { display:block; margin:23px 0 8px; font-size:28px; letter-spacing:-.05em; }
.study-meta p { max-width:450px; margin:0; color:var(--muted); font:13px/1.45 Inter,ui-sans-serif,sans-serif; }
.study-brutalist { background:#d9d1e9; }
.study-brutalist .study-meta span { color:var(--cobalt); }
.study-kinetic { background:#111719; color:var(--paper); }
.study-kinetic .study-meta span { color:var(--acid); }
.study-kinetic .study-meta p { color:#aab4b2; }
.study-atlas { background:#e6e0d3; }
.study-atlas .study-meta span { color:var(--cobalt); }
.artbook-decision { display:grid; grid-template-columns:72px 1fr; gap:28px; align-items:start; max-width:910px; padding:115px 0 120px; }
.decision-number { color:var(--rust); font:12px var(--mono); }
.artbook-decision p { max-width:600px; margin:25px 0 22px; color:var(--muted); font:17px/1.5 Inter,ui-sans-serif,sans-serif; }
.artbook-decision a { color:var(--cobalt); font:700 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.artbook-footer { padding:18px 44px; border-top:1px solid var(--line); color:var(--muted); font:9px var(--mono); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:800px) { .artbook-top { flex-wrap:wrap; padding:16px 20px; } .artbook-top span:last-child { display:none; } main { padding:0 20px; } .artbook-intro { padding:75px 0 55px; } .study-grid { grid-template-columns:1fr; } .artbook-decision { grid-template-columns:40px 1fr; padding:85px 0 90px; } .artbook-footer { padding:18px 20px; } }