/* Homepage scenes (round 14, scenes agent, 2026-10-22). Copied by build.mjs to film/home-scenes.css and linked right after the
   inline style, so these rules follow the round 14 rules. Phones (700 px and narrower) keep the layout the mobile agent owns.

   The tour scene (Nicole: "this is poor ui. things are on top of each other"; "the take a look around should be bigger").
   The whole scene, reading panel included, sits 24 px below the header and clear of the sound controls; the video takes the
   largest 16:9 size that fits; under it, the Space page's chapter strip (one snap row, arrows in their own gutters, name and
   time on one row, the current chapter at full ink). The player's own time stays inside the player (native controls); the
   separate 02:04 line and the film timecode are hidden while the tour is up. */
#room-dossier .room-tour-moment{--card:150px}
#room-dossier .tour-strip{position:relative;--gap:12px;--arrow:44px}
#room-dossier .tour-chapters .tour-chapter-name{font-size:13px!important}
#room-dossier .tour-chapters .tour-chapters-list{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:var(--card)!important;gap:var(--gap)!important;overflow-x:auto!important;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:0!important;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 0 2px!important;margin:0 calc(var(--arrow) + 10px)!important;-webkit-mask-image:none!important;mask-image:none!important;touch-action:pan-x pan-y}
#room-dossier .tour-strip[data-fits] .tour-chapters-list{margin:0!important}
#room-dossier .tour-chapters .tour-chapters-list::-webkit-scrollbar{display:none}
#room-dossier .tour-chapters .tour-chapters-list li{scroll-snap-align:start}
#room-dossier .tour-chapters .tour-chapter-name{display:flex!important;width:100%;flex-wrap:nowrap!important;justify-content:space-between;align-items:baseline;column-gap:10px}
#room-dossier .tour-chapters .tour-chapter-label{min-width:0;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;padding-bottom:0;border-bottom:0!important;text-decoration:none!important}
#room-dossier .tour-chapters .tour-chapter-time{flex:none;white-space:nowrap}
#room-dossier .tour-chapters .tour-chapter{opacity:.5;transition:opacity 240ms ease}
#room-dossier .tour-chapters .tour-chapter[aria-current]{opacity:1}
#room-dossier .tour-chapters .tour-chapter[aria-current] *{border-bottom-color:transparent!important;text-decoration:none!important}
#room-dossier .tour-chapters .tour-chapter:focus-visible{opacity:1}
@media(hover:hover){#room-dossier .tour-chapters .tour-chapter:not([aria-current]):hover{opacity:.82}}
#room-dossier .tour-chapters .tour-chapter-preview img{opacity:1!important}
#room-dossier .tour-strip-arrow{position:absolute;top:calc(4px + var(--card) * 9 / 32 - var(--arrow) / 2);z-index:1;width:var(--arrow);height:var(--arrow);padding:0;border:1px solid rgba(241,230,215,.28);color:#f1e6d7;cursor:pointer;background:rgba(36,10,18,.6);transition:opacity 200ms ease,background-color 200ms ease}
#room-dossier .tour-strip-previous{left:0}
#room-dossier .tour-strip-next{right:0}
@media(hover:hover){#room-dossier .tour-strip-arrow:not([aria-disabled=true]):hover{background:rgba(36,10,18,.9)}}
#room-dossier .tour-strip-arrow[aria-disabled=true]{opacity:.28;cursor:default}
#room-dossier .tour-strip[data-fits] .tour-strip-arrow{visibility:hidden}
#room-dossier .tour-strip-arrow:focus-visible{outline:2px solid #f1e6d7;outline-offset:2px}
.cinema.motion-enabled .room-tour-moment .tour-timecode{display:none!important}
html[data-tour-up] .film-timecode{opacity:0!important;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){#room-dossier .tour-chapters .tour-chapter,#room-dossier .tour-strip-arrow{transition:none}}

/* Shared measures. --pad is the reading panel's margin around the content; --strip the chapter row's height; the bottom
   reserve keeps the panel 20 px above the screen edge where it cannot reach the sound controls' column, and above the
   controls themselves elsewhere. */
.cinema.motion-enabled .room-tour-moment{--pad:22px;--strip:calc(var(--card) * 9 / 16 + 38px);--head-h:var(--home-header-h,96px)}
.cinema.motion-enabled .room-tour-moment::after{inset:calc(-1 * var(--pad))!important}
@media(min-width:701px){.cinema.motion-enabled .room-tour-moment .tour-moment-note{display:none!important}}

/* Tour (Nicole: "way larger, the video itself too"). While the tour is up the header slides away (it returns when the scene
   leaves or on any upward scroll; home-room.js sets data-tour-header). "Take a look around." and its two links form one short
   row above the video; the strip sits under it. The video takes 90vw or the full height left, whichever binds; the panel stays
   clear of the sound controls' column (its right edge at most 100vw - 130 px), so it may run to 16 px above the screen edge. */
/* Homepage fixes (Nicole, 10-22: the header sat on "Take a look around." and its links collided with the nav): the header no
   longer slides away; the tour starts below it (--head-h, measured by ending-lock.js) and fits the rest of the viewport. */
.site-header{transition:transform .45s cubic-bezier(.22,1,.36,1)}
@media(min-width:701px){
 .cinema.motion-enabled .room-tour-moment{--pad:18px;--headrow:46px;--card:128px;
  --tour-w:min(90vw,calc(100vw - 260px - 2 * var(--pad)),calc((100svh - var(--head-h) - 2 * var(--pad) - var(--headrow) - 28px - var(--strip) - 16px) * 16 / 9));
  position:absolute!important;inset:auto!important;top:calc(var(--head-h) + var(--pad))!important;left:50%!important;translate:-50% 0!important;
  width:var(--tour-w)!important;max-width:none!important;margin:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;justify-content:start!important}
 .cinema.motion-enabled .room-tour-moment .tour-moment-heading{grid-column:1;grid-row:1;align-self:end;margin:0 0 12px!important;text-align:left!important}
 .cinema.motion-enabled .room-tour-moment #tour-moment-title{font-size:var(--t-title,36px)!important;white-space:nowrap}
 .cinema.motion-enabled .room-tour-moment .tour-moment-caption{grid-column:2;grid-row:1;align-self:end;width:auto!important;margin:0 0 10px!important;flex-direction:row!important;gap:28px}
 .cinema.motion-enabled .room-tour-moment .tour-frame{grid-column:1/-1;grid-row:2;width:100%!important;margin:0!important}
 .cinema.motion-enabled .room-tour-moment .tour-chapters{grid-column:1/-1;grid-row:3;width:100%!important;max-width:none!important;margin:14px 0 0!important}
 .cinema.motion-enabled .room-tour-moment #inline-tour-error{grid-column:1/-1;grid-row:4;margin:10px 0 0}}

/* Phones: the layout from before (full width, under the header); the mobile agent owns phone refinements. */
@media(max-width:700px){
 #room-dossier .room-tour-moment{--card:150px}
 #room-dossier .tour-strip{--gap:10px}
 #room-dossier .tour-chapters .tour-chapters-list{margin:0!important}
 #room-dossier .tour-strip-previous{left:6px}
 #room-dossier .tour-strip-next{right:6px}
 #room-dossier .tour-strip-arrow[aria-disabled=true]{opacity:0;pointer-events:none}
 .cinema.motion-enabled .room-tour-moment{--tour-width:100vw;top:calc(var(--home-header-h,70px) + 24px)!important;bottom:auto!important;left:50%!important;right:auto!important;translate:-50% 0;width:var(--tour-width)!important;max-width:none!important;margin:0!important;justify-content:flex-start!important;gap:0}
 .cinema.motion-enabled .room-tour-moment .tour-moment-heading{margin:0 0 14px!important}
 .cinema.motion-enabled .room-tour-moment .tour-chapters{margin-top:16px!important}
 .cinema.motion-enabled .room-tour-moment .tour-moment-caption{margin-top:12px!important}
 .cinema.motion-enabled .room-tour-moment .tour-moment-note{margin-top:8px!important}
 .cinema.motion-enabled .room-tour-moment :is(.tour-moment-heading,.tour-moment-caption,.tour-chapters,.tour-moment-note){padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
 .cinema.motion-enabled .room-tour-moment::after{inset:-14px 0!important}}
@media(max-width:700px){#room-dossier .tour-strip-arrow[aria-disabled=true]:focus-visible{opacity:.4}}

/* Membership (Nicole: "show the desks and space again"): on landscape screens the two photographs sit side by side in the
   sky to the right of the text, top aligned with it, so the anemones on the sill below stay clear; they arrive after the text
   (home-community.js). Phones keep the row under the text. */
@media(min-width:701px) and (min-aspect-ratio:7501/10000){
 .cinema.motion-enabled #membership-introduction .community-composition{grid-template-columns:minmax(0,560px) minmax(0,calc(100vw - 2 * var(--rail,88px) - 632px))!important;align-items:start!important}
 .cinema.motion-enabled #membership-introduction .member-prints{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-content:start;max-width:640px}}
/* Short landscape screens (1280x720): the membership text starts 24 px below the header and may run to the screen's lower
   edge; the film timecode, which would sit on it, is hidden while that scene is up. */
@media(min-width:701px) and (min-aspect-ratio:7501/10000) and (max-height:820px){
 .cinema.motion-enabled #membership-introduction{padding-top:calc(var(--home-header-h,96px) + 56px)!important;padding-bottom:24px!important;align-items:flex-start!important}
 .cinema.motion-enabled #membership-introduction .community-composition{margin-top:0!important;margin-bottom:0!important}
 html[data-member-up] .film-timecode{opacity:0!important;transition:opacity .3s ease}}

/* Reading panels (Nicole: "I want the style of these components to match the ethos and the space style of design"; the scene 2
   panel was "too hard to read", Ethos "far easier"). Every text panel over the film now reads like the Ethos "A shared home"
   section: a flat, near solid ground (#240a12 at 97%, no blur, no border, square), no text shadow, and the Ethos type: label in
   Redaction capitals (12 px, .14em, muted), the statement at the lead step (23 / 20 px, ivory, 1.38), body at 18 px in the
   muted second ink (1.65), short headings at the title step (36 / 30 px), links as on Ethos ("See the space": 18 px ivory over
   a faint rule), "Apply to join" as the Ethos cream button. "Beautiful obsessions.": Redaction with "obsessions." in Ballet at
   the Space page's ratio (1.27em, .2em in, line height .8). Measures follow Ethos (about 460 to 520 px on desktop). */
:root{--read-panel:rgba(36,10,18,.97);--read-line:transparent;--panel-ink:#f1e6d7;--panel-muted:color-mix(in srgb,#f1e6d7 78%,#240a12);--panel-rule:color-mix(in srgb,#f1e6d7 22%,transparent)}
.cinema.motion-enabled :is(#community-introduction .community-note,#membership-introduction .membership-note,.room-dossier[data-beat=obsession] .room-layout,.room-tour-moment)::after,
.cinema.motion-enabled #community-introduction .community-composition::after{background:var(--read-panel)!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
@media(min-width:701px){.cinema.motion-enabled :is(#community-introduction .community-note,#membership-introduction .membership-note,.room-dossier[data-beat=obsession] .room-layout)::after{inset:-40px!important}}
.cinema.motion-enabled :is(#community-introduction .community-note,#membership-introduction .membership-note,.room-layout,.room-tour-moment) :is(h2,h3,p,li,a,span,em,button,time,figcaption,div,output){text-shadow:none!important}
@media(max-width:700px),(max-aspect-ratio:3/4){.cinema.motion-enabled #community-introduction .community-composition :is(h2,h3,p,li,a,span,em,button){text-shadow:none!important}}
/* Scene 2's "More photographs" and "Step inside" sit under the prints, outside the panel, on the film (side by side layouts). */
@media(min-width:701px) and (min-aspect-ratio:7501/10000){.cinema.motion-enabled :is(#community-introduction .mission-prints,#room-dossier .obsession-prints) .room-links button,.cinema.motion-enabled #room-dossier .obsession-prints .room-links button *{text-shadow:0 1px 3px #21121c,0 2px 12px #21121c88!important}}
/* Labels */
.cinema.motion-enabled :is(#community-introduction,#membership-introduction,.room-layout,.room-tour-moment) .eyebrow{font:400 12px/1.5 Redaction,Georgia,serif!important;text-transform:uppercase!important;letter-spacing:.14em!important;color:var(--panel-muted)!important;margin:0 0 18px!important}
.cinema.motion-enabled :is(#community-introduction,#membership-introduction,.room-layout,.room-tour-moment) .eyebrow *{color:inherit!important;font:inherit!important;letter-spacing:inherit!important}
/* Scene 2: the statement at the lead step, the line under it in the body step. */
.cinema.motion-enabled #community-introduction .community-note{max-width:480px!important}
.cinema.motion-enabled #community-introduction #community-title,.cinema.motion-enabled #community-introduction #community-title *{font:400 var(--t-lead,23px)/1.38 Redaction,Georgia,serif!important;letter-spacing:-.025em!important;color:var(--panel-ink)!important;text-wrap:pretty!important}
.cinema.motion-enabled #community-introduction #community-title{max-width:none!important;margin:0!important}
.cinema.motion-enabled #community-introduction .community-description>p,.cinema.motion-enabled #community-introduction .community-description>p *{font:400 var(--t-body,18px)/var(--home-body-leading,1.65) Redaction,Georgia,serif!important;color:var(--panel-muted)!important;letter-spacing:0!important}
.cinema.motion-enabled #community-introduction .community-description>p{margin-top:24px!important;max-width:none!important}
/* Short headings at the title step */
.cinema.motion-enabled :is(#member-intro-title,#tour-moment-title,#room-title){font-family:Redaction,Georgia,serif!important;font-weight:400!important;font-size:var(--t-title,36px)!important;line-height:1.15!important;letter-spacing:-.02em!important;color:var(--panel-ink)!important}
.cinema.motion-enabled :is(#member-intro-title,#tour-moment-title) *{font:inherit!important;color:inherit!important;letter-spacing:inherit!important}
.cinema.motion-enabled #room-title>span{display:inline!important}
.cinema.motion-enabled #room-title>span,.cinema.motion-enabled #room-title>span *{font:400 1em/1.15 Redaction,Georgia,serif!important;letter-spacing:-.02em!important;color:var(--panel-ink)!important}
.cinema.motion-enabled #room-title em,.cinema.motion-enabled .room-heading h2 em{display:inline-block!important;font:400 1.27em/.8 Ballet,cursive!important;margin:0 0 0 .2em!important;letter-spacing:0!important;color:color-mix(in srgb,#f1e6d7 94%,#240a12)!important}
.cinema.motion-enabled #room-title em *{font:inherit!important;color:inherit!important}
/* "Beautiful obsessions." body */
@media(min-width:701px){.cinema.motion-enabled .room-dossier[data-beat=obsession] .room-layout{width:min(460px,34vw)!important}}
@media(min-width:701px) and (max-aspect-ratio:3/4){.cinema.motion-enabled .room-dossier[data-beat=obsession] .room-layout{width:min(460px,62vw)!important}}
.cinema.motion-enabled :is(.room-introduction,.room-introduction p,.room-belonging),.cinema.motion-enabled :is(.room-introduction p,.room-belonging) .ink-word{font:400 var(--t-body,18px)/1.5 Redaction,Georgia,serif!important;color:var(--panel-muted)!important;letter-spacing:0!important}
.cinema.motion-enabled .room-layout .room-introduction{margin-top:20px!important}
.cinema.motion-enabled .room-layout .room-introduction p{text-wrap:pretty}
.cinema.motion-enabled .room-layout .room-introduction>a{margin-top:8px}
.cinema.motion-enabled .room-layout .room-belonging{margin-top:16px!important;text-wrap:pretty}
/* The second Space paragraph now belongs to the introduction. Keep it readable at every size; it is no longer a
   separately positioned aside that can be hidden on short phones. */
.cinema .room-introduction .room-belonging{position:static!important;display:block!important;width:auto!important;max-width:none!important;margin-top:16px!important}
/* Membership body */
.cinema.motion-enabled #membership-introduction .community-description>p:not(.membership-price),.cinema.motion-enabled #membership-introduction .community-description>p:not(.membership-price) *{font:400 var(--t-body,18px)/var(--home-body-leading,1.65) Redaction,Georgia,serif!important;color:var(--panel-muted)!important;letter-spacing:0!important}
.cinema.motion-enabled #membership-introduction .membership-amenities,.cinema.motion-enabled #membership-introduction .membership-amenities *{font:400 16px/1.6 Redaction,Georgia,serif!important;color:var(--panel-muted)!important}
.cinema.motion-enabled #membership-introduction .membership-amenities{border-color:var(--panel-rule)!important}
.cinema.motion-enabled #membership-introduction .membership-price,.cinema.motion-enabled #membership-introduction .membership-price *{font:400 var(--t-body,18px)/1.5 Redaction,Georgia,serif!important;color:var(--panel-ink)!important}
#membership-introduction .membership-amenities li:before{color:var(--panel-muted)!important}
/* Links as on Ethos; "Apply to join" as the Ethos cream button. */
.cinema.motion-enabled :is(#community-introduction .community-actions a,#membership-introduction .community-actions a:not(.apply-box),.room-introduction a,.room-links button,.tour-moment-caption :is(a,button)){display:inline-flex!important;align-items:center;min-height:44px;padding:7px 0!important;font:400 var(--t-body,18px)/1.5 Redaction,Georgia,serif!important;color:var(--panel-ink)!important;text-decoration:none!important;border:0!important;border-bottom:1px solid var(--panel-rule)!important;transition:border-color 200ms ease,color 200ms ease}
@media(hover:hover){.cinema.motion-enabled :is(#community-introduction .community-actions a,#membership-introduction .community-actions a:not(.apply-box),.room-introduction a,.room-links button,.tour-moment-caption :is(a,button)):hover{border-bottom-color:var(--panel-ink)!important;color:#fff3df!important}}
.cinema.motion-enabled :is(#community-introduction .community-actions a,.room-introduction a,.room-links button,.tour-moment-caption :is(a,button)) *{font:inherit!important;color:inherit!important}
.cinema.motion-enabled #membership-introduction .community-actions a.apply-box{background:var(--panel-ink)!important;color:#240a12!important;border:1px solid var(--panel-ink)!important;font:400 var(--t-body,18px)/1.4 Redaction,Georgia,serif!important;padding:10px 18px!important;min-height:44px}
.cinema.motion-enabled #membership-introduction .community-actions a.apply-box *{color:inherit!important;font:inherit!important}
@media(hover:hover){.cinema.motion-enabled #membership-introduction .community-actions a.apply-box:hover{background:#fff3df!important}}
.cinema.motion-enabled #membership-introduction .community-actions a.apply-box:focus-visible{outline:1px solid var(--panel-ink)!important;outline-offset:4px}

/* Intermediate windows need separate tour rows; reserve real space for each control. */
@media (min-width:701px) and (max-width:1199px), (min-width:701px) and (max-height:849px){
 .cinema.motion-enabled .room-tour-moment{--headrow:112px;--tour-w:min(calc(100vw - 96px),calc((100svh - var(--head-h) - 2 * var(--pad) - var(--headrow) - 28px - var(--strip) - 16px) * 16 / 9));grid-template-columns:minmax(0,1fr)!important;column-gap:0}
 .cinema.motion-enabled .room-tour-moment .tour-moment-heading{grid-column:1;grid-row:1}
 .cinema.motion-enabled .room-tour-moment #tour-moment-title{white-space:normal}
 .cinema.motion-enabled .room-tour-moment .tour-moment-caption{grid-column:1;grid-row:2;justify-content:flex-start;flex-wrap:wrap;column-gap:28px;row-gap:0;margin:0 0 16px!important}
 .cinema.motion-enabled .room-tour-moment .tour-moment-caption :is(a,button){max-width:none!important;flex:0 1 auto;text-align:left}
 .cinema.motion-enabled .room-tour-moment .tour-frame{grid-row:3}
 .cinema.motion-enabled .room-tour-moment .tour-chapters{grid-row:4}
 .cinema.motion-enabled .room-tour-moment #inline-tour-error{grid-row:5}
}
/* The details: below the desktop two-column threshold, reuse a single reading column
   with two full photographs below it. home-mobile.js pans overflow during this scene's hold. */
@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (max-aspect-ratio:6/5){
 html body .cinema.motion-enabled #membership-introduction{padding:calc(var(--home-header-h,96px) + 48px) 64px 96px!important;align-items:flex-start!important}
 html body .cinema.motion-enabled #membership-introduction .community-composition{display:block!important;width:100%!important;max-width:700px!important;margin:0 auto!important}
 html body .cinema.motion-enabled #membership-introduction .membership-note{width:100%!important;max-width:none!important}
 html body .cinema.motion-enabled #membership-introduction .member-prints{position:relative!important;inset:auto!important;translate:none!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;width:100%!important;max-width:none!important;margin:64px 0 0!important}
 html body .cinema.motion-enabled #membership-introduction .member-prints .polaroid:nth-child(n){grid-column:auto!important;grid-row:auto!important;width:100%!important;min-width:0;box-sizing:border-box;margin:0!important}
 html body .cinema.motion-enabled #membership-introduction .member-prints .polaroid img{width:100%!important}
 html[data-member-up] .film-timecode{opacity:0!important}
}

/* Square and intermediate windows: a consistent reading column with the same photographs
   and native photo rail already used on phones. The film stays in the existing scroll sequence. */
@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (max-aspect-ratio:6/5){
 .cinema{--compact-width:min(720px,calc(100vw - 96px));--compact-left:calc((100vw - var(--compact-width)) / 2);--compact-top:calc(var(--home-header-h,64px) + 56px)}
 html body .cinema.motion-enabled #community-introduction{padding:var(--compact-top) var(--compact-left) 96px!important;align-items:flex-start!important}
 html body .cinema.motion-enabled #community-introduction .community-composition{display:flex!important;flex-direction:column;align-items:stretch;width:100%!important;max-width:none!important;margin:0!important}
 html body .cinema.motion-enabled #community-introduction .community-composition::after{display:none!important}
 html body .cinema.motion-enabled #community-introduction :is(.community-note,.community-description,.mission-prints){display:block!important;width:100%!important;max-width:none!important}
 html body .cinema.motion-enabled #community-introduction .community-note::after{display:block!important;inset:-28px!important}
 html body .cinema.motion-enabled #community-introduction .community-description{margin-top:20px!important}
 html body .cinema.motion-enabled #community-introduction .community-description>p{margin-top:0!important}
 html body .cinema.motion-enabled #community-introduction .community-actions{margin-top:20px!important}
 html body .cinema.motion-enabled #community-introduction .mission-prints{margin-top:48px!important}
 html body .cinema.motion-enabled #community-introduction .mission-prints .room-links{margin:12px 0 0!important}
 html body .cinema.motion-enabled #room-dossier[data-beat=obsession] .room-layout{inset:auto!important;left:var(--compact-left)!important;top:var(--compact-top)!important;width:var(--compact-width)!important;max-width:none!important;max-height:none!important;height:auto!important;padding:0!important;margin:0!important;translate:0 var(--scene-pan,0px)!important}
 html body .cinema.motion-enabled #room-dossier[data-beat=obsession] .room-layout::after{inset:-28px!important}
 html body .cinema.motion-enabled #room-dossier .obsession-prints{inset:auto!important;left:var(--compact-left)!important;top:var(--m-prints-top,60%)!important;width:var(--compact-width)!important;translate:0 var(--scene-pan,0px)!important;display:block!important}
 html body .cinema.motion-enabled #room-dossier .obsession-prints .mission-prints-row{margin-top:0!important}
 html body .cinema.motion-enabled #membership-introduction{padding:var(--compact-top) var(--compact-left) 96px!important}
 html body .cinema.motion-enabled #membership-introduction .community-composition{max-width:none!important}
 html body .cinema.motion-enabled #membership-introduction .membership-note::after{inset:-28px!important}
 html body .cinema.motion-enabled #membership-introduction .community-description{max-width:none!important}
 html body .cinema.motion-enabled #membership-introduction .member-prints{margin-top:48px!important}
 html[data-m-crowded] .cinema .stage .film-timecode{opacity:0!important}
}

/* Facts and two photographs fit a fluid pair of columns even in a square window.
   The old fixed 572 px offset is not used here. Tall portrait windows retain the reading column. */
@media (min-width:701px) and (max-width:1100px) and (min-aspect-ratio:4/5), (min-width:701px) and (min-aspect-ratio:4/5) and (max-aspect-ratio:6/5){
 html body .cinema.motion-enabled #membership-introduction{--compact-width:min(960px,calc(100vw - 96px));--compact-left:calc((100vw - var(--compact-width)) / 2);align-items:safe center!important}
 html body .cinema.motion-enabled #membership-introduction .community-composition{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;gap:48px!important;align-items:center!important}
 html body .cinema.motion-enabled #membership-introduction .membership-note{margin:0!important}
 html body .cinema.motion-enabled #membership-introduction .member-prints{grid-template-columns:minmax(0,1fr)!important;gap:16px!important;margin:0!important}
}
/* Compact reading flow when motion is disabled. */
@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (max-aspect-ratio:6/5){
 html body .cinema:not(.motion-enabled) #community-introduction .community-composition{display:block!important;max-width:720px!important;margin:auto!important}
 html body .cinema:not(.motion-enabled) #community-introduction :is(.community-note,.community-description){display:block!important;max-width:none!important}
 html body .cinema:not(.motion-enabled) #community-introduction .mission-prints{display:block!important;margin-top:32px}
 html body .cinema:not(.motion-enabled) #community-introduction .room-links{margin-top:12px}
 html body .cinema:not(.motion-enabled) .room-layout{display:block!important;height:auto!important;max-width:720px!important}
 html body .cinema:not(.motion-enabled) .room-layout>*{width:100%!important}
 html body .cinema:not(.motion-enabled) .obsession-prints{display:block!important;max-width:720px!important;padding:0!important}
 html body .cinema:not(.motion-enabled) #membership-introduction .community-composition{display:block!important;max-width:720px!important}
 html body .cinema:not(.motion-enabled) #membership-introduction .membership-note{max-width:none!important;margin:0!important}
}

/* Keep the invitation readable at intermediate sizes, using the phone's existing scrolling sheet. */
@media (min-width:701px) and (max-width:1100px), (min-width:701px) and (max-aspect-ratio:6/5){
 html body .cinema.motion-enabled .invitation-ending[data-envelope=open]{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;clip-path:inset(0 0 80px 0)}
 html body .cinema.motion-enabled .invitation-ending[data-envelope=open] .invitation-flow{padding-bottom:112px}
}

/* The smaller title and its controls share the maroon video panel. */
.cinema.motion-enabled #room-dossier .room-tour-moment{--tour-title:34px;--tour-title-gap:8px;--headrow:98px;display:grid!important;grid-template-columns:minmax(0,1fr)!important;column-gap:0;row-gap:0}
.cinema.motion-enabled #room-dossier .room-tour-moment::after{top:calc(-1 * var(--pad))!important}
.cinema.motion-enabled #room-dossier .room-tour-moment .tour-moment-heading{grid-area:1/1!important;margin:0 0 var(--tour-title-gap)!important;align-self:start;text-align:left!important}
.cinema.motion-enabled #room-dossier #tour-moment-title{font-size:28px!important;line-height:var(--tour-title)!important;white-space:normal}
.cinema.motion-enabled #room-dossier #tour-moment-title,.cinema.motion-enabled #room-dossier #tour-moment-title *{text-shadow:none!important}
.cinema.motion-enabled #room-dossier .tour-moment-caption{grid-area:2/1!important;justify-content:flex-start!important;align-items:center;flex-direction:row!important;flex-wrap:wrap;gap:8px 24px;margin:0 0 12px!important;width:auto!important}
.cinema.motion-enabled #room-dossier .tour-moment-caption :is(a,button){font-size:16px!important}
.cinema.motion-enabled #room-dossier .room-tour-moment .tour-frame{grid-area:3/1!important}
.cinema.motion-enabled #room-dossier .room-tour-moment .tour-chapters{grid-area:4/1!important}
.cinema.motion-enabled #room-dossier .tour-moment-note{grid-area:5/1!important}
.cinema.motion-enabled #room-dossier #inline-tour-error{grid-area:6/1!important}
@media(max-width:700px){
 .cinema.motion-enabled #room-dossier .room-tour-moment{--tour-title:28px;--tour-title-gap:8px;translate:-50% var(--scene-pan,0px)!important}
 .cinema.motion-enabled #room-dossier #tour-moment-title{font-size:24px!important}
 .cinema.motion-enabled #room-dossier .tour-moment-caption{flex-wrap:nowrap;gap:16px}
 .cinema.motion-enabled #room-dossier .tour-moment-caption :is(a,button){flex:1 1 0;max-width:none!important;white-space:normal;text-align:left}
}

/* Center the tour in the space below the shared header, including its heading. */
.cinema.motion-enabled #room-dossier .room-tour-moment{top:var(--tour-centered-top,calc(var(--home-header-h,96px) + 30px))!important}
.cinema.motion-enabled #room-dossier .room-tour-moment .tour-moment-heading{text-align:center!important}
.cinema.motion-enabled #room-dossier .tour-moment-caption{justify-content:center!important}

/* Keep the area measurement distinct from the actions, including Safari's font rendering. */
.cinema.motion-enabled #membership-introduction .community-description>.membership-price{
 margin:12px 0 14px!important;white-space:nowrap;font-size:var(--t-body,18px)!important;
 line-height:1.5!important;font-kerning:none;letter-spacing:.02em
}

/* Safari's collapsing browser bars enlarge the visible viewport. Fill that viewport,
   while keeping the distance travelled through the film tied to the stable small size.
   total height = stable travel + visible stage; only the visual surface expands. */
.cinema{--film-scroll-unit:100svh;--film-viewport-height:100svh;--film-scroll-screens:14.25}
@media(max-width:700px){.cinema{--film-scroll-screens:14.95}}
@supports(height:100dvh){.cinema{--film-viewport-height:100dvh}}
.cinema.motion-enabled{height:calc(var(--film-scroll-unit) * (var(--film-scroll-screens) - 1) + var(--film-viewport-height))}
.cinema.motion-enabled .stage{height:var(--film-viewport-height)}
.film-scroll-size{position:absolute;top:0;left:0;width:0;height:var(--film-scroll-unit);visibility:hidden;pointer-events:none;contain:strict}