:root {
  color-scheme: light;
  --paper: #e4e3e0;
  --ink: #1d2830;
  --indigo: #223e8e;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  background: var(--paper);
}

body {
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Songti SC", "STSong", "SimSun", serif;
}

html { scroll-behavior: smooth; }

img {
  display: block;
  width: 100%;
  height: 100%;
}

figure {
  margin: 0;
}

.showcase {
  min-height: 100vh;
  background: var(--paper);
}

.work-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(16rem, 0.75fr) minmax(0, 1.5fr);
  min-height: 160vh;
  padding: 0 clamp(3rem, 7vw, 7rem);
  align-items: start;
  gap: 7vw;
  overflow: hidden;
  background: #e8e7e3 url("assets/plates/paper-water-ground.png") repeat;
}

.work-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/plates/ink-basin.png") center / cover no-repeat;
  opacity: 0.2;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.work-section:nth-of-type(odd) { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.75fr); }
.work-section:nth-of-type(odd) .work-copy { order: 2; }

.work-copy { position:sticky; z-index:4; top:18vh; align-self:start; padding-top:2rem; }
.media-stage { position:sticky; z-index:1; top:10vh; height:80vh; align-self:start; }
.work-copy h2 { margin: 0 0 1.5rem; font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 500; letter-spacing: 0; }
.work-copy p { max-width: 22em; margin: 0 0 3rem; font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.8; }
.work-copy dl { margin: 0; border-top: 1px solid rgba(29,40,48,.35); }
.work-copy dl div { display:grid; grid-template-columns: 4rem 1fr; padding:.8rem 0; border-bottom:1px solid rgba(29,40,48,.22); }
.work-copy dt { color:#5c5b5b; font-size:.72rem; }
.work-copy dd { margin:0; font-size:.84rem; }
.media-stage { display:grid; grid-template-columns:minmax(0,1fr) clamp(4rem,7vw,6rem); grid-template-rows:minmax(0,1fr) auto; gap:1rem; align-items:stretch; }
.work-primary { height:100%; aspect-ratio:auto; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 900ms cubic-bezier(.16,1,.3,1); }
.work-section--ai .work-primary { aspect-ratio:auto; max-height:none; }
.work-section.is-visible .work-primary { clip-path: inset(0); }
.work-primary img { object-fit: cover; transition: transform 1200ms cubic-bezier(.16, 1, .3, 1); }
.work-primary:hover img { transform: scale(1.035); }
.film-strip { display:grid; grid-template-rows:repeat(3,1fr); gap:.6rem; }
.film-strip span { background-image:var(--strip-image); background-size:cover; background-position:center; opacity:.55; mix-blend-mode:multiply; transform:translateY(1.5rem); transition:transform 700ms cubic-bezier(.16,1,.3,1),opacity 400ms ease; }
.film-strip span:nth-child(1){background-position:20% center;transition-delay:80ms}.film-strip span:nth-child(2){background-position:50% center;transition-delay:140ms}.film-strip span:nth-child(3){background-position:80% center;transition-delay:200ms}
.is-visible .film-strip span { transform:none; opacity:.88; }
.work-section--photo { --strip-image:url("assets/plates/photo-work.png"); }
.work-section--editing { --strip-image:url("assets/plates/editing-work.png"); }
.work-section--ai { --strip-image:url("assets/plates/ai-work.png"); }
.work-caption { grid-column:1/-1; display:flex; justify-content:space-between; margin:.25rem 0 0; color:#5c5b5b; font-size:.78rem; }
.section-progress { position:absolute; z-index:2; left:0; bottom:0; width:100%; height:2px; background:rgba(29,40,48,.15); }
.section-progress i { display:block; width:100%; height:100%; background:var(--indigo); transform:scaleX(var(--section-progress,0)); transform-origin:left; }

footer {
  display: flex;
  justify-content: space-between;
  padding: 2rem 4vw;
  color: #e4e3e0;
  background: #1d2830;
  font-size: 0.8rem;
}

.comp-frame.hero {
  width: 100%;
  height: 100vh;
  aspect-ratio: auto;
  isolation: isolate;
  background: var(--paper);
  touch-action:pan-y;
  user-select:none;
}

.paper-surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--paper);
  background-image: url("assets/plates/paper-water-ground.png");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
}

.plate {
  overflow: hidden;
  pointer-events: none;
}

.plate img {
  object-fit: cover;
}

.plate--basin {
  z-index: 1;
  left:0;
  top:0;
  width:100%;
  height:100%;
  mix-blend-mode: multiply;
  opacity: 0.82;
}

.plate--basin img {
  object-fit: cover;
  object-position: left top;
}

.plate--work {
  z-index: 2;
  mix-blend-mode: multiply;
  left: 66%;
  top: 48%;
  width: clamp(18rem, 34vw, 34rem);
  height: clamp(17rem, 48vh, 30rem);
  opacity: 1;
  overflow: visible;
  transform-origin:center;
  transform-style:preserve-3d;
  perspective:1200px;
  transition: opacity 520ms ease, filter 520ms ease, transform 820ms cubic-bezier(.16, 1, .3, 1);
  will-change:transform;
}

.plate--work.is-active {
  opacity: 1;
  filter: contrast(1.04);
}
.plate--work[data-section-preview] { pointer-events:auto; cursor:pointer; }
.plate--work[data-section-preview]:focus-visible { outline:2px solid var(--indigo); outline-offset:5px; }

.plate--work img { object-fit:cover; box-shadow:0 1.6rem 4rem rgba(29,40,48,.16); }
.plate--work video { display:block; width:100%; height:100%; object-fit:cover; box-shadow:0 1.6rem 4rem rgba(29,40,48,.16); }
.media-badge { position:absolute; right:.8rem; bottom:.8rem; padding:.42rem .62rem; color:var(--paper); background:rgba(29,40,48,.82); font-size:.68rem; line-height:1; }
.plate--work.carousel-current { z-index:4; transform:translate3d(-50%,-50%,80px) rotateY(0) scale(1); filter:contrast(1.04); }
.plate--work[data-media-type="video"].carousel-current { mix-blend-mode:normal; }
.plate--work.carousel-prev { z-index:3; opacity:.24; transform:translate3d(-125%,-50%,-180px) rotateY(17deg) scale(.62); filter:saturate(.35) contrast(.76) blur(1px); }
.plate--work.carousel-next { z-index:2; opacity:.24; transform:translate3d(25%,-50%,-180px) rotateY(-17deg) scale(.62); filter:saturate(.35) contrast(.76) blur(1px); }
.hero.is-video-selected .reveal-status { opacity:0; visibility:hidden; pointer-events:none; }

.tagline,
.hero-story,
.placeholder-note {
  z-index: 3;
  margin: 0;
  opacity: 1;
}

.tagline {
  display:flex;
  align-items:baseline;
  gap:1.4rem;
  font-family: Kalnia, "Songti SC", "STSong", "SimSun", serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
}
.tagline strong { font-size:1.25rem; font-weight:600; color:var(--indigo); }
.tagline span { white-space:nowrap; }

.hero-story {
  display:flex;
  flex-direction:column;
  justify-content:center;
  color: #26364d;
  font-family: "Songti SC", "STSong", "SimSun", serif;
  mix-blend-mode: multiply;
  overflow:visible;
}
.hero-story h1 { margin:0; max-width:4em; font-size:clamp(4.4rem,8vw,7.5rem); font-weight:500; line-height:.92; letter-spacing:0; }
.hero-story > p:not(.chapter-count) { max-width:20em; margin:1.4rem 0 .8rem; font-size:1rem; line-height:1.7; }
.hero-story > span { color:#5c5b5b; font-size:.78rem; }
.chapter-count { display:flex; align-items:center; gap:.55rem; margin:0 0 1rem; color:var(--indigo); font-size:.78rem; font-variant-numeric:tabular-nums; }
.chapter-count i { width:2.5rem; height:1px; background:currentColor; }
.hero-story.is-changing h1,.hero-story.is-changing > p:not(.chapter-count),.hero-story.is-changing > span { animation:story-change 520ms cubic-bezier(.16,1,.3,1); }
@keyframes story-change { 0%{opacity:0;transform:translateY(1rem);filter:blur(6px)} 100%{opacity:1;transform:none;filter:none} }

button {
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

.practice,
.reveal-status,
.next-work,
.scroll-cue {
  z-index: 4;
  opacity: 1;
}

.practice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 1.28rem;
  line-height: 1;
  text-align: left;
}

.practice-nav { position:absolute; z-index:6; left:auto; right:5%; top:6%; width:min(38rem,48vw); height:4rem; display:grid; grid-template-columns:repeat(3,1fr); align-items:start; gap:1.5rem; }
.practice-nav .practice { position:relative; inset:auto; width:100%; height:2.35rem; display:grid; grid-template-columns:1fr auto; align-items:center; padding:.25rem 0; border-bottom:1px solid rgba(29,40,48,.32); opacity:.52; transition:opacity 260ms ease,color 260ms ease,transform 420ms cubic-bezier(.16,1,.3,1); }
.practice-nav .practice:hover,.practice-nav .practice:focus-visible { opacity:1; transform:translateY(-2px); }
.practice-nav .practice.is-active { opacity:1; }
.practice-nav .practice i { width:.42rem; height:.42rem; border-radius:50%; background:currentColor; transform:scale(.45); }
.practice-nav .practice.is-active i { width:.72rem; height:.72rem; transform:scale(1); background:radial-gradient(circle,currentColor 0 31%,transparent 35%); }
.carousel-timer { position:absolute; left:0; right:0; bottom:.25rem; height:2px; background:rgba(29,40,48,.12); overflow:hidden; }
.carousel-timer i { display:block; width:100%; height:100%; background:var(--indigo); transform:scaleX(0); transform-origin:left; }
.hero.is-playing .carousel-timer i { animation:carousel-time 5s linear forwards; }
@keyframes carousel-time { to { transform:scaleX(1); } }

.carousel-controls { position:absolute; z-index:7; right:5%; top:13%; display:flex; gap:.5rem; }
.carousel-controls button { position:relative; width:2.25rem; height:2.25rem; border:1px solid rgba(29,40,48,.28); border-radius:50%; }
.carousel-controls button:hover,.carousel-controls button:focus-visible { border-color:var(--indigo); }
.carousel-controls i { position:absolute; inset:0; }
.icon-prev::before,.icon-next::before { content:""; position:absolute; left:50%; top:50%; width:.48rem; height:.48rem; border-top:1px solid currentColor; border-left:1px solid currentColor; }
.icon-prev::before { transform:translate(-35%,-50%) rotate(-45deg); }
.icon-next::before { transform:translate(-65%,-50%) rotate(135deg); }
.icon-pause::before,.icon-pause::after { content:""; position:absolute; top:34%; width:1px; height:32%; background:currentColor; }
.icon-pause::before { left:43%; }.icon-pause::after { right:43%; }
.icon-play::before { content:""; position:absolute; left:43%; top:35%; width:0; height:0; border-top:.36rem solid transparent; border-bottom:.36rem solid transparent; border-left:.52rem solid currentColor; }

.chapter-rail { position:fixed; z-index:20; right:1.2rem; top:50%; display:flex; flex-direction:column; align-items:flex-end; gap:.65rem; transform:translateY(-50%); }
.chapter-rail::before { content:""; position:absolute; right:.3rem; top:.3rem; bottom:1.8rem; width:1px; background:rgba(29,40,48,.2); }
.chapter-rail > span { position:absolute; right:.3rem; top:.3rem; width:1px; height:calc(100% - 2.1rem); background:var(--indigo); transform:scaleY(var(--page-progress,0)); transform-origin:top; }
.chapter-rail a { display:flex; align-items:center; gap:.65rem; color:inherit; text-decoration:none; font-size:.68rem; }
.chapter-rail a i { position:relative; z-index:1; width:.62rem; height:.62rem; border:1px solid var(--paper); border-radius:50%; background:#8d9295; }
.chapter-rail a.is-active { color:var(--indigo); }.chapter-rail a.is-active i { background:var(--indigo); }
.chapter-rail b { font-weight:400; opacity:0; transform:translateX(.5rem); transition:opacity 220ms ease,transform 320ms cubic-bezier(.16,1,.3,1); }
.chapter-rail:hover b,.chapter-rail a:focus-visible b,.chapter-rail a.is-active b { opacity:1; transform:none; }
.chapter-rail output { margin-top:.25rem; font-size:.62rem; font-variant-numeric:tabular-nums; }

.work-section--photo .film-strip { transition:transform 900ms cubic-bezier(.16,1,.3,1); }
.work-section--photo.is-visible .film-strip { animation:film-drift 8s ease-in-out infinite alternate; }
@keyframes film-drift { to { transform:translateY(-1.2rem); } }
.work-section--editing .media-stage::after { content:""; position:absolute; z-index:3; left:0; top:0; bottom:2rem; width:1px; background:#b95852; transform:translateX(0); }
.work-section--editing.is-visible .media-stage::after { animation:playhead 5s linear infinite; }
@keyframes playhead { to { transform:translateX(calc(100% - 6rem)); } }
.work-section--ai .media-stage::before,.work-section--ai .media-stage::after { content:""; position:absolute; z-index:3; left:42%; top:45%; width:62%; aspect-ratio:1; border:1px solid rgba(34,62,142,.22); border-radius:50%; pointer-events:none; }
.work-section--ai .media-stage::after { width:76%; border-style:dotted; animation:ai-orbit 14s linear infinite reverse; }
.work-section--ai.is-visible .media-stage::before { animation:ai-orbit 10s linear infinite; }
@keyframes ai-orbit { to { transform:rotate(360deg); } }

/* Immersive work chapters: media leads, interface recedes. */
.work-section,
.work-section:nth-of-type(odd) {
  position:relative;
  display:block;
  min-height:100vh;
  padding:0;
  overflow:clip;
  color:#f2f0e9;
  background:#10191b;
}
.work-section::before { display:none; }
.scene-media {
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#10191b;
}
.scene-media img,
.scene-media video {
  width:100%;
  height:108%;
  object-fit:cover;
  object-position:center;
  transform:translateY(var(--scene-shift, -4%)) scale(1.02);
  filter:saturate(.72) contrast(1.08);
  transition:filter 800ms ease;
}
.work-section--editing .scene-media video { filter:saturate(.62) contrast(1.12) brightness(.82); }
.work-section.is-visible .scene-media img,
.work-section.is-visible .scene-media video { filter:saturate(.92) contrast(1.05); }
.scene-shade {
  position:sticky;
  z-index:2;
  top:0;
  height:100vh;
  margin-top:-100vh;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(7,15,17,.8) 0%, rgba(7,15,17,.24) 48%, rgba(7,15,17,.08) 72%), linear-gradient(0deg, rgba(7,15,17,.62), transparent 48%);
}
.work-section .work-copy,
.work-section:nth-of-type(odd) .work-copy {
  position:sticky;
  z-index:4;
  top:0;
  order:initial;
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:min(48rem, 70vw);
  height:100vh;
  margin-top:-100vh;
  padding:8vh clamp(2rem, 8vw, 8rem);
  color:#f2f0e9;
}
.work-section .work-copy h2 {
  max-width:8ch;
  margin:.8rem 0 1.4rem;
  font-size:clamp(3.4rem, 7vw, 6rem);
  font-weight:500;
  line-height:.95;
}
.work-section .work-copy > p:not(.scene-kind) {
  max-width:24em;
  margin:0 0 1.5rem;
  color:#f2f0e9;
  font-size:clamp(1.05rem, 1.5vw, 1.35rem);
  line-height:1.8;
}
.scene-kind,
.work-section .work-copy > span { margin:0; color:#ccd4cf; font-size:.78rem; line-height:1.5; }
.scene-kind { padding-bottom:.8rem; border-bottom:1px solid rgba(242,240,233,.4); }
.scene-index { position:sticky; z-index:3; top:0; display:flex; align-items:flex-end; justify-content:flex-end; height:100vh; margin:-100vh 0 0; padding:0 clamp(2rem,5vw,5rem) 4vh; color:rgba(242,240,233,.7); font-family:"Songti SC","STSong","SimSun",serif; font-size:.7rem; }
.scene-play { position:sticky; z-index:6; top:calc(100vh - 5rem); display:flex; align-items:center; gap:.7rem; width:max-content; height:2.5rem; margin:-4.5rem clamp(2rem,5vw,5rem) 2rem auto; color:#f2f0e9; font-size:.72rem; }
.scene-play i { position:relative; width:2.5rem; height:2.5rem; border:1px solid rgba(242,240,233,.55); border-radius:50%; }
.scene-play:hover,.scene-play:focus-visible { color:#b9d1ff; }
.work-section .section-progress { position:sticky; z-index:7; bottom:0; }
.work-section .section-progress i { background:#b9d1ff; }

/* Editing studio: real project timelines carry the capability story. */
.work-section--editing { min-height:145vh; background:#111415; }
.editing-studio {
  position:sticky;
  top:0;
  display:grid;
  grid-template-columns:minmax(17rem,26vw) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  gap:clamp(1.2rem,2.4vw,2.5rem) clamp(2rem,5vw,6rem);
  width:100%;
  height:100vh;
  padding:clamp(2rem,5vh,4.5rem) clamp(3rem,7vw,7rem) clamp(2rem,4vh,3.5rem);
  overflow:hidden;
  color:#f2f0e9;
  background:#111415;
}
.editing-studio::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,rgba(185,88,82,.1),transparent 34%),linear-gradient(0deg,rgba(185,209,255,.05),transparent 38%);
}
.editing-intro { position:relative; z-index:3; align-self:end; }
.editing-intro p { max-width:24em; margin:0 0 1.2rem; color:#aeb8b5; font-size:.86rem; line-height:1.75; }
.editing-intro h2 { max-width:5ch; margin:0; font-size:clamp(3.4rem,6.3vw,6rem); font-weight:500; line-height:.92; }
.editing-toolchain { position:relative; z-index:3; display:grid; align-content:start; border-top:1px solid rgba(242,240,233,.22); }
.editing-toolchain .tool { display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; padding:1rem 0; border-bottom:1px solid rgba(242,240,233,.14); transition:color 350ms ease,transform 500ms cubic-bezier(.16,1,.3,1); }
.editing-toolchain .tool:hover { color:#b9d1ff; transform:translateX(.7rem); }
.editing-toolchain b { font-size:clamp(1rem,1.4vw,1.3rem); font-weight:500; }
.editing-toolchain small { align-self:center; color:#8f9a98; font-size:.68rem; }
.timeline-composition { position:relative; z-index:2; grid-column:2; grid-row:1/4; min-width:0; perspective:1200px; }
.timeline-shot { position:absolute; overflow:hidden; background:#090b0c; box-shadow:0 2rem 5rem rgba(0,0,0,.35); cursor:pointer; transition:inset 850ms cubic-bezier(.16,1,.3,1),left 850ms cubic-bezier(.16,1,.3,1),right 850ms cubic-bezier(.16,1,.3,1),top 850ms cubic-bezier(.16,1,.3,1),bottom 850ms cubic-bezier(.16,1,.3,1),width 850ms cubic-bezier(.16,1,.3,1),height 850ms cubic-bezier(.16,1,.3,1),transform 850ms cubic-bezier(.16,1,.3,1),filter 650ms ease,box-shadow 650ms ease; }
.timeline-shot img { width:100%; height:100%; object-fit:cover; filter:saturate(.76) contrast(1.06); transition:filter 550ms ease,transform 900ms cubic-bezier(.16,1,.3,1); }
.timeline-shot figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:2.8rem 1rem .9rem; background:linear-gradient(0deg,rgba(7,10,11,.92),transparent); }
.timeline-shot figcaption b { font-size:.8rem; font-weight:500; }
.timeline-shot figcaption span { color:#aeb8b5; font-size:.64rem; }
.timeline-shot[data-slot="main"] { z-index:1; inset:8% 1% 5% 8%; width:auto; height:auto; transform:translate3d(0,calc(var(--section-progress,0)*-1.2rem),0) rotate(-.4deg); }
.timeline-shot[data-slot="main"] img { object-position:center; }
.timeline-shot[data-slot="ae"] { z-index:2; inset:auto auto auto auto; left:-5%; top:3%; width:39%; height:30%; transform:translate3d(calc(var(--section-progress,0)*1.5rem),calc(var(--section-progress,0)*.8rem),3rem) rotate(-2.2deg); }
.timeline-shot[data-slot="fast"] { z-index:3; inset:auto; right:-1%; bottom:0; width:34%; height:38%; transform:translate3d(calc(var(--section-progress,0)*-1.2rem),calc(var(--section-progress,0)*-1rem),5rem) rotate(1.8deg); }
.timeline-shot:focus-visible { outline:2px solid var(--indigo); outline-offset:4px; }
.timeline-shot:hover { z-index:5; transform:translate3d(0,-.6rem,7rem) rotate(0) scale(1.025); }
.timeline-shot:hover img { filter:saturate(1) contrast(1.03); transform:scale(1.018); }
.editing-capabilities { position:relative; z-index:3; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:end; border-top:1px solid rgba(242,240,233,.22); }
.editing-capabilities > span { display:flex; flex-direction:column; gap:.35rem; padding:.85rem .65rem .85rem 0; }
.editing-capabilities b { color:#f2f0e9; font-size:1rem; font-weight:500; }
.editing-capabilities small { color:#8f9a98; font-size:.64rem; line-height:1.4; }

/* AI lab: the supplied node graph is the proof, capabilities explain the pipeline. */
.work-section--ai { min-height:145vh; color:#f2f0e9; background:#111415; }
.ai-lab {
  position:sticky;
  top:0;
  display:grid;
  grid-template-columns:minmax(18rem,29vw) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  gap:clamp(1.25rem,2.5vw,2.8rem) clamp(2rem,5vw,6rem);
  width:100%;
  height:100vh;
  padding:clamp(2.5rem,6vh,5rem) clamp(3rem,7vw,7rem) clamp(2rem,4vh,3.5rem);
  overflow:hidden;
  background:#111415;
}
.ai-lab::before { content:""; position:absolute; inset:0; pointer-events:none; background:url("assets/plates/ai-work.png") center/cover no-repeat; opacity:.13; filter:saturate(.58) contrast(1.08); }
.ai-lab::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(17,20,21,.98) 0 27%,rgba(17,20,21,.72) 47%,rgba(17,20,21,.22) 78%); }
.ai-lab-intro { position:relative; z-index:3; grid-column:1; grid-row:1; align-self:end; }
.ai-lab-intro > p { margin:0 0 1.1rem; color:#aeb8b5; font-size:.76rem; }
.ai-lab-intro h2 { max-width:7ch; margin:0 0 1.25rem; font-size:clamp(3.1rem,5.7vw,5.6rem); font-weight:500; line-height:.94; }
.ai-lab-intro > span { display:block; max-width:25em; color:#aeb8b5; font-size:.88rem; line-height:1.75; }
.ai-workflow-visual { position:absolute; z-index:1; inset:7vh 2vw 8vh 37vw; overflow:hidden; background:#080b0c; box-shadow:0 2.2rem 5rem rgba(0,0,0,.4); transform:translateY(calc(var(--section-progress,0)*-.45rem)) rotate(.25deg); transition:transform 800ms cubic-bezier(.16,1,.3,1),box-shadow 650ms ease; }
.ai-workflow-visual:hover { transform:translateY(calc(var(--section-progress,0)*-.45rem - .65rem)) rotate(0) scale(1.008); box-shadow:0 3rem 6.5rem rgba(0,0,0,.58); }
.ai-workflow-visual img { width:100%; height:100%; object-fit:cover; object-position:42% center; filter:saturate(.82) contrast(1.02); transition:transform 1000ms cubic-bezier(.16,1,.3,1),filter 600ms ease; }
.ai-workflow-visual:hover img { transform:scale(1.025); filter:saturate(1) contrast(1.04); }
.ai-workflow-visual figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:1rem; padding:3.5rem 1.2rem 1rem; color:#eef1ed; background:linear-gradient(0deg,rgba(8,14,17,.9),transparent); }
.ai-workflow-visual figcaption b { font-size:.8rem; font-weight:500; }
.ai-workflow-visual figcaption span { color:#b9c6c9; font-size:.66rem; }
.ai-capability-stack { position:relative; z-index:3; grid-column:1; grid-row:2; display:grid; align-content:start; border-top:1px solid rgba(242,240,233,.22); }
.ai-capability-stack section { padding:.9rem 0; border-bottom:1px solid rgba(242,240,233,.14); transition:transform 500ms cubic-bezier(.16,1,.3,1),color 350ms ease; }
.ai-capability-stack section:hover { color:#b9d1ff; transform:translateX(.65rem); }
.ai-capability-stack b { display:block; margin-bottom:.3rem; font-size:1rem; font-weight:600; }
.ai-capability-stack p { margin:0; color:#8f9a98; font-size:.68rem; line-height:1.55; }
.ai-delivery-line { position:relative; z-index:3; grid-column:1; grid-row:3; display:flex; flex-wrap:wrap; align-content:start; gap:.7rem 1.2rem; padding-top:1rem; border-top:1px solid rgba(242,240,233,.22); color:#aeb8b5; font-size:.68rem; }
.ai-delivery-line span { position:relative; padding-left:.85rem; white-space:nowrap; }
.ai-delivery-line span::before { content:""; position:absolute; left:0; top:.42em; width:.34rem; height:.34rem; border-radius:50%; background:#b9d1ff; }

/* One paper-and-ink world across the capability chapters. */
.work-section--editing,.work-section--ai { color:#1d2830; background:#dfe1de; }
.editing-studio,.ai-lab { color:#1d2830; background:#dfe1de url("assets/plates/paper-water-ground.png") center/cover; }
.editing-studio::before { background:linear-gradient(112deg,rgba(185,88,82,.08),transparent 34%),linear-gradient(0deg,rgba(34,62,142,.05),transparent 38%); }
.ai-lab::before { opacity:.26; filter:saturate(.65) contrast(.96); }
.ai-lab::after { background:linear-gradient(90deg,rgba(223,225,222,.96) 0 28%,rgba(223,225,222,.58) 49%,rgba(223,225,222,.08) 78%); }
.editing-intro p,.ai-lab-intro > p,.ai-lab-intro > span { color:#536064; }
.editing-toolchain,.editing-capabilities,.ai-capability-stack,.ai-delivery-line { border-color:rgba(29,40,48,.28); }
.editing-toolchain .tool,.ai-capability-stack section { border-color:rgba(29,40,48,.16); }
.editing-toolchain small,.editing-capabilities small,.ai-capability-stack p { color:#5f6a6d; }
.editing-capabilities b { color:#1d2830; }
.ai-delivery-line { color:#45545a; }
.editing-toolchain .tool:hover,.ai-capability-stack section:hover { color:#223e8e; }
.timeline-shot { box-shadow:0 2rem 5rem rgba(29,40,48,.24); }

.ambient-audio-toggle { position:fixed; z-index:30; left:1.25rem; bottom:1.15rem; display:flex; align-items:center; gap:.55rem; min-width:4.5rem; height:2.35rem; padding:0 .8rem; color:#1d2830; background:rgba(228,227,224,.9); border:1px solid rgba(29,40,48,.3); box-shadow:0 .6rem 1.8rem rgba(29,40,48,.13); backdrop-filter:blur(8px); font-size:.68rem; }
.ambient-audio-toggle i { position:relative; width:.85rem; height:.85rem; border:1px solid currentColor; border-radius:50%; }
.ambient-audio-toggle i::after { content:""; position:absolute; inset:.2rem; border-radius:50%; background:currentColor; animation:music-pulse 2.8s ease-in-out infinite; }
.ambient-audio-toggle[aria-pressed="false"] { opacity:.58; }
.ambient-audio-toggle[aria-pressed="false"] i::after { animation:none; transform:scale(.25); }
@keyframes music-pulse { 50% { transform:scale(.42); opacity:.5; } }

.work-section--photo { min-height:100vh; background:#d9dcda; }
.photo-collage { position:relative; width:100%; height:100vh; overflow:hidden; isolation:isolate; background:#d9dcda url("assets/plates/paper-water-ground.png") center/cover; }
.collage-primary-page { position:absolute; z-index:2; inset:0; transition:transform 900ms cubic-bezier(.16,1,.3,1),opacity 600ms ease; }
.photo-collage::before { content:""; position:absolute; inset:0; z-index:0; background:url("assets/plates/ink-basin.png") center/cover; opacity:.14; pointer-events:none; }
.collage-backdrop { position:absolute; visibility:hidden; z-index:1; left:23vw; right:4vw; top:27vh; bottom:4vh; overflow:hidden; opacity:0; background:#0c1214; transition:opacity 500ms ease,visibility 0s linear 500ms; pointer-events:none; }
.collage-backdrop > [data-player-bg] { position:absolute; z-index:0; inset:-5%; width:110%; height:110%; object-fit:cover; filter:blur(28px) brightness(.48) saturate(1.15); transform:scale(1.08); pointer-events:none; }
.collage-backdrop::after { content:""; position:absolute; z-index:1; inset:0; background:rgba(6,12,14,.18); pointer-events:none; }
.collage-backdrop > [data-player-media] { z-index:2; width:100%; height:100%; object-fit:contain; background:transparent; filter:brightness(1.08) contrast(1.04); }
.collage-backdrop figcaption { position:absolute; z-index:4; left:1rem; right:1rem; bottom:1rem; display:flex; justify-content:space-between; align-items:center; padding:.65rem .8rem; color:#f2f0e9; background:rgba(12,20,22,.72); font-size:.68rem; }
.collage-backdrop figcaption span { opacity:.7; }
.collage-backdrop figcaption strong { font-weight:500; }
@keyframes backdrop-breathe { from { transform:scale(1.015) translate3d(-.4%,0,0); } to { transform:scale(1.055) translate3d(.5%,-.7%,0); } }
.collage-heading { position:absolute; z-index:8; left:5vw; top:7vh; max-width:32rem; color:var(--ink); pointer-events:none; transition:opacity 350ms ease,transform 650ms cubic-bezier(.16,1,.3,1); }
.collage-heading p { margin:0 0 .7rem; font-size:.78rem; }
.collage-heading h2 { margin:0; font-size:clamp(2.4rem,5vw,5rem); font-weight:500; line-height:1; }
.motion-permission { display:none; }
.collage-tile { position:absolute; z-index:2; overflow:hidden; contain:layout paint; backface-visibility:hidden; color:#f2f0e9; background:#182226; box-shadow:0 1.2rem 3.8rem rgba(16,25,27,.18); will-change:transform; transition:left 1000ms cubic-bezier(.16,1,.3,1),top 1000ms cubic-bezier(.16,1,.3,1),right 1000ms cubic-bezier(.16,1,.3,1),bottom 1000ms cubic-bezier(.16,1,.3,1),width 1000ms cubic-bezier(.16,1,.3,1),height 1000ms cubic-bezier(.16,1,.3,1),opacity 500ms ease,filter 500ms ease; }
.collage-tile img,.collage-tile video { width:100%; height:100%; object-fit:cover; transition:filter 450ms ease; }
.collage-tile .rail-poster { display:none; }
.collage-tile > span { position:absolute; left:.8rem; bottom:.7rem; padding:.35rem .5rem; background:rgba(12,20,22,.72); font-size:.7rem; }
.collage-tile:hover img,.collage-tile:hover video,.collage-tile:focus-visible img,.collage-tile:focus-visible video { filter:brightness(1.06); }
.collage-tile--a { left:7vw; top:35vh; width:31vw; height:45vh; transform:translate3d(var(--drift-x,0),var(--drift-y,0),0) rotate(-2deg); }
.collage-tile--b { left:41vw; top:14vh; width:23vw; height:31vh; transform:translate3d(var(--drift-x,0),var(--drift-y,0),0) rotate(1.5deg); }
.collage-tile--c { left:66vw; top:8vh; width:27vw; height:39vh; transform:translate3d(var(--drift-x,0),var(--drift-y,0),0) rotate(-1deg); }
.collage-tile--d { left:43vw; top:51vh; width:29vw; height:39vh; transform:translate3d(var(--drift-x,0),var(--drift-y,0),0) rotate(1deg); }
.collage-tile--e { left:74vw; top:54vh; width:19vw; height:30vh; transform:translate3d(var(--drift-x,0),var(--drift-y,0),0) rotate(-2.4deg); }
.collage-status { position:absolute; visibility:hidden; z-index:9; left:5vw; bottom:5vh; display:flex; align-items:center; gap:1rem; color:#f2f0e9; opacity:0; transform:translateY(1rem); transition:opacity 400ms ease,transform 600ms cubic-bezier(.16,1,.3,1),visibility 0s linear 600ms; }
.collage-status > span { font-size:.7rem; }
.collage-status strong { font-size:1.05rem; font-weight:500; }
.collage-status button { margin-left:1rem; padding:.65rem .85rem; color:#f2f0e9; border:1px solid rgba(242,240,233,.45); background:rgba(12,20,22,.68); font-size:.72rem; }
.photo-collage.has-active .collage-heading { opacity:0; transform:translateY(-1rem); }
.photo-collage.has-active .collage-primary-page { z-index:5; pointer-events:none; }
.photo-collage.has-active .collage-tile { pointer-events:auto; }
.photo-collage.has-active .collage-backdrop { visibility:visible; z-index:3; left:0; right:0; top:0; bottom:0; opacity:1; transform:none; box-shadow:none; transition-delay:0s; }
.photo-collage.has-active .collage-backdrop { pointer-events:auto; }
.photo-collage.has-active .collage-backdrop figcaption { right:1rem; }
.photo-collage.has-active .collage-status { visibility:visible; opacity:1; transform:none; transition-delay:0s; }
.photo-collage.has-active .collage-tile { z-index:5; left:auto; right:1.5vw; top:auto; bottom:auto; width:clamp(6.8rem,9.5vw,8.6rem); height:clamp(4.3rem,6vw,5.4rem); opacity:1; filter:none; transform:none; background:#11191c; border:2px solid rgba(255,255,255,.88); box-shadow:0 .55rem 1.6rem rgba(0,0,0,.62),0 0 0 1px rgba(12,18,20,.72); }
.photo-collage.has-active .collage-tile { top:calc(50vh - clamp(2rem,2.8vw,2.5rem) + var(--rail-offset,0vh)); }
.photo-collage.has-active .collage-tile:hover,.photo-collage.has-active .collage-tile:focus-visible { transform:translateX(-.35rem) scale(1.04); box-shadow:0 .7rem 1.5rem rgba(12,18,20,.42); }
.photo-collage.has-active .collage-tile.is-active { z-index:6; left:auto; right:1.5vw; bottom:auto; width:clamp(6.8rem,9.5vw,8.6rem); height:clamp(4.3rem,6vw,5.4rem); opacity:1; filter:none; border-color:#b9d1ff; outline:2px solid rgba(185,209,255,.95); outline-offset:3px; }
.collage-backdrop > [data-player-media] { position:absolute; inset:0; }
.collage-backdrop > .player-in-next { animation:player-in-next 720ms cubic-bezier(.16,1,.3,1) both; }
.collage-backdrop > .player-out-next { animation:player-out-next 720ms cubic-bezier(.16,1,.3,1) both; }
.collage-backdrop > .player-in-prev { animation:player-in-prev 720ms cubic-bezier(.16,1,.3,1) both; }
.collage-backdrop > .player-out-prev { animation:player-out-prev 720ms cubic-bezier(.16,1,.3,1) both; }
.collage-backdrop > .player-bg-in { animation:player-bg-in 520ms ease both; }
.collage-backdrop > .player-bg-out { animation:player-bg-out 520ms ease both; }
@keyframes player-in-next { from { transform:translate3d(0,100%,0); } to { transform:translate3d(0,0,0); } }
@keyframes player-out-next { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,-100%,0); } }
@keyframes player-in-prev { from { transform:translate3d(0,-100%,0); } to { transform:translate3d(0,0,0); } }
@keyframes player-out-prev { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,100%,0); } }
@keyframes player-bg-in { from { opacity:0; } to { opacity:1; } }
@keyframes player-bg-out { from { opacity:1; } to { opacity:0; } }
.photo-collage.has-active .collage-tile.is-active img,.photo-collage.has-active .collage-tile.is-active video { transform:none; filter:contrast(1.03) saturate(.82); }
.photo-collage.has-active .collage-tile video { display:none; }
.photo-collage.has-active .collage-tile .rail-poster { display:block; object-position:center; filter:contrast(1.06) saturate(.96); }
.photo-collage.has-active .collage-tile.is-active > span { display:none; }
.photo-collage.is-idle-playing .collage-status button { border-color:#b9d1ff; }
.collage-tile.is-previewing { outline:1px solid rgba(34,62,142,.75); outline-offset:4px; }
.collage-progress { position:absolute; z-index:8; left:1rem; right:1rem; bottom:3.65rem; width:calc(100% - 2rem); height:1.1rem; margin:0; appearance:none; background:transparent; cursor:pointer; }
.collage-progress::before { content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px; background:linear-gradient(90deg,#b9d1ff 0 var(--video-progress,0%),rgba(242,240,233,.28) var(--video-progress,0%) 100%); }
.collage-progress::-webkit-slider-thumb { position:relative; width:.8rem; height:.8rem; appearance:none; border:1px solid #f2f0e9; border-radius:50%; background:#223e8e; }
.collage-backdrop figcaption { pointer-events:none; }
.collage-more { position:absolute; z-index:9; right:5vw; bottom:4vh; display:flex; align-items:center; gap:.8rem; padding:.45rem 0; color:#1d2830; border-bottom:1px solid rgba(29,40,48,.5); background:transparent; font-size:1rem; font-weight:600; }
.collage-more i { position:relative; width:2.4rem; height:2.4rem; border:1px solid currentColor; border-radius:50%; transition:transform 500ms cubic-bezier(.16,1,.3,1),background 300ms ease; }
.collage-more i::before { content:""; position:absolute; left:50%; top:50%; width:.48rem; height:.48rem; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:translate(-65%,-50%) rotate(45deg); }
.collage-more:hover,.collage-more:focus-visible { color:#223e8e; }
.collage-more:hover i,.collage-more:focus-visible i { color:#f2f0e9; background:#223e8e; transform:translateX(.35rem) rotate(8deg); }
.collage-more-page { position:absolute; z-index:7; inset:0; padding:6vh 5vw; color:var(--ink); background:#d9dcda url("assets/plates/paper-water-ground.png") center/cover; opacity:0; transform:translateX(105%); transition:transform 900ms cubic-bezier(.16,1,.3,1),opacity 500ms ease; pointer-events:none; }
.collage-more-page header { position:relative; display:flex; align-items:center; justify-content:center; min-height:4rem; margin-bottom:4vh; }
.collage-more-page header > button { position:absolute; right:0; width:3.5rem; height:3.5rem; border:1px solid rgba(29,40,48,.45); border-radius:50%; }
.more-filter-nav { display:flex; align-items:center; justify-content:center; gap:clamp(1rem,3vw,3rem); }
.collage-more-page .more-filter-nav button { position:relative; width:auto; height:auto; padding:.8rem .35rem 1rem; border:0; border-radius:0; color:#5c5b5b; font-size:clamp(1rem,1.4vw,1.3rem); font-weight:700; transition:color 260ms ease,transform 420ms cubic-bezier(.16,1,.3,1); }
.collage-more-page .more-filter-nav button::after { content:""; position:absolute; left:50%; right:50%; bottom:-1px; height:2px; background:#223e8e; transition:left 350ms cubic-bezier(.16,1,.3,1),right 350ms cubic-bezier(.16,1,.3,1); }
.collage-more-page .more-filter-nav button:hover,.collage-more-page .more-filter-nav button:focus-visible { color:#223e8e; transform:translateY(-3px); }
.collage-more-page .more-filter-nav button[aria-pressed="true"] { color:#223e8e; }
.collage-more-page .more-filter-nav button[aria-pressed="true"]::after { left:0; right:0; }
.more-video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(11rem,28vh); gap:1rem; max-height:calc(100vh - 10rem); padding:.55rem .35rem 2rem; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#223e8e rgba(29,40,48,.12); }
.more-video-grid figure { position:relative; overflow:hidden; contain:layout paint; background:#172124; transition:transform 500ms cubic-bezier(.16,1,.3,1),box-shadow 500ms ease; cursor:pointer; }
.more-video-grid figure[data-more-open]::after { content:""; position:absolute; z-index:4; left:0; right:0; bottom:0; height:3px; background:#b9d1ff; box-shadow:0 0 .8rem rgba(185,209,255,.7); transform:scaleX(var(--hover-progress,0)); transform-origin:left; transition:transform 80ms linear; }
.more-video-grid figure[data-more-open]:hover,.more-video-grid figure[data-more-open]:focus-visible { transform:translateY(-.45rem) rotate(.35deg); box-shadow:0 1.2rem 3rem rgba(29,40,48,.2); }
.more-video-grid img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.more-video-grid figcaption { position:absolute; z-index:3; left:.7rem; right:.7rem; bottom:.6rem; display:flex; justify-content:space-between; gap:.8rem; padding:.4rem .55rem; color:#f2f0e9; background:rgba(12,20,22,.78); font-size:.68rem; }
.more-video-grid figcaption time { flex:0 0 auto; color:#b9d1ff; font-variant-numeric:tabular-nums; }
.more-scrub-preview { position:absolute; z-index:2; inset:0; opacity:0; background-size:800% 100%; background-position:var(--preview-position,0%) center; background-repeat:no-repeat; pointer-events:none; transition:opacity 160ms ease; }
.more-video-grid figure[data-more-open]:hover .more-scrub-preview,.more-video-grid figure[data-more-open]:focus-visible .more-scrub-preview { opacity:1; }
.more-load-state { grid-column:1/-1; margin:8vh 0; color:#5c5b5b; text-align:center; }
.more-video-grid figure.group-enter { animation:more-group-enter 520ms cubic-bezier(.16,1,.3,1) both; }
.more-video-grid figure.group-exit { animation:more-group-exit 240ms ease both; }
@keyframes more-group-enter { from { opacity:0; transform:translate3d(2rem,1rem,0) scale(.96); } to { opacity:1; transform:none; } }
@keyframes more-group-exit { to { opacity:0; transform:translate3d(-1.5rem,0,0) scale(.98); } }
.more-player { position:absolute; visibility:hidden; z-index:12; inset:0; display:grid; place-items:center; padding:5vh 7vw; opacity:0; background:rgba(12,18,20,.96); transition:opacity 400ms ease,visibility 0s linear 400ms; }
.more-player.is-open { visibility:visible; opacity:1; transition-delay:0s; }
.more-player video { display:block; place-self:center; width:auto; height:auto; max-width:86vw; max-height:90vh; object-fit:contain; }
.more-player video.is-portrait { width:auto; height:auto; }
.more-player-progress { position:absolute; z-index:2; left:12vw; right:12vw; bottom:3.5vh; width:76vw; height:1.5rem; margin:0; appearance:none; background:transparent; cursor:ew-resize; touch-action:none; }
.more-player-progress::before { content:""; position:absolute; left:0; right:0; top:calc(50% - 2px); height:4px; border-radius:2px; background:linear-gradient(90deg,#b9d1ff 0 var(--more-progress,0%),rgba(242,240,233,.3) var(--more-progress,0%) 100%); box-shadow:0 1px .5rem rgba(0,0,0,.35); }
.more-player-progress::-webkit-slider-thumb { position:relative; width:1rem; height:1rem; appearance:none; border:2px solid #f2f0e9; border-radius:50%; background:#223e8e; box-shadow:0 .15rem .5rem rgba(0,0,0,.45); }
.more-player-progress:focus-visible { outline:1px solid #b9d1ff; outline-offset:.35rem; }
.more-player button { position:absolute; right:2rem; top:2rem; width:3rem; height:3rem; border:1px solid rgba(242,240,233,.6); border-radius:50%; color:#f2f0e9; }
.more-player button i::before,.more-player button i::after { content:""; position:absolute; left:50%; top:50%; width:1rem; height:1px; background:currentColor; }
.more-player button i::before { transform:translate(-50%,-50%) rotate(45deg); }
.more-player button i::after { transform:translate(-50%,-50%) rotate(-45deg); }
.photo-collage.show-more .collage-primary-page { opacity:0; transform:translateX(-110%); pointer-events:none; }
.photo-collage.show-more { z-index:25; }
.photo-collage.show-more .collage-more-page { opacity:1; transform:none; pointer-events:auto; }

.practice i {
  width: 1.2rem;
  height: 1px;
  background: currentColor;
  transition: transform 350ms ease;
}

.practice.is-active {
  color: var(--indigo);
}

.practice.is-active i {
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 31%, transparent 34%);
}

.reveal-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: var(--indigo);
  font-size: 1.15rem;
  line-height: 1;
}

.reveal-status i {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  position: relative;
}

.reveal-status i::after,
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;
  width: 0.48rem;
  height: 0.48rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.placeholder-note,
.next-work {
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.placeholder-note {
  color: #5c5b5b;
}

.next-work {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.next-work span {
  font-family: inherit;
  font-size: 1.45rem;
}

.scroll-cue {
  overflow: visible;
}

.scroll-cue::before,
.scroll-cue::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32vw;
  border-top: 1px dotted rgba(29, 40, 48, 0.65);
}

.scroll-cue::before { right: calc(100% + 1.5rem); }
.scroll-cue::after { left: calc(100% + 1.5rem); }

.scroll-cue i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.7rem;
  height: 3.7rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

button:hover,
button:focus-visible {
  color: var(--indigo);
}

button:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 5px;
}

@media (max-width: 760px) {
  html { scroll-snap-type:y mandatory; scroll-behavior:smooth; }
  body { overflow:auto; overscroll-behavior-y:contain; }
  .hero,.work-section { min-height:100svh !important; height:100svh; scroll-snap-align:start; scroll-snap-stop:always; overflow:hidden; }
  .comp-frame.hero {
    min-height: 100svh;
    background-image: none;
    touch-action:pan-y;
  }
  .paper-surface { z-index: 0; }
  .paper-surface, .tagline, .hero-story, .placeholder-note, .practice, .reveal-status, .next-work { opacity: 1; }
  .plate--basin { opacity: 0.78; }
  .plate--work { opacity: 0.58; }
  .plate--work.is-active { opacity: 1; }
  .tagline, .hero-story, .placeholder-note, .practice, .reveal-status, .next-work, .scroll-cue { color: inherit; }
  .practice.is-active, .reveal-status { color: var(--indigo); }
  .plate--work { left:50%; top:38%; width:72vw; height:34svh; }
  .plate--work.carousel-prev { transform:translate3d(-92%,-50%,-80px) rotateY(10deg) scale(.66); }
  .plate--work.carousel-next { transform:translate3d(-8%,-50%,-80px) rotateY(-10deg) scale(.66); }
  .r-name { left:7%; top:60%; width:86%; height:17%; }
  .hero-story h1 { font-size:clamp(3.2rem,17vw,5rem); }
  .hero-story > p:not(.chapter-count) { display:none; }
  .r-tagline { left: 7%; top: 5%; width: 85%; }
  .tagline { font-size: 15px; }
  .r-category-photo, .r-category-edit, .r-category-ai { left:auto; width:auto; }
  .r-reveal-status { left: 50%; top: 63%; width: 43%; }
  .r-placeholder-note { left: 7%; top: 91%; width: 36%; }
  .r-next-work { display:none; }
  .scroll-cue { display: none; }
  .practice-nav { left:7%; right:7%; top:auto; bottom:10%; width:auto; height:3.5rem; gap:1rem; }
  .practice-nav .practice { min-height:44px; font-size:1rem; }
  .carousel-controls { right:7%; top:auto; bottom:4%; }
  .chapter-rail { right:.45rem; }
  .chapter-rail b { display:none; }
  .work-section,.work-section:nth-of-type(odd) { min-height:100svh; padding:0; }
  .scene-media,.scene-shade { height:100svh; }
  .scene-shade { margin-top:-100svh; background:linear-gradient(0deg, rgba(7,15,17,.88) 0%, rgba(7,15,17,.16) 70%); }
  .work-section .work-copy,.work-section:nth-of-type(odd) .work-copy { top:0; justify-content:flex-end; width:100%; height:100svh; margin-top:-100svh; padding:0 8vw 14vh; }
  .work-section .work-copy h2 { font-size:clamp(3rem,16vw,5rem); }
  .work-section .work-copy > p:not(.scene-kind) { font-size:1rem; }
  .scene-index { height:100svh; margin-top:-100svh; padding:0 6vw 3vh; }
  .scene-play { top:calc(100svh - 4.5rem); margin-right:6vw; }
  .work-section--editing { min-height:100svh; }
  .editing-studio { grid-template-columns:1fr; grid-template-rows:auto minmax(15rem,38svh) auto 1fr; gap:clamp(.55rem,1.5svh,1rem); height:100svh; padding:max(2.5rem,5svh) 7vw max(1.5rem,4svh); }
  .editing-intro { align-self:start; }
  .editing-intro p { display:none; }
  .editing-intro h2 { max-width:none; font-size:clamp(2.8rem,14vw,4.2rem); }
  .timeline-composition { grid-column:1; grid-row:2; touch-action:pan-y; overflow:hidden; }
  .timeline-shot { transition:inset 520ms cubic-bezier(.22,1,.36,1),width 520ms cubic-bezier(.22,1,.36,1),height 520ms cubic-bezier(.22,1,.36,1),opacity 360ms ease,transform 520ms cubic-bezier(.22,1,.36,1),box-shadow 520ms ease; }
  .timeline-shot[data-slot="main"] { z-index:1 !important; inset:2% 2% 18%; transform:none; }
  .timeline-shot[data-slot="ae"] { z-index:3 !important; inset:auto auto 0 0; width:40%; height:34%; transform:rotate(-1.5deg); }
  .timeline-shot[data-slot="fast"] { z-index:4 !important; inset:auto 0 0 auto; width:40%; height:34%; transform:rotate(1.5deg); }
  .timeline-shot:hover { transform:none; }
  .timeline-shot[data-slot="ae"]:hover { transform:rotate(-1.5deg); }
  .timeline-shot[data-slot="fast"]:hover { transform:rotate(1.5deg); }
  .timeline-composition.is-swiping .timeline-shot[data-slot="main"] { transform:translate3d(var(--timeline-drag,0px),0,0) rotateY(calc(var(--timeline-drag-ratio,0) * 4deg)); transition:none; }
  .timeline-shot figcaption { padding:2rem .65rem .55rem; }
  .timeline-shot figcaption span { display:none; }
  .editing-toolchain { grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .editing-toolchain .tool { display:flex; flex-direction:column; padding:.65rem 0; }
  .editing-toolchain .tool:nth-child(odd) { padding-right:.75rem; }
  .editing-toolchain small { align-self:start; font-size:.6rem; }
  .editing-capabilities { grid-row:4; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .editing-capabilities > span { padding:.7rem .25rem 0 0; }
  .editing-capabilities small { display:none; }
  .work-section--ai { min-height:100svh; }
  .ai-lab { grid-template-columns:1fr; grid-template-rows:auto minmax(9.5rem,26svh) auto minmax(2rem,auto); gap:clamp(.4rem,1.1svh,.75rem); height:calc(100svh - 1.5rem); padding:max(2rem,4svh) 7vw .5rem; overflow:hidden; }
  .ai-lab::before { opacity:.18; }
  .ai-lab::after { background:rgba(223,225,222,.68); }
  .ai-lab-intro { align-self:start; }
  .ai-lab-intro > p { margin-bottom:.65rem; }
  .ai-lab-intro h2 { max-width:11ch; margin-bottom:.35rem; font-size:clamp(2.15rem,10vw,3.5rem); line-height:.98; }
  .ai-lab-intro > span { display:none; }
  .ai-workflow-visual { position:relative; inset:auto; grid-row:2; transform:none; }
  .ai-workflow-visual img { object-position:40% center; }
  .ai-capability-stack { grid-row:3; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ai-capability-stack section { padding:.45rem .55rem .4rem 0; }
  .ai-capability-stack section:nth-child(even) { padding-left:.7rem; }
  .ai-capability-stack b { font-size:.74rem; }
  .ai-capability-stack p { margin-top:.2rem; font-size:clamp(.58rem,2.45vw,.68rem); line-height:1.35; }
  .ai-delivery-line { grid-row:4; grid-column:1; align-self:start; flex-wrap:nowrap; justify-content:flex-start; gap:.65rem 1rem; min-height:2rem; overflow-x:auto; padding:.45rem 0 .25rem; scrollbar-width:none; }
  .photo-collage { height:100svh; }
  .collage-backdrop { left:18vw; right:4vw; top:32vh; bottom:5vh; }
  .collage-heading { left:7vw; top:6vh; width:80vw; }
  .collage-heading h2 { display:none; }
  .collage-more { left:7vw; right:auto; top:10vh; bottom:auto; min-height:44px; padding:.3rem 0; font-size:1.15rem; }
  .motion-permission { position:absolute; z-index:9; display:flex; align-items:center; gap:.45rem; right:7vw; top:7vh; height:2.25rem; padding:0 .7rem; color:#1d2830; border:1px solid rgba(29,40,48,.3); background:rgba(228,227,224,.82); box-shadow:0 .5rem 1.5rem rgba(29,40,48,.12); backdrop-filter:blur(7px); font-size:.66rem; }
  .motion-permission i { width:.48rem; height:.48rem; border-radius:50%; background:#7f898b; transition:background 250ms ease,box-shadow 250ms ease; }
  .motion-permission[aria-pressed="true"] i { background:#223e8e; box-shadow:0 0 .7rem rgba(34,62,142,.42); }
  .photo-collage.has-active .motion-permission,.photo-collage.show-more .motion-permission { opacity:0; visibility:hidden; pointer-events:none; }
  .collage-tile--a { left:7vw; top:27vh; width:54vw; height:31vh; }
  .collage-tile--b { left:58vw; top:16vh; width:35vw; height:24vh; }
  .collage-tile--c { left:65vw; top:44vh; width:29vw; height:25vh; }
  .collage-tile--d { left:10vw; top:62vh; width:43vw; height:27vh; }
  .collage-tile--e { left:49vw; top:70vh; width:42vw; height:20vh; }
  .photo-collage.has-active .collage-tile { --mobile-thumb:min(3.6rem,16vw); top:auto; right:auto; bottom:max(1rem,env(safe-area-inset-bottom)); width:var(--mobile-thumb); height:var(--mobile-thumb); }
  .photo-collage.has-active .collage-tile--a { --thumb-left:2vw; left:var(--thumb-left); top:auto; transform:none !important; }
  .photo-collage.has-active .collage-tile--b { --thumb-left:22vw; left:var(--thumb-left); top:auto; transform:none !important; }
  .photo-collage.has-active .collage-tile--c { --thumb-left:42vw; left:var(--thumb-left); top:auto; transform:none !important; }
  .photo-collage.has-active .collage-tile--d { --thumb-left:62vw; left:var(--thumb-left); top:auto; transform:none !important; }
  .photo-collage.has-active .collage-tile--e { --thumb-left:82vw; left:var(--thumb-left); top:auto; transform:none !important; }
  .photo-collage.has-active .collage-backdrop { right:0; bottom:7rem; }
  .photo-collage.has-active .collage-tile { top:auto; }
  .photo-collage.has-active .collage-tile.is-active { left:var(--thumb-left); right:auto; bottom:max(1rem,env(safe-area-inset-bottom)); width:var(--mobile-thumb); height:var(--mobile-thumb); }
  .collage-status { left:7vw; right:7vw; bottom:8.5rem; flex-wrap:wrap; gap:.5rem 1rem; }
  .collage-status button { margin-left:0; }
  .collage-progress { bottom:7.7rem; }
  .collage-more-page { padding:5vh 6vw; }
  .collage-more-page header { align-items:center; flex-wrap:nowrap; gap:0; }
  .collage-more-page header > button { right:0; width:44px; min-width:44px; height:44px; padding:0; border:1px solid rgba(29,40,48,.45); border-radius:50%; white-space:nowrap; }
  .collage-more-page header > button::before,.collage-more-page header > button::after { content:none !important; display:none !important; }
  .more-filter-nav { order:initial; width:calc(100% - 3.5rem); gap:.65rem; overflow-x:auto; }
  .collage-more-page .more-filter-nav button { flex:0 0 auto; font-size:.9rem; }
  .more-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:22vh; max-height:calc(100svh - 8.5rem); }
  .more-player-progress { z-index:5; left:6vw; right:6vw; bottom:max(1.25rem,calc(env(safe-area-inset-bottom) + .75rem)); width:88vw; height:44px; }
  .more-player-progress::before { top:calc(50% - 3px); height:6px; }
  .more-player-progress::-webkit-slider-thumb { width:1.35rem; height:1.35rem; }
  .ambient-audio-toggle { left:.8rem; bottom:.75rem; min-width:2.35rem; width:2.35rem; padding:0; justify-content:center; }
  .ambient-audio-toggle span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .hero.is-playing .carousel-timer i { animation:none; transform:scaleX(1); }
  .work-section--photo.is-visible .film-strip,.work-section--editing.is-visible .media-stage::after,.work-section--ai .media-stage::before,.work-section--ai .media-stage::after { animation:none; }
  .collage-backdrop > [data-player-media] { animation:none; }
}

::selection {
  color: var(--paper);
  background: var(--indigo);
}