* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #fff;
  --fg: #000;
  --muted: #888;
  --divider: #ddd;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'IBM Plex Mono',
               ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Hover marker — a hand-drawn highlighter swipe: ragged top/bottom edges and
     uneven ends. The SVG stretches to each word's width, so the path is a solid
     core band (x 2..254, y 4..36 — always covers the glyphs) with every ragged
     bump pushed OUTWARD toward the viewBox edge. Valleys never cut into the
     core, so no glyph ever clips, however long the word. */
  --mk-black: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 40' preserveAspectRatio='none'><path d='M2.6 4.0 C15.1 2.2 30.9 2.2 41.2 4.0 C52.0 1.1 68.1 1.1 80.3 4.0 C88.6 0.5 105.9 0.5 117.7 4.0 C130.1 1.9 144.7 1.9 157.5 4.0 C166.5 1.0 178.2 1.0 188.2 4.0 C198.2 1.9 216.2 1.9 228.9 4.0 C235.3 0.2 248.4 0.2 254.0 4.0 L253.4 4.0 C256.2 16.0 255.0 28.0 254.0 35.4 L254.0 36.0 C244.3 39.2 228.8 39.2 217.0 36.0 C206.8 37.5 188.0 37.5 177.4 36.0 C171.2 37.9 160.8 37.9 153.7 36.0 C139.4 39.4 114.1 39.4 98.6 36.0 C88.6 38.9 79.0 38.9 69.1 36.0 C59.5 39.8 36.5 39.8 25.9 36.0 C20.6 39.5 10.0 39.5 2.0 36.0 L1.6 36.0 C0.2 26.0 1.0 13.0 2.6 4.0 Z' fill='%23000'/></svg>");
  --mk-white: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 40' preserveAspectRatio='none'><path d='M2.6 4.0 C15.1 2.2 30.9 2.2 41.2 4.0 C52.0 1.1 68.1 1.1 80.3 4.0 C88.6 0.5 105.9 0.5 117.7 4.0 C130.1 1.9 144.7 1.9 157.5 4.0 C166.5 1.0 178.2 1.0 188.2 4.0 C198.2 1.9 216.2 1.9 228.9 4.0 C235.3 0.2 248.4 0.2 254.0 4.0 L253.4 4.0 C256.2 16.0 255.0 28.0 254.0 35.4 L254.0 36.0 C244.3 39.2 228.8 39.2 217.0 36.0 C206.8 37.5 188.0 37.5 177.4 36.0 C171.2 37.9 160.8 37.9 153.7 36.0 C139.4 39.4 114.1 39.4 98.6 36.0 C88.6 38.9 79.0 38.9 69.1 36.0 C59.5 39.8 36.5 39.8 25.9 36.0 C20.6 39.5 10.0 39.5 2.0 36.0 L1.6 36.0 C0.2 26.0 1.0 13.0 2.6 4.0 Z' fill='%23fff'/></svg>");
  --mk: var(--mk-black);
  /* Ghost marker — the same path shown faintly at rest behind every interactive
     word, so "there's something here" without an underline. On hover the full
     --mk sweeps over it (links) or a tooltip appears (tiger). */
  --mk-ghost-black: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 40' preserveAspectRatio='none'><path d='M2.6 4.0 C15.1 2.2 30.9 2.2 41.2 4.0 C52.0 1.1 68.1 1.1 80.3 4.0 C88.6 0.5 105.9 0.5 117.7 4.0 C130.1 1.9 144.7 1.9 157.5 4.0 C166.5 1.0 178.2 1.0 188.2 4.0 C198.2 1.9 216.2 1.9 228.9 4.0 C235.3 0.2 248.4 0.2 254.0 4.0 L253.4 4.0 C256.2 16.0 255.0 28.0 254.0 35.4 L254.0 36.0 C244.3 39.2 228.8 39.2 217.0 36.0 C206.8 37.5 188.0 37.5 177.4 36.0 C171.2 37.9 160.8 37.9 153.7 36.0 C139.4 39.4 114.1 39.4 98.6 36.0 C88.6 38.9 79.0 38.9 69.1 36.0 C59.5 39.8 36.5 39.8 25.9 36.0 C20.6 39.5 10.0 39.5 2.0 36.0 L1.6 36.0 C0.2 26.0 1.0 13.0 2.6 4.0 Z' fill='%23000' fill-opacity='0.10'/></svg>");
  --mk-ghost-white: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 40' preserveAspectRatio='none'><path d='M2.6 4.0 C15.1 2.2 30.9 2.2 41.2 4.0 C52.0 1.1 68.1 1.1 80.3 4.0 C88.6 0.5 105.9 0.5 117.7 4.0 C130.1 1.9 144.7 1.9 157.5 4.0 C166.5 1.0 178.2 1.0 188.2 4.0 C198.2 1.9 216.2 1.9 228.9 4.0 C235.3 0.2 248.4 0.2 254.0 4.0 L253.4 4.0 C256.2 16.0 255.0 28.0 254.0 35.4 L254.0 36.0 C244.3 39.2 228.8 39.2 217.0 36.0 C206.8 37.5 188.0 37.5 177.4 36.0 C171.2 37.9 160.8 37.9 153.7 36.0 C139.4 39.4 114.1 39.4 98.6 36.0 C88.6 38.9 79.0 38.9 69.1 36.0 C59.5 39.8 36.5 39.8 25.9 36.0 C20.6 39.5 10.0 39.5 2.0 36.0 L1.6 36.0 C0.2 26.0 1.0 13.0 2.6 4.0 Z' fill='%23fff' fill-opacity='0.30'/></svg>");
  --mk-ghost: var(--mk-ghost-black);
}

@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --fg: #fff; --muted: #666; --divider: #333; --mk: var(--mk-white); --mk-ghost: var(--mk-ghost-white); }
}

body.light { --bg: #fff; --fg: #000; --muted: #888; --divider: #ddd; --mk: var(--mk-black); --mk-ghost: var(--mk-ghost-black); }
body.dark  { --bg: #000; --fg: #fff; --muted: #666; --divider: #333; --mk: var(--mk-white); --mk-ghost: var(--mk-ghost-white); }

::selection { background: #888; color: #fff; }

body {
  font: 0.875em/1.8 var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 25vh max(8vw, calc(50vw - 315px)) 13vh;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
}

h1 {
  font-family: var(--font-mono);
  font-size: clamp(2.2em, 8.8vw, 3em);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

a { color: inherit; text-decoration: underline; text-decoration-style: solid; }

/* Marker links (.hl) read as prose until the highlight sweeps in on hover */
a.hl { text-decoration: none; }

/* Marker links (.hl — Ona, a16z, and the Previously links) get a highlighter
   stroke that sweeps on: a background image cloned across line breaks, its
   width animating 0→100% on hover. Text knocks out to --bg. */
a.hl {
  /* Two stacked layers: the full marker (top, hidden at 0% width) and the ghost
     (bottom, always full width). At rest only the ghost shows; on hover the full
     marker sweeps left→right over it and the text knocks out. */
  background-image: var(--mk), var(--mk-ghost);
  background-repeat: no-repeat;
  background-position: 0 54%;
  background-size: 0% 1.35em, 100% 1.35em;
  /* Overshoot: ink bleeds just past the text on each end. The negative margin
     cancels the padding so surrounding text never shifts. */
  padding: 0 0.1em;
  margin: 0 -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.42s cubic-bezier(0.6, 0.02, 0.2, 1),
              color 0.15s ease 0.03s;
}

@media (hover: hover) {
  a:hover { font-weight: 700; }
  /* font-weight:400 cancels the link bold above so the knockout reads clean. */
  a.hl:hover {
    background-size: 100% 1.35em, 100% 1.35em;
    color: var(--bg);
    text-decoration: none;
    font-weight: 400;
  }
}

a:focus-visible, .tiger:focus-visible, button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em 1em;
  flex-wrap: wrap;
}

/* Right cluster: social icons + theme toggle, in line with the name.
   On one line, space-between holds it to the right. When the name is wide
   enough to wrap it (mobile), it drops to its own line aligned to the left
   edge — under the name, flush with the body text — not floating right. */
.header-right { display: flex; align-items: center; gap: 1.3em; flex: none; }

.socials { display: flex; align-items: center; gap: 1.1em; }
.socials a { position: relative; display: inline-flex; color: inherit; text-decoration: none; }
.socials svg { width: 1.2em; height: 1.2em; display: block; fill: currentColor; }
/* Invisible expanded hit area so the small icons are easy to tap on touch
   screens. Sized to fill the gaps without overlapping the neighbours, and it
   leaves the visual size, spacing, and focus ring untouched. */
.socials a::after { content: ""; position: absolute; inset: -13px -7px; }
@media (hover: hover) {
  .socials a:hover { opacity: 0.5; }
}

/* Theme toggle — a tactile keycap that latches: a raised cap with a sun in light,
   a flat cap with a moon in dark. The cap takes the mode's colours; only the drop
   shadow toggles (raised vs flat), and a click dips the face onto its base. */
#theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* Stop iOS double-tap-to-zoom when tapping the toggle quickly. */
  touch-action: manipulation;
  position: relative;
  width: 30px;
  height: 26px;
  padding: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  background: var(--bg);
  border: 1.5px solid var(--fg);
  border-radius: 6px;
  box-shadow: 0 3px 0 0 var(--fg);
  transform: translateY(0);
  transition: transform 0.13s cubic-bezier(0.3, 0.8, 0.4, 1),
              box-shadow 0.13s cubic-bezier(0.3, 0.8, 0.4, 1);
}
/* Expanded tap area, same trick as the social icons (~44px, no visual change). */
#theme-toggle::after { content: ""; position: absolute; inset: -10px -8px; }

#theme-toggle svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.15s cubic-bezier(0.3, 0.8, 0.4, 1);
}

/* Icon reflects the current mode: sun in light, moon in dark. Mirrors the shadow
   latch below — system sets it via @media, a manual theme class overrides. */
#theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  #theme-toggle .icon-sun { display: none; }
  #theme-toggle .icon-moon { display: block; }
}
body.light #theme-toggle .icon-sun { display: block; }
body.light #theme-toggle .icon-moon { display: none; }
body.dark #theme-toggle .icon-sun { display: none; }
body.dark #theme-toggle .icon-moon { display: block; }

/* Latched depth: raised (shadow) in light, flat (no shadow) in dark. Manual
   classes override system. */
@media (prefers-color-scheme: dark) {
  #theme-toggle { box-shadow: 0 0 0 0 var(--fg); }
}
body.light #theme-toggle { box-shadow: 0 3px 0 0 var(--fg); }
body.dark  #theme-toggle { box-shadow: 0 0 0 0 var(--fg); }

/* Tactile dip on click: the face presses down onto its base, shadow collapses. */
#theme-toggle:active,
body.light #theme-toggle:active,
body.dark #theme-toggle:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 0 var(--fg);
}

/* Hover wakes the legend: the sun/moon pops a touch toward you. A movement, not a
   colour change — fading or tinting just greys the icon/cap, which we don't want. */
@media (hover: hover) {
  #theme-toggle:hover svg { transform: scale(1.2); }
}

.lede { font-size: 17px; line-height: 1.5; margin: 1.4em 0 2em; }
.block { margin-bottom: 1em; }

/* Previously — career list. Em-dash markers, like a list typed in plain text. */
.tree { list-style: none; margin-top: 0.55em; }
.tree li { position: relative; padding-left: 1.2em; margin-bottom: 0.2em; }
.tree li::before { content: "—"; position: absolute; left: 0; }

/* Tiger — "long/short funds" is a wink, not a link, but it behaves like one:
   ghost marker at rest, then on hover / keyboard focus it sweeps to the full
   knockout marker just like the links. A 🐯 tooltip also appears on hover / tap
   / keyboard focus. */
.tiger {
  position: relative;
  white-space: nowrap;
  background-image: var(--mk), var(--mk-ghost);
  background-repeat: no-repeat;
  background-position: 0 54%;
  background-size: 0% 1.35em, 100% 1.35em;
  padding: 0 0.1em;
  margin: 0 -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.42s cubic-bezier(0.6, 0.02, 0.2, 1),
              color 0.15s ease 0.03s;
}
/* Keyboard focus sweeps the full marker too — a far clearer indicator than a
   thin outline alone, and identical in both themes. */
.tiger:focus-visible {
  background-size: 100% 1.35em, 100% 1.35em;
  color: var(--bg);
}
.tiger-pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5em);
  transform: translateX(-50%) translateY(4px) scale(0.9);
  transform-origin: bottom center;
  font-size: 1.3em;
  line-height: 1;
  padding: 0.32em 0.42em;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.18s ease,
              transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Downward pointer — a rotated square straddling the bubble's bottom edge. */
.tiger-pop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  transform: translate(-50%, -50%) rotate(45deg);
}
.tiger.open .tiger-pop,
.tiger:focus-visible .tiger-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
@media (hover: hover) {
  .tiger:hover {
    background-size: 100% 1.35em, 100% 1.35em;
    color: var(--bg);
  }
  .tiger:hover .tiger-pop {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #theme-toggle,
  #theme-toggle svg,
  a.hl,
  .tiger,
  .tiger-pop { transition: none !important; }
}

/* Mobile — the 25vh/13vh offset centers the page on desktop but wastes a third
   of a phone screen, so trim it. The name and theme toggle share the top line;
   the social icons drop to their own line below, left-aligned under the name.
   Dissolving .header-right (contents) puts all three in one wrapping flex row,
   so the icons can take a full-width row of their own. */
@media (max-width: 600px) {
  body { padding-top: 12vh; padding-bottom: 9vh; }
  .header-right { display: contents; }
  .header-row { row-gap: 0.9em; }
  h1 { margin-right: auto; }
  /* Optical nudge: center the keycap on the name's x-height midline. The name
     reads as mostly lowercase, so cap-height centering looks too high. Uses top
     (1:1) rather than margin, which align-items:center would only half-apply. */
  #theme-toggle { order: 1; top: 3px; }
  .socials { order: 2; flex-basis: 100%; }
}