:root{
    --bg:#F7F7F8; --ink:#0B0C0E; --muted:#5A5F72; --accent:#146EF5; --maxw:1040px; --pad:24px; --radius:12px; --barSwap:0; --pubSwap:0;
      --glass-bg: rgba(255, 255, 255, 0.18);
      --glass-bg-strong: rgba(255, 255, 255, 0.26);
      --glass-border: rgba(255, 255, 255, 0.52);
      --glass-shadow: rgba(12, 18, 28, 0.14);
      --glass-highlight: rgba(255, 255, 255, 0.7);
      --glass-inner-shadow: rgba(0, 0, 0, 0.04);
      --glass-blur: 6px;
      --glass-brightness: 1.46;
      --glass-glow: 0 0 24px rgba(255, 255, 255, 0.36);
  }
  *{box-sizing:border-box}
  body{margin:0;color:var(--ink);font:16px/1.6 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;padding-top:96px}
 /* Homepage: minimize top offset so hero starts nearer the top bar */
 body.home{padding-top:40px}
  /* CSS-only animated gradient (browser-agnostic, full-bleed) */
  #bg-gradient{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    width:100%;
    height:100%;
    background: #4f7575;
    display:block;
  }
  /* Minimal background canvas (above gradient, below content) */
  #bg-ca{position:fixed;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;display:block}
  
  .hero, .section{position:relative;z-index:2}
  .section-anchor{position:relative;top:-8px;height:0;pointer-events:none}
  /* Add space between hero and Projects section */
  .hero + .section{margin-top:144px}
  /* Homepage: bring Projects bar higher so it's visible without scrolling */
  body.home .hero + .section{margin-top:120px}
  .container{max-width:var(--maxw);margin:0 auto;padding:calc(var(--pad)*4) var(--pad);position:relative;z-index:2}
  /* Homepage: remove extra top padding from the main container wrapper */
  body.home main.container{padding-top:0}
  .section-bar{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);margin-bottom:calc(var(--pad)*4)}
  .nav{
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:space-between;
    padding:16px var(--pad);
    max-width:var(--maxw);
    width: min(calc(100% - (var(--pad) * 2)), var(--maxw));
    margin:0 auto;
  }
.nav-left{display:flex;gap:20px;align-items:center}
.nav-right{display:flex;gap:20px;align-items:center}
  .brand{font-weight:700;text-decoration:none;color:var(--ink)}
  a{color:var(--accent);text-decoration:none}
  .nav a{color:var(--ink);font-weight:700}
  .nav a:hover{text-decoration:none;opacity:.8}
  
  /* Styling for navigation text links (excluding social media icons) */
  .nav a:not(.social-links a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all .2s ease;
    background: rgba(0,0,0,0.03);
  }
  
  .nav a:not(.social-links a):hover {
    background: rgba(0,0,0,0.08);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
    opacity: 1;
  }
.social-links{display:flex;gap:12px;align-items:center;margin-right:8px}
.social-links a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;transition:all .2s ease;background:rgba(0,0,0,0.03)}
.social-links a:hover{background:rgba(0,0,0,0.08);transform:translateY(-1px)}
.social-links svg{transition:transform .2s ease}
.social-links a:hover svg{transform:scale(1.1)}
 .hero{padding:96px var(--pad) 72px var(--pad)}
 /* Homepage: start hero much higher; keep a small internal gap */
 body.home .hero{padding-top:12px}
  .hero-bg{position:relative;isolation:isolate;overflow:hidden}
  .hero-split{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:start;position:relative}
  @media (max-width: 820px){.hero-split{grid-template-columns:1fr;gap:20px}}
  .hero-copy p{max-width:60ch}
  .hero-media{margin:0}
  .hero-media img{width:100%;height:auto;max-height:36vh;object-fit:cover;border-radius:16px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.08);will-change:transform,opacity;transform-origin:50% 20%}
  .hero-copy{will-change:transform}
  .hero-copy{z-index:2}
  .hero-media{position:relative;z-index:1}
  .hero-media{grid-column:2;justify-self:end}
  @media (max-width: 820px){.hero-media{grid-column:1;justify-self:stretch}}
  
  /* Responsive hero adjustments: raise starting position and shrink content */
 @media (max-width: 1200px){
   .hero{padding:84px var(--pad) 64px var(--pad)}
   body.home .hero{padding-top:12px}
    .hero-split{gap:60px}
    .hero-media img{max-height:34vh}
    body.home .hero + .section{margin-top:160px}
  }
 @media (max-width: 980px){
   .hero{padding:64px var(--pad) 56px var(--pad)}
   body.home .hero{padding-top:12px}
    .hero-split{gap:40px}
    .hero-media img{max-height:30vh}
    .hero p{font-size:clamp(14px,1.8vw,16px)}
    body.home .hero + .section{margin-top:72px}
  }
 @media (max-width: 820px){
   .hero{padding:48px var(--pad) 48px var(--pad)}
   body.home .hero{padding-top:8px}
    .hero-split{gap:24px}
    .hero-media img{max-height:28vh}
    .hero h1{font-size:clamp(24px,6vw,32px)}
    .hero p{font-size:clamp(14px,3.6vw,16px)}
    .hero + .section{margin-top:96px}
    body.home .hero + .section{margin-top:84px}
  }
  
  /* Project page hero layout */
  .hero .hero-content{grid-column:1}
  .hero .hero-media{grid-column:2}
  @media (max-width: 820px){
    .hero .hero-content{grid-column:1}
    .hero .hero-media{grid-column:1;order:-1}
  }
.site-header{position:fixed;top:12px;left:0;right:0;z-index:50;transform:translateY(calc(-120% * max(var(--barSwap), var(--pubSwap)))) translateZ(0);transition:transform .28s ease;backface-visibility:hidden}
  .site-header .nav{
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-top: 0;
    box-shadow: 0 12px 32px var(--glass-shadow);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  }

  /* Remove decorative glass pseudo-elements */
  .site-header .nav::before { content: none; }

  /* Unified glass class for all glass elements */
  .glass-element {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 10px 32px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, backdrop-filter .18s ease;
  }

  /* Unified hover effects for all glass elements */
  .glass-element:hover {
    background: var(--glass-bg-strong);
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2), var(--glass-glow);
    border-color: rgba(255,255,255,0.44);
    backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.06));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.06));
  }

/* Project page shell */
.project-page{
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:12px 0 72px;
}
.project-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 920px){
  .project-hero-grid{
    grid-template-columns:1fr;
  }
}
.project-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.glass-bubble{
  --bubble-offset: 0px;
  --bubble-scale: 1;
  padding: clamp(18px, 2vw, 28px);
  border-radius: 16px;
  transform: translate3d(0, var(--bubble-offset), 0) scale(var(--bubble-scale));
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.glass-bubble:hover{
  --bubble-scale: 1.01;
  transform: translate3d(0, var(--bubble-offset), 0) scale(var(--bubble-scale));
}
.parallax-bubble{
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .glass-bubble,
  .glass-bubble:hover,
  .parallax-bubble{
    transform: none !important;
  }
}
.project-hero-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.project-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  font-weight:700;
}
.project-lede{
  margin:4px 0 0;
  color:#11131b;
  font-size:clamp(15px, 2vw, 17px);
}
.project-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
  align-items:center;
}
.project-actions .project-link{
  min-height:40px;
}
.project-figure{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.project-figure img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
  box-shadow:0 16px 40px rgba(12,18,28,0.18);
}
.project-figure figcaption{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.project-card h3{
  margin-top:0;
  margin-bottom:10px;
}
.project-card ul{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:8px;
}
.project-media .video-container{
  margin:0;
  box-shadow:none;
  background:#05080f;
  border-radius:12px;
  overflow:hidden;
}
.project-media .video-container iframe{
  height:420px;
}
@media (max-width: 768px){
  .project-media .video-container iframe{
    height:280px;
  }
}

.contact-hero{
  max-width: var(--maxw);
  margin: 0 auto 16px;
  padding: 48px clamp(16px, 2vw, 32px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.contact-hero h1{margin-bottom:6px;}
.contact-hero p{margin:0;color:var(--muted);}
.contact-shell{
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 24px) 48px;
}
.contact-form,
.contact-info{
  padding: clamp(20px, 2vw, 28px);
}
.contact-form .form-group{margin-bottom:16px;}
.contact-form textarea{min-height:140px;}
.contact-links a{padding:10px 14px;}
body.contact-page main.container,
body.about-page main.container{
  padding: clamp(24px, 4vw, 56px) clamp(12px, 3vw, 24px);
}

.about-hero{
  max-width: var(--maxw);
  margin: 0 auto 20px;
  padding: clamp(28px, 4vw, 48px);
}
.about-hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(16px, 4vw, 28px);
  align-items: center;
}
@media (max-width: 900px){
  .about-hero-grid{grid-template-columns:1fr;}
}
.about-hero-media{
  display: flex;
  justify-content: center;
  align-items: center;
}
.about-hero-media img{
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(12,18,28,0.18);
}
.about-body{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(12px, 3vw, 24px) 56px;
}
.about-stack{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.about-card h3{margin-top:0;margin-bottom:8px;}
.about-card ul{margin:0;padding-left:20px;display:grid;gap:6px;}
.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 0;
}
.about-tag{
  padding:6px 10px;
  border-radius:10px;
  background: rgba(255,255,255,0.2);
  border:1px solid var(--glass-border);
  box-shadow: 0 10px 24px var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  font-size:13px;
  color: var(--ink);
}
.about-links{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

  .site-header .nav { 
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, backdrop-filter .2s ease;
  }
  .site-header .nav:hover { 
    transform: translateY(-2px) scale(1.01);
    background: var(--glass-bg-strong);
    border-color: rgba(255,255,255,0.44);
    box-shadow: 0 18px 48px rgba(0,0,0,0.2), var(--glass-glow);
    backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.06));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.06));
  }


  .hero h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:0 0 12px;color:#0B0C0E}
  .hero p{color:#0B0C0E;margin:0}
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;margin-top:16px}
.card{
  background: var(--glass-bg);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 32px var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, backdrop-filter .18s ease;
}
.card:hover{
  background: var(--glass-bg-strong);
  box-shadow: 0 16px 44px rgba(0,0,0,0.18), var(--glass-glow);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.44);
  backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
}
  .card h3{margin:0 0 8px;font-size:18px}
  .list{display:grid;gap:20px;margin-top:32px}
  .site-footer{padding:36px var(--pad);text-align:center;color:var(--muted)}
  /* Section titles - 100% isomorphic with top navigation */
  .section-title {
    margin: 16px 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--maxw);
    width: min(calc(100% - (var(--pad) * 2)), var(--maxw));
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    padding: 16px var(--pad);
    position: relative;
    z-index: 10;
    cursor: pointer;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    box-shadow: 0 10px 32px var(--glass-shadow);
    transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, backdrop-filter .2s ease !important;
    /* unify hover scaling for both active/inactive bars via variable */
    --barHoverScale: 1;
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  }

  /* EXACT SAME HOVER EFFECTS FOR ALL BARS */
  .section-title:hover {
    background: var(--glass-bg-strong);
    box-shadow: 0 18px 48px rgba(0,0,0,0.2), var(--glass-glow) !important;
    --barHoverScale: 1.02;
    border-color: rgba(255,255,255,0.44);
    backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
  }
  /* Rely on .section-title:hover with --barHoverScale so we don't override translateY */

  /* When Projects bar takes over the top position */
  .bar-fixed {
    position: fixed;
    top: 8px; /* unified top offset for all active bars */
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0 auto;
    width: min(calc(100% - (var(--pad) * 2)), var(--maxw));
    margin-left: auto;
    margin-right: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .projects-bar-active .site-header { transform: translateY(-120%) }
  .publications-bar-active .site-header { transform: translateY(-120%) }
  
  /* Smooth morph-in for projects bar when fixed */
  .bar-fixed {
    opacity: 0;
    transform: translateY(-12px) translateZ(0);
    transition: opacity .28s ease, transform .28s ease;
    backface-visibility: hidden;
  }
  .projects-bar-active .bar-fixed { opacity: 1; transform: translateY(0) translateZ(0) }
  .publications-bar-active .bar-fixed { opacity: 1; transform: translateY(0) translateZ(0) }
  .sticky { will-change: transform }

  /* When a bar is fixed, ensure identical position (override any sticky transforms) */
  #projects-header.section-title.bar-fixed,
  #publications-header.section-title.bar-fixed {
    top: 8px !important; /* exact same offset for both active bars */
    margin-top: 0 !important; /* prevent margins affecting perceived offset */
    transform: translateY(0) translateZ(0) scale(var(--barHoverScale)) !important;
    opacity: 1 !important;
  }
  
  /* Symmetric behavior using --barSwap (top→projects) and --pubSwap (projects→publications) */
  /* Make both section bars sticky so they stop scrolling before the swap */
  #projects-header.section-title { position: sticky; top: 8px; z-index: 10; }
  #publications-header.section-title { position: sticky; top: 8px; z-index: 10; }

  /* Projects bar gets pushed out as publications approaches (identical to top bar behavior) */
  #projects-header.section-title { transform: translateY(calc(-120% * var(--pubSwap, 0))) translateZ(0) scale(var(--barHoverScale)); transition: transform 0s linear; backface-visibility: hidden; }
  /* Publications bar slides in beneath projects with slight scale */
  /* Slide publications in from below with a fixed gap relative to swap progress */
  #publications-header.section-title { transform: translateY(calc(48px * var(--barSwap, 0))) translateZ(0) scale(var(--barHoverScale)); transform-origin: 50% 0; transition: transform .28s ease, opacity .28s ease; opacity: 1; backface-visibility: hidden; }
  .projects-bar-active .site-header .nav { pointer-events: none }
  .publications-bar-active .site-header .nav { pointer-events: none }
  
  /* Section navigation buttons - now embedded within section-title */
  .section-nav {
    display: flex;
    gap: 12px;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease;
  }
  
  /* Hide navigation buttons when section is NOT active (before scrolling) */
  .section-title:not(.active) .section-nav {
    opacity: 0;
    visibility: hidden;
  }
  
  .nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all .2s ease;
    background: rgba(0,0,0,0.03);
    color: var(--ink);
    text-decoration: none;
    font-weight: 700;
    font-size: inherit;
  }
  
  .nav-button:hover {
    background: rgba(0,0,0,0.08);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    text-decoration: none;
    opacity: 1;
  }
  
  .stack{display:grid;gap:28px}
  /* Global defaults remain for publications; projects override below */
  .bubble-wide{width:100%;background:white;border:1px solid #e9e9ef;border-radius:16px;padding:36px;transition:transform .18s ease, box-shadow .18s ease;position:relative;z-index:1}
  /* Publications: convert bubbles to glass and add fade-out near publications bar */
  .publications-list .bubble-wide{
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 32px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    transition: opacity .24s ease, transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, backdrop-filter .18s ease;
    will-change: opacity, transform;
  }
  .publications-list .bubble-link .bubble-wide:hover{
    transform:scale(1.02);
    box-shadow:0 16px 40px rgba(12,18,28,0.16), var(--glass-glow);
    background: var(--glass-bg-strong);
    border-color: rgba(255,255,255,0.42);
    backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
  }
  /* Visually keep hover, but disable navigation via JS; keep pointer events */
  .bubble-link[data-disabled="true"]{ cursor: default; }
  .bubble-link[data-disabled="true"] .bubble-wide{ cursor: default; }
  .bubble-head{display:flex;align-items:center;gap:12px}
  
  /* Project tracker (glass dots) */
  .project-tracker{
    position: fixed;
    left: max(12px, calc(50% - (var(--maxw) / 2) - 24px)); /* keep at least 12px inside viewport */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    display: flex; /* always flex; use opacity/visibility to hide */
    flex-direction: column;
    gap: 16px; /* fuller spacing */
    z-index: 12;
    pointer-events: auto; /* clickable */
    transition: opacity .28s ease, transform .38s cubic-bezier(.15,1.1,.15,1), visibility .28s ease;
  }

  /* ===== Projects-only bubble visuals (scoped to .projects-stack) ===== */
  .projects-stack .bubble-wide{
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 36px;
    border-radius: 16px;
    transition: none;
  }
  /* Don't show an outline/shadow for the clear project bubble on hover */
  .projects-stack .bubble-link .bubble-wide:hover{
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Only the image casts a shadow and scales slightly on hover */
  .projects-stack .bubble-media img{
    border-radius: 14px !important;
    /* Ensure rounded corners are visible even with transparent letterboxing */
    clip-path: inset(0 round 14px) !important;
    transition: transform .22s cubic-bezier(.2,1,.2,1), filter .22s cubic-bezier(.2,1,.2,1);
  }
  .projects-stack .bubble-link:hover .bubble-media img{
    transform: scale(1.02);
    /* Only the image casts a shadow; use drop-shadow so it renders beyond rounded mask */
    filter: drop-shadow(0 18px 44px rgba(12,18,28,0.28));
  }
  .projects-stack .bubble-media{ background: transparent !important; box-shadow: none !important; border: none !important; filter: none !important; overflow: visible; border-radius: 14px; }

  /* Ensure the anchor/container itself never highlights on hover/focus */
  .projects-stack .bubble-link{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
  }
  .projects-stack .bubble-link:hover,
  .projects-stack .bubble-link:focus,
  .projects-stack .bubble-link:active{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .projects-stack .bubble-link:hover .bubble-wide,
  .projects-stack .bubble-link:focus .bubble-wide,
  .projects-stack .bubble-link:active .bubble-wide{
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Frosted glass info pill (single pill with title + overview); preserve paragraph breaks */
  .projects-stack .bubble-body{ position:absolute; inset:0; pointer-events:none; }
  .projects-stack .bubble-pill.info-pill{
    position: absolute;
    left: 50%;
    bottom: 24px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: min(72%, 720px);
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 14px 44px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    color: var(--ink);
    opacity: 0;
    transform-origin: 50% 100%;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    transition: opacity .38s cubic-bezier(.2,1,.2,1), transform .46s cubic-bezier(.18,1.05,.18,1);
  }
  .projects-stack .bubble-link:hover .bubble-pill.info-pill{ opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
  .projects-stack .bubble-pill .pill-title{
    font-weight:800;
    font-size:16px;
    margin:0 0 8px 0;
    color:#ffffff;
    text-shadow:0 1px 10px rgba(0,0,0,0.45);
  }
  .projects-stack .bubble-pill .pill-desc{
    white-space: pre-wrap;
    color:#ffffff;
    text-shadow:0 1px 10px rgba(0,0,0,0.45);
  }
  .project-tracker.visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
  }
  @media (max-width: 1120px){
    .project-tracker{ left: 12px; }
  }
  /* Labels always render to the RIGHT; previous narrow-only rule is now global */
  /* Remove any alternate display modes; visibility handled via .visible class */
  .project-tracker .dot{
    --dotHoverScale: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 32px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    transition:
      width .22s cubic-bezier(.2,1,.2,1),
      height .22s cubic-bezier(.2,1,.2,1),
      margin .22s ease,
      background-color .22s ease,
      border-color .22s ease,
      box-shadow .28s cubic-bezier(.2,1,.2,1),
      transform .22s cubic-bezier(.2,1,.2,1);
    will-change: width, height, margin, background-color, border-color, box-shadow, transform;
    cursor: pointer;
    user-select: none;
    transform: scale(var(--dotHoverScale));
  }
  /* Tracker item wrapper so labels don't move dot positions */
  .project-tracker .item{ position: relative; display: flex; align-items: center; height: 34px; }
  /* Subtle hover lift: move the item's dot and label up a bit */
  .project-tracker .item:hover .dot{
    --dotHoverScale: 1.06;
    transform: translateY(-2px) translateZ(0) scale(var(--dotHoverScale));
    background: var(--glass-bg-strong);
    box-shadow:
      0 22px 56px rgba(0,0,0,0.28),
      var(--glass-glow),
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(0,0,0,0.14);
  }
  /* Ensure dot animates transform smoothly */
  .project-tracker .dot{ transform: translateZ(0) scale(var(--dotHoverScale)); transition: transform .22s cubic-bezier(.2,1,.2,1), box-shadow .22s cubic-bezier(.2,1,.2,1); will-change: transform, box-shadow; }

  /* Label hover lift (keep relative to its centered baseline) */
  .project-tracker .item:hover .label{
    transform: translateY(calc(-50% - 2px)) translateZ(0) scale(1.02);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.22),
      var(--glass-glow),
      inset 0 1px 0 rgba(255,255,255,0.6),
      inset 0 -1px 0 rgba(0,0,0,0.12);
    background: var(--glass-bg-strong);
    border-color: rgba(255,255,255,0.42);
  }
  /* Stronger effect when active + hover (very subtle scale increase) */
  .project-tracker .item.active:hover .label{
    transform: translateY(calc(-50% - 2px)) translateZ(0) scale(1.1);
  }
  /* Glass label positioned to the LEFT of the dot; can extend arbitrarily left */
  .project-tracker .label{
    position: absolute;
    right: auto;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateZ(0) scale(0.96);
    transform-origin: left center;
    padding: 6px 12px;
    border-radius: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 32px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    color: var(--ink);
    font-size: 13px; /* keep text metrics stable; scale via transform to avoid jumps */
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap; /* allow to go far left, no clipping */
    opacity: .9;
    transition:
      opacity .28s ease,
      box-shadow .28s ease,
      background-color .28s ease,
      border-color .28s ease,
      transform .42s cubic-bezier(.18,1.05,.18,1);
    pointer-events: auto;
    cursor: pointer;
    will-change: transform, opacity, box-shadow;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
  }
  .project-tracker .item.active .label{
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.44);
    box-shadow: 0 24px 64px rgba(0,0,0,0.3), var(--glass-glow);
    opacity: 1;
    transform: translateY(-50%) translateZ(0) scale(1.08);
  }
  .project-tracker .dot.active{
    width: 34px;
    height: 34px;
    margin: 2px 0; /* neighbors appear to scoot */
    background: rgba(255,255,255,0.26);
    border-color: rgba(255,255,255,0.38);
    box-shadow:
      0 26px 72px rgba(0,0,0,0.30),          /* larger, blurrier drop */
      0 0 34px rgba(255,255,255,0.60),       /* stronger outer glow */
      inset 0 1px 0 rgba(255,255,255,0.88),
      inset 0 -1px 0 rgba(0,0,0,0.28);
  }

  /* Subtle idle motion for non-active dots */
  @keyframes tracker-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
  }
  .project-tracker .dot:not(.active){
    animation: tracker-float 3s ease-in-out infinite;
  }
  /* Project bubbles with adaptive image aspect ratio and overlay */
  .projects-stack .bubble-wide{
    position: relative;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 16px;
    overflow: visible;
    min-height: 220vh; /* much taller region so image stays sticky longer */
    max-height: none;
  }
  
  .projects-stack .bubble-media{
    position: sticky;
    top: calc(50vh - 37.5vh); /* center a 75vh viewport slot for longer stick */
    left: 0;
    width: 100%;
    height: 75vh; /* explicit height for stable cross-browser layout */
    background: transparent;
    border: none;
    border-radius: 16px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    pointer-events: none; /* ensure parent hover/anchor receives events */
  }
  
  /* Frame adapts to the image's intrinsic aspect ratio while keeping rounding */
  .projects-stack .bubble-media .media-frame{
    display: inline-block;
    border-radius: 14px;
    overflow: hidden;
    max-width: 100%;
    max-height: 75vh;
  }
  .projects-stack .bubble-media img{
    position: relative;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain; /* keep image contained but let frame set rounding */
    z-index: 1;
    opacity: 1; /* default visible for cross-browser reliability; JS will modulate */
    will-change: transform, opacity, filter;
  }

  /* Conway Trees uses full image (no crop) */
  
  /* Blurred, zoomed side fill using the same image */
  .projects-stack .bubble-media[style*="--bg-image"]::before{ content: none; display: none; }
  
  /* Project placeholder for projects without images */
  .projects-stack .project-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    text-align: center;
    z-index: 2;
    position: relative;
  }
  
  .projects-stack .project-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.7;
  }
  
  .projects-stack .project-title {
    font-size: 18px;
    font-weight: 600;
    opacity: 0.8;
  }
  
  /* Rework bubble-body to host floating glass pills (no sliding panel) */
  .projects-stack .bubble-body{
    position: absolute;
    inset: 0;
    background: transparent;
    padding: 0;
    border-radius: 16px;
    transform: none;
    transition: none;
    z-index: 5;
    pointer-events: none;
  }
  
  /* Floating glass pills for title and description */
  .projects-stack .bubble-pill{
    position: absolute;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(72%, 720px);
    padding: 10px 14px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e0e3eb;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ink);
    opacity: 0;
    transform: translateX(-22px) translateY(2px) scale(0.98);
    transition:
      opacity .38s cubic-bezier(.2,1,.2,1),
      transform .46s cubic-bezier(.18,1.05,.18,1),
      background-color .38s ease;
    will-change: opacity, transform, box-shadow, background-color;
    pointer-events: none; /* info-only */
  }
  .projects-stack .bubble-pill.title-pill{ bottom: 72px; font-weight: 800; }
  .projects-stack .bubble-pill.desc-pill{ bottom: 24px; font-size: 14px; line-height: 1.35; }
  .projects-stack .bubble-link:hover .bubble-pill{
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    box-shadow: none;
  }
  .projects-stack .bubble-link:hover .bubble-pill.desc-pill{ transition-delay: .06s; }
  
  .projects-stack .bubble-link .bubble-wide:hover{
    transform: scale(1.02);
    box-shadow: 0 14px 36px rgba(12,18,28,0.15);
  }
  
  /* Image credit styling */
  .projects-stack .image-credit{
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: #333;
    z-index: 2; /* sit above image, below bubble-body */
    opacity: 0.75;
    pointer-events: none; /* don't affect hover/scroll */
  }
  
  /* Hide credit when overlay is revealed to avoid visual clash */
  .projects-stack .bubble-link:hover .image-credit{
    opacity: 0;
  }
  
  .projects-stack .image-credit .credit-label{
    color: #333;
    text-shadow: none;
    transition: none;
    /* No hover effects for the label */
  }
  
  .projects-stack .image-credit a{
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
  
  .projects-stack .image-credit a:hover{
    color: #B8860B; /* Dull gold color */
    text-shadow: 0 0 8px rgba(184, 134, 11, 0.6); /* Glowing effect */
  }
  
  /* Remove circular navigation bubbles */
  .bubble-head h3{margin:0;font-size:18px;color:var(--ink)}
  .bubble-head a{margin-left:auto}
  .bubble-sub{margin-top:6px;color:var(--muted)}
  .cta{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;background:#111;color:#fff;text-decoration:none}
  .cta:hover{opacity:.9}
  .more-link{padding:20px 0}
  .project-links{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap}
  .project-link{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;background:#111;color:#fff;text-decoration:none;font-weight:500;transition:opacity .2s ease}
  .project-link:hover{opacity:.9;text-decoration:none}
/* Glass variant for project links */
.project-link.glass{
  background: var(--glass-bg);
  color: var(--ink);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 32px var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  transition: transform .22s cubic-bezier(.2,1,.2,1), box-shadow .22s cubic-bezier(.2,1,.2,1), background-color .22s ease, border-color .22s ease, color .22s ease, backdrop-filter .22s ease;
}
.project-link.glass:hover{
  opacity: 1;
  transform: translateY(-1px) translateZ(0) scale(1.02);
  background: var(--glass-bg-strong);
  border-color: rgba(255,255,255,0.44);
  box-shadow: 0 18px 48px rgba(0,0,0,0.2), var(--glass-glow);
  backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
}

/* Subpages default: make project links glass without needing an extra class */
body:not(.home) .project-link{
  background: var(--glass-bg);
  color: var(--ink);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 32px var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
  transition: transform .22s cubic-bezier(.2,1,.2,1), box-shadow .22s cubic-bezier(.2,1,.2,1), background-color .22s ease, border-color .22s ease, color .22s ease, backdrop-filter .22s ease;
}
body:not(.home) .project-link:hover{
  opacity: 1;
  transform: translateY(-1px) translateZ(0) scale(1.02);
  background: var(--glass-bg-strong);
  border-color: rgba(255,255,255,0.44);
  box-shadow: 0 18px 48px rgba(0,0,0,0.2), var(--glass-glow);
  backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.04));
}
  .video-container{position:relative;width:100%;margin:32px 0;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.12)}
  .video-container iframe{display:block;width:100%;height:400px;border:none}
  @media (max-width: 768px){.video-container iframe{height:250px}}
  
  /* Contact form styles */
  .contact-form-container {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 60px;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .contact-form,
  .contact-info {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 32px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.04) brightness(var(--glass-brightness));
    border-radius: var(--radius);
    transition: transform .22s cubic-bezier(.2,1,.2,1), box-shadow .22s cubic-bezier(.2,1,.2,1), background-color .18s ease, border-color .18s ease, backdrop-filter .18s ease;
  }

  .contact-form {
    padding: 40px;
  }
  
  .form-group {
    margin-bottom: 24px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--ink);
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e9e9ef;
    border-radius: 8px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #fafbfc;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(20, 110, 245, 0.1);
    background: white;
  }
  
  .form-group textarea {
    resize: vertical;
    min-height: 120px;
  }
  
  .submit-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  
  .submit-btn:hover {
    background: #0d5bd9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 110, 245, 0.3);
  }
  
  .contact-info {
    padding: 32px;
    height: fit-content;
  }

  .contact-form:hover,
  .contact-info:hover {
    background: var(--glass-bg-strong);
    border-color: rgba(255,255,255,0.44);
    box-shadow: 0 16px 44px rgba(0,0,0,0.2), var(--glass-glow);
    backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.06));
    -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.05) brightness(calc(var(--glass-brightness) + 0.06));
  }
  
  .contact-info h3 {
    margin: 0 0 20px;
    font-size: 18px;
    color: var(--ink);
  }
  
  .contact-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .contact-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--glass-border);
    box-shadow: 0 6px 18px var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.02) brightness(var(--glass-brightness));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.02) brightness(var(--glass-brightness));
    color: var(--ink);
    text-decoration: none;
    transition: all 0.2s ease, transform 0.18s ease;
  }
  
  .contact-links a:hover {
    background: var(--glass-bg-strong);
    border-color: rgba(255,255,255,0.44);
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14), var(--glass-glow);
    text-decoration: none;
  }
  
  .form-status {
    margin-top: 16px;
  }
  
  .form-status .success {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #c3e6cb;
  }
  
  .form-status .error {
    background: #f8d7da;
    color: #721c24;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #f5c6cb;
  }
  
  @media (max-width: 768px) {
    .contact-form-container {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    
    .contact-form {
      padding: 24px;
    }
    
    .contact-info {
      padding: 24px;
    }
  }

/* Mobile contingencies: tighten spacing and simplify sticky visuals without affecting desktop */
@media (max-width: 720px){
  :root{ --pad:16px; }
  /* Fixed header overlaps page content on mobile unless we reserve space. */
  body{ padding-top:124px; }
  /* Home uses an explicit hero top pad so we keep the hero near the top without clipping. */
  body.home{ padding-top:46px; }
  .site-header{ top:8px; }
  .nav{
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-start;
    padding:12px var(--pad);
  }
  .nav-left{
    width:100%;
    justify-content:space-between;
    gap:12px;
  }
  .social-links{
    margin-left:auto;
    gap:8px;
  }
  .social-links a{
    width:28px;
    height:28px;
  }
  .nav-right{
    width:100%;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: rgba(12,18,28,0.28) transparent;
    min-width: 0;
    position: relative;
  }
  /* Visual hint that the nav is horizontally scrollable */
  .nav-right.has-swipe-hint::after{
    content: "Swipe →";
    position: absolute;
    right: 6px;
    bottom: 0px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(12,18,28,0.55);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 6px 18px rgba(12,18,28,0.10);
    pointer-events: none;
  }
  .nav-right.has-swipe-hint::before{
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:10px;
    width: 38px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(247,247,248,0.9) 70%, rgba(247,247,248,1) 100%);
    pointer-events:none;
  }
  .nav-right.has-swipe-hint{
    padding-bottom: 10px; /* makes the scrollbar affordance visible */
  }
  .nav-right::-webkit-scrollbar{
    height:6px;
  }
  .nav-right::-webkit-scrollbar-thumb{
    background: rgba(12,18,28,0.32);
    border-radius: 999px;
  }
  .nav-right::-webkit-scrollbar-track{
    background: transparent;
  }
  .nav-right a{
    flex:0 0 auto;
    justify-content:flex-start;
    font-size:15px;
    padding:12px 14px;
  }
  .nav a:not(.social-links a){
    padding:12px 14px;
  }
  .container,
  main.container{
    padding:28px var(--pad);
  }
  .hero{
    padding:64px var(--pad) 44px;
  }
  body.home .hero{
    padding-top:84px;
  }
  /* Non-home pages (About, Contact, Project subpages, etc.) need extra top padding too */
  body:not(.home) .hero{
    padding-top: calc(64px + 18px);
  }
  .hero-split{ grid-template-columns:1fr; gap:16px; }
  .hero-media{ margin-top: 28px; }
  .hero-copy.card{
    max-width: min(90vw, 520px);
    margin: 0 auto;
    padding: 16px 14px;
    margin-top: 14px;
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }
  .hero-copy.card p{ max-width: 100%; }
  .hero-split{ gap:16px; }
  .hero-media img{
    max-height:none;
    min-height:220px;
    max-width:420px;
    margin:0 auto;
    object-position: 50% 28%;
  }
  .hero + .section{ margin-top:92px; }
  body.home .hero + .section{ margin-top:128px; }
  .section-title{
    padding:12px var(--pad);
    font-size:15px;
  }
  /* Simplify sticky project bubbles on mobile */
  .projects-stack .bubble-wide{
    min-height:auto;
    padding:0;
  }
  .projects-stack .bubble-media{
    position:relative;
    top:auto;
    height:auto;
    display:block;
    background:transparent;
    box-shadow:none;
  }
  .projects-stack .bubble-media .media-frame{
    max-height:none;
  }
  .projects-stack .bubble-media img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:cover;
  }
  .projects-stack .bubble-body{
    position:static;
    padding:12px 0 0;
  }
  .projects-stack .bubble-pill{
    position:static;
    opacity:1;
    transform:none;
    width:100%;
    max-width:100%;
    margin-top:8px;
    background:#fff;
    border:1px solid #e0e3eb;
    color:var(--ink);
  }
  .projects-stack .bubble-pill.title-pill,
  .projects-stack .bubble-pill.desc-pill{
    bottom:auto;
    left:auto;
  }
  .projects-stack .bubble-link:hover .bubble-pill{
    opacity:1;
    transform:none;
  }
  .projects-stack .bubble-pill .pill-title{
    color:var(--ink);
    text-shadow:none;
  }
  .projects-stack .bubble-pill .pill-desc{
    color:var(--ink);
    text-shadow:none;
  }
  .project-tracker{
    display:none;
  }
  .project-actions{
    gap:10px;
  }
  .project-link{
    width:100%;
    justify-content:center;
  }
}