/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* iOS Safari viewport height fix */
@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }
  body {
    min-height: -webkit-fill-available;
  }
}

body {
  font-family: var(--body-3-font-family);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  background: var(--color-bg);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  transition: background-color var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}

:root {
  --app-vh: 100vh;
  --duration-content-swap: 180ms;
  --content-swap-shift: 12px;
  --home-reveal-distance: 24px;
  --home-reveal-duration: 980ms;
  --home-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@supports (height: 100dvh) {
  :root {
    --app-vh: 100dvh;
  }
}

/* Pages with right-column-only scroll (projects homepage detail) */
html.page-projects {
  height: 100%;
  overflow: hidden;
}

/* Projects: slightly reduced sticky offset for detail layout */
html.page-projects {
  --size-panel-sticky-top: var(--size-project-nav-sticky-top);
}

html.page-projects body {
  height: 100%;
}

::selection {
  background: var(--accent);
  color: var(--color-text-inverse);
}

/* === Page load entrance animation === */
/* One keyframe animates opacity + transform together on a single gentle ease-out, with
   the same duration for both and no inter-element stagger. The previous version split
   fade/rise into two tracks under a front-loaded curve (--easing-enter peaked at ~98%
   within ~23% of the duration) — which read as "snap, then a stuck/stalled tail."
   will-change pre-promotes the GPU layer so the first frame is already composited
   (no raster hitch at the start). */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-content-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, var(--home-reveal-distance), 0);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.header,
.main-content,
.page-content {
  will-change: opacity, transform;
  animation: page-enter 0.45s var(--easing-page-enter) both;
}

/* Suppress entrance animation when navigating back (bfcache) */
.no-page-animation .header,
.no-page-animation .main-content,
.no-page-animation .page-content {
  animation: none;
  opacity: 1;
  transform: none;
}

html.page-projects[data-home-reveal="pending"] .home-reveal-item {
  opacity: 0;
  transform: translate3d(0, var(--home-reveal-distance), 0);
  filter: blur(10px);
  will-change: opacity, transform, filter;
}

html.page-projects[data-home-reveal="ready"] .home-reveal-item {
  animation: home-content-reveal var(--home-reveal-duration) var(--home-reveal-ease) both;
  animation-delay: var(--home-reveal-delay, 0ms);
}

/* === Website launch animation === */
.launch-screen {
  --launch-shuffle-ease: cubic-bezier(0.42, 0.06, 0.88, 0.54);
  --launch-exit-ease: cubic-bezier(0.65, 0, 0.35, 1);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.12s var(--launch-exit-ease);
  overflow: hidden;
}

.launch-screen::before {
  content: none;
}

.launch-screen-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.launch-screen-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
  pointer-events: none;
  z-index: 10;
}

.launch-screen-stage::after {
  content: none;
}

.launch-screen-center {
  --launch-star-shift: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.launch-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

.launch-card.is-lifting {
  animation: launch-card-shuffle 0.46s var(--launch-shuffle-ease) forwards;
}

.launch-card-image {
  width: 70%;
  height: 70%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.launch-screen-logo {
  width: clamp(26px, 4.125vw, 48px);
  height: clamp(26px, 4.125vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(var(--launch-star-shift));
  transition:
    opacity 0.2s ease,
    transform 0.2s cubic-bezier(0.24, 0.72, 0.3, 1);
}

.launch-screen.show-logo .launch-screen-logo {
  opacity: 1;
}

.launch-screen-logo-image {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) invert(1);
}

.launch-screen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.2s ease,
    transform 0.28s var(--launch-shuffle-ease);
}

.launch-screen.show-logo .launch-screen-loading {
  opacity: 1;
  transform: translateY(0);
}

.launch-screen-loading-value {
  font-family: "SFMono-Regular", "Roboto Mono", "Menlo", "Consolas", monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.86);
  min-width: 0;
  text-align: center;
  order: 2;
}

.launch-screen-loading-bar {
  width: clamp(88px, 10vw, 128px);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  order: 1;
}

.launch-screen-loading-fill {
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(255, 255, 255, 0.96);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}

.launch-screen.is-exiting {
  opacity: 0;
}

body.launch-open {
  overflow: hidden;
}

@keyframes launch-card-shuffle {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  34% {
    opacity: 1;
    transform: translate3d(0, -14%, 0);
  }
  82% {
    opacity: 1;
    transform: translate3d(0, -82%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

@media (max-width: 767px) {
  .launch-screen-logo {
    width: clamp(26px, 4.125vw, 42px);
    height: clamp(26px, 4.125vw, 42px);
  }

  .launch-screen-loading {
    gap: 10px;
  }

  .launch-screen-loading-bar {
    width: 88px;
  }
}

/* === Dark mode smooth transition === */
html[data-theme-transitioning],
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
  transition:
    color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard),
    fill var(--duration-base) var(--easing-standard) !important;
}

/* === Prevent flash on initial theme load === */
html.no-theme-transition,
html.no-theme-transition *,
html.no-theme-transition *::before,
html.no-theme-transition *::after {
  transition-duration: 0.01ms !important;
  transition-delay: 0.01ms !important;
}

/* Header */
.header {
  width: 100%;
  padding: var(--spacing-6) 0 var(--spacing-4);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
}

/* SEE ALL overlay open (writings/glossary): hide header so only dropdown + dimmed background show */
body.section-nav-open .header {
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.header-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  min-height: 32px;
}

.brand-group {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  flex-shrink: 0;
}

.logo-btn {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-1) 0;
  text-decoration: none;
  transition: var(--transition-color);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
}

.logo-btn:hover {
  color: var(--accent);
}



.logo-star {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  display: block;
  vertical-align: middle;
  filter: grayscale(1) brightness(0);
  transition: filter var(--duration-fast) var(--easing-standard), transform var(--duration-base) var(--easing-enter);
}

[data-theme="dark"] .logo-star {
  /* Make star match primary light text on dark background (near-white) */
  filter: grayscale(1) brightness(10);
}

/* Dark mode: opposing look — white bg, black text (Work homepage lead line only) */
[data-theme="dark"] .panel-bio-about p:first-of-type {
  background-color: var(--color-gray-sm);
  color: var(--color-primary);
}

/* Writing / Glossary index: title + subtitle stay flat in dark mode */
[data-theme="dark"] .panel-bio-about:has(.panel-bio-about-heading) .panel-bio-about-heading {
  background-color: transparent;
  color: var(--color-text-primary);
}

[data-theme="dark"] .panel-bio-about:has(.panel-bio-about-heading) > p:first-of-type {
  background-color: transparent;
  color: var(--color-gray-lg);
}

.logo-btn:hover .logo-star {
  filter: none;
  transform: rotate(20deg);
}



.main-nav {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  height: fit-content;
}

.nav-sheet {
  display: contents;
}

.nav-sheet-status {
  display: none;
}

.header-status {
  margin-left: auto;
  margin-right: var(--spacing-4);
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
  min-width: 11ch;
  flex-shrink: 0;
}

.header-status-text {
  white-space: nowrap;
  text-transform: uppercase;
  color: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
}

@media (min-width: 769px) {
  .header-content {
    position: relative;
  }

  .main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.nav-link,
.header-cv-link {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-color);
  white-space: nowrap;
  padding: var(--spacing-1) var(--spacing-4);
  border-radius: var(--radius-md);
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.header-cv-link {
  cursor: pointer;
}

.nav-link:hover,
.header-cv-link:hover {
  color: var(--accent);
  background: transparent;
}

.nav-link.active {
  color: var(--color-text-primary);
  background: transparent;
}



.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-1) 0;
  min-height: var(--size-touch-target);
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: var(--transition-color);
}

.nav-toggle:hover {
  color: var(--accent);
}

.nav-toggle-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  text-transform: uppercase;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  gap: var(--spacing-1);
  align-items: center;
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-md);
  transition: var(--transition-color);
  min-height: 32px;
  flex-shrink: 0;
}

.theme-label {
  transition: color var(--duration-base) var(--easing-standard);
}

.theme-label.active {
  color: var(--color-text-primary);
}

.theme-label.inactive {
  color: var(--color-text-secondary);
}

.theme-toggle:hover .theme-label.inactive {
  color: var(--accent);
}



/* Shared hover/focus transitions for interactive elements */
:is(
  .nav-link,
  .header-cv-link,
  .logo-btn,
  .theme-toggle,
  .filter-btn,
  .glossary-filter-btn,
  .glossary-term,
  .article-nav-btn,
  .projects-overview-next,
  .writing-entry,
  .contact-value,
  .contact-item-link,
  .cv-link,
  .cv-close,
  .nav-toggle
) {
  transition:
    var(--transition-color),
    var(--transition-opacity),
    var(--transition-transform);
}

/* Focus visible for keyboard and touch */
:is(
  .nav-link,
  .header-cv-link,
  .logo-btn,
  .theme-toggle,
  .filter-btn,
  .glossary-filter-btn,
  .glossary-term,
  .article-nav-btn,
  .projects-overview-next,
  .writing-entry,
  .contact-value,
  .contact-item-link,
  .cv-link,
  .cv-close,
  .nav-toggle
):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Scale on press — tactile feedback for interactive elements */
:is(
  .nav-link,
  .header-cv-link,
  .logo-btn,
  .theme-toggle,
  .filter-btn,
  .glossary-filter-btn,
  .article-nav-btn,
  .projects-overview-next,
  .contact-item-link,
  .cv-link,
  .cv-close,
  .nav-toggle,
  .panel-project-back,
  .panel-project-prev,
  .panel-project-next,
  .section-detail-back-link,
  .section-nav-toggle,
  .section-list-close,
  .image-lightbox-close,
  .writing-article-nav-item,
  .glossary-article-nav-item
):active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Main Content */
.main-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--spacing-4) var(--grid-margin) var(--page-padding-bottom);
}

/* Projects homepage shares same inset as other pages */
html.page-projects .main-content {
  padding-top: var(--spacing-4);
}

/* Writing / glossary list pages: match Work homepage main inset */
html.page-writings .main-content.section-index-page,
html.page-glossary .main-content.section-index-page {
  padding-top: var(--spacing-4);
}

/* Writings / glossary article pages (standalone URLs) */
html.page-writings .page-content,
html.page-glossary .page-content {
  padding-top: var(--spacing-4);
}

.section-heading {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}

.section-panel-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4);
}

.section-panel-heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  min-width: 0;
}

.section-nav-toggle {
  display: none;
  align-items: center;
  align-self: flex-start;
  min-height: var(--size-touch-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  cursor: pointer;
}

.section-nav-toggle:hover {
  color: var(--accent);
}

.section-nav-toggle:focus-visible,
.section-list-close:focus-visible {
  outline: none;
  color: var(--accent);
}

.section-list-overlay-header {
  display: none;
}

.section-list-search {
  display: none;
}

.section-list-overlay-content {
  display: contents;
}

.section-list-overlay-title,
.section-list-close {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  text-transform: uppercase;
}

.section-list-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-touch-target);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.section-list-close:hover {
  color: var(--accent);
}

.section-nav-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 14px;
}

.section-nav-toggle-bar {
  display: block;
  width: 14px;
  height: 1px;
  background: currentColor;
}

.panel-bio-contact-description {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-gray-lg);
  margin: 0;
}

/* ============================================
   Homepage Three-Column Layout
   ============================================ */

.homepage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--spacing-12);
  align-items: start;
}


/* Keep 1/4–1/4–1/2 proportions while shrinking */
.homepage-layout > * {
  min-width: 0;
}

/* Writing / Glossary index — same 1fr / 1fr / 2fr grid as Work; list spans the two right tracks */
.homepage-layout--section-index .section-index-main {
  grid-column: 2 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.panel-bio--section-index {
  gap: var(--section-gap);
}

/* LEFT: Bio + Contact — always sticky; same gap between all sections */
.panel-bio {
  position: sticky;
  top: var(--size-panel-sticky-top);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-large);
  padding-inline-end: var(--intro-panel-padding-inline-end);
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
  overflow-y: auto;
}

.panel-bio-about {
  display: flex;
  flex-direction: column;
  gap: var(--intro-block-gap);
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-gray-lg);
  max-width: var(--intro-text-measure);
}

.panel-bio-about p {
  margin: 0;
}

.panel-bio-about p:first-of-type {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  width: fit-content;
}

/* Writing / Glossary index — after p:first-of-type so it wins: match project title + description */
.panel-bio-about:has(.panel-bio-about-heading) .panel-bio-about-heading {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  background-color: transparent;
  border-radius: var(--radius-sm);
  text-wrap: balance;
  transition: var(--transition-color);
}

.panel-bio-about:has(.panel-bio-about-heading) > p:first-of-type {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-gray-lg);
  background-color: transparent;
  margin: 0;
  width: auto;
  transition: var(--transition-color);
}

.panel-bio-about-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-6);
  margin-top: calc(-1 * var(--spacing-2));
}

.panel-bio-about-links .contact-item-link {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
}

.panel-bio-contact {
  display: flex;
  flex-direction: column;
  gap: var(--intro-block-gap);
  max-width: var(--intro-text-measure);
}

.panel-bio-contact-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--spacing-6);
  row-gap: var(--spacing-0);
  align-items: center;
}

@media (min-width: 838px) {
  .panel-bio-about-links,
  .panel-bio-contact-links {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .panel-bio-contact-links {
    row-gap: var(--spacing-2);
  }
}

.panel-bio-photo {
  display: none;
}

@media (min-width: 1025px) {
  .panel-bio-photo {
    display: block;
    max-width: 50%;
  }

  .panel-bio-photo-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    outline: 1px solid rgba(0, 0, 0, 0.06);
    outline-offset: -1px;
  }

  [data-theme="dark"] .panel-bio-photo-img {
    outline-color: rgba(255, 255, 255, 0.06);
  }
}

/* MIDDLE: Active project info — sticky, JS-updated */
.panel-project-info {
  position: sticky;
  top: var(--size-panel-sticky-top);
  display: none;
  flex-direction: column;
  gap: var(--spacing-2);
  height: fit-content;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: none;
  transition:
    opacity var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
}

#panel-project-info {
  padding-bottom: 0;
}

.panel-project-info.is-content-transitioning-out {
  opacity: 0;
  transform: translateY(4px);
}

.panel-project-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2);
}

.panel-project-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
  transition: var(--transition-color);
}

.panel-project-year {
  margin-top: var(--spacing-3);
}

.panel-project-meta {
  display: none;
  gap: var(--spacing-3);
}

.panel-project-meta-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
}

.panel-project-meta-value {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-tertiary);
}

.panel-project-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.panel-project-description {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-gray-lg);
  margin: 0;
  transition: var(--transition-color);
}

.panel-project-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* Horizontal gap stays 16px, vertical gap reduced to 8px */
  column-gap: var(--spacing-4);
  row-gap: var(--spacing-2);
  align-items: center;
}

/* Shared mono label style (links + project meta tags) */
:is(.contact-item-link, .panel-project-tags li, .project-group-tags li) {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
}

/* Panel project tags and project group tags use the shared meta label token */
.panel-project-tags li,
.project-group-tags li {
  color: var(--color-text-meta);
}

.panel-project-controls {
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--spacing-4);
  margin-top: auto;
  padding-top: var(--spacing-4);
}

.panel-project-back,
.panel-project-prev-label,
.panel-project-next-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
}

.panel-project-back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition:
    var(--transition-color),
    transform var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-2);
}

.panel-project-back-icon {
  font-size: 16px;
  line-height: var(--label-heading-line-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--easing-standard);
}

.panel-project-back:hover .panel-project-back-icon {
  transform: translateX(-2px);
}

.panel-project-back-label {
  letter-spacing: var(--label-heading-letter-spacing);
}

.panel-project-back:hover {
  color: var(--accent);
}

a.panel-project-back {
  text-decoration: none;
}

a.panel-project-back:hover {
  text-decoration: none;
}

.page-about .panel-project-back {
  align-items: center;
}

.panel-project-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.panel-project-nav:has(#project-prev-btn[hidden]) {
  justify-content: flex-end;
}

.panel-project-nav:has(#project-next-btn[hidden]) {
  justify-content: flex-start;
}

.panel-project-nav.is-next-only {
  justify-content: flex-end;
}

.panel-project-nav.is-prev-only {
  justify-content: flex-start;
}

/* Wardrobe detail: remove PREVIOUS entirely (no way back to Wardrobe) */
.panel-project-controls[data-current-project="wardrobe"] .panel-project-prev {
  display: none;
}

.panel-project-controls[data-current-project="wardrobe"] .panel-project-nav {
  justify-content: flex-end;
}

/* Experimental (last) project detail state: hide the NEXT button entirely */
.homepage-layout.is-detail .panel-project-nav.is-prev-only .panel-project-next {
  display: none;
}

.panel-project-prev,
.panel-project-next {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

.panel-project-prev {
  flex: 1;
  text-align: left;
}

.panel-project-next {
  align-items: flex-end;
  gap: var(--spacing-1);
  flex: 1;
}

.panel-project-nav-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-gray-lg);
  transition: color var(--duration-fast) var(--easing-standard);
}

.panel-project-nav-title {
  width: fit-content;
  max-width: 100%;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-secondary);
  transition:
    color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
  overflow-wrap: anywhere;
}

.panel-project-prev:hover .panel-project-nav-title,
.panel-project-next:hover .panel-project-nav-title {
  background: var(--color-surface-contrast);
  color: var(--color-text-inverse);
}

.panel-project-prev:hover .panel-project-nav-label,
.panel-project-next:hover .panel-project-nav-label {
  color: var(--color-text-primary);
}

.panel-project-next-title {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* RIGHT: Image groups — scrollable column */
.panel-images {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  transition: opacity var(--duration-base) var(--easing-standard);
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: var(--spacing-16);
}

.panel-images::-webkit-scrollbar {
  display: none;
}

.project-images-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--grid-gutter);
  align-items: start;
  cursor: pointer;
  padding-bottom: 0;
}

.project-group-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.project-group-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-4);
}

.project-group-title {
  flex: 1;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
  transition:
    var(--transition-color),
    background-color var(--duration-fast) var(--easing-standard);
  border-radius: var(--radius-sm);
}

.project-group-year {
  margin-top: var(--spacing-3);
}

.project-group-description {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-gray-lg);
  margin: 0;
  transition: var(--transition-color);
}

.project-group-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  column-gap: var(--spacing-4);
  row-gap: calc(var(--spacing-4) / 2);
  align-items: center;
  white-space: nowrap;
}

/* (typography shared via :is(...) above) */

/* Only trigger hover state when either the info block or its image block is hovered */
.project-images-group:has(.project-group-info:hover) .project-group-description,
.project-images-group:has(.project-flow-block:hover) .project-group-description {
  color: var(--color-text-primary);
}

.project-images-group:last-child {
  padding-bottom: 0;
}

/* Shared image block styles */
.project-flow-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
  min-width: 0;
}

.project-flow-media {
  width: 100%;
  overflow: hidden;
  background: transparent;
  position: relative;
}

/* Subtle inset outline so images don't bleed into matching backgrounds */
.project-flow-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

[data-theme="dark"] .project-flow-media::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Placeholder blocks for when project images are not yet provided */
.project-flow-media--placeholder {
  aspect-ratio: 16 / 9;
  background: var(--color-surface-muted);
}

.project-flow-media--placeholder::after {
  content: none;
}

/* Figma 123:526 overview covers are uniform 592x333 */
.panel-images .project-flow-media {
  aspect-ratio: 592 / 333;
  background: var(--color-surface-muted);
}

.project-flow-media-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--easing-enter);
}

.project-images-group:hover .project-flow-media-image {
  transform: scale(1.02);
}

.project-flow-media-video {
  width: 100%;
  height: auto;
  display: block;
  background: var(--color-surface-muted);
}

.project-flow-media--embed {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-muted);
}

.project-flow-media--proto {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  aspect-ratio: 9 / 19;
  background: var(--color-surface-muted);
}

.project-flow-media-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: var(--color-surface-muted);
}

.project-flow-media-embed--fluid {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.project-flow-media-embed--full-width {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 100%;
}

/* Detail page: proto same size as other blocks, phone fits without clipping */
.project-detail-images .project-flow-media--proto {
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-detail-images .project-flow-media--proto .project-flow-media-embed {
  top: 0;
  bottom: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 19;
  transform: translateX(-50%);
}

.project-detail-images .project-flow-media-image {
  box-sizing: border-box;
}

.project-detail-images .project-flow-media-image--no-border {
  border: 0;
}

.panel-images .project-flow-media-image {
  width: 100%;
  height: 100%;
}

.project-flow-caption {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-tertiary);
  transition: var(--transition-color);
  margin: 0;
  margin-top: var(--spacing-1);
}

.project-detail-images {
  display: none;
  flex-direction: column;
  gap: var(--spacing-6);
  grid-column: 2 / -1;
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: var(--spacing-20);
}

.project-detail-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.project-detail-group,
.writing-article,
.glossary-article {
  --content-swap-out-x: 0px;
  --content-swap-in-x: 0px;
  will-change: opacity, transform;
}

.project-detail-group[data-transition-direction="next"],
.writing-article[data-transition-direction="next"],
.glossary-article[data-transition-direction="next"] {
  --content-swap-out-x: calc(var(--content-swap-shift) * -1);
  --content-swap-in-x: var(--content-swap-shift);
}

.project-detail-group[data-transition-direction="prev"],
.writing-article[data-transition-direction="prev"],
.glossary-article[data-transition-direction="prev"] {
  --content-swap-out-x: var(--content-swap-shift);
  --content-swap-in-x: calc(var(--content-swap-shift) * -1);
}

.project-detail-group.is-content-transitioning-out,
.writing-article.is-content-transitioning-out,
.glossary-article.is-content-transitioning-out {
  opacity: 0;
  transform: translate3d(var(--content-swap-out-x), 0, 0);
  transition:
    opacity var(--duration-content-swap) var(--easing-standard),
    transform var(--duration-content-swap) var(--easing-standard);
}

.project-detail-group.is-content-transitioning-in,
.writing-article.is-content-transitioning-in,
.glossary-article.is-content-transitioning-in {
  animation: content-swap-enter var(--duration-content-swap) var(--easing-enter) both;
  animation-name: content-swap-enter;
}

.project-detail-group.is-content-transitioning-in[data-transition-direction="next"],
.writing-article.is-content-transitioning-in[data-transition-direction="next"],
.glossary-article.is-content-transitioning-in[data-transition-direction="next"] {
  animation-name: content-swap-enter-next;
}

.project-detail-group.is-content-transitioning-in[data-transition-direction="prev"],
.writing-article.is-content-transitioning-in[data-transition-direction="prev"],
.glossary-article.is-content-transitioning-in[data-transition-direction="prev"] {
  animation-name: content-swap-enter-prev;
}

.project-detail-group[hidden] {
  display: none;
}

.project-detail-images::-webkit-scrollbar {
  display: none;
}

.homepage-layout.is-detail .panel-bio {
  /* Hide the bio column entirely in detail mode so
     the project header + images can start directly
     under the main header, aligned with other pages. */
  display: none;
}

.homepage-layout.is-detail .panel-project-info {
  display: flex;
  grid-column: 1;
  opacity: 1;
}

.homepage-layout.is-detail .panel-images {
  display: none;
}

.homepage-layout.is-detail .project-detail-images {
  display: flex;
  grid-row: 1;
}

.homepage-layout.is-detail .panel-project-controls {
  display: flex;
}

.homepage-layout.is-detail .panel-project-meta:not([hidden]) {
  display: grid;
}

.panel-project-info.is-clickable {
  cursor: pointer;
}

.panel-project-info.is-clickable:hover .panel-project-description {
  color: var(--color-primary);
}

/* Contact shared styles */
.contact-item {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

.contact-label {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}

.contact-value {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-color);
}

.contact-value:hover {
  color: var(--accent);
}

.contact-item-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-2) 0;
  transition: var(--transition-color);
}

.contact-item-link:hover {
  color: var(--accent);
}

.project-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-detail-title {
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--body-1-line-height);
  color: var(--color-text-primary);
}

.project-detail-close {
  background: none;
  border: none;
  font-size: var(--icon-lg);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--spacing-1);
  line-height: var(--label-heading-line-height);
  transition: var(--transition-color);
}

.project-detail-close:hover {
  color: var(--color-text-primary);
}

.project-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-8);
}

.project-detail-about {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.project-detail-meta {
  display: flex;
  gap: var(--spacing-6);
}

.project-detail-meta-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* Shared detail styles */
.info-heading {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}

.info-text {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  letter-spacing: var(--label-3-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--spacing-4);
}

.meta-item:last-child {
  margin-bottom: 0;
}

.meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.meta-list li {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  letter-spacing: var(--label-3-letter-spacing);
  color: var(--color-text-primary);
}

/* ============================================
   CV Overlay Modal
   ============================================ */

.cv-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cv-overlay[hidden] {
  display: none;
}

[data-theme="dark"] .cv-overlay {
  background: var(--color-overlay-strong);
}

.cv-modal {
  background: var(--color-bg);
  max-width: var(--size-modal-max-width);
  width: 100%;
  max-height: calc(var(--app-vh) - (var(--spacing-6) * 2));
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-16);
  padding: var(--spacing-8);
  box-shadow: var(--shadow-modal);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity var(--duration-base) var(--easing-enter),
    transform var(--duration-base) var(--easing-enter);
}

[data-theme="dark"] .cv-modal {
  background: var(--color-bg);
  box-shadow: var(--shadow-modal-dark);
}

.cv-modal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cv-close {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  background: none;
  border: none;
  font-size: var(--size-close-icon);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: var(--transition-color);
  width: var(--size-touch-target);
  height: var(--size-touch-target);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.cv-close:hover {
  color: var(--color-text-primary);
}

/* Sidebar: title at top, author at bottom left */
.cv-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 280px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 0;
}

.cv-sidebar-title {
  flex: 0;
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  letter-spacing: var(--letter-spacing-tight);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  margin: 0;
  white-space: nowrap;
  text-wrap: balance;
}

.cv-sidebar-author {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-2);
  margin-top: auto;
}

.cv-sidebar-author-name {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
}

/* Content columns */
.cv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-16);
  min-width: 0;
}

/* Section group */
.cv-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  width: 100%;
}

.cv-group-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  font-weight: var(--label-heading-weight-regular);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Experience / Education entry */
.cv-entry {
  display: flex;
  flex-direction: column;
}

.cv-entry-row {
  display: flex;
  gap: var(--spacing-1);
  align-items: baseline;
}

.cv-entry-role {
  flex: 1;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
}

.cv-entry-metas {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  flex-shrink: 0;
}

.cv-entry-company {
  flex: 1;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-secondary);
}

.cv-entry-date,
.cv-date {
  text-align: right;
}

.cv-entry-tag {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  font-weight: var(--label-heading-weight-regular);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Skill and Activity items */
.cv-skill-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.cv-skill-name {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.cv-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

/* Language grid */
.cv-lang-grid {
  display: flex;
  gap: var(--spacing-6);
  width: 100%;
}

.cv-lang-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  width: 100%;
  flex: 1;
}

.cv-lang-name {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 1440px) {
  :root {
    --intro-text-measure: 100%;
    --intro-panel-padding-inline-end: var(--spacing-0);
  }
}

/* ============================================
   Responsive Design
   Breakpoints: 1280px (tablet landscape), 
                768px (tablet portrait), 
                480px (mobile)
   ============================================ */

/* --- Tablet Landscape / Small Desktop (<=1280px) --- */
@media (max-width: 1280px) {
  .main-content {
    padding: var(--spacing-8) var(--grid-margin) var(--page-padding-bottom);
  }
}

/* --- Tablet Landscape (<=1024px) --- */
@media (max-width: 1024px) {
  :root {
    --grid-margin: var(--spacing-6);
  }

  /* Homepage: 2-column layout at tablet landscape */
  .homepage-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .panel-bio {
    grid-column: 1;
    grid-row: 1;
  }

  .panel-project-info {
    display: none;
  }

  .panel-images {
    grid-column: 2;
    grid-row: 1;
  }

  /* Project card: stack info above image */
  .project-images-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .project-group-info {
    order: 1;
  }

  .project-flow-block {
    order: 2;
  }

  /* Detail mode: project info in left column */
  .homepage-layout.is-detail .panel-bio {
    opacity: 0;
    pointer-events: none;
  }

  .homepage-layout.is-detail .panel-project-info {
    display: flex;
    grid-column: 1;
    opacity: 1;
  }

  .homepage-layout.is-detail .project-detail-images {
    grid-column: 2;
  }

  /* Writings/Glossary: 2-column layout */
  .writings-layout,
  .glossary-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .writings-panel-header,
  .glossary-panel-header {
    grid-column: 1;
    grid-row: 1;
  }

  .about-layout-spacer {
    display: none;
  }

  /* Article inner: expand reading measure to use more viewport width */
  .article-inner {
    max-width: var(--content-width-medium);
  }

  .writings-panel-list,
  .glossary-panel-list {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top) - 120px);
    overflow-y: auto;
  }

  .writings-panel-article,
  .glossary-panel-article {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

/* --- Tablet Portrait (<=768px) --- */
@media (max-width: 768px) {
  :root {
    --grid-margin: var(--spacing-4);
  }

  /* Allow body to scroll naturally on tablet portrait */
  html.page-projects,
  html.page-writings,
  html.page-glossary,
  html.page-about {
    height: auto;
    overflow: visible;
  }

  html.page-projects body,
  html.page-writings body,
  html.page-glossary body,
  html.page-about body {
    height: auto;
  }

  /* CV Modal: fill viewport, scroll inside modal */
  .cv-overlay {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
  }

  .cv-modal {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: var(--spacing-16);
    padding: var(--spacing-6);
    max-height: none;
  }

  .cv-sidebar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: auto;
  }

  .cv-sidebar-title {
    flex: 0;
  }

  /* Align header with main content: same horizontal inset */
  .header {
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .header-content {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-2);
  }

  /* Nav in flow so it doesn't overlap logo/theme on narrow widths */
  .main-nav {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: var(--spacing-1);
    padding: 0;
  }

  /* Touch targets: nav, theme, logo - minimum 44px */
  .nav-link,
  .header-cv-link {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    flex-shrink: 0;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .theme-toggle {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .logo-btn {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-2);
    padding-left: 0;
    display: inline-flex;
    align-items: center;
  }

  /* Tablet portrait: single column layout */
  .homepage-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-16);
  }

  .homepage-layout--section-index .section-index-main {
    grid-column: 1;
  }

  .writings-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-4);
  }

  .glossary-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  /* Homepage: stack panels */
  .panel-bio {
    grid-column: 1;
    grid-row: 1;
    position: static;
    gap: var(--section-gap-large);
  }

  .panel-project-info {
    display: none;
  }

  .panel-images {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    overflow-y: visible;
    padding-bottom: var(--spacing-8);
  }

  /* Project cards: stack info above image */
  .project-images-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .project-group-info {
    display: flex;
    order: -1;
  }

  /* Writings/Glossary: stack panels */
  .writings-panel-header,
  .glossary-panel-header {
    grid-column: 1;
    grid-row: 1;
  }

  .writings-panel-article,
  .glossary-panel-article {
    position: static;
    max-height: none;
    overflow-y: visible;
    grid-column: 1;
    grid-row: 2;
  }

  .writings-panel-list,
  .glossary-panel-list {
    position: static;
    max-height: none;
    overflow-y: visible;
    grid-column: 1;
    grid-row: 3;
  }

  /* Detail panel: stack vertically */
  .project-detail-body {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .article-nav-btn {
    padding: var(--spacing-4) 0;
    min-height: var(--size-touch-target);
  }

  .project-image-grid-2,
  .project-image-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Bio contact links: tight row-gap since min-height provides vertical touch area */
  .panel-bio-contact-links {
    column-gap: var(--spacing-5);
    row-gap: var(--spacing-0);
  }

  .contact-item-link {
    min-height: var(--size-touch-target);
    padding: 0 var(--spacing-2);
    display: inline-flex;
    align-items: center;
  }

  .panel-bio .contact-item-link {
    padding: 0;
  }

  /* Writing/glossary list items: larger touch targets */
  .writing-list-item,
  .glossary-list-item {
    min-height: var(--size-touch-target);
    padding: 0;
  }

  /* Improve touch targets for mobile-ish screens */
  .column-list {
    gap: var(--spacing-2);
  }

  .column-link {
    padding: 0;
    min-height: var(--size-touch-target);
    display: inline-flex;
    align-items: center;
  }

  /* Writing/glossary nav buttons */
  .writing-article-nav-item,
  .glossary-article-nav-item {
    min-height: var(--size-touch-target);
    padding: 0;
  }
}

/* --- Mobile (<=480px) --- */
@media (max-width: 480px) {
  :root {
    --grid-margin: var(--spacing-4);
    --grid-gutter: var(--spacing-2);
    --intro-text-measure: 100%;
    --intro-panel-padding-inline-end: var(--spacing-0);
    --intro-copy-font-size: var(--body-3-font-size);
    --intro-copy-line-height: var(--body-3-line-height);
    --intro-lead-font-size: var(--body-3-font-size);
    --intro-lead-line-height: var(--body-3-line-height);
  }

  /* Allow body to scroll naturally on mobile */
  html.page-projects,
  html.page-writings,
  html.page-glossary {
    height: auto;
    overflow: visible;
  }

  html.page-projects body,
  html.page-writings body,
  html.page-glossary body {
    height: auto;
  }

  .main-content {
    padding: var(--spacing-6) var(--grid-margin) var(--page-padding-bottom);
    row-gap: var(--spacing-8);
  }

  .header {
    padding: var(--spacing-4) var(--grid-margin);
  }

  .header-content {
    padding-left: 0;
    padding-right: 0;
  }

  .logo-btn {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2);
    padding-left: 0;
  }

  .header-cv-link {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-3);
  }

  .theme-toggle {
    min-height: var(--size-touch-target);
    min-width: var(--size-touch-target);
    padding: var(--spacing-2) var(--spacing-4);
  }

  /* Mobile: single column, all panels static */
  .homepage-layout,
  .writings-layout,
  .glossary-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .writings-layout {
    row-gap: var(--spacing-4);
  }

  .glossary-layout {
    row-gap: var(--spacing-8);
  }

  /* About: 1-column layout */
  .about-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .about-bio {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .about-cv-grid {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .about-cv-col {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .panel-bio,
  .panel-project-info,
  .writings-panel-header,
  .writings-panel-list,
  .writings-panel-article,
  .glossary-panel-header,
  .glossary-panel-list,
  .glossary-panel-article {
    position: static;
    max-height: none;
    overflow-y: visible;
    grid-column: 1;
  }

  .panel-bio { grid-row: 1; }
  .panel-project-info { grid-row: 2; display: none; }
  .panel-images { 
    grid-column: 1; 
    grid-row: 2; 
    max-height: none;
    overflow-y: visible;
    padding-bottom: var(--spacing-8);
  }

  /* Project cards on mobile: show info inline */
  .project-images-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .project-group-info {
    display: flex;
    order: -1;
  }

  .project-group-header {
    flex-wrap: wrap;
  }

  .project-group-title {
    font-size: var(--display-sm-font-size);
  }

  .project-group-tags {
    flex-wrap: wrap;
    row-gap: var(--spacing-1);
  }

  .writings-panel-header { grid-row: 1; }
  .writings-panel-article { grid-row: 2; }
  .writings-panel-list {
    grid-row: 3;
    gap: var(--spacing-4);
  }

  .glossary-panel-header { grid-row: 1; }
  .glossary-panel-article { grid-row: 2; }
  .glossary-panel-list {
    grid-row: 3;
    gap: var(--spacing-4);
  }

  /* Bio contact links: comfortable gap between links */
  .panel-bio-contact-links {
    column-gap: var(--spacing-5);
    row-gap: var(--spacing-0);
  }

  .contact-item-link {
    min-height: var(--size-touch-target);
    padding: 0 var(--spacing-3);
    display: inline-flex;
    align-items: center;
    font-size: var(--label-heading-sm-font-size);
  }

  .panel-bio .contact-item-link {
    padding: 0;
  }

  /* Minimum 16px for main content readability */
  .writing-title,
  .writing-excerpt,
  .glossary-term-text,
  .glossary-index-item-title {
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
  }

  .article-body p,
  .glossary-definition p {
    font-size: var(--body-2-font-size);
    line-height: var(--body-2-line-height);
  }

  /* Writing/glossary index rows: larger touch targets */
  .writing-entry,
  .glossary-index-item {
    min-height: var(--size-touch-target);
    padding: var(--spacing-3) 0;
  }

  /* Larger touch targets on mobile */
  .column-link {
    padding: 0;
    font-size: var(--label-2-font-size);
    line-height: var(--label-2-line-height);
  }

  .column-heading {
    font-size: var(--label-heading-sm-font-size);
    line-height: var(--label-heading-sm-line-height);
  }

  .project-detail-meta {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .cv-contact-info {
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .cv-divider {
    display: none;
  }

  /* Mobile: nav in one row, no scroll – as compact as possible while tappable */
  .header-content {
    flex-wrap: nowrap;
    gap: var(--spacing-2);
  }

  .main-nav {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
    justify-content: center;
    gap: var(--spacing-1);
    padding: 0;
  }

  .nav-link {
    flex-shrink: 0;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
  }

  .article-nav-btn {
    min-height: var(--size-touch-target);
    padding: var(--spacing-4) 0;
  }

  .project-image-grid-2,
  .project-image-grid-3 {
    grid-template-columns: 1fr;
  }

  .project-detail-page-header {
    max-width: 100%;
  }

  /* Principles term touch targets */
  .glossary-term {
    min-height: var(--size-touch-target);
    padding: var(--spacing-4) 0;
  }

  /* Article titles: responsive sizing */
  .writing-article-title {
    font-size: var(--display-sm-font-size);
  }

  .writing-article-section-title {
    font-size: var(--body-1-font-size);
  }

  /* Page titles responsive */
  .writings-page-title,
  .glossary-page-title {
    font-size: var(--display-sm-font-size);
  }
}

/* --- Mobile nav: text trigger + header sheet --- */
@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .header-status {
    display: none;
  }

  /* Full-viewport dimming overlay (same as SEE ALL); lives in body so it’s not clipped by header transform */
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay-dropdown);
    z-index: 89;
    cursor: pointer;
  }

  body.nav-open .nav-overlay:not([hidden]) {
    display: block;
  }

  .header.nav-open {
    z-index: 90;
  }

  .header-content {
    position: relative;
    z-index: 100;
  }

  .nav-sheet {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-height: var(--app-vh);
    height: fit-content;
    z-index: 90;
    padding: var(--spacing-8) var(--grid-margin);
    background: var(--color-surface-elevated);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
  }

  .header.nav-open .nav-sheet {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-6);
  }

  body.nav-open .main-content {
    pointer-events: none;
    user-select: none;
  }

  .nav-sheet-status {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    min-height: var(--size-touch-target);
    padding: var(--spacing-3) 0;
    font-family: var(--label-heading-font-family);
    font-size: var(--label-heading-font-size);
    font-weight: var(--label-heading-weight-regular);
    line-height: var(--label-heading-line-height);
    letter-spacing: var(--label-heading-letter-spacing);
    color: var(--color-text-secondary);
  }

  .nav-sheet-status .header-status-text {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .header.nav-open .main-nav {
    display: flex;
    position: static;
    transform: none;
    margin: 0;
    align-items: stretch;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: 0;
    background: transparent;
    border: 0;
    height: fit-content;
  }

  .header.nav-open .theme-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-2);
    min-height: var(--size-touch-target);
    padding: var(--spacing-3) 0;
    min-width: 0;
  }

  .header.nav-open .main-nav .nav-link {
    min-height: var(--size-touch-target);
    padding: var(--spacing-3) 0;
    justify-content: flex-start;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================
   Shared Sub-Page Styles (Writings, Principles)
   ============================================ */

.logo-link {
  text-decoration: none;
  grid-column: 2;
  justify-self: center;
}

.page-content {
  max-width: var(--grid-container-width);
  margin: 0 auto;
  padding: var(--spacing-4) var(--grid-margin) var(--page-padding-bottom);
}

.page-inner {
  max-width: var(--content-width-narrow);
  margin: 0 auto;
}

.page-header {
  margin-bottom: var(--spacing-12);
}

.page-title {
  font-family: var(--body-1-font-family);
  font-size: var(--body-1-font-size);
  font-weight: var(--body-1-weight-regular);
  line-height: var(--body-1-line-height);
  letter-spacing: var(--body-1-letter-spacing);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
}



.page-description {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
}



/* ============================================
   Writings Page
   ============================================ */

/* Dates sitewide: Geist Mono, uppercase, plain (lists, articles, work, CV) */
:is(
  .article-date,
  .panel-project-year,
  .project-group-year,
  .writing-date,
  .writing-list-item-year,
  .cv-entry-date,
  .cv-date
) {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  font-weight: var(--label-heading-weight-regular);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}

.writings-list {
  display: flex;
  flex-direction: column;
}

.writing-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  gap: var(--spacing-2) var(--spacing-8);
  align-items: baseline;
  padding: var(--spacing-3) 0;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-opacity);
}

.writing-entry:hover {
  opacity: 1;
}

.writing-entry:hover .writing-title,
.writing-entry:hover .writing-excerpt,
.writing-entry:hover .writing-date {
  opacity: var(--opacity-hover-strong);
}



.writing-title {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
  transition: var(--transition-opacity);
}



.writing-excerpt {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
  margin: 0;
  transition: var(--transition-opacity);
}



.writing-date {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  text-align: right;
  transition: var(--transition-opacity);
}

.glossary-index-list {
  display: flex;
  flex-direction: column;
}

.glossary-index-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-8);
  padding: var(--spacing-3) 0;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-opacity);
}

.glossary-index-item:hover {
  opacity: var(--opacity-hover-strong);
}

.glossary-index-item-title {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-primary);
}

/* --- Standalone writing / glossary article (separate URL) --- */
.section-detail-back {
  margin: 0 0 var(--spacing-8);
}

.section-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-tertiary);
  transition: var(--transition-color);
}

.section-detail-back-icon {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
  transition: transform var(--duration-fast) var(--easing-standard);
}

.section-detail-back-link:hover {
  color: var(--accent);
}

.section-detail-back-link:hover .section-detail-back-icon {
  transform: translateX(-2px);
}

.writing-article--standalone {
  padding-bottom: var(--spacing-12);
}

/* Standalone writing: paragraphs start hidden (HTML has writing-article-paras--armed), then stagger in */
article.writing-article--standalone.writing-article-paras--armed p.writing-article-intro,
article.writing-article--standalone.writing-article-paras--armed p.writing-article-body {
  transition:
    opacity var(--writing-para-reveal-opacity-duration) var(--easing-enter) var(--writing-para-reveal-delay, 0ms),
    transform var(--writing-para-reveal-transform-duration) var(--easing-enter) var(--writing-para-reveal-delay, 0ms);
}

article.writing-article--standalone.writing-article-paras--armed:not(.writing-article-paras--visible) p.writing-article-intro,
article.writing-article--standalone.writing-article-paras--armed:not(.writing-article-paras--visible) p.writing-article-body {
  opacity: 0;
  transform: translate3d(0, var(--writing-para-reveal-distance), 0);
}

article.writing-article--standalone.writing-article-paras--armed.writing-article-paras--visible p.writing-article-intro,
article.writing-article--standalone.writing-article-paras--armed.writing-article-paras--visible p.writing-article-body {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  article.writing-article--standalone.writing-article-paras--armed:not(.writing-article-paras--visible) p.writing-article-intro,
  article.writing-article--standalone.writing-article-paras--armed:not(.writing-article-paras--visible) p.writing-article-body,
  article.writing-article--standalone.writing-article-paras--armed.writing-article-paras--visible p.writing-article-intro,
  article.writing-article--standalone.writing-article-paras--armed.writing-article-paras--visible p.writing-article-body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.glossary-article--standalone {
  padding-bottom: var(--spacing-12);
}

a.writing-article-nav-item,
a.glossary-article-nav-item {
  text-decoration: none;
  color: inherit;
}

a.writing-article-nav-item:focus-visible,
a.glossary-article-nav-item:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================
   Article Page
   ============================================ */

.article-inner {
  max-width: var(--content-width-narrow);
  margin: 0 auto;
  padding: 0;
}

.article-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-8);
  margin-bottom: var(--spacing-8);
  border-bottom: var(--border);
}

.article-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-md-font-size);
  line-height: var(--display-md-line-height);
  font-weight: var(--body-1-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
}

/* Standalone writing pages: sentence case + dot at end */
.article-inner .article-title {
  text-transform: lowercase;
}

.article-inner .article-title::first-letter {
  text-transform: uppercase;
}



.article-intro {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-secondary);
  margin: 0;
}



.article-body {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}



.article-body h2 {
  font-family: var(--body-3-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  font-weight: var(--body-3-weight-regular);
  color: var(--color-text-primary);
  margin: var(--spacing-8) 0 var(--spacing-4) 0;
}



.article-body p {
  margin: 0 0 var(--spacing-4) 0;
}

.article-body ul,
.article-body ol {
  margin: 0 0 var(--spacing-4) 0;
  padding-left: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.article-body li {
  color: var(--color-text-primary);
}



.article-body strong {
  font-weight: var(--body-3-weight-regular);
  color: var(--color-text-primary);
}

/* ============================================
   About Page
   ============================================ */

/* About page: one shade darker background (light = surface, dark = bg-darker) */
html.page-about body {
  background: var(--color-surface);
  color: var(--color-text-primary);
}

html.page-about .header {
  background: var(--color-surface);
}

html.page-about .main-content {
  background: var(--color-surface);
  padding-top: var(--spacing-4);
}

html[data-theme="dark"].page-about body,
html[data-theme="dark"].page-about .header,
html[data-theme="dark"].page-about .main-content {
  background: var(--color-bg-darker);
}

html.page-about .logo-btn {
  color: var(--color-text-primary);
}

html.page-about .nav-link {
  color: var(--color-text-secondary);
}

html.page-about .nav-link:hover,
html.page-about .logo-btn:hover {
  color: var(--accent);
}

html.page-about .nav-link.active {
  color: var(--color-text-primary);
}

html.page-about .about-bio .article-title {
  color: var(--color-text-primary);
}

html.page-about .about-bio .article-body,
html.page-about .about-bio .article-body p,
html.page-about .about-body p {
  color: var(--color-text-primary);
}

html.page-about .cv-entry-role,
html.page-about .cv-skill-name,
html.page-about .cv-lang-name {
  color: var(--color-text-primary);
}

html.page-about .about-cv-title {
  color: var(--color-text-secondary);
}

html.page-about .cv-entry-company,
html.page-about .cv-entry-tag,
html.page-about .cv-group-label,
html.page-about .panel-project-back,
html.page-about .contact-item-link {
  color: var(--color-text-secondary);
}

html.page-about .panel-project-back:hover,
html.page-about .contact-item-link:hover {
  color: var(--accent);
}

.about-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: start;
}

.about-layout > * {
  min-width: 0;
}

.about-bio {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.about-cv-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* Wrapper is invisible at ≥768px — cv-cols remain direct grid children */
.about-cv-grid {
  display: contents;
}

.about-cv-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  margin: 0;
}

.about-bio .article-header {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.about-bio .article-title {
  color: var(--color-text-primary);
}

.about-bio .article-body,
.about-bio .article-body p {
  color: var(--color-text-primary);
}

/* About: pin CV columns to bottom of viewport on desktop only */
@media (min-width: 1024px) {
  html.page-about body {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  html.page-about .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  html.page-about .about-layout {
    flex: 1;
    grid-template-rows: 1fr;
  }

  html.page-about .about-cv-col {
    align-self: end;
  }
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
}

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

.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-12);
  margin-top: var(--spacing-12);
  padding-top: var(--spacing-8);
  border-top: var(--border);
}

.article-nav-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  padding: var(--spacing-6) 0;
  transition: var(--transition-color);
}

.article-nav-prev .article-nav-title {
  order: 1;
  text-align: left;
}

.article-nav-prev .article-nav-label {
  order: 2;
  flex-shrink: 0;
}

.article-nav-next {
  justify-content: flex-end;
}

.article-nav-next .article-nav-label {
  order: 1;
  flex-shrink: 0;
}

.article-nav-next .article-nav-title {
  order: 2;
  text-align: right;
}

.article-nav-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
}



.article-nav-title {
  width: fit-content;
  max-width: 100%;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  transition: var(--transition-color);
  min-width: 0;
}

.article-nav-btn:hover .article-nav-title {
  background: var(--color-surface-contrast);
  color: var(--color-text-inverse);
}

.article-nav-btn:hover .article-nav-label {
  color: var(--color-text-primary);
}

/* ============================================
   Project Detail Page
   ============================================ */

.project-detail-page {
  width: 100%;
  max-width: var(--grid-content-width);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-large);
}

.project-detail-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: var(--content-width-narrow);
  margin: 0 auto;
  width: 100%;
  min-width: 0;
}

.project-detail-page-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--body-1-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}



.project-detail-page-meta {
  display: flex;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

.project-images-group:has(.project-group-info:hover) .project-group-title,
.project-images-group:has(.project-flow-block:hover) .project-group-title {
  color: var(--color-text-inverse);
  background: var(--color-surface-contrast);
}

.project-detail-page-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.project-meta-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}



.project-meta-value {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
}



/* Vertical layout: text then images (no text + image side by side) */
.project-section {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-large);
  min-width: 0;
}

.project-section-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
  max-width: var(--content-width-narrow);
  width: 100%;
  margin: 0 auto;
}

.project-section-title {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
  text-transform: uppercase;
}



.project-section-text {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}



.project-section-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.project-section-list li::before {
  content: "— ";
  color: var(--color-text-secondary);
}



.project-section-list strong {
  font-weight: var(--body-3-weight-regular);
  color: var(--color-text-primary);
}



.project-section-media {
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-full {
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4);
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);
  width: 100%;
  max-width: var(--grid-container-width);
}

.project-image-placeholder {
  width: 100%;
  border-radius: var(--radius-md);
}

[data-theme="dark"] .project-image-placeholder {
  background: var(--color-surface-muted) !important;
}

/* ============================================
   Principles Page
   ============================================ */

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.glossary-group {
  display: flex;
  flex-direction: column;
}

.glossary-group-title {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  font-weight: var(--label-heading-weight-regular);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-4) 0;
  text-transform: uppercase;
}



.glossary-entry.open .glossary-term {
  padding-bottom: var(--spacing-4);
}

.glossary-entry.open .glossary-toggle {
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--easing-enter);
}

.glossary-entry:not(.open) .glossary-toggle {
  transition: transform var(--duration-base) var(--easing-enter);
}

.glossary-term {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--spacing-4) 0;
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: var(--transition-color);
}

.glossary-term-text {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  opacity: 1;
  transition: var(--transition-opacity);
}



.glossary-term:hover .glossary-term-text {
  opacity: var(--opacity-hover-strong);
}



.glossary-term-excerpt {
  font-family: var(--label-3-font-family);
  font-size: var(--label-3-font-size);
  font-weight: var(--label-3-weight-regular);
  line-height: var(--label-3-line-height);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-2);
  margin-left: 0;
  white-space: normal;
  opacity: 1;
  transition: var(--transition-opacity);
}



.glossary-term:hover .glossary-term-excerpt {
  opacity: var(--opacity-hover-strong);
}



.glossary-toggle {
  font-family: var(--label-heading-font-family);
  font-size: var(--icon-md);
  line-height: var(--label-heading-line-height);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  width: var(--icon-lg);
  text-align: center;
}



.glossary-definition-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--easing-standard);
}

.glossary-entry.open .glossary-definition-wrapper {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .glossary-definition-wrapper {
    transition-duration: 0.01ms;
  }
}

.glossary-definition {
  padding: 0 0 var(--spacing-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-height: 0;
  overflow: hidden;
}

.glossary-definition p {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  font-weight: var(--body-3-weight-regular);
  line-height: var(--body-3-line-height);
  color: var(--color-text-primary);
  margin: 0;
}



.glossary-tag {
  display: none;
}

/* ============================================
   Sub-Page Responsive
   ============================================ */

@media (max-width: 1280px) {
  .page-content {
    padding: var(--spacing-8) var(--grid-margin) var(--page-padding-bottom);
  }
}

@media (max-width: 768px) {
  .page-inner {
    max-width: 100%;
  }

  .page-header {
    margin-bottom: var(--spacing-8);
  }

  .writing-entry {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
    min-height: var(--size-touch-target);
  }

  .writing-date {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding: var(--spacing-4) var(--grid-margin) var(--page-padding-bottom);
  }

  .glossary-term {
    padding: var(--spacing-4) 0;
  }

  .writing-entry {
    padding: var(--spacing-3) 0;
  }
}

/* ============================================
   Writings Three-Column Layout
   ============================================ */

.writings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: auto minmax(0, calc(var(--app-vh) - var(--size-panel-sticky-top)));
  column-gap: var(--grid-gutter);
  row-gap: var(--section-gap);
  align-items: start;
}

.writings-layout > * {
  min-width: 0;
}

/* LEFT: Page header — sticky */
.writings-panel-header {
  position: sticky;
  top: var(--size-panel-sticky-top);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  overflow: hidden;
  overscroll-behavior: none;
}

.writings-page-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--body-1-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-secondary);
  margin: 0;
  text-wrap: balance;
}

.writings-page-subtitle {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
}

/* MIDDLE: Scrollable list of writings — sticky, starts from top */
.writings-panel-list {
  position: sticky;
  top: 0;
  max-height: 100vh;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding-bottom: var(--spacing-16);
  scroll-padding-bottom: var(--spacing-16);
}

.writings-panel-list::-webkit-scrollbar {
  display: none;
}

.writings-panel-list::after {
  content: "";
  display: block;
  min-height: var(--spacing-16);
  flex-shrink: 0;
}

.writing-list-item {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-1);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-opacity);
}

.writing-list-item-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  white-space: normal;
}

.writing-list-item-title {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-tertiary);
  min-width: 0;
  transition: color var(--duration-fast) var(--easing-standard);
}

.writing-list-item-year {
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--easing-standard);
}

/* Active state */
.writing-list-item.active .writing-list-item-title {
  color: var(--color-text-primary);
}

.writing-list-item.active .writing-list-item-year {
  color: var(--color-text-primary);
}

/* Hover on inactive items */
.writing-list-item:not(.active):hover .writing-list-item-title {
  color: var(--color-text-primary);
}

/* RIGHT: Article content — sticky, scrollable */
.writings-panel-article {
  position: sticky;
  top: var(--size-panel-sticky-top);
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: var(--spacing-10);
  scroll-padding-bottom: var(--spacing-10);
}

.writings-panel-article::-webkit-scrollbar {
  display: none;
}

.writing-article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
  padding-bottom: var(--spacing-8);
}

.writings-panel-article .writing-article[hidden] {
  display: none !important;
}

.writing-article-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.writing-article-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--body-1-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin: 0;
  text-wrap: balance;
}

.writing-article-intro {
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--body-2-line-height);
  letter-spacing: var(--body-2-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
}

.writing-article-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Extra breathing room between major sections (stacked siblings in the article) */
.writing-article > .writing-article-section + .writing-article-section {
  margin-top: var(--spacing-6);
}

/* Flat rhythm (e.g. "Lately Life"): every block sits one even gap apart — matching
   the header→first-section gap — and the bullet list is tightened. */
.writing-article.writing-article--flat > .writing-article-section + .writing-article-section {
  margin-top: 0;
}

.writing-article--flat .writing-article-unordered-list > li:not(:last-child) {
  margin-bottom: var(--spacing-2);
}

.writing-article-section-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-sm-font-size);
  line-height: var(--display-sm-line-height);
  font-weight: var(--body-1-weight-regular);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text-primary);
  margin: 0;
  margin-top: var(--spacing-4);
  text-transform: lowercase;
  text-wrap: balance;
}

.writing-article-section-title::first-letter {
  text-transform: uppercase;
}

/* Glossary: smaller section titles (How I use it, Example) */
.glossary-article .writing-article-section-title {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  font-weight: var(--label-heading-weight-regular);
  color: var(--color-text-tertiary);
}

.writing-article-body {
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--writing-article-body-line-height);
  letter-spacing: var(--writing-article-body-letter-spacing);
  color: var(--color-text-prose);
  margin: 0;
}

/* Ordered / nested lists in writings (semantic numbering) */
/* Avoid display:flex on ol/ul — it breaks marker/body pairing in WebKit (blank list rows). */
.writing-article-ordered-list,
.writing-article-unordered-list {
  font-family: var(--body-2-font-family);
  font-size: var(--body-2-font-size);
  line-height: var(--writing-article-body-line-height);
  letter-spacing: var(--writing-article-body-letter-spacing);
  color: var(--color-text-prose);
  margin: 0;
  padding-left: var(--spacing-8);
  list-style-position: outside;
}

.writing-article-unordered-list {
  list-style-type: disc;
}

.writing-article-ordered-list > li,
.writing-article-unordered-list > li {
  padding-left: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.writing-article-ordered-list > li:last-child,
.writing-article-unordered-list > li:last-child {
  margin-bottom: 0;
}

.writing-article-ordered-list .writing-article-nested-list {
  margin: var(--spacing-2) 0 0 0;
  padding-left: var(--spacing-6);
  list-style-type: disc;
  list-style-position: outside;
}

.writing-article-ordered-list .writing-article-nested-list > li {
  padding-left: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.writing-article-ordered-list .writing-article-nested-list > li:last-child {
  margin-bottom: 0;
}

.writing-article-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.writing-article-media-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

/* Figures spliced between body paragraphs (direct child of section, not in media-stack) */
.writing-article-section > .writing-article-figure {
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-8);
}

.writing-article-figure img,
.writing-article-figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  outline: 1px solid rgba(0, 0, 0, 0.06);
  outline-offset: -1px;
}

[data-theme="dark"] .writing-article-figure img,
[data-theme="dark"] .writing-article-figure video {
  outline-color: rgba(255, 255, 255, 0.06);
}

.writing-article-figure--half img {
  width: 50%;
  max-width: 50%;
}

/* Full-width “mat” with smaller centered media + caption band (Polaroid-style) */
.writing-article-figure--polaroid {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-8) var(--spacing-10) var(--spacing-14) var(--spacing-10);
  /* Slightly off page bg; avoids flat white-on-white */
  background: var(--color-surface-muted);
  border: none;
  border-radius: 0;
  box-shadow: none;
  align-items: center;
  gap: var(--spacing-5);
}

.writing-article-figure--polaroid video,
.writing-article-figure--polaroid img {
  width: 65%;
  max-width: 100%;
  border-radius: 0;
}

.writing-article-figure--polaroid .writing-article-caption {
  align-self: stretch;
  text-align: center;
}

.writing-article-caption {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  font-weight: var(--label-heading-weight-regular);
  color: var(--color-text-tertiary);
  margin: 0;
  text-transform: uppercase;
}

/* Prev / Next nav within article panel */
.writing-article-nav,
.glossary-article-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-4) 0;
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-8);
  min-width: 0;
}

.writing-article-nav--next-only,
.glossary-article-nav--next-only {
  justify-content: flex-end;
}

.writing-article-nav--prev-only,
.glossary-article-nav--prev-only {
  justify-content: flex-start;
}

.writing-article-nav-item,
.glossary-article-nav-item {
  flex: 0 1 50%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: var(--transition-color);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

.writing-article-nav-next,
.glossary-article-nav-next {
  text-align: right;
  align-items: flex-end;
}

.writing-article-nav-label,
.glossary-article-nav-label {
  font-family: var(--label-heading-font-family);
  font-size: var(--label-heading-font-size);
  line-height: var(--label-heading-line-height);
  letter-spacing: var(--label-heading-letter-spacing);
  color: var(--color-gray-lg);
  transition: color var(--duration-fast) var(--easing-standard);
}

.writing-article-nav-title,
.glossary-article-nav-title {
  width: fit-content;
  max-width: 100%;
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-secondary);
  transition:
    color var(--duration-fast) var(--easing-standard),
    background-color var(--duration-fast) var(--easing-standard);
  overflow-wrap: anywhere;
}

.writing-article-nav-item:hover .writing-article-nav-title,
.glossary-article-nav-item:hover .glossary-article-nav-title {
  background: var(--color-surface-contrast);
  color: var(--color-text-inverse);
}

.writing-article-nav-item:hover .writing-article-nav-label,
.glossary-article-nav-item:hover .glossary-article-nav-label {
  color: var(--color-text-primary);
}

.writing-article-nav-placeholder,
.glossary-article-nav-placeholder {
  flex: 1;
  min-width: 0;
}

@keyframes content-swap-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes content-swap-enter-next {
  from {
    opacity: 0;
    transform: translate3d(var(--content-swap-in-x), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes content-swap-enter-prev {
  from {
    opacity: 0;
    transform: translate3d(var(--content-swap-in-x), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================
   Principles Three-Column Layout
   ============================================ */

.glossary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: auto minmax(0, calc(var(--app-vh) - var(--size-panel-sticky-top)));
  column-gap: var(--grid-gutter);
  row-gap: var(--section-gap);
  align-items: start;
}

.glossary-layout > * {
  min-width: 0;
}

.glossary-panel-header {
  position: sticky;
  top: var(--size-panel-sticky-top);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  overflow: hidden;
  overscroll-behavior: none;
}

.glossary-page-title {
  font-family: var(--body-1-font-family);
  font-size: var(--display-lg-font-size);
  line-height: var(--display-lg-line-height);
  font-weight: var(--body-1-weight-regular);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-secondary);
  margin: 0;
  text-wrap: balance;
}

.glossary-page-subtitle {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-secondary);
  margin: 0;
}

.glossary-panel-list {
  position: sticky;
  top: var(--size-panel-sticky-top);
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding-bottom: var(--spacing-16);
  scroll-padding-bottom: var(--spacing-16);
}

.glossary-panel-list::-webkit-scrollbar {
  display: none;
}

.glossary-panel-list::after {
  content: "";
  display: block;
  min-height: var(--spacing-16);
  flex-shrink: 0;
}

.glossary-list-item {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-1);
  text-decoration: none;
  cursor: pointer;
}

.glossary-list-item-title {
  font-family: var(--body-3-font-family);
  font-size: var(--body-3-font-size);
  line-height: var(--line-height-normal);
  letter-spacing: var(--body-3-letter-spacing);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--easing-standard);
}

.glossary-list-item.active .glossary-list-item-title {
  color: var(--color-text-primary);
}

.glossary-list-item:not(.active):hover .glossary-list-item-title {
  color: var(--color-text-primary);
}

.glossary-panel-article {
  position: sticky;
  top: var(--size-panel-sticky-top);
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.glossary-panel-article::-webkit-scrollbar {
  display: none;
}

.glossary-article {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.glossary-panel-article .glossary-article[hidden] {
  display: none !important;
}

/* ============================================
   Responsive Audit Fixes
   ============================================ */

img {
  max-width: 100%;
  height: auto;
}

.panel-bio {
  max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
}

.project-group-tags,
.panel-project-tags {
  white-space: normal;
}

.writing-article-nav-item,
.glossary-article-nav-item {
  width: auto;
}

.about-bio {
  width: 100%;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --grid-margin: var(--spacing-6);
    --grid-gutter: var(--spacing-6);
  }

  .header {
    padding: var(--spacing-5) 0 var(--spacing-4);
  }

  .main-content,
  .page-content {
    padding-top: var(--spacing-6);
  }

  .homepage-layout {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    row-gap: var(--spacing-16);
  }

  .panel-bio {
    gap: var(--section-gap-large);
  }

  .panel-images {
    gap: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }

  .project-images-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .project-group-info {
    order: -1;
    gap: var(--spacing-2);
  }

  .project-group-header {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .homepage-layout.is-detail {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }

  .homepage-layout.is-detail .project-detail-images {
    grid-column: 2;
  }

  .writings-layout,
  .glossary-layout {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, calc(var(--app-vh) - var(--size-panel-sticky-top)));
    row-gap: var(--section-gap);
  }

  /* Explicit column placement: list in narrow col, article in wide col */
  .writings-panel-header,
  .glossary-panel-header {
    grid-column: 1;
    grid-row: 1;
  }

  .writings-panel-list,
  .glossary-panel-list {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    gap: var(--spacing-6);
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top) - 120px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .writings-panel-list {
    gap: var(--spacing-8);
  }

  .writings-panel-article,
  .glossary-panel-article {
    grid-column: 2;
    grid-row: 1 / 3;
    padding-bottom: var(--spacing-12);
  }

  .about-bio {
    grid-column: 1 / 3;
  }

  .about-cv-col {
    grid-column: auto;
  }

  .cv-modal {
    gap: var(--spacing-16);
    padding: var(--spacing-6);
  }

  .cv-sidebar {
    width: 220px;
  }
}

@media (max-width: 1023px) {
  :root {
    --grid-margin: var(--spacing-5);
    --grid-gutter: var(--spacing-4);
    --section-gap-large: var(--spacing-8);
  }

  html.page-projects,
  html.page-writings,
  html.page-glossary,
  html.page-about {
    height: auto;
    overflow: visible;
  }

  html.page-projects body,
  html.page-writings body,
  html.page-glossary body,
  html.page-about body {
    height: auto;
  }

  .header {
    padding: var(--spacing-5) 0 var(--spacing-4);
  }

  .main-content,
  .page-content {
    padding-top: var(--spacing-6);
  }

  .homepage-layout,
  .writings-layout,
  .glossary-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .writings-layout {
    row-gap: var(--spacing-4);
  }

  .glossary-layout {
    row-gap: var(--spacing-8);
  }

  .panel-bio,
  .panel-images,
  .panel-project-info,
  .project-detail-images,
  .writings-panel-header,
  .writings-panel-list,
  .writings-panel-article,
  .glossary-panel-header,
  .glossary-panel-list,
  .glossary-panel-article {
    position: static;
    max-height: none;
    overflow: visible;
    grid-column: 1;
  }

  .panel-bio {
    grid-row: 1;
    gap: var(--section-gap-large);
    padding-inline-end: 0;
  }

  .panel-images {
    grid-row: 2;
    gap: var(--spacing-10);
    padding-bottom: var(--spacing-10);
  }

  .project-images-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .project-group-info {
    order: -1;
    gap: var(--spacing-2);
  }

  .project-group-header {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  .homepage-layout.is-detail .panel-bio {
    display: none;
  }

  .homepage-layout.is-detail .panel-project-info {
    display: flex;
    grid-row: 1;
  }

  .homepage-layout.is-detail .panel-images {
    display: none;
  }

  .homepage-layout.is-detail .project-detail-images {
    display: flex;
    grid-row: 2;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-12);
  }

  .writings-panel-header,
  .glossary-panel-header {
    grid-row: 1;
  }

  .writings-panel-article,
  .glossary-panel-article {
    grid-row: 2;
    padding-bottom: var(--spacing-12);
    scroll-padding-bottom: var(--spacing-12);
  }

  .writings-panel-list,
  .glossary-panel-list {
    grid-row: 3;
    gap: var(--spacing-5);
  }

  .glossary-list-item {
    gap: var(--spacing-2);
  }

  .glossary-list-item-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .article-inner,
  .project-detail-page-header,
  .project-section-content,
  .about-bio,
  .about-cv-col {
    max-width: 100%;
  }

  .project-image-grid-2,
  .project-image-grid-3 {
    grid-template-columns: 1fr;
  }

  .contact-item-link,
  .nav-link,
  .writing-list-item,
  .glossary-list-item,
  .article-nav-btn,
  .writing-article-nav-item,
  .glossary-article-nav-item {
    min-height: var(--size-touch-target);
  }

  .cv-overlay {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
  }

  .cv-modal {
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: var(--spacing-16);
    padding: var(--spacing-6);
    max-height: none;
  }

  .cv-sidebar {
    width: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-4);
  }

  .cv-col {
    gap: var(--spacing-16);
  }

  .cv-entry-row {
    flex-wrap: wrap;
    row-gap: var(--spacing-1);
  }

  .cv-entry-date {
    text-align: left;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .nav-toggle {
    display: none;
  }

  .theme-toggle {
    display: inline-flex;
  }

  .main-nav {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-2);
    padding: 0;
    border: none;
    background: none;
  }

  .homepage-layout {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    row-gap: var(--spacing-16);
  }

  .panel-bio {
    position: sticky;
    top: var(--size-panel-sticky-top);
    grid-column: 1;
    grid-row: 1;
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
    overflow-y: auto;
  }

  .panel-images {
    position: sticky;
    top: var(--size-panel-sticky-top);
    grid-column: 2;
    grid-row: 1;
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
    overflow-y: auto;
    padding-bottom: var(--spacing-10);
  }

  .panel-project-info {
    display: none;
  }

  .project-images-group {
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
  }

  .project-group-info {
    order: -1;
  }

  .homepage-layout.is-detail {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  }

  .homepage-layout.is-detail .panel-project-info {
    display: flex;
    position: sticky;
    top: var(--size-panel-sticky-top);
    grid-column: 1;
    grid-row: 1;
    max-height: none;
    overflow: visible;
  }

  .homepage-layout.is-detail .project-detail-images {
    display: flex;
    position: sticky;
    top: var(--size-panel-sticky-top);
    grid-column: 2;
    grid-row: 1;
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
    overflow-y: auto;
    padding-bottom: var(--spacing-12);
  }

  .writings-layout,
  .glossary-layout {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, calc(var(--app-vh) - var(--size-panel-sticky-top)));
    row-gap: var(--section-gap);
  }

  .writings-panel-header,
  .glossary-panel-header {
    position: sticky;
    top: var(--size-panel-sticky-top);
    grid-column: 1;
    grid-row: 1;
  }

  .writings-panel-list,
  .glossary-panel-list {
    position: sticky;
    top: calc(var(--size-panel-sticky-top) + 92px + var(--section-gap));
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top) - 120px);
    overflow-y: auto;
    overflow-x: hidden;
    gap: var(--spacing-4);
  }

  .writings-panel-article,
  .glossary-panel-article {
    position: sticky;
    top: var(--size-panel-sticky-top);
    grid-column: 2;
    grid-row: 1 / 3;
    max-height: calc(var(--app-vh) - var(--size-panel-sticky-top));
    overflow-y: auto;
    padding-bottom: var(--spacing-10);
  }

  .about-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: var(--spacing-8);
  }

  .about-bio {
    grid-column: 1;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .about-cv-grid {
    display: grid;
    grid-column: 2;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .about-cv-col {
    grid-column: auto;
    position: static;
    max-height: none;
    overflow: visible;
    align-self: start;
  }

  /* Tighter vertical gap between social links and email in narrow bio column */
  .panel-bio-contact-links .contact-item-link:last-child {
    margin-top: calc(-1 * var(--spacing-2));
  }
}

@media (max-width: 767px) {
  :root {
    --grid-margin: var(--spacing-4);
    --grid-gutter: var(--spacing-3);
  }

  html.page-projects {
    height: auto;
    overflow: visible;
  }

  html.page-projects body {
    height: auto;
  }

  .header {
    padding: var(--spacing-4) 0;
  }

  .header-content {
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .logo-btn {
    padding-left: 0;
    padding-right: var(--spacing-2);
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  .main-content,
  .page-content {
    padding-top: var(--spacing-4);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .panel-bio,
  .panel-images,
  .panel-project-info,
  .project-detail-images,
  .writings-panel-list,
  .glossary-panel-list,
  .writings-panel-article,
  .glossary-panel-article {
    gap: var(--spacing-6);
  }

  .writings-panel-list {
    gap: var(--spacing-8);
  }

  .panel-images {
    gap: var(--spacing-16);
  }

  .homepage-layout,
  .homepage-layout.is-detail {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-16);
  }

  .about-layout {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .about-bio {
    grid-column: 1;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .about-cv-grid {
    display: grid;
    grid-column: 1;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-8);
  }

  .about-cv-col {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .panel-bio,
  .panel-images,
  .panel-project-info {
    position: static;
    max-height: none;
    overflow: visible;
    grid-column: 1;
  }

  .panel-bio {
    grid-row: 1;
    gap: var(--spacing-4);
  }

  .panel-bio-contact {
    gap: var(--spacing-2);
  }

  .panel-bio-contact-links .contact-item-link:last-child {
    margin-top: calc(-1 * var(--spacing-1));
  }


  .panel-project-info {
    grid-row: 2;
    display: none;
  }

  .homepage-layout.is-detail .panel-project-info,
  .writings-panel-article,
  .glossary-panel-article,
  .writing-article,
  .glossary-article {
    padding-bottom: var(--size-mobile-bottom-nav-reserve);
    scroll-padding-bottom: var(--size-mobile-bottom-nav-reserve);
  }

  .homepage-layout.is-detail #panel-project-info {
    padding-bottom: 0;
    scroll-padding-bottom: 0;
  }

  html.page-projects .panel-project-controls:not([hidden]),
  .writing-article-nav,
  .glossary-article-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    padding: var(--spacing-4) var(--grid-margin) calc(var(--spacing-4) + env(safe-area-inset-bottom, 0px));
    background: var(--color-bg);
  }

  html.page-projects .panel-project-controls:not([hidden]) {
    display: flex;
    margin-top: 0 !important;
  }

  html.page-projects .panel-project-controls:not([hidden]) .panel-project-nav,
  .writing-article-nav,
  .glossary-article-nav {
    column-gap: var(--spacing-4);
    row-gap: var(--spacing-4);
  }

  .panel-images {
    grid-column: 1;
    grid-row: 2;
    padding-bottom: var(--spacing-8);
  }

  .homepage-layout.is-detail .panel-project-info {
    display: flex;
    position: static;
    grid-column: 1;
    grid-row: 1;
    max-height: none;
    overflow: visible;
  }

  .homepage-layout.is-detail .project-detail-images {
    display: flex;
    position: static;
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--spacing-8);
  }

  .homepage-layout.is-detail .panel-project-meta:not([hidden]) {
    display: grid;
    gap: var(--spacing-4);
  }

  .panel-project-info,
  .project-detail-images {
    min-width: 0;
  }

  .project-detail-meta {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .homepage-layout.is-detail .panel-project-info {
    gap: var(--spacing-4);
  }

  .homepage-layout.is-detail .panel-project-controls {
    margin-top: var(--spacing-4);
  }

  .article-nav {
    grid-template-columns: 1fr;
    gap: var(--spacing-6);
  }

  .writing-article-nav,
  .glossary-article-nav {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .writing-article-nav-item,
  .glossary-article-nav-item,
  .writing-article-nav-next,
  .glossary-article-nav-next {
    width: 100%;
    max-width: 100%;
    text-align: left;
    align-items: flex-start;
  }

  .section-nav-toggle {
    display: inline-flex;
  }

  .section-panel-header-inner {
    align-items: center;
  }

  body.section-nav-open .writings-panel-header,
  body.section-nav-open .glossary-panel-header {
    display: none;
  }

  body.section-nav-open .writings-layout,
  body.section-nav-open .glossary-layout {
    row-gap: 0;
  }

  /* So fixed #writings-list is positioned relative to viewport, not main (main has transform) */
  body.section-nav-open .main-content {
    transform: none;
  }

  .section-list-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-overlay-dropdown);
    z-index: 89;
    cursor: pointer;
  }

  .section-list-overlay:not([hidden]) {
    display: block;
  }

  .writings-panel-list,
  .glossary-panel-list {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--app-vh) * 0.5);
    max-height: calc(var(--app-vh) * 0.5);
    z-index: 90;
    margin: 0;
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-6);
    padding-bottom: calc(var(--spacing-6) + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface-elevated);
    border: 0;
    border-radius: 0;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--spacing-4);
  }

  #writings-list {
    box-shadow: none;
  }

  [data-theme="dark"] .writings-panel-list,
  [data-theme="dark"] .glossary-panel-list {
    box-shadow: var(--shadow-soft-dark);
  }

  .writings-panel-list.is-open,
  .glossary-panel-list.is-open {
    display: flex;
  }

  .writings-panel-list.is-open .section-list-overlay-header,
  .glossary-panel-list.is-open .section-list-overlay-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
  }

  .writings-panel-list.is-open .section-list-search,
  .glossary-panel-list.is-open .section-list-search {
    display: block;
    flex-shrink: 0;
  }

  .section-list-overlay-header {
    display: none;
  }

  .writings-panel-list.is-open .section-list-overlay-content,
  .glossary-panel-list.is-open .section-list-overlay-content {
    display: grid;
  }

  .section-list-search-input {
    width: 100%;
    padding: var(--spacing-2) 0;
    font-family: var(--label-heading-font-family);
    font-size: var(--label-heading-font-size);
    line-height: var(--label-heading-line-height);
    letter-spacing: var(--label-heading-letter-spacing);
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .section-list-search-input::-webkit-search-cancel-button,
  .section-list-search-input::-webkit-search-decoration,
  .section-list-search-input::-webkit-search-results-button,
  .section-list-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .section-list-search-input::-ms-clear,
  .section-list-search-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
  }

  .section-list-search-input::placeholder {
    color: var(--color-text-tertiary);
    text-transform: uppercase;
  }

  .section-list-search-input:focus {
    outline: none;
    border-bottom-color: var(--accent);
  }

  .writings-panel-list.is-open .section-list-overlay-content,
  .glossary-panel-list.is-open .section-list-overlay-content {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
    row-gap: var(--spacing-5);
    align-content: start;
    padding-bottom: calc(var(--spacing-8) + env(safe-area-inset-bottom, 0px));
  }

  .section-list-overlay-content::-webkit-scrollbar {
    display: none;
  }

  .writings-panel-list.is-open .section-list-overlay-content,
  .glossary-panel-list.is-open .section-list-overlay-content {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .writings-panel-list .writing-list-item,
  .glossary-panel-list .glossary-list-item {
    padding: var(--spacing-4) 0;
    min-height: 0;
    width: 100%;
    text-align: left;
  }

  .writings-panel-list.is-open .writing-list-item-title,
  .glossary-panel-list.is-open .glossary-list-item-title {
    font-family: var(--label-3-font-family);
    font-size: var(--label-3-font-size);
    line-height: var(--label-3-line-height);
    letter-spacing: var(--label-3-letter-spacing);
  }

  .project-group-title,
  .panel-project-title,
  .writings-page-title,
  .glossary-page-title,
  .writing-article-title {
    font-size: var(--display-sm-font-size);
  }

  .writing-article-section-title {
    font-size: var(--body-1-font-size);
  }

  /* Article nav: side-by-side columns at mobile (overrides stacked layout from wider breakpoints) */
  .writing-article-nav,
  .glossary-article-nav {
    flex-direction: row;
    gap: var(--spacing-4);
  }

  .writing-article-nav-item,
  .glossary-article-nav-item {
    flex: 1;
    width: auto;
    max-width: none;
    min-height: var(--size-touch-target);
    padding: 0;
  }

  .writing-article-nav-next,
  .glossary-article-nav-next {
    text-align: right;
    align-items: flex-end;
  }

  /* Bio panel: tighter gaps on phone so main content starts earlier */
  .panel-bio {
    gap: var(--spacing-4);
  }

  .panel-bio-contact {
    gap: var(--spacing-1);
  }

  /* Bio panel: touch targets, no horizontal padding so links stay left-aligned with copy */
  .panel-bio .contact-item-link {
    min-height: 32px;
    padding: var(--spacing-1) 0;
    display: inline-flex;
    align-items: center;
  }

  html.page-about .contact-item-link {
    min-height: 32px;
    padding: var(--spacing-1) 0;
  }

  .panel-bio-about-links {
    gap: var(--spacing-4);
  }

  .panel-bio-contact-links {
    column-gap: var(--spacing-5);
    row-gap: var(--spacing-0);
  }

  /* Email forces its own row */
  .panel-bio-contact-links .contact-item-link:last-child {
    flex-basis: 100%;
  }


  .cv-overlay {
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
  }

  .cv-modal {
    width: 100%;
    max-width: none;
    height: min(66.67dvh, 720px);
    max-height: min(66.67dvh, 720px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    gap: var(--spacing-6);
    padding: var(--spacing-5) var(--grid-margin) var(--spacing-6);
    border-radius: 0;
  }

  .cv-sidebar {
    display: contents;
  }

  .cv-sidebar-title {
    order: 0;
  }

  .cv-col {
    order: 1;
    gap: var(--spacing-8);
  }

  .cv-sidebar-author {
    order: 2;
    align-self: flex-start;
    margin-top: auto;
    padding-top: var(--spacing-6);
  }

  .cv-close {
    display: none;
  }
}

@media (max-width: 428px) {
  :root {
    --grid-margin: var(--spacing-4);
    --grid-gutter: var(--spacing-2);
  }

  .header-content,
  .main-content,
  .page-content {
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .panel-project-nav {
    gap: var(--spacing-3);
  }

  .project-group-header,
  .panel-project-header {
    gap: var(--spacing-1);
  }

  .panel-bio-contact-links {
    column-gap: var(--spacing-5);
    row-gap: var(--spacing-0);
  }

  .panel-bio-about-links {
    gap: var(--spacing-2);
  }

  .cv-modal {
    padding: var(--spacing-5);
  }

  .about-cv-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 374px) {
  .header-content,
  .main-content,
  .page-content {
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }

  .header-content {
    gap: var(--spacing-1);
  }

  .logo-btn {
    gap: var(--spacing-1);
  }

  .panel-images,
  .project-detail-images,
  .writings-panel-article,
  .glossary-panel-article {
    padding-bottom: var(--spacing-8);
  }
}

@media (hover: none) and (pointer: coarse) {
  html.page-projects {
    height: auto;
    overflow: visible;
  }

  :is(
    a,
    button,
    [role="button"],
    input,
    select,
    textarea,
    summary,
    .writing-list-item,
    .glossary-list-item,
    .writing-article-nav-item,
    .glossary-article-nav-item,
    .glossary-term
  ) {
    -webkit-tap-highlight-color: transparent;
  }

  :is(
    .logo-btn,
    .nav-link,
    .header-cv-link,
    .theme-toggle,
    .section-nav-toggle,
    .section-list-close,
    .header.nav-open .main-nav .nav-link
  ) {
    border-radius: 0;
  }

  html.page-projects body {
    height: auto;
  }

  html.page-projects .panel-bio,
  html.page-projects .panel-project-info,
  html.page-projects .panel-images,
  html.page-projects .project-detail-images {
    max-height: none;
  }

  html.page-projects .panel-bio,
  html.page-projects .panel-images,
  html.page-projects .project-detail-images {
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }

  html.page-projects .panel-images,
  html.page-projects .project-detail-images {
    position: static;
  }

  html.page-projects .panel-project-info {
    top: var(--size-panel-sticky-top);
    align-self: start;
  }
}

/* ============================================
   IMAGE LIGHTBOX (mobile only, ≤ 768px)
   ============================================ */

.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--color-overlay-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  transition: opacity var(--duration-base) var(--easing-standard);
  -webkit-tap-highlight-color: transparent;
}

/* When closed: remove from layout so it never blocks selection or interaction */
.image-lightbox-overlay:not(.is-open) {
  display: none;
  pointer-events: none;
}

.image-lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.image-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  transform: scale(0.94);
  transition: transform var(--duration-base) var(--easing-enter);
}

.image-lightbox-overlay.is-open .image-lightbox-img {
  transform: scale(1);
}

.image-lightbox-close {
  position: absolute;
  top: var(--spacing-4);
  right: var(--spacing-4);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.project-detail-images .project-flow-media-image {
  cursor: zoom-in;
}