/* ============================================================================
   214 Proximity — homepage compositions (page-level, not reusable components)
   Everything references tokens from design-system/tokens.css. Reusable pieces
   that prove themselves here should graduate into system.css + the manifest.
   ============================================================================ */

/* ---- Hero readability (bright photo behind bone text) -------------------- */
.hero__overlay {
  background: linear-gradient(0deg,
    rgba(17, 17, 15, 0.82) 0%,
    rgba(17, 17, 15, 0.55) 42%,
    rgba(17, 17, 15, 0.18) 74%,
    transparent 100%);
  padding-top: var(--space-96);
}
.hero__overlay .display-xl { text-shadow: 0 2px 28px rgba(17, 17, 15, 0.45); }
.hero__eyebrow { color: var(--214-bone); text-shadow: 0 1px 10px rgba(17, 17, 15, 0.6); }
@media (max-width: 700px) {
  .hero__media { min-height: 72vh; }
  .hero__overlay { padding-top: var(--space-32); }
}

/* ---- Acts / section rhythm ------------------------------------------------ */
.act { padding-block: var(--section-y); }
.act--tight { padding-block: var(--section-y-tight); }
.act--paper { background: var(--214-bone); }

/* ---- The turn ------------------------------------------------------------- */
.turn { border-top: 1px solid var(--color-line); }
.turn .display { max-width: 22ch; }

/* ---- Park chapters --------------------------------------------------------- */
.chapter { padding-block: var(--section-y-tight); }
.chapter__eyebrow { color: var(--color-accent); }

/* Park fact rail: one composed unit; 2x2 on mobile */
.park-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24) var(--space-32);
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-24);
}
@media (max-width: 700px) {
  .park-facts { grid-template-columns: repeat(2, 1fr); }
}

/* Full-bleed image moments: gentle settle-in scale (reduced-motion safe) */
html.js .bleed-image .img {
  transform: scale(var(--img-scale-max));
  transition: transform 1200ms var(--ease-out);
}
html.js .bleed-image.is-visible .img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .bleed-image .img { transform: none !important; }
}

/* ---- Lite video embed (poster + explicit play; iframe only on click) ------ */
.video-lite {
  position: relative; display: block; width: 100%; max-width: 56rem;
  aspect-ratio: 16 / 9; padding: 0; cursor: pointer;
  border: 1px solid var(--color-line); background: var(--214-ink);
}
.video-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.video-lite:hover img, .video-lite:focus-visible img { opacity: 0.92; }
.video-lite__play {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-12);
  color: var(--214-bone);
}
.video-lite__ring {
  width: 72px; height: 72px; border-radius: 999px; margin-inline: auto;
  border: 2px solid var(--214-bone); display: grid; place-content: center;
  background: rgba(17, 17, 15, 0.45);
  transition: transform var(--dur-micro) var(--ease-standard);
}
.video-lite:hover .video-lite__ring { transform: scale(1.06); }
.video-lite__ring::after {
  content: ""; display: block; margin-left: 4px;
  border-left: 18px solid var(--214-bone);
  border-block: 11px solid transparent;
}
.video-lite__label {
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact);
}
.video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Location diagrams ------------------------------------------------------ */
.map-diagram { width: 100%; height: auto; display: block; }
.map-diagram text { font-family: var(--font-body); fill: var(--color-text); }
.map-diagram .lbl { font-size: 24px; font-weight: 600; }
.map-diagram .lbl-time { font-size: 21px; font-weight: 500; fill: var(--214-olive); }
.map-diagram .lbl-street { font-size: 19px; font-weight: 500; fill: var(--214-stone); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 700px) {
  .map-diagram .lbl { font-size: 30px; }
  .map-diagram .lbl-time { font-size: 27px; }
  .map-diagram .lbl-street { font-size: 24px; }
}
.map-diagram .street { stroke: var(--214-concrete); stroke-width: 10; fill: none; stroke-linecap: round; }
.map-diagram .river { stroke: #9DB4A5; stroke-width: 26; fill: none; stroke-linecap: round; opacity: 0.55; }
.map-diagram .park-shape { fill: #8FA383; opacity: 0.9; }
.map-diagram .park-shape--future { fill: #8FA383; opacity: 0.55; stroke: #6B7D60; stroke-width: 2; stroke-dasharray: 8 6; }
.map-diagram .home-dot { fill: var(--color-accent); }
.map-diagram .poi-dot { fill: var(--214-ink); }
.map-diagram .route {
  fill: none; stroke: var(--214-ink); stroke-width: 3.5;
  stroke-dasharray: 10 8; stroke-linecap: round;
}
.map-diagram .route--drive { stroke: var(--color-accent); }
/* draw-on: total dash length animated via dashoffset over the pattern */
html.js .reveal.is-visible .route { animation: route-dash 1400ms var(--ease-out); }
@keyframes route-dash { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal.is-visible .route { animation: none; }
}
.on-dark .map-diagram text, .map-diagram--dark text { fill: var(--214-bone); }

/* ---- A day here ------------------------------------------------------------- */
.day-list { border-top: 1px solid var(--color-line); }
.day {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: var(--space-16) var(--space-32);
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-line);
}
.day__when {
  font-family: var(--font-display); font-size: var(--step-h3); line-height: 1.1;
}
.day__what { color: var(--color-text-muted); max-width: var(--measure-lg); align-self: center; }
@media (max-width: 560px) {
  .day { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- Mid-page CTA ------------------------------------------------------------ */
.midcta {
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-48);
}
.midcta .h1 { max-width: 16ch; }

/* ---- Downtown headline triplet ------------------------------------------------ */
.triplet { display: grid; gap: var(--space-4); }

/* ---- Small helpers ------------------------------------------------------------ */
.measure { max-width: var(--measure); }
.measure-lg { max-width: var(--measure-lg); }
.caption-rail { color: var(--214-stone); }