/* Responsive portfolio refinements; shared project sizing and controls also apply on desktop. */
/* Phone section anchors retain a readable inset below the fixed navigation. */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 html:root{--phone-nav-height:calc(88px + env(safe-area-inset-top,0px))}
 #projects,#works,#experience,#about{scroll-margin-top:calc(var(--phone-nav-height) + 24px - var(--section-title-inset))}
 #projects .pg-name{scroll-margin-top:calc(var(--phone-nav-height) + 16px)}
}

/* On upright phones, headings pass behind the solid navigation surface. */
@media (max-width:767px) and (orientation:portrait){
 .topbar::before{clip-path:none}
 .topbar.is-scrolled::before{background:#050505}
}

/* A short phone viewport keeps the header and first-screen content compact. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 html:root{
  --phone-nav-height:calc(56px + env(safe-area-inset-top,0px));
  --phone-hero-left:max(24px,env(safe-area-inset-left,0px));
  --phone-hero-right:max(24px,env(safe-area-inset-right,0px));
 }
 .topbar{
  height:var(--phone-nav-height);
  padding:env(safe-area-inset-top,0px) var(--phone-hero-right) 0 var(--phone-hero-left);
 }
 .topbar .brand{width:96px;height:44px;min-height:44px}
 .topbar .burger{width:44px;height:44px;min-height:44px;gap:5px}
 .topbar .burger i{width:22px;height:2px}
 .menu-inner{max-width:none;padding:calc(var(--phone-nav-height) + 12px) var(--phone-hero-right) 20px var(--phone-hero-left)}
 .menu-list{margin:0}
 .menu-list li{margin:0}
 .menu-list a{padding:9px 0;font-size:22px;line-height:1.3}

 #home.stage{display:block;height:100vh;height:100dvh;min-height:280px;padding:0;overflow:hidden}
 #home .hero{
  position:absolute;inset:calc(var(--phone-nav-height) + 14px) auto auto var(--phone-hero-left);
  width:min(49vw,430px);padding:0;text-align:left;
 }
 #home .hero .headline,#home .hero .sub,#home .hero .pill-cta,#home .hero .actions>.ghost{position:static;inset:auto}
 #home .hero .headline{margin:0;max-width:none;font-size:clamp(26px,7.2dvh,34px);line-height:1.08;letter-spacing:-.02em;white-space:normal}
 #home .hero .headline span,#home .hero .sub span{display:block}
 #home .hero .headline span+span::before,#home .hero .sub span+span::before{content:none}
 #home .hero .sub{margin:14px 0 0;max-width:27em;font-size:13px;line-height:1.6;white-space:normal;word-spacing:0}
 #home .hero .actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:16px}
 #home .hero .pill-cta{width:112px;height:36px;min-height:36px;font-size:13px}
 #home .hero .actions>.ghost{font-size:13px;line-height:36px}
 #home .logos{
  position:absolute;left:var(--phone-hero-left);right:auto;top:auto;bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));
  display:flex;align-items:center;justify-content:flex-start;gap:20px;width:max-content;
  max-width:calc(100% - var(--phone-hero-left) - var(--phone-hero-right));padding:0;transform:none;
 }
 #home .logos .lg{flex:none;justify-content:flex-start;align-items:center;width:var(--brand-width);height:24px;padding:0}
 #home .logos .lg1{--brand-width:72px}
 #home .logos .lg2{--brand-width:76px}
 #home .logos .lg3{--brand-width:64px}
 #home .logos .lg4{--brand-width:88px}
 #home .logos .lg>img,#home .logos .hero-logo-crop{max-width:100%}
}

@media (orientation:landscape) and (max-width:1023px) and (max-height:340px){
 #home .hero{top:calc(var(--phone-nav-height) + 8px)}
 #home .hero .headline{font-size:26px}
 #home .hero .sub{margin-top:10px;font-size:12px}
 #home .hero .actions{margin-top:12px}
 #home .logos{bottom:max(12px,env(safe-area-inset-bottom,0px))}
}

/* Phone project controls retain their accessible icon labels. */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #projects .pg-autoplay{display:inline-flex;justify-content:center;flex:none;width:44px;min-width:44px;height:44px;padding:0;gap:0}
 #projects .pg-autoplay>span{display:none}
}


/* Give the phone's first screen balanced gutters and restore the centered brand strip. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 html:root{--phone-hero-left:max(32px,5vw,env(safe-area-inset-left,0px));--phone-hero-right:max(32px,5vw,env(safe-area-inset-right,0px));--content-gutter:max(24px,4vw)}
 #home .hero .sub{font-size:14px;line-height:1.5;margin-top:12px}
 #home .hero .actions{margin-top:12px}
 #home .hero .pill-cta{height:44px;min-height:44px}
 #home .hero .actions>.ghost{position:relative;inset:auto;display:inline-flex;align-items:center;min-height:44px;line-height:1.4}
 #home .logos{left:50%;right:auto;top:calc(989 * var(--u));bottom:auto;width:calc(741 * var(--u));max-width:calc(100% - var(--phone-hero-left) - var(--phone-hero-right));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;transform:translateX(calc(-50% + 20 * var(--u)))}
 #home .logos .lg{width:auto;height:calc(44 * var(--u));align-items:flex-end;justify-content:center;padding-bottom:calc(10 * var(--u))}
 #home .logos .lg1,#home .logos .lg2{--brand-width:calc(98 * var(--u))}
 #home .logos .lg3{--brand-width:calc(74.9 * var(--u))}
 #home .logos .lg4{--brand-width:calc(115.5 * var(--u))}
 #home .logos .lg>img{max-width:88%}
 #home .logos .hero-logo-crop{max-width:94%}
 #works,#about{padding-top:48px;--section-title-inset:56px;scroll-margin-top:calc(var(--phone-nav-height) + 12px - var(--section-title-inset))}
 #works .works-title,#about .about-title{font-size:44px;line-height:1;margin:8px var(--content-edge) 0}
 #about .about-title{margin-bottom:28px}
}

/* Keep the artwork close to its controls; the lower card arc has its own space. */
@media (max-width:767px) and (orientation:portrait){
 #works .works-gallery{margin-top:12px}
 #works .wg-space{--wg-focus-preview-max-height:min(350px,42dvh);height:calc(var(--wg-focus-preview-max-height) + 300px)}
 #works .wg-space[data-view=focus] .wg-preview{top:12px;--wg-preview-max-height:var(--wg-focus-preview-max-height)}
 #about .contact-title{font-size:clamp(34px,11.5vw,52px)}
}

/* Landscape works use the full row: artwork on the left, card arc on the right. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #works .works-toolbar{margin:12px var(--content-edge) 0;gap:16px;flex-wrap:nowrap;align-items:center}
 #works .wg-filter-panel{flex:1 1 auto;min-width:0;max-width:calc(100% - 154px)}
 #works .wg-view-switch{flex:none;gap:18px}
 #works .wg-view-button{min-height:44px;padding-bottom:0;font-size:13px;gap:7px}
 #works .works-gallery{margin-top:12px;min-height:0}
 #works .wg-space{--wg-scene-height:clamp(156px,calc(100dvh - 192px),280px);--wg-focus-preview-max-height:calc(var(--wg-scene-height) - 16px);height:var(--wg-scene-height);top:0}
 #works .wg-space[data-view=focus] .wg-preview{--wg-preview-max-height:var(--wg-focus-preview-max-height);left:var(--content-edge);top:8px;width:46%;max-width:none;transform:none}
 #works .wg-drag-hint{font-size:11px;gap:6px}
 #works .wg-drag-hint::before,#works .wg-drag-hint::after{width:18px}
 #works .wg-grid{gap:20px 16px;padding-top:8px}
}

@media (orientation:landscape) and (max-width:1023px) and (max-height:360px){
 #works .works-title,#about .about-title{font-size:40px}
 #works .works-toolbar{margin-top:8px}
 #works .works-gallery{margin-top:8px}
 #works .wg-space{--wg-scene-height:calc(100dvh - 180px)}
 #home .hero .sub{font-size:13px;margin-top:8px}
 #home .hero .actions{margin-top:8px}
}

/* Project cards share both edges on every viewport. */
#projects .pg-viewport {
  align-items: stretch;
}

#projects .pg-card {
  align-self: stretch;
}

/* The image row keeps its natural height; the copy fills the equal-height card. */
@media (orientation: portrait), (max-width: 767px) {
  #projects .pg-card {
    grid-template-rows: auto minmax(0, 1fr);
  }
}

/* Shared motion-control geometry; existing visibility and accessibility remain. */
#projects .pg-autoplay,
#experience .experience-controls button {
  box-sizing: border-box;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  background: #0b0b0b99;
  color: #fff;
  opacity: .85;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, opacity .2s;
}

#projects .pg-autoplay > span {
  display: none;
}

#projects .pg-autoplay > svg {
  width: 18px;
  height: 18px;
}

#experience .experience-controls button {
  position: relative;
  font-size: 0;
  line-height: 0;
}

#experience .experience-controls button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("chevron-rounded.svg") center / contain no-repeat;
  mask: url("chevron-rounded.svg") center / contain no-repeat;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#experience .experience-controls [data-experience-prev]::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

#projects .pg-autoplay:hover,
#experience .experience-controls button:hover {
  background: #191919cc;
  border-color: #ffffff70;
  opacity: 1;
}

#projects .pg-autoplay:disabled,
#experience .experience-controls button:disabled {
  opacity: .35;
  cursor: default;
}

/* A short landscape viewport gets an immediately readable image/copy split. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #projects {
    --section-title-inset: 28px;
    padding-top: 20px;
    padding-bottom: 32px;
  }

  #projects .project-title {
    margin: 8px 0 16px;
    font-size: 44px;
    line-height: 1;
  }

  #projects .project-gallery {
    --pg-card-width: calc(100vw - 2 * var(--content-edge));
    --pg-inset: var(--content-edge);
    --pg-gap: 16px;
    --pg-compact-height: clamp(220px, calc(100dvh - 166px), 340px);
    padding-top: 0;
  }

  #projects .pg-card {
    --pg-media-gap: 10px;
    grid-template-columns: minmax(0, min(28%, calc(var(--pg-compact-height) - 40px))) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(18px, 2.5vw, 24px);
    row-gap: 0;
    height: var(--pg-compact-height);
    min-height: 0;
    padding: 16px;
  }

  #projects .pg-visuals {
    align-self: start;
    min-height: 0;
  }

  #projects .pg-copy {
    gap: 12px;
    min-height: 0;
    max-height: 100%;
    padding: 0 5px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    scrollbar-width: thin;
    scrollbar-color: #666 transparent;
    -webkit-overflow-scrolling: touch;
  }

  #projects .pg-copy > * {
    flex-shrink: 0;
  }

  #projects .pg-copy::-webkit-scrollbar {
    width: 3px;
  }

  #projects .pg-copy::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #666;
  }

  #projects .pg-name {
    font-size: clamp(20px, 2.6vw, 24px);
    line-height: 1.25;
    text-wrap: pretty;
  }

  #projects .pg-summary {
    gap: 12px;
  }

  #projects .pg-description {
    width: 100%;
    max-width: none;
    font-size: 15px;
    line-height: 1.6;
  }

  #projects .pg-contribution {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  #projects .pg-funding {
    font-size: 13px;
    line-height: 1.6;
  }

  #projects .pg-link-block {
    gap: 6px;
    margin-top: 0;
    padding-top: 4px;
  }

  #projects .pg-links {
    gap: 8px 16px;
  }

  #projects .pg-link {
    min-height: 44px;
    margin-top: 0;
    font-size: 14px;
  }

  #projects .pg-controls {
    min-height: 44px;
    margin-top: 12px;
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 360px) {
  #projects .project-gallery {
    --pg-compact-height: calc(100dvh - 144px);
  }
  #projects .project-title {
    font-size: 40px;
  }
}

/* Replace the previous EXPERIENCE phone blocks with this complete section.
   Existing swing, flip, expand and return animations keep their JS geometry. */
@media (max-width: 767px), (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #experience .experience-footer { justify-content: center; }
  #experience .experience-controls { margin-inline: auto; }

  /* A taller card and a restrained wordmark, including its animated return clone. */
  #experience :is(.experience-track, .experience-return-proxy) .experience-face {
    padding: 16px;
    border-radius: 22px;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 12px;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front .experience-logo {
    justify-self: center;
    width: 72%;
    height: 100%;
    max-width: 150px;
    aspect-ratio: auto;
    padding: 0;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-position { font-size: 19px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-identity { gap: 6px; padding-top: 0; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-department { font-size: 12.5px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-period { font-size: 11.5px; }
  #experience :is(.experience-track, .experience-return-proxy) :is(.experience-topline, .experience-back-heading) {
    font-size: 11px;
    letter-spacing: .04em;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-cta {
    min-height: 38px;
    padding-top: 10px;
    font-size: 11px;
  }
  #experience :is(.experience-track, .experience-return-proxy) .experience-arrow { width: 26px; height: 26px; }
}

@media (max-width: 767px) and (orientation: portrait) {
  #experience {
    --exp-card-width: min(224px, calc(100vw - 104px));
    --exp-card-height: calc(var(--exp-card-width) * 1.75);
    --exp-card-gap: 40px;
    --exp-track-padding: 12px;
  }
  #experience .experience-title { font-size: clamp(44px, 14.4vw, 100px); white-space: nowrap; }
  #experience .experience-track { padding-top: 20px; padding-bottom: 32px; }
  #experience .experience-rail { top: 20px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .66); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .66); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .66); }

  #experience-viewer .experience-viewer-surface { width: 100%; max-width: 420px; }
  #experience-viewer .experience-item.is-expanded .experience-face { width: 100%; min-width: 0; margin-inline: 0; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-logo { justify-self: center; width: 82%; }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #experience {
    --section-title-inset: 56px;
    scroll-margin-top: calc(var(--phone-nav-height) + 12px - var(--section-title-inset));
    --exp-card-gap: 18px;
    --exp-track-padding: 10px;
    --exp-card-height: clamp(192px, calc(100dvh - 174px), 280px);
    --exp-card-width: min(calc(var(--exp-card-height) / 1.72), calc((100vw - 2 * var(--content-edge) - 2 * var(--exp-track-padding) - 3 * var(--exp-card-gap)) / 4));
    padding-top: 48px;
    padding-bottom: 28px;
  }
  #experience .experience-title { font-size: 44px; line-height: 1; margin-top: 8px; margin-bottom: 0; }
  #experience .experience-viewport { margin-top: 0; padding-inline: var(--content-edge); scroll-padding-inline: var(--content-edge); }
  #experience .experience-track { padding-top: 8px; padding-bottom: 16px; }
  #experience .experience-rail { top: 8px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .10); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .10); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .10); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-face { padding: 11px; border-radius: 18px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front { gap: 8px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front .experience-logo { width: 70%; max-width: 110px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-position { font-size: 14px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-identity { gap: 5px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-department { font-size: 11px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-period { font-size: 10.5px; letter-spacing: 0; }
  #experience :is(.experience-track, .experience-return-proxy) :is(.experience-topline, .experience-back-heading) { font-size: 10.5px; gap: 4px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-cta { min-height: 30px; padding-top: 6px; gap: 6px; font-size: 10.5px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-arrow { width: 22px; height: 22px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-arrow::after { width: 11px; height: 11px; }
  #experience .experience-track .experience-details { padding-top: 8px; font-size: 11px; line-height: 1.5; }
  #experience .experience-track .experience-details dt { margin-bottom: 4px; font-size: 11px; }
  #experience .experience-track .experience-summary strong { margin-top: 6px; font-size: 11px; }

  /* Use the screen width for reading rather than stacking two tall detail faces. */
  #experience-viewer {
    padding: max(10px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(10px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    overflow: hidden;
  }
  #experience-viewer .experience-viewer-surface {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 1000px;
    height: 100%;
    min-height: 0;
    margin-block: 0;
  }
  #experience-viewer .experience-detail-toolbar { flex: none; height: 44px; margin: 0; }
  #experience-viewer .experience-return { min-height: 44px; }
  #experience-viewer .experience-item.is-expanded { flex: 1; min-height: 0; }
  #experience-viewer .experience-item.is-expanded .experience-flipper {
    grid-template-columns: clamp(156px, 20vw, 184px) minmax(0, 1fr);
    gap: 14px;
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }
  #experience-viewer .experience-item.is-expanded .experience-face {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 14px;
    overflow: hidden;
    border-radius: 20px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-topline { font-size: 11px; gap: 4px; letter-spacing: .035em; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-logo {
    justify-self: center;
    align-self: center;
    width: 85%;
    max-width: 128px;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    gap: 8px;
  }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-identity { gap: 4px; padding: 0; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-position { margin: 0; font-size: 20px; line-height: 1.3; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-department { margin: 0; font-size: 13px; line-height: 1.4; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-employer { margin: 0; font-size: 13px; line-height: 1.4; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-category { margin: 0; font-size: 12px; line-height: 1.4; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-period { margin: 0; font-size: 11px; line-height: 1.5; }
  #experience-viewer .experience-item.is-expanded .experience-back { display: block; }
  #experience-viewer .experience-item.is-expanded .experience-back-heading { display: none; }
  #experience-viewer .experience-item.is-expanded .experience-details {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    align-content: start;
    gap: 16px;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 2px 0 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
    font-size: 14px;
    line-height: 1.5;
  }
  #experience-viewer .experience-item.is-expanded .experience-details > div { min-width: 0; margin: 0; padding: 0; }
  #experience-viewer .experience-item.is-expanded .experience-details > div + div { padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--exp-line); }
  #experience-viewer .experience-item.is-expanded .experience-details dt { margin: 0 0 8px; font-size: 14px; line-height: 1.4; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy li { display: block; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy li + li { margin-top: 8px; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy strong { display: inline; font-weight: 500; line-height: inherit; }
  #experience-viewer .experience-item.is-expanded .experience-detail-copy strong::after { content: '：'; }
  #experience-viewer .experience-item.is-expanded .experience-duty-description { display: inline; }
}

/* Short landscape screens retain readable type and scroll only the detail copy. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 360px) {
  #experience {
    --exp-card-height: clamp(176px, calc(100dvh - 144px), 212px);
  }
  #experience .experience-title { font-size: 40px; }
  #experience .experience-track { padding-top: 4px; padding-bottom: 12px; }
  #experience .experience-rail { top: 4px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .06); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .06); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .06); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-face { padding: 9px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-front { gap: 6px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-position { font-size: 13.5px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-identity { gap: 4px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-cta { min-height: 27px; padding-top: 4px; }
  #experience :is(.experience-track, .experience-return-proxy) .experience-arrow { width: 19px; height: 19px; }
  #experience-viewer .experience-item.is-expanded .experience-face { padding: 12px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-position { font-size: 18px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-department,
  #experience-viewer .experience-item.is-expanded .experience-front .experience-employer { font-size: 12px; }
  #experience-viewer .experience-item.is-expanded .experience-front .experience-category { font-size: 11.5px; }
}

@media (orientation: landscape) and (max-width: 700px) and (max-height: 600px) {
  #experience-viewer .experience-item.is-expanded .experience-details { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 14px; }
  #experience-viewer .experience-item.is-expanded .experience-details > div + div { padding: 12px 0 0; border-top: 1px solid var(--exp-line); border-left: 0; }
}

/* Proposed phone-only additions to the final mobile stylesheet.
 * Paired with image-zoom.js guidance; this file alone cannot remove hidden.
 */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #work-dialog .viewer-navigation{
  --phone-viewer-control-edge:max(72px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  left:50%;
  right:auto!important;
  bottom:max(16px,env(safe-area-inset-bottom,0px))!important;
  width:min(240px,calc(100% - var(--phone-viewer-control-edge) - var(--phone-viewer-control-edge)))!important;
  transform:translateX(-50%);
 }
 #work-dialog[data-has-variants] .viewer-navigation{
  bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 66px)!important;
 }
 #work-dialog .viewer-overview{
  align-self:center;
  width:max-content;
  max-width:100%;
 }
 #work-dialog .viewer-zoom-controls{height:44px}
 /* A visible existing native thumb makes the 100% range identifiable as a
    control when the fill is still zero. No new icon or element is needed. */
 #work-dialog .viewer-zoom-range::-webkit-slider-thumb{
  width:12px;height:12px;margin-top:-2px;border-radius:50%;background:#fff;
 }
 #work-dialog .viewer-zoom-range::-moz-range-thumb{
  width:12px;height:12px;border-radius:50%;background:#fff;
 }
}

/* This review changes only short phone landscape layouts. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #home .hero{top:calc(var(--phone-nav-height) + 32px)}
 .menu-inner{width:min(520px,72vw);max-width:none;margin-inline:auto;padding-inline:0}
 #projects .project-gallery{
  --pg-card-width:min(78vw,760px);
  --pg-inset:max(var(--content-edge),calc((100% - var(--pg-card-width))/2));
 }
 #projects .pg-controls{display:none}
 #works .works-toolbar{gap:12px}
 #works .wg-filter-panel{padding:4px;max-width:calc(100% - 130px)}
 #works .wg-filter{min-height:36px;padding:8px 10px;font-size:13px;line-height:20px}
 #works .wg-filter sup{font-size:9px;margin-left:4px}
 #works .wg-view-switch{gap:14px}
 #works .wg-view-button{font-size:12px;gap:6px}
 #works .wg-view-icon{flex-basis:16px;width:16px;height:16px}
 #works .wg-view-button:after{width:calc(100% - 22px)}
 #about .about-title{margin-bottom:12px}
}
@media (orientation:landscape) and (max-width:1023px) and (max-height:340px){
 #home .hero{top:calc(var(--phone-nav-height) + 24px)}
}

/* Keep a clear bottom margin and give the identity face a little more width.
   Append after the existing phone landscape detail rules. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #experience-viewer {
    padding-bottom: max(30px, env(safe-area-inset-bottom, 0px));
  }
  #experience-viewer .experience-item.is-expanded .experience-flipper {
    grid-template-columns: clamp(170px, calc(20vw + 14px), 198px) minmax(0, 1fr);
  }
}

/* Keep the editorial and its live controls readable on short phone screens. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #about .about-editorial {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(18px, 2.8vw, 28px);
    align-items: stretch;
  }

  #about .about-intro {
    min-width: 0;
    align-self: center;
  }

  #about .about-statement {
    margin: 0 0 10px;
    font-size: 32px;
    line-height: 1.15;
  }

  #about .about-description {
    max-width: 100%;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.55;
  }

  #about .about-logo-loop {
    /* LogoLoop writes these two variables inline from data attributes. */
    --logo-loop-height: 26px !important;
    --logo-loop-gap: 24px !important;
    height: 74px;
    margin-top: 8px;
  }

  #about .about-logo-loop__track {
    height: 48px;
  }

  #about .about-logo-loop__name {
    font-size: 10px;
  }

  #about .about-logo-loop__placeholder {
    font-size: 16px;
  }

  #about .about-contact {
    min-width: 0;
    padding: 18px;
    border-radius: 24px;
  }

  #about .about-contact .about-kicker {
    margin: 0 64px 10px 0;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
  }

  #about .contact-title {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.03;
  }

  #about .contact-sub {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
  }

  #about .about-contact .contact-sling {
    --sl-size: 44px;
    top: 18px;
    right: 18px;
  }

  #about .sling-button__hint {
    right: calc(100% + 10px);
    gap: 5px;
    font-size: 11px;
  }

  #about .contact-effort {
    --effort-rail-size: 32px;
    margin-top: auto;
    padding-top: 0;
  }

  #about .effort-heading {
    gap: 12px;
    margin-bottom: 6px;
  }

  #about .effort-heading label {
    font-size: 13px;
    line-height: 1.4;
  }

  #about .effort-level {
    min-width: 72px;
    font-size: 17px;
    line-height: 1.2;
  }

  #about .effort-stage {
    /* Keep the existing 22px rail origin used by the particle renderer. */
    height: calc(var(--effort-rail-size) + 32px);
    min-height: 44px;
  }

  #about .contact-qr {
    width: min(240px, calc(100% - 32px), calc(100dvh - 104px));
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 360px) {
  #about .about-statement {
    font-size: 30px;
  }
}

/* Phone image navigation uses a fit image and a horizontal gesture. */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #work-dialog .viewer-navigation{display:none!important}
 #work-dialog .masonry-dialog-controls button{display:none}
 #work-dialog .dialog-art,#work-dialog[data-media=video] .dialog-art{touch-action:pan-y pinch-zoom}
 #work-dialog .dialog-variants,
 #work-dialog[data-variant-count="3"] .dialog-variants{
  left:auto;right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));
  transform:none;width:max-content;max-width:calc(100% - 24px);gap:2px;padding:3px;
 }
 #work-dialog .dialog-variants button{position:relative;flex:0 0 auto;min-width:44px;min-height:32px;padding:0 8px;font-size:11px;line-height:1.4}
 #work-dialog .dialog-variants button::before{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px}
 #work-dialog[data-has-variants]{padding-bottom:calc(max(var(--viewer-gap),env(safe-area-inset-bottom,0px)) + 48px)}
}
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #works .wg-filter-panel{padding:3px}
 #works .wg-filter{min-height:34px;padding:7px 8px;font-size:12.5px;line-height:20px}
 #works .wg-filter sup{font-size:8.5px}
 #works .wg-view-button{min-height:40px;font-size:11.5px;gap:5px}
 #works .wg-view-icon{flex-basis:15px;width:15px;height:15px}
}

/* The wrapper stays transparent to the existing flex layout on other screens. */
#projects .pg-reading {
  display: contents;
}

/* Phone landscape has a title row and a separately scrolling reading row. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #projects {
    scroll-margin-top: calc(var(--phone-nav-height) + 4px - var(--section-title-inset));
  }
  #projects .project-gallery {
    --pg-card-width: min(78vw, 760px);
    --pg-inset: max(var(--content-edge), calc((100% - var(--pg-card-width)) / 2));
    --pg-compact-height: clamp(258px, calc(100dvh - 128px), 378px);
  }

  #projects .pg-viewport {
    align-items: stretch;
  }

  #projects .pg-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    touch-action: pan-x pan-y pinch-zoom;
  }

  #projects .pg-name {
    position: static;
    z-index: auto;
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  #projects .pg-reading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-height: 100%;
    padding: 0 5px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y pinch-zoom;
    scrollbar-width: thin;
    scrollbar-color: #666 transparent;
    -webkit-overflow-scrolling: touch;
  }

  #projects .pg-reading > * {
    flex-shrink: 0;
  }

  #projects .pg-reading::-webkit-scrollbar {
    width: 3px;
  }

  #projects .pg-reading::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #666;
  }

  #projects .pg-controls {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 1023px) and (max-height: 360px) {
  #projects .project-gallery {
    --pg-compact-height: calc(100dvh - 106px);
  }
}

/* Phone landscape section spacing. Append after current phone refinements.
   Detail dialogs, portrait layouts and desktop rules are intentionally untouched. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 600px) {
  #experience {
    --exp-card-height: clamp(192px, calc(100dvh - 200px), 264px);
    --exp-card-width: min(max(104px, calc(var(--exp-card-height) / 1.72)), calc((100vw - 2 * var(--content-edge) - 2 * var(--exp-track-padding) - 3 * var(--exp-card-gap)) / 4));
  }
  #experience .experience-title { margin-bottom: 16px; }
  #experience .experience-viewport { margin-top: 0; }
  #experience .experience-track { padding-top: 8px; }
  #experience .experience-rail { top: 8px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .20); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .20); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .20); }
  #experience :is(.experience-track, .experience-return-proxy) .experience-position { font-size: 14px; }

  #about .about-title { margin-bottom: 22px; }
  #about .about-statement { margin-bottom: 8px; font-size: 30px; }
  #about .about-description { font-size: 14px; line-height: 1.55; }
  #about .about-logo-loop {
    --logo-loop-height: 24px !important;
    --logo-loop-gap: 22px !important;
    height: 62px;
    margin-top: 6px;
  }
  #about .about-logo-loop__track { height: 40px; }
  #about .about-contact { padding: 16px; }
  #about .about-contact .about-kicker { margin-bottom: 6px; }
  #about .contact-title { margin-bottom: 6px; font-size: 26px; }
  #about .contact-sub { margin-bottom: 6px; font-size: 14px; }
  #about .about-contact .contact-sling { --sl-size: 44px; top: 16px; right: 16px; }
  #about .contact-effort { --effort-rail-size: 32px; }
  #about .effort-heading { margin-bottom: 4px; }
  /* Retain the renderer's 22px rail origin and room for the brain's full size. */
  #about .effort-stage { height: calc(var(--effort-rail-size) + 28px); }
}

/* The shortest phones keep a visible wire without compressing the card copy. */
@media (orientation: landscape) and (max-width: 1023px) and (max-height: 360px) {
  #experience { --exp-card-height: clamp(176px, calc(100dvh - 154px), 206px); }
  #experience .experience-title { margin-bottom: 10px; }
  #experience .experience-track { padding-top: 4px; }
  #experience .experience-rail { top: 4px; }
  #experience .experience-track > .experience-item { height: calc(var(--exp-card-height) + var(--exp-wire) * .12); }
  #experience .experience-track .experience-card { top: calc(var(--exp-wire) * .12); }
  #experience .experience-track .experience-wire { height: calc(var(--exp-wire) * .12); }
}

/* Match the section rhythm and center the two landscape editorial modules. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #works .works-toolbar{margin-top:22px}
 #experience :is(.experience-track,.experience-return-proxy) :is(.experience-topline,.experience-back-heading){font-size:9px}
 #about .about-editorial{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
}

/* Keep the upright phone's secondary brands and all categories on one row. */
@media (max-width:767px) and (orientation:portrait){
 #home .logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%;padding:14px 24px max(16px,env(safe-area-inset-bottom,0px));flex:none}
 #home .logos .lg{height:24px;padding:0;align-items:center;justify-content:center}
 #home .logos .lg1,#home .logos .lg2{--brand-width:64px}
 #home .logos .lg3{--brand-width:52px}
 #home .logos .lg4{--brand-width:72px}
 #works .wg-filter-panel{padding:3px;gap:1px}
 #works .wg-filter{min-height:44px;padding:10px clamp(1.25px,.5vw,2px);font-size:clamp(10.5px,calc(2.74vw + 1.73px),12.5px);line-height:1.4}
 #works .wg-filter sup{font-size:clamp(7.5px,calc(1.37vw + 3.12px),8.5px);margin-left:1.5px}
}

@media (max-width:360px) and (orientation:portrait){
 #works .works-toolbar{margin-inline:16px}
 #works .wg-filter{padding-inline:1.25px}
}

/* Upright phones keep primary links easy to tap and long details easy to leave. */
@media (max-width:767px) and (orientation:portrait){
 #home .pill-cta{min-height:44px;font-size:max(13px,calc(16 * var(--m)))}
 #home .actions>.ghost{display:inline-flex;align-items:center;min-height:44px;font-size:max(13px,calc(15 * var(--m)))}
 #experience-viewer .experience-detail-toolbar{position:sticky;top:max(8px,env(safe-area-inset-top,0px));z-index:10;background:#050505}
}

/* Short landscape cards have room for their borders and the hanging motion. */
@media (orientation:landscape) and (max-width:1023px) and (min-height:361px) and (max-height:390px){
 #projects .project-gallery{--pg-compact-height:calc(100dvh - 140px)}
 #experience .experience-track>.experience-item{height:calc(var(--exp-card-height) + var(--exp-wire) * .10)}
 #experience .experience-track .experience-card{top:calc(var(--exp-wire) * .10)}
 #experience .experience-track .experience-wire{height:calc(var(--exp-wire) * .10)}
}

@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #home .logos{top:auto;bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 8px))}
}

/* The QR reveal follows the contact card but stays inside the phone viewport. */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #about .contact-qr{position:fixed;left:var(--qr-viewport-x,50%);top:var(--qr-viewport-y,50%);width:var(--qr-phone-size,min(288px,calc(100vw - 32px),calc(100dvh - 48px)))}
 #about .about-contact[data-qr-active]{touch-action:none}
}
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #about .contact-qr{width:var(--qr-phone-size,min(240px,calc(100vw - 32px),calc(100dvh - 48px)))}
}

/* Override the desktop focus lift on wider phones in landscape. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #works .wg-space[data-view=focus]{top:0}
}

/* Give landscape project imagery more of the card without changing its height. */
@media (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #projects .pg-card{
  /* A 16:9 hero plus two 4:3 details occupy .9375 of the column width. */
  grid-template-columns:minmax(0,min(40%,calc((var(--pg-compact-height) - 32px - var(--pg-media-gap) * .625) / .9375))) minmax(0,1fr);
 }
 #about .about-editorial{
  --about-contact-width:300px;
  max-width:760px;margin-inline:auto;
  grid-template-columns:minmax(0,368px) minmax(0,var(--about-contact-width));justify-content:center;
 }
 #about .about-contact{width:100%;max-width:300px;justify-self:center;min-height:min(280px,calc(100dvh - 146px))}
}

/* Taller landscape phones retain the desktop card's generous proportions. */
@media (orientation:landscape) and (max-width:1023px) and (min-height:410px) and (max-height:600px){
 #about .about-editorial{--about-contact-width:320px}
 #about .about-contact{
  --about-card-pad:clamp(20px,calc(20dvh - 62px),24px);
  --about-card-gap:clamp(9px,calc(15dvh - 52.5px),12px);
  max-width:320px;padding:var(--about-card-pad);border-radius:28px;
 }
 #about .about-contact .about-kicker,#about .contact-title,#about .contact-sub{margin-bottom:var(--about-card-gap)}
 #about .contact-title{font-size:clamp(30px,calc(10dvh - 11px),32px)}
 #about .about-contact .contact-sling{top:var(--about-card-pad);right:var(--about-card-pad)}
 #about .about-statement{font-size:34px;line-height:1.2;margin-bottom:12px}
 #about .about-logo-loop{--logo-loop-height:26px!important;height:68px;margin-top:10px}
 #about .about-logo-loop__track{height:44px}
}

/* Upright project cards keep the title visible while the full copy scrolls. */
@media (max-width:767px) and (orientation:portrait){
 #projects .pg-copy{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;gap:16px}
 #projects .pg-reading{
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;min-height:0;
  height:clamp(160px,24dvh,240px);padding-right:6px;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:#666 transparent;
  -webkit-overflow-scrolling:touch;
 }
 #projects .pg-reading>*{flex-shrink:0}
 #projects .pg-reading::-webkit-scrollbar{width:3px}
 #projects .pg-reading::-webkit-scrollbar-thumb{border-radius:3px;background:#666}
}

/* Center the upright controls and let their measured gaps grow with the screen. */
@media (max-width:767px) and (orientation:portrait){
 #works .works-toolbar{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:18px 0}
 #works .wg-filter-panel{flex:0 0 auto;max-width:100%;padding:3px;gap:clamp(1px,calc(5.4vw - 19.2px),4px)}
 #works .wg-filter{padding-inline:clamp(1.25px,calc(5.1vw - 17.7px),4.25px)}
 #works .wg-view-switch{justify-content:center;margin-left:0;align-self:center}
}
@media (max-width:360px) and (orientation:portrait){
 #works .works-toolbar{margin-inline:16px}
 #works .wg-filter{padding-inline:1.25px}
}

/* Wide phone banners retain their full image and put their caption underneath.
   The masonry script includes the caption's measured height in every slot. */
@media (max-width:767px), (orientation:landscape) and (max-width:1023px) and (max-height:600px){
 #works .wg-masonry-item[data-caption-below] .wg-grid-card{background:transparent}
 #works .wg-masonry-item[data-caption-below] .wg-grid-image{
  height:var(--wg-image-height);
  border-radius:12px;
 }
 #works .wg-masonry-item[data-caption-below] .wg-grid-caption{
  position:static;
  margin:0;
  padding:8px 2px 4px;
  border-radius:0;
  background:none;
  opacity:1;
  transform:none;
 }
}

/* Taller phone landscapes give section titles more weight within the same screen budget. */
@media (orientation:landscape) and (max-width:1023px) and (min-height:410px) and (max-height:600px){
 #projects .project-title,#works .works-title,#about .about-title{font-size:50px}
 #experience .experience-title{font-size:46px}
 #projects .project-gallery{--pg-compact-height:clamp(258px,calc(100dvh - 134px),378px)}
 #works .wg-space{--wg-scene-height:clamp(156px,calc(100dvh - 198px),280px)}
}