/* East Change V10 editorial role layer.
   Loaded after detail and motion styles. Homepage motion keeps its existing
   geometry; this layer owns the calm publication surfaces around it. */

:root {
  /* Keep the homepage's existing base tokens intact. Inner pages opt into
     the editorial values on their body below. */
  --paper: #fff;
  --surface: #ffffff;
  --stage: #ecece8;
  --ink: #111;
  --body-ink: #454642;
  --muted: #5a5a5a;
  --line: #d7d7d7;
  --inverse-field: #242622;
  --inverse-ink: #f5f5f1;
  --inverse-muted: #c6c8bf;
  --blue: #22306b;
  --yellow: #ffee6f;
  --editorial-sans: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --editorial-serif: "Iowan Old Style", "Baskerville", Georgia, "Songti SC", serif;
  --editorial-pad: clamp(24px, 3.3vw, 56px);
  --editorial-ease: cubic-bezier(.22, 1, .36, 1);
}

body:not(.page-index) {
  --paper: #f7f7f4;
  --surface: #ffffff;
  --stage: #ecece8;
  --ink: #20211f;
  --body-ink: #454642;
  --muted: #666862;
  --line: #d7d8d2;
  --inverse-field: #242622;
  --inverse-ink: #f5f5f1;
  --inverse-muted: #c6c8bf;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--editorial-sans);
  font-size: 16px;
  line-height: 1.55;
}

body:not(.page-index) main {
  min-height: 0;
  background: var(--paper);
}

body:not(.page-index) h1,
body:not(.page-index) h2,
body:not(.page-index) h3 {
  color: var(--ink);
  font-family: var(--editorial-sans);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.08;
}

body:not(.page-index) [data-zh] {
  letter-spacing: 0;
}

body:not(.page-index) .prose,
body:not(.page-index) .essay-section > .prose,
body:not(.page-index) .artist-film-copy > p,
body:not(.page-index) .participation-section .form-layout > aside,
body:not(.page-index) .reader-text-pages {
  font-family: var(--editorial-serif);
  font-weight: 400;
  color: var(--body-ink);
}

body:not(.page-index) .prose [data-zh],
body:not(.page-index) .artist-film-copy > p [data-zh],
body:not(.page-index) .participation-section .form-layout > aside [data-zh],
body:not(.page-index) .reader-text-pages [data-zh] {
  font-family: var(--editorial-sans);
}

body:not(.page-index) p {
  text-wrap: pretty;
}

body:not(.page-index) .text-link {
  min-height: 44px;
  color: var(--ink);
  font-family: var(--editorial-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1.3;
  text-transform: none;
}

body:not(.page-index) .project-kind,
body:not(.page-index) .caption,
body:not(.page-index) .library-page-count,
body:not(.page-index) .editorial-work-number,
body:not(.page-index) .work-facts dt {
  color: var(--muted);
  font-family: var(--editorial-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.5;
  text-transform: none;
}

/* Inner navigation keeps one order everywhere: three hubs, one utility. */
body .site-header {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  padding: 24px 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--editorial-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .015em;
  /* Keep the header transparent while letting the foreground invert over
     both paper and image surfaces as the visitor scrolls. */
  color: #fff;
  mix-blend-mode: difference;
  text-transform: none;
}

body .site-header > * {
  white-space: nowrap;
}

body .site-header .wordmark,
body .site-header .header-note,
body .site-header #site-nav,
body .site-header .header-actions {
  padding-left: var(--editorial-pad);
  padding-right: var(--editorial-pad);
}

body .site-header .wordmark {
  grid-column: 1;
  padding-right: 0;
  font-weight: 600;
  letter-spacing: .055em;
}

body .site-header .header-note {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

body .site-header #site-nav {
  grid-column: 3 / 5;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(18px, 2.4vw, 38px);
  padding-right: 0;
}

body .site-header #site-nav a {
  min-height: 24px;
  white-space: nowrap;
}

body .site-header #site-nav a:after {
  bottom: -5px;
  background: currentColor;
}

body .site-header .header-actions {
  grid-column: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-left: 0;
}

body .site-header .header-contact {
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

body .site-header .text-link,
body .site-header .header-note,
body .site-header .language {
  color: inherit;
}

body .site-header .language {
  min-height: 24px;
  padding: 2px 0;
  color: inherit;
  font-size: 12px;
}

.page-who-am-i .site-header {
  color: var(--yellow);
  mix-blend-mode: normal;
}

.page-who-am-i .site-header .header-note,
.page-who-am-i .site-header .language {
  color: var(--yellow);
}

/* Quiet page opening. The five-column scaffold remains, while the actual
   reading distance comes from the shared padding and restrained lead. */
body:not(.page-index) .page-intro {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 0;
  padding: 164px 0 82px;
  background: var(--paper);
}

body:not(.page-index) .page-intro h1 {
  grid-column: 1 / 4;
  padding: 0 var(--editorial-pad);
  font-size: clamp(52px, 6vw, 88px);
  line-height: 1.02;
}

body:not(.page-index) .page-intro .lead {
  grid-column: 4 / 6;
  align-self: end;
  max-width: 38ch;
  padding: 0 var(--editorial-pad);
  color: var(--body-ink);
  font-family: var(--editorial-serif);
  font-size: 23px;
  line-height: 1.45;
}

body:not(.page-index) .works-opening .lead [data-zh],
body:not(.page-index) .page-intro .lead [data-zh],
body:not(.page-index) .library-intro [data-zh],
body:not(.page-index) .artist-film-heading .lead [data-zh],
body:not(.page-index) .artist-contact .lead [data-zh],
body:not(.page-index) .participation-section > .lead [data-zh] {
  font-family: var(--editorial-sans);
}

/* Works hub: one figure owns its caption and the copy stays beside it. */
.page-works .works-editorial {
  background: var(--paper);
}

.page-works .works-opening {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  padding: 140px 0 56px;
}

.page-works .works-opening h1 {
  grid-column: 1 / 4;
  padding: 0 var(--editorial-pad);
  font-size: clamp(52px, 6vw, 88px);
  line-height: 1.02;
}

.page-works .works-opening .lead {
  grid-column: 4 / 6;
  max-width: 34ch;
  padding: 0 var(--editorial-pad);
  color: var(--body-ink);
  font-family: var(--editorial-serif);
  font-size: 19px;
  line-height: 1.55;
}

.page-works .editorial-work {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0;
  padding: 76px 0 96px;
  border-top: 1px solid var(--line);
}

.page-works .editorial-work-media {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: center;
  padding: 0 var(--editorial-pad);
}

.page-works .editorial-work-image {
  width: 100%;
  height: auto;
  max-height: min(64vh, 620px);
  object-fit: contain;
  object-position: center;
}

.page-works .editorial-work-copy {
  grid-column: 4 / 6;
  grid-row: 1;
  align-self: center;
  padding: 0 var(--editorial-pad) 0 12px;
}

.page-works .editorial-work.placement-even .editorial-work-media {
  grid-column: 3 / 6;
}

.page-works .editorial-work.placement-even .editorial-work-copy {
  grid-column: 1 / 3;
  padding-left: var(--editorial-pad);
  padding-right: 12px;
}

.page-works .editorial-work-number {
  margin-bottom: 18px;
}

.page-works .editorial-work-title {
  margin-top: 18px;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
}

.page-works .editorial-work-description {
  max-width: 38ch;
  margin-top: 24px;
  color: var(--body-ink);
  font-size: 17px;
  line-height: 1.6;
}

.page-works .editorial-work-description > p {
  margin: 0;
}

.page-works .editorial-work-action {
  margin-top: 24px;
}

/* Who retains its exact project colours as a complete field. */
.page-works .who-poster,
.page-who-am-i .who-poster {
  overflow: hidden;
  background: #22306b;
  color: #ffee6f;
}

.page-works .who-poster h2,
.page-works .who-poster p,
.page-who-am-i .who-poster h1,
.page-who-am-i .who-poster h2,
.page-who-am-i .who-poster p {
  color: #ffee6f;
}

.page-works .who-project-action,
.page-who-am-i .who-project-action {
  background: #ffee6f;
  color: #22306b;
}

/* Detail pages share one opening rhythm but retain each image's natural
   proportions. Tian Lai is the full-width exception. */
body:not(.page-index) .work-opening {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 0;
  align-items: start;
  padding: 116px 0 92px;
}

body:not(.page-index) .work-opening .page-intro {
  grid-column: 1 / 3;
  grid-row: 1;
  display: block;
  min-height: 0;
  padding: 54px var(--editorial-pad) 0;
}

body:not(.page-index) .work-opening .page-intro h1 {
  padding: 0;
  font-size: clamp(36px, 4.4vw, 72px);
  line-height: 1.05;
}

body:not(.page-index) .work-opening .page-intro .lead {
  display: block;
  margin-top: 28px;
  padding: 0;
  font-size: 20px;
}

body:not(.page-index) .work-opening .work-hero {
  grid-column: 3 / 6;
  grid-row: 1;
  padding: 0 var(--editorial-pad) 0 0;
}

body:not(.page-index) .work-hero img {
  width: 100%;
  max-height: min(70vh, 700px);
  object-fit: contain;
}

body:not(.page-index) .work-hero figcaption,
body:not(.page-index) .caption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

body.page-tian-lai .work-opening {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-top: 116px;
}

body.page-tian-lai .work-opening .page-intro {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  inset: auto;
  width: auto;
  padding-top: 20px;
  padding-bottom: 40px;
  color: var(--ink);
  mix-blend-mode: normal;
}

body.page-tian-lai .work-opening .work-hero {
  grid-column: 1 / 6;
  grid-row: 2;
  padding: 0;
}

body.page-tian-lai .work-opening .work-hero img {
  width: 100%;
  max-height: none;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  background: var(--surface);
}

body.page-tian-lai .tian-detail-description {
  grid-column: 3 / 6;
  grid-row: 1;
  align-self: center;
  max-width: 60ch;
  margin: 20px var(--editorial-pad) 40px 0;
  padding: 0;
  color: var(--body-ink);
  font-size: 17px;
  line-height: 1.6;
}

body:not(.page-index) .work-facts {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

body:not(.page-index) .work-facts > div {
  padding: 24px var(--editorial-pad);
}

body:not(.page-index) .work-chapters {
  margin: 0 var(--editorial-pad);
  gap: 16px 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

body:not(.page-index) .essay-section {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}

body:not(.page-index) .essay-section > h2 {
  grid-column: 1 / 4;
  padding: 0 var(--editorial-pad);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
}

body:not(.page-index) .essay-section > .prose {
  grid-column: 4 / 6;
  max-width: 64ch;
  padding: 0 var(--editorial-pad) 0 12px;
  font-size: 18px;
  line-height: 1.75;
}

/* Art & Life is one essay: person, practice, films, contact. */
.page-artist .profile-opening {
  min-height: 0;
  padding-top: 120px;
  padding-bottom: 72px;
}

.page-artist .profile-opening > .artist-portrait {
  height: min(76vh, 760px);
}

.page-artist .profile-opening > .page-intro {
  display: block;
  padding: 44px var(--editorial-pad) 72px;
}

.page-artist .profile-opening > .page-intro h1 {
  padding: 0;
}

.page-artist .profile-opening > .page-intro .lead {
  display: block;
  max-width: 440px;
  margin-top: 56px;
  padding: 0;
}

.page-artist .artist-opening {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.page-artist .artist-opening > .prose {
  grid-column: 3 / 5;
  max-width: 60ch;
  padding: 0 var(--editorial-pad);
  font-size: 18px;
  line-height: 1.75;
}

.page-artist .artist-films {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 96px 0 112px;
  border-top: 1px solid var(--line);
}

.page-artist .artist-film-heading {
  grid-column: 1 / 3;
  padding: 0 var(--editorial-pad);
}

.page-artist .artist-film-heading h2 {
  font-size: clamp(40px, 4.5vw, 64px);
}

.page-artist .artist-film-heading .lead {
  max-width: 28ch;
  margin-top: 24px;
  color: var(--body-ink);
  font-family: var(--editorial-serif);
  font-size: 21px;
  line-height: 1.55;
}

.page-artist .artist-film-copy {
  grid-column: 3 / 6;
  padding: 0 var(--editorial-pad) 0 12px;
}

.page-artist .artist-film-copy > p:first-child {
  max-width: 60ch;
  margin-bottom: 36px;
  font-size: 18px;
  line-height: 1.75;
}

.page-artist .film-figure {
  width: min(100%, 1100px);
  margin: 0;
}

.page-artist .film-figure video {
  width: 100%;
  background: var(--inverse-field);
}

.page-artist .film-figure figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.page-artist .film-note {
  max-width: 56ch;
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.page-artist .yicheng-film {
  grid-column: 3 / 6;
  margin-top: 72px;
  padding: 72px 0 0;
  border-top: 1px solid var(--line);
}

.page-artist .yicheng-film h3 {
  margin: 16px 0 28px;
  font-size: clamp(28px, 3vw, 42px);
}

.page-artist .artist-contact {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 96px 0 112px;
  border-top: 1px solid var(--line);
}

.page-artist .artist-contact h2,
.page-artist .artist-contact .lead {
  grid-column: 1 / 3;
  padding: 0 var(--editorial-pad);
}

.page-artist .artist-contact h2 {
  font-size: clamp(36px, 4vw, 56px);
}

.page-artist .artist-contact .lead {
  max-width: 28ch;
  margin-top: 24px;
  color: var(--body-ink);
  font-family: var(--editorial-serif);
  font-size: 20px;
  line-height: 1.55;
}

.page-artist .artist-contact .contact-email,
.page-artist .artist-contact > p:last-child {
  grid-column: 3 / 6;
  padding: 0 var(--editorial-pad) 0 12px;
}

.page-artist .artist-contact .contact-email {
  align-self: start;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.page-artist .artist-contact > p:last-child {
  margin-top: 20px;
  color: var(--muted);
  font-size: 14px;
}

/* Catalogue index: publication rows with fully visible covers. */
.page-catalogues .library-index {
  display: block;
  min-height: 0;
  padding: 116px var(--editorial-pad) 88px;
  background: var(--paper);
  color: var(--ink);
}

.page-catalogues .library-opening {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  padding: 0 0 36px;
  border-bottom: 1px solid var(--line);
}

.page-catalogues .library-title {
  grid-column: 1 / 4;
  padding: 0;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.02;
}

.page-catalogues .library-intro {
  grid-column: 4 / 6;
  max-width: 34ch;
  padding: 8px 0 0 var(--editorial-pad);
  color: var(--body-ink);
  font-family: var(--editorial-serif);
  font-size: 18px;
  line-height: 1.5;
}

.page-catalogues .library-books {
  display: block;
}

.page-catalogues .library-book {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0;
  align-items: center;
  min-height: 0;
  padding: 56px 0 64px;
  border-bottom: 1px solid var(--line);
}

.page-catalogues .library-index-number {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.page-catalogues .library-cover {
  padding: 0;
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  width: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.page-catalogues .library-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 480px);
  object-fit: contain;
}

.page-catalogues .library-caption {
  grid-column: 4 / 6;
  grid-row: 1;
  align-self: center;
  padding: 0 0 4px var(--editorial-pad);
  background: transparent;
  color: inherit;
}

/* Keep inherited V7 publication-card rules from reintroducing a white panel
   if an older candidate names this copy block differently. */
.page-catalogues .library-book-copy {
  background: transparent;
  color: inherit;
}

.page-catalogues .library-caption h2 {
  max-width: 12ch;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
}

.page-catalogues .library-caption h2 a {
  color: inherit;
}

.page-catalogues .library-page-count {
  margin-top: 14px;
}

.page-catalogues .library-read {
  margin-top: 24px;
}

/* Readers remain functional while the chrome steps back. */
.reading-page {
  --paper: #f7f7f4;
  --stage: #ecece8;
  --line: #d7d8d2;
  --muted: #666862;
  background: var(--paper);
}

.reading-page .site-header {
  z-index: 50;
}

.reading-page main {
  padding: 100px var(--editorial-pad) 0;
}

.reading-page .reader-heading {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  align-items: center;
  gap: 24px;
  width: auto;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.reading-page .reader-heading > a { grid-column: 1; grid-row: 1; color: var(--muted); }
.reading-page .reader-heading h1 {
  grid-column: 2; grid-row: 1; margin: 0;
  font-size: clamp(28px, 2.5vw, 36px);
  letter-spacing: -.02em; line-height: 1.2;
}
.reading-page .reader-heading > p {
  grid-column: 3; grid-row: 1; margin: 0;
  color: var(--muted); font-size: 12px;
}
.reading-page .book-reader {
  max-width: 1240px; margin: 16px auto 0;
  padding: 8px; background: var(--stage);
}

.reading-page .reader-toolbar {
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.reading-page .reader-layout {
  padding-top: 12px;
}

.reading-page .reader-stage,
.reading-page .reader-sidebar {
  height: max(360px, calc(100dvh - 285px));
  min-height: 360px;
}

.reading-page .reader-stage {
  background: var(--stage);
}

.reading-page .reader-bottom {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.reading-page .reader-help,
.reading-page .reader-text-note {
  color: var(--muted);
  font-size: 13px;
}

.reading-page .reader-download {
  width: min(1240px, 100%);
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 13px;
}

.reading-page .reader-text {
  width: min(1240px, 100%);
  margin: 22px auto 0;
  border-top: 1px solid var(--line);
}

.reading-page .reader-text-pages {
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.75;
}

.reading-page:fullscreen .reader-stage,
.reading-page .reader-overlay .reader-stage,
.reading-page .book-reader:fullscreen .reader-stage {
  height: 100%;
  min-height: 0;
}

/* Participation keeps the original form IDs, field names and email-draft
   behavior while giving the section a calmer reading width. */
.page-who-am-i .participation-section {
  padding: 96px 0 112px;
  border-top: 1px solid var(--line);
}

.page-who-am-i .participation-section > h2,
.page-who-am-i .participation-section > .lead {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--editorial-pad);
}

.page-who-am-i .participation-section > h2 {
  font-size: clamp(36px, 4vw, 56px);
}

.page-who-am-i .participation-section > .lead {
  margin-top: 20px;
  color: var(--body-ink);
  font-family: var(--editorial-serif);
  font-size: 20px;
  line-height: 1.55;
}

.page-who-am-i .participation-section .form-layout {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1240px;
  margin: 48px auto 0;
  padding: 48px var(--editorial-pad) 0;
  border-top: 1px solid var(--line);
}

.page-who-am-i .participation-section .form-layout > aside {
  grid-column: 1 / 3;
  padding: 0 var(--editorial-pad) 0 0;
  font-size: 17px;
  line-height: 1.75;
}

.page-who-am-i .participation-section .form-layout > form {
  grid-column: 3 / 6;
  padding: 0 0 0 var(--editorial-pad);
}

/* Legacy URLs remain useful when JavaScript is unavailable. */
.alias-main {
  min-height: 60vh;
  padding: 176px var(--editorial-pad) 112px;
}

.alias-main h1 {
  max-width: 12ch;
  margin-top: 20px;
  font-size: clamp(48px, 6vw, 88px);
}

.alias-label,
.alias-destination {
  color: var(--muted);
  font-size: 13px;
}

.alias-destination {
  margin-top: 24px;
}

.alias-link {
  margin-top: 20px;
}

/* Inner footer keeps the five-band relationship but lets content determine
   the height. The homepage continues to use its existing footer scale. */
body:not(.page-index) .site-footer {
  grid-template-rows: minmax(140px, auto) minmax(150px, auto) 64px;
  min-height: 380px;
  margin-top: 96px;
  background: var(--inverse-field);
  color: var(--inverse-ink);
}

body:not(.page-index) .site-footer .grid-lines {
  color: var(--inverse-ink);
}

body:not(.page-index) .site-footer .footer-copy p:first-child {
  color: var(--inverse-ink);
  font-family: var(--editorial-serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0;
}

body:not(.page-index) .site-footer .footer-nav,
body:not(.page-index) .site-footer .footer-cta {
  background: var(--surface);
  color: var(--ink);
}

body:not(.page-index) .site-footer .footer-cta {
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 400;
  letter-spacing: -.025em;
  text-transform: none;
}

body:not(.page-index) .site-footer .footer-brand {
  color: var(--inverse-ink);
  font-weight: 500;
}

body:not(.page-index) .site-footer .footer-copyright,
body:not(.page-index) .site-footer .footer-privacy {
  color: var(--inverse-muted);
}

@media (max-width: 1000px) and (min-width: 701px) {
  body .site-header #site-nav {
    gap: 14px;
  }

  body .site-header .header-contact {
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  :root {
    --editorial-pad: 20px;
  }

  body .site-header {
    grid-template-columns: 1fr auto auto;
    padding: 20px;
    font-size: 11px;
  }

  body .site-header .wordmark {
    grid-column: 1;
    padding: 0;
  }

  body .site-header .header-note {
    display: none;
  }

  body .site-header .header-actions {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    padding: 0 8px 0 0;
  }

  body .site-header .header-actions .header-contact {
    display: none;
  }

  body .site-header .language {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 4px;
  }

  body .site-header .menu-toggle {
    grid-column: 3;
    display: flex !important;
    width: 36px;
    height: 28px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    color: inherit;
  }

  body .site-header .menu-toggle span {
    display: block;
    width: 28px;
    height: 1px;
    background: currentColor;
  }

  body .site-header #site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    visibility: hidden;
    padding: 112px 20px 48px;
    background: var(--paper);
    color: var(--ink);
    font-size: clamp(30px, 9vw, 46px);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s var(--editorial-ease), transform .25s var(--editorial-ease), visibility .25s;
  }

  body .site-header.menu-open {
    mix-blend-mode: normal;
    background: var(--paper);
    color: var(--ink);
  }

  body .site-header.menu-open #site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  body .site-header #site-nav a {
    min-height: 42px;
  }

  body .site-header #site-nav .mobile-contact {
    display: inline-flex !important;
    margin-top: 18px;
    font-size: 16px;
  }

  body:not(.page-index) .page-intro {
    display: block;
    padding: 108px 20px 64px;
  }

  body:not(.page-index) .page-intro h1 {
    padding: 0;
    font-size: clamp(36px, 10.5vw, 48px);
    line-height: 1.18;
  }

  body:not(.page-index) .page-intro .lead {
    max-width: 32ch;
    margin-top: 28px;
    padding: 0;
    font-size: 20px;
    line-height: 1.65;
  }

  .page-works .editorial-work {
    display: block;
    padding: 64px 20px;
  }

  .page-works .works-opening {
    display: block;
    padding: 108px 20px 40px;
  }

  .page-works .works-opening h1,
  .page-works .works-opening .lead {
    padding: 0;
  }

  .page-works .works-opening h1 {
    font-size: clamp(42px, 11vw, 56px);
  }

  .page-works .works-opening .lead {
    max-width: 32em;
    margin-top: 24px;
    font-size: 19px;
    line-height: 1.7;
  }

  .page-works .editorial-work-media,
  .page-works .editorial-work.placement-even .editorial-work-media {
    display: block;
    padding: 0;
  }

  .page-works .editorial-work-image {
    width: 100%;
    max-height: none;
  }

  .page-works .editorial-work-copy,
  .page-works .editorial-work.placement-even .editorial-work-copy {
    display: block;
    padding: 32px 0 0;
  }

  .page-works .editorial-work-title {
    margin-top: 16px;
    font-size: 30px;
    line-height: 1.25;
  }

  .page-works .editorial-work-description {
    max-width: 32em;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.8;
  }

  body:not(.page-index) .work-opening,
  body.page-tian-lai .work-opening {
    display: block;
    padding: 108px 20px 72px;
  }

  body:not(.page-index) .work-opening .page-intro,
  body.page-tian-lai .work-opening .page-intro {
    display: block;
    padding: 0 0 52px;
  }

  body:not(.page-index) .work-opening .page-intro h1 {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  body:not(.page-index) .work-opening .page-intro .lead {
    margin-top: 24px;
    font-size: 20px;
  }

  body:not(.page-index) .work-opening .work-hero,
  body.page-tian-lai .work-opening .work-hero {
    display: block;
    padding: 0;
  }

  body:not(.page-index) .work-hero img,
  body.page-tian-lai .work-opening .work-hero img {
    max-height: none;
  }

  body.page-tian-lai .work-opening {
    padding-top: 108px;
  }

  body.page-tian-lai .work-opening .work-hero img {
    aspect-ratio: 3 / 2;
    object-fit: contain;
  }

  body.page-tian-lai .tian-detail-description {
    margin: 24px 0 0;
    font-size: 16px;
  }

  body:not(.page-index) .work-facts {
    display: block;
  }

  body:not(.page-index) .work-facts > div,
  body:not(.page-index) .work-facts > div:first-child {
    padding: 16px 20px;
  }

  body:not(.page-index) .essay-section {
    display: block;
    padding: 64px 20px 72px;
  }

  body:not(.page-index) .essay-section > h2 {
    padding: 0;
    font-size: 30px;
    line-height: 1.25;
  }

  body:not(.page-index) .essay-section > .prose {
    max-width: 32em;
    padding: 28px 0 0;
    font-size: 17px;
    line-height: 1.9;
  }

  .page-artist .profile-opening > .artist-portrait {
    height: auto;
  }

  .page-artist .profile-opening {
    padding-top: 0;
  }

  .page-artist .profile-opening > .page-intro {
    padding: 56px 20px 64px;
  }

  .page-artist .artist-opening {
    display: block;
    padding: 64px 20px;
  }

  .page-artist .artist-opening > .prose {
    padding: 0;
    font-size: 17px;
    line-height: 1.9;
  }

  .page-artist .artist-films,
  .page-artist .artist-contact {
    display: block;
    padding: 64px 20px 76px;
  }

  .page-artist .artist-film-heading,
  .page-artist .artist-film-copy,
  .page-artist .artist-contact h2,
  .page-artist .artist-contact .lead,
  .page-artist .artist-contact .contact-email,
  .page-artist .artist-contact > p:last-child {
    padding: 0;
  }

  .page-artist .artist-film-heading .lead,
  .page-artist .artist-contact .lead {
    max-width: 30em;
    margin-top: 20px;
    font-size: 19px;
  }

  .page-artist .artist-film-copy {
    margin-top: 40px;
  }

  .page-artist .artist-film-copy > p:first-child {
    font-size: 17px;
    line-height: 1.9;
  }

  .page-artist .film-figure {
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  .page-artist .film-figure figcaption {
    margin: 12px 20px 0;
  }

  .page-artist .film-note {
    font-size: 15px;
  }

  .page-artist .yicheng-film {
    margin-top: 56px;
    padding-top: 56px;
  }

  .page-artist .artist-contact .contact-email {
    display: block;
    margin-top: 36px;
    font-size: clamp(26px, 8vw, 38px);
  }

  .page-artist .artist-contact > p:last-child {
    margin-top: 16px;
  }

  .page-catalogues .library-index {
    padding: 108px 20px 80px;
  }

  .page-catalogues .library-opening {
    display: block;
    padding-bottom: 32px;
  }

  .page-catalogues .library-title {
    font-size: clamp(42px, 11vw, 56px);
  }

  .page-catalogues .library-intro {
    max-width: 32em;
    margin: 24px 0 0;
    padding: 0;
    font-size: 19px;
    line-height: 1.7;
  }

  .page-catalogues .library-book {
    display: block;
    margin: 0;
    padding: 40px 0;
  }

  .page-catalogues .library-index-number {
    margin-bottom: 16px;
  }

  .page-catalogues .library-cover {
    width: 100%;
  }

  .page-catalogues .library-cover img {
    width: 100%;
    max-height: 300px;
  }

  .page-catalogues .library-caption {
    padding: 24px 0 0;
  }

  .page-catalogues .library-caption h2 {
    max-width: 16ch;
    font-size: 30px;
    line-height: 1.25;
  }

  .reading-page main {
    padding: 88px 20px 0;
  }

  .reading-page .reader-heading {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
    padding-bottom: 12px;
  }
  .reading-page .reader-heading > a { grid-column: 1 / -1; grid-row: 1; min-height: 28px; }
  .reading-page .reader-heading h1 { grid-column: 1; grid-row: 2; margin: 0; font-size: 28px; line-height: 1.25; }
  .reading-page .reader-heading > p { grid-column: 2; grid-row: 2; margin: 0; }
  .reading-page .book-reader { margin-top: 12px; padding: 8px; }
  .reading-page .reader-stage, .reading-page .reader-sidebar {
    height: calc(100dvh - 330px); min-height: 310px;
  }

  .page-who-am-i .participation-section {
    padding: 64px 20px 76px;
  }

  .page-who-am-i .participation-section > h2,
  .page-who-am-i .participation-section > .lead {
    padding: 0;
  }

  .page-who-am-i .participation-section > h2 {
    font-size: 30px;
    line-height: 1.25;
  }

  .page-who-am-i .participation-section > .lead {
    font-size: 19px;
    line-height: 1.8;
  }

  .page-who-am-i .participation-section .form-layout {
    display: block;
    margin-top: 40px;
    padding: 32px 0 0;
  }

  .page-who-am-i .participation-section .form-layout > aside,
  .page-who-am-i .participation-section .form-layout > form {
    padding: 0;
  }

  .page-who-am-i .participation-section .form-layout > form {
    margin-top: 40px;
  }

  .alias-main {
    min-height: 58vh;
    padding: 128px 20px 80px;
  }

  .alias-main h1 {
    font-size: clamp(42px, 11vw, 56px);
    line-height: 1.18;
  }

  body:not(.page-index) .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 56px;
    min-height: 0;
    margin-top: 64px;
  }

  body:not(.page-index) .site-footer .footer-copy {
    grid-area: 1 / 1 / 2 / 3;
    padding: 64px 20px 24px;
  }

  body:not(.page-index) .site-footer .footer-nav {
    grid-area: 2 / 1 / 3 / 2;
    padding: 20px;
  }

  body:not(.page-index) .site-footer .footer-nav .text-link {
    font-size: 11px;
  }

  body:not(.page-index) .site-footer .footer-cta {
    grid-area: 2 / 2 / 3 / 3;
    padding: 20px;
    font-size: 32px;
  }

  body:not(.page-index) .site-footer .footer-brand {
    display: none;
  }

  body:not(.page-index) .site-footer .footer-copyright,
  body:not(.page-index) .site-footer .footer-privacy {
    padding: 18px 20px;
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .site-header #site-nav {
    transition: none;
  }
}

/* The three destinations carry the identity; avoid repeating one as a competing label. */
body .site-header .header-note { display: none; }

.reading-page .book-reader.reader-overlay { max-width: none; width: 100%; margin: 0; padding: 16px; background: var(--paper); }

/* Tian Lai's legacy dark foreground must inherit the transparent header. */
body.page-tian-lai .site-header .wordmark,
body.page-tian-lai .site-header #site-nav,
body.page-tian-lai .site-header #site-nav a,
body.page-tian-lai .site-header .header-contact { color: inherit; }