:root {
  --color-bg: #f3f0e8;
  --color-surface: #faf7ef;
  --color-text: #0c1119;
  --color-muted: #5d6673;
  --color-accent: #3157e5;
  --color-accent-strong: #173fd4;
  --color-border: rgba(12, 17, 25, 0.17);
  --color-night: #07101b;
  --color-night-soft: #111c2a;
  --color-lime: #b8ff33;
  --space-section: 112px;
  --space-gutter: clamp(24px, 3vw, 72px);
  --radius-control: 0;
  --v25-page-max: 2160px;
  --v25-reading: 40em;
  --v25-serif: "Songti SC", "STSong", "Noto Serif SC", serif;
  --v25-sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --v25-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --v25-ease-out: cubic-bezier(.16, 1, .3, 1);
  --v25-ease-spring: cubic-bezier(.2, 1.35, .35, 1);
  --v25-shadow: 0 28px 70px rgba(10, 17, 28, 0.16);
}

html {
  scroll-padding-top: 90px;
}

body {
  overflow-x: clip;
}

.v25-title-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.home-page .v23-shell,
.project-index-page .v23-shell,
.project-page--graphic .v23-shell,
.home-page .nav,
.project-index-page .nav,
.project-page .nav,
.profile-page .nav {
  width: min(calc(100% - (var(--space-gutter) * 2)), var(--v25-page-max));
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Header */
.site-header {
  min-height: 78px;
  border-bottom-color: var(--color-border);
}

.site-header .nav {
  min-height: 78px;
}

.site-header .brand {
  min-width: 210px;
}

.site-header .brand > span:not(.brand-star) {
  font-size: 1.08rem;
}

.site-header .nav-links {
  gap: 2px;
  align-items: stretch;
}

.site-header .nav-links > a,
.site-header .nav-links > a:not(.nav-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  min-height: 56px;
  padding: 0 1.18rem;
  font-size: 0.9rem;
  line-height: 1;
}

.site-header .nav-links > a:not(.nav-cta)::after {
  bottom: 9px;
}

.site-header .nav-links .nav-cta {
  min-width: 78px;
  min-height: 56px;
  margin-block: auto;
  padding-inline: 1.2rem;
}

.site-header .sound-toggle {
  min-width: 104px;
  min-height: 44px;
  margin: auto 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-control);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.site-header :is(a, button):focus-visible,
main :is(a, button, [tabindex]):focus-visible,
footer :is(a, button):focus-visible {
  outline: 3px solid #ff7d3b;
  outline-offset: 4px;
}

/* Home hero */
.home-page .home-hero-v23 {
  min-height: min(900px, calc(100svh - 78px));
  padding: 88px 0 92px;
}

.home-page .home-hero-v23__grid {
  grid-template-columns: minmax(420px, .82fr) minmax(580px, 1.18fr);
  gap: clamp(48px, 4.2vw, 88px);
  align-items: center;
}

.home-page .home-hero-v23__copy {
  max-width: 650px;
}

.home-page .home-nameplate-v24 {
  width: min(100%, 610px);
  margin: 1.45rem 0 1.2rem;
}

.home-page .home-nameplate-v24 img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

.home-page .home-hero-v24__role {
  margin: 0 0 1.45rem;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.home-page .home-hero-v23__lead {
  max-width: 32em;
  margin-top: 0;
  color: #53606d;
  font-size: 17px;
  line-height: 1.9;
}

.home-page .home-hero-v23__notes {
  margin-top: 44px;
}

.home-page .home-hero-v23__gallery {
  --v25-near-x: 0px;
  --v25-near-y: 0px;
  --v25-far-x: 0px;
  --v25-far-y: 0px;
  min-height: 680px;
  perspective: 1400px;
}

.home-page .hero-frame {
  border-width: 12px;
  box-shadow: var(--v25-shadow);
  transition: transform 680ms var(--v25-ease-spring), box-shadow 360ms ease, filter 360ms ease;
  will-change: transform;
}

.home-page .hero-frame--game {
  top: 0;
  right: 0;
  width: 82%;
  height: 50%;
  transform: translate3d(var(--v25-near-x), var(--v25-near-y), 0) rotate(1.8deg);
}

.home-page .hero-frame--brand {
  right: 0;
  bottom: 0;
  width: 57%;
  height: 52%;
  transform: translate3d(var(--v25-far-x), var(--v25-far-y), 0) rotate(-2.2deg);
}

.home-page .hero-frame--editorial {
  bottom: 5%;
  left: 0;
  width: 55%;
  height: 44%;
  transform: translate3d(var(--v25-far-x), var(--v25-near-y), 0) rotate(2.4deg);
}

.home-page .hero-frame:is(:hover, :focus-visible) {
  z-index: 10;
  transform: translate3d(0, -18px, 55px) rotate(0deg) scale(1.025);
  box-shadow: 0 46px 100px rgba(8, 15, 26, 0.3);
  filter: saturate(1.06);
}

/* Nine-project horizontal film */
.work-reel-v25 {
  position: relative;
  padding: 92px 0 108px;
  overflow: hidden;
  color: #f7f4ec;
  background:
    radial-gradient(circle at 78% 15%, rgba(49, 87, 229, .28), transparent 30%),
    linear-gradient(135deg, #07101b 0%, #0b1421 65%, #101a27 100%);
}

.work-reel-v25::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 96px 100%;
  content: "";
}

.work-reel-v25__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
  margin-bottom: 42px;
}

.work-reel-v25__head .eyebrow {
  color: var(--color-lime);
}

.work-reel-v25__head h2 {
  max-width: 14em;
  margin: 12px 0 0;
  color: #fff;
  font: 700 44px/1.1 var(--v25-serif);
  letter-spacing: -0.035em;
}

.work-reel-v25__controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.work-reel-v25__controls button {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  background: rgba(255,255,255,.04);
  font-size: 1.35rem;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}

.work-reel-v25__controls button:is(:hover, :focus-visible) {
  color: var(--color-night);
  background: var(--color-lime);
  transform: translateY(-3px);
}

.work-reel-v25__status {
  min-width: 58px;
  color: rgba(255,255,255,.7);
  font: 800 .72rem/1 var(--v25-mono);
  letter-spacing: .08em;
  text-align: center;
}

.work-reel-v25__viewport {
  --v25-reel-pad: max(var(--space-gutter), calc((100vw - var(--v25-page-max)) / 2));
  position: relative;
  z-index: 1;
  padding: 14px var(--v25-reel-pad) 38px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--v25-reel-pad);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--color-accent) rgba(255,255,255,.12);
  scrollbar-width: thin;
  cursor: grab;
}

.work-reel-v25__viewport.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.work-reel-v25__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(340px, 31vw, 560px);
  gap: clamp(22px, 2.2vw, 42px);
  width: max-content;
}

.work-reel-card-v25 {
  --v25-card-rotate: 0deg;
  position: relative;
  scroll-snap-align: start;
  transform: translateY(var(--v25-card-shift, 0)) rotate(var(--v25-card-rotate));
  transform-origin: center;
  transition: transform 620ms var(--v25-ease-spring), opacity 620ms var(--v25-ease-out), filter 260ms ease;
}

.work-reel-card-v25:nth-child(3n + 1) { --v25-card-shift: 0px; --v25-card-rotate: -1deg; }
.work-reel-card-v25:nth-child(3n + 2) { --v25-card-shift: 28px; --v25-card-rotate: 1.2deg; }
.work-reel-card-v25:nth-child(3n) { --v25-card-shift: 10px; --v25-card-rotate: -.45deg; }

.work-reel-card-v25 > a {
  display: block;
  color: inherit;
  text-decoration: none;
  transform-style: preserve-3d;
}

.work-reel-card-v25 figure {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  overflow: hidden;
  border: 10px solid #f4efe5;
  background: #1a2635;
  box-shadow: 0 26px 62px rgba(0,0,0,.34);
}

.work-reel-card-v25 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--v25-ease-out), filter 420ms ease;
}

.work-reel-card-v25--brand img {
  object-fit: contain;
  background: #fff;
}

.work-reel-card-v25 figure::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(12,17,25,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  pointer-events: none;
  content: "";
}

.work-reel-card-v25__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  padding: 22px 8px 0;
}

.work-reel-card-v25__meta > span {
  grid-row: 1 / 3;
  padding-top: .42rem;
  color: var(--color-lime);
  font: 850 .72rem/1 var(--v25-mono);
}

.work-reel-card-v25 h3 {
  margin: 0;
  color: #fff;
  font: 700 30px/1.16 var(--v25-serif);
  letter-spacing: -.025em;
}

.work-reel-card-v25 p {
  max-width: 34em;
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: .92rem;
  line-height: 1.7;
}

.work-reel-card-v25:is(:hover, :focus-within) {
  z-index: 3;
  transform: translateY(calc(var(--v25-card-shift, 0px) - 18px)) rotate(0deg) scale(1.025);
}

.work-reel-card-v25:is(:hover, :focus-within) img {
  transform: scale(1.075) translate3d(var(--v25-image-x, 0), var(--v25-image-y, 0), 0);
  filter: saturate(1.08) contrast(1.02);
}

.work-reel-card-v25.is-neighbor {
  filter: brightness(.72) saturate(.78);
  transform: translateY(var(--v25-card-shift, 0)) scale(.96);
}

/* Editorial wall: same nine projects, different reading rhythm. */
.home-page .work-exhibition-v23.work-wall-v25 {
  position: relative;
  padding: 118px 0 150px;
  color: var(--color-text);
  background:
    linear-gradient(rgba(12,17,25,.045) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(12,17,25,.045) 1px, transparent 1px) 0 0 / 72px 72px,
    #ede9df;
}

.home-page .work-wall-v25 .section-heading-v23 {
  grid-template-columns: minmax(0, .9fr) minmax(320px, .5fr);
  margin-bottom: 84px;
}

.home-page .work-wall-v25 .section-heading-v23 .eyebrow {
  color: var(--color-accent);
}

.home-page .work-wall-v25 .section-heading-v23 h2 {
  max-width: 760px;
  color: var(--color-text);
  font-size: 72px;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.home-page .work-wall-v25 .section-heading-v23 > p:last-child {
  max-width: 34em;
  color: #53606d;
  font-size: 16px;
  line-height: 1.9;
}

.home-page .work-wall-v25 .work-grid-v23 {
  gap: 86px 42px;
}

.home-page .work-wall-v25 .work-tile-v23 {
  --v25-wall-shift: 0px;
  --v25-wall-rotate: 0deg;
  grid-column: span 6;
  transform: translateY(var(--v25-wall-shift)) rotate(var(--v25-wall-rotate));
  transition: transform 560ms var(--v25-ease-spring), filter 320ms ease;
}

.home-page .work-wall-v25 .work-tile-v23:nth-child(1) { grid-column: span 7; --v25-wall-rotate: -.5deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(2) { grid-column: span 5; --v25-wall-shift: 58px; --v25-wall-rotate: .7deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(3) { grid-column: span 5; --v25-wall-shift: 30px; --v25-wall-rotate: -.8deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(4) { grid-column: span 7; --v25-wall-rotate: .45deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(5) { grid-column: span 6; --v25-wall-rotate: .6deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(6) { grid-column: span 6; --v25-wall-shift: 46px; --v25-wall-rotate: -.55deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(7) { grid-column: span 7; --v25-wall-rotate: -.45deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(8) { grid-column: span 5; --v25-wall-shift: 52px; --v25-wall-rotate: .75deg; }
.home-page .work-wall-v25 .work-tile-v23:nth-child(9) { grid-column: 1 / -1; --v25-wall-rotate: -.25deg; }

.home-page .work-wall-v25 .work-tile-v23 > a {
  gap: 20px;
  color: var(--color-text);
}

.home-page .work-wall-v25 .work-tile-v23 figure {
  border: 12px solid #faf7ef;
  background: #d8d2c6;
  box-shadow: var(--v25-shadow);
}

.home-page .work-wall-v25 .work-tile-v23:nth-child(odd) figure {
  aspect-ratio: 16 / 10;
}

.home-page .work-wall-v25 .work-tile-v23:nth-child(even) figure {
  aspect-ratio: 4 / 3;
}

.home-page .work-wall-v25 .work-tile-v23:nth-child(9) figure {
  aspect-ratio: 21 / 9;
}

.home-page .work-wall-v25 .work-tile-v23 > a > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  align-items: start;
  padding-inline: 8px;
}

.home-page .work-wall-v25 .work-tile-v23 > a > div > span {
  grid-row: 1 / 4;
  color: var(--color-accent);
  font: 850 .75rem/1.2 var(--v25-mono);
}

.home-page .work-wall-v25 .work-tile-v23 h3 {
  margin: 0;
  color: var(--color-text);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.home-page .work-wall-v25 .work-tile-v23 p {
  max-width: 34em;
  margin: 0;
  color: #5b6673;
  line-height: 1.75;
}

.home-page .work-wall-v25 .work-tile-v23 b {
  color: var(--color-text);
}

.home-page .work-wall-v25 .work-tile-v23:is(:hover, :focus-within) {
  z-index: 3;
  transform: translateY(calc(var(--v25-wall-shift) - 14px)) rotate(0deg) perspective(1000px) rotateX(var(--v25-tilt-x, 0deg)) rotateY(var(--v25-tilt-y, 0deg));
}

.home-page .work-wall-v25 .work-tile-v23:is(:hover, :focus-within) img {
  transform: scale(1.055);
}

.home-page .work-wall-v25 .work-index-link-v23 a {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* Homepage typography and footer */
.home-page .about-v23 h2,
.home-page .resume-gallery-v23 h2 {
  font-size: 72px;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.home-page .resume-gallery-v23__intro p:last-child {
  max-width: 35em;
  color: rgba(247,244,236,.76);
  font-size: 16px;
  line-height: 1.9;
}

body.home-page .site-footer,
body.home-page .site-footer .footer-inner,
body.home-page .site-footer .footer-contact-grid {
  color: #f7f4ec;
  background-color: var(--color-night);
}

body.home-page .site-footer .footer-role-title,
body.home-page .site-footer .footer-role-title > span,
body.home-page .site-footer .footer-actions a,
body.home-page .site-footer .footer-contact-grid > *,
body.home-page .site-footer .footer-contact-grid a,
body.home-page .site-footer .footer-contact-grid strong {
  color: #f7f4ec;
}

body.home-page .site-footer .eyebrow {
  color: #8aa4ff;
}

body.home-page .site-footer .footer-contact-grid {
  border-color: rgba(255,255,255,.2);
}

body.home-page .site-footer .footer-contact-grid > * {
  min-height: 106px;
  border-color: rgba(255,255,255,.14);
  background: #121c28;
}

body.home-page .site-footer .footer-contact-grid small {
  color: #8aa4ff;
}

body.home-page .site-footer .footer-contact-grid strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

body .site-footer,
body .site-footer .footer-inner {
  color: #f7f4ec;
  background-color: #07101b;
}

body .site-footer :is(strong, p, a) {
  color: #f7f4ec;
}

body .site-footer .footer-inner > div:first-child > strong,
body .site-footer .footer-inner > div:first-child > .footer-role-title {
  color: #f7f4ec;
}

body .site-footer .eyebrow,
body .site-footer small {
  color: #8aa4ff;
}

/* Shared case-study title system */
.project-hero--v22 .hero-grid-v22 {
  grid-template-columns: minmax(390px, .78fr) minmax(520px, 1.22fr);
  gap: 72px;
}

.project-hero--v22 h1 {
  max-width: 9em;
  font-size: 76px;
  line-height: 1.03;
  letter-spacing: -.035em;
  text-wrap: balance;
  word-break: keep-all;
}

.project-hero--v22 .lead {
  max-width: var(--v25-reading);
  font-size: 17px;
  line-height: 1.9;
  text-wrap: pretty;
}

.project-page .project-hero h1,
.project-page--dplab .dplab-hero h1,
.profile-page--v22 .profile-hero-v22 h1,
.project-index-page--v25 .project-index-hero-v23 h1 {
  max-width: 11em;
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -.035em;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.project-page .project-hero .lead,
.project-page--dplab .dplab-hero .lead,
.profile-page--v22 .profile-hero-v22 .lead {
  max-width: var(--v25-reading);
  font-size: 17px;
  line-height: 1.9;
  text-wrap: pretty;
}

.project-index-page--v25 .project-index-hero-v23 h1 {
  max-width: 8.6em;
}

.project-index-page--v25 .project-index-hero-v23 h1 em {
  display: block;
}

.project-page--graphic .brand-hero-v23__copy h1 {
  max-width: 760px;
  font-size: 78px;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.project-page--graphic .brand-world-v23__intro h2 {
  max-width: 900px;
  font-size: 64px;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.project-page--graphic .brand-world-v23__intro > p {
  max-width: 38em;
  font-size: 16px;
  line-height: 1.9;
}

/* Complete, gap-free brand galleries. */
.project-page--graphic .brand-gallery-v23 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.project-page--graphic .brand-gallery-v23 figure {
  padding: 18px;
  background: color-mix(in srgb, var(--world-bg) 70%, white 30%);
  box-shadow: 0 24px 58px rgba(12,17,25,.13);
}

.project-page--graphic .brand-gallery-v23 img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: rgba(255,255,255,.52);
}

.project-page--graphic-v24 .brand-gallery-v23--outdoors figure.brand-shot-v23--wide,
.project-page--graphic-v24 .brand-gallery-v23--mushroom figure.brand-shot-v23--wide,
.project-page--graphic-v24 .brand-gallery-v23--jingjing figure.brand-shot-v23--wide:last-child {
  grid-column: auto;
}

.project-page--graphic-v24 .brand-gallery-v23--jingjing figure.brand-cover-selected-v24,
.project-page--graphic-v24 .brand-gallery-v23--space figure.brand-shot-v23--wide:first-child,
.project-page--graphic-v24 .brand-gallery-v23--space figure.brand-shot-v23--wide:last-child {
  grid-column: 1 / -1;
}

.project-page--graphic .brand-gallery-v23 figure:is(:hover, :focus-within) {
  z-index: 2;
  transform: translateY(-12px) rotate(var(--v25-gallery-rotate, -.25deg));
  box-shadow: 0 38px 82px rgba(12,17,25,.2);
}

/* Reveal states are assigned by site-v25.js. */
.v25-reveal {
  opacity: 0;
  transform: translate3d(0, 68px, 0) rotate(var(--v25-reveal-rotate, 0deg));
  transition: opacity 720ms var(--v25-ease-out), transform 820ms var(--v25-ease-spring);
  transition-delay: var(--v25-delay, 0ms);
}

.v25-reveal:nth-child(3n + 1) { --v25-reveal-rotate: -.8deg; }
.v25-reveal:nth-child(3n + 2) { --v25-reveal-rotate: .65deg; }

.v25-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.is-touching,
.is-pressed-v25 {
  filter: brightness(.94);
}

@media (max-width: 1440px) {
  :root { --space-section: 96px; }
  .home-page .home-hero-v23__grid { grid-template-columns: minmax(390px, .8fr) minmax(520px, 1.2fr); gap: 52px; }
  .home-page .home-hero-v23__gallery { min-height: 620px; }
  .home-page .work-wall-v25 .section-heading-v23 h2,
  .home-page .about-v23 h2,
  .home-page .resume-gallery-v23 h2 { font-size: 64px; }
  .project-hero--v22 h1,
  .project-page .project-hero h1,
  .project-page--dplab .dplab-hero h1,
  .profile-page--v22 .profile-hero-v22 h1,
  .project-index-page--v25 .project-index-hero-v23 h1 { font-size: 68px; }
  .project-page--graphic .brand-hero-v23__copy h1 { font-size: 70px; }
  .project-page--graphic .brand-world-v23__intro h2 { font-size: 58px; }
}

@media (max-width: 1180px) {
  .home-page .home-hero-v23__grid { grid-template-columns: minmax(350px, .8fr) minmax(480px, 1.2fr); gap: 42px; }
  .home-page .home-hero-v23__gallery { min-height: 560px; }
  .home-page .home-nameplate-v24 { width: min(100%, 540px); }
  .home-page .home-hero-v24__role { font-size: 24px; }
  .project-hero--v22 .hero-grid-v22 { gap: 48px; }
}

@media (max-width: 1024px) {
  :root { --space-gutter: 28px; --space-section: 84px; }
  .home-page .home-hero-v23 { min-height: auto; padding-block: 72px 86px; }
  .home-page .home-hero-v23__grid,
  .project-hero--v22 .hero-grid-v22,
  .project-page--graphic .brand-hero-v23__grid { grid-template-columns: 1fr; }
  .home-page .home-hero-v23__copy { max-width: 760px; }
  .home-page .home-hero-v23__gallery { min-height: 650px; }
  .home-page .hero-frame--game { width: 76%; }
  .home-page .hero-frame--editorial { left: 4%; width: 54%; }
  .home-page .hero-frame--brand { width: 52%; }
  .project-hero--v22 h1,
  .project-page .project-hero h1,
  .project-page--dplab .dplab-hero h1,
  .profile-page--v22 .profile-hero-v22 h1,
  .project-index-page--v25 .project-index-hero-v23 h1 { max-width: 12em; font-size: 58px; }
  .project-page--graphic .brand-hero-v23__copy h1 { font-size: 60px; }
  .project-page--graphic .brand-world-v23__intro h2 { font-size: 52px; }
  .home-page .work-wall-v25 .work-tile-v23,
  .home-page .work-wall-v25 .work-tile-v23:nth-child(n) { grid-column: span 6; --v25-wall-shift: 0px; }
  .home-page .work-wall-v25 .work-tile-v23:nth-child(even) { --v25-wall-shift: 38px; }
  .home-page .work-wall-v25 .work-tile-v23:nth-child(9) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .site-header .nav { min-height: 70px; }
  .site-header .nav-toggle { min-width: 52px; min-height: 48px; }
  .site-header .nav-links { align-items: stretch; }
  .site-header .nav-links > a,
  .site-header .nav-links > a:not(.nav-cta) { justify-content: space-between; min-height: 54px; padding-inline: 1rem; font-size: .95rem; }
  .site-header .sound-toggle { width: calc(100% - 2rem); min-height: 48px; margin: .75rem 1rem; }
  .work-reel-v25__head { grid-template-columns: 1fr; }
  .work-reel-v25__controls { justify-content: flex-start; }
  .home-page .work-wall-v25 .section-heading-v23 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --space-gutter: 22px; --space-section: 72px; }
  .home-page .home-hero-v23 { padding: 56px 0 72px; }
  .home-page .home-nameplate-v24 { width: min(100%, 560px); margin-block: 1rem; }
  .home-page .home-hero-v24__role { font-size: 21px; }
  .home-page .home-hero-v23__lead { font-size: 16px; line-height: 1.82; }
  .home-page .home-hero-v23__gallery { min-height: 500px; }
  .home-page .hero-frame { border-width: 8px; }
  .home-page .hero-frame--game { top: 0; right: 0; width: 96%; height: 43%; }
  .home-page .hero-frame--editorial { bottom: 4%; left: 0; width: 68%; height: 38%; }
  .home-page .hero-frame--brand { right: 0; bottom: 0; width: 54%; height: 44%; }
  .work-reel-v25 { padding-block: 72px 82px; }
  .work-reel-v25__head h2 { font-size: 36px; }
  .work-reel-v25__track { grid-auto-columns: min(84vw, 430px); gap: 20px; }
  .work-reel-card-v25:nth-child(n) { --v25-card-shift: 0px; --v25-card-rotate: 0deg; }
  .work-reel-card-v25 figure { border-width: 7px; }
  .work-reel-card-v25 h3 { font-size: 26px; }
  .home-page .work-exhibition-v23.work-wall-v25 { padding-block: 82px 104px; }
  .home-page .work-wall-v25 .section-heading-v23 { margin-bottom: 64px; }
  .home-page .work-wall-v25 .section-heading-v23 h2,
  .home-page .about-v23 h2,
  .home-page .resume-gallery-v23 h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.025em; }
  .home-page .work-wall-v25 .work-grid-v23 { grid-template-columns: 1fr; gap: 64px; }
  .home-page .work-wall-v25 .work-tile-v23,
  .home-page .work-wall-v25 .work-tile-v23:nth-child(n) { grid-column: 1; transform: none; }
  .home-page .work-wall-v25 .work-tile-v23:nth-child(n) figure { aspect-ratio: 4 / 3; border-width: 8px; }
  .home-page .work-wall-v25 .work-tile-v23 h3 { font-size: 28px; }
  .project-hero--v22 h1,
  .project-page .project-hero h1,
  .project-page--dplab .dplab-hero h1,
  .profile-page--v22 .profile-hero-v22 h1,
  .project-index-page--v25 .project-index-hero-v23 h1 { max-width: none; font-size: 44px; line-height: 1.08; letter-spacing: -.02em; }
  .project-hero--v22 .lead,
  .project-page .project-hero .lead,
  .project-page--dplab .dplab-hero .lead,
  .profile-page--v22 .profile-hero-v22 .lead { font-size: 16px; line-height: 1.82; }
  .project-page--graphic .brand-hero-v23__copy h1 { max-width: none; font-size: 44px; line-height: 1.08; letter-spacing: -.025em; }
  .project-page--graphic .brand-world-v23__intro h2 { max-width: none; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; }
  .project-page--graphic .brand-gallery-v23 { gap: 18px; }
  .project-page--graphic .brand-gallery-v23 figure,
  .project-page--graphic .brand-gallery-v23 .brand-shot-v23--wide,
  .project-page--graphic .brand-gallery-v23--outdoors .brand-shot-v23--wide,
  .project-page--graphic .brand-gallery-v23--mushroom .brand-shot-v23--wide,
  .project-page--graphic .brand-gallery-v23--jingjing .brand-shot-v23--wide:last-child { flex-basis: min(86vw, 540px); grid-column: auto; }
  body.home-page .site-footer .footer-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  :root { --space-gutter: 18px; }
  .home-page .home-hero-v24__role { font-size: 19px; }
  .home-page .home-hero-v23__gallery { min-height: 470px; }
  .work-reel-v25__head h2 { font-size: 32px; }
  .work-reel-v25__controls button { width: 48px; height: 48px; }
  .home-page .work-wall-v25 .section-heading-v23 h2,
  .home-page .about-v23 h2,
  .home-page .resume-gallery-v23 h2,
  .project-hero--v22 h1,
  .project-page .project-hero h1,
  .project-page--dplab .dplab-hero h1,
  .profile-page--v22 .profile-hero-v22 h1,
  .project-index-page--v25 .project-index-hero-v23 h1,
  .project-page--graphic .brand-hero-v23__copy h1 { font-size: 40px; }
  .project-page--graphic .brand-world-v23__intro h2 { font-size: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v25-reveal,
  .v25-reveal.is-visible,
  .home-page .hero-frame,
  .work-reel-card-v25,
  .work-reel-card-v25:is(:hover, :focus-within),
  .work-reel-card-v25 img,
  .home-page .work-wall-v25 .work-tile-v23,
  .home-page .work-wall-v25 .work-tile-v23:is(:hover, :focus-within),
  .project-page--graphic .brand-gallery-v23 figure {
    opacity: 1;
    transform: none;
    transition-duration: .01ms;
    animation-duration: .01ms;
  }
}