@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root { --paper:#f4f2ed; --ink:#11120f; --muted:#71716b; --line:#c9c8c0; --acid:#dcff4b; --white:#fff; }
* { box-sizing:border-box; letter-spacing:0; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; }
button { font:inherit; touch-action:manipulation; }
a { color:inherit; }
a,button { -webkit-tap-highlight-color:rgba(220,255,75,.26); }
a:focus-visible,button:focus-visible { outline:2px solid #1657d9; outline-offset:3px; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 12px; background:var(--ink); color:var(--acid); font:500 10px 'DM Mono'; text-transform:uppercase; text-decoration:none; transform:translateY(-150%); transition:transform .18s; }
.skip-link:focus { transform:none; }
.site-header { position:sticky; z-index:20; top:0; min-height:72px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 30px; background:rgba(244,242,237,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; width:max-content; text-decoration:none; }
.brand-symbol { width:34px; height:34px; display:grid; place-items:center; background:var(--ink); color:var(--acid); font:600 15px/1 'Space Grotesk'; }
.brand-lockup { display:flex; flex-direction:column; }
.brand strong { font:600 14px/1.1 'Space Grotesk'; }
.brand small,.header-meta,.compare-trigger,.brief-index,.eyebrow,dt,.entry-no,.entry-foot,.preview-label,.dialog-head span,footer { font:500 9px/1.2 'DM Mono',monospace; text-transform:uppercase; }
.brand small { color:var(--muted); font-size:8px; margin-top:2px; }
.header-meta { display:flex; gap:22px; color:var(--muted); }
.compare-trigger { justify-self:end; display:flex; align-items:center; gap:16px; min-height:36px; padding:0 5px 0 13px; border:1px solid var(--ink); background:var(--ink); color:var(--white); cursor:pointer; }
.compare-trigger b { min-width:38px; align-self:stretch; display:grid; place-items:center; background:var(--acid); color:var(--ink); font-weight:500; }
.compare-trigger:disabled { border-color:var(--line); background:transparent; color:var(--muted); cursor:not-allowed; }
.compare-trigger:disabled b { background:var(--line); }
main { width:min(1480px,calc(100% - 60px)); margin:0 auto; }
.brief { display:grid; grid-template-columns:150px minmax(0,1fr) 300px; gap:40px; align-items:start; padding:52px 0 46px; border-bottom:1px solid var(--ink); }
.brief-index { padding-top:8px; color:var(--muted); }
.brief-copy .eyebrow { margin:0 0 14px; color:var(--muted); }
.brief-copy h1 { margin:0; max-width:760px; font:600 62px/.95 'Space Grotesk',sans-serif; text-wrap:balance; }
.brief-description { margin:20px 0 0; max-width:720px; color:var(--muted); font-size:15px; line-height:1.65; text-wrap:pretty; }
.brief-data { margin:0; border-top:1px solid var(--line); }
.brief-data div { display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); }
dt { color:var(--muted); }
dd { margin:0; font-size:11px; }
dd i { display:inline-block; width:5px; height:5px; margin:0 6px 1px 0; border-radius:50%; background:#25b36a; }
.gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:42px 24px; padding:34px 0 90px; scroll-margin-top:90px; }
.entry { min-width:0; }
.entry-wide { grid-column:1/-1; width:calc(50% - 12px); }
.entry-head { min-height:46px; display:flex; justify-content:space-between; align-items:flex-start; border-top:1px solid var(--ink); padding-top:11px; }
.entry-title { display:flex; align-items:baseline; gap:12px; }
.entry-no { color:var(--muted); }
.entry h2 { margin:0; font:500 18px/1 'Space Grotesk'; }
.entry-actions { display:flex; gap:6px; }
.select-button,.open-button { height:29px; border:1px solid var(--line); background:transparent; display:grid; place-items:center; color:var(--muted); text-decoration:none; cursor:pointer; }
.select-button { padding:0 10px; font:500 9px/1 'DM Mono'; text-transform:uppercase; }
.open-button { width:29px; font-size:15px; }
.select-button:hover,.open-button:hover { border-color:var(--ink); color:var(--ink); }
.select-button.is-selected { border-color:var(--ink); background:var(--acid); color:var(--ink); }
.preview { position:relative; display:block; height:0; padding-bottom:62.5%; overflow:hidden; background:#d9d8d1; border:1px solid var(--line); color:inherit; }
.preview iframe { position:absolute; inset:0; width:1440px; height:900px; border:0; pointer-events:none; transform-origin:0 0; transform:scale(var(--preview-scale,.48)); background:white; }
.preview::after { content:""; position:absolute; inset:0; border:0 solid var(--acid); transition:border-width .18s; }
.preview:hover::after { border-width:5px; }
.preview-label { position:absolute; z-index:2; right:12px; bottom:12px; padding:8px 10px; background:var(--acid); color:var(--ink); opacity:0; transform:translateY(4px); transition:.18s; }
.preview:hover .preview-label { opacity:1; transform:none; }
.entry-foot { min-height:36px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); border-bottom:1px solid var(--line); }
footer { width:min(1480px,calc(100% - 60px)); margin:0 auto; min-height:68px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); border-top:1px solid var(--ink); }
footer a { text-decoration:none; color:var(--ink); }
dialog { width:calc(100vw - 32px); max-width:none; height:calc(100vh - 32px); max-height:none; padding:0; overflow:hidden; overscroll-behavior:contain; border:0; background:#10110f; color:white; }
dialog::backdrop { background:rgba(12,13,11,.78); backdrop-filter:blur(5px); }
.dialog-head { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid #343630; }
.dialog-head > div { display:flex; align-items:baseline; gap:16px; }
.dialog-head span { color:#8e9186; }
.dialog-head h2 { margin:0; font:500 18px/1 'Space Grotesk'; }
#dialog-close { width:34px; height:34px; border:1px solid #45483f; background:transparent; color:white; font-size:22px; line-height:1; cursor:pointer; }
.compare-grid { height:calc(100% - 64px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.compare-pane { min-width:0; display:grid; grid-template-rows:38px minmax(0,1fr); border-right:1px solid #343630; }
.compare-pane:last-child { border-right:0; }
.compare-pane header { display:flex; align-items:center; justify-content:space-between; padding:0 13px; color:#afb2a9; font:500 10px/1 'DM Mono'; text-transform:uppercase; border-bottom:1px solid #343630; }
.compare-pane header a { color:var(--acid); text-decoration:none; }
.compare-pane iframe { width:100%; height:100%; border:0; background:white; }
@media (max-width:900px) { .site-header{grid-template-columns:1fr auto}.header-meta{display:none}main,footer{width:calc(100% - 32px)}.brief{grid-template-columns:1fr;gap:17px;padding:38px 0 34px}.brief-index{padding:0}.brief-data{display:grid;grid-template-columns:repeat(3,1fr)}.brief-data div{display:block}.brief-data dd{margin-top:6px}.gallery{grid-template-columns:1fr}.entry-wide{grid-column:auto;width:auto}.preview iframe{transform:scale(var(--preview-scale,.4))}.compare-grid{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}.compare-pane{border-right:0;border-bottom:1px solid #343630}.compare-pane:last-child{border-bottom:0} }
@media (max-width:560px) { .site-header{min-height:64px;padding:0 16px}.compare-trigger span{display:none}.brief-copy h1{font-size:42px}.brief-copy p{font-size:14px}.brief-data{grid-template-columns:1fr}.brief-data div{display:flex}.brief-data dd{margin-top:0}.gallery{gap:32px;padding-top:24px}.entry h2{font-size:15px}.preview-label{display:none}.entry-foot{font-size:8px}footer span:nth-child(2){display:none} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.skip-link,.preview::after,.preview-label{transition:none} }