:root {
  color-scheme: light;
  --button-ring: linear-gradient(120deg, #22c55e, #3b82f6 55%, #8b5cf6);
  --button-glow: rgba(59, 130, 246, 0.55);
  --bg: #ffffff;
  --band: #f4f5f7;
  --text: #111827;
  --muted: #5f6672;
  --soft: #9ca3af;
  --line: #e5e7eb;
  --accent: #1e40af;
  --accent-soft: #dbeafe;
  --nav-active: #22c55e;
  --nav-default: #111827;
  --photo-a: #e5e7eb;
  --photo-b: #f8fafc;
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-line: rgba(148, 163, 184, 0.32);
  --glow: rgba(30, 64, 175, 0.12);
}

:root.dark {
  color-scheme: dark;
  --button-ring: linear-gradient(120deg, #4ade80, #60a5fa 55%, #a78bfa);
  --button-glow: rgba(96, 165, 250, 0.5);
  --bg: #050505;
  --band: #171717;
  --text: #f5f5f5;
  --muted: #c4c7cc;
  --soft: #8b929d;
  --line: #3f3f46;
  --accent: #60a5fa;
  --accent-soft: #172554;
  --nav-active: #86efac;
  --nav-default: #f5f5f5;
  --photo-a: #1f2937;
  --photo-b: #0f172a;
  --glass: rgba(17, 24, 39, 0.55);
  --glass-strong: rgba(17, 24, 39, 0.72);
  --glass-line: rgba(148, 163, 184, 0.22);
  --glow: rgba(96, 165, 250, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  overflow: hidden;
  scroll-behavior: smooth;
}

body {
  height: 100svh;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent), transparent 86%), transparent 28rem),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, #14b8a6, transparent 88%), transparent 30rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--band), var(--bg) 45%));
  background-attachment: fixed;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body.has-open-modal {
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--line), transparent 48%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line), transparent 48%) 1px, transparent 1px),
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--accent), transparent 58%) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 34%, color-mix(in srgb, #14b8a6, transparent 55%) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 72%, color-mix(in srgb, var(--accent), transparent 62%) 0 2px, transparent 3px);
  background-size: 108px 108px, 108px 108px, auto, auto, auto;
  mask-image:
    radial-gradient(ellipse at 18% 12%, #000 0 12%, transparent 30%),
    radial-gradient(ellipse at 82% 28%, #000 0 14%, transparent 32%),
    radial-gradient(ellipse at 25% 66%, #000 0 11%, transparent 28%),
    radial-gradient(ellipse at 76% 86%, #000 0 13%, transparent 32%),
    radial-gradient(ellipse at 48% 42%, #000 0 9%, transparent 25%);
  mask-composite: add;
  opacity: 0.72;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
summary {
  font: inherit;
}

:where(a, button, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nav-active), transparent 48%);
  outline-offset: 3px;
}

.theme-toggle {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 10;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line), transparent 20%);
  border-radius: 999px;
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(150%);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--text), transparent 91%);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--nav-active), transparent 42%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--nav-active), transparent 90%), var(--glass-strong));
}

.theme-toggle:active {
  transform: scale(0.94);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.pull-refresh [data-pull-refresh-text] {
  display: none;
}

.pull-refresh {
  --pull-distance: 0px;
  position: fixed;
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  z-index: 24;
  display: inline-flex;
  width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-strong), transparent 3%);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--text), transparent 86%);
  backdrop-filter: blur(20px) saturate(150%);
  color: var(--text);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-130% + var(--pull-distance)));
  transition: opacity 160ms ease, transform 180ms ease, border-color 160ms ease, color 160ms ease;
  will-change: transform, opacity;
}

.pull-refresh.is-visible {
  opacity: 1;
}

.pull-refresh.is-ready,
.pull-refresh.is-refreshing {
  border-color: color-mix(in srgb, var(--nav-active), transparent 32%);
  color: var(--nav-active);
}

.pull-refresh svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(var(--pull-rotation, 0deg));
  transition: transform 160ms ease;
}

.pull-refresh.is-refreshing svg {
  animation: pull-refresh-spin 720ms linear infinite;
}

@keyframes pull-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.theme-toggle .icon-sun {
  display: none;
}

:root.dark .theme-toggle .icon-moon {
  display: none;
}

:root.dark .theme-toggle .icon-sun {
  display: block;
}

.section-nav {
  position: fixed;
  left: clamp(18px, 3vw, 44px);
  top: 50%;
  z-index: 8;
  display: grid;
  gap: 18px;
  transform: translateY(-50%);
}

.section-nav::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  border-left: 1px dashed color-mix(in srgb, var(--nav-active), transparent 48%);
}

.section-nav a {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--nav-default);
  font-size: 0.74rem;
  font-weight: 550;
}

.section-nav-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: linear-gradient(145deg, var(--glass-strong), var(--glass));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--text), transparent 90%);
  backdrop-filter: blur(16px) saturate(145%);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  will-change: transform;
}

.section-nav svg {
  width: 15.5px;
  height: 15.5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section-nav a > span:last-child {
  padding: 5px 0;
  opacity: 0.82;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.section-nav a:hover,
.section-nav a.is-active {
  color: var(--nav-active);
}

.section-nav a:hover .section-nav-icon,
.section-nav a.is-active .section-nav-icon {
  border-color: color-mix(in srgb, var(--nav-active), transparent 26%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--nav-active), transparent 86%), var(--glass-strong));
  transform: scale(1.06);
}

.section-nav a:active .section-nav-icon {
  transform: scale(0.96);
}

.section-nav a:hover > span:last-child,
.section-nav a.is-active > span:last-child {
  color: var(--nav-active);
  opacity: 1;
  transform: translateX(2px);
}

.page-edge,
.mobile-social-footer {
  display: none;
}

.page-track {
  display: flex;
  height: 100svh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: auto;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-track::-webkit-scrollbar {
  display: none;
}

.page-track main {
  display: contents;
}

.hero {
  flex: 0 0 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  align-items: center;
  padding: clamp(42px, 7vh, 72px) clamp(40px, 7vw, 86px) clamp(42px, 7vh, 72px) clamp(150px, 14vw, 220px);
}

.hero::-webkit-scrollbar,
main > .section::-webkit-scrollbar {
  display: none;
}

.hero-inner {
  width: min(90%, 1120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
}

.photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
}

.profile-frame {
  width: min(64vw, 260px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  box-shadow:
    0 24px 70px color-mix(in srgb, var(--text), transparent 84%),
    0 0 0 10px color-mix(in srgb, var(--glass-strong), transparent 28%);
}

.profile-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
  transform: scale(1.2);
}

.intro {
  display: grid;
  justify-items: center;
  max-width: 560px;
  letter-spacing: 0;
  text-align: center;
}

.intro h1 {
  margin-bottom: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
}

.intro p {
  margin-top: 16px;
  color: var(--muted);
  font-size: 1rem;
}

.intro-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--nav-active), var(--text) 35%);
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.social-links a {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line), transparent 15%);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--glass-strong), var(--glass));
  color: var(--text);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--text), transparent 92%);
  transition: transform 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  will-change: transform;
}

.social-links a::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent), transparent 65%), transparent 34%),
    linear-gradient(135deg, transparent 35%, color-mix(in srgb, var(--accent), transparent 82%));
  opacity: 0;
  transition: opacity 180ms ease;
}

.social-links svg {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.social-links a:hover {
  border-color: color-mix(in srgb, var(--accent), transparent 35%);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--accent), transparent 82%);
}

.social-links a:hover::before {
  opacity: 1;
}

.section {
  position: relative;
  flex: 0 0 100vw;
  width: auto;
  height: 100svh;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: clamp(46px, 7vh, 74px) clamp(44px, 7vw, 88px) clamp(44px, 7vh, 72px) clamp(150px, 14vw, 220px);
  scroll-margin-top: 18px;
  content-visibility: auto;
  contain-intrinsic-size: auto 100svh;
}

.hero:focus,
.section:focus,
.hero:target,
.section:target {
  outline: none;
}

@media (max-width: 1023px), (pointer: coarse) {
  .hero,
  .section {
    touch-action: pan-y;
  }
}

.section > * {
  max-width: 820px;
}

.section:has(.project-showcase) > * {
  max-width: 1120px;
}

.section h2 {
  margin-bottom: 14px;
  font-size: 1.35rem;
  font-weight: 750;
}

.section h3 {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}

.section p {
  color: var(--muted);
}



.section-intro {
  max-width: 880px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.72;
}

.section-intro strong {
  color: var(--text);
}

.band {
  background: transparent;
}


.project-showcase {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 22px;
}

.featured-project {
  max-width: 1120px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  gap: 22px;
  border-radius: 0;
  padding: 32px 0;
}

.project-visual,
.project-slider {
  grid-column: 2;
  grid-row: 1;
}

.project-copy {
  grid-column: 1;
  grid-row: 1;
}

.project-brooksie {
  grid-template-columns: 1fr;
}

.project-heatlive {
  grid-template-columns: 1fr;
}

.project-thermolabs,
.project-gee-gui,
.project-wildfire,
.project-roof,
.project-recovery,
.project-flood {
  grid-template-columns: 1fr;
}

.project-awesome-geoai {
  grid-template-columns: 1fr;
}

.project-vea {
  grid-template-columns: 1fr;
  --vea-media-h: min(66svh, 580px);
}

.project-vea .project-copy {
  grid-column: 1;
  grid-row: 1;
}

.project-heatlive .project-copy,
.project-brooksie .project-copy,
.project-thermolabs .project-copy,
.project-gee-gui .project-copy,
.project-wildfire .project-copy,
.project-roof .project-copy,
.project-recovery .project-copy,
.project-flood .project-copy,
.project-awesome-geoai .project-copy {
  grid-column: 1;
  grid-row: 1;
}

.project-heatlive .project-video,
.project-brooksie .project-slider,
.project-thermolabs .project-slider,
.project-gee-gui .project-slider,
.project-wildfire .project-slider,
.project-roof .project-slider,
.project-recovery .project-slider,
.project-flood .project-slider,
.project-awesome-geoai .project-static-preview {
  grid-column: 1;
  grid-row: 2;
  width: min(100%, 960px);
  justify-self: center;
}

.project-vea .project-static-preview {
  grid-column: 1;
  grid-row: 2;
  aspect-ratio: 25 / 21;
  height: auto;
  max-height: var(--vea-media-h);
  width: min(100%, calc(var(--vea-media-h) * 25 / 21));
  justify-self: center;
  align-self: center;
}

.project-copy p a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 55%);
  text-underline-offset: 3px;
}

.project-copy p a:hover {
  text-decoration-color: currentColor;
}

.project-video {
  position: relative;
  height: min(600px, 62.5vw);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: #000;
  box-shadow: 0 0 18px color-mix(in srgb, var(--nav-active), transparent 54%);
}

.project-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.project-brooksie .slider-track,
.project-brooksie .slider-track figure,
.project-thermolabs .slider-track,
.project-gee-gui .slider-track,
.project-wildfire .slider-track,
.project-roof .slider-track,
.project-recovery .slider-track,
.project-flood .slider-track,
.project-thermolabs .slider-track figure,
.project-gee-gui .slider-track figure,
.project-wildfire .slider-track figure,
.project-roof .slider-track figure,
.project-recovery .slider-track figure,
.project-flood .slider-track figure,
.project-awesome-geoai .project-static-preview,
.project-awesome-geoai .project-static-preview figure {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.project-awesome-geoai .project-static-preview,
.project-awesome-geoai .project-static-preview figure {
  aspect-ratio: 3 / 2;
}

.project-vea .project-static-preview figure {
  height: 100%;
  width: 100%;
  min-height: 0;
}

.featured-project + .featured-project {
  margin-top: 0;
}

.project-visual {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  border-radius: 18px;
  min-height: 420px;
}

.project-visual figure {
  position: relative;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass), transparent 10%);
}

.project-slider {
  position: relative;
  display: grid;
  gap: 0;
  isolation: isolate;
}

.slider-track {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg), transparent 6%);
}

.slider-track::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 76px;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg), transparent 18%),
    color-mix(in srgb, var(--bg), transparent 62%) 46%,
    transparent
  );
  pointer-events: none;
}

.slider-track figure {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass), transparent 10%);
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateX(12px) scale(0.985);
  transition: opacity 220ms ease, transform 260ms ease, visibility 220ms ease;
  visibility: hidden;
  will-change: opacity, transform;
}

.project-geointerpo .slider-track figure {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.project-geointerpo .slider-track {
  border-radius: 0;
  background: transparent;
}

.project-geointerpo .slider-track .media-button {
  display: block;
  width: 100%;
  height: 100%;
}

.project-geointerpo .slider-track img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.slider-track figure.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  visibility: visible;
}

.project-static-preview {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.project-static-preview figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass), transparent 10%);
}

.slider-track figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg), transparent 18%);
  color: var(--text);
  padding: 7px 11px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  backdrop-filter: blur(16px) saturate(150%);
}

.slider-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: auto;
  padding: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .slider-controls {
    opacity: 0.86;
    transition: opacity 160ms ease;
  }

  .project-slider:hover .slider-controls,
  .project-slider:focus-within .slider-controls {
    opacity: 1;
  }
}

.slider-controls > button {
  position: absolute;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--glass-line), var(--text) 8%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg), transparent 10%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 74%),
    0 12px 28px color-mix(in srgb, var(--text), transparent 86%);
  backdrop-filter: blur(18px) saturate(150%);
  color: var(--text);
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease;
}

.slider-controls > button:first-child {
  left: 12px;
}

.slider-controls > button:last-child {
  right: 12px;
}

.slider-controls > button:hover {
  border-color: color-mix(in srgb, var(--nav-active), transparent 32%);
  background: color-mix(in srgb, var(--nav-active), transparent 84%);
  color: var(--nav-active);
  transform: translateY(-50%) scale(1.04);
}

.slider-controls > button:active {
  transform: translateY(-50%) scale(0.94);
}

.slider-controls svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.slider-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 10px;
  pointer-events: auto;
  transform: translateX(-50%);
}

.slider-dots button {
  position: relative;
  width: 16px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: width 160ms ease, background 160ms ease, opacity 160ms ease;
}

.slider-dots button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text), transparent 78%);
  transform: translate(-50%, -50%);
  transition: background 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.slider-dots button.is-active {
  width: 16px;
}

.slider-dots button.is-active::after {
  width: 8px;
  height: 8px;
  background: var(--nav-active);
  box-shadow: 0 0 18px color-mix(in srgb, var(--nav-active), transparent 54%);
  transform: translate(-50%, -50%);
}

.media-button {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.project-visual img,
.modal-content img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-brooksie .slider-track .media-button,
.project-thermolabs .slider-track .media-button,
.project-gee-gui .slider-track .media-button,
.project-wildfire .slider-track .media-button,
.project-roof .slider-track .media-button,
.project-recovery .slider-track .media-button,
.project-flood .slider-track .media-button,
.project-awesome-geoai .project-static-preview .media-button,
.project-vea .project-static-preview .media-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-brooksie .slider-track img,
.project-thermolabs .slider-track img,
.project-gee-gui .slider-track img,
.project-wildfire .slider-track img,
.project-roof .slider-track img,
.project-recovery .slider-track img,
.project-flood .slider-track img,
.project-awesome-geoai .project-static-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: none;
  padding: 0;
}

/* Show 05, 08, 10, 11 and 12 images whole: no crop, no fade, dots below the frame. */
.project-thermolabs .slider-track img,
.project-gee-gui .slider-track img,
.project-wildfire .slider-track img,
.project-roof .slider-track img,
.project-recovery .slider-track img,
.project-flood .slider-track img {
  object-fit: contain;
}

.project-thermolabs .slider-track::after,
.project-gee-gui .slider-track::after,
.project-wildfire .slider-track::after,
.project-roof .slider-track::after,
.project-recovery .slider-track::after,
.project-flood .slider-track::after {
  display: none;
}

.project-thermolabs .project-slider,
.project-gee-gui .project-slider,
.project-wildfire .project-slider,
.project-roof .project-slider,
.project-recovery .project-slider,
.project-flood .project-slider {
  padding-bottom: 34px;
}

/* The recovery figures are mixed maps and charts. */
.project-recovery .slider-track,
.project-recovery .slider-track figure {
  aspect-ratio: 3 / 2;
}

/* The flood video and map are both wide. */
.project-flood .slider-track,
.project-flood .slider-track figure {
  aspect-ratio: 16 / 9;
}

.project-flood .slide-video {
  background: #000;
}

.project-flood .slide-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* The wildfire figures are wide multi-panel plots. */
.project-wildfire .slider-track,
.project-wildfire .slider-track figure {
  aspect-ratio: 12 / 5;
}

/* The roof figures mix wide, square and tall panels. */
.project-roof .slider-track,
.project-roof .slider-track figure {
  aspect-ratio: 2 / 1;
}

.project-thermolabs .slider-dots,
.project-gee-gui .slider-dots,
.project-wildfire .slider-dots,
.project-roof .slider-dots,
.project-recovery .slider-dots,
.project-flood .slider-dots {
  bottom: 2px;
}

.project-vea .project-static-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: none;
  padding: 0;
}

.project-visual figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: auto;
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg), transparent 18%);
  color: var(--text);
  padding: 7px 11px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text), transparent 88%);
}

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

.image-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: stretch;
  padding: 0;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--bg), transparent 18%);
  backdrop-filter: blur(18px);
  cursor: zoom-out;
}

.modal-content {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--bg), transparent 8%);
  box-shadow: none;
}

.modal-content img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  padding: max(62px, env(safe-area-inset-top)) 72px max(62px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--band), transparent 35%);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-strong);
  color: var(--text);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.modal-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-strong);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 800;
  backdrop-filter: blur(14px) saturate(150%);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.image-modal.has-single-image .modal-nav {
  display: none;
}

.modal-close:hover,
.modal-nav:hover {
  border-color: color-mix(in srgb, var(--nav-active), transparent 35%);
  background: color-mix(in srgb, var(--glass-strong), var(--nav-active) 8%);
}

.modal-close:active {
  transform: scale(0.94);
}

.modal-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.modal-close svg,
.modal-nav svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-prev {
  left: 12px;
}

.modal-next {
  right: 12px;
}

.modal-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
}

.image-modal.has-single-image .modal-counter {
  display: none;
}

.project-copy {
  align-self: center;
}

.project-copy h3 {
  margin-bottom: 12px;
  font-size: 1.45rem;
}

.project-copy p + p {
  margin-top: 12px;
}

/* The three opening questions are a lead-in: same face and size as the body
   copy, set apart only by style. */
.project-copy p.project-questions {
  margin-bottom: 18px;
  color: var(--text);
  font-style: italic;
  text-wrap: pretty;
}

.weather-data {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nav-active), transparent 65%);
  border-radius: 12px;
  margin-top: 16px;
  background: #07110d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.16);
}

.api-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(134, 239, 172, 0.15);
  background: #0b1913;
}

.api-toolbar code {
  overflow: hidden;
  color: #a7f3d0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.api-toolbar b {
  color: #4ade80;
}

.api-lights {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}

.api-lights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fb7185;
}

.api-lights i:nth-child(2) {
  background: #fbbf24;
}

.api-lights i:nth-child(3) {
  background: #4ade80;
}

.weather-data pre {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
}

.weather-data pre code {
  color: #d1fae5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.64rem, 1.1vw, 0.76rem);
  line-height: 1.65;
  white-space: pre;
}

/* Same look as the About hashtags (.intro-tags). */
.project-copy .project-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--nav-active), var(--text) 35%);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.project-status-sep {
  color: color-mix(in srgb, currentColor, transparent 45%);
}

.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

/* Buttons: ink-filled primary with a gradient edge, frosted secondary that
   picks up the same edge on hover. The gradient echoes the site's green
   and blue accents. */
.project-actions a {
  position: relative;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--line), var(--text) 6%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg), transparent 25%);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--text);
  padding: 0 13px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text), transparent 94%);
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
  will-change: transform;
}

.project-actions a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 200ms ease;
}

.project-actions a:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--button-ring) border-box;
  box-shadow: 0 8px 24px -10px var(--button-glow);
  transform: translateY(-1px);
}

.project-actions a:hover svg:last-child {
  transform: translateX(2px);
}

.project-actions a:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.project-actions a.action-primary {
  border-color: transparent;
  background:
    linear-gradient(var(--text), var(--text)) padding-box,
    var(--button-ring) border-box;
  color: var(--bg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 82%),
    0 6px 18px -8px var(--button-glow);
}

.project-actions a.action-primary:hover {
  background:
    linear-gradient(color-mix(in srgb, var(--text), var(--bg) 10%), color-mix(in srgb, var(--text), var(--bg) 10%)) padding-box,
    var(--button-ring) border-box;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 82%),
    0 10px 30px -8px var(--button-glow);
}


.experience-list {
  display: grid;
  gap: 24px;
  margin-top: 22px;
  max-width: none;
}

.experience-item {
  position: relative;
  padding-left: 24px;
}

.experience-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--nav-active);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--nav-active), transparent 84%);
}

.experience-item::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  bottom: -20px;
  width: 1px;
  background: color-mix(in srgb, var(--nav-active), transparent 66%);
}

.experience-item:last-child::after {
  display: none;
}

.experience-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: start;
}

.experience-head h3 {
  margin: 0;
  font-size: 1.03rem;
}

.experience-head p {
  margin-top: 3px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

.experience-head > span {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.experience-item ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.experience-item li {
  position: relative;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  padding-left: 15px;
}

.experience-item li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nav-active), transparent 18%);
}


.toolbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
  max-width: none;
}

.toolbox-grid article {
  --card-accent: var(--nav-active);
  position: relative;
  overflow: hidden;
  min-height: 235px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--card-accent), transparent 82%), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--glass-strong), transparent 2%), var(--glass));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 68%),
    0 18px 42px color-mix(in srgb, var(--text), transparent 93%);
  padding: 22px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.toolbox-grid article:nth-child(2) {
  --card-accent: #38bdf8;
}

.toolbox-grid article:nth-child(3) {
  --card-accent: #8b5cf6;
}

.toolbox-grid article:nth-child(4) {
  --card-accent: #22c55e;
}

.toolbox-grid article:nth-child(5) {
  --card-accent: #f59e0b;
}

.toolbox-grid article:nth-child(6) {
  --card-accent: #14b8a6;
}

.toolbox-grid article::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -44px;
  width: 140px;
  height: 140px;
  border: 1px solid color-mix(in srgb, var(--card-accent), transparent 74%);
  border-radius: 999px;
  opacity: 0.58;
  pointer-events: none;
}

.toolbox-grid article:hover {
  border-color: color-mix(in srgb, var(--card-accent), transparent 35%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 64%),
    0 24px 58px color-mix(in srgb, var(--card-accent), transparent 84%);
  transform: translateY(-3px);
}

.toolbox-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--card-accent), transparent 40%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card-accent), transparent 88%);
  color: color-mix(in srgb, var(--card-accent), var(--text) 16%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 70%);
}

.toolbox-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toolbox-grid h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  font-size: 1.06rem;
}

.toolbox-grid p {
  position: relative;
  z-index: 1;
  max-width: 95%;
  font-size: 0.92rem;
  line-height: 1.62;
}

.toolbox-grid p + p {
  margin-top: 12px;
}

.toolbox-grid strong {
  color: var(--text);
  font-weight: 760;
}

.education-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  max-width: none;
}

.education-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nav-active), transparent 86%), transparent 40%),
    linear-gradient(145deg, var(--glass-strong), var(--glass));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 68%);
  padding: 20px 22px;
}

/* The Ph.D. is the headline card: full width, a little more room. */
.education-item.is-featured {
  grid-column: 1 / -1;
  padding: 26px 28px;
}

.education-item h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.education-item.is-featured h3 {
  font-size: 1.18rem;
}

.education-item > div p {
  margin-top: 3px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
}

/* Dates as a small pill above the title. */
.education-item > span {
  order: -1;
  align-self: flex-start;
  margin-bottom: 6px;
  border: 1px solid color-mix(in srgb, var(--nav-active), transparent 60%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--nav-active), transparent 90%);
  color: color-mix(in srgb, var(--nav-active), var(--text) 45%);
  padding: 3px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.education-item > p {
  max-width: 820px;
  margin-top: 4px;
  font-size: 0.92rem;
}

.education-item > .education-actions {
  gap: 6px 18px;
  margin-top: 12px;
}

/* In the education cards the project links are plain green text links,
   not buttons. */
.project-actions.education-actions a,
.project-actions.education-actions a:hover,
.project-actions.education-actions a:active {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  padding: 2px 0;
  color: color-mix(in srgb, var(--nav-active), var(--text) 45%);
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.project-actions.education-actions a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 1023px) {
  .education-list {
    grid-template-columns: 1fr;
  }
}


.credential-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  max-width: none;
}

.credential-grid article {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--nav-active), transparent 84%), transparent 36%),
    linear-gradient(145deg, var(--glass-strong), var(--glass));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 68%);
  padding: 22px;
}

.credential-logo {
  width: min(118px, 58%);
  height: 54px;
  margin-bottom: 16px;
  object-fit: contain;
  object-position: left center;
}

.credential-logo-pmp {
  width: min(160px, 78%);
  height: 72px;
}

.credential-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--nav-active);
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.credential-grid h3 {
  margin-bottom: 10px;
}

.credential-grid p {
  font-size: 0.92rem;
}

.award-list {
  display: grid;
  gap: 13px;
  margin-top: 20px;
  max-width: none;
}

.award-list article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
  padding-left: 20px;
}

.award-list article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--nav-active);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--nav-active), transparent 86%);
}

.award-list strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
}

.award-list span {
  color: var(--muted);
  font-size: 0.92rem;
}


.footer {
  margin: 54px auto 22px;
  color: var(--soft);
  font-size: 0.78rem;
  padding: 18px 28px;
  text-align: center;
}

.footer p {
  margin: 0;
}

.footer p + p {
  margin-top: 8px;
}

.footer-cta {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 650;
}

.footer-cta a {
  color: var(--text);
  text-decoration: none;
}

.footer-cta a:hover {
  color: var(--accent);
}

@media (min-width: 768px) {
}

@media (min-width: 768px) and (max-width: 1023px) {
  .project-geointerpo {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-geointerpo .project-copy,
  .project-geointerpo .project-slider {
    grid-column: 1;
    grid-row: auto;
  }

  .project-geointerpo .project-copy {
    order: 1;
  }

  .project-geointerpo .project-slider {
    order: 2;
    width: min(100%, 680px);
    justify-self: center;
  }

  .project-geointerpo .slider-track {
    min-height: clamp(520px, 58vh, 640px);
    margin-bottom: 34px;
    overflow: visible;
  }

  .project-geointerpo .slider-track figure {
    min-height: clamp(520px, 58vh, 640px);
  }

  .project-geointerpo .slider-dots {
    bottom: -30px;
  }

}

/* Phones: full-width plots at their own aspect, dots below the frame. */
@media (max-width: 767px) {
  .project-geointerpo .project-slider {
    padding-bottom: 34px;
  }

  .project-geointerpo .slider-track {
    min-height: 0;
    aspect-ratio: 506 / 613;
  }

  .project-geointerpo .slider-track::after {
    display: none;
  }

  .project-geointerpo .slider-track figure {
    min-height: 0;
  }

  .project-geointerpo .slider-dots {
    bottom: 2px;
  }
}

@media (min-width: 1024px) {
  /* Fill the column at the plot's own aspect so 06 lines up with 05's right edge. */
  .project-geointerpo .project-slider {
    align-self: center;
    padding-bottom: 34px;
  }

  .project-geointerpo .slider-track {
    min-height: 0;
    aspect-ratio: 506 / 613;
  }

  .project-geointerpo .slider-track::after {
    display: none;
  }

  .project-geointerpo .slider-track figure {
    min-height: 0;
  }

  .project-geointerpo .slider-dots {
    bottom: 2px;
  }
}


@media (min-width: 781px) and (max-width: 1439px) {
  .hero {
    padding-left: 180px;
    padding-right: 34px;
  }

  .hero-inner {
    width: 100%;
    grid-template-columns: minmax(220px, 0.82fr) minmax(360px, 1fr);
    gap: 32px;
  }

  .section {
    width: auto;
    margin: 0;
    padding: 56px 34px 56px 180px;
  }

  .section > *,
  .section:has(.project-showcase) > * {
    max-width: none;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 0;
  }

  body {
    height: 100svh;
    overflow: hidden;
    padding-bottom: 0;
    background-attachment: scroll;
  }

  body::before {
    background-size: 86px 86px, 86px 86px, auto, auto, auto;
    opacity: 0.5;
  }

  .page-track {
    display: flex;
    height: 100svh;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-behavior: auto;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .page-track::-webkit-scrollbar {
    display: none;
  }

  .page-track main {
    display: contents;
  }

  .hero {
    flex: 0 0 100vw;
    height: 100svh;
    min-height: 100svh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 44px 24px calc(104px + env(safe-area-inset-bottom));
    display: block;
    touch-action: pan-y;
  }

  .hero::-webkit-scrollbar,
  main > .section::-webkit-scrollbar {
    display: none;
  }

  .section-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    z-index: 20;
    display: flex;
    width: auto;
    justify-content: space-around;
    gap: 0;
    margin: 0;
    overflow-x: visible;
    transform: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 6px 4px max(14px, env(safe-area-inset-bottom));
    scrollbar-width: none;
    scroll-snap-type: none;
  }

  .section-nav::-webkit-scrollbar {
    display: none;
  }

  .section-nav::before {
    display: none;
  }

  .section-nav a {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--soft);
    transition: color 100ms ease;
    scroll-snap-align: none;
  }

  .section-nav a > span:last-child {
    display: none;
  }

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

  .section-nav a.is-active {
    color: var(--nav-active);
  }

  .section-nav a.is-active .section-nav-icon {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    box-shadow: none;
    transform: scale(1.22);
  }

  .section-nav a.is-active svg {
    width: 22px;
    height: 22px;
  }

  .section-nav-icon {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    box-shadow: none;
    transform: scale(1);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), color 100ms ease;
    will-change: transform;
  }

  .section-nav svg {
    width: 20px;
    height: 20px;
  }

  .hero-inner {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .profile-frame {
    width: min(58vw, 220px);
  }

  .photo-wrap {
    min-height: auto;
    gap: 22px;
  }

  .section {
    flex: 0 0 100vw;
    height: 100svh;
    width: auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 38px 24px;
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
    border-radius: 0;
    scroll-margin-top: 0;
    touch-action: pan-y;
  }

  .section h2 {
    font-size: 1.22rem;
  }

  .intro h1 {
    font-size: 1.48rem;
    line-height: 1.28;
  }

  .intro p,
  .section-intro {
    font-size: 0.94rem;
    line-height: 1.66;
  }

  .social-links {
    justify-content: flex-start;
  }

  .social-links a {
    width: 44px;
    height: 44px;
  }

  .experience-head {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .experience-head > span {
    white-space: normal;
  }

  /* A plain column instead of a one-column grid: after rotating back from
     landscape, iOS kept the old grid row heights and stretched the sliders,
     leaving empty space under the images. */
  .featured-project {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 0;
  }

  .project-copy,
  .project-visual,
  .project-slider,
  .project-video,
  .project-static-preview,
  .project-heatlive .project-copy,
  .project-heatlive .project-video,
  .project-brooksie .project-copy,
  .project-thermolabs .project-copy,
  .project-gee-gui .project-copy,
  .project-wildfire .project-copy,
  .project-roof .project-copy,
  .project-recovery .project-copy,
  .project-flood .project-copy,
  .project-awesome-geoai .project-copy,
  .project-vea .project-copy,
  .project-brooksie .project-slider,
  .project-thermolabs .project-slider,
  .project-gee-gui .project-slider,
  .project-wildfire .project-slider,
  .project-roof .project-slider,
  .project-recovery .project-slider,
  .project-flood .project-slider,
  .project-awesome-geoai .project-static-preview {
    grid-column: 1;
    grid-row: auto;
  }

  .project-vea .project-static-preview {
    grid-column: 1;
    grid-row: auto;
  }

  .project-copy {
    order: 1;
  }

  .project-visual,
  .project-slider,
  .project-video,
  .project-static-preview {
    order: 2;
  }

  .project-copy {
    align-self: start;
  }

  .project-copy h3 {
    font-size: 1.22rem;
  }

  .project-copy p {
    font-size: 0.92rem;
  }


  .project-actions a {
    min-height: 36px;
    font-size: 0.82rem;
  }

  .slider-track,
  .slider-track figure,
  .project-static-preview,
  .project-static-preview figure {
    min-height: 220px;
    touch-action: pan-y;
  }

  .project-brooksie .slider-track,
  .project-brooksie .slider-track figure,
  .project-thermolabs .slider-track,
  .project-gee-gui .slider-track,
  .project-wildfire .slider-track,
  .project-roof .slider-track,
  .project-recovery .slider-track,
  .project-flood .slider-track,
  .project-thermolabs .slider-track figure,
  .project-gee-gui .slider-track figure,
  .project-wildfire .slider-track figure,
  .project-roof .slider-track figure,
  .project-recovery .slider-track figure,
  .project-flood .slider-track figure,
  .project-awesome-geoai .project-static-preview,
  .project-awesome-geoai .project-static-preview figure {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .project-wildfire .slider-track,
  .project-roof .slider-track,
  .project-roof .slider-track figure,
  .project-wildfire .slider-track figure {
    aspect-ratio: 2 / 1;
  }

  .project-vea .project-static-preview {
    min-height: 0;
  }

  .project-vea .project-static-preview figure {
    min-height: 0;
  }

  .project-brooksie .slider-track img,
  .project-thermolabs .slider-track img,
  .project-gee-gui .slider-track img,
  .project-wildfire .slider-track img,
  .project-roof .slider-track img,
  .project-recovery .slider-track img,
  .project-flood .slider-track img,
  .project-awesome-geoai .project-static-preview img {
    object-fit: contain;
    background: color-mix(in srgb, var(--band), transparent 35%);
  }

  .slider-controls {
    padding: 0;
  }

  .slider-controls > button {
    width: 42px;
    height: 42px;
  }

  .slider-dots {
    bottom: 10px;
    gap: 6px;
    min-height: 26px;
    padding: 0 9px;
  }

  .slider-dots button {
    width: 15px;
    height: 24px;
  }

  .slider-track figcaption,
  .project-visual figcaption {
    left: 10px;
    top: 10px;
    padding: 6px 9px;
    font-size: 0.64rem;
  }


  .toolbox-grid {
    grid-template-columns: 1fr;
  }

  .toolbox-grid article {
    min-height: auto;
    padding: 18px;
  }

  .toolbox-grid p {
    max-width: none;
  }

  .credential-grid {
    grid-template-columns: 1fr;
  }

  .credential-grid article {
    min-height: 0;
  }

  .credential-logo {
    height: 48px;
    margin-bottom: 14px;
  }

  .credential-logo-pmp {
    height: 64px;
  }

  .education-list {
    grid-template-columns: 1fr;
  }

  .education-item.is-featured {
    padding: 20px 22px;
  }

  .award-list article {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .project-visual {
    min-height: 260px;
  }

  .modal-content {
    width: 100vw;
    height: 100dvh;
    min-height: 100svh;
    max-height: none;
    border-radius: 0;
    touch-action: pan-y;
  }

  .modal-content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 168px;
    background: linear-gradient(0deg, color-mix(in srgb, var(--bg), transparent 8%), transparent);
    pointer-events: none;
  }

  .modal-content img {
    max-height: none;
    padding: max(58px, env(safe-area-inset-top)) 14px calc(164px + env(safe-area-inset-bottom));
  }

  .modal-close {
    z-index: 5;
  }

  .modal-nav {
    top: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 5;
    width: 52px;
    height: 52px;
    border-color: color-mix(in srgb, var(--nav-active), transparent 35%);
    background: color-mix(in srgb, var(--bg), transparent 3%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 76%),
      0 18px 42px color-mix(in srgb, var(--text), transparent 74%);
    transform: none;
  }

  .modal-nav:active {
    transform: scale(0.94);
  }

  .modal-prev {
    left: calc(50% - 118px);
  }

  .modal-next {
    right: calc(50% - 118px);
  }

  .modal-counter {
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 5;
    min-width: 64px;
    border: 1px solid color-mix(in srgb, var(--nav-active), transparent 48%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg), transparent 3%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 76%),
      0 18px 42px color-mix(in srgb, var(--text), transparent 78%);
    backdrop-filter: blur(16px) saturate(150%);
    color: var(--text);
    padding: 8px 14px;
    text-align: center;
  }

}

@media (min-width: 781px) {
  .pull-refresh {
    display: none;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-inline: 20px;
  }

  .footer {
    display: none;
    padding-inline: 22px;
  }

  .section {
    flex-basis: 100vw;
    margin-inline: 0;
    padding: 34px 20px calc(104px + env(safe-area-inset-bottom));
  }

  .section-nav {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
  }

  .section-nav a {
    font-size: 0;
  }

  .profile-frame {
    width: min(62vw, 214px);
  }

  .project-showcase {
    gap: 14px;
  }

  .featured-project {
    padding: 24px 0;
  }

  .slider-track,
  .slider-track figure {
    min-height: 190px;
  }

  .slider-controls {
    inset: 0;
  }

  .slider-controls > button {
    width: 38px;
    height: 38px;
  }

  .slider-controls > button:first-child {
    left: 8px;
  }

  .slider-controls > button:last-child {
    right: 8px;
  }

  .slider-dots {
    bottom: 8px;
    min-height: 24px;
    padding: 0 8px;
  }

  .slider-dots button {
    width: 14px;
    height: 22px;
  }

  .project-visual {
    min-height: 230px;
  }

  .toolbox-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 14px;
  }

  .toolbox-icon svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 767px) {
  .theme-toggle {
    top: calc(env(safe-area-inset-top) + 7px);
    right: 8px;
    z-index: 28;
    width: 40px;
    height: 40px;
  }

  .section-nav {
    --dot-size: 8px;
    --active-dot-size: 30px;
    --active-inner-size: 10px;
    display: flex;
    top: auto;
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 26;
    width: min(calc(100vw - 32px), 340px);
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0;
    transform: translateX(-50%);
  }

  .section-nav::before {
    display: block;
    left: 22px;
    right: 22px;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    border-left: 0;
    border-top: 1px dashed color-mix(in srgb, var(--nav-active), transparent 54%);
    transform: translateY(-50%);
  }

  .section-nav a {
    z-index: 1;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 0;
    font-size: 0;
    color: var(--nav-active);
  }

  .section-nav-icon {
    position: relative;
    width: var(--dot-size);
    height: var(--dot-size);
    border: 0;
    border-radius: 999px;
    background: var(--nav-active);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg), transparent 10%);
    backdrop-filter: none;
    transition:
      width 180ms ease,
      height 180ms ease,
      background 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  .section-nav-icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: var(--active-inner-size);
    height: var(--active-inner-size);
    border-radius: 999px;
    background: var(--nav-active);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .section-nav svg {
    display: none;
  }

  .section-nav a.is-active .section-nav-icon {
    width: var(--active-dot-size);
    height: var(--active-dot-size);
    background: color-mix(in srgb, var(--nav-active), transparent 76%);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--bg), transparent 10%),
      0 10px 24px color-mix(in srgb, var(--nav-active), transparent 68%);
    transform: none;
  }

  .section-nav a.is-active .section-nav-icon::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .section-nav a:active .section-nav-icon {
    transform: scale(0.86);
  }

  .hero {
    padding: calc(56px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom));
  }

  .section {
    padding: calc(56px + env(safe-area-inset-top)) 20px calc(96px + env(safe-area-inset-bottom));
  }

  .page-edge {
    position: fixed;
    top: calc(54px + env(safe-area-inset-top));
    bottom: calc(82px + env(safe-area-inset-bottom));
    z-index: 22;
    display: block;
    width: 52px;
    border: 0;
    background: transparent;
    color: var(--nav-active);
    padding: 0;
    cursor: pointer;
    pointer-events: none;
  }

  .page-edge-prev {
    left: 0;
  }

  .page-edge-next {
    right: 0;
    display: grid;
    place-items: center;
  }

  .page-edge svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--nav-active), transparent 64%));
    transition: opacity 200ms ease;
  }

  body.show-page-affordance .page-edge-next svg {
    animation: page-edge-pulse 1.35s ease-in-out infinite;
    opacity: 0.8;
  }

  .footer {
    display: none;
  }

  .footer > p {
    display: none;
  }

  .mobile-social-footer {
    display: none;
    width: min(100%, 360px);
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
  }

  .mobile-social-footer a {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 999px;
    color: var(--text);
  }

  .mobile-social-footer svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .mobile-social-footer a:last-child svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .project-visual img,
  .slider-track img,
  .project-static-preview img {
    max-width: 100%;
  }
}

@media (max-width: 1023px), (pointer: coarse) {
  .page-track {
    overflow-x: hidden;
    touch-action: pan-y;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .modal-content {
    height: 100dvh;
    min-height: 100svh;
  }

  .modal-content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 176px;
    background: linear-gradient(0deg, color-mix(in srgb, var(--bg), transparent 8%), transparent);
    pointer-events: none;
  }

  .modal-content img {
    padding-bottom: calc(166px + env(safe-area-inset-bottom));
  }

  .modal-close {
    z-index: 5;
  }

  .modal-nav {
    top: auto;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 5;
    width: 54px;
    height: 54px;
    border-color: color-mix(in srgb, var(--nav-active), transparent 35%);
    background: color-mix(in srgb, var(--bg), transparent 3%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 76%),
      0 18px 42px color-mix(in srgb, var(--text), transparent 74%);
    transform: none;
  }

  .modal-nav:active {
    transform: scale(0.94);
  }

  .modal-prev {
    left: calc(50% - 124px);
  }

  .modal-next {
    right: calc(50% - 124px);
  }

  .modal-counter {
    bottom: calc(91px + env(safe-area-inset-bottom));
    z-index: 5;
    min-width: 68px;
    border: 1px solid color-mix(in srgb, var(--nav-active), transparent 48%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg), transparent 3%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff, transparent 76%),
      0 18px 42px color-mix(in srgb, var(--text), transparent 78%);
    backdrop-filter: blur(16px) saturate(150%);
    color: var(--text);
    padding: 8px 14px;
    text-align: center;
  }
}

@keyframes page-edge-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: translateX(0);
  }

  50% {
    opacity: 0.9;
    transform: translateX(7px);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.show-page-affordance .page-edge-next svg {
    animation: none;
    opacity: 0.55;
  }
}

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

/* The demo is nearly square, so give it a shorter cap as the viewport
   narrows and the card has less height to spend. */
@media (max-width: 1099px) {
  .project-vea {
    --vea-media-h: min(56svh, 520px);
  }
}

@media (max-width: 767px) {
  .project-vea {
    --vea-media-h: min(46svh, 420px);
  }
}

/* ---------------------------------------------------------------------------
   About on phones: a centred identity card.

   The portrait was 37% of the screen with 30% dead space under it, and the
   text ran on a left axis while the photo sat on a centred one. One axis now,
   the face sized as supporting evidence rather than the headline, and the
   whole stack optically centred in the panel.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px calc(96px + env(safe-area-inset-bottom));
  }

  .hero-inner {
    width: 100%;
    gap: 22px;
  }

  /* 112px reads as an avatar, not a portrait. The light ring is kept but
     scaled to the smaller frame - 10px around a 260px photo is 5px here. */
  .profile-frame {
    width: 132px;
    border: 1px solid var(--glass-line);
    box-shadow:
      0 12px 32px color-mix(in srgb, var(--text), transparent 86%),
      0 0 0 5px color-mix(in srgb, var(--glass-strong), transparent 28%);
  }

  .intro {
    max-width: none;
  }

  .intro h1 {
    margin-bottom: 8px;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .intro p {
    margin-top: 0;
    max-width: 30ch;
    font-size: 1rem;
    line-height: 1.5;
  }

  .social-links {
    justify-content: center;
    margin-top: 28px;
    gap: 14px;
  }

  /* Utility links, not cards: hairline only, no gradient or drop shadow. */
  .social-links a {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--glass-strong);
    box-shadow: none;
  }

  /* A transient swipe hint should not sit beside the name. */
  .page-edge-next {
    align-content: end;
    padding-bottom: 12%;
  }

  /* These invisible swipe targets were 52px on each edge: 26% of a 393px
     screen, intercepting taps meant for content. */
  .page-edge {
    width: 28px;
  }
}

/* ---------------------------------------------------------------------------
   HeatLive video: the box was a flat 600px tall, so object-fit letterboxed
   the footage in black bars and pushed the card past its page. Give the box
   the footage's own ratio (1920x1084 after cropping the left panel) and
   bound it by viewport height, so it fills edge to edge and the card fits
   the screen.
   --------------------------------------------------------------------------- */
.project-heatlive .project-video {
  aspect-ratio: 1920 / 1084;
  height: auto;
  /* Same width rule as the Agentic GeoAI slider so the two media blocks line
     up; the height cap only bites on short viewports, where it keeps the card
     inside its page. */
  width: min(100%, 960px);
  max-height: 62svh;
}

/* The showcase's top margin cleared the "Recent Projects" heading, and the
   first card's top padding separated it from the card above. Neither exists
   now, so the first project starts at the section's own top inset. */
.project-showcase {
  margin-top: 0;
}

.project-showcase > .featured-project:first-child {
  padding-top: 0;
}

/* Awesome GeoAI: at 960x640 this was the tallest media on the page and pushed
   its card to 966px inside an 810px page. Bound it by viewport height like the
   other cards so it scales down with the screen instead of overflowing. */
.project-awesome-geoai {
  --ag-media-h: min(54svh, 460px);
}

.project-awesome-geoai .project-static-preview {
  width: min(100%, calc(var(--ag-media-h) * 3 / 2));
}

@media (max-width: 767px) {
  .project-awesome-geoai {
    --ag-media-h: min(46svh, 380px);
  }
}

/* Certifications sat as a squat strip pinned to the top of a 100svh page with
   ~500px of dead space under it. Let the grid take the leftover height and
   centre its row in it. "safe" so that if the content ever outgrows the panel
   it falls back to top-alignment instead of overflowing above the scroll
   origin, where it could never be scrolled back into view. */
@media (min-width: 768px) {
  #certifications {
    display: flex;
    flex-direction: column;
    justify-content: safe center;
  }
}

/* Certifications stack vertically, matching the Awards list. Stacked rows are
   wide, so the logo sits beside the text rather than above it. */
@media (min-width: 768px) {
  #certifications .credential-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #certifications .credential-grid article {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    column-gap: 30px;
    padding: 22px 26px;
  }

  #certifications .credential-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    justify-self: center;
    object-position: center;
  }

  #certifications .credential-grid h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }

  #certifications .credential-grid p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    max-width: 72ch;
  }
}

/* Projects scrollbar: desktop only (mouse or trackpad), not on phones. */
@media (hover: hover) and (pointer: fine) {
  #projects {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--nav-active), transparent 45%) transparent;
  }

  #projects::-webkit-scrollbar {
    display: block;
    width: 8px;
  }

  #projects::-webkit-scrollbar-track {
    background: transparent;
  }

  #projects::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--nav-active), transparent 45%);
  }

  #projects::-webkit-scrollbar-thumb:hover {
    background: var(--nav-active);
  }
}

/* Landscape phones are only ~400px tall, so the viewport-height caps above
   shrink these three to thumbnails. Size them by width instead, like the
   sliders; the section scrolls. */
@media (orientation: landscape) and (max-height: 500px) {
  .project-vea {
    --vea-media-h: 9999px;
  }

  .project-vea .project-static-preview {
    width: min(100%, 960px);
    max-height: none;
  }

  .project-awesome-geoai .project-static-preview {
    width: min(100%, 960px);
  }

  .project-heatlive .project-video {
    max-height: none;
  }
}

/* Phones: size slider frames with a percentage-padding spacer instead of
   aspect-ratio. Every slide is absolutely positioned, so the frame's height
   came only from aspect-ratio, and iOS kept the landscape height after
   rotating back to portrait. Percentage padding always follows the width. */
@media (max-width: 767px) {
  .project-slider .slider-track,
  .project-slider .slider-track figure {
    aspect-ratio: auto;
    min-height: 0;
  }

  .project-slider .slider-track figure {
    height: auto;
  }

  .project-slider .slider-track::before {
    content: "";
    display: block;
    padding-top: 62.5%;
  }

  .project-roof .slider-track::before,
  .project-wildfire .slider-track::before {
    padding-top: 50%;
  }

  .project-geointerpo .slider-track::before {
    padding-top: calc(100% * 613 / 506);
  }
}

/* Phones in portrait: project media runs edge to edge. The section has 20px
   side padding, so pull each media block out to 4px from the screen edge,
   with only a slight corner radius. */
@media (max-width: 767px) {
  .featured-project .project-video,
  .featured-project .project-slider,
  .featured-project .project-static-preview,
  .featured-project .project-visual {
    width: calc(100% + 32px);
    max-width: none;
    max-height: none;
    margin-inline: -16px;
    align-self: stretch;
    border-radius: 10px;
  }

  .featured-project .project-video,
  .featured-project .slider-track,
  .featured-project .slider-track figure,
  .featured-project .project-static-preview figure,
  .featured-project .project-visual figure {
    border-radius: 10px;
  }

  .featured-project .project-video {
    box-shadow: none;
  }
}

/* Round icon buttons (slider arrows, theme toggle, image viewer) share the
   gradient edge on hover. */
.slider-controls > button,
.theme-toggle,
.modal-close,
.modal-nav {
  transition: transform 160ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease, color 160ms ease;
}

.slider-controls > button:hover,
.theme-toggle:hover,
.modal-close:hover,
.modal-nav:hover {
  border-color: transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--button-ring) border-box;
  color: var(--text);
  box-shadow: 0 8px 24px -8px var(--button-glow);
}

/* Phones: education cards sit 4px from the screen edges (section padding
   is 20px). */
@media (max-width: 767px) {
  #education .education-list {
    margin-inline: -16px;
  }
}