/* Round 14 mobile (owner: mobile agent). Phone layout of the homepage: up to 700 px wide, plus short landscape phones.
   Nicole: “the mobile view is bad and it's hard to see the photos”, “the space between the location and the atelier on
   the mobile is too big”. Astra's ranked phone critique: artifacts/site-rounds/2026-10-21/round-14/astra/mobile-reply.md.
   Companion script: home-mobile.js (photo rails, scene panning, letter reading size). Desktop is untouched: every rule
   sits inside a phone or short landscape media query. Loaded last, so equal specificity wins; !important only where
   the page's inline <style> or scripts' inline styles must be overridden. */

@media (max-width:700px){
 .cinema{--home-body-leading:1.5}
 :root{--m-gutter:16px;--m-pad:20px;--m-reserve:calc(96px + env(safe-area-inset-bottom));--m-top:calc(var(--site-header-height,64px) + 16px)}

 /* Supporting line: 16 px on a restrained local burgundy scrim; the flowers above stay clear. */
 .film-titles .title-scene>p.opening-mission.opening-mission{font-size:16px!important;line-height:24px!important;isolation:isolate;color:#f1e6d7!important;text-shadow:0 1px 2px rgba(20,6,11,.55)!important}
 .film-titles .title-scene>p.opening-mission.opening-mission::before{content:"";position:absolute;inset:-22px -34px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(36,10,18,.66),rgba(36,10,18,.4) 62%,rgba(36,10,18,0))}

 /* Bottom edge: one row of controls 12 px above the safe area; the film's time and the scroll hint sit above it. */
 .visitor-settings.visitor-settings{right:var(--m-gutter)!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;gap:8px!important}
 .visitor-settings.visitor-settings button{min-width:44px;min-height:44px}
 .logo-review-bar.logo-review-bar{left:var(--m-gutter);right:auto;translate:none;bottom:calc(12px + env(safe-area-inset-bottom));max-width:calc(100vw - 2 * var(--m-gutter) - 112px);padding:0 2px;gap:0;min-height:44px;box-sizing:border-box}
 .logo-review-bar.logo-review-bar span{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
 .logo-review-bar.logo-review-bar button{flex:none}
 .cinema .stage .film-timecode{left:var(--m-gutter)!important;right:auto!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;top:auto!important}
 html[data-m-crowded] .cinema .stage .film-timecode{opacity:0!important;transition:opacity .3s ease}
 .cinema .stage .journey-hint{left:auto!important;right:var(--m-gutter)!important;bottom:calc(66px + env(safe-area-inset-bottom))!important;top:auto!important;text-align:right}

}

@media (max-width:1100px), (max-aspect-ratio:6/5){
 /* Photo rails: one large print at a time, native swipe with snap, a count and previous/next below.
    Prints rest upright and fully opaque (the page's settle-in opacity and offsets are switched off here). */
 html body :is(#community-introduction,#room-dossier,#membership-introduction) .m-rail.m-rail{display:flex!important;grid-template-columns:none!important;gap:12px!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;margin:16px calc(-1 * var(--rail-bleed,0px)) 0!important;padding:0!important;width:auto!important;max-width:none!important;transform:none!important}
 .m-rail::-webkit-scrollbar{display:none}
 html body :is(#community-introduction,#room-dossier,#membership-introduction) .m-rail.m-rail>.polaroid{flex:0 0 100%;width:100%!important;max-width:none!important;min-width:0;box-sizing:border-box;scroll-snap-align:center;scroll-snap-stop:always;position:relative!important;inset:auto!important;margin:0!important;padding:8px 8px 0!important;translate:none!important;transform:none!important;rotate:none!important;--tilt:0deg;transition:none!important}
 html body :is(#community-introduction,#room-dossier,#membership-introduction) .m-rail.m-rail>.polaroid img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;max-height:none!important}
 html body :is(#community-introduction,#room-dossier,#membership-introduction) .m-rail.m-rail>.polaroid figcaption{font-size:15px!important;line-height:1.3!important;min-height:0!important;padding:8px 2px 10px!important;display:flex!important;justify-content:space-between;gap:8px}
 html body :is(#community-introduction,#room-dossier,#membership-introduction) .m-rail.m-rail>.polaroid figcaption span{display:inline!important}
 .m-rail-controls{opacity:var(--m-arrive,1);display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px calc(-1 * var(--rail-bleed,0px)) 0;color:#f1e6d7}
 .m-rail-controls p{margin:0;padding:4px 8px;background:rgba(36,10,18,.55);font:13px/1.5 var(--mono,'Departure',monospace);letter-spacing:.06em;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.4)}
 .m-rail-controls>div{display:flex;gap:8px}
 .m-rail-controls button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(241,230,215,.4);border-radius:0;background:rgba(36,10,18,.55);color:inherit;cursor:pointer}
 .m-rail-controls button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
 .m-rail-controls button[aria-disabled=true]{opacity:.35;cursor:default}
 .m-rail-controls button:focus-visible{outline:2px solid #f1e6d7;outline-offset:2px}
}

/* Motion (scroll film) scenes on phones: panels and their photographs flow as one column under the header, clear of the
   reserved control area. home-mobile.js pans a column upward while its scene holds when it is taller than the screen. */
@media (max-width:700px){
 /* Scene 2: mission panel, then the rail. */
 .cinema.motion-enabled #community-introduction.community-moment{padding:calc(var(--m-top) + var(--m-pad)) calc(var(--m-gutter) + var(--m-pad)) var(--m-reserve)!important;align-items:flex-start!important}
 .cinema.motion-enabled #community-introduction .community-composition{align-content:start!important;column-gap:16px!important;width:100%!important;--rail-bleed:var(--m-pad)}
 .cinema.motion-enabled #community-introduction .community-composition::after{margin:calc(-1 * var(--m-pad))!important}
 .cinema #community-introduction .mission-prints-row.m-rail{grid-row:5!important;grid-column:1/-1!important;margin-top:calc(var(--m-pad) + 16px)!important}
 .cinema #community-introduction .m-rail-controls{grid-row:6;grid-column:1/-1}

 /* Beautiful obsessions: panel at the top, rail directly below it (home-mobile.js sets the rail's top). */
 html body .cinema.motion-enabled .room-dossier[data-beat=obsession] .room-layout{inset:calc(var(--m-top) + var(--m-pad)) calc(var(--m-gutter) + var(--m-pad)) auto!important}
 .cinema.motion-enabled .room-dossier[data-beat=obsession] .room-layout::after{inset:calc(-1 * var(--m-pad))!important}
 html body .cinema.motion-enabled #room-dossier .obsession-prints{left:var(--m-gutter)!important;right:var(--m-gutter)!important;bottom:auto!important;width:auto!important;top:var(--m-prints-top,60%)!important;--rail-bleed:0px}
 html body .cinema.motion-enabled #room-dossier .obsession-prints .m-rail{margin-top:0!important}

 /* The tour: player across the content width with its whole frame; text inside the same panel. */
 .cinema.motion-enabled .room-tour-moment{margin-inline:0!important;width:auto!important;max-width:100%}
 .cinema.motion-enabled .room-tour-moment :is(.tour-chapters,.tour-moment-caption){width:auto!important;max-width:100%!important;margin-inline:0!important;box-sizing:border-box}
 .cinema.motion-enabled .room-tour-moment::after{inset:-16px 0!important}
 .cinema.motion-enabled .room-tour-moment .tour-frame{width:100%!important;margin-inline:0!important}
 .cinema.motion-enabled .room-tour-moment :is(.tour-moment-heading,.tour-moment-caption,.tour-moment-note,.tour-timecode){padding-inline:12px;box-sizing:border-box}

 /* The details: panel, then the two prints as a rail. */
 .cinema.motion-enabled #membership-introduction.community-moment{padding:calc(var(--m-top) + var(--m-pad)) calc(var(--m-gutter) + var(--m-pad)) var(--m-reserve)!important;align-items:flex-start!important}
 .cinema.motion-enabled #membership-introduction .community-composition{width:100%!important;max-width:none!important;margin:0!important;--rail-bleed:var(--m-pad)}
 html body .cinema.motion-enabled #membership-introduction .membership-note::after{inset:calc(-1 * var(--m-pad))!important}
 .cinema.motion-enabled #membership-introduction .member-prints.m-rail{margin-top:calc(var(--m-pad) + 16px)!important}
 .cinema.motion-enabled #membership-introduction .community-actions a{min-height:44px;display:inline-flex;align-items:center}

}
/* Narrow phones (375 px and below): Our ethos takes its own line so the two room links stay on one. */
@media (max-width:385px){
 html body #community-introduction .community-actions{grid-row:4!important;grid-column:1/-1!important}
 html body #community-introduction .mission-prints .room-links{grid-row:5!important;grid-column:1/-1!important;margin-top:0!important;flex-wrap:nowrap}
 html body .cinema #community-introduction .mission-prints-row.m-rail.m-rail{grid-row:6!important}
 html body .cinema #community-introduction .m-rail-controls{grid-row:7}
 html body .cinema.motion-enabled #community-introduction .community-composition::after{grid-row:1/6!important}
}

/* Short landscape phones (the page is in its static reading flow there): controls in the corners, clear of the copy. */
@media (max-height:500px) and (min-aspect-ratio:1/1) and (min-width:701px){
 .logo-review-bar.logo-review-bar{left:16px;right:auto;translate:none;bottom:calc(10px + env(safe-area-inset-bottom));padding:0 2px;gap:0}
 .logo-review-bar.logo-review-bar span{min-width:0}
 .visitor-settings.visitor-settings{right:16px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important}
 /* The details: the two prints were squeezed into a 100 px column; they sit below the text at a readable size. */
 html body .cinema:not(.motion-enabled) #membership-introduction .community-composition{display:block!important}
 html body .cinema:not(.motion-enabled) #membership-introduction .member-prints{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;width:auto!important;max-width:640px!important;margin:28px 0 0 16px!important}
 html body .cinema:not(.motion-enabled) #membership-introduction .member-prints .polaroid{width:auto!important;max-width:none!important;opacity:1!important;translate:none!important;transform:none!important}
 html body .cinema:not(.motion-enabled) #membership-introduction .member-prints .polaroid img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover}
}

@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (max-aspect-ratio:6/5){
 html body .cinema :is(#community-introduction,#room-dossier) .m-rail.m-rail{margin:0!important;gap:16px!important}
 html body .cinema :is(#community-introduction,#room-dossier) .m-rail.m-rail>.polaroid{flex:0 0 min(420px,70%)!important;width:min(420px,70%)!important}
 html body .cinema :is(#community-introduction,#room-dossier) .m-rail-controls{margin:10px 0 0!important}
}

@media (min-width:701px) and (max-height:850px) and (max-width:1100px), (min-width:701px) and (max-height:850px) and (max-aspect-ratio:6/5){
 html body .cinema :is(#community-introduction,#room-dossier) .m-rail.m-rail>.polaroid{flex-basis:min(360px,70%)!important;width:min(360px,70%)!important}
 html body .cinema :is(#community-introduction,#room-dossier) .m-rail-controls{margin-top:4px!important}
}