/* ==========================================================================
   Qalay Dimdim — Making of (standalone draft; base copied from workflow-amed). Builds on /style.css?v=91803dcf
   ========================================================================== */

figure { margin: 0; }
figure img { width: 100%; height: auto; background: var(--ink); }
figcaption { color: var(--dim); font-size: 10px; letter-spacing: .1em; margin-top: 8px; }
[data-zoom] { cursor: zoom-in; }
b { font-weight: 700; color: var(--fg); }

.wf-draft { margin-left: 18px; padding: 4px 8px; border: 1px solid var(--accent); color: var(--accent); font-size: 10px; letter-spacing: .2em; }

/* ---------- hero ---------- */
.wf-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 72px);
  padding: clamp(36px, 5vw, 80px) var(--g) clamp(28px, 3vw, 48px); align-items: end;
}
.wf-title { font-size: clamp(88px, 16vw, 290px); margin: 18px 0 0 -.05em; display: flex; align-items: flex-end; gap: .12em; flex-wrap: wrap; }
.wf-title .sub { font-size: .12em; line-height: .95; letter-spacing: -.02em; color: var(--accent); padding-bottom: .35em; }
.wf-hero .lede { max-width: 58ch; margin: clamp(20px, 2.6vw, 34px) 0 0; }
.stack { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; max-width: 760px; }
.stack li { border-top: 1px solid var(--line); padding: 10px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.stack b { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.stack span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.phone { position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink); }
.phone > img, .phone > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* full screen: show the whole 9:16 frame with black bars, never crop */
video:fullscreen { object-fit: contain !important; background: #000; }
video:-webkit-full-screen { object-fit: contain !important; background: #000; }
.phone > video[data-auto] { opacity: 0; transition: opacity var(--fade); }
.phone > video.is-live { opacity: 1; }
.wf-hero-film { display: grid; gap: 16px; justify-items: start; max-width: 290px; justify-self: end; width: 100%; }

.wf-stats {
  list-style: none; margin: 0; padding: 20px var(--g); display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.wf-stats li { display: flex; flex-direction: column; gap: 4px; }
.wf-stats b { font-family: var(--f-head); font-style: italic; font-weight: 900; font-size: clamp(32px, 4vw, 64px); line-height: .9; letter-spacing: -.03em; }
.wf-stats span { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim); }

/* ---------- pipeline (sticky stage nav) ---------- */
.wf-pipe { position: sticky; top: var(--bar-h); z-index: 40; background: rgba(0,0,0,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.wf-pipe ol { list-style: none; margin: 0; padding: 0 var(--g); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wf-pipe a { display: flex; gap: 10px; align-items: baseline; padding: 14px 8px 14px 0; color: var(--dim); }
.wf-pipe .n { font-family: var(--f-mono); font-size: 10px; }
.wf-pipe .t { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; }
.wf-pipe a:hover, .wf-pipe a.is-on { color: var(--fg); }
.wf-pipe a.is-on .n { color: var(--accent); }
.wf-pipe-bar { height: 1px; background: var(--line); }
.wf-pipe-bar i { display: block; height: 1px; width: 0; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ---------- stage ---------- */
.stage { padding: clamp(48px, 6vw, 96px) var(--g) 0; scroll-margin-top: calc(var(--bar-h) + 50px); }
.stage-head { display: grid; grid-template-columns: minmax(60px, 1fr) minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(20px, 3vw, 48px); align-items: end; margin-bottom: clamp(22px, 2.6vw, 40px); }
.stage-n { font-family: var(--f-head); font-style: italic; font-weight: 900; font-size: clamp(40px, 5vw, 90px); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--accent); align-self: start; }
.stage-head .head { font-size: clamp(34px, 4.8vw, 86px); margin-top: 10px; }
.stage-copy { margin: 0; max-width: 56ch; font-size: clamp(14px, 1.08vw, 16px); line-height: 1.7; color: #cfcec8; }

.evo-arrow { font-family: var(--f-mono); color: var(--accent); align-self: center; text-align: center; font-size: 14px; }

/* 01 evolution strip: one row, read left to right */
.evo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 22px minmax(0, 2.6fr) 22px repeat(6, minmax(0, 1fr)) 22px minmax(0, 2.4fr); gap: 6px; align-items: center; }
.evo img { aspect-ratio: 9 / 16; object-fit: cover; }
.evo .off img { filter: grayscale(.9) brightness(.6); transition: filter .3s; }
.evo .off:hover img { filter: none; }
.evo .logo img { aspect-ratio: auto; object-fit: contain; background: #000; }
.evo .pick { position: relative; outline: 1px solid var(--accent); outline-offset: 4px; }
.pick-tag { position: absolute; top: 8px; left: 8px; background: var(--accent); color: #000; padding: 3px 7px; font-size: 9px; letter-spacing: .2em; }
.evo-key { display: grid; grid-template-columns: 3.2fr 2.9fr 6.4fr 2.6fr; gap: 6px; margin-top: 14px; font-size: 10px; letter-spacing: .14em; }
.evo-key span { border-top: 1px solid var(--line); padding-top: 8px; }
.evo-key .acc { border-top-color: var(--accent); }

/* 02 bento */
.bento { display: grid; gap: clamp(6px, .8vw, 12px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "turn turn turn turn turn turn turn hq hq phone phone phone"
    "crew crew crew crew crew crew van van van van van van"; }
.bento figure { position: relative; overflow: hidden; background: var(--ink); min-height: 0; }
.bento img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento figcaption { position: absolute; left: 10px; bottom: 8px; margin: 0; color: var(--fg); text-shadow: 0 0 6px rgba(0,0,0,.8); background: rgba(0,0,0,.45); padding: 3px 6px; }
.b-turn { grid-area: turn; aspect-ratio: 2752 / 1536; }
.b-crew { grid-area: crew; aspect-ratio: 2752 / 1536; }
.b-hq { grid-area: hq; }
.b-phone { grid-area: phone; }
.b-van { grid-area: van; aspect-ratio: 2752 / 1536; }
.b-box { grid-area: box; }
.b-hq img, .b-phone img { position: absolute; inset: 0; }
.b-box img { object-position: 50% 62%; }

/* 03 board -> grid -> extract */
.flow3 { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); gap: clamp(8px, 1.4vw, 22px); align-items: start; }
.flow3 > figure > img, .flow3 .ba { aspect-ratio: 9 / 16; object-fit: cover; }
.flow3 .evo-arrow { margin-top: 40%; }
.ba { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; background: var(--ink); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-top { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.ba-line::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; color: var(--accent); border: 1px solid var(--accent); font-size: 9px; padding: 6px 7px; white-space: nowrap; font-family: var(--f-mono); }
.ba-l, .ba-r { position: absolute; top: 10px; font-size: 9px; letter-spacing: .2em; text-shadow: 0 0 6px #000; }
.ba-l { left: 10px; } .ba-r { right: 10px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

.prompt-peek { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prompt-peek summary { cursor: pointer; padding: 16px 0; list-style: none; font-size: 11px; }
.prompt-peek summary::-webkit-details-marker { display: none; }
.prompt-peek[open] summary .dim { visibility: hidden; }
.prompt-peek .prompt { margin: 0 0 20px; max-width: 900px; }

.prompt { margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--accent); font-family: var(--f-mono); font-size: 12px; line-height: 1.7; color: #cfcec8; letter-spacing: 0; }
.prompt p { margin: 0 0 8px; }
.prompt i { font-style: normal; color: var(--accent); }

/* 04 animation */
.anim { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 3.4vw, 60px); align-items: start; }
.take { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(16px, 2vw, 32px); align-items: start; }
.take-vid { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ink); width: 100%; }
.take-vid img, .take-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.take-vid video { opacity: 0; transition: opacity var(--fade); }
.take-vid video.is-live { opacity: 1; }
.snd { position: absolute; right: 8px; bottom: 8px; z-index: 2; background: rgba(0,0,0,.7); border: 1px solid var(--line); padding: 5px 8px; font-size: 9px; letter-spacing: .18em; }
.snd[aria-pressed="true"] { color: #000; background: var(--accent); border-color: var(--accent); }
.take-meta { color: var(--dim); margin: 0 0 14px; }
.ku-line { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.ku { font-family: "Noto Sans Arabic", var(--f-body); font-size: 17px; line-height: 1.6; color: var(--fg); }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }

/* 05 sound & edit */
.se { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: end; padding-bottom: clamp(48px, 6vw, 96px); }
.cuts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cuts li { display: grid; grid-template-columns: 40px 1fr 44px; gap: 14px; align-items: center; }
.cuts i { display: block; height: 10px; width: var(--w); background: var(--faint); }
.cuts .is-final i { background: var(--accent); box-shadow: 0 0 10px rgba(169,213,255,.5); }
.cuts .is-final .mono { color: var(--accent); }
.mix { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.mix li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mix .mono { color: var(--dim); font-size: 10px; padding-top: 2px; }
.phone.big { max-width: 300px; justify-self: end; }
.phone video[data-player] { z-index: 1; opacity: 0; pointer-events: none; }
.phone.is-playing video[data-player] { opacity: 1; pointer-events: auto; }
.phone.is-playing .final-play { display: none; }
.final-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: linear-gradient(transparent 50%, rgba(0,0,0,.5)); }
.final-play .tri { width: 0; height: 0; border-left: 34px solid var(--fg); border-top: 22px solid transparent; border-bottom: 22px solid transparent; transition: border-color .2s; }
.final-play:hover .tri { border-left-color: var(--accent); }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.94); display: grid; place-items: center; padding: 56px 16px 16px; cursor: zoom-out; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: calc(100svh - 72px); width: auto; height: auto; object-fit: contain; }
.lb-x { position: absolute; top: 16px; right: var(--g); font-size: 10px; letter-spacing: .2em; color: var(--fg); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .stage-head { grid-template-columns: minmax(50px, auto) minmax(0, 1fr); }
  .stage-copy { grid-column: 2; }
  .anim { grid-template-columns: 1fr; }
  .minis { grid-template-columns: repeat(2, minmax(0, 260px)); }
}
@media (max-width: 860px) {
  .wf-draft { margin-left: auto; }
  .wf-hero { grid-template-columns: 1fr; }
  .wf-hero-film { justify-self: start; max-width: 240px; }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-stats { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .wf-pipe ol { display: flex; overflow-x: auto; scrollbar-width: none; gap: 22px; }
  .wf-pipe ol::-webkit-scrollbar { display: none; }
  /* evolution strip scrolls sideways on small screens */
  .evo { grid-template-columns: repeat(3, 70px) 18px 150px 18px repeat(6, 70px) 18px 150px; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: thin; }
  .evo-key { grid-template-columns: 1fr; }
  .evo-key span { border-top: 0; padding-top: 0; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "turn turn" "crew crew" "van van" "hq phone"; }
  .b-hq, .b-phone { aspect-ratio: 9 / 16; }
  .flow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow3 .evo-arrow { display: none; }
  .take { grid-template-columns: 1fr; }
  .take-vid { max-width: 360px; }
  .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .se { grid-template-columns: 1fr; }
  .phone.big { justify-self: start; }
}
@media (max-width: 520px) {
  .stage-head { grid-template-columns: 1fr; }
  .stage-copy { grid-column: auto; }
  .flow3 { grid-template-columns: 1fr 1fr; }
  .flow3 > figure:last-child { grid-column: span 2; max-width: 300px; }
  .mix li { grid-template-columns: 80px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .phone > video[data-auto], .take-vid video { display: none; }
}

/* ==========================================================================
   Dimdim additions: 16:9 film framing and breakdown layouts
   ========================================================================== */
.film { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.film > img, .film > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film > video[data-auto] { opacity: 0; transition: opacity var(--fade); }
.film > video.is-live { opacity: 1; }
.film video[data-player] { z-index: 1; opacity: 0; pointer-events: none; object-fit: contain; background: #000; }
.film.is-playing video[data-player] { opacity: 1; pointer-events: auto; }
.film.is-playing .final-play { display: none; }

.dd-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); }
.dd-hero .wf-title { font-size: clamp(72px, 11vw, 200px); }
.dd-hero .wf-hero-film { max-width: none; justify-self: stretch; }
.ku-title { margin: 6px 0 0; }
.ku-title .ku { font-size: clamp(22px, 2.4vw, 36px); color: var(--accent); font-weight: 600; }
.dd-hero .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-pipe ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.take-vid.wide { aspect-ratio: 16 / 9; }
.dd-sub { margin: clamp(28px, 3vw, 44px) 0 12px; }

/* 01 research */
.dd-research { display: grid; grid-template-columns: minmax(0, 2fr) 22px minmax(0, 4fr) minmax(0, 3fr); gap: clamp(10px, 1.4vw, 22px); align-items: center; }
.dd-research img { max-height: 520px; object-fit: contain; }
.dd-research .src img { background: #efe7d6; }
.dd-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.dd-docs li { padding: 11px 0; border-bottom: 1px solid var(--line); color: #cfcec8; }
.dd-docs .acc { display: inline-block; min-width: 2.2em; }

/* 02 characters */
.dd-rejects { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.dd-rejects img { aspect-ratio: 16 / 9; object-fit: cover; filter: grayscale(.9) brightness(.6); transition: filter .3s; }
.dd-rejects figure:hover img { filter: none; }
.dd-chain { display: grid; grid-template-columns: minmax(0, 3fr) 22px minmax(0, 4fr) 22px minmax(0, 4fr); gap: clamp(8px, 1.2vw, 18px); align-items: center; margin-top: 18px; }
.dd-chain .pick { position: relative; outline: 1px solid var(--accent); outline-offset: 4px; }
.dd-chain img { aspect-ratio: 16 / 10; object-fit: cover; }
.dd-chain .pick img { aspect-ratio: 3 / 2; object-fit: contain; background: #d6d6d4; }
.dd-key { grid-template-columns: 1fr 1fr; }

/* 03 castle */
.dd-castle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.dd-castle img { aspect-ratio: 16 / 9; object-fit: cover; }
.dd-ab { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: clamp(8px, 1.4vw, 22px); align-items: center; margin-top: clamp(18px, 2vw, 30px); }
.dd-wide { margin-top: clamp(18px, 2vw, 30px); }
.dd-montage { max-width: 900px; margin-bottom: 24px; }

/* 04 blocking */
.dd-ff { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dd-ff img { aspect-ratio: 16 / 9; object-fit: cover; }
.dd-ff figure:not(.pick) img { filter: saturate(.5) brightness(.75); transition: filter .3s; }
.dd-ff figure:hover img { filter: none; }
.dd-ff .pick { position: relative; outline: 1px solid var(--accent); outline-offset: 3px; }
.dd-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: clamp(28px, 3vw, 44px); }

/* 05 performance */
.dd-perf { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.dd-take { display: block; }
.dd-reflist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dd-reflist li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.dd-reflist img { aspect-ratio: 16 / 10; object-fit: cover; }
.dd-reflist .mono { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #cfcec8; }
.dd-reflist b { display: block; color: var(--accent); font-weight: 400; margin-bottom: 2px; }
.wave { display: flex; align-items: center; gap: 3px; height: 60px; justify-content: center; background: var(--ink); }
.wave i { width: 3px; background: var(--accent); height: 30%; }
.wave i:nth-child(3n) { height: 70%; } .wave i:nth-child(4n+1) { height: 45%; } .wave i:nth-child(5n) { height: 90%; }

/* 06 trailer */
.dd-player { margin: 0 auto clamp(28px, 3vw, 48px); max-width: 1200px; }
.dd-se { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

@media (max-width: 1100px) {
  .dd-perf { grid-template-columns: 1fr; }
  .dd-research { grid-template-columns: minmax(0, 2fr) 22px minmax(0, 4fr); }
  .dd-docs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; }
}
@media (max-width: 860px) {
  .dd-hero { grid-template-columns: 1fr; }
  .dd-hero .wf-hero-film { max-width: none; }
  .wf-stats { grid-template-columns: repeat(3, 1fr); }
  .dd-pipe ol { display: flex; }
  .dd-rejects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dd-chain, .dd-ab { grid-template-columns: 1fr; }
  .dd-chain .evo-arrow, .dd-ab .evo-arrow { transform: rotate(90deg); }
  .dd-castle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-ff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-split, .dd-se { grid-template-columns: 1fr; }
  .take-vid.wide { max-width: none; }
}
@media (max-width: 520px) {
  .dd-research { grid-template-columns: 1fr; }
  .dd-research .evo-arrow { transform: rotate(90deg); }
  .dd-docs { grid-template-columns: 1fr; }
  .wf-stats { grid-template-columns: repeat(2, 1fr); }
  .dd-ff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .film > video[data-auto] { display: none; }
}

/* ---------- round 2: research, boards, castle evolution, grade ---------- */
.dd-wall img { max-height: none; }
.dd-subhead { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: 16px clamp(20px, 3vw, 48px); align-items: end; margin: clamp(36px, 4vw, 64px) 0 18px; }
.dd-subhead .label { margin: 0; }
.dd-swipes { display: grid; gap: clamp(6px, .8vw, 12px); grid-template-columns: .625fr 1fr 1fr .625fr;
  grid-template-areas: "a b c d" "a e f d"; align-items: start; }
.dd-swipes .a { grid-area: a; } .dd-swipes .b { grid-area: b; } .dd-swipes .c { grid-area: c; }
.dd-swipes .d { grid-area: d; } .dd-swipes .e { grid-area: e; } .dd-swipes .f { grid-area: f; }
.dd-swipes .ba img { object-fit: cover; }
.dd-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: clamp(10px, 1.4vw, 22px); margin-top: clamp(22px, 2.6vw, 40px); align-items: start; }
.dd-pairs .pr { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4px; }
.dd-pairs .pr img { height: 150px; object-fit: cover; }
.dd-pairs .dd-docs { align-self: start; }
.dd-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.dd-boards .big { grid-column: span 3; }
.dd-boards img, .dd-board2 img { aspect-ratio: 1528 / 672; object-fit: cover; background: #0b0b0b; }
.dd-boards figcaption .ku, .dd-board2 figcaption .ku { font-family: var(--f-mono); font-size: inherit; color: var(--fg); }
.dd-board2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(22px, 2.6vw, 40px); }
.dd-evo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); }
.dd-evo figure { position: relative; }
.dd-evo img { aspect-ratio: 16 / 10; object-fit: cover; }
.dd-evo figcaption { letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; }
.dd-evo figcaption b { display: block; color: var(--accent); font-weight: 400; }
.dd-evo .off img { filter: grayscale(.85) brightness(.6); transition: filter .3s; }
.dd-evo .off:hover img { filter: none; }
.dd-evo .pick { outline: 1px solid var(--accent); outline-offset: 4px; }
.dd-road { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: clamp(36px, 4vw, 64px); }
.dd-road .stage-copy { margin: 10px 0 18px; }
.dd-plan { max-width: 420px; }
.dd-span2 { grid-column: span 2; }
.dd-span2 img { aspect-ratio: auto !important; }
.dd-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-bottom: clamp(28px, 3vw, 48px); }
@media (max-width: 1100px) {
  .dd-evo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dd-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-pairs .dd-docs { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .dd-subhead { grid-template-columns: 1fr; }
  .dd-swipes { grid-template-columns: 1fr 1fr; grid-template-areas: "b b" "c c" "e e" "f f" "a d"; }
  .dd-pairs { grid-template-columns: 1fr; }
  .dd-pairs .pr img { height: 180px; }
  .dd-boards { grid-template-columns: 1fr; }
  .dd-boards .big { grid-column: auto; }
  .dd-board2, .dd-road, .dd-grade { grid-template-columns: 1fr; }
  .dd-evo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-span2 { grid-column: auto; }
}

/* ---------- round 3: review fixes ---------- */
/* research swipes: tall columns stretch to the two rows, the four middle cells share one shape */
.dd-swipes { grid-template-columns: .62fr 1fr 1fr .62fr; align-items: stretch; }
.dd-swipes figure { display: flex; flex-direction: column; margin: 0; }
.dd-swipes figure:not(.tall) .ba { aspect-ratio: 4 / 3; }
.dd-swipes .tall .ba { flex: 1; min-height: 260px; }
/* swipe labels readable on any background; focus ring for keyboard users */
.ba-l, .ba-r { font-size: 10px; background: rgba(0, 0, 0, .6); padding: 3px 6px; text-shadow: none; top: 8px; }
.ba-l { left: 8px; } .ba-r { right: 8px; }
.ba:has(input:focus-visible) { outline: 1px solid var(--accent); outline-offset: 3px; }
.ba:has(input:focus-visible) .ba-line::after { background: var(--accent); color: #000; }
/* arrows never block clicks */
.evo-arrow { pointer-events: none; }
/* reduced motion: the take with SOUND ON is shown so the voice isn't heard over a still */
@media (prefers-reduced-motion: reduce) { .take-vid video.is-snd { display: block; opacity: 1; } }
@media (max-width: 860px) {
  .dd-swipes { grid-template-columns: 1fr 1fr; grid-template-areas: "a d" "b c" "e f"; }
  .dd-swipes .tall .ba { min-height: 0; aspect-ratio: 9 / 14; flex: none; }
  .dd-boards { grid-template-columns: 1fr 1fr; }
  .dd-boards .big { grid-column: 1 / -1; }
  .dd-span2 { grid-column: 1 / -1; }
  .dd-chain .evo-arrow, .dd-ab .evo-arrow { justify-self: center; }
  .wf-stats { grid-template-columns: repeat(5, 1fr); }
  .wf-stats b { font-size: clamp(26px, 5vw, 40px); }
  .dd-ff > :last-child { grid-column: span 2; }
}
@media (max-width: 520px) {
  .dd-swipes { grid-template-columns: 1fr; grid-template-areas: "a" "d" "b" "c" "e" "f"; }
  .dd-swipes .tall .ba { aspect-ratio: 3 / 4; }
  .dd-boards { grid-template-columns: 1fr; }
  .wf-stats { grid-template-columns: repeat(2, 1fr); }
  .wf-stats li:last-child { grid-column: 1 / -1; }
  .dd-ff > :last-child { grid-column: 1 / -1; }
  .dd-rejects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-rejects img { filter: none; }
}

/* ---------- round 4: story pass ---------- */
.dd-hero .wf-title .sub { font-size: max(14px, .16em); }
.dd-castline { max-width: 900px; margin: 0 0 clamp(20px, 2.4vw, 34px); color: var(--dim); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55; }
.dd-castline b { color: var(--fg); font-weight: 500; }
.dd-credits { margin-top: clamp(28px, 3vw, 48px); padding-top: 18px; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .16em; line-height: 1.8; }

/* ---------- round 5: clean ClickUp boards + cast spotlight ---------- */
.dd-boards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dd-boards figure { grid-column: span 3; margin: 0; }
.dd-boards img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: contain; background: #121212; }
.dd-boards .tall { grid-column: span 2; }
.dd-boards .wide { grid-column: span 4; }
.dd-boards .tall img, .dd-boards .wide img { height: clamp(260px, 34vw, 560px); aspect-ratio: auto; }
.dd-boards .dd-wide-strip { grid-column: 1 / -1; }
.dd-boards .dd-wide-strip img { aspect-ratio: 1800 / 446; }
.dd-cast-list { display: grid; gap: clamp(36px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 80px); }
.dd-cast { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(6px, .7vw, 10px); align-items: start; }
.dd-cast figure { margin: 0; position: relative; }
.dd-cast img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.dd-cast figcaption { position: absolute; left: 8px; bottom: 8px; font-size: 10px; letter-spacing: .14em; background: rgba(0, 0, 0, .6); padding: 3px 6px; }
.dd-cast-h { grid-column: 1 / -1; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.dd-cast-h h3 { margin: 0; font-size: 13px; letter-spacing: .16em; font-weight: 500; }
.dd-cast-h p { margin: 0; font-size: 11px; letter-spacing: .14em; }
.dd-cast .hero { grid-row: span 2; align-self: stretch; }
.dd-cast .hero img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.dd-cast-no { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: inherit; align-items: center; }
.dd-cast-no p { grid-column: 1 / span 4; margin: 0; font-size: 10px; letter-spacing: .16em; text-align: right; padding-right: 8px; }
.dd-cast-no img { filter: grayscale(.9) brightness(.6); transition: filter .3s; }
.dd-cast-no figure:hover img { filter: none; }
.dd-cast:nth-child(even) { grid-template-columns: 1fr 2fr; }
.dd-cast:nth-child(even) .hero { grid-column: 2; grid-row: 2 / span 2; }
.dd-cast:nth-child(even) .dd-cast-no p { grid-column: 3 / span 4; grid-row: 1; text-align: left; padding: 0 0 0 8px; }
.dd-cast:nth-child(even) .dd-cast-no figure:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.dd-cast:nth-child(even) .dd-cast-no figure:nth-of-type(2) { grid-column: 2; grid-row: 1; }
@media (max-width: 860px) {
  .dd-boards .tall, .dd-boards .wide, .dd-boards figure { grid-column: 1 / -1; }
  .dd-boards .tall img, .dd-boards .wide img { height: auto; aspect-ratio: 16 / 10; }
  .dd-cast, .dd-cast:nth-child(even) { grid-template-columns: 1fr 1fr; }
  .dd-cast .hero, .dd-cast:nth-child(even) .hero { grid-column: 1 / -1; grid-row: auto; }
  .dd-cast .hero img { position: static; aspect-ratio: 16 / 9; height: auto; }
  .dd-cast-no { grid-template-columns: 1fr 1fr; }
  .dd-cast-no p, .dd-cast:nth-child(even) .dd-cast-no p { grid-column: 1 / -1; grid-row: auto; text-align: left; padding: 6px 0 0; }
  .dd-cast:nth-child(even) .dd-cast-no figure:nth-of-type(1), .dd-cast:nth-child(even) .dd-cast-no figure:nth-of-type(2) { grid-column: auto; grid-row: auto; }
}

/* ---------- round 6: compact boards, match clip ---------- */
.dd-boards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.dd-boards figure, .dd-boards .tall, .dd-boards .wide { grid-column: auto; }
.dd-boards img, .dd-boards .tall img, .dd-boards .wide img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dd-boards figcaption { font-size: 10px; }
.dd-boards-note { font-size: 10px; letter-spacing: .14em; margin: 8px 0 clamp(36px, 4vw, 60px); }
.dd-match { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(8px, 1vw, 14px); align-items: start; margin-top: clamp(18px, 2vw, 30px); }
.dd-match figure { margin: 0; }
.dd-match .take-vid.dd-match-vid { aspect-ratio: 32 / 9; position: relative; }
.dd-match-vid .ba-l, .dd-match-vid .ba-r { position: absolute; z-index: 2; }
@media (max-width: 860px) {
  .dd-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dd-match { grid-template-columns: 1fr; }
}

/* ---------- round 7: Into 3D as four equal tiles ---------- */
.dd-castle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd-castle figure { margin: 0; grid-column: auto; }
.dd-castle img { width: 100%; display: block; aspect-ratio: 16 / 9 !important; object-fit: cover; }
@media (max-width: 520px) { .dd-castle { grid-template-columns: 1fr; } }

/* ---------- round 8: Into 3D tiles smaller, one row of four ---------- */
.dd-castle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .dd-castle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dd-castle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 03 inside the walls: base vs rebuilt town, patch map, four close-ups */
.dd-inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); align-items: start; }
.dd-inside figure, .dd-zooms figure { margin: 0; }
.dd-inside > figure > img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; }
.dd-zooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); margin-top: clamp(8px, 1vw, 14px); }
.dd-zooms .ba { aspect-ratio: 4 / 3; }
.dd-k1 { color: #eec878; } .dd-k2 { color: #78c8ee; } .dd-k3 { color: #bee88c; }
@media (max-width: 900px) { .dd-inside { grid-template-columns: 1fr; } .dd-zooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dd-zooms { grid-template-columns: 1fr; } }

/* ---------- round 8: Sarkan out, five ClickUp boards fill the row ---------- */
@media (min-width: 861px) { .dd-boards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------- round 9: Khurshid's start-to-finish block sits in the cast list ---------- */
.dd-cast-k { display: grid; gap: clamp(10px, 1.1vw, 16px); }
.dd-cast-k > * { margin: 0; }