/* The approved desktop stays intact. Narrow screens retain its content,
   artwork and category sequence, with space for reading and touch. */
.phone-category-row{display:none}
@media(max-width:1024px){
 .reference-header{gap:20px}
 .reference-header nav{gap:18px}
 .reference-header nav a{min-height:44px;display:inline-flex;align-items:center}
 .reference-header .search-button{width:44px;height:44px;margin:0}
 .reference-header .search-button span{width:14px;height:14px}
 .reference-header .search-button span:after{width:7px;right:-5px;bottom:-2px}
 .reference-studio{display:none}
 .reference-tools{gap:16px;flex-wrap:wrap}
 .reference-tools .settings button{min-height:44px}
 .section-shell{width:86%}
 .contact-bottom{flex-wrap:wrap;align-items:center}
 .contact footer{flex-wrap:wrap;line-height:1.7}
 .entry-settings button,.portfolio-opening-footer a,.product-film-footer button,.motion-sculpture-footer button,.motion-work-footer button,.ai-chapter-nav a{min-height:44px;display:inline-flex;align-items:center}
 .category-entry .entry-back{min-height:44px}
 .ai-chapter-nav{gap:18px;justify-content:space-between}
 .ai-chapter-nav a{gap:5px}
 .ai-opening-footer,.portfolio-opening-footer,.product-end,.portfolio-end{flex-wrap:wrap}
 .inquiry-dialog{width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 32px)}
}

@media(min-width:701px) and (max-width:1024px){
 .reference-hero{min-height:0;padding-bottom:30px}
 .reference-composition{aspect-ratio:1774/1300}
 .reference-header{top:3%;padding-bottom:2%}
 .reference-header .kf-mark{font-size:34px}
 .reference-intro{top:17%;left:0;right:0;translate:none}
 .reference-intro h1{font-size:clamp(26px,3.7vw,38px)}
 .reference-intro p{font-size:17px}
 .reference-chapters{inset:34% 0 5%;translate:0 8px}
 .reference-piece{top:8%;height:84%}
 .reference-art>.panel-name{font-size:clamp(14px,1.8vw,19px);padding:12px 5%}
 .reference-piece[data-category=motion] .panel-name{font-size:clamp(12px,1.5vw,16px)}
 .reference-piece[data-category=ai] .panel-name{font-size:19px}
 .services-grid{gap:6%}
 .contact .email{font-size:22px}
 .entry-navigation{padding-right:155px!important;gap:16px!important}
 .category-entry .entry-back{font-size:11px;padding:12px;right:5%}
 .entry-brand .kf-mark{font-size:32px}
 .entry-settings{gap:10px}
 .ai-story-notes{grid-template-columns:1fr;gap:25px}
 .ai-story-notes p{font-size:12px}
 .ai-map-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 4%}
 .ai-map-grid[aria-label="Procedural printed-vinyl map previews"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
 html{scrollbar-gutter:auto;scroll-padding-top:16px}
 .reference-hero{min-height:0;padding:0 6%}
 .reference-composition{aspect-ratio:auto;max-width:none;height:max(380px,calc(100svh - 78px));display:flex;flex-direction:column}
 .reference-header{position:relative;inset:auto;flex-wrap:wrap;padding:12px 0 4px;gap:0;translate:none;flex:none}
 .reference-header .kf-mark{font-size:30px}
 .reference-header nav{width:100%;justify-content:space-between;font-size:12px;gap:8px}
 .reference-header nav a{min-height:44px;display:inline-flex;align-items:center}
 .reference-header .search-button{width:44px;height:44px;margin:0}
 .search-button span{width:14px;height:14px}
 .search-button span:after{width:7px;right:-5px;bottom:-2px}
 .reference-intro{position:relative;inset:auto;translate:none;padding:18px 0 24px;flex:none}
 .reference-intro h1{white-space:normal;font-size:clamp(25px,7.2vw,36px);line-height:1.08;max-width:460px;margin-inline:auto;text-wrap:balance}
 .reference-intro p{font-size:13px;line-height:1.3;margin-top:10px}
 .reference-chapters{position:relative;inset:auto;translate:none;transform:none;will-change:auto;perspective:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(5,minmax(0,1fr));gap:0;width:min(100%,440px);margin:0 auto 24px;flex:1;min-height:220px}
 .reference-piece{position:relative;left:0!important;top:auto;width:100%;height:100%;aspect-ratio:auto;outline-offset:2px!important;touch-action:pan-y;z-index:1!important}
 .reference-piece .reference-art,.entry-tile .reference-art{transform:none!important;will-change:auto;box-shadow:none!important;border:0;background:transparent!important;color:#101314!important;overflow:visible}
 .reference-art>.modern-panel-image,.reference-art>svg,.reference-art>.live-art-canvas,.reference-art>.live-art-plate,.reference-art>.studio-motion-film,.reference-art>.panel-name{display:none!important}
 .reference-art::after{display:none}
 .phone-category-row{position:absolute;inset:0;display:grid;grid-template-columns:18px minmax(0,1fr) 24px;align-items:center;gap:12px;text-align:left;border-bottom:1px solid #10131438;transition:background 180ms ease}
 .phone-category-number{font:400 9px Arial,sans-serif;color:#b84612;align-self:center}
 .phone-category-copy{display:flex;flex-direction:column;gap:7px;padding-block:10px}
 .phone-category-name{font:400 clamp(26px,7.7vw,39px)/1.04 Arial,sans-serif;letter-spacing:-.045em;color:#000}
 .reference-piece[data-category=motion] .phone-category-name{font-size:clamp(21px,6.1vw,30px)}
 .phone-category-description{font:400 11px/1.4 Arial,sans-serif;letter-spacing:0;color:#282d32}
 .phone-category-arrow{font:400 24px Arial,sans-serif;color:#b84612;justify-self:end;transition:transform 180ms ease}
 .reference-piece:active .phone-category-row,.reference-piece:focus-visible .phone-category-row{background:#faf8f37a}
 .reference-piece:active .phone-category-arrow{transform:translate(2px,-2px)}
 .reference-tools{padding:6px 6%;gap:0 8px;min-height:78px;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;align-content:center}
 .reference-tools>span:first-child{grid-column:1/-1;width:100%;font-size:10px;line-height:20px}
 .reference-tools>a{font-size:10px;min-height:44px;display:inline-flex;align-items:center}
 .reference-tools .settings{gap:10px;margin-left:0}
 .reference-tools .settings button{font-size:10px;padding-inline:0}
 .reference-tools::before{display:none}
 .landing-film-stage::after{background:linear-gradient(#faf8f3 0%,#faf8f3dd 7%,#faf8f399 22%,#faf8f380 88%,#faf8f399)}
 .story-section{min-height:0;padding:64px 0 75px}
 .section-shell{width:88%}
 .section-index{gap:15px;margin-bottom:38px;line-height:1.8}
 .story-section h2{font-size:clamp(35px,9vw,48px)}
 .story-section p{font-size:14px;line-height:1.85}
 .section-heading{display:block}
 .section-heading>p{margin-top:24px}
 .practice-principles{margin-top:40px;gap:30px}
 .practice-principles h3{font-size:28px;margin-top:22px}
 .profile-grid,.services-grid{grid-template-columns:minmax(0,1fr);gap:38px}
 .profile .portrait-frame{width:min(82%,300px);max-width:300px;margin-inline:auto}
 .profile figcaption{width:min(82%,300px);margin-inline:auto}
 .facts{gap:25px;flex-wrap:wrap}
 .facts strong{font-size:33px}
 .collections .collection-links a{grid-template-columns:20px minmax(0,1fr) 22px;padding:24px 0;gap:12px}
 .collections .collection-links h3{font-size:32px}
 .contact-heading{gap:14px;margin-bottom:40px}
 .contact-heading h2{font-size:clamp(42px,12vw,64px)}
 .contact-heading>span{font-size:30px}
 .contact-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
 .contact .email{font-size:26px;overflow-wrap:anywhere}
 .contact .phone{font-size:18px}
 .contact .socials{margin:0;flex-wrap:wrap;gap:20px}
 .contact .socials a{min-height:44px;display:inline-flex;align-items:center}
 .contact footer{gap:18px;margin-top:50px;font-size:9px}
 .contact footer a{min-height:44px;display:inline-flex;align-items:center}
 .category-entry .entry-template{padding-inline:6%}
 .entry-navigation{height:118px;padding-right:135px!important;position:relative;align-items:flex-start!important;padding-top:20px!important}
 .entry-brand .kf-mark{font-size:30px}
 .entry-settings{position:absolute;top:66px;left:0;right:auto;margin:0;gap:18px;z-index:1}
 .entry-settings button{font-size:11px}
 .category-entry .entry-back{top:20px;right:6%;padding:12px 10px;font-size:11px;min-height:44px}
 .category-portfolio{padding-top:25px}
 .portfolio-motion{padding-top:0}
 .product-hero{min-height:0;padding-top:26px;padding-bottom:20px}
 .product-hero-heading>.product-eyebrow{margin-right:0}
 .entry-template .product-hero h1{font-size:clamp(43px,11vw,60px)}
 .product-film-stage{aspect-ratio:4/3;min-height:0;max-height:none}
 .product-film-caption{inset:auto 12px 15px}
 .film-name{font-size:clamp(22px,6.4vw,32px)}
 .film-toggle{min-width:44px;min-height:44px}
 .product-film-footer nav{flex-wrap:wrap;gap:5px 16px}
 .product-discover{min-height:44px;display:inline-flex;align-items:center}
 .product-project-heading h2{font-size:clamp(42px,13vw,62px)}
 .product-process summary,.architecture-more summary{min-height:48px}
 .product-expanded-gallery{display:flex;flex-direction:column;padding:25px 0 35px;gap:35px}
 .expanded-view{width:100%;margin:0!important}
 .expanded-view:nth-child(2n+3){width:90%;align-self:flex-end}
 .expanded-wireframe{width:100%}
 .portfolio-corner{--contour-gap:8px}
 .motion-opening{height:calc(100svh - 118px);min-height:600px;max-height:950px}
 .motion-opening>.portfolio-kicker{top:25px}
 .motion-sculpture-footer{flex-wrap:wrap;gap:8px}
 .motion-sculpture-footer>div{gap:24px}
 .motion-sculpture-footer button,.motion-work-footer button{font-size:11px}
 .motion-sculpture-description,.portfolio-title>p{font-size:13px}
 .portfolio-opening-footer a,.portfolio-end a,.product-end a{min-height:44px;display:inline-flex;align-items:center}
 .ai-opening{min-height:0}
 .ai-opening-copy>p:not(.portfolio-eyebrow){font-size:14px}
 .ai-chapter-nav{top:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:8px 0}
 .ai-chapter-nav a{font-size:11px;min-height:44px;gap:5px}
 .ai-chapter{scroll-margin-top:115px}
 .ai-section-heading,.ai-story-notes,.ai-practice-intro,.ai-website-principles{grid-template-columns:minmax(0,1fr)}
 .ai-section-heading>p:last-child,.ai-story-notes p,.ai-secondary-study>div>p,.ai-house-story>div>p{font-size:13px}
 .ai-mood-toolbar{flex-wrap:wrap;gap:12px}
 .ai-mood-toolbar button,.ai-comparison-toolbar button{min-height:44px;font-size:11px}
 .ai-code-example pre{font-size:12px}
 .ai-process-disclosure summary{min-height:48px}
 .inquiry-dialog{padding:64px 24px 30px}
 .inquiry-dialog h2{font-size:52px}
 .inquiry-close{top:12px;right:14px;min-height:44px}
 .inquiry-dialog label{font-size:13px}
 .inquiry-dialog input,.inquiry-dialog select,.inquiry-dialog textarea{font-size:16px;min-height:48px}
 .inquiry-note{font-size:11px}
 #section-search{padding:24px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto}
 #section-query{font-size:16px}
}
@media(max-width:700px) and (max-height:650px){
 .reference-header{padding-top:8px}
 .reference-header .kf-mark{font-size:26px}
 .reference-intro{padding:12px 0 18px}
 .reference-intro h1{font-size:24px}
 .reference-intro p{font-size:12px;margin-top:7px}
 .reference-chapters{margin-bottom:18px}
 .phone-category-copy{gap:3px;padding-block:4px;min-width:0}
 .phone-category-name{font-size:22px}
 .reference-piece[data-category=motion] .phone-category-name{font-size:16.5px;white-space:nowrap}
 .phone-category-description{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:360px){
 .entry-brand .kf-mark{font-size:27px}
 .category-entry .entry-back{font-size:10px;padding-inline:8px}
 .reference-header nav{font-size:11px}
 .reference-tools>a{font-size:9px;white-space:nowrap}
 .inquiry-dialog{padding-inline:20px}
 .inquiry-dialog h2{font-size:46px}
}

/* Back to home belongs on the left; reserve its space beside the desktop logo. */
.category-entry .entry-navigation{padding-right:0!important;gap:24px!important}
.category-entry .entry-brand{margin-left:160px}
.category-entry .entry-back{left:5%;right:auto}
.category-entry .entry-settings{position:static;margin-left:auto}
@media(max-width:700px){
 .category-entry .entry-brand{margin-left:0}
 .category-entry .entry-back{left:6%;right:auto;top:66px}
 .category-entry .entry-settings{position:absolute;top:66px;left:auto;right:0;margin:0;gap:10px}
}

/* Fit portfolio media to both browser dimensions, preserving the whole frame. */
.category-portfolio,.product-browser{--gallery-media-height:min(72svh,760px);--opening-media-height:min(660px,max(160px,calc(100svh - 420px)))}
.entry-template .portfolio-title h1{font-size:clamp(38px,4.5vw,66px)}
.entry-template .product-browser-heading h1{font-size:clamp(34px,4.5vw,60px)}
.entry-template .product-browser-heading{padding-bottom:14px;margin-bottom:24px}
.product-browser .product-browser-films{width:min(100%,1280px,calc(min(660px,max(160px,100svh - 350px)) * 16 / 9));margin-inline:auto}
.product-browser .product-film-stage{width:100%;height:auto;aspect-ratio:16/9;min-height:0;max-height:none}
.product-browser .product-film{object-fit:contain}
.portfolio-picture .portfolio-contour,.product-image .portfolio-contour{width:fit-content;max-width:100%;margin-inline:auto}
.portfolio-picture .portfolio-contour-clip>img,.product-image .portfolio-contour-clip>img{width:auto;max-width:100%;height:auto;max-height:var(--gallery-media-height);object-fit:contain;transform:none}
.architecture-hero-picture .portfolio-contour-clip>img,.furniture-hero-picture .portfolio-contour-clip>img{max-height:var(--opening-media-height)}
.furniture-opening{min-height:0}
.furniture-hero-picture{flex:none}
.portfolio-picture figcaption,.product-image figcaption{text-align:center}
@media(max-width:700px){
 .category-portfolio{--opening-media-height:max(160px,calc(100svh - 390px))}
 .entry-template .portfolio-title h1{font-size:clamp(34px,8vw,47px)}
 .entry-template .product-browser-heading h1{font-size:clamp(32px,8vw,47px)}
}
@media(max-height:600px){
 .category-portfolio,.product-browser{--opening-media-height:40svh;--gallery-media-height:65svh}
 .entry-template .portfolio-title h1,.entry-template .product-browser-heading h1{font-size:32px}
 .portfolio-title{margin-bottom:24px}
}
@media(min-width:701px) and (max-height:600px){
 .product-browser,.category-portfolio{padding-top:16px}
 .entry-template .product-browser-heading{grid-template-columns:minmax(0,1fr) minmax(180px,220px);align-items:end;gap:20px;margin-bottom:18px}
 .portfolio-kicker{margin-bottom:16px}
 .portfolio-title{margin-bottom:20px}
}

/* Paired opening studies and consistently expanded architecture rows. */
.portfolio-opening-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;padding:14px;align-items:start}
.portfolio-opening-pair .portfolio-picture{margin:0;min-width:0;background:transparent;overflow:visible}
.portfolio-opening-pair .portfolio-contour{width:100%;transform:scale(var(--contour-scale,1));transform-origin:center}
.portfolio-opening-pair .portfolio-contour-clip>img{width:100%;height:auto;max-height:var(--opening-media-height);object-fit:contain}
.furniture-opening-pair .furniture-hero-picture figcaption{position:static;clip:auto;clip-path:none;width:auto;height:auto;overflow:visible}
.portfolio-architecture .architecture-expanded{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 48px;padding:14px}
.portfolio-architecture .architecture-expanded>figure,.portfolio-architecture .architecture-expanded>figure:first-child{grid-column:auto;margin:0;min-width:0}
.portfolio-architecture .architecture-expanded .portfolio-contour{width:100%;transform:scale(var(--contour-scale,1));transform-origin:center}
.portfolio-architecture .architecture-expanded .portfolio-contour-clip>img{width:100%;height:auto;max-height:var(--gallery-media-height);object-fit:contain}
@media(min-width:1500px){.portfolio-architecture .architecture-expanded{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .portfolio-opening-pair,.portfolio-architecture .architecture-expanded{grid-template-columns:minmax(0,1fr);gap:40px;padding:14px 10px}
 .portfolio-architecture .architecture-expanded>figure{grid-column:auto}
}

/* Desktop fullscreen includes the timeline; handhelds keep inline playback. */
.product-browser .product-playback-actions{display:flex;justify-content:flex-end;margin-top:12px}
@media(max-width:1024px),(hover:none),(pointer:coarse){.product-browser .product-playback-actions{display:none}}
.product-browser .product-fullscreen-toggle{border:1px solid #ffffff40;padding:9px 14px;color:#eee9df;min-height:36px}
.product-browser .product-fullscreen-toggle:hover{border-color:#ff8a45;color:#ff8a45}
.product-browser .product-fullscreen-toggle:focus-visible{outline:2px solid #ff8a45;outline-offset:4px}
.product-browser .product-highlight.is-product-fullscreen{
 position:fixed;inset:0;z-index:1000;box-sizing:border-box;width:100%;height:100dvh;max-width:none;min-height:0;margin:0;
 display:flex;flex-direction:column;gap:0;background:#111416;
 padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
}
.product-browser .is-product-fullscreen .product-film-stage{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;max-height:none}
.product-browser .is-product-fullscreen .product-film{width:100%;height:100%;object-fit:contain}
.product-browser .is-product-fullscreen .product-film-footer{flex:none;padding:14px 0 0;border:0;width:100%}
.product-browser .is-product-fullscreen .product-timeline{display:block;width:100%;max-width:none}
.product-browser .is-product-fullscreen .product-discover{display:none}
.product-browser .is-product-fullscreen .product-film-seek{min-height:28px;cursor:pointer}
.product-highlight::backdrop{background:#111416}
@media(max-height:450px){.product-browser .is-product-fullscreen .product-film-footer{padding-top:6px}.product-browser .is-product-fullscreen .product-playback-actions{margin-top:5px}}

/* Fill gallery rows in source order; former art-direction offsets must not
   reserve empty columns after studies move into the opening pair. */
.portfolio-furniture .furniture-composition{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;padding:14px 14px 48px;align-items:start}
.portfolio-furniture .furniture-composition>.furniture-work{grid-column:auto;grid-row:auto;width:100%;margin:0!important;min-width:0;align-self:start}
.portfolio-furniture .furniture-composition .portfolio-contour{width:100%;transform:scale(var(--contour-scale,1));transform-origin:center}
.portfolio-furniture .furniture-composition .portfolio-contour-clip>img{width:100%;height:auto;object-fit:contain}
.category-portfolio .portfolio-intro{padding:clamp(40px,5vw,72px) 0 36px;gap:20px 6%}
.portfolio-architecture .architecture-chapter{padding-top:clamp(48px,5vw,72px)}
.portfolio-architecture .architecture-chapter-heading{padding:0 0 32px}
.portfolio-architecture .architecture-study{padding-bottom:48px}
.portfolio-architecture .architecture-expanded{gap:40px 48px}
.portfolio-motion .motion-sculpture-composition{gap:56px 5%;padding-bottom:48px}
.portfolio-motion .motion-sculpture-paired+.motion-sculpture-paired{margin-top:0}
.product-browser .product-project-images,.product-browser .product-expanded-gallery{gap:40px}
.portfolio-ai .ai-detail-pair>.ai-result:last-child,.portfolio-ai .ai-surface-macro{margin-top:0}
.portfolio-ai .ai-print-result{padding-top:0;width:100%}
@media(max-width:700px){
 .portfolio-furniture .furniture-composition{grid-template-columns:minmax(0,1fr);gap:36px;padding:10px 10px 36px}
 .category-portfolio .portfolio-intro{padding:40px 0 28px}
 .portfolio-architecture .architecture-expanded{gap:32px}
 .portfolio-architecture .architecture-study{padding-bottom:36px}
 .portfolio-motion .motion-sculpture-composition{gap:44px;padding-bottom:36px}
 .portfolio-motion .motion-sculpture{width:100%;align-self:stretch}
 .product-browser .product-project-images,.product-browser .product-expanded-gallery{gap:32px}
 .portfolio-ai .ai-detail-pair>.ai-result:last-child,.portfolio-ai .ai-surface-macro,.portfolio-ai .ai-print-result{width:100%;align-self:stretch;justify-self:stretch}
}