/* p-explore.css - Explore page (R4). Built on base.css + map.css. Five normal-flow full-bleed chapters, text over the picture in the bottom 35 %. */
main { display: block; }

/* ---------- hero over the map plate ---------- */
.ex-intro { position: relative; z-index: 1; height: 190svh; background: var(--ink); color: var(--chalk); }
.ex-intro__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 3.4svh; align-content: end; align-items: end;
  padding: calc(var(--header-h) + 6svh) var(--margin) clamp(36px, 8svh, 92px); color: var(--chalk); }
.ex-intro__stage > .ex-intro__bg { position: absolute; z-index: 0; inset: 0; transform-origin: 50% 60%; will-change: transform; background: url(../media/img/map-plate-a-1280.webp) 70% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.35), #000 55%); mask-image: linear-gradient(to right, rgba(0,0,0,.35), #000 55%); opacity: .62; filter: saturate(.7) contrast(1.05); }
.ex-intro__stage::after { content: ''; position: absolute; inset: auto 0 0 0; height: 62%; background: linear-gradient(to top, rgba(23, 17, 13, .86), rgba(23, 17, 13, 0)); }
.ex-intro__stage > * { position: relative; z-index: 1; }
.ex-intro__stage > .ex-intro__bg { position: absolute; }
.ex-intro .ex-intro__title { grid-column: 1 / span 11; max-width: none; margin: 0; font-size: clamp(64px, 8.6vw, 142px); }
.ex-intro .ex-intro__lede { grid-column: 1 / span 5; max-width: 34em; margin: 0; font-size: 17px; line-height: 26px; color: var(--chalk-2); }
.ex-intro .ex-intro__scroll { grid-column: 9 / span 3; max-width: none; margin: 0; font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--chalk); display: flex; align-items: center; gap: 14px; }
.ex-intro__scroll::before { content: ''; width: 56px; height: 1px; background: currentColor; }
.rs-map { margin-top: 0; }
/* the map's labels and stops appear only once it has settled (kept from site.css) */
.rs-page-explore .rs-map:not(.is-settled) .rs-map__label, .rs-page-explore .rs-map:not(.is-settled) .rs-map__hint, .rs-page-explore .rs-map:not(.is-settled) .rs-map__stop { opacity: 0 !important; transition: opacity .4s; }
@media (max-width: 480px) { .rs-map__hint { display: none; } }

/* ---------- chapters (R4): five normal-flow full-bleed chapters, 100svh each; the join is a straight edge that scrolls ---------- */
.ex-chapters { position: relative; z-index: 3; background: var(--ink); color: var(--chalk); }
/* one sticky ink bar under the header for the whole block. It sticks inside a track that stops half a screen before the block
   ends, so the bar scrolls away with the last chapter instead of riding over the closing section. */
.ex-bar-track { position: absolute; z-index: 30; top: 0; left: 0; right: 0; bottom: 50svh; pointer-events: none; }
.ex-bar { position: sticky; top: var(--header-h); height: 48px; background: var(--ink); color: var(--chalk); pointer-events: auto;
  transition: transform .45s var(--ease-out); }
html:has(.rs-header.is-hidden) .ex-bar { transform: translateY(calc(-1 * var(--header-h))); }
.ex-bar__list { list-style: none; margin: 0; padding: 0 var(--margin); height: 48px; display: flex; align-items: center; gap: 32px;
  overflow-x: auto; scrollbar-width: none; }
.ex-bar__list::-webkit-scrollbar { display: none; }
.ex-bar__list li { flex: none; }
.ex-bar a { display: inline-flex; align-items: center; height: 44px; font: 400 15px/20px var(--font-sans); color: var(--chalk); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 14px) / 0 2px no-repeat; transition: background-size .3s var(--ease-out); }
.ex-bar a:hover { background-size: 100% 1px; }
.ex-bar a[aria-current] { font-weight: 500; background-size: 100% 2px; }
.ex-bar a:focus-visible { outline: 2px solid var(--pool-hi); outline-offset: 2px; }

.ex-ch { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #120d09; }
.ex-ch__media { position: absolute; inset: 0; overflow: hidden; }
/* 4 % larger than the frame on both axes so the 3 % pan never shows an edge at scale 1.00 */
.ex-ch__media img { position: absolute; top: -2%; left: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; transform-origin: 50% 55%; will-change: transform;
  transform: scale(1.08); }
/* local gradient, bottom 35 % only: the upper 65 % of the picture is untouched */
.ex-ch__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 35%;
  background: linear-gradient(to top, rgba(23, 17, 13, .78) 0%, rgba(23, 17, 13, .7) 34%, rgba(23, 17, 13, .38) 70%, rgba(23, 17, 13, 0) 100%); }
.ex-ch__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding-bottom: clamp(32px, 6.5svh, 72px); }
.ex-ch .ex-ch__title { grid-column: 1 / span 7; margin: 0 0 14px; max-width: none; color: var(--chalk); text-shadow: 0 1px 24px rgba(23, 17, 13, .45); outline: none; }
.ex-ch__txt { grid-column: 1 / span 5; }
.ex-ch .ex-ch__desc { margin: 0 0 14px; max-width: 30em; font-size: 17px; line-height: 25px; color: var(--chalk); text-shadow: 0 1px 12px rgba(23, 17, 13, .5); }
.ex-ch .lnk { color: var(--chalk); margin: 0; }

/* ---------- ending (FIXLIST S7): compact prompt + one link + demo note ---------- */
.ex-cta { position: relative; z-index: 3; padding-top: 12vh; padding-bottom: 12vh; }
.ex-cta__in { display: grid; justify-items: start; gap: 16px; }
.ex-cta__h { margin: 0; max-width: none; color: var(--ink); }
.ex-cta__lnk { color: var(--ink); }
.ex-cta__note { display: block; margin-top: 8px; }

/* ---------- reduced motion: the same five chapters, pictures still ---------- */
.rs-reduced .ex-intro { height: auto; min-height: 70svh; }
.rs-reduced .ex-intro__stage { position: relative; min-height: 70svh; }
.is-reduced .ex-ch__media img { top: 0; left: 0; width: 100%; height: 100%; transform: none !important; }
.is-reduced .ex-bar, .is-reduced .ex-bar a { transition: none; }

/* ---------- phones: must not break ---------- */
@media (max-width: 900px) {
  .ex-intro .ex-intro__title, .ex-intro .ex-intro__lede, .ex-intro .ex-intro__scroll { grid-column: 1 / -1 !important; }
  .ex-intro .ex-intro__title { font-size: clamp(44px, 13vw, 72px); }
  .ex-ch .ex-ch__title, .ex-ch__txt { grid-column: 1 / -1; }
  .ex-ch__media::after { height: 45%; }
  .ex-bar__list { gap: 24px; }
}

/* r5: the page title appears whole, once: 12 px rise + 180 ms opacity (backwards fill, so the hero's scroll transform is not overridden after) */
@keyframes ex-title-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
.ex-intro .ex-intro__title { animation: ex-title-in 180ms ease-out backwards; }
@media (prefers-reduced-motion: reduce) { .ex-intro .ex-intro__title { animation: none; } }