:root { color-scheme: dark; --ink: #f7f7f7; --background: #020405; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--background);
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Sole layout reference: references/GRADIENT_FINAL_REFERENCE.png (1024px).
   The HERO ends at y=376. vw coordinates scale that composition to 1440px. */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 36.71875vw;
  overflow: hidden;
  background: var(--background);
  border-bottom: 1px solid #888;
}
.hero-art {
  position: absolute;
  z-index: -1;
  left: 53.5vw;
  top: .8vw;
  width: 38.16vw;
  height: 41.49vw;
  /* CSS sizing only; the supplied image pixels are untouched. */
  mix-blend-mode: screen;
  mask-image: linear-gradient(to right, transparent, #000 12%);
}
.header { position: absolute; inset: 0 0 auto; height: 6.5vw; }
.brand { position: absolute; top: 1.91vw; left: 3.81vw; color: inherit; text-decoration: none; }
.wordmark {
  display: block;
  font-family: "Times New Roman", "Yu Mincho", serif;
  font-size: 2.16vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .49em;
}
.brand-message { display: block; margin-top: .45vw; font-size: .68vw; letter-spacing: .22em; line-height: 1; }
.navigation { position: absolute; top: 3.05vw; left: 37.21vw; display: flex; gap: 3.1vw; font-size: .91vw; letter-spacing: .045em; }
.header-tools { position: absolute; top: 1.56vw; right: 3.03vw; display: flex; align-items: center; gap: 2.2vw; }
.languages { display: flex; gap: 2vw; font-size: .65vw; letter-spacing: .16em; }
.menu-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .43vw; width: 3.7vw; height: 3.7vw; border: 1px solid #ddd; border-radius: 50%; }
.menu-icon i { width: 1.52vw; height: 1px; background: #ddd; }
.hero-title {
  position: absolute;
  top: 7.4vw;
  left: 3.51vw;
  margin: 0;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 7.95vw;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: .792;
}
.title-line { display: block; width: max-content; transform-origin: left center; }
.title-good { transform: scaleX(1.18); }
.title-design { transform: scaleX(1.12); }
.title-goes { transform: scaleX(1.12); }
.title-further { transform: scaleX(1.085); }
.hero-copy { position: absolute; top: 18.5vw; left: 39vw; }
.japanese-copy { margin: 0; font-size: 1.2vw; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; letter-spacing: .17em; line-height: 1.5; }
.english-copy { margin: .94vw 0 0; font-size: .83vw; letter-spacing: .2em; line-height: 1.65; }
.disciplines { position: absolute; top: 10.46vw; left: 91.7vw; list-style: none; padding: 0; margin: 0; font-size: .73vw; line-height: 1.74; letter-spacing: .16em; }
.showreel { position: absolute; top: 28.6vw; left: 90vw; display: flex; gap: .9vw; align-items: center; font-size: .73vw; line-height: 1.6; letter-spacing: .12em; }
.play-icon { display: grid; place-items: center; width: 3.7vw; height: 3.7vw; border: 1px solid #eee; border-radius: 50%; }
.play-icon::after { content: ""; border-left: .6vw solid #eee; border-top: .39vw solid transparent; border-bottom: .39vw solid transparent; margin-left: .15vw; }
.slide-index { position: absolute; left: 4vw; top: 34.12vw; display: flex; align-items: center; gap: .85vw; font-size: .83vw; letter-spacing: .15em; }
.slide-index i { display: block; width: 14.65vw; height: 1px; background: linear-gradient(to right, #b9b9b9 15%, #353535 15%); }
.studio-caption { position: absolute; left: 40.04vw; top: 33.9vw; margin: 0; font-size: .88vw; letter-spacing: .25em; line-height: 1; }
/* Smaller widths currently retain the static composition by proportional scaling.
   Mobile typography and navigation behavior require a separate approved step. */

/* STEP 03 — WORKS only. Approved HERO rules above remain unchanged. */
.works { padding: 1.48vw 3.22vw 1.48vw; background: #020405; }
.works-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.15vw; gap: 2vw; }
.works-introduction { display: flex; align-items: center; gap: 2.05vw; flex-shrink: 0; }
.works-introduction h2 { margin: 0; font-size: 4vw; line-height: 1; font-weight: 500; letter-spacing: -.025em; }
.works-introduction p { margin: .55vw 0 0; font-size: 1.04vw; letter-spacing: .08em; }
.works-controls { display: flex; gap: 5.5vw; align-items: center; padding-bottom: .13vw; }
.works-filters { display: flex; gap: 1.45vw; }
.works-filters button { padding: 0 0 .25vw; margin: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #eee; font: inherit; font-size: .64vw; line-height: 1; letter-spacing: .1em; opacity: 1; }
.works-filters button[aria-pressed="true"] { border-bottom-color: #eee; }
.works-view-all { color: inherit; text-decoration: none; font-size: .8vw; white-space: nowrap; letter-spacing: .08em; }
.works-view-all span { margin-left: .55vw; font-size: 1.3vw; }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25vw; }
.work-card { min-width: 0; }
.work-link { display: block; color: inherit; text-decoration: none; cursor: default; }
.work-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 312 / 196; background: #111; border: 1px solid #242424; color: #777; }
.work-placeholder > span { font-size: 1vw; letter-spacing: .1em; text-align: center; }
.work-placeholder small { display: block; margin-top: .65vw; font-size: .65vw; letter-spacing: .18em; }
.work-information { display: flex; justify-content: space-between; align-items: flex-end; gap: .5vw; margin-top: 1vw; }
.work-information h3 { margin: 0; font-size: 1.3vw; font-weight: 500; line-height: 1.1; letter-spacing: .01em; }
.work-information p { margin: .3vw 0 0; font-size: 1.04vw; line-height: 1; letter-spacing: .06em; }
.work-view-project { display: flex; gap: .75vw; align-items: center; border-bottom: 1px solid #777; padding-bottom: .2vw; font-size: .72vw; letter-spacing: .03em; white-space: nowrap; }
.work-view-project > span { font-size: 1.3vw; line-height: .8; }