@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');

/* ===========================================================================
   Our Spaces — shared page styling for the section under category 71.
   Served from public/files/spaces/spaces.css and linked from each page body as
   files/spaces/spaces.css?v=N (filterBody() expands the files/ prefix and keeps
   the query string). public/files is behind a 30-day Cloudflare cache that
   ignores cache-busting headers, so ?v= MUST be bumped on every edit.

   Pages using it: 190, 191, 389, 421, 422, 425, 427, 650.
   Page 217 (The Main Building) is the design reference and keeps its own
   inline copy of this language; it is deliberately not linked here.

   Three constraints this file is shaped by, all of them already paid for once:

   1. custom_new.css ships `#all_body *{font-size:22px!important;
      line-height:1.5!important;color:rgb(51,51,51)}` at (1,0,0) WITH
      !important, and `#all_body a{color:#419496!important}`. Every selector
      below is therefore prefixed #all_body, and the reset under .sps lets
      everything without a size of its own inherit instead of snapping to 22px.
      Watch the link trap: `#all_body .sps a` is (1,1,1), so a button rule has
      to reach (1,1,2) — `#all_body .sps a.sps-btn` — or the label comes out
      teal on a teal fill.

   2. The scope is .sps, never .pdtn: pdtn.css carries
      `body:has(.pdtn) .header{display:none}` and would strip the site nav.

   3. Full-bleed bands break out with a negative margin equal to the distance
      from the .sps box to each viewport edge, measured into --sps-edge-l and
      --sps-edge-r by spaces.js. They do
      NOT use 100vw: 100vw includes the scrollbar, and the usual correction
      (100vw minus a measured scrollbar width) reads zero in any frame where
      something else has set overflow:hidden on the document - this site's
      carousel does - leaving every band a scrollbar too wide for good. Nor are
      they clipped with overflow-x: html and body are height:100% here, and
      clipping them stops the document scrolling at all.
   ======================================================================== */

#all_body .sps {
  --sps-ink: #283b3c;
  --sps-teal: #2f7373;
  --sps-teal-soft: #8fb8b8;
  --sps-body: #3c4544;
  --sps-muted: #5f6c6a;
  --sps-paper: #f4f6f4;
  --sps-line: #dde3e0;
  --sps-edge-l: 0px;
  --sps-edge-r: 0px;
  --sps-gap: clamp(3.5rem, 7vw, 7.5rem);
  /* Bootstrap's own container width at this breakpoint plus its 12px gutter,
     so copy inside a full-bleed band lands on the same left edge as the copy
     in the contained sections above and below it. */
  --sps-cw: 100%;
  --sps-pad: max(0.75rem, calc(50% - var(--sps-cw) / 2 + 0.75rem));

  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.72 !important;
  color: var(--sps-body);
  text-align: left;
}

#all_body .sps * {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit;
  box-sizing: border-box;
}

#all_body .sps p { margin: 0 0 1.15em; max-width: 64ch; }
#all_body .sps p:last-child { margin-bottom: 0; }

#all_body .sps h2,
#all_body .sps h3,
#all_body .sps .sps-display {
  font-family: 'Titillium Web', 'Source Sans Pro', sans-serif;
  color: var(--sps-ink);
  font-weight: 700;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

#all_body .sps .sps-display {
  font-size: clamp(2.1rem, 5.6vw, 4.1rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.025em;
}

#all_body .sps h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.55rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.018em;
}

#all_body .sps h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  font-weight: 600;
}

#all_body .sps .sps-eyebrow {
  font-family: 'Titillium Web', 'Source Sans Pro', sans-serif;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sps-teal);
  margin: 0 0 1.1rem;
  display: block;
}

#all_body .sps .sps-lede {
  font-size: clamp(1.1rem, 1.45vw, 1.35rem) !important;
  line-height: 1.6 !important;
  color: var(--sps-ink);
  max-width: 38ch;
}

#all_body .sps a {
  color: var(--sps-teal) !important;
  text-decoration: none;
  transition: color .2s ease;
}
#all_body .sps a:hover { color: var(--sps-ink) !important; text-decoration: underline; }
#all_body .sps a:focus-visible {
  outline: 2px solid var(--sps-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- sections ------------------------------------------------------------ */

#all_body .sps-section { margin: var(--sps-gap) 0; scroll-margin-top: 1.5rem; }
#all_body .sps-section:first-child { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* Pulled out to both viewport edges by exactly the gap the Bootstrap column
   leaves. With no JS --sps-edge stays 0 and the band simply keeps the column
   width, which is plain rather than broken. */
#all_body .sps-bleed {
  margin-left: calc(-1 * var(--sps-edge-l));
  margin-right: calc(-1 * var(--sps-edge-r));
}

#all_body .sps-inner {
  max-width: var(--sps-cw);
  margin: 0 auto;
  padding: 0 0.75rem;
}

/* --- figures -------------------------------------------------------------- */

#all_body .sps-fig { display: block; margin: 0; overflow: hidden; background: var(--sps-paper); }
#all_body .sps-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
#all_body .sps-fig figcaption {
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: var(--sps-muted);
  padding-top: 0.6rem;
}

/* --- opening ------------------------------------------------------------- */

#all_body .sps-open { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
@media (min-width: 880px) {
  #all_body .sps-open { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

#all_body .sps-facts {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 2px solid var(--sps-ink);
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 620px) { #all_body .sps-facts { grid-template-columns: repeat(3, 1fr); } }
#all_body .sps-facts.sps-facts-2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { #all_body .sps-facts.sps-facts-2 { grid-template-columns: repeat(2, 1fr); } }
#all_body .sps-facts b {
  font-family: 'Titillium Web', 'Source Sans Pro', sans-serif;
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.3rem) !important;
  line-height: 1 !important;
  font-weight: 700;
  color: var(--sps-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#all_body .sps-facts span {
  display: block;
  font-size: 0.86rem !important;
  line-height: 1.4 !important;
  color: var(--sps-muted);
  padding-top: 0.45rem;
}

/* --- alternating photo / copy rows --------------------------------------- */

#all_body .sps-rows { display: grid; gap: var(--sps-gap); }
#all_body .sps-row { display: grid; gap: clamp(1.4rem, 3vw, 3.2rem); align-items: center; }
@media (min-width: 900px) {
  #all_body .sps-row { grid-template-columns: 1.12fr 0.88fr; }
  #all_body .sps-row:nth-of-type(even) { grid-template-columns: 0.88fr 1.12fr; }
  #all_body .sps-row:nth-of-type(even) .sps-row-media { order: -1; }
}
#all_body .sps-row .sps-fig { aspect-ratio: 5 / 4; }
#all_body .sps-row-no {
  font-family: 'Titillium Web', 'Source Sans Pro', sans-serif;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sps-teal);
  display: block;
  margin-bottom: 0.7rem;
}

/* --- overlapping pair (one tall photo with a square inset) ---------------- */

#all_body .sps-pair { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 880px) { #all_body .sps-pair { grid-template-columns: 0.92fr 1.08fr; } }
#all_body .sps-pair-media { position: relative; }
#all_body .sps-pair-media .sps-fig:first-child { aspect-ratio: 4 / 5; }
#all_body .sps-pair-media .sps-inset { display: none; }
@media (min-width: 880px) {
  #all_body .sps-pair-media .sps-inset {
    display: block;
    position: absolute;
    right: -1.5rem;
    bottom: -2.5rem;
    width: 46%;
    aspect-ratio: 1 / 1;
    border: 10px solid #fff;
  }
}

/* --- dark photo rail ------------------------------------------------------ */

#all_body .sps-strip { background: var(--sps-ink); padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
#all_body .sps-strip .sps-inner { margin-bottom: 1.8rem; }
#all_body .sps-strip .sps-eyebrow { color: var(--sps-teal-soft); margin-bottom: 0.4rem; }
#all_body .sps-strip h2 { color: #fff; }
#all_body .sps-strip p { color: #dfe7e5; max-width: 52ch; margin: 0; font-size: 1.05rem !important; }
#all_body .sps-rail {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* the first photograph lines up under the band's heading, then the rail runs
     on past the right edge of the viewport */
  padding: 0 0.75rem 1.1rem var(--sps-pad);
  scroll-padding-left: var(--sps-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--sps-teal) #1d2b2c;
}
#all_body .sps-rail .sps-fig {
  flex: 0 0 auto;
  width: clamp(200px, 42vw, 330px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  background: #1d2b2c;
}
#all_body .sps-rail .sps-tall { aspect-ratio: 3 / 4; width: clamp(180px, 34vw, 270px); }
#all_body .sps-rail img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
#all_body .sps-rail .sps-fig:hover img { transform: scale(1.04); }
#all_body .sps-rail::-webkit-scrollbar { height: 7px; }
#all_body .sps-rail::-webkit-scrollbar-track { background: #1d2b2c; }
#all_body .sps-rail::-webkit-scrollbar-thumb { background: var(--sps-teal); }
#all_body .sps-rail:focus-visible { outline: 2px solid var(--sps-teal-soft); outline-offset: -4px; }

/* --- typographic panel (used where there is no honest photograph) --------- */

#all_body .sps-panel {
  background: var(--sps-paper);
  padding: clamp(1.8rem, 4vw, 3.4rem);
  border-left: 4px solid var(--sps-teal);
}
#all_body .sps-panel > :last-child { margin-bottom: 0; }

#all_body .sps-ticks {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem 1.6rem;
}
@media (min-width: 620px) { #all_body .sps-ticks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { #all_body .sps-ticks.sps-ticks-3 { grid-template-columns: repeat(3, 1fr); } }
#all_body .sps-ticks li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.97rem !important;
  line-height: 1.5 !important;
}
#all_body .sps-ticks li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--sps-teal);
}

/* --- cards (rooms, memberships, audiences) -------------------------------- */

#all_body .sps-head { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
#all_body .sps-cards { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 760px) { #all_body .sps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { #all_body .sps-cards-3 { grid-template-columns: repeat(3, 1fr); } }
#all_body .sps-card { display: flex; flex-direction: column; }
/* one aspect ratio across the row so titles, copy and the spec rows sit on the
   same baselines whatever the copy length */
#all_body .sps-card .sps-fig { aspect-ratio: 3 / 2; margin-bottom: 1.2rem; }
#all_body .sps-card p { font-size: 0.97rem !important; line-height: 1.6 !important; }
#all_body .sps-card dl { margin: auto 0 0; padding: 0.9rem 0 0; }
#all_body .sps-card dt,
#all_body .sps-spec dt {
  font-size: 0.72rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sps-muted);
  padding-top: 0.7rem;
}
#all_body .sps-card dd,
#all_body .sps-spec dd {
  margin: 0.15rem 0 0;
  font-size: 0.97rem !important;
  line-height: 1.5 !important;
  color: var(--sps-ink);
  font-weight: 600;
}
#all_body .sps-card .sps-btns { margin-top: 1.1rem; }

/* --- buttons and cues ----------------------------------------------------- */

#all_body .sps-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
  align-items: center;
}
#all_body .sps a.sps-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.8rem;
  background: var(--sps-teal);
  color: #fff !important;
  font-weight: 600;
  border-bottom: 0;
  transition: background .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
#all_body .sps a.sps-btn:hover { background: #2a6667; color: #fff !important; text-decoration: none; transform: translateY(-2px); }
#all_body .sps a.sps-btn:active { transform: translateY(0) scale(.985); }

#all_body .sps a.sps-btn-ghost {
  background: transparent;
  color: var(--sps-ink) !important;
  box-shadow: inset 0 0 0 2px var(--sps-ink);
}
#all_body .sps a.sps-btn-ghost:hover { background: var(--sps-ink); color: #fff !important; transform: translateY(-2px); }

#all_body .sps a.sps-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
  font-weight: 600;
  border-bottom: 2px solid var(--sps-teal);
  /* holds the tap target at 44px even at the mobile type size */
  padding: 0.45rem 0 0.5rem;
}
#all_body .sps .sps-cue i { font-size: 0.85rem !important; }

#all_body .sps .sps-note {
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  color: var(--sps-muted);
  margin: 0.9rem 0 0;
  max-width: 48ch;
}

/* --- video band ----------------------------------------------------------- */

#all_body .sps-video { background: var(--sps-paper); padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
#all_body .sps-video .sps-inner { max-width: min(1000px, var(--sps-cw)); }
#all_body .sps-video .sps-eyebrow { margin-bottom: 0.4rem; }
#all_body .sps-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 1.5rem;
  background: var(--sps-ink);
}
#all_body .sps-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  max-width: 100%;
}

/* --- closing band --------------------------------------------------------- */

#all_body .sps-close {
  position: relative;
  padding: clamp(3.5rem, 8vw, 7rem) 0;
  background: var(--sps-ink) var(--sps-close-img, none) center / cover no-repeat;
}
#all_body .sps-close:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(40,59,60,.82) 0%, rgba(40,59,60,.93) 100%);
}
#all_body .sps-close .sps-inner {
  position: relative;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.5rem);
}
@media (min-width: 880px) { #all_body .sps-close .sps-inner { grid-template-columns: 1.15fr 0.85fr; align-items: end; } }
#all_body .sps-close h2 { color: #fff; }
#all_body .sps-close p { color: #dfe7e5; }
#all_body .sps-close .sps-eyebrow { color: var(--sps-teal-soft); }
#all_body .sps-close .sps-note { color: #b9c8c6; }
#all_body .sps-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
#all_body .sps-contact li { display: flex; gap: 0.85rem; align-items: baseline; color: #dfe7e5; }
#all_body .sps-contact i { color: var(--sps-teal-soft); width: 1.1rem; flex: 0 0 auto; }
#all_body .sps-close a { color: #fff !important; border-bottom: 1px solid var(--sps-teal-soft); }
#all_body .sps-close a:hover { color: var(--sps-teal-soft) !important; text-decoration: none; }
#all_body .sps-close a.sps-btn { border-bottom: 0; }
#all_body .sps-close a.sps-btn-ghost { box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); color: #fff !important; }
#all_body .sps-close a.sps-btn-ghost:hover { background: #fff; color: var(--sps-ink) !important; }

/* --- brand mark ----------------------------------------------------------- */

#all_body .sps-mark { display: block; width: 190px; max-width: 60%; height: auto; margin: 0 0 1.4rem; }

/* --- motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  #all_body .sps-reveal { opacity: 0; transform: translateY(14px); }
  #all_body .sps-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .55s ease-out, transform .55s cubic-bezier(.2,.8,.2,1);
  }
}

@media (min-width:  576px) { #all_body .sps { --sps-cw:  540px; } }
@media (min-width:  768px) { #all_body .sps { --sps-cw:  720px; } }
@media (min-width:  992px) { #all_body .sps { --sps-cw:  960px; } }
@media (min-width: 1200px) { #all_body .sps { --sps-cw: 1140px; } }
@media (min-width: 1400px) { #all_body .sps { --sps-cw: 1320px; } }

@media (max-width: 879px) {
  #all_body .sps { font-size: 17px !important; }
  #all_body .sps p { max-width: none; }
  #all_body .sps .sps-lede { max-width: none; }
}

/* --- late overrides ------------------------------------------------------- */

/* A page with exactly one headline number (the Stage Area's capacity) gets the
   full width rather than an empty second column. (1,2,0) so it beats the
   column rules above wherever they apply. */
#all_body .sps-facts.sps-facts-1 { grid-template-columns: 1fr; }

/* Spec pairs under a body of copy, where a full fact strip would be too loud */
#all_body .sps-spec {
  margin: 1.8rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid var(--sps-line);
  display: grid;
  gap: 0 1.8rem;
}
@media (min-width: 620px) { #all_body .sps-spec { grid-template-columns: repeat(2, 1fr); } }
#all_body .sps-spec dt:first-of-type,
#all_body .sps-card dt:first-of-type { padding-top: 0; }

/* Cards carrying copy only — no photograph exists for these, and a stock one
   would be worse than none. The rule keeps them on a shared baseline. */
#all_body .sps-card-plain { border-top: 2px solid var(--sps-ink); padding-top: 1.3rem; }