:root{
  color-scheme: dark light;
  --bg:#0d0d0d;
  --bg-raised:#161616;
  --bg-surface:#1e1e1e;
  --bg-hover:#262626;
  --border:#3a3a3a;
  --border-subtle:#2a2a2a;
  --fg-bright:#e0e0e0;
  --fg-primary:#b8b8b8;
  --fg-secondary:#7a7a7a;
  --fg-muted:#999999;
  --accent:#2d6b60;
  --accent-bright:#3d8878;
  --accent-hover:#1e4d45;
  --green:#7ec87e;
  --shadow-a:rgba(0,0,0,0.55);
  --body-width: clamp(46ch, 60vw, 70ch);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f5f5f5;
    --bg-raised:#f8f8f8;
    --bg-surface:#f2f2f2;
    --bg-hover:#e8e8e8;
    --border:#c0c0c0;
    --border-subtle:#d8d8d8;
    --fg-bright:#111111;
    --fg-primary:#333333;
    --fg-secondary:#666666;
    --fg-muted:#555555;
    --accent:#5a9080;
    --accent-bright:#3d8878;
    --accent-hover:#406a60;
    --green:#3a7a4a;
    --shadow-a:rgba(17,17,17,0.10);
  }
}
:root[data-theme="light"]{
  --bg:#f5f5f5;
  --bg-raised:#f8f8f8;
  --bg-surface:#f2f2f2;
  --bg-hover:#e8e8e8;
  --border:#c0c0c0;
  --border-subtle:#d8d8d8;
  --fg-bright:#111111;
  --fg-primary:#333333;
  --fg-secondary:#666666;
  --fg-muted:#555555;
  --accent:#5a9080;
  --accent-bright:#3d8878;
  --accent-hover:#406a60;
  --green:#3a7a4a;
  --shadow-a:rgba(17,17,17,0.10);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg-primary);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:.95rem; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--accent); color:#fff; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }
a{ color:inherit; }
img{ max-width:100%; }
:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }

.mono{ font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }

.skip-link{ position:absolute; left:-9999px; top:auto; }
.skip-link:focus{
  left:1rem; top:calc(1rem + env(safe-area-inset-top,0px)); z-index:100;
  background:var(--bg-raised); color:var(--fg-bright); padding:.6rem 1rem;
  border:1px solid var(--border); font-size:.8rem;
}

.dotfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(var(--border-subtle) 1px, transparent 0);
  background-size:24px 24px;
}

.chrome{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:calc(1rem + env(safe-area-inset-top,0px)) clamp(1.25rem,4vw,2.5rem) 1.5rem;
  background:linear-gradient(to bottom, var(--bg) 20%, transparent 100%);
}
.chrome-mark{
  text-decoration:none; color:var(--fg-bright); font-size:.8rem; letter-spacing:.02em;
  border-bottom:1px solid transparent;
}
.chrome-mark:hover{ border-bottom-color:var(--accent-bright); }
.chrome-right{ display:flex; align-items:center; gap:clamp(1rem,3vw,1.75rem); }
.chrome-nav{ display:flex; gap:clamp(.9rem,2.5vw,1.5rem); }
.chrome-nav a{
  text-decoration:none; color:var(--fg-secondary); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; border-bottom:1px solid transparent; padding-bottom:2px;
}
.chrome-nav a:hover{ color:var(--fg-bright); border-bottom-color:var(--accent-bright); }
.theme-toggle{
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-secondary);
  background:transparent; border:1px solid var(--border); border-radius:3px; padding:.3rem .55rem;
  cursor:pointer;
}
.theme-toggle:hover{ color:var(--fg-bright); border-color:var(--accent-bright); }

.wrap{ position:relative; z-index:2; max-width:980px; margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem); }

.hero{ position:relative; }
.hero .wrap{ padding-top:clamp(7rem,16vw,9rem); padding-bottom:clamp(3rem,7vw,4.5rem); position:relative; z-index:2; }

.eyebrow{ margin:0 0 .9rem; font-size:.75rem; letter-spacing:.08em; color:var(--fg-secondary); }
h1.name{
  margin:0 0 .6rem; font-weight:700; letter-spacing:-.01em; color:var(--fg-bright);
  font-size:clamp(2rem,5vw,2.75rem); line-height:1.15;
}
.tagline{ margin:0 0 1.6rem; font-size:1.05rem; color:var(--fg-secondary); font-style:italic; }

.bio{ margin:0 0 1.75rem; }
.bio p{ margin:0 0 1.1rem; font-size:1rem; line-height:1.75; color:var(--fg-primary); }
.bio p:last-child{ margin-bottom:0; }
.bio a{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
.bio blockquote{
  margin:1.5rem 0 0; padding-left:1rem; border-left:2px solid var(--accent-bright);
}
.bio blockquote p{ margin:0; font-size:1rem; color:var(--fg-bright); }

.hero-links{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin:1.75rem 0 0; }

.social-icons{ display:flex; align-items:center; gap:1rem; }
.social-icons a{ color:var(--fg-secondary); display:inline-flex; }
.social-icons a:hover{ color:var(--accent-bright); }
.social-icons svg{ width:1.35rem; height:1.35rem; }

.buttons{ display:flex; flex-wrap:wrap; gap:.7rem; }
.button{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  font-size:.8rem; letter-spacing:.02em; color:var(--fg-bright);
  background:var(--bg-raised); border:1px solid var(--border); border-radius:999px;
  padding:.5rem 1.1rem;
}
.button:hover{ border-color:var(--accent-bright); color:var(--accent-bright); }
.button-icon{ width:.8rem; height:.8rem; flex:none; }

section.stack{ position:relative; z-index:2; padding-block:clamp(2rem,5vw,3rem); border-top:1px solid var(--border-subtle); }
.stack-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.stack-head h2{ margin:0; font-size:1.05rem; font-weight:600; color:var(--fg-bright); text-transform:uppercase; letter-spacing:.04em; }
.stack-head .hint{ font-size:.72rem; color:var(--fg-muted); letter-spacing:.02em; }

.row-list{ list-style:none; margin:0; padding:0; }
.row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:.9rem; border-bottom:1px solid var(--border-subtle);
}
.row:first-child{ border-top:1px solid var(--border-subtle); }
.row-main{ min-width:0; }
.row-title{ margin:0; font-size:.98rem; font-weight:500; color:var(--fg-bright); }
.row:hover .row-title{ color:var(--accent-bright); }
.row-copy{ margin:.3rem 0 0; font-size:.82rem; color:var(--fg-secondary); max-width:56ch; }
.row-tag{ margin:.4rem 0 0; font-size:.7rem; letter-spacing:.02em; }
.row-date{ flex:none; font-size:.75rem; color:var(--fg-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }

.tag--accent{ color:var(--accent-bright); }

.page-head{ position:relative; z-index:2; padding:clamp(7rem,16vw,8.5rem) 0 clamp(1.5rem,4vw,2rem); }
.page-head h1{ margin:0 0 .5rem; font-weight:700; letter-spacing:-.01em; color:var(--fg-bright); font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.2; }
.page-head p.lede{ margin:0; max-width:var(--body-width); color:var(--fg-secondary); font-size:.95rem; }

.post{ position:relative; z-index:2; padding-bottom:clamp(3rem,7vw,5rem); }
.post-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin-bottom:2rem; font-size:.75rem; color:var(--fg-muted); }
.post-body{ max-width:var(--body-width); font-size:1rem; line-height:1.8; color:var(--fg-primary); }
.post-body h2, .post-body h3, .post-body h4{ color:var(--fg-bright); line-height:1.3; margin:2rem 0 .8rem; }
.post-body p{ margin:0 0 1.2rem; }
.post-body a{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }
.post-body blockquote{ margin:1.5rem 0; padding-left:1rem; border-left:2px solid var(--border); color:var(--fg-secondary); }
.post-body pre{ background:var(--bg-surface); border:1px solid var(--border); border-radius:6px; padding:1rem; overflow-x:auto; }
.post-body code{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.85em; }
.post-body p code{ background:var(--bg-surface); padding:.1em .35em; border-radius:3px; }
.post-body img{ border-radius:6px; }
.post-body ul, .post-body ol{ padding-left:1.3rem; margin:0 0 1.2rem; }
.post-tags{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem; }

.back-link{ display:inline-block; margin-top:2.5rem; font-size:.78rem; color:var(--fg-secondary); text-decoration:none; border-bottom:1px solid transparent; }
.back-link:hover{ color:var(--fg-bright); border-bottom-color:var(--accent-bright); }

.site-footer{
  position:relative; z-index:2; border-top:1px solid var(--border-subtle);
  padding-block:clamp(1.5rem,4vw,2rem);
}
.site-footer p{ margin:0; font-size:.72rem; color:var(--fg-muted); }

@media (max-width:480px){
  .chrome-mark{ display:none; }
}