:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a48;
  --paper: #f4f3f0;
  --accent: #3a5bd9;      /* pen blue — links */
  --accent-b: #6c8ae4;
  --marker: #ea6ee4;      /* highlighter */
  --redpen: #b23a52;      /* margin notes, footnote numbers — darkened from #d1495b for AA text contrast on paper */
  --header-h: 60px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Mate", Georgia, "Times New Roman", serif;
  background-color: var(--paper);
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  color: var(--ink);
  overflow-x: hidden;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  font-size: 0.85rem;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Headers */
h1, h2, h3,
.section-title {
  font-family: "Cabin Sketch", "Comic Sans MS", cursive;
  font-weight: 700;
  line-height: 1.15;
}

/* ---- Hand-drawn box: irregular radius (works everywhere) + optional
       SVG displacement on the border layer only (text stays crisp). ---- */
.rough-box {
  position: relative;
  isolation: isolate;
}

.rough-box::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2.5px solid var(--ink);
  border-radius: 255px 12px 225px 15px / 15px 225px 18px 255px;
  filter: url(#rough-ink);
  pointer-events: none;
  z-index: -1;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  background: rgba(244, 243, 240, 0.72);
  backdrop-filter: blur(6px);
  z-index: 100;
}

.header-inner {
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: "Cabin Sketch", cursive;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.wordmark span {
  color: var(--redpen);
}

/* Nav */
.main-nav {
  display: flex;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
}

.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 6px;
  background: var(--marker);
  border-radius: 2px 6px 3px 5px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
  z-index: -1;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Side dot nav */
.dot-nav {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dot-nav a {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(26, 26, 26, 0.28);
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.dot-nav a:hover {
  border-color: var(--redpen);
}

.dot-nav a.active {
  background: var(--redpen);
  border-color: var(--redpen);
  transform: scale(1.25);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ---- Marker highlight (uneven highlighter swipe) ----
   Same technique as .rough-box: the wobble lives on an absolutely
   positioned ::before (run through the shared #rough-ink SVG filter)
   so the ink stroke gets a hand-drawn, slightly uneven edge without
   displacing the text itself. Built from --marker (the same pink as
   the nav underline / link dots) at low alpha so it reads as
   translucent ink over paper rather than a flat block. */
.marker {
  position: relative;
  isolation: isolate;
  padding: 1px 4px 3px;
  margin: 0 -1px;
}

/* ---- Handwritten margin notes ---- */
.margin-note {
  font-family: "Caveat", "Bradley Hand", cursive;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--redpen);
  transform: rotate(-4deg);
}

.margin-note--inline {
  display: inline-block;
  font-size: 1.15rem;
  transform: rotate(-2deg);
  margin-left: 6px;
}

/* Intro section */
.intro {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  display: flex;
  align-items: center;
  gap: 64px;
}

.intro-logo {
  flex: 0 0 auto;
  width: 264px;
  position: relative;
}

.photo-frame {
  background: #fff;
  padding: 12px 12px 14px;
  transform: rotate(-1.8deg);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.55);
}

.photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.margin-note--photo {
  position: absolute;
  left: 4px;
  bottom: -58px;
  width: 190px;
  text-align: left;
  transform: rotate(-4deg);
}

.intro-text {
  flex: 1;
  min-width: 0;
}

.eyebrow {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.intro-text h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.intro-text .role-title {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.intro-text .role-title::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 1px;
  height: 3px;
  background: var(--accent);
  opacity: 0.22;
  border-radius: 2px 7px 3px 6px;
  z-index: -1;
}

.typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  animation: typewriter-blink 1s steps(1) infinite;
}

@keyframes typewriter-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.intro-text > p:not(.role-title):not(.eyebrow) {
  margin-top: 24px;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 48ch;
}

.link-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px;
}

.link-row a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.link-row a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50% 40% 55% 45%;
  display: inline-block;
  flex: 0 0 auto;
}

.dot-a { background: var(--marker); }
.dot-b { background: var(--accent); }

/* ---- Content sections ---- */
.section {
  max-width: 1320px;
  margin: 0 auto;
  padding: 84px 24px;
  position: relative;
}

.section + .section::before,
main > .section:first-of-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  border-top: 2px dashed rgba(26, 26, 26, 0.28);
  filter: url(#rough-ink-lg);
}

.section-kicker {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--redpen);
  margin-bottom: 8px;
}

.section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.section-lede {
  font-family: "Mate", Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 26px;
  max-width: 58ch;
}

.prose {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 90ch;
  margin-bottom: 16px;
  text-align: justify;
}

.prose--now {
  margin-top: 8px;
}

.now-tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--marker);
  padding: 2px 8px;
  border-radius: 4px 10px 5px 9px;
  margin-right: 8px;
}

.mini-heading {
  font-family: "Cabin Sketch", cursive;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 34px 0 14px;
}

.skills-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.skills-list li {
  padding: 5px 14px;
  border: 2px solid rgba(26, 26, 26, 0.22);
  border-radius: 999px 14px 999px 14px;
  background: rgba(255, 255, 255, 0.4);
}

.skills-list li:nth-child(3n) { transform: rotate(-1.5deg); }
.skills-list li:nth-child(3n + 1) { transform: rotate(1deg); }

/* ---- Career timeline ---- */
.career-timeline {
  position: relative;
  margin-top: 28px;
}

.margin-note--timeline {
  display: block;
  margin: 0 0 6px 6px;
}

.timeline-mobile {
  position: relative;
}

.timeline-mobile-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}

.timeline-mobile-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 8 14;
  filter: url(#rough-ink);
}

.timeline {
  list-style: none;
  counter-reset: timeline-step;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 20px 0 0;
}

.timeline-item {
  counter-increment: timeline-step;
  position: relative;
  padding: 0 0 40px 104px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:last-child { padding-bottom: 0; }

/* Same circular node system as the desktop SVG's .timeline-node-circle,
   just positioned in HTML/CSS instead of SVG space; the hand-drawn filter
   stays off this element on purpose (it holds the number text) — see the
   rough-ink usage note above .rough-box. */
.timeline-node-badge {
  position: absolute;
  left: 34px;
  top: 0;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50% 45% 52% 48%;
  background: var(--paper);
  border: 2.5px solid var(--ink);
  color: var(--ink);
  font-family: "Cabin Sketch", cursive;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.timeline-node-badge::before {
  content: counter(timeline-step);
}

.timeline-item h3 {
  margin: 0;
}

.timeline-item p {
  margin-top: 6px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* Desktop serpentine SVG */
.timeline-svg {
  display: none;
}

.timeline-path {
  stroke: var(--ink);
  filter: url(#rough-ink);
}

.timeline-node-circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3;
  filter: url(#rough-ink);
}

.timeline-node-number {
  fill: var(--ink);
  font-family: "Cabin Sketch", cursive;
  font-size: 16px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.timeline-node {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.timeline-node.is-visible { opacity: 1; }

.tl-node-content {
  text-align: center;
  font-family: "Mate", Georgia, "Cambria", serif;
}

.tl-node-content p {
  font-size: 0.95rem;
  line-height: 1;
  color: var(--ink-soft);
  margin: 0;
  background: var(--paper);
  padding: 2px 4px;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tl-node-label {
  display: inline-block;
  font-family: "Mate", Georgia, "Cambria", serif;
  font-size: 1.1rem;
  font-weight: bold;
  font-weight: 700;
  color: var(--ink);
  /* opaque so the dashed connector that runs behind some rows can't
     show through the text */
  background: #a9aef6;
  box-shadow: 0 0 0 4px var(--paper);
  border-radius: 4px 11px 5px 12px;
  padding: 4px 12px;
  margin-bottom: 6px;
}

.tl-node-star {
  display: inline-block;
  margin-top: 8px;
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--redpen);
  transform: rotate(-4deg);
}

@media (min-width: 900px) {
  .timeline-svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .career-timeline .timeline-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- Footnotes / writing ---- */
.section--ruled .footnotes-list {
  position: relative;
}

.footnotes-list {
  list-style: none;
  counter-reset: fn;
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-top: 12px;
}

.fn {
  display: flex;
  gap: 18px;
  background: rgba(255, 255, 255, 0.55);
  padding: 22px 26px;
  transition: transform 0.18s ease;
}

/* The shared .rough-box::before radius (up to 255px) is sized for tall
   boxes like the photo frame. On the shorter, wide footnote cards the
   browser scales it down but the curve still eats into the left/bottom
   edge enough to visually overlap the last line of text — so give this
   box its own smaller, still-asymmetric radius that never grows past
   what a short card can safely absorb. */
.fn.rough-box::before {
  border-radius: 50px 10px 36px 10px / 10px 36px 12px 50px;
}

.fn:nth-child(even) { transform: rotate(-0.5deg); }
.fn:nth-child(odd) { transform: rotate(0.4deg); }

.fn:hover {
  transform: translateY(-3px) rotate(0deg);
}

.fn-num {
  font-family: "Cabin Sketch", cursive;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--redpen);
  line-height: 1;
  flex: 0 0 auto;
}

.fn-body { min-width: 0; }

.fn-type {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px 10px 5px 9px;
  margin-bottom: 8px;
}

.fn-type--essay { background: rgba(58, 91, 217, 0.16); color: var(--accent); }
.fn-type--talk { background: rgba(209, 73, 91, 0.16); color: var(--redpen); }
.fn-type--note { background: rgba(26, 26, 26, 0.1); color: var(--ink); }
.fn-type--pub { background: rgba(255, 217, 74, 0.55); color: #6b5300; }

.fn-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.fn-orig-lang {
  font-weight: 500;
  font-size: 0.85em;
  color: var(--ink-soft);
}

.fn-title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.2s ease;
}

.fn-title a:hover {
  color: var(--accent);
  background-size: 100% 2px;
}

.fn-meta {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.fn-blurb {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* faint ruled-paper lines behind the writing section */
.section--ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 33px,
    rgba(58, 91, 217, 0.07) 34px
  );
  background-position: 0 84px;
}

/* ---- Contact ---- */
.contact-card {
  background: rgba(255, 255, 255, 0.6);
  padding: 30px 32px 26px;
  max-width: 560px;
  transform: rotate(-0.6deg);
}

.contact-intro {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.contact-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
  word-break: break-word;
}

.contact-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.contact-location {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.contact-form {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 2px dashed rgba(26, 26, 26, 0.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.contact-field input,
.contact-field textarea {
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(26, 26, 26, 0.25);
  border-radius: 4px;
  padding: 9px 11px;
  resize: vertical;
  transition: border-color 0.2s ease;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-submit {
  align-self: flex-start;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.contact-submit:hover {
  background: var(--accent-b);
  border-color: var(--accent-b);
}

.contact-submit:active {
  transform: translateY(1px);
}

.contact-form-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: -8px;
}

.signature {
  font-family: "Caveat", cursive;
  font-size: 2rem;
  color: var(--redpen);
  margin-top: 14px;
  transform: rotate(-4deg);
}

/* ---- Footer ---- */
.site-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--ink-soft);
  border-top: 2px dashed rgba(26, 26, 26, 0.22);
}

.to-top {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.to-top:hover { color: var(--accent); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .typewriter-cursor { animation: none; }
  .timeline-node { opacity: 1; transition: none; }
  .timeline-item { opacity: 1; transform: none; transition: none; }
  .fn:hover { transform: none; }
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 2px solid rgba(26, 26, 26, 0.12);
    transform: translateY(-150%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: 16px 0;
  }

  .nav-links a::after { display: none; }

  .intro {
    flex-direction: column;
    text-align: center;
    gap: 68px;
    padding: 44px 24px 72px;
  }

  .intro-logo { width: 210px; }

  .margin-note--photo {
    left: 50%;
    bottom: -50px;
    width: 200px;
    text-align: center;
    transform: translateX(-50%) rotate(-3deg);
  }

  .intro-text > p:not(.role-title):not(.eyebrow) {
    max-width: none;
  }

  .eyebrow { margin-top: 4px; }

  .link-row { justify-content: center; }

  .dot-nav { display: none; }

  .section { padding: 60px 22px; }

  .skills-list { gap: 8px 10px; }

  .fn { flex-direction: column; gap: 10px; }

  .site-footer { justify-content: center; text-align: center; }

  /* Justified text produces uneven word-spacing "rivers" once lines are
     this short, so drop back to ragged-right on narrow screens. */
  .prose { text-align: left; }
}