/* ── CLIENT STORY PAGES, MEDIA ──
   Loaded by the story pages (jelle, harrison, fon, yme, james, bruno,
   hidden-champions, fred) after style.css. style.css owns the article
   template and the .ytcard and .reel cards; this file only adds the
   grids they sit in and the loops. Every class starts .story.

   Media for each client lives in one folder, work/clients/<id>/.
   Replace a file and keep its name to swap a picture. */

/* a video loop in the hero slot, same frame as .article-hero img */
.article-hero video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* the lead episode at the top of the page */
.story-lead { margin-bottom: 30px; }

.story-block { margin: 40px 0 8px; }
.story-block > h2 {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 18px;
}

/* earlier episodes, smaller cards in a row */
.story-eps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 18px;
}
.story-eps.is-one { grid-template-columns: minmax(0, 1fr); }
.story-eps.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-eps .ytcard { margin: 0; }
.story-eps .ytcard-frame { border-radius: 14px; box-shadow: 0 18px 44px rgba(49, 27, 66, 0.16); }
.story-eps:not(.is-one) .ytcard-play { width: 52px; height: 52px; }
.story-eps:not(.is-one) .ytcard-play svg { width: 18px; height: 18px; }
.story-eps:not(.is-one) .ytcard-badge { bottom: 12px; left: 12px; padding: 5px 10px; font-size: 8.5px; }
.story-eps:not(.is-one) .ytcard-meta { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 12px; }
.story-eps:not(.is-one) .ytcard-title { font-size: 15px; }
.story-eps:not(.is-one) .ytcard-sub { font-size: 10px; }

/* stills and loops, two to a row, every frame 16:9 unless told otherwise */
.story-stills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.story-still {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(49, 27, 66, 0.06);
}
.story-still.is-wide { grid-column: 1 / -1; }
.story-still.is-banner { grid-column: 1 / -1; aspect-ratio: 1600 / 597; }
.story-still.is-tall { aspect-ratio: 4 / 5; }
.story-still img,
.story-still video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .story-eps,
  .story-eps.is-two { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .story-eps:not(.is-one) .ytcard-title { font-size: 17px; }
  .story-stills { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════
   CLIENT STORY, SHARED STRUCTURE (20 October 2026, first on jelle.html)
   One page shell and eight blocks, in this order. A page keeps only the
   blocks its material supports and the rest close up on their own.
   1 .story-open     opening scene, the client's Cinema loop, 16:9
     .story-head     name, one line standfirst, three chips
   2 .story-lead     the lead film (.ytcard, style.css)
   3 .story-work     plain paragraphs and the What we do list
   4 .story-eps      earlier episodes (above)
   5 .reels-block    short form (.reel cards in style.css, script in story.js)
   6 .story-gallery  stills, written by _build/stills-build.py
   7 .story-credits  credits and sourced numbers only
   8 .story-onward   the following client in Cinema page order, then .story-foot
   Media blocks run the full 1120 content width, reading blocks sit in
   the 820 .story-read column inside it. */

.story-page {
  --story-w: 1120px;
  max-width: calc(var(--story-w) + 56px);
  margin: 0 auto;
  padding: 104px 28px 40px;
}
.story-read { max-width: 820px; margin: 0 auto; }

/* 1 opening scene: the film autoplays muted over the poster (story.js).
   Safari will not start a film it treats as hidden, so the video is never
   at opacity 0 and the box never fades as a whole: the load fade is a
   cover in the page colour lifting off the top (24 October 2026). */
.story-open {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(49, 27, 66, 0.08);
  box-shadow: 0 30px 80px rgba(49, 27, 66, 0.16);
}
.story-open img,
.story-open video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.story-open.load-fade { animation: none; opacity: 1; }
.story-open::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #e0e7e7;
  pointer-events: none;
  animation: storyOpenLift 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes storyOpenLift { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .story-open::after { display: none; } }

.story-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 18px 48px;
  align-items: end;
  padding: 34px 0 40px;
  margin-bottom: 44px;
  border-bottom: 1px solid rgba(49, 27, 66, 0.12);
}
.story-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(42px, 6.4vw, 92px);
  letter-spacing: -0.045em;
  line-height: 0.95;
  color: var(--ink);
  margin: 0;
}
.story-standfirst {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.78;
  margin: 0 0 16px;
}
.story-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.story-chips li {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(49, 27, 66, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 3 the work */
.story-work { margin-top: 8px; }

/* 5 short form, the shared reels row (markup as on james.html) */
.story-page .reels-block { margin: 40px 0 8px; }

/* 6 stills: rows of two that keep each still's own shape. Each figure
   grows by its aspect ratio, so both in a row share one height */
.story-gallery { margin: 64px 0 8px; }
.story-row { display: flex; gap: 12px; margin-bottom: 12px; }
.story-shot { flex: var(--ar, 1.7778) 1 0; min-width: 0; margin: 0; }
.story-row.is-solo.is-upright { justify-content: center; }
.story-row.is-solo.is-upright .story-shot { flex: 0 1 calc(min(100%, 78vh * var(--ar))); }
.story-shot-media {
  display: block;
  position: relative;
  aspect-ratio: var(--ar, 1.7778);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(49, 27, 66, 0.06);
  cursor: zoom-in;
}
.story-shot-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-shot-media:hover img { transform: scale(1.025); }
.story-shot-media:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.story-shot figcaption {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.5;
  padding: 9px 2px 0;
}

/* 7 credits and result, sourced numbers only */
.story-credits { margin: 56px 0 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

/* 8 onward: the following client, a full width strip, then the foot links */
.story-onward {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 72px;
  aspect-ratio: 32 / 9;
  min-height: 200px;
  padding: 30px 34px;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: #e0e7e7;
  box-shadow: 0 30px 80px rgba(49, 27, 66, 0.18);
  isolation: isolate;
}
.story-onward-media { position: absolute; inset: 0; z-index: -1; }
.story-onward-media img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 40%;
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-onward-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(33, 16, 46, 0.72) 0%, rgba(33, 16, 46, 0.18) 55%, rgba(33, 16, 46, 0.06) 100%);
}
.story-onward-text { display: flex; flex-direction: column; gap: 8px; }
.story-onward-kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8;
}
.story-onward-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 60px);
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.story-onward-go {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  background: var(--mint);
  box-shadow: 0 14px 40px rgba(24, 12, 32, 0.3);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.story-onward-go svg { width: 22px; height: 22px; }
.story-onward:hover .story-onward-media img { transform: scale(1.03); }
.story-onward:hover .story-onward-go { transform: translateX(6px); }
.story-onward:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.story-foot { margin-top: 28px; }

/* the stills lightbox, built by story.js */
.story-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-rows: 1fr auto;
  background: rgba(224, 231, 231, 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 320ms;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.story-lb.is-open { opacity: 1; visibility: visible; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.story-lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 96px 12px;
  min-height: 0;
  overflow: hidden;
}
.story-lb-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 100px rgba(49, 27, 66, 0.28);
  transform: scale(0.97);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
  will-change: transform;
}
.story-lb.is-open .story-lb-img { transform: none; }
.story-lb-img.is-out { opacity: 0; }
.story-lb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 20px 26px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.story-lb-cap { opacity: 0.6; }
.story-lb-cap:empty { display: none; }
.story-lb-count { font-variant-numeric: tabular-nums; }
.story-lb-btn {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(49, 27, 66, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms;
  z-index: 2;
}
.story-lb-btn svg { width: 20px; height: 20px; }
.story-lb-btn:hover { background: rgba(255, 255, 255, 0.85); transform: scale(1.06); }
.story-lb-btn:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.story-lb-prev { left: 24px; top: 50%; margin-top: -26px; }
.story-lb-next { right: 24px; top: 50%; margin-top: -26px; }
.story-lb-close { right: 24px; top: 18px; width: 44px; height: 44px; }
.story-lb.is-single .story-lb-prev,
.story-lb.is-single .story-lb-next,
.story-lb.is-single .story-lb-count { display: none; }
html.story-lb-lock, html.story-lb-lock body { overflow: hidden; }

@media (max-width: 900px) {
  .story-head { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 0 30px; margin-bottom: 34px; }
}
@media (max-width: 760px) {
  .story-page { padding: 92px 18px 32px; }
  .story-open { border-radius: 16px; }
  .story-row { flex-direction: column; gap: 10px; margin-bottom: 10px; }
  .story-shot { flex: none; }
  .story-row.is-solo.is-upright .story-shot { flex: none; }
  .story-gallery { margin-top: 48px; }
  .story-onward { aspect-ratio: auto; min-height: 220px; padding: 22px; margin-top: 56px; border-radius: 16px; }
  .story-onward-go { width: 46px; height: 46px; }
  .story-lb-stage { padding: 64px 12px 8px; }
  .story-lb-prev, .story-lb-next { top: auto; bottom: 14px; margin-top: 0; width: 46px; height: 46px; }
  .story-lb { grid-template-rows: 1fr auto; }
  .story-lb-bar { padding: 14px 72px 24px; min-height: 74px; }
  .story-lb-close { right: 14px; top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-shot-media img, .story-onward-media img, .story-onward-go,
  .story-lb, .story-lb.is-open, .story-lb-img { transition: none; }
  .story-shot-media:hover img, .story-onward:hover .story-onward-media img { transform: none; }
  .story-onward:hover .story-onward-go { transform: none; }
  .story-lb-img { transform: none; }
}