:root{--bg:#f6f4ee;--ink:#111114;--muted:#5c5c66;--line:#111114;--soft:#dcd9cf;--card:#fff;--accent:#2b50ff;--tint:#e4e9ff;--sun:#ffd23f}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.top,main,footer{max-width:1080px;margin:0 auto;padding-left:24px;padding-right:24px}
.top{display:flex;justify-content:space-between;align-items:center;padding-top:26px;padding-bottom:26px}
.mark{font:700 1.1rem 'Space Grotesk',sans-serif;letter-spacing:-.01em}
nav{display:flex;align-items:center;gap:26px;font-size:.92rem;color:var(--muted)}
nav a{transition:color .2s}nav a:hover{color:var(--ink)}
.pill{padding:8px 18px;border:1.5px solid var(--line);border-radius:999px;color:var(--ink);transition:background .2s,color .2s}
.pill:hover{background:var(--ink);color:var(--bg)!important}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center;padding:72px 0 110px}
.status{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;border:1.5px solid var(--line);border-radius:999px;font-size:.85rem;background:var(--card)}
.status b{width:8px;height:8px;border-radius:50%;background:#16a34a;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
h1{font:700 clamp(2.7rem,6.4vw,5rem)/1.03 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:26px 0 22px}
.hl{position:relative;white-space:nowrap;box-shadow:inset 0 -.28em 0 var(--sun)}
.lead{font-size:1.15rem;color:var(--muted);max-width:33em;margin:0 0 34px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:12px;font-weight:500;border:1.5px solid var(--line);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.solid{background:var(--accent);color:#fff}
.ghost{background:var(--card)}
.light{background:var(--bg);color:var(--ink)}
section{padding:0 0 110px}
.head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1.5px solid var(--line);padding-bottom:14px;margin-bottom:32px}
.head h2{font:600 1.6rem 'Space Grotesk',sans-serif;margin:0;letter-spacing:-.02em}
.head span{color:var(--muted);font:500 .9rem 'Space Grotesk',sans-serif}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{display:flex;flex-direction:column;padding:30px;border:1.5px solid var(--line);background:var(--card);border-radius:16px;transition:transform .2s,box-shadow .2s}
.card.big{grid-column:1/-1;padding:38px}
.card:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}
.tags{display:flex;gap:8px;margin-bottom:20px}
.tags em{font-style:normal;font-size:.75rem;font-weight:500;padding:4px 12px;border-radius:999px;background:var(--tint);color:var(--accent)}
.card h3{font:600 1.5rem 'Space Grotesk',sans-serif;margin:0 0 10px}
.big h3{font-size:2.1rem}
.card p{color:var(--muted);margin:0 0 24px;max-width:40em}
.go{margin-top:auto;font-weight:500;display:inline-flex;gap:6px}
.go i{font-style:normal;transition:transform .2s}
.card:hover .go i{transform:translate(3px,-3px)}
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.big-text{font:600 clamp(1.7rem,4vw,2.5rem)/1.2 'Space Grotesk',sans-serif;letter-spacing:-.025em;margin:0}
.about p{color:var(--muted);margin:0 0 22px}
.about .big-text{color:var(--ink)}
.cta-box{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;padding:56px 48px;border:1.5px solid var(--line);border-radius:20px;background:var(--accent);color:#fff}
.cta-box h2{font:700 clamp(2rem,4.5vw,3rem)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.03em;margin:0 0 8px}
.cta-box p{margin:0;opacity:.85}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.links{display:flex;gap:24px;font-size:.92rem}
.links a{opacity:.85;border-bottom:1.5px solid transparent}
.links a:hover{opacity:1;border-color:#fff}
footer{padding-top:20px;padding-bottom:40px;color:var(--muted);font-size:.85rem}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.status b{animation:none}.reveal{opacity:1;transform:none;transition:none}}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:36px;padding:44px 0 80px}.hero-art{max-width:340px}.cards{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:28px}.cta-box{grid-template-columns:1fr;padding:36px 28px}.card.big{padding:30px}nav{gap:16px}.hl{white-space:normal}}

.hero-art{justify-self:end;width:100%;max-width:400px}
.portrait{position:relative}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:1.5px solid var(--line);border-radius:24px;box-shadow:10px 10px 0 var(--accent)}
.dot-sun{position:absolute;top:-22px;right:-18px;width:72px;height:72px;border-radius:50%;background:var(--sun);border:1.5px solid var(--line);z-index:-1}
.mini-cube{position:absolute;left:-34px;bottom:-30px;width:88px;height:auto;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.mini-cube{animation:none}}
@media (max-width:820px){.hero-art{justify-self:start;margin-left:14px}}
.mark{white-space:nowrap}
@media (max-width:820px){.hero-art{margin:0;width:calc(100% - 24px);max-width:340px}}
@media (max-width:600px){nav a:nth-child(1){display:none}}
@media (max-width:820px){.mini-cube{left:-8px;width:72px}}

.card{position:relative}
.card-logo{position:absolute;right:14px;top:8px;width:110px;height:auto;pointer-events:none}
@media (max-width:820px){.card-logo{position:static;transform:none;width:120px;margin:-22px 0 -18px -20px}}

.card-logo.mark{right:72px;top:50%;transform:translateY(-50%);width:auto;height:170px}
@media (max-width:820px){.card-logo.mark{position:static;transform:none;height:60px;width:auto;margin:0 0 22px}}
@media (max-width:820px){.card-logo.mark{align-self:flex-start}}

.about a.ig{color:var(--ink);border-bottom:1.5px solid var(--accent);transition:color .2s}
.about a.ig:hover{color:var(--accent)}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery figure{margin:0}
.gallery a{display:block;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card);transition:transform .2s,box-shadow .2s}
.gallery a:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.gallery figcaption{margin-top:12px;font-size:.9rem;color:var(--muted)}
.gallery figcaption b{color:var(--ink);font-weight:600;margin-right:6px}
@media (max-width:820px){.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 -24px;padding:6px 24px 14px;-webkit-overflow-scrolling:touch}.gallery figure{flex:0 0 76%;scroll-snap-align:center}}


#renders{padding-bottom:64px}
.divider{margin:56px 0 0;border:0;border-top:1.5px solid var(--line)}

.ig-shot{display:block;margin-top:32px;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.ig-shot:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}
.ig-shot img{display:block;width:100%;height:auto}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
.stats div{border:1.5px solid var(--line);border-radius:14px;background:var(--card);padding:18px 16px}
.stats b{display:block;font:700 clamp(1.3rem,2.6vw,1.9rem)/1.1 'Space Grotesk',sans-serif;letter-spacing:-.02em;color:var(--ink)}
.stats span{display:block;margin-top:8px;font-size:.82rem;line-height:1.35;color:var(--muted)}
.stats div:first-child b{color:var(--accent)}

.stats b .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stats b .roll{display:block;height:1.1em;overflow:hidden;margin:0;color:inherit;font:inherit}
.stats b .roll-strip{display:block;margin:0;color:inherit;font:inherit;transform:translateY(-50%);transition:transform 1.3s cubic-bezier(.2,.9,.25,1)}
.stats b .roll-strip i{display:block;height:1.1em;line-height:1.1;font-style:normal}
.js .stats b .roll-strip{transform:translateY(0)}
.js .stats b .roll.go .roll-strip{transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.js .stats b .roll-strip{transform:translateY(-50%);transition:none}}

h1 .kicker{display:block;font:600 1.05rem/1.4 Inter,system-ui,sans-serif;letter-spacing:.01em;color:var(--muted);margin-bottom:14px}
