/* Mobile-only refinement layer. Desktop (>= 761px) is intentionally untouched. */
@media (max-width:760px) {
  /* Header: one clear navigation control instead of several competing links. */
  .site-header{align-items:center;padding:22px 20px;gap:14px}
  .site-header>nav{display:none!important}
  .wordmark{flex:1;min-width:0}
  .mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:8px;border:1px solid #ffffff30;background:#101718b8;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .mobile-menu-toggle span{display:block;width:100%;height:1.5px;background:#ece7d5;transition:transform .2s,opacity .2s}
  .mobile-menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) 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(-6.5px) rotate(-45deg)}

  .mobile-menu[hidden]{display:none!important}
  .mobile-menu{position:fixed;inset:0;z-index:100;padding:max(22px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));overflow:auto;background:#0f120f;color:#eee9d8}
  body.mobile-menu-open{overflow:hidden}
  .mobile-menu-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff22;padding-bottom:18px;margin-bottom:8px;font:12px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:#9eaa94}
  .mobile-menu-close{width:44px;height:44px;margin:-10px -8px -10px 0;color:#ede8d8;font:31px/1 Arial,sans-serif}
  .mobile-menu nav{display:block}
  .mobile-menu nav a{display:grid;grid-template-columns:34px 1fr;align-items:center;min-height:58px;border-bottom:1px solid #ffffff16}
  .mobile-menu nav a>span{font:12px var(--mono);color:var(--amber)}
  .mobile-menu nav strong{font:400 27px/1.15 var(--serif);letter-spacing:-.5px}
  .mobile-menu-section{margin-top:28px;border-top:1px solid #ffffff22;padding-top:14px;display:grid;grid-template-columns:1fr auto;gap:0 20px}
  .mobile-menu-label{grid-column:1/-1;margin-bottom:8px;font:11px/1.5 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:#87957e}
  .mobile-menu-section a{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid #ffffff12;font-size:15px}
  .mobile-menu-section a b{font-weight:400;color:var(--amber)}
  .mobile-menu-links{grid-template-columns:1fr}
  .mobile-motion-control{margin-top:28px;width:100%;min-height:48px;border:1px solid #ffffff28;text-align:left;padding:0 14px;color:#bac5b0;font-size:14px}

  /* Footer links move into the menu on phones. */
  .room-footer{display:none!important}

  /* The desktop utilities tray is replaced by one recognisable sound button. */
  .sound-credits,.doc-menu,#motion-toggle{display:none!important}
  .room-controls,.away .room-controls{left:auto;right:14px;bottom:max(10px,env(safe-area-inset-bottom));width:52px;height:52px;max-width:none;padding:0;gap:0;border:0;border-radius:50%;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  #sound-toggle{position:relative;width:52px;min-width:52px;height:52px;min-height:52px;padding:0;display:flex;align-items:center;justify-content:center;gap:3px;border:1px solid #ffffff40;border-radius:50%;background:#101718dc;color:#e7d9ae;box-shadow:0 8px 22px #0006;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  #sound-toggle:hover,#sound-toggle:focus-visible,#sound-toggle[aria-pressed=true]{border-color:var(--amber);color:var(--amber)}
  .mobile-sound-icon{font:24px/1 Georgia,serif;transform:translateY(-1px)}
  .sound-label{display:none!important}
  .sound-bars{width:12px;height:15px;gap:1px;justify-content:center}
  .sound-bars i{width:1.5px}

  /* Hotspots: quick gold invitation inside a slower, calm loop. */
  .interaction-marker::after{content:'';position:absolute;inset:-7px;border:1px solid #edc878;border-radius:50%;opacity:0;transform:scale(.72);animation:mobile-hotspot-halo 1.8s ease-out infinite;pointer-events:none}
  .marker-ring{animation:mobile-hotspot-ring 1.8s ease-in-out infinite}
  .hotspot-computer .marker-ring,.hotspot-computer .interaction-marker::after{animation-delay:.55s}
  .hotspot-board .marker-ring,.hotspot-board .interaction-marker::after{animation-delay:1.1s}
  .hotspot:hover .marker-ring,.hotspot:focus-visible .marker-ring{animation-play-state:paused}

  /* The screens and board remind the visitor that the room is interactive. */
  .tv-idle::after{animation-duration:3.8s!important;animation-delay:.15s!important}
  .computer-idle::after{animation-duration:3.8s!important;animation-delay:1.05s!important}
  .board-illumination{animation-duration:3.8s!important;animation-delay:1.95s!important}

  /* Work index: stop the desktop category column consuming half a phone row. */
  .work-row{display:grid;grid-template-columns:62px minmax(0,1fr) 24px;grid-template-areas:'image main arrow';gap:14px;align-items:center;padding:18px 0}
  .work-row-image{grid-area:image;width:62px;height:55px}
  .work-row-main{grid-area:main;min-width:0}
  .work-row-kind{display:none!important}
  .work-row-arrow{grid-area:arrow;padding:0;text-align:right}
  .work-row-main strong{font-size:23px;line-height:1.15}
  .work-row-main>span{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .index-filters,.library-filters{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:12px;margin-right:-20px;padding-right:20px}
  .index-filters::-webkit-scrollbar,.library-filters::-webkit-scrollbar{display:none}
  .index-filters button,.library-filters button{flex:0 0 auto;min-height:42px}

  /* Campaign list stays readable across common phone widths. */
  .channel-guide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .channel-choice{min-height:78px}

  /* The smaller sound control no longer needs the old bottom reserve. */
  #view{padding-bottom:70px}

  @keyframes mobile-hotspot-ring{
    0%,68%,100%{transform:scale(1);background:#151a1820;border-color:#f4efdb;box-shadow:0 0 10px #fff4d52b}
    76%{transform:scale(1.12);background:#e4b75c66;border-color:#f4ce85;box-shadow:0 0 0 4px #f4ce8527,0 0 18px #f4ce8580}
    86%{transform:scale(1.02);background:#f4ce8536;border-color:#f4ce85;box-shadow:0 0 0 8px #f4ce850a,0 0 15px #f4ce8555}
  }
  @keyframes mobile-hotspot-halo{
    0%,68%,100%{opacity:0;transform:scale(.72)}
    74%{opacity:.7;transform:scale(.82)}
    89%{opacity:0;transform:scale(1.5)}
  }
}

@media (max-width:430px){
  .channel-guide{grid-template-columns:1fr}
}

@media (max-width:370px){
  .mobile-menu nav strong{font-size:24px}
}

/* MOBILE ROOM HOMEPAGE
   The copy starts at the visual end of the portrait room, not after a full
   viewport. The portrait room plane itself finishes at roughly 72svh, so 75svh
   gives it a small landing zone and then hands off to the editorial section. */
@media(max-width:760px){
  body[data-view="room"]{
    --mobile-copy-start:75svh;
    --mobile-copy-gap:clamp(18px,2.2svh,22px);
    min-height:100%;
    overflow-x:hidden;
    background:#10120f;
  }

  body[data-view="room"] .site-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
  }

  /* Keep the full room available for hotspot geometry, while the content layer
     takes over as soon as the photographed plane has visually ended. */
  body[data-view="room"] .room{
    position:absolute;
    inset:0 0 auto;
    height:100svh;
    min-height:0;
    overflow:hidden;
  }

  body[data-view="room"] #main{
    position:relative;
    min-height:0;
  }

  body[data-view="room"] .home{
    position:relative;
    inset:auto;
    min-height:0;
    padding-top:var(--mobile-copy-start);
    background:linear-gradient(to bottom,transparent 0,transparent var(--mobile-copy-start),#10120f var(--mobile-copy-start),#10120f 100%);
    pointer-events:none;
  }

  body[data-view="room"] .room-title{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:0;
    padding:var(--mobile-copy-gap) 20px 0;
    background:#10120f;
    text-shadow:none;
  }
  body[data-view="room"] .room-title .eyebrow{
    margin:0 0 12px;
  }
  body[data-view="room"] .room-title h1{
    margin:0 0 18px;
    font-size:clamp(39px,10.8vw,46px);
    line-height:1.01;
    letter-spacing:-1.35px;
  }
  body[data-view="room"] .room-title>p:last-child{
    max-width:390px;
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#d2d0bf;
  }

  /* Nothing here is being squeezed into the first screen. Let it scroll. */
  body[data-view="room"] .room-shortcuts{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:40px 20px 120px;
    padding:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0;
    border-top:1px solid var(--line);
    pointer-events:auto;
  }
  body[data-view="room"] .room-shortcuts a{
    min-width:0;
    min-height:78px;
    padding:15px 12px 16px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    flex-direction:column;
    justify-content:center;
    font-size:16px;
    line-height:1.22;
  }
  body[data-view="room"] .room-shortcuts a:nth-child(even){
    padding-left:18px;
    border-left:1px solid var(--line);
  }
  body[data-view="room"] .room-shortcuts span{
    display:block;
    margin:0 0 5px;
    font-size:11px;
  }
}

@media(max-width:390px){
  body[data-view="room"]{--mobile-copy-start:76svh}
  body[data-view="room"] .room-title h1{font-size:38px}
}