/* ============================================================================
   kuchichun.com — design-system.css
   Version 2.0 · 2026-10-14 · Source of truth: site-redesign/design-direction.md + integration-spec.md
   RESTYLE 2026-10-14 (東方人文・侘寂): section 14 at the end of this file overrides the tokens and
   components below. Read section 14 first; sections 1–13 are the v1 base it builds on.
   ("Private View", final). Where this file and the direction disagree, the
   direction wins, except for the deviations listed here.

   Layout concept: an ivory gallery wall. One fixed 980px column (12 × 59.67px,
   24px gutters) centred in the viewport; full-width strips carry only bands,
   the hero photograph and in-situ photographs. Hairlines, not boxes. Zero
   radius everywhere. Only artworks carry colour; the one vermilion per
   viewport is the seal.

   DEVIATION (build-harness): the direction says "no OS-level dark mode". The
   prototype pages are previewed as artifacts, which render in the viewer's
   theme, so the Black Room token set is also exposed through
   prefers-color-scheme / [data-theme]. Wix ignores this; the live site is
   always ivory except .strip--dark and body.room-dark. The footer is one
   site-wide Wix element, so it stays ivory on every page: .footer--dark is
   WITHDRAWN (review 2026-10-14) and body.room-dark hands the footer and the
   colophon back to the light tokens.
   DECISION 2026-10-14 (fix pass): the site ships light only. Every page pins
   data-theme="light" on <html>, so client review matches the Wix build and
   the TEDx red never sits on a near-black ground; the OS dark set below
   stays in the file as a documented alternative, not a deliverable.
   REVIEW 2026-10-14 (dealer-eye pass): the untraced seal placeholder is hidden
   (it rendered as a red outlined square); .page-hero__tc balanced and sized so
   a ten-character title never orphans; credibility-row separators rebuilt so no
   wrapped line opens or ends with a dot (phones stack the names); .btn--tertiary
   may wrap; .footer--dark withdrawn.
   DEVIATION (build-harness): the direction's "secondary" button (ink text,
   hairline underline) is .btn--tertiary here; .btn--secondary is a 1px ink
   outline button that the build brief asked for. Pages built from the
   direction should use .btn--tertiary wherever it says "secondary link".
   DEVIATION (build-harness): TEDx clips are poster links (.clip-card), never
   <iframe>; the direction's §10.2 iframe placeholders are withdrawn.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@400;500&family=Noto+Serif+TC:wght@400;600;700&display=swap");

/* ---------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Palette constants. Components never read these directly. */
  --l-ivory: #F5F1EA;     --d-ivory: #121110;
  --l-panel: #ECE6DB;     --d-panel: #1A1917;
  --l-hairline: #D9D3C7;  --d-hairline: #2C2A26;
  --l-stone: #6B655D;     --d-stone: #A39C91;
  --l-ink: #16140F;       --d-ink: #F2EEE6;
  --l-vermilion: #B2362E; --d-vermilion: #D4584E;

  /* Live tokens (light = the gallery wall) */
  --ivory: var(--l-ivory);         /* page ground, nav, cards */
  --panel: var(--l-panel);         /* recessed strips, fields, letter card */
  --hairline: var(--l-hairline);   /* 1px rules only, never text */
  --stone: var(--l-stone);         /* secondary text, captions, labels */
  --ink: var(--l-ink);             /* primary text, primary button fill */
  --vermilion: var(--l-vermilion); /* the seal, the 4px dot, focus, hover underline */

  /* Fixed colours for elements drawn ON TOP OF photographs (same in both themes) */
  --on-image: #F5F1EA;
  --on-image-scrim: rgba(22, 20, 15, 0.38);

  /* Type */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-tc: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;

  /* Type scale (mobile → desktop; base 16px) */
  --fs-display-xl: clamp(2.25rem, 1.6rem + 1.9vw, 3.25rem);   /* 36 → 52 */
  --fs-display-l:  clamp(2.125rem, 1.55rem + 1.7vw, 3rem);    /* 34 → 48 */
  --fs-h2:         clamp(1.75rem, 1.4rem + 1vw, 2.25rem);     /* 28 → 36 */
  --fs-h3:         clamp(1.3125rem, 1.2rem + 0.35vw, 1.5rem); /* 21 → 24 */
  --fs-lede:       clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --fs-cred:       clamp(1.125rem, 1.04rem + 0.25vw, 1.25rem);/* 18 → 20 */
  --fs-quote:      clamp(1.5rem, 1.2rem + 0.9vw, 2rem);       /* 24 → 32 */
  --fs-wl-title: 1.125rem;  /* 18 */
  --fs-num: 0.875rem;       /* 14 */
  --fs-body: 1rem;          /* 16 */
  --fs-caption: 0.8125rem;  /* 13 */
  --fs-label: 0.6875rem;    /* 11 */
  --fs-button: 0.8125rem;   /* 13 */

  /* Spacing (8px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 120px;
  --strip-y: var(--s-8);    /* strip top and bottom padding (72px on phone) */

  /* Widths */
  --w-content: 980px;       /* the Wix content column */
  --w-reading: 645px;       /* 8 cols, prose */
  --w-label: 311px;         /* 4 cols, wall labels */
  --col: 59.67px;
  --gap: 24px;
  --gutter: 16px;           /* side gutter; 24px at tablet */

  /* Lines, corners, chrome */
  --line: 1px;
  --radius: 0;
  --nav-h: 64px;            /* 56px on phone */
  --ease: 300ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ivory: var(--d-ivory);
    --panel: var(--d-panel);
    --hairline: var(--d-hairline);
    --stone: var(--d-stone);
    --ink: var(--d-ink);
    --vermilion: var(--d-vermilion);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ivory: var(--d-ivory);
  --panel: var(--d-panel);
  --hairline: var(--d-hairline);
  --stone: var(--d-stone);
  --ink: var(--d-ink);
  --vermilion: var(--d-vermilion);
}

/* The Black Room: the direction's class-scoped dark ground (one strip per page,
   the dark footer, or the whole of works-buddhist.html via body.room-dark). */
.strip--dark, .band--dark, .room-dark {
  color-scheme: dark;
  --ivory: var(--d-ivory);
  --panel: var(--d-panel);
  --hairline: var(--d-hairline);
  --stone: var(--d-stone);
  --ink: var(--d-ink);
  --vermilion: var(--d-vermilion);
}
/* The Wix footer cannot change colour per page: inside the Black Room the colophon and the
   footer return to the ivory set, and the page closes on its dark #commission strip instead. */
.room-dark .colophon, .room-dark .footer {
  background: var(--l-ivory);   /* the colophon has no ground of its own; without this the body's dark ground showed as a band above the ivory footer */
  color-scheme: light;
  --ivory: var(--l-ivory);
  --panel: var(--l-panel);
  --hairline: var(--l-hairline);
  --stone: var(--l-stone);
  --ink: var(--l-ink);
  --vermilion: var(--l-vermilion);
}

@media (min-width: 768px) and (max-width: 1023px) { :root { --gutter: 24px; } }
@media (max-width: 767px) { :root { --strip-y: 72px; --nav-h: 56px; } }

/* ---------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;          /* the page body never scrolls sideways */
  scroll-behavior: smooth;
}
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  background: var(--ivory);
  color: var(--ink);
  font: 400 var(--fs-body) / 1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; font-size: inherit; font-weight: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; border-radius: var(--radius); }
button { background: none; border: 0; padding: 0; cursor: pointer; }
hr { border: 0; border-top: var(--line) solid var(--hairline); margin: 0; }
em, i, cite { font-style: italic; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }
::selection { background: var(--panel); color: var(--ink); }

/* Traditional Chinese: Noto Serif TC at 92% of the Latin slot, line-height +0.1,
   never uppercase, never letter-spaced beyond +0.04em. */
:lang(zh-Hant) {
  font-family: var(--font-tc);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}
.tc, span:where(:lang(zh-Hant)) { font-size: 0.92em; }   /* :where() keeps this at (0,0,1): a class that sets its own size wins. span:lang() at (0,1,1) was beating .hero-pines__tc, .wordmark__tc, .series-index__tc and .page-hero__tc (review 2026-10-14) */

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

/* ---------------------------------------------------------------------------
   3. TYPOGRAPHY
   Short names (.display, .h1 …) are the canonical classes; the direction's
   .t-* names are kept as aliases so page briefs read 1:1.
   -------------------------------------------------------------------------- */
.display, .t-display-xl {
  font: 300 var(--fs-display-xl) / 1.08 var(--font-display);
  letter-spacing: -0.01em; text-wrap: balance; color: var(--ink);
}
.h1, .t-display-l {
  font: 300 var(--fs-display-l) / 1.1 var(--font-display);
  letter-spacing: -0.005em; text-wrap: balance; color: var(--ink);
}
.h2, .t-h2 { font: 400 var(--fs-h2) / 1.15 var(--font-display); text-wrap: balance; color: var(--ink); }
.h3, .t-h3 { font: italic 500 var(--fs-h3) / 1.25 var(--font-display); color: var(--ink); }
.lede, .t-lede { font: 400 var(--fs-lede) / 1.45 var(--font-display); color: var(--ink); }
.cred, .t-cred { font: 400 var(--fs-cred) / 1.4 var(--font-display); color: var(--ink); }
.wl-title, .t-wl-title { font: italic 500 var(--fs-wl-title) / 1.3 var(--font-display); color: var(--ink); }
.num, .t-num {
  font: 400 var(--fs-num) / 1.3 var(--font-display);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink);
}
.body, .t-body { font: 400 var(--fs-body) / 1.65 var(--font-body); color: var(--ink); }
.caption, .t-caption { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
.eyebrow, .t-label {
  font: 500 var(--fs-label) / 1.3 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone);
}
.t-button {
  font: 500 var(--fs-button) / 1 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.quote-text, .t-quote { font: italic 400 var(--fs-quote) / 1.3 var(--font-display); color: var(--ink); }

/* TC inside Latin slots */
.display :lang(zh-Hant), .h1 :lang(zh-Hant), .h2 :lang(zh-Hant), .h3 :lang(zh-Hant),
.lede :lang(zh-Hant), .wl-title :lang(zh-Hant) { font-weight: 600; }
.eyebrow :lang(zh-Hant), .t-label :lang(zh-Hant), .t-button :lang(zh-Hant) {
  font: 600 var(--fs-label) / 1.3 var(--font-tc); letter-spacing: 0.04em; text-transform: none;
}
.tc-title { font: 600 1em / 1.2 var(--font-tc); text-wrap: balance; }  /* a TC title set beside a Latin one */

/* Prose */
.reading { max-width: var(--w-reading); }
.reading > * + *, .prose > * + * { margin-top: 1em; }
.prose a, .reading a, .link {
  border-bottom: var(--line) solid var(--hairline);
  padding-bottom: 2px;
  transition: border-color var(--ease);
}
.prose a:hover, .reading a:hover, .link:hover { border-bottom-color: var(--vermilion); }
.title { font-style: italic; }   /* titles of works inside running text */

/* ---------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--w-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--reading { max-width: calc(var(--w-reading) + 2 * var(--gutter)); }

/* The 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s-6);
}
.grid > * { min-width: 0; }
/* Spans are set on grid-column-end so that .start-N (grid-column-start) can
   combine with them: .col-4.start-9 = columns 9–12. */
.col-1 { grid-column: auto / span 1; } .col-2 { grid-column: auto / span 2; } .col-3 { grid-column: auto / span 3; }
.col-4 { grid-column: auto / span 4; } .col-5 { grid-column: auto / span 5; } .col-6 { grid-column: auto / span 6; }
.col-7 { grid-column: auto / span 7; } .col-8 { grid-column: auto / span 8; } .col-9 { grid-column: auto / span 9; }
.col-10 { grid-column: auto / span 10; } .col-11 { grid-column: auto / span 11; } .col-12 { grid-column: auto / span 12; }
.start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; }
.start-4 { grid-column-start: 4; } .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; }
.start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
.start-10 { grid-column-start: 10; } .start-11 { grid-column-start: 11; } .start-12 { grid-column-start: 12; }

/* Equal-column utilities */
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s-6) var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }

/* Media / text split (7/5 by default; --reverse puts the media on the right) */
.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--gap);
  row-gap: var(--s-5);
  align-items: start;
}
.split--equal { grid-template-columns: 1fr 1fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split > * { min-width: 0; }
.split--reverse .split__media { order: 2; }
.split--reverse .split__text { order: 1; }
.split--middle { align-items: center; }

/* Strips (every section is a strip). .band is the same thing by another name. */
.strip, .band { width: 100%; padding-block: var(--strip-y); }
.strip--panel, .band--panel { background: var(--panel); }
.strip--dark, .band--dark { background: var(--ivory); color: var(--ink); border-block: var(--line) solid var(--hairline); }
.strip--flush, .band--flush { padding-block: 0; }
.strip--flush-top, .band--flush-top { padding-top: 0; }     /* the strip that follows a page header: the header's 72px is the gap */
.strip--last, .band--last { padding-bottom: var(--s-7); }   /* the last strip before the footer: 64px below */
.band--image { padding-block: 0; }
.band--image img { width: 100%; }

/* Stacks and small utilities */
.stack > * + * { margin-top: var(--s-3); }
.stack--lg > * + * { margin-top: var(--s-6); }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-stone { color: var(--stone); }
.u-ink { color: var(--ink); }
.u-mt-4 { margin-top: var(--s-4); } .u-mt-6 { margin-top: var(--s-6); } .u-mt-8 { margin-top: var(--s-8); }
.vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Image treatments */
.img--doc { filter: saturate(0.9); }                       /* documentary photographs, never artworks */
.img--keyline { outline: var(--line) solid var(--hairline); outline-offset: -1px; } /* product shots on white */

@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .grid { row-gap: var(--s-5); }
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: 1 / -1; }
  .start-1, .start-2, .start-3, .start-4, .start-5, .start-6, .start-7, .start-8, .start-9, .start-10, .start-11, .start-12 { grid-column-start: 1; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s-5); }
  .grid--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .split, .split--equal, .split--5-7 { grid-template-columns: 1fr; }
  .split--reverse .split__media, .split--reverse .split__text { order: initial; }
}

/* ---------------------------------------------------------------------------
   5. CATALOGUE SECTION HEADER, PAGE HERO, HOME HERO
   -------------------------------------------------------------------------- */
/* "01 — Selected works" / rule / H2. Numbers are Arabic, ink, Cormorant tabular. */
.cat-head { margin-bottom: var(--s-6); }
.cat-head__kicker {
  display: flex; align-items: baseline; gap: 0.6em;
  padding-bottom: 12px;
  border-bottom: var(--line) solid var(--hairline);
}
.cat-head__num { font: 400 var(--fs-num) / 1.3 var(--font-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.cat-head__dash { color: var(--stone); font: 400 var(--fs-num) / 1.3 var(--font-display); }
.cat-head__label { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone); }
.cat-head__title { margin-top: var(--s-4); font: 400 var(--fs-h2) / 1.15 var(--font-display); text-wrap: balance; color: var(--ink); }

/* Short header for inner pages: label, Display L (+ TC beside), one lede. */
.page-hero, .page-head { padding-block: var(--s-9) var(--s-7); }
.page-hero__label { display: block; margin-bottom: var(--s-3); }
.page-hero__title {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); row-gap: var(--s-1);
}
/* A ten-character title (一生只做一件事的力量) must hold one line in the 5-col hero text column: 2.25rem × 10 = 360px < 394px. */
.page-hero__tc { font: 600 clamp(1.5rem, 1.15rem + 1.1vw, 2.25rem) / 1.2 var(--font-tc); color: var(--ink); text-wrap: balance; }
.page-hero__lede { margin-top: var(--s-4); max-width: var(--w-reading); }
.page-hero__desc { margin-top: var(--s-3); }
@media (max-width: 767px) { .page-hero, .page-head { padding-block: var(--s-7) var(--s-6); } }

/* Home hero: statement left (5 cols), photograph right (7 cols) bleeding to the
   right viewport edge and the strip's bottom edge; wall label beneath; the 24px
   seal at the junction. Fixed 720px strip, never 100vh. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) repeat(12, minmax(0, var(--col))) minmax(var(--gutter), 1fr);
  grid-template-rows: minmax(720px, auto) auto;
  column-gap: var(--gap);
  align-items: center;
}
.hero-split__text { grid-column: 2 / span 5; grid-row: 1; padding-block: var(--s-8); min-width: 0; }
.hero-split__text > * + * { margin-top: var(--s-4); }
.hero-split__text .btn-row { margin-top: var(--s-6); }
.hero-split__seal { grid-column: 7 / span 1; grid-row: 1; justify-self: end; align-self: center; }
.hero-split__media { grid-column: 8 / -1; grid-row: 1; align-self: stretch; margin: 0; min-width: 0; }
.hero-split__media img { width: 100%; height: 100%; min-height: 720px; object-fit: cover; object-position: 50% 50%; }
.hero-split__caption { grid-column: 8 / span 6; grid-row: 2; padding-top: var(--s-3); min-width: 0; }
@media (max-width: 767px) {
  .hero-split { display: block; padding-top: var(--s-6); }
  .hero-split__text { padding-block: 0 var(--s-6); padding-inline: var(--gutter); }
  .hero-split .hero-split__seal { display: none; }   /* two classes, so it outranks .seal in section 13, which is declared later */
  .hero-split__media img { min-height: 0; aspect-ratio: 4 / 5; }
  .hero-split__caption { padding-inline: var(--gutter); }
}

/* ---------------------------------------------------------------------------
   6. NAV (sticky; CSS-only mobile sheet through <details>)
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--ivory);
  border-bottom: var(--line) solid var(--hairline);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: var(--nav-h);
  max-width: calc(var(--w-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wordmark { display: inline-flex; flex-direction: column; line-height: 1; color: var(--ink); flex: none; }
.wordmark__en { font: 500 1.25rem / 1 var(--font-display); letter-spacing: 0.08em; }
.wordmark__tc { font: 600 0.75rem / 1 var(--font-tc); letter-spacing: 0.04em; margin-top: 3px; }
/* Eight items must fit beside the wordmark and the cluster inside 980px, so
   the nav list runs tighter than the direction's six-item spec (14px apart,
   +0.06em); between 1024 and 1099px it tightens one step further. */
.nav__links { display: flex; align-items: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative; display: inline-block; padding-block: 8px; white-space: nowrap;
  font: 500 var(--fs-label) / 1 var(--font-body); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--stone); transition: color var(--ease);
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .nav__links { gap: 12px; }
  .nav__links a { letter-spacing: 0.04em; }
}
.nav__links a:hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line); background: var(--ink);
}
.nav__cluster { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav__enquire {
  font: 500 var(--fs-label) / 1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); padding-bottom: 3px; border-bottom: var(--line) solid var(--hairline);
  transition: border-color var(--ease); white-space: nowrap;
}
.nav__enquire:hover { border-bottom-color: var(--vermilion); }

/* Language switch: EN | 繁中 (active ink, other stone) */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-label) / 1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.lang-switch a { color: var(--stone); transition: color var(--ease); }
.lang-switch a:hover, .lang-switch [aria-current="true"] { color: var(--ink); }
.lang-switch [aria-current="true"]:lang(zh-Hant) { font: 600 0.75rem / 1 var(--font-tc); letter-spacing: 0.04em; }
.lang-switch a:lang(zh-Hant) { font: 600 0.75rem / 1 var(--font-tc); letter-spacing: 0.04em; }
.lang-switch__sep { color: var(--stone); }

/* Mobile menu (details/summary): "Menu" opens a full-screen ivory sheet */
.nav__menu { display: none; }
.nav__menu > summary {
  list-style: none; cursor: pointer; display: inline-block;
  font: 500 var(--fs-label) / 1 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink);
  padding-block: 8px;
}
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu > summary::marker { content: ""; }
.nav__menu[open] .nav__menu-open { display: none; }
.nav__menu:not([open]) .nav__menu-close { display: none; }
.menu-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  background: var(--ivory); color: var(--ink);
  overflow-y: auto; z-index: 49;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
}
.menu-sheet a { font: 300 2rem / 1.2 var(--font-display); color: var(--ink); }
.menu-sheet a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.menu-sheet__foot {
  margin-top: auto; padding-top: var(--s-5); border-top: var(--line) solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
}
.menu-sheet__foot a { font: 500 var(--fs-label) / 1 var(--font-body); }
/* The lock goes on html: html already carries overflow-x: clip, so an
   overflow set on body no longer propagates to the viewport; on body it made
   body the scroll container, the page kept scrolling and the sticky nav (with
   "Close") scrolled away behind the open sheet. */
html:has(.nav__menu[open]) { overflow: hidden; }

@media (max-width: 1023px) {
  .nav__links { display: none; }
  .nav__menu { display: block; }
  .nav__cluster > .lang-switch { display: none; }   /* the bar's copy hides; the sheet's foot keeps its own */
}
@media (max-width: 767px) {
  .wordmark__en { font-size: 1.125rem; }
  .wordmark__tc { font-size: 0.6875rem; }
}

/* ---------------------------------------------------------------------------
   7. BUTTONS AND LINKS (two fills, zero radius, no icons)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s-4);
  border: var(--line) solid transparent; border-radius: var(--radius);
  font: 500 var(--fs-button) / 1 var(--font-body); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); background: transparent; cursor: pointer; white-space: nowrap;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.btn--primary, .btn--inverse { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--primary:hover, .btn--inverse:hover { background: var(--stone); border-color: var(--stone); }
.btn--secondary { border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--ivory); }
.btn--tertiary {
  min-height: 0; padding: 0 0 4px; border: 0; border-radius: 0;
  border-bottom: var(--line) solid var(--hairline);
  white-space: normal;   /* a long label wraps rather than clipping at phone width (review 2026-10-14) */
}
.btn--tertiary:hover { border-bottom-color: var(--vermilion); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

/* ---------------------------------------------------------------------------
   8. CREDIBILITY ROW, MARQUEE-FREE STRIP, LOGO WALL
   -------------------------------------------------------------------------- */
.cred-row {
  display: grid; grid-template-columns: 2fr 10fr; column-gap: var(--gap);
  padding-block: var(--s-4);
  border-top: var(--line) solid var(--hairline);
  border-bottom: var(--line) solid var(--hairline);
  --sep-w: 48px;   /* the gap between two names; the dot sits in its centre */
}
.cred-row + .cred-row { border-top: 0; }
.cred-row__label { padding-top: 0.5em; }
/* The dot hangs BEFORE each name, inside the 48px gap (::before). The list is pulled left by one
   gap and clipped back by one gap, so the dot in front of the first name on EVERY line falls outside
   the clip and never paints: no wrapped line opens or ends with a stray separator (review 2026-10-14).
   Wix: a credibility row is one text element with the dots typed by hand; none of this is needed. */
.cred-row__names {
  display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--s-1);
  font: 400 var(--fs-cred) / 1.4 var(--font-display); color: var(--ink);
  margin-left: calc(-1 * var(--sep-w));
  clip-path: inset(0 0 0 var(--sep-w));
}
.cred-row__names li { position: relative; display: inline-flex; align-items: baseline; margin-left: var(--sep-w); }
.cred-row__names li::before {
  content: "\00B7"; position: absolute; top: 0; left: calc(-1 * var(--sep-w)); width: var(--sep-w);
  text-align: center; color: var(--stone);
}
.cred-row__year { font-variant-numeric: tabular-nums; margin-left: 0.4em; }
.cred-row__names li:has(> .cred-row__more)::before { font: 400 var(--fs-caption) / 1.5 var(--font-body); }   /* the dot before the caption-sized "and others" sits on that line's midline */
.cred-row__more { align-self: baseline; }
/* Small-caps variant: uppercase Inter names separated by vertical hairlines */
.cred-row--caps .cred-row__names { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; row-gap: var(--s-2); }
.cred-row--caps .cred-row__names li { padding-block: 2px; }
.cred-row--caps .cred-row__names li::before {
  content: ""; top: 50%; transform: translateY(-50%); left: calc(-1 * var(--sep-w) / 2);
  width: var(--line); height: 1em; background: var(--hairline);
}
.cred-row--inline { /* same geometry on the ivory ground; the panel comes from the strip */ }
@media (max-width: 767px) {
  .cred-row { grid-template-columns: 1fr; row-gap: var(--s-2); text-align: center; }
  .cred-row__label { padding-top: 0; }
  /* Phones stack the names one to a line, centred, without separators, so nothing can dangle. */
  .cred-row__names { flex-direction: column; align-items: center; row-gap: var(--s-2); margin-left: 0; clip-path: none; }
  .cred-row__names li { margin-left: 0; }
  .cred-row__names li::before { content: none; }
  .cred-row__names li:has(> .cred-row__more) { margin-top: var(--s-2); }
}

/* A row of names that would be a marquee elsewhere. No animation, ever. */
.marquee-free {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: var(--s-2) 0; padding-block: var(--s-4);
  border-top: var(--line) solid var(--hairline); border-bottom: var(--line) solid var(--hairline);
  font: 400 var(--fs-cred) / 1.4 var(--font-display); color: var(--ink);
}
.marquee-free li { display: inline-flex; align-items: baseline; }
.marquee-free li:not(:last-child)::after { content: "\00B7"; margin-inline: var(--s-4); color: var(--stone); }

/* Monochrome logo band (collaborations.html only): six marks or typeset names */
.logo-wall {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4);
  align-items: center; padding-block: var(--s-5);
  border-top: var(--line) solid var(--hairline); border-bottom: var(--line) solid var(--hairline);
}
.logo-wall__item { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 0; }
.logo-wall__name { font: 400 var(--fs-cred) / 1.2 var(--font-display); color: var(--ink); opacity: 0.45; text-align: center; transition: opacity var(--ease); }
.logo-wall__item:hover .logo-wall__name { opacity: 1; }
.logo-wall__item img { height: 28px; width: auto; max-width: 100%; filter: grayscale(1) contrast(0.8) opacity(0.75); transition: filter var(--ease); }
.logo-wall__item:hover img { filter: grayscale(1) contrast(0.9) opacity(1); }
@media (max-width: 1023px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   9. ARTWORK CARD + WALL LABEL, HANG GRID, SERIES TILE
   -------------------------------------------------------------------------- */
.artwork-card { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.artwork-card__media { display: block; }
.artwork-card__media img { width: 100%; transition: opacity var(--ease); }
.artwork-card__media:hover img { opacity: 0.92; }
.artwork-card--keyline .artwork-card__media img { outline: var(--line) solid var(--hairline); outline-offset: -1px; }
.artwork-card--centred .artwork-card__media img { margin-inline: auto; width: auto; max-height: 80vh; }

/* The museum wall label. Always visible, never hover-only. */
.wall-label { display: flex; flex-direction: column; gap: var(--s-1); max-width: var(--w-label); font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
.wall-label::before { content: ""; display: block; width: 24px; height: var(--line); background: var(--hairline); margin-bottom: var(--s-1); }
.wall-label__no { font: 400 var(--fs-num) / 1.3 var(--font-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--stone); }
.wall-label__title { font: italic 500 var(--fs-wl-title) / 1.3 var(--font-display); color: var(--ink); }
.wall-label__title :lang(zh-Hant) { font: 600 0.92em / 1.3 var(--font-tc); }
.wall-label__year { font-style: normal; }
.wall-label__medium, .wall-label__dims, .wall-label__line { color: var(--stone); }
.wall-label__status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--s-2); margin-top: var(--s-1);
  font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone);
}
.wall-label__status a { color: var(--ink); border-bottom: var(--line) solid var(--hairline); padding-bottom: 2px; transition: border-color var(--ease); }
.wall-label__status a:hover { border-bottom-color: var(--vermilion); }
.wall-label__dot { display: inline-block; width: 4px; height: 4px; background: var(--vermilion); flex: none; }
.wall-label--facts { max-width: none; font-size: var(--fs-body); color: var(--ink); gap: var(--s-2); }
.wall-label--facts::before { margin-bottom: var(--s-2); }
.wall-label--right { margin-left: auto; }   /* desktop: label in the right 4 cols beside a one-up */
.wall-label--wide { max-width: none; }

/* Hang grids: 48px between rows, 24px between columns, never more than three */
.hang { display: grid; gap: var(--s-8) var(--gap); }
/* One-up: the figure spans the row; inside it the work takes 8 cols and the
   wall label sits in the right 4 cols, aligned to the work's bottom edge. */
.hang--one { grid-template-columns: 1fr; }
.hang--one > .artwork-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-3); align-items: end; }
.hang--one > .artwork-card > .artwork-card__media { grid-column: 1 / span 8; }
.hang--one > .artwork-card > .wall-label { grid-column: 9 / span 4; }
.hang--one.hang--centred > .artwork-card > .artwork-card__media { grid-column: 3 / span 8; }
.hang--one.hang--centred > .artwork-card > .wall-label { grid-column: 3 / span 4; }
.hang--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hang--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hang--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hang > * { min-width: 0; }
@media (max-width: 1023px) {
  .hang--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hang--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hang { gap: var(--s-6); }
  .hang--one > .artwork-card { display: flex; align-items: stretch; }   /* not the desktop's align-items: end, which right-aligned the 311px label in the phone column */
  .hang--two, .hang--three { grid-template-columns: 1fr; }
  .hang--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}

/* Series tile (stacked): square or 4:5 image, name, years, "View the series" */
/* Artworks keep their own proportions (never cropped); photographs may be
   served square through a fill recipe. Labels align along the bottom. */
.series-tile { display: flex; flex-direction: column; gap: var(--s-3); color: var(--ink); min-width: 0; height: 100%; }
.series-tile img { width: 100%; transition: opacity var(--ease); }
.series-tile:hover img { opacity: 0.92; }
.series-tile__body { display: flex; flex-direction: column; gap: var(--s-1); margin-top: auto; }
.series-tile__name { font: italic 500 var(--fs-h3) / 1.25 var(--font-display); }
.series-tile__years { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
.series-tile__line { font: 400 var(--fs-body) / 1.6 var(--font-body); color: var(--ink); }
.series-tile__link { align-self: flex-start; margin-top: var(--s-1); }
/* Row variant (the Home "Bodies of work" hairline list): thumbnail 2 cols, text 10 cols */
.series-list { border-top: var(--line) solid var(--hairline); }
.series-tile--row {
  display: grid; grid-template-columns: 2fr 10fr; column-gap: var(--gap); align-items: center;
  padding-block: var(--s-4); border-bottom: var(--line) solid var(--hairline);
}
.series-tile--row .series-tile__body { display: grid; grid-template-columns: 3fr 5fr 2fr; column-gap: var(--gap); align-items: baseline; }
.series-tile--row .series-tile__link { justify-self: end; margin-top: 0; }
@media (max-width: 767px) {
  .series-tile--row { grid-template-columns: 96px 1fr; column-gap: var(--s-3); }
  .series-tile--row .series-tile__body { grid-template-columns: 1fr; row-gap: var(--s-1); }
  .series-tile--row .series-tile__line { display: none; }
  .series-tile--row .series-tile__link { justify-self: start; }
}

/* ---------------------------------------------------------------------------
   10. QUOTE, CLIP CARD, CLIP ROW
   -------------------------------------------------------------------------- */
.quote { max-width: 813px; border-top: var(--line) solid var(--hairline); padding-top: var(--s-4); margin: 0; }
.quote p { font: italic 400 var(--fs-quote) / 1.3 var(--font-display); color: var(--ink); text-wrap: balance; }
.quote__cite { display: block; margin-top: var(--s-3); font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); font-style: normal; }
.quote--centred { margin-inline: auto; text-align: center; }
.quote--centred::before { content: ""; }

/* A poster that links to YouTube in a new tab. Never an <iframe>. */
.clip-card { display: flex; flex-direction: column; gap: var(--s-3); color: var(--ink); min-width: 0; }
.clip-card__poster {
  position: relative; display: block; overflow: hidden; max-width: 100%;
  aspect-ratio: 9 / 16; background: var(--panel);
}
.clip-card--wide .clip-card__poster { aspect-ratio: 16 / 9; }
.clip-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--ease); }
.clip-card:hover .clip-card__poster img { opacity: 0.92; }
/* Centred hairline circle with a triangle, drawn in CSS.
   Wix: an image has no overlay glyph. The play mark is BAKED into each poster
   (assets/video/wix/<id>.png, 1080×1920 and 1280×720) and the card is a Repeater
   item or a Pro Gallery Slider item linking to YouTube in a new tab, hover None. */
.clip-card__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.clip-card__play::before, .clip-card__play::after { content: ""; grid-area: 1 / 1; }
.clip-card__play::before {
  width: 64px; height: 64px; border-radius: 50%;
  border: var(--line) solid var(--on-image);
  background: var(--on-image-scrim);
  transition: background-color var(--ease);
}
.clip-card__play::after {
  width: 14px; height: 16px; background: var(--on-image);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(2px);
}
.clip-card:hover .clip-card__play::before { background: rgba(22, 20, 15, 0.55); }
.clip-card--wide .clip-card__play::before { width: 72px; height: 72px; }
.clip-card__label { display: flex; flex-direction: column; gap: var(--s-1); }
.clip-card__kicker { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone); }
.clip-card__title { font: italic 500 var(--fs-wl-title) / 1.3 var(--font-display); color: var(--ink); }
.clip-card--wide .clip-card__title { font-size: var(--fs-h3); }
.clip-card__sub { font: 400 0.92em / 1.6 var(--font-tc); color: var(--stone); }
.clip-card__dur { font: 400 var(--fs-num) / 1.3 var(--font-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--stone); }

/* Grid of portrait clip cards: 3 / 2 / scroll-snap row on phone.
   Wix: a Repeater (3-up desktop, stacked mobile) or a Pro Gallery Slider (swipe on
   mobile); the CSS scroll-snap carousel below is prototype-only. */
.clip-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
.clip-row > * { min-width: 0; }
@media (max-width: 1023px) { .clip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .clip-row {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    gap: var(--s-3);
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--s-2);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .clip-row::-webkit-scrollbar { display: none; }
  .clip-row > .clip-card { flex: 0 0 76%; scroll-snap-align: start; }   /* the next card peeks */
  .clip-row--wide { display: grid; grid-template-columns: 1fr; margin-inline: 0; padding-inline: 0; }
  .clip-row--wide > .clip-card { flex: none; }
}

/* ---------------------------------------------------------------------------
   11. LEDGER, FACTS, STEPS, TWO-DOOR, TRIPTYCH, TEAR SHELF, IN SITU, SCROLL BAND
   -------------------------------------------------------------------------- */
.ledger { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--hairline); }
.ledger__row { display: grid; grid-template-columns: 2fr 10fr; column-gap: var(--gap); padding-block: var(--s-3); border-bottom: var(--line) solid var(--hairline); }
.ledger__year { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone); font-variant-numeric: tabular-nums; padding-top: 0.55em; }
.ledger__entry { font: 400 var(--fs-cred) / 1.4 var(--font-display); color: var(--ink); min-width: 0; }
.ledger__entry small { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); margin-left: 0.5em; }
.ledger--numbered .ledger__year { font: 400 var(--fs-num) / 1.3 var(--font-display); letter-spacing: 0.04em; text-transform: none; color: var(--ink); padding-top: 0.35em; }
.ledger--compact .ledger__row { padding-block: var(--s-2); }
.ledger--compact .ledger__entry { font: 400 var(--fs-body) / 1.5 var(--font-body); }
@media (max-width: 767px) { .ledger__row { grid-template-columns: 1fr; row-gap: var(--s-1); } .ledger__year { padding-top: 0; } }

.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--gap); padding-block: var(--s-5); border-top: var(--line) solid var(--hairline); border-bottom: var(--line) solid var(--hairline); }
.facts-row__num { display: block; font: 300 2.25rem / 1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }   /* block: the label sits beneath the figure (review 2026-10-14) */
.facts-row__label { display: block; margin-top: var(--s-1); font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
@media (max-width: 767px) { .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-5); border-top: var(--line) solid var(--hairline); }
.steps__item { padding-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.steps__num { font: 400 var(--fs-num) / 1.3 var(--font-display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.steps__title { font: italic 500 var(--fs-h3) / 1.25 var(--font-display); color: var(--ink); }
.steps__text { font: 400 var(--fs-body) / 1.6 var(--font-body); color: var(--ink); }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } }

.two-door { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--line) solid var(--hairline); border-bottom: var(--line) solid var(--hairline); }
.two-door__door { padding: var(--s-5) var(--gap) var(--s-5) 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.two-door__door + .two-door__door { border-left: var(--line) solid var(--hairline); padding-left: var(--gap); padding-right: 0; }
@media (max-width: 767px) {
  .two-door { grid-template-columns: 1fr; }
  .two-door__door { padding-inline: 0; }
  .two-door__door + .two-door__door { border-left: 0; border-top: var(--line) solid var(--hairline); padding-left: 0; }
}

.triptych { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--gap); }
.triptych__item { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.triptych__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tear-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4) var(--gap); align-items: end; padding-bottom: var(--s-3); border-bottom: var(--line) solid var(--hairline); }
.tear-shelf figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.tear-shelf img { width: 100%; outline: var(--line) solid var(--hairline); outline-offset: -1px; }
@media (max-width: 767px) { .triptych, .tear-shelf { grid-template-columns: 1fr; } }

.insitu { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.insitu img { width: 100%; }
.insitu--8 { max-width: var(--w-reading); margin-inline: auto; }
.insitu--5 { max-width: 394px; }

/* Handscroll band: reads right to left. The track starts at the right end
   without JavaScript because it is laid out rtl; the image inside stays ltr.
   Wix (direction 0.12): the classic Editor has no sideways-scrolling container.
   Build each band as a Pro Gallery in Slider layout fed with the pre-cut
   1600×420 panels in assets/scroll/<id>/panel-01.jpg … (panel-01 is the RIGHT
   end, where the sutra begins), gallery set right-to-left, arrows and dots
   hidden, autoplay off, hover None; on mobile show the static R-SCROLL-M crop
   with "View the full scroll" opening a Lightbox, as works-buddhist.html
   #band-gold does. */
.scroll-band { padding-block: var(--s-6); }
.scroll-band__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3); }
.scroll-band__track { overflow-x: auto; overflow-y: hidden; direction: rtl; scrollbar-width: thin; }
.scroll-band__track img { display: block; height: 330px; width: auto; max-width: none; direction: ltr; margin-inline-start: auto; }
.scroll-band__hint { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone); }
@media (max-width: 767px) { .scroll-band__track img { height: 220px; } }

/* Instagram strip: six panel squares until the Wix feed replaces them */
.ig-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.ig-strip__ph { aspect-ratio: 1; background: var(--panel); }
@media (max-width: 767px) { .ig-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }

/* ---------------------------------------------------------------------------
   12. FORMS (underline-only fields, 48px rows, zero radius)
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); max-width: var(--w-reading); }
.form--two { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.form--two .field--full, .form--two .form__actions, .form--two .form__standing { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.field__label { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone); }
.field__input, .field__select, .field__textarea {
  width: 100%; min-height: 48px; padding: 12px 0;
  background: transparent; border: 0; border-bottom: var(--line) solid var(--hairline); border-radius: 0;
  font: 400 var(--fs-body) / 1.4 var(--font-body); color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--ease);
}
.field__input::placeholder, .field__textarea::placeholder { color: var(--stone); opacity: 1; }
.field__input:focus, .field__select:focus, .field__textarea:focus { outline: none; border-bottom-color: var(--ink); }
.field__input:focus-visible, .field__select:focus-visible, .field__textarea:focus-visible { outline: none; border-bottom-color: var(--vermilion); }
.field__select {
  cursor: pointer; padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 8px top 50%, right 2px top 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field__select option { color: var(--ink); background: var(--ivory); }
.field__textarea { min-height: 144px; resize: vertical; }
.field__hint { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--s-3); }
.field--check .field__label { text-transform: none; letter-spacing: 0; font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--ink); }
.field__check {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 16px; height: 16px; margin: 2px 0 0;
  border: var(--line) solid var(--ink); background: transparent; border-radius: 0; cursor: pointer;
  transition: background-color var(--ease);
}
.field__check:checked { background: var(--ink); box-shadow: inset 0 0 0 3px var(--ivory); }
.field__file { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); padding-block: 12px; border-bottom: var(--line) solid var(--hairline); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.form__standing { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
.form__note { font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--ink); }
@media (max-width: 767px) { .form--two { grid-template-columns: 1fr; } }

/* Private View letter: single underlined email field + "Receive the letter" */
.letter-card { background: var(--panel); padding: var(--s-6); max-width: var(--w-reading); margin-inline: auto; display: flex; flex-direction: column; gap: var(--s-3); }
.letter-card--compact { background: transparent; padding: 0; max-width: none; margin: 0; gap: var(--s-2); }
.letter-form { display: flex; gap: var(--s-3); align-items: flex-end; flex-wrap: wrap; }
.letter-form .field { flex: 1 1 200px; }
.letter-form .btn { flex: none; }

/* ---------------------------------------------------------------------------
   13. ENQUIRE BAND, SEAL, COLOPHON, FOOTER
   -------------------------------------------------------------------------- */
.enquire-band { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-4); max-width: var(--w-reading); margin-inline: auto; }
.enquire-band .h3 { text-wrap: balance; }

/* The seal. Placeholder until traced from the artist's own seals (direction 0.16). */
.seal { display: inline-block; width: 24px; height: 24px; background: var(--vermilion); flex: none; }
.seal--14 { width: 14px; height: 14px; }
.seal--32 { width: 32px; height: 32px; }
.seal.is-placeholder { box-shadow: inset 0 0 0 2px var(--vermilion), inset 0 0 0 3px var(--ivory); }
/* Until the seal is traced from the artist's own seals (direction 0.16) the placeholder is not
   shown: as an outlined square it read as a defect beside the hero photograph (review 2026-10-14).
   Remove this rule when the traced seal replaces the placeholder. */
.seal.is-placeholder { display: none; }
.colophon { display: flex; justify-content: center; padding-block: 0 var(--s-7); }

.footer { background: var(--ivory); color: var(--ink); border-top: var(--line) solid var(--hairline); padding-block: var(--s-8) var(--s-6); }
.footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-6); }
.footer__col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.footer__col .eyebrow { margin-bottom: var(--s-1); }
.footer__text { font: 400 0.875rem / 1.6 var(--font-body); color: var(--stone); }
.footer__text a { color: var(--ink); border-bottom: var(--line) solid var(--hairline); padding-bottom: 1px; }
.footer__text a:hover { border-bottom-color: var(--vermilion); }
.footer__seal { margin-top: var(--s-3); }
.footer__links { margin-top: var(--s-6); padding-block: var(--s-5); border-top: var(--line) solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-4); }
.footer__links ul { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: var(--s-2); }
.footer__links li { display: inline-flex; align-items: baseline; }
.footer__links li:not(:last-child)::after { content: "\00B7"; margin-inline: 10px; color: var(--stone); }
.footer__links a { font: 500 var(--fs-label) / 1.3 var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--stone); transition: color var(--ease); }
.footer__links a:hover { color: var(--ink); }
.footer__colophon { margin-top: var(--s-4); font: 400 var(--fs-caption) / 1.5 var(--font-body); color: var(--stone); }
@media (max-width: 1023px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .footer { padding-block: var(--s-7) var(--s-5); }
  .footer__grid { grid-template-columns: 1fr; row-gap: var(--s-5); }
  .footer__links { flex-direction: column; align-items: flex-start; }
  /* Phones stack the footer links, one to a line, without separators, so no wrapped line ends with a dot (review 2026-10-14). */
  .footer__links ul { flex-direction: column; row-gap: var(--s-2); }
  .footer__links li:not(:last-child)::after { content: none; }
}


/* ===========================================================================
   14. RESTYLE 2026-10-14 — 東方人文・侘寂 (Eastern humanist, wabi-sabi)
   Client brief: the v1 prototype read as machine-made. This section keeps the
   old-money restraint (ivory wall, ink type, one vermilion, museum labels)
   and changes the look: warmer washi-grained ground, Cormorant for running
   text, vertical Traditional-Chinese labels, ink brush strokes instead of
   hairlines between major sections, asymmetric columns, text-link buttons,
   a brush cursor, and the Hasegawa Tōhaku pine hero. It is appended, not
   merged, so every v1 rule still exists and Wix builders can diff it.
   Assets it needs (all local):
     assets/new/processed/washi_alpha_256.png        ink grain, 5 % alpha baked in, tiles on any ground
     assets/new/processed/washi_alpha_light_256.png  ivory grain for the dark room
     assets/new/processed/hero_pines.jpg             Hasegawa Tōhaku, Pine Trees (right screen), 2200 px, public domain
     assets/new/processed/hero_pines_02.jpg          left screen, same cut (FR/JA home, works-calligraphy)
     assets/new/processed/rule_ink_01.png            a real stroke cut from 無 (2022), transparent
     assets/new/processed/ink_he.png · ink_wu.png · ink_qin.png   和 · 無 · 零 as transparent marks
     assets/new/rule-ink.svg · cursor-brush.svg · cursor-seal.svg · map-footprint.svg
   ========================================================================== */

/* 14.1 Tokens (override: the live tokens read the --l-* constants) */
:root {
  --l-ivory: #EFE9DD;      /* washi, a step warmer than v1's #F5F1EA */
  --l-panel: #E6DFCF;
  --l-hairline: #D6CEBE;
  --l-stone: #6B655D;
  --l-ink: #1A1714;
  --l-vermilion: #B2362E;
  --d-ivory: #141210;      /* = the photographs' lifted black point */
  --d-panel: #1C1915;
  --d-hairline: #332E28;
  --d-ink: #EFE9DD;
  --d-stone: #A39C91;
  --l-moss: #3F4A3C;       /* pine-moss green: rules, eyebrows, vertical labels. Never a fill. */
  --d-moss: #8F9B88;       /* the same green lifted for dark grounds (it read as black on .strip--dark) */
  --moss: var(--l-moss);
  --gold: #B8975A;         /* gold leaf. Only inside artworks and the dark hero variant. */
  --ted-red: #E62B1E;      /* TEDx trademark red: .tedx-mark only, on ivory only */

  /* Type: Cormorant Garamond for everything Latin; Inter stays loaded as the forms' fallback only. */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-ui: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-tc: "Noto Serif TC", "PingFang TC", "Microsoft JhengHei", serif;
  --font-tedx: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-body: 1.125rem;      /* 18px running text, 1.7 line-height (directive 17e) */
  --fs-caption: 0.9375rem;  /* 15px: Cormorant needs two sizes more than Inter did */
  --fs-label: 0.8125rem;    /* 13px small caps, +0.2em */
  --fs-button: 0.9375rem;
  --fs-num: 0.9375rem;
  --fs-wl-title: 1.1875rem;
  --fs-thesis: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem);   /* the vertical 一生只做一件事 */

  --washi: url("assets/new/processed/washi_alpha_256.png");
  --washi-light: url("assets/new/processed/washi_alpha_light_256.png");
  --rule-ink: url("assets/new/rule-ink.svg");
  --rule-ink-real: url("assets/new/processed/rule_ink_01.png");
}

/* 14.2 Ground and texture: washi grain at 5 % on every ground, light and dark */
body { background: var(--ivory) var(--washi) repeat; font-weight: 500; line-height: 1.7; }
.nav, .footer, .strip--panel, .band--panel, .letter-card, .menu-sheet { background-image: var(--washi); }
.strip--dark, .band--dark, .room-dark, .hero-pines--dark { background-image: var(--washi-light); }
.room-dark .footer, .room-dark .colophon { background-image: var(--washi); }
/* Wix: upload washi_alpha_256.png as a tiled strip background "pattern" on the site background and on every panel strip. */

/* 14.3 Type: running text in Cormorant 500, labels as spaced small caps, TC never spaced beyond +0.04em */
.body, .t-body, .reading p, .prose p, .footer__text, .series-tile__line, .steps__text, .form__note {
  font: 500 var(--fs-body) / 1.7 var(--font-body); color: var(--ink);
}
.caption, .t-caption, .wall-label, .form__standing, .field__hint, .field__file, .clip-card__sub, .quote__cite, .facts-row__label, .series-tile__years {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-caption); line-height: 1.5;
}
.eyebrow, .t-label, .cat-head__label, .field__label, .ledger__year, .wall-label__status, .clip-card__kicker, .footer__links a, .nav__links a, .nav__enquire, .nav__menu > summary, .lang-switch, .menu-sheet__foot a {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.2em; font-size: var(--fs-label);
}
.btn, .t-button { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.16em; }
.lede, .t-lede { font-weight: 500; }
.wall-label__title { font-size: var(--fs-wl-title); }
.field__input, .field__select, .field__textarea { font: 500 var(--fs-body) / 1.5 var(--font-body); }
.clip-card__sub { font-family: var(--font-tc); }
.tc, span:where(:lang(zh-Hant)) { font-size: 0.94em; }   /* see section 2: :where() so .hero-pines__tc etc. keep their own size */
h1, h2, h3 { font-family: var(--font-display); }

/* 14.4 Cursor: a brush tip (24 px, hotspot 2 2) on the page, the seal (20 px) on anything clickable.
   Wix: Settings › Custom Code › head, paste these two rules inside <style>. Both SVGs are under 1 KB. */
html {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 2l5.2 1.6L9.4 9.4 3.6 7.2z' fill='%231A1714'/%3E%3Cpath d='M8.6 8.6l2.2 2.2' stroke='%231A1714' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M10.4 10.4L22 22' stroke='%236B655D' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M11.2 9.6l3.2 3.2' stroke='%23B8975A' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 2 2, auto;
}
a, button, summary, label, select, [role="button"], input[type="submit"], input[type="checkbox"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' fill='%23B2362E'/%3E%3Cpath d='M5 5h10v10H5z' fill='none' stroke='%23EFE9DD' stroke-width='1.3'/%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23EFE9DD' stroke-width='1.1'/%3E%3C/svg%3E") 10 10, pointer;
}

/* 14.5 Ink strokes: section dividers and the nav underline. Never a straight hairline between major sections. */
.rule-ink { display: block; width: min(100%, 560px); height: 22px; margin-block: var(--s-6); color: var(--ink); opacity: 0.85; }
.rule-ink__svg { display: block; width: 100%; height: 100%; }
.rule-ink--section { width: min(62%, 640px); margin: 0 auto; }            /* between two strips, replaces the hairline */
.rule-ink--right { margin-left: auto; }
.rule-ink--short { width: min(100%, 220px); height: 14px; }
.rule-ink--real { height: 44px; background: var(--rule-ink-real) left center / contain no-repeat; opacity: 1; }
.rule-ink--moss { color: var(--moss); }
/* A strip that opens with a stroke needs no markup: */
.strip--ink-top { position: relative; }
.strip--ink-top::before {
  content: ""; display: block; width: min(28%, 300px); height: 14px; margin: 0 auto var(--s-6);
  background: var(--rule-ink) center / 100% 100% no-repeat; opacity: 0.55;
}
.strip--dark.strip--ink-top::before, .room-dark .strip--ink-top::before { filter: invert(1) brightness(1.2); }
/* The v1 dark strip (section 4) carried a straight 1 px hairline above and below; the stroke and the grain change are the
   separation now (directive 17c). Component hairlines (.ledger, .two-door, .wall-label::before) stay: mounting-silk borders. */
.strip--dark, .band--dark, .room-dark .strip { border-block: 0; }
.rule-mark { display: block; width: 72px; height: auto; margin-block: var(--s-5); opacity: 0.9; }   /* a single 漢字 mark (ink_he.png …) */
.rule-mark--large { width: 140px; }
/* Nav: the active item is underlined by a stroke, theme-aware through a mask */
.nav__links a[aria-current="page"]::after {
  height: 7px; bottom: -1px; background: currentColor;
  -webkit-mask: var(--rule-ink) center / 100% 100% no-repeat; mask: var(--rule-ink) center / 100% 100% no-repeat;
}
.nav__links a[aria-current="page"] { color: var(--ink); }

/* 14.6 Vertical labels and section heads: every major section carries a vertical TC title or a single 漢字 mark;
   the "01 — Section" numeral is retired (hidden, so v1 markup still renders cleanly). */
.label-v {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 600 0.9375rem / 1 var(--font-tc); letter-spacing: 0.22em; color: var(--moss);
  margin: 0; white-space: nowrap;
}
.title-v {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 600 clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem) / 1.2 var(--font-tc); letter-spacing: 0.14em; color: var(--ink);
  margin: 0; white-space: nowrap;
}
.label-v--latin, .title-v--latin { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.sec-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-2); align-items: start; margin-bottom: var(--s-7); }
.sec-head > .label-v, .sec-head > .title-v { grid-row: 1 / span 3; padding-top: 0.2em; }
.sec-head__kicker { font: 600 var(--fs-label) / 1.3 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--moss); }
.sec-head__title { font: 400 var(--fs-h2) / 1.15 var(--font-display); color: var(--ink); text-wrap: balance; max-width: 22ch; }
.sec-head__title em, .sec-head__title i { font-style: italic; }
.sec-head__lede { margin-top: var(--s-2); max-width: var(--w-reading); }
.sec-head--right { direction: rtl; } .sec-head--right > * { direction: ltr; }            /* label on the right, title ragged-right */
.cat-head__num, .cat-head__dash { display: none; }
.cat-head__kicker { border-bottom: 0; padding-bottom: 0; }
.cat-head__label { color: var(--moss); }
.cat-head__title { margin-top: var(--s-2); }
/* Page head built from .sec-head: the head's own padding is the gap to the first strip, so the section head adds no margin
   of its own and the lede sits one step below the title (promoted from the page-only CSS of talks-press, representation and
   works-heroine on 2026-10-14, so the Wix builder reads one source). */
.page-hero .sec-head { margin-bottom: 0; }
.page-hero .page-hero__lede { margin-top: var(--s-3); }

/* 14.7 Asymmetric layout: offset columns, images that bleed past the column, captions beside */
.split-5-7, .split-4-8, .split-7-5, .split-8-4 { display: grid; column-gap: var(--gap); row-gap: var(--s-5); align-items: start; }
.split-5-7 { grid-template-columns: 5fr 7fr; }
.split-4-8 { grid-template-columns: 4fr 8fr; }
.split-7-5 { grid-template-columns: 7fr 5fr; }
.split-8-4 { grid-template-columns: 8fr 4fr; }
.split-5-7 > *, .split-4-8 > *, .split-7-5 > *, .split-8-4 > * { min-width: 0; }
.split--end { align-items: end; }
.split--middle { align-items: center; }
.offset-down { margin-top: var(--s-8); }     /* one column starts lower than the other */
.offset-down-lg { margin-top: var(--s-9); }
.offset-up { margin-top: calc(-1 * var(--s-8)); }  /* an image rising into the section above */
.bleed-right { margin-right: calc(-1 * max(0px, (100vw - var(--w-content) - 2 * var(--gutter)) / 2 - 0.5 * var(--gutter))); }
.bleed-left { margin-left: calc(-1 * max(0px, (100vw - var(--w-content) - 2 * var(--gutter)) / 2 - 0.5 * var(--gutter))); }
.bleed-right img, .bleed-left img { width: 100%; }
.figure--aside { display: grid; grid-template-columns: 9fr 3fr; column-gap: var(--gap); align-items: end; }   /* no "margin: 0" here: it came after .bleed-right/.bleed-left and cancelled their negative margin, so no aside figure ever bled on desktop (review 2026-10-14, talks-press); figure margins are already reset in section 2 */
.figure--aside-left { grid-template-columns: 3fr 9fr; }
.figure--aside-left > figcaption { order: -1; }
.figure--aside > figcaption { padding-bottom: var(--s-2); }
.strip--tall { padding-block: calc(var(--strip-y) * 1.45); }
.strip--short { padding-block: calc(var(--strip-y) * 0.6); }
.strip--ma { padding-block: calc(var(--strip-y) * 1.25); }    /* generous 留白 around a single work */
.strip--ma.strip--flush-top { padding-top: 0; }                /* a one-up that follows the page head keeps the head's own air (review 2026-10-14: the rule above re-set padding-top after .strip--flush-top) */
/* A strip that ends on a ledger or an index keeps its 留白 above the works but closes at the ordinary strip padding, and the
   strip that follows a ledger opens short: the headless renders showed 400–500 px of empty ground between Home's series index
   and the TEDx stroke (review 2026-10-14). Wix: strip bottom padding 120 px, next strip top padding 72 px. */
.strip--ma.strip--ma-above { padding-bottom: var(--strip-y); }
.strip--after-ledger { padding-top: calc(var(--strip-y) * 0.6); }
@media (max-width: 767px) {
  .split-5-7, .split-4-8, .split-7-5, .split-8-4 { grid-template-columns: 1fr; }
  .offset-down, .offset-down-lg { margin-top: 0; }
  .offset-up { margin-top: 0; }
  .bleed-right, .bleed-left { margin-inline: calc(-1 * var(--gutter)); }
  .figure--aside, .figure--aside-left { grid-template-columns: 1fr; }
  .figure--aside-left > figcaption { order: 0; }
  .sec-head { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); }
}

/* 14.8 Buttons are text links with an ink underline that thickens on hover, or a seal-stamped label. No fills, no pills. */
.btn, .btn--primary, .btn--secondary, .btn--inverse, .btn--tertiary {
  min-height: 0; padding: 0 0 6px; border: 0; border-radius: 0; background: transparent;
  color: var(--ink); white-space: normal; text-align: left;
  box-shadow: inset 0 -1px 0 var(--ink);
  transition: box-shadow var(--ease);
}
.btn:hover, .btn--primary:hover, .btn--secondary:hover, .btn--inverse:hover, .btn--tertiary:hover {
  background: transparent; color: var(--ink); border-color: transparent; box-shadow: inset 0 -2px 0 var(--ink);
}
.btn--seal { box-shadow: none; padding-left: 22px; position: relative; }
.btn--seal::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 12px; height: 12px; background: var(--vermilion); }
.btn--seal:hover { box-shadow: inset 0 -1px 0 var(--ink); }
.btn--block { width: auto; }
.btn-row { gap: var(--s-4) var(--s-6); }
.link-arrow::after { content: " \2197"; font-size: 0.85em; }   /* external link: "↗" */

/* 14.9 Hero: the pine screen as a misty ground on washi, the vertical thesis, one seal, the portrait placed off-axis.
   Markup in components.html. The pine image is after Hasegawa Tōhaku, Pine Trees (Tokyo National Museum), public domain. */
@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }
.hero-pines {
  position: relative; isolation: isolate;
  min-height: 720px; padding-block: var(--s-8) 0;
  animation: hero-in 1.2s ease-out both;         /* the site's only animation (directive 17f) */
}
.hero-pines__ground {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: url("assets/new/processed/hero_pines.jpg") 60% 40% / cover no-repeat;
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.hero-pines--left .hero-pines__ground { background-image: url("assets/new/processed/hero_pines_02.jpg"); background-position: 40% 40%; }
/* WIX: a strip background has opacity but no mask, so the live site uses the baked grounds instead of this rule:
   hero_pines_ground.jpg (index), hero_pines_ground_left.jpg (works-calligraphy, FR/JA home) and hero_pines_ground_dark.jpg
   (works-buddhist), 2200 px, the 0.42 / 0.16 opacity and the bottom fade already in the file (manifest-roles.csv). Strip
   background image, Fit, no overlay; the 1.2 s fade below = strip entrance animation "Fade In", 1.2 s, once. */
.hero-pines__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  max-width: calc(var(--w-content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  align-items: end; min-height: calc(720px - var(--s-8));
}
.hero-pines__thesis { grid-column: 1 / span 3; grid-row: 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); min-height: 420px; margin: 0; }
.hero-pines__tc {
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 600 var(--fs-thesis) / 1.15 var(--font-tc); letter-spacing: 0.2em; color: var(--ink); margin: 0;
}
.hero-pines__en { font: italic 400 1.25rem / 1.35 var(--font-display); color: var(--ink); max-width: 13ch; letter-spacing: 0.01em; }
.hero-pines__seal { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--s-4); }   /* the viewport's one vermilion */
.hero-pines__text { grid-column: 3 / span 3; grid-row: 1; align-self: end; padding-bottom: var(--s-7); padding-left: var(--s-5); }
.hero-pines__text > * + * { margin-top: var(--s-4); }
.hero-pines__media { grid-column: 6 / span 7; grid-row: 1 / span 3; margin: 0 0 calc(-1 * var(--s-8)); z-index: 1; align-self: end; }   /* end, so the negative margin really hangs the portrait 96 px into the next strip (review 2026-10-14) */
.hero-pines__media img { width: 100%; height: auto; display: block; }
.hero-pines__media--still { grid-column: 7 / span 6; }    /* the 16:9 film still instead of the portrait */
.hero-pines__credit { grid-column: 1 / span 6; grid-row: 3; align-self: end; font: 500 0.75rem / 1.4 var(--font-display); letter-spacing: 0.06em; color: var(--stone); padding-block: var(--s-6) var(--s-4); }
.hero-pines + .strip { padding-top: calc(var(--strip-y) + var(--s-8)); }   /* room for the portrait that hangs below the hero */
/* Dark variant (works-buddhist.html, the Black Room): ink ground, the pines as a faint negative, gold type */
.hero-pines--dark { color-scheme: dark; --ivory: var(--d-ivory); --panel: var(--d-panel); --hairline: var(--d-hairline); --stone: var(--d-stone); --ink: var(--d-ink); --vermilion: var(--d-vermilion); background-color: var(--ivory); }
.hero-pines--dark .hero-pines__ground { opacity: 0.16; filter: invert(1) sepia(0.4); }
.hero-pines--dark .hero-pines__tc { color: var(--gold); }
@media (max-width: 1023px) {
  .hero-pines__thesis { grid-column: 1 / span 4; }
  .hero-pines__text { grid-column: 1 / span 5; grid-row: 2; padding-bottom: var(--s-6); padding-left: 0; }
  .hero-pines__seal { grid-row: 3; }
  .hero-pines__media { grid-column: 7 / span 6; grid-row: 1 / span 3; }   /* text 1–5, portrait 7–12: they shared column 6 and the portrait covered the text (review 2026-10-14) */
  .hero-pines__credit { grid-row: 4; }
}
@media (max-width: 767px) {
  .hero-pines { min-height: 0; padding-top: var(--s-6); }
  .hero-pines__grid { min-height: 0; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); }
  .hero-pines__thesis { grid-column: 1; grid-row: 1; min-height: 320px; }
  .hero-pines__text { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 0; }
  .hero-pines__media { grid-column: 1 / -1; grid-row: 2; margin: var(--s-6) calc(-1 * var(--gutter)) 0 var(--s-8); }
  .hero-pines__seal { grid-column: 1; grid-row: 3; }
  .hero-pines__credit { grid-column: 1 / -1; grid-row: 4; }
  .hero-pines + .strip { padding-top: var(--strip-y); }
}

/* 14.10 Credibility wall: the names large enough to read as a wall (directive 3) */
.cred-wall { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-6); padding-block: var(--s-5); }
.cred-wall + .cred-wall { margin-top: var(--s-7); }
.cred-wall__label { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
/* The dot hangs BEFORE each name inside a fixed gap (::before). The list is pulled left by one gap and
   clipped back by one gap, so the dot in front of the first name on EVERY line falls outside the clip:
   no wrapped line opens or ends with a stray dot (the .cred-row construction; review 2026-10-14). */
.cred-wall__names {
  --sep-w: 1.1em;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 0.2em;
  font: 400 clamp(1.5rem, 1.1rem + 1.5vw, 2.125rem) / 1.35 var(--font-display); color: var(--ink);
  margin-left: calc(-1 * var(--sep-w));
  clip-path: inset(0 0 0 var(--sep-w));
}
.cred-wall__names li { position: relative; display: inline-flex; align-items: baseline; margin-left: var(--sep-w); }
.cred-wall__names li::before { content: "\00B7"; position: absolute; top: 0; left: calc(-1 * var(--sep-w)); width: var(--sep-w); text-align: center; color: var(--moss); }
.cred-wall__names li:has(> .cred-wall__more) { flex-basis: 100%; }      /* the closing link takes its own line, with no dot */
.cred-wall__names li:has(> .cred-wall__more)::before { content: none; }
.cred-wall__year { font-size: 0.6em; letter-spacing: 0.04em; margin-left: 0.5em; color: var(--stone); font-variant-numeric: tabular-nums; }
.cred-wall__note { font-size: 0.6em; color: var(--stone); margin-left: 0.5em; font-style: italic; }
.cred-wall--xl .cred-wall__names { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.5rem); }
.cred-wall__more { margin-top: var(--s-3); }
@media (max-width: 767px) {
  .cred-wall { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .cred-wall__label { flex-direction: row; align-items: center; }
  .cred-wall__label .label-v { writing-mode: horizontal-tb; }
  .cred-wall__names { font-size: 1.375rem; }
}

/* 14.11 TEDx mark: the one permitted second red, on ivory only; replaces the seal in that viewport */
.tedx-mark { display: inline-block; font: 700 clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem) / 0.95 var(--font-tedx); letter-spacing: -0.035em; color: var(--ink); margin: 0; }
.tedx-mark__ted, .tedx-mark__x { color: var(--ted-red); }
.tedx-mark__x { font-size: 0.78em; vertical-align: 0.04em; }
.tedx-mark__sub { display: block; margin-top: var(--s-3); font: 500 var(--fs-label) / 1.3 var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
.strip--dark .tedx-mark, .room-dark .tedx-mark { color: var(--ink); }    /* never place .tedx-mark on a dark ground: the red is for ivory only */

/* 14.12 Series index: numbered I–V, bilingual, repeated on every series page and in wall labels */
.series-index { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid var(--hairline); }
.series-index__row {
  display: grid; grid-template-columns: 1fr 5fr 2fr 3fr 1fr; column-gap: var(--gap); align-items: baseline;
  padding-block: var(--s-4); border-bottom: var(--line) solid var(--hairline); color: var(--ink);
}
.series-index__row:hover .series-index__name { font-style: italic; }
.series-index__num { font: 400 var(--fs-h3) / 1.2 var(--font-display); letter-spacing: 0.06em; color: var(--moss); }
.series-index__name { font: 500 var(--fs-h3) / 1.25 var(--font-display); }
.series-index__tc { font: 600 0.78em / 1.3 var(--font-tc); margin-left: 0.6em; color: var(--ink); }
.series-index__years { font: 500 var(--fs-caption) / 1.4 var(--font-display); color: var(--stone); font-variant-numeric: tabular-nums; }
.series-index__media { font: 500 var(--fs-caption) / 1.4 var(--font-display); color: var(--stone); }
.series-index__link { justify-self: end; }
.series-index--compact .series-index__row { grid-template-columns: 1fr 7fr 4fr; }
.series-index--compact .series-index__media, .series-index--compact .series-index__link { display: none; }
/* On a series page the compact index stands above the commission band and the page's own row is set in italic (review 2026-10-14:
   moving between series cost two clicks through works.html#index). Wix: a repeater with the whole row linked; the current row italic. */
.series-index__row.is-current .series-index__name { font-style: italic; }
.series-index__row.is-current .series-index__num { color: var(--ink); }
.series-index__name:is(a):hover { font-style: italic; }
.series-tag { font: 500 var(--fs-caption) / 1.3 var(--font-display); letter-spacing: 0.08em; color: var(--moss); }   /* "Series II · Calligraphy 書法" inside a wall label */
@media (max-width: 767px) {
  .series-index__row { grid-template-columns: 2.5rem 1fr; row-gap: var(--s-1); }
  .series-index__years, .series-index__media { grid-column: 2; }
  .series-index__link { grid-column: 2; justify-self: start; }
}

/* 14.13 Footprint map: inline SVG (assets/new/map-footprint.svg), ivory/ink, one vermilion dot, EN + 繁中 city names */
.map-footprint { position: relative; }
.map-footprint__svg { display: block; width: 100%; height: auto; }
.map-footprint__arc { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: 0.42; }
.map-footprint__dot { fill: var(--ink); }
.map-footprint__leader { stroke: var(--stone); stroke-width: 0.9; opacity: 0.7; }
.map-footprint__home { fill: var(--vermilion); }
.map-footprint__city { font: 500 26px var(--font-display); fill: var(--ink); letter-spacing: 0.03em; }
.map-footprint__city--home { font-weight: 600; font-size: 30px; }
.map-footprint__tc { font: 600 21px var(--font-tc); fill: var(--moss); letter-spacing: 0.04em; }
.map-footprint__legend { margin-top: var(--s-3); font: 500 var(--fs-caption) / 1.5 var(--font-display); color: var(--stone); }
@media (max-width: 767px) {
  /* The map keeps its desktop type and scrolls sideways like a handscroll: the 40 px phone bump made Brussels, Frankfurt, Milan and Venice collide (review 2026-10-14). */
  .map-footprint { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .map-footprint__svg { min-width: 980px; }
}

/* 14.14 Language switch with four items: EN | 繁中 | FR | JA */
.lang-switch { gap: 8px; flex-wrap: wrap; }
.lang-switch a, .lang-switch [aria-current="true"] { font: 600 var(--fs-label) / 1 var(--font-display); letter-spacing: 0.16em; }
.lang-switch a:lang(zh-Hant), .lang-switch [aria-current="true"]:lang(zh-Hant) { font: 600 0.8125rem / 1 var(--font-tc); letter-spacing: 0.04em; }
.lang-switch__sep { opacity: 0.6; }
@media (max-width: 1023px) { .nav__cluster > .lang-switch { display: inline-flex; } }
@media (max-width: 767px) { .nav__cluster > .lang-switch { display: none; } }

/* 14.15 Voices, the film, artworks on washi, photographs */
.voice-card { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gap); row-gap: var(--s-3); align-items: end; color: var(--ink); }
.voice-card--reverse { grid-template-columns: 7fr 5fr; }
.voice-card--reverse .voice-card__media { order: 2; }
.voice-card__media { margin: 0; }
.voice-card__media img { width: 100%; height: auto; display: block; }
.voice-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-3); }
.voice-card__quote { font: italic 400 var(--fs-quote) / 1.3 var(--font-display); color: var(--ink); text-wrap: balance; margin: 0; }
.voice-card__quote::before { content: "\201C"; } .voice-card__quote::after { content: "\201D"; }
.voice-card__name { font: 500 var(--fs-lede) / 1.3 var(--font-display); color: var(--ink); margin-top: var(--s-2); }
.voice-card__meta { font: 500 var(--fs-caption) / 1.4 var(--font-display); color: var(--stone); }
.voice-card__link { margin-top: var(--s-2); align-self: flex-start; }
.voices { display: grid; row-gap: var(--s-8); }
.voices--teaser { grid-template-columns: 1fr; }
/* Typeset voices (review 2026-10-14): until watermark-free exports and a portrait of each speaker exist, a voice is a pull quote
   with name, country and one line, no photograph and no link out. Wix: a text element per voice, Cormorant italic. */
.voices--text { row-gap: var(--s-7); }
.voices--text .voice-card, .voices--text .voice-card--reverse { grid-template-columns: 1fr; max-width: var(--w-reading); }
.voices--text .voice-card__body { padding-bottom: 0; }
@media (max-width: 767px) { .voice-card, .voice-card--reverse { grid-template-columns: 1fr; } .voice-card--reverse .voice-card__media { order: 0; } }

.film-card { display: grid; grid-template-columns: auto 8fr 3fr; column-gap: var(--s-5); align-items: end; color: var(--ink); }
.film-card > .title-v { padding-bottom: var(--s-3); }
.film-card__poster { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--panel); }
.film-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--ease); }
.film-card:hover .film-card__poster img { opacity: 0.92; }
.film-card__label { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-2); }
.film-card__title { font: italic 500 var(--fs-h3) / 1.25 var(--font-display); }
.film-card__sub { font: 600 0.94em / 1.5 var(--font-tc); color: var(--stone); }
.film-card__meta { font: 500 var(--fs-caption) / 1.4 var(--font-display); color: var(--stone); }
@media (max-width: 767px) { .film-card { grid-template-columns: 1fr; } .film-card > .title-v { writing-mode: horizontal-tb; } }

/* Artworks sit on the washi with a soft 2 px inner shadow, never a hard keyline; photographs keep the keyline baked in the file */
.artwork-card__media { position: relative; }
.artwork-card__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 2px rgba(26, 23, 20, 0.24); pointer-events: none; }
.artwork-card--keyline .artwork-card__media img, .img--keyline { outline: 0; }
.artwork-card--disc .artwork-card__media::after { content: none; }   /* an isolated round work on a grained ivory canvas (card_01-03, 09-11): no square to shadow (review 2026-10-14) */
.img--graded { filter: none; border: 0; }
.img--doc { filter: saturate(0.9); }     /* only the Wix-hosted documentary images not yet re-exported */
.insitu img, .figure--aside img { width: 100%; height: auto; }

/* 14.16 Ledgers, wall labels, forms: hairlines stay inside components (they are mounting-silk borders, not section rules) */
.wall-label::before { background: var(--moss); width: 28px; }
.wall-label__no { color: var(--moss); }
.ledger__row { padding-block: var(--s-4); }
.field__input, .field__select, .field__textarea { border-bottom-color: var(--stone); }
.letter-card { padding: var(--s-7) var(--s-6); }

/* 14.17 Motion: the hero fade only. Hover opacity is a transition, not an animation; everything else is still. */
.strip, .cat-head, img { animation: none; }

/* 14.18 Nav fit: six items in Cormorant small caps inside 980 px; the map's year/notes tspan */
.nav__links { gap: 18px; }
.nav__links a { font-size: 0.75rem; letter-spacing: 0.14em; }
.map-footprint__years { font: italic 500 22px var(--font-display); fill: var(--stone); letter-spacing: 0.02em; }
/* (phone map type: see 14.13 — the SVG scrolls at desktop size) */

/* ===========================================================================
   15. REVIEW 2026-10-14 (creative director, Home) — completions to section 14
   ========================================================================== */

/* 15.1 The seal is her seal. Alpha keyed from the artist's own name seal beneath the signature 琪鈞 at the
   left end of the gold-on-black Heart Sutra (B1, direction 0.16, assets/wix/97c420ad01bfe2a0.jpg x 178–268,
   y 600–696); the colour comes from --vermilion, so it follows the theme. Flat files seal_128.png / seal_512.png
   (vermilion on transparent) serve Wix and the favicon. Swap the mask when the client supplies a high-resolution
   scan of the carved seal (spec 16.8); the 60-px source is soft above 48 px display. */
.seal, .seal.is-placeholder {
  display: inline-block; box-shadow: none; background: var(--vermilion);
  -webkit-mask: url("assets/new/processed/seal_mask_128.png") center / contain no-repeat;
          mask: url("assets/new/processed/seal_mask_128.png") center / contain no-repeat;
}
.hero-pines__seal { width: 32px; height: 32px; }                 /* the hero's one vermilion: the seal, not a button marker */
.footer .footer__seal.seal { display: none; }                    /* the colophon seal 64 px above is the footer viewport's one vermilion */
@media (max-width: 767px) { .hero-split .hero-split__seal { display: none; } }   /* v1 split hero on phones: unchanged */

/* 15.2 Dark grounds (OS dark mode, [data-theme="dark"], .strip--dark, .room-dark, .hero-pines--dark):
   moss lifts to its dark value; the ink strokes (black in the external SVG, which has no currentColor context)
   invert; the ground grain switches to the ivory tile; the pines become a faint negative as in .hero-pines--dark. */
:root[data-theme="dark"], .strip--dark, .band--dark, .room-dark, .hero-pines--dark { --moss: var(--d-moss); }
.room-dark .colophon, .room-dark .footer { --moss: var(--l-moss); }
:root[data-theme="dark"] .strip--ink-top::before { filter: invert(1) brightness(1.2); }
:root[data-theme="dark"] body, :root[data-theme="dark"] .nav, :root[data-theme="dark"] .footer, :root[data-theme="dark"] .strip--panel,
:root[data-theme="dark"] .band--panel, :root[data-theme="dark"] .letter-card, :root[data-theme="dark"] .menu-sheet { background-image: var(--washi-light); }
:root[data-theme="dark"] .hero-pines__ground { opacity: 0.16; filter: invert(1) sepia(0.4); }
:root[data-theme="dark"] .rule-ink--real { filter: invert(1) brightness(1.2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --moss: var(--d-moss); }
  :root:not([data-theme="light"]) .strip--ink-top::before { filter: invert(1) brightness(1.2); }
  :root:not([data-theme="light"]) body, :root:not([data-theme="light"]) .nav, :root:not([data-theme="light"]) .footer,
  :root:not([data-theme="light"]) .strip--panel, :root:not([data-theme="light"]) .band--panel,
  :root:not([data-theme="light"]) .letter-card, :root:not([data-theme="light"]) .menu-sheet { background-image: var(--washi-light); }
  :root:not([data-theme="light"]) .hero-pines__ground { opacity: 0.16; filter: invert(1) sepia(0.4); }
  :root:not([data-theme="light"]) .rule-ink--real { filter: invert(1) brightness(1.2); }
  :root:not([data-theme="light"]) .room-dark .colophon, :root:not([data-theme="light"]) .room-dark .footer { --moss: var(--d-moss); }
}

/* 15.3 Review 2026-10-14 (creative director, Acquire/Contact): on phones a bleeding figure keeps its caption inside the
   gutter. .bleed-left/.bleed-right pull the whole figure out by one gutter at ≤767 px, and .figure--aside collapses to one
   column, so its figcaption (set beside the image on desktop) landed flush against the screen edge beneath it.
   This is the single source: the copy in talks-press.html's page-only CSS was removed on 2026-10-14. */
@media (max-width: 767px) {
  .bleed-left > figcaption, .bleed-right > figcaption { padding-inline: var(--gutter); }
}

/* 16 · 2026-10-14 evening: the artist's own gold screen replaces the Tōhaku ground; hero copy set in ink for contrast. */
.hero-pines__ground { background-image: none; opacity: 0; }
.hero-pines__text .eyebrow { color: var(--ink); }
.hero-pines__text .u-stone { color: var(--ink); }
.hero-pines__media img { aspect-ratio: 1992 / 1328; object-fit: cover; }
/* 16.1 hero refinements (2026-10-14 evening): wider text column, one-line eyebrow, media bottom-aligned, ink copy. */
@media (min-width: 768px) {
  .hero-pines__text { grid-column: 3 / span 4; padding-left: 0; }
  .hero-pines__media { grid-column: 7 / span 6; }
}
.hero-pines__text .eyebrow { color: var(--ink) !important; white-space: nowrap; }
.hero-pines__text .body { color: var(--ink) !important; }
.hero-pines__thesis { color: var(--ink); }

/* 16.2 Cover hero (2026-10-14 evening): the artist's gold screen as a full-bleed cover, the vertical thesis over the
   concrete wall at left, the copy in an ivory band beneath. Replaces the hanging-portrait hero on index.html. */
.hero-pines--cover { min-height: 0; padding-block: 0; }
.hero-pines--cover .hero-pines__media { position: relative; margin: 0; height: clamp(480px, 78vh, 820px); overflow: hidden; z-index: 0; }
.hero-pines--cover .hero-pines__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; aspect-ratio: auto; display: block; }
.hero-pines--cover .hero-pines__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(239,233,221,.86) 0%, rgba(239,233,221,.55) 14%, rgba(239,233,221,0) 34%); }
.hero-pines--cover .hero-pines__grid { position: absolute; inset: 0 0 auto 0; min-height: 0; align-items: start; padding-top: var(--s-7); z-index: 1; pointer-events: none; }
.hero-pines--cover .hero-pines__thesis { grid-column: 1 / span 2; grid-row: 1; pointer-events: auto; }
.hero-pines--cover .hero-pines__seal { grid-column: 1; grid-row: 2; margin-top: var(--s-5); }
.hero-pines--cover .hero-pines__band { background: var(--ivory); background-image: var(--washi); }
.hero-pines--cover .hero-pines__text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); max-width: calc(var(--w-content) + 2 * var(--gutter)); margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-7); }
.hero-pines--cover .hero-pines__text > * { grid-column: 3 / span 7; }
.hero-pines--cover .hero-pines__text > * + * { margin-top: var(--s-4); }
.hero-pines--cover .hero-pines__text .body { max-width: 34em; font-size: 1.1875rem; }
.hero-pines--cover + .strip { padding-top: var(--strip-y); }
@media (max-width: 767px) {
  .hero-pines--cover .hero-pines__media { height: clamp(360px, 62vh, 560px); }
  .hero-pines--cover .hero-pines__media img { object-position: 50% 45%; }
  .hero-pines--cover .hero-pines__text > * { grid-column: 1 / -1; }
}

/* 16.3 Voices without portraits (acquire.html): the three quotes set as a plain column, no repeated stills. */
.voice-card--text { grid-template-columns: minmax(0, 1fr); }
.voice-card--text .voice-card__body { grid-column: 1 / -1; max-width: 40em; }
/* 16.4 Phone fixes (2026-10-14 evening): the Enquire button leaves the bar below 768 px (it lives in the menu sheet),
   and the footprint map scales to the viewport instead of clipping at 980 px. */
@media (max-width: 767px) {
  .nav__enquire { display: none; }
}
.map-footprint__svg { width: 100%; max-width: 100%; height: auto; display: block; }

/* 16.5 Ink ground (2026-10-14, the artist's request): her large brush character laid under the washi at ~16 % as a
   background on a few quiet strips, and in ivory on dark strips. Never behind running text columns at full size:
   it sits to the right/left edge and is cut by the strip. */
.strip--ink-ground { position: relative; isolation: isolate; }
.strip--ink-ground::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("assets/new/processed/ink_ground.png") right -6% top -4% / auto 118% no-repeat; }
.strip--ink-ground--left::after { background-position: left -10% top -6%; }
.strip--dark.strip--ink-ground::after, .room-dark .strip--ink-ground::after { background-image: url("assets/new/processed/ink_ground_light.png"); }
@media (max-width: 767px) { .strip--ink-ground::after { background-size: auto 70%; background-position: right -30% top 0; } }

/* ===========================================================================
   17. 2026-10-15 — A lighter site (the artist: "the whole site is too dark")
   The washi ground lifts toward paper white, the brush-character grounds fall to a whisper, and the dark rooms
   (Home #representation, works-buddhist.html) become pale: the gold-on-black scrolls stay dark, the rooms around them do not.
   The Home hero becomes her gold screen alone, shown whole; Home shows the sutras more fully.
   ========================================================================== */

/* 17.1 Ground: a step lighter, still warm */
:root {
  --l-ivory: #F8F5EF;
  --l-panel: #F0EBE2;
  --l-hairline: #E2DBCE;
}

/* 17.2 Brush-character grounds: from ~16 % to a whisper */
.strip--ink-ground::after { opacity: 0.35; }

/* 17.3 No dark rooms: .strip--dark, .room-dark and .hero-pines--dark take the light set */
.strip--dark, .band--dark, .room-dark, .hero-pines--dark {
  color-scheme: light;
  --ivory: var(--l-ivory); --panel: var(--l-panel); --hairline: var(--l-hairline);
  --stone: var(--l-stone); --ink: var(--l-ink); --vermilion: var(--l-vermilion); --moss: var(--l-moss);
}
.strip--dark, .band--dark { background-color: var(--panel); background-image: var(--washi); }
.room-dark, .hero-pines--dark { background-color: var(--ivory); background-image: var(--washi); }
.strip--dark.strip--ink-top::before, .room-dark .strip--ink-top::before { filter: none; }
.strip--dark.strip--ink-ground::after, .room-dark .strip--ink-ground::after { background-image: url("assets/new/processed/ink_ground.png"); }
.hero-pines--dark .hero-pines__tc { color: var(--ink); }

/* 17.4 Cover hero: the screen alone (hero_screen.jpg, 3:2), never cropped into the work.
   Desktop: 1.85:1 band, the crop takes only bare wall and floor; the thesis sits over the wall at the viewport's left edge.
   Below 1024 px the photograph is shown whole at 3:2 and the thesis moves beside the copy beneath it. */
.hero-pines--cover .hero-pines__media { height: auto; aspect-ratio: 1.85 / 1; }
.hero-pines--cover .hero-pines__media img { object-position: 50% 60%; }
.hero-pines--cover .hero-pines__media::after {
  background: linear-gradient(90deg, rgba(248,245,239,.92) 0%, rgba(248,245,239,.78) 17%, rgba(248,245,239,.3) 25%, rgba(248,245,239,0) 30%);
}
.hero-pines--cover .hero-pines__grid { max-width: none; padding-inline: clamp(24px, 5vw, 96px); padding-top: var(--s-6); }
@media (max-width: 1023px) {
  .hero-pines--cover { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .hero-pines--cover .hero-pines__media { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 3 / 2; }
  .hero-pines--cover .hero-pines__media img { object-position: 50% 50%; }
  .hero-pines--cover .hero-pines__media::after { content: none; }
  .hero-pines--cover .hero-pines__grid { display: contents; }
  .hero-pines--cover .hero-pines__thesis { grid-column: 1; grid-row: 2; min-height: 0; padding: var(--s-6) 0 0 var(--gutter); }
  .hero-pines--cover .hero-pines__seal { grid-column: 1; grid-row: 3; align-self: start; margin: var(--s-4) 0 var(--s-7) var(--gutter); }
  .hero-pines--cover .hero-pines__band { grid-column: 2; grid-row: 2 / span 2; background: none; }
  .hero-pines--cover .hero-pines__text { display: block; max-width: none; padding: var(--s-6) var(--gutter) var(--s-7) var(--s-5); }
  .hero-pines--cover .hero-pines__text .eyebrow { white-space: normal !important; }
}
@media (max-width: 767px) {
  .hero-pines--cover .hero-pines__text { padding-left: var(--s-4); }
}

/* 17.5 Home · the sutras (Series IV), shown more fully: a note beside the detail, the gold-on-black scroll whole,
   then the saffron and cursive scrolls as sideways tracks that start at the right end, where the sutra begins. */
.sutra-set { margin-top: var(--s-8); }
.sutra-set .sec-head { margin-bottom: 0; }
.sutra-scroll { margin: var(--s-8) 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-3); }
.sutra-scroll__media { grid-column: 1 / -1; display: block; position: relative; }
.sutra-scroll__media img { width: 100%; height: auto; display: block; }
.sutra-scroll > .wall-label { grid-column: 1 / span 5; }
@media (max-width: 767px) {
  .sutra-scroll__media img { aspect-ratio: 3 / 1; object-fit: cover; object-position: right center; }
  .sutra-scroll > .wall-label { grid-column: 1 / -1; }
}

/* 17.6 Brush and crest (the artist, 2026-10-15: "more of the brush in the ground, or a Japanese family crest").
   The brush-character grounds are re-inked in gold leaf (brush_ground_gold.png: her character from ink_ground.png,
   alpha lifted 3x, #B8975A), so the brush reads more strongly without darkening the page.
   Her crest (kamon.svg, 丸に八葉蓮: a ring, eight lotus petals each cut by a vein, eight inner petals, the seed head) is
   an original mark drawn for her, never a family's registered crest. kamon-wash.svg is the same mark in gold at 13 %,
   laid as a watermark on three quiet grounds. .kamon draws it in any colour through a mask. */
.strip--ink-ground::after,
.strip--dark.strip--ink-ground::after, .room-dark .strip--ink-ground::after {
  background-image: url("assets/new/processed/brush_ground_gold.png"); opacity: 0.6;
}
.kamon { display: inline-block; width: 48px; height: 48px; background: var(--gold); vertical-align: middle;
  -webkit-mask: url("assets/new/kamon.svg") center / contain no-repeat; mask: url("assets/new/kamon.svg") center / contain no-repeat; }
.kamon--ink { background: var(--ink); }
.hero-pines--cover .hero-pines__band,
#letter, #seen {
  background-image: url("assets/new/kamon-wash.svg"), var(--washi);   /* the strip repeats the body grain so the two tiles stay aligned */
  background-repeat: no-repeat, repeat;
  background-size: clamp(220px, 28vw, 380px), auto;
  background-position: right max(var(--gutter), calc(50% - 600px)) center, 0 0;
}
#seen { background-position: right max(var(--gutter), calc(50% - 640px)) center, 0 0; background-size: clamp(180px, 22vw, 300px), auto; }
#works .series-index { margin-top: var(--s-8); }
@media (max-width: 1023px) {
  .hero-pines--cover .hero-pines__band { background-image: none; }
  .hero-pines--cover { background-image: url("assets/new/kamon-wash.svg"), var(--washi); background-repeat: no-repeat, repeat;
    background-size: 220px, auto; background-position: right -40px bottom 24px, 0 0; }
}

/* 17.7 The washi grain at 45 % of its v2 strength: on the lighter ground the 5 % tile read as grey mottling. */
:root { --washi: url("assets/new/processed/washi_alpha_soft_256.png"); }

/* 17.8 Home · the Taipei hotel lobby (Series V), shown wide after the sutras: the photograph at the content width, label beneath. */
.work-wide { margin: var(--s-8) 0 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s-3); }
.work-wide__media { grid-column: 1 / -1; display: block; }
.work-wide__media img { width: 100%; height: auto; display: block; transition: opacity var(--ease); }
.work-wide__media:hover img { opacity: 0.92; }
.work-wide > .wall-label { grid-column: 1 / span 5; }
@media (max-width: 767px) { .work-wide > .wall-label { grid-column: 1 / -1; } }
/* The flipped one-up (Home, the hotel corridor): the label at left, the photograph at cols 5–12. */
@media (min-width: 768px) {
  .hang--one.hang--flip > .artwork-card > .artwork-card__media { grid-column: 5 / span 8; grid-row: 1; }
  .hang--one.hang--flip > .artwork-card > .wall-label { grid-column: 1 / span 4; grid-row: 1; }
}

/* 17.9 Home · TEDx without the stage photograph (the artist, 2026-10-15): the intro at reading width, the clip cards beneath. */
.tedx-intro { max-width: var(--w-reading); }
/* 17.10 Footprint · the countries' flags beneath the map (flag-icons 7.2.3, MIT, local SVG copies in assets/flags/). */
.flag-row { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.flag-row li { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 var(--fs-caption) / 1.3 var(--font-body); color: var(--stone); white-space: nowrap; }
.flag-row img { width: 24px; height: 18px; display: block; box-shadow: 0 0 0 1px var(--hairline); }
@media (max-width: 767px) { .flag-row { gap: var(--s-2) var(--s-4); } }

/* 17.11 Series galleries: every work, in a quiet masonry */
.gallery{columns:3 260px;column-gap:24px;margin-top:40px}
.gallery__item{break-inside:avoid;margin:0 0 24px}
.gallery__item img{display:block;width:100%;height:auto}
@media (max-width:600px){.gallery{columns:2 140px;column-gap:12px}.gallery__item{margin-bottom:12px}}
.artwork-card--pair .artwork-card__media img{width:100%;height:auto}
/* 17.12 Patent certificate */
.patent-cert{max-width:600px;margin:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.patent-cert .caption{grid-column:1/-1}
.patent-cert img{display:block;width:100%;height:auto;box-shadow:0 1px 0 var(--l-hairline,#E2DBCE),0 12px 32px rgba(0,0,0,.08)}
.patent-cert .caption{margin-top:8px}
.gallery--scrolls{columns:1}
.gallery--scrolls .gallery__item{margin-bottom:32px}
.gallery--case{columns:4 160px;column-gap:16px;margin:24px 0 64px}
.gallery--case .gallery__item{margin-bottom:16px}