@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: local('NeueHaasDisplayPro-55Roman'),
       local('Neue Haas Grotesk Display Pro 55 Roman');
  font-weight: 400;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: local('NeueHaasDisplayPro-65Medium'),
       local('Neue Haas Grotesk Display Pro 65 Medium');
  font-weight: 500;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: local('NeueHaasDisplayPro-75Bold'),
       local('Neue Haas Grotesk Display Pro 75 Bold');
  font-weight: 700;
}

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

:root {
  --bg: #fafaf8;
  --fg: #0d0d0d;
  --muted: #999;
  --subtle: #ccc;
  --link: #0d0d0d;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.6;
}

/* ── Layout ── */
.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 56px 28px 120px;
}

/* ── Nav ── */
nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 64px;
  flex-wrap: wrap;
  gap: 12px;
}

.nav-pages {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.nav-pages a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.14s;
}

.nav-pages a:hover,
.nav-pages a.active {
  color: var(--fg);
}

.nav-social {
  display: flex;
  gap: 18px;
}

.nav-social a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.14s;
}

.nav-social a:hover {
  color: var(--fg);
}

/* ── Name ── */
h1 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}

/* ── Hero quote ── */
.hero-quote {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 48px;
  padding: 0;
  border: none;
  line-height: 1.6;
}

.hero-quote cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: var(--subtle);
  margin-top: 4px;
}

/* ── Article layout ── */
.article-header {
  margin-bottom: 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid #ebebeb;
}

.article-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.article-title {
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 12px;
}

.article-desc {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
}

.article-body {
  font-size: 1rem;
  line-height: 1.78;
  color: #2a2a2a;
}

.article-body p {
  margin-bottom: 1.5em;
}

.article-body h2 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.2em 0 0.8em;
  color: var(--fg);
}

.article-body blockquote {
  margin: 2em 0;
  padding-left: 20px;
  border-left: 2px solid var(--subtle);
  font-style: italic;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.article-body a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--subtle);
  transition: text-decoration-color 0.14s;
}

.article-body a:hover {
  text-decoration-color: var(--fg);
}

.article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.4em 0;
}

.article-body figure {
  margin: 2em 0;
}

.article-body figcaption {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  line-height: 1.5;
}

/* ── Interactive charts ── */
.chart {
  margin: 2.4em 0;
}

.chart-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-align: center;
  margin-bottom: 6px;
}

.chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.chart-grid { stroke: #ececea; stroke-width: 1; }
.chart-axis { stroke: #cfcfca; stroke-width: 1; }

.chart-tick {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 13px;
  fill: var(--muted);
}

.chart-axis-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 14px;
  fill: #888;
}

.chart-legend {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 14px;
  fill: #555;
}

.chart-mark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 14px;
}

.chart-guide { stroke: #b8b8b3; stroke-width: 1; stroke-dasharray: 3 4; transition: opacity 0.12s; }
.chart-hover-dot { transition: opacity 0.12s; }

.chart-tip {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  background: rgba(13, 13, 13, 0.92);
  color: #fafaf8;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
  z-index: 5;
}

.chart-tip .d {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 0.95rem;
  margin-bottom: 3px;
  color: #fff;
}

.chart-tip .k { margin-right: 3px; }

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 48px 0 0;
}

.empty-icon {
  font-size: 1.5rem;
  color: var(--subtle);
  line-height: 1;
}

.empty-state p {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ── Page title (subpages) ── */
h2.page-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 48px;
}

/* ── Sections ── */
.section {
  margin-bottom: 40px;
}

.section-heading {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 14px;
  letter-spacing: 0;
}

/* ── Bullet lists ── */
ul.bio-list {
  list-style: none;
  padding: 0;
}

ul.bio-list li {
  font-size: 0.97rem;
  line-height: 1.7;
  color: #333;
  padding-left: 16px;
  position: relative;
  margin-bottom: 4px;
}

ul.bio-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--muted);
}

ul.bio-list li a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--subtle);
  transition: text-decoration-color 0.14s;
}

ul.bio-list li a:hover {
  text-decoration-color: var(--fg);
}

/* ── Entry list (writing / research) ── */
.entry-list {
  list-style: none;
}

.entry-list li {
  padding: 20px 0;
  border-bottom: 1px solid #ebebeb;
}

.entry-list li:first-child {
  border-top: 1px solid #ebebeb;
}

.entry-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}

.entry-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.entry-meta {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
}

.entry-desc {
  font-size: 0.88rem;
  color: #666;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════
   LIQUID GLASS SYSTEM
   Z-index map:
     9997  #goo-wrap  — metaball merge shapes (above glass so not blurred by it)
     9998  #glass-pill — frosted glass visual (backdrop-filter page content below)
   ══════════════════════════════════════════════════════════════════ */

/* ── Goo layer: creates the organic metaball shape during transitions ── */
#goo-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;       /* ABOVE pill so pill's backdrop-filter doesn't blur goo */
  filter: url(#svg-goo);
}

#goo-curr,
#goo-ghost {
  position: absolute;
  border-radius: 999px;
  /* Light enough to read as glass, opaque enough for the goo threshold to fire.
     alpha must stay above 9/22 ≈ 0.41 at blob centres after Gaussian blur. */
  background: rgba(210, 208, 204, 0.72);
  opacity: 0;
  transition: opacity 0.38s ease;
}

/* ── Glass pill ─────────────────────────────────────────────────────
   Follows the dpawlikowski layer structure:
     ::before  — white tint fill
     (base)    — backdrop blur + refraction
     ::after   — chromatic edge highlights (mix-blend: screen)
   ──────────────────────────────────────────────────────────────── */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px) scale(0.86); }
  to   { opacity: 1; transform: translateY(0px)  scale(1);    }
}

#glass-pill {
  position: fixed;
  border-radius: 999px;
  pointer-events: none;
  z-index: 9998;
  isolation: isolate;
  overflow: hidden;

  /* ONLY opacity is CSS-transitioned; left/top/width/height driven by JS lerp */
  opacity: 0;
  transition: opacity 0.18s ease;

  /* Gradient sheen — matches dpawlikowski's animatable --lg-sheen-angle approach */
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 0.40),
    rgb(255 255 255 / 0.12) 38%,
    rgb(255 255 255 / 0.22)
  );

  /* Outer border + drop shadow */
  border: 1px solid rgb(255 255 255 / 0.50);
  box-shadow:
    0 12px 48px rgb(0 0 0 / 0.12),
    0  2px  8px rgb(0 0 0 / 0.07);

  /* Base frosted glass (all browsers) */
  -webkit-backdrop-filter: blur(8px) saturate(180%);
          backdrop-filter: blur(8px) saturate(180%);
}

/* Chrome 76+: SVG filter in backdrop-filter → real optical distortion */
@supports (backdrop-filter: url('#glass-refract'))
       or (-webkit-backdrop-filter: url('#glass-refract')) {
  #glass-pill {
    -webkit-backdrop-filter: url('#glass-refract') blur(8px) saturate(180%);
            backdrop-filter: url('#glass-refract') blur(8px) saturate(180%);
  }
}

/* ::before — white tint fill (controls how "milky" the glass looks) */
#glass-pill::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.24);
}

/* ::after — top/bottom rims + chromatic edge fringe via mix-blend: screen */
#glass-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  box-shadow:
    /* bright top rim — the single strongest "glass" cue */
    inset 0  1.5px 0   rgb(255 255 255 / 0.95),
    /* top inner glow */
    inset 0  8px  20px rgb(255 255 255 / 0.12),
    /* left chromatic fringe (red) */
    inset  1px 0       rgb(255 86 116 / 0.28),
    /* right chromatic fringe (cyan) */
    inset -1px 0       rgb(54 226 255 / 0.24),
    /* bottom inner shadow (darkens with screen = stays subtle) */
    inset 0 -10px 16px rgb(180 180 200 / 0.14);
}

/* One-time rise animation on very first appearance */
#glass-pill.rise-in {
  animation: rise-in 0.38s cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}