/* A chapter's reading area is the viewport below the fixed header. */
#mainPage{--screen-bottom:max(var(--chapter-top),env(safe-area-inset-bottom,0px))}
#mainPage>section{min-width:0}

/* Keep the editing artwork inside the space left by its copy. */
#mainPage #the-edit .edit-sticky{height:var(--scene-height);min-height:0}
#mainPage #the-edit .edit-layout{height:100%;min-height:0;grid-template-rows:minmax(0,1fr)}
#mainPage #the-edit .edit-art{height:100%;min-height:0;margin:0}
#the-edit .edit-planes{inset:3% 7%}
@media(max-width:800px){
 #mainPage #the-edit .edit-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px}
 #the-edit.edit-four .edit-explanation{min-height:0;margin-bottom:12px}
}

/* The cube field uses remaining height, rather than a fixed minimum of 540px. */
#mainPage #skills .skills-showcase{display:flex;flex-direction:column;height:var(--scene-height);min-height:0;padding-bottom:var(--screen-bottom)}
#skills .skills-content{flex:1;min-height:0;align-items:stretch;margin-top:20px}
#skills .skills-detail{align-self:center;max-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#74807b transparent}
#skills .skills-detail h3{margin-bottom:16px}
#skills .skills-solution{min-height:0}
#skills .skills-leaf,#skills .skills-leaf:last-child{min-height:0;padding-block:12px}
#skills .skills-related{margin-top:12px}
#skills #skills-related{max-height:100px;overflow-y:auto;scrollbar-width:thin}
#skills .skills-scene{min-height:0;display:flex;align-items:center}
#skills .skills-stage{height:100%;min-height:0;max-height:600px}
@media(min-width:801px) and (max-width:1100px){
 #skills .skills-content{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px}
 #skills .skills-scene{grid-row:auto}
 #skills .skills-detail{max-width:none}
 #skills .skills-stage{max-width:none}
}
@media(min-width:801px) and (max-height:800px){
 #skills .skills-heading-extra,#skills .skills-subtitle{display:none}
 #skills .skills-bottom-controls{margin-top:12px}
 #skills .skills-content{margin-top:12px}
 #skills .skills-leaf p{font-size:15px;line-height:1.4}
 #skills .skills-leaf{gap:12px;grid-template-columns:86px minmax(0,1fr)}
 #skills #skills-related{max-height:88px}
}
@media(max-width:800px){
 #skills .skills-content{gap:clamp(16px,3svh,30px);margin-top:16px}
 #skills .skills-scene{flex:1;min-height:0}
 #skills .skills-stage{height:100%;max-height:none;overflow:hidden}
 #skills .skills-detail{flex:none;max-height:none;overflow:visible}
 #skills[data-variant="5"] .skills-detail h3{margin-bottom:14px}
 #skills[data-variant="5"] .skills-leaf,#skills[data-variant="5"] .skills-leaf:last-child{min-height:152px;padding:18px;gap:20px}
}
@media(max-width:800px) and (max-height:700px){
 #mainPage{--screen-bottom:max(20px,env(safe-area-inset-bottom,0px))}
 #skills .skills-content{gap:16px;margin-top:12px}
 #skills[data-variant="5"] .skills-leaf,#skills[data-variant="5"] .skills-leaf:last-child{min-height:132px;padding:16px;gap:16px}
 #skills[data-variant="5"] .skills-leaf p{font-size:16px;line-height:1.35}
 #skills .skills-pagination{margin-top:0}
 #skills .skills-pagination button{height:28px}
}

/* Closed services fit six directions and the team invitation in one chapter. */
#mainPage #services{height:var(--scene-height);min-height:0}
#services .services-negative-stage{height:100%;min-height:0}
#services:not(.is-open) .services-type{height:100%;padding-top:calc(var(--chapter-top) + var(--chapter-title) + 28px);padding-bottom:var(--chapter-top);gap:6px}
#services:not(.is-open) .service-direction{font-size:clamp(28px,min(9vw,calc((var(--scene-height) - 2*var(--chapter-top) - var(--chapter-title) - 62px)/6)),130px);line-height:.96}
#services .service-role-card{max-width:calc(100% - 2*var(--page-gutter))}
#services .service-role-label{overflow-wrap:normal;white-space:normal}
#services.is-open .services-panel-area{max-height:calc(var(--scene-height) - var(--chapter-top) - var(--chapter-title) - 56px);overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#666 transparent;padding-bottom:24px}
@media(min-width:801px){
 #services.is-open .services-panel-area{margin-top:calc(var(--chapter-top) + var(--chapter-title) + 32px)}
 #services.is-open .service-direction.is-active{font-size:clamp(42px,min(7vw,12svh),110px);white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:800px){
 #services:not(.is-open) .services-negative-stage{display:flex;flex-direction:column;padding-top:calc(var(--chapter-top) + var(--chapter-title) + 28px)}
 #services:not(.is-open) .services-type{flex:1;min-height:0;height:auto;padding:0 var(--page-gutter);justify-content:space-between}
 #services:not(.is-open) .service-direction{font-size:clamp(28px,min(16vw,calc((var(--scene-height) - 2*var(--chapter-top) - var(--chapter-title) - 155px)/6)),96px)}
 #services:not(.is-open) .service-role-card{flex:none;margin:20px var(--page-gutter) var(--chapter-top);padding-top:16px}
 #services.is-open .services-negative-stage{display:flex;flex-direction:column;padding-top:calc(var(--chapter-top) + var(--chapter-title) + 26px)}
 #services.is-open .services-type{flex:none;min-height:0;padding-top:0;padding-bottom:20px}
 #services.is-open .service-direction.is-active{font-size:clamp(40px,min(17vw,11svh),86px)}
 #services.is-open .services-panel-area{flex:1;min-height:0;max-height:none;padding-top:0;padding-bottom:24px}
 #services[data-selection="team"] .services-panel-area{padding-top:0;padding-right:calc(var(--page-gutter) + 16px)}
}

/* The I/WE artwork flexes before text or the project link loses space. */
#mainPage #cycle.cycle-iwe .cycle-composition{height:var(--scene-height);min-height:0;overflow:auto;scrollbar-width:thin}
#cycle.cycle-iwe .cycle-type-scene{max-height:100%}
#cycle .cycle-letter-art{max-height:min(42svh,400px)}
@media(max-width:800px){
 #mainPage #cycle.cycle-iwe .cycle-composition{grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:clamp(12px,2.5svh,28px)}
 #cycle.cycle-iwe .cycle-type-scene{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:0}
 #cycle .cycle-letters{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
 #cycle .cycle-letter-art{height:100%;max-height:230px;min-height:0}
 #cycle .cycle-signatures{flex:none;min-height:0}
 #mainPage #cycle.cycle-iwe .cycle-description{max-width:46ch}
}

/* Biography and expanded education stay readable within their chapter. */
#mainPage #human.has-portrait .human-editorial-grid{height:var(--scene-height);min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#6b756f transparent;scroll-padding-block:24px}
#human.has-portrait .human-editorial-portrait{height:min(640px,calc(var(--scene-height) - 2*var(--chapter-top)));max-height:100%;aspect-ratio:auto}
@media(max-width:800px){
 #mainPage #human.has-portrait .human-editorial-grid{row-gap:16px}
 #human.has-portrait .human-editorial-portrait{height:clamp(100px,18svh,180px);width:auto;max-width:100%;aspect-ratio:4/5;align-self:start}
 #mainPage #human.has-portrait .human-editorial-intro{font-size:18px;line-height:1.4}
 #human.has-portrait .human-editorial-background{font-size:14px;line-height:1.5}
 #human.has-portrait .human-editorial-columns{margin-top:0;padding-top:20px;gap:20px}
 #human.has-portrait .human-editorial-column h3{font-size:24px;margin-bottom:12px}
 #human.has-portrait .human-editorial-column li{font-size:14px;line-height:1.45}
 #human.has-portrait .human-editorial-column:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px}
 #human.has-portrait .human-editorial-column:last-child h3{margin:0}
 #human.has-portrait .human-editorial-column:last-child ul{gap:6px 16px}
}

/* Keep the invitation and all contact methods inside the closing screen. */
#mainPage #contact .contact-composition{height:var(--scene-height);min-height:0;padding-bottom:24px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#777 transparent}
#contact .contact-center{flex:none;min-height:100%;padding:0}
#contact .contact-signature{margin-bottom:16px}
#contact .contact-intents{margin-top:20px;gap:20px}
#contact .contact-intents a{padding:16px 0}
#contact .contact-messengers{margin-top:16px;margin-bottom:0}
@media(max-width:800px){#contact .contact-intents{gap:0}#contact .contact-context{margin-block:12px 0}}
@media(max-height:700px){
 #contact .contact-signature,#contact .contact-underline{display:none}
 #contact .contact-intents{grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
 #contact .contact-intents a>span{font-size:20px}
 #contact .contact-intents small{font-size:12px;line-height:1.45;margin-top:8px}
 #contact .contact-context{font-size:14px;line-height:1.45}
 #contact .contact-messenger{min-height:86px;gap:4px;padding-block:6px}
 #contact .contact-messenger svg{width:24px;height:24px}
}

/* Short landscape screens need horizontal compositions, including small phones. */
@media(min-width:540px) and (max-height:650px),(min-width:480px) and (max-height:420px){
 #mainPage{--chapter-top:20px;--chapter-title:clamp(30px,min(5vw,9svh),48px);--chapter-copy-gap:12px;--screen-bottom:max(20px,env(safe-area-inset-bottom,0px))}
 #mainPage #the-edit .edit-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);gap:4%}
 #the-edit.edit-four .edit-explanation{font-size:16px;margin-top:12px;margin-bottom:10px;min-height:0}
 #the-edit.edit-four .edit-stages{gap:0 10px;justify-content:flex-start}
 #the-edit.edit-four .edit-stages button{font-size:9px;min-height:36px}
 #skills .skills-heading-extra,#skills .skills-subtitle,#skills .skills-bottom-controls{display:none}
 #skills .skills-content{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;margin-top:16px}
 #skills .skills-scene{grid-column:1;grid-row:1;order:0}
 #skills .skills-detail{grid-column:2;grid-row:1;align-self:center;min-height:0;max-height:100%;overflow-y:auto}
 #skills .skills-detail h3{font-size:24px;margin-bottom:12px}
 #skills .skills-stage{height:100%;max-height:none}
 #skills .skills-related{display:none}
 #skills .skills-solution{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding:0;min-height:0}
 #skills .skills-leaf,#skills .skills-leaf:last-child,#skills[data-variant="5"] .skills-leaf,#skills[data-variant="5"] .skills-leaf:last-child{flex:0 0 100%;display:flex;flex-direction:column;min-height:132px;padding:16px;gap:16px;border:1px solid #ffffff26;scroll-snap-align:start}
 #skills .skills-leaf h4{font-size:10px}
 #skills .skills-leaf p,#skills[data-variant="5"] .skills-leaf p{font-size:15px;line-height:1.35}
 #skills .skills-leaf::before{right:16px;top:16px}
 #skills .skills-pagination{display:flex;margin-top:0}
 #skills .skills-pagination button{height:28px}
 #services:not(.is-open) .services-negative-stage{display:block;padding-top:0}
 #services:not(.is-open) .services-type{width:58%;height:100%;padding:calc(var(--chapter-top) + var(--chapter-title) + 18px) 0 var(--chapter-top) var(--page-gutter);gap:4px;justify-content:flex-start}
 #services:not(.is-open) .service-direction{font-size:clamp(24px,calc((var(--scene-height) - 2*var(--chapter-top) - var(--chapter-title) - 42px)/6),68px)}
 #services:not(.is-open) .service-role-card{position:absolute;left:61%;right:var(--page-gutter);bottom:var(--chapter-top);width:auto;margin:0;padding-top:14px}
 #services .service-role-card>.service-role-title{font-size:clamp(22px,4vw,30px)}
 #services .service-role-card small{font-size:12px;margin-top:8px}
 #services.is-open .services-negative-stage{display:grid;grid-template-columns:45% 55%;padding-top:0}
 #services.is-open .services-type{grid-column:1;grid-row:1;padding-top:calc(var(--chapter-top) + var(--chapter-title) + 24px);padding-right:12px}
 #services.is-open .service-direction.is-active{font-size:clamp(32px,6vw,70px);white-space:normal}
 #services.is-open .services-panel-area{grid-column:2;grid-row:1;margin:calc(var(--chapter-top) + var(--chapter-title) + 24px) var(--page-gutter) 0 0;max-height:calc(var(--scene-height) - var(--chapter-top) - var(--chapter-title) - 44px);padding:0 0 20px}
 #services .services-close{top:12px;right:12px}
 #services[data-selection="team"] .services-panel-area{grid-column:1/-1;margin-left:var(--page-gutter);padding-right:0}
 #mainPage #cycle.cycle-iwe .cycle-composition{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:4%;align-content:start}
 #cycle.cycle-iwe .cycle-intro{display:block;align-self:start}
 #cycle.cycle-iwe .cycle-type-scene{grid-row:1;grid-column:2}
 #mainPage #cycle.cycle-iwe .cycle-lead{font-size:18px;margin-top:14px}
 #mainPage #cycle.cycle-iwe .cycle-description{font-size:13px;margin-top:12px;line-height:1.45}
 #mainPage #cycle.cycle-iwe .cycle-project{min-height:44px;margin-top:12px;font-size:11px}
 #cycle .cycle-signatures{gap:12px}
 #cycle .cycle-signatures span{font-size:10px}
 #cycle .cycle-signatures strong{font-size:8px}
 #cycle .cycle-iwe-logo{width:76px;height:16px}
 #mainPage #human.has-portrait .human-editorial-grid{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:24px}
 #human.has-portrait .human-editorial-portrait{grid-column:1;grid-row:1;height:calc(var(--scene-height) - 2*var(--chapter-top));width:100%;aspect-ratio:auto}
 #human.has-portrait .human-editorial-copy{display:block;grid-column:2;grid-row:1}
 #human.has-portrait #human-title span{display:inline}
 #mainPage #human.has-portrait .human-editorial-intro{font-size:16px;margin-top:14px}
 #human.has-portrait .human-editorial-background{font-size:13px;margin-top:14px}
 #human.has-portrait .human-editorial-columns{grid-template-columns:1fr 1fr;margin-top:20px}
 #site-footer{padding-top:8px}
 #site-footer .footer-grid{padding-block:8px}
 #site-footer .footer-personal-links{margin-top:8px}
 #site-footer .footer-bottom{padding-block:8px}
 .site.ref-mode #hero{height:var(--scene-height);min-height:0}
 .site.ref-mode #hero .hero-name{top:30px;font-size:min(12cqw,27svh)!important;line-height:.94}
 .site.ref-mode #hero .signature{left:auto!important;right:5%!important;top:48px!important;width:38%!important;max-width:420px!important}
}
@media(min-width:540px) and (max-height:500px),(min-width:480px) and (max-height:420px){
 .site.ref-mode #work .story-screens,.mobile-actual .site.ref-mode #work .story-screens{aspect-ratio:1.9}
 .site.ref-mode #work .story-layer{grid-template-columns:44% 56%;grid-template-rows:minmax(0,1fr)}
 .site.ref-mode #work .story-company-info{display:flex;flex-direction:column;gap:5px;padding:10px}
 .site.ref-mode #work .story-company-info .story-company-logo{height:22px;max-height:22px;max-width:125px}
 #work .story-company-brief{display:none}
 #work .story-company-role{font-size:20px;line-height:1;margin:0}
 #work .story-company-position .story-company-role{margin-bottom:3px}
 #work .story-company-period{font-size:10px}
 #work .story-company-case{margin-top:auto;min-height:44px;padding:8px;font-size:9px;gap:5px}
 #work .story-company-case .ui-arrow{width:18px;height:18px}
 .site.ref-mode #work .story-controls{display:none}
 .site.ref-mode #work .story-caption{left:77%;right:4%;top:calc(50% - 30px);bottom:auto;width:auto}
 #work .work-archive-link{top:-12px;width:100%;min-height:60px;padding:10px;font-size:10px;gap:8px}
 #work .work-archive-link .ui-arrow{width:20px;height:20px}
 #contact .contact-center{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto;gap:12px 24px;align-items:center;align-content:center;min-height:100%}
 #contact #contact-title{grid-column:1;grid-row:1}
 #contact .contact-context{grid-column:1;grid-row:2;margin:0;text-align:center}
 #contact .contact-intents{grid-column:2;grid-row:1;gap:16px;margin:0;width:100%}
 #contact .contact-intents a{min-height:0;padding:10px 0}
 #contact .contact-intents a>span{font-size:18px;gap:8px}
 #contact .contact-intents small{font-size:12px}
 #contact .contact-messengers{grid-column:2;grid-row:2;width:100%;margin:0}
 #contact .contact-address{display:none}
}