/* Mobile shared wheel navigation — 2026-11-11. */
@media (max-width:950px) {
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  left:16px;right:16px;width:auto;max-width:none;
  display:grid!important;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
  align-items:center;justify-items:center;gap:8px;transform:none;
 }
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group :is(#regard,#series-overview-open) {
  width:100%;min-width:0;text-align:center;white-space:normal;line-height:1.4;
 }
 body.atlas-mode #experience .bottom-left {
  left:16px;right:16px;width:auto;justify-content:center;transform:none;
 }
 #experience :is(#explore,#explore-top) .dial,#print-dialog #print-explore .dial {
  transition:scale 180ms ease;transform-origin:center;
 }
 #experience :is(#explore,#explore-top):is(:hover,:focus-visible,:active) .dial,
 #print-dialog #print-explore:is(:hover,:focus-visible,:active) .dial {scale:1.18}
 body #experience :is(#explore-top-group,.bottom-left) :is(#regard,#series-overview-open,#prints,#print-current,#about-series):is(:hover,:focus-visible,:active),
 #experience :is(#explore,#explore-top):is(:hover,:focus-visible,:active) :is(#explore-label,#explore-top-label),
 #print-dialog #print-explore:is(:hover,:focus-visible,:active)>span:last-child {
  text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:5px;
 }
}
@media (max-width:950px) and (prefers-reduced-motion:reduce) {
 #experience :is(#explore,#explore-top) .dial,#print-dialog #print-explore .dial {transition:none}
}

/* Mobile camera proposal: the existing iris remains the lens. */
@media (max-width:950px) {
 #experience :is(#explore,#explore-top) .dial,#print-dialog #print-explore .dial {
  position:relative;overflow:visible;
 }
 #experience :is(#explore,#explore-top) .dial::before,
 #print-dialog #print-explore .dial::before {
  content:"";display:block!important;position:absolute;inset:auto!important;
  left:50%!important;top:50%!important;width:54px;height:38px;
  border:1px solid currentColor;border-radius:5px;background:none;box-shadow:none;
  transform:translate(-50%,-50%);opacity:.55;pointer-events:none;
 }
 #experience :is(#explore,#explore-top) .dial::after,
 #print-dialog #print-explore .dial::after {
  content:"";display:block!important;position:absolute;inset:auto!important;
  left:calc(50% + 12px)!important;top:calc(50% - 23px)!important;
  width:9px;height:3px;border:1px solid currentColor;border-radius:2px 2px 0 0;
  background:none;box-shadow:none;opacity:.8;pointer-events:none;
  transition:translate 120ms ease;
 }
 #experience :is(#explore,#explore-top) .iris-art,#print-dialog #print-explore .iris-art {
  scale:.72;transform-origin:center;transition:scale 150ms ease,opacity 150ms ease;
 }
 #experience :is(#explore,#explore-top):active .dial::after,
 #print-dialog #print-explore:active .dial::after {translate:0 2px}
 #experience :is(#explore,#explore-top):active .iris-art,
 #print-dialog #print-explore:active .iris-art {scale:.62;opacity:1}
 #experience :is(#explore,#explore-top):is(:hover,:focus-visible) .dial::before,
 #print-dialog #print-explore:is(:hover,:focus-visible) .dial::before {opacity:.9}
}
@media (max-width:950px) and (prefers-reduced-motion:reduce) {
 #experience :is(#explore,#explore-top) .dial::after,#print-dialog #print-explore .dial::after,
 #experience :is(#explore,#explore-top) .iris-art,#print-dialog #print-explore .iris-art {transition:none}
}

/* Reflex silhouette: raised viewfinder, grip and separate shutter release. */
@media (max-width:950px) {
 #experience :is(#explore,#explore-top) .dial::before,
 #print-dialog #print-explore .dial::before {
  width:72px;height:56px;border:0;border-radius:0;
  left:calc(50% + 3.6px)!important;top:calc(50% - 4.5px)!important;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2062%22%20fill%3D%22none%22%20stroke%3D%22%23f3f2ee%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018H24L29%209H45L51%2018H68C71%2018%2073%2020%2073%2023V51C73%2054%2071%2056%2068%2056H10C7%2056%205%2054%205%2051V23C5%2020%206%2018%209%2018Z%22%2F%3E%3Cpath%20d%3D%22M31%2012H43L46%2017H28Z%22%2F%3E%3Cpath%20d%3D%22M62%2023V50M65%2025V46%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2216%22%2F%3E%3Cpath%20d%3D%22M11%2025H17%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%2226%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M11%2016V13H19V16%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.86;
 }
 #experience :is(#explore,#explore-top) .dial::after,
 #print-dialog #print-explore .dial::after {
  left:calc(50% + 20px)!important;top:calc(50% - 22px)!important;
  width:10px;height:3px;border:1px solid #f3f2ee;border-radius:2px 2px 0 0;
  background:#f3f2ee22;opacity:.95;
 }
 #experience :is(#explore,#explore-top) .iris-art,
 #print-dialog #print-explore .iris-art {scale:.62}
 #experience :is(#explore,#explore-top):active .iris-art,
 #print-dialog #print-explore:active .iris-art {scale:.53}
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:8px;
 }
}

/* Mobile: the entire camera silhouette belongs to the button hit area. */
@media (max-width:950px) {
 body #experience :is(#explore,#explore-top),
 body #print-dialog #print-explore {
  box-sizing:border-box;min-width:84px!important;min-height:68px!important;
  width:auto!important;height:auto!important;padding:14px 22px!important;
  display:flex;align-items:center;justify-content:center;gap:20px;
  cursor:pointer;touch-action:manipulation;
 }
 body #experience :is(#explore,#explore-top) .dial,
 body #print-dialog #print-explore .dial {
  flex:0 0 40px!important;width:40px!important;height:40px!important;
 }
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);
  column-gap:14px;align-items:center;
 }
 body #experience .bottom-left {
  column-gap:24px;align-items:center;
 }
 body #experience #explore-top-group {
  column-gap:24px;align-items:center;
 }
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  column-gap:14px;
 }
 body #experience :is(.bottom-left,#explore-top-group)>:is(button,a):not(#explore):not(#explore-top) {
  min-width:0;text-align:center;white-space:normal;line-height:1.4;
 }
 body #print-dialog #print-explore {
  right:max(68px,env(safe-area-inset-right,0px))!important;
 }
 body #experience :is(#explore,#explore-top):focus-visible,
 body #print-dialog #print-explore:focus-visible {
  outline:1px solid currentColor;outline-offset:2px;border-radius:6px;
 }
}
@media (max-width:360px) {
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  left:10px;right:10px;column-gap:8px;
 }
}

/* Restore the approved home spacing; retain the larger camera hit target. */
@media (max-width:950px) {
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  left:16px;right:16px;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  column-gap:8px;
 }
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group #explore-top {
  justify-self:center;
 }
}

/* Shared phone navigation: equal text clearance, no mouse-only underlining. */
@media (max-width:950px) {
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group #regard {
  text-align:right;
 }
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group #series-overview-open {
  text-align:left;
 }
 body #experience :is(#explore,#explore-top),body #print-dialog #print-explore {
  gap:16px;
 }
 body #experience :is(.bottom-left,#explore-top-group) :is(#regard,#series-overview-open,#prints,#print-current,#about-series):is(:hover,:active),
 body #experience :is(#explore,#explore-top):is(:hover,:active) :is(#explore-label,#explore-top-label),
 body #print-dialog #print-explore:is(:hover,:active)>span:last-child {
  text-decoration:none!important;
 }
 /* Keep a visible focus cue for an attached keyboard. */
 body #experience :is(.bottom-left,#explore-top-group) :is(#regard,#series-overview-open,#prints,#print-current,#about-series):focus-visible {
  outline:1px solid currentColor;outline-offset:3px;
 }
}

/* Atlas: equal columns and equal clearance on both sides of the reflex. */
@media (max-width:950px) {
 body.atlas-mode #experience .bottom-left {
  display:grid;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);
  column-gap:14px;left:16px;right:16px;width:auto;
 }
 body.atlas-mode #experience .bottom-left>#mobile-print {
  grid-column:1;grid-row:1;justify-self:stretch;text-align:right;
  margin:0;padding:0;min-width:0;white-space:normal;
 }
 body.atlas-mode #experience .bottom-left>#explore {
  grid-column:2 / 4;grid-row:1;justify-self:stretch;
  display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;
  width:100%!important;min-width:0!important;padding:14px 0!important;
 }
 body.atlas-mode #experience #explore .dial {
  grid-column:1;justify-self:center;translate:-3.6px 0;
 }
 body.atlas-mode #experience #explore #explore-label {
  grid-column:2;position:static;display:block;width:auto;height:auto;
  margin:0;padding:0;min-width:0;text-align:left;white-space:normal;
  overflow:visible;clip-path:none;line-height:1.4;
 }
}

/* Atlas: explicit viewport-centred camera; equal inner text edges. */
@media (max-width:950px) {
 body.atlas-mode #experience .bottom-left {
  box-sizing:border-box;left:50%!important;right:auto!important;
  width:calc(100% - 32px)!important;max-width:none;
  transform:translateX(-50%)!important;translate:none!important;
  padding:0;margin:0;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);
  column-gap:14px;
 }
 body.atlas-mode #experience .bottom-left>#explore {
  margin:0;box-sizing:border-box;grid-template-columns:84px minmax(0,1fr);
  column-gap:14px;justify-content:normal;
 }
 body.atlas-mode #experience #explore #explore-label,
 body.atlas-mode #experience #mobile-print {
  white-space:nowrap;font-size:11px;letter-spacing:.05em;
 }
}

/* The real silhouette width now participates in layout on every phone view. */
@media (max-width:950px) {
 body #experience :is(#explore,#explore-top),body #print-dialog #print-explore {
  padding:14px 6px!important;min-width:84px!important;gap:14px;
 }
 body #experience :is(#explore,#explore-top) .dial,
 body #print-dialog #print-explore .dial {
  display:block;position:relative;box-sizing:border-box;
  flex:0 0 72px!important;width:72px!important;height:56px!important;
  min-width:72px;translate:none!important;scale:1;
 }
 body #experience :is(#explore,#explore-top) .dial::before,
 body #print-dialog #print-explore .dial::before {
  width:72px;height:50.4px;left:50%!important;top:50%!important;
  margin:0;border:0;transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%224%208%2070%2049%22%20fill%3D%22none%22%20stroke%3D%22%23f3f2ee%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018H24L29%209H45L51%2018H68C71%2018%2073%2020%2073%2023V51C73%2054%2071%2056%2068%2056H10C7%2056%205%2054%205%2051V23C5%2020%206%2018%209%2018Z%22%2F%3E%3Cpath%20d%3D%22M31%2012H43L46%2017H28Z%22%2F%3E%3Cpath%20d%3D%22M62%2023V50M65%2025V46%22%2F%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2216%22%2F%3E%3Cpath%20d%3D%22M11%2025H17%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%2226%22%20r%3D%221.2%22%2F%3E%3Cpath%20d%3D%22M11%2016V13H19V16%22%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;
 }
 body #experience :is(#explore,#explore-top) .iris-art,
 body #print-dialog #print-explore .iris-art {
  position:absolute;left:32.914px;top:31.6px;width:25px;height:25px;
  transform:translate(-50%,-50%);scale:1;transform-origin:center;
 }
 body #experience :is(#explore,#explore-top):active .iris-art,
 body #print-dialog #print-explore:active .iris-art {scale:.86}
 body #experience :is(#explore,#explore-top) .dial::after,
 body #print-dialog #print-explore .dial::after {
  left:57px!important;top:7px!important;width:10px;height:3px;
 }
 body:not(.atlas-mode):not(.print-open) #experience #explore-top-group {
  grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);column-gap:8px;
 }
 body.atlas-mode #experience .bottom-left>#explore {
  padding:14px 0!important;grid-template-columns:84px minmax(0,1fr);column-gap:14px;
 }
 body.atlas-mode #experience .bottom-left>#mobile-print {
  text-align:right!important;justify-self:stretch;margin:0!important;padding:0!important;
 }
 body.atlas-mode #experience #explore #explore-label {
  text-align:left!important;justify-self:stretch;margin:0!important;padding:0!important;
  white-space:normal;font-size:11px;line-height:1.4;
 }
}

/* Centre the complete atlas navigation group, preserving equal 20px gaps. */
@media (max-width:950px) {
 body.atlas-mode #experience .bottom-left {
  display:flex!important;left:50%!important;right:auto!important;
  width:max-content!important;max-width:calc(100% - 24px);
  transform:translateX(-50%)!important;translate:none!important;
  justify-content:center;align-items:center;column-gap:20px;
 }
 body.atlas-mode #experience .bottom-left>#mobile-print {
  flex:0 0 auto;width:auto;min-width:0;white-space:nowrap;
 }
 body.atlas-mode #experience .bottom-left>#explore {
  display:flex!important;flex:0 1 auto;min-width:0!important;
  width:auto!important;padding:14px 0!important;
  justify-content:center;align-items:center;column-gap:20px;
 }
 body.atlas-mode #experience #explore #explore-label {
  flex:0 1 auto;width:auto;min-width:0;white-space:nowrap;
 }
}

/* Interior mobile views only: slightly smaller camera, same touch target. */
@media (max-width:950px) {
 body.atlas-mode #experience :is(#explore,#explore-top) .dial,
 body #print-dialog #print-explore .dial {scale:.95}
 body.atlas-mode #experience :is(#explore,#explore-top):is(:hover,:focus-visible,:active) .dial,
 body #print-dialog #print-explore:is(:hover,:focus-visible,:active) .dial {scale:1.121}
}

/* All interior phone pages and in-page views share the same 5% reduction. */
@media (max-width:950px) {
 html.mobile-camera-interior body #experience :is(#explore,#explore-top) .dial,
 body.atlas-mode #experience :is(#explore,#explore-top) .dial,
 body.print-open #experience :is(#explore,#explore-top) .dial,
 body #print-dialog #print-explore .dial {scale:.95}
 html.mobile-camera-interior body #experience :is(#explore,#explore-top):is(:hover,:focus-visible,:active) .dial,
 body.atlas-mode #experience :is(#explore,#explore-top):is(:hover,:focus-visible,:active) .dial,
 body.print-open #experience :is(#explore,#explore-top):is(:hover,:focus-visible,:active) .dial,
 body #print-dialog #print-explore:is(:hover,:focus-visible,:active) .dial {scale:1.121}
}

/* Replace the editorial tagline with a useful print-selection action on phones. */
#choose-another-photo {display:none}
@media (max-width:950px) {
 #print-dialog .print-content>span.eyebrow {display:none}
 #print-dialog .print-content>#choose-another-photo {
  display:block;max-width:calc(100% - 100px);min-height:44px;
  margin:0 0 12px;padding:8px 0;text-align:left;
  font:400 11px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:inherit;background:none;border:0;
  cursor:pointer;touch-action:manipulation;
 }
 #print-dialog #choose-another-photo:focus-visible {outline:1px solid currentColor;outline-offset:4px}
 #print-dialog #choose-another-photo:active {opacity:.7}
}

/* Print detail: an additional 5% reduction, retaining the full touch target. */
@media (max-width:950px) {
 body #print-dialog #print-explore .dial {scale:.9025}
 body #print-dialog #print-explore:is(:hover,:focus-visible,:active) .dial {scale:1.06495}
}

/* Phone journey: bottom navigation and a further 10% smaller reflex. */
@media (max-width:950px) {
 html body.atlas-mode #experience .bottom-left {
  top:auto!important;bottom:calc(20px + env(safe-area-inset-bottom,0px))!important;
 }
 html body.atlas-mode #experience #atlas {
  bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
 }
 html body.atlas-mode #experience #explore .dial {
  transform:scale(.7857)!important;
 }
}

/* Use the space freed above the phone gallery. */
@media (max-width:950px) {
 html body.atlas-mode #experience .series-picker {top:calc(76px + env(safe-area-inset-top,0px))!important;}
 html body.atlas-mode #experience #atlas {top:calc(128px + env(safe-area-inset-top,0px))!important;}
}

/* A quieter, more refined phone menu, retaining comfortable touch targets. */
@media (max-width:950px) {
 html body #menu-dialog .menu-content [data-nav] {
  font-size:24px!important;line-height:1.22!important;letter-spacing:-.025em!important;
 }
}

/* Trial: two phone menu columns, sound beside the portrait heading. */
@media (max-width:950px) {
 html body #menu-dialog .menu-content {
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto repeat(3,44px) minmax(264px,1fr) auto;
  column-gap:20px;row-gap:4px;align-content:start;align-items:center;
 }
 html body #menu-dialog .menu-content>.eyebrow {grid-column:1 / -1;grid-row:1;}
 html body #menu-dialog .menu-content>[data-nav=regard] {grid-column:1;grid-row:2;}
 html body #menu-dialog .menu-content>[data-nav=journey] {grid-column:1;grid-row:3;}
 html body #menu-dialog .menu-content>[data-nav=explore] {grid-column:1;grid-row:4;}
 html body #menu-dialog .menu-content>[data-nav=prints] {grid-column:2;grid-row:2;}
 html body #menu-dialog .menu-content>#menu-contact-row {display:contents!important;}
 html body #menu-dialog #menu-contact-row>[data-nav=contact] {grid-column:2;grid-row:3;}
 html body #menu-dialog #menu-contact-row>#menu-video-portfolio {grid-column:2;grid-row:4;}
 html body #menu-dialog .menu-content>#music-dock {
  grid-column:1 / -1;grid-row:5;align-self:stretch;position:relative!important;
  margin-top:16px;min-height:264px;width:100%;
 }
 html body #menu-dialog .menu-content>small {grid-column:1 / -1;grid-row:6;}
 html body #menu-dialog #music-bottom {
  position:absolute!important;top:0!important;bottom:auto!important;
  left:calc((100% - 100vw)/2 + 20px)!important;right:auto!important;
  transform:none!important;width:68px;min-width:68px;z-index:36;
 }
}

@media (max-width:950px) {
 html body #menu-dialog #menu-legal-links {grid-column:1 / -1;grid-row:7;display:flex!important;justify-content:space-between;}
 html body #menu-dialog #menu-copyright-open {grid-column:1;grid-row:7;}
 html body #menu-dialog #menu-legal-open {grid-column:2;grid-row:7;}
}

/* Pair the series introduction with Explore in the second column. */
@media (max-width:950px) {
 html body #menu-dialog .menu-content>#menu-series-overview {
  grid-column:2;grid-row:4;position:static!important;inset:auto!important;
  align-self:center;justify-self:start;order:0;width:100%;max-width:none;
  font:400 24px/1.22 Georgia,'Times New Roman',serif!important;
  font-variant-caps:normal!important;letter-spacing:-.025em!important;
  text-transform:none!important;text-align:left;color:var(--white);
  margin:0;padding:7px 0;min-height:44px;
 }
 html body #menu-dialog .menu-content {grid-template-rows:auto 44px 44px auto minmax(264px,1fr) auto;}
 html body #menu-dialog .menu-content>[data-nav=explore] {align-self:center;}
}

/* Menu order: Prints, Series, Contact in the right column. */
@media (max-width:950px) {
 html body #menu-dialog .menu-content>#menu-series-overview {grid-row:3;}
 html body #menu-dialog #menu-contact-row>[data-nav=contact] {grid-row:4;}
}

/* Align the music symbol with the left edge of Explorer. */
@media (max-width:950px) {
 html body #menu-dialog #music-bottom {left:-2px!important;}
}

/* Lift the portrait inside its existing visible frame. */
@media (max-width:950px) {
 html body #menu-dialog #menu-mobile-portrait-frame>#menu-mobile-self-portrait {
  transform:translateY(-36px);clip-path:inset(36px 0 0 0);
 }
}

/* Childhood card: natural image proportions and a compact editorial layout. */
@media(max-width:950px){
 html body #menu-dialog .menu-content{grid-template-rows:auto 44px 44px auto auto auto;align-content:start}
 html body #menu-dialog .menu-content>#music-dock{min-height:0;flex:0 0 auto;align-self:start;margin-top:20px;padding-top:34px}
 html body #menu-dialog #menu-mobile-portrait-frame{flex:0 0 auto;min-height:0;height:auto;width:100%;margin:14px 0 26px;padding:10px}
 html body #menu-dialog #menu-mobile-portrait-frame>#menu-mobile-self-portrait{position:static;top:auto;transform:none;clip-path:none;width:100%;height:auto;margin:0}
}

/* Mobile editorial menu: navigation wraps the childhood photograph in an L. */
@media(max-width:950px){
 html body #menu-dialog .menu-content{padding:clamp(100px,15svh,140px) 24px 90px!important;grid-template-columns:42% minmax(0,1fr);grid-template-rows:76px repeat(4,clamp(68px,11svh,96px)) auto;column-gap:12px;row-gap:0;align-content:start;overflow-y:auto}
 html body #menu-dialog .menu-content>.eyebrow{display:none}
 html body #menu-dialog .menu-content>[data-nav=regard]{grid-column:1;grid-row:1}
 html body #menu-dialog .menu-content>[data-nav=journey]{grid-column:2;grid-row:1;justify-self:start}
 html body #menu-dialog .menu-content>[data-nav=explore]{grid-column:1;grid-row:2}
 html body #menu-dialog .menu-content>[data-nav=prints]{grid-column:1;grid-row:3}
 html body #menu-dialog .menu-content>#menu-series-overview{grid-column:1;grid-row:4}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]{grid-column:1;grid-row:5}
 html body #menu-dialog .menu-content [data-nav],html body #menu-dialog .menu-content>#menu-series-overview{font-size:clamp(23px,6.1vw,30px)!important;line-height:1.2!important;letter-spacing:-.045em!important;padding:8px 0!important;max-width:100%;white-space:nowrap;align-self:start}
 html body #menu-dialog .menu-content>#music-dock{display:contents!important}
 html body #menu-dialog #menu-mobile-portrait-frame{grid-column:2;grid-row:2 / 7;align-self:start;display:block;position:relative;width:100%;height:auto;min-height:0;margin:0;padding:0;border:0;background:none;overflow:visible}
 html body #menu-dialog #menu-mobile-portrait-frame>#menu-mobile-self-portrait{display:block;width:100%;height:auto;position:static;transform:none;clip-path:none;border:1px solid #ded7ca50;padding:5px;background:#131c24}
 html body #menu-dialog #menu-childhood-caption{position:relative;margin:18px 0 0;padding:18px 0 0;border-top:1px solid #ded7ca50;text-align:left;font:clamp(25px,7vw,32px)/1.18 Georgia,'Times New Roman',serif;letter-spacing:-.035em;color:#f0ece3}
 html body #menu-dialog #menu-childhood-caption em{font-size:clamp(24px,6.7vw,29px);line-height:1.3;margin-top:9px;color:#bdb8ac}
 html body #menu-dialog #music-bottom{position:fixed!important;left:24px!important;top:auto!important;bottom:94px!important}
 html body #menu-dialog #menu-legal-links{position:fixed;bottom:24px;left:24px;right:24px;margin:0;padding-top:14px;border-top:1px solid #ffffff25;gap:12px}
 html body #menu-dialog .menu-content>small{display:none}
}
@media(max-width:950px) and (max-height:550px){
 html body #menu-dialog .menu-content{padding-top:84px!important;grid-template-rows:56px repeat(4,56px) auto;padding-bottom:120px!important}
 html body #menu-dialog #music-bottom{position:absolute!important;top:450px!important;bottom:auto!important}
 html body #menu-dialog #menu-legal-links{position:absolute;top:510px;bottom:auto}
}

/* Place the perspective above its childhood photograph. */
@media(max-width:950px){
 html body #menu-dialog .menu-content>[data-nav=journey]{grid-column:1;grid-row:1;justify-self:start}
 html body #menu-dialog .menu-content>[data-nav=regard]{grid-column:2;grid-row:1;justify-self:stretch;width:100%!important;max-width:none!important;text-align:center!important;padding-left:0!important;padding-right:0!important;white-space:normal}
}

/* Larger photograph with navigation along its left edge and a contact action. */
@media(max-width:950px) and (min-height:551px){
 html body #menu-dialog .menu-content{padding:94px 18px 150px!important;grid-template-columns:36% minmax(0,1fr);column-gap:10px;grid-template-rows:54px repeat(4,clamp(57px,9svh,80px)) auto}
 html body #menu-dialog .menu-content>[data-nav=regard]{grid-column:2;grid-row:1;align-self:center}
 html body #menu-dialog .menu-content>[data-nav=journey]{grid-column:1;grid-row:2}
 html body #menu-dialog .menu-content>[data-nav=explore]{grid-column:1;grid-row:3}
 html body #menu-dialog .menu-content>[data-nav=prints]{grid-column:1;grid-row:4}
 html body #menu-dialog .menu-content>#menu-series-overview{grid-column:1;grid-row:5}
 html body #menu-dialog .menu-content [data-nav],html body #menu-dialog .menu-content>#menu-series-overview{font-size:clamp(21px,5.7vw,27px)!important}
 html body #menu-dialog #menu-mobile-portrait-frame{grid-column:2;grid-row:2 / 7}
 html body #menu-dialog #menu-childhood-caption{font-size:clamp(24px,6.5vw,29px);margin-top:14px;padding-top:14px}
 html body #menu-dialog #menu-childhood-caption em{font-size:clamp(21px,5.7vw,26px);margin-top:7px}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]{position:fixed;bottom:105px;left:24px;right:24px;width:calc(100% - 48px);max-width:none;min-height:50px;padding:12px 20px!important;border:1px solid #d7d0c070;text-align:center;background:#182127;color:#f0ece3;font:24px/1.2 Georgia,'Times New Roman',serif!important;letter-spacing:.01em!important}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]::after{content:'↗';position:absolute;right:20px;font:23px/1.2 Georgia,serif}
 html body #menu-dialog #music-bottom{bottom:57px!important}
 html body #menu-dialog #menu-legal-links{bottom:6px;padding-top:0;border-top:0}
}
@media(max-width:950px) and (min-height:551px) and (max-height:740px){
 html body #menu-dialog .menu-content{padding-top:72px!important;grid-template-rows:48px repeat(4,54px) auto}
 html body #menu-dialog #menu-mobile-portrait-frame>#menu-mobile-self-portrait{max-height:235px;object-fit:contain;padding:4px}
 html body #menu-dialog #menu-childhood-caption{font-size:22px;margin-top:10px;padding-top:10px}
 html body #menu-dialog #menu-childhood-caption em{font-size:20px;line-height:1.2}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]{bottom:96px;min-height:46px}
}

#menu-contact-camera{display:none}
@media(max-width:950px){
 html body #menu-dialog #menu-contact-row>[data-nav=contact]{position:fixed;left:24px;right:auto;bottom:118px;top:auto;width:calc(100% - 150px);max-width:none;min-height:60px;padding:10px 0!important;text-align:left;background:none;border:0;border-bottom:1px solid #d7d0c060;font:32px/1.2 Georgia,'Times New Roman',serif!important;letter-spacing:-.02em!important}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]::after{display:none}
 #menu-contact-camera{display:block;position:fixed;right:24px;bottom:115px;width:86px;height:66px;padding:0;z-index:40;background:none;border:0;color:#f3f2ee}
 #menu-contact-camera>svg{width:100%;height:100%;display:block}
 #menu-contact-camera .dial{position:absolute;left:25.7%;top:28%;width:40%;height:52%;border:0;transform:none;background:none;box-shadow:none}
 #menu-contact-camera .dial:before,#menu-contact-camera .dial:after{display:none}
 #menu-contact-camera:focus-visible{outline:1px solid #f3f2ee;outline-offset:6px}
}
@media(max-width:950px) and (max-height:550px){
 #menu-contact-camera{position:absolute;top:450px;bottom:auto}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]{position:absolute;top:450px;bottom:auto}
}

/* A smaller, offset contact signature, linked to the camera by a fine elbow. */
@media(max-width:950px) and (min-height:551px){
 html body #menu-dialog #menu-contact-row>[data-nav=contact]{left:auto;right:98px;bottom:151px;width:128px;min-height:44px;padding:8px 0!important;border:0;text-align:left;font:italic 25px/1.15 Georgia,'Times New Roman',serif!important;letter-spacing:-.025em!important;overflow:visible}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]::after{content:'';display:block;position:absolute;left:3px;right:auto;top:42px;width:99px;height:24px;border-left:1px solid #c9c3b34d;border-bottom:1px solid #c9c3b34d;pointer-events:none}
 #menu-contact-camera{right:37px;bottom:116px;width:58px;height:48px;opacity:.88;transition:opacity .2s}
 #menu-contact-camera:hover,#menu-contact-camera:focus-visible{opacity:1}
}

/* Lower the upper mobile menu composition by one centimetre. */
@media(max-width:950px) and (min-height:741px){
 html body #menu-dialog .menu-content{padding-top:calc(94px + 1cm)!important}
}
@media(max-width:950px) and (min-height:551px) and (max-height:740px){
 html body #menu-dialog .menu-content{padding-top:calc(72px + 1cm)!important}
}

/* Preserve separation from Contact on shorter phone screens. */
@media(max-width:950px) and (min-height:551px) and (max-height:740px){
 html body #menu-dialog #menu-mobile-portrait-frame>#menu-mobile-self-portrait{max-height:clamp(110px,calc(100svh - 477px),190px);object-fit:contain}
}

/* Interactive menu links; the contact signature keeps its plain typography. */
@media(max-width:950px){
 html body #menu-dialog .menu-content :is([data-nav=regard],[data-nav=journey],[data-nav=explore],[data-nav=prints],#menu-series-overview):is(:hover,:focus-visible,:active){text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:6px}
 html body #menu-dialog .menu-content [data-nav=contact]:is(:hover,:focus-visible,:active){text-decoration:none!important}
}

/* A continuous photographic frame, measured against the visible menu elements. */
#menu-photo-thread{display:none}
@media(max-width:950px) and (min-height:551px){
 html body #menu-dialog #menu-mobile-portrait-frame>#menu-mobile-self-portrait{width:auto;max-width:100%;height:auto;max-height:clamp(145px,calc(100dvh - 490px),300px);margin:0 0 0 auto;padding:0;border:0;background:none;object-fit:contain}
 html body #menu-dialog #menu-childhood-caption{border:0;margin-top:16px;padding:0 13px 0 0;font-size:clamp(22px,5.7vw,27px)}
 html body #menu-dialog #menu-childhood-caption em{font-size:clamp(20px,5.2vw,24px)}
 html body #menu-dialog #menu-contact-row>[data-nav=contact]::after{display:none}
 #menu-photo-thread{display:block;position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible}
 #menu-photo-thread path{fill:none;stroke:#c9c3b3;stroke-opacity:.48;stroke-width:.8;vector-effect:non-scaling-stroke}
}

/* Keep the mobile caption aligned with the photo when browser bars resize it. */
@media(max-width:950px) and (min-height:551px){
 html body #menu-dialog #menu-childhood-caption{
  box-sizing:border-box;width:var(--menu-photo-width,100%);max-width:100%;
  margin-left:auto;margin-right:0;padding:0;
  font-size:clamp(16px,calc(var(--menu-photo-width,200px) * .13),27px);
 }
 html body #menu-dialog #menu-childhood-caption em{font-size:.92em;line-height:1.25}
}