/* Visual depth layer: warm page, raised cards, a shared section header and
   the story carousel. Loaded after the component sheets and
   before mobile.css, so it restyles surfaces without touching layout code. */

:root {
  --bg: #FBFAF7;
  --card: #FFFFFF;
  --line: #E7E5E0;
  --fill: #F3F2EE;
  --fill-strong: #EAE8E3;
  --shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 30px -12px rgba(42, 22, 71, 0.12);
  --shadow-lift: 0 2px 4px rgba(17, 17, 17, 0.05), 0 18px 40px -14px rgba(42, 22, 71, 0.22);
  --section: 104px;
}

.nav { background: rgba(251, 250, 247, 0.94); }

/* Section header: hairline, numbered label, title, optional arrow link, with a
   faint dot field behind the right-hand side. */
.head { position: relative; margin-bottom: 40px; }
.head::after {
  content: '';
  position: absolute;
  right: 0;
  top: -28px;
  width: min(420px, 45%);
  height: calc(100% + 40px);
  background-image: radial-gradient(rgba(42, 22, 71, 0.16) 1px, transparent 1.2px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  pointer-events: none;
}
.head > * { position: relative; z-index: 1; }
.head__label { margin-bottom: 10px; font-size: 13px; color: var(--faint); }
.head__label::before { content: ''; display: block; width: 28px; height: 1px; margin-bottom: 12px; background: var(--ink); }
.head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 26em; }
.head__more { display: inline-grid; place-items: center; width: 32px; height: 22px; border: 1px solid currentColor; border-radius: 6px; color: var(--brand); text-decoration: none; font-size: 13px; line-height: 1; transition: background 0.15s, color 0.15s; }
@media (hover: hover) { .head__more:hover { background: var(--brand); color: var(--accent-ink); } }

/* Raised cards replace flat grey panels. */
.tile, .step, .audience, .capture, .flow, .delivery__timeline, .case-card, .asks li, .episode, .explorer, .case__meta {
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.step { border-top: 2px solid var(--brand); }
.tile, .audience, .capture { transition: transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .tile:hover, .audience:hover, .capture:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } }
.shot__img, .capture__video { box-shadow: var(--shadow); }
.footer { background: #F1EFEA; }

/* Story carousel. Native horizontal scroll with snap points, so it swipes on
   touch and works without JavaScript; buttons are added by carousel.js. */
.stories { position: relative; }
.stories__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(560px, 82%);
  gap: 16px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.stories__track::-webkit-scrollbar { display: none; }
@media (min-width: 901px) {
  .stories__track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; }
}
.story { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--ink); color: #FFFFFF; text-decoration: none; scroll-snap-align: start; box-shadow: var(--shadow); }
.story video, .story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17, 17, 17, 0) 40%, rgba(17, 17, 17, 0.78)); }
@media (hover: hover) { .story:hover video, .story:hover img { transform: scale(1.03); } }
.story__body { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: grid; gap: 8px; }
.story__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.story__meta span { padding: 3px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 12px/1.2 var(--mono); text-transform: uppercase; }
.story__title { font-size: 20px; line-height: 1.25; }
.story__fig { font: 400 13px/1.3 var(--mono); color: rgba(255, 255, 255, 0.85); }
.story:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.stories__nav { display: flex; gap: 8px; margin-top: 4px; }
.stories__nav[hidden] { display: none; }
.stories__nav button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--brand); font-size: 18px; cursor: pointer; box-shadow: var(--shadow); }
.stories__nav button:disabled { opacity: 0.4; cursor: default; }
.stories__count { align-self: center; margin-left: 8px; font: 400 13px var(--mono); color: var(--faint); }


@media (max-width: 900px) {
  :root { --section: 64px; }
  .head::after { width: 50%; }
  .stories__track { grid-auto-columns: 86%; }
  .story__title { font-size: 17px; }
  .story { aspect-ratio: 4 / 5; }
  .story__body { left: 16px; right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .story:hover video, .story:hover img, .tile:hover, .audience:hover, .capture:hover { transform: none; }
}