/* ============================================================
   YET TO LIVE — EDITORIAL ELEVATION LAYER
   Documentary photography + magazine rhythm on top of the
   existing token system. Mobile-first. Light + dark aware.
   Nothing here overrides tokens; it only composes them.
   ============================================================ */

/* ------------------------------------------------------------
   FILM GRAIN — subtle texture for depth (kills the "flat" feel)
   Apply to any positioned container with .grain
   ------------------------------------------------------------ */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.06;
  z-index: 2;
}
[data-theme="dark"] .grain::after { mix-blend-mode: overlay; opacity: 0.10; }

/* Photo treatment — warm in light, gently dimmed in dark so cream text reads */
.ph { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .ph { filter: brightness(0.82) contrast(1.02); }

/* ------------------------------------------------------------
   EDITORIAL HERO — photograph + headline, side by side
   ------------------------------------------------------------ */
.hero-ed {
  padding: var(--s-8) 0 var(--s-12);
}
@media (min-width: 900px) { .hero-ed { padding: var(--s-12) 0 var(--s-16); } }
.hero-ed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-ed-grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-12); }
}
.hero-ed .eyebrow {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-5);
}
.hero-ed h1 {
  font-family: var(--font-head);
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-6);
}
.hero-ed .sub {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30em;
  margin: 0 0 var(--s-8);
}
.hero-ed .ctas { display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 480px) { .hero-ed .ctas { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.hero-ed .trust { margin-top: var(--s-6); font-size: var(--fs-small); color: var(--ink-soft); }

.hero-ed-figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--rule-soft);
}
@media (min-width: 900px) { .hero-ed-figure { aspect-ratio: 5 / 6; } }
/* a whisper of warmth over the photo to tie it to the palette */
.hero-ed-figure::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(46,36,24,0.28) 100%);
}

/* ------------------------------------------------------------
   FULL-BLEED PHOTO BAND — image with text laid over a scrim
   ------------------------------------------------------------ */
.photoband {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: var(--s-16) 0;
}
@media (min-width: 720px) { .photoband { min-height: 78vh; } }
.photoband > .ph {
  position: absolute; inset: 0; z-index: 0;
}
.photoband .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20,14,8,0.82) 0%, rgba(20,14,8,0.55) 42%, rgba(20,14,8,0.12) 100%);
}
.photoband.right .scrim {
  background: linear-gradient(270deg, rgba(20,14,8,0.82) 0%, rgba(20,14,8,0.55) 42%, rgba(20,14,8,0.12) 100%);
}
.photoband .band-inner {
  position: relative; z-index: 3;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-12) var(--s-5);
  color: #f4ecdc;
}
@media (min-width: 720px) { .photoband .band-inner { padding: var(--s-16) var(--s-8); } }
.photoband.right .band-inner { text-align: right; }
.band-eyebrow {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e89472;
  margin-bottom: var(--s-4);
}
.band-quote {
  font-family: var(--font-head);
  font-size: clamp(28px, 5.5vw, 52px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #f7f1e4;
  margin: 0;
  max-width: 16em;
  text-shadow: 0 1px 30px rgba(0,0,0,0.35);
}
.photoband.right .band-quote { margin-left: auto; }
.band-sub {
  margin: var(--s-5) 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: rgba(247,241,228,0.86);
  max-width: 30em;
}
.photoband.right .band-sub { margin-left: auto; }

/* ------------------------------------------------------------
   SPLIT — photograph beside prose, alternating
   ------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-12); }
  .split.reverse .split-media { order: 2; }
}
.split-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--rule-soft);
}
.split-copy .section-eyebrow { margin-bottom: var(--s-4); }
.split-copy h2 {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0 0 var(--s-5);
}
.split-copy p { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.6; margin: 0 0 var(--s-5); }

/* ------------------------------------------------------------
   PULL QUOTE — a printed-page moment between sections
   ------------------------------------------------------------ */
.pullquote {
  max-width: 880px;
  margin: var(--s-16) auto;
  padding: var(--s-10) var(--s-5);
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pullquote p {
  font-family: var(--font-head);
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.pullquote .by { display: block; margin-top: var(--s-5); font-family: var(--font-body); font-style: normal; font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }

/* ------------------------------------------------------------
   SCROLL REVEAL — tasteful, respects reduced motion
   ------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--t-base), transform 0.7s var(--t-base); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* small editorial caption under figures */
.fig-cap { margin: var(--s-3) 0 0; font-size: var(--fs-tiny); letter-spacing: 0.04em; color: var(--ink-mute); }