/* Stealth — one screen: a few quiet lines, the name as the sign-off. */
:root{color-scheme:dark;--bg:#0b0b0b;--text:#e8e8e8;--muted:#8a8a8a;--rule:#242424;--wordmark:#e8e8e8;--gutter:clamp(1.25rem,3.4vw,3rem);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#dedede;color:#0b0b0b}
p,h1{margin:0;font-weight:400}

.page{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;padding:var(--gutter) var(--gutter) 0}

.top,.meta{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;color:var(--muted);letter-spacing:-.005em}

.statement{align-self:center;padding-block:4rem}
h1{font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.2;letter-spacing:-.035em;max-width:22ch}
.muted{color:var(--muted)}
.email{display:inline-block;margin-top:1.6rem;font-size:clamp(1rem,1.2vw,1.15rem);color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#5a5a5a;text-underline-offset:.3em;padding-block:.5rem}
.email:hover{text-decoration-color:var(--text)}
.email:focus-visible{outline:2px solid var(--text);outline-offset:6px;border-radius:1px}

.bottom{border-top:1px solid var(--rule);padding-top:1rem}
/* Sized so the eight letters span gutter to gutter (the word is ~2.77em wide
   at this tracking); it sits on the bottom edge, which clips nothing but the
   round letters' overshoot. overflow:hidden keeps that overshoot from adding
   a scrollbar. */
.wordmark{font-size:calc((100vw - 2 * var(--gutter)) / 2.77);font-weight:500;letter-spacing:-.07em;line-height:.76;margin:.04em 0 0 -.035em;padding-bottom:.015em;overflow:hidden;white-space:nowrap;user-select:none;color:var(--wordmark);animation:rise 1.2s cubic-bezier(.2,.7,.1,1) both}
@keyframes rise{from{opacity:0;transform:translateY(8%)}to{opacity:1;transform:none}}

@media(max-width:600px){
 .top,.meta{font-size:.8125rem}
 .statement{align-self:end;padding-block:3rem}
 h1{font-size:1.75rem}
}
@media(prefers-reduced-motion:reduce){.wordmark{animation:none}}