@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600..900&family=Hind:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#0a0907;--bg2:#14110c;--fg:#f4efe4;--mut:#b3ab9a;--line:#514a3d;--acc:#ffc21a;color-scheme:dark}
[data-theme=light]{--bg:#f5efe0;--bg2:#eae1cb;--fg:#17140d;--mut:#514a3d;--line:#a19884;--acc:#855400;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.65 Hind,sans-serif;min-height:100dvh}
body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.35;background:repeating-linear-gradient(135deg,transparent 0 165px,var(--line) 165px 166px,transparent 166px 360px);animation:drift 35s linear infinite;mask-image:linear-gradient(90deg,transparent,#000,transparent)}
@keyframes drift{to{background-position:500px 200px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;scroll-behavior:auto!important}}
a{color:inherit}button{font:inherit}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:10;background:var(--acc);color:var(--bg);padding:8px}
header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(18px,4vw,56px);border-bottom:1px solid var(--line);background:var(--bg)}
.logo{font:900 32px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;text-decoration:none;letter-spacing:.04em}.logo i{display:inline-block;width:13px;height:13px;border:4px solid var(--acc);border-radius:50%;margin-right:8px}
.controls{display:flex;gap:8px;align-items:center}.controls button,.controls a{min-width:48px;min-height:48px;padding:10px 16px;border:1px solid var(--line);border-radius:99px;background:var(--bg2);color:var(--fg);cursor:pointer;text-decoration:none;display:grid;place-items:center;font-size:14px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
main{position:relative;z-index:1;max-width:1280px;margin:auto;padding:clamp(34px,6vw,90px) clamp(18px,4vw,56px) 100px}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end}.intro p{max-width:38em;color:var(--mut)}.eyebrow{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:var(--acc);text-transform:uppercase}
h1,h2{font-family:'Big Shoulders Display',Hind,sans-serif;line-height:.9;text-transform:uppercase;margin:20px 0;font-weight:900}h1{font-size:clamp(4.3rem,11vw,10rem)}h2{font-size:clamp(2.5rem,5vw,5rem)}html[lang=hi] h1,html[lang=hi] h2{font-family:Hind,sans-serif;line-height:1.15;text-transform:none}
.photo{margin:50px 0 70px;height:clamp(260px,42vw,540px);overflow:hidden;border-radius:18px;position:relative}.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.1)}.photo:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#0a090799)}
.content{max-width:860px}.content section{border-top:1px solid var(--line);padding:32px 0 45px}.content p,.content li{color:var(--mut);max-width:66ch}.content li{padding:7px 0}.content a{color:var(--fg);text-underline-offset:4px}
.content strong{color:var(--fg)}.content ol,.content ul{padding-left:25px}.callout{background:var(--bg2);padding:24px 30px;border-radius:18px;border:1px solid var(--line)}
footer{position:relative;z-index:1;border-top:1px solid var(--line);padding:28px clamp(18px,4vw,56px);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--mut);font-size:14px}footer nav{display:flex;gap:18px;flex-wrap:wrap}footer a:hover{color:var(--fg)}
@media(max-width:700px){.intro{grid-template-columns:1fr}.controls a{display:none}.photo{margin:32px 0 45px}}