/* Academic / Jekyll-adjacent portfolio — calm typography, Harvard crimson */

:root {
  --color-header: #a51c30;
  --color-header-hover: #7b1524;
  --color-text: #1c1c1c;
  --color-muted: #5c5c5c;
  --color-link: #a51c30;
  --color-link-hover: #7b1524;
  --color-border: #e6e2e3;
  --color-surface: #fcfafb;
  --color-bg: #ffffff;
  --color-on-header: #ffffff;
  --color-nav-muted: #f3e4e7;
  --color-github: #1c1c1c;
  --color-dot-ring: #ffffff;
  --color-accent-soft: #f9eef0;
  --color-accent-soft-text: #8a2a3a;
  --color-accent-soft-border: #e0b0b8;
  --color-accent-soft-hover: #f3d8dd;
  --color-accent-soft-hover-border: #c97884;
  --color-accent-rgb: 165, 28, 48;
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body: "PT Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Libre Franklin", "Segoe UI", sans-serif;
  --content-max: 66rem;
  --space-xs: 0.35rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --radius-sm: 6px;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06);
  /* layout dividers (horizontal + vertical rules) */
  --hairline: 2px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --color-header: #a51c30;
  --color-header-hover: #7b1524;
  --color-text: #e6e9ec;
  --color-muted: #a3adb6;
  --color-link: #e0707e;
  --color-link-hover: #f0a0a8;
  --color-border: #2f3841;
  --color-surface: #1b2228;
  --color-bg: #12161a;
  --color-on-header: #ffffff;
  --color-nav-muted: #f0d6db;
  --color-github: #e6e9ec;
  --color-dot-ring: #12161a;
  --color-accent-soft: rgba(165, 28, 48, 0.22);
  --color-accent-soft-text: #f0a0a8;
  --color-accent-soft-border: rgba(224, 112, 126, 0.45);
  --color-accent-soft-hover: rgba(165, 28, 48, 0.34);
  --color-accent-soft-hover-border: rgba(224, 112, 126, 0.65);
  --color-accent-rgb: 165, 28, 48;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  overflow-x: clip;
}

/* Cross-document soft fades disabled — directional crimson wipe owns page nav.
   Theme toggle still uses same-document View Transitions below. */
@view-transition {
  navigation: none;
}

/* Circular paint-splash theme transition (View Transitions API) */
@supports (view-transition-name: none) {
  html {
    view-transition-name: root;
  }

  html.theme-transitioning::view-transition-old(root) {
    animation: none !important;
    mix-blend-mode: normal;
    z-index: 1;
    /* Keep old frame fully opaque until new circle covers it */
    opacity: 1;
  }

  html.theme-transitioning::view-transition-new(root) {
    animation: none !important;
    mix-blend-mode: normal;
    z-index: 9999;
    /* Prevent default VT fade from fighting the circle clip */
    opacity: 1;
  }

  html.theme-transitioning::view-transition-group(root) {
    animation: none !important;
  }
}

/* Directional crimson page wipe (Home ↔ Experience ↔ Education)
   Forward = swipe right (enter from left, exit to right)
   Back = swipe left (enter from right, exit to left)
   Duration 0.4s must stay in sync with WIPE_MS in assets/js/main.js */
html.page-wipe-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  background: var(--color-header, #a51c30);
}

.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: auto;
  background: var(--color-header, #a51c30);
  will-change: transform;
}

.page-wipe.is-animating {
  transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

/* Forward: cover sweeps right, then reveals by exiting right */
.page-wipe--forward.page-wipe--in {
  transform: translateX(-100%);
}

.page-wipe--forward.page-wipe--in.is-active {
  transform: translateX(0);
}

.page-wipe--forward.page-wipe--out {
  transform: translateX(0);
}

.page-wipe--forward.page-wipe--out.is-active {
  transform: translateX(100%);
}

/* Back: cover sweeps left, then reveals by exiting left */
.page-wipe--back.page-wipe--in {
  transform: translateX(100%);
}

.page-wipe--back.page-wipe--in.is-active {
  transform: translateX(0);
}

.page-wipe--back.page-wipe--out {
  transform: translateX(0);
}

.page-wipe--back.page-wipe--out.is-active {
  transform: translateX(-100%);
}

@media (prefers-reduced-motion: reduce) {
  html.page-wipe-pending::before {
    content: none;
  }

  .page-wipe,
  .page-wipe.is-animating {
    transition: opacity 0.16s ease;
  }

  .page-wipe--forward.page-wipe--in,
  .page-wipe--back.page-wipe--in {
    transform: none;
    opacity: 0;
  }

  .page-wipe--forward.page-wipe--in.is-active,
  .page-wipe--back.page-wipe--in.is-active {
    transform: none;
    opacity: 1;
  }

  .page-wipe--forward.page-wipe--out,
  .page-wipe--back.page-wipe--out {
    transform: none;
    opacity: 1;
  }

  .page-wipe--forward.page-wipe--out.is-active,
  .page-wipe--back.page-wipe--out.is-active {
    transform: none;
    opacity: 0;
  }
}

.theme-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--splash-color, #12161a);
  clip-path: circle(0px at var(--splash-x, 50%) var(--splash-y, 50%));
  transition: clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.theme-splash.is-expanding {
  /* Slightly oversized so the circle fully covers corners before removal */
  clip-path: circle(var(--splash-r, 160vmax) at var(--splash-x, 50%) var(--splash-y, 50%));
}

@media (prefers-reduced-motion: reduce) {
  .theme-splash {
    transition: none;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  max-width: 100%;
}

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

.section__body p,
.project-card__desc,
.news-timeline__text {
  font-size: 1.2rem;
  font-weight: 400;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-header);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: var(--space-md);
  top: var(--space-md);
  border-radius: var(--radius-sm);
}

a {
  color: var(--color-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-link-hover);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header);
  color: var(--color-on-header);
  box-shadow: var(--shadow-soft);
}

/* Header — stack in from the left on load */
@keyframes header-stack-in {
  from {
    opacity: 0;
    transform: translate3d(-2.4rem, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.site-logo,
.site-nav li,
.header-actions {
  opacity: 0;
  animation: header-stack-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-logo {
  animation-delay: 0.05s;
}

.site-nav li:nth-child(1) {
  animation-delay: 0.16s;
}

.site-nav li:nth-child(2) {
  animation-delay: 0.28s;
}

.site-nav li:nth-child(3) {
  animation-delay: 0.4s;
}

.site-nav li:nth-child(4) {
  animation-delay: 0.52s;
}

.header-actions {
  animation-delay: 0.64s;
}

.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.95rem var(--space-md);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
  transition:
    padding 0.22s ease,
    gap 0.22s ease;
}

.site-header.is-compact .site-header__inner {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  gap: var(--space-sm);
}

.site-header.is-compact .site-logo {
  font-size: 1.1rem;
}

.site-header.is-compact .site-nav a {
  font-size: 0.92rem;
}

.site-header.is-compact .theme-toggle {
  width: 2.15rem;
  height: 2.15rem;
}

.site-header.is-compact .theme-toggle__icon {
  width: 1.05rem;
  height: 1.05rem;
}

.site-header.is-compact .nav-toggle {
  width: 2.25rem;
  height: 2.05rem;
}

.site-nav {
  position: relative;
  margin-left: auto;
}

.site-nav__indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.5px;
  width: 0;
  border-radius: 1px;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
  will-change: transform, width;
}

.site-nav__indicator.is-ready {
  opacity: 1;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: var(--space-xs);
  flex-shrink: 0;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease,
    width 0.22s ease,
    height 0.22s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
}

.theme-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.theme-toggle__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  transition: width 0.22s ease, height 0.22s ease;
}

.theme-toggle__icon--moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle__icon--sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

.site-logo {
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  font-size: 1.18rem;
  transition: font-size 0.22s ease;
}

.site-logo:hover {
  color: var(--color-nav-muted);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.site-nav a {
  color: var(--color-nav-muted);
  font-family: var(--font-serif);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  transition: font-size 0.22s ease, color 0.15s ease;
}

.site-nav a:hover {
  color: #fff;
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: var(--hairline) solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-sm);
  width: 2.5rem;
  height: 2.25rem;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 3px;
  background: #fff;
  box-shadow: 0 -9px 0 #fff, 0 9px 0 #fff;
}

/* Hero */
.hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 5.5rem var(--space-md) 2.5rem;
  overflow-x: clip;
}

.hero__grid {
  display: grid;
  /* auto first column so .hero__photo width growth pushes siblings */
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 17.5rem);
  gap: var(--space-lg);
  align-items: start;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 2.25rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-name-in {
  from {
    opacity: 0;
    transform: translate3d(-1.5rem, 2rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-aside-in {
  from {
    opacity: 0;
    transform: translate3d(2rem, 1.5rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-photo-fade {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero__meta,
.hero__intro .social {
  opacity: 0;
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__name {
  opacity: 0;
  animation: hero-name-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__aside {
  opacity: 0;
  animation: hero-aside-in 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Headshot last — soft fade + slight scale after the rest of the hero */
.hero__photo {
  --hero-photo-size: 13.5rem;
  --hero-photo-hover: 17.25rem;
  width: var(--hero-photo-size);
  max-width: 100%;
  opacity: 0;
  animation: hero-photo-fade 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.05s;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__photo:hover,
.hero__photo:focus-within {
  width: var(--hero-photo-hover);
}

.hero__name {
  animation-delay: 0.18s;
}

.hero__meta {
  animation-delay: 0.34s;
}

.hero__intro .social {
  animation-delay: 0.5s;
}

.hero__aside {
  animation-delay: 0.42s;
}

.avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-border);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  --parallax-y: 0px;
  transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__photo .avatar {
  transform: translate3d(0, var(--parallax-y), 0);
}

.hero__photo:hover .avatar,
.hero__photo:focus-within .avatar {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transform: scale(1.1);
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__photo:hover .avatar__image,
.hero__photo:focus-within .avatar__image {
  transform: scale(1.16);
}

.hero__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hero__meta {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.55;
}

.hero__meta li {
  margin-bottom: var(--space-xs);
}

.hero__meta li:last-child {
  margin-bottom: 0;
}

.hero__meta b {
  color: var(--color-text);
  font-weight: 700;
}

.meta-link {
  color: inherit;
  text-decoration: none;
}

.meta-link__text {
  text-decoration: none;
  transition: color 0.15s ease;
  overflow-wrap: anywhere;
}

.meta-link:hover .meta-link__text,
.meta-link:focus-visible .meta-link__text {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.meta-link:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
  border-radius: 2px;
}

.copy-email {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  vertical-align: baseline;
}

.copy-email__text {
  text-decoration: none;
  transition: color 0.15s ease;
}

.copy-email__icon {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.72;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.copy-email:hover .copy-email__text,
.copy-email:focus-visible .copy-email__text {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.copy-email:hover .copy-email__icon,
.copy-email:focus-visible .copy-email__icon {
  opacity: 1;
  transform: translateY(-1px);
}

.copy-email:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
  border-radius: 2px;
}

.copy-email__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%) translateY(0.3rem);
  z-index: 10;
  padding: 0.4rem 0.75rem;
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-text);
  border: 1px solid color-mix(in srgb, var(--color-accent-soft-border) 70%, transparent);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.copy-email.is-copied .copy-email__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-sm);
}

.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  font-weight: 700;
  font-size: 0.75rem;
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social__link:hover,
.social__link:focus-visible {
  background: var(--color-header);
  color: #fff;
  border-color: var(--color-header);
  transform: translateY(-1px);
}

/* Brand colors on hover only — keeps header crimson the loudest default */
.social li:nth-child(1) .social__link:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}

.social li:nth-child(2) .social__link:hover {
  background: var(--color-github);
  color: var(--color-bg);
  border-color: var(--color-github);
}

.social li:nth-child(3) .social__link:hover {
  background: #d24b40;
  color: #fff;
  border-color: #d24b40;
}

.social li:nth-child(4) .social__link:hover,
.social li:nth-child(4) .social__link:focus-visible {
  background: #d24b40;
  color: #fff;
  border-color: #d24b40;
}

.social__link .social__icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  flex-shrink: 0;
}

.social__link svg[fill="none"] {
  fill: none;
}

.aside-heading {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
}

.interest-list {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--color-muted);
  font-size: 1.1rem;
  line-height: 1.55;
}

.interest-list li {
  margin-bottom: var(--space-xs);
}

.interest-list li:last-child {
  margin-bottom: 0;
}

/* Main sections */
.content-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2.5rem var(--space-md) 2.75rem;
  overflow-x: clip;
}

.site-nav a[aria-current="page"] {
  color: #fff;
  text-decoration: none;
}

.section {
  padding-top: 3.5rem;
  margin-top: 2.25rem;
  border-top: none;
  scroll-margin-top: 5rem;
}

.section:first-of-type {
  margin-top: 0;
  padding-top: 0;
}

#home {
  scroll-margin-top: 5rem;
}

.section__title {
  display: inline-block;
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.4vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 1.4rem;
  padding-bottom: 0.4rem;
  letter-spacing: -0.015em;
  color: var(--color-text);
  border-bottom: none;
}

/* Crimson underline — draws L→R on enter; retracts R→L on exit (delay only on enter) */
.section__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--color-header) 72%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.section__title.js-title-reveal.is-entering::after,
.section__title.about-motion.is-playing::after,
.section__title:not(.js-title-reveal):not(.about-motion)::after {
  transform: scaleX(1);
  transition-delay: 0.12s;
}

/* About Me entrance — title rises; body sentences fade inline so prose layout stays natural */
#about .section__title.about-motion {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 2.75rem, 0);
  will-change: opacity, transform;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#about .about-line.about-motion {
  display: inline;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

#about .section__title.about-motion.is-playing,
html.js #about .section__title.about-motion.is-playing {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#about .about-line.about-motion.is-playing,
html.js #about .about-line.about-motion.is-playing {
  opacity: 1;
}

/* Other section titles — transition so exit mirrors entrance (same duration/easing) */
.section__title.js-title-reveal,
.exp-group__title.js-title-reveal {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  will-change: opacity, transform;
  transition:
    opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.section__title.js-title-reveal.is-entering,
.exp-group__title.js-title-reveal.is-entering {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section__body p {
  margin: 0 0 var(--space-md);
  max-width: none;
}

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

/* Home about: PT Serif body under Baskerville titles; full width + justified */
#about .section__body p {
  max-width: none;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#about .section__body > p + p {
  margin-top: var(--space-md);
}

/* Skills — rise from below; reverse when scrolled past.
   Observe the list (not each icon): per-icon translateY was pushing
   targets out of the IntersectionObserver root and leaving them stuck. */
.skill-icons.js-reveal {
  overflow: visible;
}

.skill-icons.js-reveal > li {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0s;
}

.skill-icons.js-reveal.in-view > li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* One-time settle bounce when skills first unlock */
.skill-icons.js-reveal.in-view.is-settling > li {
  transition: none;
  animation: skill-settle-bounce 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.skill-icons.js-reveal.in-view.is-settling > li:nth-child(1) { animation-delay: 0.02s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(2) { animation-delay: 0.06s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(3) { animation-delay: 0.1s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(4) { animation-delay: 0.14s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(5) { animation-delay: 0.18s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(6) { animation-delay: 0.22s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(7) { animation-delay: 0.26s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(8) { animation-delay: 0.3s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(9) { animation-delay: 0.34s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(10) { animation-delay: 0.38s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(11) { animation-delay: 0.42s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(12) { animation-delay: 0.46s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(13) { animation-delay: 0.5s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(14) { animation-delay: 0.54s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(15) { animation-delay: 0.58s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(16) { animation-delay: 0.62s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(17) { animation-delay: 0.66s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(18) { animation-delay: 0.7s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(19) { animation-delay: 0.74s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(20) { animation-delay: 0.78s; }
.skill-icons.js-reveal.in-view.is-settling > li:nth-child(n + 21) { animation-delay: 0.82s; }

@keyframes skill-settle-bounce {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -0.22rem, 0);
  }
  82% {
    transform: translate3d(0, 0.08rem, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.skill-icons.js-reveal.in-view > li:nth-child(1) { transition-delay: 0.02s; }
.skill-icons.js-reveal.in-view > li:nth-child(2) { transition-delay: 0.06s; }
.skill-icons.js-reveal.in-view > li:nth-child(3) { transition-delay: 0.1s; }
.skill-icons.js-reveal.in-view > li:nth-child(4) { transition-delay: 0.14s; }
.skill-icons.js-reveal.in-view > li:nth-child(5) { transition-delay: 0.18s; }
.skill-icons.js-reveal.in-view > li:nth-child(6) { transition-delay: 0.22s; }
.skill-icons.js-reveal.in-view > li:nth-child(7) { transition-delay: 0.26s; }
.skill-icons.js-reveal.in-view > li:nth-child(8) { transition-delay: 0.3s; }
.skill-icons.js-reveal.in-view > li:nth-child(9) { transition-delay: 0.34s; }
.skill-icons.js-reveal.in-view > li:nth-child(10) { transition-delay: 0.38s; }
.skill-icons.js-reveal.in-view > li:nth-child(11) { transition-delay: 0.42s; }
.skill-icons.js-reveal.in-view > li:nth-child(12) { transition-delay: 0.46s; }
.skill-icons.js-reveal.in-view > li:nth-child(13) { transition-delay: 0.5s; }
.skill-icons.js-reveal.in-view > li:nth-child(14) { transition-delay: 0.54s; }
.skill-icons.js-reveal.in-view > li:nth-child(15) { transition-delay: 0.58s; }
.skill-icons.js-reveal.in-view > li:nth-child(16) { transition-delay: 0.62s; }
.skill-icons.js-reveal.in-view > li:nth-child(17) { transition-delay: 0.66s; }
.skill-icons.js-reveal.in-view > li:nth-child(18) { transition-delay: 0.7s; }
.skill-icons.js-reveal.in-view > li:nth-child(19) { transition-delay: 0.74s; }
.skill-icons.js-reveal.in-view > li:nth-child(20) { transition-delay: 0.78s; }
.skill-icons.js-reveal.in-view > li:nth-child(n + 21) { transition-delay: 0.82s; }

/* Pull-out: drop stagger so icons leave together */
.skill-icons.js-reveal:not(.in-view) > li {
  transition-delay: 0s;
}

#about .section__body p strong {
  font-family: inherit;
  font-weight: 700;
}

.projects-intro {
  margin: 0 0 var(--space-md);
}

.section--projects .section__body .projects-intro {
  max-width: none;
}

/* Room between page intro and the first timeline card */
#experiences .section__body,
#education .section__body {
  margin-bottom: var(--space-lg);
}

.exp-group__title {
  display: inline-block;
  position: relative;
  margin: 0 0 1.15rem;
  padding: 0 0 0.35rem;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: 0;
}

.exp-group__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: color-mix(in srgb, var(--color-header) 72%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.exp-group__title.is-entering::after,
.exp-group__title:not(.js-title-reveal)::after {
  transform: scaleX(1);
  transition-delay: 0.1s;
}

html[data-theme="dark"] .exp-group__title {
  color: var(--color-text);
  background: none;
  border-color: var(--color-header);
}

.exp-group__title + .project-showcase {
  margin-bottom: 0;
}

#experiences .exp-group__title:not(:first-of-type) {
  margin-top: 2.75rem;
}

/* Project cards — image slot (left) + copy (right) */
.project-showcase {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.project-showcase > li {
  margin: 0;
  padding: 0;
}

/* Scroll reveal — soft fade + rise from the left (projects, experiences, education).
   Do not toggle will-change on .in-view — layer promote/demote mid-transition snaps. */
.project-showcase.js-reveal > li {
  opacity: 0;
  transform: translate3d(-2.75rem, 1.1rem, 0);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

html.js .project-showcase.js-reveal > li.in-view,
.project-showcase.js-reveal > li.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* If ever hidden again, drop stagger so exit uses the same transition (no snap). */
.project-showcase.js-reveal > li:not(.in-view) {
  transition-delay: 0s;
}

/* Interests — same fluid reveal, mirrored from the right */
.interest-list.js-reveal > li {
  opacity: 0;
  transform: translate3d(2.75rem, 0.85rem, 0);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}

html.js .interest-list.js-reveal > li.in-view,
.interest-list.js-reveal > li.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.interest-list.js-reveal > li:not(.in-view) {
  transition-delay: 0s;
}

.project-card {
  padding: 1.1rem 1.35rem;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
}

.section--projects .project-card {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  align-items: start;
}

.project-card__media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: repeating-linear-gradient(
    -45deg,
    var(--color-surface),
    var(--color-surface) 8px,
    var(--color-border) 8px,
    var(--color-border) calc(8px + var(--hairline))
  );
  aspect-ratio: 20 / 13;
  align-self: start;
  cursor: pointer;
}

.project-card__media:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

.project-carousel {
  position: relative;
  min-width: 0;
}

.project-carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.project-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.project-carousel__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.project-carousel__image {
  --carousel-img-zoom: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(var(--carousel-img-zoom));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.project-carousel__label {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  padding: 0.32rem 0.55rem;
  background: rgba(18, 18, 18, 0.58);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.project-carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition:
    opacity 0.18s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.project-carousel__btn svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  flex-shrink: 0;
}

.project-card:focus-within .project-carousel__btn {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-carousel__btn {
    opacity: 1;
  }

  .project-carousel__btn:hover {
    background: rgba(var(--color-accent-rgb), 0.92);
    transform: translateY(-50%) scale(1.04);
  }
}

@media (hover: none), (pointer: coarse) {
  .project-carousel__btn {
    opacity: 1;
  }
}

.project-carousel__btn:active {
  transform: translateY(-50%) scale(0.97);
}

.project-carousel__btn:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.project-carousel__btn--prev {
  left: 0.55rem;
}

.project-carousel__btn--next {
  right: 0.55rem;
}

.project-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.project-card:focus-within .project-carousel__dots {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-carousel__dots {
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .project-carousel__dots {
    opacity: 1;
  }
}

.project-carousel__dot {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition:
    background 0.15s ease,
    width 0.15s ease,
    border-radius 0.15s ease;
}

.project-carousel__dot.is-active {
  width: 0.85rem;
  border-radius: 999px;
  background: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .project-carousel__dot:hover {
    background: rgba(255, 255, 255, 0.85);
  }
}

.project-carousel__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Soft hover cue — image lifts slightly; no floating zoom badge */
.project-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 18, 18, 0);
  pointer-events: none;
  transition: background 0.22s ease;
}

.project-card:focus-within .project-card__media::after {
  background: rgba(18, 18, 18, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover .project-card__media::after {
    background: rgba(18, 18, 18, 0.08);
  }
}

/* Project image lightbox */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgba(8, 16, 24, 0.78);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.image-lightbox__dialog {
  position: relative;
  max-width: min(96vw, 68rem);
  max-height: 92vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.image-lightbox__img,
.image-lightbox__video {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  background: var(--color-bg);
}

.image-lightbox__video {
  width: min(96vw, 68rem);
  height: auto;
  aspect-ratio: 20 / 13;
  object-fit: contain;
  background: #000;
}

.image-lightbox__img[hidden],
.image-lightbox__video[hidden] {
  display: none;
}

.image-lightbox__close {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(12, 28, 38, 0.72);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}

.image-lightbox__close:hover {
  background: rgba(var(--color-accent-rgb), 0.95);
  transform: scale(1.05);
}

.image-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.image-lightbox__nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(18, 18, 18, 0.72);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.image-lightbox__nav svg {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  flex-shrink: 0;
}

.image-lightbox__nav:hover {
  background: rgba(var(--color-accent-rgb), 0.95);
  transform: translateY(-50%) scale(1.05);
}

.image-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.image-lightbox__nav--prev {
  left: 1.25rem;
}

.image-lightbox__nav--next {
  right: 1.25rem;
}

.image-lightbox__nav[hidden] {
  display: none;
}

.image-lightbox__progress {
  position: fixed;
  left: 50%;
  bottom: 1.35rem;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: rgba(12, 28, 38, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.image-lightbox__progress[hidden] {
  display: none;
}

.image-lightbox__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background 0.15s ease,
    width 0.15s ease,
    transform 0.15s ease;
}

.image-lightbox__dot.is-active {
  width: 1.1rem;
  border-radius: 999px;
  background: #fff;
}

.image-lightbox__dot:hover {
  background: rgba(255, 255, 255, 0.85);
}

.image-lightbox__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.is-lightbox-open {
  overflow: hidden;
}

.project-card__body {
  min-width: 0;
}

.project-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  font-weight: 700;
  margin: 0 0 var(--space-xs);
  line-height: 1.35;
  text-transform: none;
  overflow-wrap: break-word;
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
}

.project-card__tags li {
  margin: 0;
  padding: 0;
}

.project-tag {
  display: inline-block;
  padding: 0.22rem 0.5rem;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  border-radius: 2px;
}

.project-card__tags li:nth-child(7n + 1) .project-tag {
  /* Hardcoded light rose wash (same family as sibling colorways) so dark
     mode keeps a soft pink pill — dark --color-accent-soft would muddy it */
  background: #f9eef0;
  color: #8a4550;
  border-color: color-mix(in srgb, #e0b0b8 55%, transparent);
}

.project-card__tags li:nth-child(7n + 2) .project-tag {
  background: #f4f8fc;
  color: #4a6f92;
  border-color: color-mix(in srgb, #c5daf0 55%, transparent);
}

.project-card__tags li:nth-child(7n + 3) .project-tag {
  background: #f4f9f5;
  color: #4f7554;
  border-color: color-mix(in srgb, #c5e0c8 55%, transparent);
}

.project-card__tags li:nth-child(7n + 4) .project-tag {
  background: #fbf7f1;
  color: #9a6a3c;
  border-color: color-mix(in srgb, #f0d2a8 55%, transparent);
}

.project-card__tags li:nth-child(7n + 5) .project-tag {
  background: #f8f4f9;
  color: #6e5878;
  border-color: color-mix(in srgb, #ddc6e4 55%, transparent);
}

.project-card__tags li:nth-child(7n + 6) .project-tag {
  background: #f3f8f9;
  color: #4c757c;
  border-color: color-mix(in srgb, #c0dde3 55%, transparent);
}

.project-card__tags li:nth-child(7n + 7) .project-tag {
  background: #f7f5f4;
  color: #6a5f58;
  border-color: color-mix(in srgb, #d8cfc8 55%, transparent);
}

.project-card__desc {
  margin: 0 0 var(--space-sm);
  max-width: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.62;
  overflow-wrap: break-word;
}

.project-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}

a.project-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

a.project-link:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

a.project-link--cac {
  background: var(--color-surface);
}

.project-link__icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  flex-shrink: 0;
  opacity: 0.82;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

/* Link hover polish — fine pointer only so first tap navigates on touch */
@media (hover: hover) and (pointer: fine) {
  a.project-link:hover {
    background: var(--color-header);
    color: #fff;
    border-color: var(--color-header);
    transform: translateY(-2px);
  }

  a.project-link--github:hover {
    background: #24292f;
    color: #fff;
    border-color: #24292f;
  }

  html[data-theme="dark"] a.project-link--github:hover {
    background: #e6e9ec;
    color: #12161a;
    border-color: #e6e9ec;
  }

  a.project-link--youtube:hover {
    background: #e03838;
    color: #fff;
    border-color: #e03838;
  }

  a.project-link--devpost:hover {
    background: #1a5568;
    color: #fff;
    border-color: #1a5568;
  }

  html[data-theme="dark"] a.project-link--devpost:hover {
    background: #7ec8e3;
    color: #12161a;
    border-color: #7ec8e3;
  }

  a.project-link--itch:hover {
    background: #e25a5a;
    color: #fff;
    border-color: #e25a5a;
  }

  a.project-link--cac:hover {
    background: #0b3d91;
    border-color: #0b3d91;
    color: #fff;
  }

  a.project-link--cac:hover .project-link__logo {
    filter: brightness(0) invert(1);
  }

  a.project-link--external:hover {
    background: var(--color-header);
    border-color: var(--color-header);
    color: #fff;
  }

  a.project-link:hover .project-link__icon {
    opacity: 1;
  }
}

.project-link__logo {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  opacity: 0.9;
}

/* Experience & education entries reuse the home-page project-card look
   (.project-card chrome + hover defined above). Here we only add the
   subtitle/meta line and the bulleted descriptions used inside them. */
.project-card__bullets {
  margin: 0;
  padding-left: 1.15rem;
  max-width: none;
  list-style: disc;
}

/* Timeline cards: bullets full-width under the two-column header (title +
   date/location), with markers flush to the org logo left edge. */
.project-showcase--timeline .project-card__bullets {
  max-width: none;
  width: 100%;
  padding-left: 1.15rem;
  margin-left: 0;
  box-sizing: border-box;
}

/* Education coursework block also spans the full card under the header */
.project-showcase--timeline .edu-courses {
  max-width: none;
  width: 100%;
}

.project-card__bullets li {
  margin: 0 0 0.25rem;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--color-text);
}

.project-card__bullets li:last-child {
  margin-bottom: 0;
}

/* Experiences / education — news-style vertical timeline wrapping project-card entries */
.project-showcase--timeline {
  --exp-rail-width: 4px;
  --exp-dot-size: 16px;
  --exp-logo-size: 40px;
  --exp-card-pad-y: var(--space-md);
  --exp-logo-gap: var(--space-md);
  position: relative;
  gap: var(--space-lg);
  padding-top: 0;
}

/* Experiences / education: large org logo left, text fills remaining width */
.project-showcase--experiences,
.project-showcase--education {
  --exp-logo-size: 88px;
  --exp-logo-gap: 1.25rem;
}

/* Experiences: slightly larger logos */
.project-showcase--experiences {
  --exp-logo-size: 104px;
  --exp-logo-gap: 1.5rem;
}

.project-showcase--timeline .project-card {
  padding: var(--exp-card-pad-y) var(--space-md);
}

.project-showcase--timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--exp-dot-size) / 2 - var(--exp-rail-width) / 2);
  top: 0.35rem;
  bottom: 0.35rem;
  width: var(--exp-rail-width);
  background: var(--color-border);
  border-radius: 2px;
}

.project-showcase--timeline > li {
  position: relative;
  padding-left: calc(var(--exp-dot-size) + var(--space-md));
}

/* Dot centers on the org logo */
.project-showcase--timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(
    var(--exp-card-pad-y) + (var(--exp-logo-size) / 2) - (var(--exp-dot-size) / 2)
  );
  width: var(--exp-dot-size);
  height: var(--exp-dot-size);
  border-radius: 50%;
  background: var(--color-header);
  border: 2.5px solid var(--color-dot-ring);
  box-sizing: border-box;
  z-index: 1;
}

/* Experiences: logo column + text (title/meta/bullets) */
.exp-item {
  display: flex;
  align-items: flex-start;
  gap: var(--exp-logo-gap, 1.15rem);
}

.exp-item__main {
  flex: 1;
  min-width: 0;
}

.exp-item .exp-header {
  margin-bottom: var(--space-sm);
}

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

/* Header: title/role column + compact date/location meta */
.exp-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-lg);
  row-gap: var(--space-xs);
  margin: 0 0 var(--space-sm);
}

.exp-header:last-child {
  margin-bottom: 0;
}

.exp-header__left {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--exp-logo-gap, 0.85rem);
}

.exp-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-top: 0.15rem;
  flex-shrink: 0;
}

/* Role / degree / stat lines — crimson emphasis; date and location stay muted. */
.exp-role {
  margin: 0;
}

.exp-role--plain {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-header);
}

.exp-role--concentration {
  margin-top: 0.15rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--color-header);
}

/* Date subordinate to role; location quietest in the meta ladder. */
.exp-date {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.exp-loc {
  margin: 0.1rem 0 0;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Organization logo — sized to the title line, top-aligned with the text block */
.exp-title-block {
  min-width: 0;
  padding-top: 0.05rem;
}

.exp-title-block .project-card__title {
  margin: 0 0 0.2rem;
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  line-height: 1.32;
}

.exp-org-logo {
  width: var(--exp-logo-size, 40px);
  height: var(--exp-logo-size, 40px);
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
}

/* Relevant coursework under the CMU entry — same header→content rhythm as
   experience bullets, with a light divider before the coursework label.
   Extra air below the degree line so it isn't flush against the divider. */
.exp-header:has(+ .edu-courses) {
  margin-bottom: 1.15rem;
}

.edu-courses {
  margin-top: 0;
  padding-top: var(--space-md);
  border-top: none;
}

.edu-courses__title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  color: var(--color-header);
}

/* Coursework — project-tag code box + serif title + body desc (projects look) */
.edu-course-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.edu-course-list > li {
  margin: 0;
  padding: 0;
}

.edu-course__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0;
  line-height: 1.35;
}

/* Reuse .project-tag chrome; soft crimson so header stays the loudest red */
.edu-course__code.project-tag {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  background: #f9eef0;
  color: #8a4550;
  border-color: color-mix(in srgb, #e0b0b8 55%, transparent);
}

.edu-course__name {
  font-family: var(--font-serif);
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.edu-course__desc {
  margin: 0.3rem 0 0;
  max-width: none;
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--color-text);
}

/* Skills under the about section */
.skills {
  margin-top: 3.25rem;
  /* room for rise animation + tooltips above icons */
  padding-top: 0.25rem;
  overflow: visible;
}

.skills__title {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.45rem, 2.4vw, 1.7rem);
  font-weight: 700;
  margin: 0 0 1.4rem;
  padding-bottom: 0.4rem;
  letter-spacing: -0.015em;
  color: var(--color-text);
  border-bottom: 3px solid color-mix(in srgb, var(--color-header) 72%, transparent);
}

.skill-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.skill-icons li {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  width: 2.35rem;
  height: 2.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.skill-icons i {
  display: block;
  font-size: 1.85rem;
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

html[data-theme="dark"] .devicon-nextjs-plain,
html[data-theme="dark"] .devicon-github-original {
  filter: invert(1);
}

.skill-icons li:hover i,
.skill-icons li.is-active i,
.skill-icons li:focus-visible i {
  transform: scale(1.18);
}

/* Tooltip: hover (desktop) + tap/focus (mobile & keyboard) */
.skill-icons li::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.3rem);
  z-index: 10;
  padding: 0.4rem 0.75rem;
  background: var(--color-accent-soft);
  color: var(--color-accent-soft-text);
  border: 1px solid color-mix(in srgb, var(--color-accent-soft-border) 70%, transparent);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.skill-icons li:hover::after,
.skill-icons li.is-active::after,
.skill-icons li:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .skill-icons li::after {
    transition: opacity 0.16s ease;
  }
}

/* Motion — hover life for cards, images, and links */
.project-card__media,
.project-card__title,
.social__link,
a.project-link {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.project-card {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    filter 0.25s ease;
}

/* Education entry cards (CMU, Coppell) stay static — no hover lift/shadow. */
#education .project-card {
  transition: none;
}

/*
  Card / showcase hover motion — fine pointer only.
  On touch, sticky :hover was eating the first tap (enlarge) before navigate.
*/
@media (hover: hover) and (pointer: fine) {
  .section--projects .project-card:hover .project-carousel__slide.is-active .project-carousel__image,
  .section--projects .project-card__media:hover .project-carousel__slide.is-active .project-carousel__image {
    transform: scale(calc(var(--carousel-img-zoom, 1) * 1.04));
  }

  .project-card:hover {
    transform: translateY(-4px);
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  }

  .project-card:hover .project-card__title {
    color: var(--color-header);
  }

  /* Sibling dim on the card via filter — never touch reveal `li` opacity/transform */
  .section--projects .project-showcase:has(.project-card:hover) > li .project-card {
    filter: brightness(0.94);
  }

  .section--projects .project-showcase > li:has(.project-card:hover) .project-card {
    filter: none;
    transform: translateY(-5px) scale(1.012);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    z-index: 1;
  }

  /* Experiences keep the shared .project-card:hover treatment; education stays static. */
  #education .project-card:hover {
    transform: none;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  #education .project-card:hover .project-card__title {
    color: inherit;
  }

  .section--projects .project-card:hover .project-card__media {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  }

  .social__link:hover {
    transform: translateY(-2px);
  }
}

/* News — vertical rail + markers only */
.news-timeline {
  --news-rail-width: 4px;
  --news-dot-size: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 44rem;
}

.news-timeline::before {
  content: "";
  position: absolute;
  left: calc(var(--news-dot-size) / 2 - var(--news-rail-width) / 2);
  top: 0.25rem;
  bottom: 0.25rem;
  width: var(--news-rail-width);
  background: var(--color-border);
  border-radius: 2px;
  transition: background 0.4s ease;
}

.news-timeline.has-active::before {
  background: color-mix(in srgb, var(--color-header) 42%, var(--color-border));
}

.news-timeline__item {
  position: relative;
  padding-left: calc(var(--news-dot-size) + var(--space-md));
  margin-bottom: var(--space-md);
  transition: opacity 0.35s ease;
}

.news-timeline__item:last-child {
  margin-bottom: 0;
}

.news-timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: var(--news-dot-size);
  height: var(--news-dot-size);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-header) 35%, var(--color-border));
  border: 2px solid var(--color-dot-ring);
  box-sizing: border-box;
  box-shadow: none;
  transition:
    background 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.news-timeline__item.is-active::before {
  background: var(--color-header);
  transform: scale(1.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-header) 22%, transparent);
  animation: news-dot-pulse 0.7s ease-out;
}

.news-timeline__item.is-active .news-timeline__date {
  color: var(--color-header);
}

@keyframes news-dot-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-header) 40%, transparent);
  }
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-header) 22%, transparent);
  }
}

.news-timeline__date {
  display: block;
  margin: 0 0 var(--space-xs);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  transition: color 0.3s ease;
}

.news-timeline__text {
  margin: 0;
}

.site-footer {
  border-top: none;
  margin-top: var(--space-lg);
  padding: var(--space-md);
  text-align: center;
  font-size: 0.88rem;
  color: var(--color-muted);
  background: var(--color-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.site-footer:not(.js-footer-reveal) {
  opacity: 1;
  transform: none;
}

.site-footer p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.bear-button {
  appearance: none;
  border: var(--hairline) solid var(--color-border);
  background: var(--color-bg);
  border-radius: 999px;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.bear-button:hover {
  transform: translateY(-2px) scale(1.06);
  background: #fff8f0;
  border-color: #d4b896;
}

.bear-button:active {
  transform: scale(0.96);
}

.bear-button:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

.teddy-layer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}

.teddy-bear {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  font-size: var(--teddy-size, 3.5rem);
  line-height: 1;
  will-change: transform, opacity;
  opacity: 0;
  transform-origin: center center;
  animation: teddy-fall var(--teddy-duration, 2.2s) ease-out forwards;
  transform: translate3d(var(--teddy-x, 0), var(--teddy-y, 0), 0)
    translate(-50%, -50%) rotate(var(--teddy-rot-start, 0deg)) scale(0.4);
}

@keyframes teddy-fall {
  0% {
    opacity: 0;
    transform: translate3d(var(--teddy-x, 0), var(--teddy-y, 0), 0)
      translate(-50%, -50%) rotate(var(--teddy-rot-start, 0deg)) scale(0.35);
  }
  12% {
    opacity: 1;
    transform: translate3d(
        calc(var(--teddy-x, 0) + var(--teddy-dx, 0px) * 0.35),
        calc(var(--teddy-y, 0) + var(--teddy-dy, 0px) * 0.15),
        0
      )
      translate(-50%, -50%)
      rotate(calc(var(--teddy-rot-start, 0deg) + 16deg)) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate3d(
        calc(var(--teddy-x, 0) + var(--teddy-dx, 0px)),
        calc(var(--teddy-y, 0) + 70vh),
        0
      )
      translate(-50%, -50%) rotate(var(--teddy-rot-end, 180deg)) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bear-button,
  .bear-button:hover,
  .bear-button:active {
    transition: none;
    transform: none;
  }

  .teddy-bear {
    animation: teddy-fall-reduced 1.2s ease-out forwards;
  }

  @keyframes teddy-fall-reduced {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
  background: var(--color-header);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(var(--color-accent-rgb), 0.2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease,
    color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  color: #fff;
  background: var(--color-header-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.back-to-top:focus {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.back-to-top:focus:not(:focus-visible) {
  outline: none;
}

/* Safety net: never leave entrance content permanently invisible */
html.entrance-fallback .site-logo,
html.entrance-fallback .site-nav li,
html.entrance-fallback .header-actions,
html.entrance-fallback .hero__photo,
html.entrance-fallback .hero__name,
html.entrance-fallback .hero__meta,
html.entrance-fallback .hero__intro .social,
html.entrance-fallback .hero__aside,
html.entrance-fallback #about .about-motion,
html.entrance-fallback .project-showcase.js-reveal > li,
html.entrance-fallback .interest-list.js-reveal > li,
html.entrance-fallback .skill-icons.js-reveal > li,
html.entrance-fallback .section__title.js-title-reveal,
html.entrance-fallback .exp-group__title.js-title-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }

  .site-header__inner,
  .site-logo,
  .site-nav a,
  .site-nav li,
  .site-nav__indicator,
  .header-actions,
  .theme-toggle,
  .theme-toggle__icon {
    transition: none;
  }

  .site-logo,
  .site-nav li,
  .header-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__photo,
  .hero__name,
  .hero__meta,
  .hero__intro .social,
  .hero__aside {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .back-to-top,
  .project-card,
  .project-card__media,
  .project-carousel__image,
  .project-card__title,
  .social__link,
  a.project-link,
  .hero__photo,
  .avatar,
  .avatar__image {
    transition: none;
  }

  .hero__photo:hover,
  .hero__photo:focus-within {
    width: var(--hero-photo-size);
  }

  .hero__photo:hover .avatar,
  .hero__photo:focus-within .avatar {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  }

  .hero__photo .avatar,
  .hero__photo:hover .avatar,
  .hero__photo:focus-within .avatar {
    transform: none;
  }

  .hero__photo:hover .avatar__image,
  .hero__photo:focus-within .avatar__image {
    transform: scale(1.1);
  }

  .social__link:hover,
  a.project-link:hover,
  .skill-icons li:hover i,
  .skill-icons li.is-active i,
  .skill-icons li:focus-visible i,
  .project-card:hover,
  .section--projects .project-showcase > li:has(.project-card:hover) .project-card {
    transform: none;
  }

  /* Preserve per-slide crop zoom; only drop the extra hover scale */
  .section--projects .project-card:hover .project-carousel__slide.is-active .project-carousel__image {
    transform: scale(var(--carousel-img-zoom, 1));
  }

  .section--projects .project-showcase:has(.project-card:hover) > li .project-card {
    filter: none;
  }

  .skill-icons i {
    transition: none;
  }

  .project-showcase.js-reveal > li,
  .interest-list.js-reveal > li,
  .section__title.js-title-reveal,
  .exp-group__title.js-title-reveal,
  .skill-icons.js-reveal > li,
  #about .about-motion {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .section__title::after,
  .exp-group__title::after {
    transform: scaleX(1);
    transition: none;
  }

  .skill-icons.js-reveal.in-view.is-settling > li {
    animation: none;
  }

  .news-timeline__item::before,
  .news-timeline__date {
    transition: none;
  }

  .news-timeline__item.is-active::before {
    animation: none;
    transform: none;
  }

  .site-footer,
  .site-footer.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  /* About greeting still runs — user-facing entrance; keep motion visible */
}

/* Responsive */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-md) var(--space-lg);
  }

  .hero__photo {
    grid-row: 1 / span 2;
    --hero-photo-size: 11.5rem;
    --hero-photo-hover: 14.5rem;
  }

  .hero__aside {
    grid-column: 2;
    border-top: none;
    padding-top: var(--space-md);
    margin-top: var(--space-xs);
  }

  .section--projects .project-card {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-header__inner {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .site-logo {
    font-size: 1.05rem;
    min-width: 0;
  }

  .header-actions {
    margin-left: auto;
    flex-shrink: 0;
  }

  .site-nav {
    flex: 1 1 100%;
    order: 3;
    margin-left: 0;
    background: var(--color-header-hover);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .site-nav.is-open {
    max-height: 360px;
  }

  .site-nav__indicator {
    display: none;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .site-nav ul {
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .hero {
    padding: 4rem var(--space-sm) 2rem;
  }

  .content-wrap {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    text-align: center;
    gap: var(--space-md);
  }

  .hero__photo {
    grid-row: auto;
    justify-self: center;
    --hero-photo-size: 11rem;
    --hero-photo-hover: 13rem;
  }

  .hero__intro,
  .hero__aside {
    min-width: 0;
    max-width: 100%;
  }

  .hero__meta {
    text-align: center;
  }

  .hero__meta li {
    overflow-wrap: anywhere;
  }

  .social {
    justify-content: center;
  }

  .hero__aside {
    grid-column: auto;
    border-top: none;
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    text-align: left;
  }

  #about .section__body p {
    text-align: left;
    text-justify: auto;
  }

  #about .section__title.about-motion {
    transform: translate3d(0, 2rem, 0);
  }

  #about .section__title.about-motion.is-playing {
    transform: translate3d(0, 0, 0);
  }

  .interest-list.js-reveal > li {
    transform: translate3d(1.25rem, 0.6rem, 0);
  }

  .interest-list.js-reveal > li.in-view,
  .project-showcase.js-reveal > li.in-view {
    transform: translate3d(0, 0, 0);
  }

  .project-showcase.js-reveal > li {
    transform: translate3d(-1.25rem, 0.6rem, 0);
  }

  .section--projects .project-card {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-sm);
  }

  .project-card__media,
  .project-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .skill-icons {
    gap: 0.55rem;
  }

  .skill-icons li {
    width: 2.15rem;
    height: 2.15rem;
  }

  .skill-icons i {
    font-size: 1.65rem;
  }

  .project-showcase--timeline {
    --exp-logo-size: 36px;
    --exp-card-pad-y: var(--space-md);
    --exp-dot-size: 14px;
    gap: var(--space-md);
  }

  .project-showcase--experiences,
  .project-showcase--education {
    --exp-logo-size: 72px;
    --exp-logo-gap: var(--space-md);
  }

  .project-showcase--experiences {
    --exp-logo-size: 88px;
    --exp-logo-gap: 1.15rem;
  }

  .project-showcase--timeline > li {
    padding-left: calc(var(--exp-dot-size) + var(--space-md));
  }

  .exp-header {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xs);
  }

  .exp-header__right {
    align-items: flex-start;
    text-align: left;
    padding-top: 0;
    max-width: 100%;
  }

  .exp-header__left:has(.exp-org-logo) ~ .exp-header__right {
    padding-left: calc(var(--exp-logo-size, 36px) + var(--exp-logo-gap, 0.85rem));
  }

  .exp-item {
    gap: var(--space-md);
    min-width: 0;
  }

  .exp-date,
  .exp-loc {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .back-to-top {
    right: var(--space-sm);
    bottom: var(--space-sm);
  }
}

@media (max-width: 480px) {
  .hero {
    padding-top: 3.5rem;
  }

  .hero__photo {
    --hero-photo-size: 9.5rem;
    --hero-photo-hover: 11.25rem;
  }

  .hero__name {
    font-size: clamp(1.55rem, 8vw, 1.9rem);
  }

  .project-showcase--experiences,
  .project-showcase--education {
    --exp-logo-size: 60px;
  }

  .project-showcase--experiences {
    --exp-logo-size: 72px;
  }

  .exp-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .exp-header__left:has(.exp-org-logo) ~ .exp-header__right {
    padding-left: 0;
  }

  .section--projects .project-card {
    padding: 0.75rem 0.5rem;
  }

  .project-card__desc,
  #about .section__body p,
  .section__body p,
  .news-timeline__text {
    font-size: 1.05rem;
  }
}