/* ============================================================
   joan-lee.com — main stylesheet
   Palette T4: RAL 5021 base + white/cream text + brass gold
   ============================================================ */

:root {
  /* Brand palette · "Reed + olive ground — teal spark"
     Earth tones carry the body; teal is reserved for spark
     accents (status chips, links, cursor, accent letters). */
  --reed-deep: #3E3F27;
  --reed-deepest: #2C2D1B;
  --reed-green: #7C7E4E;
  --olive-grey: #7A7461;
  --olive-grey-soft: #8E8975;
  --teal-spark: #0E7E6B;
  --cream-warm: #F0EEE6;
  --cream-bright: #FAF9F5;

  /* Site-wide tokens — promoted from page-scoped to global. */
  --bg-dark: var(--reed-deep);
  --bg-deepest: var(--reed-deepest);
  --bg-cream: var(--cream-warm);
  --bg-cream-warm: var(--cream-bright);
  --text-cream: var(--cream-warm);
  --text-dark: var(--reed-deep);
  --text-muted-dark: rgba(240, 238, 230, 0.62);
  --text-muted-cream: var(--olive-grey);
  --text-cream-muted: rgba(240, 238, 230, 0.55);
  --accent-red: var(--teal-spark);
  --accent-yellow: var(--teal-spark);
  --hairline-cream: rgba(62, 63, 39, 0.13);
  --hairline-dark: rgba(240, 238, 230, 0.13);
  --hairline: rgba(62, 63, 39, 0.18);
  --hairline-soft: rgba(62, 63, 39, 0.10);
  --media-bezel: rgba(240, 238, 230, 0.14);
  --tone-cream: brightness(0.96) contrast(1.04) saturate(0.86);
  --tone-dark: brightness(0.94) contrast(1.04) saturate(0.84) sepia(0.06) hue-rotate(-3deg);
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --zh-serif: 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', STSong, SimSun, serif;
  --zh-sans: 'PingFang SC', 'Noto Sans CJK SC', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
em { font-style: italic; }

/* ----- custom cursor ----- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 22px; height: 22px;
  pointer-events: none;
  z-index: 9999;
  color: var(--accent-red);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, opacity 0.2s ease;
  opacity: 0;
  mix-blend-mode: normal;
}
.cursor.visible { opacity: 1; }
.cursor.hover { transform: translate(-50%, -50%) scale(1.4); }
@media (hover: none), (max-width: 768px) { .cursor { display: none; } }

/* ----- nav ----- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  background: rgba(14, 126, 107, 0.0);
  backdrop-filter: blur(0);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease;
}
.nav.scrolled {
  background: rgba(14, 126, 107, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  padding: 12px var(--gutter);
}
.nav-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text-cream);
  letter-spacing: 0.01em;
}
.nav-legal {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-muted-dark);
  text-transform: uppercase;
  margin-left: 2px;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.nav-links a {
  color: var(--text-cream-muted);
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.nav-links a:hover { color: var(--accent-red); opacity: 1; }
.language-link {
  color: var(--text-cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  padding-bottom: 2px;
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav { padding: 14px var(--gutter); }
}

.zh-page {
  font-family: var(--zh-sans);
  letter-spacing: 0;
}
.zh-page .nav-name,
.zh-page .hero h1,
.zh-page .section-h,
.zh-page .proj-title,
.zh-page .complex-name,
.zh-page .contact-h,
.zh-page .miro-copy h2,
.zh-page .miro-exhibition-row h3 {
  font-family: var(--zh-serif);
  letter-spacing: 0;
}
.zh-page .hero-tag,
.zh-page .proj-deck {
  font-family: var(--zh-serif);
  font-style: normal;
  letter-spacing: 0.02em;
}
.zh-page .hero-legal,
.zh-page .nav-legal,
.zh-page .eyebrow,
.zh-page .num,
.zh-page .fact-key,
.zh-page .complex-num,
.zh-page .complex-status,
.zh-page .img-cap,
.zh-page .proj-back,
.zh-page .miro-label {
  font-family: var(--zh-sans);
}
.zh-page .fact-key,
.zh-page .num,
.zh-page .complex-num {
  letter-spacing: 0.14em;
}
.zh-page .fact-val,
.zh-page .complex-desc,
.zh-page .complex-meta,
.zh-page .body,
.zh-page .miro-intro,
.zh-page .miro-ledger dd,
.zh-page .proj-video-caption,
.zh-page .press-list,
.zh-page .src-meta {
  font-family: var(--zh-sans);
  letter-spacing: 0;
}
.zh-page .complex-status {
  letter-spacing: 0.06em;
  text-transform: none;
}
.zh-page .proj-deck,
.zh-page .proj-narrative h2,
.zh-page .proj-narrative p {
  word-break: break-all;
  overflow-wrap: anywhere;
}
.zh-page .proj-narrative p {
  word-break: normal;
  overflow-wrap: break-word;
}
.zh-page .miro-photo figcaption,
.zh-page .miro-gallery-index,
.zh-page .proj-gallery .img-cap,
.zh-page .ou-photo-grid figcaption {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* ----- hero ----- */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--bg-dark);
  color: var(--text-cream);
  padding: 28vh var(--gutter) 12vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-watermark {
  position: absolute;
  top: -40px;
  right: -40px;
  font-family: var(--serif);
  font-size: clamp(220px, 28vw, 460px);
  line-height: 0.85;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: rgba(14, 126, 107, 0.12);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  width: min(100%, calc(100vw - (var(--gutter) * 2)));
  min-width: 0;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--text-muted-dark);
  margin-bottom: 36px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  max-width: 100%;
  overflow-wrap: break-word;
}
.break { display: block; }
.hero-legal {
  display: block;
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.32em;
  color: var(--text-muted-dark);
  margin-top: 18px;
}
.hero-tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--text-cream);
  opacity: 0.9;
  max-width: 720px;
  width: min(720px, 100%);
  margin-top: 32px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ast {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: var(--accent-red);
  vertical-align: -2px;
  margin: 0 6px;
}
.ast svg { width: 100%; height: 100%; }
.hero-divider {
  width: 80px;
  height: 1px;
  background: var(--text-muted-dark);
  margin: 36px 0 28px;
}
.hero-body {
  font-family: var(--sans);
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--text-cream-muted);
  max-width: 540px;
  width: min(540px, 100%);
  line-height: 1.75;
  font-weight: 300;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 520px) {
  .eyebrow {
    letter-spacing: 0.2em;
    line-height: 1.9;
    max-width: min(340px, calc(100vw - 40px));
    width: min(340px, calc(100vw - 40px));
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hero h1 {
    font-size: clamp(56px, 17vw, 68px);
  }
  .hero-tag,
  .hero-body {
    max-width: min(340px, calc(100vw - 40px));
    width: min(340px, calc(100vw - 40px));
  }
}
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: var(--gutter);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-muted-dark);
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.hero-scroll:hover { color: var(--accent-red); opacity: 1; }

/* ----- section base ----- */
.section {
  padding: clamp(80px, 12vh, 160px) var(--gutter);
  position: relative;
}
.section-dark { background: var(--bg-dark); color: var(--text-cream); }
.section-cream { background: var(--bg-cream); color: var(--text-dark); }
.section-deepest { background: var(--bg-deepest); color: var(--text-cream); padding-bottom: 120px; }

.num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  margin-bottom: 24px;
}
.section-dark .num { color: var(--text-muted-dark); }
.section-cream .num { color: var(--text-dark); opacity: 0.6; }

.section h2, .section-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  max-width: 880px;
}
.muted { color: var(--text-muted-dark); }

.body {
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.75;
  max-width: 580px;
  margin-bottom: 16px;
}
.section-dark .body { color: var(--text-cream-muted); }

.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  max-width: 640px;
  margin: 0 0 32px;
  font-weight: 400;
}
.section-dark .pullquote { color: var(--text-cream); opacity: 0.92; }

/* ----- asymmetric grid layout ----- */
.grid-asym {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}
.col-side { padding-top: 8px; }
.col-main { max-width: 760px; }
@media (max-width: 800px) {
  .grid-asym { grid-template-columns: 1fr; gap: 28px; }
}

/* ----- practice section with portrait photo ----- */
.practice-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}
.practice-portrait {
  position: sticky;
  top: 96px;
}
.portrait-photo {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 18%;
  filter: contrast(1.02) saturate(0.98);
}
.portrait-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-muted-cream);
  margin-top: 10px;
  text-transform: uppercase;
}
@media (max-width: 920px) {
  .practice-layout { grid-template-columns: 1fr; }
  .practice-portrait { position: static; max-width: 380px; }
}

.dot-mark {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--accent-red);
  border-radius: 50%;
  margin-top: 12px;
}
.ast-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  color: var(--accent-red);
  margin-top: 12px;
}
.ast-mark svg { width: 100%; height: 100%; }
.ast-inline {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  vertical-align: 0.05em;
  margin: 0 0.15em;
  color: var(--accent-red);
}

/* ----- works section (videos — portrait drone footage) ----- */
.works-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
  margin-top: 48px;
  max-width: var(--max);
}
.work {
  display: block;
}
.work-link {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  color: inherit;
}
.work-media {
  position: relative;
  background: #1A3329;
  width: 300px;
  aspect-ratio: 720 / 1564;  /* actual drone video ratio */
  overflow: hidden;
}
.work-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) saturate(0.96);
  transition: filter 0.6s ease, transform 6s ease;
}
.work:hover .work-video { transform: scale(1.025); }
.work-sound {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(14, 126, 107, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-cream);
  font-family: var(--mono);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.work-sound:hover { background: var(--accent-red); border-color: var(--accent-red); }
.work-info {
  padding: 12px 0;
}
.work-name {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.work-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted-dark);
  margin-bottom: 0;
  text-transform: uppercase;
}
.work-desc {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-cream-muted);
  margin-bottom: 20px;
  max-width: 520px;
}
.work-stat {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-cream-muted);
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-dark);
}
.work-stat span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent-red);
  min-width: 70px;
}
.work-arrow {
  display: inline-block;
  margin-left: 8px;
  color: var(--accent-red);
  transition: transform 0.4s cubic-bezier(.2,.6,.2,1);
}
.work:hover .work-arrow {
  transform: translateX(8px);
}
@media (max-width: 760px) {
  .work-link { grid-template-columns: 1fr; }
  .work-media { width: 100%; max-width: 260px; margin: 0 auto; }
}
.studio-card-link {
  display: block;
  color: inherit;
}
.studio-arrow {
  color: var(--accent-red);
  margin-left: 6px;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.2,.6,.2,1);
  opacity: 0;
}
.studio-card:hover .studio-arrow {
  opacity: 1;
  transform: translateX(4px);
}
.heritage-link {
  display: block;
  color: inherit;
}

/* ----- complex / park grids (10 official projects) ----- */
.complexes-section {
  background:
    radial-gradient(circle at 82% 12%, rgba(99, 125, 119, 0.13), transparent 34%),
    linear-gradient(180deg, #071D19 0%, var(--bg-dark) 48%, #071914 100%);
}
.complexes-intro {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(300px, 1fr);
  gap: clamp(42px, 8vw, 130px);
  align-items: end;
  max-width: var(--max);
}
.complexes-copy {
  max-width: 640px;
}
.complexes-copy p {
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.75;
  font-weight: 300;
  color: rgba(181, 194, 187, 0.86);
  margin: 0;
}
.zh-page .complexes-copy p {
  font-family: var(--zh-sans);
}
.complexes-copy p + p {
  margin-top: 16px;
}
.complex-lens-row {
  max-width: var(--max);
  margin-top: clamp(42px, 6vw, 78px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 70px);
}
.complex-lens-row p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(181, 194, 187, 0.74);
}
.zh-page .complex-lens-row p {
  font-family: var(--zh-sans);
}
.complex-lens-row span {
  display: block;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.08;
  color: var(--text-cream);
  margin-bottom: 10px;
}
.complex-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(22px, 3vw, 44px);
  row-gap: clamp(46px, 6vw, 82px);
  margin-top: clamp(52px, 7vw, 92px);
  max-width: var(--max);
}
.complex-card { grid-column: span 4; }
#complexes .complex-card:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(280px, 0.78fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: end;
  padding: 26px 0 34px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
#complexes .complex-card:first-child .complex-img {
  grid-column: 1;
  grid-row: 1 / span 4;
  margin-bottom: 0;
}
#complexes .complex-card:first-child .complex-kicker,
#complexes .complex-card:first-child .complex-name,
#complexes .complex-card:first-child .complex-meta,
#complexes .complex-card:first-child .complex-desc {
  grid-column: 2;
}
#complexes .complex-card:nth-child(2) { grid-column: span 7; }
#complexes .complex-card:nth-child(3) { grid-column: span 5; }
#complexes .complex-card:nth-child(n+4) { grid-column: span 6; }

.parks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 46px);
  margin-top: 56px;
  max-width: 1120px;
}
@media (max-width: 980px) {
  .complexes-intro,
  .complex-lens-row { grid-template-columns: 1fr; }
  .complex-grid, .parks-grid { grid-template-columns: repeat(2, 1fr); }
  .complex-card,
  #complexes .complex-card:first-child,
  #complexes .complex-card:nth-child(2),
  #complexes .complex-card:nth-child(3),
  #complexes .complex-card:nth-child(n+4) { grid-column: auto; }
  #complexes .complex-card:first-child {
    display: block;
    padding: 0;
    border: 0;
  }
  #complexes .complex-card:first-child .complex-img {
    margin-bottom: 18px;
  }
}
@media (max-width: 600px) { .complex-grid, .parks-grid { grid-template-columns: 1fr; } }

.complex-card, .park-card {
  display: block;
  color: inherit;
  cursor: pointer;
  min-width: 0;
  transition: transform 0.4s ease;
}
.complex-card:hover, .park-card:hover { transform: translateY(-4px); }

.complex-img, .park-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--bg-deepest);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}
.complex-card:nth-child(-n+2) .complex-img { aspect-ratio: 16/9; }
.section-cream .park-img { background: var(--bg-cream-warm); border: 1px solid var(--hairline-cream); }
.complex-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 10, 9, 0) 48%, rgba(6, 10, 9, 0.28) 100%);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.complex-img img, .park-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.6,.2,1), filter 0.5s ease;
  filter: grayscale(0.08) saturate(0.72) contrast(1.04) brightness(0.92);
}
.complex-card:hover .complex-img img,
.park-card:hover .park-img img {
  transform: scale(1.04);
  filter: grayscale(0) saturate(0.9) contrast(1.03) brightness(0.98);
}
.complex-card:hover .complex-img::after { opacity: 0.35; }

#parks .park-img {
  aspect-ratio: 16/9;
  border-color: rgba(30, 47, 40, 0.16);
  background: var(--bg-cream-warm);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 18px 48px rgba(55, 43, 25, 0.12);
}
#parks .park-img::before,
#parks .park-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#parks .park-img::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(242, 233, 217, 0.12), rgba(27, 43, 36, 0.12)),
    linear-gradient(90deg, rgba(27, 43, 36, 0.10), rgba(184, 155, 64, 0.045));
  mix-blend-mode: multiply;
  opacity: 0.42;
  transition: opacity 0.4s ease;
}
#parks .park-img::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(242, 233, 217, 0.03) 0%, rgba(27, 43, 36, 0.22) 100%),
    radial-gradient(circle at 50% 20%, rgba(255, 250, 239, 0.14), transparent 46%);
  opacity: 0.64;
  transition: opacity 0.4s ease;
}
#parks .park-img img {
  filter: grayscale(0.16) saturate(0.58) contrast(0.96) brightness(0.90) sepia(0.08) hue-rotate(-5deg);
}
#parks .park-card:hover .park-img img {
  filter: grayscale(0.07) saturate(0.74) contrast(0.99) brightness(0.96) sepia(0.04) hue-rotate(-3deg);
}
#parks .park-card:hover .park-img::before { opacity: 0.28; }
#parks .park-card:hover .park-img::after { opacity: 0.42; }

#complexes .complex-img {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 22px 62px rgba(0, 0, 0, 0.24);
}
#complexes .complex-img::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.18)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.18), rgba(255, 255, 255, 0.035) 48%, rgba(184, 155, 64, 0.035));
  mix-blend-mode: soft-light;
  opacity: 0.72;
}
#complexes .complex-img::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6, 10, 9, 0) 36%, rgba(6, 10, 9, 0.42) 100%),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.10), transparent 44%);
  opacity: 0.82;
}
#complexes .complex-img img {
  filter: grayscale(0.10) saturate(0.62) contrast(0.97) brightness(0.88) sepia(0.08) hue-rotate(-5deg);
}
#complexes .complex-card:hover .complex-img img {
  filter: grayscale(0.03) saturate(0.78) contrast(1.0) brightness(0.94) sepia(0.04) hue-rotate(-3deg);
}
#complexes .complex-card:hover .complex-img::before { opacity: 0.56; }
#complexes .complex-card:hover .complex-img::after { opacity: 0.54; }
.complex-cover-yongkang img { object-position: center 54%; }
.complex-cover-yongjia img { object-position: center 48%; }
.complex-cover-sanjiang img { object-position: center 50%; }
.complex-cover-minhang img { object-position: center 48%; }
.complex-cover-lanzhou img { object-position: center 50%; }

.complex-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.complex-status {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 400;
}
.status-built {
  background: rgba(184, 155, 64, 0.0);
  border: 1px solid rgba(184, 155, 64, 0.6);
  color: var(--accent-red);
}
.status-plan {
  background: transparent;
  border: 1px solid rgba(14, 126, 107, 0.5);
  color: var(--text-muted-dark);
}
.section-cream .status-plan { border-color: rgba(14, 126, 107, 0.3); color: rgba(14, 126, 107, 0.65); }

/* ----- bare fact lists (replaces aphorism prose) ----- */
.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline-dark);
}
.section-cream .fact-list { border-top-color: var(--hairline-cream); }
.fact-list li {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-dark);
  font-size: 14px;
  line-height: 1.6;
  align-items: baseline;
}
.section-cream .fact-list li { border-bottom-color: var(--hairline-cream); }
.fact-key {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.section-dark .fact-key { color: var(--accent-red); }
.section-cream .fact-key { color: var(--text-muted-cream); opacity: 0.7; }
.fact-val {
  font-family: var(--sans);
  font-weight: 300;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.section-dark .fact-val { color: var(--text-cream-muted); }
.section-cream .fact-val { color: var(--text-dark); }
.fact-val a { border-bottom: 1px solid currentColor; }
@media (max-width: 600px) {
  .fact-list li { grid-template-columns: 1fr; gap: 4px; }
  .fact-val,
  .fact-val a {
    max-width: min(100%, calc(100vw - 40px));
    overflow-wrap: anywhere;
  }
}
.complex-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.55;
  color: rgba(184, 155, 64, 0.92);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.complex-kicker span {
  color: var(--accent-red);
  margin-right: 10px;
}
.zh-page .complex-kicker {
  font-family: var(--zh-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
}
.complex-name {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}
#complexes .complex-card:first-child .complex-name {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  font-weight: 400;
  max-width: 520px;
  margin-bottom: 14px;
}
#complexes .complex-card:first-child .complex-meta {
  font-size: 13px;
}
#complexes .complex-card:first-child .complex-desc {
  font-size: 14px;
  line-height: 1.72;
  max-width: 560px;
}
.complex-cn {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 8px;
}
.section-dark .complex-cn { color: var(--text-cream-muted); }
.section-cream .complex-cn { color: var(--text-muted-cream); }
.complex-meta {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: break-word;
}
.section-dark .complex-meta { color: var(--text-muted-dark); }
.section-cream .complex-meta { color: rgba(14, 126, 107, 0.55); }

.complex-desc {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.65;
  margin-top: 10px;
  font-weight: 300;
  overflow-wrap: break-word;
}
.section-dark .complex-desc { color: var(--text-cream-muted); }
.section-cream .complex-desc { color: rgba(14, 126, 107, 0.58); }

/* ----- studios grid ----- */
.studios-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: 56px;
  max-width: var(--max);
}
@media (max-width: 1080px) {
  .studios-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .studios-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .studios-grid { grid-template-columns: 1fr; }
}
.studio-card {
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.studio-card:hover { transform: translateY(-4px); }
.studio-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-cream-warm);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--hairline-cream);
}
.studio-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.6,.2,1), filter 0.5s ease;
  filter: saturate(0.85);
}
.studio-card:hover .studio-img img {
  transform: scale(1.06);
  filter: saturate(1);
}
.studio-firm {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 2px;
}
.studio-loc {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-dark);
  opacity: 0.5;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.studio-project {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted-cream);
  margin-bottom: 6px;
}
.studio-year {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-red);
  letter-spacing: 0.12em;
}

/* ----- heritage section ----- */
.heritage-img {
  margin-top: 64px;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.heritage-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
  margin-top: 12px;
}

.stat-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline-dark);
}
.section-cream .stat-list { border-top-color: var(--hairline-cream); }
.stat-list li {
  font-family: var(--sans);
  font-size: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-dark);
  display: flex;
  gap: 18px;
  line-height: 1.5;
}
.section-cream .stat-list li { border-bottom-color: var(--hairline-cream); }
.stat-list span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent-red);
  min-width: 130px;
}
.section-dark .stat-list li { color: var(--text-cream-muted); }

/* ----- miro collection ----- */
.miro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: stretch;
  max-width: var(--max);
  margin: 0 auto;
}
.miro-copy h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 760px;
  margin-bottom: 28px;
}
.miro-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.45;
  color: rgba(14, 126, 107, 0.74);
  max-width: 700px;
  margin-bottom: 48px;
}
.miro-ledger {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--hairline-cream);
  max-width: 760px;
}
.miro-ledger div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline-cream);
}
.miro-ledger dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--accent-red);
  text-transform: uppercase;
}
.miro-ledger dd {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted-cream);
}
.miro-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(190px, 0.74fr);
  gap: 18px;
  align-self: start;
  padding: 18px;
  background: var(--bg-dark);
  color: var(--text-cream);
  border: 1px solid rgba(14, 126, 107, 0.18);
}
.miro-photo {
  margin: 0;
  min-width: 0;
}
.miro-photo img {
  width: 100%;
  object-fit: cover;
  background: var(--bg-deepest);
  border: 1px solid rgba(255, 255, 255, 0.14);
  filter: saturate(0.9) contrast(1.03);
}
.miro-photo-main img {
  aspect-ratio: 4 / 5;
  object-position: center top;
}
.miro-photo-stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
}
.miro-photo-stack .miro-photo img {
  aspect-ratio: 4 / 3;
}
.miro-photo-stack .miro-photo:nth-child(2) img {
  aspect-ratio: 16 / 9;
  object-position: center center;
}
.miro-photo figcaption {
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.55;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  margin-top: 9px;
}
.miro-gallery-index {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 15px;
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.miro-exhibitions {
  max-width: var(--max);
  margin: clamp(54px, 7vw, 92px) auto 0;
  border-top: 1px solid var(--hairline-cream);
}
.miro-exhibition-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline-cream);
}
.miro-year {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  color: var(--accent-red);
}
.miro-exhibition-row h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  margin-bottom: 8px;
}
.miro-exhibition-row p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted-cream);
  max-width: 620px;
}
.miro-exhibition-row a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-red);
  border-bottom: 1px solid rgba(184, 155, 64, 0.38);
  padding-bottom: 4px;
}
@media (max-width: 920px) {
  .miro-layout {
    grid-template-columns: 1fr;
  }
  .miro-gallery {
    max-width: 760px;
  }
}
@media (max-width: 680px) {
  .miro-ledger div,
  .miro-exhibition-row {
    grid-template-columns: 1fr;
  }
  .miro-gallery,
  .miro-photo-stack {
    grid-template-columns: 1fr;
  }
  .miro-gallery {
    padding: 12px;
  }
  .miro-photo-main img,
  .miro-photo-stack .miro-photo img,
  .miro-photo-stack .miro-photo:nth-child(2) img {
    aspect-ratio: 4 / 3;
  }
  .miro-exhibition-row {
    gap: 12px;
  }
  .miro-gallery-index {
    display: grid;
    gap: 8px;
  }
}

/* legacy support for project pages that still use the old Miró classes */
.miro-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  margin-top: 80px;
  max-width: var(--max);
  align-items: center;
}
@media (max-width: 880px) {
  .miro-feature { grid-template-columns: 1fr; gap: 48px; }
}
.miro-canvas {
  background: var(--bg-cream-warm);
  border: 1px solid var(--hairline-cream);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.miro-canvas svg { width: 100%; height: 100%; display: block; }
.miro-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent-red);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.miro-meta h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 16px;
}

/* ----- press list ----- */
.press-list {
  list-style: none;
  padding: 0;
  margin-top: 32px;
  border-top: 1px solid var(--hairline-dark);
  max-width: var(--max);
}
.press-list li {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline-dark);
  align-items: baseline;
  transition: padding 0.3s ease;
}
.press-list li:hover { padding-left: 14px; }
.press-list .src {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.press-list a.src:hover {
  color: var(--accent-red);
}
.press-list .src-meta {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-cream-muted);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .press-list li { grid-template-columns: 1fr; gap: 6px; }
}

/* ----- contact ----- */
.ast-large {
  display: inline-block;
  width: 36px;
  height: 36px;
  color: var(--accent-red);
  margin-bottom: 28px;
}
.ast-large svg { width: 100%; height: 100%; }
.contact-h {
  font-size: clamp(48px, 7vw, 88px);
  margin-bottom: 36px;
  max-width: 880px;
}
.contact-line {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  margin-bottom: 6px;
  color: var(--text-cream);
}
.contact-line a {
  color: var(--text-cream);
  border-bottom: 1px solid var(--text-muted-dark);
  transition: color 0.2s, border-color 0.2s;
}
.contact-line a:hover { color: var(--accent-red); border-bottom-color: var(--accent-red); }

.footer {
  margin-top: 120px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer .practising {
  font-size: 10px;
  opacity: 0.7;
  text-align: right;
  max-width: 420px;
}
@media (max-width: 720px) {
  .footer { flex-direction: column; }
  .footer .practising { text-align: left; }
}

/* ----- scroll-triggered reveal ----- */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }

.hero .reveal,
.proj-hero .reveal {
  opacity: 1;
  transform: none;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
  .cursor { display: none; }
  html { scroll-behavior: auto; }
  .work-video { transition: none; }
}

/* ============================================================
   project detail pages
   ============================================================ */
.proj-back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-muted-dark);
  display: inline-block;
  margin-bottom: 36px;
  transition: color 0.2s;
}
.proj-back:hover { color: var(--accent-red); }

.proj-hero {
  background: var(--bg-dark);
  color: var(--text-cream);
  padding: 18vh var(--gutter) clamp(60px, 10vh, 120px);
  border-bottom: 1px solid var(--hairline-dark);
}
.proj-hero-inner { max-width: var(--max); margin: 0 auto; }
.proj-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--accent-red);
  margin-bottom: 18px;
}
.proj-eyebrow-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}
.proj-eyebrow-status .complex-status {
  letter-spacing: 0;
}
@media (max-width: 600px) {
  .proj-eyebrow-status {
    display: block;
  }
  .proj-eyebrow-status .complex-status {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 10px;
  }
  .proj-title {
    width: min(100%, calc(100vw - 40px));
    max-width: min(100%, calc(100vw - 40px));
    font-size: clamp(40px, 13vw, 58px);
    line-height: 1.08;
    letter-spacing: 0;
  }
  .zh-page .proj-title .mobile-title-line {
    display: block;
  }
  .zh-page .proj-title {
    word-break: break-all;
    overflow-wrap: anywhere;
  }
  .zh-page .proj-narrative h2 {
    max-width: min(330px, calc(100vw - 40px));
    width: min(330px, calc(100vw - 40px));
    font-size: 34px;
    line-height: 1.14;
  }
  .zh-page .proj-narrative p {
    max-width: min(330px, calc(100vw - 40px));
    width: min(330px, calc(100vw - 40px));
  }
}
.proj-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
  max-width: 1080px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.proj-deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
  color: var(--text-cream);
  opacity: 0.9;
  max-width: 720px;
  margin-bottom: 36px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 600px) {
  .proj-deck {
    max-width: min(320px, calc(100vw - 40px));
    width: min(320px, calc(100vw - 40px));
    font-size: 18px;
    line-height: 1.55;
  }
}
.proj-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px 32px;
  border-top: 1px solid var(--hairline-dark);
  padding-top: 28px;
  max-width: 960px;
}
.proj-meta-item {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-cream-muted);
}
.proj-meta-item .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-muted-dark);
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.proj-hero .fact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
  width: 100%;
  box-sizing: border-box;
}
.proj-hero .fact-list li {
  display: block;
  min-width: 0;
  min-height: 78px;
  padding: 16px 18px;
  border: 0;
  background: rgba(7, 24, 20, 0.72);
}
.proj-hero .fact-key {
  display: block;
  margin-bottom: 7px;
  color: var(--accent-red);
  font-size: 10px;
  line-height: 1.35;
}
.proj-hero .fact-val {
  display: block;
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: normal;
}
.zh-page .proj-hero .fact-key {
  font-family: var(--zh-sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: none;
}
.zh-page .proj-hero .fact-val {
  font-family: var(--zh-sans);
}
@media (max-width: 720px) {
  .proj-hero .fact-list {
    grid-template-columns: 1fr;
    max-width: calc(100vw - 40px);
  }
}

.proj-section {
  padding: clamp(60px, 10vh, 120px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.proj-narrative {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
  max-width: var(--max);
}
@media (max-width: 800px) { .proj-narrative { grid-template-columns: 1fr; gap: 24px; } }
.proj-narrative .num { color: var(--text-muted-dark); }
.proj-narrative h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
  max-width: 720px;
}
.proj-narrative p {
  font-family: var(--sans);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 16px;
  max-width: 640px;
  color: var(--text-cream-muted);
}
.section-cream .proj-narrative p { color: var(--text-muted-cream); }

/* gallery */
.proj-gallery {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 48px;
}
.proj-gallery figure {
  margin: 0;
  min-width: 0;
}
.proj-gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border: 1px solid var(--hairline-dark);
}
.section-cream .proj-gallery img { border-color: var(--hairline-cream); }
.proj-gallery-2 { grid-template-columns: 1fr 1fr; }
.proj-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.proj-gallery-1 { grid-template-columns: 1fr; }
.proj-gallery .full { grid-column: 1 / -1; }
.proj-gallery .img-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--text-muted-dark);
  margin-top: 8px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.section-cream .proj-gallery .img-cap { color: rgba(14, 126, 107, 0.55); }

/* BIG-inspired project rail, translated into Joan Lee's palette. */
.project-flow-section {
  max-width: none;
  margin: 0;
  padding: clamp(46px, 7vh, 84px) 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(14, 126, 107, 0.12), transparent 34%),
    linear-gradient(180deg, #071D19 0%, var(--bg-dark) 62%, #081A16 100%);
  color: var(--text-cream);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.project-flow-head,
.project-flow-progress {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.project-flow-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding: 0 var(--gutter);
  margin-bottom: 26px;
}
.project-flow-head .num {
  color: var(--accent-red);
  margin: 0 0 8px;
}
.project-flow-head h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.3vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  max-width: 720px;
  overflow-wrap: anywhere;
}
.project-flow-controls {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.project-flow-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-cream);
  font-family: var(--mono);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.project-flow-button:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background: rgba(184, 155, 64, 0.08);
}
.project-flow {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))) 12px;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.project-flow::-webkit-scrollbar {
  display: none;
}
.project-flow.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.project-flow-card {
  flex: 0 0 min(74vw, 980px);
  scroll-snap-align: center;
  margin: 0;
  min-width: 0;
}
.project-flow-card img,
.project-flow-card video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border: 1px solid rgba(255, 255, 255, 0.13);
  filter: saturate(0.66) contrast(0.98) brightness(0.86) sepia(0.08) hue-rotate(-5deg);
  background: #081A16;
}
.project-flow-card figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: rgba(181, 194, 187, 0.72);
  margin-top: 10px;
  text-transform: uppercase;
}
.zh-page .project-flow-card figcaption {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.project-flow-info {
  flex-basis: min(380px, 82vw);
  align-self: stretch;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(7, 24, 20, 0.78);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 34px;
}
.project-flow-info .project-flow-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-red);
}
.project-flow-info p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.76);
  margin-top: 16px;
  max-width: 330px;
}
.zh-page .project-flow-info p,
.zh-page .project-flow-info .project-flow-kicker {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.project-flow-info dl {
  display: grid;
  gap: 14px;
  margin: 0;
}
.project-flow-info dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(181, 194, 187, 0.70);
}
.project-flow-info dd {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-cream);
}
.zh-page .project-flow-info dt,
.zh-page .project-flow-info dd {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.project-flow-progress {
  height: 1px;
  background: rgba(255, 255, 255, 0.13);
  margin-top: 16px;
}
.project-flow-progress span {
  display: block;
  width: 0%;
  height: 1px;
  background: var(--accent-red);
  transition: width 0.08s linear;
}
.project-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(28px, 4vw, 48px);
  padding: 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}
.project-note-grid.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project-note-grid li {
  min-width: 0;
  min-height: 174px;
  padding: clamp(24px, 3vw, 34px);
  background: rgba(7, 24, 20, 0.74);
}
.section-cream .project-note-grid {
  border-color: rgba(14, 126, 107, 0.13);
  background: rgba(14, 126, 107, 0.13);
}
.section-cream .project-note-grid li {
  background: rgba(255, 255, 255, 0.76);
}
.project-note-grid span {
  display: block;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-red);
}
.project-note-grid p {
  max-width: 350px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.70);
}
.section-cream .project-note-grid p {
  color: rgba(14, 126, 107, 0.66);
}
.zh-page .project-note-grid span,
.zh-page .project-note-grid p {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.zh-page .project-note-grid p {
  line-height: 1.86;
}
@media (max-width: 800px) {
  .project-flow-head {
    align-items: start;
    flex-direction: column;
  }
  .project-flow-controls {
    display: none;
  }
  .project-flow {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0 var(--gutter);
    cursor: auto;
  }
  .project-flow-card,
  .project-flow-info {
    flex-basis: auto;
    width: 100%;
  }
  .project-note-grid,
  .project-note-grid.is-two {
    grid-template-columns: 1fr;
  }
  .project-flow-progress {
    display: none;
  }
}

/* Songzhuang Design Museum: keep source images, tune presentation into the site palette. */
.songzhuang-museum-page .section-cream {
  background:
    radial-gradient(circle at 76% 22%, rgba(14, 126, 107, 0.12), transparent 34%),
    linear-gradient(180deg, #EEE5D3 0%, var(--bg-cream) 58%, #EDE2CF 100%);
}
.songzhuang-museum-page .proj-gallery figure {
  position: relative;
  isolation: isolate;
}
.songzhuang-museum-page .image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #EDE3CF;
  border: 1px solid rgba(14, 126, 107, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 18px 52px rgba(14, 126, 107, 0.11);
}
.songzhuang-museum-page .section-dark .image-tone {
  background: #102D27;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 72px rgba(0, 0, 0, 0.22);
}
.songzhuang-museum-page .image-tone img {
  border: 0;
  filter: saturate(0.58) contrast(0.92) brightness(0.93) sepia(0.18) hue-rotate(-7deg);
}
.songzhuang-museum-page .image-tone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(238, 226, 207, 0.22);
  mix-blend-mode: color;
  opacity: 0.68;
}
.songzhuang-museum-page .image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(14, 126, 107, 0.18)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.08), rgba(255, 255, 255, 0.06) 52%, rgba(184, 155, 64, 0.035));
  mix-blend-mode: multiply;
  opacity: 0.56;
}
.songzhuang-museum-page .section-dark .image-tone::before {
  background: rgba(14, 126, 107, 0.30);
  mix-blend-mode: color;
  opacity: 0.50;
}
.songzhuang-museum-page .section-dark .image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.24)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.18), rgba(255, 255, 255, 0.04) 50%, rgba(184, 155, 64, 0.03));
  opacity: 0.50;
}
.songzhuang-museum-page .proj-gallery .img-cap {
  margin-top: 10px;
  color: rgba(14, 126, 107, 0.48);
}
.songzhuang-museum-page .section-dark .proj-gallery .img-cap {
  color: rgba(14, 126, 107, 0.82);
}

.songzhuang-park-page .proj-hero {
  background:
    radial-gradient(circle at 76% 18%, rgba(14, 126, 107, 0.13), transparent 34%),
    linear-gradient(180deg, #0B211C 0%, var(--bg-dark) 62%, #091A15 100%);
}
.songzhuang-visual-section {
  max-width: none;
  margin: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(14, 126, 107, 0.12), transparent 38%),
    linear-gradient(180deg, #091A15 0%, #0E2520 100%);
}
.songzhuang-visual-section > .num,
.songzhuang-visual-section > .proj-narrative,
.songzhuang-visual-section > .songzhuang-visual-grid,
.songzhuang-visual-section > p {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.songzhuang-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(280px, 0.82fr);
  gap: clamp(22px, 3.5vw, 46px);
  align-items: end;
  margin-top: 36px;
}
.songzhuang-visual-grid figure {
  margin: 0;
  min-width: 0;
}
.songzhuang-visual-grid .image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102D27;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 28px 76px rgba(0, 0, 0, 0.26);
}
.songzhuang-visual-grid .image-tone img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  filter: saturate(0.46) contrast(0.96) brightness(0.76) sepia(0.14) hue-rotate(-9deg);
}
.songzhuang-visual-main .image-tone img {
  aspect-ratio: 16 / 9;
  object-position: center 48%;
}
.songzhuang-visual-grid figure:not(.songzhuang-visual-main) .image-tone img {
  aspect-ratio: 4 / 3;
  object-position: center 50%;
}
.songzhuang-visual-grid .image-tone::before,
.songzhuang-visual-grid .image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.songzhuang-visual-grid .image-tone::before {
  background: rgba(14, 126, 107, 0.24);
  mix-blend-mode: color;
}
.songzhuang-visual-grid .image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(14, 126, 107, 0.28)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.22), rgba(255, 255, 255, 0.03) 56%, rgba(184, 155, 64, 0.035));
  mix-blend-mode: multiply;
  opacity: 0.62;
}
.songzhuang-visual-grid .img-cap {
  margin-top: 12px;
  color: rgba(181, 194, 187, 0.72);
}

.yongkang-page .proj-hero {
  background:
    radial-gradient(circle at 76% 18%, rgba(14, 126, 107, 0.14), transparent 34%),
    linear-gradient(180deg, #0B211C 0%, var(--bg-dark) 64%, #091A15 100%);
}
.yongkang-page .proj-deck {
  color: rgba(255, 255, 255, 0.84);
}
.yongkang-hero-facts {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  max-width: 850px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}
.yongkang-hero-facts li {
  min-height: 86px;
  padding: 17px 18px;
  background: rgba(7, 24, 20, 0.72);
  color: rgba(181, 194, 187, 0.88);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}
.zh-page .yongkang-hero-facts li {
  font-family: var(--zh-sans);
}
.yongkang-hero-facts span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 8px;
}
.zh-page .yongkang-hero-facts span {
  font-family: var(--zh-sans);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: none;
}
.yongkang-site-section,
.yongkang-programme-section,
.yongkang-built-section,
.yongkang-hotel-section,
.yongkang-source-section {
  max-width: none;
  margin: 0;
}
.yongkang-site-section,
.yongkang-built-section {
  background:
    radial-gradient(circle at 82% 16%, rgba(103, 125, 130, 0.10), transparent 34%),
    linear-gradient(180deg, #EFE5D3 0%, var(--bg-cream) 56%, #EADDC8 100%);
}
.yongkang-site-section > .proj-narrative,
.yongkang-site-section > .yongkang-video-panel,
.yongkang-programme-section > .proj-narrative,
.yongkang-built-section > .proj-narrative,
.yongkang-built-section > .yongkang-built-grid,
.yongkang-hotel-section > .proj-narrative,
.yongkang-hotel-section > .yongkang-hotel-grid,
.yongkang-source-section > .num,
.yongkang-source-section > .fact-list {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.yongkang-video-panel {
  margin-top: clamp(34px, 5vw, 60px);
}
.yongkang-site-section .proj-video-wrap {
  margin-top: 0;
}
.yongkang-built-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: start;
  margin-top: clamp(34px, 5vw, 60px);
}
.yongkang-built-grid-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(1060px, calc(100vw - (var(--gutter) * 2)));
}
.yongkang-built-grid figure,
.yongkang-hotel-grid figure {
  margin: 0;
}
.yongkang-hotel-section {
  background:
    radial-gradient(circle at 18% 8%, rgba(184, 155, 64, 0.12), transparent 30%),
    linear-gradient(180deg, #071814 0%, #0B211C 58%, #081B16 100%);
}
.yongkang-hotel-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
  margin-top: clamp(34px, 5vw, 60px);
}
.yongkang-hotel-grid .hotel-lead {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
}
.yongkang-hotel-grid .hotel-reception {
  grid-column: 7 / -1;
  grid-row: 1;
}
.yongkang-hotel-grid .hotel-room {
  grid-column: 7 / span 3;
  grid-row: 2;
}
.yongkang-hotel-grid .hotel-dining {
  grid-column: 10 / -1;
  grid-row: 2;
}
.yongkang-hotel-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yongkang-hotel-grid .hotel-lead img {
  aspect-ratio: 4 / 5;
}
.yongkang-hotel-grid .hotel-reception img {
  aspect-ratio: 16 / 9;
}
.yongkang-hotel-grid .hotel-room img,
.yongkang-hotel-grid .hotel-dining img {
  aspect-ratio: 1 / 1;
}
.yongkang-hotel-section .yongkang-image-tone img {
  filter: saturate(0.76) contrast(0.98) brightness(0.90) sepia(0.08) hue-rotate(-5deg);
}
.yongkang-hotel-section .yongkang-image-tone::before {
  background: rgba(14, 126, 107, 0.10);
}
.yongkang-hotel-section .yongkang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(14, 126, 107, 0.16)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.12), rgba(255, 255, 255, 0.04) 58%, rgba(184, 155, 64, 0.025));
  opacity: 0.38;
}
.yongkang-page .img-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: rgba(14, 126, 107, 0.52);
  margin-top: 11px;
  text-transform: uppercase;
}
.yongkang-page .section-dark .img-cap {
  color: rgba(181, 194, 187, 0.68);
}
.zh-page.yongkang-page .img-cap {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.yongkang-programme-grid {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
  max-width: 760px;
}
.yongkang-programme-grid li {
  min-height: 96px;
  padding: 18px;
  background: rgba(7, 24, 20, 0.72);
  color: rgba(181, 194, 187, 0.88);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}
.yongkang-programme-grid span {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  color: var(--text-cream);
  margin-bottom: 10px;
}
.yongkang-image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102D27;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 72px rgba(0, 0, 0, 0.22);
}
.section-cream .yongkang-image-tone {
  background: #E8DDC9;
  border-color: rgba(14, 126, 107, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    0 18px 52px rgba(14, 126, 107, 0.12);
}
.yongkang-image-tone img {
  width: 100%;
  height: auto;
  border: 0;
  filter: saturate(0.54) contrast(0.96) brightness(0.84) sepia(0.12) hue-rotate(-7deg);
}
.section-cream .yongkang-image-tone img {
  filter: saturate(0.66) contrast(0.96) brightness(0.91) sepia(0.08) hue-rotate(-5deg);
}
.yongkang-image-tone::before,
.yongkang-image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.yongkang-image-tone::before {
  background: rgba(14, 126, 107, 0.18);
  mix-blend-mode: color;
}
.section-cream .yongkang-image-tone::before {
  background: rgba(238, 226, 207, 0.18);
}
.yongkang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.20)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.18), rgba(255, 255, 255, 0.03) 58%, rgba(184, 155, 64, 0.03));
  mix-blend-mode: multiply;
  opacity: 0.56;
}
.section-cream .yongkang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(14, 126, 107, 0.12)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.08), rgba(255, 255, 255, 0.05) 56%, rgba(184, 155, 64, 0.035));
  opacity: 0.48;
}

.yongjia-page .proj-hero {
  background:
    radial-gradient(circle at 74% 16%, rgba(14, 126, 107, 0.13), transparent 34%),
    linear-gradient(180deg, #081C17 0%, var(--bg-dark) 64%, #091A15 100%);
}
.yongjia-page .proj-deck {
  color: rgba(255, 255, 255, 0.84);
}
.yongjia-page .proj-video-wrap-landscape video {
  aspect-ratio: 391 / 180;
}
.yongjia-scheme-section,
.yongjia-interior-section,
.yongjia-phase-section {
  max-width: none;
  margin: 0;
}
.yongjia-scheme-section {
  background:
    radial-gradient(circle at 80% 18%, rgba(14, 126, 107, 0.10), transparent 34%),
    linear-gradient(180deg, var(--bg-cream) 0%, #EFE4D0 100%);
}
.yongjia-scheme-section > .proj-narrative,
.yongjia-scheme-section > .yongjia-feature-media,
.yongjia-scheme-section > .yongjia-principle-grid,
.yongjia-interior-section > .proj-narrative,
.yongjia-interior-section > .yongjia-interior-grid,
.yongjia-phase-section > .num,
.yongjia-phase-section > .proj-phase-intro,
.yongjia-phase-section > .fact-list,
.yongjia-phase-section > p {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.yongjia-feature-media {
  margin-top: clamp(34px, 5vw, 64px);
}
.yongjia-interior-section {
  background:
    radial-gradient(circle at 20% 8%, rgba(184, 155, 64, 0.10), transparent 30%),
    linear-gradient(180deg, #081C17 0%, #0B211C 58%, #081A16 100%);
}
.yongjia-interior-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
  margin-top: clamp(38px, 5vw, 64px);
}
.yongjia-interior-grid figure {
  margin: 0;
  min-width: 0;
}
.yongjia-interior-grid .interior-lead {
  grid-column: 1 / span 7;
  grid-row: 1;
}
.yongjia-interior-grid .interior-stair {
  grid-column: 1 / span 4;
  grid-row: 2;
}
.yongjia-interior-grid .interior-study {
  grid-column: 8 / -1;
  grid-row: 1;
  align-self: end;
}
.yongjia-interior-grid .interior-bath {
  grid-column: 5 / span 4;
  grid-row: 2;
}
.yongjia-interior-grid .interior-bedroom {
  grid-column: 9 / -1;
  grid-row: 2;
}
.yongjia-interior-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yongjia-interior-grid .interior-lead img {
  aspect-ratio: 16 / 9;
}
.yongjia-interior-grid .interior-stair img,
.yongjia-interior-grid .interior-bedroom img,
.yongjia-interior-grid .interior-study img,
.yongjia-interior-grid .interior-bath img {
  aspect-ratio: 16 / 9;
}
.yongjia-interior-grid .interior-lead img { object-position: center 52%; }
.yongjia-interior-grid .interior-stair img { object-position: center 50%; }
.yongjia-interior-grid .interior-study img { object-position: center 48%; }
.yongjia-interior-grid .interior-bath img { object-position: center 50%; }
.yongjia-interior-grid .interior-bedroom img { object-position: center 48%; }
.yongjia-interior-section .yongjia-image-tone img {
  filter: saturate(0.76) contrast(0.98) brightness(0.92) sepia(0.06) hue-rotate(-4deg);
}
.yongjia-interior-section .yongjia-image-tone::before {
  background: rgba(14, 126, 107, 0.10);
}
.yongjia-interior-section .yongjia-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.18)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.12), rgba(255, 255, 255, 0.03) 58%, rgba(184, 155, 64, 0.03));
  opacity: 0.30;
}
.yongjia-principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(14, 126, 107, 0.12);
  background: rgba(14, 126, 107, 0.12);
}
.yongjia-principle-grid article {
  min-height: 184px;
  padding: clamp(24px, 3vw, 34px);
  background: rgba(255, 255, 255, 0.72);
}
.yongjia-principle-grid span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 28px;
}
.yongjia-principle-grid p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.76;
  color: rgba(14, 126, 107, 0.66);
  max-width: 330px;
}
.zh-page .yongjia-principle-grid span,
.zh-page .yongjia-principle-grid p {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.yongjia-clean-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  margin-top: 36px;
}
.yongjia-feature-media figure,
.yongjia-clean-grid figure {
  margin: 0;
  min-width: 0;
}
.yongjia-image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102D27;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 72px rgba(0, 0, 0, 0.22);
}
.section-cream .yongjia-image-tone {
  background: #E9DEC9;
  border-color: rgba(14, 126, 107, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.52),
    0 20px 58px rgba(14, 126, 107, 0.12);
}
.yongjia-image-tone img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  filter: saturate(0.58) contrast(0.96) brightness(0.84) sepia(0.11) hue-rotate(-6deg);
}
.section-cream .yongjia-image-tone img {
  filter: saturate(0.72) contrast(0.96) brightness(0.92) sepia(0.07) hue-rotate(-4deg);
}
.yongjia-image-tone::before,
.yongjia-image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.yongjia-image-tone::before {
  background: rgba(14, 126, 107, 0.18);
  mix-blend-mode: color;
}
.section-cream .yongjia-image-tone::before {
  background: rgba(238, 226, 207, 0.12);
}
.yongjia-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.22)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.18), rgba(255, 255, 255, 0.03) 58%, rgba(184, 155, 64, 0.025));
  mix-blend-mode: multiply;
  opacity: 0.50;
}
.section-cream .yongjia-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.11)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.07), rgba(255, 255, 255, 0.05) 58%, rgba(184, 155, 64, 0.025));
  opacity: 0.44;
}
.yongjia-page .img-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: rgba(14, 126, 107, 0.78);
  margin-top: 11px;
  text-transform: uppercase;
}
.zh-page.yongjia-page .img-cap {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.section-cream .yongjia-page .img-cap,
.yongjia-page .section-cream .img-cap {
  color: rgba(14, 126, 107, 0.52);
}

.sanjiang-page .proj-hero {
  background:
    radial-gradient(circle at 75% 18%, rgba(82, 111, 133, 0.16), transparent 34%),
    linear-gradient(180deg, #081E1A 0%, var(--bg-dark) 62%, #081B16 100%);
}
.sanjiang-page .proj-deck {
  color: rgba(255, 255, 255, 0.84);
}
.sanjiang-overview-section,
.sanjiang-framework-section,
.sanjiang-programme-section,
.sanjiang-view-section,
.sanjiang-source-section {
  max-width: none;
  margin: 0;
}
.sanjiang-overview-section,
.sanjiang-programme-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(82, 111, 133, 0.10), transparent 34%),
    linear-gradient(180deg, #EFE5D3 0%, var(--bg-cream) 56%, #EBDFC9 100%);
}
.sanjiang-overview-section > .proj-narrative,
.sanjiang-overview-section > .project-note-grid,
.sanjiang-overview-section > .sanjiang-feature-media,
.sanjiang-programme-section > .proj-narrative,
.sanjiang-programme-section > .sanjiang-programme-grid,
.sanjiang-view-section > .proj-narrative,
.sanjiang-view-section > .project-note-grid,
.sanjiang-view-section > .sanjiang-feature-media,
.sanjiang-framework-section > .num,
.sanjiang-framework-section > .sanjiang-framework-grid,
.sanjiang-source-section > .num,
.sanjiang-source-section > .fact-list {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.sanjiang-feature-media {
  margin-top: clamp(34px, 5vw, 64px);
}
.sanjiang-feature-media figure {
  margin: 0;
}
.sanjiang-feature-panorama .sanjiang-image-tone img {
  aspect-ratio: 16 / 8.4;
  object-fit: cover;
  object-position: center;
}
.sanjiang-feature-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: start;
}
.sanjiang-feature-pair .sanjiang-image-tone img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
.sanjiang-image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102D27;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 72px rgba(0, 0, 0, 0.22);
}
.section-cream .sanjiang-image-tone {
  background: #E9DEC9;
  border-color: rgba(14, 126, 107, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.50),
    0 20px 58px rgba(14, 126, 107, 0.12);
}
.sanjiang-image-tone img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  filter: saturate(0.50) contrast(0.96) brightness(0.82) sepia(0.12) hue-rotate(-8deg);
}
.section-cream .sanjiang-image-tone img {
  filter: saturate(0.64) contrast(0.96) brightness(0.90) sepia(0.08) hue-rotate(-6deg);
}
.sanjiang-image-tone::before,
.sanjiang-image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sanjiang-image-tone::before {
  background: rgba(14, 126, 107, 0.20);
  mix-blend-mode: color;
}
.section-cream .sanjiang-image-tone::before {
  background: rgba(238, 226, 207, 0.12);
}
.sanjiang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.24)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.18), rgba(255, 255, 255, 0.03) 58%, rgba(184, 155, 64, 0.025));
  mix-blend-mode: multiply;
  opacity: 0.50;
}
.section-cream .sanjiang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.10)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.07), rgba(255, 255, 255, 0.05) 58%, rgba(184, 155, 64, 0.025));
  opacity: 0.44;
}
.sanjiang-page .img-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: rgba(14, 126, 107, 0.78);
  margin-top: 11px;
  text-transform: uppercase;
}
.zh-page.sanjiang-page .img-cap {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.sanjiang-page .section-cream .img-cap {
  color: rgba(14, 126, 107, 0.52);
}
@media (max-width: 800px) {
  .sanjiang-feature-panorama .sanjiang-image-tone img,
  .sanjiang-feature-pair .sanjiang-image-tone img {
    aspect-ratio: 4 / 3;
  }
  .sanjiang-feature-pair {
    grid-template-columns: 1fr;
  }
}
.sanjiang-framework-grid,
.sanjiang-programme-grid {
  list-style: none;
  margin-top: 34px;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}
.sanjiang-framework-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sanjiang-programme-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-color: rgba(14, 126, 107, 0.12);
  background: rgba(14, 126, 107, 0.12);
}
.sanjiang-framework-grid li,
.sanjiang-programme-grid li {
  min-height: 128px;
  padding: 20px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}
.sanjiang-framework-grid li {
  background: rgba(7, 24, 20, 0.74);
  color: rgba(181, 194, 187, 0.88);
}
.sanjiang-programme-grid li {
  background: rgba(239, 229, 211, 0.82);
  color: rgba(14, 126, 107, 0.64);
}
.sanjiang-framework-grid span,
.sanjiang-programme-grid span {
  display: block;
  font-family: var(--serif);
  line-height: 1.05;
  color: var(--text-cream);
  margin-bottom: 12px;
}
.sanjiang-framework-grid span {
  font-size: clamp(22px, 2.2vw, 30px);
}
.sanjiang-programme-grid span {
  font-size: clamp(24px, 2.4vw, 34px);
  color: var(--text-dark);
}

.minhang-page .proj-hero {
  background:
    radial-gradient(circle at 76% 18%, rgba(109, 125, 132, 0.16), transparent 34%),
    linear-gradient(180deg, #081E1A 0%, var(--bg-dark) 62%, #081A16 100%);
}
.minhang-page .proj-deck {
  color: rgba(255, 255, 255, 0.84);
}
.minhang-overview-section,
.minhang-framework-section,
.minhang-metrics-section,
.minhang-view-section,
.minhang-source-section {
  max-width: none;
  margin: 0;
}
.minhang-overview-section,
.minhang-metrics-section {
  background:
    radial-gradient(circle at 82% 18%, rgba(109, 125, 132, 0.10), transparent 34%),
    linear-gradient(180deg, #EFE5D3 0%, var(--bg-cream) 56%, #EBDFC9 100%);
}
.minhang-overview-section > .proj-narrative,
.minhang-overview-section > .minhang-feature-media,
.minhang-overview-section > .project-note-grid,
.minhang-metrics-section > .proj-narrative,
.minhang-metrics-section > .minhang-metrics-grid,
.minhang-view-section > .proj-narrative,
.minhang-view-section > .minhang-feature-media,
.minhang-view-section > .project-note-grid,
.minhang-framework-section > .num,
.minhang-framework-section > .minhang-framework-grid,
.minhang-source-section > .num,
.minhang-source-section > .fact-list {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.minhang-feature-media {
  margin-top: clamp(34px, 5vw, 64px);
}
.minhang-view-section > .minhang-feature-media {
  max-width: min(1060px, calc(100vw - (var(--gutter) * 2)));
}
.minhang-feature-panorama {
  max-width: min(1180px, calc(100vw - (var(--gutter) * 2)));
}
.minhang-feature-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}
.minhang-feature-media figure {
  margin: 0;
}
.minhang-image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102D27;
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 72px rgba(0, 0, 0, 0.22);
}
.section-cream .minhang-image-tone {
  background: #E9DEC9;
  border-color: rgba(14, 126, 107, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.50),
    0 20px 58px rgba(14, 126, 107, 0.12);
}
.minhang-image-tone img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  filter: saturate(0.64) contrast(1.03) brightness(0.88) sepia(0.08) hue-rotate(-5deg);
}
.minhang-feature-panorama .minhang-image-tone img {
  aspect-ratio: 16 / 8.35;
  object-fit: cover;
  object-position: center 56%;
}
.minhang-feature-pair .minhang-image-tone img {
  aspect-ratio: 16 / 10.4;
  object-fit: cover;
}
.minhang-feature-pair figure:first-child .minhang-image-tone img {
  object-position: center 48%;
}
.minhang-feature-pair figure:nth-child(2) .minhang-image-tone img {
  object-position: center 52%;
}
.section-cream .minhang-image-tone img {
  filter: saturate(0.78) contrast(1.04) brightness(0.94) sepia(0.05) hue-rotate(-4deg);
}
.minhang-image-tone::before,
.minhang-image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.minhang-image-tone::before {
  background: rgba(14, 126, 107, 0.12);
  mix-blend-mode: color;
}
.section-cream .minhang-image-tone::before {
  background: rgba(238, 226, 207, 0.06);
}
.minhang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.24)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.18), rgba(255, 255, 255, 0.03) 58%, rgba(184, 155, 64, 0.025));
  mix-blend-mode: multiply;
  opacity: 0.36;
}
.section-cream .minhang-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 126, 107, 0.10)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.07), rgba(255, 255, 255, 0.05) 58%, rgba(184, 155, 64, 0.025));
  opacity: 0.28;
}
.minhang-plan-tone {
  background: #F2EDE3;
  border-color: rgba(255, 255, 255, 0.22);
}
.minhang-plan-tone img {
  filter: saturate(0.94) contrast(1.02) brightness(0.98) sepia(0.02);
}
.minhang-plan-tone::before {
  background: rgba(14, 126, 107, 0.025);
  mix-blend-mode: color;
}
.minhang-plan-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(14, 126, 107, 0.08)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.05), rgba(255, 255, 255, 0.03) 62%);
  opacity: 0.14;
}
.minhang-aerial-tone img {
  filter: saturate(0.82) contrast(1.02) brightness(0.94) sepia(0.04) hue-rotate(-3deg);
}
.minhang-aerial-tone::before {
  background: rgba(14, 126, 107, 0.05);
}
.minhang-aerial-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(14, 126, 107, 0.12)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.08), rgba(255, 255, 255, 0.03) 58%);
  opacity: 0.18;
}
.minhang-page .img-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: rgba(14, 126, 107, 0.78);
  margin-top: 11px;
  text-transform: uppercase;
}
.zh-page.minhang-page .img-cap {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}
.minhang-page .section-cream .img-cap {
  color: rgba(14, 126, 107, 0.52);
}
.minhang-framework-grid,
.minhang-metrics-grid {
  list-style: none;
  margin-top: 34px;
  padding: 0;
  display: grid;
  gap: 1px;
}
.minhang-framework-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}
.minhang-metrics-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid rgba(14, 126, 107, 0.12);
  background: rgba(14, 126, 107, 0.12);
}
.minhang-framework-grid li,
.minhang-metrics-grid li {
  min-height: 128px;
  padding: 20px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}
.zh-page .minhang-framework-grid li,
.zh-page .minhang-metrics-grid li {
  font-family: var(--zh-sans);
}
.minhang-framework-grid li {
  background: rgba(7, 24, 20, 0.74);
  color: rgba(181, 194, 187, 0.88);
}
.minhang-metrics-grid li {
  background: rgba(239, 229, 211, 0.82);
  color: rgba(14, 126, 107, 0.64);
}
.minhang-framework-grid span,
.minhang-metrics-grid span {
  display: block;
  font-family: var(--serif);
  line-height: 1.05;
  margin-bottom: 12px;
}
.minhang-framework-grid span {
  color: var(--text-cream);
  font-size: clamp(20px, 2vw, 28px);
}
.minhang-metrics-grid span {
  color: var(--text-dark);
  font-size: clamp(19px, 1.8vw, 27px);
}
.minhang-principle-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lanzhou-page .proj-hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(112, 143, 147, 0.16), transparent 34%),
    linear-gradient(180deg, #071D19 0%, #09251F 58%, #071915 100%);
}
.lanzhou-page .proj-deck {
  color: rgba(255, 255, 255, 0.83);
}
.lanzhou-overview-section,
.lanzhou-programme-section,
.lanzhou-composition-section,
.lanzhou-source-section {
  max-width: none;
  margin: 0;
}
.lanzhou-overview-section,
.lanzhou-composition-section {
  background:
    radial-gradient(circle at 84% 16%, rgba(100, 122, 128, 0.10), transparent 34%),
    linear-gradient(180deg, #EFE5D3 0%, var(--bg-cream) 58%, #EADDC7 100%);
}
.lanzhou-overview-section > .proj-narrative,
.lanzhou-overview-section > .lanzhou-feature-media,
.lanzhou-programme-section > .num,
.lanzhou-programme-section > .lanzhou-programme-grid,
.lanzhou-composition-section > .proj-narrative,
.lanzhou-composition-section > .lanzhou-composition-grid,
.lanzhou-source-section > .num,
.lanzhou-source-section > .fact-list {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.lanzhou-feature-media {
  margin-top: clamp(34px, 5vw, 64px);
  max-width: min(1120px, calc(100vw - (var(--gutter) * 2)));
}
.lanzhou-feature-media figure,
.lanzhou-composition-grid figure {
  margin: 0;
}
.lanzhou-image-tone {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102D27;
  border: 1px solid rgba(14, 126, 107, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 22px 62px rgba(14, 126, 107, 0.14);
}
.lanzhou-image-tone img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  filter: saturate(0.72) contrast(1.02) brightness(0.92) sepia(0.06) hue-rotate(-4deg);
}
.lanzhou-image-tone::before,
.lanzhou-image-tone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lanzhou-image-tone::before {
  background: rgba(14, 126, 107, 0.06);
  mix-blend-mode: color;
}
.lanzhou-image-tone::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(14, 126, 107, 0.15)),
    linear-gradient(90deg, rgba(14, 126, 107, 0.10), rgba(255, 255, 255, 0.04) 60%);
  mix-blend-mode: multiply;
  opacity: 0.26;
}
.lanzhou-detail-tone img {
  filter: saturate(0.64) contrast(1.04) brightness(0.90) sepia(0.07) hue-rotate(-4deg);
}
.lanzhou-aerial-tone img {
  filter: saturate(0.70) contrast(1.03) brightness(0.90) sepia(0.06) hue-rotate(-4deg);
}
.lanzhou-programme-grid {
  list-style: none;
  margin-top: 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}
.lanzhou-programme-grid li {
  min-height: 132px;
  padding: 20px;
  background: rgba(7, 24, 20, 0.74);
  color: rgba(181, 194, 187, 0.88);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
}
.zh-page .lanzhou-programme-grid li {
  font-family: var(--zh-sans);
}
.lanzhou-programme-grid span {
  display: block;
  color: var(--text-cream);
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.05;
  margin-bottom: 12px;
}
.lanzhou-composition-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: clamp(22px, 3vw, 42px);
  margin-top: clamp(34px, 5vw, 64px);
  align-items: start;
}
.lanzhou-page .img-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: rgba(14, 126, 107, 0.52);
  margin-top: 11px;
  text-transform: uppercase;
}
.lanzhou-page .section-dark .img-cap {
  color: rgba(181, 194, 187, 0.68);
}
.zh-page.lanzhou-page .img-cap {
  font-family: var(--zh-sans);
  letter-spacing: 0.04em;
  text-transform: none;
}

.laoliangfang-page .proj-deck {
  color: rgba(255, 255, 255, 0.82);
}
.laoliangfang-page .section-cream {
  background:
    radial-gradient(circle at 80% 16%, rgba(14, 126, 107, 0.10), transparent 34%),
    linear-gradient(180deg, #EFE5D3 0%, var(--bg-cream) 58%, #EADDC8 100%);
}
.laoliangfang-page .proj-gallery img {
  border-color: rgba(14, 126, 107, 0.14);
  filter: saturate(0.58) contrast(0.98) brightness(0.90) sepia(0.10) hue-rotate(-5deg);
}
.laoliangfang-page .section-dark .proj-gallery img {
  border-color: rgba(255, 255, 255, 0.12);
  filter: saturate(0.50) contrast(0.96) brightness(0.82) sepia(0.13) hue-rotate(-7deg);
}

.proj-gallery-natural img {
  aspect-ratio: 1210 / 935;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ou-kiln-page .proj-deck {
  color: rgba(255, 255, 255, 0.82);
}
.ou-photo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.8fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: end;
  margin-top: 36px;
}
.ou-photo-grid figure {
  margin: 0;
}
.ou-photo-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline-cream);
  filter: grayscale(0.12) saturate(0.68) contrast(0.98) brightness(0.92) sepia(0.08) hue-rotate(-4deg);
}
.ou-photo-lead {
  grid-row: span 2;
}
.ou-photo-lead img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ou-photo-grid figure:not(.ou-photo-lead) img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ou-photo-grid figcaption,
.ou-photo-note p {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.55;
  color: rgba(14, 126, 107, 0.52);
  margin-top: 10px;
  text-transform: uppercase;
}
.ou-photo-note {
  border-top: 1px solid var(--hairline-cream);
  padding-top: 18px;
}
.ou-photo-note .num {
  color: var(--accent-red);
  margin: 0 0 10px;
}
.ou-photo-note p:last-child {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.65;
  text-transform: none;
  color: rgba(14, 126, 107, 0.62);
  max-width: 360px;
}

.proj-phase-intro {
  max-width: 760px;
  margin-top: 28px;
}
.proj-phase-intro h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  font-weight: 400;
  max-width: 680px;
}
.proj-phase-intro p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-cream-muted);
  margin-top: 18px;
  max-width: 620px;
}

@media (max-width: 800px) {
  .proj-gallery-2, .proj-gallery-3, .ou-photo-grid, .songzhuang-visual-grid, .yongjia-clean-grid, .yongjia-principle-grid, .yongjia-interior-grid, .yongkang-hero-facts, .yongkang-built-grid, .yongkang-hotel-grid, .sanjiang-framework-grid, .sanjiang-programme-grid, .minhang-framework-grid, .minhang-metrics-grid, .minhang-principle-grid, .minhang-feature-pair, .lanzhou-programme-grid, .lanzhou-composition-grid { grid-template-columns: 1fr; }
  .yongkang-programme-grid { grid-template-columns: 1fr 1fr; }
  .yongjia-interior-grid .interior-lead,
  .yongjia-interior-grid .interior-stair,
  .yongjia-interior-grid .interior-study,
  .yongjia-interior-grid .interior-bath,
  .yongjia-interior-grid .interior-bedroom {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .yongjia-interior-grid .interior-lead img,
  .yongjia-interior-grid .interior-stair img,
  .yongjia-interior-grid .interior-study img,
  .yongjia-interior-grid .interior-bath img,
  .yongjia-interior-grid .interior-bedroom img {
    aspect-ratio: 4 / 3;
  }
  .yongkang-hotel-grid .hotel-lead,
  .yongkang-hotel-grid .hotel-reception,
  .yongkang-hotel-grid .hotel-room,
  .yongkang-hotel-grid .hotel-dining {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .yongkang-hotel-grid .hotel-lead img,
  .yongkang-hotel-grid .hotel-reception img,
  .yongkang-hotel-grid .hotel-room img,
  .yongkang-hotel-grid .hotel-dining img {
    aspect-ratio: 4 / 3;
  }
  .sanjiang-framework-grid li,
  .sanjiang-programme-grid li,
  .minhang-framework-grid li,
  .minhang-metrics-grid li,
  .lanzhou-programme-grid li { min-height: 104px; }
}

@media (max-width: 560px) {
  .yongkang-programme-grid { grid-template-columns: 1fr; }
}

.proj-video-wrap {
  width: min(360px, 82vw);
  max-height: 74vh;
  background: #050806;
  display: flex;
  justify-content: center;
  margin: 40px auto 0;
  padding: clamp(10px, 1.2vw, 16px);
  box-sizing: border-box;
  border: 1px solid var(--hairline-dark);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}
.proj-video-wrap video {
  width: 100%;
  aspect-ratio: 720 / 1564;
  height: min(72vh, 760px);
  display: block;
  object-fit: contain;
}
.proj-video-wrap-portrait {
  width: min(350px, 82vw);
  max-height: none;
}
.proj-video-wrap-portrait video {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1564;
}
.proj-video-caption {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-cream-muted);
  text-align: center;
  max-width: 520px;
  margin: 18px auto 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.proj-video-caption span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-red);
  display: block;
  margin-bottom: 4px;
}
.section-cream .proj-video-caption {
  color: rgba(14, 126, 107, 0.58);
}
@media (max-width: 600px) {
  .proj-video-caption {
    max-width: min(320px, calc(100vw - 40px));
  }
}

.proj-video-wrap-landscape {
  width: min(980px, 100%);
  max-height: none;
  padding: clamp(8px, 1vw, 12px);
}
.proj-video-wrap-landscape video {
  aspect-ratio: 480 / 221;
  height: auto;
  max-height: 68vh;
  background: #050806;
}

@media (max-width: 700px) {
  .proj-video-wrap-landscape { width: 100%; max-width: 100%; }
  .proj-video-wrap-landscape video { max-height: 52vh; }
}

/* studios block on project pages */
.proj-studios {
  margin-top: 56px;
  border-top: 1px solid var(--hairline-dark);
  padding-top: 36px;
}
.section-cream .proj-studios { border-top-color: var(--hairline-cream); }
.proj-studios-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}
.proj-studios-list li {
  padding: 18px 20px;
  border: 1px solid var(--hairline-dark);
}
.section-cream .proj-studios-list li { border-color: var(--hairline-cream); }
.proj-studios-list .firm {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.proj-studios-list .role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent-red);
  text-transform: uppercase;
}

/* next/prev */
.proj-nav {
  border-top: 1px solid var(--hairline-dark);
  padding: 60px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.section-cream + .proj-nav { border-top-color: var(--hairline-cream); }
.proj-nav-link {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  display: block;
  transition: color 0.2s;
}
.proj-nav-link:hover { color: var(--accent-red); }
.proj-nav-link .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  display: block;
  color: var(--text-muted-dark);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.proj-nav-link.next { text-align: right; }
@media (max-width: 600px) {
  .proj-nav { grid-template-columns: 1fr; gap: 28px; }
  .proj-nav-link.next { text-align: left; }
}

/* ============================================================
   IMAGE SYSTEM v1 · 2026-04-30 · LINDA
   Aspect-ratio tokens + tone grading + 3 layout grids
   New project pages should use these classes; legacy classes
   above are preserved for backwards compatibility.
   ============================================================ */

:root {
  --ratio-cinema: 16 / 9;
  --ratio-classic: 3 / 2;
  --ratio-square: 1 / 1;
  --ratio-portrait: 3 / 4;

  --tone-cream: brightness(0.97) contrast(1.04) saturate(0.9);
  --tone-dark: brightness(0.88) contrast(1.06) saturate(0.86) sepia(0.04);
  --media-radius: 0px;
  --media-bezel: rgba(244, 236, 220, 0.12);
}

/* ----- Container ("frame") ----- */
.media {
  position: relative;
  overflow: hidden;
  background: #081A16;
  border: 1px solid var(--media-bezel);
  border-radius: var(--media-radius);
  aspect-ratio: var(--ratio-classic);
  isolation: isolate;
}
.media-cinema   { aspect-ratio: var(--ratio-cinema); }
.media-classic  { aspect-ratio: var(--ratio-classic); }
.media-square   { aspect-ratio: var(--ratio-square); }
.media-portrait { aspect-ratio: var(--ratio-portrait); }

.media > img,
.media > video,
.media > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: var(--tone-dark);
  transition: transform 0.6s ease, filter 0.4s ease;
}
.section-cream .media > img,
.section-cream .media > video { filter: var(--tone-cream); }
.media:hover > img { transform: scale(1.02); }

/* Optional vignette overlay to unify cool/warm sources */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(8, 26, 22, 0.18) 100%);
  z-index: 1;
}
.section-cream .media::after {
  background: linear-gradient(180deg, transparent 60%, rgba(244, 236, 220, 0.14) 100%);
}

/* ----- Frame wrapper (figure + caption) ----- */
.media-frame {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}
.media-frame > .media { margin: 0; }
.media-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  margin-top: 12px;
  color: var(--text-muted-dark);
  text-transform: uppercase;
}
.section-cream .media-caption { color: var(--text-muted-cream); }
.media-caption .media-caption-tag {
  color: var(--accent-red);
  margin-right: 8px;
  letter-spacing: 0.18em;
}

/* ============================================================
   Media grids · 3 layouts, no more
   ============================================================ */

/* 1. Full bleed · 1 column, generous breathing room */
.media-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: clamp(48px, 6vw, 96px) 0;
}

/* 2. Stagger 2:1 · one large + one small */
.media-grid-stagger {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
  margin: clamp(48px, 6vw, 96px) 0;
}
.media-grid-stagger.reverse {
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 820px) {
  .media-grid-stagger,
  .media-grid-stagger.reverse {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 3. Triplet 1:1:1 · three peers */
.media-grid-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin: clamp(48px, 6vw, 96px) 0;
}
@media (max-width: 820px) {
  .media-grid-triplet { grid-template-columns: 1fr; gap: 20px; }
}

/* Inset gutter for full-bleed inside section padding */
.section .media-grid-full,
.section .media-grid-stagger,
.section .media-grid-triplet { margin-left: 0; margin-right: 0; }

/* ============================================================
   Songzhuang park · page-scoped palette
   "L · Reed + olive ground — teal spark" · 2026-04-30
   Reed/olive earth tones carry the body; teal #0E7E6B is the
   only spark colour and is reserved for headings, status chips,
   accent links, and image accents — never used as a background.
   ============================================================ */
.songzhuang-park-page,
.zh-page.songzhuang-park-page {
  /* Brand palette */
  --reed-deep: #3E3F27;       /* RAL-ish reed dark */
  --reed-green: #7C7E4E;      /* RAL 6013 reed green */
  --olive-grey: #7A7461;      /* RAL 7002 olive grey */
  --teal-spark: #0E7E6B;      /* RAL 5021 spark — sparingly */
  --cream-warm: #F0EEE6;      /* warm ivory ground */
  --cream-bright: #FAF9F5;    /* off-white ground */
  --reed-deepest: #2C2D1B;    /* deeper than reed-deep, hero only */

  /* Site-wide tokens overridden in this page */
  --bg-dark: var(--reed-deep);
  --bg-deepest: var(--reed-deepest);
  --bg-cream: var(--cream-warm);
  --bg-cream-warm: var(--cream-bright);
  --text-cream: var(--cream-warm);
  --text-dark: var(--reed-deep);
  --text-muted-dark: rgba(240, 238, 230, 0.62);
  --text-muted-cream: #7A7461;
  --text-cream-muted: rgba(240, 238, 230, 0.55);
  --accent-red: var(--teal-spark);
  --accent-yellow: var(--teal-spark);
  --hairline-dark: rgba(240, 238, 230, 0.13);
  --hairline-cream: rgba(62, 63, 39, 0.13);

  /* Image-system tokens overridden */
  --tone-dark: brightness(0.94) contrast(1.04) saturate(0.84) sepia(0.06) hue-rotate(-3deg);
  --tone-cream: brightness(0.96) contrast(1.04) saturate(0.86);
  --media-bezel: rgba(240, 238, 230, 0.14);
}

/* Subtle reed-tinted hero background, replaces pure deep-teal */
.songzhuang-park-page .proj-hero {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124, 126, 78, 0.18), transparent 70%),
    var(--reed-deepest);
}

/* Section-dark gets a faint reed-green wash to prevent flat black-green */
.songzhuang-park-page .section-dark {
  background:
    linear-gradient(180deg, var(--reed-deep) 0%, #353624 100%);
}

/* Section-cream — warm ivory with an olive-grey separator hairline */
.songzhuang-park-page .section-cream {
  background: var(--cream-warm);
  color: var(--reed-deep);
}

/* Hairline accents — replace teal status colour with olive-grey by default,
   reserve teal for true status points (built / active links / cursors). */
.songzhuang-park-page .num,
.songzhuang-park-page .proj-eyebrow,
.songzhuang-park-page .fact-key,
.songzhuang-park-page .media-caption {
  color: var(--olive-grey);
}
.songzhuang-park-page .section-dark .num,
.songzhuang-park-page .section-dark .proj-eyebrow,
.songzhuang-park-page .section-dark .fact-key,
.songzhuang-park-page .section-dark .media-caption {
  color: rgba(240, 238, 230, 0.55);
}
.songzhuang-park-page .media-caption-tag {
  color: var(--teal-spark) !important;
}
.songzhuang-park-page .section-dark .fact-key {
  color: var(--teal-spark);
}

/* Status chip — only true "spark" use of teal */
.songzhuang-park-page .complex-status.status-plan {
  background: rgba(14, 126, 107, 0.14);
  color: var(--teal-spark);
  border: 1px solid rgba(14, 126, 107, 0.32);
}

/* Project-back link in spark */
.songzhuang-park-page .proj-back {
  color: var(--olive-grey);
}
.songzhuang-park-page .proj-back:hover {
  color: var(--teal-spark);
}

/* Project-note-grid borders + hover use spark */
.songzhuang-park-page .project-note-grid li {
  border-left: 2px solid rgba(240, 238, 230, 0.16);
  padding-left: 18px;
}
.songzhuang-park-page .project-note-grid li:hover {
  border-left-color: var(--teal-spark);
}

/* ----- Songzhuang park · page-scoped overrides for image-system v1 ----- */
/* The project-flow scroller globally enforces 16/9 + contain, which lets
   1:1 source frames render with letterbox bezels. On songzhuang-park-page
   the renderings are square, so we relax the ratio to 1:1 + cover for
   a flush, bezel-free read. Other project pages are untouched. */
.songzhuang-park-page .project-flow-card img,
.songzhuang-park-page .project-flow-card video {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--reed-deepest);
  filter: var(--tone-dark);
  border-color: var(--media-bezel);
}
.songzhuang-park-page .project-flow-card {
  flex: 0 0 min(74vw, 720px);
}
.songzhuang-park-page .project-flow-info {
  flex-basis: min(74vw, 540px);
}
.songzhuang-park-page .project-flow-card figcaption {
  color: rgba(240, 238, 230, 0.55);
}

/* Cursor trail — keep it teal in spark mode (only on this page) */
.songzhuang-park-page .cursor { color: var(--teal-spark); }

/* ============================================================
   EDITION v2 · 2026-04-30 · LINDA
   "Publication, not a deck" — single-column long-form layout,
   reduced hierarchy (3 levels only), full-bleed plates, prose
   body, mono labels. Used by `body.edition-page`.
   No reliance on .num / .proj-eyebrow / .fact-list / .section-*
   / .project-flow-* / .project-note-grid / status chips. Clean.
   ============================================================ */

.edition-page {
  /* Palette */
  --reed-deep: #3E3F27;
  --reed-deepest: #2C2D1B;
  --reed-green: #7C7E4E;
  --olive-grey: #7A7461;
  --olive-grey-soft: #8E8975;
  --teal-spark: #0E7E6B;
  --cream-warm: #F0EEE6;
  --cream-bright: #FAF9F5;
  --hairline: rgba(62, 63, 39, 0.18);
  --hairline-soft: rgba(62, 63, 39, 0.10);

  /* Typography */
  --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --label: 'JetBrains Mono', 'SF Mono', monospace;

  /* Surface */
  background: var(--cream-warm);
  color: var(--reed-deep);
  font-family: var(--body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* Hide all legacy chrome on edition pages */
.edition-page .nav,
.edition-page .cursor,
.edition-page .proj-hero,
.edition-page .proj-eyebrow,
.edition-page .proj-back,
.edition-page .num,
.edition-page .fact-list,
.edition-page .project-flow-section,
.edition-page .project-note-grid,
.edition-page .proj-gallery,
.edition-page .proj-nav,
.edition-page .complex-status,
.edition-page .section-dark,
.edition-page .section-cream { display: none !important; }

/* ----- Page mark · top-left running header (book chapter feel) ----- */
.edition-mark {
  position: fixed;
  top: 32px;
  left: 32px;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-grey);
  z-index: 10;
}
.edition-mark .dot { color: var(--teal-spark); margin: 0 8px; }
.edition-mark a { color: inherit; text-decoration: none; }
.edition-mark a:hover { color: var(--teal-spark); }

/* Top-right back link */
.edition-return {
  position: fixed;
  top: 32px;
  right: 32px;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-grey);
  text-decoration: none;
  z-index: 10;
  transition: color 0.2s;
}
.edition-return:hover { color: var(--teal-spark); }

@media (max-width: 720px) {
  .edition-mark, .edition-return { top: 18px; font-size: 9px; }
  .edition-mark { left: 20px; }
  .edition-return { right: 20px; }
}

/* ============================================================
   Layout · single column with measured widths
   ============================================================ */
.edition {
  display: block;
  padding: 0;
  margin: 0;
}

.edition-block {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 28px;
}
.edition-block-wide {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   Hero — title block, occupies most of viewport
   ============================================================ */
.edition-hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18vh 28px 14vh;
  max-width: 1080px;
  margin: 0 auto;
}

.edition-meta {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin: 0 0 32px;
}
.edition-meta .sep {
  color: var(--hairline);
  margin: 0 12px;
}

.edition-display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 144px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  color: var(--reed-deepest);
  margin: 0 0 18px;
}
.edition-display em {
  font-style: italic;
  color: var(--reed-deep);
}

.edition-deck {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.35;
  color: var(--reed-deep);
  max-width: 720px;
  margin: 0 0 56px;
}

.edition-meta-line {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-grey);
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  max-width: 720px;
}
.edition-meta-line span + span::before {
  content: " · ";
  color: var(--hairline);
  margin: 0 8px;
}

/* ============================================================
   Plate — full-bleed image
   ============================================================ */
.edition-plate {
  margin: clamp(60px, 9vh, 120px) 0;
  padding: 0;
  position: relative;
}
.edition-plate-frame {
  width: 100%;
  overflow: hidden;
  background: var(--reed-deepest);
  position: relative;
}
.edition-plate-frame img,
.edition-plate-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.96) contrast(1.04) saturate(0.86) sepia(0.04);
}

.edition-plate--cinema .edition-plate-frame { aspect-ratio: 16 / 9; }
.edition-plate--classic .edition-plate-frame { aspect-ratio: 3 / 2; }
.edition-plate--landscape .edition-plate-frame { aspect-ratio: 4 / 3; }
.edition-plate--square .edition-plate-frame { aspect-ratio: 1 / 1; }
.edition-plate--portrait .edition-plate-frame { aspect-ratio: 3 / 4; }

.edition-plate-caption {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--olive-grey);
  margin: 14px 28px 0 auto;
  padding-right: 0;
  text-align: right;
  max-width: 480px;
}
.edition-plate-caption .plate-no {
  font-family: var(--label);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-spark);
  margin-right: 12px;
}

/* Stagger pair · two plates side-by-side, asymmetric */
.edition-stagger {
  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: clamp(16px, 2vw, 32px);
  margin: clamp(60px, 9vh, 120px) 0;
  padding: 0 28px;
  align-items: end;
}
.edition-stagger.reverse { grid-template-columns: 3fr 5fr; }
.edition-stagger .edition-plate {
  margin: 0;
}
.edition-stagger .edition-plate-caption {
  margin: 12px 0 0;
  text-align: left;
  max-width: none;
}
@media (max-width: 820px) {
  .edition-stagger,
  .edition-stagger.reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================================
   Body — long-form prose, single column, drop cap on first paragraph
   ============================================================ */
.edition-body {
  margin: clamp(48px, 7vh, 96px) auto;
  padding: 0 28px;
  max-width: 660px;
}
.edition-body p {
  margin: 0 0 1.4em;
  font-size: 18px;
  line-height: 1.78;
  color: var(--reed-deep);
}
.edition-body p:last-child { margin-bottom: 0; }
.edition-body p strong {
  font-weight: 500;
  color: var(--reed-deepest);
}
.edition-body em {
  font-style: italic;
  font-family: var(--display);
  font-size: 1.08em;
  letter-spacing: 0;
}

/* Drop cap on the first paragraph of an edition-body */
.edition-body--lede p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 500;
  font-size: 5.4em;
  line-height: 0.86;
  float: left;
  padding-right: 14px;
  padding-top: 6px;
  color: var(--teal-spark);
}

/* Section separator · printed-book style hairline + dots */
.edition-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(48px, 7vh, 96px) auto;
  max-width: 200px;
}
.edition-divider::before,
.edition-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.edition-divider .glyph {
  font-family: var(--label);
  color: var(--olive-grey);
  letter-spacing: 0.5em;
}

/* ============================================================
   Index · printed back-matter style data list
   ============================================================ */
.edition-index {
  max-width: 720px;
  margin: clamp(80px, 12vh, 160px) auto clamp(40px, 6vh, 80px);
  padding: 56px 28px 0;
  border-top: 1px solid var(--hairline);
}
.edition-index-title {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin: 0 0 32px;
}
.edition-index-title .dot { color: var(--teal-spark); margin: 0 8px; }

.edition-index dl {
  margin: 0;
  padding: 0;
}
.edition-index dl > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.edition-index dl > div:last-child { border-bottom: none; }

.edition-index dt {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-grey);
  padding-top: 4px;
}
.edition-index dd {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--reed-deep);
  margin: 0;
}

@media (max-width: 600px) {
  .edition-index dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ============================================================
   End-plate · pagination row
   ============================================================ */
.edition-end {
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 28px 80px;
}
.edition-end-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin: 0 0 56px;
}
.edition-end-mark .glyph { color: var(--teal-spark); }
.edition-end-mark::before,
.edition-end-mark::after {
  content: "";
  width: 60px;
  height: 1px;
  background: var(--hairline);
}

.edition-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--hairline);
  padding-top: 32px;
}
.edition-pagination a {
  font-family: var(--display);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--reed-deep);
  text-decoration: none;
  transition: color 0.2s;
}
.edition-pagination a:hover { color: var(--teal-spark); }
.edition-pagination .label {
  display: block;
  font-family: var(--label);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin-bottom: 10px;
}
.edition-pagination .next { text-align: right; }

@media (max-width: 600px) {
  .edition-pagination { grid-template-columns: 1fr; gap: 28px; }
  .edition-pagination .next { text-align: left; }
}

/* ============================================================
   Inline meta lines (year, location etc) inside body
   ============================================================ */
.edition-aside {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin: 8px 0 0;
}
.edition-aside .key { color: var(--teal-spark); }

/* CJK adjustments */
.edition-page[lang^="zh"] .edition-display,
.edition-page.zh .edition-display {
  font-family: 'Songti SC', 'Noto Serif CJK SC', STSong, var(--display);
  letter-spacing: 0.005em;
  font-size: clamp(48px, 9.5vw, 120px);
}
.edition-page[lang^="zh"] .edition-deck,
.edition-page.zh .edition-deck {
  font-family: 'Songti SC', 'Noto Serif CJK SC', STSong, var(--display);
  font-style: normal;
}
.edition-page[lang^="zh"] .edition-body p,
.edition-page.zh .edition-body p {
  font-family: 'PingFang SC', 'Noto Sans CJK SC', var(--body);
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}
.edition-page[lang^="zh"] .edition-pagination a,
.edition-page.zh .edition-pagination a {
  font-family: 'Songti SC', 'Noto Serif CJK SC', STSong, var(--display);
  font-style: normal;
}

/* ============================================================
   Edition v2 — additional components (2026-05-01 extension)
   Video plate · pull-quote · citation list · secondary heading
   ============================================================ */

/* Pull quote — italic serif, indented from body, large */
.edition-pullquote {
  max-width: 720px;
  margin: clamp(64px, 9vh, 120px) auto;
  padding: 0 28px;
}
.edition-pullquote blockquote {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.32;
  color: var(--reed-deepest);
  margin: 0;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--teal-spark);
}
.edition-pullquote cite {
  display: block;
  font-family: var(--label);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin-top: 18px;
}

/* Secondary heading — used inside body to mark a sub-passage.
   Lower than display, higher than body. Editorial in feel. */
.edition-h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--reed-deepest);
  max-width: 660px;
  margin: clamp(40px, 6vh, 64px) auto 18px;
  padding: 0 28px;
}
.edition-h2 + .edition-body {
  margin-top: 0;
}

/* Eyebrow — tiny mono label that sits above an h2 */
.edition-eyebrow {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--teal-spark);
  max-width: 660px;
  margin: 0 auto;
  padding: 0 28px;
}
.edition-eyebrow + .edition-h2 { margin-top: 12px; }

/* Video plate — same frame as image plate but for <video> */
.edition-plate-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.96) contrast(1.04) saturate(0.86) sepia(0.04);
}
.edition-plate--video .edition-plate-frame {
  background: var(--reed-deepest);
}
.edition-plate--video .edition-plate-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgba(44, 45, 27, 0.22) 100%);
}

/* Triplet plate — three peers in a row (rare, used when truly 3 distinct angles) */
.edition-triplet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  margin: clamp(60px, 9vh, 120px) 0;
  padding: 0 28px;
}
.edition-triplet .edition-plate {
  margin: 0;
}
.edition-triplet .edition-plate-caption {
  margin: 12px 0 0;
  text-align: left;
  max-width: none;
  font-size: 12px;
}
@media (max-width: 820px) {
  .edition-triplet { grid-template-columns: 1fr; gap: 18px; }
}

/* Citation list — public-record references, like a bibliography */
.edition-citations {
  max-width: 720px;
  margin: clamp(64px, 9vh, 96px) auto;
  padding: 0 28px;
}
.edition-citations-title {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.edition-citations-title .dot { color: var(--teal-spark); margin: 0 8px; }
.edition-citations ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.edition-citations li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline-soft);
  align-items: baseline;
}
.edition-citations li:last-child { border-bottom: none; }
.edition-citations .cite-no {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-spark);
}
.edition-citations .cite-body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--reed-deep);
}
.edition-citations .cite-body em {
  font-family: var(--display);
  font-style: italic;
  color: var(--reed-deepest);
}
.edition-citations .cite-body a {
  color: var(--teal-spark);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 126, 107, 0.32);
  padding-bottom: 1px;
}
.edition-citations .cite-body a:hover {
  border-bottom-color: var(--teal-spark);
}
.edition-citations .cite-meta {
  display: block;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin-top: 4px;
}

/* Spec-callout — small data box inline with body, e.g. "Site / Year / Status" */
.edition-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  max-width: 720px;
  margin: clamp(40px, 6vh, 64px) auto;
  padding: 24px 28px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.edition-spec dt {
  font-family: var(--label);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-grey);
  margin-bottom: 6px;
}
.edition-spec dd {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--reed-deepest);
  margin: 0;
}

/* Edition lead / opener — for projects where image leads, not text */
.edition-opener {
  margin: 0;
}
.edition-opener .edition-plate {
  margin: 0;
}
.edition-opener .edition-plate--cinema .edition-plate-frame {
  aspect-ratio: 21 / 9;
  max-height: 100vh;
}

/* Inline reveal annotation — small note in the side margin */
.edition-margin-note {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive-grey);
  border-left: 2px solid var(--teal-spark);
  padding-left: 14px;
  margin: 24px 0;
}

/* ============================================================
   Miró edition · page-scoped plate handling for archive images
   The Miró archive scans are ~550px wide. Forcing them into
   wide cinema containers upscales them 2–3× and they go soft.
   Hold each plate to a printed-book frame: capped width, native
   ratio, no filter, generous side gutters. Reads as art-book
   plates rather than stretched gallery photos.
   ============================================================ */
.miro-edition .edition-plate {
  margin-left: auto;
  margin-right: auto;
}
.miro-edition .edition-plate .edition-plate-frame,
.miro-edition .edition-plate--cinema .edition-plate-frame,
.miro-edition .edition-plate--classic .edition-plate-frame,
.miro-edition .edition-plate--square .edition-plate-frame,
.miro-edition .edition-plate--portrait .edition-plate-frame {
  max-width: 540px;
  margin: 0 auto;
  aspect-ratio: auto !important;
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 0;
}
.miro-edition .edition-plate .edition-plate-frame img,
.miro-edition .edition-plate .edition-plate-frame video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast;
}
.miro-edition .edition-plate-frame::after {
  display: none !important;
}
.miro-edition .edition-plate-caption {
  max-width: 540px;
  margin: 14px auto 0;
  text-align: center;
}
.miro-edition .edition-plate.is-poster .edition-plate-frame {
  max-width: 460px;
}

/* ============================================================
   Edition v2 · plate sizing intelligence (global)
   Default cinematic plate caps at 1400px so 4K screens don't
   over-upscale source images. Stagger and triplet grids share
   the same outer cap. Two opt-in modifiers:
     .is-mid     — for sources ~1000–1500px wide (max 960)
     .is-archive — for sources <800px (max 600, no filter, contain)
   "Big and breathy" remains the default; modifiers only kick in
   where the actual source resolution can't carry full bleed.
   ============================================================ */

.edition-page .edition-plate-frame {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}
.edition-page .media-grid-full,
.edition-page .edition-stagger,
.edition-page .edition-triplet,
.edition-page .edition-pullquote,
.edition-page .edition-citations,
.edition-page .edition-spec,
.edition-page .edition-index,
.edition-page .edition-end {
  max-width: min(1400px, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Mid plate — moderate bound for ~1000–1500px sources */
.edition-page .edition-plate.is-mid .edition-plate-frame {
  max-width: 960px;
}
.edition-page .edition-plate.is-mid .edition-plate-caption {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Archive plate — printed-book style for <800px sources */
.edition-page .edition-plate.is-archive .edition-plate-frame {
  max-width: 600px;
  aspect-ratio: auto !important;
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 0;
}
.edition-page .edition-plate.is-archive .edition-plate-frame img,
.edition-page .edition-plate.is-archive .edition-plate-frame video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: none !important;
  image-rendering: -webkit-optimize-contrast;
}
.edition-page .edition-plate.is-archive .edition-plate-frame::after {
  display: none !important;
}
.edition-page .edition-plate.is-archive .edition-plate-caption {
  max-width: 600px;
  margin: 14px auto 0;
  text-align: center;
}

/* Stagger pair — when the inner plates are small/mid, keep them fluid */
.edition-page .edition-stagger.is-mid .edition-plate-frame {
  /* Inside a stagger, individual plates already share the parent cap */
  max-width: 100%;
}

/* ============================================================
   Edition v2 · Cover / Index page (homepage and studio)
   Adds:
     · .edition-cover-list  — printed-book index of editions
     · .edition-card-grid   — selected-works visual grid
     · .edition-bookshelf   — design-book record (studio page)
   The cover keeps the same edition-page chrome (top mark, return,
   hero, body, spec, divider, citations, end). It only adds a few
   index/grid components for organising the index of editions.
   ============================================================ */

/* List index — printed-book table of contents */
.edition-cover-list {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
}
.edition-cover-list ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.edition-cover-list li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 0.2s, padding-left 0.2s;
}
.edition-cover-list li:hover {
  padding-left: 8px;
  background: rgba(14, 126, 107, 0.04);
}
.edition-cover-list li:hover .edition-cover-no { color: var(--teal-spark); }
.edition-cover-list a {
  color: inherit;
  text-decoration: none;
  display: contents;
}
.edition-cover-no {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-grey);
  transition: color 0.2s;
  align-self: start;
  padding-top: 6px;
}
.edition-cover-title {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--reed-deepest);
  margin: 0 0 4px;
}
.edition-cover-title em {
  font-style: italic;
  color: var(--reed-deep);
}
.edition-cover-meta {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--olive-grey);
  margin: 0;
  max-width: 540px;
}
.edition-cover-status {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive-grey);
  white-space: nowrap;
  align-self: start;
  padding-top: 6px;
}
.edition-cover-status.is-built { color: var(--teal-spark); }
@media (max-width: 720px) {
  .edition-cover-list li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .edition-cover-no, .edition-cover-status { padding-top: 0; }
}

/* Card grid — visual selected-works showcase
   Hover behaviour: image zoom + saturate + teal bottom-line reveal +
   card lift. Builds on the original .complex-card interaction style
   but uses the edition palette and stricter type. */
.edition-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 1400px;
  margin: clamp(48px, 7vh, 96px) auto;
  padding: 0 28px;
}
.edition-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
  position: relative;
  transition: transform 0.4s ease;
}
.edition-card:hover { transform: translateY(-4px); }

.edition-card-frame {
  aspect-ratio: 4 / 5; /* BIG.dk-style — image dominant, near-portrait */
  overflow: hidden;
  background: var(--reed-deepest);
  border: 1px solid var(--media-bezel);
  margin-bottom: 18px;
  position: relative;
}
.edition-card-frame::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--teal-spark);
  transition: width 0.55s cubic-bezier(.22,1,.36,1);
  z-index: 4;
  pointer-events: none;
}
.edition-card:hover .edition-card-frame::after { width: 100%; }
.edition-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.04) saturate(0.84) sepia(0.04);
  transition: transform 0.9s cubic-bezier(.22,1,.36,1),
              filter 0.55s ease;
}
.edition-card:hover .edition-card-frame img {
  transform: scale(1.04);
  filter: brightness(0.86) contrast(1.06) saturate(1.0);
}

/* BIG.dk-style hover overlay — italic trait + CTA slide up from bottom
   over a teal-tinted dark gradient. Default opacity 0; on touch screens
   the overlay is always-visible so info isn't lost without hover. */
.edition-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(
    to top,
    rgba(14,126,107,0.72) 0%,
    rgba(44,45,27,0.55) 38%,
    rgba(44,45,27,0) 75%
  );
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.edition-card:hover .edition-card-overlay { opacity: 1; }

.edition-card-overlay-trait {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.35;
  color: var(--cream-bright);
  margin: 0 0 16px;
  letter-spacing: 0.005em;
  transform: translateY(14px);
  transition: transform 0.65s cubic-bezier(.22,1,.36,1);
  text-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.edition-card:hover .edition-card-overlay-trait { transform: translateY(0); }
.edition-card-overlay-trait em {
  font-style: italic;
  border-bottom: 1px solid rgba(240,238,230,0.35);
  padding-bottom: 1px;
}

.edition-card-overlay-cta {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-warm);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(240,238,230,0.42);
  transform: translateY(14px);
  transition: transform 0.65s cubic-bezier(.22,1,.36,1) 0.06s;
}
.edition-card:hover .edition-card-overlay-cta { transform: translateY(0); }
.edition-card-overlay-cta .arr {
  display: inline-block;
  transition: transform 0.4s ease;
  font-size: 14px;
  letter-spacing: 0;
}
.edition-card:hover .edition-card-overlay-cta .arr { transform: translateX(6px); }

/* Touch / no-hover devices — overlay always visible at reduced opacity so
   the trait line is never lost. */
@media (hover: none) {
  .edition-card-overlay { opacity: 1; }
  .edition-card-overlay-trait,
  .edition-card-overlay-cta { transform: translateY(0); }
}

.edition-card-no {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-spark);
  margin: 0 0 8px;
  transition: color 0.3s ease;
}
.edition-card:hover .edition-card-no { color: var(--reed-deep); }

.edition-card-title {
  font-family: var(--display);
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.18;
  color: var(--reed-deepest);
  margin: 0 0 6px;
  transition: color 0.3s ease;
  letter-spacing: -0.005em;
}
.edition-card:hover .edition-card-title { color: var(--teal-spark); }

.edition-card-meta {
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--olive-grey);
  margin: 0;
}

/* ─── Card-section grouping (BIG.dk-inspired index)
   Each movement (Urban / Cultural / Heritage / Collection) gets a labelled
   header with running count, then a card-grid below. Replaces the older
   cover-list + card-grid duplication on home. */
.edition-card-section {
  max-width: 1400px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding: 0 28px;
}
.edition-card-section + .edition-card-section {
  margin-top: clamp(64px, 8vh, 104px);
}
.edition-card-section-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: clamp(24px, 3.2vh, 40px);
  border-bottom: 1px solid rgba(122,116,97,0.22);
}
.edition-card-section-no {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--teal-spark);
  letter-spacing: 0.04em;
  line-height: 1;
}
.edition-card-section-title {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  color: var(--reed-deepest);
  margin: 0;
  flex: 1;
  letter-spacing: -0.005em;
}
.edition-card-section-count {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-grey);
  white-space: nowrap;
}
.edition-card-section .edition-card-grid {
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 600px) {
  .edition-card-section-head { flex-wrap: wrap; gap: 10px; }
  .edition-card-section-no { font-size: 18px; }
  .edition-card-section-count { width: 100%; padding-top: 4px; }
}

/* BIG.dk-style status pill — sits over the image, always visible,
   becomes part of the visual hierarchy alongside the trait line. */
.edition-card-frame { position: relative; }
.edition-card-status {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5; /* above hover overlay */
  font-family: var(--label);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-warm);
  background: rgba(44,45,27,0.74);
  padding: 6px 10px 5px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.4s ease, color 0.4s ease;
  pointer-events: none;
}
.edition-card-status.is-built { background: rgba(14,126,107,0.88); }
.edition-card-status.is-concept { background: rgba(124,126,78,0.82); }
.edition-card-status.is-collection { background: rgba(62,63,39,0.82); }
.edition-card:hover .edition-card-status { background: rgba(14,126,107,0.96); }

/* Bookshelf — studio archive page */
.edition-bookshelf {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
}
.edition-bookshelf-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline-soft);
}
.edition-bookshelf-item:first-child { border-top: 1px solid var(--hairline); }
.edition-bookshelf-no {
  font-family: var(--label);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-grey);
  align-self: start;
  padding-top: 6px;
}
.edition-bookshelf-body {
  min-width: 0;
}
.edition-bookshelf-title {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.25;
  color: var(--reed-deepest);
  margin: 0 0 4px;
}
.edition-bookshelf-firm {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  color: var(--reed-deep);
  margin: 0 0 6px;
}
.edition-bookshelf-meta {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--olive-grey);
  margin: 0;
}
.edition-bookshelf-action {
  align-self: start;
  padding-top: 6px;
}
.edition-bookshelf-action a {
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal-spark);
  text-decoration: none;
  border: 1px solid rgba(14, 126, 107, 0.32);
  padding: 9px 14px;
  display: inline-block;
  transition: background 0.2s, color 0.2s;
}
.edition-bookshelf-action a:hover {
  background: var(--teal-spark);
  color: var(--cream-warm);
}
@media (max-width: 720px) {
  .edition-bookshelf-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .edition-bookshelf-no, .edition-bookshelf-action { padding-top: 0; }
}

/* Cover-page hero portrait — uses .is-mid sizing where source is 1448x1086 */
.edition-cover-portrait {
  max-width: 720px;
  margin: clamp(48px, 7vh, 96px) auto;
  padding: 0 28px;
}
.edition-cover-portrait .edition-plate-frame {
  background: var(--cream-bright);
  border: 1px solid var(--hairline);
}


/* ============================================================
   2026-05-02  Homepage flow redesign (BIG.dk-inspired)
   - Sticky nav with active-movement highlight
   - Compact hero (60vh)
   - Single-column full-width project flow with alternating caption
   - Hover counter "01 / 05 of 城市综合体"
   - Scroll-reveal on cards
   ============================================================ */

/* === Sticky top nav (homepage only) === */
.edition-flow-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  padding: 14px 28px;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--olive-grey);
  background: rgba(240,238,230,0);
  backdrop-filter: blur(0);
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, backdrop-filter 0.4s ease,
              border-color 0.4s ease, color 0.4s ease;
  pointer-events: none;
}
.edition-flow-nav.is-stuck {
  background: rgba(240,238,230,0.92);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(122,116,97,0.18);
}
.edition-flow-nav a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 4px 2px;
  transition: color 0.3s ease;
}
.edition-flow-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--teal-spark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}
.edition-flow-nav a:hover { color: var(--reed-deep); }
.edition-flow-nav a:hover::after,
.edition-flow-nav a.is-active::after { transform: scaleX(1); }
.edition-flow-nav a.is-active { color: var(--teal-spark); }

@media (max-width: 720px) {
  .edition-flow-nav {
    gap: 14px;
    padding: 10px 16px;
    font-size: 9px;
    letter-spacing: 0.22em;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
  }
  .edition-flow-nav::-webkit-scrollbar { display: none; }
}

/* Hide the legacy edition-mark + edition-return on flow homepages
   when the new sticky nav is present */
.edition-page.has-flow-nav .edition-mark,
.edition-page.has-flow-nav .edition-return { display: none; }

/* === Compact hero (60vh) === */
.edition-hero.is-compact {
  min-height: 64vh;
  padding-top: 14vh;
  padding-bottom: 8vh;
}
@media (max-width: 720px) {
  .edition-hero.is-compact { min-height: auto; padding-top: 16vh; padding-bottom: 6vh; }
}

/* === Card grid — flow variant (single column full-width) === */
.edition-card-grid--flow {
  display: block;
  grid-template-columns: none;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.edition-card-grid--flow .edition-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vh, 32px);
  margin: clamp(56px, 8vh, 96px) 0;
  text-decoration: none;
  color: inherit;
}
.edition-card-grid--flow .edition-card:first-child { margin-top: 0; }
.edition-card-grid--flow .edition-card:last-child { margin-bottom: 0; }

/* Frame becomes 16:9 cinema, full-bleed for flow row */
.edition-card-grid--flow .edition-card-frame {
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
  border: 1px solid var(--hairline);
  position: relative;
}

/* Caption block under image — alternating left/right via :nth-child */
.edition-card-grid--flow .edition-card-meta-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
  max-width: 460px;
}
.edition-card-grid--flow .edition-card:nth-child(odd) .edition-card-meta-block {
  margin-left: 0;
  margin-right: auto;
}
.edition-card-grid--flow .edition-card:nth-child(even) .edition-card-meta-block {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.edition-card-grid--flow .edition-card:nth-child(even) .edition-card-overlay-cta {
  align-self: flex-end;
}

@media (max-width: 720px) {
  .edition-card-grid--flow .edition-card-meta-block,
  .edition-card-grid--flow .edition-card:nth-child(even) .edition-card-meta-block {
    margin: 0;
    text-align: left;
    max-width: none;
  }
}

/* Title in flow card — bigger, more presence */
.edition-card-grid--flow .edition-card-title {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 4px 0 8px;
}
.edition-card-grid--flow .edition-card-no {
  font-size: 11px;
  letter-spacing: 0.32em;
}
.edition-card-grid--flow .edition-card-meta {
  font-size: 14px;
  line-height: 1.55;
  color: var(--olive-grey);
}

/* === Hover counter "01 / 05 of 城市综合体" — top-right of frame === */
.edition-card-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  font-family: var(--label);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-bright);
  background: rgba(44,45,27,0.72);
  padding: 6px 10px 5px;
  border: 1px solid rgba(240,238,230,0.18);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.edition-card-grid--flow .edition-card:hover .edition-card-counter {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .edition-card-counter { opacity: 0.85; transform: translateY(0); }
}

/* === Section header — bigger movement number for flow homepage === */
.edition-card-grid--flow + .edition-card-section-head,
.edition-card-section .edition-card-section-head.is-flow {
  border-bottom-color: rgba(122,116,97,0.16);
  padding-bottom: 18px;
  margin-bottom: clamp(40px, 5vh, 64px);
}
.edition-card-section-head.is-flow .edition-card-section-no {
  font-size: clamp(36px, 4.4vw, 56px);
  font-style: italic;
  font-weight: 400;
  font-feature-settings: "lnum";
  line-height: 0.9;
  color: var(--reed-deepest);
  opacity: 0.9;
  letter-spacing: -0.02em;
}
.edition-card-section-head.is-flow .edition-card-section-title {
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.008em;
}

/* === Scroll-reveal: split animation (progressive enhancement)
   Image fades in first; caption (meta-block) slides up from below
   with a small delay. Default = visible (no-JS / IO-failure fallback). === */
.flow-reveal { opacity: 1; transform: none; }

body.js-flow .flow-reveal .edition-card-frame {
  transition: opacity 0.9s cubic-bezier(.22,1,.36,1);
}
body.js-flow .flow-reveal .edition-card-meta-block {
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1) 0.18s,
              transform 0.7s cubic-bezier(.22,1,.36,1) 0.18s;
}

body.js-flow .flow-reveal:not(.in) .edition-card-frame {
  opacity: 0;
}
body.js-flow .flow-reveal:not(.in) .edition-card-meta-block {
  opacity: 0;
  transform: translateY(22px);
}
body.js-flow .flow-reveal.in .edition-card-frame { opacity: 1; }
body.js-flow .flow-reveal.in .edition-card-meta-block {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: skip reveal animation (always show cards). IntersectionObserver
   timing on mobile fast-scroll can leave cards stuck at opacity 0; safer
   to just show them. The desktop fade-in is a nice-to-have, not a feature. */
@media (max-width: 720px) {
  body.js-flow .flow-reveal:not(.in) .edition-card-frame { opacity: 1; }
  body.js-flow .flow-reveal:not(.in) .edition-card-meta-block {
    opacity: 1;
    transform: none;
  }
}

/* Reduced-motion users: skip the fade animation entirely */
@media (prefers-reduced-motion: reduce) {
  body.js-flow .flow-reveal:not(.in) .edition-card-frame { opacity: 1; }
  body.js-flow .flow-reveal:not(.in) .edition-card-meta-block {
    opacity: 1;
    transform: none;
  }
}

/* === Miro project page: print-as-hero pre-block === */
.edition-collection-hero {
  margin: 0;
  padding: 18vh 28px 6vh;
  display: flex;
  justify-content: center;
}
.edition-collection-hero .edition-collection-hero-frame {
  max-width: 720px;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--reed-deepest);
  border: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
}
.edition-collection-hero .edition-collection-hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--cream-bright);
}
.edition-collection-hero .edition-collection-hero-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--label);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--reed-deepest);
  background: rgba(240,238,230,0.92);
  padding: 6px 10px 5px;
  border: 1px solid var(--hairline);
}

/* === Flow-card hover: image lifts brightness + saturation (vignette lightens),
   keeps the existing 1.04 zoom from the base .edition-card rule === */
.edition-card-grid--flow .edition-card:hover .edition-card-frame img {
  transform: scale(1.04);
  filter: brightness(1.04) contrast(1.04) saturate(1.06) sepia(0);
}