:root{color-scheme:light;--paper:#f5f7f8;--ink:#25313c;--muted:#5b6772;--accent:#445f71;--focus:#245f8a;--line:#c6cdd2}
*{box-sizing:border-box}
html{background:var(--paper);font-family:Manrope,"Segoe UI",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-width:280px}
::selection{background:#d2e1e9;color:#162b38}
a{-webkit-tap-highlight-color:#c8dbe8;touch-action:manipulation}
a:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:4px}
.skip-link{position:fixed;top:16px;left:16px;z-index:10;transform:translateY(-180%);padding:12px 18px;background:var(--ink);color:white;text-decoration:none}
.skip-link:focus{transform:translateY(0)}
.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;position:relative;isolation:isolate;overflow:hidden;background-image:radial-gradient(circle,#a5afb840 .75px,transparent .95px);background-size:20px 20px}
.header,.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:2}
.header{padding:clamp(24px,4vw,52px) max(24px,env(safe-area-inset-right),4.5vw) 0 max(24px,env(safe-area-inset-left),4.5vw)}
.wordmark{display:inline-flex;align-items:baseline;gap:3px;font-weight:700;font-size:24px;letter-spacing:-.04em;line-height:1.3}
.brand-dot{height:5px;width:5px;border-radius:50%;background:var(--accent)}
.site-domain{font-size:12px;font-weight:500;letter-spacing:.005em;color:var(--muted)}
.main{display:grid;place-items:center;position:relative;min-height:610px;outline-offset:-8px;padding:100px 24px 120px}
.surface{position:absolute;inset:50% auto auto 50%;width:1600px;height:1000px;transform:translate(-50%,-49%);background:radial-gradient(ellipse 390px 215px at 50% 54%,var(--paper) 45%,#f5f7f8ed 62%,#f5f7f800 100%),url('/assets/dot-surface.svg') center/contain no-repeat;pointer-events:none;z-index:-1}
/* A static paper well: the shadow sits below the rim, rather than glowing. */
.surface::before{content:"";position:absolute;left:50%;top:47%;width:830px;height:460px;border-radius:50%;transform:translate(-50%,-50%);background:var(--paper);box-shadow:inset 0 22px 36px -29px #5b697326,inset 0 -20px 35px -26px #ffffff,0 22px 38px -38px #aab7c23d;z-index:-1}
.hero{text-align:center;position:relative;max-width:700px;animation:settle 1100ms cubic-bezier(.16,1,.3,1) both}
h1{font-size:clamp(40px,5.4vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.1;margin:0;text-wrap:balance;scroll-margin-top:30px}
.full-stop{color:var(--accent)}
.description{font-size:15px;line-height:1.7;font-weight:500;color:var(--muted);margin:23px 0 30px;text-wrap:pretty}
.project-link{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 24px;border-radius:28px;background:var(--ink);color:#fff;text-decoration:none;font-size:13px;font-weight:600;box-shadow:0 5px 9px -6px #24333b70;transition:background-color .2s,transform .2s,box-shadow .2s}
.project-link:hover{background:#3b4f5f;transform:translateY(-2px);box-shadow:0 9px 15px -10px #24333b90}
.project-link:active{transform:translateY(0);background:#192630}
.destination{display:block;font-size:11px;line-height:1.5;font-weight:500;color:var(--muted);margin-top:13px}
.footer{padding:0 max(24px,env(safe-area-inset-right),4.5vw) max(28px,env(safe-area-inset-bottom),3vw) max(24px,env(safe-area-inset-left),4.5vw);font-size:11px;line-height:1.7;color:var(--muted);font-weight:500}
.parent-brand{color:var(--ink);font-weight:600}
.status{display:inline-flex;align-items:center;gap:8px}
.status-mark{width:6px;height:6px;border-radius:50%;background:#657984;box-shadow:0 0 0 3px #65798412}
@keyframes settle{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.main{min-height:700px}.surface{transform:translate(-50%,-49%) scale(1.12)}}
@media(max-width:600px){.header{padding-top:26px}.wordmark{font-size:21px}.site-domain{font-size:10px}.main{min-height:550px;padding:100px 22px 120px}.surface{transform:translate(-50%,-49%) scale(.72)}h1{font-size:clamp(36px,9vw,52px);letter-spacing:-.035em;line-height:1.14}.description{font-size:13px;margin:19px 0 27px}.project-link{font-size:12px;padding:0 22px}.footer{font-size:10px;gap:16px}}
@media(max-width:350px){.site-domain{display:none}.footer{align-items:flex-start;flex-direction:column;gap:9px}.main{min-height:490px}.surface{transform:translate(-50%,-49%) scale(.62)}}
@media(max-height:650px) and (min-width:601px){.main{min-height:450px;padding:70px 24px 80px}h1{font-size:54px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero{animation:none}.project-link{transition:none}.project-link:hover{transform:none}}
@media(forced-colors:active){.project-link{border:1px solid ButtonText}.surface{display:none}.status-mark,.brand-dot{background:CanvasText}}
