:root{--bg:#f4f1e9;--ink:#202c28;--muted:#555f58;--rule:#c5ccc0}body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}.shell{width:min(1240px,90%)}nav{font-size:15px;gap:22px}nav a{min-height:44px;display:flex;align-items:center}.logo{font:800 32px system-ui}.label,.num{font-size:12px;letter-spacing:1.2px}.hero{position:relative;isolation:isolate;overflow:hidden;padding:70px 0 65px}.hero:before,.hero:after{content:'';position:absolute;border:1px solid #8fa086;border-radius:50%;z-index:-1;animation:orbit 16s ease-in-out infinite}.hero:before{width:440px;height:440px;right:0;top:70px;background:radial-gradient(circle at 30% 30%,#dce5bd88,transparent 60%)}.hero:after{right:100px;top:130px;width:240px;height:240px;animation-direction:reverse}h1{font:750 clamp(64px,11.8vw,152px)/1.08 system-ui;letter-spacing:-.065em;margin:50px 0 28px;animation:enter 1s both}.intro{font:400 22px/1.6 system-ui;max-width:510px}.hero-bottom{animation:enter 1s .2s both}.small-link{font:600 14px system-ui;background:var(--ink);color:white;padding:18px 24px;border:0;border-radius:40px;transition:transform .25s,background .25s;min-height:48px}.small-link:hover{background:var(--accent);color:white;transform:translateY(-4px)}.index h2{font:650 40px/1.2 system-ui;letter-spacing:-1.5px}.index{padding:65px 0}.row{padding:30px 24px;border:1px solid var(--rule);border-radius:18px;margin-bottom:16px;background:#ffffff65;transition:transform .3s,background .3s,box-shadow .3s}.row:first-child{padding-top:30px}.social:hover{background:#dce5bd;transform:translateY(-5px);box-shadow:0 14px 35px #20302112}.row-title{font:650 28px system-ui;letter-spacing:-.7px}.row-copy{font-size:16px}.arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:white}.note{font:16px/1.7 system-ui}.about{padding:70px 0}.about p{font:450 30px/1.5 system-ui}.signature{font:600 20px system-ui}.progress{position:fixed;left:0;top:0;height:3px;background:var(--accent);width:0;z-index:10}.ticker{overflow:hidden;border-block:1px solid var(--rule);padding:20px 0;margin-bottom:20px}.ticker-track{display:flex;width:max-content;gap:36px;animation:drift 32s linear infinite;font:600 17px system-ui;letter-spacing:3px;color:var(--muted)}.ticker:hover .ticker-track{animation-play-state:paused}.motion-button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:24px;padding:12px 16px;min-height:44px;cursor:pointer}footer{font:12px system-ui;align-items:center;flex-wrap:wrap}.animate .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}.animate .reveal.visible{opacity:1;transform:none}@keyframes enter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes orbit{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-35px,20px) scale(.9)}}@keyframes drift{to{transform:translateX(-50%)}}.skip{position:fixed;top:10px;left:10px;transform:translateY(-150%);background:var(--ink);color:white;padding:15px;z-index:20}.skip:focus{transform:none}.paused *{animation:none!important;transition:none!important}.paused .reveal{opacity:1!important;transform:none!important}@media(max-width:650px){nav{gap:14px;font-size:14px}.hero{padding:45px 0}.hero:before{width:240px;height:240px;right:-80px;top:110px}.hero:after{width:160px;height:160px;right:-40px;top:150px}h1{font-size:clamp(52px,12.5vw,82px);letter-spacing:-.065em}.intro{font-size:19px}.index h2{font-size:32px}.row{padding:24px 16px;grid-template-columns:24px 1fr auto;gap:10px}.row:first-child{padding-top:24px}.row-title{font-size:24px}.row-copy{font-size:15px}.about p{font-size:24px}.index,.about{padding:45px 0}.ticker-track{font-size:14px}footer{font-size:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.animate .reveal{opacity:1;transform:none}}
/* Personal branding and layered motion */
.logo{font:750 clamp(18px,2.3vw,28px)/1.2 system-ui;letter-spacing:-1px;white-space:nowrap}.logo span{color:var(--accent);font-weight:450}
nav a{position:relative}nav a:after{content:'';position:absolute;bottom:5px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}nav a:hover:after,nav a:focus-visible:after{transform:scaleX(1)}
.hero{--mx:0px;--my:0px}.hero:before{translate:var(--mx) var(--my);transition:translate .8s ease-out;background:radial-gradient(circle at 35% 35%,#dce5bdaa,transparent 65%)}.hero:after{translate:calc(var(--mx) * -.7) calc(var(--my) * -.7);transition:translate 1s ease-out}
.hero-dot{display:inline-block;animation:dot-bob 4s ease-in-out infinite}.hero-top .dot{box-shadow:0 0 0 0 #ae4c3333;animation:signal 3s ease-out infinite}
.row{position:relative;overflow:hidden}.row:before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff88 50%,transparent 75%);transform:translateX(-120%);pointer-events:none}.row:hover:before{animation:sheen 1s ease}.social .arrow{transition:transform .35s,background .35s}.social:hover .arrow{transform:rotate(-12deg);background:var(--accent)}
.reveal.visible .num{animation:enter .8s .1s both}.signature{animation:signature-color 8s ease infinite}.small-link{box-shadow:0 6px 20px #20302112}.small-link:active{transform:scale(.96)}
@keyframes dot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes signal{0%{box-shadow:0 0 0 0 #ae4c3344}80%,100%{box-shadow:0 0 0 9px #ae4c3300}}@keyframes sheen{to{transform:translateX(120%)}}@keyframes signature-color{0%,100%{color:var(--accent)}50%{color:#35654a}}
@media(min-width:651px) and (max-width:900px){.hero:before{right:-110px}.hero:after{right:0}.hero-bottom{align-items:start}.intro{max-width:390px;font-size:20px}.index,.about{gap:30px;grid-template-columns:1fr 1.4fr}}
@media(max-width:650px){header{flex-wrap:wrap;gap:12px}.logo{font-size:22px}nav{gap:16px}.hero-top .label{line-height:1.6}.hero:before{opacity:.65}.hero:after{opacity:.65}}
@media(max-width:380px){header{align-items:start}nav{width:100%;justify-content:space-between}.row{grid-template-columns:1fr auto}.row .num{display:none}}
@media(prefers-reduced-motion:reduce){.hero:before,.hero:after{translate:none!important}.hero-dot,.signature,.dot{animation:none!important}}
.paused .hero:before,.paused .hero:after{translate:none!important}