/* Home: the name over a showreel of real project outputs, a wheel of selected work, and a deck of prints beside the record. */
body.home { background: var(--wall); }

/* ── Opening: the name in pixels, then the work ──────────────────────────────
   With script and motion (js/hero-denoise.js) the section is tall and its view is pinned: the name is drawn in pixels
   that settle out of noise, scrolling turns them into the furnished room on the stage's grid, and the real showreel takes
   over. Without script, without WebGL2 or with reduced motion it is two plain blocks: the name view, then the stage. */
.hd { position: relative; background: var(--wall); }
.hd-pin { position: relative; }
.hd-title { position: relative; z-index: 1; box-sizing: border-box; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 20px) 24px 120px; text-align: center; }
.hd-role { margin: 0 0 clamp(12px, 2.2vh, 26px); color: var(--orange-deep); font-size: clamp(.9rem, 1.1vw, 1.08rem); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.hd-name { display: flex; align-items: center; justify-content: center; gap: .26em; margin: 0; color: var(--ink); font: 400 clamp(3.4rem, 10.4vw, 12.5rem)/.86 var(--font-display); letter-spacing: -.035em; white-space: nowrap; }
.hd-w { display: block; }
.hd-arabic { margin: clamp(12px, 2vh, 22px) 0 0; color: var(--orange-deep); font: 400 clamp(2rem, 3.6vw, 4.2rem)/1.35 var(--font-arabic); }
.hd-sum { max-width: 36em; margin: clamp(14px, 2.4vh, 28px) auto 0; color: var(--ink-soft); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; }
.hd-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(18px, 3vh, 32px); }
.hd-proof { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 30px; display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 0; list-style: none; color: var(--ink); font-size: .92rem; }
.hd-proof li { display: flex; align-items: baseline; gap: 10px; }
.hd-proof b { color: var(--orange-deep); font: 400 1.8rem/1 var(--font-display); }
.hd-cue { position: absolute; left: 50%; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; transform: translateX(-50%); color: var(--ink-soft); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hd-cue i { position: relative; display: block; width: 1px; height: 34px; overflow: hidden; background: var(--rule); }
.hd-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--orange-deep); animation: hd-cue 2.2s var(--ease-in-out) infinite; }
@keyframes hd-cue { from { transform: translateY(-100%); } to { transform: translateY(250%); } }

/* Plain stage: 16:9 under the name view, the rail under it. */
.hd-stage { padding: 0 var(--gutter) clamp(56px, 8vw, 96px); }
.hd .showreel { width: min(100%, 1280px); margin: 0 auto; }
.hd .scene video { width: 100%; height: 100%; object-fit: cover; }
.hd .wipe-label { display: none; }
.showreel-tabs small { display: block; color: var(--orange-deep); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.hd .scene-tag a::after { content: " →"; color: #ffb37a; }

/* Pinned: the view holds while the pixels move; the stage sits at its full size, hidden, until they hand over. */
.hd.is-scroll { height: 370svh; }
.hd.is-scroll .hd-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hd.is-scroll .hd-stage { position: absolute; inset: 0; z-index: 3; padding: 0; pointer-events: none;
  --sw: min(100vw - 48px, 1600px, (100svh - var(--nav-h) - 36px) * 16 / 9); }
.hd.is-scroll .showreel { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--sw) * 9 / 16) / 2); width: var(--sw); opacity: 0; }
.hd.is-scroll .showreel-screen { border-radius: 16px; box-shadow: 0 40px 90px -50px rgba(25, 29, 29, .55); }
.hd.is-scroll .showreel-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; margin: 0; padding: 34px clamp(16px, 2vw, 28px) 14px; align-items: center; border-radius: 0 0 16px 16px; background: linear-gradient(to top, rgba(10, 11, 12, .78), rgba(10, 11, 12, 0)); }
.hd.is-scroll .showreel-tabs button { color: #cfc9bf; opacity: .72; transition: opacity .3s ease; }
.hd.is-scroll .showreel-tabs [aria-selected="true"], .hd.is-scroll .showreel-tabs button:hover { opacity: 1; }
.hd.is-scroll .showreel-tabs b { color: #f6f2ec; font-weight: 500; }
.hd.is-scroll .showreel-tabs small { color: #ffb37a; }
.hd.is-scroll .showreel-tabs button::before { background: rgba(246, 242, 236, .3); }
.hd.is-scroll .showreel-tabs i { background: #ffb37a; }
.hd.is-scroll .showreel-tabs button::before, .hd.is-scroll .showreel-tabs i { height: 3px; border-radius: 2px; }
.hd.is-scroll .showreel-pause { color: #f6f2ec; border-color: rgba(246, 242, 236, .5); }
.hd.is-scroll .scene-tag { bottom: clamp(70px, 6.4vw, 84px); }
.hd.is-scroll .scene-tag b { display: none; }
.hd.is-scroll .showreel-bar, .hd.is-scroll .scene-tag, .hd.is-scroll .reel-ff { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.hd.is-scroll.is-open .showreel-bar, .hd.is-scroll.is-open .scene-tag, .hd.is-scroll.is-open .reel-ff { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.hd.is-scroll.is-open .hd-stage { pointer-events: auto; }
.hd-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* The real heading stays in place for screen readers, search and selection; the pixels are drawn over it. */
.hd.is-px .hd-name { color: transparent; }
.hd.is-px .hd-name ::selection { color: var(--ink); }
/* The nav mark would repeat the name; it comes back once the name has gone. */
.home .site-mark { transition: opacity .5s ease; }
.home:has(.hd.is-scroll:not(.is-past)) .site-mark { opacity: 0; }

/* Scrolling over the open showreel fast-forwards it (js/showreel.js); this chip says so, and shows the speed. */
.reel-ff { position: absolute; top: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); z-index: 8; display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 13px; border-radius: 999px; background: rgba(14, 16, 17, .72); color: #f6f2ec; font-size: .8rem; line-height: 1.2; pointer-events: none; }
.reel-ff svg { width: 14px; height: 14px; fill: #ffb37a; }
.reel-ff b { min-width: 2.6em; color: #ffb37a; font-weight: 600; font-variant-numeric: tabular-nums; }
.showreel:not(.is-fast) .reel-ff b { display: none; }
.showreel.is-fast .reel-ff span { display: none; }

/* At the very top the nav sits clear on the wall; it takes its own ground once the page moves. */
.home .site-nav:not(.is-scrolled) { background: transparent; backdrop-filter: none; }

/* The showreel. Every scene's resting state is its finished state, so without script, or with reduced motion, each one
   reads as a still. With script (js/showreel.js) the scene on screen replays its animations from the start. */
.showreel { position: relative; }
.showreel-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #121516; color: #f1ede6;
  box-shadow: 0 1px 0 rgba(25, 29, 29, .3), 0 40px 70px -40px rgba(25, 29, 29, .7); }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene picture { display: block; width: 100%; height: 100%; }
.scene-wipe, .scene-shop, .scene-doc { --k: 1.8; }
.scene-tag { position: absolute; left: 14px; bottom: 14px; z-index: 5; max-width: calc(100% - 28px); margin: 0; }
.scene-tag a { display: inline-block; padding: 7px 13px; border-radius: 999px; background: rgba(14, 16, 17, .86); color: #f6f2ec; font-size: .84rem; line-height: 1.35; text-decoration: none; }
.scene-tag b { margin-right: 6px; color: #ffb37a; font-weight: 600; }
.scene-tag a:hover, .scene-tag a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Before and after, wiped by a line. */
.wipe { position: absolute; inset: 0; }
.wipe-after { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.wipe-line { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; background: var(--orange); opacity: 0; box-shadow: 0 0 0 1px rgba(14, 16, 17, .25); }
.wipe-label { position: absolute; top: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(14, 16, 17, .78); color: #f6f2ec; font-size: .78rem; }
.wipe-label.is-before { right: 14px; opacity: 0; }
.wipe-label.is-after { left: 14px; }
.is-on .wipe-after { animation: wipe-reveal calc(1.7s * var(--k)) calc(.7s * var(--k)) cubic-bezier(.65, 0, .35, 1) both; }
.is-on .wipe-line { animation: wipe-line calc(1.7s * var(--k)) calc(.7s * var(--k)) cubic-bezier(.65, 0, .35, 1) both; }
.is-on .wipe-label.is-before { animation: label-out calc(2.4s * var(--k)) both; }
.is-on .wipe-label.is-after { animation: label-in .4s calc(.8s * var(--k)) both; }
@keyframes wipe-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wipe-line { 0% { left: 0; opacity: 1; } 92% { left: 100%; opacity: 1; } 100% { left: 100%; opacity: 0; } }
/* The room scene opens on the furnished room (the frame the hero's pixels draw), wipes back to the empty room, then
   forward again. The line shows only while it moves, so it never rests on the stage edge. */
.scene-wipe.is-on .wipe-after { animation: pp-after 8.5s both linear; }
.scene-wipe.is-on .wipe-line { animation: pp-line 8.5s both linear, pp-line-o 8.5s both linear; }
@keyframes pp-after { 0%, 20% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 50%, 62% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 85%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes pp-line { 0%, 20% { left: 100%; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 50%, 62% { left: 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1); } 85%, 100% { left: 100%; } }
@keyframes pp-line-o { 0%, 23% { opacity: 0; } 27%, 49% { opacity: 1; } 51%, 65% { opacity: 0; } 67%, 81% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes label-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes label-in { from { opacity: 0; } to { opacity: 1; } }

/* Shop the look: a catalogue product travels into the photo. */
.scene-shop .wipe { right: auto; width: 62.5%; }
.shop-card { position: absolute; z-index: 3; top: 12%; right: 5%; width: 27%; margin: 0; padding: 10px 10px 12px; border-radius: 10px; background: #fffaf3; color: var(--ink);
  box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7); transform: rotate(2.5deg); }
.shop-card img { aspect-ratio: 1; height: auto; border-radius: 6px; }
.shop-card figcaption { margin-top: 10px; font-size: .78rem; line-height: 1.4; color: var(--ink-soft); }
.shop-card figcaption b { display: block; color: var(--ink); font-size: .86rem; }
.shop-path { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.shop-path path { fill: none; stroke: var(--orange); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.scene-shop.is-on .shop-card { animation: card-in calc(.8s * var(--k)) calc(.15s * var(--k)) cubic-bezier(.2, .8, .2, 1) both; }
.scene-shop.is-on .shop-path path { animation: draw calc(.7s * var(--k)) calc(1s * var(--k)) ease-out both; }
.scene-shop.is-on .wipe-after { animation-delay: calc(1.6s * var(--k)); }
.scene-shop.is-on .wipe-line { animation-delay: calc(1.6s * var(--k)); }
@keyframes card-in { from { opacity: 0; transform: translate(40%, -10%) rotate(14deg); } to { opacity: 1; transform: rotate(2.5deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Scan to table: detection, then structure, then the cells read into an editable table. */
.scene-doc { background: #e9e4dc; }
.doc-page { position: absolute; top: 4%; bottom: 17%; left: 3%; aspect-ratio: 1104 / 940; background: #fff; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45); }
.doc-page img { object-fit: contain; }
.doc-page svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.doc-det { fill: none; stroke: var(--orange); stroke-width: 5; stroke-dasharray: 1; }
.doc-score rect { fill: var(--orange); }
.doc-score text { fill: #191d1d; font: 600 22px var(--font-body); }
.doc-col { fill: rgba(244, 129, 42, .1); stroke: rgba(184, 70, 11, .55); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 0; }
.doc-head { fill: rgba(25, 29, 29, .07); stroke: rgba(25, 29, 29, .35); stroke-width: 2; }
.doc-row { stroke: rgba(184, 70, 11, .6); stroke-width: 1.6; transform-box: fill-box; transform-origin: 0 50%; }
.doc-table { position: absolute; z-index: 3; top: 8%; right: 3%; bottom: 20%; width: 44%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  border-radius: 10px; background: #fffdf9; color: var(--ink); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(25, 29, 29, .12); }
.doc-table-head { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--rule); font-size: .76rem; color: var(--ink-soft); }
.doc-table-head b { margin-right: 6px; color: var(--ink); font-weight: 600; }
.doc-table-scroll { overflow: hidden; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: clamp(.5rem, .62vw, .7rem); font-variant-numeric: tabular-nums; }
.doc-table th { padding: 6px 6px 5px; vertical-align: bottom; text-align: right; font-weight: 600; line-height: 1.2; background: #f6ece0; border-bottom: 1px solid var(--rule); }
.doc-table td { padding: 2px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(25, 29, 29, .07); }
.doc-table-foot { display: flex; gap: 6px; margin: 0; padding: 8px 14px; border-top: 1px solid var(--rule); }
.doc-table-foot span { padding: 3px 9px; border-radius: 5px; background: var(--orange); color: #191d1d; font-size: .72rem; font-weight: 600; }
.scene-doc.is-on .doc-det { animation: draw calc(.8s * var(--k)) calc(.3s * var(--k)) ease-out both; }
.scene-doc.is-on .doc-score { animation: label-in .3s calc(1s * var(--k)) both; }
.scene-doc.is-on .doc-col { animation: col-in calc(.5s * var(--k)) calc((1.3s + var(--i) * .08s) * var(--k)) cubic-bezier(.2, .8, .2, 1) both; }
.scene-doc.is-on .doc-head { animation: label-in .4s calc(1.85s * var(--k)) both; }
.scene-doc.is-on .doc-row { animation: row-in calc(.35s * var(--k)) calc((2s + var(--i) * .03s) * var(--k)) ease-out both; }
.scene-doc.is-on .doc-table { animation: panel-in calc(.6s * var(--k)) calc(3s * var(--k)) cubic-bezier(.2, .8, .2, 1) both; }
.scene-doc.is-on .doc-table tbody tr { animation: label-in .25s calc((3.35s + var(--i) * .07s) * var(--k)) both; }
@keyframes col-in { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes row-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateX(8%); } to { opacity: 1; transform: none; } }


/* IntelliRoom's universal graph, MoaLLM Board and PhotoValidator play real recordings (cuts of the project films, 13 to 18 s). */
.scene-ir, .scene-pv { background: #141616; }
.scene-moa { background: #e6e7ea; }
.scene-ir video, .scene-pv video, .scene-moa video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Tabs under the screen: each fills while its scene plays. */
.showreel-bar { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; }
.showreel-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; flex: 1 1 auto; }
.showreel-tabs button { position: relative; display: block; padding: 12px 0 2px; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: .8rem; line-height: 1.3; text-align: left; cursor: pointer; }
.showreel-tabs button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(25, 29, 29, .14); }
.showreel-tabs i { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange-deep); transform: scaleX(0); transform-origin: 0 50%; }
.showreel-tabs b { display: block; color: var(--ink); font-weight: 600; }
.showreel-tabs [aria-selected="true"] { color: var(--ink); }
.showreel-tabs [aria-selected="true"] i { transform: scaleX(1); }
.showreel.is-live .showreel-tabs [aria-selected="true"] i { animation: tab-fill var(--dur, 5s) linear both; }
.showreel-tabs button:hover b, .showreel-tabs button:focus-visible b { color: var(--orange-deep); }
.showreel-tabs button:focus-visible, .showreel-pause:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 2px; }
@keyframes tab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.showreel-skip { display: none; flex: 0 0 auto; align-self: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: 500 .8rem/1 var(--font-body); cursor: pointer; }
.hd.is-scroll .showreel-skip { display: block; color: #f6f2ec; border-color: rgba(246, 242, 236, .5); }
.showreel-skip:hover { border-color: currentColor; }
.showreel-skip:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
.showreel-pause { flex: 0 0 auto; align-self: center; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
.showreel-pause svg { width: 14px; height: 14px; }
.showreel-pause path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.showreel-pause .i-play { display: none; fill: currentColor; stroke: none; }
.showreel-pause[aria-pressed="true"] .i-play { display: block; }
.showreel-pause[aria-pressed="true"] .i-pause { display: none; }
.showreel:not(.is-live) .showreel-bar, .showreel:not(.is-live) .reel-ff { display: none; }
.showreel.is-paused .scene *, .showreel.is-paused .showreel-tabs i { animation-play-state: paused !important; }

/* ── Selected work: a wheel of covers ────────────────────────────────────── */
.work { position: relative; background: var(--wall); border-top: 1px solid var(--rule); }
.work-head { max-width: 1280px; margin: 0 auto; padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(36px, 4vw, 56px); box-sizing: content-box; }
.work-head h2 { font: 400 clamp(3rem, 6.4vw, 6rem)/.95 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.work-note { margin-top: 18px; color: var(--ink-soft); line-height: 1.65; max-width: 34em; }

/* The grid every visitor gets first, and keeps with reduced motion or without script. */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
  max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); box-sizing: content-box; list-style: none; }
.work-item { display: grid; align-content: start; gap: 18px; }
.work-card { display: block; overflow: hidden; border-radius: 10px; background: var(--parchment-bright); box-shadow: 0 0 0 1px var(--rule), 0 26px 44px -26px rgba(25, 29, 29, .5); }
.work-card picture, .work-card img { display: block; width: 100%; height: auto; }
.work-card:hover, .work-card:focus-visible { filter: brightness(1.03); }
.work-item[data-slug="zakkir"] .work-card picture { background: var(--peach-200); }
.work-item[data-slug="zakkir"] .work-card img { width: auto; max-width: 100%; max-height: 240px; margin: 0 auto; }
.work-kind { color: var(--orange-deep); font-size: .92rem; font-weight: 500; }
.work-copy h3 { margin-top: 8px; font: 400 clamp(2.2rem, 3.2vw, 3rem)/1 var(--font-display); letter-spacing: -.02em; }
.work-copy h3 a { color: var(--ink); text-decoration: none; }
.work-copy h3 a:hover, .work-copy h3 a:focus-visible { color: var(--orange-deep); }
.work-copy > p:not(.work-kind) { margin-top: 12px; color: var(--ink-soft); line-height: 1.65; max-width: 34em; }
.work-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .92rem; }
.work-facts b { color: var(--ink); font-weight: 600; margin-right: 5px; font-variant-numeric: tabular-nums; }
.work-link { display: inline-block; margin-top: 18px; color: var(--ink); }
.work-all { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(72px, 9vw, 120px); box-sizing: content-box; font-size: 1.05rem; }
.work-all a { color: var(--ink); }

/* With the wheel (js/works-wheel.js): the stage is pinned while the page scrolls, and the scroll turns the drum. */
.works-stage.is-wheel { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--wall); }
.is-wheel .work-head { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; align-content: center; padding: 0; max-width: none; pointer-events: none; opacity: calc(1 - var(--m, 0)); }
.is-wheel .work-head h2 { font-size: calc(var(--card-h, 280px) * .24); text-align: center; }
.is-wheel .work-note { position: absolute; left: 50%; bottom: 5svh; width: min(34em, calc(100% - 2 * var(--gutter))); margin: 0; transform: translateX(-50%); text-align: center; font-size: .92rem; }
.is-wheel .works { position: absolute; left: 50%; top: 50%; display: block; width: 0; height: 0; max-width: none; margin: 0; padding: 0; transform-style: preserve-3d; }
.is-wheel .work-item { position: absolute; display: block; backface-visibility: hidden; will-change: transform; }
.is-wheel .work-card { display: flex; width: 100%; height: 100%; transform-origin: 50% 50%; cursor: pointer; }
.is-wheel .work-card picture { flex: 1 1 auto; min-width: 0; height: 100%; }
.is-wheel .work-card img { width: 100%; height: 100%; object-fit: cover; }
.is-wheel .work-item[data-slug="zakkir"] .work-card img { object-fit: contain; max-height: none; }
.is-wheel .works .work-copy { display: none; }
.works-info { position: absolute; z-index: 300; left: var(--gutter); top: 50%; width: max(15rem, calc(50% - var(--card-w, 480px) / 2 - var(--gutter) - 28px)); transform: translateY(-50%); opacity: var(--m, 0); pointer-events: none; }
.works-info a { pointer-events: auto; }
.works-info-body { transition: opacity .18s ease; }
.works-info.is-swapping .works-info-body { opacity: 0; }
.works-info h3 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
.works-index { position: absolute; z-index: 300; top: 50%; right: max(20px, calc(var(--gutter) - 40px)); margin: 0; padding: 0; list-style: none; transform: translateY(-50%); text-align: right; font-size: .95rem; line-height: 2; }
.works-index button { padding: 2px 4px; border: 0; background: none; color: var(--ink-soft); font: inherit; cursor: pointer; transition: color .25s; }
.works-index button:hover { color: var(--ink); }
.works-index button[aria-current="true"] { color: var(--orange-deep); font-weight: 600; }
.works-index button:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; border-radius: 2px; }

/* ── About: a deck of prints beside the record ───────────────────────────── */
.about { position: relative; background: var(--wall); padding: clamp(80px, 10vw, 140px) 0 clamp(96px, 12vw, 160px); overflow: hidden; border-top: 1px solid var(--rule); }
.about-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); box-sizing: content-box; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 28px clamp(40px, 7vw, 110px); }
.about-inner h2 { grid-column: 2; align-self: end; font: 400 clamp(2.8rem, 5vw, 4.8rem)/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.about-copy { grid-column: 2; }
.about-lede { color: var(--ink); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.7; font-weight: 400; max-width: 34em; }
.credentials { margin: 32px 0 34px; }
.credentials > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.credentials > div:first-child { border-top: 1px solid var(--rule); }
.credentials dt { color: var(--ink-soft); font-size: .9rem; padding-top: 3px; }
.credentials dd { color: var(--ink-soft); line-height: 1.5; }
.credentials strong { display: block; color: var(--ink); font-weight: 600; font-size: 1.06rem; margin-bottom: 2px; }
.credentials strong a { color: inherit; }

/* The deck: every print whole, laid loosely on top of each other. Click, drag or the button sends the top one to the back. */
.prints { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0; position: sticky; top: calc(var(--nav-h) + 40px); }
.prints-stack { display: grid; width: min(100%, 420px); margin: 0 auto; padding: 0; list-style: none; touch-action: pan-y; user-select: none; }
.prints-stack .print { grid-area: 1 / 1; --pos: var(--k); z-index: calc(40 - var(--pos)); cursor: grab;
  transform: translate(calc(min(var(--pos), 4) * 5px), calc(min(var(--pos), 4) * -4px)) rotate(var(--r));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.prints-stack .print.is-dragging { transition: none; cursor: grabbing; }
.prints-stack .print.is-flung { transition-duration: .32s; transition-timing-function: cubic-bezier(.4, 0, .9, .6); }
.prints-stack .print:not(.is-top) .film::after, .prints-stack .print:not(.is-top) .film-fx { display: none; }
.prints figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; width: min(100%, 420px); margin: 30px auto 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }
.prints figcaption span { flex: 1 1 14em; }
.prints-next { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: .86rem; cursor: pointer; }
.prints-next svg { width: 14px; height: 14px; }
.prints-next:hover { border-color: var(--ink); }
.prints-next:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .works-info { left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 44px var(--gutter) 4svh; transform: none; background: linear-gradient(180deg, transparent 0, var(--wall) 40px); }
  .works-info h3 { font-size: 2.2rem; }
  .works-index { display: none; }
  .is-wheel .work-note { display: none; }
  .is-wheel .work-head { inset: 0 0 auto 0; height: 68%; }
  .is-wheel .work-head h2 { font-size: calc(var(--card-h, 160px) * .17); }
}
@media (max-width: 760px) {
  .hd.is-scroll .showreel-skip { display: none; } /* touch scrolling is never held by the reel */
  .hd-title { padding: calc(var(--nav-h) + 12px) 16px 40px; }
  .hd-name { flex-direction: column; gap: 0; font-size: clamp(3.4rem, 17vw, 5.4rem); }
  .hd-proof { position: static; flex-direction: column; align-items: center; gap: 6px; margin-top: 26px; }
  .hd-cue { display: none; }
  .hd-stage { padding: 0 16px 56px; }
  .hd.is-scroll .hd-stage { --sw: calc(100vw - 32px); }
  .hd.is-scroll .showreel-bar { padding: 0 10px 2px; }
  .hd.is-scroll .scene-tag { bottom: 34px; }
  .hd.is-scroll .scene-tag b { display: inline; margin: 0; font-size: .74rem; }
  .hd.is-scroll .scene-tag a { font-size: 0; padding: 5px 11px; }
  .hd.is-scroll .scene-tag a::after { content: none; }
  .reel-ff { top: 8px; right: 8px; padding: 5px 10px; font-size: .7rem; }
  .showreel-tabs small { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .scene-tag { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
  .scene-tag a { font-size: .74rem; padding: 6px 11px; }
  .scene-shop .wipe { width: 100%; }
  .shop-card { top: auto; bottom: 54px; right: 10px; width: 36%; padding: 6px 6px 8px; }
  .shop-card figcaption { margin-top: 6px; font-size: .64rem; }
  .shop-card figcaption b { font-size: .7rem; }
  .shop-path { display: none; }
  .doc-page { top: 0; bottom: 0; left: 0; box-shadow: none; }
  .doc-table { top: 6%; bottom: 6%; left: 3%; right: 3%; width: auto; height: auto; }
  .doc-table table { font-size: .5rem; }
  .doc-table-foot { display: none; }
  .showreel-tabs { gap: 6px; }
  /* Six tabs do not fit as words on a phone: they become progress bars (each keeps its name for screen readers),
     and the scene's own caption says which project is showing. */
  .showreel-tabs button { height: 30px; padding: 0; }
  .showreel-tabs b, .showreel-tabs span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .showreel-tabs button::before, .showreel-tabs i { top: 14px; height: 3px; border-radius: 2px; }
  .work-head { padding-top: 72px; }
  .about-inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .about-inner h2, .about-copy, .prints { grid-column: 1; grid-row: auto; }
  .prints { position: static; margin-bottom: 20px; }
  .prints-stack { width: min(78vw, 340px); }
  .credentials > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-cue i::after { animation: none; }
  .reel-ff { display: none; }
  .scene *, .showreel-tabs i { animation: none !important; }
  .scene, .prints-stack .print { transition: none; }
}