/* Homepage intro layout (index.html): 16:9 tiles that never crop the work, a slim type column,
   and the header logo swinging like the final cradle. index.html picks the version with
   data-hv="7" data-v7="f" (V7F: still header logo; add data-hc for the swinging one). Other versions kept for later. */
/* Homepage layout versions — tiles keep the 16:9 shape of the work, so nothing is cut off */
html[data-hv] .dc2 {
  --gap: 16px; --band: 120px; --pad: 24px;
  --tw: min(calc((100vw - 2 * var(--pad) - var(--gap)) / 2), calc((100vh - var(--header-h) - 2 * var(--pad) - var(--band)) / 2 * 16 / 9));
  grid-template-columns: repeat(2, var(--tw)); grid-template-rows: auto var(--band) auto;
  justify-content: center; align-content: center; column-gap: var(--gap); row-gap: 0; padding: var(--pad);
}
html[data-hv] .dc2-tile--a { grid-column: 1; grid-row: 1; }
html[data-hv] .dc2-tile--b { grid-column: 2; grid-row: 1; }
html[data-hv] .dc2-tile--make { grid-column: 1; grid-row: 3; }
html[data-hv] .dc2-tile--final { grid-column: 2; grid-row: 3; }
html[data-hv] .dc2-gap { grid-column: 1 / -1; grid-row: 2; }
html[data-hv] .dc2-tile { aspect-ratio: 16 / 9; border-radius: 0; }
html[data-hv] .dc2-count { bottom: 6px; }
html[data-hv] .intro__cradle { transform: translateY(-14px) scale(0.2); }

/* V1 — tight grid: small logo in a slim band, captions only on the tile in focus */
html[data-hv="1"] .dc2-tile figcaption { opacity: 0; }
html[data-hv="1"] .dc2-tile.is-focus figcaption { opacity: 1; }

/* V2 — no band: four tiles meet, the small logo sits on the cross where they meet */
html[data-hv="2"] .dc2 { --band: 12px; --gap: 12px; }
html[data-hv="2"] .dc2-gap { overflow: visible; }
html[data-hv="2"] .dc2-count { display: none; }   /* the logo alone on the cross */
html[data-hv="2"] .intro__cradle { transform: scale(0.2); filter: drop-shadow(0 0 22px #0b0b0b) drop-shadow(0 0 10px #0b0b0b); }

/* V3 — full bleed: tiles almost touch the screen edges, hair-line gaps */
html[data-hv="3"] .dc2 { --gap: 6px; --pad: 6px; --band: 112px; }
html[data-hv="3"] .dc2-tile { filter: brightness(0.8) saturate(0.9); }
html[data-hv="3"] .dc2-tile.is-focus { filter: none; }
html[data-hv="3"] .intro__cradle { transform: translateY(-14px) scale(0.19); }

/* V4 — title bar: logo small and left in the band, project name + counter on the right */
html[data-hv="4"] .dc2 { --band: 76px; }
html[data-hv="4"] .intro__cradle { transform: translateX(-34vw) scale(0.17); }
html[data-hv="4"] .dc2-count { left: auto; right: calc(50% - var(--tw) - 8px); transform: none; bottom: 50%; translate: 0 50%; }

/* ---------- V5–V8: sizes live on <html> so the logo can line up with the tiles ---------- */
html[data-hv="5"], html[data-hv="6"], html[data-hv="7"], html[data-hv="8"] { --pad: 24px; --gap: 14px; --H: calc(100vh - var(--header-h) - 2 * var(--pad)); }
html[data-hv="5"] .dc2, html[data-hv="6"] .dc2, html[data-hv="7"] .dc2, html[data-hv="8"] .dc2 { padding: var(--pad); gap: var(--gap); justify-content: center; align-content: center; }
html[data-hv="5"] .dc2-tile, html[data-hv="6"] .dc2-tile, html[data-hv="7"] .dc2-tile, html[data-hv="8"] .dc2-tile { aspect-ratio: 16 / 9; }

/* V5 — one big + three small: the main animation big on the left, three stacked on the right */
html[data-hv="5"] { --band: 70px; --w: min(calc((100vw - 2 * var(--pad) - 4.6 * var(--gap)) / 4), calc((var(--H) - var(--band) - 3 * var(--gap)) / 3 * 16 / 9)); }
html[data-hv="5"] .dc2 { grid-template-columns: calc(3 * var(--w) + 3.556 * var(--gap)) var(--w); grid-template-rows: repeat(3, calc(var(--w) * 0.5625)) var(--band); }
html[data-hv="5"] .dc2-tile--a { grid-column: 1; grid-row: 1 / 4; aspect-ratio: auto; }
html[data-hv="5"] .dc2-tile--b { grid-column: 2; grid-row: 1; }
html[data-hv="5"] .dc2-tile--make { grid-column: 2; grid-row: 2; }
html[data-hv="5"] .dc2-tile--final { grid-column: 2; grid-row: 3; }
html[data-hv="5"] .dc2-gap { grid-column: 1 / -1; grid-row: 4; }
html[data-hv="5"] .intro__cradle { transform: translate(calc(-2 * var(--w) - 2.3 * var(--gap) + 110px), calc(1.5 * var(--w) * 0.5625 + 1.5 * var(--gap) - 4px)) scale(0.16); }
html[data-hv="5"] .dc2-count { left: auto; right: 0; transform: none; bottom: 50%; translate: 0 50%; }

/* V6 — filmstrip: four tiles in one row, the logo above, the project name below */
html[data-hv="6"] { --w: calc((100vw - 2 * var(--pad) - 3 * var(--gap)) / 4); }
html[data-hv="6"] .dc2 { grid-template-columns: repeat(4, var(--w)); grid-template-rows: auto 40px; }
html[data-hv="6"] .dc2-tile--a { grid-column: 1; grid-row: 1; }
html[data-hv="6"] .dc2-tile--b { grid-column: 2; grid-row: 1; }
html[data-hv="6"] .dc2-tile--make { grid-column: 3; grid-row: 1; }
html[data-hv="6"] .dc2-tile--final { grid-column: 4; grid-row: 1; }
html[data-hv="6"] .dc2-gap { grid-column: 1 / -1; grid-row: 2; }
html[data-hv="6"] .intro__cradle { transform: translateY(calc(-1 * var(--w) * 0.5625 / 2 - 120px)) scale(0.3); }

/* V7 — sidebar: logo + project name in a slim column on the left, 2×2 tiles on the right */
html[data-hv="7"] { --side: 19vw; --w: min(calc((100vw - 2 * var(--pad) - var(--side) - 2 * var(--gap)) / 2), calc((var(--H) - var(--gap)) / 2 * 16 / 9)); }
html[data-hv="7"] .dc2 { grid-template-columns: var(--side) var(--w) var(--w); grid-template-rows: auto auto; }
html[data-hv="7"] .dc2-tile--a { grid-column: 2; grid-row: 1; }
html[data-hv="7"] .dc2-tile--b { grid-column: 3; grid-row: 1; }
html[data-hv="7"] .dc2-tile--make { grid-column: 2; grid-row: 2; }
html[data-hv="7"] .dc2-tile--final { grid-column: 3; grid-row: 2; }
html[data-hv="7"] .dc2-gap { grid-column: 1; grid-row: 1 / 3; }
html[data-hv="7"] .intro__cradle { transform: translate(calc(-1 * (var(--side) + 2 * var(--w) + 2 * var(--gap)) / 2 + var(--side) / 2), -6vh) scale(0.15); }
html[data-hv="7"] .dc2-count { left: 50%; bottom: auto; top: calc(50% + 2vh); flex-direction: column; gap: 6px; }

/* V8 — centre stage: the main animation big on top, three small below, logo between */
html[data-hv="8"] { --band: 90px; --B: min(calc(100vw - 2 * var(--pad)), calc((var(--H) - var(--band) - 2 * var(--gap)) * 4 / 3)); --s: calc((var(--B) - 2 * var(--gap)) / 3); }
html[data-hv="8"] .dc2 { grid-template-columns: repeat(3, var(--s)); grid-template-rows: auto var(--band) auto; row-gap: 0; }
html[data-hv="8"] .dc2-tile--a { grid-column: 1 / -1; grid-row: 1; }
html[data-hv="8"] .dc2-tile--b { grid-column: 1; grid-row: 3; }
html[data-hv="8"] .dc2-tile--make { grid-column: 2; grid-row: 3; }
html[data-hv="8"] .dc2-tile--final { grid-column: 3; grid-row: 3; }
html[data-hv="8"] .dc2-gap { grid-column: 1 / -1; grid-row: 2; }
html[data-hv="8"] .intro__cradle { transform: translateY(calc((var(--B) - var(--s)) * 0.28125 - 12px)) scale(0.17); }
html[data-hv="8"] .dc2-count { bottom: 6px; }

/* ---------- V7 variations: one logo on screen, not three ---------- */
/* 7A — the header logo steps aside while the intro plays; the swinging logo in the sidebar is the brand */
html[data-v7="a"].has-intro .site-header .brand { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
html[data-v7="a"] .intro__cradle { transform: translate(calc(-1 * (var(--side) + 2 * var(--w) + 2 * var(--gap)) / 2 + var(--side) / 2), calc(-1 * var(--H) / 2 + 9vh)) scale(0.17); }
html[data-v7="a"] .dc2-count { top: auto; bottom: 0; left: 0; transform: none; align-items: flex-start; }

/* 7B — no swinging logo at all: the header logo is the only one; the sidebar is pure type */
html[data-v7="b"] .intro__cradle { visibility: hidden; }
html[data-v7="b"] .dc2-count { top: auto; bottom: 0; left: 0; transform: none; align-items: flex-start; gap: 10px; }
html[data-v7="b"] .dc2-n { font: 300 clamp(3rem, 6vw, 5.5rem)/1 "Six Caps", "Oswald", sans-serif; letter-spacing: 0.02em; }
html[data-v7="b"] .dc2-name { font-size: 0.8125rem; letter-spacing: 0.3em; color: #f2f2f0; }
html[data-v7="b"] .dc2-gap::before { content: "Selected work"; position: absolute; top: 0; left: 0; font: 400 0.6875rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.24em; text-transform: uppercase; color: #8a8a86; }

/* 7C — full screen: the top bar fades away during the intro, the swinging logo sits where the header logo was */
html[data-v7="c"].has-intro .site-header { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
html[data-v7="c"] .intro { inset: 0 !important; }
html[data-v7="c"] { --H: calc(100vh - 2 * var(--pad)); }
html[data-v7="c"] .intro__cradle { transform: translate(calc(-1 * (var(--side) + 2 * var(--w) + 2 * var(--gap)) / 2 + var(--side) / 2), calc(-1 * var(--H) / 2 + 7vh)) scale(0.19); }
html[data-v7="c"] .dc2-count { top: auto; bottom: 0; left: 0; transform: none; align-items: flex-start; }

/* 7D — sidebar on the right: header logo top-left, swinging logo far right, never side by side */
html[data-v7="d"] .dc2 { grid-template-columns: var(--w) var(--w) var(--side); }
html[data-v7="d"] .dc2-tile--a { grid-column: 1; } html[data-v7="d"] .dc2-tile--b { grid-column: 2; }
html[data-v7="d"] .dc2-tile--make { grid-column: 1; } html[data-v7="d"] .dc2-tile--final { grid-column: 2; }
html[data-v7="d"] .dc2-gap { grid-column: 3; grid-row: 1 / 3; }
html[data-v7="d"] .intro__cradle { transform: translate(calc((var(--side) + 2 * var(--w) + 2 * var(--gap)) / 2 - var(--side) / 2), -6vh) scale(0.15); }

/* 7E — logo column in the middle: work on both sides, header logo steps aside while the intro plays */
html[data-v7="e"] { --side: 16vw; }
html[data-v7="e"].has-intro .site-header .brand { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
html[data-v7="e"] .dc2 { grid-template-columns: var(--w) var(--side) var(--w); }
html[data-v7="e"] .dc2-tile--a { grid-column: 1; grid-row: 1; } html[data-v7="e"] .dc2-tile--b { grid-column: 3; grid-row: 1; }
html[data-v7="e"] .dc2-tile--make { grid-column: 1; grid-row: 2; } html[data-v7="e"] .dc2-tile--final { grid-column: 3; grid-row: 2; }
html[data-v7="e"] .dc2-gap { grid-column: 2; grid-row: 1 / 3; }
html[data-v7="e"] .intro__cradle { transform: translateY(-4vh) scale(0.13); }
html[data-v7="e"] .dc2-count { top: calc(50% + 3vh); align-items: center; }

/* 7F — slim type column: no swinging logo, the project name runs up the side; bigger tiles */
html[data-v7="f"] { --side: 64px; }
html[data-v7="f"] .intro__cradle { visibility: hidden; }
html[data-v7="f"] .dc2-count { top: auto; bottom: 0; left: 50%; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; flex-direction: row; gap: 14px; font-size: 0.75rem; letter-spacing: 0.32em; }
html[data-v7="f"] .dc2-name { color: #f2f2f0; }

/* ---------- Header logo = the final animation (a small Newton's cradle, 1.1 s a hit) ---------- */
html[data-hc] .site-header .brand__drip { overflow: visible; }
/* pivot = each letter's centre, 700 units above the artboard (logo user units, as in the homepage cradle) */
html[data-hc] .site-header .brand__drip .dl-l { transform-box: view-box; animation-duration: 2.2s; animation-iteration-count: infinite; animation-delay: 0s; animation-fill-mode: none; }
html[data-hc] .site-header .brand__drip .dl-l:nth-child(1) { transform-origin: 1184.8px -700px; animation-name: hc-s; }
html[data-hc] .site-header .brand__drip .dl-l:nth-child(2) { transform-origin: 1479.7px -700px; animation-name: hc-mid; }
html[data-hc] .site-header .brand__drip .dl-l:nth-child(3) { transform-origin: 1801.4px -700px; animation-name: hc-mid; animation-direction: reverse; }
html[data-hc] .site-header .brand__drip .dl-l:nth-child(4) { transform-origin: 2317.5px -700px; animation-name: hc-vo; }
@keyframes hc-s {           /* swings in, hits, waits, swings out */
  0%   { transform: rotate(12deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  25%  { transform: rotate(0deg); }
  75%  { transform: rotate(0deg); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  100% { transform: rotate(12deg); }
}
@keyframes hc-vo {
  0%, 25% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  50%  { transform: rotate(-12deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  75%, 100% { transform: rotate(0deg); }
}
@keyframes hc-mid {         /* h and u take the small knock of each hit */
  0%, 22%, 32%, 72%, 82%, 100% { transform: rotate(0deg); }
  26% { transform: rotate(-0.8deg); }
  76% { transform: rotate(0.8deg); }
}
@media (prefers-reduced-motion: reduce) { html[data-hc] .site-header .brand__drip .dl-l { animation: none; } }


/* F2 — edge to edge: hair-line gaps, tiles as big as they go */
html[data-f="2"] { --pad: 8px; --gap: 6px; --side: 52px; }
/* F3 — the type column on the right */
html[data-f="3"] .dc2 { grid-template-columns: var(--w) var(--w) var(--side); }
html[data-f="3"] .dc2-tile--a, html[data-f="3"] .dc2-tile--make { grid-column: 1; }
html[data-f="3"] .dc2-tile--b, html[data-f="3"] .dc2-tile--final { grid-column: 2; }
html[data-f="3"] .dc2-gap { grid-column: 3; }
html[data-f="3"] .dc2-count { transform: translateX(-50%); writing-mode: vertical-rl; top: 0; bottom: auto; }
/* F4 — paper: the site's off-white instead of black */
html[data-f="4"] .intro { background: #F2F2F0 !important; }
html[data-f="4"] .intro::before, html[data-f="4"] .intro::after { display: none; }
html[data-f="4"] .dc2-tile { background: #e6e6e3; filter: none !important; }
html[data-f="4"] .dc2-name { color: #1c1c1c; }
html[data-f="4"] .dc2-count { color: #1c1c1c; }

/* F5 — soft cards: more breathing room, rounded corners, a soft shadow */
html[data-f="5"] { --pad: 44px; --gap: 22px; }
html[data-f="5"] .dc2-tile { border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
/* F6 — staggered: the right column sits a little lower, like a magazine spread */
html[data-f="6"] { --gap: 14px; }
html[data-f="6"] .dc2 { align-content: start; padding-top: calc(var(--pad) + 2vh); }
html[data-f="6"] .dc2-tile--b, html[data-f="6"] .dc2-tile--final { transform: translateY(7vh); }
html[data-f="6"] { --w: min(calc((100vw - 2 * var(--pad) - var(--side) - 2 * var(--gap)) / 2), calc((var(--H) - var(--gap) - 9vh) / 2 * 16 / 9)); }
/* F7 — black & white until it moves: only the tile in focus is in colour */
html[data-f="7"] .dc2-tile { filter: grayscale(1) brightness(0.75) !important; transition: filter 1.2s ease; }
html[data-f="7"] .dc2-tile.is-focus, html[data-f="7"] .dc2-tile:has(.dc2-moves), html[data-f="7"] .dc2-tile:has(.dc2-frame) { filter: none !important; }
/* F8 — index: thin frames and a number in each corner, captions off */
html[data-f="8"] .dc2-tile { outline: 1px solid rgba(255, 255, 255, 0.22); outline-offset: 5px; }
html[data-f="8"] .dc2-tile figcaption { display: none; }
html[data-f="8"] .dc2-tile::after { position: absolute; top: 10px; right: 12px; z-index: 3; font: 400 0.6875rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.2em; color: #fff; mix-blend-mode: difference; }
html[data-f="8"] .dc2-tile--a::after { content: "01"; } html[data-f="8"] .dc2-tile--b::after { content: "02"; }
html[data-f="8"] .dc2-tile--make::after { content: "03"; } html[data-f="8"] .dc2-tile--final::after { content: "04"; }

/* ---------- Wide (like the reference): tiles fill the width, the intro scrolls ---------- */
html[data-wide] { --pad: max(24px, 4.5vw); --gap: 16px; --side: 56px; --lp: max(8px, calc(var(--pad) - var(--side) - var(--gap))); --w: calc((100vw - var(--pad) - var(--lp) - var(--side) - 2 * var(--gap)) / 2); }
html[data-wide] .intro { overflow-y: auto; overflow-x: hidden; place-items: start stretch; scrollbar-width: none; }
html[data-wide] .intro::-webkit-scrollbar { display: none; }
html[data-wide] .intro > * { grid-area: 1 / 1; }
html[data-wide] .dc2 { position: relative; inset: auto; align-content: start; padding: 3vh var(--pad) 6vh var(--lp); min-height: 100%; }
html[data-wide] .dc2-gap { position: sticky; top: 0; height: calc(100vh - var(--header-h) - 6vh); }
html[data-wide] .dc2-count { top: auto; bottom: 0; }

/* ---------- Fit: the four tiles always fill the screen exactly, on any display ----------
   The grid takes the whole space under the header (no scrolling, nothing below the fold).
   On common screens a tile stays within a few % of 16:9, so the work fills it with almost no trim. */
html[data-fit] { --pad: clamp(10px, 2.2vw, 44px); --gap: clamp(8px, 0.9vw, 16px); --side: clamp(34px, 3vw, 56px); }
html[data-fit] .dc2 {
  position: absolute; inset: 0;
  grid-template-columns: var(--side) 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--gap); padding: var(--pad) var(--pad) var(--pad) calc(var(--pad) / 2);
  justify-content: stretch; align-content: stretch;
}
html[data-fit] .dc2-tile { aspect-ratio: auto; min-height: 0; }
html[data-fit] .dc2-tile--a { grid-column: 2; grid-row: 1; } html[data-fit] .dc2-tile--b { grid-column: 3; grid-row: 1; }
html[data-fit] .dc2-tile--make { grid-column: 2; grid-row: 2; } html[data-fit] .dc2-tile--final { grid-column: 3; grid-row: 2; }
html[data-fit] .dc2-gap { grid-column: 1; grid-row: 1 / 3; }
/* Frame shape on every screen: never taller than 16:9 (so the sides of the work are never cut) and never wider
   than 2.44 : 1 (so at most a strip of plain background is trimmed top and bottom — see AIM in intro-director.js).
   On ordinary wide screens this is exactly the full-screen layout; only odd shapes get a little space around. */
html[data-fit] .intro { container-type: size; }
html[data-fit] .dc2 {
  --tw0: calc((100cqw - var(--side) - 1.5 * var(--pad) - 2 * var(--gap)) / 2);
  --th: min(calc((100cqh - 2 * var(--pad) - var(--gap)) / 2), calc(var(--tw0) * 9 / 16));
  --tw: min(var(--tw0), calc(var(--th) * 2.44));
  grid-template-columns: var(--side) var(--tw) var(--tw); grid-template-rows: var(--th) var(--th);
  justify-content: center; align-content: center;
}
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {   /* phones and upright tablets: the four tiles stack; the project name sits on top */
  html[data-fit] .dc2 {
    --tw0: calc(100cqw - 16px);
    --th: min(calc((100cqh - 76px) / 4), calc(var(--tw0) * 9 / 16));
    --tw: min(var(--tw0), calc(var(--th) * 2.44));
    grid-template-columns: var(--tw); grid-template-rows: 28px repeat(4, var(--th)); padding: 8px; gap: 8px;
    justify-content: center; align-content: center;
  }
  html[data-fit] .dc2-gap { grid-column: 1; grid-row: 1; }
  html[data-fit] .dc2-tile--a { grid-column: 1; grid-row: 2; } html[data-fit] .dc2-tile--b { grid-column: 1; grid-row: 3; }
  html[data-fit] .dc2-tile--make { grid-column: 1; grid-row: 4; } html[data-fit] .dc2-tile--final { grid-column: 1; grid-row: 5; }
  html[data-fit] .dc2-count { writing-mode: horizontal-tb; transform: none; left: 0; bottom: auto; top: 50%; translate: 0 -50%; }
}

/* Full frame: every picture and video fills its tile edge to edge (no drift). Each one's focus point in
   js/intro-director.js (AIM) keeps its main subject in view. The logo board (SVG) shows whole. */
html[data-fit] .dc2-media img, html[data-fit] .dc2-media video, html[data-fit] .dc2-flip img { object-fit: cover !important; }
html[data-fit] .dc2-media img[src$=".svg"] { object-fit: contain !important; }
html[data-fit] .dc2-media .is-drift { animation: none; transform: none; }
html[data-fit] .dc2-tile { background: #141414; }
html[data-fit] .dc2-moves .brand__fx { width: min(62%, 120vh); }

/* Header logo: now moved by the real cradle physics (js/intro-director.js copies each frame
   from the homepage cradle), so the keyframe version is switched off */
html[data-hc] .site-header .brand__drip .dl-l { animation: none !important; }

/* room for the full Fig. 00 swing: s travels about 40% of the logo's width to the left, vo the same to the right */
html[data-hc] .site-header .brand__drip--final { height: 30px; margin: 0 40px 0 30px; }   /* room on both sides for the full swing */
@media (max-width: 640px) { html[data-hc] .site-header .brand__drip--final { height: 24px; margin: 0 30px 0 24px; } }

/* the project name in the intro is a link: hover turns it orange, click opens the project */
.dc2-count { pointer-events: auto; text-decoration: none; cursor: pointer; }
.dc2-count .dc2-name { transition: color 0.25s ease; }
.dc2-count:hover .dc2-name, .dc2-count:focus-visible .dc2-name { color: var(--color-accent) !important; }
.dc2-count:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 4px; }

/* scroll mode: a small "scroll" cue at the top of the side column */
html[data-scroll] .dc2-gap::after {
  content: "Scroll ↓"; position: absolute; top: 0; left: 50%; translate: -50% 0; writing-mode: vertical-rl;
  font: 400 0.625rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.3em; text-transform: uppercase; color: #8a8a86;
  animation: scroll-cue 1.8s ease-in-out infinite;
}
@keyframes scroll-cue { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(8px); opacity: 1; } }
@media (max-width: 760px) { html[data-scroll] .dc2-gap::after { writing-mode: horizontal-tb; top: 50%; left: auto; right: 0; translate: 0 -50%; content: "Swipe ↑"; } }

/* ------------------------------------------------------------------
   Film scroll mode (html[data-scroll="film"]) — a project takes the whole
   screen like a title sequence: the shot full bleed, a huge faint word
   behind, the titles stacked in the middle. The active one is struck through.
   ------------------------------------------------------------------ */
.dc2-film { position: absolute; inset: 0; z-index: 6; background: #000; overflow: hidden; cursor: default; }
.dc2-film__bg { position: absolute; inset: 0; }
.dc2-film__bg > * {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); filter: blur(12px) brightness(.55);
  transition: opacity 1.1s ease, transform 2.4s cubic-bezier(.2, .7, .2, 1), filter 1.1s ease;
}
.dc2-film__bg > .is-on { opacity: 1; transform: scale(1); filter: blur(0) brightness(.55); }
.dc2-film__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .55) 100%); }
.dc2-film__word {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font: 200 clamp(4rem, 14vw, 15rem)/1 "Inter", sans-serif; letter-spacing: .32em; padding-left: .32em;
  text-transform: uppercase; white-space: nowrap; color: #fff; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
}
.dc2-film__list {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(1.1rem, 3.4vh, 2.2rem); padding: 0 16px; text-align: center;
}
.dc2-film__list a {
  position: relative; color: #fff; text-decoration: none; text-transform: uppercase; font: italic 300 clamp(.95rem, 1.9vw, 1.7rem)/1.1 "Inter", sans-serif;
  letter-spacing: .42em; padding-left: .42em; opacity: .62; transition: opacity .4s ease;
}
.dc2-film__list a::after {                      /* the strike-through, drawn across from the left */
  content: ""; position: absolute; left: -.4em; right: -.4em; top: 52%; height: 2px; background: #F15A23;
  transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.7, 0, .2, 1);
}
.dc2-film__list a.is-on { opacity: 1; }
.dc2-film__list a.is-on::after { transform: scaleX(1); }
.dc2-film__list a:hover { opacity: 1; }
.dc2-film__count {
  position: absolute; left: 30px; bottom: 26px; display: flex; flex-direction: column; gap: 6px;
  font: 400 .75rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-decoration: none;
}
.dc2-film__count:hover { color: #F15A23; }
html[data-scroll="film"] .dc2-film ~ .dc2-gap::after, .dc2-film__count::after { content: none; }
@media (max-width: 600px) { .dc2-film__list a { letter-spacing: .26em; padding-left: .26em; } .dc2-film__count { left: 16px; bottom: 18px; } }

/* Film mode — the project page that rises over the film (after nadiatzuo.com) */
.dc2-film.has-page .dc2-film__list, .dc2-film.has-page .dc2-film__word { opacity: 0; transition: opacity .6s ease; }
.dc2-page {
  position: absolute; inset: 0; z-index: 3; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; background: #0b0b0b; color: #fff;
  scrollbar-width: thin; scrollbar-color: #444 transparent;
}
.dc2-page__back {
  position: sticky; top: 16px; float: right; margin: 16px 24px 0 0; z-index: 2; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); border-radius: 99px; padding: 8px 14px;
  font: 400 .7rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase;
}
.dc2-page__back:hover { background: #F15A23; border-color: #F15A23; }
.dc2-page__sec { padding: 0 5vw; }
.dc2-page__title { margin: 0; padding: 48px 0 18px; font: 400 clamp(2.6rem, 7vw, 6rem)/.9 "Six Caps", "Inter", sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.dc2-page__hero > *, .dc2-page__shot > * { display: block; width: 100%; height: auto; }
.dc2-page__hero > * { aspect-ratio: 16 / 9; object-fit: cover; background: #151515; }
.dc2-page__shot > * { aspect-ratio: var(--shot, 3 / 2); object-fit: contain; background: #111; }   /* fixed boxes: a jump to a section lands exactly */
.dc2-page__bar {                                /* the coloured info bar, full bleed under the first shot */
  margin: 0 -5vw 22px; padding: 26px 5vw 30px; background: #F15A23; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px 40px;
  font: 400 .8rem/1.5 "Inter", sans-serif;
}
.dc2-page__bar b { display: block; font-size: 1.15rem; font-weight: 500; margin-bottom: 4px; }
.dc2-page__bar i { display: block; font: italic 300 .75rem/1.5 "Inter", sans-serif; opacity: .8; }
.dc2-page__bar span { display: block; }
.dc2-page__shot { margin: 16px 0 0; }
.dc2-page__end { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 64px 5vw 72px; }
.dc2-page__end a, .dc2-page__end button {
  font: 400 .8rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: #fff; text-decoration: none;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.dc2-page__end a:hover, .dc2-page__end button:hover { color: #F15A23; }
@media (max-width: 600px) { .dc2-page__bar { grid-template-columns: 1fr; } .dc2-page__back { margin: 12px 12px 0 0; } }

/* Film mode — a one-film page laid out like nadiatzuo.com/dune_prophecy:
   key art, a serif info bar, the film itself, a rule, then the credits in italics */
.dc2-page--dune { font-family: "Crimson Pro", Georgia, serif; }
.dc2-page__key { margin: 0; padding-top: 64px; }
.dc2-page__key img, .dc2-page__key video, .dc2-page__film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.dc2-page__bar--serif { display: block; margin-top: 0; padding: 30px 5vw 34px; font: 400 .95rem/1.45 "Crimson Pro", Georgia, serif; }
.dc2-page__bar--serif b { font-size: 1.35rem; font-weight: 600; margin-bottom: 2px; }
.dc2-page__bar--serif .gap { height: .9em; }
.dc2-page__bar--serif i { font: italic 400 .95rem/1.45 "Crimson Pro", Georgia, serif; opacity: 1; }
.dc2-page__film { margin: 46px 0 0; }
.dc2-page__film video { object-fit: contain; background: #000; }
.dc2-page__credits {
  margin-top: 56px; padding: 30px 8px 0; border-top: 1px solid rgba(255, 255, 255, .35);
  display: flex; flex-direction: column; gap: 2px; font: italic 400 .95rem/1.5 "Crimson Pro", Georgia, serif;
}
.dc2-page__credits b { font: 600 1.05rem/1.4 "Crimson Pro", Georgia, serif; font-style: normal; margin-bottom: 14px; }
.dc2-page--dune .dc2-page__end { margin-top: 40px; }

/* …the nadiatzuo.com/d3 look: wide cinematic frames, a quiet grey bar, credits in groups */
.dc2-page__credits p { margin: 0 0 1.1em; display: flex; flex-direction: column; gap: 2px; }
.dc2-page--d3 .dc2-page__key img, .dc2-page--d3 .dc2-page__key video, .dc2-page--d3 .dc2-page__frame img { aspect-ratio: 2.2 / 1; object-fit: cover; }
.dc2-page--d3 .dc2-page__key img, .dc2-page--d3 .dc2-page__key video { object-position: 50% 0; }   /* keeps the title on the poster */
.dc2-page--d3 .dc2-page__bar--serif { background: var(--color-accent); color: #fff; }   /* logo orange, the same as the hover colour */
.dc2-page__frame { margin: 40px 0 0; }
.dc2-page__frame img { display: block; width: 100%; background: #111; object-position: 50% 20%; }   /* faces sit high in these shots */
.dc2-page--d3 .dc2-page__bar--serif + .dc2-page__frame { margin-top: 46px; }
/* a frame with a name: the portrait on the left of the wide box, the name in serif beside it */
.dc2-page--d3 .dc2-page__frame--name { display: grid; grid-template-columns: auto 1fr; grid-template-rows: minmax(0, 1fr); aspect-ratio: 2.2 / 1; min-height: 0; background: #151515; overflow: hidden; }
.dc2-page--d3 .dc2-page__frame--name img { aspect-ratio: 4 / 5; height: 100%; width: auto; object-fit: cover; }
.dc2-page__frame--name figcaption { align-self: end; padding: 0 0 clamp(18px, 3vw, 40px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; gap: 4px; }
.dc2-page__frame--name i { font: italic 400 clamp(.9rem, 1.4vw, 1.15rem)/1.3 "Crimson Pro", Georgia, serif; opacity: .75; }
.dc2-page__frame--name b { font: 400 clamp(1.6rem, 3.6vw, 3.2rem)/1.05 "Crimson Pro", Georgia, serif; letter-spacing: .01em; }
@media (max-width: 600px) { .dc2-page--d3 .dc2-page__frame--name { aspect-ratio: auto; grid-template-columns: 1fr; } .dc2-page--d3 .dc2-page__frame--name img { width: 100%; height: auto; } .dc2-page__frame--name figcaption { padding: 16px 16px 20px; } }
/* the on-set photo, graded to the film's cool blue */
.dc2-page__frame--tone { position: relative; }
.dc2-page__frame--tone img { filter: grayscale(.62) contrast(.92) brightness(1.04); }   /* most of the colour out, skin stays skin */
.dc2-page__frame--tone::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(78, 100, 140); mix-blend-mode: color; opacity: .32; }   /* the film's cool blue laid over */
/* a still that breathes: cropped from the bottom (the corner credit falls outside), a slow push-in */
.dc2-page__frame--drift { overflow: hidden; }
.dc2-page--d3 .dc2-page__frame--drift img { object-position: 50% 50%; transform-origin: 55% 60%; animation: dc2-drift 14s ease-in-out infinite alternate; }
@keyframes dc2-drift { from { transform: scale(1); } to { transform: scale(1.09) translateX(-1.5%); } }
.dc2-page__frame video { display: block; width: 100%; height: auto; object-fit: cover; background: #111; }
@media (prefers-reduced-motion: reduce) { .dc2-page--d3 .dc2-page__frame--drift img { animation: none; } }
/* the director frame, like the film's own title cards: the photo fills the frame, a soft shade on
   the right, and the credit over it in thin spaced capitals */
.dc2-page--d3 .dc2-page__frame--name { display: block; position: relative; aspect-ratio: 16 / 9; }
.dc2-page--d3 .dc2-page__frame--name img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 70%; }
.dc2-page--d3 .dc2-page__frame--name .dc2-page__frame-bg { display: none; }
.dc2-page--d3 .dc2-page__frame--name::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 85% 18%, rgba(8, 12, 20, .7), transparent 70%); }
.dc2-page--d3 .dc2-page__frame--name figcaption {
  position: absolute; z-index: 2; left: 64%; top: 11%; transform: none; padding: 0; gap: clamp(4px, .8vw, 10px);   /* over the dark of the crew, clear of the white shirt */
  color: #e9eef5; text-shadow: 0 0 18px rgba(255, 255, 255, .18), 0 1px 12px rgba(0, 0, 0, .35);
}
.dc2-page--d3 .dc2-page__frame--name i { font: normal 300 clamp(.62rem, 1.15vw, 1rem)/1.2 "Jost", "Futura", "Avenir Next", sans-serif; letter-spacing: .32em; text-transform: uppercase; opacity: .8; }
.dc2-page--d3 .dc2-page__frame--name b { font: 300 clamp(1.4rem, 3.4vw, 3rem)/1.05 "Jost", "Futura", "Avenir Next", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 600px) {
  .dc2-page--d3 .dc2-page__frame--name { aspect-ratio: 4 / 5; }
  .dc2-page--d3 .dc2-page__frame--name img { object-position: 50% 50%; }
  .dc2-page--d3 .dc2-page__frame--name::after { background: linear-gradient(0deg, rgba(8, 12, 20, .65) 0%, transparent 45%); }
  .dc2-page--d3 .dc2-page__frame--name figcaption { left: 18px; top: auto; bottom: 20px; transform: none; }
}
/* under the trailer: the full film on YouTube */
.dc2-page__film figcaption { display: flex; justify-content: flex-end; padding-top: 14px; }
.dc2-page__yt { font: italic 400 1rem/1.4 "Crimson Pro", Georgia, serif; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px; transition: color .25s ease, border-color .25s ease; }
.dc2-page__yt:hover { color: #F15A23; border-color: #F15A23; }

/* Love Link page — the site's own type: Inter (light text, regular titles), DM Mono labels in spaced
   capitals, credits like the project pages (role in medium, name in light) */
.dc2-page--dune, .dc2-page--dune .dc2-page__bar--serif { font-family: var(--font-sans); }
.dc2-page--dune .dc2-page__bar--serif { font: 300 .9375rem/1.6 var(--font-sans); }
.dc2-page--dune .dc2-page__bar--serif b { font: 400 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.2 var(--font-sans); letter-spacing: -.01em; margin-bottom: 4px; }
.dc2-page--dune .dc2-page__bar--serif i { font: 400 var(--fs-heading, .6875rem)/1.8 "DM Mono", ui-monospace, Menlo, monospace; font-style: normal; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.dc2-page--dune .dc2-page__credits { font: 300 .875rem/1.7 var(--font-sans); }
.dc2-page--dune .dc2-page__credits b { font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem)/1.2 var(--font-sans); margin-bottom: clamp(18px, 2vw, 28px); }
.dc2-page--dune .dc2-page__credits i { font: 300 .875rem/1.7 var(--font-sans); font-style: normal; }
.dc2-page--dune .dc2-page__credits strong { font-weight: 500; }
.dc2-page--dune .dc2-page__yt { font: 300 .9375rem/1.4 var(--font-sans); font-style: normal; border-bottom-color: rgba(255, 255, 255, .3); }

/* the intro isn't one big "close" button any more: its frames are links to the project */
html[data-scroll] .intro { cursor: default; }
html[data-scroll] .dc2-tile { cursor: pointer; pointer-events: auto; }
/* the pictures in the intro lead to the work list */
.dc2-page__key, .dc2-page__frame { cursor: pointer; }
/* the project you came from, picked out in the work list like a hover */
.home-page .project-link.is-picked { color: var(--color-accent); font-weight: 600; }

/* HOME-008 (preview): the Filmmaking page laid out like nadiatzuo.com — one centred column, key art and stills 16:9,
   the stills as one sequence with thin gaps, a small label over the film, credits under a thin line */
.dc2-page__sec--seq > figure, .dc2-page__sec--seq > .dc2-page__credits, .dc2-page__sec--seq > .dc2-page__label { width: min(68vw, 1180px); margin-left: auto; margin-right: auto; }
.dc2-page--d3 .dc2-page__sec--seq .dc2-page__key img, .dc2-page--d3 .dc2-page__sec--seq .dc2-page__key video { aspect-ratio: 16 / 9; object-position: 50% 50%; }
.dc2-page--d3 .dc2-page__sec--seq .dc2-page__frame img { aspect-ratio: 16 / 9; object-fit: cover; }
.dc2-page__sec--seq .dc2-page__frame { margin-top: 26px; }
.dc2-page--d3 .dc2-page__sec--seq .dc2-page__bar--serif + .dc2-page__frame { margin-top: 56px; }
.dc2-page__label { margin-top: 64px; margin-bottom: 12px; font: 400 .6875rem/1 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); }
.dc2-page__sec--seq .dc2-page__label + .dc2-page__film { margin-top: 0; }
.dc2-page__sec--seq .dc2-page__credits { margin-top: 56px; padding-top: 32px; border-top: 1px solid #2a2a2a; }
/* HOME-020: a credit over a frame, in the style of the Kite Fight title cards (small spaced yellow label, white serif name) */
.dc2-page__frame:has(.dc2-page__credit) { position: relative; container-type: inline-size; }   /* the credit scales with its frame */
.dc2-page__credit { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; text-shadow: 0 0 14px rgba(12, 70, 30, .9), 0 0 4px rgba(12, 70, 30, .8); }
.dc2-page__credit i { display: block; font: 600 1.05cqw/1 Inter, system-ui, sans-serif; font-style: normal; letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: #f5ea14; }
.dc2-page__credit b { display: block; margin-top: .35em; font: 400 3.1cqw/1 "Crimson Pro", Georgia, serif; letter-spacing: .04em; text-transform: uppercase; color: #f4f1e6; }


/* ---------- Name design options (preview, Oct 30) — html[data-names] ---------- */
.dc2-tag, .dc2-index, .dc2-where { display: none; }
.dc2-tile { outline: 2px solid transparent; outline-offset: -2px; }

/* 1 — a name tag on every frame (top-left corner), always on; the side column says "Selected Work · 05" */
html[data-names="1"] .dc2-tag {
  position: absolute; z-index: 2; top: 12px; left: 14px; display: flex; gap: 10px; align-items: baseline;
  font: 400 0.6875rem/1 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.24em; text-transform: uppercase;
  color: #f2f2f0; background: rgba(10, 10, 10, 0.55); padding: 6px 9px; border-radius: 2px;
}
html[data-names="1"] .dc2-tag b { font-weight: 400; color: var(--color-accent); }
html[data-names="1"] .dc2-tag i { font-style: normal; }
html[data-names="1"] .dc2-tile.is-new .dc2-tag { animation: dc2-tag-in 0.9s ease; }
@keyframes dc2-tag-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* 2 — a numbered index in the side column; the frames show only their number */
html[data-names="2"] .dc2-count { display: none; }
html[data-names="2"] .dc2-index {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  display: flex; gap: 22px; margin: 0; padding: 0; list-style: none;
  font: 400 0.625rem/1 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.26em; text-transform: uppercase;
}
html[data-names="2"] .dc2-index a { color: #5c5c59; text-decoration: none; transition: color 0.6s ease; white-space: nowrap; pointer-events: auto; }
html[data-names="2"] .dc2-index b { font-weight: 400; margin-bottom: 8px; }
html[data-names="2"] .dc2-index li.is-on a { color: #f2f2f0; }
html[data-names="2"] .dc2-index li.is-on b { color: var(--color-accent); }
html[data-names="2"] .dc2-index li.is-new a { color: var(--color-accent); }
html[data-names="2"] .dc2-index a:hover { color: var(--color-accent); }
html[data-names="2"] .dc2-tag {
  position: absolute; z-index: 2; top: 10px; left: 12px; display: block;
  font: 400 0.75rem/1 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.1em;
  color: var(--color-accent); background: rgba(10, 10, 10, 0.55); padding: 6px 8px; border-radius: 2px;
}
html[data-names="2"] .dc2-tag b { font-weight: 400; }
html[data-names="2"] .dc2-tag i { display: none; }

/* 3 — the side name points to its frame: a 2×2 icon with that frame lit + a short orange outline */
html[data-names="3"] .dc2-where { display: grid; grid-template-columns: 7px 7px; gap: 3px; transform: rotate(180deg); align-self: center; }
html[data-names="3"] .dc2-where i { width: 7px; height: 7px; border: 1px solid #6a6a66; transition: background-color 0.4s ease, border-color 0.4s ease; }
html[data-names="3"] .dc2-where i.is-on { background: var(--color-accent); border-color: var(--color-accent); }
html[data-names="3"] .dc2-tile.is-new { animation: dc2-ring 1.6s ease; }
@keyframes dc2-ring { 0%, 60% { outline-color: var(--color-accent); } 100% { outline-color: transparent; } }

/* phones / upright tablets: the side column is a row above the frames */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 760px) {
  html[data-fit][data-names="2"] .dc2-index { writing-mode: horizontal-tb; transform: none; left: 0; bottom: auto; top: 50%; translate: 0 -50%; gap: 8px; letter-spacing: 0.08em; }   /* leaves room for "Swipe ↑" */
  html[data-fit][data-names="2"] .dc2-index span { display: none; }   /* numbers only on a phone */
  html[data-fit][data-names="2"] .dc2-index b { margin: 0; }
  html[data-fit][data-names="3"] .dc2-where { transform: none; }
}

/* 1 + 2 combined (?names=12): the name tag on every frame AND the numbered index on the side */
html[data-names="12"] .dc2-count { display: none; }
html[data-names="12"] .dc2-tag {
  position: absolute; z-index: 2; top: 10px; left: 12px; display: flex; gap: 7px; align-items: baseline;
  font: 400 0.5625rem/1 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.2em; text-transform: uppercase;
  color: #f2f2f0; background: rgba(10, 10, 10, 0.5); padding: 4px 7px; border-radius: 2px;
}
html[data-names="12"] .dc2-tag b { font-weight: 400; color: var(--color-accent); }
html[data-names="12"] .dc2-tag i { font-style: normal; }
html[data-names="12"] .dc2-tile.is-new .dc2-tag { animation: dc2-tag-in 0.9s ease; }
html[data-names="12"] .dc2-index {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  display: flex; gap: 16px; margin: 0; padding: 0; list-style: none;
  font: 400 0.5rem/1 "DM Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.22em; text-transform: uppercase;
}
html[data-names="12"] .dc2-index a { color: #5c5c59; text-decoration: none; transition: color 0.6s ease; white-space: nowrap; pointer-events: auto; }
html[data-names="12"] .dc2-index b { font-weight: 400; margin-bottom: 6px; }
html[data-names="12"] .dc2-index li.is-on a { color: #f2f2f0; }
html[data-names="12"] .dc2-index li.is-on b { color: var(--color-accent); }
html[data-names="12"] .dc2-index li.is-new a { color: var(--color-accent); }
html[data-names="12"] .dc2-index a:hover { color: var(--color-accent); }
@media (max-width: 1100px) and (orientation: portrait), (max-width: 760px) {
  html[data-fit][data-names="12"] .dc2-index { writing-mode: horizontal-tb; transform: none; left: 0; bottom: auto; top: 50%; translate: 0 -50%; gap: 8px; letter-spacing: 0.08em; }
  html[data-fit][data-names="12"] .dc2-index span { display: none; }   /* numbers only on a phone — the frames carry the names */
  html[data-fit][data-names="12"] .dc2-index b { margin: 0; }
}

/* the four frames sit above the intro's film grain (6 %), so they are always at full brightness (Oct 30) */
.dc2 { z-index: 2; }

/* ---------- Side column options (preview, Oct 30) — html[data-side], with the "12" name design ---------- */
/* A — the five names spread evenly over the whole column, under the scroll cue */
html[data-side="a"] .dc2-index { top: 96px; bottom: 0; justify-content: space-between; }

/* B — the names roll slowly up the column, a seamless loop (two copies), soft fades at both ends */
html[data-side="b"] .dc2-roll {
  position: absolute; top: 96px; bottom: 0; left: 0; right: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
html[data-side="b"] .dc2-index { top: 0; bottom: auto; gap: 16px; padding-bottom: 16px; animation: dc2-roll 26s linear infinite; }
html[data-side="b"] .dc2-roll:hover .dc2-index { animation-play-state: paused; }
@keyframes dc2-roll { from { translate: 0 -33.333%; } to { translate: 0 0; } }   /* three copies: moving one copy's length loops seamlessly */

/* C — a big "Selected Work" title fills the top of the column; the index stays at the bottom */
html[data-side="c"] .dc2-sidetitle {
  position: absolute; top: 96px; left: 50%; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  display: flex; gap: 12px; align-items: center; pointer-events: none;
}
html[data-side="c"] .dc2-sidetitle span {
  font: 400 clamp(2rem, 1.6rem + 1.2vw, 2.6rem)/0.9 "Six Caps", "Oswald", "Arial Narrow", sans-serif;
  letter-spacing: 0.04em; text-transform: uppercase; color: #f2f2f0;
}
html[data-side="c"] .dc2-index { gap: 10px; }   /* a tighter list leaves the top to the title */
html[data-side="c"] .dc2-sidetitle small {
  font: 400 0.5rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: 0.22em; color: var(--color-accent);
}

/* phones / upright tablets: the side column is a short row, so the options switch off there */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 760px) {
  html[data-fit][data-side] .dc2-sidetitle { display: none; }
  html[data-fit][data-side="b"] .dc2-roll { position: static; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  html[data-fit][data-side="b"] .dc2-index { animation: none; }
  html[data-fit][data-side="b"] .dc2-index li[aria-hidden] { display: none; }
  html[data-fit][data-side="a"] .dc2-index { bottom: auto; }
}

/* HOME-010 (Oct 30): the info bar and every accent on a project page take that project's own colour
   instead of the logo orange — from each project's artwork. Pages without a colour keep the orange. */
.dc2-page { --pc: var(--color-accent); }
.dc2-page[data-project="filmmaking"] { --pc: #4A5A70; }     /* Love Link — the trailer's slate blue */
.dc2-page[data-project="kite-fight"] { --pc: #16A448; }     /* Kite Fight — the teaser's green sky */
.dc2-page[data-project="fanta-heroes"] { --pc: #1F3E8F; }   /* Fanta Heroes — the blue "Fanta" lettering */
.dc2-page .dc2-page__bar, .dc2-page.dc2-page--d3 .dc2-page__bar--serif { background: var(--pc); }
.dc2-page .dc2-page__label { color: var(--pc); }
.dc2-page .dc2-page__back:hover { background: var(--pc); border-color: var(--pc); }
.dc2-page .dc2-page__end a:hover, .dc2-page .dc2-page__end button:hover { color: var(--pc); }
.dc2-page .dc2-page__yt:hover { color: var(--pc); border-color: var(--pc); }