/* Works: an index first, then three chapters of credited entries. One scene throughout. */
.works-page :is(.wk-hero,.wk-chapter,.wk-next) { position: relative; padding-inline: var(--gutter); background: transparent; }
.works-page :is(h1,h2,h3) { color: var(--text); }
.works-page .wk-hero {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(0,1fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "copy index" "note ." "record record" "base base";
  column-gap: 6vw;
  min-height: calc(100svh - var(--header));
  padding-top: clamp(81px,12vh,160px);
}
.wk-hero-copy { grid-area: copy; align-self: end; }
.wk-page-name { margin-top: 22px; color: var(--sub); font-size: 11px; letter-spacing: .055em; }
.works-page .wk-hero h1 { margin-top: 26px; font-size: clamp(55px,5.85vw,92px); font-weight: 250; line-height: 1.35; letter-spacing: -.055em; }
.wk-lead { max-width: 30em; margin-top: 32px; color: var(--sub); font-size: 14px; line-height: 2.05; letter-spacing: .015em; }
.works-page .rw-index { grid-area: index; align-self: end; }
.wk-hero-note { grid-area: note; max-width: 38em; margin-top: 28px; }
/* Career totals: no client name attached. */
.wk-record { grid-area: record; align-self: end; margin-top: 64px; }
.wk-record-title { color: var(--sub); font-size: 12px; line-height: 1.8; letter-spacing: .04em; }
.wk-record .rw-figures { gap: 20px 64px; margin-top: 16px; }
.wk-hero-baseline {
  grid-area: base;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 25px;
  margin-top: 72px;
  padding: 23px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--dawn-dim);
  font: 10px/1.6 Arial,sans-serif;
  letter-spacing: .15em;
}
.wk-hero-baseline > span:last-child { color: var(--dawn-warm); font: 11px/1.6 "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; letter-spacing: .04em; }
.works-page .wk-chapter { padding-block: 120px 24px; }
.works-page .wk-next { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 90svh; padding-block: 110px 100px; }
.works-page .wk-next h2 { margin-top: 36px; font-size: clamp(43px,4.5vw,69px); font-weight: 260; line-height: 1.45; letter-spacing: -.055em; }
.wk-next-lead { max-width: 34em; margin-top: 26px; color: var(--sub); font-size: 13px; line-height: 2; }
body.site-page .wk-next .text-link { margin-top: 30px; gap: 75px; font-size: 14px; }
.wk-related { position: relative; max-width: 37em; margin-top: 80px; color: var(--sub); font-size: 11px; line-height: 1.9; }
.wk-related::before { content: ""; position: absolute; inset: -13px 0; }
.wk-related > span { display: inline-block; margin-left: 16px; }
.wk-related:hover { color: #ead7bb; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  /* The fixed background-pause button sits over the baseline's right end in the first view. */
  .wk-hero-baseline { padding-right: 152px; }
}
@media (min-width: 761px) {
  /* Keep the index and entries readable over the film scene's brighter right half. */
  .works-page .environment::before { background: linear-gradient(90deg,#12203370,#132236a3 55%,#122236c2); }
  /* First view: shade only the band behind the index, so the film's warm light stays above it. */
  .works-page .environment-reading { background: radial-gradient(ellipse 38% 18% at 73% 64%,#031427e0 0%,#031427b0 55%,transparent 100%); }
}
.works-page .rw-index { text-shadow: 0 1px 14px #06142ab3; }
@media (max-width: 1100px) {
  .works-page .wk-hero { column-gap: 5vw; }
  .works-page .rw-index a { grid-template-columns: 7em minmax(0,1fr) auto; gap: 12px; }
}
@media (max-width: 760px) {
  .works-page :is(.wk-hero,.wk-chapter,.wk-next) { padding-inline: 6%; }
  .works-page .wk-hero {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: none;
    grid-template-areas: "copy" "record" "index" "note" "base";
    min-height: 0;
    padding-top: 64px;
  }
  .works-page .wk-hero h1 { font-size: clamp(38px,10.5vw,66px); line-height: 1.4; }
  .wk-lead { margin-top: 26px; font-size: 13px; line-height: 2; }
  .works-page .rw-index { margin-top: 44px; }
  .works-page .rw-index a { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
  /* Phone first view: the film's highlights sit behind the index; veil only that lower band. */
  .works-page .environment-reading { background: linear-gradient(180deg,transparent 50%,#0314278c 62%,#03142799 84%,#03142766 100%); }
  .wk-hero-note { margin-top: 24px; }
  .wk-record { margin-top: 44px; }
  .wk-record .rw-figures { gap: 18px 36px; }
  .wk-hero-baseline { flex-wrap: wrap; gap: 6px 16px; margin-top: 44px; padding-block: 20px 30px; letter-spacing: .1em; }
  .works-page .wk-chapter { padding-block: 88px 16px; }
  .works-page .wk-next { justify-content: flex-start; min-height: 88svh; padding-block: 93px 220px; }
  .works-page .wk-next h2 { margin-top: 29px; font-size: clamp(32px,9.1vw,49px); }
  body.site-page .wk-next .text-link { font-size: 12px; gap: 39px; margin-top: 26px; }
  .wk-related { margin-top: 56px; }
}
@media (max-width: 360px) {
  .works-page .wk-hero h1 { font-size: 35px; }
}