/* The Space page's own rules (round 14, Nicole, 2026-10-22), loaded last so the shared theme, navigation and line
   files stay untouched. Colours come from the shared theme tokens, so light and dark both follow site-theme.css. */

/* 1. History: one visible lead sentence; the full story opens below it (space-page.js animates the native disclosure). */
.about-page .history-more{margin-top:22px}
.about-page .history-more>summary{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:8px 0;list-style:none;cursor:pointer;font:var(--t-small,14px)/1.5 Redaction,Georgia,serif;color:var(--study-ink)}
.about-page .history-more>summary::-webkit-details-marker{display:none}
.about-page .history-more>summary::marker{content:''}
.about-page .history-more>summary>span{display:inline-block;font:var(--t-label,12px)/1 Departure,monospace;color:var(--study-muted);transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.about-page .history-more[open]:not([data-closing=true])>summary>span{transform:rotate(45deg)}
@media(hover:hover){.about-page .history-more>summary{transition:opacity 200ms ease}.about-page .history-more>summary:hover{opacity:.75}}
.about-page .history-more>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.about-page .history-full>p{font:17px/1.65 Redaction,Georgia,serif;color:var(--study-muted);margin:25px 0 0;max-width:50ch}
.about-page .history-full>p:first-child{margin-top:14px}
.about-page .history-full .history-sources{margin-top:18px}
@media(prefers-reduced-motion:reduce){.about-page .history-more>summary>span{transition:none}}

/* 2. The tour chapters: one horizontal slideshow strip (the shared list keeps its buttons, seeking and focus handling). */
.about-page .tour-strip{position:relative;--card:196px;--gap:12px;--arrow:48px}
.about-page .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;padding:4px 0 6px!important;scrollbar-width:none;-webkit-mask-image:none!important;mask-image:none!important;touch-action:pan-x pan-y}
.about-page .tour-chapters .tour-chapters-list::-webkit-scrollbar{display:none}
.about-page .tour-chapters .tour-chapters-list li{scroll-snap-align:start}
/* Thumbnail, then name and timecode on one row. */
.about-page .tour-chapters .tour-chapter-name{display:flex!important;width:100%;flex-wrap:nowrap!important;justify-content:space-between;align-items:baseline;column-gap:10px}
/* A long name wraps to a second line instead of being cut; the time stays on the name's first line. */
.about-page .tour-chapters .tour-chapter-label{min-width:0;white-space:normal;overflow-wrap:break-word;padding-bottom:0;border-bottom:0!important}
.about-page .tour-chapters .tour-chapter-time{flex:none}
/* The current chapter is shown at full strength; the others rest dimmed. No rule, no colour change. */
.about-page .tour-chapters .tour-chapter{opacity:.5;transition:opacity 240ms ease}
.about-page .tour-chapters .tour-chapter[aria-current]{opacity:1}
.about-page .tour-chapters .tour-chapter:focus-visible{opacity:1}
@media(hover:hover){.about-page .tour-chapters .tour-chapter:not([aria-current]):hover{opacity:.82}}
.about-page .tour-chapters .tour-chapter-preview img{opacity:1!important}
/* Arrows: centred on the thumbnails; outside the strip on the shared lines, over its edges on narrower screens. */
.about-page .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;cursor:pointer;transition:opacity 200ms ease,background-color .2s ease}
.about-page .tour-strip-previous{left:calc(-1 * var(--arrow) - 14px)}
.about-page .tour-strip-next{right:calc(-1 * var(--arrow) - 14px)}
.about-page .tour-strip-arrow[aria-disabled=true]{opacity:.28;cursor:default}
.about-page .tour-strip[data-fits] .tour-strip-arrow{visibility:hidden}
.about-page .tour-strip-arrow:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:1179px){
 .about-page .tour-strip{--arrow:44px}
 .about-page .tour-strip-previous{left:6px}
 .about-page .tour-strip-next{right:6px}
 .about-page .tour-strip-arrow{background:color-mix(in srgb,var(--theme-ground,#1d1218) 72%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
 .about-page .tour-strip-arrow[aria-disabled=true]{opacity:0;pointer-events:none}
 .about-page .tour-strip-arrow[aria-disabled=true]:focus-visible{opacity:.4}
}
@media(max-width:700px){.about-page .tour-strip{--card:172px;--gap:10px}}
@media(prefers-reduced-motion:reduce){.about-page .tour-chapters .tour-chapter,.about-page .tour-strip-arrow{transition:none}}

/* 3. The floor plan: its text sits on the same lines as the rest of the page (plate at desktop, 24 px gutter on phones).
   The plan's mount no longer reaches past the gutter on phones. Where the shared theme draws an outline around the plan
   (light), the text keeps clear of that outline. */
.about-page #the-floor-plan.plan-open>.plan-section{padding-left:0!important;padding-right:0!important}
.about-page #the-floor-plan.plan-open .plan-mount{margin-left:0!important;margin-right:0!important}
:root[data-theme=light] .about-page #the-floor-plan.plan-open>.plan-section{padding-left:clamp(20px,3.4vw,52px)!important;padding-right:clamp(20px,3.4vw,52px)!important}
@media(max-width:700px){.about-page #the-floor-plan.plan-open .plan-mount{padding:10px 8px 20px}}

/* 4. Reading progress (round 14, Nicole: “the space and application should have a progress bar just so people know”):
   2 px under the header's bottom edge, filling left to right with the page scroll. Ivory at 70% on dark, wine on light. */
.space-reading-progress{position:fixed;left:0;right:0;top:var(--space-progress-top,var(--site-header-height,88px));z-index:6;height:2px;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:color-mix(in srgb,var(--theme-ink,#f1e6d7) 70%,transparent)}
:root[data-theme=light] .space-reading-progress{background:var(--theme-ink,#4b1224)}
@media print{.space-reading-progress{display:none}}
/* Light mode: dimmed chapters at .65, since .5 reads washed out on ivory (coordinator, 2026-10-22). */
:root[data-theme=light] .about-page .tour-chapters .tour-chapter:not([aria-current]):not(:focus-visible){opacity:.65}

/* Round 14 Codex: readable captions, the requested label face and full phone photos. */
body.about-page #space :is(.frame-kicker,.folio-label,.history-kicker,.frame-open,.plan-expand,.collection-credit){
 font-family:Redaction,Georgia,serif!important;
 letter-spacing:.14em!important;
 text-transform:uppercase;
}
body.about-page #space .space-page-nav a{
 font-family:Redaction,Georgia,serif!important;
 font-size:var(--t-small,15px)!important;
 letter-spacing:0!important;
}
/* Dim the image alone; caption text must remain readable in either theme. */
:root body.about-page #space .tour-chapters .tour-chapter{opacity:1}
:root body.about-page #space .tour-chapters .tour-chapter-name{color:var(--theme-ink)}
:root body.about-page #space .tour-chapters .tour-chapter-time{
 font-family:Redaction,Georgia,serif!important;
 color:var(--theme-muted)!important;
}
:root body.about-page #space .tour-chapters .tour-chapter:not([aria-current]) .tour-chapter-preview img{opacity:.7!important}
:root body.about-page #space .tour-chapters .tour-chapter:is(:hover,:focus-visible) .tour-chapter-preview img{opacity:1!important}
@media(max-width:700px){
 body.about-page #space .room-sequence .study-photo,
 body.about-page #space .history-facade{
  width:100%;
  align-self:stretch;
 }
 body.about-page #space .history-lobbies{grid-template-columns:minmax(0,1fr);gap:32px}
 body.about-page #space .history-lobbies .study-photo:last-child{margin-top:0}
 body.about-page:not(.ethos-page) .visitor-settings{
  position:static!important;
  inset:auto!important;
  display:flex!important;
  justify-content:flex-end;
  width:auto!important;
  margin:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left))!important;
 }
}

/* 5. Hero (round 14, Nicole: "I think the bottom can be moved up a bit"): on desktop the hero ends 48 px above the viewport
   bottom, so the page navigation and the caption block above it rise off the bottom edge. Full bleed is unchanged. */
@media(min-width:701px){body.about-page.quiet .frame-hero{height:calc(100svh - 48px)!important;min-height:min(560px,calc(100svh - 48px))!important}}

/* 6. The virtual tour (round 14, Nicole: "the virtual tour needs to be way larger, the video itself too"): from 701 px the
   player and its chapter strip take the full content width between the rails (at most 1400 px, 16:9); the heading stays on
   the rail above it and the strip's arrows sit in the outer gutters. Phones are unchanged (already full width). */
@media(min-width:701px){
 body.about-page:not(.ethos-page) #tour>:not(.section-heading-v30){margin-left:0!important;margin-right:0!important;width:min(1400px,100%)!important;max-width:none!important}
 body.about-page #tour .tour-stage,body.about-page #tour .property-video{width:100%!important;max-width:none!important}
 body.about-page #tour .property-video{aspect-ratio:16/9;height:auto!important}}

/* 7. "View photograph" sits 16 px below the header at every width (it touched the header's lower edge), clear of the facts. */
@media(min-width:701px){body.about-page.quiet .frame-hero .frame-open{top:calc(var(--site-header-height,88px) + 16px)!important;bottom:auto!important}}

/* Mobile: the section navigation meets the browser edge. The safe area is inside its background, with links above it.
   Keep the hero's copy in normal flow so a short in-app viewport or enlarged text can scroll without clipping. */
@media(max-width:700px),(max-height:500px) and (pointer:coarse){
 body.about-page:not(.ethos-page){--space-nav-height:calc(48px + env(safe-area-inset-bottom,0px));padding-bottom:var(--space-nav-height)}
 body.about-page #space .space-page-nav{
  position:fixed;top:auto;bottom:0;left:0;right:0;z-index:6;
  box-sizing:border-box;height:var(--space-nav-height);margin:0!important;
  padding-top:0;padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(24px,env(safe-area-inset-left,0px))!important;
  padding-right:max(24px,env(safe-area-inset-right,0px))!important;
  -webkit-mask-image:none;mask-image:none;
 }
 body.about-page.quiet .frame-hero{
  display:flex;flex-direction:column;justify-content:flex-end;box-sizing:border-box;
  height:auto!important;min-height:100svh!important;
  padding:calc(var(--site-header-height,64px) + 64px) 24px calc(var(--space-nav-height) + 24px)!important;
 }
 body.about-page.quiet .frame-hero .frame-caption{position:static;inset:auto;display:block;flex:none;width:100%;margin:0}
 body.about-page #space .space-page-nav{gap:24px;justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
 body.about-page:not(.ethos-page) .visitor-settings{position:static!important;inset:auto!important;display:flex!important;justify-content:flex-end;width:auto!important;margin:24px!important}
 body.about-page #space>section[id]{scroll-margin-top:calc(var(--site-header-height,64px) + 24px)}
 @supports(height:100dvh){body.about-page.quiet .frame-hero{min-height:100dvh!important}}
}

/* Reserve the supplied photographs' real dimensions before lazy loading. The inherited aspect-ratio:auto discarded
   that space, moving the tour below the destination while visitors followed its navigation link. No crop changes. */
body.about-page .room-sequence .study-photo img[width="1280"][height="720"]{aspect-ratio:auto 16/9}
body.about-page .room-sequence .room-booths img{aspect-ratio:auto 543/324}
body.about-page .room-sequence .room-meeting img{aspect-ratio:auto 504/539}
/* The open studio closes the photographs (Nicole, 2026-10-28); its own proportions, centred like the studio. */
body.about-page .room-sequence .room-open-studio{width:62%;align-self:center}
body.about-page .room-sequence .room-open-studio img{aspect-ratio:auto 1133/939}
/* Floor plan views, October 27, 2026 (local preview): the existing tab style (.space-tabs) above the plan, and the
   Empty and Furnished drawings stacked in one frame so the shared walls and labels hold still while they cross fade. */
.about-page .plan-views{display:flex;gap:28px;margin:0 0 14px}
.about-page .plan-views button{font:inherit;font-size:var(--t-label,11px);letter-spacing:.14em;text-transform:uppercase;color:var(--study-muted,#cbb8a5);background:none;border:0;border-bottom:1px solid transparent;padding:10px 0 6px;min-height:44px;cursor:pointer;transition:color .3s ease,border-color .3s ease}
.about-page .plan-views [aria-selected=true]{color:var(--study-ink,#f2d8c7);border-bottom-color:currentColor}
.about-page .plan-views button:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.about-page #plan-view .floor-plan{position:relative;display:grid}
.about-page #plan-view .plan-layer{grid-area:1/1;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
/* the incoming drawing fades in first and the outgoing one follows, so the shared walls never dim mid fade */
.about-page #plan-view .plan-layer-furnished,.about-page #plan-view[data-view=furnished] .plan-layer-empty{opacity:0;transition-delay:.22s}
.about-page #plan-view[data-view=furnished] .plan-layer-furnished,.about-page #plan-view .plan-layer-empty{opacity:1;transition-delay:0s}
.about-page #plan-view .plan-expand{grid-area:1/1;align-self:end;justify-self:end}
@media (prefers-reduced-motion:reduce){.about-page #plan-view .plan-layer{transition:none}}


/* 5. Membership (2026-10-27, Nicole: “display the three membership types … we could put a picture too for all of them”).
   Three equal options side by side, as established coworking pages present tiers (Canopy, Industrious): photograph,
   name, price, what it includes and who it suits. No option is highlighted. Shared terms sit once beneath the three.
   Rows align across the options through subgrid, so prices and details start on the same lines. Type sizes use the
   shared scale (site-polish.css) and colours the shared theme tokens; the section hangs from the same rails as the tour. */
.about-page .membership-lead{max-width:56ch;margin:0 0 48px;font-family:Redaction,Georgia,serif;font-size:var(--t-body)!important;line-height:1.65;color:var(--study-muted)}
.about-page .membership-lead:has(+ .membership-lead){margin-bottom:1.1em}
.about-page .membership-options{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto auto auto auto;column-gap:clamp(24px,2.8vw,44px);row-gap:0}
.about-page .membership-option{display:grid;grid-row:span 7;grid-template-rows:subgrid;min-width:0}
.about-page .membership-photo{margin:0}
.about-page .membership-photo a{display:block;overflow:hidden}
.about-page .membership-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.about-page .membership-photo figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:12px;font-family:Redaction,Georgia,serif;font-style:italic;line-height:1.5;color:var(--study-muted)}
.about-page .membership-photo figcaption span{flex:none;font:11px/1.5 Departure,monospace;font-style:normal}
.about-page .membership-option h3{margin:26px 0 2px;font-family:Redaction,Georgia,serif;font-weight:400;font-size:var(--t-lead)!important;line-height:1.3;letter-spacing:-.01em;color:var(--study-ink)}
.about-page .membership-price{margin:0 0 20px;font-family:Redaction,Georgia,serif;font-size:var(--t-body)!important;line-height:1.5;color:var(--study-ink)}
/* Final pricing (Nicole, 2026-10-27): each card leads with its annual price; "paid annually" and the other terms sit directly
   beneath it as small muted lines in the type of the fact labels. */
.about-page .membership-price-term{display:block;font-size:var(--t-small)!important;line-height:1.5;color:var(--study-muted)}
.about-page .membership-price-term a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.about-page .membership-facts{margin:0;border-top:1px solid var(--study-line);display:grid;grid-row:span 3;grid-template-rows:subgrid}
.about-page .membership-facts>div{padding:14px 0 15px;border-bottom:1px solid var(--study-line)}
.about-page .membership-facts dt{margin:0 0 3px;font-family:Redaction,Georgia,serif;font-size:var(--t-small)!important;line-height:1.5;color:var(--study-muted)}
.about-page .membership-facts dd{margin:0;font-family:Redaction,Georgia,serif;line-height:1.6;color:var(--study-ink)}
/* Includes as a short list (Nicole, 2026-10-27): card-specific items first, then shared items, in the same order on every card;
   small middle-dot bullets in the style of the homepage amenities list. */
.about-page .membership-includes{list-style:none;margin:0;padding:0}
.about-page .membership-includes li{display:flex;align-items:baseline;gap:9px}
.about-page .membership-includes li+li{margin-top:2px}
.about-page .membership-includes li:before{content:'\00B7';flex:none;color:var(--study-muted)}
.about-page .membership-note{margin:16px 0 0;font-family:Redaction,Georgia,serif;font-size:var(--t-small)!important;line-height:1.6;color:var(--study-muted)}
.about-page .membership-note a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.about-page .membership-terms{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-top:56px;padding-top:28px;border-top:1px solid var(--study-line)}
.about-page .membership-terms p{max-width:62ch;margin:0;font-family:Redaction,Georgia,serif;font-size:var(--t-body)!important;line-height:1.65;color:var(--study-muted)}
.about-page .membership-terms .quiet-link{flex:none;margin-top:0}
@media(min-width:1180px){
 .about-page:not(.ethos-page) #membership{margin-left:0!important;margin-right:0!important;max-width:none!important;padding-left:var(--rail)!important;padding-right:var(--rail)!important}
 .about-page:not(.ethos-page) #membership .section-heading-v30{display:grid!important;grid-template-columns:calc(var(--caption-x) - var(--rail)) minmax(0,1fr)!important;column-gap:0!important;align-items:end}
 .about-page:not(.ethos-page) #membership .section-heading-v30>:last-child{margin:0!important;justify-self:start;text-align:left!important}
}
@media(max-width:1099px){
 .about-page .membership-options{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:56px;max-width:620px}
 .about-page .membership-option,.about-page .membership-facts{grid-row:auto;grid-template-rows:none}
 .about-page .membership-terms{display:block}
 .about-page .membership-terms .quiet-link{margin-top:22px}
}
@media(max-width:700px){
 .about-page:not(.ethos-page) #membership{padding-left:24px!important;padding-right:24px!important;margin-left:0!important;margin-right:0!important}
 .about-page .membership-lead{margin-bottom:36px}
 .about-page .membership-option h3{margin-top:22px}
 .about-page .membership-photo figcaption{padding-top:10px}
 .about-page .membership-terms{margin-top:44px;padding-top:24px}
}

.about-page .membership-photo-note{margin:18px 0 0;font-family:Redaction,Georgia,serif;font-size:var(--t-small)!important;line-height:1.5;color:var(--study-muted)}