/* Case-study pages. Builds on styles.css (tokens, header, type). */

.case main { padding: 0 var(--pad); }
.case .c-label { color: var(--muted); }
/* a section's own heading: it sits in the left column of a text block, or above a full-width one */
.case h2.c-label { color: var(--ink); font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.15; }

/* ---------- Opening ---------- */
.c-hero { min-height: 92svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px 0 6vh; }
.c-meta { display: flex; gap: 24px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 10px; }
.c-title { font-size: var(--fs-display); font-weight: 500; letter-spacing: 0; line-height: .9; margin: 4vh 0 3vh -.04em; }
.c-logline { font-size: var(--fs-lead); letter-spacing: 0; line-height: 1.4; max-width: 40ch; }   /* the same lead size on every page */
/* The facts under the film: three even columns, each fact on its own hairline, the label small above a
   readable value. Every item gets the same room, so short and long values sit calmly side by side. */
.c-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); margin-top: var(--s5); }
.c-facts > div { padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--rule); }
.c-facts dt { color: var(--muted); }
.c-facts dd { color: var(--ink); margin-top: 6px; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.4; }
/* on a phone: one fact per line, label on the left, value on the right */
@media (max-width: 767px) {
  .c-facts, .vd-facts { grid-template-columns: 1fr; }
  .c-facts > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--s2); padding: 12px 0; }
  .c-facts dd { margin-top: 0; font-size: var(--fs-small); }
}

/* ---------- Film ---------- */
.c-film { margin: 4vh 0 16vh; }
.film {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #111;
  border-radius: 4px; overflow: hidden; cursor: pointer;
}
.film img, .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.film img { transition: transform 1.6s var(--ease), filter .6s; }
.film:hover img { transform: scale(1.03); filter: saturate(1.1); }
.film .glass { opacity: 1; z-index: 2; }
.film .play {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  padding: 12px 18px; border-radius: 2px; color: var(--ink);
  background: var(--paper);
  transition: transform .5s var(--ease);
}
.film:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.film.playing .glass, .film.playing .play { display: none; }

/* ---------- Text blocks ---------- */
.c-block { display: grid; grid-template-columns: 1fr 3fr; gap: var(--pad); padding: 8vh 0; border-top: 1px solid var(--rule); }
.c-body { max-width: 760px; font-size: var(--fs-body); line-height: 1.55; display: grid; gap: 18px; }
.c-lead { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: 0; }
.c-todo { color: var(--accent); }
.idea-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); margin: 6px 0 8px; }
.idea-k { color: var(--muted); margin-bottom: 6px; }
@media (max-width: 760px) { .idea-grid { grid-template-columns: 1fr; } }

/* ---------- Stills ---------- */
.c-stills { padding: 8vh 0 14vh; border-top: 1px solid var(--rule); }
.stills { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--pad); margin-top: var(--s5); align-items: start; }
.stills figure { position: relative; }
.stills img, .dept-media img, .pipeline img { display: block; width: 100%; height: auto; border-radius: 4px; cursor: zoom-in; transition: transform 1.2s var(--ease), border-radius .6s var(--ease); }
.stills figcaption, .dept-media figcaption, .pipeline figcaption { margin-top: 8px; color: var(--muted); }
/* big, then pairs: the first still runs edge to edge, the rest sit two by two */
.s1 { grid-column: 1 / -1; margin: 0 calc(var(--pad) * -1); }
.s1 img { border-radius: 0; }
.s2, .s4 { grid-column: 1 / 7; }
.s3, .s5 { grid-column: 7 / 13; }
/* a still left alone in its pair runs full width instead of leaving half a row empty */
.stills:has(.s1) figure:not(.s1):last-child:nth-child(even) { grid-column: 1 / -1; }   /* only the big-then-pairs layout */
/* even grids lead with their strongest still at full width; the rest follow in pairs */
.stills.stills-even figure:first-child { grid-column: 1 / -1; }

/* ---------- Process ---------- */
.c-process { padding: 10vh 0; border-top: 1px solid var(--rule); }
.c-process-head { max-width: 980px; margin-bottom: 12vh; }
.c-h2 { font-size: var(--fs-h1); font-weight: 500; letter-spacing: 0; line-height: .9; margin: 2vh 0; }
.c-sub { font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; letter-spacing: 0; }

.dept { display: grid; grid-template-columns: 5fr 7fr; gap: calc(var(--pad) * 2); padding: 10vh 0; border-top: 1px solid var(--rule); align-items: start; }
.dept.flip .dept-text { order: 2; }
.dept.wide { grid-template-columns: 1fr; gap: 5vh; }
.dept.wide .dept-text { max-width: 760px; }
.dept-text { display: grid; gap: 18px; font-size: var(--fs-body); line-height: 1.55; position: sticky; top: 90px; }
.dept.wide .dept-text { position: static; }
.dept-no { color: var(--muted); }
.dept h3 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: .98; }
.dept-media { display: grid; gap: 4vh; }
.dept-media .small { width: 62%; justify-self: end; }

/* A quote pulled from the actual prompt, styled like a spec sheet */
.spec {
  position: relative; padding: 16px 18px 16px 22px; font-size: var(--fs-mono); line-height: 1.65;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 4px;
}
.spec::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--accent); border-radius: 2px; }

.tags, .fails { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.tags li { border: 1px solid var(--rule); border-radius: 2px; padding: 4px 10px; font-size: var(--fs-mono); }
.fails li {
  font-size: var(--fs-mono); padding: 8px 14px; border-radius: 2px; color: var(--accent);
  border: 1px solid rgba(122, 38, 32, .35); text-decoration: line-through; text-decoration-thickness: 1px;
  transition: all .3s var(--ease);
}
.fails li:hover { background: var(--accent); color: var(--paper); text-decoration: none; }

/* Casting: defined vs varied */
.cast-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-k { color: var(--muted); margin-bottom: 8px; }
.cs-list { list-style: none; display: grid; gap: 6px; font-size: var(--fs-body); }
.cs-list li { padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.spec:not(.mono) { font-size: var(--fs-body); line-height: 1.45; letter-spacing: 0; }
.guides { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.guides li { font-size: var(--fs-mono); padding: 9px 15px; border-radius: 2px; background: var(--paper); border: 1px solid var(--rule); }
.guides li::before { content: '✓  '; color: var(--muted); }

/* Beat sheet: a 10-second timeline */
.beats { display: grid; gap: 14px; }
.beat-track { position: relative; height: 76px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); overflow: hidden; }
.beat-track .b {
  position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 10%); width: calc((var(--e) - var(--s)) * 10%);
  border-right: 1px solid var(--rule); transition: background .3s;
  background: repeating-linear-gradient(90deg, rgba(18, 18, 18, .16) 0 1px, transparent 1px 7px);
}
.beat-track .b.hot { background: repeating-linear-gradient(90deg, rgba(122, 38, 32, .5) 0 2px, transparent 2px 7px); }
.beat-track .b:hover, .beat-track .b.on { background: rgba(122, 38, 32, .14); }
.beat-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-mono); }
.beat-read { display: grid; grid-template-columns: 120px 1fr; gap: 16px; min-height: 3.2em; font-size: var(--fs-body); line-height: 1.4; }
.beat-t { color: var(--muted); padding-top: 4px; }

.pipeline img { border-radius: 4px; }

/* ---------- Field notes + results ---------- */
.notes { display: grid; gap: 22px; }
.notes p { font-family: var(--hand); color: var(--accent); font-size: var(--fs-h2); line-height: 1.05; max-width: 30ch; }
.c-results { margin-top: 0; max-width: 640px; }
.credits { display: grid; gap: 0; max-width: 640px; }
.credits div { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.credits dt { color: var(--muted); }
.credits dd { font-size: var(--fs-body); letter-spacing: 0; }
@media (max-width: 760px) { .credits div { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Next ---------- */
.c-next { display: flex; flex-direction: column; gap: 10px; padding: 14vh 0 10vh; border-top: 1px solid var(--rule); }
.c-next .mono { color: var(--muted); }
.c-next-title { font-size: var(--fs-h1); font-weight: 500; letter-spacing: 0; line-height: .9; transition: color .3s; }
.c-next-title .arrow { display: inline-block; transition: transform .5s var(--ease); }
.c-next:hover .c-next-title { color: var(--accent); }
.c-next:hover .arrow { transform: translateX(16px); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 5vh 5vw;
  background: rgba(226, 234, 232, .72);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 84vh; border-radius: 4px; transform: scale(.96); transition: transform .5s var(--ease); }
.lightbox.open img { transform: none; }
.lb-cap { margin-top: 12px; color: var(--muted); text-align: center; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .c-block, .dept { grid-template-columns: 1fr; gap: 4vh; }
  .dept.flip .dept-text { order: 0; }
  .dept-text { position: static; }
  .stills figure:not(.s1) { grid-column: 1 / -1; }
  .dept-media .small { width: 100%; }
  .beat-read { grid-template-columns: 1fr; }
}

/* ---------- Building the perfect bite (bite.js) ---------- */
.bite { position: relative; height: 1100vh; margin: 0 calc(var(--pad) * -1); border-top: 1px solid var(--rule); }
.bite-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 57fr 43fr; }
.bite-stage > .board-wrap, .bite-stage > .viewer { position: relative; z-index: 1; }

.board-wrap { position: relative; overflow: hidden; grid-column: 1; grid-row: 1; }
.board { position: absolute; left: 0; top: 0; width: 2400px; height: 1500px; transform-origin: 0 0; will-change: transform; }
.wires { position: absolute; inset: 0; overflow: visible; }
.wires path { fill: none; stroke: rgba(18, 18, 18, .16); stroke-width: 1.6; transition: stroke .5s; }
.wires path.live { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 9; }
@keyframes wire-flow { to { stroke-dashoffset: -16; } }

/* A node: a plain card, like the canvas tool but light */
.node {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 4px; background: var(--paper); border: 1px solid var(--rule);
  opacity: .22; filter: grayscale(.6); transition: opacity .7s var(--ease), filter .7s var(--ease), box-shadow .7s var(--ease);
}
.node.on { opacity: 1; filter: none; box-shadow: 0 0 0 1px rgba(122, 38, 32, .22); }
.node-h { padding: 9px 14px 7px; font-size: var(--fs-mono); color: var(--muted); }
.node.on .node-h { color: var(--muted); }
.node img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.node .panels { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 0 3px 3px; }
.node .panels img { width: 100%; height: 100%; border-radius: 3px; transition: opacity .3s, transform .3s, box-shadow .3s; }
.node.on .panels:has(img.on) img:not(.on) { opacity: .25; }
.node .panels img.on { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent); position: relative; z-index: 1; }

/* An LLM node: the prompt streams past */
.node.llm { background: var(--paper); }
.stream {
  position: relative; flex: 1; overflow: hidden; margin: 0 6px;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent);
}
.stream pre { white-space: pre-wrap; font: 13px/1.6 var(--mono); padding: 6px 10px 60px; color: color-mix(in srgb, var(--ink) 50%, transparent); will-change: transform; }
.stream mark { background: none; color: inherit; border-radius: 3px; transition: color .3s, background .3s; }
.stream mark.hot { color: var(--accent); background: rgba(122, 38, 32, .12); font-weight: 500; }
.regen { margin: 8px; padding: 8px; border-radius: 4px; text-align: center; font-size: var(--fs-mono); background: var(--ink); color: var(--paper); }

/* Step title + the explanation of the current beat */
.step-head { position: absolute; left: var(--pad); top: 76px; max-width: 520px; pointer-events: none; z-index: 2; }
.step-head.pop { animation: rise .7s var(--ease); }
.sh-no { color: var(--muted); }
.sh-title { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: .95; margin: 8px 0 10px; }
.sh-text { font-size: var(--fs-body); line-height: 1.45; color: color-mix(in srgb, var(--ink) 75%, transparent); max-width: 44ch; }
.callout {
  position: absolute; left: var(--pad); bottom: 76px;   /* clear of the chapter bar */ z-index: 2; width: min(520px, 50%); padding: 16px 20px 18px;
  border-radius: 4px; background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none;
}
.callout.on { opacity: 1; transform: none; }
.callout.pop .callout-line { animation: pop .6s var(--ease); }
.co-k { color: var(--muted); }
.callout-line { font-size: var(--fs-lead); letter-spacing: 0; line-height: 1.25; margin-top: 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* Viewer: the image this step is working on */
.viewer { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 90px var(--pad) var(--pad) 0; }
.v-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #dfe3e2;
}
.v-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s; }
.v-wipe { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(122,38,32,.6); transition: opacity .3s; }
/* A soft spotlight: the rest of the image dims gently around the element being explained */
@property --fx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --fy { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --fw { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --fh { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
.v-focus {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse var(--fw) var(--fh) at var(--fx) var(--fy), rgba(12, 16, 18, 0) 0%, rgba(12, 16, 18, 0) 55%, rgba(12, 16, 18, .42) 100%);
  transition: --fx .9s var(--ease), --fy .9s var(--ease), --fw .9s var(--ease), --fh .9s var(--ease), opacity .5s;
}
/* A small pin with the element's name */
.v-pin { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; transition: left .9s var(--ease), top .9s var(--ease), opacity .4s; }
.v-pin::before {
  content: ''; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(122, 38, 32, .85);
}
.v-pin-l {
  position: absolute; left: 16px; top: -12px; width: max-content; max-width: 260px; padding: 8px 12px 10px; border-radius: 4px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  font-family: var(--sans); font-size: var(--fs-small); line-height: 1.4;
}
/* the card opens away from the frame's nearest edges */
.v-pin.flip-x .v-pin-l { left: auto; right: 16px; }
.v-pin.flip-y .v-pin-l { top: auto; bottom: -12px; }
.v-pin-l b { display: block; font-weight: 500; }
.v-pin-l b:only-child { font-weight: 400; }
.v-pin-t { display: block; color: var(--muted); margin-top: 2px; }
/* while the pointer explains, the side callout steps back so the words aren't said twice */
.ch-stage.pinned .ch-callout { opacity: 0; }
.ch-stage.pinned .frame-tag { opacity: 0; }   /* the pointer's card replaces the frame's own tag */
@media (max-width: 767px) {
  /* on a phone the image stays clear: the pointer moves over it, and its full explanation sits in a box
     just below the image (the same words as the laptop card); the side callout steps back as on a laptop */
  .v-pin-l { display: none; }
  .ch-visual:has(.v-desc) { flex-direction: column; justify-content: center; align-items: stretch; gap: 10px; }
  .ch-stage.pinned .ch-callout { display: none; }
}
/* the box below the image (phones only) */
.v-desc { display: none; padding: 10px 12px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); opacity: 0; transition: opacity .3s; }
.v-desc.on { opacity: 1; }
.v-desc b { display: block; font-weight: 400; color: var(--muted); }
.v-desc p { margin-top: 4px; font-size: var(--fs-body); line-height: 1.4; }
@media (max-width: 767px) { .v-desc { display: block; min-height: 7.2em; } }
/* The real bag keeps its own proportions: it slides in as a card */
.v-inset {
  position: absolute; right: 5%; top: 50%; height: 78%; aspect-ratio: 394 / 462; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(122, 38, 32, .55);
  opacity: 0; transform: translate(30px, -50%) rotate(3deg); transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.v-inset.on { opacity: 1; transform: translate(0, -50%) rotate(-2deg); }
.v-inset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-inset-l { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 2px; background: var(--accent); color: var(--paper); font-size: var(--fs-mono); }
.v-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 28px; }
.v-label { color: var(--ink); }
.v-note { font-family: var(--mono); font-size: var(--fs-mono); color: var(--accent); }
.dial { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-mono); opacity: 0; transition: opacity .4s; }
.bite-stage.show-dial .dial { opacity: 1; }
.dial span { position: relative; transition: color .2s; }
.dial span::before { content: ''; position: absolute; left: 50%; top: -14px; width: 1px; height: 7px; background: currentColor; }
.dial span.on { color: var(--accent); font-weight: 500; }
.dial span.on::before { height: 12px; top: -16px; width: 2px; }

/* The ending: first frame against final frame */
.final {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  padding: 10vh 6vw 6vh; opacity: 0; pointer-events: none;
}
.compare { position: relative; width: min(1180px, 100%); max-height: 70vh; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(122,38,32,.5); }
.cmp-line::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); font-size: var(--fs-small); }
.cmp-l, .cmp-r { position: absolute; bottom: 14px; padding: 4px 10px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); }
.cmp-l { left: 14px; color: var(--ink); }
.cmp-r { right: 14px; }
.final-line { font-size: var(--fs-h2); letter-spacing: 0; line-height: 1.05; text-align: center; }
.bite-stage > .board-wrap, .bite-stage > .viewer, .bite-stage > .step-head, .bite-stage > .callout { transition: opacity .6s var(--ease), filter .6s var(--ease), transform .5s var(--ease); }
.bite-stage.is-final > .board-wrap, .bite-stage.is-final > .viewer, .bite-stage.is-final > .step-head, .bite-stage.is-final > .callout { opacity: 0; filter: blur(8px); }
.bite-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rule); z-index: 5; }
.bite-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* Phones: title → node graph → image → explanation, stacked so the flow stays visible */
@media (max-width: 760px) {
  .bite { height: 1000vh; }
  .bite-stage { display: flex; flex-direction: column; gap: 10px; padding: 64px var(--pad) 14px; }
  .step-head { position: static; order: 1; max-width: none; }
  .sh-title { font-size: 28px; margin: 4px 0 6px; }
  .sh-text { font-size: var(--fs-small); line-height: 1.4; }
  .board-wrap { order: 2; flex: 1 1 0; min-height: 150px; margin: 0 calc(var(--pad) * -1); }
  .viewer { order: 3; padding: 0; gap: 8px; flex: none; }
  .v-frame { border-radius: 4px; }
  .v-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .v-note { font-size: var(--fs-body); }
  /* only the cards being explained are on screen; the rest would show as fragments at the edges */
  .node:not(.on) { opacity: 0; }
  .wires path:not(.live) { opacity: 0; }
  .callout { position: static; order: 4; width: auto; padding: 12px 14px; transform: none; }
  .callout-line { font-size: var(--fs-body); }
  .node-h { font-size: var(--fs-mono); }
  .final { padding: 70px var(--pad) 20px; }
}

/* ---------- The process: intro, chapters, rail (process.js) ---------- */
.process-intro { padding: 12vh 0 8vh; border-top: 1px solid var(--rule); }
.pi-list { list-style: none; display: grid; gap: 0; margin-top: 5vh; max-width: 640px; }
.pi-list li { display: grid; grid-template-columns: 48px 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-mono); }
.pi-list span { color: var(--muted); }

.chapter { position: relative; height: var(--len, 500vh); margin: 0 calc(var(--pad) * -1); border-top: 1px solid var(--rule); }
.ch-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; grid-template-columns: 36fr 64fr; gap: calc(var(--pad) * 1.5); align-items: center;
  padding: 84px var(--pad) var(--pad);
}
.ch-text { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 470px; align-self: center; }
.ch-text .sh-title { margin: 4px 0 2px; }
.ch-callout {
  margin-top: 14px; padding: 16px 20px 18px; border-radius: 4px;
  background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.ch-callout.on { opacity: 1; transform: none; }
.ch-callout.pop .callout-line { animation: pop .6s var(--ease); }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-chips:empty { display: none; }
.ch-chips span { font-size: var(--fs-mono); padding: 5px 10px; border-radius: 2px; background: var(--paper); border: 1px solid var(--rule); }
.ch-visual { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.frame-tag { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); z-index: 2; }

/* 01 · World: references, then the designed frame */
.w-refs { position: absolute; left: 0; right: 0; top: 50%; display: flex; gap: 16px; transform: translateY(-50%); transform-origin: 0 0; transition: transform 1s var(--ease), opacity .6s; }
/* each reference takes an equal share of the row and is cropped to fill it, never squeezed */
.ref-card { position: relative; flex: 1 1 0; min-width: 0; }
.ref-card img { display: block; height: min(66vh, 620px); width: 100%; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.ref-card figcaption { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); }
.w-frame { width: 100%; opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.w-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-visual.show-frame .w-frame { opacity: 1; transform: translateY(6vh); }
/* one label over a whole row of references, instead of a tag on every frame */
.w-refs:has(.w-refs-k) { flex-wrap: wrap; row-gap: var(--s1); }
.w-refs-k { flex: 0 0 100%; color: var(--muted); }
.ch-visual.show-frame .w-refs { transform: translate(0, -40vh) scale(.22); }

/* 02 · Plating: a contact sheet of options */
.plates { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plate { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 16 / 9; transition: transform .6s var(--ease), box-shadow .6s, opacity .6s; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .6s, opacity .6s; }
.plate-no { position: absolute; left: 10px; top: 10px; padding: 2px 8px; border-radius: 2px; background: var(--ink); color: var(--paper); font-size: var(--fs-mono); }
.plate-tag { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); opacity: 0; transition: opacity .4s; }
.plate.on { transform: scale(1.02); box-shadow: 0 0 0 2px var(--accent); z-index: 1; }
.plate.out img { filter: grayscale(.85); opacity: .45; }
.plate.out .plate-tag, .plate.chosen .plate-tag { opacity: 1; }
.plate.chosen .plate-tag { background: var(--accent); color: var(--paper); }
.ch-visual.full .plate:not(.chosen) { display: none; }
.ch-visual.full .plates { grid-template-columns: 1fr; }
.ch-visual.full .plate.chosen { animation: rise .7s var(--ease); }

/* 04 · Texture: before → after */
.t-frame { width: 100%; }
.t-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-frame .t-l { left: 14px; color: var(--ink); }
.t-frame .t-r { left: auto; right: 14px; }

/* Chapter rail */
.ch-rail {
  position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translate(-50%, 14px);
  display: flex; flex-direction: row; gap: 2px; padding: 6px 8px; border-radius: 2px;
  background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.ch-rail.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
/* the bar needs room for every chapter name; on narrower screens it steps aside rather than spill off the edges */
@media (max-width: 1099px) { .ch-rail { display: none; } }
.ch-rail a { display: flex; gap: 6px; white-space: nowrap; padding: 6px 10px; border-radius: 2px; font-size: var(--fs-mono); color: var(--muted); transition: color .3s, background .3s; }
.ch-rail a.on { background: var(--paper); }
.ch-rail a span { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.ch-rail a.on, .ch-rail a:hover { color: var(--ink); }
.ch-rail a.on span { color: var(--accent); }

@media (max-width: 760px) {
  .chapter { height: calc(var(--len, 500vh) * .9); }
  .ch-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding: 64px var(--pad) 14px; align-items: start; }
  .ch-text { gap: 6px; }
  .ch-text .sh-title { font-size: 28px; }
  .ch-text .sh-text { font-size: var(--fs-small); }
  .ch-callout { margin-top: 6px; padding: 12px 14px; }
  .ch-callout .callout-line { font-size: var(--fs-body); }
  .ch-chips { display: none; }
  .ch-visual { align-items: center; }   /* the image sits in the middle of the space below the text, not hugging the top */
  .ref-card img { height: 34vh; }
  /* on a phone the references fade out where they are, instead of flying up across the title */
  .ch-visual.show-frame .w-refs { transform: translateY(-50%) scale(.94); opacity: 0; }
  .ch-visual.show-frame .w-frame { transform: none; }
  .plates { gap: 8px; }
  .ch-rail { display: none; }
}

/* ---------- How it was made: intro, acts ---------- */
.pi-note { max-width: 58ch; font-size: var(--fs-body); line-height: 1.5; margin-top: 2vh; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.film-strip { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 5vh; }
.film-strip li { padding: 12px 12px 10px; border-top: 2px solid var(--rule); font-size: var(--fs-mono); color: var(--muted); }
.film-strip li.act1 { border-color: rgba(18,18,18,.55); color: var(--ink); }
.film-strip li.act2 { border-color: var(--accent); color: var(--accent); }
.act { padding: 18vh 0 12vh; border-top: 1px solid var(--rule); text-align: center; }
.act-no { color: var(--muted); }
.act-title { font-size: var(--fs-display); font-weight: 500; letter-spacing: 0; line-height: .9; margin: 2vh 0; }
.act-text { font-size: var(--fs-lead); color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* Casting: the chart, then the hero */
.cast-chart { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.cast-chart img { width: auto; height: auto; max-height: 76vh; max-width: 100%; border-radius: 4px; cursor: zoom-in; }
.cast-chart figcaption { color: var(--muted); }
.cast-hero { width: 100%; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.cast-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-visual.show-hero .cast-chart { opacity: 0; transform: translateY(-30px) scale(.96); pointer-events: none; }
.ch-visual.show-hero .cast-hero { opacity: 1; transform: none; }

/* Plating: Zomato vs District */
.ch-visual:has(.plates) { flex-direction: column; gap: 16px; }
.zd { display: flex; gap: 10px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
/* the insight comes first: Zomato orders in, District goes out. While it's up, the options wait, dimmed */
.ch-visual.show-zd .zd, .ch-visual.full .zd { opacity: 1; transform: none; }   /* and it returns once the box is chosen */
.ch-visual.show-zd .plate { opacity: .35; }
.zd { align-self: stretch; }
.zd span { flex: 1; }
.zd span { display: grid; gap: 2px; padding: 10px 18px; border-radius: 4px; font-size: var(--fs-mono); background: var(--paper); border: 1px solid var(--rule); color: var(--muted); }
.zd b { font: 500 var(--fs-lead) var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.zd .zd-z { border-color: var(--accent); }
.zd .zd-z b { color: var(--accent); }

/* Dolly-in: keyframes cross-fade */
.dolly-frame { width: 100%; }
.dolly-frame .d-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.dolly-frame .d-img.on { opacity: 1; }

/* References: one card at a time; the last one slides down as the next arrives */
.refstack { position: relative; width: 100%; height: 100%; }
.rs-card {
  position: absolute; left: 50%; top: 50%; width: min(100%, 760px); margin: 0;
  transform: translate(-50%, -30%) scale(.94); opacity: 0;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.rs-card img { display: block; width: 100%; border-radius: 4px; }
.rs-card.rs-tall { width: min(46%, 380px); }
.rs-card.rs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rs-card figcaption { position: absolute; left: 14px; top: 14px; padding: 4px 10px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); }
.rs-card.on { opacity: 1; transform: translate(-50%, -50%); }
.rs-card.past { opacity: 0; transform: translate(-50%, 20%) scale(.86); }

/* The shot: motion reference + interactive breakdown */
.shot { padding: 16vh 0 10vh; border-top: 1px solid var(--rule); }
.shot-head { max-width: 640px; margin-bottom: 8vh; }
.mref { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(var(--pad) * 1.5); align-items: center; margin-bottom: 14vh; }
.mref-video { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #111; }
.mref-video iframe { position: absolute; inset: -2%; width: 104%; height: 104%; border: 0; pointer-events: none; filter: grayscale(1) contrast(1.25) brightness(1.05); }
.mref-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.mref-tag { position: absolute; left: 14px; bottom: 14px; padding: 4px 10px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); }
.mref-text { display: grid; gap: 12px; font-size: var(--fs-body); line-height: 1.5; }
.mref-lead { font-size: var(--fs-h2); letter-spacing: 0; line-height: 1; }

.ex-player { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #0c1114; }
.ex-player > div:first-child, .ex-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform: scale(1.14); }  /* crops YouTube's paused-state title bar */
.ex-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s; }
.ex-poster.gone { opacity: 0; }
.ex-start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 22px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: var(--fs-mono); transition: opacity .4s;
}
.explainer.playing .ex-start { opacity: 0; pointer-events: none; }
.ex-note {
  position: absolute; left: 22px; bottom: 22px; width: min(460px, calc(100% - 44px)); padding: 18px 20px 20px; border-radius: 4px;
  background: var(--paper); opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.ex-note.on { opacity: 1; transform: none; pointer-events: auto; }
.ex-k { color: var(--muted); }
.ex-t { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: 0; margin-top: 6px; }
.ex-go { margin-top: 12px; padding: 7px 12px; border-radius: 2px; border: 1px solid var(--rule); background: #fff; cursor: pointer; font-size: var(--fs-mono); }
.ex-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.ex-timer.run { animation: ex-hold 4.5s linear forwards; }
@keyframes ex-hold { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.ex-bar { height: 3px; margin-top: 14px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.ex-fill { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.ex-moments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ex-moments button { display: flex; gap: 8px; padding: 8px 12px; border-radius: 2px; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; font-size: var(--fs-mono); transition: all .3s; }
.ex-moments button span { color: var(--muted); }
.ex-moments button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ex-moments button.on span { color: rgba(255,255,255,.6); }
.ex-controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.ex-controls button { padding: 6px 12px; border-radius: 2px; border: 1px solid var(--rule); background: none; cursor: pointer; font-size: var(--fs-mono); color: var(--muted); }

/* The end card */
.finale { padding: 12vh 0 16vh; text-align: center; border-top: 1px solid var(--rule); }
.finale-card { display: block; width: 100%; max-width: 1180px; margin: 4vh auto 0; border-radius: 4px; }
.finale-card.reveal { transform: scale(.92); }
.finale-card.reveal.in { transform: none; transition: opacity 1.2s var(--ease), transform 1.4s var(--ease); }

/* Rail: act markers */
.rail-act { align-self: center; padding: 0 6px 0 10px; font-size: var(--fs-mono); color: var(--muted); }

@media (max-width: 760px) {
  .film-strip { grid-template-columns: 1fr 1fr; }
  .act { padding: 12vh 0 8vh; }
  .cast-chart img { max-height: 46vh; }
  .zd b { font-size: var(--fs-body); }
  .rs-card.rs-tall { width: 52%; }
  .mref { grid-template-columns: 1fr; margin-bottom: 8vh; }
  .ex-note { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 12px 14px; }
  .ex-t { font-size: var(--fs-small); }
}

/* ---------- Pillars, colour script, the turn ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.pillars div { padding: 16px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); }
.pillars span { color: var(--muted); }
.pillars b { display: block; font-weight: 500; font-size: 20px; letter-spacing: 0; margin: 6px 0 4px; }
.pillars p { font-size: var(--fs-small); line-height: 1.45; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.colour-script { padding: 6vh 0 10vh; }
.red-worlds { padding: 6vh 0 10vh; }
.rw-lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--muted); margin-top: var(--s1); }
.rw-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 3vh; }
.rw-strip figure { margin: 0; }
.rw-strip img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.rw-strip figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-mono); color: var(--muted); }
.rw-strip i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent); flex: none; }
.party { padding: 4vh 0 16vh; }
.party-head { max-width: 760px; margin: 0 auto 8vh; text-align: center; }
.party-lead { font-size: var(--fs-h2); letter-spacing: 0; line-height: 1.05; margin: 2vh 0; }
.party-lead b { font-weight: 500; }
.party-text { font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.party-rise { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.party-rise figure { margin: 0; }
.party-rise figure:nth-child(even) { margin-top: 8vh; }       /* a gentle stagger keeps the build-up feeling */
.party-rise img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.party-rise figcaption { margin-top: 8px; font-size: var(--fs-mono); color: var(--muted); }
@media (max-width: 760px) {
  .rw-strip { grid-template-columns: 1fr; }
  .party-rise { grid-template-columns: 1fr; }
  .party-rise figure:nth-child(even) { margin-top: 0; }
}
.cs-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 3vh; }
.cs-strip figure { margin: 0; }
.cs-strip img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.cs-strip figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-mono); color: var(--muted); }
.cs-strip i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.turn { padding: 18vh 0 12vh; border-top: 1px solid var(--rule); text-align: center; }
.turn-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(var(--pad) * 1.2); margin-top: 8vh; text-align: left; }
.turn-split figure { margin: 0; }
.turn-split img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.turn-split figcaption { margin-top: 8px; color: var(--muted); }
/* the crunch is the pivot between the two worlds, so it sits dead centre: equal room on either side of it */
.beatline { display: grid; grid-template-columns: 86px auto 86px; align-items: center; gap: 10px; }
.bl-even { justify-self: end; }
.bl-wild { justify-self: start; }
.beatline i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(18,18,18,.4); }
.bl-even { display: flex; gap: 10px; }
.bl-even i { animation: tick 1.2s steps(1) infinite; }
.bl-even i:nth-child(2) { animation-delay: .2s; } .bl-even i:nth-child(3) { animation-delay: .4s; } .bl-even i:nth-child(4) { animation-delay: .6s; } .bl-even i:nth-child(5) { animation-delay: .8s; } .bl-even i:nth-child(6) { animation-delay: 1s; }
@keyframes tick { 0% { background: var(--ink); transform: scale(1.4); } 15% { background: rgba(18,18,18,.4); transform: none; } }
.bl-crunch { padding: 6px 10px; border-radius: 2px; background: var(--accent); color: var(--paper); font-size: var(--fs-mono); animation: crunch 1.2s ease-out infinite; }
@keyframes crunch { 0%, 70% { transform: none; } 80% { transform: scale(1.18); } 100% { transform: none; } }
/* the same footprint as the steady side: one row, the same width and dot size, just restless */
.bl-wild { display: flex; justify-content: space-between; width: 86px; }
.bl-wild i { width: 6px; height: 6px; background: var(--accent); animation: wild .5s ease-in-out infinite alternate; }
.bl-wild i:nth-child(3n) { animation-duration: .35s; } .bl-wild i:nth-child(4n) { animation-duration: .6s; transform: translateY(3px); }
@keyframes wild { to { transform: translateY(-4px) scale(1.3); opacity: .5; } }
@media (max-width: 760px) {
  .pillars { grid-template-columns: 1fr; }
  .cs-strip { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .cs-strip figcaption { font-size: var(--fs-mono); flex-direction: column; align-items: flex-start; gap: 4px; }
  .turn-split { grid-template-columns: 1fr; }
  .beatline { justify-content: center; }
}

/* ---------- Crops: hide letterboxing and screenshot UI ---------- */
.crop { overflow: hidden; border-radius: 4px; }
.crop-letterbox { transform: scale(1.07); }
.ref-card { overflow: hidden; border-radius: 4px; }
.ref-card img { transform: scale(1.14); }     /* trims the Instagram mute icon and black screenshot edges */
.rs-card.rs-fish { overflow: hidden; border-radius: 4px; }
.rs-card.rs-fish img { transform: scale(1.1); }
.rs-card.rs-bw img { filter: grayscale(1) contrast(1.15); }
.rs-card.rs-letterbox img { clip-path: inset(3% 0 3% 0 round 16px); }
.rs-card figcaption b { color: var(--muted); font-weight: 500; margin-right: 6px; }

/* ---------- The final wipe back: steps + a minimal result player ---------- */
.shot-intro { padding-bottom: 8vh; }
.shot-intro .pi-list { margin-top: 4vh; }
.shot-result { padding-top: 10vh; }
.ex-lead { margin: 6px 0 3vh; }
.ex-tag {
  position: absolute; left: 18px; bottom: 18px; padding: 6px 12px; border-radius: 2px; font-size: var(--fs-mono);
  background: var(--paper); color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none;
}
.ex-tag.on { opacity: 1; transform: none; }
.ex-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }

/* ---------- The prompt breakdown (Final wipe back · Step 3) ---------- */
.pr-wrap { width: 100%; height: min(78vh, 720px); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 14px; }
/* the categories sit centred over the prompt; the count keeps to the right edge */
.pr-top { grid-column: 1 / -1; display: grid; grid-template-columns: 80px minmax(0, 1fr) 80px; align-items: center; gap: 12px; }
.pr-top .pr-cats { grid-column: 2; }
.pr-top .pr-count { grid-column: 3; justify-self: end; }
.pr-count { white-space: nowrap; }
.pr-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pr-cats button { font-family: var(--mono); background: none; cursor: pointer; }
.pr-cats button:hover { color: var(--ink); border-color: var(--ink); }
.pr-cats button { padding: 5px 10px; border-radius: 2px; font-size: var(--fs-mono); border: 1px solid var(--rule); color: var(--muted); transition: all .3s; }
.pr-cats button.done { color: var(--ink); border-color: rgba(18,18,18,.3); }
.pr-cats button.on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.pr-count { font-size: var(--fs-lead); color: var(--accent); }
.pr-box {
  position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 4px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 0 0 1px rgba(122,38,32,.18);
}
.pr-h { padding: 10px 14px 8px; font-size: var(--fs-mono); color: var(--muted); }
.pr-stream { position: relative; flex: 1; overflow: hidden; margin: 0 6px; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); }
.pr-stream pre { white-space: pre-wrap; font: 13px/1.65 var(--mono); padding: 8px 10px 200px; color: color-mix(in srgb, var(--ink) 42%, transparent); transition: transform .8s var(--ease); }
.pr-stream mark { background: none; color: color-mix(in srgb, var(--ink) 62%, transparent); border-radius: 3px; transition: color .3s, background .3s; }
.pr-stream mark.hot { color: var(--accent); background: rgba(122,38,32,.12); font-weight: 500; }
.pr-box .regen { margin: 8px; }
.pr-side { position: relative; min-height: 0; }
.pr-ref, .pr-spec { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.pr-ref.on, .pr-spec.on { opacity: 1; transform: none; }
.pr-ref { display: grid; gap: 8px; align-content: center; }
.pr-ref img { display: block; width: 100%; max-height: 100%; object-fit: cover; border-radius: 4px; }
.pr-ref:not(.pair) img { aspect-ratio: auto; max-height: 64vh; object-fit: contain; }
.pr-ref.pair img { aspect-ratio: 16 / 10; }
.pr-ref.bw img { filter: grayscale(1) contrast(1.15); }
.pr-ref figcaption { order: -1; justify-self: start; padding: 4px 10px; border-radius: 2px; background: var(--paper); color: var(--ink); font-size: var(--fs-mono); }
.pr-spec { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 4px; }
.pr-spec li {
  padding: 14px 18px; border-radius: 4px; font-size: var(--fs-small);
  background: var(--paper); border: 1px solid var(--rule);
  opacity: 0; transform: translateX(16px);
}
.pr-spec.on li { animation: spec-in .55s var(--ease) forwards; }
.pr-spec.on li:nth-child(2) { animation-delay: .07s; } .pr-spec.on li:nth-child(3) { animation-delay: .14s; } .pr-spec.on li:nth-child(4) { animation-delay: .21s; }
.pr-spec.on li:nth-child(5) { animation-delay: .28s; } .pr-spec.on li:nth-child(6) { animation-delay: .35s; } .pr-spec.on li:nth-child(7) { animation-delay: .42s; } .pr-spec.on li:nth-child(8) { animation-delay: .49s; }
.pr-spec li::before { content: '—  '; color: var(--muted); }
@keyframes spec-in { to { opacity: 1; transform: none; } }
/* On a phone the prompt reads top to bottom: the categories in one swipeable row, then what this line of the
   prompt is about (its reference, spec or shot) at full width, then the prompt itself as a short strip.
   Every piece is sized to the space it has, so nothing hangs off the bottom of the screen. */
@media (max-width: 767px) {
  .ch-stage:has(.pr-wrap) .ch-text .sh-text { display: none; }
  .pr-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) 22vh; height: 100%; gap: 10px; }
  .pr-top { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-top .pr-cats { grid-column: 1; position: relative; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .pr-top .pr-cats::-webkit-scrollbar { display: none; }
  .pr-cats button { flex: none; padding: 3px 7px; }
  .pr-top .pr-count { grid-column: 2; font-size: var(--fs-body); }
  .pr-side { grid-row: 2; }
  .pr-box { grid-row: 3; }
  .pr-ref { grid-template-rows: auto minmax(0, 1fr); align-content: stretch; }
  .pr-ref img, .pr-ref:not(.pair) img, .pr-ref.pair img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; }
  .pr-ref.pair { grid-template-columns: 1fr 1fr; }
  .pr-ref.pair figcaption { grid-column: 1 / -1; }
  .pr-spec { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 6px; }
  .pr-spec li { padding: 8px 10px; font-size: var(--fs-mono); }
  .pr-vid video { flex: none; max-height: 45%; }
  /* the craft list: label and line side by side without colliding, and only as many as fit */
  .pr-craft li { grid-template-columns: auto 1fr; }
  .pr-craft li:nth-child(n+4) { display: none; }
  .pr-vid { overflow: hidden; }
  /* the swipeable row fades at its edges, so a half-shown category reads as "more this way", not cut off */
  .pr-top .pr-cats { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); padding: 0 12px; }
  /* the inset is too small for its caption on a phone; the callout above already says it */
  .lock-inset { width: 40%; }
  .lock-inset figcaption { display: none; }
}

/* =================== Made a Habit (AI food ASMR) =================== */
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 3; }
.ref-card.clean img { transform: none; }

/* Paint ↔ plate: two frames that change together */
.rhyme { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.rh { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #dfe3e2; }
.rh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.rh img.on { opacity: 1; transform: none; }
.rh figcaption { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); z-index: 2; }
.rh-plate figcaption { color: var(--ink); }
.rh-eq { font-size: 28px; color: var(--muted); }

/* The painter: the sheet is wider than 16:9 */
.sheet-frame { width: 100%; aspect-ratio: 2000 / 1129; }

/* The menu: the master sheet, then reference → built, dish by dish */
.ch-visual:has(.menu-pair) { flex-direction: column; }
.menu-sheet { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.menu-sheet img { width: auto; height: auto; max-width: 100%; max-height: 74vh; border-radius: 4px; cursor: zoom-in; }
.menu-sheet figcaption { color: var(--muted); }
.menu-pair { width: 100%; display: grid; grid-template-columns: 34fr auto 66fr; align-items: center; gap: 16px; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.ch-visual.show-pair .menu-sheet { opacity: 0; transform: translateY(-30px) scale(.96); pointer-events: none; }
.ch-visual.show-pair .menu-pair { opacity: 1; transform: none; }
.menu-pair figure { position: relative; margin: 0; border-radius: 4px; overflow: hidden; background: #dfe3e2; }
.menu-ref { aspect-ratio: 3 / 4; }
.menu-built { aspect-ratio: 16 / 9; }
.menu-pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.menu-pair img.on { opacity: 1; }
.menu-pair figcaption { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 2px; background: var(--paper); font-size: var(--fs-mono); z-index: 2; }
.menu-built figcaption { color: var(--ink); }
.menu-arrow { color: var(--muted); font-size: 20px; }

/* Shared heads for the cut and formats sections */
.formats { padding: 14vh 0 6vh; border-top: 1px solid var(--rule); }
.batches-head { max-width: 640px; margin-bottom: 6vh; display: flex; flex-direction: column; gap: 10px; }

/* Formats: four frames, side by side, at their real shapes */
.fmt-row { display: flex; align-items: flex-end; gap: 14px; height: min(52vh, 460px); }
.fmt-row figure { margin: 0; height: 100%; aspect-ratio: var(--ar); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fmt-row img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 4px; }
.fmt-row figcaption { color: var(--muted); font-size: var(--fs-mono); }

@media (max-width: 760px) {
  .rhyme { gap: 8px; }
  .rh-eq { font-size: var(--fs-body); }
  .menu-pair { grid-template-columns: 1fr; gap: 8px; }
  .menu-ref { aspect-ratio: 16 / 9; }
  .menu-arrow { display: none; }
  .menu-sheet img { max-height: 46vh; }
      .fmt-row { height: auto; flex-wrap: wrap; align-items: flex-start; }
  .fmt-row figure { height: 30vh; }
}
/* Painter: the continuity lock, shown as an inset from the film */
.lock-inset { position: absolute; right: 14px; bottom: 14px; width: 34%; margin: 0; z-index: 3; border-radius: 4px; overflow: hidden; border: 2px solid #fff; opacity: 0; transform: translateY(16px) scale(.96); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.lock-inset img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lock-inset figcaption { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 2px; background: var(--paper); color: var(--ink); font-size: var(--fs-mono); }
.ch-visual.show-lock .lock-inset { opacity: 1; transform: none; }
/* The prompt's video: loops the exact stretch a highlighted line describes */
.pr-vid { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.pr-vid.on { opacity: 1; transform: none; }
.pr-vid video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; background: #1b2420; }
.pr-vid-l { align-self: flex-start; padding: 4px 10px; border-radius: 2px; background: var(--paper); color: var(--ink); font-size: var(--fs-mono); }
/* A longer title on this page: smaller, so it sits on two lines */


/* ---------- Healthy Subscriptions: the film, up front ---------- */
.c-hero:has(.c-head) { min-height: 0; justify-content: flex-start; padding-bottom: 4vh; }

.film-hero { margin-top: 5vh; border-radius: 4px; transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.film-hero:hover { transform: translateY(-4px); }
.film-hero .film-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.6s var(--ease), filter .6s; }
.film-hero:hover .film-preview, .film-hero:hover > img { transform: scale(1.06); filter: saturate(1.12); }
.film-shade { position: absolute; inset: 0; z-index: 2; background: radial-gradient(60% 70% at 50% 55%, rgba(0,0,0,.08), rgba(0,0,0,.42)); transition: opacity .6s; }
.film-hero:hover .film-shade { opacity: .7; }
.film-cta { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; color: #fff; text-align: left; }
/* the play button: a plain solid disc, no glass, no rings */
.film-play { position: relative; display: grid; place-items: center; width: clamp(48px, 4vw, 60px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); transition: transform .4s var(--ease); }
.film-play svg { width: 34%; fill: var(--ink); margin-left: 4%; }
.film-hero:hover .film-play { transform: scale(1.06); }
.film-cta-t { display: flex; flex-direction: column; gap: 4px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.film-cta-t b { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.film-cta-t .mono { opacity: .85; }
.film-tag { position: absolute; left: 18px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 2px; color: #fff; font-size: var(--fs-mono); background: rgba(0,0,0,.28); }
.film-tag i { width: 6px; height: 6px; border-radius: 50%; background: #9BE3A0; }
.film-hero video.film-main { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; background: #000; object-fit: contain; }
.film-hero.playing .film-shade, .film-hero.playing .film-cta, .film-hero.playing .film-tag { display: none; }
.film-hero iframe { z-index: 4; }

/* ---------- The cut: the final film as a timeline, by source ---------- */
.cut { padding: 14vh 0 8vh; border-top: 1px solid var(--rule); }
.cut-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; color: var(--muted); }
.cut-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--c); }
.k-paint, .cut-paint { --c: #2346A8; }
.k-plate, .cut-plate { --c: #4E9A5B; }
.k-meal, .cut-meal { --c: #7A2620; }
.k-offer, .cut-offer { --c: #9AA49E; }
.cut-line { display: flex; gap: 3px; height: clamp(90px, 13vw, 170px); }
.cut-s { position: relative; flex: var(--w) 1 0; min-width: 0; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: #ccd; cursor: pointer; border-top: 4px solid var(--c); transition: flex-grow .6s var(--ease), transform .4s var(--ease); }
.cut-s img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); transition: filter .4s, transform .8s var(--ease); }
.cut-s span { position: absolute; left: 6px; bottom: 6px; right: 6px; padding: 3px 6px; border-radius: 4px; background: var(--paper); font-size: var(--fs-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.cut-s:hover { flex-grow: calc(var(--w) * 2.6 + 1.2); }
.cut-s:hover img { filter: none; transform: scale(1.04); }
.cut-s:hover span { opacity: 1; transform: none; }
.cut-ruler { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: var(--fs-mono); }
.film-strip.six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) {
  .film-cta { gap: 12px; }
  .film-cta-t b { white-space: nowrap; }
  .cut-line { height: 80px; gap: 2px; }
  .film-strip.six { grid-template-columns: repeat(3, 1fr); }
}

/* Title and line side by side, so the film rises into the first screen */
/* the title and the logline end on the same line: the last line of the logline sits on the title's baseline */
.c-head { display: grid; grid-template-columns: auto minmax(0, 34ch); align-items: last baseline; gap: 3vw; margin-top: 3vh; }
.c-head .c-title { margin: 0; font-size: var(--fs-h1); }
.c-head .c-logline { font-size: var(--fs-lead); line-height: 1.4; max-width: none; }
.c-hero:has(.c-head) { padding-top: 96px; }
.c-head + .film-hero { margin-top: 3.5vh; }
@media (max-width: 900px) { .c-head { grid-template-columns: 1fr; gap: 14px; } }
/* The play button sits dead centre, with its words stacked beneath it */
.film-cta { flex-direction: column; gap: 10px; text-align: center; }
.film-cta-t { align-items: center; }
.film-tag { display: none; }
.film-strip.seven { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 760px) { .film-strip.seven { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Craft: the filmmaking decisions inside each shot ---------- */
:root { --cr-lens: #7A2620; --cr-camera: #3C4A55; --cr-move: #2346A8; --cr-focus: #6A3FA0; --cr-light: #B07A12; --cr-frame: #1F7A6E; --cr-continuity: #3E7D3A; --cr-performance: #B0476A; --cr-edit: #4A4A4A; --cr-texture: #B4561E; --cr-intent: #2B2B2B; --cr-sound: #2A6F97; }
.cr-lens { --cr: var(--cr-lens); } .cr-camera { --cr: var(--cr-camera); } .cr-move { --cr: var(--cr-move); } .cr-focus { --cr: var(--cr-focus); }
.cr-light { --cr: var(--cr-light); } .cr-frame { --cr: var(--cr-frame); } .cr-continuity { --cr: var(--cr-continuity); } .cr-performance { --cr: var(--cr-performance); }
.cr-edit { --cr: var(--cr-edit); } .cr-texture { --cr: var(--cr-texture); } .cr-intent { --cr: var(--cr-intent); }
.pr-stream mark.cr { background: none; color: inherit; transition: color .3s, background .3s, box-shadow .3s; }
.pr-stream mark.cr.lit { color: var(--cr); background: color-mix(in srgb, var(--cr) 11%, transparent); border-radius: 2px; font-weight: 500; }
.pr-stream mark.cr.lit::before { content: attr(data-l); display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 4px; background: var(--cr); color: #fff; font-size: 7.5px; vertical-align: 1px; line-height: 1.6; }
/* the shot sheet under the playing shot */
.pr-craft { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; }
.pr-craft li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); font-size: var(--fs-mono); text-transform: none; opacity: 0; transform: translateX(12px); }
.pr-craft.on li { animation: spec-in .5s var(--ease) forwards; animation-delay: calc(var(--k) * 70ms); }
.pr-craft li b { color: var(--cr); font-weight: 500; font-size: var(--fs-mono); }
.pr-craft li span { color: var(--ink); }
.pr-vid { justify-content: flex-start; overflow-y: auto; scrollbar-width: none; }
@media (max-width: 760px) { .pr-craft li { grid-template-columns: 70px 1fr; padding: 5px 8px; } }

/* =================== Rakhi with Zomato =================== */
/* Both episodes up front, side by side and equal in weight */
.ep-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 3.5vh; }
.ep-duo .film-hero { margin-top: 0; border-radius: 4px; }
.ep-cap { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; row-gap: 2px; margin-top: 12px; }
.ep-cap .mono { color: var(--muted); }
.ep-cap b { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; }
.ep-cap-d { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-body); }
.eps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eps > div { padding: 18px 20px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 6px; }
.eps span { color: var(--muted); }
.eps b { font-size: 22px; font-weight: 500; letter-spacing: 0; }
.eps p { font-size: var(--fs-body); color: var(--muted); }

/* The look: how a phone was written into every prompt */
.look-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.look-grid figure { margin: 0; padding: 16px 18px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.look-grid b { font-weight: 500; font-size: var(--fs-body); }
.look-grid q { font: 13px/1.55 var(--mono); color: var(--muted); quotes: '“' '”'; }

/* Frames first: the six start frames in edit order */
.frames-first { padding: 14vh 0 6vh; border-top: 1px solid var(--rule); }
.ff-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ff-row figure { margin: 0; display: grid; gap: 8px; }
.ff-row img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; transition: transform .6s var(--ease); }
.ff-row img:hover { transform: translateY(-6px); }
.ff-row figcaption { color: var(--muted); font-size: var(--fs-mono); }
.ff-note { margin-top: 3vh; color: var(--muted); }

/* The armour sheets are a touch wider than 16:9 */
.armour-frame { aspect-ratio: 2000 / 1125; }

/* Vertical raw generations play tall beside the prompt */
/* a vertical clip sits beside its craft notes, using the full height, so neither has to shrink */
.pr-vid.tall { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 8px 12px; }
.pr-vid.tall .pr-vid-l { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
.pr-vid.tall video { grid-column: 1; grid-row: 2; width: 100%; height: auto; max-height: 100%; aspect-ratio: 9 / 16; object-fit: contain; }
.pr-vid.tall .pr-craft { grid-column: 2; grid-row: 2; margin: 0; }
.pr-vid.tall .pr-craft li { grid-template-columns: 1fr; gap: 2px; }

/* One more craft tag */
:root { --cr-sound: #2E6F8E; }
.cr-sound { --cr: var(--cr-sound); }

@media (max-width: 760px) {
  .eps, .look-grid { grid-template-columns: 1fr; }
  .ff-row { grid-template-columns: repeat(3, 1fr); }
}

/* The idea, big enough to read in one go */
.big-idea { padding: 16vh 0 12vh; border-top: 1px solid var(--rule); }
.bi-line { font-size: var(--fs-h1); font-weight: 500; letter-spacing: 0; line-height: .95; margin: 3vh 0 4vh; }
.bi-sub { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.35; color: var(--muted); }

/* Stills from both episodes, in an even grid */
.stills.stills-even { grid-template-columns: repeat(2, 1fr); gap: var(--pad); }   /* large pairs, so every still has room */
.stills.stills-even figure { margin: 0; }
.stills.stills-even img { aspect-ratio: 16 / 9; object-fit: cover; }

/* The armour, as pairs of full character sheets, stacked top and bottom */
/* each sheet is the largest 16:9 that fits its half of the stage, by width or by height, whichever runs out first */
.armour-duo { position: relative; width: 100%; height: min(80vh, 760px); container-type: size; }
.ad-pair { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 12px; justify-items: center; opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.ad-pair.on { opacity: 1; transform: none; }
.ad-fig { position: relative; margin: 0; width: min(100cqw, (50cqh - 6px) * 16 / 9); aspect-ratio: 16 / 9; }
.ad-fig img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 4px; background: #4a4e52; cursor: zoom-in; }
.ad-fig figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 2px; background: rgba(0,0,0,.55); color: #f2ede6; font-size: var(--fs-mono); }
.ad-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 5px 12px; border-radius: 2px; background: var(--ink); color: var(--paper); font-size: var(--fs-mono); white-space: nowrap; }
.ad-pin { position: absolute; left: 10.5%; top: 48%;   /* on the rose embossed on her skirt */ display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 2px; background: var(--paper); color: #9a3a4e; font-size: var(--fs-mono); opacity: 0; transform: translate(12px, 0); transition: opacity .5s, transform .6s var(--ease); }
.ad-pin i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c25a72; box-shadow: 0 0 0 4px rgba(194,90,114,.25); }
.ch-visual.show-note .ad-pin { opacity: 1; transform: none; }

/* The fork: choose an episode */
.fork { padding: 14vh 0 4vh; border-top: 1px solid var(--rule); }
.fork-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fork-card { display: grid; gap: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; padding: 14px 14px 18px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.fork-card:hover { transform: translateY(-4px); }
.fork-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.fork-card span { color: var(--muted); margin-top: 6px; }
.fork-card b { font-size: var(--fs-lead); font-weight: 500; letter-spacing: 0; }
.fork-card p { color: var(--muted); font-size: var(--fs-body); }
/* the card reads as a button: a solid call to action, and the whole card answers the pointer */
.fork-card i.fork-cta { justify-self: start; font-style: normal; margin-top: var(--s1); padding: 10px 16px; border-radius: 2px; background: var(--ink); color: var(--paper); transition: background .2s; }
.fork-card:hover, .fork-card:focus-visible { border-color: var(--ink); }
.fork-card:hover i.fork-cta, .fork-card:focus-visible i.fork-cta, .fork-card.on i.fork-cta { background: var(--accent); }
.ep-act { border-top: 1px solid var(--rule); }

@media (max-width: 760px) {
  .ep-duo, .fork-cards { grid-template-columns: 1fr; }
  .stills.stills-even { grid-template-columns: 1fr 1fr; }
}

/* What Rakhi means, under the big idea */
.rakhi-means { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6vh; max-width: 1100px; }
.rakhi-means > div { padding: 22px 24px; border-radius: 4px; display: grid; gap: 10px; }
.rakhi-means p:not(.idea-k) { font-size: var(--fs-body); line-height: 1.55; }

/* Each episode's process opens right under the cards, and closes again */
.ep-panel { display: none; }
.ep-panel.open { display: block; animation: ep-open .7s var(--ease); }
@keyframes ep-open { from { opacity: 0; transform: translateY(20px); } }
.ep-panel-head { padding: 12vh 0 8vh; text-align: center; border-top: 1px solid var(--rule); }
.fork-card.on { outline: 2px solid var(--accent); outline-offset: 3px; }
.ep-close { display: block; margin: 6vh auto 2vh; padding: 10px 18px; border-radius: 2px; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }

/* =================== Rakhi =================== */

@media (max-width: 760px) {
  .rakhi-means { grid-template-columns: 1fr; }
  .armour-duo { height: 100%; }
}

/* The end of an episode: the other one is one click away */
.ep-next { max-width: 980px; margin: 10vh auto 4vh; display: grid; gap: 14px; }
.ep-next-k { color: var(--muted); text-align: center; }
.ep-next-card { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 22px; padding: 14px; border-radius: 4px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid var(--rule); transition: transform .5s var(--ease), border-color .4s; }
.ep-next-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.ep-next-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.ep-next-card span { display: grid; gap: 8px; }
.ep-next-card i { font-style: normal; color: var(--muted); }
.ep-next-card b { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.05; }
.ep-next-card em { font-style: normal; color: var(--ink); }
.ep-next-row { display: flex; justify-content: center; align-items: center; gap: 18px; }
.ep-next-row .ep-close { margin: 0; }
@media (max-width: 760px) { .ep-next-card { grid-template-columns: 1fr; } }

/* Nostalgia's start frames as a turning drum of cards */
.drum { position: relative; height: min(34vh, 300px); margin-top: 22px; perspective: 900px; transform-style: preserve-3d; }
.dcard { position: absolute; left: 34%; top: 0; height: 100%; aspect-ratio: 9 / 16; margin: 0; border-radius: 4px; overflow: hidden; transform-origin: 50% 50%; backface-visibility: hidden;
  transition: transform .9s var(--ease), opacity .7s var(--ease), filter .7s; }
.dcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcard figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 9px 8px; display: grid; gap: 2px; font-size: var(--fs-mono); color: #f2ede6;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); text-transform: none; }
.dcard figcaption b { font-weight: 500; color: var(--muted); font-size: var(--fs-mono); }
.dcard.cur { transform: translate3d(0, 0, 0) rotateY(0); opacity: 1; z-index: 3; }
.dcard.next { transform: translate3d(-62%, -3%, -140px) rotateY(38deg) scale(.86); opacity: .6; filter: brightness(.7); z-index: 2; }
.dcard.waiting { transform: translate3d(-95%, -5%, -260px) rotateY(55deg) scale(.74); opacity: 0; z-index: 1; }
.dcard.prev { transform: translate3d(30%, 62%, -90px) rotateX(-38deg) scale(.86); opacity: 0; z-index: 2; }
.dcard.gone { transform: translate3d(30%, 80%, -160px) rotateX(-50deg) scale(.8); opacity: 0; z-index: 0; }
@media (max-width: 760px) { .drum { display: none; } }

/* Formats: each adapt at its true shape, playable in place, labelled with where it runs */
.fmt-k { color: var(--muted); margin: 4vh 0 12px; }
.fmt-row figure { justify-content: flex-start; }
.fmt-play { position: relative; flex: 1; min-height: 0; width: 100%; padding: 0; border: 0; background: #111; border-radius: 4px; overflow: hidden; cursor: pointer; }
.fmt-play img, .fmt-play video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.fmt-play video { z-index: 2; background: #000; object-fit: contain; }
.fmt-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.24); transition: transform .4s var(--ease); }
.fmt-btn svg { width: 40%; fill: #fff; margin-left: -2%; }
.fmt-play:hover .fmt-btn { transform: translate(-50%, -50%) scale(1.12); }
.fmt-play.playing .fmt-btn { display: none; }
.fmt-row figcaption { display: grid; gap: 2px; text-transform: none; line-height: 1.4; }
.fmt-row figcaption b { color: var(--ink); font-weight: 500; }
.formats .fmt-row + .fmt-k { margin-top: 6vh; }
/* exact shapes: each frame is sized by its own ratio, and the four always fit across */
.formats .fmt-row { height: auto; align-items: flex-start; }
.formats .fmt-row figure { height: auto; aspect-ratio: auto; }
.formats .fmt-play { flex: none; width: auto; height: min(44vh, calc((100vw - 2 * var(--pad) - 48px) / 4.15)); aspect-ratio: var(--ar); }
.formats .fmt-row figcaption { width: 0; min-width: 100%; }
@media (max-width: 760px) { .formats .fmt-row { flex-wrap: wrap; } .formats .fmt-play { height: 34vh; } }

/* =================== Back at Eternal: the glass room =================== */
/* Plain panels; the location colours below belong to the cut timeline only */
.eternal-cards > div, .room, .kit > div, .look-plain figure { background: var(--paper); border: 1px solid var(--rule); }
.look-plain p { font-size: var(--fs-small); line-height: 1.5; color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* The round trip: joins, leaves, grows elsewhere, comes back */
.trip, .door, .rooms, .edit, .design { padding: 12vh 0 8vh; border-top: 1px solid var(--rule); }
.trip-line { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.trip-line::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, var(--ink) 0 20%, transparent 20% 60%, var(--accent) 60%), repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 40%, transparent) 0 6px, transparent 6px 12px); }
.trip-line li { position: relative; padding: 30px 18px 0 0; display: grid; gap: 6px; align-content: start; }
.trip-line li::before { content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 12%, transparent); }
.trip-line li.away::before { background: transparent; border: 2px dashed color-mix(in srgb, var(--ink) 55%, transparent); }
.trip-line li.home::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent); }
.trip-line .mono { color: var(--muted); }
.trip-line li.home .mono { color: var(--accent); }
.trip-line b { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.05; }
.trip-line p { font-size: var(--fs-body); color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* He isn't the only one */
.door-q { font-size: var(--fs-h1); font-weight: 500; letter-spacing: 0; line-height: 1; max-width: 22ch; margin: 0 0 6vh; }
.door-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.door-row figure, .ref-row figure, .ds-grid figure { margin: 0; }
.door-row img, .ref-row img, .ds-grid img, .room img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.door-row figcaption, .ref-row figcaption, .ds-grid figcaption { display: grid; gap: 3px; margin-top: 10px; color: var(--muted); text-transform: none; line-height: 1.45; }
.door-row figcaption b, .ref-row figcaption b, .ds-grid figcaption b { color: var(--ink); font-weight: 500; font-family: var(--sans); font-size: var(--fs-body); letter-spacing: 0; }
.stills.stills-three { grid-template-columns: repeat(3, 1fr); }

/* The chit draw: each chit, the frame it led to, and what he said */
.chit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.chit-grid figure { margin: 0; display: grid; gap: 12px; }
.chit-grid .reveal:nth-child(2) { transition-delay: .12s; } .chit-grid .reveal:nth-child(3) { transition-delay: .24s; } .chit-grid .reveal:nth-child(4) { transition-delay: .36s; }
.chit { min-height: 118px; padding: 14px 16px 16px; border-radius: 4px; background: #fbfaf7; color: #121518; font-size: 19px; letter-spacing: 0; line-height: 1.15; transform: rotate(-1.2deg); position: relative;
  background-image: linear-gradient(transparent 49.5%, rgba(0,0,0,.06) 50%, transparent 50.5%); }
.chit-grid figure:nth-child(even) .chit { transform: rotate(1deg); }
.chit i { display: block; margin-bottom: 8px; font-style: normal; color: #2C5466; }
.chit-said { background-color: #121518; color: #f1f1ee; background-image: none; }
.chit-said i { color: #9fc2d3; }
.chit-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.chit-grid figcaption { font-size: var(--fs-body); line-height: 1.4; letter-spacing: 0; }

/* People, tagged with their faces */
.person { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.9); }
.person span { display: grid; gap: 2px; }
.person b { font-weight: 500; font-size: var(--fs-body); letter-spacing: 0; }
.person i { font-style: normal; color: var(--muted); }
.pillars .face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 10px; }
.door-card { padding: 18px 20px 20px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 12px; align-content: start; }
.mini-trip { list-style: none; display: grid; gap: 8px; text-transform: none; font-size: var(--fs-mono); color: color-mix(in srgb, var(--ink) 75%, transparent); border-left: 2px solid var(--ink); padding-left: 12px; }
.mini-trip b { display: block; color: var(--ink); font-weight: 500; }
.mini-trip .home b { color: var(--accent); }
.door-said { font-size: var(--fs-body); line-height: 1.4; }

/* References + two rooms */
.ref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8vh; }
.room-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.room { padding: 14px 14px 22px; border-radius: 4px; display: grid; gap: 8px; align-content: start; }
.room img { margin-bottom: 8px; }
.room b { font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.05; }
.room p:not(.idea-k) { font-size: var(--fs-body); line-height: 1.5; color: color-mix(in srgb, var(--ink) 75%, transparent); }

/* The kit */
.kit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kit > div { padding: 16px 18px; border-radius: 4px; }
.kit ul { list-style: none; display: grid; gap: 6px; font-size: var(--fs-body); }

/* The cut: 45 shots, coloured by location */
.case-eternal { --loc-glass: #6f9bb1; --loc-cafe: #c89a5e; --loc-walk: #7fa37a; --loc-insert: #b9b2a6; --loc-past: #2a2d31; --loc-slate: #2C5466; }
.cutline-wrap { position: relative; margin-bottom: 8vh; }
.cutline-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; color: var(--muted); }
.cutline-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; background: var(--c); }
.lg-glass { --c: var(--loc-glass); } .lg-cafe { --c: var(--loc-cafe); } .lg-walk { --c: var(--loc-walk); } .lg-insert { --c: var(--loc-insert); } .lg-past { --c: var(--loc-past); } .lg-slate { --c: var(--loc-slate); }
.cutline { display: flex; gap: 2px; height: 74px; }
.cl-s { flex-basis: 0; min-width: 3px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; background: var(--c); transition: transform .3s var(--ease), filter .3s; }
.cl-s.on, .cl-s:hover, .cl-s:focus-visible { transform: scaleY(1.22); filter: brightness(1.15); outline: none; }
.cl-glass { --c: var(--loc-glass); } .cl-cafe { --c: var(--loc-cafe); } .cl-walk { --c: var(--loc-walk); } .cl-insert { --c: var(--loc-insert); } .cl-past { --c: var(--loc-past); } .cl-slate { --c: var(--loc-slate); }
.cut-arc { display: block; width: 100%; height: 46px; overflow: visible; }
.cut-arc path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.cutline-read { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; font-size: var(--fs-body); }
.cutline-read b { color: var(--muted); font-weight: 400; white-space: nowrap; }
@media (max-width: 767px) { .cutline-read { grid-template-columns: 1fr; gap: 4px; } }   /* label above its text, not squeezed beside it */
.edit-layers { grid-template-columns: repeat(3, 1fr); }

/* The design system */
.ds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 14px; }
.ds-grid .ds-wide { grid-column: span 2; }

/* The message, once more */
.eternal-finale .bi-line { margin: 2vh auto 0; }

@media (max-width: 760px) {
  .trip-line { grid-template-columns: 1fr; gap: 22px; }
  .trip-line::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--ink) 0 20%, transparent 20% 60%, var(--accent) 60%); }
  .trip-line li { padding: 0 0 0 34px; }
  .door-row, .ref-row, .room-duo, .stills.stills-three, .edit-layers { grid-template-columns: 1fr; }
  .chit-grid { grid-template-columns: 1fr 1fr; }
  .kit, .ds-grid { grid-template-columns: 1fr 1fr; }
  .cutline { height: 54px; }
}

/* Back at Eternal: three returners side by side, the Mr. Robot reference, the challenges, tools */
.door-row .door-card { grid-template-rows: auto 1fr auto; }
.ref-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 4vh; }
.ref-grid figure { margin: 0; }
.ref-grid img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.ref-grid figcaption { display: grid; gap: 3px; margin-top: 10px; color: var(--muted); text-transform: none; line-height: 1.45; }
.ref-grid figcaption b { color: var(--ink); font-weight: 500; font-family: var(--sans); font-size: var(--fs-body); letter-spacing: 0; }
.challenges { padding: 12vh 0 8vh; border-top: 1px solid var(--rule); }
.glass-hero { margin: 0 0 16px; }
.glass-hero img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 55%; border-radius: 4px; cursor: zoom-in; }
.room-trio { grid-template-columns: repeat(3, 1fr); }
.room-trio .room { padding: 20px 20px 24px; }
.design .batches-head { max-width: none; display: grid; grid-template-columns: minmax(0, 640px) auto; column-gap: 6vw; justify-content: space-between; }
.design .batches-head > :not(.tools) { grid-column: 1; }
.tools { grid-column: 2; grid-row: 1 / span 3; align-self: start; padding: 14px 18px; border-radius: 4px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 4px; min-width: 210px; }
.tools dt { color: var(--muted); margin-bottom: 4px; }
.tools dd { color: var(--ink); }
@media (max-width: 760px) {
  .ref-grid { grid-template-columns: 1fr 1fr; }
  .room-trio { grid-template-columns: 1fr; }
  .glass-hero img { aspect-ratio: 16 / 9; }
  .design .batches-head { grid-template-columns: 1fr; }
  .tools { grid-column: 1; grid-row: auto; }
}

/* A YouTube film the page drives: the player can't take the mouse, a clear layer over it pauses
   and plays, and a slim glass bar along the bottom scrubs, mutes and goes full screen */
.film.yt-driven iframe { z-index: 4; pointer-events: none; background: #000; }   /* YouTube swaps its own iframe in for the host */
.yt-ui { position: absolute; inset: 0; z-index: 5; }
.yt-shield { position: absolute; inset: 0; }
.yt-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 2px; color: #fff;
  background: rgba(20, 24, 28, .38);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--ease); }
.film:hover .yt-bar, .film.yt-paused .yt-bar, .yt-bar:focus-within { opacity: 1; transform: none; }
.yt-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; flex: none; }
.yt-btn:hover, .yt-btn:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.yt-btn svg { width: 18px; height: 18px; fill: #fff; }
.yt-time, .yt-dur { font-size: var(--fs-mono); min-width: 34px; text-align: center; opacity: .9; }
.yt-track { position: relative; flex: 1; height: 18px; cursor: pointer; display: flex; align-items: center; }
.yt-track::before { content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); }
.yt-fill { position: absolute; left: 0; height: 3px; border-radius: 3px; background: #fff; }
.yt-knob { position: absolute; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .25s var(--ease); }
.yt-track:hover .yt-knob, .yt-track:focus-visible .yt-knob { transform: scale(1); }
@media (max-width: 760px) { .yt-bar { opacity: 1; transform: none; left: 8px; right: 8px; bottom: 8px; gap: 6px; padding: 6px 10px; } .yt-dur { display: none; } }

/* Full screen, for every film: real full screen where the browser allows it, otherwise the film
   fills the whole window. Either way: black around it, the picture whole, no rounded corners. */
.fs-btn { position: absolute; top: 12px; right: 12px; z-index: 6; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(20, 24, 28, .4);
  opacity: 0; transition: opacity .3s, transform .3s var(--ease); }
.fs-btn svg { width: 18px; height: 18px; }
.film:hover .fs-btn, .fmt-play:hover .fs-btn, .fs-btn:focus-visible, .is-full .fs-btn, :fullscreen .fs-btn { opacity: 1; }
.fs-btn:hover { transform: scale(1.08); }
@media (hover: none) { .fs-btn { opacity: 1; } }
.is-full, .film:fullscreen, .fmt-play:fullscreen {
  /* pinned to all four edges rather than sized in screen units, which can come out short in some browsers and leave a bar below */
  position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important;
  aspect-ratio: auto !important; margin: 0 !important; border-radius: 0 !important; transform: none !important; background: #000 !important; z-index: 150; }
.is-full video, .is-full iframe, :fullscreen > video, :fullscreen > iframe { object-fit: contain !important; border-radius: 0 !important; }
/* and whatever shows around the film in full screen is black, never the page */
.film:fullscreen::backdrop, .fmt-play:fullscreen::backdrop { background: #000; }
html:has(.film:fullscreen, .fmt-play:fullscreen, .is-full), html:has(.is-full) body { background: #000; }
.is-full video, .is-full iframe, :fullscreen > video, :fullscreen > iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.is-full .film-preview, .is-full .film-shade, :fullscreen .film-shade { display: none; }
html.has-full, html.has-full body { overflow: hidden; }
html.has-full main { z-index: 150; }
html.has-full .topbar, html.has-full .ch-rail, html.has-full .grain { visibility: hidden; }

/* =================== Valentine's Day =================== */
/* the cut timeline's chapter colours: greys for the guide, the site's red for the reveal */
.case-vday { --vd-h: #b9b9b9; --vd-g: #e3e3e3; --vd-1: #8c8c8c; --vd-2: #6f6f6f; --vd-3: #545454; --vd-4: #3a3a3a; --vd-5: #222; --vd-r: var(--accent); --vd-e: #B8655E; }
.vd-cards { grid-template-columns: repeat(3, 1fr); max-width: none; }
@media (max-width: 900px) { .vd-cards { grid-template-columns: 1fr; } }
.vd-refs .vd-cards { grid-template-columns: minmax(0, 620px); }
.vd-cards > div, .vd-dir > div, .vd-crew > div { background: var(--paper); border: 1px solid var(--rule); }

/* The opening: title and facts beside the film, at its true vertical shape */
/* a vertical film, as big as the wide ones: the frame is 16:9 and the film sits whole in the middle,
   over a blurred, darkened copy of its own poster. On a phone it's simply the vertical film, full width. */
.film-vert { aspect-ratio: 16 / 9; width: 100%; }
.film-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(40px) brightness(.55); transform: scale(1.15); }
.film-hero.film-vert .film-preview { object-fit: contain; transform: none; }
.film-hero.film-vert:hover .film-preview { transform: none; }
.film-vert video.film-main { object-fit: contain; }

/* The guide: the title card and five chapters, each frame with its line */
.vd-guide, .vd-reveal, .vd-refs, .vd-directing, .vd-shoot { padding: 12vh 0 8vh; border-top: 1px solid var(--rule); }
.vd-chapters { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.vd-chapters figure, .vd-reveal-row figure, .vd-ref-row figure, .vd-bts figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.vd-chapters img, .vd-reveal-row img, .vd-ref-row img, .vd-stills img, .vd-adapted img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.vd-chapters figcaption, .vd-ref-row figcaption { display: grid; gap: 4px; }
.vd-chapters i, .vd-ref-row i { font-style: normal; color: var(--muted); }
.vd-chapters b, .vd-ref-row b { font-weight: 500; font-size: var(--fs-body); letter-spacing: 0; line-height: 1.15; }
.vd-chapters span, .vd-ref-row span { font-size: var(--fs-small); line-height: 1.4; color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* The reveal */
.vd-reveal-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-reveal-row figcaption { color: var(--ink); text-transform: none; }
.vd-line { margin-top: 7vh; font-size: var(--fs-h2); font-weight: 500; letter-spacing: 0; line-height: 1.05; max-width: 24ch; }
.vd-stills.stills { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-stills figure { margin: 0; }

/* References, directing, the shoot */
.vd-ref-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; }
.vd-dir, .vd-crew { grid-template-columns: repeat(3, 1fr); }
.vd-crew { margin-top: 5vh; }
.vd-bts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vd-bts video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; background: #111; }
.vd-bts figcaption { color: var(--muted); }

/* The cut, coloured by chapter */
.lg-hook { --c: var(--vd-h); } .lg-guide { --c: var(--vd-g); } .lg-ch1 { --c: var(--vd-1); } .lg-ch2 { --c: var(--vd-2); } .lg-ch3 { --c: var(--vd-3); } .lg-ch4 { --c: var(--vd-4); } .lg-ch5 { --c: var(--vd-5); } .lg-rev { --c: var(--vd-r); } .lg-end { --c: var(--vd-e); }
.cl-hook { --c: var(--vd-h); } .cl-guide { --c: var(--vd-g); } .cl-ch1 { --c: var(--vd-1); } .cl-ch2 { --c: var(--vd-2); } .cl-ch3 { --c: var(--vd-3); } .cl-ch4 { --c: var(--vd-4); } .cl-ch5 { --c: var(--vd-5); } .cl-rev { --c: var(--vd-r); } .cl-end { --c: var(--vd-e); }

/* The end card */
.vd-finale .bi-line { margin: 2vh auto 5vh; }
.vd-end { display: flex; justify-content: center; gap: 16px; }
.vd-end img { width: min(30vw, 300px); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 4px; cursor: zoom-in; }

@media (max-width: 900px) {
  .vd-chapters { grid-template-columns: repeat(3, 1fr); }
  .vd-stills.stills, .vd-bts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .film-vert { aspect-ratio: 9 / 16; }
  .film-vert .film-backdrop { display: none; }
  .film-hero.film-vert .film-preview { object-fit: cover; }
  .vd-chapters, .vd-reveal-row { grid-template-columns: repeat(2, 1fr); }
  .vd-ref-row, .vd-dir, .vd-crew { grid-template-columns: 1fr; }
  .vd-end img { width: 42vw; }
}

/* Valentine's Day: the team, the references, the day, the edit */
.vd-team { padding: 12vh 0 8vh; border-top: 1px solid var(--rule); }
.team-chart { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; }
.tc-row { display: flex; justify-content: center; gap: 14px; position: relative; padding-top: 34px; width: 100%; }
.tc-row:first-child { padding-top: 0; }
.tc-row:not(:first-child)::before { content: ''; position: absolute; left: 50%; top: 0; height: 34px; width: 1px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.tc-crew::after { content: ''; position: absolute; top: 17px; left: 12.5%; right: 12.5%; height: 1px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.tc-crew .tc-card { flex: 1 1 0; min-width: 0; max-width: 300px; }   /* the four share the row instead of overflowing it */
.tc-card { margin: 0; width: 330px; padding: 12px; border-radius: 4px; display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: start; text-align: left; position: relative;
  background: var(--paper); border: 1px solid var(--rule); }
.tc-crew .tc-card::before { content: ''; position: absolute; left: 50%; top: -17px; height: 17px; width: 1px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.tc-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; filter: grayscale(1); }
.tc-card figcaption { display: grid; gap: 4px; }
.tc-card i { font-style: normal; color: var(--muted); }
.tc-card b { font-weight: 500; font-size: var(--fs-body); letter-spacing: 0; }
.tc-card span { font-size: var(--fs-small); line-height: 1.4; color: color-mix(in srgb, var(--ink) 72%, transparent); }

.vd-refgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 4vh; align-items: start; }
.vd-refgrid-wide { grid-template-columns: 1fr 1fr; }
.vd-refgrid figure, .vd-adapted figure { margin: 0; }
.vd-refgrid img { display: block; width: 100%; height: clamp(180px, 22vw, 320px); object-fit: cover; object-position: 50% 30%; border-radius: 4px; cursor: zoom-in; filter: grayscale(.15); }
.vd-adapted { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1000px; margin-bottom: 5vh; }
.vd-adapted figcaption { display: grid; gap: 2px; margin-top: 10px; color: var(--muted); text-transform: none; line-height: 1.4; }
.vd-adapted figcaption b { color: var(--ink); font-weight: 500; font-family: var(--sans); font-size: var(--fs-body); letter-spacing: 0; }

.vd-day { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 0 0 6vh; border-top: 2px solid var(--ink); }
.vd-day li { padding: 14px 14px 0 0; display: grid; gap: 6px; text-transform: none; font-size: var(--fs-mono); line-height: 1.45; color: color-mix(in srgb, var(--ink) 72%, transparent); position: relative; }
.vd-day li::before { content: ''; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.vd-day li.hot::before { background: var(--accent); }
.vd-day b { color: var(--ink); font-weight: 500; font-size: var(--fs-small); }
.vd-edit { grid-template-columns: repeat(3, 1fr); margin-bottom: 7vh; }
.vd-edit > div { background: var(--paper); border: 1px solid var(--rule); }

/* Narrower screens: the chart becomes an indented tree, so every crew member visibly hangs from Lakshay,
   not from whoever happens to be first in the stack. Each card draws its own branch to the spine. */
@media (max-width: 1100px) {
  .team-chart { justify-items: stretch; --line: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
  .tc-row { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 10px; }
  .tc-row:not(:first-child)::before, .tc-crew::after { display: none; }
  .tc-mid { padding-left: 28px; }
  .tc-crew { padding-left: 56px; }
  .tc-card, .tc-crew .tc-card { width: auto; max-width: 520px; flex: none; }
  .tc-mid .tc-card::before, .tc-crew .tc-card::before { content: ''; position: absolute; left: -16px; top: -10px; width: 12px; height: calc(50% + 10px); background: none; border-left: var(--line); border-bottom: var(--line); }
  .tc-crew .tc-card:not(:last-child)::after { content: ''; position: absolute; left: -16px; top: 50%; bottom: -10px; border-left: var(--line); }
  .tc-top .tc-card::after, .tc-mid .tc-card::after { content: ''; position: absolute; left: 12px; top: 100%; height: 10px; border-left: var(--line); }
}
@media (max-width: 900px) { .vd-day { grid-template-columns: repeat(3, 1fr); row-gap: 22px; } }
@media (max-width: 760px) {
  .tc-card { width: 100%; max-width: 320px; }
  .vd-refgrid, .vd-refgrid-wide, .vd-edit { grid-template-columns: 1fr; }
  .vd-adapted { grid-template-columns: repeat(2, 1fr); }
  .vd-day { grid-template-columns: 1fr 1fr; }
}

/* The control bar inside the formats: smaller boxes, so a compact bar */
.fmt-play .yt-ui { z-index: 3; }
.fmt-play .yt-bar { left: 6px; right: 6px; bottom: 6px; gap: 4px; padding: 4px 8px; }
.fmt-play .yt-btn { width: 24px; height: 24px; }
.fmt-play .yt-btn svg { width: 15px; height: 15px; }
.fmt-play .yt-time, .fmt-play .yt-dur { display: none; }
.fmt-play:hover .yt-bar, .fmt-play.yt-paused .yt-bar { opacity: 1; transform: none; }
.film-main { cursor: none; }

/* ---------- Skip a long section ---------- */
.ch-skip { position: absolute; right: var(--pad); bottom: 16px; z-index: 6; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s; }
.ch-skip:hover, .ch-skip:focus-visible { color: var(--ink); border-color: var(--ink); }
.ch-skip[hidden] { display: none; }
/* on a phone it sits in the same corner as on a laptop; the stage keeps a strip clear for it at the bottom */
@media (max-width: 767px) {
  .ch-skip { bottom: 12px; padding: 5px 10px; }
  .ch-stage, .bite-stage { padding-bottom: 54px !important; }
}

/* ---------- The cut, with a frame for every shot ---------- */
.cutline.has-thumbs { height: clamp(96px, 12vw, 160px); gap: 2px; }
.cutline.has-thumbs .cl-s { position: relative; overflow: hidden; border-top: 4px solid var(--c); background: #ccc; transition: flex-grow .5s var(--ease); }
.cutline.has-thumbs .cl-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: filter .3s; }
.cutline.has-thumbs .cl-s.on, .cutline.has-thumbs .cl-s:hover, .cutline.has-thumbs .cl-s:focus-visible { transform: none; filter: none; flex-grow: calc(var(--w) * 4 + 4); min-width: 96px; }
.cutline.has-thumbs .cl-s:hover img, .cutline.has-thumbs .cl-s.on img { filter: none; }
@media (max-width: 767px) { .cutline.has-thumbs { height: 84px; } .cutline.has-thumbs .cl-s.on, .cutline.has-thumbs .cl-s:hover { min-width: 56px; } }

/* the gliding pointer moves with the scroll, so it mustn't also animate on its own */
.v-frame.glide .v-pin { transition: opacity .4s; }
.v-frame.glide .v-focus { transition: opacity .5s; }
.v-frame.glide .v-pin-l { transition: none; }

/* =================== Quick Chat =================== */
/* builds on the Valentine's Day layout; the cut timeline's colours follow the route out of the office */
.case-qc { --qc-desk: #b9b9b9; --qc-stairs: #6f6f6f; --qc-walk: #3a3a3a; --qc-lift: #141414; }
.lg-desk { --c: var(--qc-desk); } .lg-stairs { --c: var(--qc-stairs); } .lg-walk { --c: var(--qc-walk); } .lg-lift { --c: var(--qc-lift); }
.cl-desk { --c: var(--qc-desk); } .cl-stairs { --c: var(--qc-stairs); } .cl-walk { --c: var(--qc-walk); } .cl-lift { --c: var(--qc-lift); }
/* a vertical film's opening (Valentine's Day, Quick Chat): the film at its own 9:16 shape on the right,
   the title, logline and facts beside it; on a phone, everything stacks */
.vert-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--pad) * 2); align-items: start; }
.vert-hero .c-head { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 3vh; }
.vert-top { display: contents; }
.vert-top .film-hero { grid-column: 2; grid-row: 1 / span 2; margin: 3vh 0 0; width: auto; height: min(calc(100svh - 96px - 3vh - 6vh), 900px); aspect-ratio: 9 / 16; }
.vert-top .c-facts { grid-column: 1; grid-row: 2; align-self: end; margin-top: 4vh; }
@media (max-width: 767px) {
  .vert-hero { grid-template-columns: 1fr; }
  .vert-top .film-hero { grid-column: 1; grid-row: auto; width: 100%; height: auto; }
  .vert-top .c-facts { grid-row: auto; grid-template-columns: 1fr; }
}
/* the six episodes: the one this page is about is the active one, in red */
.qc-series figure.is-this .qc-ep { outline: 2px solid var(--accent); outline-offset: 3px; }
.qc-series .qc-ep img { cursor: pointer; }
.qc-series figure.is-this i { color: var(--accent); }
/* stills: four, two by two, cropped above the subtitles */
.qc-stills.stills { grid-template-columns: 1fr 1fr; }
.qc-stills figure { margin: 0; }
.qc-stills img { aspect-ratio: 4 / 5; object-fit: cover; }
.qc-edit { grid-template-columns: repeat(2, 1fr); }
/* the rest of the series, to watch in place */
.qc-eps { padding: 8vh 0 8vh; border-top: 1px solid var(--rule); }
.qc-eps .c-label { margin-bottom: var(--s5); }
.qc-eps-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.qc-eps-row figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.qc-ep.film { aspect-ratio: 9 / 16; }
.qc-ep .film-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 56px; transform: translate(-50%, -50%); }
.qc-ep:hover .film-play { transform: translate(-50%, -50%) scale(1.06); }
.qc-ep video.film-main { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; background: #000; object-fit: contain; }
.qc-ep.playing .film-shade, .qc-ep.playing .film-play { display: none; }
.qc-ep .yt-bar { left: 6px; right: 6px; bottom: 6px; gap: 4px; padding: 4px 8px; }
.qc-ep .yt-dur { display: none; }
.qc-eps-row figcaption { display: grid; gap: 4px; }
.qc-eps-row i { font-style: normal; color: var(--muted); }
.qc-eps-row b { font-weight: 500; font-size: var(--fs-body); letter-spacing: 0; line-height: 1.15; }
@media (max-width: 900px) { .qc-eps-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .qc-eps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qc-edit { grid-template-columns: 1fr; } }