/* =============================================================
   Alvin Julian Tan / 陈禾丰 — Artist Platform
   Master stylesheet · v0.3 — full reskin to v1.2 Part VI tokens
   Authority: SITE_MANIFESTO.md (v1.2) + Branding Brief v1.2 Part VI
              + Logo handoff (Direction 04 "Vertical 陈禾丰")
   Aesthetic: Ink & Bone. The Long Craft of Becoming.

   v0.3 changes:
   - Locked palette migrated: ink #1a1614, bone #faf6ee, oxblood #8a232a
   - Multi-shade tokens added (ink-900/.../ink-300, bone-50/.../bone-300,
     oxblood-900/.../oxblood-100, gold-700/.../gold-100, wash-900/.../wash-100)
   - Body serif switched from Cormorant Garamond to Spectral (more
     readable at body sizes); Cormorant retained for display moments
   - UI sans switched from Inter to Inter Tight (per handoff)
   - .measure / .measure-wide now centred within .room
   ============================================================= */

/* -----------------------------------------------------------
   1. Font imports
   Cormorant Garamond — display serif (hero, song titles, quotes)
   Spectral           — body editorial serif (the working voice)
   Noto Serif SC      — Chinese (Source Han Serif equivalent)
   Inter Tight        — UI / eyebrow / spec lines
   ----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Noto+Serif+SC:wght@300;400;500;600;700&family=Inter+Tight:wght@400;500;600&display=swap');

/* -----------------------------------------------------------
   2. Palette + design tokens (Branding Brief v1.2 Part VI — locked)
   ----------------------------------------------------------- */
:root {
  /* —— Ink — primary text. Sumi-stick warmth, never pure black. —— */
  --ink-900:    #1a1614;     /* near-black, deep ink */
  --ink-800:    #2a2421;     /* default body text */
  --ink-700:    #4a4239;     /* secondary text */
  --ink-500:    #756b5e;     /* tertiary / captions / dividers */
  --ink-400:    #9b9183;     /* placeholder */
  --ink-300:    #c4bcae;     /* hairlines */

  /* —— Bone / Linen — paper. Warm off-white, never #fff. —— */
  --bone-50:    #faf6ee;     /* default page background */
  --bone-100:   #f4eee2;     /* secondary surface */
  --bone-200:   #ebe2cf;     /* hover / pressed */
  --bone-300:   #ddd1b8;     /* edge of paper */

  /* —— Oxblood — accent. The seal-mark feel. —— */
  --oxblood-900: #4a1518;
  --oxblood-700: #6e1d22;
  --oxblood-600: #8a232a;    /* primary accent */
  --oxblood-500: #a13039;
  --oxblood-100: #f0d8da;

  /* —— Aged gold — secondary accent. —— */
  --gold-700:   #8a6f2a;
  --gold-600:   #a98a3a;     /* primary gold */
  --gold-500:   #c4a253;
  --gold-100:   #efe3c4;

  /* —— Ink-wash — Salon background, photographic overlays. —— */
  --wash-900:   #2c302d;
  --wash-700:   #4a524d;
  --wash-500:   #7d847e;
  --wash-100:   #dfe1dc;

  /* —— Legacy aliases — kept so existing rules continue to work
        without an audit pass. New code should use the multi-shade
        tokens above directly. —— */
  --ink:        var(--ink-900);
  --bone:       var(--bone-50);
  --oxblood:    var(--oxblood-600);
  --aged-gold:  var(--gold-600);
  --ink-wash:   var(--wash-900);

  /* —— Functional tokens —— */
  --paper:      var(--bone-50);
  --text:       var(--ink-800);
  --accent:     var(--oxblood-600);
  --rule:       color-mix(in oklab, var(--ink-300) 100%, transparent);
  --rule-soft:  color-mix(in oklab, var(--ink-300) 55%, transparent);

  /* —— Typography —— */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --font-serif:   'Spectral', 'Cormorant Garamond', Georgia, serif;
  --font-han:     'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', '宋体', serif;
  --font-ui:      'Inter Tight', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Legacy alias — points to display so any old --font-latin
     reference keeps Cormorant at the hero/title moments. */
  --font-latin:   var(--font-display);

  --step-0:  1rem;       /* body */
  --step-1:  1.25rem;    /* lead paragraph */
  --step-2:  1.625rem;   /* subhead */
  --step-3:  2.25rem;    /* section title */
  --step-4:  3.5rem;     /* masthead */
  --step-5:  5rem;       /* display */

  --measure:        62ch;
  --measure-wide:   78ch;
  --gutter:         clamp(1.5rem, 4vw, 3rem);
  --room-pad-y:     clamp(3rem, 8vh, 6rem);
}

/* -----------------------------------------------------------
   3. Reset — minimal, considered
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(16px, 0.6vw + 14px, 18px);
  line-height: 1.62;
  font-weight: 400;
  font-feature-settings: "liga", "kern", "onum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Bilingual typography — optical matching
   Han glyphs set slightly smaller and with looser tracking so they
   do not outweigh neighbouring Latin, yet read at the same optical
   size. Neither language is subordinate. */
:lang(zh), .han {
  font-family: var(--font-han);
  font-size: 0.96em;
  letter-spacing: 0.02em;
  line-height: 1.9;
  font-weight: 400;
}

/* -----------------------------------------------------------
   4. Skip link (accessibility)
   ----------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 1000;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* -----------------------------------------------------------
   5. Masthead — the unified bilingual composition
   ----------------------------------------------------------- */
.site-header {
  padding: clamp(2rem, 5vh, 3.5rem) var(--gutter) 0;
}
.masthead {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.masthead__name {
  font-family: var(--font-latin);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2rem, 5vw, var(--step-4));
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--ink);
}
.masthead__name .slash {
  font-style: normal;
  color: var(--accent);
  margin: 0 0.3em;
  font-weight: 300;
}
.masthead__name .han {
  font-style: normal;
  font-weight: 400;
  font-size: 0.95em;
  letter-spacing: 0.04em;
}
.masthead__tagline {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.82;
  margin: 0.25rem 0 0;
}

/* -----------------------------------------------------------
   6. Room navigation — monastic, unrolled, no hamburger
   ----------------------------------------------------------- */
.room-nav {
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  margin-top: 2rem;
}
.room-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 4vw, 2.5rem);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.room-nav__list a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.room-nav__list a:hover,
.room-nav__list a:focus-visible {
  border-bottom-color: var(--accent);
  outline: none;
}
.room-nav__list a[aria-current="page"] {
  border-bottom-color: var(--accent);
}
.room-nav__list .label-han {
  font-family: var(--font-han);
  font-size: 0.92em;
  letter-spacing: 0.1em;
  margin-left: 0.4em;
  opacity: 0.7;
}

/* -----------------------------------------------------------
   7. Layout primitives — rooms, measure, rhythm
   ----------------------------------------------------------- */
main { display: block; }
.room {
  padding: var(--room-pad-y) var(--gutter);
}
.room + .room { border-top: 1px solid var(--rule); }

/* Measured columns — centred within their room by default.
   Without margin-auto, content sits flush-left and reads as
   "skewed" against the natural editorial centre line. */
.measure {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.measure-wide {
  max-width: var(--measure-wide);
  margin-left: auto;
  margin-right: auto;
}
.centred { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
  margin: 0 0 1.25rem;
}

/* Heading hierarchy per Branding Brief v1.2 Part VI:
   - h1 (display moments)        → Cormorant Garamond
   - h2 (section titles)         → Spectral
   - h3 (sub-section / songs)    → Spectral, italic
   - h4 (kicker / minor heading) → Inter Tight (UI sans)            */
h1, h2, h3, h4 {
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.75em;
}
h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  letter-spacing: -0.018em;
}
h2 {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.005em;
}
h3 {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 500;
}
h4 {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

p { margin: 0 0 1.1em; }
.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
}

a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

hr.rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}

/* Ornament — a single drawn accent. Use once per page, not more. */
.ornament {
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  margin: 2rem 0 1rem;
}

/* -----------------------------------------------------------
   8. Pull quote — Hearth signature element
   The single oxblood underline permitted per page.
   ----------------------------------------------------------- */
.pullquote {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.35;
  margin: 3rem 0;
  padding-left: 0;
  border: 0;
  color: var(--ink);
}
.pullquote em {
  font-style: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  padding: 0 0.05em;
}
.pullquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* -----------------------------------------------------------
   9. Repertoire list — paragraph-weighted, not a data table
   ----------------------------------------------------------- */
.repertoire {
  list-style: none;
  margin: 0;
  padding: 0;
}
.repertoire li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.repertoire li:last-child { border-bottom: 0; }
.repertoire__work {
  font-family: var(--font-latin);
  font-size: var(--step-1);
  font-weight: 500;
  margin: 0 0 0.35rem;
}
.repertoire__work .han { font-weight: 500; }
.repertoire__meta {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.75rem;
}
.repertoire__note {
  max-width: var(--measure);
  margin: 0;
}

/* -----------------------------------------------------------
   10. Documentary figure — for rehearsal / portrait photography
   Greyscale by default. No lifestyle glow.
   ----------------------------------------------------------- */
.figure {
  margin: 2.5rem 0;
}
.figure__frame {
  background: var(--ink);
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: var(--bone);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.92;
}
.figure--wide .figure__frame { aspect-ratio: 16 / 9; max-width: 100%; }
.figure figcaption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
  color: var(--ink);
  opacity: 0.75;
}
.figure figcaption .han { opacity: 0.85; }

/* -----------------------------------------------------------
   11. Bilingual composition primitives
   Two-stream prose. Neither language is a caption to the other.
   ----------------------------------------------------------- */
.bilingual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .bilingual--parallel {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}
.bilingual__stream h3 {
  font-size: var(--step-1);
  font-style: italic;
  margin-bottom: 0.75em;
}

/* -----------------------------------------------------------
   12. Room: Hearth overrides
   Bone canvas; nothing glows. Generous air.
   ----------------------------------------------------------- */
body.room-hearth {
  background: var(--paper);
}
body.room-hearth .becoming {
  max-width: var(--measure);
}
body.room-hearth .becoming p:first-of-type::first-letter {
  font-family: var(--font-latin);
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  padding: 0.1em 0.12em 0 0;
  color: var(--ink);
}

/* -----------------------------------------------------------
   13. Room: Salon overrides
   Palette shift to ink-wash. Mandarin leads, English annotates.
   Aged gold is permitted here as punctuation only.
   ----------------------------------------------------------- */
body.room-salon {
  background: var(--ink-wash);
  color: var(--bone);
}
body.room-salon .site-header,
body.room-salon .room-nav,
body.room-salon h1,
body.room-salon h2,
body.room-salon h3,
body.room-salon h4,
body.room-salon p,
body.room-salon a { color: var(--bone); }
body.room-salon .masthead__name { color: var(--bone); }
body.room-salon .masthead__name .slash { color: var(--aged-gold); }
body.room-salon .room-nav { border-bottom-color: rgba(243, 234, 230, 0.15); }
body.room-salon .room-nav__list a { color: var(--bone); }
body.room-salon .room-nav__list a:hover,
body.room-salon .room-nav__list a:focus-visible,
body.room-salon .room-nav__list a[aria-current="page"] {
  border-bottom-color: var(--aged-gold);
}
body.room-salon .rule,
body.room-salon .repertoire li { border-color: rgba(243, 234, 230, 0.15); }
body.room-salon .eyebrow { color: var(--aged-gold); opacity: 0.9; }

/* The calligraphic 禾丰 motif — presented as display element */
.motif {
  font-family: var(--font-han);
  font-weight: 300;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
  color: var(--bone);
  margin: 0;
  text-align: center;
}
body.room-salon .motif { color: var(--bone); }

/* A song as a scholarly page */
.art-song {
  margin: 4rem 0;
  padding: 0;
}
.art-song__title-han {
  font-family: var(--font-han);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0 0 0.4em;
}
.art-song__title-roman {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-1);
  opacity: 0.85;
  margin: 0 0 2rem;
}
.art-song__poem {
  font-family: var(--font-han);
  font-size: var(--step-2);
  line-height: 2.1;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin: 0 0 2.5rem;
  white-space: pre-line;
}
.art-song__attribution {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.art-song__translation {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: var(--measure);
  opacity: 0.9;
  margin-top: 1.5rem;
}
.art-song__note {
  max-width: var(--measure);
  margin-top: 2rem;
}

/* Aged gold seal — a single small decorative closure, used once */
.seal {
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--aged-gold);
  color: var(--ink-wash);
  font-family: var(--font-han);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6rem;
  text-align: center;
  letter-spacing: 0;
}

/* -----------------------------------------------------------
   14. Room: Stage overrides
   Horizontal, programme-insert layout. Honest about Tier 2.
   ----------------------------------------------------------- */
body.room-stage {
  background: var(--paper);
}
.programme {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin: 3rem 0;
  padding: 2.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .programme { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
}
.programme__still {
  background: var(--ink);
  aspect-ratio: 3 / 2;
  color: var(--bone);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.programme__meta {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.75rem;
}
.programme__title {
  font-family: var(--font-latin);
  font-size: var(--step-3);
  font-weight: 300;
  margin: 0 0 0.5em;
}
.programme__role {
  font-style: italic;
  opacity: 0.8;
  margin: 0 0 1.5em;
}

/* -----------------------------------------------------------
   15. Room: Lab overrides
   Studio / workshop vibe. Ink background, annotative captions.
   Everything dated. Everything anchored to real artistic study.
   ----------------------------------------------------------- */
body.room-lab {
  background: var(--ink);
  color: var(--bone);
}
body.room-lab .site-header,
body.room-lab .room-nav,
body.room-lab h1,
body.room-lab h2,
body.room-lab h3,
body.room-lab h4,
body.room-lab p,
body.room-lab a { color: var(--bone); }
body.room-lab .masthead__name { color: var(--bone); }
body.room-lab .masthead__name .slash { color: var(--accent); }
body.room-lab .room-nav { border-bottom-color: rgba(243, 234, 230, 0.12); }
body.room-lab .room-nav__list a { color: var(--bone); }
body.room-lab .eyebrow { color: var(--bone); opacity: 0.6; }
body.room-lab .rule { background: rgba(243, 234, 230, 0.15); }

.lab-notice {
  border: 1px solid rgba(243, 234, 230, 0.25);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 3rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  max-width: var(--measure);
}
.lab-notice strong {
  display: block;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-bottom: 0.5rem;
  color: var(--aged-gold);
}

.study {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 3rem 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px dashed rgba(243, 234, 230, 0.2);
}
@media (min-width: 900px) {
  .study { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.study__image {
  background: var(--ink-wash);
  border: 1px solid rgba(243, 234, 230, 0.2);
  aspect-ratio: 1 / 1;
  color: var(--bone);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.study__label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--aged-gold);
  margin: 0 0 0.75rem;
}
.study__title {
  font-family: var(--font-latin);
  font-size: var(--step-2);
  font-style: italic;
  font-weight: 300;
  margin: 0 0 0.5em;
}
.study__caption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.65;
  opacity: 0.85;
  max-width: 40ch;
}
.study__meta {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 1rem;
}

/* -----------------------------------------------------------
   16. Footer — modest, no social icon parade
   ----------------------------------------------------------- */
.site-footer {
  padding: 3rem var(--gutter) 4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer__name { opacity: 0.85; }
.site-footer__name .han { margin-left: 0.5rem; }
.site-footer__tag {
  font-style: italic;
  opacity: 0.6;
  font-family: var(--font-latin);
  font-size: 1rem;
}
.site-footer__contact a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1em;
}
body.room-salon .site-footer,
body.room-lab   .site-footer {
  border-top-color: rgba(243, 234, 230, 0.15);
}

/* -----------------------------------------------------------
   17. Reduced motion, small-screen grace
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation: none !important; }
}
@media (max-width: 640px) {
  .masthead__name { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .room-nav__list { gap: 1rem 1.5rem; }
}

/* -----------------------------------------------------------
   18. Song (Salon v1.2) — contemporary Chinese songwriting
       Parallel to, and coexisting with, the older .art-song
       class (retained above for historical pages). Mandarin
       leads; English annotates.
   ----------------------------------------------------------- */
.song {
  margin: 4rem 0;
  padding: 0;
}
.song--companion {
  margin: 3rem 0;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid rgba(243, 234, 230, 0.18);
}
.song--companion:first-of-type {
  border-top: none;
  padding-top: 0;
}
.song__attribution {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 0.6em;
}
.song__title-han {
  font-family: var(--font-han);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0 0 0.4em;
}
.song--companion .song__title-han {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  margin-top: 0.2em;
}
.song__title-roman {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-1);
  opacity: 0.85;
  margin: 0 0 1.5rem;
}
.song--companion .song__title-roman {
  font-size: 1.05rem;
  margin: 0 0 1rem;
}
.song__note {
  max-width: var(--measure);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* -----------------------------------------------------------
   19. Listen module — audio player for Salon + Stage
       Designed to sit as a quiet document-like element, not
       a glossy widget. Ink-wash background on Salon (room-salon
       body), bone card on other pages. No glowing play buttons,
       no gradients, no motion beyond native <audio> controls.
   ----------------------------------------------------------- */
.listen {
  margin: 1.75rem 0 2.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid rgba(28, 28, 28, 0.22);
  background: rgba(243, 234, 230, 0.35);
  max-width: var(--measure);
}
.listen__label {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 0.75rem;
}
.listen__player {
  width: 100%;
  display: block;
  height: 40px;
  outline: none;
}
.listen__meta {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.78;
  margin: 0.85rem 0 0;
}
.listen__meta .han {
  font-family: var(--font-han);
  font-style: normal;
  margin: 0 0.15em;
}

/* Salon — ink-wash background needs a quieter listen card */
body.room-salon .listen {
  border-color: rgba(243, 234, 230, 0.28);
  background: rgba(243, 234, 230, 0.05);
}
body.room-salon .listen__label,
body.room-salon .listen__meta {
  color: var(--bone);
}

/* Stage — keep it bone-native, no accent */
body.room-stage .listen {
  border-color: rgba(28, 28, 28, 0.2);
  background: rgba(243, 234, 230, 0.0);
}

/* Small-screen grace for listen block */
@media (max-width: 480px) {
  .listen { padding: 1rem 1rem 1.1rem; }
  .listen__player { height: 36px; }
}

/* -----------------------------------------------------------
   20. Aria — Hearth listening selection
       Same family as .song but bone-native (Hearth, not Salon).
       Restrained, document-tone, no decoration.
   ----------------------------------------------------------- */
.aria {
  margin: 2.75rem 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
.aria:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 1.5rem;
}
.aria__attribution {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.5em;
}
.aria__title {
  font-family: var(--font-latin);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.35em;
}
.aria__title em {
  font-weight: 300;
  opacity: 0.55;
}
.aria__meta {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  opacity: 0.7;
  margin: 0 0 0.9em;
}
.aria__note {
  margin: 0 0 1.1em;
  opacity: 0.85;
}

/* Listen — pending state (audio file not yet placed) */
.listen--pending {
  background: transparent;
  border-style: dashed;
  border-color: rgba(28, 28, 28, 0.22);
}
.listen__pending {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.6;
  margin: 0;
  line-height: 1.55;
}
.listen__pending code {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 0.82rem;
  background: rgba(28, 28, 28, 0.06);
  padding: 0.05em 0.4em;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------------------
   21. Figures with real images (replacing earlier placeholder
       .figure__frame). Variants: default, --wide, --hero,
       --inline (sits inside a list item), --salon-hero.
       Treatment: full-bleed image inside a measured container,
       quiet caption below in italic Cormorant.
   ----------------------------------------------------------- */
.figure {
  margin: 2rem 0 2.5rem;
  padding: 0;
  max-width: var(--measure-wide);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  background: rgba(28, 28, 28, 0.04);
}
.figure figcaption {
  margin-top: 0.75em;
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  opacity: 0.75;
  line-height: 1.55;
}
.figure figcaption .han {
  font-style: normal;
  font-family: var(--font-han);
  margin-left: 0.4em;
}

/* Wide figures fill the wide measure */
.figure--wide {
  max-width: var(--measure-wide);
}

/* Small figure — modest size, used where the image should sit
   quietly rather than dominate (e.g. AI-generated production
   stills the artist would rather not over-emphasise). */
.figure--small {
  max-width: 360px;
  margin: 1.5rem 0 2rem;
}
.figure--small img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}

/* Hero figures span the page width on wide viewports */
.figure--hero {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
}
.figure--hero img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 25%;
}
@media (max-width: 720px) {
  .figure--hero img {
    aspect-ratio: 4 / 5;
  }
}

/* Salon hero — slightly different framing for the fan portrait */
.figure--salon-hero {
  max-width: 760px;
  margin: 0 auto 2rem;
}
.figure--salon-hero img {
  aspect-ratio: auto;
  object-fit: contain;
  background: rgba(243, 234, 230, 0.04);
}

/* Inline figure — sits inside a repertoire list item or paragraph */
.figure--inline {
  max-width: 520px;
  margin: 1rem 0 1.25rem;
}

/* Hero band — make the wrapping section a bit airier */
section.hero-portrait {
  padding-top: 0;
  padding-bottom: 1.5rem;
}

/* Pair of figures side-by-side (used in Competitions section) */
.figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
  max-width: var(--measure-wide);
}
@media (min-width: 760px) {
  .figure-pair {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.figure-pair .figure {
  margin: 0;
}
.figure-pair .figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Trio (or quartet) of figures — used inside the Kecal entry on the
   Hearth. Stacks on mobile, becomes 2-col at md, 3-col at lg.
   The --four variant uses 2×2 at md/lg so the grid stays balanced. */
.figure-trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 1rem;
}
@media (min-width: 720px) {
  .figure-trio { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (min-width: 1080px) {
  .figure-trio { grid-template-columns: 1fr 1fr 1fr; }
}
/* Four-photo variant: stay at 2×2 even on wide viewports */
@media (min-width: 1080px) {
  .figure-trio--four { grid-template-columns: 1fr 1fr; }
}
.figure-trio .figure {
  margin: 0;
}
.figure-trio .figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Anchor the crop near the top so heads don't get cut off when
     the source image is taller than the 3:4 frame. */
  object-position: center 18%;
}

/* Portrait variant — vertical, narrower. Used in Salon under 《落幕之宾》.
   Constrained to fit inside the .measure column so it aligns with the
   surrounding text rather than overflowing it. */
.figure--portrait {
  width: 100%;
  max-width: min(100%, 460px);
  margin: 1.5rem auto 2rem;
}
.figure--portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
}

/* Cover variant — square, centred. Used for single-cover artwork.
   Constrained to fit inside the .measure column so it aligns with
   the article text rather than overflowing it. */
.figure--cover {
  width: 100%;
  max-width: min(100%, 480px);
  margin: 1.5rem auto 2rem;
}
.figure--cover img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: rgba(243, 234, 230, 0.04);
}

/* Salon variants of figures — bone caption colour on ink-wash */
body.room-salon .figure figcaption {
  color: var(--bone);
  opacity: 0.7;
}
body.room-salon .figure img {
  background: rgba(243, 234, 230, 0.04);
}

/* -----------------------------------------------------------
   22. Gallery — small editorial grid (3×2 on desktop, 2×3 on
       tablet, 1×6 on mobile). Restrained: no hover lifts, no
       shadows. Just the image and a tiny caption.
   ----------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0 0;
}
@media (min-width: 600px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (min-width: 960px) {
  .gallery { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
}
.gallery__item {
  margin: 0;
  padding: 0;
}
.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Heads sit near the top of the source images, so anchor the crop
     at the top to avoid cutting them off when the image is taller
     than the 3:4 frame. */
  object-position: center 18%;
  background: rgba(28, 28, 28, 0.04);
}
.gallery__item figcaption {
  margin-top: 0.6em;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* -----------------------------------------------------------
   23. Stage — Moonlit City poster + small additions
   ----------------------------------------------------------- */
.figure--poster {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.5rem;
}
.figure--poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(28, 28, 28, 0.06);
}

.programme__subtitle {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-1);
  line-height: 1.35;
  margin: 0 0 0.75em;
  opacity: 0.85;
}

.programme__dates {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 1em 0 0.5em;
  padding: 0.6em 0.8em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* -----------------------------------------------------------
   24. Lab — quiet anticipation page
   ----------------------------------------------------------- */
.lab-statement {
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.lab-statement h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0.5em 0 1.5rem;
}
.lab-statement .lead {
  font-size: var(--step-2);
  line-height: 1.5;
  margin-bottom: 1em;
}

.lab-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(243, 234, 230, 0.18);
}
.lab-doors a {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15em;
  opacity: 0.85;
}
.lab-doors a:hover { opacity: 1; }
.lab-doors a .han {
  font-style: normal;
  font-family: var(--font-han);
  margin-left: 0.4em;
  opacity: 0.7;
}

/* -----------------------------------------------------------
   25. Wordmark — primary brand mark, horizontal lockup
       Design-handoff: Direction 04 "Vertical 陈禾丰"
       Locked tokens per Branding Brief v1.2 Part VI
       (Local to this component — coexists with site palette.)
   ----------------------------------------------------------- */
:root {
  /* Wordmark-locked tokens — do not eyeball substitutions.
     These are scoped intentionally; the rest of the site still
     uses the simpler --ink / --bone / --oxblood family. */
  --wm-ink-900: #1a1614;
  --wm-ink-700: #4a4239;
  --wm-ink-500: #756b5e;
  --wm-ink-300: #c4bcae;
  --wm-bone-50: #faf6ee;
  --wm-bone-200: #ebe2cf;
  --wm-oxblood-600: #8a232a;
  --wm-font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', serif;
  --wm-font-sc: 'Noto Serif SC', 'Songti SC', serif;
  --wm-font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  /* Reset link styling cleanly */
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.wordmark:focus-visible {
  outline: 2px solid var(--wm-oxblood-600);
  outline-offset: 6px;
  border-radius: 2px;
}

/* The vertical Chinese column — three characters stacked */
.wordmark__column {
  display: flex;
  flex-direction: column;
  font-family: var(--wm-font-sc);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--wm-ink-900);
  gap: 2px;
  flex-shrink: 0;
}
.wordmark__column > span {
  display: block;
  text-align: center;
}

/* Hairline divider between the column and the wordmark group */
.wordmark__divider {
  width: 1px;
  align-self: stretch;
  background: var(--wm-ink-500);
  opacity: 0.5;
  margin: 8px 0;
  flex-shrink: 0;
}

/* Wordmark group — eyebrow + name + spec line */
.wordmark__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.wordmark__eyebrow {
  font-family: var(--wm-font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--wm-ink-500);
  line-height: 1;
}

.wordmark__name {
  font-family: var(--wm-font-display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--wm-ink-900);
}

.wordmark__spec {
  font-family: var(--wm-font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wm-ink-500);
  margin-top: 2px;
  line-height: 1.2;
}

/* The 禾丰 seal — square chop at the right edge */
.wordmark__seal {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}
.wordmark__seal svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Reversed-on-ink: Salon (ink-wash bg) and Lab (ink bg) */
body.room-salon .wordmark__column,
body.room-salon .wordmark__name,
body.room-lab   .wordmark__column,
body.room-lab   .wordmark__name {
  color: var(--wm-bone-50);
}
body.room-salon .wordmark__eyebrow,
body.room-salon .wordmark__spec,
body.room-lab   .wordmark__eyebrow,
body.room-lab   .wordmark__spec {
  color: var(--wm-bone-200);
}
body.room-salon .wordmark__divider,
body.room-lab   .wordmark__divider {
  background: var(--wm-bone-200);
  opacity: 0.4;
}

/* Mobile responsive — drop the spec line, scale down */
@media (max-width: 767px) {
  .wordmark { gap: 14px; }
  .wordmark__column { font-size: 26px; }
  .wordmark__name { font-size: 28px; }
  .wordmark__spec { display: none; }
  .wordmark__seal { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .wordmark__eyebrow { font-size: 9px; letter-spacing: 0.3em; }
  .wordmark__name { font-size: 24px; }
}

/* Site-header tweak — when the wordmark replaces the old masthead,
   we still want the room-nav under it, plus a small per-page
   context line (set in HTML if needed). */
.site-header__context {
  font-family: var(--wm-font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wm-ink-500);
  margin: 1.25rem 0 0;
  opacity: 0.85;
}
body.room-salon .site-header__context,
body.room-lab .site-header__context {
  color: var(--wm-bone-200);
}

/* -----------------------------------------------------------
   26. Song credit — quiet attribution line in the Salon
       (Joanna composed, Wesley music direction).
   ----------------------------------------------------------- */
.song-credit {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 1.25rem 0 0;
  line-height: 1.6;
}
.song-credit.han {
  font-family: var(--font-han);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* =============================================================
   End of stylesheet. Revisions should be dated and justified
   against the manifesto (v1.2) and the branding brief (v1.2).
   ============================================================= */