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

:root {
  --bg:        #fafcfd;
  --fg:        #32404f;
  --fg-light:  rgba(50, 64, 79, 0.58);
  --border:    rgba(50, 64, 79, 0.1);
  --primary:   #8dcbc8;
  --font-sans: 'Libre Baskerville', Georgia, serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;
  --font-serif: 'Libre Baskerville', Georgia, serif;
}

html { scroll-behavior: smooth; }

/* ── Loader ── */
#loader {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 36px;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

#loader.out {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

.loader-letters { display: flex; gap: 8px; }

.loader-letter {
  font-family: 'Noto Serif TC', serif;
  font-size: 80px;
  line-height: 1;
  color: var(--fg);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loader-letter.in { opacity: 1; transform: none; }

.loader-bar-wrap { width: 80px; height: 1px; background: var(--border); }

.loader-bar {
  height: 1px; width: 0%;
  background: var(--fg);
  transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Yellow dot that trails behind the native cursor */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F5C428;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  will-change: transform;
}

.custom-cursor.hidden { opacity: 0; }

/* Sparkle trail dots */
.sparkle-dot {
  position: fixed;
  border-radius: 50%;
  background: #F5C428;
  box-shadow: 0 0 5px 1px rgba(245, 196, 40, 0.45);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  animation: sparkle-fade 0.5s ease-out forwards;
}

@keyframes sparkle-fade {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -80%) scale(0.15); }
}


::selection {
  background: rgba(141, 203, 200, 0.4);
  color: var(--fg);
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY (mirrors Rachel's global styles) ── */
h1 {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}

h1 em { font-style: italic; }

/* Crayon underlines */
.word-ring {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.underline-svg {
  position: absolute;
  bottom: -0.55em;
  left: -0.3em;
  width: calc(100% + 0.6em);
  height: 0.8em;
  pointer-events: none;
  overflow: visible;
}

h3 { font-size: 1.0625rem; } /* 17px */

h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9375rem; /* 15px */
}

p {
  font-size: 0.9375rem;
  color: var(--fg-light);
}

/* ── PAGE SHELL (fixed height + inner scroll, mirrors Rachel's flex h-[100dvh]) ── */
.page-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

.scroll-area {
  flex: 1;
  overflow-y: auto;
  transition: all 0.2s ease;
}

.site-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── NAV ── */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Size container: nav layout breakpoints below use @container queries so
     they track the nav's real width — which shrinks when the Helium panel
     opens — instead of the viewport width. */
  container-type: inline-size;
  container-name: mainnav;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 24px;
  gap: 24px;
  min-height: 64px;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Brand: name + title side by side on sm+, stacked on mobile */
.nav-brand-wrap {
  display: flex;
  align-items: center;
  flex: 1;
}

.nav-brand {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  color: var(--fg);
}

@container mainnav (min-width: 640px) {
  .nav-brand {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

.nav-name {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--fg);
}

.nav-title {
  display: none;
  font-family: var(--font-mono);   /* match .nav-name: font, weight, size, caps */
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--fg-light);           /* color stays distinct on purpose */
}

.nav-sep {
  display: none;
  width: 1px;
  height: 13px;
  background: var(--fg-light);
  opacity: 0.45;
  flex-shrink: 0;
}

/* Title needs ~1240px: brand+title span ~363px from the left, and the
   centered links (452px wide) must clear them on both sides. */
@container mainnav (min-width: 1240px) {
  .nav-title { display: block; }
  .nav-sep   { display: block; }
}

/* Desktop nav links — absolutely centered in the bar */
.nav-links {
  display: none;
  gap: 32px;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

@container mainnav (min-width: 768px) {
  .nav-links { display: flex; }
}

.nav-link {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--fg);
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
  cursor: pointer;
}

.nav-link:hover { opacity: 1; color: var(--primary); }
.nav-link.is-active { opacity: 1; color: var(--fg); }

/* Nav end: LLM button */
.nav-end {
  display: none;
  align-items: center;
  gap: 8px;
}

@container mainnav (min-width: 768px) {
  .nav-end { display: flex; }
}

/* Helium ghost button */
.llm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  opacity: 0.5;
  padding: 8px;
  border-radius: 999px;
  margin-right: -8px;
  transition: opacity 0.2s, color 0.2s;
  font-family: var(--font-mono);
}

.llm-btn:hover { opacity: 1; color: var(--primary); }

/* Helium is not mounted on blog pages — this static label stands in for the button */
.llm-off {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-right: -8px;
  color: var(--fg);
  opacity: 0.35;
  cursor: default;
  font-family: var(--font-mono);
  transition: opacity 0.2s;
}
.llm-off:hover,
.llm-off:focus-visible { opacity: 0.6; }

.llm-off-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.llm-off-tip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg);
  text-transform: none;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}
.llm-off:hover .llm-off-tip,
.llm-off:focus-visible .llm-off-tip {
  opacity: 1;
  transform: translateY(0);
}

.llm-label {
  font-size: 0.9375rem;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* Hamburger (mobile) */
.hamburger {
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fg);
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.hamburger:hover { opacity: 1; }

@container mainnav (min-width: 768px) {
  .hamburger { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-drawer.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

/* ── MAIN ── */
main { flex: 1; }

.content-pad {
  display: flex;
  flex-direction: column;
  padding: 24px;
  width: 100%;
  align-items: center;
  gap: 28px;
}

/* ── HERO STAGE (centered; typed intro on top, experience revealed below) ── */
.hero-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 40px;      /* space from the top — kept intentionally */
  padding-bottom: 10px;
}

@media (min-width: 1024px) {
  .hero-stage {
    padding-top: 14vh;    /* space from the top — kept intentionally */
    gap: 30px;
  }
}

.hero-panel {
  width: 100%;
  text-align: center;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Panels that reveal on cue (the experience summary) start hidden but still
   reserve their layout space, so nothing shifts when they fade in. */
.hero-panel.reveal-on-cue {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}

.hero-panel.reveal-on-cue.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hero-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Intro panel: center the headline */
.hero-intro h1 {
  margin: 0 auto;
  max-width: 20ch;
}

/* Blinking typewriter caret */
.type-caret {
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 1em;
  margin-left: 0.04em;
  background: var(--primary);
  transform: translateY(0.12em);
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Crayon underline draws itself in after its word finishes typing */
.underline-svg path {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}

.word-ring.drawn .underline-svg path {
  animation: underline-draw 0.5s ease forwards;
}

@keyframes underline-draw {
  to { stroke-dashoffset: 0; }
}

/* ── EXPERIENCE PANEL ── */
.hero-exp-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--fg-light);
  margin-bottom: 22px;
}

.exp-list {
  display: inline-flex;        /* shrink-to-content so the block centers as a unit */
  flex-direction: column;
  gap: 12px;
  text-align: left;            /* rows read left-to-right, block is centered */
}

@media (min-width: 1024px) {
  .exp-list { gap: 8px; }
}

.exp-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

/* Staggered rise-in when the experience panel becomes active */
.hero-exp.is-active .exp-row {
  animation: row-rise 0.5s ease both;
}

.hero-exp.is-active .exp-row:nth-child(1) { animation-delay: 0.05s; }
.hero-exp.is-active .exp-row:nth-child(2) { animation-delay: 0.11s; }
.hero-exp.is-active .exp-row:nth-child(3) { animation-delay: 0.17s; }
.hero-exp.is-active .exp-row:nth-child(4) { animation-delay: 0.23s; }
.hero-exp.is-active .exp-row:nth-child(5) { animation-delay: 0.29s; }
.hero-exp.is-active .exp-row:nth-child(6) { animation-delay: 0.35s; }

@keyframes row-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.edu-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.exp-year {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.9375rem;
  font-weight: 400;
  width: 7rem;
  flex-shrink: 0;
  color: var(--fg);
}

.exp-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 1024px) {
  .exp-detail { flex-direction: row; gap: 8px; align-items: baseline; }
}

.exp-company {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.9375rem;
  font-weight: 400;
  min-width: 12.5rem; /* w-56 */
  color: var(--fg);
}

.exp-company a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s;
}

.exp-company a:hover { color: var(--primary); }

.exp-role {
  font-size: 0.9375rem;
  color: var(--fg-light);
  font-family: var(--font-sans);
  text-transform: none;
}

/* Reduced motion: skip typing/reveal — show both panels static */
@media (prefers-reduced-motion: reduce) {
  .hero-panel.reveal-on-cue {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .underline-svg path { stroke-dashoffset: 0; }
  .hero-exp.is-active .exp-row { animation: none; }
}

/* ── PROJECTS GRID ── */
.work-sections {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.work-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1800px;
}

.research-blurb {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-light);
  padding-top: 4px;
}

.work-section-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-light);
  font-weight: 400;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

/* ── Crayon underline on section labels ── */
.hl-wrap {
  display: inline;
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

.hl-blue   { text-decoration-color: rgba(90,  160, 220, 0.85); }
.hl-purple { text-decoration-color: rgba(180, 140, 225, 0.85); }
.hl-yellow { text-decoration-color: rgba(240, 198,  68, 0.85); }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1800px;
  transition: all 0.3s ease;
}

@media (min-width: 1024px) {
  .projects-grid { grid-template-columns: 1fr 1fr; }
}

.projects-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Horizontal scroll strip */
.exp-scroll {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.exp-scroll::-webkit-scrollbar { display: none; }
.exp-scroll .project-card {
  flex: 0 0 calc(40% - 11px);
}
.exp-scroll.research-scroll .project-card {
  flex: 0 0 clamp(220px, 48%, 320px);
}

/* Project card */
.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}

.project-card:hover { opacity: 0.75; }

/* Thumbnail with aspect ratio */
.project-thumb {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  overflow: hidden;
}

.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-8-5  { aspect-ratio: 8 / 5; }
.ratio-10-7 { aspect-ratio: 10 / 7; }

.project-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.3);
}

.project-pulse {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.10; }
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background-color 0.3s ease;
}

.project-card:hover .project-overlay {
  background: rgba(250, 252, 253, 0.4);
}

.pin-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 3px 7px 3px 6px;
  border-radius: 4px;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

/* Project metadata row */
.project-meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  margin-top: 4px;
  transition: color 0.3s ease;
}

@media (min-width: 1024px) {
  .project-meta { flex-direction: row; }
}

.project-title {
  font-size: 1.0625rem; /* 17px */
  color: var(--fg);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
}

.viewing-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 4px;
}

.project-sub {
  font-size: 0.9375rem; /* 15px */
  color: var(--fg-light);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── HERO LINE BREAKS ── */
.hero-line { display: block; }

/* ── HERO CURLS (full-bleed row in hero grid) ── */
.hero-curls {
  grid-column: 1 / -1;
  width: calc(100% + 48px);
  margin-left: -24px;
}

.hero-curls svg {
  display: block;
  width: 100%;
  height: 36px;
}

/* ── PAGE WAVE BOTTOM ── */
.page-wave-bottom {
  width: 100%;
}

.page-wave-bottom svg {
  display: block;
  width: 100%;
  height: 62px;
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.15s; }
.d2 { transition-delay: 0.3s; }
.d3 { transition-delay: 0.45s; }

/* ── RESEARCH TRACK ── */
.research-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 12px 0;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .research-track {
    grid-template-columns: 1fr;
    max-width: 640px;
    gap: 36px;
  }
}

/* Vertical timeline line no longer applies in the horizontal layout */
.research-line { display: none; }

.research-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

/* Image always sits on top, caption below — regardless of DOM order */
.research-item .project-card    { order: 0; }
.research-item .research-caption { order: 1; }

.research-caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.research-caption .project-title {
  -webkit-line-clamp: unset;
  display: block;
}

.research-caption .project-sub {
  -webkit-line-clamp: unset;
  display: block;
}

/* ── FOOTER ── */
footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1800px;
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    align-items: center;
  }
}

.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.footer-bold {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fg);
}

.footer-heart {
  color: var(--fg-light);
  font-size: 15px;
  cursor: pointer;
  transition: color 0.3s;
  user-select: none;
  /* inline-block is required for transforms (jump/flip) to apply to a span */
  display: inline-block;
  transform-origin: center;
  animation: heart-beat 6s infinite ease-in-out;
}

.footer-heart:hover { color: var(--primary); }

/* A flip happens every 3s (at 0% and 50% of this 6s loop). The colour ALTERNATES
   and holds: flip 1 lands on green and stays green until flip 2, which lands on
   grey and stays grey until the loop restarts. Each flip's motion takes ~0.5s. */
@keyframes heart-beat {
  /* flip 1 → green, then hold green through to 50% */
  0%    { transform: translateY(0)     rotateY(0deg);   color: var(--fg-light); }
  2.5%  { transform: translateY(-10px) rotateY(180deg); color: var(--primary); }
  5%    { transform: translateY(0)     rotateY(360deg); color: var(--primary); }
  50%   { transform: translateY(0)     rotateY(360deg); color: var(--primary); }
  /* flip 2 → grey, then hold grey through to the end (loop point) */
  52.5% { transform: translateY(-10px) rotateY(540deg); color: var(--fg-light); }
  55%   { transform: translateY(0)     rotateY(720deg); color: var(--fg-light); }
  100%  { transform: translateY(0)     rotateY(720deg); color: var(--fg-light); }
}

/* Accessibility: users who prefer reduced motion get a still heart. */
@media (prefers-reduced-motion: reduce) {
  .footer-heart { animation: none; }
}

.footer-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 32px;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .footer-links {
    align-items: center;
    width: auto;
    justify-content: flex-end;
  }
}

.footer-link {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--fg);
  opacity: 0.6;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s, color 0.2s;
}

.footer-link:hover { opacity: 1; color: var(--primary); }

/* ── TODO PAGE ── */
.todo-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.todo-text {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--fg-light);
  letter-spacing: 0.12em;
}

/* ── ABOUT PAGE ── */
.about-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px 0 80px;
  max-width: 680px;
}

.about-photo-wrap {
  width: 100%;
}

.about-photo {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.about-block p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg);
}

.about-closing p {
  color: var(--fg-light);
}

/* ── SHARED SECTION ── */
.page-section {
  width: 100%;
  max-width: 1800px;
}

/* ── HOBBIES PAGE ── */
.hobbies-main {
  flex: 1;
  display: block;
}

.hobbies-layout {
  display: flex;
  align-items: flex-start;
}

.hobbies-coming-soon {
  padding: 96px 40px 140px;
  max-width: 620px;
}

.hobbies-coming-soon .hobbies-intro { margin-bottom: 0; }

.hobbies-toc {
  position: sticky;
  top: 64px;
  flex-shrink: 0;
  width: 100px;
  padding: 48px 0 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--border);
}

.hobbies-feed {
  flex: 1;
  min-width: 0;
}

.htoc-link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-light);
  text-decoration: none;
  transition: color 0.2s;
}

.htoc-link:hover,
.htoc-link.active { color: var(--primary); }

.htoc-ext-link {
  color: var(--fg-light);
  text-decoration: none;
  transition: color 0.2s;
}

.htoc-ext-link:hover { color: var(--primary); }

.hobbies-feed {
  padding: 48px 40px 100px;
}

.hobby-section {
  margin-bottom: 96px;
}

/* Editorial kicker — "01 — Sports". Mono, echoes the TOC labels. */
.hobby-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--fg-light);
  margin-bottom: 14px;
}

.hobby-kicker-num { color: var(--primary); }

/* Page-level intro — the thesis of the whole page. Same serif pull-quote
   voice as the section captions, a step larger because it speaks for all
   four sections, not one. */
.hobbies-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--fg);
  max-width: 620px;
  margin-bottom: 88px;
}

/* Section caption is now a serif pull-quote — the emotional hook. */
.hobby-section-caption {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--fg);
  font-style: italic;
  max-width: 560px;
  line-height: 1.6;
  margin-bottom: 44px;
}

.hobby-subsection {
  margin-bottom: 40px;
}

.hobby-sub-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  margin-bottom: 12px;
}

/* ── Masonry ──
   CSS multi-column gives true masonry (varied heights, no ragged rows) with
   zero JS. `column-width` (not a fixed count) makes the column count responsive
   on its own — more columns on wide screens, fewer on phones, no media query. */
.hobby-masonry {
  column-width: 300px;   /* wide columns → ~3 across; big, editorial photos */
  column-gap: 10px;
}

/* Every direct child — placeholder OR real <img> — must not split across a
   column break, and carries its own vertical gap (column-gap is horizontal only). */
.hobby-masonry > * {
  break-inside: avoid;
  margin-bottom: 10px;
}

.hobby-img {
  width: 100%;
  height: auto;   /* keep the photo's native ratio — that IS the masonry effect */
  display: block;
}

/* Placeholder tiles. Varied aspect ratios so the page reads as masonry even
   before real photos land. Drop the modifier class when you swap in an <img>. */
.hobby-ph {
  width: 100%;
  aspect-ratio: 1;          /* default: square */
  background: var(--border);
  opacity: 0.5;
}

.hobby-ph.ar-tall     { aspect-ratio: 3 / 4; }
.hobby-ph.ar-portrait { aspect-ratio: 4 / 5; }
.hobby-ph.ar-wide     { aspect-ratio: 3 / 2; }
.hobby-ph.ar-pano     { aspect-ratio: 16 / 9; }

@media (max-width: 600px) {
  .hobbies-toc {
    padding: 32px 0 32px 16px;
    gap: 16px;
  }

  .hobbies-feed {
    padding: 32px 20px 80px;
  }

  .hobby-section-caption { font-size: 1.05rem; }

  /* Narrower columns keep 2 across on a phone instead of collapsing to 1. */
  .hobby-masonry { column-width: 150px; column-gap: 6px; }
  .hobby-masonry > * { margin-bottom: 6px; }
}

/* ── SHARED SECTION ── */
.sec-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  margin-bottom: 24px;
}

/* ── COURSEWORK ── */
.course-list {
  display: flex;
  flex-direction: column;
}

.course-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.course-row:first-child { border-top: 1px solid var(--border); }

.course-code {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.9375rem;
  color: var(--fg);
  min-width: 5rem;
  flex-shrink: 0;
}

.course-name {
  font-size: 0.9375rem;
  color: var(--fg);
  flex: 1;
}

.course-term {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--fg-light);
  flex-shrink: 0;
}

/* ── HOBBIES ── */
.hobbies-list {
  display: flex;
  flex-direction: column;
}

.hobby-row {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.hobby-row:first-child { border-top: 1px solid var(--border); }

.hobby-name {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.9375rem;
  color: var(--fg);
  min-width: 10rem;
  flex-shrink: 0;
}

.hobby-note {
  font-size: 0.9375rem;
  color: var(--fg-light);
}

/* ── BLOG ── */
.blog-list {
  display: flex;
  flex-direction: column;
}

.blog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}

.blog-row:first-child { border-top: 1px solid var(--border); }
.blog-row:hover       { opacity: 0.5; }

.blog-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-title {
  font-size: 1.0625rem;
  color: var(--fg);
  font-weight: 400;
}

.blog-desc {
  font-size: 0.875rem;
  color: var(--fg-light);
}

.blog-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.blog-date {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--fg-light);
}

.blog-arrow {
  font-size: 16px;
  color: var(--fg-light);
  transition: transform 0.2s, color 0.15s;
}

.blog-row:hover .blog-arrow {
  transform: translateX(5px);
  color: var(--fg);
}

/* ── SELECTION FLOATING BUTTON ── */
.sel-btn {
  position: fixed;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fg);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 16px rgba(50, 64, 79, 0.18);
}

.sel-btn.visible {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.sel-btn:hover { background: var(--primary); }

/* ── MOBILE FAB ── */
.mobile-fab {
  display: flex;
  position: fixed;
  bottom: max(24px, env(safe-area-inset-bottom, 24px));
  right: max(24px, env(safe-area-inset-right, 24px));
  z-index: 1000;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(230, 95, 46, 0.35);
  transition: transform 0.2s, opacity 0.2s;
}

.mobile-fab:active { transform: scale(0.95); }

body.helium-open .mobile-fab { display: none; }

/* Desktop already has the Helium button in the nav bar (.llm-btn) once the
   nav is wide enough to show it — the FAB is redundant there. */
@media (min-width: 768px) {
  .mobile-fab { display: none; }
}

/* ── SIDE PANEL ── */
.side-panel {
  position: relative;
  z-index: 1000;
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-left: 1px solid transparent;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
  pointer-events: none;
}

.side-panel.open {
  width: 380px;
  border-left-color: var(--border);
  pointer-events: auto;
}

/* Inner wrapper stays full width so content doesn't reflow as panel animates */
.sp-inner {
  width: 380px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.sp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.sp-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sp-name {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.2;
}

.sp-info-btn {
  background: none;
  border: none;
  /* Hit target well beyond the 13px icon — a bare icon-sized target is easy
     for the mouse to overshoot on approach, which reads as the tooltip
     being slow when it's really just missing the hover. */
  padding: 8px;
  margin: -8px;
  display: flex;
  align-items: center;
  color: var(--fg-light);
  flex-shrink: 0;
}

.sp-info-btn svg { display: block; }

.sp-info-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 24px;
  right: 24px;
  width: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg);
  text-transform: none;
  font-weight: 400;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
  max-height: min(70vh, 460px);
  overflow-y: auto;
}

.sp-info-tooltip p + p { margin-top: 8px; }

.sp-info-tooltip img {
  display: block;
  width: 100%;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.sp-info-tooltip strong { font-weight: 600; }

.sp-info-btn:hover .sp-info-tooltip,
.sp-info-btn:focus .sp-info-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sp-status {
  font-size: 11px;
  color: var(--fg-light);
  font-family: var(--font-sans);
  text-transform: none;
}

.sp-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--fg-light);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
  line-height: 1;
}

.sp-close:hover { color: var(--fg); }

.sp-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* Shared bubble styles */
.chat-bubble {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--font-sans);
}

.chat-bubble.assistant {
  background: rgba(50, 64, 79, 0.06);
  color: var(--fg);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-bubble.user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-bubble.typing {
  background: rgba(50, 64, 79, 0.06);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg-light);
  animation: typingBounce 1.2s infinite ease-in-out;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── INTRO (initial state) ── */
.sp-intro {
  padding: 0 24px 20px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.side-panel.open .sp-intro {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s 0.22s ease, transform 0.4s 0.22s ease;
}

.sp-intro-label {
  font-size: 13px;
  color: var(--fg-light);
  margin-bottom: 12px;
  font-family: var(--font-sans);
  text-transform: none;
}

.sp-intro-items {
  display: flex;
  flex-direction: column;
}

.sp-intro-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  padding: 12px 0;
  color: var(--fg);
  font-size: 14px;
  font-family: var(--font-sans);
  width: 100%;
  transition: color 0.15s;
}

.sp-intro-item:last-child { border-bottom: none; }
.sp-intro-item:hover      { color: var(--primary); }

.sp-arrow {
  color: var(--fg-light);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.2s;
  margin-top: 1px;
}

.sp-intro-item:hover .sp-arrow {
  color: var(--primary);
  transform: translateX(3px);
}

.sp-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sp-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 16px;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  outline: none;
  transition: border-color 0.15s;
}

.sp-input:focus { border-color: var(--primary); }

.sp-send {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
  opacity: 0.35;
}

.sp-send.active   { opacity: 1; }
.sp-send:hover    { opacity: 0.8; }
.sp-send:disabled { opacity: 0.35; cursor: not-allowed; }

/* Mobile: side panel becomes a full-height right drawer overlay */
@media (max-width: 768px) {
  .side-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 0;
    border-left: none;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0s 0.31s;
    box-shadow: -8px 0 40px rgba(50, 64, 79, 0.12);
  }

  .side-panel.open {
    width: 100%;
    border-left: none;
    transform: translateX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sp-inner { width: 100%; }
}

/* ── Center Peek Modal ── */
.peek-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32, 40, 50, 0.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.peek-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* When Helium panel is open, keep backdrop + modal out of panel's space */
body.helium-open .peek-backdrop {
  right: 380px;
  transition: opacity 0.2s ease, right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.peek-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(740px, 92vw);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(32, 40, 50, 0.18);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.peek-backdrop.open .peek-modal {
  transform: translateY(0) scale(1);
}

.peek-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
  z-index: 1;
}

.peek-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.peek-toc-toggle {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--fg-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.peek-toc-toggle:hover,
.peek-toc-toggle.active {
  color: var(--fg);
  background: var(--border);
}

/* Layout: scroll area + TOC sidebar */
.peek-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.peek-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

/* TOC sidebar */
.peek-toc {
  width: 0;
  overflow: hidden;
  border-left: none;
  flex-shrink: 0;
  transition: width 0.22s cubic-bezier(0.2, 0, 0, 1),
              border-color 0.22s ease;
  display: flex;
  flex-direction: column;
}

.peek-toc.open {
  width: 196px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
}

.peek-toc-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  padding: 16px 16px 8px;
  flex-shrink: 0;
}

.peek-toc-link {
  display: block;
  padding: 5px 16px;
  font-size: 0.8rem;
  color: var(--fg-light);
  text-decoration: none;
  line-height: 1.35;
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.peek-toc-link:hover { color: var(--fg); background: rgba(50,64,79,0.04); }
.peek-toc-link.is-active { color: var(--fg); font-weight: 500; }
.peek-toc-link.is-sub { padding-left: 28px; font-size: 0.75rem; }

.peek-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--fg-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.peek-close:hover {
  color: var(--fg);
  background: var(--border);
}

.peek-external {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fg-light);
  text-decoration: none;
  font-size: 12px;
  font-family: 'Geist Mono', monospace;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.peek-external:hover {
  color: var(--fg);
  background: var(--border);
}

.peek-body {
  padding: 24px 48px 52px;
  flex: 1;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Markdown content styles */
.peek-body h1 {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 24px;
  line-height: 1.25;
}

.peek-body h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  margin: 32px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.peek-body h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg);
  margin: 22px 0 6px;
}

.peek-body h4 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg-light);
  margin: 16px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.peek-body p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 12px;
}

.peek-body ul,
.peek-body ol {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg);
  margin: 0 0 12px;
  padding-left: 20px;
}

.peek-body li { margin-bottom: 4px; }

.peek-body strong { font-weight: 600; }

.peek-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.peek-body em { font-style: italic; }

.peek-body code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.8em;
  background: rgba(50, 64, 79, 0.07);
  padding: 1px 5px;
  border-radius: 3px;
}

.peek-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 16px 0;
}

.peek-body th {
  text-align: left;
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--border);
  color: var(--fg-light);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.peek-body td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}

.peek-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 28px 0;
}

/* Links read as turquoise words. --primary (#8dcbc8) is too pale to carry text on
   the near-white bg, so the deeper #2d8888 from the wave palette does the work and
   the pale tint stays on the underline. */
.peek-body a {
  color: #2d8888;
  text-decoration: underline;
  text-decoration-color: rgba(141, 203, 200, 0.7);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.peek-body a:hover {
  color: #0e5c5c;
  text-decoration-color: #2d8888;
}

/* Fenced code blocks. `pre` owns the background and the horizontal scroll; the
   inner `code` resets the inline-code chip styling above so it doesn't double up. */
.peek-body pre {
  background: rgba(50, 64, 79, 0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 16px;
  overflow-x: auto;
}

.peek-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--fg);
  white-space: pre;
}

/* Images are authored at full retina width; cap them to the column and keep the
   intrinsic ratio so they never overflow the prose measure. */
.peek-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin: 4px 0 6px;
}

.peek-body figure { margin: 0 0 20px; }

.peek-body figcaption {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fg-light);
  text-align: center;
  margin-top: 8px;
}

.peek-body figcaption code { font-size: 0.9em; }

.peek-body blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--primary);
}

.peek-body blockquote p {
  color: var(--fg-light);
  font-style: italic;
  margin-bottom: 6px;
}

.peek-body blockquote p:last-child { margin-bottom: 0; }

.peek-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 20px 0 28px;
}

.peek-gallery img:first-child {
  grid-column: 1 / -1;
}

.peek-gallery img {
  width: 100%;
  border-radius: 6px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
}

/* Peek banner */
.peek-banner {
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
}

.peek-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.peek-banner-color {
  /* colored tint when no image — set inline via style */
}

/* Peek properties table */
.peek-props {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 48px 4px;
}

.peek-prop-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 7px 0;
  border-bottom: none;
}

.peek-prop-key {
  font-family: 'Geist Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fg-light);
  width: 72px;
  flex-shrink: 0;
  padding-top: 3px;
}

.peek-prop-val {
  font-size: 0.85rem;
  color: var(--fg);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.peek-tags { gap: 5px; }

.peek-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: 'Geist Mono', monospace;
  white-space: nowrap;
}

.peek-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: 'Geist Mono', monospace;
}

.peek-prop-link {
  font-size: 0.82rem;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s, border-color 0.15s;
}

.peek-prop-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.peek-progress-wrap {
  align-items: center;
  gap: 10px;
  flex: 1;
}

.peek-progress-track {
  flex: 1;
  max-width: 180px;
  height: 5px;
  background: rgba(50, 64, 79, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

.peek-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.peek-progress-label {
  font-family: 'Geist Mono', monospace;
  font-size: 0.75rem;
  color: var(--fg-light);
}

.peek-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 48px 0;
}

/* Mobile peek */
@media (max-width: 767px) {
  /* Mobile Helium goes full-screen — don't shrink backdrop */
  body.helium-open .peek-backdrop { right: 0; }
}

@media (max-width: 600px) {
  .peek-modal {
    width: 100vw;
    max-height: 90vh;
    border-radius: 12px 12px 0 0;
    align-self: flex-end;
  }

  .peek-backdrop {
    align-items: flex-end;
  }

  .peek-body {
    padding: 24px 20px 40px;
  }

  .peek-props {
    padding: 16px 20px 4px;
  }

  .peek-divider {
    margin: 12px 20px 0;
  }

  /* Hide TOC on mobile — no room */
  .peek-toc-toggle { display: none !important; }
  .peek-toc { display: none !important; }

  .peek-banner {
    aspect-ratio: 16 / 7;
    border-radius: 12px 12px 0 0;
  }
}

/* ── COURSEWORK PAGE ── */
.course-wrap {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 48px 0 80px;
  max-width: 1100px;
  margin: 0 auto;
}

.course-header { max-width: 640px; }

/* Mono kicker — same device as the hobbies page kicker */
.course-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--fg-light);
  margin-bottom: 14px;
}

.course-intro {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--fg);
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 16px;
}

.course-gpa {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-light);
}

.course-gpa-value {
  color: var(--primary);
  font-weight: 500;
}

.course-section { width: 100%; }

/* ── Highlighted course cards ── */
.course-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .course-highlights { grid-template-columns: 1fr 1fr; }
}

.course-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.course-card:hover,
.course-card:focus-visible {
  border-color: rgba(141, 203, 200, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(50, 64, 79, 0.07);
  outline: none;
}

.course-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.course-code { color: var(--primary); font-weight: 500; }
.course-term { color: var(--fg-light); }

.course-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--fg);
}

.course-blurb {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-light);
}

/* ── Grade vs class average — paired bars ── */
.grade-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.gc-row {
  display: grid;
  grid-template-columns: 72px 1fr 34px;
  align-items: center;
  gap: 10px;
}

.gc-label,
.gc-value {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-light);
}

.gc-value { text-align: right; }

.gc-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(50, 64, 79, 0.07);
  overflow: hidden;
}

.gc-fill {
  height: 100%;
  border-radius: 3px;
}

.gc-fill-mine { background: var(--primary); }
.gc-fill-avg  { background: rgba(50, 64, 79, 0.22); }

.course-open {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  padding-top: 2px;
  transition: color 0.2s ease;
}

.course-card:hover .course-open { color: var(--primary); }

/* ── All courses — term-grouped rows ── */
.term-list {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.term-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-light);
  margin-bottom: 12px;
}

.course-row {
  display: grid;
  grid-template-columns: 76px 1fr 44px 44px;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.course-row:hover .course-row-code,
.course-row:hover .course-row-name {
  color: #8dcbc8;
}

.course-row-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.course-row-name {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--fg);
}

.course-row-note {
  font-size: 0.8125rem;
  color: var(--fg-light);
}

.course-row-grade,
.course-row-avg {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-align: right;
  white-space: nowrap;
}

.course-row-grade { color: var(--fg); }
.course-row-avg   { color: var(--fg-light); }

/* In-progress courses span both grade columns */
.course-row-ipr {
  grid-column: 3 / 5;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--fg-light);
  text-align: right;
  white-space: nowrap;
}

/* Column legend row — no divider weight, just quiet headers */
.course-legend {
  border-bottom: none;
  padding-bottom: 0;
}

.course-legend .course-row-grade,
.course-legend .course-row-avg {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-light);
}

@media (max-width: 600px) {
  .course-wrap { padding: 24px 0 60px; gap: 44px; }
  .course-card { padding: 20px; }
}

/* ── BLOG ──
   Layout mirrors the hobbies page: sticky jump-nav rail + scrolling feed.
   Shared by blog.html (years/pinned) and blog-post.html (headings TOC). */

/* Keeps `main { flex: 1 }` so a short page (one post) still pushes the footer to
   the bottom of .site-wrap. Hobbies can afford `flex: none` only because its
   content always overflows the viewport. */
.blog-main { display: block; }

/* Rail stays pinned to the left edge (like hobbies), but the prose column is
   centred on the VIEWPORT, not on the space the rail leaves behind. Mirroring the
   rail's width as padding on the right makes the free space symmetric, so the
   feed's `margin: 0 auto` lands the column dead centre. --rail must equal the
   rail's real total width (width + its left padding). */
.blog-layout {
  --rail: 164px;             /* .blog-toc: 140px + 24px padding-left */
  display: flex;
  align-items: flex-start;
  min-height: 100%;
  padding-right: var(--rail);
}

.blog-layout:has(.post-toc) { --rail: 214px; }   /* .post-toc is wider: 190 + 24 */

.blog-toc {
  position: sticky;
  top: 64px;
  flex-shrink: 0;
  width: 140px;
  padding: 64px 0 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--border);
}

.blog-feed {
  flex: 1;
  min-width: 0;
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 48px 100px;
}

.blog-header { margin-bottom: 56px; }

.blog-kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--fg-light);
  margin-bottom: 14px;
}

.blog-intro {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--fg);
  max-width: 560px;
  line-height: 1.6;
}

.blog-section { margin-bottom: 72px; }

/* ── The filename is the post's identity: mono, directory tinted ── */
.post-file {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--fg);
  white-space: nowrap;
}

.post-dir { color: var(--primary); }

.post-date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--fg-light);
  white-space: nowrap;
}

/* ── Pinned cards ── */
.pin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 20px;
}

@media (min-width: 900px) {
  .pin-grid { grid-template-columns: 1fr 1fr; }
}

.pin-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pin-card:hover,
.pin-card:focus-visible {
  border-color: rgba(141, 203, 200, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(50, 64, 79, 0.07);
  outline: none;
}

.pin-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.pin-card-title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--fg);
  line-height: 1.4;
}

.pin-card-excerpt {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-light);
}

.pin-card-open {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  transition: color 0.2s ease;
}

.pin-card:hover .pin-card-open { color: var(--primary); }

/* ── Post rows, grouped by year ── */
.post-list {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.post-row {
  display: grid;
  grid-template-columns: 210px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.post-row:hover .post-title,
.post-row:hover .post-file { color: #2d8888; }

.post-title {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--fg);
  line-height: 1.5;
  transition: color 0.2s ease;
}

/* ── Post reader page ── */
.post-article {
  flex: 1;
  min-width: 0;
  /* Caps the measure for long-form reading; margin auto centres it */
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 48px 100px;
}

.post-back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}

.post-back:hover { color: var(--primary); }

.post-path {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fg);
  margin-bottom: 14px;
}

.post-h1 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--fg);
  line-height: 1.3;
  margin-bottom: 12px;
}

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

/* Same prose styles as the peek modal, but roomier for long-form reading */
.post-body {
  padding: 28px 0 0;
}

.post-body p,
.post-body li { font-size: 0.925rem; }

.post-body h2 { font-size: 1.2rem; margin-top: 44px; }
.post-body h3 { font-size: 1rem; }

.post-toc { width: 190px; }

.post-toc-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-light);
  margin-bottom: 4px;
}

/* Post TOC reuses .htoc-link, but those live inside #postTocInner rather than
   directly in the flex column — so they need their own block layout and gap. */
.post-toc #postTocInner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-toc .htoc-link {
  display: block;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.72rem;
  line-height: 1.45;
  font-family: var(--font-sans);
}

.post-toc .htoc-link.is-sub { padding-left: 12px; opacity: 0.8; }

@media (max-width: 900px) {
  /* The rail costs too much width on phones; the feed keeps its own order */
  .blog-toc { display: none; }
  .blog-layout { padding-right: 0; }   /* no rail → nothing to mirror */
  .blog-feed,
  .post-article { padding: 32px 20px 80px; }
  .post-row { grid-template-columns: 1fr auto; }
  .post-row .post-file { grid-column: 1 / -1; }
  .blog-intro { font-size: 1.05rem; }
  .post-h1 { font-size: 1.5rem; }
  .pin-card { padding: 20px; }
}