/* =========================================================
   OUR STORY (our-story.html)
   Maisie's text, told with photos of the land and a few drawings.
   Matías, 2026-10-08: "como la página de proyectos… con muchas imágenes contando la historia…
   mostrar cosas en vez de simplemente decirlas". Built on the patterns of space.css and projects.html.
   No zoom on hover anywhere on this page.
   ========================================================= */

/* Hero: the whole centre from above */
.phero--story .phero__img { object-position: 50% 55%; }
@media (max-width: 700px) { .phero--story .phero__img { object-position: 54% 50%; } }

/* Reading width for text that runs across the page */
.sread { max-width: var(--col-reading); }

/* A big line inside a text column ("Costa Rica kept calling.") */
.pbody .sline { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; color: var(--jungle-deep); margin-top: 26px; }

/* Text and photo centred on each other (no empty space under a photo) */
.psplit--center { align-items: center; }
.psplit__photo--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.psplit__photo--wide img { aspect-ratio: 4 / 3; object-fit: cover; }

/* 01 · Two lives, side by side */
.slives { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(30px, 5vh, 52px); align-items: start; }
.slives__photo { margin: 0; }
.slives__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; border-radius: var(--r-lg); display: block; }
.slives__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; color: var(--ink); margin: 22px 0 14px; }
.smeet { margin-top: clamp(56px, 9vh, 96px); }
@media (max-width: 900px) {
  .slives { grid-template-columns: 1fr; gap: 44px; }
}

/* 01 · The journey, at a glance */
.sjourney { list-style: none; margin: clamp(56px, 9vh, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: clamp(14px, 2vw, 28px); }
.sjourney li { position: relative; padding-top: 44px; }
.sjourney li::before { content: ""; position: absolute; top: 25px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--jungle); z-index: 1; }
.sjourney li::after { content: ""; position: absolute; top: 30px; left: 11px; right: calc(-1 * clamp(14px, 2vw, 28px)); height: 1px; background: rgba(31,42,34,.22); }
.sjourney li:last-child::after { display: none; }
.sjourney .yr { position: absolute; top: 0; left: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--jungle-deep); }
.sjourney .pl { display: block; margin-top: 12px; font-family: var(--font-display); font-size: clamp(23px, 2vw, 28px); line-height: 1.1; color: var(--ink); }
.sjourney .pl em { color: var(--jungle-deep); }
.sjourney .nt { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 24ch; }
.sjourney li.is-end::before { display: none; }
.sjourney__icon { position: absolute; top: 12px; left: -12px; width: 36px; height: 36px; object-fit: contain; display: block; }   /* el logo de la barra de arriba, mismo tamaño (Matías, 8-oct) */
@media (max-width: 900px) {
  .sjourney { grid-template-columns: 1fr; }
  .sjourney li { padding: 0 0 26px 34px; }
  .sjourney li:last-child { padding-bottom: 0; }
  .sjourney li::before { top: 7px; }
  .sjourney li::after { top: 18px; left: 5px; right: auto; bottom: 0; width: 1px; height: auto; }
  .sjourney .yr { position: static; display: block; margin-bottom: 4px; }
  .sjourney .pl { margin-top: 0; }
  .sjourney .nt { max-width: 34ch; }
  .sjourney__icon { top: -6px; left: -12px; }
}

/* Photo rows: a short label under each photo */
.prow figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }

/* 03 · How a dragonfly changes (four drawings) */
.slife { list-style: none; margin: clamp(30px, 5vh, 52px) 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.slife li { margin: 0; }
.slife .scene { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: #FBFAF6; border: 1px solid rgba(31,42,34,.08); }
.slife .n { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--jungle-deep); }
.slife .t { display: block; margin-top: 4px; font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; color: var(--ink); }
.slife .water { fill: #D9E6DF; }
.slife .wave { fill: none; stroke: var(--jungle-quiet); stroke-width: 1.2; }
.slife .reed { fill: none; stroke: #9DB79E; stroke-width: 1.6; stroke-linecap: round; }
.slife .pebble { fill: rgba(47,74,58,.13); }
.slife .bubble { fill: none; stroke: var(--jungle-quiet); stroke-width: 1; }
.slife .ic { color: var(--jungle-deep); }
.slife .egg { fill: #F3EFE4; stroke: var(--jungle-deep); stroke-width: 1.1; }
.slife .shell { color: var(--ink-quiet); stroke-dasharray: 2.2 2.4; }
.slife .flight { fill: none; stroke: var(--jungle-quiet); stroke-width: 1.1; stroke-dasharray: 1 4; stroke-linecap: round; }
@media (max-width: 700px) { .slife { grid-template-columns: 1fr 1fr; row-gap: 26px; } }

/* 04 · A few roads apart (a small map) */
.smap { margin: 0; }
.smap svg { display: block; width: 100%; height: auto; border-radius: var(--r-lg); background: #FBFAF6; border: 1px solid rgba(31,42,34,.08); }
.smap .road { fill: none; stroke: #E7E1D3; stroke-width: 15; stroke-linecap: round; }
.smap .road-edge { fill: none; stroke: #DCD5C4; stroke-width: 17; stroke-linecap: round; }
.smap .road--side { stroke-linecap: butt; }
.smap .walk { fill: none; stroke: var(--jungle); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.smap .home { fill: #fff; stroke: var(--jungle-deep); stroke-width: 1.4; stroke-linejoin: round; }
.smap .home--k { fill: var(--tan-soft); }
.smap .home--m { fill: var(--jungle-quiet); }
.smap .lbl { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; fill: var(--ink); }
.smap .lbl--q { fill: var(--ink-quiet); font-size: 11.5px; }
.smap figcaption { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--trk-caption); text-transform: uppercase; color: var(--ink-quiet); }

/* Quotes sit in the middle of the page here, as on the projects page */
.pquote { margin-inline: auto; text-align: center; }

/* 04 · Today: a lead line */
.pintro__lead.sread { max-width: 900px; }

/* 04 · How the upper pool was made (same dates and captions as the pools page) */
.stl-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); }
.sbuild { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 16px; }
.sbuild figure { margin: 0; }
.sbuild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-md); display: block; }
.sbuild figure:last-child .tl-date::after { display: none; }
@media (max-width: 700px) {
  .sbuild { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .sbuild figure:nth-child(2n) .tl-date::after { display: none; }
  .sbuild .tl-cap { font-size: 16px; }
}

/* 04 · The land in three numbers */
.sfacts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 8vh, 88px); padding: clamp(30px, 4.5vh, 46px) 0; border-top: 1px solid rgba(31,42,34,.14); border-bottom: 1px solid rgba(31,42,34,.14); text-align: center; }   /* Matías 8-oct: como la franja de cifras de /draw, números en verde */
.sfacts > div { position: relative; padding: 0 clamp(12px, 2vw, 28px); }
.sfacts > div + div::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: rgba(31,42,34,.16); }
.sfacts b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 4.4vw, 62px); line-height: 1; color: var(--jungle-deep); font-variant-numeric: lining-nums; }
.sfacts small { display: block; margin-top: 16px; font-size: 12.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 700px) {
  .sfacts { grid-template-columns: 1fr; gap: 18px; }
  .sfacts > div + div { padding-top: 22px; margin-top: 22px; border-top: 1px solid rgba(31,42,34,.12); }
  .sfacts > div + div::before { display: none; }
  .sfacts b { font-size: 48px; }

}

/* 05 · Giving back (from projects.html) */
.pintro__photo { margin: clamp(30px, 5vh, 52px) 0 0; }
.pintro__photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 40%; display: block; border-radius: var(--r-lg); }
.pintro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: clamp(36px, 6vh, 56px); align-items: start; }
@media (max-width: 900px) { .pintro__cols { grid-template-columns: 1fr; gap: 0; } .pintro__cols > div + div { margin-top: 16px; } }
.ptwenty { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid rgba(31,42,34,.14); }
.ptwenty b { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.4vw, 42px); line-height: 1; color: var(--jungle-deep); white-space: nowrap; font-variant-numeric: lining-nums; }
.ptwenty span { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--ink); font-weight: 500; }
.hl { font-weight: 500; color: var(--ink); background: linear-gradient(transparent 58%, rgba(200,169,131,.38) 58%); padding: 0 2px; }

/* Closing (from projects.html) */
.pclose__end { font-family: var(--font-display); font-size: clamp(30px, 4vw, 48px); line-height: 1.15; color: var(--jungle-deep); margin-top: 28px !important; }

/* El encuentro (Matías, 8-oct): entre "Where it started" (Kene y Maisie por separado) y "Kene and Maisie eventually
   met": dos círculos finos que se cruzan; la parte compartida en verde suave. Antes probó: línea con libélula, "Together",
   líneas que convergen (no le gustaron). */
.sdivider { display: flex; justify-content: center; margin-top: clamp(64px, 10vh, 112px); }
.sdivider svg { display: block; overflow: visible; }
.sdivider circle { fill: none; stroke: var(--jungle-deep); stroke-width: 1; opacity: .55; }
.sdivider circle.sdivider__shared { fill: var(--jungle); stroke: none; opacity: .28; }
.sdivider + .smeet { margin-top: clamp(48px, 7vh, 80px); align-items: start; }