@charset "UTF-8";
/* ══════════════════════════════════════════════════════════
   THE_SPACE.CSS — this page only.
   Tokens, buttons, header, footer and the shared page-title
   and CTA components live in assets/css.
══════════════════════════════════════════════════════════ */
:root{--rule-w:440px}

/* ── CTA background — the only page-specific part of the
      shared "Come say hi" component. Swap bg-cta.webp in
      this folder to change the photo on this page. ── */
.cta-frame{background-image:url('bg-cta.webp')}

/* ════════════════════════════════════════
   SEC 01 — PAGE TITLE
   Same rules-and-title lockup as Our Story.
   Rule width is 440px on both pages, so it is
   a shared component, not a per-page value.
════════════════════════════════════════ */

/* ════════════════════════════════════════
   SEC 02 — SNEAK PEAK + FEATURE LIST
   Left: heading. Right: two rule-separated
   columns of numbered lines, 4 each.
════════════════════════════════════════ */
section.ts-sec-02{padding:9.5rem 0 0}
.sp-heading{font-size: clamp(2.9rem,3.6vw,4rem);margin-bottom: 0.5rem;}
.sp-sub{/* font-size:1.05rem; */color:var(--color-dark)}

.sp-list{list-style:none;counter-reset:none}
.sp-list li{
  display:flex;
  align-items:baseline;
  gap:1.6rem;
  border-top:1px solid var(--rule);
  padding:1.15rem .2rem 1.1rem;
  /* font-size:1.05rem; */
  line-height:1.35;
  color:var(--color-black);
  transition:padding-left .35s var(--ease),color .35s var(--ease);
}
.sp-list li:last-child{border-bottom:1px solid var(--rule)}
.sp-list li:hover{padding-left:.9rem;color:var(--color-purple)}
.sp-list .n{flex:0 0 auto;min-width:34px;font-variant-numeric:tabular-nums;color:var(--color-black);transition:color .35s var(--ease)}
.sp-list li:hover .n{color:var(--color-pink)}

/* ════════════════════════════════════════
   SEC 03 — PHOTO MOSAIC
   6-column grid, 28px gutter.
   Row 1  : three 2-col cards, 467x388
   Row 2/3: left stack of two 3-col cards (300 tall)
            beside one 3-col card spanning both rows
════════════════════════════════════════ */
section.ts-sec-03{padding:3rem 0 8rem}
.ts-mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gutter)}
.ms{border-radius:var(--r-card);overflow:hidden;border:4px solid var(--color-white);box-shadow:0 8px 28px rgba(48,27,81,.13)}
.ms img{transition:transform .7s var(--ease)}
.ms:hover img{transform:scale(1.05)}
.ms-a,.ms-b,.ms-c{grid-column:span 2;aspect-ratio:467/388}
.ms-d,.ms-f{grid-column:span 3;aspect-ratio:620/300}
.ms-e{grid-column:span 3;grid-row:span 2}

/* ════════════════════════════════════════
   SEC 04 — COME SAY HI
   Same card as Our Story. The only difference is
   the sub-line copy, which is page-specific.
════════════════════════════════════════ */
/* ── RESPONSIVE ──
   Desktop: 6-col grid, three cards across then a 2+1 block.
   ≤1199 : the top row goes 2-up with the third full width.
   ≤991  : two columns; the wide banners and the tall portrait
           each take the full width so nothing is over-cropped.
   ≤767  : single column, each card keeping a sensible crop
           for its subject rather than one blanket ratio. */
@media(max-width:1199px){
  .ms-a,.ms-b{grid-column:span 3;aspect-ratio:467/388}
  .ms-c{grid-column:span 6;aspect-ratio:16/7}
}
@media(max-width:991px){
  section.ts-sec-02{padding-top:5rem}
  .sp-heading{margin-top:0}
  .sp-col{margin-top:2.5rem}

  .ts-mosaic{grid-template-columns:repeat(2,1fr);gap:18px}
  .ms-a,.ms-b{grid-column:span 1;aspect-ratio:1/1}
  .ms-c{grid-column:span 2;aspect-ratio:16/9}
  .ms-d,.ms-f{grid-column:span 2;grid-row:auto;aspect-ratio:713/300}
  .ms-e{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
}
@media(max-width:767px){
  section.ts-sec-03{padding:2rem 0 4.5rem}
  .ts-mosaic{grid-template-columns:1fr;gap:14px}
  .ms-a,.ms-b,.ms-c{grid-column:span 1;aspect-ratio:4/3}
  .ms-d,.ms-f{grid-column:span 1;aspect-ratio:16/9}
  /* the group shot is the anchor image — keep it portrait */
  .ms-e{grid-column:span 1;grid-row:auto;aspect-ratio:4/5}
  .ms{border-width:3px}
}