:root { --logo-bg: #111111; --logo-fg: #ffffff; --bg-color: #ffffff; --surface-color: #f9f9f9; --text-primary: #111111; --text-secondary: #666666; --border-color: #e5e5e5; --nav-glass: rgba(255, 255, 255, 0.85); --nav-fallback: rgba(255, 255, 255, 0.98); --container-width: 1400px; --smooth-ease: cubic-bezier(0.25, 1, 0.5, 1); --float-ease: var(--smooth-ease); --text-color: var(--text-primary); --anim-duration: 0.3s; --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease; }
[data-theme="dark"] { --logo-bg: #ffffff; --logo-fg: #0a0a0a; --bg-color: #0a0a0a; --surface-color: #121212; --text-primary: #ffffff; --text-secondary: #a0a0a0; --border-color: #262626; --nav-glass: rgba(10, 10, 10, 0.85); --nav-fallback: rgba(10, 10, 10, 0.98); }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; min-height: 100%; overscroll-behavior-y: none; background-color: var(--bg-color); transition: var(--theme-transition); }
html.no-scroll { overflow: hidden !important; height: 100vh !important; }
body { background-color: var(--bg-color); color: var(--text-primary); font-family: 'Inter', sans-serif; transition: var(--theme-transition); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background-color: var(--border-color); border: 3px solid var(--bg-color); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); }

img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; pointer-events: auto; }
a { text-decoration: none; color: inherit; transition: opacity 0.2s; }
a:hover { opacity: 0.7; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; contain: paint; isolation: isolate; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: var(--nav-fallback); border-bottom: 1px solid var(--border-color); transition: var(--theme-transition); transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; padding-right: var(--scrollbar-width, 0px); }
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { nav { background-color: var(--nav-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } }
.nav-container { max-width: var(--container-width); margin: 0 auto; padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; height: 70px; }

.nav-right { display: flex; align-items: center; gap: 2.5rem; }
.nav-links { display: flex; gap: 2rem; }
.nav-btn { color: var(--text-secondary); font-size: 0.95rem; font-weight: 500; position: relative; padding: 5px 0; transition: color 0.3s ease; }
.nav-btn:hover, .nav-btn.active { color: var(--text-primary); }
.nav-btn.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--text-primary); transition: background-color 0.3s ease; }
.nav-actions { padding-left: 25px; position: relative; display: flex; gap: 15px; }
.nav-actions::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 1px; background-color: var(--text-primary); opacity: 0.2; transition: background-color 0.3s ease; }
.icon-btn { color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.2s, background-color 0.3s ease, color 0.3s ease; height: 40px; width: 40px; border-radius: 50%; }
.icon-btn:hover { color: var(--text-primary); background: rgba(125,125,125, 0.1); }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2; transition: stroke 0.3s ease, fill 0.3s ease; }
main { max-width: var(--container-width); margin: 0 auto; padding: 100px 5% 0; flex: 1; width: 100%; }
.section { display: none; opacity: 0; transition: opacity var(--anim-duration) var(--smooth-ease); }
.section.show { display: block; }
.section.active { opacity: 1; }
.hero-header { margin-bottom: 20px; width: 100%; }
.hero-header h1 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; margin-bottom: 5px; color: var(--text-primary); transition: color 0.3s ease; }
.std-divider { width: 100%; height: 1px; background-color: var(--border-color); margin-top: 10px; margin-bottom: 30px; transition: var(--theme-transition); }
.filter-container { margin-bottom: 30px; display: flex; gap: 10px; flex-wrap: wrap; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  padding: 9px 22px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  line-height: 1;
  transform: none;
  box-shadow: none;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}

.filter-btn:hover {
  background-color: var(--text-primary);
  color: var(--bg-color);
  border-color: var(--text-primary);
  transform: none;
  box-shadow: none;
}

.filter-btn.active {
  background-color: var(--text-primary);
  color: var(--bg-color);
  border-color: var(--text-primary);
}

html.js .masonry-grid { column-count: 3; column-gap: 30px; width: 100%; margin: 0; padding: 0; opacity: 1; transition: opacity 0.3s var(--smooth-ease); }
#gallery-grid{opacity:0;}
@keyframes simpleFade { from { opacity: 0; } to { opacity: 1; } }
.grid-item { break-inside: avoid; margin-bottom: 30px; margin-top: 0 !important; border-radius: 2px; overflow: hidden; background-color: var(--surface-color); position: relative; cursor: pointer; opacity: 0; animation: simpleFade 0.3s var(--smooth-ease) forwards; will-change: opacity; contain: content; display: inline-block; width: 100%; transition: background-color 0.3s ease; transform: translateZ(0); }
.grid-item.hidden { display: none; }
.grid-item img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform 0.42s cubic-bezier(.25,1,.35,1); transform: scale(1) translateZ(0); backface-visibility: hidden; }
@media (hover: hover) { .grid-item:hover img { transform: scale(1.02) translateZ(0); } }
.gear-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; width: 100%; margin: 30px 0 30px 0; padding: 0; }
.gear-card { padding: 28px 30px 32px 30px; border-radius: 8px; background-color: var(--surface-color); border: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.gear-card:hover {
  border-color: var(--border-color);
  transform: none;
  box-shadow: none;
}
.gear-card h3 { display: flex; align-items: center; font-size: 1.2rem; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent); font-weight: 600; letter-spacing: -0.02em; transition: border-color 0.3s ease; }
.gear-list li { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 0.95rem; color: var(--text-secondary); transition: color 0.3s ease; }
.gear-list span:first-child { color: var(--text-primary); font-weight: 500; transition: color 0.3s ease; }
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-text { font-size: 1.1rem; color: var(--text-secondary); max-width: 500px; transition: color 0.3s ease; }
.about-text p { margin-bottom: 20px; transition: var(--theme-transition); }
.about-text strong { color: var(--text-primary); font-weight: 600; transition: color 0.3s ease; }
.expertise-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 40px; transition: color 0.3s ease; }
.expertise-list li { display: flex; align-items: center; gap: 8px; }
.expertise-list li svg { width: 14px; height: 14px; color: var(--text-primary); transition: color 0.3s ease; }

.about-photo {
  border-radius: 4px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.about-photo picture {
  display: block;
  width: min(100%, 420px);
  margin-left: auto;
}

.about-photo img {
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  height: auto;
  display: block;
  opacity: 1;
  border-radius: 6px;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .about-photo img:hover {
    opacity: 0.9;
  }
}

@media (hover: none) {
  .about-photo img:hover {
    opacity: 1;
  }
}

.contact-form { margin-top: 30px; display: grid; gap: 15px; }
.form-input, .form-textarea { width: 100%; padding: 14px 18px; border: 1px solid var(--border-color); background: var(--bg-color); color: var(--text-primary); font-family: 'Inter', sans-serif; font-size: 0.95rem; border-radius: 4px; transition: border-color 0.3s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(125,125,125,0.1); }
.form-textarea { resize: vertical; min-height: 120px; }

.submit-btn {
  background: var(--text-primary);
  color: var(--bg-color);
  padding: 14px 30px;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  justify-self: start;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  min-width:154px;
  box-sizing:border-box;
  text-align:center;
  font-family:'Inter', sans-serif;
  font-size:0.95rem;
  line-height:1.2;
}

.submit-btn:hover { opacity: 0.8; transform: none; }

.site-footer { text-align: center; padding: 72px 0 52px; color: var(--text-secondary); font-size: 0.78rem; letter-spacing: 0.055em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: auto; transition: color 0.3s ease; }
.footer-logo-wrapper { display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 0 auto; }
.footer-logo-img { height: 27px; width: auto; opacity: 0.84; transition: filter 0.3s ease, opacity 0.3s ease; display: block; }
[data-theme="dark"] .footer-logo-img { filter: invert(1); }
.footer-divider { width: 64px; height: 1px; background-color: var(--border-color); opacity: 0.62; margin: 18px auto 0; transition: var(--theme-transition); }
.footer-socials { display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 0; }
.footer-socials .icon-btn { height: 34px; width: 34px; border-radius: 50%; background: transparent !important; opacity: 0.56; transition: opacity 0.3s ease, color 0.3s ease, transform 0.25s ease, background-color 0.3s ease; }
.footer-socials .icon-btn:hover { opacity: 1; transform: translateY(-1px); background: rgba(125,125,125,0.08) !important; }
.footer-socials svg { height: 22px !important; width: auto !important; display: block; fill: none; stroke: currentColor; stroke-width: 2; transition: stroke 0.3s ease, fill 0.3s ease; }
.footer-socials svg path { transition: fill 0.3s ease, stroke 0.3s ease; }
.footer-socials .imdb-svg { height: 18px !important; }
.footer-socials .astrobin-icon svg { height: 21px !important; }
.site-footer p { margin: 0; opacity: 0.72; } 
.footer-socials .filled-icon { fill: currentColor !important; stroke: none !important; }
.astrobin-icon .cls-1 { fill: currentColor !important; opacity: 0.4; transition: fill 0.3s ease; } 
.astrobin-icon .cls-2 { fill: currentColor !important; opacity: 1.0; transition: fill 0.3s ease; }
.astrobin-icon .cls-3 { fill: currentColor !important; opacity: 0.3; transition: fill 0.3s ease; }
.astrobin-icon .cls-4 { fill: currentColor !important; opacity: 0.9; transition: fill 0.3s ease; }
.astrobin-icon .cls-5 { fill: currentColor !important; opacity: 0.7; transition: fill 0.3s ease; }
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: rgba(0, 0, 0, 0.97); backdrop-filter: blur(8px); z-index: 10000; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity 0.3s var(--smooth-ease), visibility 0.3s step-end; display: flex; justify-content: center; align-items: center; padding: 30px; overscroll-behavior: contain; touch-action: none; }
.lightbox.open { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 0.3s var(--smooth-ease), visibility 0.3s step-start; }
.lightbox-content { width: 100%; max-width: 1400px; max-height: 90vh; display: flex; gap: 50px; align-items: center; justify-content: center; position: relative; }
.lightbox-img-wrapper { flex: 2; display: flex; justify-content: center; align-items: center; height: 100%; position: relative; }
.lightbox-img { width: auto; height: auto; max-width: 100%; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 60px rgba(0,0,0,0.5); transition: opacity 0.3s ease; will-change: opacity; }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: white; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.6; transition: all 0.2s ease; z-index: 10001; }
.lightbox-close svg { width: 40px; height: 40px; stroke-width: 2; }
.lightbox-close:hover { opacity: 1; transform: scale(1.1); }
.lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.4); color: white; border: 1px solid rgba(255,255,255,0.2); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 10001; backdrop-filter: blur(4px); }
.lb-arrow:hover { background: rgba(255, 255, 255, 0.95); color: black; border-color: white; transform: translateY(-50%) scale(1.1); }
.lb-prev { left: 40px; } .lb-next { right: 40px; }
.swipe-hint { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%) translateY(6px); background: rgba(12, 12, 12, 0.56); color: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 12px 28px rgba(0,0,0,0.24); -webkit-backdrop-filter: blur(14px) saturate(145%); backdrop-filter: blur(14px) saturate(145%); padding: 8px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1; letter-spacing: 0.04em; opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.5s ease; display: flex; align-items: center; gap: 8px; z-index: 10002; }
.swipe-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 1025px) and (max-width: 1600px) { :root { --container-width: 1200px; } .hero-header h1 { font-size: clamp(2.5rem, 5vw, 4rem); }  .about-text { font-size: 1rem; } .masonry-grid { column-gap: 25px; } .site-footer { padding: 56px 0 38px; } }
@media (max-width: 900px) { .about-photo { justify-content: center; } .about-photo picture { width: 100%; margin: 0 auto; } .about-photo img { width: 96%; margin: 0 auto; }  .lightbox-content { flex-direction: column; gap: 0; justify-content: center; padding: 0; margin: 0; } .lightbox-img-wrapper { width: 100%; height: 100%; } .lightbox-img { max-height: 80dvh; max-width: 95vw; } .lb-prev, .lb-next { display: none; } .lightbox-close { top: 15px; right: 15px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); border-radius: 50%; opacity: 1; } .lightbox-close svg { width: 20px; height: 20px; } .nav-actions { padding-left: 15px; margin-left: 15px; gap: 12px; } .nav-links { gap: 1.5rem; } html.js .masonry-grid { column-count: 2; column-gap: 20px; } .hero-header h1 { font-size: 3.5rem; } .about-layout { grid-template-columns: 1fr; gap: 30px; } .gear-wrapper { grid-template-columns: 1fr; gap: 20px; } .gear-card:hover { transform: none !important; box-shadow: none !important; border-color: transparent !important; } .about-photo img { filter: grayscale(0%) !important; transform: none !important; } .site-footer { padding: 38px 0 28px; } .footer-logo-img { height: 25px; } .footer-socials { gap: 16px; } }
@media (max-width: 600px) { main { padding-top: 130px; } .nav-container { flex-direction: column; gap: 12px; align-items: center; position: relative; padding-top: 12px; padding-bottom: 12px; height: auto; }  .nav-actions { position: absolute; top: 12px; right: 5%; margin: 0; border-left: none; padding-left: 0; height: 35px; } .nav-actions::before { display: none; } .nav-right { width: 100%; justify-content: center; position: static; } .nav-links { position: static; width: auto; gap: 1.5rem; justify-content: center; } html.js .masonry-grid { column-count: 2; column-gap: 12px; } .grid-item { margin-bottom: 12px; } .gear-wrapper { gap: 40px; margin-bottom: 40px; } .filter-container { justify-content: flex-start; } .about-text { font-size: 1rem; letter-spacing: 0.01em; } .expertise-list { grid-template-columns: 1fr; gap: 12px; } .expertise-list li { align-items: flex-start; } .expertise-list li svg { margin-top: 4px; } .hero-header h1 { font-size: 2.75rem; } .site-footer { padding: 36px 0 24px; gap: 14px; } .footer-divider { margin-top: 14px; width: 54px; } .footer-socials { margin-top: 0; gap: 18px; } .footer-logo-img { height: 24px; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .grid-item { opacity: 1 !important; animation: none !important; } .masonry-grid { opacity: 1 !important; transition: none !important; } }

body{opacity:1; visibility:visible;}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* iOS safe-area: keep fixed nav clear of notch / Dynamic Island */
nav {
  padding-top: env(safe-area-inset-top);
}

/* If nav gains safe-area height, offset main on small screens to prevent overlap */
@media (max-width: 600px) {
  main {
    padding-top: calc(130px + env(safe-area-inset-top));
  }
}

/* Grid fail-safe: ensure grid is visible if JS does not run */
html:not(.js) .masonry-grid {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== Projects tab (V136) ===== */
.projects-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
  margin-bottom: 60px;
}
@media (max-width: 820px){
  .projects-grid{ grid-template-columns: 1fr; gap: 28px; }
}

.project-card{
  display:flex;
  flex-direction:column;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
  text-decoration:none;
}

.project-img-wrapper{
  width:100%;
  aspect-ratio: 3 / 2;
  background-color: var(--surface-color);
  border-radius: 4px;
  overflow:hidden;
  position:relative;
  margin-bottom: 18px;
  transform: translateZ(0);
}

.project-img-wrapper img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}

.project-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.28);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  opacity:0;
  transition: opacity 420ms var(--smooth-ease);
}

@media (hover: hover){
  .project-card:hover .project-img-wrapper img{ transform: scale(1.02); }
  .project-card:hover .project-overlay{ opacity:1; }
}

/* Back button in project detail */
/* ===== end Projects tab ===== */

/* ===== Projects card meta refinement ===== */
#projects .project-subtitle{ margin: 0; opacity: 0.88; }
#projects .project-meta-line{
  font-size: 0.92rem;
  opacity: 1;
  margin-top: 10px;
}
/* ===== end refinement ===== */

@media (max-width: 700px){
  .project-description{ margin-bottom: 32px; }
}

/* ===== Next-tier project upgrades ===== */

.project-hero-image{
  width:100%;
  margin: 26px 0 18px 0;
  border-radius: 4px;
  overflow:hidden;
}

.project-hero-image img{
  width:100%;
  height:auto;
  display:block;
}

/* Controlled whitespace for projects */
#china .hero-header{
  margin-bottom: 18px;
}

.project-description{
  margin-top: 0;
  margin-bottom: 34px;
}

/* Upgrade 5: refined statement */
.project-statement{
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 12px 0;
  color: #fff;
  max-width: 680px;
}

/* Slightly quieter meta line */
.project-meta-line{
  opacity: 1;
}

/* Mobile tuning */
@media (max-width: 700px){
  .project-hero-image{
    margin:22px 0 34px 0;
  }
  .project-description{
    margin-bottom:40px;
  }
}

/* ===== End next-tier upgrades ===== */

/* ===== Hero ratio + advanced spacing ===== */

.project-hero-image{
    width:100%;
    aspect-ratio: 3 / 2;
    overflow:hidden;
    border-radius:4px;
    margin-top: 28px;
    margin-bottom: 64px; /* slightly larger than top for museum-style pacing */
}

.project-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Prevent hero from ever dominating viewport */
@media (min-height: 900px){
    .project-hero-image{
max-height: 70vh;
    }
}

/* Mobile tuning */
@media (max-width: 700px){
    .project-hero-image{
margin-top:20px;
margin-bottom:44px;
    }
}

/* ===== End hero upgrades ===== */

/* ===== Typography hierarchy refinement ===== */

.project-statement{
    font-size: 1.125rem; /* slightly elevated */
    line-height: 1.65;
    max-width: 620px;
    margin: 0 0 10px 0;
    color: var(--text-primary);
}

.project-lede{
    font-size: 1rem;
    opacity: 1; /* softer than statement */
    margin: 0 0 14px 0;
    max-width: 640px;
}

.project-meta-line{
    opacity: 1; /* quiet metadata */
    margin-bottom: 56px;
}

/* Museum-style spacing rhythm */
#china .hero-header{
    margin-bottom: 26px;
}

/* Mobile tuning */
@media (max-width:700px){
    .project-statement{
font-size: 1.05rem;
    }
}

/* ===== End typography refinement ===== */

/* --- end fix --- */

/* ===== Project caption polish ===== */

/* Tight, editorial hierarchy without relying on opacity (keeps selection crisp) */
.project-description{
    max-width: 720px;
}

/* Study sentence — lead line (regular) */
.project-statement{
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.65;
    color: var(--text-primary);
    max-width: 640px;
    margin: 0;
}

/* Location line — supporting (italic + slightly smaller) */
.project-lede{
    font-weight: 400;
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 0.98rem;
    margin: 12px 0 0 0;
}

/* Date/meta — quiet (smaller caps) */
.project-meta-line{
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.74rem;
    line-height: 1.2;
    margin: 14px 0 0 0;
}@media (max-width:700px){
    .project-description{ max-width: 100%; }
    .project-statement{
font-size: 1.05rem;
line-height: 1.6;
    }
    .project-lede{
font-size: 0.98rem;
margin-top: 10px;
    }
    .project-meta-line{
margin-top: 12px;
    }
}

/* ===== End project caption polish ===== */

/* ===== GLOBAL TEXT SELECTION (bulletproof) ===== */

::selection{
    background: var(--text-primary);
    color: var(--bg-color);
}

::-moz-selection{
    background: var(--text-primary);
    color: var(--bg-color);
}

/* ===== END GLOBAL SELECTION ===== */

/* ===== Project page copy rhythm (no statement) ===== */
.project-title + .project-description .project-lede{
  margin-top: 10px;
}
/* ===== End rhythm ===== */

/* ===== Project lede + spacing refinement (V136) ===== */

/* Bring caption closer to hero and keep grid rhythm */
.project-hero-image{ margin: 26px 0 18px 0; }
@media (max-width:700px){ .project-hero-image{ margin: 20px 0 16px 0; } }

.project-description{ margin-top: 0; margin-bottom: 34px; }
@media (max-width:700px){ .project-description{ margin-bottom: 28px; } }

/* Make 'Scenes from…' feel like a true subhead (not body copy) */
.project-description .project-lede{
  font-style: normal;
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.45;
  margin: 0;
  color: var(--text-primary);
}

/* Date stays meta */
.project-description .project-meta-line{
  margin-top: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Keep selection crisp */
.project-description .project-lede,
.project-description .project-meta-line{ opacity: 1; }

/* ===== End V136 ===== */

/* ===== Projects Tab Typography Match (V136) ===== */

/* Title — strong but not oversized */
.project-info h2{
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 6px;
}

/* "Scenes from…" — now behaves like the project subhead */
.project-info p{
  font-style: normal;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
}

/* Date — true meta styling */
.project-info .project-meta-line{
  display: block;
  margin-top: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Improve vertical rhythm inside cards */
.project-info{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
}

/* Mobile refinement */
@media (max-width:700px){

  .project-info h2{
    font-size: 1.28rem;
  }

  .project-info p{
    font-size: 0.98rem;
  }

}

/* ===== End V136 ===== */

/* ===== Theme sync: back to projects button (V136) ===== */
.back-to-projects, .back-to-projects-btn, .project-back, .projects-back{
  color: var(--text-primary);
  transition: color .12s ease, background-color .12s ease, border-color .12s ease;
}
/* If it uses an icon */
.back-to-projects svg, .back-to-projects-btn svg, .project-back svg, .projects-back svg{
  stroke: currentColor;
}
/* ===== End V136 ===== */

/* ===== Project image hover stability (V136) ===== */
/* Prevent end-of-hover 'bounce' on some browsers by stabilizing transform rendering */
.project-card img,
.project-preview img,
.project-thumb img,
.project-image img{
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Ensure the same timing function both directions */
.project-card img{
  transition-timing-function: cubic-bezier(.2,.8,.2,1);
}
/* ===== End V136 ===== */

/* ===== Projects tab text theme sync (V136) ===== */
.project-info h2,
.project-info p,
.project-info .project-meta-line{
  transition: color .12s ease;
}

.project-info h2{ color: var(--text-primary); }
.project-info p{ color: var(--text-primary); }
.project-info .project-meta-line{ color: var(--text-secondary); }/* ===== End V136 ===== */

/* ===== Back to Projects editorial refine (V136) ===== */
.back-nav{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin: 0 0 20px 0;
  /* Breadcrumb-style link: calm by default, strong on hover */
  color: var(--text-secondary);
  font-weight:500;
  font-size:0.98rem;
  cursor:pointer;
  border:none;
  background:none;
  padding:0;
  text-decoration:none;
  transition: color .30s ease, transform .30s ease;
}

/* subtle motion like Enter → */
.back-nav .back-arrow{
  display:inline-block;
  transform:translateX(0);
  transition: transform .30s ease;
}

.back-nav:hover .back-arrow{
  transform:translateX(-3px);
}

/* optional ultra subtle hover */
.back-nav:hover{
  color: var(--text-primary);
}
/* ===== End V136 ===== */

/* ===== Share button (projects)
   Uses .icon-btn styling so it matches the theme toggle exactly.
   Keep this block intentionally minimal to avoid overrides. ===== */
.share-btn{ }

/* ===== Enter editorial link (V136) ===== */
.view-project-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:none;
  background:none;
  font-weight:500;
  letter-spacing:0.02em;
  color: inherit;
  transition: color .30s ease, transform .30s ease;
}

/* Arrow motion matches Back link */
.view-project-btn .enter-arrow{
  display:inline-block;
  transform:translateX(0);
  transition: transform .30s ease;
}

.project-card:hover .view-project-btn .enter-arrow{
  transform:translateX(3px);
}
/* ===== End V136 ===== */

/* ===== Projects overlay readability (V136) ===== */
/* Keeps Projects card text readable regardless of theme + photo brightness */
.project-overlay{
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

/* Local scrim behind the text area (not a bubble, not a border) */
.project-overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.0) 60%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* Ensure overlay content stays above scrim */
.project-overlay > *{
  position: relative;
  z-index: 1;
}

/* If you ever want a slightly lighter scrim on very dark photos, lower opacity here */
@media (hover: none){
  .project-overlay::after{ opacity: 0.80; }
}
/* ===== End V136 ===== */

/* ===== Enter mobile refinement (V136) ===== */
@media (hover: none){

  .project-overlay{
    opacity: 1 !important;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 16px;
  }

  .view-project-btn .enter-arrow{
    transition: none !important;
    transform: none !important;
  }

  .project-card:hover .view-project-btn .enter-arrow{
    transform: none !important;
  }

}
/* ===== End V136 ===== */

/* ===== Masonry responsive (V136) ===== */
/* ===== End V136 ===== */

/* Futureproof: all project grids share .masonry-grid so layouts stay consistent */

/* ===== Back nav mobile breathing room (V136) ===== */
@media (max-width: 700px){
  .back-nav{ margin-top: 10px; }
}
/* ===== End V136 ===== */

/* ===== Project topbar + meta row ===== */
.project-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  margin-bottom: 10px;
}

.project-topbar .back-nav{
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  padding: 0;
}

.project-topbar .back-nav svg{
  width: 16px;
  height: 16px;
  transform: translateY(1px); /* optical baseline correction */
}

.project-meta-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}

.project-meta-row h1{
  margin-right: auto;
}

.project-meta-row .project-date{
  margin: 0;
}

@media (max-width: 600px){
  .project-meta-row{
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
}

/* ===== Copy Toast ===== */
.copy-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  padding: 10px 16px;
  border-radius: 999px;

  background: color-mix(in srgb, var(--bg-color) 82%, transparent);
  color: var(--text-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent);

  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999999;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.copy-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@supports not (background: color-mix(in srgb, black 50%, white)){
  .copy-toast{
    background: var(--bg-color);
    border-color: rgba(255,255,255,0.12);
  }
  [data-theme="light"] .copy-toast{
    border-color: rgba(0,0,0,0.12);
  }
}

/* ===== Mobile Projects Cards: gradient-only (no full dim) ===== */
@media (hover: none){

  /* Make sure the card provides a positioning context */
  .project-card{ position: relative; overflow: hidden; }

  /* Ensure images are not permanently dimmed on touch devices */
  .project-card img{ filter: none !important; }

  /* Keep overlay container visible, but remove any heavy background */
  .project-overlay{
    opacity: 1 !important;
    background: none !important;
  }

  /* Replace heavy scrim with a bottom-only gradient */
  .project-overlay::after{
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.25) 35%,
      rgba(0,0,0,0.05) 60%,
      transparent 80%
    ) !important;
  }

  /* Keep "Enter" readable without forcing the whole photo darker */
  .view-project-btn{
    color: #fff !important;
    background: none !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.45);
  }
}

.contact-intro {
  margin-top: 10px;
  max-width: 520px;
}
/* ===== V136 conservative polish pass ===== */
:root{
  --motion-fast: 160ms;
  --motion-base: 260ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(.25,1,.35,1);
}
.nav-logo-text,
.icon-btn,
.filter-btn,
.view-project-btn,
.back-nav,
.submit-btn{
  transition-duration: var(--motion-base);
  transition-timing-function: var(--motion-ease);
}
@media (hover:hover) and (pointer:fine){
  .project-hero-image img{ transition: transform var(--motion-slow) var(--motion-ease), opacity var(--motion-base) var(--motion-ease); }
  .project-hero-image:hover img{ transform: scale(1.012); }
  .back-nav:hover{ transform: translateX(-2px); }
}
.project-story{
  max-width: 760px;
  margin: -8px 0 42px;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
}
.project-story p{ margin: 0 0 18px; }
.project-story strong{ color: var(--text-primary); font-weight: 600; }
@media (max-width: 700px){
  .project-story{ margin: -4px 0 34px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}
/* ===== End V136 conservative polish pass ===== */

/* Final logo lock: identical box/text geometry in light and dark mode.
   Theme mode changes only --logo-bg and --logo-fg. */

/* ===== Project lightbox counter + project reveal polish ===== */
.lightbox-counter{
  position: absolute;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10002;
  min-width: 56px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.56);
  color: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-base, 260ms) var(--motion-ease, cubic-bezier(.25,1,.35,1)), transform var(--motion-base, 260ms) var(--motion-ease, cubic-bezier(.25,1,.35,1));
}
.lightbox.open .lightbox-counter:not([hidden]){
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lightbox-counter[hidden]{ display: none !important; }
@media (max-width: 900px){
  .lightbox-counter{
    bottom: calc(18px + env(safe-area-inset-bottom));
    padding: 7px 11px;
    font-size: 0.72rem;
  }
}

.project-page-main{
  animation: projectPageFadeIn var(--motion-base, 260ms) var(--motion-ease, cubic-bezier(.25,1,.35,1)) both;
}
@keyframes projectPageFadeIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .project-page-main{ animation: none !important; }
}
/* ===== End project lightbox counter + project reveal polish ===== */

/* ===== Final theme/logo sync lock =====
   Exact same logo geometry and transition timing in light/dark.
   Theme changes only swap variables; dimensions, centering, padding, and text metrics stay fixed. */
:root {
  --theme-sync-duration: 260ms;
  --theme-sync-ease: cubic-bezier(.25, 1, .35, 1);
  --theme-transition: background-color var(--theme-sync-duration) var(--theme-sync-ease),
    color var(--theme-sync-duration) var(--theme-sync-ease),
    border-color var(--theme-sync-duration) var(--theme-sync-ease),
    fill var(--theme-sync-duration) var(--theme-sync-ease),
    stroke var(--theme-sync-duration) var(--theme-sync-ease),
    box-shadow var(--theme-sync-duration) var(--theme-sync-ease),
    filter var(--theme-sync-duration) var(--theme-sync-ease);
}

/* Keep color/theme swaps synchronized so no individual UI piece visually lags. */
html, body, nav, nav::before, nav::after,
.nav-btn, .nav-link, .icon-btn, .icon-btn svg,
.nav-actions::before, .nav-btn.active::after,
.hero-header h1, .std-divider,
.filter-btn, .filter-btn::before,
.project-card, .project-card *,
.project-summary, .project-kicker, .project-meta, .project-detail,
.gear-card, .gear-card *,
.about-text, .about-text *, .expertise-list, .expertise-list *,
.form-input, .form-textarea,
.site-footer, .site-footer *, .footer-divider,
.lightbox-counter, .copy-toast {
  transition-duration: var(--theme-sync-duration) !important;
  transition-timing-function: var(--theme-sync-ease) !important;
}

.footer-logo-img {
  transition: opacity var(--theme-sync-duration) var(--theme-sync-ease),
    filter var(--theme-sync-duration) var(--theme-sync-ease) !important;
}

@media (max-width: 540px) {
  
}

/* Final: keep Projects page card hover zoom, but disable only the large hero image hover zoom inside China/Southwest sections. */
#china .project-hero-image:hover img,
#china .project-hero-image img:hover,
#southwest .project-hero-image:hover img,
#southwest .project-hero-image img:hover{
  transform: none !important;
}

/* ===== Clean locked logo system ===== */
:root{
  --logo-width:155px;
  --logo-height:34px;
  --logo-font-size:21.6px;
  --logo-radius:2px;
}

.nav-logo-text,
.nav-logo-text:link,
.nav-logo-text:visited{
  display:inline-grid;
  place-items:center;
  box-sizing:border-box;
  width:var(--logo-width);
  height:var(--logo-height);
  min-width:var(--logo-width);
  min-height:var(--logo-height);
  max-width:var(--logo-width);
  max-height:var(--logo-height);
  padding:0;
  margin:0;
  border:0;
  border-radius:var(--logo-radius);
  background:var(--logo-bg);
  color:var(--logo-fg);
  font-family:'Inter',sans-serif;
  font-size:var(--logo-font-size);
  font-weight:900;
  line-height:1;
  letter-spacing:-0.04em;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:middle;
  box-shadow:none;
  font-kerning:normal;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  transition:opacity .25s ease, background-color .25s ease, color .25s ease;
}

.nav-logo-text:hover{opacity:.8;}

.nav-logo-inner{
  display:inline-block;
  line-height:1;
  transform:translateY(.5px);
}

@media (max-width:600px){
  :root{
    --logo-width:140px;
    --logo-height:31px;
    --logo-font-size:19.5px;
  }
}

@media (max-width:390px){
  :root{
    --logo-width:132px;
    --logo-height:29px;
    --logo-font-size:18.4px;
  }
}

/* Disable hover zoom only on individual China/Southwest page header images */
.project-detail-hero img,
.project-hero img,
.project-header img,
.china-hero img,
.southwest-hero img,
body[data-project-page="china"] .project-img-wrapper img,
body[data-project-page="southwest"] .project-img-wrapper img{
  transform:none !important;
}
.project-detail-hero:hover img,
.project-hero:hover img,
.project-header:hover img,
.china-hero:hover img,
.southwest-hero:hover img,
body[data-project-page="china"] .project-img-wrapper:hover img,
body[data-project-page="southwest"] .project-img-wrapper:hover img{
  transform:none !important;
}

/* First-paint stability: prevent font/theme rubberband on refresh/navigation */
html.preload *,
html.preload *::before,
html.preload *::after{
  transition:none !important;
  animation:none !important;
}

html.preload .nav-logo-text{
  width:var(--logo-width,155px);
  height:var(--logo-height,34px);
  min-width:var(--logo-width,155px);
  min-height:var(--logo-height,34px);
  max-width:var(--logo-width,155px);
  max-height:var(--logo-height,34px);
  font-size:var(--logo-font-size,21.6px);
}

html.fonts-loading body{
  font-synthesis:none;
}

/* Hard first-paint guard: prevents refresh/load rubberband from being visible */
html.preload body{
  opacity:0 !important;
  visibility:hidden !important;
}
html:not(.preload) body{
  opacity:1;
  visibility:visible;
}

/* ===== V136: unify mobile swipe hint with counter/toast glass pills ===== */
.swipe-hint{
  background: rgba(12, 12, 12, 0.56) !important;
  color: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
  backdrop-filter: blur(14px) saturate(145%) !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  transform: translateX(-50%) translateY(6px);
}
.swipe-hint.show{ transform: translateX(-50%) translateY(0); }
@media (max-width: 900px){
  .swipe-hint{ bottom: calc(54px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 600px){
  .swipe-hint{ bottom: calc(52px + env(safe-area-inset-bottom)) !important; padding: 7px 12px !important; font-size: 0.72rem !important; }
  .swipe-hint svg{ width: 16px; height: 16px; }
}
/* ===== End V136 polish ===== */

/* ===== V136 mobile nav shrink only: stable nav, tasteful compact state =====
   Keeps the original clean navbar aesthetic. On phone widths only, the nav links
   compress subtly on downward scroll without adding glass/feather experiments. */
@media (max-width:600px){
  :root{
    --nav-compact-duration: 280ms;
    --nav-compact-ease: cubic-bezier(.25, 1, .35, 1);
  }

  nav,
  .nav-container,
  .nav-links,
  .nav-btn,
  .nav-right{
    transition:
      background-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      border-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      padding var(--nav-compact-duration) var(--nav-compact-ease),
      gap var(--nav-compact-duration) var(--nav-compact-ease),
      font-size var(--nav-compact-duration) var(--nav-compact-ease),
      opacity var(--nav-compact-duration) var(--nav-compact-ease) !important;
  }

  /* Keep the logo and action buttons visually anchored; compress only the lower nav footprint. */
  nav.nav-compact .nav-container{
    gap:8px;
    padding-top:12px;
    padding-bottom:8px;
  }

  nav.nav-compact .nav-links{
    gap:1.22rem;
  }

  nav.nav-compact .nav-btn{
    font-size:.84rem;
    padding-top:3px;
    padding-bottom:3px;
    letter-spacing:.004em;
  }

  nav.nav-compact .nav-actions{
    top:12px;
    transform:none;
  }
}

@media (max-width:390px){
  nav.nav-compact .nav-links{ gap:1.05rem; }
  nav.nav-compact .nav-btn{ font-size:.81rem; }
}

@media (prefers-reduced-motion:reduce){
  nav,
  .nav-container,
  .nav-links,
  .nav-btn,
  .nav-right,
  .nav-actions{
    transition:
      background-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      border-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)) !important;
  }
}
/* ===== End V136 mobile nav shrink only ===== */

/* ===== V136 gear formatting + mobile landscape polish =====
   Keeps the stable nav/favicon direction. Refines camera model typography,
   consolidates Chroma filters, and makes phone landscape layouts feel intentional. */
.gear-list > li{
  gap:18px;
  align-items:baseline;
}

.gear-list > li > span:first-child{
  min-width:0;
  line-height:1.35;
}

.gear-list > li > span:last-child{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
  color:var(--text-secondary);
}

.model-lock{
  white-space:nowrap;
  letter-spacing:-0.025em;
}

@media (max-width:900px) and (orientation:landscape) and (max-height:540px){
  main{
    padding-top:88px;
  }

  .hero-header{
    margin-bottom:16px;
  }

  .hero-header h1{
    font-size:clamp(2.35rem, 7vw, 3.15rem);
  }

  .std-divider{
    margin-top:8px;
    margin-bottom:22px;
  }

  .filter-container{
    margin-bottom:22px;
  }

  .nav-container{
    height:64px;
    padding-top:.72rem;
    padding-bottom:.72rem;
  }

  .nav-right{
    gap:1.45rem;
  }

  .nav-links{
    gap:1.35rem;
  }

  .nav-actions{
    padding-left:14px;
    margin-left:10px;
  }

  .projects-grid{
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:44px;
  }

  .project-img-wrapper{
    margin-bottom:14px;
  }

  .gear-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
    margin-top:24px;
    margin-bottom:36px;
  }

  .gear-card{
    padding:20px 18px 22px;
  }

  .gear-card:nth-child(3){
    grid-column:1 / -1;
  }

  .gear-card h3{
    font-size:1.05rem;
    margin-bottom:14px;
    padding-bottom:10px;
  }

  .gear-list li{
    font-size:.86rem;
    margin-bottom:11px;
    gap:12px;
  }

  .about-layout{
    grid-template-columns:minmax(0, 1fr) minmax(210px, .72fr);
    gap:28px;
    align-items:start;
  }

  .about-text{
    max-width:none;
    font-size:.96rem;
    line-height:1.58;
  }

  .about-text p{
    margin-bottom:16px;
  }

  .about-photo{
    justify-content:flex-end;
  }

  .about-photo picture{
    width:min(100%, 280px);
    margin-left:auto;
    margin-right:0;
  }

  .lightbox-img{
    max-height:86dvh;
    max-width:92vw;
  }
}

@media (min-width:760px) and (max-width:900px) and (orientation:landscape) and (max-height:540px){
  html.js .masonry-grid{
    column-count:3;
    column-gap:16px;
  }

  .grid-item{
    margin-bottom:16px;
  }
}

@media (max-width:700px) and (orientation:landscape) and (max-height:540px){
  .gear-wrapper{
    gap:14px;
  }

  .gear-card{
    padding:18px 15px 20px;
  }

  .gear-list li{
    font-size:.82rem;
    gap:8px;
  }

  .gear-list > li > span:last-child{
    font-size:.79rem;
  }

  .nav-links{
    gap:1.12rem;
  }

  .nav-btn{
    font-size:.88rem;
  }
}
/* ===== End V136 gear/landscape polish ===== */

/* ===== V136 Chroma filter responsive label ===== */
.filters-short{
  display:none;
}

.filter-row > span:last-child{
  max-width:58%;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:520px){
  .filter-row .filters-full{
    display:none;
  }
  .filter-row .filters-short{
    display:inline;
  }
}
/* ===== End V136 Chroma filter responsive label ===== */

/* ===== V136 header/nav micro-polish =====
   Same clean navbar direction; tighter spacing, softer hover motion, and a more refined active state. */
@media (min-width: 901px){
  .nav-container{
    height:68px;
    padding-top:.92rem;
    padding-bottom:.92rem;
  }

  .nav-right{
    gap:2.15rem;
  }

  .nav-links{
    gap:1.78rem;
  }

  .nav-actions{
    padding-left:22px;
    gap:13px;
  }
}

.nav-btn,
.nav-link{
  line-height:1;
  letter-spacing:-0.006em;
  transition:
    color 240ms cubic-bezier(.25,1,.35,1),
    opacity 240ms cubic-bezier(.25,1,.35,1),
    transform 240ms cubic-bezier(.25,1,.35,1);
}

.nav-btn:hover,
.nav-link:hover{
  opacity:1;
  transform:translateY(-1px);
}

.nav-btn::after,
.nav-link::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-1px;
  width:18px;
  height:1px;
  background:var(--text-primary);
  opacity:0;
  transform:translateX(-50%) scaleX(.6);
  transform-origin:center;
  transition:
    opacity 240ms cubic-bezier(.25,1,.35,1),
    transform 240ms cubic-bezier(.25,1,.35,1),
    width 240ms cubic-bezier(.25,1,.35,1),
    background-color 240ms cubic-bezier(.25,1,.35,1);
}

.nav-btn:hover::after,
.nav-link:hover::after{
  opacity:.34;
  transform:translateX(-50%) scaleX(1);
}

.nav-btn.active::after{
  left:50%;
  bottom:-1px;
  width:22px;
  opacity:.72;
  transform:translateX(-50%) scaleX(1);
}

.icon-btn{
  height:38px;
  width:38px;
  transition:
    color 240ms cubic-bezier(.25,1,.35,1),
    background-color 240ms cubic-bezier(.25,1,.35,1),
    transform 240ms cubic-bezier(.25,1,.35,1),
    opacity 240ms cubic-bezier(.25,1,.35,1);
}

.icon-btn:hover{
  opacity:1;
  transform:translateY(-1px);
  background:rgba(125,125,125,.085);
}

.icon-btn:active{
  transform:translateY(0) scale(.98);
}

.icon-btn svg{
  width:19px;
  height:19px;
}

@media (max-width: 900px){
  .icon-btn{
    height:38px;
    width:38px;
  }
}

@media (max-width: 600px){
  .nav-links{
    gap:1.42rem;
  }

  .nav-btn::after{
    bottom:-2px;
    width:16px;
  }

  .nav-btn.active::after{
    width:20px;
  }
}
/* ===== End V136 header/nav micro-polish ===== */

/* ===== V136 header/footer hover cleanup =====
   Keeps the nav underlines, softens header icon hover, and removes footer button circles. */
.nav-btn:hover,
.nav-link:hover{
  transform:none;
}

.icon-btn:hover{
  transform:none;
  background:rgba(125,125,125,.055);
}

.footer-socials .icon-btn{
  height:26px;
  width:auto;
  min-width:0;
  padding:0 3px;
  border-radius:0;
  background:transparent !important;
  opacity:.58;
  transform:none;
  transition:
    opacity 220ms cubic-bezier(.25,1,.35,1),
    color 220ms cubic-bezier(.25,1,.35,1);
}

.footer-socials .icon-btn:hover{
  opacity:.92;
  transform:none;
  background:transparent !important;
}

.footer-socials svg{
  height:21px !important;
  width:auto !important;
}

.footer-socials .imdb-svg{
  height:18px !important;
  width:auto !important;
}

.footer-socials .astrobin-icon svg{
  height:20px !important;
}

@media (max-width:600px){
  .footer-socials .icon-btn{
    padding:0 2px;
  }
}
/* ===== End V136 header/footer hover cleanup ===== */

/* ===== V136 header nav hover stability pass =====
   Removes flicker-prone underline growth and uses a calm proportional underline. */
.nav-btn,
.nav-link{
  backface-visibility:hidden;
  transform:none !important;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.nav-btn:hover,
.nav-link:hover{
  transform:none !important;
  opacity:1;
}

.nav-btn::after,
.nav-link::after{
  left:50%;
  bottom:-2px;
  width:68%;
  min-width:20px;
  max-width:42px;
  height:1px;
  opacity:0;
  transform:translateX(-50%) !important;
  transform-origin:center;
  transition:
    opacity 180ms ease,
    background-color 180ms ease;
}

.nav-btn:hover::after,
.nav-link:hover::after{
  opacity:.28;
  transform:translateX(-50%) !important;
}

.nav-btn.active::after,
.nav-link.active::after{
  left:50%;
  bottom:-2px;
  width:68%;
  min-width:20px;
  max-width:42px;
  opacity:.62;
  transform:translateX(-50%) !important;
}

@media (max-width:600px){
  .nav-btn::after,
  .nav-link::after,
  .nav-btn.active::after,
  .nav-link.active::after{
    bottom:-2px;
    width:64%;
    min-width:18px;
    max-width:38px;
  }
}
/* ===== End V136 header nav hover stability pass ===== */

/* ===== V136 nav active underline only =====
   Hover is text-only; underline now functions only as current/active-page indicator. */
.nav-btn:hover::after,
.nav-link:hover::after{
  opacity:0 !important;
}

.nav-btn.active:hover::after,
.nav-link.active:hover::after{
  opacity:.62 !important;
}

.nav-btn:hover,
.nav-link:hover{
  color:var(--text-primary);
  opacity:1;
  transform:none !important;
}
/* ===== End V136 nav active underline only ===== */

/* ===== V136 hybrid mobile nav minimization =====
   Restores the stronger compact size from the earlier shrink version, but keeps
   the smoother/natural compression behavior from V136. The header tightens to the
   smaller footprint without slide, bounce, opacity fade, or hover underline motion. */
@media (max-width:600px){
  :root{
    --nav-compact-duration: 220ms;
    --nav-compact-ease: cubic-bezier(.22,.61,.36,1);
  }

  nav,
  .nav-container,
  .nav-links,
  .nav-btn,
  .nav-right,
  .nav-actions{
    transition:
      background-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      border-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
      padding var(--nav-compact-duration) var(--nav-compact-ease),
      gap var(--nav-compact-duration) var(--nav-compact-ease),
      font-size var(--nav-compact-duration) var(--nav-compact-ease),
      letter-spacing var(--nav-compact-duration) var(--nav-compact-ease) !important;
  }

  .nav-btn,
  .nav-link{
    transform:none !important;
  }

  nav.nav-compact .nav-container{
    gap:8px;
    padding-top:12px;
    padding-bottom:8px;
  }

  nav.nav-compact .nav-links{
    gap:1.22rem;
  }

  nav.nav-compact .nav-btn{
    font-size:.84rem;
    padding-top:3px;
    padding-bottom:3px;
    letter-spacing:.004em;
  }

  nav.nav-compact .nav-actions{
    top:12px;
    transform:none;
  }
}

@media (max-width:390px){
  nav.nav-compact .nav-links{ gap:1.05rem; }
  nav.nav-compact .nav-btn{ font-size:.81rem; }
}
/* ===== End V136 hybrid mobile nav minimization ===== */



/* ===== V136 V136-based balanced glass feather =====
   Keeps the V136 glass-layer fade, but gives it a slightly deeper proportional
   landing zone so the fade resolves just below the header rather than right at
   the header edge. Theme timing stays locked to the global sync variables and
   the mobile compact/shrink behavior is left intact. */
:root{
  --header-glass-extension:10px;
  --header-glass-fade:15px;
}

nav{
  contain:none !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

nav::before{
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:var(--scrollbar-width, 0px);
  top:0;
  bottom:calc(-1 * var(--header-glass-extension));
  pointer-events:none;
  background-color:var(--nav-glass);
  -webkit-backdrop-filter:blur(20px) saturate(108%);
  backdrop-filter:blur(20px) saturate(108%);
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 calc(100% - var(--header-glass-fade)),
    rgba(0,0,0,.92) calc(100% - 11px),
    rgba(0,0,0,.62) calc(100% - 7px),
    rgba(0,0,0,.24) calc(100% - 3px),
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    #000 0%,
    #000 calc(100% - var(--header-glass-fade)),
    rgba(0,0,0,.92) calc(100% - 11px),
    rgba(0,0,0,.62) calc(100% - 7px),
    rgba(0,0,0,.24) calc(100% - 3px),
    rgba(0,0,0,0) 100%);
  transition:
    background-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
    opacity var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
    -webkit-backdrop-filter var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
    backdrop-filter var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1));
}

nav::after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:var(--scrollbar-width, 0px);
  bottom:calc(-1 * var(--header-glass-extension));
  height:calc(var(--header-glass-extension) + 4px);
  pointer-events:none;
  background-color:var(--nav-glass);
  opacity:.14;
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.22) 34%,
    rgba(0,0,0,.08) 68%,
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.22) 34%,
    rgba(0,0,0,.08) 68%,
    rgba(0,0,0,0) 100%);
  transition:
    background-color var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)),
    opacity var(--theme-sync-duration,260ms) var(--theme-sync-ease,cubic-bezier(.25,1,.35,1));
}

.nav-container{
  position:relative;
  z-index:2;
}

@media (max-width:600px){
  :root{
    --header-glass-extension:8px;
    --header-glass-fade:13px;
  }
  nav::before{
    -webkit-backdrop-filter:blur(20px) saturate(106%);
    backdrop-filter:blur(20px) saturate(106%);
    -webkit-mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 calc(100% - var(--header-glass-fade)),
      rgba(0,0,0,.90) calc(100% - 10px),
      rgba(0,0,0,.58) calc(100% - 6px),
      rgba(0,0,0,.20) calc(100% - 2px),
      rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,
      #000 0%,
      #000 calc(100% - var(--header-glass-fade)),
      rgba(0,0,0,.90) calc(100% - 10px),
      rgba(0,0,0,.58) calc(100% - 6px),
      rgba(0,0,0,.20) calc(100% - 2px),
      rgba(0,0,0,0) 100%);
  }
  nav::after{
    opacity:.11;
  }
}
/* ===== End V136 V136-based balanced glass feather ===== */

/* ===== V136 non-header polish: centered icon hit areas =====
   Keeps the later icon-circle alignment fix for the theme/share controls. */
.icon-btn,
button.icon-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  line-height:0 !important;
  text-align:center;
}

.icon-btn svg{
  display:block;
  flex:0 0 auto;
  margin:0;
}

.nav-actions,
.project-meta-row{
  align-items:center;
}

.icon-btn,
.icon-btn svg,
.share-btn,
.share-btn svg,
[data-theme-toggle],
[data-theme-toggle] svg{
  transition-duration:var(--theme-sync-duration,260ms) !important;
  transition-timing-function:var(--theme-sync-ease,cubic-bezier(.25,1,.35,1)) !important;
}
/* ===== End V136 non-header polish ===== */



/* ===== June Gold Master: mobile landscape layout fix =====
   Scope: phone/touch landscape only. Keeps the regular desktop, tablet, and portrait layouts unchanged. */
@media screen and (orientation: landscape) and (max-width: 980px) and (hover: none),
       screen and (orientation: landscape) and (max-width: 980px) and (pointer: coarse),
       screen and (orientation: landscape) and (max-height: 560px) and (hover: none),
       screen and (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  :root{
    --logo-width:140px;
    --logo-height:31px;
    --logo-font-size:19.5px;
  }

  nav{
    padding-top:env(safe-area-inset-top);
    padding-left:0;
    padding-right:var(--scrollbar-width, 0px);
  }

  .nav-container{
    max-width:var(--container-width);
    width:100%;
    height:64px !important;
    min-height:64px !important;
    margin-left:auto;
    margin-right:auto;
    padding-top:8px !important;
    padding-bottom:8px !important;
    padding-left:calc(5% + env(safe-area-inset-left)) !important;
    padding-right:calc(5% + env(safe-area-inset-right)) !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:center !important;
    gap:1rem !important;
  }

  .nav-logo-text,
  .nav-logo-text:link,
  .nav-logo-text:visited{
    flex:0 0 auto !important;
    margin:0 auto 0 0 !important;
    align-self:center !important;
  }

  .nav-right{
    flex:0 1 auto !important;
    width:auto !important;
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:1.05rem !important;
    position:static !important;
  }

  .nav-links{
    width:auto !important;
    flex:0 1 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:1.05rem !important;
    position:static !important;
  }

  .nav-btn{
    font-size:.84rem !important;
    padding-top:3px !important;
    padding-bottom:3px !important;
    white-space:nowrap !important;
  }

  .nav-actions{
    flex:0 0 auto !important;
    position:relative !important;
    top:auto !important;
    right:auto !important;
    height:auto !important;
    margin-left:0 !important;
    padding-left:10px !important;
  }

  .nav-actions::before{
    display:block !important;
  }

  main{
    padding-top:calc(82px + env(safe-area-inset-top)) !important;
    padding-left:calc(5% + env(safe-area-inset-left));
    padding-right:calc(5% + env(safe-area-inset-right));
  }

  .hero-header{
    margin-bottom:14px;
  }

  .hero-header h1{
    font-size:clamp(2.1rem, 6vw, 3rem);
  }

  .std-divider{
    margin-top:8px;
    margin-bottom:20px;
  }

  .filter-container{
    gap:8px;
    margin-bottom:20px;
  }

  .filter-btn{
    padding:8px 18px;
    font-size:.82rem;
  }

  html.js .masonry-grid{
    column-count:3;
    column-gap:12px;
  }

  .grid-item{
    margin-bottom:12px;
  }

  .gear-wrapper{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin-top:20px;
  }

  .gear-card:nth-child(3){
    grid-column:auto;
  }

  .about-layout{
    grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
    gap:22px;
    align-items:start;
  }

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

  .project-hero-image{
    max-height:46svh;
    margin:16px 0 14px;
  }

  .project-description{
    margin-bottom:22px;
  }
}

html.is-mobile-landscape{
  --logo-width:140px;
  --logo-height:31px;
  --logo-font-size:19.5px;
}

html.is-mobile-landscape nav{
  padding-top:env(safe-area-inset-top);
  padding-left:0;
  padding-right:var(--scrollbar-width, 0px);
}

html.is-mobile-landscape .nav-container{
  max-width:var(--container-width);
  width:100%;
  height:64px !important;
  min-height:64px !important;
  margin-left:auto;
  margin-right:auto;
  padding-top:8px !important;
  padding-bottom:8px !important;
  padding-left:calc(5% + env(safe-area-inset-left)) !important;
  padding-right:calc(5% + env(safe-area-inset-right)) !important;
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:1rem !important;
}

html.is-mobile-landscape .nav-logo-text,
html.is-mobile-landscape .nav-logo-text:link,
html.is-mobile-landscape .nav-logo-text:visited{
  flex:0 0 auto !important;
  margin:0 auto 0 0 !important;
  align-self:center !important;
}

html.is-mobile-landscape .nav-right{
  flex:0 1 auto !important;
  width:auto !important;
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:1.05rem !important;
  position:static !important;
}

html.is-mobile-landscape .nav-links{
  width:auto !important;
  flex:0 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:nowrap !important;
  gap:1.05rem !important;
  position:static !important;
}

html.is-mobile-landscape .nav-btn{
  font-size:.84rem !important;
  padding-top:3px !important;
  padding-bottom:3px !important;
  white-space:nowrap !important;
}

html.is-mobile-landscape .nav-actions{
  flex:0 0 auto !important;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  height:auto !important;
  margin-left:0 !important;
  padding-left:10px !important;
}

html.is-mobile-landscape .nav-actions::before{
  display:block !important;
}

html.is-mobile-landscape main{
  padding-top:calc(82px + env(safe-area-inset-top)) !important;
  padding-left:calc(5% + env(safe-area-inset-left));
  padding-right:calc(5% + env(safe-area-inset-right));
}

html.is-mobile-landscape .hero-header{
  margin-bottom:14px;
}

html.is-mobile-landscape .hero-header h1{
  font-size:clamp(2.1rem, 6vw, 3rem);
}

html.is-mobile-landscape .std-divider{
  margin-top:8px;
  margin-bottom:20px;
}

html.is-mobile-landscape .filter-container{
  gap:8px;
  margin-bottom:20px;
}

html.is-mobile-landscape .filter-btn{
  padding:8px 18px;
  font-size:.82rem;
}

html.is-mobile-landscape.js .masonry-grid{
  column-count:3;
  column-gap:12px;
}

html.is-mobile-landscape .grid-item{
  margin-bottom:12px;
}

html.is-mobile-landscape .gear-wrapper{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:20px;
}

html.is-mobile-landscape .gear-card:nth-child(3){
  grid-column:auto;
}

html.is-mobile-landscape .about-layout{
  grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr);
  gap:22px;
  align-items:start;
}

html.is-mobile-landscape .about-photo img{
  width:100%;
}

html.is-mobile-landscape .project-hero-image{
  max-height:46svh;
  margin:16px 0 14px;
}

html.is-mobile-landscape .project-description{
  margin-bottom:22px;
}
/* ===== End June Gold Master mobile landscape layout fix ===== */

/* ===== V136: progressive enhancement / no-JS fallbacks =====
   This block is intentionally additive. With JavaScript enabled, the existing
   tab transitions, lightbox, theme toggle, filters, and responsive masonry
   continue to run normally. Without JavaScript, the portfolio remains usable. */
.nav-btn,
.nav-btn:hover,
.project-card,
.project-card:hover,
.back-nav,
.back-nav:hover,
.grid-link,
.grid-link:hover{
  opacity:1;
}

.nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:none;
  font-family:inherit;
  line-height:inherit;
  text-decoration:none;
  cursor:pointer;
}

.grid-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

html:not(.js) body{
  opacity:1 !important;
  visibility:visible !important;
}

html:not(.js) .section{
  display:block !important;
  opacity:1 !important;
  scroll-margin-top:110px;
}

html:not(.js) .section + .section{
  margin-top:72px;
}

html:not(.js) .masonry-grid{
  column-count:3;
  column-gap:30px;
  width:100%;
  margin:0;
  padding:0;
  opacity:1 !important;
  visibility:visible !important;
}

html:not(.js) .grid-item{
  opacity:1 !important;
  animation:none !important;
  cursor:auto;
}

html:not(.js) .filter-container,
html:not(.js) .share-btn,
html:not(.js) .lightbox,
html:not(.js) .copy-toast{
  display:none !important;
}

html:not(.js) .project-topbar{
  display:none !important;
}

html:not(.js) .nav-actions{
  display:none !important;
}

html:not(.js) .expertise-list i::before{
  content:'✓';
  font-style:normal;
  font-weight:600;
}

html:not(.js) .footer-socials a[aria-label="Instagram"]::before{
  content:'Instagram';
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
}

.no-js-note{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:10001;
  max-width:min(92vw, 520px);
  padding:10px 14px;
  border:1px solid var(--border-color);
  border-radius:999px;
  background:var(--nav-fallback);
  color:var(--text-secondary);
  font-size:.78rem;
  line-height:1.3;
  text-align:center;
}

@media (max-width:900px){
  html:not(.js) .masonry-grid{ column-count:2; column-gap:20px; }
}

@media (max-width:600px){
  html:not(.js) .masonry-grid{ column-count:2; column-gap:12px; }
  html:not(.js) .section + .section{ margin-top:54px; }
  .no-js-note{ bottom:10px; border-radius:14px; }
}
/* ===== End V136 progressive enhancement / no-JS fallbacks ===== */

/* Accessible labels: visually hidden, available to assistive technology. */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}


/* ===== V136: final restrained integrated projects polish ===== */
#work .hero-header{
  margin-bottom:0;
}

#work .std-divider{
  margin-bottom:0;
}

.work-projects{
  width:100%;
  scroll-margin-top:110px;
  padding:14px 0 22px;
  border-bottom:1px solid var(--border-color);
}


.work-projects-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:row;
  align-items:start;
  gap:17px;
}

.work-project-card{
  position:relative;
  display:block;
  height:clamp(182px,14.6vw,210px);
  overflow:hidden;
  border-radius:2px;
  background:var(--surface-color);
  color:#fff;
  text-decoration:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

.work-project-card picture,
.work-project-card img{
  display:block;
  width:100%;
  height:100%;
}

.work-project-card img{
  object-fit:cover;
  transform:none;
  filter:none;
  transition:none;
}

.work-project-card-china img{
  object-position:center 52%;
}

.work-project-card-southwest img{
  object-position:center 57%;
}

.work-project-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.38) 0%,rgba(0,0,0,.10) 34%,rgba(0,0,0,0) 59%);
}

.work-project-title{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:1;
  color:#fff;
  font-size:1.06rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-0.016em;
  text-shadow:0 1px 8px rgba(0,0,0,.24);
}

.work-project-card:focus-visible{
  outline:2px solid var(--text-primary);
  outline-offset:3px;
}

#work .filter-container{
  margin-top:22px;
}

/* Three projects become a balanced three-up row on wide screens.
   Four projects naturally form two restrained rows of two. */
@media (min-width:1180px){
  .work-projects-grid:has(> .work-project-card:nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .work-projects-grid:has(> .work-project-card:nth-child(3):last-child) .work-project-card{
    height:clamp(174px,12.6vw,198px);
  }
}

@media (max-width:900px){
  .work-projects-grid{
    gap:14px;
  }

  .work-project-card{
    height:clamp(168px,22vw,198px);
  }
}

/* Wider phones, landscape phones, and tablets retain the two-card row. */
@media (min-width:600px) and (max-width:900px){
  .work-project-title{
    left:15px;
    bottom:13px;
    font-size:1.02rem;
  }
}

/* Portrait phones stack the projects so neither image becomes a thumbnail. */
@media (max-width:599px){
  .work-projects{
    scroll-margin-top:145px;
    padding:12px 0 18px;
  }


  .work-projects-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .work-project-card{
    height:clamp(136px,36vw,154px);
  }

  .work-project-title{
    left:14px;
    bottom:12px;
    font-size:1rem;
  }

  #work .filter-container{
    margin-top:18px;
  }
}



/* ===== V136: image-only project-card hover ===== */
.work-project-card{
  opacity:1;
}

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

  .work-project-card img{
    transition:opacity 220ms cubic-bezier(.25,1,.35,1);
  }

  .work-project-card:hover img{
    opacity:.90;
  }

  .work-project-card:hover .work-project-title,
  .work-project-card:hover::after{
    opacity:1;
  }
}

/* ===== V136: label-free integrated projects and matched action sizing ===== */


/* ===== V136: restrained desktop project rhythm + About-integrated Equipment ===== */
@media (min-width:901px){
  .work-project-card{
    height:clamp(173px,13.9vw,200px);
  }

  .work-projects{
    padding-bottom:16px;
  }

  #work .filter-container{
    margin-top:16px;
  }

  .work-projects-grid:has(> .work-project-card:nth-child(3):last-child) .work-project-card{
    height:clamp(165px,12vw,188px);
  }
}

.about-text .expertise-list{
  margin-bottom:0;
}

.equipment-section{
  scroll-margin-top:120px;
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid var(--border-color);
}

.equipment-section h2{
  margin:0 0 24px;
  color:var(--text-primary);
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.01em;
}

.equipment-groups{
  display:grid;
  gap:26px;
}

.equipment-group h3{
  margin:0 0 8px;
  color:var(--text-primary);
  font-size:.9rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.01em;
}

.equipment-list{
  list-style:none;
  margin:0;
  padding:0;
}

.equipment-list li{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:20px;
  padding:8px 0;
  border-bottom:1px solid color-mix(in srgb,var(--border-color) 72%,transparent);
  font-size:.92rem;
  line-height:1.42;
}

.equipment-list li:last-child{
  border-bottom:0;
}

.equipment-name{
  min-width:0;
  color:var(--text-primary);
  font-weight:500;
}

.equipment-detail{
  color:var(--text-secondary);
  font-size:.84rem;
  text-align:right;
  white-space:nowrap;
}

.equipment-section + .std-divider{
  margin-top:38px;
}

@media (max-width:600px){
  .equipment-section{
    scroll-margin-top:150px;
    margin-top:34px;
  }

  .equipment-groups{
    gap:24px;
  }

  .equipment-list li{
    gap:14px;
    font-size:.9rem;
  }

  .equipment-detail{
    font-size:.8rem;
  }
}
/* ===== End V136 ===== */


/* ===== V136: balanced About composition + restrained interaction alignment ===== */
/* Pull the active-page underline one pixel closer to the label. */
.nav-btn.active::after,
.nav-link.active::after{
  bottom:-1px;
}

/* Project titles echo the active-nav underline without adding motion. */
.work-project-title::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-5px;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity 180ms ease;
}

@media (hover:hover) and (pointer:fine){
  .work-project-card:hover .work-project-title::after{
    opacity:.58;
  }
}

.work-project-card:focus-visible .work-project-title::after{
  opacity:.58;
}

/* Keep the introduction as the original balanced two-column composition. */
.about-intro-layout{
  align-items:start;
}

.about-subheading{
  margin-top:40px;
  margin-bottom:20px !important;
  padding-top:20px;
  border-top:1px solid var(--border-color);
}

/* Equipment now spans the page beneath the introduction. */
.equipment-section{
  margin-top:58px;
  padding-top:22px;
}

.equipment-section h2,
.contact-section h2{
  margin:0;
  color:var(--text-primary);
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.01em;
}

.equipment-section h2{
  margin-bottom:28px;
}

.equipment-groups{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(34px,4.6vw,70px);
}

.equipment-group h3{
  margin-bottom:13px;
  font-size:.88rem;
  letter-spacing:.015em;
}

.equipment-list li{
  display:block;
  padding:0;
  margin:0 0 10px;
  border:0;
  font-size:.91rem;
  line-height:1.48;
}

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

.equipment-name,
.equipment-detail{
  display:inline;
}

.equipment-name{
  font-weight:500;
}

.equipment-detail{
  font-size:.84rem;
  text-align:left;
  white-space:normal;
}

.equipment-detail::before{
  content:" · ";
  color:var(--text-secondary);
}

/* Contact becomes a distinct, quiet full-width section. */
.contact-section{
  scroll-margin-top:120px;
  display:grid;
  grid-template-columns:minmax(170px,.42fr) minmax(0,1fr);
  gap:clamp(36px,5vw,78px);
  align-items:start;
  margin-top:58px;
  padding-top:22px;
  border-top:1px solid var(--border-color);
}

.contact-copy p{
  margin:10px 0 0;
  color:var(--text-secondary);
  font-size:.94rem;
  line-height:1.5;
}

.contact-section .contact-form{
  width:100%;
  max-width:760px;
  margin-top:0;
}

@media (max-width:900px){
  .equipment-section{
    margin-top:44px;
  }

  .equipment-groups{
    grid-template-columns:1fr;
    gap:28px;
  }

  .contact-section{
    grid-template-columns:1fr;
    gap:22px;
    margin-top:44px;
  }

  .contact-section .contact-form{
    max-width:none;
  }
}

@media (max-width:600px){
  .nav-btn.active::after,
  .nav-link.active::after{
    bottom:-1px;
  }

  .about-subheading{
    margin-top:34px;
  }

  .equipment-section,
  .contact-section{
    margin-top:38px;
    padding-top:20px;
  }

  .equipment-section h2{
    margin-bottom:24px;
  }

  .equipment-list li{
    margin-bottom:9px;
    font-size:.9rem;
  }

  .equipment-detail{
    font-size:.81rem;
  }
}
/* ===== End V136 ===== */

/* ===== V136: refined hierarchy, image-edge consistency, and complete theme sync ===== */
:root{
  --about-section-heading-size:1.1rem;
}

@media (min-width:1025px) and (max-width:1600px), (max-width:1024px){
  :root{
    --about-section-heading-size:1rem;
  }
}

/* Match the project-title underline to the proportional active-nav underline. */
.work-project-title::after{
  left:50%;
  right:auto;
  width:68%;
  min-width:18px;
  max-width:38px;
  transform:translateX(-50%);
}

/* Give the portrait the same restrained two-pixel edge used by the photo grid. */
.about-photo{
  border-radius:2px;
  background-color:var(--surface-color);
}

.about-photo img{
  border-radius:0;
}

/* Establish a quiet two-level hierarchy shared by About, Equipment, and Contact. */
.about-subheading,
.equipment-section h2,
.contact-section h2{
  color:var(--text-primary);
  font-size:var(--about-section-heading-size);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-0.012em;
}

.about-subheading strong{
  font:inherit;
  color:inherit;
}

.equipment-section h2{
  margin-bottom:30px;
}

.equipment-groups{
  gap:clamp(34px,4.2vw,62px);
}

.equipment-group h3{
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid var(--border-color);
  color:var(--text-primary);
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-0.01em;
}

.equipment-list li{
  margin-bottom:11px;
  line-height:1.5;
}

.equipment-name{
  letter-spacing:-0.006em;
}

.equipment-detail{
  font-size:.82rem;
}

/* Align Contact to the same three-column rhythm as Equipment.
   The heading occupies one column and the form spans the remaining two. */
.contact-section{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(34px,4.2vw,62px);
}

.contact-copy{
  grid-column:1;
  max-width:240px;
}

.contact-section .contact-form{
  grid-column:2 / 4;
  max-width:none;
}

/* Explicitly synchronize every element introduced by the integrated About layout. */
.about-photo,
.about-photo img,
.work-project-title,
.work-project-title::after,
.equipment-section,
.equipment-section h2,
.equipment-group h3,
.equipment-list li,
.equipment-name,
.equipment-detail,
.contact-section,
.contact-copy,
.contact-section h2,
.contact-copy p,
.contact-section .contact-form,
.contact-section .form-input,
.contact-section .form-textarea,
.contact-section .submit-btn{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.equipment-section,
.contact-section,
.equipment-group h3{
  transition-property:color,border-color,background-color;
}

.equipment-section h2,
.equipment-name,
.contact-section h2{
  transition-property:color;
}

.equipment-detail,
.contact-copy p{
  transition-property:color;
}

.about-photo{
  transition-property:background-color;
}

@media (max-width:900px){
  .contact-section{
    grid-template-columns:1fr;
    gap:22px;
  }

  .contact-copy,
  .contact-section .contact-form{
    grid-column:auto;
    max-width:none;
  }
}

@media (max-width:600px){
  .equipment-section h2{
    margin-bottom:26px;
  }

  .equipment-group h3{
    margin-bottom:12px;
    padding-bottom:9px;
  }
}
/* ===== End V136 ===== */



/* ===== V136: final About balance and proportional interaction refinement ===== */
:root{
  --about-major-heading-size:clamp(1.28rem,1.42vw,1.44rem);
}

/* The project underline is intentionally a little shorter than the title,
   echoing the visual proportion of the active navigation indicator. */
.work-project-title::after{
  width:60%;
  min-width:16px;
  max-width:32px;
}

/* Remove the full-column surface behind the portrait. The radius lives on
   the photograph itself, so its visible edge matches the gallery images. */
.about-photo{
  border-radius:0;
  overflow:visible;
  background:transparent;
  -webkit-mask-image:none;
  mask-image:none;
}

.about-photo img{
  border-radius:2px;
}

/* Fields of Expertise remains an internal subheading. Equipment and Contact
   become true section headings: larger, but still clearly below About. */
.about-subheading{
  font-size:var(--about-section-heading-size);
}

.equipment-section h2,
.contact-section > h2{
  color:var(--text-primary);
  font-size:var(--about-major-heading-size);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-0.018em;
}

.equipment-section h2{
  margin-bottom:30px;
}

/* Category titles remain the intermediate level between the section heading
   and individual equipment entries. */
.equipment-group h3{
  font-size:1rem;
  font-weight:600;
}

/* Contact keeps the restrained copy-left/form-right composition, but the
   heading now spans the section so the form no longer competes with it. */
.contact-section{
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(34px,4.2vw,62px);
  row-gap:20px;
}

.contact-section > h2{
  grid-column:1 / -1;
  margin:0;
}

.contact-copy{
  grid-column:1;
  max-width:250px;
}

.contact-copy p{
  margin:0;
}

.contact-section .contact-form{
  grid-column:2 / 4;
  max-width:none;
}

/* Keep theme changes synchronized for every element introduced or moved in
   the refined About composition. */
.about-subheading,
.equipment-section h2,
.contact-section > h2,
.equipment-group h3,
.equipment-list li,
.equipment-name,
.equipment-detail,
.contact-copy,
.contact-copy p,
.contact-section .form-input,
.contact-section .form-textarea,
.contact-section .form-input::placeholder,
.contact-section .form-textarea::placeholder,
.contact-section .submit-btn{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.about-subheading,
.equipment-section h2,
.contact-section > h2,
.equipment-group h3,
.equipment-name,
.equipment-detail,
.contact-copy p,
.contact-section .form-input::placeholder,
.contact-section .form-textarea::placeholder{
  transition-property:color,border-color;
}

@media (max-width:1024px){
  :root{
    --about-major-heading-size:1.24rem;
  }
}

@media (max-width:900px){
  .contact-section{
    grid-template-columns:1fr;
    row-gap:20px;
  }

  .contact-section > h2,
  .contact-copy,
  .contact-section .contact-form{
    grid-column:1;
    max-width:none;
  }
}

@media (max-width:600px){
  :root{
    --about-major-heading-size:1.16rem;
  }

  .contact-section{
    row-gap:18px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: restrained About hierarchy, alignment, and interaction refinement ===== */
:root{
  --about-secondary-heading-size:clamp(1.46rem,1.72vw,1.72rem);
}

/* Match the active navigation indicator more faithfully: proportional to each
   project title, centered, and allowed enough width for Southwest. */
.work-project-title::after{
  left:50%;
  right:auto;
  width:68%;
  min-width:20px;
  max-width:42px;
  transform:translateX(-50%);
}

/* The introduction becomes one editorial row. The short divider belongs to
   the text column and rests on the same baseline as the portrait bottom. */
.about-intro-layout{
  align-items:stretch;
}

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

.about-subheading{
  margin:38px 0 18px !important;
  padding-top:0;
  border-top:0;
}

.about-text::after{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-top:auto;
  background-color:var(--border-color);
}

/* Expertise, Equipment, and Contact share one restrained internal hierarchy:
   Inter bold, editorial punctuation, and clearly smaller than About. */
.about-subheading,
.equipment-section h2,
.contact-section > h2{
  color:var(--text-primary);
  font-size:var(--about-secondary-heading-size);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.034em;
}

/* The text-column divider replaces the full-width divider above Equipment. */
.equipment-section{
  margin-top:36px;
  padding-top:0;
  border-top:0;
}

.equipment-section h2{
  margin-bottom:28px;
}

/* Contact returns to a calm side-by-side composition. Its title aligns with
   the first form field instead of floating above the entire section. */
.contact-section{
  grid-template-columns:minmax(190px,.42fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:clamp(42px,5vw,78px);
  row-gap:12px;
  align-items:start;
}

.contact-section > h2{
  grid-column:1;
  grid-row:1;
  align-self:start;
  margin:0;
}

.contact-copy{
  grid-column:1;
  grid-row:2;
  max-width:250px;
}

.contact-section .contact-form{
  grid-column:2;
  grid-row:1 / span 2;
  max-width:760px;
}

/* Keep every newly aligned surface synchronized with theme changes. */
.about-text::after,
.about-subheading,
.equipment-section,
.equipment-section h2,
.contact-section,
.contact-section > h2,
.contact-copy,
.contact-copy p,
.contact-section .contact-form,
.contact-section .form-input,
.contact-section .form-textarea,
.contact-section .submit-btn,
.work-project-title::after{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.about-text::after{
  transition-property:background-color;
}

.equipment-section,
.contact-section{
  transition-property:border-color,background-color;
}

@media (max-width:1024px){
  :root{
    --about-secondary-heading-size:1.42rem;
  }
}

@media (max-width:900px){
  /* Once the portrait stacks, restore a conventional full-width divider so
     the separation remains logical rather than appearing above the image. */
  .about-intro-layout{
    align-items:start;
  }

  .about-text{
    display:block;
  }

  .about-text::after{
    display:none;
  }

  .equipment-section{
    margin-top:42px;
    padding-top:20px;
    border-top:1px solid var(--border-color);
  }

  .contact-section{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    row-gap:18px;
  }

  .contact-section > h2,
  .contact-copy,
  .contact-section .contact-form{
    grid-column:1;
    grid-row:auto;
    max-width:none;
  }
}

@media (max-width:600px){
  :root{
    --about-secondary-heading-size:1.32rem;
  }

  .about-subheading{
    margin-top:32px !important;
  }

  .equipment-section{
    margin-top:38px;
  }
}
/* ===== End V136 ===== */


/* ===== V136: quieter section separation and refined equipment typography ===== */
/* Let the headings and spacing define the About page sections. Removing the
   structural rules keeps the page editorial rather than panelled. */
.about-text::after{
  display:none !important;
}

.equipment-section{
  margin-top:clamp(58px,6vw,78px);
  padding-top:0;
  border-top:0;
}

.contact-section{
  margin-top:clamp(64px,6.6vw,86px);
  padding-top:0;
  border-top:0;
}

/* Project-title indicators now nearly span the words. Both cards use the same
   proportion; removing the old cap allows Southwest to read correctly. */
.work-project-title::after{
  width:88%;
  min-width:0;
  max-width:none;
}

/* Category headings gain only a small increase in scale. A short rule creates
   separation without turning each equipment column into a boxed list. */
.equipment-group h3{
  position:relative;
  margin:0 0 16px;
  padding:0 0 12px;
  border-bottom:0;
  font-size:clamp(1.03rem,1.08vw,1.08rem);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.012em;
}

.equipment-group h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:1px;
  background-color:var(--border-color);
}

/* Keep equipment descriptions inline. Matching the entry size and using color
   rather than scale avoids the fragmented, spec-sheet appearance of smaller
   right-aligned metadata. The middle dot remains the quietest separator. */
.equipment-list li{
  font-size:.92rem;
}

.equipment-detail{
  color:var(--text-secondary);
  font-size:inherit;
  line-height:inherit;
  text-align:left;
  white-space:normal;
}

.equipment-detail::before{
  content:" · ";
  color:var(--text-secondary);
}

/* The availability line remains directly beneath Contact., while the title
   stays aligned to the first form field. */
.contact-copy{
  align-self:start;
}

.contact-copy p{
  margin:0;
}

/* Synchronize every revised line and typographic element with theme changes. */
.equipment-group h3,
.equipment-group h3::after,
.equipment-list li,
.equipment-name,
.equipment-detail,
.equipment-detail::before,
.contact-section,
.contact-section > h2,
.contact-copy,
.contact-copy p,
.work-project-title::after{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.equipment-group h3::after{
  transition-property:background-color;
}

.equipment-group h3,
.equipment-name,
.equipment-detail,
.equipment-detail::before,
.contact-section > h2,
.contact-copy p{
  transition-property:color,border-color;
}

@media (max-width:900px){
  .equipment-section{
    margin-top:52px;
    padding-top:0;
    border-top:0;
  }

  .contact-section{
    margin-top:56px;
    padding-top:0;
    border-top:0;
  }
}

@media (max-width:600px){
  .equipment-section{
    margin-top:46px;
  }

  .contact-section{
    margin-top:50px;
  }

  .equipment-group h3{
    font-size:1.03rem;
  }
}
/* ===== End V136 ===== */


/* ===== V136: balanced About rhythm and unified underline spacing ===== */
/* The active navigation indicator now sits at the same distance from its label
   as the project-title indicators. */
.nav-btn.active::after,
.nav-link.active::after{
  bottom:-5px;
}

/* Preserve the restrained China indicator while allowing the longer Southwest
   title to read as an almost full-width optical underline. */
.work-project-title::after{
  bottom:-5px;
  width:88%;
}

.work-project-card:nth-child(2) .work-project-title::after{
  width:96%;
}

/* Balance Expertise between the introductory copy and the Equipment section.
   The two flexible rows account for the portrait height and the section gap,
   so Expertise no longer feels attached to either neighboring block. */
@media (min-width:901px){
  .about-intro-layout{
    align-items:stretch;
  }

  .about-text{
    display:grid;
    grid-template-rows:auto minmax(34px,1fr) auto minmax(18px,.55fr);
    align-self:stretch;
  }

  .about-copy{
    grid-row:1;
  }

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

  .expertise-block{
    grid-row:3;
  }

  .about-subheading{
    margin:0 0 18px !important;
  }

  .equipment-section{
    margin-top:clamp(46px,4.8vw,60px);
  }
}

/* Category rules follow the actual title width, with a small optical extension
   rather than a fixed generic line. */
.equipment-group h3{
  display:inline-block;
  width:max-content;
  max-width:100%;
}

.equipment-group h3::after{
  width:calc(100% + 10px);
  max-width:calc(100vw - 40px);
}

/* Keep Contact and its availability line as one clear text block, aligned with
   the top of the form. */
.contact-section{
  grid-template-columns:minmax(190px,.42fr) minmax(0,1fr);
  grid-template-rows:auto;
  column-gap:clamp(42px,5vw,78px);
  row-gap:0;
  align-items:start;
}

.contact-copy{
  grid-column:1;
  grid-row:1;
  max-width:250px;
}

.contact-copy h2{
  margin:0 0 7px;
  color:var(--text-primary);
  font-size:var(--about-secondary-heading-size);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.034em;
}

.contact-copy p{
  margin:0;
}

.contact-section .contact-form{
  grid-column:2;
  grid-row:1;
  max-width:760px;
}

/* Theme synchronization for the revised hierarchy and line work. */
.about-copy,
.about-copy p,
.expertise-block,
.expertise-block .about-subheading,
.expertise-block .expertise-list,
.equipment-group h3,
.equipment-group h3::after,
.contact-copy,
.contact-copy h2,
.contact-copy p,
.nav-btn.active::after,
.nav-link.active::after,
.work-project-title::after{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.equipment-group h3::after,
.nav-btn.active::after,
.nav-link.active::after,
.work-project-title::after{
  transition-property:background-color,opacity;
}

@media (max-width:900px){
  .about-text{
    display:block;
  }

  .about-copy p:last-child{
    margin-bottom:20px;
  }

  .expertise-block{
    margin-top:36px;
  }

  .about-subheading{
    margin:0 0 18px !important;
  }

  .equipment-section{
    margin-top:44px;
  }

  .contact-section{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    row-gap:20px;
  }

  .contact-copy,
  .contact-section .contact-form{
    grid-column:1;
    grid-row:auto;
    max-width:none;
  }
}

@media (max-width:600px){
  .nav-btn.active::after,
  .nav-link.active::after{
    bottom:-5px;
  }

  .expertise-block{
    margin-top:32px;
  }

  .equipment-section{
    margin-top:40px;
  }

  .equipment-group h3::after{
    width:calc(100% + 8px);
  }
}
/* ===== End V136 ===== */


/* ===== V136: final header alignment, work-top behavior support, and filter rhythm ===== */
/* Normal navigation labels have 5px bottom padding. Placing the indicator at
   the padding edge creates the same visible gap as the project-title underline. */
.nav-btn.active::after,
.nav-link.active::after{
  bottom:0;
}

/* Compact phone and phone-landscape labels use 3px bottom padding, so a 2px
   offset preserves the same five-pixel optical distance. */
@media (max-width:600px){
  nav.nav-compact .nav-btn.active::after,
  nav.nav-compact .nav-link.active::after{
    bottom:-2px;
  }
}

@media screen and (orientation:landscape) and (max-width:980px) and (hover:none),
       screen and (orientation:landscape) and (max-width:980px) and (pointer:coarse),
       screen and (orientation:landscape) and (max-height:560px) and (hover:none),
       screen and (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .nav-btn.active::after,
  .nav-link.active::after{
    bottom:-2px;
  }
}

html.is-mobile-landscape .nav-btn.active::after,
html.is-mobile-landscape .nav-link.active::after{
  bottom:-2px;
}

/* Center the filter row between the project divider and the gallery. The
   spacing is intentionally equal; no other filter styling changes. */
#work .filter-container{
  margin-top:22px;
  margin-bottom:22px;
}

@media (max-width:900px){
  #work .filter-container{
    margin-top:20px;
    margin-bottom:20px;
  }
}

@media (max-width:599px){
  #work .filter-container{
    margin-top:18px;
    margin-bottom:18px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: smooth logo return and final equipment underline refinement ===== */
/* The equipment category rules now use the same restrained visual language as
   the active navigation and project-title indicators: a fine half-pixel rule, proportional,
   centered beneath the word, and slightly muted. */
.equipment-group h3{
  margin-bottom:21px;
  padding-bottom:7px;
}

.equipment-group h3::after{
  left:50%;
  right:auto;
  bottom:0;
  width:92%;
  min-width:20px;
  max-width:none;
  height:.5px;
  background-color:currentColor;
  opacity:.55;
  transform:translateX(-50%);
}

/* Theme-dependent lines and surfaces transition together. This explicitly
   includes the project/filter divider, which previously changed a fraction
   ahead of the surrounding controls. */
html,
body,
nav,
.hero-header h1,
.std-divider,
.work-projects,
.filter-btn,
.grid-item,
.about-text,
.about-text p,
.about-text strong,
.about-subheading,
.expertise-list,
.expertise-list li svg,
.about-photo,
.equipment-section,
.equipment-section h2,
.equipment-group h3,
.equipment-group h3::after,
.equipment-name,
.equipment-detail,
.equipment-detail::before,
.contact-section,
.contact-copy h2,
.contact-copy p,
.form-input,
.form-textarea,
.form-input::placeholder,
.form-textarea::placeholder,
.submit-btn,
.site-footer,
.footer-divider,
.nav-actions::before,
.icon-btn,
.icon-btn svg,
.footer-logo-img,
.footer-socials svg,
.footer-socials svg path{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.std-divider,
.footer-divider,
.nav-actions::before{
  transition-property:background-color,opacity !important;
}

.work-projects{
  transition-property:border-color,background-color !important;
}

.filter-btn,
.form-input,
.form-textarea,
.submit-btn{
  transition-property:background-color,color,border-color,box-shadow,opacity !important;
}

.grid-item,
.about-photo,
.equipment-section,
.contact-section{
  transition-property:background-color,border-color,color !important;
}

.hero-header h1,
.about-text,
.about-text p,
.about-text strong,
.about-subheading,
.expertise-list,
.expertise-list li svg,
.equipment-section h2,
.equipment-group h3,
.equipment-name,
.equipment-detail,
.equipment-detail::before,
.contact-copy h2,
.contact-copy p,
.form-input::placeholder,
.form-textarea::placeholder,
.site-footer,
.icon-btn,
.icon-btn svg,
.footer-socials svg,
.footer-socials svg path{
  transition-property:color,fill,stroke,border-color !important;
}

.equipment-group h3::after{
  transition-property:background-color,opacity !important;
}

.footer-logo-img{
  transition-property:filter,opacity !important;
}

@media (max-width:600px){
  .equipment-group h3{
    margin-bottom:19px;
    padding-bottom:7px;
  }
}
/* ===== End V136 ===== */


/* ===== V136: unified About rhythm and divider-matched equipment rules ===== */
:root{
  --about-major-section-gap:clamp(54px,5vw,68px);
  --about-heading-content-gap:26px;
  --about-intro-column-gap:clamp(44px,5vw,68px);
}

/* Use the exact same theme-aware color as the site's standard divider lines. */
.equipment-group h3::after{
  background-color:var(--border-color);
  opacity:1;
}

/* Normalize the introduction without changing its approved two-column design. */
.about-intro-layout{
  gap:var(--about-intro-column-gap);
  align-items:stretch;
}

.about-text{
  display:flex;
  flex-direction:column;
  align-self:stretch;
}

.about-copy p{
  margin-bottom:18px;
}

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

.expertise-block{
  margin-top:auto;
  padding-top:clamp(34px,3.4vw,46px);
}

.about-subheading{
  margin:0 0 18px !important;
}

.expertise-list{
  margin-bottom:0;
  row-gap:11px;
  column-gap:22px;
}

/* Equipment and Contact now share the same major-section spacing and the same
   heading-to-content rhythm. */
.equipment-section,
.contact-section{
  margin-top:var(--about-major-section-gap);
  padding-top:0;
  border-top:0;
}

.equipment-section h2,
.contact-section > h2{
  margin:0 0 var(--about-heading-content-gap);
}

.equipment-groups{
  align-items:start;
}

.equipment-group h3{
  margin-bottom:20px;
}

.contact-section{
  display:block;
}

.contact-body{
  display:grid;
  grid-template-columns:minmax(190px,.42fr) minmax(0,1fr);
  gap:clamp(42px,5vw,78px);
  align-items:start;
}

.contact-copy{
  max-width:250px;
}

.contact-copy p{
  margin:0;
}

.contact-section .contact-form{
  width:100%;
  max-width:760px;
  margin:0;
}

/* Keep all revised About spacing and divider elements synchronized on theme change. */
.equipment-group h3::after,
.contact-body,
.contact-section > h2,
.contact-copy,
.contact-copy p{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.equipment-group h3::after{
  transition-property:background-color,opacity !important;
}

.contact-section > h2,
.contact-copy p{
  transition-property:color,border-color !important;
}

@media (max-width:900px){
  :root{
    --about-major-section-gap:48px;
    --about-heading-content-gap:22px;
    --about-intro-column-gap:30px;
  }

  .about-text{
    display:block;
  }

  .expertise-block{
    margin-top:34px;
    padding-top:0;
  }

  .contact-body{
    grid-template-columns:1fr;
    gap:20px;
  }

  .contact-copy,
  .contact-section .contact-form{
    max-width:none;
  }
}

@media (max-width:600px){
  :root{
    --about-major-section-gap:42px;
    --about-heading-content-gap:20px;
  }

  .about-copy p{
    margin-bottom:17px;
  }

  .expertise-block{
    margin-top:30px;
  }

  .about-subheading{
    margin-bottom:17px !important;
  }

  .equipment-group h3{
    margin-bottom:18px;
  }

  .contact-body{
    gap:18px;
  }
}
/* ===== End V136 ===== */


/* ===== V136: restored mobile nav, closer active underline, touch-safe interactions, balanced Contact ===== */
/* Keep the original V136 compact-nav geometry and scroll behavior. These rules only
   move the active indicator slightly closer to its label. */
.nav-btn.active::after,
.nav-link.active::after{
  bottom:2px;
}

@media (max-width:600px){
  nav.nav-compact .nav-btn.active::after,
  nav.nav-compact .nav-link.active::after{
    bottom:0;
  }
}

@media screen and (orientation:landscape) and (max-width:980px) and (hover:none),
       screen and (orientation:landscape) and (max-width:980px) and (pointer:coarse),
       screen and (orientation:landscape) and (max-height:560px) and (hover:none),
       screen and (orientation:landscape) and (max-height:560px) and (pointer:coarse){
  .nav-btn.active::after,
  .nav-link.active::after{
    bottom:0;
  }
}

html.is-mobile-landscape .nav-btn.active::after,
html.is-mobile-landscape .nav-link.active::after{
  bottom:0;
}

/* Touch browsers can retain :hover while a finger scrolls across controls. Neutralize
   those hover-only states on coarse pointers; actual filter selection still uses .active. */
@media (hover:none), (pointer:coarse){
  a:hover{
    opacity:1;
  }

  .filter-btn:hover:not(.active){
    background-color:transparent;
    color:var(--text-secondary);
    border-color:var(--border-color);
    box-shadow:none;
    transform:none;
  }

  .work-project-card:hover,
  .project-card:hover{
    opacity:1;
  }

  .work-project-card:hover img,
  .project-card:hover img{
    opacity:1;
  }
}

/* Desktop: treat Contact as one balanced two-column composition instead of a heading
   spanning above an undersized copy column and an oversized form. */
.contact-section{
  display:block;
}

.contact-body{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(420px,1.28fr);
  gap:clamp(56px,7vw,104px);
  align-items:start;
}

.contact-intro{
  min-width:0;
  padding-top:2px;
}

.contact-intro h2{
  margin:0 0 22px;
}

.contact-intro p{
  max-width:270px;
  margin:0;
  color:var(--text-secondary);
  line-height:1.65;
}

.contact-section .contact-form{
  width:100%;
  max-width:640px;
  margin:0;
  justify-self:start;
}

.contact-intro,
.contact-intro h2,
.contact-intro p{
  transition-duration:var(--theme-sync-duration) !important;
  transition-timing-function:var(--theme-sync-ease) !important;
}

.contact-intro h2,
.contact-intro p{
  transition-property:color,border-color !important;
}

@media (max-width:900px){
  .contact-body{
    grid-template-columns:1fr;
    gap:22px;
  }

  .contact-intro{
    padding-top:0;
  }

  .contact-intro h2{
    margin-bottom:14px;
  }

  .contact-intro p,
  .contact-section .contact-form{
    max-width:none;
  }
}

@media (max-width:600px){
  .contact-body{
    gap:20px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: unified About headings, matched footer spacing, native scroll containment ===== */
/* Use one typography contract for every secondary About heading. Context controls only spacing. */
.about-section-title{
  margin:0;
  color:var(--text-primary);
  font-size:var(--about-section-heading-size);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-0.012em;
}

.expertise-block > .about-section-title{
  margin-bottom:18px !important;
}

.equipment-section > .about-section-title{
  margin-bottom:30px;
}

.contact-intro > .about-section-title{
  margin-bottom:18px;
}

/* Work carries a small content-end buffer before the shared footer. Match that exact
   relationship on About so the footer never feels closer to the Contact form. */
.contact-section{
  padding-bottom:16px;
}

/* Stop scroll chaining/bottom bounce where the browser supports it, without applying
   touch-action or fixed-body techniques that can interfere with native page scrolling. */
html,
body{
  overscroll-behavior-y:none;
}

@media (max-width:900px){
  .equipment-section > .about-section-title{
    margin-bottom:26px;
  }

  .contact-intro > .about-section-title{
    margin-bottom:14px;
  }

  .contact-section{
    padding-bottom:22px;
  }
}

@media (max-width:599px){
  .contact-section{
    padding-bottom:18px;
  }
}
/* ===== End V136 ===== */


/* ===== V136: secondary About titles and matched content rhythm ===== */
:root{
  --about-secondary-title-size:clamp(1.34rem,1.55vw,1.58rem);
  --about-secondary-title-gap:20px;
}

/* Expertise., Equipment., and Contact. are deliberately smaller echoes of About. */
.about-section-title{
  margin:0;
  color:var(--text-primary);
  font-family:'Inter',sans-serif;
  font-size:var(--about-secondary-title-size);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.04em;
}

/* Use one exact heading-to-content interval throughout the secondary About sections. */
.expertise-block > .about-section-title,
.equipment-section > .about-section-title,
.contact-intro > .about-section-title{
  margin:0 0 var(--about-secondary-title-gap) !important;
}

@media (max-width:900px){
  :root{
    --about-secondary-title-size:1.34rem;
    --about-secondary-title-gap:18px;
  }
}

@media (max-width:600px){
  :root{
    --about-secondary-title-size:1.28rem;
    --about-secondary-title-gap:17px;
  }
}
/* ===== End V136 ===== */

/* Specificity guard: keep the shared V136 title contract above legacy section rules. */
.expertise-block > h2.about-section-title,
.equipment-section > h2.about-section-title,
.contact-intro > h2.about-section-title{
  font-family:'Inter',sans-serif !important;
  font-size:var(--about-secondary-title-size) !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-0.04em !important;
}

/* ===== V136: even About-copy rhythm and full-width content alignment ===== */
:root{
  --about-copy-surround-gap:30px;
  --about-content-column-gap:clamp(34px,4.2vw,62px);
}

/* Place the introductory copy at the same visual distance from the divider above
   and the Expertise title below. */
#about > .hero-header .std-divider{
  margin-bottom:var(--about-copy-surround-gap);
}

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

.expertise-block{
  margin-top:var(--about-copy-surround-gap) !important;
  padding-top:0 !important;
}

/* Let Equipment use the entire page-content width, with all three groups
   stretching evenly through the right edge. */
.equipment-section,
.equipment-groups,
.equipment-group{
  width:100%;
  max-width:none;
  min-width:0;
}

.equipment-groups{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--about-content-column-gap);
  justify-content:stretch;
}

/* Align Contact to the same three-column rhythm. The intro uses column one;
   the form spans columns two and three and reaches the content edge. */
.contact-body{
  width:100%;
  max-width:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--about-content-column-gap);
}

.contact-intro{
  grid-column:1;
  width:100%;
  max-width:none;
}

.contact-section .contact-form{
  grid-column:2 / 4;
  width:100%;
  max-width:none;
  justify-self:stretch;
}

.contact-section .form-input,
.contact-section .form-textarea,
.contact-section .submit-btn{
  width:100%;
  max-width:none;
  box-sizing:border-box;
}

@media (max-width:900px){
  :root{
    --about-copy-surround-gap:26px;
  }

  .equipment-groups,
  .contact-body{
    grid-template-columns:1fr;
  }

  .contact-intro,
  .contact-section .contact-form{
    grid-column:1;
  }
}

@media (max-width:600px){
  :root{
    --about-copy-surround-gap:24px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: centered Expertise rhythm, edge-spanning Equipment, compact submit button ===== */
:root{
  --about-expertise-surround-gap:clamp(42px,4.25vw,56px);
}

/* On desktop, treat the About copy, Expertise block, and the two equal spaces
   around Expertise as one measured composition. The portrait spans that full
   height, so Expertise sits exactly midway between the copy and Equipment. */
@media (min-width:901px){
  .about-intro-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto var(--about-expertise-surround-gap) auto var(--about-expertise-surround-gap);
    column-gap:var(--about-intro-column-gap);
    row-gap:0;
    align-items:stretch;
  }

  .about-text{
    display:contents;
  }

  .about-copy{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:500px;
  }

  .expertise-block{
    grid-column:1;
    grid-row:3;
    width:100%;
    max-width:500px;
    margin:0 !important;
    padding:0 !important;
    align-self:start;
  }

  .about-photo{
    grid-column:2;
    grid-row:1 / -1;
    align-self:stretch;
    height:100%;
  }

  .about-photo picture,
  .about-photo img{
    height:100%;
  }

  .about-photo img{
    aspect-ratio:auto;
    object-fit:cover;
  }

  /* The lower equal spacer already supplies the section separation. */
  .equipment-section{
    margin-top:0;
  }

  /* Size columns to their actual content and distribute the remaining room
     between them. This makes the final Astrophotography column visibly land
     on the page's right content edge instead of ending inside an equal cell. */
  .equipment-groups{
    grid-template-columns:repeat(3,max-content);
    justify-content:space-between;
    column-gap:clamp(24px,3vw,48px);
    row-gap:0;
  }

  .equipment-group{
    width:max-content;
    max-width:100%;
    min-width:0;
  }

  .equipment-group:nth-child(2){
    justify-self:center;
  }

  .equipment-group:last-child{
    justify-self:end;
  }
}

/* Keep the fields aligned to the right edge, but restore the original compact
   action size instead of stretching the button across the form. */
.contact-section .submit-btn{
  width:auto;
  max-width:none;
  min-width:154px;
  justify-self:start;
}

@media (max-width:900px){
  .equipment-groups{
    justify-content:stretch;
  }

  .equipment-group{
    width:100%;
  }
}
/* ===== End V136 ===== */

/* Prevent the portrait's intrinsic aspect ratio from adding hidden height to
   the bottom spacer. The grid rows, not the image file, define the composition. */
@media (min-width:901px){
  .about-photo{
    position:relative;
    min-height:0;
  }

  .about-photo picture{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:min(100%,420px);
    min-height:0;
  }

  .about-photo img{
    display:block;
    width:100%;
    min-height:0;
  }
}

/* ===== V136: align Contact form with the Cameras equipment column ===== */
@media (min-width:901px){
  /* The Equipment row uses three content-sized tracks with equal free space
     distributed between them. With the approved equipment content, the second
     track begins at 50% minus 98.34375px. Reusing that line here makes the
     Contact form start exactly beneath Cameras while still reaching the page edge. */
  .contact-body{
    grid-template-columns:calc(50% - 98.34375px) minmax(0,1fr);
    column-gap:0;
  }

  .contact-intro{
    grid-column:1;
    padding-right:clamp(36px,5vw,78px);
  }

  .contact-section .contact-form{
    grid-column:2;
    width:100%;
    max-width:none;
    justify-self:stretch;
  }
}
/* ===== End V136 ===== */

/* ===== V136: mobile hierarchy, tighter project rhythm, and restrained About rules ===== */
/* Work and About share the same slightly smaller phone title scale. Project-page
   titles are intentionally left unchanged. */
@media (max-width:599px){
  #work .hero-header h1,
  #about .hero-header h1{
    font-size:2.55rem;
  }

  /* Preserve comfortable touch targets while making the filters a quieter
     supporting control beneath the featured projects. */
  .work-projects{
    padding-bottom:14px;
  }

  #work .filter-container{
    gap:8px;
    margin-top:14px;
    margin-bottom:16px;
  }

  #work .filter-btn{
    min-height:38px;
    padding:8px 18px;
    font-size:.84rem;
    font-weight:400;
    border-color:color-mix(in srgb,var(--border-color) 64%,transparent);
  }

  #work .filter-btn.active{
    font-weight:500;
    border-color:var(--text-primary);
  }
}

/* The first About paragraph now starts at the same distance below its divider
   as the featured Work cards. This changes only the top of the About content;
   the established biography-to-Expertise spacing remains untouched. */
#about > .hero-header .std-divider{
  margin-bottom:14px;
}

@media (max-width:599px){
  #about > .hero-header .std-divider{
    margin-bottom:12px;
  }
}

/* Two major-section rules add structure without slicing the introduction into
   too many pieces. They sit inside the existing whitespace, so the approved
   Equipment and Contact geometry does not move. */
:root{
  --about-equipment-rule-offset:clamp(21px,2.125vw,28px);
  --about-contact-rule-offset:clamp(27px,2.5vw,34px);
}

.equipment-section,
.contact-section{
  position:relative;
}

.equipment-section::before,
.contact-section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background-color:var(--border-color);
  pointer-events:none;
  transition:background-color var(--theme-sync-duration) var(--theme-sync-ease);
}

.equipment-section::before{
  top:calc(-1 * var(--about-equipment-rule-offset));
}

.contact-section::before{
  top:calc(-1 * var(--about-contact-rule-offset));
}

@media (max-width:900px){
  :root{
    --about-equipment-rule-offset:24px;
    --about-contact-rule-offset:24px;
  }
}

@media (max-width:600px){
  :root{
    --about-equipment-rule-offset:21px;
    --about-contact-rule-offset:21px;
  }
}
/* ===== End V136 ===== */

/* Match Work's header-to-content handoff exactly on the About tab. */
#about > .hero-header{
  margin-bottom:0;
}


/* ===== V136: portrait-cleared Equipment rule and explicit project-title font ===== */
:root{
  --about-photo-rule-gap:14px;
  --about-photo-rule-half-gap:7px;
  --about-equipment-rule-heading-gap:clamp(21px,2.125vw,28px);
}

/* China and Southwest already inherited Inter from the body. Keep it explicit so
   the project labels remain typographically identical even if surrounding styles change. */
.work-project-title{
  font-family:'Inter',sans-serif;
}

@media (min-width:901px){
  /* Use one value for both sides of the portrait: the portrait begins this far
     below the upper rule, and the Equipment rule begins the same distance below
     the portrait. */
  #about > .hero-header .std-divider{
    margin-bottom:var(--about-photo-rule-gap);
  }

  /* Center Expertise between the end of the biography and the new Equipment rule.
     Splitting half of the external rule gap across the two internal spacers keeps
     the portrait height unchanged while making both visual distances equal. */
  .about-intro-layout{
    grid-template-rows:
      auto
      calc(var(--about-expertise-surround-gap) + var(--about-photo-rule-half-gap))
      auto
      calc(var(--about-expertise-surround-gap) - var(--about-photo-rule-half-gap));
  }

  /* The section starts after the portrait. Its rule now sits below the image,
     rather than being pulled upward over the image, and the approved rule-to-title
     interval is retained. */
  .equipment-section{
    margin-top:var(--about-photo-rule-gap);
    padding-top:var(--about-equipment-rule-heading-gap);
  }

  .equipment-section::before{
    top:0;
  }
}
/* ===== End V136 ===== */

/* ===== V136: final rule hierarchy and equipment-list polish ===== */
:root{
  --about-major-rule-height:1px;
  --equipment-category-rule-width:54px;
  --equipment-list-row-gap:11px;
}

/* About, Equipment, and Contact use one identical major-divider system. */
#about > .hero-header .std-divider,
.equipment-section::before,
.contact-section::before{
  height:var(--about-major-rule-height);
  background-color:var(--border-color);
  opacity:1;
}

/* Category indicators remain subordinate, but are now consistent across all
   three columns regardless of title length. */
.equipment-group h3{
  font-weight:700;
}

.equipment-group h3::after{
  left:50%;
  right:auto;
  width:var(--equipment-category-rule-width);
  min-width:var(--equipment-category-rule-width);
  max-width:var(--equipment-category-rule-width);
  height:1px;
  background-color:var(--border-color);
  opacity:.66;
  transform:translateX(-50%);
}

/* A real list gap removes cumulative margin differences and gives every gear
   entry the same vertical rhythm while preserving the approved inline details. */
.equipment-list{
  display:flex;
  flex-direction:column;
  gap:var(--equipment-list-row-gap);
}

.equipment-list li,
.equipment-list li:last-child{
  margin:0;
}

@media (max-width:600px){
  :root{
    --equipment-list-row-gap:10px;
  }
}
/* ===== End V136 ===== */


/* ===== V136: proportional Equipment category indicators ===== */
/* Major section dividers remain one identical full-width system. The three
   subordinate category rules are sized optically to their headings instead of
   forcing the long Astrophotography label onto the same short line. */
:root{
  --equipment-category-rule-lenses:50px;
  --equipment-category-rule-cameras:56px;
  --equipment-category-rule-astrophotography:82px;
}

.equipment-group:nth-child(1) h3::after{
  width:var(--equipment-category-rule-lenses);
  min-width:var(--equipment-category-rule-lenses);
  max-width:var(--equipment-category-rule-lenses);
}

.equipment-group:nth-child(2) h3::after{
  width:var(--equipment-category-rule-cameras);
  min-width:var(--equipment-category-rule-cameras);
  max-width:var(--equipment-category-rule-cameras);
}

.equipment-group:nth-child(3) h3::after{
  width:var(--equipment-category-rule-astrophotography);
  min-width:var(--equipment-category-rule-astrophotography);
  max-width:var(--equipment-category-rule-astrophotography);
}
/* ===== End V136 ===== */


/* ===== V136: literal major divider parity and final Astrophotography underline ===== */
/* The Expertise-to-Equipment separator is now the same real .std-divider
   element used beneath About., rather than a visually similar pseudo-element. */
.equipment-section::before{
  content:none !important;
  display:none !important;
}

.equipment-major-divider{
  width:100%;
  height:1px;
  margin:0 0 calc(var(--about-equipment-rule-heading-gap) - 1px);
  background-color:var(--border-color);
  opacity:1;
  transition:var(--theme-transition);
}

@media (min-width:901px){
  .equipment-section{
    margin-top:var(--about-photo-rule-gap);
    padding-top:0;
  }
}

@media (max-width:900px){
  .equipment-section{
    margin-top:24px;
  }

  .equipment-major-divider{
    margin-bottom:23px;
  }
}

@media (max-width:600px){
  .equipment-section{
    margin-top:21px;
  }

  .equipment-major-divider{
    margin-bottom:20px;
  }
}

:root{
  --equipment-category-rule-astrophotography:116px;
}
/* ===== End V136 ===== */


/* ===== V136: one literal major-divider component + final Astro proportion ===== */
/* All three About-page separators are real .std-divider elements. Only their
   placement margins differ; thickness, color, opacity, and theme transition
   come from the same component. */
.equipment-section::before,
.contact-section::before{
  content:none !important;
  display:none !important;
}

#about > .hero-header .std-divider,
.equipment-major-divider,
.contact-major-divider{
  height:var(--about-major-rule-height,1px);
  background-color:var(--border-color);
  opacity:1;
  transition:var(--theme-transition);
}

.equipment-major-divider{
  width:100%;
  margin:0 0 calc(var(--about-equipment-rule-heading-gap) - 1px);
  pointer-events:none;
}

.contact-section{
  position:relative;
}

.contact-major-divider{
  position:absolute;
  top:calc(-1 * var(--about-contact-rule-offset));
  left:0;
  right:0;
  width:100%;
  margin:0;
  pointer-events:none;
}

:root{
  --equipment-category-rule-astrophotography:132px;
}
/* ===== End V136 ===== */

/* ===== V136: compact mobile action buttons ===== */
@media (max-width:600px){
  .contact-section .submit-btn{
    min-width:136px;
    min-height:42px;
    padding:10px 20px;
    font-size:.86rem;
  }
}
/* ===== End V136 ===== */

/* ===== V136: refined Equipment rhythm + semibold project titles ===== */
:root{
  --v136-equipment-heading-gap:24px;
  --v136-equipment-category-gap:15px;
  --v136-equipment-row-gap:9px;
}

/* Strengthen the section hierarchy: slightly more room after Equipment.,
   followed by a tighter and more consistent category/list rhythm. */
.equipment-section > .about-section-title{
  margin-bottom:var(--v136-equipment-heading-gap) !important;
}

.equipment-group h3{
  margin-bottom:var(--v136-equipment-category-gap);
}

.equipment-list{
  gap:var(--v136-equipment-row-gap);
}

.equipment-list li{
  line-height:1.46;
}

/* Full bold would compete with the photographs. Semibold gives the overlaid
   project names better clarity while preserving the site's restrained tone. */
.work-project-title{
  font-weight:600;
}

@media (max-width:900px){
  :root{
    --v136-equipment-heading-gap:22px;
    --v136-equipment-category-gap:15px;
    --v136-equipment-row-gap:9px;
  }
}

@media (max-width:600px){
  :root{
    --v136-equipment-heading-gap:20px;
    --v136-equipment-category-gap:14px;
    --v136-equipment-row-gap:9px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: tighter Equipment category-to-content spacing ===== */
:root{
  --v136-equipment-category-gap:10px;
}

/* Bring the first equipment entry closer to its category heading and rule.
   The internal list rhythm and all other approved spacing remain unchanged. */
.equipment-group h3{
  margin-bottom:var(--v136-equipment-category-gap);
}

@media (max-width:600px){
  :root{
    --v136-equipment-category-gap:9px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: unify Expertise and Equipment rhythm; tighten Contact intro ===== */
:root{
  --v136-equipment-row-gap:11px;
  --v136-contact-title-gap:17px;
}

/* Match the vertical interval between gear entries to the Expertise list. */
.equipment-list{
  gap:var(--v136-equipment-row-gap);
}

/* Keep the availability line visually attached to Contact. without crowding it. */
.contact-intro > h2.about-section-title{
  margin-bottom:var(--v136-contact-title-gap) !important;
}

@media (max-width:900px){
  :root{
    --v136-contact-title-gap:15px;
  }
}

@media (max-width:600px){
  :root{
    --v136-contact-title-gap:14px;
  }
}
/* ===== End V136 ===== */

/* ===== V136: matched major-divider-to-heading spacing =====
   On desktop, Contact now uses the same visible line-to-heading interval as
   Equipment. Tablet and mobile were already matched and remain unchanged. */
@media (min-width:901px){
  :root{
    --about-contact-rule-offset:calc(var(--about-equipment-rule-heading-gap) - 2px);
  }
}
/* ===== End V136 ===== */



/* ===== V136: literal text-bound Equipment underlines =====
   The underline now belongs to an inline span inside each heading, so grid-item
   stretching and older nth-child widths cannot alter the rendered rule length. */
.equipment-groups .equipment-group h3{
  display:block;
  width:auto;
  max-width:none;
  justify-self:start;
  padding-bottom:0;
}

.equipment-groups .equipment-group h3::after{
  content:none !important;
  display:none !important;
}

.equipment-title-text{
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}

.equipment-title-text::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:1px;
  background-color:var(--border-color);
  opacity:.66;
  transition:background-color var(--theme-sync-duration) var(--theme-sync-ease);
}
/* ===== End V136 ===== */

/* ===== V136: shared footer parity and mobile theme swap =====
   This exact block is duplicated in the utility stylesheet so the main, 404,
   and Thank You footers use the same optical rule position and mobile behavior. */
.footer-divider{
  position:relative;
  left:-4px;
  transform:none !important;
}

/* ===== End V136 ===== */

/* ===== V136: synchronized mobile footer theme transition =====
   Keep the footer background and every theme-dependent footer component on
   the same 260ms timeline as the page. This prevents the temporary shaded
   footer state that occurred when only the footer was forced to switch instantly. */
@media (max-width:600px){
  .site-footer{
    background-color:var(--bg-color);
    transition:
      background-color var(--theme-sync-duration) var(--theme-sync-ease),
      color var(--theme-sync-duration) var(--theme-sync-ease) !important;
    transition-delay:0ms !important;
  }

  .site-footer .footer-logo-img{
    transition:
      filter var(--theme-sync-duration) var(--theme-sync-ease),
      opacity 220ms ease !important;
    transition-delay:0ms !important;
  }

  .site-footer .footer-divider{
    transition:
      background-color var(--theme-sync-duration) var(--theme-sync-ease),
      opacity 220ms ease !important;
    transition-delay:0ms !important;
  }

  .site-footer .footer-socials .icon-btn,
  .site-footer p{
    transition:
      color var(--theme-sync-duration) var(--theme-sync-ease),
      opacity 220ms ease,
      transform 220ms ease,
      background-color var(--theme-sync-duration) var(--theme-sync-ease) !important;
    transition-delay:0ms !important;
  }

  .site-footer .footer-socials svg,
  .site-footer .footer-socials svg path,
  .site-footer .astrobin-icon .cls-1,
  .site-footer .astrobin-icon .cls-2,
  .site-footer .astrobin-icon .cls-3,
  .site-footer .astrobin-icon .cls-4,
  .site-footer .astrobin-icon .cls-5{
    transition:
      color var(--theme-sync-duration) var(--theme-sync-ease),
      fill var(--theme-sync-duration) var(--theme-sync-ease),
      stroke var(--theme-sync-duration) var(--theme-sync-ease) !important;
    transition-delay:0ms !important;
  }
}
/* ===== End V136 ===== */



/* ===== V136: mobile Work title balance — true typographic baseline alignment =====
   The heading margin remains removed inside the row so the divider stays at
   the original V124 position. Flex baseline alignment now aligns the normal
   letter bottoms directly; j, g, p, and y descenders hang naturally below. */
.work-heading-context{
  display:none;
}

@media (max-width:599px){
  #work .work-heading-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    width:100%;
  }

  #work .work-heading-row h1{
    flex:0 0 auto;
    margin:0;
    line-height:1;
  }

  #work .work-heading-context{
    display:block;
    flex:0 1 auto;
    max-width:calc(100% - 132px);
    margin:0;
    transform:none;
    color:var(--text-secondary);
    font-size:.78rem;
    font-weight:500;
    line-height:1;
    letter-spacing:.005em;
    text-align:right;
    white-space:nowrap;
    transition:color var(--theme-sync-duration) var(--theme-sync-ease);
  }
}

@media (max-width:340px){
  #work .work-heading-row{
    gap:8px;
  }

  #work .work-heading-context{
    max-width:calc(100% - 122px);
    font-size:.70rem;
    letter-spacing:0;
  }
}
/* ===== End V136 ===== */


/* ===== V136: mobile About title balance — matches Work baseline component =====
   Informational only. The row uses true baseline alignment and the heading margin
   remains removed inside the row, so the descriptor cannot shift the divider. */
.about-heading-row{
  display:contents;
}

.about-heading-context{
  display:none;
}

@media (max-width:599px){
  #about .about-heading-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    width:100%;
  }

  #about .about-heading-row h1{
    flex:0 0 auto;
    margin:0;
    line-height:1;
  }

  #about .about-heading-context{
    display:block;
    flex:0 1 auto;
    max-width:calc(100% - 132px);
    margin:0;
    transform:none;
    color:var(--text-secondary);
    font-size:.78rem;
    font-weight:500;
    line-height:1;
    letter-spacing:.005em;
    text-align:right;
    white-space:nowrap;
    transition:color var(--theme-sync-duration) var(--theme-sync-ease);
  }
}

@media (max-width:340px){
  #about .about-heading-row{
    gap:8px;
  }

  #about .about-heading-context{
    max-width:calc(100% - 122px);
    font-size:.70rem;
    letter-spacing:0;
  }
}
/* ===== End V136 About descriptor ===== */


/* ===== V136 project-page spacing refinement =====
   Shared by China and Southwest. Keeps the breadcrumb, matches the
   Work/About title-divider rhythm, and removes stacked/collapsing margins. */

#china .project-topbar,
#southwest .project-topbar{
  margin-bottom:18px;
}

#china .project-topbar .back-nav,
#southwest .project-topbar .back-nav{
  margin:0;
}

#china .project-meta-row,
#southwest .project-meta-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:14px;
}

#china .project-meta-row h1,
#southwest .project-meta-row h1{
  margin:0;
  min-width:0;
}

#china .project-meta-row .share-btn,
#southwest .project-meta-row .share-btn{
  align-self:center;
}

#china .hero-header,
#southwest .hero-header{
  margin-bottom:0;
  padding-bottom:18px;
}

#china .hero-header .std-divider,
#southwest .hero-header .std-divider{
  margin-top:10px;
  margin-bottom:0;
}

#china .project-hero-image,
#southwest .project-hero-image{
  margin:22px 0 0;
}

#china .project-description,
#southwest .project-description{
  margin:0 0 34px;
}

@media (max-width:700px){
  #china .project-topbar,
  #southwest .project-topbar{
    margin-bottom:14px;
  }

  #china .project-meta-row,
  #southwest .project-meta-row{
    gap:10px;
  }

  #china .hero-header,
  #southwest .hero-header{
    padding-bottom:16px;
  }

  #china .project-hero-image,
  #southwest .project-hero-image{
    margin-top:18px;
  }

  #china .project-description,
  #southwest .project-description{
    margin-bottom:28px;
  }
}
/* ===== End V136 project-page spacing refinement ===== */


/* ===== V136: responsive editorial page descriptors =====
   Work and About use the same quiet contextual label on every viewport.
   The labels are informational only and never alter divider placement. */
@media (min-width:600px){
  #work .work-heading-row,
  #about .about-heading-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:clamp(24px,4vw,64px);
    width:100%;
    margin-bottom:5px;
  }

  #work .work-heading-row h1,
  #about .about-heading-row h1{
    flex:0 0 auto;
    margin:0;
    line-height:1;
  }

  #work .work-heading-context,
  #about .about-heading-context{
    display:block;
    flex:0 1 auto;
    margin:0;
    color:var(--text-secondary);
    font-size:clamp(.76rem,.72vw,.84rem);
    font-weight:500;
    line-height:1;
    letter-spacing:.012em;
    text-align:right;
    white-space:nowrap;
    transition:color var(--theme-sync-duration) var(--theme-sync-ease);
  }
}
/* ===== End V136 descriptors ===== */

/* ===== V136: phone-landscape About composition =====
   The touch-landscape class is set by the existing runtime detector. These
   rules compact the long About page without turning it into a desktop layout. */
html.is-mobile-landscape{
  --about-copy-surround-gap:20px;
  --about-equipment-rule-offset:18px;
  --about-contact-rule-offset:18px;
  --v136-equipment-heading-gap:16px;
  --v136-equipment-category-gap:9px;
  --v136-equipment-row-gap:8px;
  --v136-contact-title-gap:10px;
}

html.is-mobile-landscape #about .hero-header h1{
  font-size:clamp(2.25rem,5.4vw,2.7rem);
}

html.is-mobile-landscape #about .about-heading-context{
  font-size:.74rem;
  letter-spacing:.006em;
}

html.is-mobile-landscape #about > .hero-header .std-divider{
  margin-top:8px;
  margin-bottom:14px;
}

html.is-mobile-landscape #about .about-intro-layout{
  grid-template-columns:minmax(0,1.08fr) minmax(220px,.92fr);
  grid-template-rows:auto;
  gap:clamp(20px,3.6vw,30px);
  align-items:start;
}

html.is-mobile-landscape #about .about-text{
  display:block;
  min-width:0;
  font-size:.92rem;
  line-height:1.52;
  letter-spacing:.002em;
}

html.is-mobile-landscape #about .about-copy p{
  margin-bottom:14px;
}

html.is-mobile-landscape #about .about-copy p:last-child{
  margin-bottom:0;
}

html.is-mobile-landscape #about .expertise-block{
  margin-top:22px !important;
  padding-top:0 !important;
}

html.is-mobile-landscape #about .about-subheading,
html.is-mobile-landscape #about .equipment-section > .about-section-title,
html.is-mobile-landscape #about .contact-intro > .about-section-title{
  font-size:1.16rem !important;
}

html.is-mobile-landscape #about .about-subheading{
  margin:0 0 13px !important;
}

html.is-mobile-landscape #about .expertise-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:16px;
  row-gap:8px;
  font-size:.82rem;
  line-height:1.38;
}

html.is-mobile-landscape #about .expertise-list li{
  min-width:0;
}

html.is-mobile-landscape #about .expertise-list li svg{
  width:14px;
  height:14px;
  margin-top:2px;
}

html.is-mobile-landscape #about .about-photo{
  justify-content:flex-end;
  align-items:flex-start;
  min-width:0;
}

html.is-mobile-landscape #about .about-photo picture{
  display:block;
  width:min(100%,280px);
  margin:0 0 0 auto;
}

html.is-mobile-landscape #about .about-photo img{
  display:block;
  width:100%;
  height:auto !important;
  max-height:none;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center 42%;
}

html.is-mobile-landscape #about .equipment-section{
  margin-top:36px;
  padding-top:0;
}

html.is-mobile-landscape #about .equipment-section > .about-section-title{
  margin-bottom:16px !important;
}

html.is-mobile-landscape #about .equipment-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.8vw,24px);
  align-items:start;
  justify-content:stretch;
}

html.is-mobile-landscape #about .equipment-group{
  width:100%;
  min-width:0;
  max-width:none;
  justify-self:stretch;
}

html.is-mobile-landscape #about .equipment-groups .equipment-group h3{
  margin-bottom:9px;
  font-size:.86rem;
  line-height:1.18;
}

html.is-mobile-landscape #about .equipment-title-text{
  padding-bottom:7px;
}

html.is-mobile-landscape #about .equipment-list{
  gap:8px;
}

html.is-mobile-landscape #about .equipment-list li{
  min-width:0;
  font-size:.76rem;
  line-height:1.38;
}

html.is-mobile-landscape #about .equipment-name,
html.is-mobile-landscape #about .equipment-detail{
  font-size:inherit;
}

html.is-mobile-landscape #about .contact-section{
  margin-top:44px;
}

html.is-mobile-landscape #about .contact-body{
  display:grid;
  grid-template-columns:minmax(170px,.38fr) minmax(0,1fr);
  gap:clamp(22px,3.5vw,32px);
  align-items:start;
}

html.is-mobile-landscape #about .contact-intro{
  grid-column:1;
  min-width:0;
  padding-right:0;
}

html.is-mobile-landscape #about .contact-intro p{
  font-size:.84rem;
  line-height:1.45;
}

html.is-mobile-landscape #about .contact-section .contact-form{
  grid-column:2;
  width:100%;
  max-width:none;
  gap:10px;
}

html.is-mobile-landscape #about .form-input{
  min-height:42px;
  padding:10px 13px;
  font-size:.82rem;
}

html.is-mobile-landscape #about .form-textarea{
  min-height:108px;
  padding:11px 13px;
  font-size:.82rem;
}

html.is-mobile-landscape #about .submit-btn{
  min-width:136px;
  min-height:40px;
  padding:9px 18px;
  font-size:.82rem;
}

@media (max-width:720px) and (orientation:landscape){
  html.is-mobile-landscape #about .about-intro-layout{
    grid-template-columns:minmax(0,1.06fr) minmax(215px,.94fr);
    gap:20px;
  }

  html.is-mobile-landscape #about .about-photo picture{
    width:min(100%,258px);
  }

  html.is-mobile-landscape #about .equipment-groups{
    gap:14px;
  }

  html.is-mobile-landscape #about .equipment-list li{
    font-size:.72rem;
  }

  html.is-mobile-landscape #about .contact-body{
    grid-template-columns:160px minmax(0,1fr);
    gap:20px;
  }
}
/* ===== End V136 phone-landscape About ===== */


/* ===== V136: page descriptors remain mobile-only =====
   Portrait phones retain the existing baseline-aligned descriptor rows.
   Touch phone landscape retains them through the existing is-mobile-landscape
   detector. Regular desktop/tablet restores the original title-only header. */
@media (min-width:600px){
  html:not(.is-mobile-landscape) #work .work-heading-row,
  html:not(.is-mobile-landscape) #about .about-heading-row{
    display:contents;
    width:auto;
    margin-bottom:0;
  }

  html:not(.is-mobile-landscape) #work .work-heading-row h1,
  html:not(.is-mobile-landscape) #about .about-heading-row h1{
    margin:0 0 5px;
    line-height:1;
  }

  html:not(.is-mobile-landscape) #work .work-heading-context,
  html:not(.is-mobile-landscape) #about .about-heading-context{
    display:none;
  }
}
/* ===== End V136 mobile-only descriptor correction ===== */