/* ============================================================
   EXPLORE THE SPACE — 1:1 Figma rebuild
   Desktop source: Figma node 4148:1908 (1920 x 6496)
   Token reference:
     - Display serif:    STIX Two Text Medium
     - Body sans:        Inter (400/500/600/700)
     - Heading color:    #5A381C
     - Body color:       #282828
     - Brown accent:     #744B20
     - Quote body:       #4A3B2E
     - Quote caps:       #5E2A29
     - CTA band bg:      #BEA884
     - Pill button bg:   #FAFAFA
     - Cream popover:    #EFEADF
   All sizes scale proportionally below 1920vp via
     min(Xpx, calc(X / 1920 * 100vw))
============================================================ */

/* ===== UNIVERSAL RESET (the pattern fix) =====
   Kill base styles.css paddings/gaps/min-heights that fight the
   per-section Figma values below. */
body[data-page="explore-the-space"] section,
body[data-page="explore-the-space"] [class*="__inner"]:not(.inner-hero__inner) {
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  min-height: 0;
}

/* ============ HERO — Figma 4148:1918 (y=176→1013, h=837) ============
   IMG bleed at left:-67/top:-281 W1987 x H1118.
   Text group at (148, 644):
     Eyebrow (4148:1922): Inter Medium 20px tracking 2px uppercase #FFFFFF
     Heading (4148:1923): STIX Two Text Medium 64px capitalize #FFFFFF */
body[data-page="explore-the-space"] .inner-hero {
  width: 100%;
  height: min(837px, calc(837 / 1920 * 100vw));
  position: relative;
  overflow: hidden;
}
body[data-page="explore-the-space"] .inner-hero__image {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
body[data-page="explore-the-space"] .inner-hero__inner {
  /* Base styles.css forces min-height: var(--hero-min-h) (~702px) which
     pushes the absolutely-positioned text far below the hero. Reset
     min-height + height so the inner is just the content box at the
     Figma-anchored origin. */
  position: absolute;
  left: min(148px, calc(148 / 1920 * 100vw));
  top:  min(644px, calc(644 / 1920 * 100vw));
  width: min(669px, calc(669 / 1920 * 100vw));
  height: auto !important;
  min-height: 0 !important;
  padding: 0; margin: 0;
  text-align: left;
}
body[data-page="explore-the-space"] .inner-hero__kicker {
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: 1.2;
  letter-spacing: 0.1em; /* 2px / 20px */
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 min(12px, calc(12 / 1920 * 100vw));
  /* Figma kicker is one line ("A SANCTUARY IN NATURE THAT INVITES
     SELF-DISCOVERY"). Browser Inter Medium 20 with 2px tracking is a
     hair wider than Figma preview so the 669-wide inner wraps it to
     two lines; nowrap keeps it on one. */
  white-space: nowrap;
}
body[data-page="explore-the-space"] .inner-hero__title {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(64px, calc(64 / 1920 * 100vw));
  line-height: 1.05;
  text-transform: capitalize;
  color: #ffffff;
  margin: 0;
}

/* ============ STEP INTO SACRED GROUNDS — Figma 4148:1910 (y=1126→1292)
   + 4-card vertical list + photo panel (4148:1966 at y=1332→2032) ============
   Section bg should be ivory (light) per Figma rect 4148:1909. */
body[data-page="explore-the-space"] .sacred-grounds {
  width: 100%;
  /* Figma background rect (4148:1909) over Sacred Grounds is a cream
     tone, distinct from the white "Spaces to Discover" section below. */
  background: rgba(240, 234, 222, 0.5); /* QC r25: #F0EADE @ 50% */
  padding: min(113px, calc(113 / 1920 * 100vw)) 0 min(110px, calc(110 / 1920 * 100vw));
  overflow: hidden; /* QC r26: Safari card overlap into next section */
}
body[data-page="explore-the-space"] .sacred-grounds__inner {
  width: 100%; max-width: none;
  padding: 0 min(149px, calc(149 / 1920 * 100vw));
  margin: 0;
  display: flex; flex-direction: column;
}
body[data-page="explore-the-space"] .sacred-grounds__copy {
  /* Figma 4148:1910: 596 wide x 166 tall, gap 25 between heading and body. */
  width: min(596px, calc(596 / 1920 * 100vw));
  max-width: none;
  display: flex; flex-direction: column;
  gap: min(15px, calc(15 / 1920 * 100vw));
  margin-bottom: min(40px, calc(40 / 1920 * 100vw)); /* 1332 - (1126+166) = 40 */
}
body[data-page="explore-the-space"] .sacred-grounds__copy h2 {
  /* Figma 4148:1911: STIX Two Text Medium 52px capitalize #5A381C */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  text-transform: capitalize;
  color: #5A381C;
  margin: 0;
}
body[data-page="explore-the-space"] .sacred-grounds__copy p {
  /* Figma 4148:1912: Inter Regular 20px line 38px #282828 w=563 */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  max-width: min(563px, calc(563 / 1920 * 100vw));
  margin: 0;
}

/* ===== 4-card vertical list + photo panel (4148:1966) ===== */
body[data-page="explore-the-space"] .sacred-grounds__stage {
  /* Figma container 1622 wide x 700 tall.
     Inside: left card column 405 wide, right photo panel 1185 wide x 699,
     gap = 1622 - 405 - 1185 = 32. */
  width: 100%;
  display: grid;
  grid-template-columns: min(405px, calc(405 / 1920 * 100vw)) 1fr;
  gap: min(32px, calc(32 / 1920 * 100vw));
  align-items: start;
}
body[data-page="explore-the-space"] .ground-cards {
  /* 4 cards stacked vertically. Card heights ~156 each, vertical pitch
     ~182 → gap = 182 - 156 = 26. */
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: min(26px, calc(26 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .ground-card {
  /* Figma: 405 x 156, padding 18px 40px, rounded 8, gap 23 (icon vs text). */
  display: flex; align-items: center;
  gap: min(23px, calc(23 / 1920 * 100vw));
  padding: min(18px, calc(18 / 1920 * 100vw)) min(40px, calc(40 / 1920 * 100vw));
  width: min(405px, calc(405 / 1920 * 100vw));
  min-height: min(156px, calc(156 / 1920 * 100vw));
  border: 1px solid #744B20;
  border-radius: 8px;
  background: transparent;
  color: #744B20;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
body[data-page="explore-the-space"] .ground-card.is-active {
  /* Active = filled brown card, white text. */
  background: #744B20;
  border-color: #744B20;
  color: #FFFFFF;
}
body[data-page="explore-the-space"] .ground-card:nth-child(n+3) {
  /* Cards 3 & 4 in Figma render italic (Lakes, Seasonal Shifts). */
  font-style: italic;
}
body[data-page="explore-the-space"] .ground-card.is-active:nth-child(n+3) {
  /* If the user activates an italic card, switch back to upright per Figma
     pattern (active = filled & non-italic). */
  font-style: normal;
}
body[data-page="explore-the-space"] .ground-card__icon {
  /* Figma icon circle: 58x58 border 1px, padded 12, inner icon 34. */
  width: min(58px, calc(58 / 1920 * 100vw));
  height: min(58px, calc(58 / 1920 * 100vw));
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
body[data-page="explore-the-space"] .ground-card__icon svg {
  width: min(34px, calc(34 / 1920 * 100vw));
  height: min(34px, calc(34 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .ground-card__copy {
  display: flex; flex-direction: column;
  gap: min(4px, calc(4 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .ground-card__copy h3,
body[data-page="explore-the-space"] .ground-card__copy h4 {
  /* Figma: Inter Medium 24px line 1.45. Cards 3-4 are italic (handled
     above via font-style on the .ground-card). HTML uses <h4>; this
     responsive rule had only targeted h3, so the hardcoded 18px from
     styles.css line 4801 was winning at desktop sizes. */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(24px, calc(24 / 1920 * 100vw)) !important;
  line-height: 1.45;
  color: currentColor;
  margin: 0;
}
body[data-page="explore-the-space"] .ground-card__copy p {
  /* Figma: Inter Regular 16px line 1.45 width ~220. */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(16px, calc(16 / 1920 * 100vw)) !important;
  line-height: 1.45;
  color: currentColor;
  margin: 0;
  max-width: min(244px, calc(244 / 1920 * 100vw));
}

/* Map + popover sharp corners (Figma 4148:917 + 4148:976). Base CSS
   gives the aerial map 12px radius and the popover 8px; force 0. */
body[data-page="explore-the-space"] .aerial-stage__image,
body[data-page="explore-the-space"] .space-detail__card,
body[data-page="explore-the-space"] .space-detail__photo {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Q11: the card photo window in the page frame (I7834:2368;4929:3495/3519)
   is 492.5 x 321.3 — wider than the base 16/11. The -v3 assets are pre-cropped
   to exactly this aspect, so cover/center is pixel-faithful. Desktop only:
   the <=700px carousel sets an explicit height which wins over aspect-ratio. */
body[data-page="explore-the-space"] .space-detail__photo {
  aspect-ratio: 4925 / 3213;
}

body[data-page="explore-the-space"] .sacred-grounds__media {
  /* Figma right photo panel: 1185 x 699, sharp corners (no radius). */
  width: 100%;
  height: min(699px, calc(699 / 1920 * 100vw));
  border-radius: 0;
  background-size: cover;
  /* Anchor at bottom so the ground/grass/foreground stays visible —
     cover crops vertically when the source aspect is narrower than the
     1.695 container aspect; default center clipped the bottom (user
     reported missing grass on Open Fields + Wooded Trails). */
  background-position: center bottom;
}

/* ============ SPACES TO DISCOVER — Figma 4148:1914 (y=2249→2415) + map at y=2455
   Section bg same #fafafa as Sacred Grounds (4148:1909 covers both). */
body[data-page="explore-the-space"] .spaces-discover-v2,
body[data-page="explore-the-space"] .spaces-discover {
  width: 100%;
  /* White section between the cream Sacred Grounds (above) and the
     gold-textured Peace Quote band (below). Total white area above
     the map stays at ~135 (was 110 padding + 25 head-margin); now
     split so the text is vertically centred — 70 above + 65 below
     the heading block. */
  background: #ffffff;
  padding: min(70px, calc(70 / 1920 * 100vw)) 0 0;
}
body[data-page="explore-the-space"] .spaces-discover-v2__inner,
body[data-page="explore-the-space"] .spaces-discover__inner {
  width: 100%; max-width: none;
  padding: 0 min(149px, calc(149 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .spaces-discover-v2__inner {
  /* Base styles.css gives the inner a 40-64px bottom margin pushing
     the aerial photo way below the heading. User reported the photo
     starts too low. Reset so only the head margin drives the gap. */
  margin-bottom: 0 !important;
}
body[data-page="explore-the-space"] .spaces-discover-v2__head,
body[data-page="explore-the-space"] .spaces-discover__head {
  /* Same 596x166 / 15 gap pattern as Sacred Grounds. Bottom margin
     bumped 25 -> 65 so the heading is vertically centred in the
     white area above the map (paired with 70 padding-top). */
  width: min(596px, calc(596 / 1920 * 100vw));
  max-width: none;
  display: flex; flex-direction: column;
  gap: min(15px, calc(15 / 1920 * 100vw));
  margin-bottom: min(65px, calc(65 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .spaces-discover-v2__head h2,
body[data-page="explore-the-space"] .spaces-discover__head h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.1;
  text-transform: capitalize;
  color: #5A381C;
  margin: 0;
}
body[data-page="explore-the-space"] .spaces-discover-v2__head p,
body[data-page="explore-the-space"] .spaces-discover__head p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(38 / 20);
  color: #282828;
  max-width: min(563px, calc(563 / 1920 * 100vw));
  margin: 0;
}

/* ============ PEACE QUOTE BAND — Figma 4148:1967 (y=3393→3935, 1921 x 542)
   Three paragraphs centered:
     line 1 (4148:1970): STIX Two Text 32px line 60 #4A3B2E, mixed weight, w=898
     center caps (4148:1971): Inter SemiBold 38px tracking 3.8 #5E2A29 uppercase, w=780
     line 3 (4148:1969): STIX Two Text 32px line 60 #4A3B2E, w=649
   Background image (4148:1968) is the cream gold-leaf texture. */
/* ============ PEACE QUOTE — rebuilt from scratch per user-pasted Figma CSS spec
   Section (Group 1597881281): 1921 x 542, background #FFFFFF
   Background image (pexels-ron-lach): 1921 x 1280, gold-leaf texture
   Background gradient overlay (Rectangle 34624546): 1949 x 1129
       radial-gradient(50% 50% at 50% 50%, rgba(218,201,177,0.6) 0%,
                                            rgba(213,171,122,0.6) 100%)
   Text container (Group 1597881282): 898 x 393, centered
     - Lead 1 ("If you want peace..."): 898 x 120, STIX Two Text 400 32/60, #4A3B2E
     - Caps  ("And such a place..."):   765 x 55,  Inter 600 38/55 ls 0.1em uc, #5E2A29
     - Lead 2 ("It is a place..."):     731 x 120, STIX Two Text 400 32/60, #4A3B2E
     Block stack: 120 + 49 + 55 + 49 + 120 = 393.
   Every property uses !important to override the cascade of base
   styles.css rules at lines 3655, 4973, 6562, 6621, 10269. */
body[data-page="explore-the-space"] .peace-quote {
  all: unset !important;
  display: flex !important;
  position: relative !important;
  width: 100% !important;
  height: min(542px, calc(542 / 1920 * 100vw)) !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
body[data-page="explore-the-space"] .peace-quote::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(50% 50% at 50% 50%, rgba(218,201,177,0.6) 0%, rgba(213,171,122,0.6) 100%),
    url('assets/explore-quote-bg.jpg') !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body[data-page="explore-the-space"] .peace-quote__inner {
  all: unset !important;
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  /* 898 x 393 text container per Figma spec. Flex column with gap 49
     between children, each child has its explicit width + height. */
  width: min(898px, calc(898 / 1920 * 100vw)) !important;
  height: min(393px, calc(393 / 1920 * 100vw)) !important;
  gap: min(49px, calc(49 / 1920 * 100vw)) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
body[data-page="explore-the-space"] .peace-quote__lead {
  all: unset !important;
  display: block !important;
  width: min(898px, calc(898 / 1920 * 100vw)) !important;
  height: min(120px, calc(120 / 1920 * 100vw)) !important;
  font-family: 'STIX Two Text', serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: min(32px, calc(32 / 1920 * 100vw)) !important;
  line-height: min(60px, calc(60 / 1920 * 100vw)) !important;
  text-align: center !important;
  color: #4A3B2E !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Lead 2 is narrower per spec — 731px instead of 898px. */
body[data-page="explore-the-space"] .peace-quote__lead + .peace-quote__center + .peace-quote__lead {
  width: min(731px, calc(731 / 1920 * 100vw)) !important;
}
body[data-page="explore-the-space"] .peace-quote__lead strong {
  font-family: inherit !important;
  font-style: inherit !important;
  /* User: bold (700) was too heavy — switch to STIX Two Text Medium
     (500). Same letter shapes as regular but a slightly thicker stroke,
     so emphasised words read heavier without ballooning the line. */
  font-weight: 500 !important;
  color: inherit !important;
  background: none !important;
}
body[data-page="explore-the-space"] .peace-quote__center {
  all: unset !important;
  display: block !important;
  width: min(765px, calc(765 / 1920 * 100vw)) !important;
  height: min(55px, calc(55 / 1920 * 100vw)) !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: min(38px, calc(38 / 1920 * 100vw)) !important;
  line-height: min(55px, calc(55 / 1920 * 100vw)) !important;
  text-align: center !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #5E2A29 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============ YOUR TIME AT THE ASHRAM — Figma 4148:1925 (y=4040→5225) ============
   Heading at (149, 4040) STIX Medium 52 #5A381C.
   Carousel at (99, 4145) 1722 x 1080. */
body[data-page="explore-the-space"] .ashram-time {
  width: 100%;
  background: #ffffff;
  padding: min(105px, calc(105 / 1920 * 100vw)) 0 min(108px, calc(108 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .ashram-time__inner {
  width: 100%; max-width: none;
  /* Figma photo clip is 1622 wide centered on the 1920 page, leaving
     149 of horizontal gutter each side. Previous 99px gutter pulled
     the photo out to 1722 wide (the outer-carousel container width),
     making it visibly wider than Figma. */
  padding: 0 min(149px, calc(149 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .ashram-time h2 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: clamp(28px, 3vw, 40px); /* QC r22: smaller so section fits the fold */
  line-height: 1.1;
  color: #5A381C;
  margin: 0 0 min(40px, calc(40 / 1920 * 100vw)) min(50px, calc(50 / 1920 * 100vw));
  /* Figma heading at x=149, carousel at x=99 — heading is 50px to the right of carousel left edge. */
}

/* Carousel stage (1722 x 1080, rounded 4). */
body[data-page="explore-the-space"] .ashram-time__stage {
  width: 100%;
  height: min(1080px, calc(1080 / 1920 * 100vw));
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
body[data-page="explore-the-space"] .ashram-time__photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
}

/* Overlay caption card — Figma 4098:1987: 403 x 309 at (1135, 500),
   bg rgba(255,255,255,0.9) radius 4, inner padding top 41 / sides 32.
   Base styles.css sets top:50% + transform:translateY(-50%) on
   .time-card; force absolute top:500 + no transform so the card sits
   at its Figma anchor. */
body[data-page="explore-the-space"] .time-card {
  position: absolute;
  /* Restore Figma's exact anchor — left=1135 inside the 1622 stage. */
  left: min(1135px, calc(1135 / 1920 * 100vw)) !important;
  right: auto !important;
  top:  min(500px, calc(500 / 1920 * 100vw)) !important;
  /* QC Expl-r35: on the AFTERNOON / Yoga step the strip label rises to the
     card's left edge and its top ~10px clipped the card's bottom-left corner
     (reproduced 19x10px at 1440, and growing slightly as the viewport
     narrows). Nudging the whole card up a constant 20px clears the label at
     every desktop width without disturbing the Figma anchor noticeably.
     Mobile (<=767) hides .ashram-time__stage so this never affects 390. */
  transform: translateY(-20px) !important;
  width: min(403px, calc(403 / 1920 * 100vw)) !important;
  min-height: min(309px, calc(309 / 1920 * 100vw));
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  padding: min(41px, calc(41 / 1920 * 100vw))
           min(32px, calc(32 / 1920 * 100vw));
  display: flex; flex-direction: column;
  gap: min(15px, calc(15 / 1920 * 100vw));
  box-shadow: none;
}
/* Sun / moon ornaments + line — Figma absolute coords from metadata:
     Divider line vector at top=947 within the 1722x1080 carousel
       (=> 87.685% from top of stage; LINE BASELINE).
     Sun  ornament 76.522 x 76.522 at left=166, top=958.48
       (=> center 204.26, 996.74 of 1722x1080).
     Moon ornament 77.491 x 77.491 at left=1455 top=940.9
       (=> center 1493.75, 979.64; right edge 189.5 from stage right).
   The base .time-strip is 70px tall with its line at y≈89 of a 90-tall
   svg viewBox (= 98.9% of strip). To land that line at 87.685% of the
   1080 stage, strip top must be 87.685% - (70 * 0.989 / 1080)% ≈ 81.27%. */
body[data-page="explore-the-space"] .time-strip {
  /* Line at top:75% per user. */
  top: 75% !important;
  bottom: auto !important;
  /* Anchor strip to sun/moon centres. User asked the right side line
     +8% longer, then asked for the line to be CENTERED — sun and
     moon equidistant from the photo edges. Match left to right (120
     at 1920vp = 90 at 1440vp on each side). */
  left: min(120px, calc(120 / 1920 * 100vw)) !important;
  right: min(120px, calc(120 / 1920 * 100vw)) !important;
}
body[data-page="explore-the-space"] .time-strip__icon {
  /* Icons sit BELOW the line: top:100% (line baseline = strip bottom),
     translateY(0) so icon top edge is on the line, body extends below. */
  top: 100% !important;
  transform: translateY(0) !important;
  margin-top: min(4px, calc(4 / 1920 * 100vw));
}
/* Base CSS insets the track 46px left / 52px right so the arc clears the
   sun and moon icons that sit inside the track at left:0 / right:0. Our
   sun/moon are positioned OUTSIDE the strip (left:-38 / right:-58) so the
   inset just shortens the line. Zero it so the arc spans sun-center to
   moon-center per Figma. */
body[data-page="explore-the-space"] .time-strip__track {
  margin: 0 !important;
}
body[data-page="explore-the-space"] .time-strip__icon--sun {
  /* Anchor sun centre to strip's LEFT edge so the arc/line meets the sun
     exactly. Using translateX(-50%) means the icon's centre is at left:0
     regardless of how the icon width scales at sub-1920 viewports. */
  width: min(76px, calc(76 / 1920 * 100vw)) !important;
  height: min(76px, calc(76 / 1920 * 100vw)) !important;
  left: 0 !important;
  transform: translateX(-50%) translateY(0) !important;
}
body[data-page="explore-the-space"] .time-strip__icon--moon {
  /* User asked for moon 50% bigger — 77 * 1.5 ≈ 116. Anchor centre to
     strip's RIGHT edge via translateX(50%) so the line meets the moon. */
  width: min(116px, calc(116 / 1920 * 100vw)) !important;
  height: min(116px, calc(116 / 1920 * 100vw)) !important;
  right: 0 !important;
  left: auto !important;
  transform: translateX(50%) translateY(0) !important;
}
/* "EARLY MORNING" / "MORNING" etc. timeline label — Figma 4098:2008:
   Inter Bold Italic 20 / line 21, color #ffffff, drop-shadow
   0 1px 4px rgba(199,168,107,0.4). Base CSS sets it to 11px which is
   way under Figma; bump to 20 and update the shadow tint. */
body[data-page="explore-the-space"] .time-strip__label {
  font-family: 'Inter', sans-serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: min(20px, calc(20 / 1920 * 100vw)) !important;
  line-height: 21px !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(199, 168, 107, 0.4) !important;
}
body[data-page="explore-the-space"] .time-card__eyebrow {
  /* Inter Medium 14px line 28px tracking 0.56 color #744B20 */
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(14px, calc(14 / 1920 * 100vw));
  line-height: 2;
  letter-spacing: min(0.56px, calc(0.56 / 1920 * 100vw));
  text-transform: uppercase;
  color: #744B20;
  margin: 0;
}
body[data-page="explore-the-space"] .time-card__title {
  /* STIX Two Text Medium 36px #282828 */
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(36px, calc(36 / 1920 * 100vw));
  line-height: 1.15;
  color: #282828;
  margin: 0;
}
body[data-page="explore-the-space"] .time-card__body {
  /* Inter Regular 20px line 28 #282828 */
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(20px, calc(20 / 1920 * 100vw));
  line-height: calc(28 / 20);
  color: #282828;
  margin: 0;
}
body[data-page="explore-the-space"] .time-card__nav {
  margin-top: auto;
  display: flex; gap: min(10px, calc(10 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .time-card__nav .time-arrow {
  /* Reuse Figma 54x54 outline carousel button. */
  width: min(54px, calc(54 / 1920 * 100vw));
  height: min(54px, calc(54 / 1920 * 100vw));
  border: 1px solid #5A381C !important;
  background: transparent !important;
  color: #5A381C !important;
  border-radius: 100px !important;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease !important;
}
body[data-page="explore-the-space"] .time-card__nav .time-arrow svg {
  /* Figma button chevron is 42x42 inside the 54x54 button. */
  width: min(42px, calc(42 / 1920 * 100vw));
  height: min(42px, calc(42 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .time-card__nav .time-arrow:hover {
  background: #5A381C !important;
  color: #fafafa !important;
}
/* Last phase (Stargazing): only the prev arrow is visible. The next slot
   is still occupied (visibility:hidden) so flip the prev arrow's flex
   order to render AFTER next, putting it exactly where next normally
   sits — per Figma image #2 LEFT, the lone left-chevron ends up in the
   right-slot position. */
body[data-page="explore-the-space"] .time-card.is-last .time-card__nav #timePrev {
  order: 2 !important;
  margin-left: 0 !important;
}

/* ============ READY TO VISIT? — Figma 4148:1928 (y=5333→5773, h=440)
   bg #BEA884, content centered W 716:
     Heading: STIX Medium 52 #FFFFFF
     Body:    Inter Regular 28 line 44 #FFFFFF (mixed Medium runs)
     Button:  244 x 60, bg #FAFAFA, label Inter Medium 16 line 20 #5A381C
   Heading at y=5410, body at y=5507, button at y=5643 (44px gap, 92px gap). */
body[data-page="explore-the-space"] .visit-cta {
  display: none !important; /* QC r24: Phase 1 — hidden until we have programs */
  width: 100%;
  min-height: min(440px, calc(440 / 1920 * 100vw));
  padding: min(77px, calc(77 / 1920 * 100vw)) min(149px, calc(149 / 1920 * 100vw))
           min(70px, calc(70 / 1920 * 100vw));
  background: #BEA884;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
body[data-page="explore-the-space"] .visit-cta__inner {
  width: 100%; max-width: min(716px, calc(716 / 1920 * 100vw));
  display: flex; flex-direction: column; align-items: center;
  gap: 0;
}
body[data-page="explore-the-space"] .visit-cta h3 {
  font-family: 'STIX Two Text', serif; font-weight: 500;
  font-size: min(52px, calc(52 / 1920 * 100vw));
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 min(32px, calc(32 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .visit-cta p {
  font-family: 'Inter', sans-serif; font-weight: 400;
  font-size: min(28px, calc(28 / 1920 * 100vw));
  line-height: calc(44 / 28);
  color: #ffffff;
  margin: 0 0 min(48px, calc(48 / 1920 * 100vw));
}
body[data-page="explore-the-space"] .visit-cta p strong {
  font-weight: 500;
}
body[data-page="explore-the-space"] .visit-cta .btn {
  /* Figma 4148:1931 — fixed 244 x 60 pill, bg #FAFAFA, label #5A381C,
     padding 10/20, gap 12, content centered (justify-center fills the
     extra width). Override base .btn (height 60 + padding 0 28). */
  background: #FAFAFA;
  color: #5A381C;
  border: 1px solid #FAFAFA;
  border-radius: min(40px, calc(40 / 1920 * 100vw));
  width: min(244px, calc(244 / 1920 * 100vw));
  height: min(60px, calc(60 / 1920 * 100vw));
  padding: min(10px, calc(10 / 1920 * 100vw)) min(20px, calc(20 / 1920 * 100vw));
  font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: min(16px, calc(16 / 1920 * 100vw));
  line-height: 1.25;
  display: inline-flex; align-items: center; justify-content: center;
  gap: min(12px, calc(12 / 1920 * 100vw));
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
body[data-page="explore-the-space"] .visit-cta .btn:hover {
  background: #5A381C;
  color: #FAFAFA;
  border-color: #5A381C;
}
body[data-page="explore-the-space"] .visit-cta .btn .btn-icon {
  width: min(20px, calc(20 / 1920 * 100vw));
  height: min(20px, calc(20 / 1920 * 100vw));
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #5A381C;
  color: #FAFAFA;
}
body[data-page="explore-the-space"] .visit-cta .btn:hover .btn-icon {
  background: #FAFAFA;
  color: #5A381C;
}
body[data-page="explore-the-space"] .visit-cta .btn .btn-icon svg {
  width: 60%; height: 60%;
}

/* Spaces to Discover — active hotspot stays white with a yellow ring (QC r21) */
body[data-page="explore-the-space"] .hotspot.is-active {
  background: rgba(255, 255, 255, 0.92);
  border-color: #F1BF18;
}

/* ============================================================
   MOBILE (<768) — Figma node 4149:5181 (Explore - Mobile, 390 × 4321)
   Layout scales with min(Xpx, X/390*100vw); TEXT is fixed px.
   Desktop above is untouched (off-limits).
============================================================ */
@media (max-width: 1023px) {
  /* ---- HERO (4149:5184-5187): photo + centered text, NO veil ---- */
  body[data-page="explore-the-space"] .inner-hero {
    height: min(560px, calc(560 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .inner-hero__image {
    background-position: left center;   /* Figma frames the autumn tree at the left edge, lake center-right */
  }
  body[data-page="explore-the-space"] .inner-hero__inner {
    left: 0; right: 0; width: 100%;
    top: min(420px, calc(420 / 390 * 100vw));
    text-align: center;
    padding: 0 min(38px, calc(38 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .inner-hero__kicker {
    font-size: 12px; line-height: 18px;
    letter-spacing: 0.6px;
    white-space: normal;                 /* Figma: wraps to 2 lines (long kicker) */
    max-width: min(240px, calc(240 / 390 * 100vw));
    margin: 0 auto min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .inner-hero__title {
    font-size: 32px; line-height: 1.1; text-transform: none;
  }

  /* ---- STEP INTO SACRED GROUNDS (4149:5189): 2×2 cards + full-width photo ---- */
  body[data-page="explore-the-space"] .sacred-grounds {
    background: rgba(240, 234, 222, 0.5); /* QC r25: #F0EADE @ 50% */
    padding: min(40px, calc(40 / 390 * 100vw)) 0;   /* no side pad → media is full-bleed */
  }
  body[data-page="explore-the-space"] .sacred-grounds__inner {
    padding: 0; display: flex; flex-direction: column; align-items: center;
  }
  body[data-page="explore-the-space"] .sacred-grounds__copy {
    width: 100%; max-width: min(317px, calc(317 / 390 * 100vw)); margin: 0 auto;
    align-items: flex-start; text-align: left;   /* Figma: left-aligned text */
    gap: min(8px, calc(8 / 390 * 100vw));
    margin-bottom: min(25px, calc(25 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .sacred-grounds__copy h2 {
    font-size: 24px; line-height: 1.2; color: #5A381C; text-align: left; text-transform: none;
  }
  body[data-page="explore-the-space"] .sacred-grounds__copy p {
    font-size: 14px; line-height: 22px; color: #282828; text-align: left;
    max-width: none;
  }
  /* stage = cards grid, then media photo below */
  body[data-page="explore-the-space"] .sacred-grounds__stage {
    display: flex; flex-direction: column; align-items: center;
    grid-template-columns: none;          /* kill desktop 2-col grid */
    gap: min(27px, calc(27 / 390 * 100vw));
    width: 100%;
  }
  body[data-page="explore-the-space"] .ground-cards {
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: min(10px, calc(10 / 390 * 100vw));
    width: 100%; max-width: min(347px, calc(347 / 390 * 100vw));
    margin: 0 auto;
  }
  body[data-page="explore-the-space"] .ground-card {
    width: calc(50% - min(5px, calc(5 / 390 * 100vw)));   /* 2 per row */
    min-height: min(110px, calc(110 / 390 * 100vw));
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    gap: min(6px, calc(6 / 390 * 100vw));
    padding: min(18px, calc(18 / 390 * 100vw)) min(14px, calc(14 / 390 * 100vw));
    border-radius: 4px;
  }
  body[data-page="explore-the-space"] .ground-card:nth-child(n+3) { font-style: normal; }
  body[data-page="explore-the-space"] .ground-card__icon {
    border: 0;
    width: min(28px, calc(28 / 390 * 100vw)); height: min(28px, calc(28 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .ground-card__icon svg {
    width: 100%; height: 100%;
  }
  body[data-page="explore-the-space"] .ground-card__copy {
    align-items: center; text-align: center;
    gap: min(3px, calc(3 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .ground-card__copy h3,
  body[data-page="explore-the-space"] .ground-card__copy h4 {
    font-size: 16px !important; line-height: 1.3; text-align: center;
  }
  body[data-page="explore-the-space"] .ground-card__copy p {
    font-size: 10px !important; line-height: 1.35; text-align: center; max-width: none;
  }
  body[data-page="explore-the-space"] .sacred-grounds__media {
    width: 100%; height: min(501px, calc(501 / 390 * 100vw));   /* Figma node 4149:5189;47:1891 is h-501 (taller) */
    background-position: center;
  }

  /* ---- SPACES TO DISCOVER (4149:5257): single card carousel (hide aerial) ---- */
  body[data-page="explore-the-space"] .spaces-discover-v2 {
    background: #ffffff;
    padding: min(40px, calc(40 / 390 * 100vw)) 0 0;
  }
  body[data-page="explore-the-space"] .spaces-discover-v2__inner {
    padding: 0;
  }
  body[data-page="explore-the-space"] .spaces-discover-v2__head {
    width: 100%; max-width: min(317px, calc(317 / 390 * 100vw)); margin: 0 auto min(25px, calc(25 / 390 * 100vw));
    align-items: stretch;   /* children fill the 317 block */
    gap: min(8px, calc(8 / 390 * 100vw));
  }
  /* Figma: heading is CENTERED over the block, subtext is left-aligned (node 4149:5193) */
  body[data-page="explore-the-space"] .spaces-discover-v2__head h2 {
    font-size: 24px; line-height: 1.2; color: #5A381C; text-align: center; text-transform: none;
  }
  body[data-page="explore-the-space"] .spaces-discover-v2__head p {
    font-size: 14px; line-height: 22px; color: #282828; text-align: left;
    max-width: none; margin: 0;
  }
  /* aerial map + hotspots are desktop-only */
  body[data-page="explore-the-space"] .aerial-stage__image { display: none !important; }
  body[data-page="explore-the-space"] .aerial-stage {
    display: block; padding: 0;
  }
  body[data-page="explore-the-space"] .space-detail { position: relative; }
  body[data-page="explore-the-space"] .space-detail__card {
    display: none; flex-direction: column;
  }
  body[data-page="explore-the-space"] .space-detail__card.is-active { display: flex; }
  body[data-page="explore-the-space"] .space-detail__photo {
    width: 100%; height: min(252px, calc(252 / 390 * 100vw));
    background-size: cover; background-position: center;
  }
  body[data-page="explore-the-space"] .space-detail__body {
    background: rgba(240,234,222,0.5);
    min-height: min(143px, calc(143 / 390 * 100vw));
    /* Figma: text block indented ~74px from the left so it clears the left
       arrow (arrow at 16 + 40 = 56); right pad 18 (right arrow sits beyond text) */
    padding: min(38px, calc(38 / 390 * 100vw)) min(18px, calc(18 / 390 * 100vw)) min(30px, calc(30 / 390 * 100vw)) min(74px, calc(74 / 390 * 100vw));
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    text-align: left;
    gap: min(8px, calc(8 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .space-detail__body h4 {
    font-family: 'STIX Two Text', serif; font-weight: 500; font-style: normal;
    font-size: 20px; line-height: 1.2; color: #282828; margin: 0; text-align: left;
  }
  body[data-page="explore-the-space"] .space-detail__body p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: #282828; margin: 0; text-align: left;
    max-width: min(242px, calc(242 / 390 * 100vw));
  }
  /* prev/next arrows flank the cream body, vertically centered ON the body.
     The nav overlays ONLY the body region (top = photo height → bottom of card),
     so `top:50%` centres the arrows in the body regardless of its height.
     left/right:0 so #spacePrev/#spaceNext's own 14px inset is measured from the
     card edge (not stacked on a nav inset → was crowding the title). */
  body[data-page="explore-the-space"] .space-detail__nav {
    display: block !important;
    position: absolute; left: 0; right: 0;
    top: min(252px, calc(252 / 390 * 100vw));   /* = .space-detail__photo height */
    bottom: 0;
    pointer-events: none;
  }
  body[data-page="explore-the-space"] .space-arrow {
    position: absolute; top: 50%; bottom: auto; transform: translateY(-50%);
    pointer-events: auto;
    width: min(40px, calc(40 / 390 * 100vw)); height: min(40px, calc(40 / 390 * 100vw));
    border-radius: 50%; background: #ffffff; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #5e2a29;
  }
  body[data-page="explore-the-space"] #spacePrev { left: min(16px, calc(16 / 390 * 100vw)); right: auto; }
  body[data-page="explore-the-space"] #spaceNext { right: min(16px, calc(16 / 390 * 100vw)); left: auto; }
  body[data-page="explore-the-space"] .space-arrow svg { width: 16px; height: 16px; }

  /* ---- PEACE QUOTE (4149:5196): gold band ---- */
  body[data-page="explore-the-space"] .peace-quote {
    height: min(381px, calc(381 / 390 * 100vw)) !important;
  }
  /* Figma mobile bg is the raw gold-leaf texture (no radial overlay — the
     desktop ::before adds a gradient that washes it out). */
  body[data-page="explore-the-space"] .peace-quote::before {
    background-image: url('assets/explore-quote-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  body[data-page="explore-the-space"] .peace-quote__inner {
    width: min(330px, calc(330 / 390 * 100vw)) !important;
    height: auto !important;
    gap: min(20px, calc(20 / 390 * 100vw)) !important;
  }
  body[data-page="explore-the-space"] .peace-quote__lead {
    width: min(322px, calc(322 / 390 * 100vw)) !important;
    height: auto !important;
    font-size: 18px !important; line-height: 28px !important;
  }
  body[data-page="explore-the-space"] .peace-quote__lead + .peace-quote__center + .peace-quote__lead {
    width: min(322px, calc(322 / 390 * 100vw)) !important;
  }
  body[data-page="explore-the-space"] .peace-quote__center {
    width: min(220px, calc(220 / 390 * 100vw)) !important;
    height: auto !important;
    font-size: 14px !important; line-height: 24px !important;
    letter-spacing: 1.4px !important;
    white-space: normal !important;
  }

  /* ---- YOUR TIME AT THE ASHRAM (4149:5256): hide desktop stage, mobile cards ---- */
  body[data-page="explore-the-space"] .ashram-time {
    background: #ffffff;
    padding: min(40px, calc(40 / 390 * 100vw)) 0;   /* no side pad → card is full-bleed */
  }
  body[data-page="explore-the-space"] .ashram-time__inner { padding: 0; }
  body[data-page="explore-the-space"] .ashram-time h2 {
    font-size: 24px; line-height: 1.2; color: #5A381C; text-align: left;
    width: 100%; max-width: min(317px, calc(317 / 390 * 100vw)); margin: 0 auto min(25px, calc(25 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .ashram-time__stage { display: none !important; }
  body[data-page="explore-the-space"] .time-mstack { display: block !important; width: 100%; }
  body[data-page="explore-the-space"] .time-mcard { display: none; border-radius: 0; overflow: hidden; }
  body[data-page="explore-the-space"] .time-mcard.is-active { display: block; }
  body[data-page="explore-the-space"] .time-mcard__photo {
    width: 100%; height: min(364px, calc(364 / 390 * 100vw));
    background-size: cover; background-position: center;
    border-radius: 0;   /* Figma: square edges, not the desktop 14px */
  }
  body[data-page="explore-the-space"] .time-mcard__body {
    background: rgba(240,234,222,0.5);
    padding: min(22px, calc(22 / 390 * 100vw)) min(20px, calc(20 / 390 * 100vw));
    display: flex; align-items: center; justify-content: space-between;
    gap: min(20px, calc(20 / 390 * 100vw));
    border-radius: 0;
  }
  body[data-page="explore-the-space"] .time-mcard__copy {
    display: flex; flex-direction: column;
    gap: min(9px, calc(9 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .time-mcard__eyebrow {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 10px; line-height: 1.2; letter-spacing: 0.8px;
    text-transform: uppercase; color: #744B20; margin: 0;
  }
  body[data-page="explore-the-space"] .time-mcard__title {
    font-family: 'STIX Two Text', serif; font-weight: 400;
    font-size: 20px; line-height: 1.2; color: #282828; margin: 0;
  }
  body[data-page="explore-the-space"] .time-mcard__desc {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: #282828; margin: 0;
  }
  body[data-page="explore-the-space"] .time-mcard__cta {
    flex-shrink: 0;
    width: min(40px, calc(40 / 390 * 100vw)); height: min(40px, calc(40 / 390 * 100vw));
    border-radius: 50%; background: #ffffff !important; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #5e2a29 !important;
  }
  body[data-page="explore-the-space"] .time-mcard__cta svg { width: 16px; height: 16px; }

  /* ---- READY TO VISIT? (4149:5247): CREAM band (desktop is tan) ---- */
  body[data-page="explore-the-space"] .visit-cta {
    min-height: 0;
    background: #f0eade;
    padding: min(35px, calc(35 / 390 * 100vw)) min(35px, calc(35 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .visit-cta__inner { max-width: none; gap: 0; }
  body[data-page="explore-the-space"] .visit-cta h3 {
    font-size: 20px; line-height: 1.2; color: #5A381C;
    margin: 0 0 min(12px, calc(12 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .visit-cta p {
    font-size: 12px; line-height: 24px; color: #282828;
    max-width: min(304px, calc(304 / 390 * 100vw));
    margin: 0 0 min(20px, calc(20 / 390 * 100vw));
  }
  body[data-page="explore-the-space"] .visit-cta .btn {
    width: min(186px, calc(186 / 390 * 100vw));
    height: min(44px, calc(44 / 390 * 100vw));
    border-radius: min(40px, calc(40 / 390 * 100vw));
    font-size: 14px;
  }
  body[data-page="explore-the-space"] .visit-cta .btn .btn-icon { display: none; }
}