@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');
:root{
 --ink:var(--albedo-text,#e8e9df);--muted:var(--albedo-muted,#a0aaa1);
 --base:var(--albedo-bg,#151c19);--panel:var(--albedo-surface,#1c2520);
 --line:color-mix(in srgb,var(--albedo-border,#748576) 60%,transparent);
 --green:color-mix(in srgb,var(--albedo-added,#87a875) 70%,#55754a);
 --warm:#d3b48a;--sans:'DM Sans',var(--albedo-sans,sans-serif);
 --mono:'DM Mono',var(--albedo-mono,monospace);--serif:'Newsreader',Georgia,serif;
 color-scheme:light dark;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--base);color:var(--ink);font:15px/1.7 var(--sans);transition:background .4s}
body::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 80% 15%,color-mix(in srgb,var(--warm) 9%,transparent),transparent 55%);z-index:-1;transition:opacity .5s}
body.lamp-low::before{opacity:0}
::selection{background:var(--green);color:var(--base)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:6px}
.wrap{max-width:1080px;margin:auto;padding:0 48px}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 0;border-bottom:1px solid var(--line)}
.wordmark{font:500 25px var(--serif);letter-spacing:-1px}.wordmark span{color:var(--muted);font:11px var(--mono);letter-spacing:0;margin-left:12px}
nav{display:flex;gap:25px;font-size:12px;color:var(--muted)}nav a:hover{color:var(--green)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center;padding:88px 0 76px}
.eyebrow,.label{font:10px/1.6 var(--mono);letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:24px}.light{height:6px;width:6px;flex-shrink:0;background:var(--green);border-radius:50%;box-shadow:0 0 12px color-mix(in srgb,var(--green) 55%,transparent);transition:box-shadow .3s,opacity .3s}
.lamp-low .light{box-shadow:none;opacity:.4}
h1{font:400 clamp(48px,6.1vw,76px)/1.02 var(--serif);letter-spacing:-2.7px;margin:0 0 27px;max-width:530px}h1 em{font-weight:400;color:var(--green)}
.intro{color:var(--muted);max-width:375px;line-height:1.9;margin:0}.intro strong{font-weight:500;color:var(--ink)}
.portrait{position:relative;margin:0;padding:13px 13px 0;background:color-mix(in srgb,var(--panel) 90%,var(--warm));border:1px solid var(--line);transform:rotate(2deg);box-shadow:0 16px 44px #00000015}
.portrait::before{content:'';width:64px;height:20px;position:absolute;top:-11px;left:calc(50% - 32px);background:color-mix(in srgb,var(--green) 45%,transparent);transform:rotate(-5deg);backdrop-filter:blur(3px);z-index:1}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:saturate(.75);transition:filter .5s}.lamp-low .portrait img{filter:saturate(.5) brightness(.77)}
.portrait figcaption{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 1px;font:10px var(--mono);color:var(--muted)}
.silver-seam{height:1px;width:64%;margin-left:auto;background:linear-gradient(90deg,transparent,var(--muted),transparent);transform:rotate(-1deg);opacity:.6}
.margin-note{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.margin-note p{font:400 24px/1.35 var(--serif);letter-spacing:-.3px;margin:0;max-width:570px}
.margin-note .label{flex-shrink:0;max-width:125px;line-height:1.9}
.section{padding:58px 0 0}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:25px}h2{font:400 30px/1.2 var(--serif);letter-spacing:-.5px;margin:0}.aside{font:10px var(--mono);color:var(--muted)}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:36px}.note{border-top:1px solid var(--line);padding-top:22px}.note .label{font-size:9px;letter-spacing:1.2px}h3{font:400 24px/1.3 var(--serif);margin:13px 0 11px;letter-spacing:-.3px}.note p{font-size:13px;color:var(--muted);line-height:1.9;margin:0;max-width:370px}
.drawer-section{padding:53px 0 0}.drawer{border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 70%,transparent)}
.drawer-handle{background:none;border:0;width:100%;padding:24px 27px;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:20px}
.drawer-title{font:400 26px var(--serif);letter-spacing:-.3px;display:block}.drawer-sub{font:9px var(--mono);color:var(--muted);letter-spacing:.6px;margin-top:6px;display:block}
.pull{width:42px;height:8px;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 9%,transparent);transition:transform .25s}.drawer-handle[aria-expanded=true] .pull{transform:translateY(3px)}
.drawer-body{padding:0 27px 25px}.drawer-body[hidden]{display:none}.drawer-body::before{content:'';display:block;height:1px;background:var(--line);margin-bottom:22px}
.objects{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.object{flex:1;min-width:120px;border:1px solid var(--line);background:transparent;border-radius:2px;display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 10px;font-size:11px;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.object[aria-pressed=true]{background:color-mix(in srgb,var(--green) 8%,transparent);border-color:color-mix(in srgb,var(--green) 65%,transparent);color:var(--ink)}.object:hover{color:var(--ink)}.object svg{width:94px;height:32px;stroke:currentColor;fill:none;stroke-width:1.1}
.object-note{color:var(--muted);font-size:13px;max-width:590px;line-height:1.85;min-height:50px;margin:0}.object-note strong{color:var(--ink);font-weight:500}
.bottom{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:50px 0 56px}.bottom p{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:330px;line-height:1.85}.elsewhere{display:inline-flex;align-items:center;gap:10px;font-size:13px;border-bottom:1px solid var(--line);padding-bottom:3px;margin-top:11px}.elsewhere:hover{color:var(--green);border-color:var(--green)}
footer{border-top:1px solid var(--line);padding:22px 0 32px;display:flex;gap:24px;justify-content:space-between;align-items:center;font:10px/1.6 var(--mono);color:var(--muted)}
.lamp-button{display:flex;align-items:center;gap:9px;background:none;border:0;padding:6px 0;font:10px var(--mono);color:var(--muted)}.lamp-button:hover{color:var(--ink)}.lamp-button svg{width:16px;height:18px;stroke:currentColor;fill:none;stroke-width:1.2}
@media(min-width:1200px){.wrap{padding:0 58px}.hero{gap:90px}}
@media(max-width:720px){.wrap{padding:0 25px}.top{padding:24px 0}.wordmark span{display:none}nav{gap:17px;font-size:11px}.hero{gap:38px;padding:55px 0;grid-template-columns:1fr 1fr}h1{font-size:48px;letter-spacing:-1.9px}.intro{font-size:13px}.eyebrow{font-size:8px;letter-spacing:1px}.portrait{padding:8px 8px 0}.portrait figcaption{font-size:8px;padding:11px 0}.portrait figcaption span:last-child{display:none}.margin-note p{font-size:21px}.margin-note .label{font-size:8px;max-width:100px}.notes,.bottom{gap:25px}}
@media(max-width:480px){.hero{grid-template-columns:1fr;padding:45px 0 39px;gap:36px}.hero-copy{max-width:350px}h1{font-size:58px;letter-spacing:-2px}.intro{font-size:14px;max-width:320px}.portrait{width:72%;max-width:270px;margin:4px 4px 0 auto}.portrait figcaption{font-size:9px}.portrait figcaption span:last-child{display:block}.margin-note{align-items:flex-start;flex-direction:column;gap:11px}.margin-note .label{max-width:none}.margin-note p{font-size:25px}.section{padding-top:39px}.section-head .aside{font-size:8px}.notes{grid-template-columns:1fr;gap:27px}.note p{max-width:none}.drawer-section{padding-top:35px}.drawer-handle{padding:21px}.drawer-body{padding:0 20px 22px}.objects{gap:7px}.object{min-width:75px;font-size:9px;padding:12px 3px}.object svg{width:74px}.bottom{grid-template-columns:1fr;gap:25px;padding:35px 0}.object-note{min-height:93px}footer{font-size:9px;align-items:flex-start}.lamp-button{font-size:9px;flex-shrink:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{transition:none!important}}
