/* Mobile compositions only. The original photographs and desktop styles stay intact. */
@media (max-width:700px) {
  .hero {
    --mobile-scene-height:max(100svh,650px);
    height:var(--mobile-scene-height);
    min-height:650px;
    background:#141414;
    border-bottom:1px solid #ffffff90;
  }
  .top {height:80px;padding:22px 5%;background:linear-gradient(#0005,transparent);gap:12px}
  .top .wordmark {font-size:clamp(17px,5.1vw,22px)}
  .top nav {gap:12px;flex-shrink:0}
  .hero-stage {top:0;bottom:0;height:100%}
  .hero-stage::after {display:block;background:linear-gradient(0deg,#0009,transparent 40%,transparent 80%,#0003)}
  .hero-top {top:86px;font-size:8px;line-height:1.2}
  .scene-column {height:100%}
  .television {
    top:0!important;left:0;width:100%;height:var(--mobile-scene-height);
    aspect-ratio:auto;transform:none;overflow:hidden;
  }
  .television:not(.ready) .tv-object {visibility:hidden}
  .tv-object {
    position:absolute;left:var(--mobile-image-left,0px);top:var(--mobile-image-top,0px);
    width:var(--mobile-image-width,100%);height:var(--mobile-image-height,100%);
    max-width:none;object-fit:fill;
  }
  .television .screen {
    left:var(--mobile-screen-left)!important;top:var(--mobile-screen-top)!important;
    width:var(--mobile-screen-width)!important;height:var(--mobile-screen-height)!important;
  }
  .screen video {
    position:absolute;inset:0;width:100%;height:100%;max-width:none;
    /* Fill the calibrated TV mask without stretching the film. */
    translate:none;transform:none;object-fit:cover;object-position:center;
  }
  .osd {font-size:clamp(7px,2.1vw,11px);top:8.5%;left:7.5%;right:7.5%;gap:8px}
  .osd span:last-child {max-width:73%}
  .hero .remote-column {
    position:absolute;top:auto!important;
    left:50%!important;right:auto!important;bottom:184px!important;
    width:min(310px,calc(100% - 32px));height:64px;
    transform:translateX(-50%)!important;touch-action:pan-y;
  }
  .remote.remote-future {
    width:100%;height:100%;max-width:none;padding:0 10px;
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:0;border-radius:34px;cursor:default;touch-action:pan-y;
  }
  .remote-future button,.remote-future .utility-button {
    width:44px;height:44px;border-radius:22px;touch-action:manipulation;
  }
  .remote-future svg {width:22px;height:22px}
  .remote-future .utility-button svg {width:20px;height:20px}
  .remote-grip {width:3px;height:12px;margin:0 4px 0 0;flex-shrink:0;order:0}
  .bottom-grip {order:9;margin:0 0 0 4px}
  .remote-divider {width:1.5px;height:20px;margin:0 2px}
  .remote-future #tv-power {order:1}
  .remote-future .remote-divider:nth-of-type(2) {order:2}
  .remote-future #next {order:3}
  .remote-future .remote-divider:nth-of-type(3) {order:4}
  .remote-future #previous {order:5}
  .remote-future .remote-divider:nth-of-type(4) {order:6}
  .remote-future #tv-pause {order:7}
  .remote-future #tv-sound {order:8}
  .scene-meta {
    top:auto;bottom:112px;left:5%;right:5%;
    height:44px;gap:8px;
  }
  .scene-meta>span {gap:3px}
  .scene-meta strong {font-size:8px;line-height:1.4;overflow-wrap:anywhere}
  .scene-meta #edition {font-size:8px}
  .scene-switch {gap:10px}
  .scene-switch button {width:44px;height:44px;touch-action:manipulation}
  .scene-switch button::before {content:'';position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .hero-bottom {bottom:22px;min-height:62px;height:auto;gap:10px;padding-top:14px;border-top:1px solid #fff;align-items:center}
  .broadcast-info {min-width:0;column-gap:12px}
  .broadcast-info strong {max-width:none;font-size:clamp(16px,5.1vw,25px);line-height:1;overflow-wrap:anywhere}
  .broadcast-info .eyebrow {padding-top:0;font-size:clamp(6px,1.8vw,8px)}
  .broadcast-info .eyebrow span {margin-top:4px;font-size:clamp(10px,2.7vw,13px)}
  .broadcast-info>span:last-child {font-size:clamp(7px,1.9vw,9px);line-height:1.2;max-width:none;margin-top:3px}
  .scroll-hint {margin-left:0;flex-shrink:0}
  .scroll-hint span {width:40px;height:40px}
}

/* Supply the desktop's heavy face on mobile, where Arial Black is not installed. */
@font-face {
  font-family:'Portfolio Wordmark';src:url('fonts/ArialBlack-Wordmark.ttf') format('truetype');
  font-weight:900;font-style:normal;font-display:swap;
}
/* Touch phones keep these styles when landscape exceeds the layout breakpoint. */
@media (max-width:700px), (hover:none) and (pointer:coarse) {
  .top .wordmark,.footer-bottom .wordmark,.case-nav .wordmark,
  .project-info h3,.broadcast-info strong,#case-content h2,#case-content #next-case {
    font-family:'Portfolio Wordmark','Arial Black',sans-serif;
  }
  #close-case:focus-visible {outline:none;border-color:#fff}
}

.mobile-gallery-plane {display:none}
@media (max-width:700px) {
  .project-gallery.has-mobile-gallery {position:relative;overflow:hidden;overflow:clip;contain:paint}
  .has-mobile-gallery>.gallery-track {display:none}
  .mobile-gallery-plane {display:block;position:relative;width:100%;height:var(--gallery-frame-height);overflow:hidden;overflow:clip}
  .mobile-gallery-plane .mobile-gallery-image {
    position:absolute;top:0;left:0;max-width:none;margin:0;padding:0;
    transform:none;will-change:auto;contain:layout paint;
  }
}

/* Mobile header: language row above the name; menu enlarged another 15%.
   The row gap is 120% of the previous language-to-wordmark spacing. */
@media (max-width:700px), (hover:none) and (pointer:coarse) {
  .top {
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:end;height:auto;padding-top:8px;
    column-gap:0;row-gap:calc(28.8px - clamp(12.6px,1.32vw,20.4px));
  }
  .top > .language-switch {
    position:static;grid-column:1 / -1;grid-row:1;
    justify-self:start;justify-content:flex-start;margin:0;
  }
  .top > .wordmark {grid-column:1;grid-row:2;justify-self:start;translate:none}
  .top > .profession {grid-column:2;grid-row:2}
  .top > nav {grid-column:3;grid-row:2;translate:none;margin-left:12px;align-items:baseline;line-height:1;white-space:nowrap}
  .top nav > a[href="#work"],.top nav > a[href="#contact"] {font-size:1.3225em}
}
@media (max-width:700px) {
  .top {padding-top:0;row-gap:calc(26.4px - clamp(10.2px,3.06vw,13.2px))}
}

@media (max-width:360px) {
  .top > nav {gap:6px;margin-left:8px}
}

/* All projects spans the first row; six equally sized themes follow in pairs. */
@media (max-width:700px), (hover:none) and (pointer:coarse) {
  .work-filters {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
  .work-filter {width:100%;min-width:0;min-height:36px;padding-inline:8px;white-space:nowrap}
  .work-filter[data-filter="all"] {grid-column:1 / -1}
  /* Touch browsers can retain :hover after a tap; only selection changes the fill. */
  .work-filter[aria-pressed="false"]:hover {background:transparent;border-color:#fff;color:#fff}
}


/* Portrait composition is independent of the phone typography breakpoint. */
.portrait-layout .hero{
    --mobile-scene-height:max(100svh,650px);
    height:var(--mobile-scene-height);
    min-height:650px;
    background:#141414;
    border-bottom:1px solid #ffffff90;
  }
.portrait-layout .hero-stage{top:0;bottom:0;height:100%}
.portrait-layout .hero-stage::after{display:block;background:linear-gradient(0deg,#0009,transparent 40%,transparent 80%,#0003)}
.portrait-layout .scene-column{height:100%}
.portrait-layout .television{
    top:0!important;left:0;width:100%;height:var(--mobile-scene-height);
    aspect-ratio:auto;transform:none;overflow:hidden;
  }
.portrait-layout .television:not(.ready) .tv-object{visibility:hidden}
.portrait-layout .tv-object{
    position:absolute;left:var(--mobile-image-left,0px);top:var(--mobile-image-top,0px);
    width:var(--mobile-image-width,100%);height:var(--mobile-image-height,100%);
    max-width:none;object-fit:fill;
  }
.portrait-layout .television .screen{
    left:var(--mobile-screen-left)!important;top:var(--mobile-screen-top)!important;
    width:var(--mobile-screen-width)!important;height:var(--mobile-screen-height)!important;
  }
.portrait-layout .screen video{
    position:absolute;inset:0;width:100%;height:100%;max-width:none;
    /* Fill the calibrated TV mask without stretching the film. */
    translate:none;transform:none;object-fit:cover;object-position:center;
  }
.portrait-layout .hero .remote-column{
    position:absolute;top:auto!important;
    left:50%!important;right:auto!important;bottom:184px!important;
    width:min(310px,calc(100% - 32px));height:64px;
    transform:translateX(-50%)!important;touch-action:pan-y;
  }
.portrait-layout .remote.remote-future{
    width:100%;height:100%;max-width:none;padding:0 10px;
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:0;border-radius:34px;cursor:default;touch-action:pan-y;
  }
.portrait-layout .remote-future button,.portrait-layout .remote-future .utility-button{
    width:44px;height:44px;border-radius:22px;touch-action:manipulation;
  }
.portrait-layout .remote-future svg{width:22px;height:22px}
.portrait-layout .remote-future .utility-button svg{width:20px;height:20px}
.portrait-layout .remote-grip{width:3px;height:12px;margin:0 4px 0 0;flex-shrink:0;order:0}
.portrait-layout .bottom-grip{order:9;margin:0 0 0 4px}
.portrait-layout .remote-divider{width:1.5px;height:20px;margin:0 2px}
.portrait-layout .remote-future #tv-power{order:1}
.portrait-layout .remote-future .remote-divider:nth-of-type(2){order:2}
.portrait-layout .remote-future #next{order:3}
.portrait-layout .remote-future .remote-divider:nth-of-type(3){order:4}
.portrait-layout .remote-future #previous{order:5}
.portrait-layout .remote-future .remote-divider:nth-of-type(4){order:6}
.portrait-layout .remote-future #tv-pause{order:7}
.portrait-layout .remote-future #tv-sound{order:8}
.portrait-layout .scene-meta{
    top:auto;bottom:112px;left:5%;right:5%;
    height:44px;gap:8px;
  }
.portrait-layout .scene-meta>span{gap:3px}
.portrait-layout .scene-meta strong{font-size:8px;line-height:1.4;overflow-wrap:anywhere}
.portrait-layout .scene-meta #edition{font-size:8px}
.portrait-layout .scene-switch{gap:10px}
.portrait-layout .scene-switch button{width:44px;height:44px;touch-action:manipulation}
.portrait-layout .scene-switch button::before{content:'';position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.portrait-layout .hero-bottom{bottom:22px;min-height:62px;height:auto;gap:10px;padding-top:14px;border-top:1px solid #fff;align-items:center}
.portrait-layout .broadcast-info{min-width:0;column-gap:12px}
.portrait-layout .broadcast-info strong{max-width:none;font-size:clamp(16px,5.1vw,25px);line-height:1;overflow-wrap:anywhere}
.portrait-layout .broadcast-info .eyebrow{padding-top:0;font-size:clamp(6px,1.8vw,8px)}
.portrait-layout .broadcast-info .eyebrow span{margin-top:4px;font-size:clamp(10px,2.7vw,13px)}
.portrait-layout .broadcast-info>span:last-child{font-size:clamp(7px,1.9vw,9px);line-height:1.2;max-width:none;margin-top:3px}
.portrait-layout .scroll-hint{margin-left:0;flex-shrink:0}
.portrait-layout .scroll-hint span{width:40px;height:40px}

.portrait-layout .hero{--mobile-scene-height:max(100svh,var(--portrait-min-height,650px));height:var(--mobile-scene-height)}
.portrait-layout .television{position:absolute;left:0!important;top:0!important;width:100%!important;height:100%!important;max-height:none;aspect-ratio:auto!important;transform:none!important;background:transparent}
.portrait-layout .tv-object{z-index:1;mask-image:none}
.portrait-layout .screen{z-index:2}
@media(min-width:701px){
  .portrait-layout .hero-top>span:last-child{position:absolute;left:var(--hero-label-left,auto);right:auto;text-align:left;white-space:nowrap}
}