.mobile-menu-toggle,.mobile-menu{display:none}
@media(max-width:700px){
 html{overflow-x:hidden}
 body:not(.home){--mobile-gutter:20px;--mobile-header:88px;overflow-x:hidden;min-width:0}
 body:not(.home) #app{padding-top:var(--mobile-header);width:100%;overflow-x:clip}
 body.mobile-menu-open{overflow:hidden}
 .site-header{position:fixed!important;inset:0 0 auto!important;height:var(--mobile-header)!important;min-height:0!important;padding:20px var(--mobile-gutter)!important;background:#000!important;z-index:60!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important}
 .site-header .site-name{position:static!important;display:flex!important;gap:.18em!important;transform:none!important;margin:0!important;width:auto!important;max-width:calc(100% - 52px)!important;font-size:clamp(30px,9.5vw,44px)!important;line-height:1!important;letter-spacing:0!important;white-space:nowrap!important}
 .site-header .site-name span{position:static!important;transform:none!important;display:inline!important}
 .site-header .switch,.portfolio-sidebar{display:none!important}
 .mobile-menu-toggle{position:absolute;right:16px;top:22px;display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:10px;color:#fff;z-index:62}
 .mobile-menu-toggle span{display:block;width:24px;height:2px;background:currentColor}
 .mobile-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .mobile-menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
 .mobile-menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .mobile-menu:not([hidden]){display:flex;position:fixed;inset:var(--mobile-header) 0 0;z-index:59;background:#000;color:#fff;padding:28px var(--mobile-gutter) max(28px,env(safe-area-inset-bottom));flex-direction:column;gap:32px;overflow-y:auto;font:14px/1.5 var(--mono)}
 .mobile-menu nav{display:flex;flex-direction:column;gap:14px}
 .mobile-menu nav a{font-size:17px;align-self:flex-start}
 .mobile-menu a[aria-current]{color:var(--landing-red);font-style:italic;text-decoration:underline}
 .mobile-menu .instagram-link{position:static!important;display:flex!important;align-items:center;gap:12px;width:auto!important;margin-top:auto}
 .mobile-menu .instagram-handle{position:static!important;display:block!important;max-width:none!important;width:auto!important;opacity:1!important;transform:none!important;transition:none!important;white-space:normal!important;font-size:12px}
 .mobile-switch{font-size:12px;border-top:1px solid #444;padding-top:20px}
 :is(.photography-theme,.dark) .work-page,:is(.photography-theme,.dark) .story,:is(.photography-theme,.dark) .about-page,:is(.photography-theme,.dark) .contact-page,.empty-gallery{position:relative!important;top:auto!important;transform:none!important;margin:0!important;padding:0 var(--mobile-gutter) 32px!important;width:100%!important;min-height:0!important;max-width:none!important;display:block!important}
 .work-intro{display:none!important}
 :is(.photography-theme,.dark) .project-track,.story .story-track{display:flex!important;flex-direction:column!important;gap:28px!important;overflow:visible!important;width:100%!important;padding:0!important;transform:none!important;top:0!important;left:auto!important;height:auto!important;max-height:none!important;scroll-snap-type:none!important}
 .project-card{display:block!important;flex:none!important;width:100%!important;padding:0!important;min-width:0!important}
 .project-image,.story-image{display:block!important;position:relative!important;flex:none!important;width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:3/4!important;margin:0!important;padding:0!important;overflow:hidden}
 .project-image img,.story-image img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;aspect-ratio:3/4!important;object-fit:cover!important;transform:none!important}
 .image-caption{display:block!important;margin-top:10px!important;width:100%!important}
 .image-caption strong{font-size:16px!important;line-height:1.25!important;overflow-wrap:anywhere}
 .caption-credits{display:block!important;font-size:10px!important;line-height:1.4!important;margin-top:5px!important;white-space:normal!important;overflow-wrap:anywhere}
 .view-project{font-size:10px!important;padding:7px 14px!important;left:12px!important;bottom:12px!important}
 .story{visibility:visible!important}
 .site-header .project-back{position:fixed!important;left:var(--mobile-gutter)!important;top:var(--mobile-header)!important;background:var(--paper);padding:12px 0!important;width:calc(100% - 40px);font:12px/1.35 var(--mono)!important;transform:none!important}
 body:has(.story) #app{padding-top:calc(var(--mobile-header) + 44px)}
 .story .story-bottom{width:100%!important;display:flex!important;flex-direction:column!important;gap:18px!important;margin-top:10px!important}
 .story .story-title{display:block!important;margin:0!important;width:100%!important}
 .story .story-title h1{font-size:20px!important;line-height:1.2!important;transform:none!important;margin:0!important;max-width:100%!important;overflow-wrap:anywhere}
 .story .story-publication{font-size:12px!important;line-height:1.4!important;margin:6px 0 0!important}
 .story-bottom .credits{width:100%!important;margin:0!important}
 .story-bottom .credits div{font-size:11px!important;line-height:1.4!important;grid-template-columns:100px minmax(0,1fr)!important;gap:12px!important;margin-bottom:4px!important}
 .story-bottom .credits dd{text-align:left!important;overflow-wrap:anywhere}
 :is(.photography-theme,.dark) .portfolio-about,:is(.photography-theme,.dark) .contact-page,.empty-gallery{padding-top:20px!important}
 .portfolio-about .about-lead,.portfolio-about :is(blockquote,.about-middle),.portfolio-about .about-reflection,.contact-intro{font-size:14px!important;line-height:1.45!important}
 .contact-page form,.contact-intro{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
 .contact-page .email-link{font-size:inherit!important}
 .field-row{display:block!important}form label{font-size:12px!important}input,textarea{font-size:16px!important}
 #lightbox{padding:48px 20px 100px!important;--viewer-image-width:calc(var(--mobile-viewer-height,48svh) * .75)}
 #lightbox .lightbox-stage{position:absolute!important;top:var(--mobile-viewer-top,48px)!important;left:20px;right:20px;height:var(--mobile-viewer-height,48svh)!important}.lightbox-image img{height:100%!important;max-width:100%!important;object-fit:contain!important}
 #lightbox .lightbox-close{top:18px!important;right:20px!important;font-size:12px!important}
 #lightbox .viewer-credits{font-size:10px!important;right:20px!important;max-width:calc(100vw - 40px)}
 .lightbox-controls{font-size:11px!important;gap:24px!important;bottom:20px!important}.lightbox-side{font-size:24px!important}
}
@media(max-width:700px){body.mobile-menu-open .site-header .project-back{display:none!important}}

/* Compact mobile dropdown aligned with the visible name lettering. */
@media(max-width:700px){
 body.mobile-menu-open{overflow-y:auto}
 .mobile-menu-toggle{top:calc(var(--mobile-name-center,36px) - 22px)}
 .mobile-menu:not([hidden]){inset:var(--mobile-header) 0 auto;padding:12px 20px 22px;max-height:calc(100svh - var(--mobile-header));height:auto;min-height:0;gap:14px;text-align:center;align-items:center;overflow:hidden;box-sizing:border-box}
 .mobile-menu nav{width:100%;align-items:center;gap:7px}
 .mobile-menu nav a{font-size:13px;line-height:1.4;align-self:center}
 .mobile-menu .instagram-link{margin-top:0!important;justify-content:center;gap:8px}
 .mobile-menu .instagram-link svg{width:18px;height:18px}
 .mobile-menu .instagram-handle{font-size:11px!important}
 .mobile-switch{font-size:10px;line-height:1.4;padding-top:12px;width:100%;max-width:270px}
}
@media(max-width:700px){
 .mobile-menu .instagram-link{align-self:center!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;background:transparent!important;color:#fff!important;padding:0!important;border:0!important;height:auto!important;min-height:0!important;transform:none!important}
}
@media(max-width:700px){
 .dark .site-header{background:#fff!important}
 .dark .mobile-menu-toggle{color:#000}
 .site-header .project-back{top:var(--mobile-name-center,36px)!important;transform:translateY(-50%)!important;width:auto!important;background:transparent!important;padding:0!important;font:10px/1.35 var(--mono)!important;left:16px!important;color:var(--ink)!important}
 body:has(.story) #app{padding-top:var(--mobile-header)}
 @media(max-width:360px){.site-header .site-name{font-size:30px!important}.site-header .project-back{font-size:9px!important;left:12px!important}}
}
/* The landing identity stays quiet and steady while discipline titles respond. */
.landing .landing-name{font-size:clamp(30px,4vw,64px)!important;transform:translateX(-50%) scale(1)!important}

/* Grow the landing identity into the section masthead during the wipe. */
.landing .landing-name{transition:font-size 650ms cubic-bezier(.65,0,.35,1),top 650ms cubic-bezier(.65,0,.35,1),gap 650ms cubic-bezier(.65,0,.35,1),letter-spacing 650ms cubic-bezier(.65,0,.35,1)}
.landing[class*="departing-"] .landing-name{font-size:var(--name-size)!important}
.landing[class*="departing-"] .landing-name span{color:var(--landing-red)!important;transition:color 650ms cubic-bezier(.65,0,.35,1)}
@media(max-width:700px){
 .landing[class*="departing-"] .landing-name{font-size:clamp(30px,9.5vw,44px)!important;top:20px;gap:.18em;letter-spacing:0;display:flex}
}
@media(max-width:360px){.landing[class*="departing-"] .landing-name{font-size:30px!important}}
@media(prefers-reduced-motion:reduce){.landing .landing-name{transition:none}}

/* Each mobile project is a two-photo preview, with one shared caption. */
.project-preview{display:contents}
.mobile-project-second{display:none!important}
@media(max-width:700px){
 .project-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
 .project-preview .mobile-project-second{display:block!important}
 #lightbox{height:100dvh}
 #lightbox .lightbox-side{width:30px;height:44px}
 #lightbox .lightbox-side-prev{left:-20px}
 #lightbox .lightbox-side-next{right:-20px}
}

/* Use text styling, rather than a box, for the viewer close focus. */
#lightbox .lightbox-close:focus,#lightbox .lightbox-close:focus-visible{outline:none;box-shadow:none;color:var(--landing-red);text-decoration:underline;text-underline-offset:.2em}

/* Continue the site canvas into Safari's safe areas and overscroll. */
html{background-color:var(--page-background,#000)}
html:has(body.home),body.home{background:linear-gradient(to right,var(--photo-background,#000) 50%,var(--hair-background,#fff) 50%);background-attachment:fixed}
@media(max-width:700px){
 html:has(body.home),body.home{background:linear-gradient(to bottom,var(--photo-background,#000) 50%,var(--hair-background,#fff) 50%);background-attachment:fixed}
 .landing{height:100dvh;min-height:100dvh}
 .landing .landing-name{top:calc(24px + env(safe-area-inset-top,0px))}
 .landing[class*="departing-"] .landing-name{top:calc(20px + env(safe-area-inset-top,0px))}
 .site-header .site-name{position:absolute!important;top:calc(20px + env(safe-area-inset-top,0px))!important;left:50%!important;transform:translateX(-50%)!important}
 body:not(.home){padding-bottom:env(safe-area-inset-bottom,0px)}
 #lightbox .lightbox-close{top:calc(18px + env(safe-area-inset-top,0px))!important}
 #lightbox .lightbox-controls{bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
}

/* Compact phone spreads: one pair of photographs and one quiet caption. */
@media(max-width:700px){
 .project-preview{gap:0}
 .project-card .image-caption{margin-top:8px!important}
 .project-card .image-caption strong{font-size:13px!important;line-height:1.35!important;font-weight:400}
 .project-card .caption-credits{font-size:9px!important;line-height:1.35!important;margin-top:4px!important}
 .project-card .view-project{font-size:8px!important;line-height:1.35!important;padding:4px 10px!important;left:auto!important;bottom:auto!important;right:8px!important;top:8px!important;letter-spacing:.025em}
}

/* Safari samples solid fixed edge surfaces only when they are at least 3px high.
   Keep these independent until the wipe finishes: never tint both edges on tap. */
.viewport-edge{display:none}
@media(max-width:700px){
 html:has(body.home){background-color:var(--photo-background,#000)}
 body.home{background-color:var(--photo-background,#000)}
 .viewport-edge{display:block;position:fixed;left:0;right:0;pointer-events:none;z-index:2147483646;background-color:var(--page-background,#000)}
 .viewport-edge-top{top:0;height:max(12px,env(safe-area-inset-top,0px))}
 .viewport-edge-bottom{bottom:0;height:max(12px,env(safe-area-inset-bottom,0px))}
 body.home .viewport-edge-top{background-color:var(--photo-background,#000)}
 body.home .viewport-edge-bottom{background-color:var(--hair-background,#fff)}
 html[data-transition],html[data-transition] body{background-color:var(--transition-background)!important;background-image:none!important}
 html[data-transition] .viewport-edge{background-color:var(--transition-background)!important}
 .landing[class*="departing-"]::after,.section-wipe{
  top:calc(-1 * env(safe-area-inset-top,0px));bottom:calc(-1 * env(safe-area-inset-bottom,0px));
  left:calc(-1 * env(safe-area-inset-left,0px));right:calc(-1 * env(safe-area-inset-right,0px));
  min-height:0;
 }
 .landing.departing-hair::after,.section-wipe.to-hair{background:var(--hair-background,#fff)}
 .landing.departing-photo::after,.section-wipe.to-photography{background:var(--photo-background,#000)}
}

/* Equal optical gaps: measure the letters, not the font's invisible line-box padding. */
@media(max-width:700px){
 .project-card .image-caption{margin-top:var(--caption-offset,4px)!important}
 .project-card .image-caption strong{font-size:11px!important;line-height:1.15!important;margin:0!important}
 .project-card .caption-credits{font-size:calc(11px * var(--section-subtitle-ratio,.625))!important;line-height:1.2!important;margin-top:var(--subtitle-offset,4px)!important}
 .story .story-bottom{margin-top:var(--caption-offset,4px)!important;gap:12px!important}
 .story .story-title h1{font-size:16px!important;line-height:1.15!important}
 .story .story-publication{font-size:10px!important;line-height:1.2!important;margin-top:var(--subtitle-offset,4px)!important}
 .story .story-publication:empty,.project-card .caption-credits:empty{display:none!important}
}