/* Responsive finishing layer: layout fixes, not page-wide overflow masking. */
:root{--responsive-header-height:76px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--responsive-header-height) + 20px)}
img,video,iframe{max-width:100%}
.case-main,.work-main,.personal-about,.home-cases,.story-copy,.about-extras{min-width:0}
.work-grid,.story-split,.credits,.about-note-grid,.about-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-note-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.story-split{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr)}
.story-split:nth-of-type(even){grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr)}
.responsive-menu-toggle{display:none;align-items:center;justify-content:center;min-height:44px;padding:0 14px;background:var(--portfolio-panel);color:var(--portfolio-ink);border:1px solid var(--portfolio-line);border-radius:24px;font:12px var(--portfolio-mono,monospace);cursor:pointer}
.responsive-menu-toggle:focus-visible{outline:2px solid var(--portfolio-accent);outline-offset:4px}
.case-header .responsive-menu-toggle{width:auto;height:44px;margin-left:auto}
.case-header-links>a,.case-header>nav>a,.home-work-link>a{display:inline-flex;align-items:center;min-height:44px}
.case-header{height:auto;min-height:76px}
.sidebar{top:76px}
.case-main,.work-main{padding-top:calc(var(--responsive-header-height) + 48px)}
.personal-work-timeline .tl-scroll{overscroll-behavior-x:contain}
.personal-work-timeline .tl-bar{max-width:none}
.history-label{pointer-events:none}
.responsive-showcase-back{font:inherit;color:inherit;background:var(--portfolio-panel);border:1px solid var(--portfolio-line);border-radius:20px;padding:10px 14px;min-height:44px;pointer-events:auto;cursor:pointer}
.sc-back,.sc-open{min-height:44px;display:inline-flex;align-items:center}
.sc-sound{width:44px;height:44px}
.sc-dot{width:44px;height:44px}
.sc-dots{flex-wrap:wrap;justify-content:center;max-width:100%}
.sc-focus-info{max-height:calc(100svh - var(--sc-card-bottom,66%) - 24px);overflow-y:auto;pointer-events:auto;padding-inline:16px;overscroll-behavior:contain}
.sc-hud--top{padding-top:max(20px,env(safe-area-inset-top));padding-right:84px}
.sc-meta-top{gap:8px}
.sc-hud--bottom{padding-bottom:max(20px,env(safe-area-inset-bottom))}
.sc-stage.is-focused .sc-hud--bottom{pointer-events:none}
.contact-story .field input,.contact-story .field textarea{font-size:16px;min-height:44px}
.contact-story .field textarea{min-height:100px;resize:vertical}
.contact-story .radio button,.contact-story .bar a,.contact-story .foot button,.contact-story button{min-height:44px}
.projection-actions button,.projection-nav>a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.projection-actions{gap:12px}
.about-story-nav a,.observation-toggle{min-height:44px;display:inline-flex;align-items:center}
.state-switch,.billing-switch{flex-wrap:wrap}
.state-switch button,.demo [role=tab],.iihs-tablist button,.emroi-tabs button{min-height:44px}
.card-meta{line-height:1.7;gap:16px}
footer{flex-wrap:wrap}
footer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:1180px){
 body.has-character-brand .home-work-link{top:92px;left:auto;right:20px;transform:none;max-width:min(420px,calc(100vw - 40px));width:100%;border-radius:16px;padding:12px;display:none;flex-direction:column;align-items:stretch;gap:0;z-index:1300;background:var(--portfolio-bg)}
 body.has-character-brand .home-work-link.is-open{display:flex}
 .home-work-link>a{padding:8px 12px;font-size:13px;border-radius:8px}
 .home-work-link>a:hover{background:var(--portfolio-panel)}
 .responsive-menu-toggle--home{display:flex;position:fixed;right:76px;top:28px;z-index:1201}
 body.has-character-brand .garage-body .hdr{height:96px}
 body.has-character-brand .garage-body .hdr-right{margin-right:94px}
 body.has-character-brand .portfolio-theme-toggle{top:28px;right:20px;width:44px;height:44px}
 body.has-character-brand .character-brand--home{width:65px;height:65px;left:22px;top:17px}
 body.has-character-brand .personal-hero{padding-top:66px!important}
}
@media(max-width:1100px){
 .sidebar{display:none}
 .case-main{margin-left:0;margin-right:auto;max-width:1050px}
 .story-split,.story-split:nth-of-type(even){grid-template-columns:1fr}
 .story-split:nth-of-type(even)>.exhibit,.story-split:nth-of-type(even)>.story-copy{grid-column:auto;grid-row:auto}
 .garage-ascii-stage{display:block;position:relative;height:min(70svh,620px)}
 .garage-ascii-stage .garage-ascii{height:100%}
 .garage-ascii-stage:has(.gt-set:empty){height:140px}
 .garage-ascii-stage .gt-cab-scene:not(.gt-cab-scene--parked){left:50%!important;top:40px!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important}
 .garage-ascii-stage:has(.gt-room) .gt-cab-scene{position:fixed!important;transform:none!important}
}
@media(max-width:800px){
 .case-header{padding:12px 76px 12px 20px;flex-wrap:nowrap;gap:12px}
 .case-header .responsive-menu-toggle{display:flex}
 .case-header>a:not(.character-brand){font-size:11px;white-space:normal;line-height:1.5}
 .case-header-links,.case-header>nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);padding:12px;border:1px solid var(--portfolio-line);border-radius:14px;background:var(--portfolio-bg);box-shadow:0 12px 30px #0003;flex-direction:column;align-items:stretch;gap:0}
 .case-header-links.is-open,.case-header>nav.is-open{display:flex}
 .case-header-links>a,.case-header>nav>a{padding:8px 12px;font-size:13px}
 .case-header .character-brand{width:48px;height:48px}
 .case-main,.work-main{padding-left:24px;padding-right:24px;padding-top:calc(var(--responsive-header-height) + 36px)}
 .portfolio-theme-toggle{width:44px;height:44px;top:16px;right:18px}
 .personal-about{grid-template-columns:1fr;gap:32px}
 .home-cases .work-grid,.work-main .work-grid{gap:44px 24px}
}
@media(max-width:600px){
 .responsive-menu-toggle--home{right:72px;top:24px;min-height:44px;padding-inline:12px}
 body.has-character-brand .garage-body .hdr-right{margin-right:84px;gap:8px}
 body.has-character-brand .hdr .hdr-cmd-label,body.has-character-brand .hdr .hdr-cmd-keys{display:none}
 body.has-character-brand .hdr .hdr-cmd:before{content:'⌕';font-size:24px;opacity:1;background:none;mask:none;-webkit-mask:none;display:grid;place-items:center;padding:0;color:var(--portfolio-ink)}
 body.has-character-brand .hdr .hdr-cmd,body.has-character-brand .hdr .hdr-terminal{width:44px;min-width:44px;height:44px;padding:0;justify-content:center}
 body.has-character-brand .garage-body .hdr{padding-right:72px!important;padding-left:90px!important}
 body.has-character-brand .portfolio-theme-toggle{top:24px;right:16px}
 body.has-character-brand .character-brand--home{left:16px;top:17px;width:60px;height:60px}
 body.has-character-brand .personal-hero{padding:58px 22px 26px!important}
 .personal-hero h1{font-size:clamp(20px,5.6vw,23px);line-height:1.5}
 .personal-hero nav{gap:10px 24px;margin-top:22px}
 .personal-hero nav a{min-height:44px;display:inline-flex;align-items:center;font-size:11px}
 .garage-intro{margin-bottom:24px!important}
 .garage-intro-readout{gap:14px}
 .garage-ascii-stage{height:520px}
 .garage-ascii-stage:has(.gt-set:empty){height:90px}
 .garage-ascii-stage .gt-cab-scene:not(.gt-cab-scene--parked){top:24px!important}
 .personal-work-timeline{padding:26px 0 34px}
 .personal-work-timeline .tl-scroll{scrollbar-width:thin;scrollbar-color:var(--portfolio-line) transparent;--tl-fade:12px}
 .personal-work-timeline .tl-scroll::-webkit-scrollbar{display:block;height:5px}
 .personal-work-timeline .tl-scroll::-webkit-scrollbar-thumb{background:var(--portfolio-line);border-radius:4px}
 .personal-work-timeline .tl-hint{font-size:11px;line-height:1.7}
 .home-cases{padding:44px 22px}
 .home-cases .work-grid,.work-main .work-grid{grid-template-columns:1fr;gap:40px;margin-top:32px}
 .home-cases>h2{font-size:clamp(32px,8.8vw,40px)}
 .work-main h1{font-size:clamp(38px,9.5vw,52px);line-height:1.08}
 .case-main h1{font-size:clamp(36px,9.6vw,46px);line-height:1.08}
 .case-main,.work-main{padding-left:22px;padding-right:22px}
 .credits,.iihs-case .credits,.scope-numbers{grid-template-columns:1fr}
 .scope-numbers{gap:24px;padding:24px 0}
 .scope-numbers strong{font-size:60px}
 .scope-flow{flex-direction:column}
 .next-project strong{font-size:clamp(30px,8vw,42px);gap:16px}
 .about-observation{grid-template-columns:1fr;gap:16px}
 .observation-slot{max-width:180px}
 .observation-slot .personal-photo{display:none}
 .is-revealed .observation-photo{display:block}
 .observation-toggle{font-size:11px;margin-top:0}
 .about-story-nav{gap:8px 20px;font-size:11px}
 .about-note-grid,.about-photo-grid{grid-template-columns:1fr}
 .about-extras{padding:44px 22px}
 .about-photo-grid .personal-photo:nth-child(2){margin-top:0}
 .personal-about{padding:36px 22px;margin-block:20px}
 .personal-band{padding-top:36px}
 .ps-sheet{margin-inline:22px}
 .ps-frame{width:min(280px,calc(100vw - 80px))}
 .sc-heading{max-width:48%;padding-top:8px}
 .sc-title{font-size:22px;line-height:1.2}
 .sc-tagline{font-size:12px;line-height:1.6}
 .sc-kicker{font-size:9px;line-height:1.6}
 .sc-hud--top{padding-left:16px;padding-right:72px}
 .sc-hud--bottom{padding-inline:16px;gap:8px}
 .sc-focus-desc{font-size:12px;line-height:1.7}
 .sc-hint{font-size:9px;line-height:1.7}
 .sc-esc{top:18px;left:16px}
 .sc-back{font-size:10px;padding-inline:0}
 .sc-meta-top{gap:5px}
 .projection-nav{padding:12px 72px 12px 16px}
 .projection-actions{gap:6px}
 .projection-actions button{padding:8px;font-size:10px}
 .projection-nav>a{font-size:10px}
 .contact-story .term{width:calc(100% - 32px);max-width:560px}
 .contact-story .field{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin-bottom:12px}
 .contact-story .field label{min-width:0;font-size:12px}
 .contact-story .field input,.contact-story .field textarea{width:100%;max-width:100%;font-size:16px}
 .contact-story .foot{flex-wrap:wrap;gap:8px}
 .contact-story .radio{flex-wrap:wrap;gap:4px}
 .gt-mobile-notes{bottom:max(12px,env(safe-area-inset-bottom));left:12px}
}
@media(max-height:600px) and (max-width:1100px){
 html:has(.contact-story){height:auto}
 .contact-story{height:auto;min-height:100svh;overflow-y:auto;padding:76px 0 40px}
 .contact-story .stage{position:relative;inset:auto;display:block}
 .contact-story .contact-photo{position:relative;left:auto;top:auto;transform:rotate(-2deg);width:120px;margin:0 auto 24px}
 .contact-story .term{margin:0 auto;width:calc(100% - 40px);max-width:650px}
 .projection-screen{top:36%;width:min(60vw,calc(32svh * var(--photo-ratio)))}
 .projected-frame figcaption{width:min(420px,82vw);top:calc(100% + 12px);right:50%;transform:translateX(50%)}
 .projected-frame p{font-size:9px;line-height:1.5}
 .projected-frame h2{font-size:18px;margin-block:4px}
 .projection-console{bottom:8%;font-size:7px}
 .projection-intro{top:23%}
 .projection-intro h1{font-size:32px;margin-block:12px}
 .sc-heading{max-width:45%}
 .sc-hud--bottom{gap:0;padding-bottom:12px}
 .sc-hint{font-size:8px}
 .sc-focus-info{gap:8px;padding-top:8px}
 .sc-focus-desc{font-size:10px;line-height:1.4}
}
@media(min-width:760px) and (max-width:1100px){
 .garage-ascii-stage:not(:has(.gt-set:empty)){height:660px}
}
@media(max-width:759px){
 .garage-ascii-stage:not(:has(.gt-set:empty)){height:540px}
 .garage-ascii-stage:not(:has(.gt-room)) .gt-window{left:50%!important;top:24px!important;width:calc(100% - 32px)!important;max-width:600px;height:480px!important;transform:translateX(-50%)!important}
 .gt-window input{font-size:16px!important;min-width:0}
 .gt-mobile-notes summary{min-height:44px;display:flex;align-items:center}
}
.projection-demo{top:110px}
@media(max-height:600px){.projection-demo{display:none}}
.responsive-nav.is-open{max-height:calc(100svh - 108px);overflow-y:auto;overscroll-behavior:contain}

/* Experience stays fully readable without horizontal hunting on small screens. */
@media(max-width:1100px){
 .personal-work-timeline .tl-scroll{overflow:visible;touch-action:pan-y;margin:0 24px;mask-image:none;-webkit-mask-image:none}
 .personal-work-timeline .tl-track{width:100%!important;height:auto!important;display:flex;flex-direction:column;gap:0;padding:0;border-left:1px solid var(--portfolio-line)}
 .personal-work-timeline .tl-axis,.personal-work-timeline .tl-grid,.personal-work-timeline .tl-now{display:none}
 .personal-work-timeline .tl-bar,.personal-work-timeline .tl-bar.history-short{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100px;padding:16px 0 20px 20px;margin:0;border:0;background:none;box-shadow:none;transform:none;overflow:visible}
 .personal-work-timeline .tl-bar:before,.personal-work-timeline .tl-bar:after{display:none}
 .personal-work-timeline .history-label,.personal-work-timeline .history-short .history-label{position:static;white-space:normal;align-items:flex-start;gap:14px}
 .personal-work-timeline .history-copy{min-width:0;gap:6px}
 .personal-work-timeline .history-copy strong{font-size:16px;line-height:1.4}
 .personal-work-timeline .history-copy span{font-size:11px;line-height:1.7}
 .personal-work-timeline .history-logo{width:64px;height:40px}
 .personal-work-timeline .tl-hint{font-size:0}
 .personal-work-timeline .tl-hint:after{content:'2024 onwards';font-size:11px}
}
@media(max-width:800px){
 .home-cases .work-grid{grid-template-columns:1fr;gap:44px}
 .home-cases .work-card h2{font-size:30px}
}