/* The contact and portfolio share equal edge insets around the central navigation. */
:root{--header-height:56px;--navigation-height:calc(56px + env(safe-area-inset-bottom,0px));--scene-height:calc(100dvh - var(--header-height) - var(--navigation-height));--grid-top:clamp(32px,5dvh,64px);--grid-height:calc(var(--scene-height) - 2 * var(--grid-top));--square:min(600px,max(140px,calc(var(--grid-height) - var(--text-zone) - var(--scene-gap))))}
.author-site .header,.portfolio-page .portfolio-header{background:#000;border-bottom:1px solid #252525}
.author-site .header{height:auto}
.author-site .header .wrap,.portfolio-page .portfolio-header{display:grid;grid-template-columns:minmax(240px,1fr) auto minmax(240px,1fr);gap:24px;align-items:center;width:100%;max-width:none;min-height:56px;height:auto;margin:0;padding:0 24px}
.portfolio-page .portfolio-header{min-height:57px}
.author-site .header .signature,.portfolio-page .portfolio-home{grid-column:1;grid-row:1;justify-self:start;max-width:100%;min-width:0;display:flex;align-items:center;gap:8px;margin:0;overflow:hidden;white-space:nowrap;font:400 20px/1.5 Onest,Arial,sans-serif;color:#888}
.author-site .header .signature img,.portfolio-page .portfolio-home img{width:22px;height:22px;flex:none;margin:0}
.author-site .header .signature span,.portfolio-page .portfolio-home span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.author-site .header .nav,.portfolio-page .portfolio-header nav{grid-column:2;grid-row:1;position:static;left:auto;transform:none;margin:0;max-width:none;display:flex;align-items:center;gap:40px;overflow:visible;font:400 20px/1.5 Onest,Arial,sans-serif}
.author-site .header .header-portfolio,.portfolio-page .portfolio-header .header-portfolio{grid-column:3;grid-row:1;justify-self:end;margin:0;font:400 20px/1.5 Onest,Arial,sans-serif;text-decoration:none}
.author-site .header .nav a,.portfolio-page .portfolio-header nav a,.author-site .header .header-portfolio,.portfolio-page .portfolio-header .header-portfolio{display:flex;align-items:center;min-height:44px;padding:4px 0;border-bottom:1px solid transparent;color:#888;white-space:nowrap;transition:color .2s ease-in-out,border-color .2s ease-in-out}
.author-site .header .nav a[aria-current],.portfolio-page .portfolio-header nav a[aria-current],.portfolio-page .portfolio-header .header-portfolio[aria-current]{color:#bfbfbf;border-color:#777}
.author-site .header .nav a:hover,.portfolio-page .portfolio-header nav a:hover,.author-site .header .header-portfolio:hover,.portfolio-page .portfolio-header .header-portfolio:hover{color:#c9c9c9}
.portfolio-page .portfolio-header{position:sticky;top:0;z-index:30;background:#000}

/* Reserve a calm, persistent navigation row rather than covering the content. */
.author-site.horizontal-mode .horizontal-viewport{bottom:var(--navigation-height)}
.author-site .horizontal-viewport.is-pulling main>section{visibility:hidden}
.author-site .horizontal-viewport.is-pulling main>section:is(.pull-source,.pull-target){visibility:visible}
.author-site .horizontal-viewport.is-pulling main>.pull-target{transform:translate3d(var(--pull-offset),0,0)}
.author-site.horizontal-mode main>.hero{height:100%;min-height:0;align-content:center;padding-block:24px}
.author-site .hero-layout{gap:clamp(20px,3dvh,40px)}
.author-site.horizontal-mode .section{padding-block:var(--grid-top)}
.author-site.horizontal-mode .section .narrative-grid,.author-site.horizontal-mode #contact .narrative-grid{height:var(--grid-height);min-height:var(--grid-height)}
.author-site.horizontal-mode #contact{padding-bottom:var(--grid-top)}
.author-site.horizontal-mode .footer{display:none!important}
.author-site #limits .scene-actions{justify-content:flex-start}
.author-site main :is(h1,h2,.statement-copy p)[tabindex="-1"]:focus{outline:none}
.scene-navigation{position:fixed;inset:auto 0 0;z-index:35;height:var(--navigation-height);padding:0 var(--grid-margin) env(safe-area-inset-bottom,0px);display:flex;justify-content:space-between;align-items:center;gap:24px;background:#161616;border-top:1px solid #262626;font:400 20px/1.5 Onest,Arial,sans-serif}
.scene-navigation button{font:inherit;cursor:pointer;color:#aaa;background:none;border:0;transition:color .2s ease-in-out}
.scene-navigation button:hover{color:#ddd}
.scene-navigation .scene-arrow{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;font-size:24px}
.scene-navigation .scene-arrow:disabled{color:#414141;cursor:default}
.scene-navigation .scene-toggle{height:44px;min-width:0;max-width:calc(100% - 136px);display:flex;align-items:center;justify-content:center;gap:16px;padding:0 8px}
.scene-count{color:#777;font-variant-numeric:tabular-nums;white-space:nowrap}
.scene-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-chevron{display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;flex:none;color:#777;transition:transform .2s ease-in-out}
.scene-chevron svg{display:block;width:8px;height:5px}
.scene-toggle[aria-expanded=true] .scene-chevron{transform:rotate(180deg)}
.scene-menu{position:fixed;left:50%;bottom:calc(var(--navigation-height) + 12px);transform:translateX(-50%);width:min(420px,calc(100% - 40px));max-height:calc(100dvh - var(--header-height) - var(--navigation-height) - 32px);overflow:auto;padding:12px;background:#191919;border:1px solid #383838;box-shadow:0 12px 36px #0004;overscroll-behavior:contain}
.scene-menu a{display:flex;align-items:center;gap:24px;min-height:44px;padding:8px 12px;border-left:2px solid transparent;color:#888;font:inherit;text-decoration:none;transition:color .2s ease-in-out}
.scene-menu a span:first-child{color:#666;font-variant-numeric:tabular-nums}
.scene-menu a:hover{color:#ddd}
.scene-menu a[aria-current]{color:#ccc;border-color:#999}
.scene-menu .replay-intro{display:block;width:100%;min-height:44px;margin:8px 0 0;padding:12px 14px;border:0;border-top:1px solid #303030;text-align:left;font:inherit;color:#888;background:none}
.scene-navigation :focus-visible{outline:1px solid #aaa;outline-offset:3px}
.scene-menu[hidden]{display:none}

/* Keep the two project choices together and reachable while reading. */
.portfolio-page .project-navigation{position:sticky;top:var(--header-height);z-index:20;justify-content:center;height:76px;padding:16px var(--edge);background:#161616}
.portfolio-page .project-tabs{gap:32px}
.portfolio-page .project-tabs button{min-height:44px;padding:4px 0;font:400 20px/1.5 Onest,Arial,sans-serif}
.portfolio-page .project-tabs button:not([aria-selected=true]){color:#888}
.portfolio-page #case-content{display:grid;overflow:hidden;isolation:isolate}
.portfolio-page .project-panel{grid-area:1/1;min-width:0;width:100%}
.portfolio-page .project-panel.is-pulling{will-change:transform}

/* Keep the AMOLED header still when moving between the essay and portfolio. */
@view-transition{navigation:auto}
.author-site .header,.portfolio-page .portfolio-header{view-transition-name:site-header}
.author-site{--page-pull-in:-100%;--page-pull-out:100%}
::view-transition-group(root){animation-duration:620ms;animation-timing-function:ease-in-out}
::view-transition-old(root){animation:page-pull-out 620ms ease-in-out both;mix-blend-mode:normal}
::view-transition-new(root){animation:page-pull-in 620ms ease-in-out both;mix-blend-mode:normal}
::view-transition-group(site-header),::view-transition-old(site-header),::view-transition-new(site-header){animation:none}
::view-transition-group(site-header){z-index:2}
@keyframes page-pull-in{from{transform:translateX(var(--page-pull-in,100%))}to{transform:translateX(0)}}
@keyframes page-pull-out{from{transform:translateX(0)}to{transform:translateX(var(--page-pull-out,-100%))}}
@media(min-width:1101px){.portfolio-page .project-panel{height:calc(100dvh - var(--header-height) - 76px);min-height:0;padding-top:24px;padding-bottom:32px}}
@media(min-width:801px) and (max-width:1100px){.portfolio-page .project-panel{height:auto;min-height:calc(100dvh - var(--header-height) - 76px)}}
@media(max-width:1100px){
  :root{--header-height:97px}
  .author-site .header .wrap,.portfolio-page .portfolio-header{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px auto;gap:0 16px;min-height:96px;padding-inline:24px}
  .portfolio-page .portfolio-header{min-height:97px}
  .author-site .header .header-portfolio,.portfolio-page .portfolio-header .header-portfolio{grid-column:2}
  .author-site .header .nav,.portfolio-page .portfolio-header nav{grid-column:1/-1;grid-row:2;justify-self:start;flex-wrap:wrap;gap:0 24px;max-width:100%}
}
@media(max-width:800px){
  .author-site .header .wrap,.portfolio-page .portfolio-header{padding-inline:20px}
  .author-site .header .nav,.portfolio-page .portfolio-header nav{gap:0 16px;justify-content:space-between;width:100%}
  .portfolio-page .portfolio-header nav a:first-child,.portfolio-page .portfolio-header nav a:nth-child(2){display:flex}
  .author-site.horizontal-mode .section .narrative-grid,.author-site.horizontal-mode #contact .narrative-grid{height:auto;min-height:0}
  .author-site #limits .narrative-display{grid-row:1}
  .author-site #limits .narrative-copy{grid-row:2}
  .author-site.horizontal-mode main>.hero{height:auto;min-height:100%;padding-block:32px}
  .scene-navigation{gap:8px;padding-inline:20px}
  .scene-navigation .scene-toggle{gap:10px;max-width:calc(100% - 104px);padding:0}
  .scene-label{max-width:32vw}
}
@media(max-width:420px){.author-site .header .nav,.portfolio-page .portfolio-header nav{gap:0 8px}.author-site .header .signature img,.portfolio-page .portfolio-home img{width:18px;height:18px}.scene-menu a{padding-block:8px}}
@media(prefers-reduced-motion:reduce){.scene-navigation *{transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Portfolio uses the same bottom section picker as the essay. */
.portfolio-page .project-navigation.scene-navigation{position:fixed;inset:auto 0 0;z-index:35;height:var(--navigation-height);padding:0 var(--grid-margin) env(safe-area-inset-bottom,0px);display:flex;justify-content:space-between;background:#161616;border-top:1px solid #262626}
.portfolio-page .project-navigation .project-menu{display:block}
.portfolio-page .project-navigation .project-menu[hidden]{display:none}
.portfolio-page .project-tabs{display:flex;flex-direction:column;gap:0}
.portfolio-page .project-tabs button{display:flex;align-items:center;gap:24px;width:100%;min-height:44px;padding:8px 12px;text-align:left;border:0;border-left:2px solid transparent;color:#888;font:inherit}
.portfolio-page .project-tabs button span:first-child{color:#666;font-variant-numeric:tabular-nums}
.portfolio-page .project-tabs button[aria-selected=true]{border-color:#999;color:#ccc}
.portfolio-page .project-tabs button:hover{color:#ddd}
.portfolio-page #case-content{min-height:calc(100dvh - var(--header-height) - var(--navigation-height))}
.portfolio-page .project-panel{scroll-margin-top:var(--header-height)}
@media(min-width:1101px){.portfolio-page .project-panel{height:calc(100dvh - var(--header-height) - var(--navigation-height));min-height:0}}
@media(min-width:801px) and (max-width:1100px){.portfolio-page .project-panel{min-height:calc(100dvh - var(--header-height) - var(--navigation-height))}}
@media(max-width:800px){.portfolio-page .project-navigation.scene-navigation{padding-inline:20px}.portfolio-page #case-content{padding-bottom:var(--navigation-height)}}

/* Each portfolio case is one horizontal viewport, matching the essay scenes. */
.portfolio-page{height:100%;overflow:hidden}
.portfolio-page #case-content{position:fixed;inset:var(--header-height) 0 var(--navigation-height);display:grid;min-height:0;overflow:hidden;isolation:isolate}
.portfolio-page #case-content>.project-panel{grid-area:1/1;width:100vw;height:100%;min-height:0;max-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#393939 #161616;position:relative;background:#161616;border-inline:1px solid #303030;will-change:transform}
.portfolio-page #case-content>.project-panel[hidden]{display:none}
.portfolio-page #case-content>.project-panel.is-peeking,.portfolio-page #case-content>.project-panel.is-pulling{overflow-y:hidden}
.portfolio-page #case-content>.project-panel.is-preview-target::before,.portfolio-page #case-content>.project-panel.is-preview-target::after{position:absolute;top:50%;z-index:2;transform:translateY(-50%);font:400 14px/1.4 Onest,Arial,sans-serif;color:#777;pointer-events:none}
.portfolio-page #carrier.is-preview-target::before{content:'Carrier';left:18px}
.portfolio-page #sonos.is-preview-target::after{content:'Sonos';right:18px}
@media(max-width:800px){.portfolio-page #case-content{padding:0}.portfolio-page #case-content>.project-panel{min-height:0;padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){.portfolio-page #case-content>.project-panel{will-change:auto}}