:root {
  --v26-hero-size: clamp(52px, 3.9vw, 68px);
  --v26-section-size: clamp(36px, 2.9vw, 52px);
  --v26-callout-size: clamp(30px, 2.35vw, 40px);
  --v26-body-size: clamp(16px, 1.05vw, 18px);
  --v26-ease-out: cubic-bezier(.16, 1, .3, 1);
  --v26-ease-spring: cubic-bezier(.2, .92, .3, 1.12);
}

/* v26 type ceiling: the work leads, typography supports it. */
:is(.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 .project-index-hero-v23 h1,
    .project-page--graphic .brand-hero-v23__copy h1,
    .lab-hero h1,
    .page-404 h1) {
  width: auto;
  max-width: 13em;
  margin-bottom: 0;
  font-size: var(--v26-hero-size) !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}

:is(.v22-section-title h2,
    .case-brief__header h2,
    .section-heading-v23 h2,
    .project-page .section h2,
    .case-body h2,
    .brand-world-v23__intro h2,
    .home-page .work-wall-v25 .section-heading-v23 h2,
    .home-page .about-v23 h2,
    .home-page .resume-gallery-v23 h2,
    .lab-page .section-head h2,
    .lab-page h2) {
  max-width: 18em;
  font-size: var(--v26-section-size) !important;
  line-height: 1.19 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}

:is(.case-callout-v22 blockquote, .project-page blockquote, .lab-page blockquote) {
  max-width: 26em;
  font-size: var(--v26-callout-size) !important;
  line-height: 1.36 !important;
  letter-spacing: -.02em !important;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: pretty;
}

main :is(h1, h2) br {
  display: none;
}

main :is(p, li):not(.eyebrow):not(.work-reel-card-v25__meta p) {
  text-wrap: pretty;
}

.project-page :is(.lead, .section > p, .case-body > p),
.profile-page :is(.lead, .profile-hero-v22 p),
.lab-page :is(.lead, .section-head p) {
  max-width: 42em;
  font-size: var(--v26-body-size);
  line-height: 1.82;
}

.v25-title-line {
  max-width: 100%;
}

/* Generated wordmark: glyphs are untouched; the exported alpha canvas is tightly cropped. */
.home-page .home-nameplate-v24 {
  width: min(100%, 405px);
  margin: 1.35rem 0 1.45rem;
}

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

.home-page .home-hero-v24__role {
  font-size: clamp(22px, 1.55vw, 27px);
  line-height: 1.32;
  letter-spacing: -.02em;
}

.home-page .home-hero-v23__lead {
  max-width: 34em;
  font-size: 17px;
  line-height: 1.85;
}

/* Contact print: nine small proofs share one state with the main reel. */
.work-reel-v25 {
  padding-block: 82px 94px;
}

.work-reel-v25__head {
  margin-bottom: 26px;
}

.work-reel-v25__head h2 {
  max-width: 12em;
  font-size: clamp(36px, 2.65vw, 46px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}

.work-reel-v25__controls button {
  width: 56px;
  height: 56px;
  cursor: pointer;
}

.work-reel-v25__controls button:disabled {
  color: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.14);
  background: transparent;
  transform: none;
  cursor: not-allowed;
}

.work-reel-v25__controls .work-reel-v26__autoplay {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 94px;
  padding-inline: 15px;
  font: 800 .72rem/1 var(--v25-mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

.work-reel-v26__autoplay-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(179, 255, 41, .12);
}

.work-reel-v26.is-autoplay-running .work-reel-v26__autoplay {
  color: #07101b;
  border-color: var(--color-lime);
  background: var(--color-lime);
}

.work-reel-v26.is-autoplay-running .work-reel-v26__autoplay-dot {
  animation: v26-autoplay-pulse 1.35s ease-in-out infinite;
}

.work-reel-v26.is-autoplay-paused .work-reel-v26__autoplay-dot {
  opacity: .5;
}

@keyframes v26-autoplay-pulse {
  50% { transform: scale(1.55); box-shadow: 0 0 0 7px rgba(7, 16, 27, .1); }
}

.work-reel-v26__rail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(9, minmax(54px, 1fr));
  gap: 8px;
  width: min(calc(100% - (var(--space-gutter) * 2)), var(--v25-page-max));
  margin: 0 auto 34px;
}

.work-reel-v26__proof {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  height: 58px;
  padding: 5px 9px 5px 5px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.64);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms var(--v26-ease-out);
}

.work-reel-v26__proof::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left center;
}

.work-reel-v26 .work-reel-v26__proof[aria-current="true"]::after {
  transform: scaleX(1);
}

.work-reel-v26__proof img {
  width: 100%;
  height: 46px;
  object-fit: cover;
  opacity: .42;
  filter: saturate(.55) contrast(.9);
  transition: opacity 260ms ease, filter 260ms ease, transform 360ms var(--v26-ease-out);
}

.work-reel-v26__proof span {
  font: 800 .67rem/1 var(--v25-mono);
  letter-spacing: .04em;
}

.work-reel-v26__proof:is(:hover, :focus-visible),
.work-reel-v26__proof[aria-current="true"] {
  color: #07101b;
  border-color: var(--color-lime);
  background: var(--color-lime);
  transform: translateY(-3px);
}

.work-reel-v26__proof[aria-current="true"] img,
.work-reel-v26__proof:is(:hover, :focus-visible) img {
  opacity: 1;
  filter: none;
  transform: scale(1.04);
}

.work-reel-v25__viewport {
  --v26-card-width: clamp(320px, 42vw, 680px);
  padding-top: 18px;
  padding-inline: 0;
  padding-bottom: 24px;
  scroll-padding-inline: max(var(--space-gutter), calc((100vw - var(--v26-card-width)) / 2));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.work-reel-v26.is-autoplay-running .work-reel-v25__viewport {
  scroll-snap-type: none;
}

.work-reel-v25__viewport::-webkit-scrollbar,
.work-reel-v26__rail::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.work-reel-v25__track {
  grid-auto-columns: var(--v26-card-width);
  gap: clamp(20px, 2vw, 36px);
  box-sizing: content-box;
  padding-inline: 0;
}

.work-reel-card-v25,
.work-reel-card-v25:nth-child(n) {
  --v25-card-shift: 20px;
  --v25-card-rotate: 0deg;
  opacity: var(--v26-card-opacity, .5);
  filter: saturate(var(--v26-card-saturation, .62)) brightness(var(--v26-card-brightness, .72));
  transform: translateY(var(--v26-card-shift, 18px)) scale(var(--v26-card-scale, .925));
  transition: opacity 90ms linear, filter 90ms linear, transform 90ms linear;
  will-change: transform, opacity, filter;
}

.work-reel-card-v25.is-neighbor-v26 {
  z-index: 2;
}

.work-reel-card-v25.is-active-v26,
.work-reel-card-v25.is-active-v26:is(:hover, :focus-within) {
  z-index: 4;
}

.work-reel-card-v25 > a {
  cursor: pointer;
}

.work-reel-card-v25 figure {
  border-width: 9px;
  box-shadow: 0 30px 76px rgba(0,0,0,.36);
}

.work-reel-card-v25:not(.is-active-v26) .work-reel-card-v25__meta {
  opacity: .76;
}

.work-reel-card-v25 h3 {
  font-size: clamp(25px, 1.75vw, 32px);
}

.work-reel-v25__viewport.is-dragging,
.work-reel-v25__viewport.is-dragging * {
  cursor: grabbing;
  user-select: none;
}

/* Full-work entries are deliberate calls to action, not footnotes. */
.project-page :is(.reader-launch-v22 > .button.primary[data-manual-open],
                  .brand-case-v22__actions > button[data-manual-open]),
.project-page--graphic .brand-archive-v23 > button[data-manual-open] {
  min-height: 58px;
  padding: 1rem 1.3rem;
  border-width: 2px;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .015em;
  box-shadow: 4px 4px 0 rgba(8, 15, 25, .22);
  transition: transform 180ms var(--v26-ease-out), box-shadow 180ms ease, color 180ms ease, background 180ms ease;
}

.project-page .brand-case-v22__actions > button[data-manual-open] {
  color: #fff;
  border-color: #111820;
  background: #111820;
}

.project-page--graphic .brand-archive-v23 > button[data-manual-open] {
  color: var(--world-bg);
  border-color: var(--world-ink);
  background: var(--world-ink);
}

.project-page :is(.reader-launch-v22 > .button.primary[data-manual-open],
                  .brand-case-v22__actions > button[data-manual-open]):is(:hover, :focus-visible),
.project-page--graphic .brand-archive-v23 > button[data-manual-open]:is(:hover, :focus-visible) {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 rgba(8, 15, 25, .22);
}

.home-page .full-portfolio-download-v26 {
  border: 2px solid var(--v23-ink);
  color: var(--v23-ink);
  background:
    linear-gradient(115deg, rgba(182, 255, 36, .9) 0 17%, rgba(250, 248, 242, .94) 17% 100%);
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--v23-blue);
}

.home-page .full-portfolio-download-v26:is(:hover, :focus-visible) {
  color: #fff;
  border-color: var(--v23-blue);
  background: var(--v23-blue);
  box-shadow: 7px 7px 0 var(--v23-ink);
}

/* Keep the rest of the homepage editorial, not monumental. */
.home-page .work-wall-v25 .section-heading-v23 h2,
.home-page .about-v23 h2,
.home-page .resume-gallery-v23 h2 {
  font-size: var(--v26-section-size) !important;
  line-height: 1.19 !important;
  letter-spacing: -.025em !important;
}

.home-page .work-wall-v25 .work-tile-v23 h3 {
  font-size: clamp(28px, 2vw, 34px);
}

/* Hexiaoxuan: one clear overview, then two focused views. Unequal source
   heights no longer stretch the short screenshots into empty cards. */
.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
  align-items: start;
}

.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26 figure {
  align-self: start;
  overflow: hidden;
  box-shadow: 0 24px 58px rgba(63, 70, 125, .1);
}

.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26__home {
  grid-column: 1 / -1;
}

.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26__home img {
  display: block;
  aspect-ratio: 2200 / 1292;
  object-fit: contain;
}

.project-page--hexiaoxuan-v22 :is(.hexiaoxuan-showcase-v26__detail, .hexiaoxuan-showcase-v26__flow) img {
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: zoom-in;
}

.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26__detail img {
  object-position: right center;
}

.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26__flow img {
  object-position: center top;
}

.project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26 figcaption {
  min-height: 48px;
  display: flex;
  align-items: center;
}

/* Brand PDFs open as a near-fullscreen contact sheet. The default mode fits
   one whole landscape page in the available canvas; detail mode keeps the
   original width-first reader for close inspection. */
.project-page--graphic .pdf-reader {
  padding: 8px;
}

.project-page--graphic .pdf-reader__dialog {
  width: min(calc(100vw - 16px), 2280px);
  height: calc(100dvh - 16px);
  max-height: none;
}

.project-page--graphic .pdf-reader__header {
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  padding: 12px clamp(14px, 2vw, 28px);
}

.project-page--graphic .pdf-reader__header h2 {
  font-size: clamp(1.25rem, 1.8vw, 2rem);
}

.project-page--graphic .pdf-reader__header .eyebrow {
  margin-bottom: 2px;
}

.project-page--graphic .pdf-reader__header p {
  margin-top: 2px;
}

.project-page--graphic .pdf-reader__actions {
  gap: 8px;
}

.project-page--graphic .pdf-reader__actions :is(a, button) {
  min-height: 46px;
  padding: .65rem .85rem;
}

.project-page--graphic .pdf-reader.is-fit-page .pdf-reader__pages {
  gap: 12px;
  padding: 12px;
  scroll-padding-block: 12px;
  scroll-snap-type: y mandatory;
}

.project-page--graphic .pdf-reader.is-fit-page .pdf-reader__page {
  width: 100%;
  max-width: none;
  height: calc(100dvh - 150px);
  min-height: 540px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  overflow: hidden;
  scroll-margin-block: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #ded9d0;
}

.project-page--graphic .pdf-reader.is-fit-page .pdf-reader__page img {
  grid-row: 1;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 186px);
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  background: transparent;
}

.project-page--graphic :is(.brand-hero-v23__mosaic, .brand-gallery-v23, .reader-launch-v22) img {
  image-rendering: auto;
  filter: none;
  opacity: 1;
}

.project-page--graphic .pdf-reader.is-fit-page .pdf-reader__page figcaption {
  grid-row: 2;
  width: 100%;
  padding-block: .5rem;
}

@media (max-width: 1024px) {
  :root {
    --v26-hero-size: clamp(42px, 6.1vw, 60px);
    --v26-section-size: clamp(32px, 4.8vw, 46px);
    --v26-callout-size: clamp(27px, 3.9vw, 36px);
  }

  .home-page .home-nameplate-v24 {
    width: min(100%, 350px);
  }

  .work-reel-v26__rail {
    grid-template-columns: repeat(9, minmax(72px, 1fr));
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 700px) {
  :root {
    --v26-hero-size: clamp(36px, 10.5vw, 42px);
    --v26-section-size: clamp(28px, 8.5vw, 34px);
    --v26-callout-size: clamp(24px, 7.5vw, 30px);
  }

  .home-page .home-nameplate-v24 {
    width: min(78vw, 300px);
  }

  .home-page .home-hero-v24__role {
    font-size: 20px;
  }

  .work-reel-v25 {
    padding-block: 66px 76px;
  }

  .work-reel-v25__head {
    margin-bottom: 20px;
  }

  .work-reel-v25__head h2 {
    font-size: 32px !important;
  }

  .work-reel-v26__rail {
    width: calc(100% - (var(--space-gutter) * 2));
    margin-bottom: 22px;
  }

  .work-reel-v26__proof {
    height: 52px;
  }

  .work-reel-v26__proof img {
    height: 40px;
  }

  .work-reel-v25__viewport {
    --v26-card-width: min(82vw, 430px);
  }

  .work-reel-card-v25,
  .work-reel-card-v25:nth-child(n),
  .work-reel-card-v25.is-neighbor-v26,
  .work-reel-card-v25.is-active-v26 {
    transform: none;
  }

  .work-reel-card-v25 figure {
    border-width: 7px;
  }

  .project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26 {
    grid-template-columns: 1fr;
  }

  .project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26__home {
    grid-column: auto;
  }

  .project-page--hexiaoxuan-v22 .hexiaoxuan-showcase-v26__home img,
  .project-page--hexiaoxuan-v22 :is(.hexiaoxuan-showcase-v26__detail, .hexiaoxuan-showcase-v26__flow) img {
    aspect-ratio: 4 / 3;
  }

  .project-page--graphic .pdf-reader__dialog {
    width: 100%;
    height: 100dvh;
  }

  .project-page--graphic .pdf-reader__header {
    align-items: start;
    padding: 10px 12px;
  }

  .project-page--graphic .pdf-reader.is-fit-page .pdf-reader__page {
    height: calc(100dvh - 162px);
    min-height: 360px;
  }

  .project-page--graphic .pdf-reader.is-fit-page .pdf-reader__page img {
    max-height: calc(100dvh - 198px);
  }
}

@media (max-width: 390px) {
  .work-reel-v25__controls button {
    width: 50px;
    height: 50px;
  }

  .work-reel-v25__controls .work-reel-v26__autoplay {
    width: auto;
    min-width: 84px;
    padding-inline: 12px;
  }

  .work-reel-v26__rail {
    grid-template-columns: repeat(9, 66px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-reel-v26__proof,
  .work-reel-v26__proof img,
  .work-reel-card-v25,
  .work-reel-card-v25:nth-child(n),
  .work-reel-card-v25.is-neighbor-v26,
  .work-reel-card-v25.is-active-v26 {
    transform: none;
    transition-duration: .01ms;
  }

  .work-reel-v26__proof::after,
  .work-reel-v26__autoplay-dot {
    animation: none !important;
  }
}