:root {
  --color-primary-red: #a93830;
  --color-primary-red-deep: var(--color-primary-red);
  --color-primary-red-soft: var(--color-primary-red);
  --color-accent-purple: #bd93bb;
  --color-accent-purple-soft: var(--color-accent-purple);
  --color-accent-purple-deep: var(--color-accent-purple);
  --color-accent-yellow: #f09405;
  --color-accent-yellow-soft: var(--color-accent-yellow);
  --color-accent-mint: #29ffd9;
  --color-accent-blue: var(--color-accent-purple);
  --color-accent-blue-soft: var(--color-accent-purple-soft);
  --color-accent-blue-deep: var(--color-accent-purple-deep);
  --color-ink: #111111;
  --color-ink-soft: #333333;
  --color-line: rgba(17, 17, 17, 0.22);
  --color-paper: #faf7f0;
  --color-paper-light: #fffdf7;
  --color-paper-deep: #eee6d8;
  --paper: var(--color-paper);
  --ivory: var(--color-paper-light);
  --sheet: #fffaf2;
  --ink: var(--color-ink);
  --soft-ink: var(--color-ink-soft);
  --muted: #7f766c;
  --line: rgba(17, 17, 17, 0.16);
  --line-strong: var(--color-line);
  --sage: #c8d8c3;
  --pear: #dce8b8;
  --rose: var(--color-primary-red-soft);
  --yellow: var(--color-accent-yellow);
  --blue-grey: var(--color-accent-blue-soft);
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --max: 1120px;
  --type-hero: 4.85rem;
  --type-section: 6.1rem;
  --type-subsection: 3.2rem;
  --type-card-title: 2.2rem;
  --type-body-large: 1.12rem;
  --type-mosaic: 0.68rem;
  --image-small: clamp(120px, 13vw, 180px);
  --image-medium: clamp(240px, 28vw, 360px);
  --image-feature: clamp(420px, 48vw, 560px);
  --display-sans: "Helvetica Neue", Inter, Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC",
    "STSong", serif;
  --italic-serif: Georgia, "Times New Roman", "Songti SC", "Noto Serif SC",
    serif;
  --body: "Songti SC", "Noto Serif SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", serif;
  --sans: Inter, "Helvetica Neue", Helvetica, Arial, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", "Space Mono", "Courier Prime", "SFMono-Regular",
    Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.82;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(rgba(17, 17, 17, 0.075) 0.55px, transparent 0.55px),
    radial-gradient(rgba(255, 255, 255, 0.42) 0.65px, transparent 0.65px);
  background-position: 0 0, 7px 9px;
  background-size: 13px 13px, 17px 17px;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

a {
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.26em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

a:hover {
  color: var(--color-primary-red);
  text-decoration-color: currentColor;
}

img {
  display: block;
  max-width: 100%;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) clamp(var(--space-3), 4vw, var(--space-6));
  border-bottom: 1px solid var(--line);
  background: rgba(247, 244, 236, 0.82);
  backdrop-filter: blur(16px);
}

.brand {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand::before {
  content: "";
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-right: 0.55rem;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-primary-red);
  vertical-align: -0.06em;
}

.site-nav nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.site-nav nav a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-nav nav a:hover {
  color: var(--color-primary-red);
  border-bottom-color: currentColor;
}

.section {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-8) 0;
  position: relative;
}

.section > :not(.shape) {
  position: relative;
  z-index: 1;
}

.shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.88;
}

.shape-red {
  background: var(--color-primary-red);
}

.shape-red-soft {
  background: var(--color-primary-red-soft);
}

.shape-blue {
  background: var(--color-accent-blue);
}

.shape-blue-soft {
  background: var(--color-accent-blue-soft);
}

.shape-black {
  background: var(--color-ink);
}

.shape-outline {
  background: transparent;
  border: 1px solid var(--color-ink);
}

.shape-outline-red {
  background: transparent;
  border: 1px solid var(--color-primary-red-deep);
}

.shape-blob-a {
  border-radius: 50%;
}

.shape-blob-b {
  border-radius: 10%;
}

.shape-blob-c {
  border-radius: 50%;
}

.shape-blob-d {
  clip-path: polygon(
    50% 0%,
    61% 29%,
    93% 25%,
    69% 48%,
    85% 78%,
    53% 66%,
    29% 89%,
    32% 56%,
    4% 40%,
    36% 32%
  );
}

.shape-dot {
  border-radius: 50%;
}

.shape-short-line {
  height: 1px;
  background: var(--color-ink);
}

.shape--works-marker {
  width: 58px;
  aspect-ratio: 1;
  left: calc(100% - 80px);
  top: var(--space-7);
  transform: none;
  opacity: 1;
}

.shape--works-outline {
  width: 62px;
  aspect-ratio: 1;
  left: 0;
  top: calc(var(--space-7) + 28px);
  border-color: var(--color-ink);
  transform: none;
  opacity: 0.9;
}

.shape--photo-dot {
  width: 18px;
  aspect-ratio: 1;
  left: 33%;
  top: calc(var(--space-7) + 8px);
  opacity: 0.95;
}

.shape--photo-outline {
  width: 72px;
  aspect-ratio: 1;
  right: 4%;
  top: calc(var(--space-7) + 28px);
  transform: none;
  opacity: 0.85;
}

.shape--collection-line {
  width: 88px;
  right: 0;
  top: calc(var(--space-7) + 34px);
  transform: rotate(-12deg);
  background: var(--color-primary-red-deep);
}

.shape--collection-blue {
  width: 42px;
  aspect-ratio: 1;
  left: 0;
  top: calc(var(--space-7) + 10px);
  transform: none;
  opacity: 0.96;
}

.hero {
  width: 100%;
  min-height: calc(100vh - 60px);
  position: relative;
  display: block;
  padding-right: max(16px, calc((100vw - var(--max)) / 2));
  padding-left: max(16px, calc((100vw - var(--max)) / 2));
  overflow: hidden;
  background: var(--color-primary-red);
  color: var(--color-paper-light);
}

.hero__grid {
  min-height: calc(100vh - 60px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: var(--space-2) var(--space-4);
  align-content: center;
  padding: var(--space-4) 0;
}

.hero__note,
.section-kicker,
.work-card__meta {
  color: var(--color-primary-red-deep);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero__note {
  grid-column: 1 / span 4;
  width: fit-content;
  margin: 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid currentColor;
}

.hero__hello {
  grid-column: 1 / span 7;
  margin: 0 0 calc(-1 * var(--space-1));
  color: var(--color-accent-yellow-soft);
  font-family: var(--italic-serif);
  font-size: clamp(1rem, 1.8vw, 1.65rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
}

.hero__title {
  grid-column: 1 / span 10;
  align-self: center;
  max-width: none;
  margin: 0;
  font-family: var(--display-sans);
  font-size: var(--type-hero);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 0.82;
  text-wrap: balance;
  text-transform: uppercase;
}

.hero__line {
  display: block;
}

.hero__line--wide {
  letter-spacing: 0.08em;
}

.hero__line--serif {
  color: var(--color-accent-yellow-soft);
  font-family: var(--italic-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hero__line--long {
  margin-left: 0.75em;
}

.hero__inline {
  font-family: var(--mono);
  font-size: 0.76em;
  letter-spacing: 0.04em;
}

.hero__inline--ai {
  position: relative;
  top: -0.08em;
  display: inline-block;
  padding: 0.01em 0.16em 0.04em;
  color: var(--color-accent-purple);
  line-height: 1;
}

.hero__inline--ai::after {
  content: "";
  position: absolute;
  inset: -0.11em -0.18em -0.08em;
  border: 1px solid currentColor;
  border-radius: 999px;
  pointer-events: none;
}

.hero__inline--real {
  color: var(--color-accent-mint);
  font-family: var(--italic-serif);
  font-size: 1.22em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

.hero__images {
  grid-column: 10 / span 3;
  grid-row: 2 / span 2;
  align-self: center;
  display: block;
  justify-self: end;
  width: 66%;
  z-index: 2;
}

.hero__portrait-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hero__image {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(250, 246, 238, 0.72);
  background: var(--color-paper-light);
  aspect-ratio: 4 / 5;
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.96) sepia(0.04);
  transition: transform 0.5s cubic-bezier(.22, .8, .24, 1), filter 0.5s ease;
}

.hero__portrait-link:hover .hero__image,
.hero__portrait-link:focus-visible .hero__image { border-color: var(--color-accent-mint); }
.hero__portrait-link:hover .hero__image img,
.hero__portrait-link:focus-visible .hero__image img { transform: scale(1.035); filter: saturate(1) contrast(1); }
.hero__portrait-link:focus-visible { outline: 2px solid var(--color-accent-mint); outline-offset: 4px; }

.hero__image--0 {
  width: 100%;
}

.no-break {
  white-space: nowrap;
}

.hero__body {
  grid-column: 1 / span 6;
  max-width: 560px;
  margin: calc(-1 * var(--space-1)) 0 0;
  color: rgba(250, 246, 238, 0.88);
  font-family: var(--display-sans);
  font-size: clamp(1rem, 1.65vw, 1.55rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.12;
  text-transform: uppercase;
}

.hero__links {
  grid-column: 1 / span 5;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-1)) 0 0;
}

.hero__meta {
  grid-column: 8 / span 5;
  align-self: end;
  margin: 0;
  color: rgba(250, 246, 238, 0.72);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: right;
  text-transform: uppercase;
}

.hero__links a,
.works-notice {
  width: fit-content;
  padding: 0 0 var(--space-1);
  border-bottom: 1px solid var(--color-primary-red);
  color: var(--soft-ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero .hero__note,
.hero .hero__links a {
  color: var(--color-paper-light);
}

.hero .hero__title {
  color: var(--color-paper-light);
}

.hero .hero__links a {
  border-bottom-color: currentColor;
}

.hero .hero__links a:hover {
  color: var(--color-accent-mint);
}

.hero__links a:hover,
.works-notice:hover {
  color: var(--color-primary-red-deep);
}

.hero .hero__links a:hover {
  color: var(--color-accent-mint);
}

.photography__header,
.collection-section__header {
  max-width: 880px;
}

.photography__header .section-kicker,
.collection-section__header .section-kicker {
  grid-column: 1;
  align-self: start;
}

h2 {
  grid-column: 2;
  margin: 0;
  font-family: var(--display-sans);
  font-size: var(--type-section);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 0.88;
  text-transform: uppercase;
}

h3 {
  margin: 0;
  font-family: var(--display-sans);
  font-size: var(--type-card-title);
  font-weight: 280;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.life__intro p,
.photography__header p:last-child,
.collection-section__header > p:last-child {
  grid-column: 2 / span 1;
  max-width: 520px;
  margin: var(--space-3) 0 0;
  color: var(--soft-ink);
  font-size: 0.98rem;
}

.life {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.life > .section-kicker,
.life__intro {
  width: min(var(--max), calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

.life__intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-3);
}

.life__intro h2 {
  grid-column: 1 / span 8;
  display: grid;
  gap: var(--space-1);
  font-size: var(--type-section);
  line-height: 0.86;
  letter-spacing: 0.02em;
}

.life__intro h2 span {
  display: block;
}

.life__serif {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

.life__note {
  grid-column: 9 / span 4;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-primary-red);
}

.life__intro p,
.life__note p {
  grid-column: auto;
  max-width: 34rem;
  margin: 0;
}

.life__note p + p {
  margin-top: var(--space-4);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.72;
  text-transform: uppercase;
}

.life-mosaic {
  margin-top: var(--space-7);
  width: 100%;
  overflow: hidden;
  border-block: 1px solid var(--color-primary-red);
  background: rgba(251, 248, 239, 0.62);
}

.mosaic-row {
  width: 100%;
  overflow: hidden;
}

.mosaic-row + .mosaic-row {
  border-top: 1px solid var(--color-primary-red);
}

.mosaic-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(92px, 8.6vw, 132px);
  width: max-content;
  animation-duration: 76s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

.mosaic-row--left .mosaic-track {
  animation-name: drift-left;
}

.mosaic-row--right .mosaic-track {
  animation-name: drift-right;
}

.mosaic-tile {
  margin: 0;
  min-width: 0;
  aspect-ratio: 1;
  overflow: hidden;
}

.mosaic-tile + .mosaic-tile {
  border-left: 1px solid var(--color-primary-red);
}

.mosaic-tile--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  opacity: 1;
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.mosaic-tile--image:hover img {
  filter: contrast(1.03);
  opacity: 1;
  transform: translateY(-2px);
}

.mosaic-tile--text {
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: var(--color-paper-light);
  color: var(--soft-ink);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--type-mosaic);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.mosaic-tile--red {
  color: var(--color-primary-red);
}

.mosaic-tile--purple {
  color: var(--color-accent-purple);
}

.life-quote {
  width: min(var(--max), calc(100% - 32px));
  margin: var(--space-7) auto 0;
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}

.life-quote__zh {
  margin: 0;
  color: var(--ink);
  font-family: var(--display-sans);
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.15;
  white-space: nowrap;
}

.life-quote__spark {
  display: inline-block;
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 1.34em;
  font-style: italic;
  line-height: 0.85;
  transition: color 180ms ease;
}

.life-quote__spark:hover {
  color: var(--color-accent-mint);
}

.life-quote__en {
  margin: 0;
  color: var(--color-accent-purple);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.65;
  text-transform: uppercase;
}

@keyframes drift-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes drift-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

.works {
  width: min(1200px, calc(100% - 32px));
}

.works__header {
  max-width: 880px;
}

.editorial-heading,
.works__eyebrow {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.35rem, 6vw, 6rem);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 0.92;
  text-transform: none;
  white-space: nowrap;
}

.editorial-heading__main,
.works__eyebrow-main {
  font-family: var(--display-sans);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.editorial-heading__serif,
.works__eyebrow-serif {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: none;
}

.section-title-sub {
  grid-column: 2;
  margin: var(--space-2) 0 0;
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
}

.photography__header h2 {
  font-size: clamp(2.35rem, 6vw, 6rem);
  line-height: 0.92;
}

.works-notice {
  display: block;
  margin: var(--space-5) 0 0 auto;
  color: var(--muted);
}

.works-group {
  margin-top: var(--space-7);
}

.works-group__label {
  width: fit-content;
  margin: 0 0 var(--space-5);
  color: var(--ink);
  font-family: var(--display-sans);
  font-size: var(--type-subsection);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: none;
}

.works-group__label-zh {
  margin-right: var(--space-3);
  letter-spacing: 0.02em;
}

.works-group__label-en {
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: 0.28em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: 0.16em;
}

.works-group__label::before {
  content: none;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.work-card {
  position: relative;
  grid-column: span 6;
  display: grid;
  grid-template-columns: 1.25fr 2fr;
  gap: var(--space-3) var(--space-4);
  align-content: start;
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  background: transparent;
  transition: transform 200ms ease;
}

.work-card::before {
  content: none;
}

.work-card::after {
  content: none;
}

.work-card:hover {
  transform: translateY(-3px);
}

.work-card--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  gap: var(--space-5);
  align-items: end;
}

.work-list--featured .work-card--featured:not(.work-card--wide) {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  border-top: 1px solid var(--line);
}

.work-card--compact {
  grid-column: span 4;
  grid-template-columns: 1fr;
}

.work-list--other {
  gap: var(--space-6) var(--space-4);
}

.work-list--other .work-card--compact {
  grid-column: span 3;
}

.work-card__number {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: 4.8rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 0.82;
}

.work-card--wide .work-card__number {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 4.8rem;
}

.work-list--featured .work-card--featured:not(.work-card--wide) .work-card__number {
  grid-row: auto;
  font-size: clamp(3.2rem, 5vw, 4.4rem);
}

.work-card--compact .work-card__number {
  grid-row: auto;
  font-size: 3.6rem;
}

.work-list--other .work-card__number {
  font-size: clamp(2.7rem, 3.8vw, 3.35rem);
}

.work-card a {
  grid-column: 2;
  display: block;
  overflow: hidden;
  background: var(--ivory);
}

.work-card--wide a {
  grid-column: 1;
  grid-row: 2;
}

.work-list--featured .work-card--featured:not(.work-card--wide) a,
.work-card--compact a,
.work-card--compact .work-card__placeholder {
  grid-column: 1;
}

.work-card img {
  width: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(0.94) contrast(0.97) sepia(0.035);
  transition: filter 220ms ease, transform 220ms ease;
}

.work-card--wide img {
  aspect-ratio: 16 / 9;
}

.work-list--featured .work-card--wide:first-child img {
  object-position: center 24%;
}

.work-card--featured:not(.work-card--wide) img {
  aspect-ratio: 3 / 2;
}

.work-card--compact img {
  aspect-ratio: 4 / 5;
}

.work-list--other .work-card--compact img {
  aspect-ratio: 3 / 2;
}

.work-card a:hover img {
  filter: saturate(1.02) contrast(1) sepia(0.01);
  transform: translateY(-2px);
}

.work-card__placeholder {
  grid-column: 2;
  min-height: 240px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 35% 28%, rgba(189, 147, 187, 0.16), transparent 42%),
    radial-gradient(circle at 72% 64%, rgba(169, 56, 48, 0.1), transparent 38%),
    var(--ivory);
}

.work-card__placeholder span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.work-card > div {
  grid-column: 2;
  display: grid;
  gap: var(--space-1);
}

.work-card--wide > div {
  grid-column: 2;
  grid-row: 2;
}

.work-list--featured .work-card--featured:not(.work-card--wide) > div {
  grid-column: 1;
}

.work-card--compact > div {
  grid-column: 1;
}

.work-card h3::before {
  content: "(";
  position: absolute;
  left: 0;
  top: -0.02em;
  color: var(--color-primary-red-deep);
  font-family: var(--display-sans);
  font-size: 0.92em;
  font-weight: 200;
  line-height: 1;
  pointer-events: none;
}

.work-card h3::after {
  content: ")";
  position: absolute;
  right: 0;
  top: -0.02em;
  color: var(--color-primary-red-deep);
  font-family: var(--display-sans);
  font-size: 0.92em;
  font-weight: 200;
  line-height: 1;
  pointer-events: none;
}

.work-card__meta {
  color: var(--muted);
}

.work-card h3 {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding: 0 0.46em;
  color: var(--ink);
  font-size: var(--type-card-title);
  overflow-wrap: normal;
}

.work-card h3.work-card__title--tall {
  padding: 0 0.62em;
}

.work-card h3.work-card__title--tall::before,
.work-card h3.work-card__title--tall::after {
  top: -0.04em;
  color: rgba(169, 56, 48, 0.82);
  font-size: 1.55em;
  font-weight: 200;
  line-height: 0.9;
}

.work-list--featured .work-card--featured:not(.work-card--wide) h3 {
  margin-bottom: 0.35em;
  padding: 0 0.62em;
}

.work-list--featured .work-card--featured:not(.work-card--wide) h3::before,
.work-list--featured .work-card--featured:not(.work-card--wide) h3::after {
  top: -0.1em;
  color: rgba(169, 56, 48, 0.82);
  font-size: 1.46em;
  font-weight: 200;
  line-height: 0.72;
}

.work-list--other .work-card h3 {
  font-size: clamp(1.2rem, 1.45vw, 1.55rem);
}

.work-list--other .work-card h3.work-card__title--tall {
  padding: 0 0.56em;
}

.work-list--other .work-card h3.work-card__title--tall::before,
.work-list--other .work-card h3.work-card__title--tall::after {
  font-size: 1.42em;
}

.work-list--other .work-card__meta {
  font-size: 0.62rem;
  line-height: 1.45;
}

.work-card h3 a {
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.work-card h3 a:hover {
  color: var(--color-accent-mint);
}

.work-card p {
  margin: 0;
}

.work-card p:last-child {
  color: var(--soft-ink);
  font-size: 0.95rem;
  line-height: 1.78;
}

.photography {
  width: min(1200px, calc(100% - 32px));
}

.photo-gallery {
  margin-top: var(--space-4);
  display: block;
}

.photo-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, clamp(90px, 7.5vw, 115px));
  gap: var(--space-6) var(--space-4);
}

.photo-gallery__item {
  position: relative;
  margin: 0;
}

.photo-gallery__item--0 { grid-column: 1 / 5; grid-row: 1 / 3; }
.photo-gallery__item--1 { grid-column: 5 / 8; grid-row: 1 / 2; }
.photo-gallery__item--2 { grid-column: 8 / 10; grid-row: 1 / 2; }
.photo-gallery__item--3 { grid-column: 10 / 13; grid-row: 1 / 3; }
.photo-gallery__item--4 { grid-column: 1 / 4; grid-row: 3 / 4; }
.photo-gallery__item--5 { grid-column: 5 / 9; grid-row: 2 / 4; }
.photo-gallery__item--6 { grid-column: 10 / 13; grid-row: 3 / 4; }
.photo-gallery__item--7 { grid-column: 1 / 4; grid-row: 4 / 5; }
.photo-gallery__item--8 { grid-column: 4 / 7; grid-row: 4 / 5; }
.photo-gallery__item--9 { grid-column: 7 / 10; grid-row: 4 / 5; }
.photo-gallery__item--10 { grid-column: 10 / 13; grid-row: 4 / 5; }

.photo-gallery__item--5 {
  width: 82%;
  height: 82%;
  place-self: center;
}

.photo-gallery__item img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: saturate(1) contrast(0.98);
  opacity: 1;
  transition: filter 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.photo-gallery__item::after {
  content: none;
}

.photo-gallery__item figcaption {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  display: block;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.photo-gallery__item:hover img {
  filter: saturate(1.02) contrast(1) sepia(0.01);
  opacity: 1;
  transform: translateY(-3px);
}

.photo-gallery__entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  min-height: 0;
  margin: var(--space-3) auto 0;
  padding: var(--space-2) 2.1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  writing-mode: horizontal-tb;
  transition: color 180ms ease, transform 180ms ease;
}

.photo-gallery__entry::before,
.photo-gallery__entry::after {
  position: absolute;
  top: 50%;
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: 2.55rem;
  font-weight: 200;
  line-height: 0.7;
  pointer-events: none;
  transform: translateY(-52%) scaleY(1.45);
}

.photo-gallery__entry::before {
  left: 0;
  content: "(";
}

.photo-gallery__entry::after {
  right: 0;
  content: ")";
}

.photo-gallery__note {
  margin: var(--space-6) auto 0;
  color: var(--soft-ink);
  font-size: 0.95rem;
  line-height: 1.78;
  text-align: center;
}

.photo-gallery__note span {
  margin: 0 0.08em;
  font-family: var(--italic-serif);
  font-size: 1.18em;
  font-style: italic;
}

.photo-gallery__entry span {
  font-family: var(--display-sans);
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.photo-gallery__entry strong {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: clamp(1.35rem, 2.35vw, 2rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
}

.photo-gallery__entry:hover {
  transform: translateY(-3px);
}

.photo-gallery__entry:hover strong {
  color: var(--color-accent-mint);
}

.collection-section {
  width: min(var(--max), calc(100% - 32px));
}

.likes-section {
  width: min(1200px, calc(100% - 32px));
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.writing-entry {
  position: relative;
  display: block;
  width: min(430px, 72vw);
  margin: var(--space-6) auto 0;
  color: var(--ink);
  text-decoration: none;
}

.writing-entry img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 55%;
  transition: transform 220ms ease;
}

.writing-entry span {
  position: absolute;
  left: 50%;
  top: 55%;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.writing-entry:hover img {
  transform: translateY(-4px) rotate(-1deg);
}

.writing-page {
  width: min(1200px, calc(100% - 32px));
}

.writing-page__header {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.writing-page__header h1 {
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  margin: var(--space-2) 0 0;
  font-family: var(--display-sans);
  font-size: clamp(3.2rem, 7vw, 6.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.writing-page__header h1 em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 0.72em;
  font-weight: 300;
}

.letter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-7) var(--space-4);
  margin-top: var(--space-8);
}

.letter-envelope {
  position: relative;
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transform: rotate(var(--letter-tilt, 0deg));
}

.letter-envelope--1 { --letter-tilt: -2deg; }
.letter-envelope--2 { --letter-tilt: 1.5deg; margin-top: var(--space-4); }
.letter-envelope--3 { --letter-tilt: -1deg; }
.letter-envelope--4 { --letter-tilt: 2deg; margin-top: var(--space-5); }
.letter-envelope--5 { --letter-tilt: -1.5deg; }

.letter-envelope img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 55%;
  transition: transform 200ms ease;
}

.letter-envelope span {
  position: absolute;
  left: 50%;
  top: 56%;
  font-family: var(--mono);
  font-size: clamp(0.58rem, 1vw, 0.72rem);
  letter-spacing: 0.1em;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.letter-envelope:hover img {
  transform: translateY(-4px) scale(1.015);
}

.letter-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 820px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.letter-dialog::backdrop {
  background: rgba(17, 17, 17, 0.5);
  backdrop-filter: blur(3px);
}

.letter-dialog__paper {
  position: relative;
  max-height: min(82vh, 820px);
  padding: clamp(2rem, 6vw, 5rem);
  background: var(--color-paper-light);
  box-shadow: 0 18px 60px rgba(17, 17, 17, 0.2);
  overflow-y: auto;
}

.letter-dialog__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: 1.8rem;
  font-weight: 200;
  cursor: pointer;
}

.letter-dialog__date {
  margin: 0 0 var(--space-5);
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-style: italic;
  line-height: 1;
}

.letter-dialog__content {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 2;
}

.letter-dialog__content p {
  margin: 0 0 1.35em;
}

.letter-dialog__content p:last-child {
  margin-bottom: 0;
}

.likes-heart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(5, clamp(105px, 10vw, 125px));
  gap: var(--space-2) 10px;
  width: 100%;
  margin-top: var(--space-4);
}

.likes-heart__tile {
  position: relative;
  align-self: start;
  justify-self: center;
  width: min(100%, 96px);
  margin: 0;
  transform: rotate(var(--tilt, 0deg));
}

.likes-heart__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.likes-heart--interactive .likes-heart__tile {
  cursor: pointer;
  transition: transform 180ms ease, color 180ms ease;
}

.likes-heart--interactive .likes-heart__link {
  animation: interest-float var(--float-duration, 5.4s) ease-in-out var(--float-delay, 0s) infinite;
  will-change: transform;
}

@keyframes interest-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(1px, -5px, 0); }
  70% { transform: translate3d(-1px, -2px, 0); }
}

.likes-heart--interactive .likes-heart__tile:hover,
.likes-heart--interactive .likes-heart__tile:has(.likes-heart__link:focus-visible) {
  color: var(--color-accent-mint);
  transform: translateY(-5px) rotate(var(--tilt, 0deg));
}

.likes-heart--interactive .likes-heart__link:hover figcaption em,
.likes-heart--interactive .likes-heart__link:focus-visible figcaption em {
  color: var(--color-accent-mint);
}

.likes-heart__tile > img,
.likes-heart__tile > span,
.likes-heart__link > img,
.likes-heart__link > span {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  object-fit: cover;
}

.likes-heart__tile--placeholder > span,
.likes-heart__tile--placeholder .likes-heart__link > span {
  position: relative;
  border: 1px solid rgba(17, 17, 17, 0.38);
}

.likes-heart__tile--placeholder > span::before,
.likes-heart__tile--placeholder > span::after,
.likes-heart__tile--placeholder .likes-heart__link > span::before,
.likes-heart__tile--placeholder .likes-heart__link > span::after {
  content: "";
  position: absolute;
  inset: 50% 12% auto;
  border-top: 1px solid rgba(17, 17, 17, 0.16);
  transform-origin: center;
}

.likes-heart__tile--placeholder > span::before { transform: rotate(45deg); }
.likes-heart__tile--placeholder > span::after { transform: rotate(-45deg); }

.likes-heart__tile figcaption {
  display: grid;
  gap: 0.1rem;
  margin-top: 0.45rem;
  line-height: 1.1;
}

.likes-heart__tile figcaption strong {
  font-family: var(--display-sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.03em;
}

.likes-heart__tile figcaption em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 0.72rem;
  font-weight: 300;
}

.likes-heart__tile--1 { grid-column: 2; grid-row: 1; --tilt: -3deg; }
.likes-heart__tile--2 { grid-column: 3; grid-row: 1; --tilt: 2deg; }
.likes-heart__tile--3 { grid-column: 4; grid-row: 1; margin-top: 34px; --tilt: -2deg; }
.likes-heart__tile--4 { grid-column: 5; grid-row: 1; --tilt: 2deg; }
.likes-heart__tile--5 { grid-column: 6; grid-row: 1; --tilt: -3deg; }
.likes-heart__tile--6 { grid-column: 7; grid-row: 2; --tilt: 2deg; }
.likes-heart__tile--7 { grid-column: 6; grid-row: 3; --tilt: -2deg; }
.likes-heart__tile--8 { grid-column: 5; grid-row: 4; --tilt: 2deg; }
.likes-heart__tile--9 { grid-column: 4; grid-row: 5; --tilt: -2deg; }
.likes-heart__tile--10 { grid-column: 3; grid-row: 4; --tilt: 2deg; }
.likes-heart__tile--11 { grid-column: 2; grid-row: 3; --tilt: -2deg; }
.likes-heart__tile--12 { grid-column: 1; grid-row: 2; --tilt: 2deg; }
.likes-heart__tile--13 { grid-column: 2; grid-row: 2; --tilt: -1deg; }

.likes-heart__tile--1,
.likes-heart__tile--4,
.likes-heart__tile--7 {
  width: min(100%, 108px);
}

.likes-heart__tile--3,
.likes-heart__tile--6,
.likes-heart__tile--10 {
  width: min(88%, 90px);
}

.likes-heart__tile--3 {
  width: min(52%, 70px);
}

.likes-heart__tile--12,
.likes-heart__tile--13 {
  width: min(72%, 82px);
}

.likes-heart__center {
  position: absolute;
  top: 40%;
  left: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
}

.likes-heart__center .photo-gallery__entry {
  margin: 0;
  padding-inline: 1.8rem;
  white-space: nowrap;
}

.likes-heart__hint {
  display: grid;
  gap: 0.35rem;
  width: min(260px, 28vw);
  color: var(--soft-ink);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
}

.likes-heart__hint em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 1.08em;
  font-weight: 300;
  letter-spacing: -0.015em;
}

.interests-page,
.interest-detail-page {
  width: min(1200px, calc(100% - 32px));
}

.interests-page .likes-heart {
  margin-top: var(--space-7);
}

.interest-detail-page__cover {
  width: min(620px, 100%);
  margin: var(--space-7) auto 0;
}

.interest-detail-page__cover img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.interest-detail-page__cover figcaption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.travel-timeline {
  margin-top: var(--space-7);
}

.travel-timeline__intro {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.45em;
  margin: 0 auto var(--space-8);
  color: var(--soft-ink);
  font-size: 0.95rem;
  text-align: center;
}

.travel-timeline__intro em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 1.22em;
  font-weight: 300;
}

.travel-timeline__list {
  position: relative;
  display: grid;
  gap: var(--space-6);
}

.travel-timeline__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-primary-red);
  transform: translateX(-50%);
}

.travel-stop {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
  min-height: 210px;
}

.travel-stop__visual {
  width: min(82%, 350px);
}

.travel-stop--left .travel-stop__visual,
.travel-stop--right .travel-stop__copy {
  grid-column: 1;
  justify-self: end;
}

.travel-stop--left .travel-stop__copy,
.travel-stop--right .travel-stop__visual {
  grid-column: 3;
  justify-self: start;
}

.travel-stop--right .travel-stop__visual {
  grid-row: 1;
}

.travel-stop__visual img,
.travel-stop__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.travel-stop__visual img {
  object-fit: cover;
}

.travel-stop__placeholder {
  position: relative;
  border: 1px solid var(--color-primary-red);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(169, 56, 48, 0.3) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(169, 56, 48, 0.3) 50%, transparent calc(50% + 0.5px));
}

.travel-stop__placeholder span {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.25rem 0.45rem;
  background: var(--color-paper);
  color: var(--color-primary-red);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.travel-stop__marker {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 11px;
  aspect-ratio: 1;
  border: 1px solid var(--color-primary-red);
  border-radius: 50%;
  background: var(--color-paper);
}

.travel-stop__copy {
  width: min(100%, 360px);
  padding: var(--space-4);
}

.travel-stop--left .travel-stop__copy {
  text-align: left;
}

.travel-stop--right .travel-stop__copy {
  text-align: right;
}

.travel-stop__copy > p {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.travel-stop__copy time {
  display: block;
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  font-weight: 200;
  letter-spacing: -0.06em;
  line-height: 0.85;
}

.travel-stop__copy h2 {
  display: grid;
  gap: 0.1rem;
  margin: var(--space-3) 0 0;
  font-family: var(--display-sans);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 300;
  line-height: 1.05;
}

.travel-stop__copy h2 em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 0.72em;
  font-weight: 300;
  letter-spacing: -0.025em;
  text-transform: none;
}

.travel-stop--upcoming .travel-stop__marker {
  background: var(--color-accent-mint);
}

.collection-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.collection-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.collection-card::before {
  content: "";
  width: 0.5rem;
  aspect-ratio: 1;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-primary-red-soft);
}

.collection-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.94) contrast(0.97) sepia(0.035);
}

.collection-card--text {
  min-height: 220px;
}

.collection-card__body {
  display: grid;
  gap: var(--space-1);
}

.collection-card__body h3 {
  font-size: var(--type-card-title);
}

.collection-card__body p {
  margin: 0;
}

.collection-card__body p:last-child {
  color: var(--soft-ink);
  font-size: 0.95rem;
}

#dreams .collection-card__body h3 {
  font-size: clamp(1.85rem, 2.6vw, 2.1rem);
  letter-spacing: -0.055em;
  text-wrap: pretty;
}

#dreams .collection-card__body p:last-child {
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.photography-page {
  width: min(1200px, calc(100% - 32px));
}

.photography-page__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: var(--space-4) var(--space-6);
  align-items: start;
  min-height: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.photography-page__header h1 {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  margin: 0;
  font-family: var(--display-sans);
  font-size: clamp(3rem, 6.4vw, 6.4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.photography-page__header h1 em {
  min-width: 0;
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 0.72em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: none;
}

.photography-page__header > p:last-child {
  grid-column: 2;
  max-width: 420px;
  margin: 0;
  color: var(--soft-ink);
  font-size: 1rem;
  line-height: 1.8;
}

.photography-page__header > .work-card__meta {
  grid-column: 1;
  align-self: end;
  margin: 0;
}

.photo-album-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-7) var(--space-4);
  align-items: start;
  margin-top: var(--space-8);
}

.photo-album-card {
  position: relative;
}

.photo-album-card:nth-child(1) { grid-column: 1 / 5; }
.photo-album-card:nth-child(2) { grid-column: 6 / 9; margin-top: var(--space-6); }
.photo-album-card:nth-child(3) { grid-column: 10 / 13; }
.photo-album-card:nth-child(4) { grid-column: 2 / 6; }
.photo-album-card:nth-child(5) { grid-column: 7 / 11; margin-top: var(--space-5); }
.photo-album-card:nth-child(6) { grid-column: 1 / 4; margin-top: var(--space-4); }
.photo-album-card:nth-child(7) { grid-column: 5 / 9; }
.photo-album-card:nth-child(8) { grid-column: 10 / 13; margin-top: var(--space-6); }

.photo-album-card:nth-child(2)::after,
.photo-album-card:nth-child(4)::after,
.photo-album-card:nth-child(6)::after,
.photo-album-card:nth-child(8)::after {
  content: "＊";
  position: absolute;
  right: -1.7rem;
  top: 46%;
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 1rem;
  line-height: 1;
}

.photo-album-card:nth-child(4)::after,
.photo-album-card:nth-child(8)::after {
  color: var(--color-accent-purple);
}

.photo-album-card a,
.photo-album-card figure {
  display: block;
  margin: 0;
}

.photo-album-card figure {
  position: relative;
}

.photo-album-card a {
  text-decoration: none;
}

.photo-album-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 420ms ease, filter 420ms ease;
}

.photo-album-card:nth-child(2) img,
.photo-album-card:nth-child(6) img {
  aspect-ratio: 3 / 4;
}

.photo-album-card:nth-child(3) img,
.photo-album-card:nth-child(8) img {
  aspect-ratio: 1 / 1;
}

.photo-album-card:nth-child(4) img,
.photo-album-card:nth-child(7) img {
  aspect-ratio: 16 / 10;
}

.photo-album-card a:hover img {
  filter: saturate(1.05);
  transform: scale(0.992);
}

.photo-album-card figcaption,
.photo-album-page__gallery figcaption {
  margin-top: var(--space-1);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.photo-album-card figcaption {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  margin: 0;
  color: var(--ink);
  font-family: var(--display-sans);
  padding: 0 0.52em;
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
}

.photo-album-card figcaption::before,
.photo-album-card figcaption::after {
  position: absolute;
  top: -0.08em;
  color: var(--color-primary-red);
  font-family: var(--display-sans);
  font-size: 1.42em;
  font-weight: 200;
  line-height: 0.82;
  pointer-events: none;
}

.photo-album-card figcaption::before {
  left: 0;
  content: "(";
}

.photo-album-card figcaption::after {
  right: 0;
  content: ")";
}

.photo-album-card h2 {
  display: grid;
  gap: 0.1rem;
  margin: var(--space-3) 0 0;
  font-family: var(--display-sans);
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-transform: none;
}

.photo-album-card h2 span {
  min-width: 0;
  white-space: nowrap;
}

.photo-album-card h2 em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 0.82em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.025em;
  text-transform: none;
  white-space: nowrap;
}

.photo-album-card a:hover h2 span {
  color: var(--color-accent-mint);
}

.photo-album-page {
  width: min(1200px, calc(100% - 32px));
}

.photo-album-page__header {
  padding: var(--space-5) 0 var(--space-7);
  border-top: 1px solid var(--color-line);
}

.photo-album-page__header h1 {
  display: grid;
  margin: var(--space-3) 0 0;
  font-family: var(--display-sans);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 0.88;
}

.photo-album-page__header h1 em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: 0.45em;
  font-style: italic;
  font-weight: 300;
  text-transform: lowercase;
}

.photo-album-page__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-3);
}

.photo-album-page__gallery figure {
  margin: 0;
}

.photo-album-page__gallery img {
  width: 100%;
  height: auto;
}

.project-detail {
  width: min(1200px, calc(100% - 32px));
}

.project-back {
  display: inline-block;
  margin-bottom: var(--space-5);
  color: var(--color-primary-red);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(320px, 7fr);
  gap: var(--space-6);
  align-items: end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.project-hero__title {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: end;
}

.project-hero__title h1 {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: var(--space-1);
  margin: 0;
  line-height: 0.9;
}

.project-title__zh {
  font-family: var(--display-sans);
  font-size: clamp(3rem, 6vw, 6.2rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.project-title__en {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: clamp(2.8rem, 6.6vw, 6.6rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 100%;
}

.project-title--long-zh .project-title__zh {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: 0;
}

.project-title--long-en .project-title__en {
  font-size: clamp(2rem, 3.7vw, 3.7rem);
  line-height: 0.94;
}

.project-title--very-long-en .project-title__en {
  font-size: clamp(1.75rem, 3.15vw, 3.1rem);
}

.project-hero__title > p:last-child {
  max-width: 480px;
  margin: var(--space-2) 0 0;
  color: var(--soft-ink);
  font-size: 1rem;
  line-height: 1.78;
}

.project-hero__cover {
  margin: 0;
  background: var(--color-paper-light);
}

.project-hero__cover img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

body[data-project="citySprout"] .project-hero__cover img {
  object-position: center 34%;
}

.project-pages {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-6);
}

.project-page {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.project-page img {
  width: 100%;
  background: var(--color-paper-light);
}

.project-page figcaption {
  margin-top: var(--space-1);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer {
  width: 100%;
  margin: 0;
  color: var(--muted);
}

.footer__bar {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-5) 0 var(--space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer--contact .footer__bar {
  width: 100%;
  padding-right: max(16px, calc((100% - var(--max)) / 2));
  padding-left: max(16px, calc((100% - var(--max)) / 2));
  border-top-color: rgba(255, 253, 247, .34);
  background: var(--color-primary-red);
  color: rgba(255, 253, 247, .72);
}

.footer--contact .footer__bar a { color: inherit; }
.footer--contact .footer__bar a:hover { color: var(--color-accent-mint); }

.footer p,
.footer__bar p {
  margin: 0;
}

.contact-footer {
  background: var(--color-primary-red);
  color: var(--color-paper-light);
}

.contact-footer__inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(3.5rem, 6vw, 6rem);
}

.contact-footer__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255, 253, 247, .55);
}

.contact-footer__header > p,
.contact-footer__details p,
.contact-footer__qrs figcaption {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-footer__header h2 {
  display: flex;
  align-items: baseline;
  gap: .22em;
  margin: 0;
  font-family: var(--display-sans);
  font-size: clamp(3.2rem, 7.2vw, 7.5rem);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .82;
}

.contact-footer__header h2 em {
  color: var(--color-accent-mint);
  font-family: var(--serif);
  font-size: .52em;
  font-weight: 400;
  letter-spacing: -.02em;
}

.contact-footer__details {
  display: grid;
  grid-template-columns: .95fr .8fr .95fr 1.6fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
}

.contact-footer__details section { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.contact-footer__details .contact-footer__xiaohongshu {
  align-items: flex-end;
  justify-self: end;
}
.contact-footer__xiaohongshu > p { width: 100%; }
.contact-footer__details p { margin-bottom: .45rem; color: rgba(255, 253, 247, .68); }
.contact-footer__details a,
.contact-footer__details span { color: inherit; font-family: var(--sans); font-size: clamp(.92rem, 1.2vw, 1.08rem); font-weight: 300; text-decoration: none; }
.contact-footer__details a:hover { color: var(--color-accent-mint); }

.contact-footer__qrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 150px));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.contact-footer__qrs figure { margin: 0; }
.contact-footer__qrs img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 3px solid var(--color-paper-light); }
.contact-footer__qrs figcaption { margin-top: var(--space-1); color: var(--color-paper-light); }

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 560ms ease, transform 560ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  :root {
    --type-hero: 4.35rem;
    --type-section: 4.4rem;
    --type-subsection: 2.8rem;
    --type-card-title: 2rem;
    --type-body-large: 1.06rem;
  }
}

@media (max-width: 880px) {
  :root {
    --type-hero: 3rem;
    --type-section: 3rem;
    --type-subsection: 2.15rem;
    --type-card-title: 1.72rem;
    --type-body-large: 1rem;
    --type-mosaic: 0.62rem;
  }

  body {
    font-size: 16px;
  }

  .site-nav {
    align-items: flex-start;
    display: block;
  }

  .site-nav nav {
    justify-content: flex-start;
    margin-top: var(--space-2);
  }

  .section {
    padding: var(--space-7) 0;
  }

  .hero__grid,
  .hero,
  .works__header,
  .photography__header,
  .collection-section__header,
  .life__intro,
  .work-card--wide,
  .photo-gallery,
  .collection-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero__grid {
    min-height: auto;
    gap: var(--space-4);
    padding: var(--space-6) 0;
  }

  .hero__note,
  .hero__hello,
  .hero__title,
  .hero__images,
  .hero__body,
  .hero__links,
  .hero__meta {
    grid-column: 1;
  }

  .hero__title {
    line-height: 0.95;
  }

  .hero__line--long {
    margin-left: 0;
  }

  .hero__images {
    grid-row: auto;
    max-width: 260px;
  }

  .hero__meta {
    text-align: left;
  }

  .shape--works-outline,
  .shape--photo-outline,
  .shape--collection-blue {
    display: none;
  }

  .shape--works-marker {
    width: 34px;
    left: auto;
    right: 0;
  }

  .shape--photo-dot {
    left: auto;
    right: 8px;
  }

  .hero__note,
  .hero__hello,
  .hero__title,
  .hero__images,
  .hero__meta,
  .hero__body,
  .hero__links,
  .editorial-heading,
  .section-title-sub,
  h2,
  .works__header > p:last-child,
  .life__intro p,
  .photography__header p:last-child,
  .collection-section__header > p:last-child {
    grid-column: auto;
  }

  .hero__body,
  .hero__links {
    margin-top: var(--space-4);
  }

  .life__intro h2,
  .life__note,
  .life-quote__zh,
  .life-quote__en,
  .work-card,
  .work-card--wide,
  .work-card--compact,
  .work-card__number,
  .work-card a,
  .work-card__placeholder,
  .work-card > div,
  .work-card--wide > div,
  .work-card--compact > div,
  .photo-gallery__item,
  .photo-gallery__item--0,
  .photo-gallery__item--2,
  .photo-gallery__item--3,
  .photography-page__header > *,
  .project-hero__title,
  .project-hero__cover {
    grid-column: 1;
  }

  .photo-gallery {
    grid-template-columns: 1fr;
  }

  .photo-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: var(--space-5) var(--space-2);
  }

  .photo-gallery__item,
  .photo-gallery__item--0,
  .photo-gallery__item--1,
  .photo-gallery__item--2,
  .photo-gallery__item--3,
  .photo-gallery__item--4,
  .photo-gallery__item--5,
  .photo-gallery__item--6,
  .photo-gallery__item--7,
  .photo-gallery__item--8,
  .photo-gallery__item--9,
  .photo-gallery__item--10 {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }

  .photo-gallery__item--10 {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
  }

  .photo-gallery__item--5 {
    width: auto;
    height: auto;
    place-self: stretch;
  }

  .photo-gallery__entry {
    min-height: 0;
    writing-mode: horizontal-tb;
  }

  .photo-album-grid,
  .photo-album-page__gallery {
    grid-template-columns: 1fr;
  }

  .photo-album-card:nth-child(1),
  .photo-album-card:nth-child(2),
  .photo-album-card:nth-child(3),
  .photo-album-card:nth-child(4),
  .photo-album-card:nth-child(5),
  .photo-album-card:nth-child(6),
  .photo-album-card:nth-child(7),
  .photo-album-card:nth-child(8) {
    grid-column: 1;
    margin-top: 0;
  }

  .photo-album-card::after {
    display: none;
  }

  .photography-page__header h1 {
    display: grid;
    gap: var(--space-1);
  }

  .photography-page__header > .work-card__meta,
  .photography-page__header > p:last-child {
    grid-column: 1;
  }

  .photo-album-card h2 {
    display: grid;
  }

  .likes-heart {
    grid-template-rows: repeat(5, clamp(70px, 20vw, 96px));
    gap: 8px 3px;
  }

  .likes-heart__tile {
    width: min(100%, 82px);
  }

  .likes-heart__tile--1,
  .likes-heart__tile--4,
  .likes-heart__tile--7 {
    width: min(100%, 88px);
  }

  .likes-heart__tile--3,
  .likes-heart__tile--6,
  .likes-heart__tile--10 {
    width: min(88%, 76px);
  }

  .likes-heart__tile--3 {
    width: min(52%, 50px);
    margin-top: 22px;
  }

  .likes-heart__tile--12,
  .likes-heart__tile--13 {
    width: min(76%, 66px);
  }

  .likes-heart__tile figcaption strong,
  .likes-heart__tile figcaption em {
    font-size: 0.6rem;
  }

  .likes-heart__center .photo-gallery__entry {
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
  }

  .likes-heart__center .photo-gallery__entry::before,
  .likes-heart__center .photo-gallery__entry::after {
    font-size: 1.7rem;
  }

  .likes-heart__center .photo-gallery__entry span {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }

  .likes-heart__center .photo-gallery__entry strong {
    font-size: 0.84rem;
  }

  .likes-heart__hint {
    gap: 0.18rem;
    width: 116px;
    font-size: 0.56rem;
    line-height: 1.25;
  }

  .travel-timeline__intro {
    display: grid;
    gap: 0.2rem;
    margin-bottom: var(--space-7);
  }

  .travel-timeline__list {
    gap: var(--space-6);
  }

  .travel-timeline__list::before {
    left: 9px;
    transform: none;
  }

  .travel-stop {
    grid-template-columns: 19px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-3) var(--space-3);
    min-height: 0;
  }

  .travel-stop--left .travel-stop__visual,
  .travel-stop--right .travel-stop__visual {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    width: 88%;
  }

  .travel-stop--left .travel-stop__copy,
  .travel-stop--right .travel-stop__copy {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    width: 100%;
    padding: 0;
    text-align: left;
  }

  .travel-stop__marker {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    margin-top: 0.35rem;
  }

  .travel-stop__copy > p {
    margin-bottom: var(--space-2);
  }

  .travel-stop__copy time {
    font-size: clamp(2.6rem, 15vw, 4rem);
  }

  .writing-page__header h1 {
    display: grid;
  }

  .letter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-2);
  }

  .work-list {
    grid-template-columns: 1fr;
  }

  .work-list--other .work-card--compact {
    grid-column: 1;
  }

  .work-card,
  .work-card--wide,
  .work-card--compact,
  .photography-page__header,
  .project-hero {
    grid-template-columns: 1fr;
  }

  .work-card__number,
  .work-card--wide .work-card__number {
    grid-row: auto;
    font-size: 3.4rem;
  }

  .photo-gallery__type {
    min-height: 220px;
  }

  .life-quote__zh {
    white-space: normal;
  }

  .editorial-heading,
  .works__eyebrow {
    white-space: normal;
  }

  .mosaic-track {
    grid-auto-columns: 24vw;
    animation-duration: 56s;
  }

  .footer {
    display: block;
  }
}

/* Dedicated About page */
.about-page {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-6);
  background: var(--color-paper);
  color: var(--ink);
}

.about-page__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.about-page__masthead {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
  margin-bottom: var(--space-6);
}

.about-page__masthead h1 {
  grid-column: 1 / -1;
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--display-sans);
  font-size: var(--type-section);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: 0.02em;
}

.about-page__masthead h1 em {
  font-family: var(--italic-serif);
  font-weight: 300;
  font-style: italic;
  color: var(--color-primary-red);
}

.about-page__masthead > p:last-child {
  grid-column: 2;
  max-width: 34rem;
  font-size: var(--type-body-large);
}

.about-page__masthead > p:first-child,
.about-label,
.story-part__copy > p:first-child,
.about-shortcut span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-label {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-3);
}

.about-story { margin-bottom: var(--space-4); }
.story-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(127, 118, 108, 0.56); background: transparent; color: var(--ink); }
.story-part { display: none; position: relative; height: 100%; min-height: 0; }
.story-part.is-active { display: block; }
.story-part.is-entering,
.story-part.is-leaving {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  will-change: transform, opacity;
}
.story-part.is-leaving { z-index: 1; pointer-events: none; }
.story-part.is-entering { z-index: 2; }
.story-part.is-entering.is-forward { animation: story-page-in-forward 0.62s cubic-bezier(.22, .8, .24, 1) both; }
.story-part.is-leaving.is-forward { animation: story-page-out-forward 0.62s cubic-bezier(.22, .8, .24, 1) both; }
.story-part.is-entering.is-backward { animation: story-page-in-backward 0.62s cubic-bezier(.22, .8, .24, 1) both; }
.story-part.is-leaving.is-backward { animation: story-page-out-backward 0.62s cubic-bezier(.22, .8, .24, 1) both; }

@keyframes story-page-in-forward {
  from { opacity: 0; transform: translate3d(5%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes story-page-out-forward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(-3%, 0, 0); }
}
@keyframes story-page-in-backward {
  from { opacity: 0; transform: translate3d(-5%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes story-page-out-backward {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(3%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .story-part.is-entering,
  .story-part.is-leaving { animation: none; }
  .design-partner.is-revealed { transition: none; }
}

.story-part__visuals {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 42%;
}

.story-part__visuals--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 48%; }
.story-part__visuals figure { min-width: 0; margin: 0; }

.story-part__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(127, 118, 108, 0.56);
  background: #111;
  color: #fff;
  cursor: pointer;
}

.story-part__image img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: var(--story-image-position, center);
  transition: transform 0.35s ease;
}

.story-part__visuals figcaption {
  margin-top: var(--space-1);
  color: var(--soft-ink);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.6;
}

.story-part__image:hover img { transform: scale(1.02); }

.story-part__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 48%;
  height: 100%;
  overflow: hidden;
  padding: var(--space-6) 0 var(--space-7) var(--space-5);
  padding-bottom: var(--space-7);
}

.story-part__copy > div {
  min-height: 0;
  max-height: none;
  overflow: auto;
  padding-right: 1rem;
}

.story-part__copy > div p {
  margin: 0 0 1.1rem;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.82;
}

.story-part__works-link {
  width: fit-content;
  margin-top: var(--space-4);
  color: var(--color-primary-red);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.story-part__works-link:hover { color: var(--color-accent-mint); }

.story-part--closing .story-part__copy {
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-7);
  text-align: center;
}

.story-part--closing .story-part__copy > div { max-width: 38rem; overflow: visible; padding: 0; }
.story-part--closing .story-part__copy > div p { margin: 0; font-size: var(--type-body-large); }

.story-controls {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.story-controls button {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--display-sans);
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}

.story-controls [data-story-prev]:hover { color: var(--color-accent-mint); transform: translateX(-4px); }
.story-controls [data-story-next]:hover { color: var(--color-accent-mint); transform: translateX(4px); }
.story-controls button:focus-visible { outline: 1px solid var(--color-accent-mint); outline-offset: 3px; }

.about-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-4) 0 var(--space-7); }
.about-shortcut { min-height: 200px; padding: var(--space-4); display: flex; flex-direction: column; border: 1px solid var(--color-line); color: var(--ink); text-decoration: none; transition: transform 180ms ease, color 180ms ease; }
.about-shortcut strong { margin: auto 0; font-family: var(--display-sans); font-size: var(--type-subsection); font-weight: 300; line-height: 1; }
.about-shortcut em { font-family: var(--italic-serif); font-weight: 300; }
.about-shortcut--duck { position: relative; isolation: isolate; overflow: hidden; color: var(--color-accent-mint); background-image: linear-gradient(rgba(17,17,17,.25), rgba(17,17,17,.62)), var(--duck-image); background-position: center 42%; background-size: cover; }
.about-shortcut--duck::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(41,255,217,.35); }
.about-shortcut--duck:hover { color: var(--color-accent-mint); }
.about-shortcut--likes {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-paper-light);
  background-image: linear-gradient(rgba(17,17,17,.18), rgba(17,17,17,.58)), var(--likes-image);
  background-position: center 68%;
  background-size: cover;
}
.about-shortcut--likes::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(255,253,247,.35); }
.about-shortcut--likes:hover { color: var(--color-accent-mint); }
.about-shortcut:hover { transform: translateY(-4px); }

.avatar-history, .fun-facts { margin: var(--space-7) 0; }
.about-module-title { margin-top: var(--space-4); }
.avatar-strip { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--color-primary-red); }
.avatar-strip figure { margin: 0; border-right: 1px solid var(--color-primary-red); }
.avatar-strip figure:last-child { border: 0; }
.avatar-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.avatar-strip figcaption { padding: var(--space-1); color: var(--color-primary-red); font-family: var(--mono); font-size: .68rem; }
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #111; border-bottom: 1px solid #111; }
.facts-grid article { min-height: 200px; padding: var(--space-4); border-right: 1px solid var(--color-line); }
.facts-grid article:last-child { border: 0; }
.facts-grid span { color: var(--color-primary-red); font-family: var(--mono); font-size: .68rem; }
.facts-grid h3 { font-family: var(--display-sans); font-size: var(--type-card-title); font-weight: 300; }
.facts-grid p { line-height: 1.7; }
.photo-album { margin: var(--space-7) 0; }
.photo-album__wave { display: flex; align-items: flex-start; min-height: 380px; padding: calc(var(--space-7) + var(--space-3)) var(--space-3) var(--space-7); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.photo-album__wave figure { position: relative; z-index: var(--album-z); flex: 0 0 clamp(92px, 8.6vw, 132px); margin: 0 0 0 -16px; aspect-ratio: 1; transform: translateY(calc(var(--album-y) - var(--album-lift, 0px))) scale(var(--album-scale, 1)); transform-origin: center bottom; transition: transform 160ms cubic-bezier(.2,.8,.2,1), z-index 0s; will-change: transform; }
.photo-album__wave figure:first-child { margin-left: 0; }
.photo-album__wave img { width: 100%; height: 100%; border: var(--album-border, 3px) solid var(--color-paper); object-fit: cover; }
.about-notes { margin: var(--space-7) 0; }
.writing-entry--about { width: min(360px, 100%); margin: var(--space-4) 0 0; }
.partner-easter-egg { margin: var(--space-8) 0 var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.partner-easter-egg__line { margin: 0; text-align: center; font-family: var(--serif); font-size: clamp(1.35rem, 2.25vw, 2.1rem); font-style: italic; line-height: 1.25; }
.partner-easter-egg__line button { padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--ink); font-family: var(--display-sans); font-size: clamp(1.45rem, 2.2vw, 2rem); font-style: normal; font-weight: 300; letter-spacing: -.025em; cursor: default; }
.partner-easter-egg__line > span { color: var(--color-primary-red); }
.partner-easter-egg__line button:hover { border-bottom-color: currentColor; }
.partner-easter-egg__line button:focus-visible { outline: 1px solid var(--color-accent-mint); outline-offset: 5px; }
.design-partner { margin: var(--space-7) 0 0; opacity: 0; transform: translateY(18px); }
.design-partner[hidden] { display: none; }
.design-partner.is-revealed { opacity: 1; transform: translateY(0); transition: opacity .65s ease, transform .65s cubic-bezier(.22,.8,.24,1); }
.design-partner__card { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; width: min(630px, 100%); margin: 0 auto; background: transparent; color: var(--ink); }
.design-partner__card img { width: 250px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.design-partner__copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: var(--space-3) 0 var(--space-3) var(--space-5); border-left: 1px solid var(--color-line); }
.design-partner__copy h3 { margin: 0 0 var(--space-1); font-family: var(--display-sans); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -.025em; line-height: 1; }
.design-partner__copy > h3 + p { max-width: 30rem; margin: 0; color: var(--soft-ink); font-size: .98rem; line-height: 1.82; }
.design-partner__profile { display: grid; gap: var(--space-1); margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; line-height: 1.55; text-transform: uppercase; }
.design-partner__profile span, .design-partner__profile a { display: block; }
.design-partner__profile a { width: fit-content; color: var(--color-primary-red); }

.story-dialog { width: min(840px, 92vw); max-height: 90vh; padding: 0; border: 0; background: var(--color-paper-light); font-family: var(--sans); font-weight: 300; }
.story-dialog::backdrop { background: rgba(0, 0, 0, 0.72); }
.story-dialog > button { position: sticky; z-index: 2; float: right; top: 1rem; width: 3rem; height: 3rem; margin: 1rem; border: 0; border-radius: 50%; background: var(--color-accent-mint); font-family: var(--display-sans); font-size: 1.6rem; cursor: pointer; }
.story-dialog [data-story-dialog-content] { padding: var(--space-6); }
.story-article__header { padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-line); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; }
.story-article__part { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-primary-red); }
.story-article__part > p:first-child { color: var(--color-primary-red); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; }
.story-article__image { margin: var(--space-4) 0; }
.story-article__part img { width: 100%; max-height: 70vh; object-fit: cover; }
.story-article__caption { margin-top: var(--space-1); color: var(--soft-ink); font-family: var(--sans); font-size: .82rem; font-weight: 300; letter-spacing: 0; line-height: 1.6; }
.story-article__part > p:not(:first-child):not(.story-article__caption) { max-width: 46rem; font-family: var(--sans); font-size: 1.05rem; font-weight: 300; line-height: 1.9; }
.story-article__part .story-part__works-link { display: inline-block; }

@media (max-width: 720px) {
  .contact-footer__header { align-items: flex-start; flex-direction: column; }
  .contact-footer__header h2 { flex-wrap: wrap; font-size: clamp(2.7rem, 15vw, 4.8rem); }
  .contact-footer__details { grid-template-columns: 1fr; gap: var(--space-4); }
  .contact-footer__details .contact-footer__xiaohongshu { align-items: flex-start; justify-self: stretch; }
  .contact-footer__qrs { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .about-page__masthead { grid-template-columns: 1fr; }
  .about-page__masthead > p:last-child { grid-column: 1; }
  .story-stage { aspect-ratio: auto; }
  .story-part, .design-partner__card { height: auto; }
  .design-partner__card { grid-template-columns: 1fr; width: min(360px, 100%); }
  .design-partner__card img { width: 100%; }
  .design-partner__copy { border-top: 1px solid var(--color-line); border-left: 0; }
  .story-part.is-active { display: flex; flex-direction: column; }
  .story-part.is-entering, .story-part.is-leaving { display: flex; }
  .story-part__visuals, .story-part__visuals--3 { position: relative; right: auto; bottom: auto; order: 2; width: 100%; padding: var(--space-4); grid-template-columns: 1fr; }
  .story-part__image { width: 100%; }
  .story-part__image img { min-height: 320px; max-height: 55vh; }
  .story-part__copy { order: 1; width: 100%; height: auto; overflow: visible; justify-content: flex-start; padding: var(--space-4); padding-bottom: var(--space-7); }
  .story-part__copy > div { max-height: none; overflow: visible; }
  .story-controls { left: var(--space-4); }
  .about-shortcuts { grid-template-columns: 1fr; }
  .avatar-strip { grid-template-columns: repeat(3, 1fr); }
  .facts-grid { grid-template-columns: 1fr; }
  .facts-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid #111; }
  .photo-album__wave { min-height: 42vw; padding: var(--space-5) var(--space-3) var(--space-7); }
  .photo-album__wave figure { flex-basis: 24vw; }
}

/* Duck archive */
.duck-page {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: var(--space-7) 0 var(--space-8);
}

.duck-page__back {
  display: inline-block;
  margin-bottom: var(--space-6);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.duck-page__header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3);
  padding-top: var(--space-3);
  margin-bottom: var(--space-7);
  border-top: 1px solid var(--color-line);
}

.duck-page__header > p:first-child {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
}

.duck-page__header h1 {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
  font-family: var(--display-sans);
  font-size: var(--type-section);
  font-weight: 300;
  line-height: .88;
}

.duck-page__header h1 em {
  color: var(--color-primary-red);
  font-family: var(--italic-serif);
  font-size: .56em;
  font-weight: 300;
}

.duck-page__intro {
  max-width: 34rem;
  margin: 0 auto var(--space-7);
  color: var(--soft-ink);
  text-align: center;
}

.duck-page__intro p { margin: 0; }
.duck-page__intro-ending { margin-top: 3.64em !important; }

.duck-page figure { margin: 0; }
.duck-page figcaption { margin-top: var(--space-1); color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; }
.duck-page__hero { width: min(78%, 860px); margin: 0 auto var(--space-5) !important; }
.duck-page__hero img { width: 100%; max-height: 78vh; object-fit: cover; object-position: center; }
.duck-page__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); }
.duck-page__gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

@media (max-width: 720px) {
  .duck-page__header { grid-template-columns: 1fr; }
  .duck-page__header h1 { display: grid; gap: var(--space-2); }
  .duck-page__hero { width: 100%; }
  .duck-page__gallery { grid-template-columns: 1fr; gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}