:root{
  --bg:#ffffff; --fg:#14161a; --muted:#5c6472; --line:#e6e9ee;
  --accent:#2f6fed; --card:#f7f8fa; --chip:#eef1f7;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0d0f13; --fg:#e9ebee; --muted:#98a1ae; --line:#222732;
         --accent:#7aa2ff; --card:#151920; --chip:#1c2330; }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:72px 24px 96px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* hero */
.hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;
      padding-bottom:34px;border-bottom:1px solid var(--line);margin-bottom:12px}
.avatar{position:relative;width:112px;height:112px;flex:0 0 112px;
        border-radius:50%;overflow:hidden;background:var(--card);
        border:1px solid var(--line);display:grid;place-items:center}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar .initials{display:none;font-size:2.1rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.avatar.mono .initials{display:block}
.hero-text{flex:1 1 300px;min-width:0}
.hero h1{font-size:2.5rem;line-height:1.08;margin:0 0 8px;letter-spacing:-.03em}
.tagline{font-size:1.1rem;color:var(--fg);margin:0 0 8px}
.meta-line{color:var(--muted);font-size:.9rem;margin:0}

h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
   color:var(--muted);margin:48px 0 14px;font-weight:600}
p{margin:0 0 14px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);color:var(--fg);font-size:.85rem;
      padding:6px 13px;border-radius:99px;border:1px solid var(--line)}

.note{background:var(--card);border:1px solid var(--line);
      border-left:3px solid var(--accent);border-radius:8px;padding:16px 18px}
.note p{margin:0}

.links a{margin-right:20px}

footer{margin-top:72px;padding-top:22px;border-top:1px solid var(--line);
       display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
       color:var(--muted);font-size:.875rem}
footer nav a{margin-right:16px}

/* legal pages */
.legal h1{font-size:2rem;margin:0 0 8px;letter-spacing:-.02em}
.legal .lede{color:var(--muted);margin:0}
.legal .meta{color:var(--muted);font-size:.875rem}
.legal h2{font-size:1.1rem;text-transform:none;letter-spacing:-.01em;
          color:var(--fg);margin:34px 0 10px;font-weight:600}
.legal header{border-bottom:1px solid var(--line);margin-bottom:36px;padding-bottom:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:18px 0}
ul{padding-left:20px}
li{margin-bottom:6px}
code{background:var(--card);padding:2px 6px;border-radius:4px;font-size:.88em}

@media (max-width:520px){
  .wrap{padding:48px 20px 72px}
  .hero h1{font-size:2rem}
  .avatar{width:88px;height:88px;flex-basis:88px}
}