:root {
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  /* light — warm off-white "paper" (HN-ish); neutrals warmed to match */
  --bg:      #f6f5ee;
  --bg-elev: #fdfcf8;
  --hair:    #e6e2d7;
  --hair-2:  #efebe1;
  --text:    #1a1a17;
  --muted:   #6b645b;
  --faint:   #746d64;
  --accent:  #0d7a63;   /* deep teal-green, AA on the warm bg (4.8:1) */
  --accent-bg:#12b8a6;  /* vivid teal for solid marks (cursor/block) */
  --code-bg: #0e1216;   /* code blocks are always dark */

  --measure: 40rem;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1216; --bg-elev:#141a20; --hair:#232c34; --hair-2:#1a2128;
    --text:#dfe4e8; --muted:#8b97a2; --faint:#7c8894; --accent:#35d0a8; --accent-bg:#35d0a8;
  }
}
/* explicit toggle wins over the media query in BOTH directions */
:root[data-theme="light"] {
  --bg:#f6f5ee; --bg-elev:#fdfcf8; --hair:#e6e2d7; --hair-2:#efebe1;
  --text:#1a1a17; --muted:#6b645b; --faint:#746d64; --accent:#0d7a63; --accent-bg:#12b8a6;
}
:root[data-theme="dark"] {
  --bg:#0e1216; --bg-elev:#141a20; --hair:#232c34; --hair-2:#1a2128;
  --text:#dfe4e8; --muted:#8b97a2; --faint:#7c8894; --accent:#35d0a8; --accent-bg:#35d0a8;
}

/* Animate navigations between pages of different widths (e.g. home 40rem <-> résumé 52rem).
   Progressive enhancement: unsupported browsers (e.g. Firefox) just navigate instantly. */
@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--serif); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--accent-bg) 32%, transparent); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

/* skip-to-content link: off-screen until keyboard-focused */
.skip-link { position: absolute; left: 0.5rem; top: -3rem; z-index: 100; font-family: var(--mono); font-size: 0.8rem; background: var(--bg-elev); color: var(--text); border: 1px solid var(--hair); border-radius: 4px; padding: 0.5rem 0.9rem; transition: top .15s; }
.skip-link:focus { top: 0.5rem; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad); }

/* ---- top bar ---- */
header.bar {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.bar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 54px; font-family: var(--mono);
}
.brand { font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); transition: color .15s; view-transition-name: nav-brand; }
.brand:hover { color: var(--accent); }
/* home only: bar wordmark starts hidden and is revealed by the scroll "dock" effect
   (JS drives opacity/transform per scroll). Added by the head script; absent without JS
   or under reduced-motion, so the wordmark stays visible as a graceful fallback. */
html.dock-hero .brand { opacity: 0; transform: translateY(4px); pointer-events: none; }
/* keep it reachable: reveal on keyboard focus even at the top (beats the JS inline opacity) */
html.dock-hero .brand:focus-visible { opacity: 1 !important; transform: none !important; pointer-events: auto; }
nav.tabs { display: flex; gap: clamp(0.5rem, 3vw, 1.4rem); font-size: 0.8rem; view-transition-name: nav-tabs; }
nav.tabs a { color: var(--muted); padding: 0.15rem 0; position: relative; transition: color .15s; }
nav.tabs a:hover { color: var(--text); }
nav.tabs a[aria-current="page"] { color: var(--text); }
nav.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--accent); }

/* ---- section label ---- */
.label { font-family: var(--mono); font-size: 0.74rem; font-weight: 400; letter-spacing: 0.02em; color: var(--faint); margin: 0 0 1rem; display: flex; align-items: center; gap: 0.6rem; }
.label::before { content: ""; width: 0.5rem; height: 0.5rem; border: 1.5px solid var(--accent); transform: rotate(45deg); flex: none; }
.label .rule { flex: 1; height: 1px; background: var(--hair); }

/* main is also .wrap (which sets side padding + 0 top/bottom); this higher-specificity
   selector restores the top breathing room .wrap would otherwise cancel out */
main.wrap { padding-top: clamp(3.5rem, 9vw, 5.25rem); padding-bottom: 1rem; }

/* ---- hero ---- */
.hero .role { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); letter-spacing: 0.01em; margin: 0 0 0.8rem; }
/* the home tagline (job title) is a quiet subtitle, not an accent label — keeps a single green pop (the cursor) in the hero */
.hero .role.tagline { color: var(--muted); letter-spacing: 0.05em; margin: 0 0 1.7rem; }
.hero .role a { border-bottom: 1px solid var(--hair); }
.hero .role a:hover { color: var(--text); }
.hero h1 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; margin: 0 0 0.7rem; text-wrap: balance; transform-origin: left top; }
.hero h1.sm { font-size: clamp(1.7rem, 6vw, 2.3rem); margin-bottom: 1rem; }
.cursor { display: inline-block; width: 0.56ch; height: 0.92em; background: var(--accent-bg); margin-left: 0.12ch; transform: translateY(0.06em); animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero p.bio { margin: 0 0 1.6rem; font-size: 1.12rem; line-height: 1.62; max-width: 34rem; }
.hero p.bio strong { font-weight: 600; }
.hero p.bio a { border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.hero p.bio a:hover { border-color: var(--accent); }

.links-inline { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-family: var(--mono); font-size: 0.82rem; margin: 0 0 1.8rem; }
.links-inline a { color: var(--muted); display: inline-flex; align-items: center; gap: 0.3rem; transition: color .15s; padding: 0.1rem 0; }
.links-inline a:hover { color: var(--text); }
.links-inline a::before { content: "→"; color: var(--accent); opacity: 0; margin-right: -0.9rem; transform: translateX(-0.3rem); transition: opacity .15s, transform .15s, margin .15s; }
.links-inline a:hover::before { opacity: 1; transform: none; margin-right: 0; }

.id-strip { font-family: var(--mono); font-size: 0.72rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; padding-top: 1.3rem; border-top: 1px solid var(--hair); }
.id-strip span { display: inline-flex; align-items: center; gap: 0.4rem; }
.id-strip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bg); flex: none; }

section.block { margin-top: clamp(2.8rem, 8vw, 3.8rem); }

/* ---- writing list ---- */
ul.posts { list-style: none; margin: 0; padding: 0; }
ul.posts li { border-top: 1px solid var(--hair); }
ul.posts li:last-child { border-bottom: 1px solid var(--hair); }
.post { position: relative; display: grid; grid-template-columns: 6.2rem 1fr; gap: 0.2rem 1.1rem; padding: 1.05rem 0.4rem 1.05rem 0.2rem; align-items: baseline; transition: background .15s, padding .15s; }
.post:hover { background: var(--hair-2); padding-left: 0.7rem; padding-right: 0.7rem; }
.post .date { font-family: var(--mono); font-size: 0.74rem; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.post .body { min-width: 0; }
.post .t { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.post .t a { color: inherit; }
/* stretch the title link across the whole row so the card stays clickable, while the
   title remains the single accessible link + a heading for screen-reader navigation */
.post .t a::after { content: ""; position: absolute; inset: 0; }
.post .arrow { color: var(--accent); opacity: 0; margin-left: 0.3rem; transition: opacity .15s, margin .15s; font-family: var(--mono); }
.post:hover .arrow { opacity: 1; margin-left: 0.5rem; }
.post .dek { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.98rem; line-height: 1.5; }
@media (max-width: 34rem) { .post { grid-template-columns: 1fr; gap: 0.35rem; } .post .date { order: -1; } }

.more { font-family: var(--mono); font-size: 0.8rem; margin-top: 1.4rem; }
.more a { color: var(--accent); }
.more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- prose (about + post bodies) ---- */
.prose p { margin: 0 0 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a.inl, .prose .post-body a { border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); transition: border-color .15s; }
.prose a.inl:hover, .prose .post-body a:hover { border-color: var(--accent); }

/* post body typography */
.post-body { font-size: 1.08rem; }
.post-body h2, .post-body h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 2.2rem 0 0.9rem; }
.post-body h2 { font-size: 1.3rem; }
.post-body h3 { font-size: 1.08rem; color: var(--muted); }
.post-body ul, .post-body ol { padding-left: 1.3rem; margin: 0 0 1.15rem; }
.post-body li { margin: 0.35rem 0; }
.post-body blockquote { margin: 1.3rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 2px solid var(--accent); color: var(--muted); font-style: italic; }
.post-body :not(pre) > code { font-family: var(--mono); font-size: 0.86em; background: var(--hair-2); border: 1px solid var(--hair); border-radius: 4px; padding: 0.08em 0.36em; }
.post-body pre { font-family: var(--mono); font-size: 0.82rem; line-height: 1.55; background: var(--code-bg) !important; color: #e6e6e6; border: 1px solid var(--hair); border-radius: 8px; padding: 1rem 1.1rem; overflow-x: auto; margin: 1.3rem 0; }
.post-body pre code { font-size: inherit; background: none; border: 0; padding: 0; }
.post-body hr { border: 0; border-top: 1px solid var(--hair); margin: 2.2rem 0; }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- chips + now ---- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--mono); font-size: 0.78rem; }
.chips span { padding: 0.28rem 0.6rem; border: 1px solid var(--hair); border-radius: 4px; color: var(--muted); background: var(--bg-elev); }
.now { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.now li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.7rem; }
.now li::before { content: "»"; font-family: var(--mono); color: var(--accent); }
.now b { font-weight: 600; }
.now .m { color: var(--muted); }

/* ---- elsewhere ---- */
.elsewhere { list-style: none; margin: 0; padding: 0; }
.elsewhere li { border-top: 1px solid var(--hair); }
.elsewhere li:last-child { border-bottom: 1px solid var(--hair); }
.elsewhere a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.85rem 0.2rem; font-family: var(--mono); font-size: 0.86rem; transition: padding .15s, background .15s; }
.elsewhere a:hover { background: var(--hair-2); padding-left: 0.5rem; padding-right: 0.5rem; }
.elsewhere .k { color: var(--text); }
.elsewhere .v { color: var(--faint); }
.elsewhere a:hover .v { color: var(--accent); }

/* ---- footer ---- */
footer { margin-top: clamp(3.5rem, 10vw, 5rem); border-top: 1px solid var(--hair); padding: 1.6rem 0 3rem; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
footer .grow { flex: 1; min-width: 12rem; }
.theme-btn { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); background: transparent; border: 1px solid var(--hair); border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; transition: color .15s, border-color .15s; }
.theme-btn:hover { color: var(--text); border-color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}