/* =========================================================
   OUR SPACE — shared styles for our-space.html, the seven
   space pages (the-land, the-maloca, yoga-shala, the-spa,
   food, the-pools, the-cabins) and the homepage "Our Space"
   section. Built on the same patterns as projects.html.
========================================================= */

/* HERO — full viewport photo, title at the bottom */
.phero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #1F2A22; }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,34,.35), rgba(31,42,34,.08) 40%, rgba(31,42,34,.74)); }
.phero__in { position: relative; width: 100%; max-width: var(--col-wide); margin: 0 auto; padding: clamp(90px,14vh,140px) var(--gutter) clamp(30px,6vh,64px); color: var(--cream); }
.phero .eyebrow { color: rgba(246,243,236,.78); }
.phero a.eyebrow { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(246,243,236,.35); padding-bottom: 3px; transition: color .3s ease, border-color .3s ease; }
.phero a.eyebrow:hover { color: #fff; border-color: #fff; }
.phero a.eyebrow svg { width: 12px; height: 12px; transform: rotate(180deg); }
.phero h1 { color: #fff; font-size: clamp(46px, 8vw, 100px); line-height: .95; margin: 14px 0 14px; }
.phero h1 em { color: var(--tan-soft); }
.phero__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; color: #EDF1EC; max-width: 640px; margin: 0; }
@media (max-width: 900px) { .phero__in { padding-bottom: 96px; } .mobile-cta { background: var(--jungle); } }

/* Intro — the lead line first, then the detail */
.pintro__lead { max-width: 900px; margin: 0; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 2.3vw, 31px); line-height: 1.38; color: var(--ink); }
.pintro__lead + .psplit, .pintro__lead + .pwide { margin-top: clamp(26px,4vh,40px); }

.psection-head { max-width: var(--col-reading); }
.pbody p { margin: 0; }
.pbody p + p { margin-top: 16px; }
.pbody .body-reading { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; color: var(--ink-soft); }

/* Text + photo, side by side (photos never stick) */
.psplit { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px,5vw,80px); align-items: start; }
.psplit--flip { grid-template-columns: 5fr 7fr; }
.psplit--flip .psplit__photo { order: -1; }
.psplit__photo { margin: 0; }
.psplit__photo img { width: 100%; height: auto; border-radius: var(--r-lg); display: block; }
.psplit__photo--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 900px) {
  .psplit, .psplit--flip { grid-template-columns: 1fr; }
  .psplit__photo { max-width: 560px; }
  .psplit--flip .psplit__photo { order: 0; }
}

/* A single wide photo */
.pwide { margin: 0; }
.pwide img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }

/* Photo rows — every photo the same 3:4 shape */
.prow { display: grid; gap: clamp(10px,1.4vw,18px); margin-top: clamp(30px,5vh,52px); grid-template-columns: repeat(var(--n, 3), 1fr); }
.prow figure { margin: 0; }
.prow img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--r-md); }
@media (max-width: 700px) { .prow { grid-template-columns: 1fr 1fr; } .prow figure:last-child:nth-child(odd) { grid-column: 1 / -1; } .prow figure:last-child:nth-child(odd) img { aspect-ratio: 4 / 3; } }

/* A quiet line, centred */
.pquote { margin: clamp(34px,6vh,60px) 0 0; max-width: 820px; text-align: left; }
.pquote p { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.22; color: var(--jungle-deep); margin: 0; }
.pquote p + p { margin-top: 10px; }

/* Full-bleed photo band with a line over it */
.pband { position: relative; min-height: clamp(420px, 78vh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.pband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,34,0) 40%, rgba(31,42,34,.72)); }
.pband__in { position: relative; z-index: 1; width: 100%; max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--gutter) clamp(30px,6vh,60px); }
.pband__in p { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 4vw, 52px); line-height: 1.12; color: #fff; max-width: 820px; margin: 0; }
.pband__in p + p { margin-top: 8px; }

/* Bottom gallery — reuses the homepage .gallery carousel */
.pgallery .gallery { margin-top: clamp(26px,4vh,40px); }

/* Space cards — the landing page grid and "keep exploring" */
.scards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.4vw,20px); }
.scards a { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; color: #fff;
  /* same frame as the retreat duration cards (.opt in finder.css): soft drop shadow, light edge */
  box-shadow: 0 24px 60px -28px rgba(31,42,34,.16);
  transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out); }
.scards a::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(31,42,34,.06);
  transition: border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.scards a:hover::before { border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(31,42,34,.08); }
.scards img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scards a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,42,34,0) 38%, rgba(31,42,34,.8)); }
.scards a:hover { transform: translateY(-2px); box-shadow: 0 34px 74px -30px rgba(31,42,34,.24); }
.scards .go { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(246,243,236,.92); color: var(--ink); transition: background .3s ease, color .3s ease; }
.scards .go svg { width: 14px; height: 14px; }
.scards a:hover .go { background: var(--jungle); color: #fff; }
.scards .txt { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; }
.scards .n { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(246,243,236,.78); }
.scards .t { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; margin-top: 4px; }
.scards .d { display: block; margin-top: 6px; font-family: var(--font-display); font-style: italic; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.3; color: rgba(246,243,236,.88); }
/* The land opens the grid, wide */
.scards--lead li:first-child { grid-column: 1 / -1; }
.scards--lead li:first-child a { aspect-ratio: 21 / 9; }
.scards--lead li:first-child .t { font-size: clamp(30px, 3.4vw, 46px); }
/* Smaller version, six across, for "keep exploring" */
.scards--small { grid-template-columns: repeat(6, 1fr); }
.scards--small .t { font-size: clamp(18px, 1.5vw, 22px); }
.scards--small .txt { left: 14px; right: 14px; bottom: 12px; }
.scards--small .go { width: 30px; height: 30px; top: 10px; right: 10px; }
@media (max-width: 1100px) { .scards--small { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .scards { grid-template-columns: 1fr 1fr; }
  .scards--lead li:first-child a { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .scards--small { grid-template-columns: 1fr 1fr; }
  .scards--lead { grid-template-columns: 1fr; }
  .scards--lead a, .scards--lead li:first-child a { aspect-ratio: 4 / 3; }
}
.slabel { font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 30px); color: var(--ink); margin: 0 0 14px; }
.slabel em { color: var(--jungle-deep); }

/* Closing links */
.pclose__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(30px,5vh,44px); }
.pclose__links a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--r-pill); font-size: 14px; letter-spacing: .02em; }
.pclose__links .primary { background: var(--ink); color: var(--cream); }
.pclose__links .ghost { border: 1px solid rgba(31,42,34,.25); color: var(--ink); }
.pclose__links svg { width: 13px; height: 13px; }

/* =========================================================
   HOMEPAGE — "Our Space" section
========================================================= */
.ospace__lead { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(28px,5vw,80px); align-items: end; }
.ospace__lead h2 { margin: 0; }
.ospace__lead .pbody { max-width: 560px; }
.ospace__lead .btn { margin-top: 28px; }
.ospace__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px,1.2vw,16px); margin-top: clamp(40px,6vh,64px); }
.ospace__row a { display: block; color: var(--ink); }
.ospace__row .ph { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(31,42,34,.16);
  transition: box-shadow 600ms var(--ease-out); }
.ospace__row .ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: border-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.ospace__row a:hover .ph { box-shadow: 0 34px 74px -30px rgba(31,42,34,.24); }
.ospace__row a:hover .ph::after { border-color: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
.ospace__row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ospace__row .cap { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); transition: color .3s ease; }
.ospace__row a:hover .cap { color: var(--jungle-deep); }
@media (max-width: 900px) {
  .ospace__lead { grid-template-columns: 1fr; align-items: start; }
  .ospace__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; }
  .ospace__row::-webkit-scrollbar { display: none; }
  .ospace__row a { flex: 0 0 62%; scroll-snap-align: start; }
}

/* =========================================================
   TIMELINE — how a space was built, oldest first (pools page)
========================================================= */
.ptimeline .tl-name { margin: clamp(34px,5vh,52px) 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); }
.ptimeline .gallery { margin-top: 16px; }
.tl-date { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--jungle-deep); }
.tl-date::before { content: ""; flex: 0 0 9px; height: 9px; border-radius: 50%; background: var(--jungle); }
.tl-date::after { content: ""; flex: 1; height: 1px; background: rgba(31,42,34,.18); margin-right: -18px; }
.ptimeline .gallery__item:last-child .tl-date::after { display: none; }
.tl-cap { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; color: var(--ink); max-width: 30ch; }

/* Titles, text and quotes share one left edge (Maisie, 2026-10-05) */
.pcol { max-width: var(--col-reading); margin-inline: auto; }
.pcol .pintro__lead, .pcol .pquote { max-width: none; }
/* Our Space: less air between the intro and the cards */
#intro { padding-bottom: clamp(36px,6vh,64px); }
#intro + #spaces { padding-top: clamp(40px,6vh,64px); }
.scards img[src*="card-maloca"], .ospace__row img[src*="card-maloca"] { object-position: center 85%; }