/* =================================================================
   許哲睿 HSU Che-jui — site.css
   Forked from the prototype styles.css (black-and-white editorial /
   Apple-serif design language) and extended for the multi-page,
   trilingual (zh / en / ja) portfolio.

   Kept verbatim from the prototype: tokens, hero, block-heads, series,
   awards, manifesto, id-series, statement/prose, sutra, collages,
   lightbox, reveal, rails, paper/subpage.
   New here: solid-by-default nav + language switch, home-hero, buttons,
   breadcrumb, feature/work cards, highlight + CV timelines, gallery grid,
   global site-footer, page-related block.
   ================================================================= */

:root {
  /* ---- Palette ---- */
  --c-bg:            #ffffff;
  --c-bg-muted:      #f5f5f7;
  --c-bg-paper:      #f4f0e8;
  --c-ink:           #000000;
  --c-text:          #1d1d1f;
  --c-text-dim:      #6e6e73;
  --c-text-faint:    #86868b;
  --c-invert:        #f5f5f7;
  --c-invert-dim:    rgba(245,245,247,.62);
  --c-line:          rgba(0,0,0,.10);
  --c-line-invert:   rgba(255,255,255,.14);
  --c-accent:        #d23b2e;   /* seal / cinnabar red — worship, stamp, idolatry */
  --c-accent-ink:    #a82a20;

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-serif: Georgia, "Songti TC", "STSongti-TC-Regular", "Noto Serif TC",
                "Source Han Serif TC", "MingLiU", serif;

  /* fluid scale */
  --t-eyebrow: 0.78rem;
  --t-body:    clamp(1rem, 0.96rem + 0.2vw, 1.1875rem);
  --t-lede:    clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  --t-h3:      clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --t-h2:      clamp(2rem, 1.3rem + 3vw, 4rem);
  --t-display: clamp(2.6rem, 1rem + 8vw, 7.5rem);

  /* ---- Geometry ---- */
  --nav-h:       52px;
  --wrap:        1120px;
  --wrap-narrow: 760px;
  --wrap-read:   720px;
  --pad-inline:  clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);
  --r:    18px;
  --r-lg: 28px;

  /* ---- Body text alignment ----
     窄欄位（手機）不做齊行：欄寬只容得下約 20 個中文字，一遇到不能斷的長字
     （decontextualization、MicroMasters®）就得把整行撐開，中文出現大字距、
     英文出現空白河流。≥720px 才齊行。 */
  --align-body: justify;

  /* ---- Motion ---- */
  --ease:   cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
  --dur:    .8s;
}

/* 手機窄欄只讓「英文」退回靠左：英文靠詞間空白補齊行，窄欄一撐就成空白河流；
   中日文字等寬且幾乎可在任一字後斷行，齊行不會撐開字距，故維持齊行（站主 2026-07-25 裁定
   不接受手機上的右緣參差）。以 lang 屬性判斷，不是以頁面語言，因為 zh/ja 頁內也有英文段落。 */
@media (max-width: 719.98px) {
  html[lang="en"], [lang="en"] { --align-body: left; }
  [lang="zh-Hant"], [lang="zh-Hant-TW"], [lang="ja"] { --align-body: justify; }
}

/* 依桌機寬度手切的換行；窄欄會被迫二次折行、留下孤字，故手機停用 */
@media (max-width: 719.98px) { br.br-wide { display: none; } }

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; }
strong { font-weight: 600; }
::selection { background: var(--c-accent); color: #fff; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: #fff; color: var(--c-text);
  padding: .7rem 1.1rem; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-inline); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--read   { max-width: var(--wrap-read); }

/* standard pages clear the fixed nav; hero pages fill to the top themselves */
main { padding-top: var(--nav-h); }
.has-hero main { padding-top: 0; }

.section { padding-block: var(--space-section); position: relative; }
.section--light  { background: var(--c-bg); }
.section--muted  { background: var(--c-bg-muted); }
.section--paper  { background: var(--c-bg-paper); }
.section--dark   { background: var(--c-ink); color: var(--c-invert); }

/* ---------------------------------------------------------------- nav */
/* Default = solid, light, dark text: safe on every light page (home, works,
   about, texts, 404). Dark-hero pages (CBS) opt into a transparent overlay
   until scrolled via body.hero-dark. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255,255,255,.72);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-line);
  transition: background .4s var(--ease-io), border-color .4s var(--ease-io), color .4s var(--ease-io);
}
.hero-dark .nav:not(.is-scrolled) {
  background: rgba(0,0,0,.28);
  color: #fff;
  border-bottom-color: transparent;
}
.nav.is-scrolled {
  background: rgba(255,255,255,.72);
  color: var(--c-text);
  border-bottom-color: var(--c-line);
}
.nav__inner {
  height: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: flex; align-items: center; gap: 1rem;
}
.nav__brand { display: inline-flex; align-items: baseline; gap: .5rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.nav__brand-name { font-size: .98rem; }
.nav__brand-sub { font-size: .82rem; color: var(--c-text-dim); font-weight: 500; }
.hero-dark .nav:not(.is-scrolled) .nav__brand-sub { color: rgba(255,255,255,.7); }
.nav__links { margin-inline: auto; display: flex; gap: clamp(.6rem, 1.6vw, 2rem); }
.nav__links a { font-size: .85rem; opacity: .85; padding: .3rem .2rem; position: relative; transition: opacity .25s; white-space: nowrap; }
.nav__links a:hover { opacity: 1; }
.nav__links a.is-active { opacity: 1; }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: .2rem; right: .2rem; bottom: -3px;
  height: 2px; background: var(--c-accent); border-radius: 2px;
}
/* language switch 中｜EN｜日 */
.nav__lang { display: inline-flex; align-items: center; gap: .1rem; font-size: .8rem; }
.nav__lang a { padding: .2rem .34rem; opacity: .58; border-radius: 6px; transition: opacity .25s, background .25s; }
.nav__lang a:hover { opacity: 1; background: rgba(128,128,128,.14); }
.nav__lang a.is-current { opacity: 1; font-weight: 600; color: var(--c-accent); }
.nav__lang .nav__lang-sep { opacity: .3; }

@media (max-width: 760px) {
  .nav__inner { gap: .5rem; }
  .nav__brand-sub { display: none; }
  /* 長標籤語言（日文テキスト/プロフィール）窄版改為可橫滑列，不折行不擠壓 */
  .nav__links { margin-inline: auto; gap: clamp(.55rem, 3.5vw, 1.3rem); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a { font-size: .8rem; opacity: .92; flex: none; }
  .nav__lang { font-size: .74rem; flex: none; }
  .nav__lang a { padding: .2rem .24rem; }
}
@media (max-width: 420px) {
  .nav__brand-name { font-size: .9rem; }
}

/* ---------------------------------------------------------------- hero (CBS / dark cover) */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad-inline) clamp(4rem, 10vh, 8rem);
  color: #fff; overflow: hidden;
  background: #0a0a0a;
}
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--nav-h);
  background: #0a0a0a; z-index: 4; pointer-events: none;
}
.hero__media { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
@media (max-width: 700px) {
  /* landscape cover image can't fill a portrait phone without heavy side-crop;
     show it whole (contain) in the upper area, title below on the black hero.
     shorter hero so the contained band isn't lost in a sea of black. */
  .hero.hero:not(.hero--framed) { min-height: 72vh; }
  .hero__media { top: var(--nav-h); bottom: auto; height: 52vh; }
  .hero__media img { height: 100%; object-fit: contain; object-position: center top; }
}
@media (min-width: 701px) {
  .hero__media { top: var(--nav-h); transform-origin: center top; }
  .hero__media img { height: 100%; object-fit: contain; object-position: 50% 26%; transform: none; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 62%),
    linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 34%, rgba(0,0,0,.18) 62%, rgba(0,0,0,0) 82%);
}
.hero__copy { position: relative; z-index: 2; max-width: min(30rem, 88vw); text-shadow: 0 1px 30px rgba(0,0,0,.4); }
.hero__title { display: flex; flex-direction: column; gap: .1em; margin-bottom: 0; }
.hero__title-en {
  font-size: var(--t-display); font-weight: 600; letter-spacing: -.035em; line-height: .94;
  margin-left: -0.02em; padding-bottom: 0.1516em;
}
.hero__title-zh {
  font-size: clamp(1.4rem, .8rem + 2.6vw, 2.8rem);
  font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.92); margin-bottom: 0.125em;
}
.hero__lede { font-size: var(--t-lede); line-height: 1.45; max-width: 34ch; color: rgba(255,255,255,.9); font-weight: 400; }
.hero__cue {
  position: absolute; left: 50%; bottom: 1.6rem; z-index: 2;
  width: 26px; height: 42px; translate: -50% 0;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 14px;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__cue span { width: 3px; height: 8px; border-radius: 2px; background: #fff; animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0%{ opacity:0; transform: translateY(0);} 25%{opacity:1;} 60%{opacity:0; transform: translateY(12px);} 100%{opacity:0;} }

/* ---------------------------------------------------------------- hero — framed variant (2026-07-12 revision B)
   works/answer + works/medicine (zh/en/ja, 6 pages). Kept from the previous
   revision: dark ground (.hero's #0a0a0a), the white-matted print
   (object-fit:contain, never cropped — the artwork carries the film's black
   negative rebate so it must stay whole), the CBS-style title/lede type
   treatment (.hero__title-en/-zh, .hero__lede — untouched, shared with the
   base .hero). Changed here per the artist's direct instruction: this is no
   longer a centered stack with the title below the photo. Text now sits in a
   left column, vertically centered, next to the framed print on the right —
   two columns on tablet/desktop (>=760px), single column (photo above text,
   centered) on mobile. The scrim stays mounted (harmless — the ground is
   already near-black) rather than being torn out for a one-line CSS saving. */
.hero.hero--framed {
  justify-content: center;
  align-items: center;
  gap: clamp(1.6rem, 3.4vw, 2.6rem);
  padding: calc(var(--nav-h) + clamp(1.6rem, 4vw, 3rem)) var(--pad-inline) clamp(2.4rem, 6vh, 4rem);
  text-align: center;
}
.hero--framed .hero__frame {
  position: relative; z-index: 1;
  margin: 0; background: #fff; padding: clamp(.6rem, 1.6vw, 1.4rem);
  border-radius: 6px; box-shadow: 0 30px 70px -28px rgba(0,0,0,.6);
  max-width: min(640px, 92vw);
}
.hero--framed .hero__frame img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 56vh; margin-inline: auto;
  object-fit: contain;
}
.hero--framed .hero__copy {
  position: relative; z-index: 2; max-width: min(34rem, 92vw); margin-inline: auto;
}
.hero--framed .hero__lede { margin-inline: auto; }

@media (min-width: 760px) {
  .hero.hero--framed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    /* full-bleed black like CBS hero; content stays centered within --wrap */
    width: 100%; max-width: none; margin-inline: 0;
    padding-inline: max(var(--pad-inline), calc((100% - var(--wrap)) / 2));
    text-align: left;
  }
  .hero--framed .hero__copy { order: 1; margin-inline: 0; max-width: 34rem; }
  .hero--framed .hero__frame { order: 2; margin-inline: auto; }
  .hero--framed .hero__lede { margin-inline: 0; }
}

/* ---------------------------------------------------------------- home hero (light, editorial split) */
.home-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 82% 0%, #faf7f1 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #faf8f4 100%);
  padding-top: calc(var(--nav-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.home-hero__inner { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.home-hero__eyebrow {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-accent); font-weight: 600; margin-bottom: clamp(1rem, 2.5vw, 1.6rem);
}
.home-hero__name { display: flex; flex-direction: column; gap: .1em; margin-bottom: clamp(1.1rem, 2.5vw, 1.7rem); }
.home-hero__name .zh {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 1.2rem + 9vw, 6.4rem); font-weight: 600;
  letter-spacing: .06em; line-height: 1; color: var(--c-text);
}
.home-hero__name .en {
  font-size: clamp(1.05rem, .9rem + 1.1vw, 1.7rem); font-weight: 500;
  letter-spacing: .02em; color: var(--c-text-dim); margin-top: .5em;
}
.home-hero__rule { width: 3.5rem; height: 3px; background: var(--c-accent); border-radius: 2px; margin-bottom: clamp(1.2rem, 2.5vw, 1.7rem); }
.home-hero__lede {
  font-size: var(--t-lede); line-height: 1.55; color: var(--c-text); font-weight: 400;
  max-width: 40ch; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); text-wrap: pretty;
  text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto;
}
.home-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.home-hero__portrait {
  position: relative; justify-self: center;
  max-width: min(30rem, 90vw); border-radius: var(--r-lg); overflow: hidden;
  background: #fff;
}
.home-hero__portrait img { width: 100%; height: auto; display: block; }
@media (min-width: 880px) {
  .home-hero__inner { grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); }
  .home-hero__portrait { justify-self: end; max-width: 34rem; }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 500; line-height: 1;
  padding: .8rem 1.4rem; border-radius: 999px;
  border: 1px solid var(--c-line); color: var(--c-text); background: transparent;
  transition: background .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: rgba(0,0,0,.28); }
.btn--primary { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
.btn--primary:hover { background: var(--c-accent); border-color: var(--c-accent); }
.link-more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500; color: var(--c-accent-ink); transition: gap .25s var(--ease);
}
.link-more:hover { gap: .75rem; }

/* ---------------------------------------------------------------- breadcrumb */
.breadcrumb { padding: clamp(1.4rem, 3vw, 2.2rem) 0 0; }
.breadcrumb ol { list-style: none; padding-block: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .85rem; color: var(--c-text-dim); }
.breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: var(--c-text-faint); }
.breadcrumb a { color: var(--c-text-dim); transition: color .2s; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb [aria-current="page"] { color: var(--c-text); }

/* ---------------------------------------------------------------- block heads */
.eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1rem; }
.block-head { max-width: min(52rem, 100%); margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.block-head--center { max-width: none; text-align: center; margin-inline: auto; }
.block-head--center .eyebrow { color: var(--c-accent); }
.block-head__title { font-size: var(--t-h2); }
.block-head__lede { margin-top: 1.2rem; font-size: var(--t-lede); line-height: 1.45; color: var(--c-text-dim); font-weight: 400; max-width: 46ch; text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.block-head--center .block-head__lede { margin-inline: auto; text-align: center; }
.block-head--invert .block-head__title { color: var(--c-invert); }
.dim { color: var(--c-invert-dim); }
.collage-note { color: var(--c-invert); margin-top: 1rem; }

/* ---------------------------------------------------------------- series grid (CBS) */
.series-grid { list-style: none; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.series-card {
  position: relative; padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--c-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff, #fbfbfd); overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.series-card::after {
  content: ""; position: absolute; inset: auto auto -40% -10%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(210,59,46,.10), transparent 70%);
  opacity: 0; transition: opacity .5s;
}
.series-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px -24px rgba(0,0,0,.28); border-color: rgba(0,0,0,.16); }
.series-card:hover::after { opacity: 1; }
.series-card__num { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.04em; color: var(--c-accent); display: block; line-height: 1; margin-bottom: 1.2rem; font-feature-settings: "lnum"; }
.series-card__zh { font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem); margin-bottom: .25rem; text-wrap: balance; }
.series-card__en { color: var(--c-text-dim); font-size: .95rem; }
.series-card__year { margin-top: 1.1rem; font-size: .82rem; letter-spacing: .1em; color: var(--c-text-faint); }

/* ---------------------------------------------------------------- awards (CBS) */
.award-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.award { padding: clamp(1.8rem, 3.4vw, 2.8rem); background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.award--gold { background: linear-gradient(180deg, #fdf6e0, #fff 60%); border-color: rgba(190,140,30,.32); box-shadow: 0 24px 60px -34px rgba(150,110,20,.4); }
.award--bronze { background: linear-gradient(180deg, #fdf4ec, #fff); border-color: rgba(150,90,45,.34); box-shadow: 0 24px 60px -34px rgba(150,85,40,.42); }
.award__zh { font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.62; font-weight: 500; color: var(--c-text); letter-spacing: .01em; text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.award__hl { color: var(--c-accent); font-weight: 600; }
.award__hl--gold { color: #9a7b1e; }
.award__hl--bronze { color: #a8632c; }
/* 獎項出處：比 award__en 再弱一階，僅供人／機器查證用，不搶版面 */
.award__src { margin-top: .7rem; font-size: .85rem; line-height: 1.5; color: var(--c-text-faint); }
.award__en { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--c-line); font-size: .92rem; line-height: 1.55; color: var(--c-text-dim); text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }

/* ---------------------------------------------------------------- manifesto (CBS) */
.manifesto { background: var(--c-ink); color: var(--c-invert); padding-block: clamp(6rem, 12vw, 13rem); text-align: center; position: relative; overflow: hidden; }
.manifesto::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(210,59,46,.18), transparent 70%); }
.manifesto .wrap { position: relative; }
.manifesto__zh { font-family: var(--font-serif); font-size: clamp(1.6rem, 1rem + 2.6vw, 3.1rem); font-weight: 600; line-height: 1.42; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.manifesto__zh-body { margin-top: 1.6rem; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); line-height: 1.85; color: rgba(245,245,247,.8); letter-spacing: .01em; }
.manifesto__zh-body strong { color: var(--c-accent); }
.manifesto__en { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--c-line-invert); font-size: .98rem; line-height: 1.75; color: rgba(245,245,247,.6); max-width: 60ch; margin-inline: auto; font-style: italic; }
.manifesto__en strong { color: rgba(245,245,247,.9); font-style: normal; }

/* ---------------------------------------------------------------- id series (CBS) */
.idseries { overflow: hidden; }
.id-count__num { color: var(--c-accent); font-feature-settings: "lnum" "tnum"; font-size: 1.15em; }
.filmstrips { display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.5rem); margin-block: clamp(2.5rem, 6vw, 5rem); width: 95%; margin-inline: auto; }
.filmstrip { cursor: zoom-in; background: #fff; padding: clamp(6px, .7vw, 12px); border-radius: 10px; box-shadow: 0 12px 34px -20px rgba(0,0,0,.65); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.filmstrip img { width: 100%; height: auto; display: block; border-radius: 3px; }
.filmstrip:hover { transform: scale(1.012); box-shadow: 0 26px 54px -26px rgba(0,0,0,.75); }
.idgrids { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); width: 95%; margin-inline: auto; }
.idgrid { cursor: zoom-in; background: #fff; padding: clamp(6px, .7vw, 12px); border-radius: 10px; box-shadow: 0 12px 34px -20px rgba(0,0,0,.65); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.idgrid img { width: 100%; display: block; border-radius: 3px; }
.idgrid:hover { transform: scale(1.012); box-shadow: 0 26px 54px -26px rgba(0,0,0,.75); }
.idgrid--wide { width: 100%; }
.idgrid--tall { width: auto; max-width: min(540px, 92%); }

/* ---------------------------------------------------------------- statement / prose */
.statement .block-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.prose > p { font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.72; color: #333336; margin-bottom: 1.7rem; max-width: 64ch; text-wrap: pretty; }
.prose .prose__lead { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.65rem); line-height: 1.55; color: var(--c-text); font-weight: 400; margin-bottom: 2rem; text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.t-title { font-weight: 600; font-style: italic; }
/* Justified site-wide (zh/en/ja alike, per 2026-07-11B directive): CJK gets
   text-justify: inter-ideograph, Latin scripts get hyphens: auto so justify
   doesn't blow out word-spacing in narrow EN columns. Descendant `.prose p`
   (not just `.prose > p`) so flowing essays whose paragraphs are wrapped in a
   `.reveal-block` — e.g. about's 人生小記 vignettes and 簡介 — get justified too.
   `:not(:has(br))` opts OUT any block the artist hand-broke with <br /> (event
   info label lists, address blocks, the about intro name stack, couplets) so a
   forced-break line is never stretched toward the right edge. work-card /
   related-card descriptions are flowing prose and join the family here.
   .block-head__lede's own justify rule lives with the block-head component. */
.prose p:not(:has(br)), .prose__lead:not(:has(br)),
.manifesto__zh-body, .manifesto__en,
.work-card__desc, .related-card__d {
  text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto;
}
/* card titles: justify stretched the first wrapped line to full width (huge CJK
   gaps) — balance instead: wrapped lines break at ~equal lengths, no stretching. */
.work-card__zh, .work-card__en { text-wrap: balance; }
.prose em { font-style: italic; color: var(--c-text); }
/* inline links inside prose (e.g. about — Open Book Is Good ↗): accent + underline,
   matching .cv-item__meta links; without this, prose anchors are invisible. */
.prose a { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--c-accent); }

.sutra-quote { margin: clamp(2.5rem, 6vw, 4rem) 0; }
.sutra-quote--center { text-align: center; margin-inline: auto; }
.sutra-quote__zh {
  font-family: var(--font-serif); font-size: clamp(1.35rem, 1rem + 1.7vw, 2.35rem);
  font-weight: 600; line-height: 1.7; letter-spacing: .04em; color: var(--c-text);
  text-align: left; padding-left: 1.06em; text-indent: -1.06em; width: max-content; max-width: 100%;
}
.sutra-quote--center .sutra-quote__zh { margin-inline: auto; }
.sutra-quote__en { margin-top: 1.2rem; font-size: 1rem; line-height: 1.6; color: var(--c-text-dim); font-style: italic; max-width: min(40rem, 100%); }
.sutra-quote--center .sutra-quote__en { margin-inline: auto; }

/* portrait video embed (e.g. YouTube Shorts documentation): centered, 9:16,
   framed like .work / .collage-item__media (white mat + shadow). */
.video-embed { max-width: min(360px, 92vw); margin: 0 auto; background: #fff; padding: clamp(6px, .6vw, 11px); border-radius: 10px; box-shadow: 0 16px 40px -26px rgba(40,30,10,.5); }
.video-embed__frame { aspect-ratio: 9 / 16; border-radius: 3px; overflow: hidden; position: relative; }
.video-embed__frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-embed__facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.video-embed__facade picture,
.video-embed__facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-embed__play { position: absolute; top: 50%; left: 50%; width: clamp(52px, 12vw, 68px); height: clamp(52px, 12vw, 68px); border-radius: 50%; background: rgba(20, 14, 6, .55); backdrop-filter: blur(2px); transform: translate(-50%, -50%) scale(1); transition: transform .2s var(--ease-out-expo, ease), background .2s ease; }
.video-embed__play::before { content: ""; position: absolute; top: 50%; left: 54%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.video-embed__facade:hover .video-embed__play,
.video-embed__facade:focus-visible .video-embed__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(20, 14, 6, .72); }
.video-embed__facade:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.video-embed__link { text-align: center; margin-top: 1.2rem; }
.video-embed__link a { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.video-embed__link a:hover { color: var(--c-accent); }

/* award card that embeds the documentation video, sitting in the award-grid as a third card */
.award--video { display: flex; flex-direction: column; }
.award--video .award__video-label { text-align: center; }
.award--video .video-embed__frame { max-width: min(360px, 100%); margin-inline: auto; width: 100%; border-radius: calc(var(--r-lg) - 14px); }
.award--video .video-embed__link { margin-top: 1.2rem; }

/* ---------------------------------------------------------------- sutra section (CBS) */
.bopomofo { margin-top: 1.6rem; font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem); letter-spacing: .5em; color: var(--c-accent); font-weight: 500; padding-left: .5em; }
.works { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.4vw, 2rem); margin-block: clamp(2.5rem, 5vw, 4rem); }
.works-row { display: flex; gap: clamp(1rem, 2vw, 1.6rem); align-items: flex-start; }
.works-row .work { flex: 1 1 0; min-width: 0; }
.work { background: #fff; padding: clamp(6px, .6vw, 11px); border-radius: 10px; cursor: zoom-in; box-shadow: 0 16px 40px -26px rgba(40,30,10,.5); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.work img { width: 100%; height: auto; display: block; border-radius: 3px; }
.work:hover { transform: scale(1.02); box-shadow: 0 28px 56px -28px rgba(40,30,10,.6); }
@media (max-width: 700px) { .works-row { flex-direction: column; } }

/* ---------------------------------------------------------------- collages (CBS) */
.collages { margin-top: clamp(2.5rem, 6vw, 5rem); display: flex; flex-direction: column; gap: clamp(5rem, 12vw, 11rem); }
.collage-item { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-inline); }
.collage-item__media { background: #fff; padding: clamp(8px, 1vw, 16px); border-radius: 10px; cursor: zoom-in; box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
/* fill the card width at native aspect (no max-height:80vh + object-fit:contain):
   a 1100×2383 collage taller than 80vh used to letterbox, and 80vh shifts with the
   mobile URL bar on scroll — so identical collages showed different white borders at
   different scroll positions. width:100% + height:auto = one uniform padding frame. */
.collage-item__media img { width: 100%; height: auto; display: block; border-radius: 3px; }
.collage-item__media:hover { transform: scale(1.012); box-shadow: 0 52px 104px -50px rgba(0,0,0,1); }
.collage-item__no { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -.03em; color: var(--c-accent); line-height: 1; margin-bottom: 1rem; font-feature-settings: "tnum"; }
.collage-item__zh { font-size: var(--t-h3); color: var(--c-invert); margin-bottom: .35rem; }
.collage-item__en { color: var(--c-invert-dim); font-size: 1rem; margin-bottom: 1.4rem; }
.collage-item__desc { font-size: .98rem; line-height: 1.6; color: rgba(245,245,247,.78); text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.collage-item__desc span { display: block; margin-top: .3rem; color: var(--c-invert-dim); font-size: .85rem; }
/* These CBS captions are hand-broken with <br /> (e.g. "…statue<br />× soldier
   statue"); on a narrow column the pre-break segment wraps and justify stretched
   its first line to the full width (measured). Left-align so the artist's manual
   break reads cleanly — the site-wide manual-<br /> justify exclusion. */
.collage-item__desc:has(br) { text-align: start; text-justify: auto; }

/* ---------------------------------------------------------------- feature cards (home: featured works) */
.feature-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
.feature-card { position: relative; }
.feature-card a { display: block; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--c-bg-muted); border: 1px solid var(--c-line); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.feature-card a:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(0,0,0,.4); }
.feature-card__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: transparent; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.feature-card a:hover .feature-card__media img { transform: scale(1.04); }
.feature-card__body { padding: clamp(1.2rem, 2.2vw, 1.6rem) clamp(1.3rem, 2.4vw, 1.7rem) clamp(1.4rem, 2.6vw, 1.9rem); }
.feature-card__no { font-size: .8rem; letter-spacing: .14em; color: var(--c-accent); font-weight: 600; font-feature-settings: "tnum"; }
.feature-card__zh { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin-top: .5rem; }
.feature-card__en { color: var(--c-text-dim); font-size: .95rem; margin-top: .2rem; }
.feature-card__meta { margin-top: .9rem; font-size: .82rem; letter-spacing: .04em; color: var(--c-text-faint); }
@media (min-width: 760px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------- work cards (works overview: large project rows) */
.work-cards { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.work-card { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.work-card a { display: grid; grid-template-columns: 1fr; }
.work-card__media { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: transparent; }
.work-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); }
.work-card a:hover .work-card__media img { transform: scale(1.03); }
.work-card__body { padding: clamp(1.6rem, 3vw, 2.6rem); align-self: center; }
.work-card__no { font-size: .82rem; letter-spacing: .14em; color: var(--c-accent); font-weight: 600; }
.work-card__zh { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); margin-top: .6rem; }
.work-card__en { color: var(--c-text-dim); font-size: 1.02rem; margin-top: .3rem; }
.work-card__desc { margin-top: 1.1rem; font-size: 1rem; line-height: 1.65; color: var(--c-text-dim); max-width: 52ch; }
.work-card__meta { margin-top: 1.2rem; font-size: .82rem; letter-spacing: .06em; color: var(--c-text-faint); }
@media (min-width: 820px) {
  .work-card a { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .work-card__media { aspect-ratio: 4 / 5; height: auto; }
  .work-card:nth-child(even) a { direction: rtl; }
  .work-card:nth-child(even) a > * { direction: ltr; }
}
/* When I Grow Up (CBS thumbnail) is a full-figure portrait — arms raised overhead
   holding rulers — inside a very tall 1284x1600 frame. The landscape-ish
   work-card__media box (16:10 below 820px) center-crops a portrait that tall and
   clips the raised hands, the point of the gesture. Anchor top so the crop keeps
   head + hands + rulers and sacrifices leg-room instead. Scoped to this one file:
   answer/01.jpg and medicine/01.jpg already read fine center-cropped (face-height
   compositions), so a blanket object-position would fix this card and mildly hurt
   those two. */
.work-card__media img[src*="when-i-grow-up"],
.feature-card__media img[src*="when-i-grow-up"] {
  object-position: center top;
}

/* ---------------------------------------------------------------- highlight list (home: recent exhibitions) */
.hl-list { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; gap: 0; }
.hl-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1.1rem, 2.4vw, 1.7rem) 0; border-top: 1px solid var(--c-line); align-items: baseline; }
.hl-item:last-child { border-bottom: 1px solid var(--c-line); }
.hl-item__year { font-size: 1rem; font-weight: 600; letter-spacing: .04em; color: var(--c-accent); font-feature-settings: "tnum"; }
.hl-item__title { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.4; color: var(--c-text); font-weight: 500; }
.hl-item__venue { margin-top: .3rem; font-size: .92rem; color: var(--c-text-dim); }

/* ---------------------------------------------------------------- CV timeline (exhibitions page — reserved for sonnet) */
.cv-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cv-group__head { font-size: var(--t-h3); margin-bottom: 1.4rem; padding-bottom: .8rem; border-bottom: 2px solid var(--c-ink); }
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-item { display: grid; grid-template-columns: 5rem 1fr; gap: clamp(1rem, 3vw, 2rem); padding: clamp(1rem, 2.2vw, 1.5rem) 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
/* 2026-07-13 sonnet A #1.2: the title/meta/gallery column is a grid item whose
   default min-width is "auto" — i.e. the width of its widest content (here, the
   fixed-columns thumbnail <figure class="gallery"> some 聯展 entries embed). That
   forced the 1fr track wider than the viewport on mobile (horizontal overflow).
   min-width:0 lets the column shrink to the track's actual size so its own
   contents (see .gallery fix below) can wrap instead of blowing out the page. */
.cv-item > div { min-width: 0; }
.cv-item__year { font-weight: 600; color: var(--c-text-dim); font-feature-settings: "tnum"; }
.cv-item__title { font-size: 1.1rem; font-weight: 500; }
/* 官網連結掛在展覽標題上：低調繼承文字色，只在 hover 才變 accent，不整行變紅 */
.cv-item__title a { color: inherit; }
.cv-item__title a:hover { color: var(--c-accent); }
/* 2026-07-13 sonnet A #1.2 follow-up: en/exhibitions/index.html's Seikai title
   wraps its English parenthetical in the site-wide .nowrap utility (white-space:
   nowrap). That's fine at desktop widths but is wider than a 375px viewport and
   has no wrap opportunity, so it was overflowing the page even after the grid
   min-width fix above. .nowrap itself is shared with other pages (about,
   chaos-body-shop) — scope the override to exhibition titles only. */
@media (max-width: 600px) {
  .cv-item__title .nowrap { white-space: normal; }
  /* 展名只放寬行距，不做 justify (2026-07-29)：標題通常只有一到兩行，最後一行
     不參與拉伸，等於只有第一行被撐開，字距被拉出大洞。齊左即可。 */
  .cv-item__title { line-height: 1.4; text-align: start; text-justify: auto; }
}
/* tabular-nums (2026-07-29)：系統字的數字是等比寬（07/18 比 07/25 窄 2px），連續兩行
   日期欄位後面的「｜」就會差幾像素對不齊。改用等寬數字讓所有日期／時間欄同寬。 */
/* 齊左 + 齊右 (2026-07-29)：.cv-item__meta 是「一個 <p> 內用 <br /> 分行」，不是多個
   區塊——所以 text-indent 只會作用在整段的第一行（曾誤用懸掛縮排，結果第一行凸出、
   其餘每行都內縮，就是站主看到的「除了場地其他標頭太右邊」）。正解是欄位一律齊左、
   不加縮排，再交給 --align-body 做兩端對齊（中日文 justify、英文 left）。<br /> 前的
   那一行算「該段最後一行」，瀏覽器不會拉伸，所以只有真正折行的長欄位會撐到齊右。
   注意：這條必須排在下面 max-width:600px 區塊之前，否則同分特異性下會蓋掉手機的齊左。 */
.cv-item__meta { margin-top: .35rem; font-size: .92rem; line-height: 1.55; color: var(--c-text-dim); font-variant-numeric: tabular-nums; text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.cv-item__meta a { color: var(--c-accent-ink); text-underline-offset: 2px; }
.cv-item__meta a:hover { text-decoration: underline; }
/* 媒體報導引註連結：不用紅字，但仍可點；hover 底線行為照舊 */
.cv-item__meta a.u-plain { color: inherit; }
/* cv-field (2026-07-13, sonnet A #1.1): 場地／日期等原以純文字「｜」相連的同行欄位，
   拆成獨立 span 後桌機用 ::before 補回「｜」視覺（與原本外觀一致），手機（<=600px）
   改 display:block 各自成行，避免窄螢幕擠成一排、首尾相連。只影響曾以｜相連的欄位；
   原本就用 <br /> 分行的欄位不受影響（本就各自成行）。三語 exhibitions index + 詳情頁共用。 */
.cv-field { display: inline; }
.cv-field + .cv-field::before { content: "｜"; }
@media (max-width: 600px) {
  .cv-field { display: block; }
  .cv-field + .cv-field::before { content: none; }
  /* 手機空行 (2026-07-29)：.cv-field 變 display:block 後，原本用來分行的 <br />
     就多餘了——區塊本身已經換行，<br /> 再補一個空行。
     只能關掉「緊接在 .cv-field 之後」的那一個：有些條目（蘋果蘇打、熱吵集…）整段
     都是純文字、沒有 .cv-field，靠 <br /> 分行，全部關掉會把「主辦：…」和
     「展出作品：…」黏成同一行。相鄰選擇器剛好只咬到多餘的那些。 */
  .cv-field + br { display: none; }
  /* 手機改單欄 (2026-07-29)：年份原本佔左邊 5rem + gap，390px 螢幕上文字欄只剩 254px，
     窄到 justify 一拉伸就整行字距爆開（站主要「左右對齊又不要大空白」，在 254px 是
     做不到的）。年份改成獨立一行、文字欄吃滿 350px，同樣兩端對齊但幾乎不用拉伸。
     桌機維持雙欄年表版型不變。 */
  .cv-item { grid-template-columns: 1fr; gap: .25rem; }
}
/* 標題與內文的「墨水點」對齊：《〈「（ 這類開頭標點的字身偏右，整格佔滿但左半是空的，
   《觀和作用》的「《」看起來就比下一行的「場」凸出半格。hanging-punctuation: first
   讓行首標點吊掛到版心外，實際墨水才對得齊。Safari／iOS 支援；Chromium 尚未支援，
   不支援時就是退回現狀（標點不吊掛），不會壞版。 */
.cv-item__title, .cv-item__meta { hanging-punctuation: first; }

/* ---------------------------------------------------------------- gallery grid (works/exhibition detail) */
/* Cards keep each image's native aspect ratio (no crop): height:auto instead of a
   forced 100%+cover, and align-items:start so the grid's default stretch can't
   re-introduce a crop via a taller row sibling. .gallery__item--tall is
   intentionally unstyled now — the old grid-row:span 2 forced a doubled-height
   box that object-fit:cover then cropped to fill (the "細長條" bug); every source
   image here shares one ratio, so a spanning box no longer serves any purpose. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; gap: clamp(.8rem, 2vw, 1.4rem); margin-block: clamp(2rem, 4vw, 3.5rem); }
.gallery__item { margin: 0; background: #fff; padding: clamp(6px, .6vw, 10px); border-radius: 10px; cursor: zoom-in; box-shadow: 0 14px 36px -24px rgba(0,0,0,.5); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.gallery__item img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* 2026-07-13: a portrait installation shot sharing a row with landscape siblings
   (Singapore 02, 1280×1600) renders taller than them. Fit it into the row-mate's
   landscape box (4:3, matching Singapore 01) and letterbox on the item's white bg —
   same height, no crop, honouring the native-aspect rule above. */
.gallery__item--portrait img { aspect-ratio: 4 / 3; object-fit: contain; }
.gallery__item:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(0,0,0,.6); }
.gallery__cap { margin-top: .6rem; font-size: .82rem; line-height: 1.5; color: var(--c-text-dim); padding: 0 .2rem .2rem; text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }

/* zh page only: Chinese translation line under the (untranslated) English exam-question
   caption — 2026-07-12, 答案系列 24 圖說中譯. Smaller + fainter than the English line so
   the original title still reads first; en/ja pages never load this class. */
.gallery__cap-zh { display: block; margin-top: .2rem; font-size: .78rem; color: var(--c-text-faint); }

/* answer gallery (2026-07-11D #4): 24 shots = 12 diptych pairs (front/back),
   consecutive in markup. A plain N-column grid keeps pairs adjacent without
   any wrapper markup: 2-up reads as one diptych per row (mobile/tablet),
   4-up reads as two diptychs per row (desktop). Order is never reshuffled. */
.gallery.gallery--answer { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .gallery.gallery--answer { grid-template-columns: repeat(4, 1fr); } }

/* Poland gallery (2026-07-13): 3 installation views (Łódź, 16:9). Desktop shows
   all three in one row; ≤600px drops to 2-up so each stays legible (the 3rd wraps
   onto its own row). max-width is widened past the old 2-up figure's 560px so three
   columns don't shrink too far. Singapore's 2×2 figure keeps its own inline grid. */
.gallery.gallery--3up { grid-template-columns: repeat(3, 1fr); }
/* 兩兩一列（展場紀錄、作品區）：3 欄縮圖太小，改 2 欄讓細節看得見 */
.gallery.gallery--2up { grid-template-columns: repeat(2, 1fr); }
/* 布展團隊：首張整行置中，其餘兩兩一組 */
.gallery.gallery--crew { grid-template-columns: repeat(2, 1fr); }
/* 首張獨占整列，寬度等於下方兩張並排的總寬（站主 2026-07-25 定案） */
.gallery__item--lead { grid-column: 1 / -1; }
@media (max-width: 600px) { .gallery.gallery--3up { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- about preview (home) */
.about-preview .prose__lead { color: var(--c-text); }
.about-preview__facts { list-style: none; padding: 0; margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; display: grid; gap: .7rem; }
.about-preview__facts li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; font-size: .98rem; line-height: 1.5; }
.about-preview__facts dt, .about-preview__facts .k { color: var(--c-text-faint); letter-spacing: .04em; }
/* Membership: single-line entries — override the 2-column facts grid so the
   Chinese name + its translation sit on one line (English/other = faint sub).
   The block is centered as a whole; each row stays left-aligned. */
[aria-labelledby="membership-title"] .block-head { text-align: center; }
[aria-labelledby="membership-title"] .about-preview__facts { width: fit-content; max-width: 100%; margin-inline: auto; }
[aria-labelledby="membership-title"] .about-preview__facts li { display: block; grid-template-columns: none; text-align: left; }
[aria-labelledby="membership-title"] .about-preview__facts li span { display: inline; margin-left: .55rem; color: var(--c-text-faint); }

/* ---------------------------------------------------------------- page-related (CBS footer links: texts + exhibitions) */
.page-related { background: var(--c-bg-muted); border-top: 1px solid var(--c-line); }
.page-related__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-block: clamp(3rem, 6vw, 5rem); }
.related-card { display: block; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -28px rgba(0,0,0,.35); }
.related-card__k { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); font-weight: 600; }
.related-card__t { font-size: 1.15rem; margin-top: .5rem; text-wrap: balance; }
.related-card__d { margin-top: .4rem; font-size: .92rem; color: var(--c-text-dim); line-height: 1.5; }
@media (min-width: 720px) { .page-related__grid { grid-template-columns: repeat(3, 1fr); } }
/* 收尾用的「回到清單」卡：整列橫長條，與上排三張等寬總和 */
@media (min-width: 720px) {
  .related-card--wide { grid-column: 1 / -1; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 1rem; row-gap: .25rem; padding-block: clamp(1.1rem, 2vw, 1.4rem); }
  .related-card--wide .related-card__t { margin-top: 0; }
  .related-card--wide .related-card__d { margin-top: 0; }
}

/* ---------------------------------------------------------------- global site footer */
.site-footer { background: var(--c-ink); color: var(--c-invert); padding-top: clamp(3.5rem, 7vw, 6rem); }
/* 頁尾 QR：離線場景用（看螢幕的人用手機開、截圖轉傳），暗底上加白框才掃得到 */
.site-footer__qr { margin: clamp(1.3rem, 4vw, 2rem) 0 0; }
.site-footer__qr img { width: 92px; height: 92px; background: #fff; padding: 2px; border-radius: 5px; display: block; flex: none; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.site-footer__name { font-size: 1.3rem; font-weight: 600; letter-spacing: .01em; line-height: 1.25; }
.site-footer__name span { color: var(--c-invert-dim); font-weight: 500; font-size: .95rem; margin-left: .4rem; }
.site-footer__tag { margin-top: .3rem; font-size: .95rem; color: var(--c-invert-dim); line-height: 1.5; }
.site-footer__h { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-faint); margin-bottom: 1rem; }
.site-footer__col { display: flex; flex-direction: column; gap: .55rem; }
.site-footer__col a { color: rgba(245,245,247,.82); font-size: .95rem; width: max-content; transition: color .25s; }
.site-footer__col a:hover { color: #fff; }
/* padding-bottom adds the iOS/Android safe-area inset so the © line and “back to top”
   aren't clipped by the home indicator when viewport-fit=cover (2026-07-13). */
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line-invert); font-size: .82rem; color: var(--c-text-faint); }
.site-footer__base a { color: var(--c-text-faint); transition: color .25s; }
.site-footer__base a:hover { color: #fff; }
@media (min-width: 760px) {
  .site-footer__grid { grid-template-columns: 2fr 1fr 1.3fr; align-items: stretch; }
  .site-footer__brand { display: flex; flex-direction: column; }
  /* 標語上下用 auto 邊界均分剩餘高度 → 垂直置中於姓名與 QR 之間；
     餘白被標語吃光，QR 自然落在欄底、下緣切齊聯絡欄末行 */
  .site-footer__tag { margin-block: auto; }
  .site-footer__qr { margin-top: 0; }
}

/* ---------------------------------------------------------------- lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; overflow: auto; padding: 5vmin 4vmin; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; animation: fade .35s var(--ease-io) forwards; }
.lightbox[hidden] { display: none; }
@keyframes fade { to { opacity: 1; } }
.lightbox__img { max-width: 94vw; max-height: 82vh; width: auto; min-height: 0; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__close { position: fixed; top: 18px; right: 20px; z-index: 301; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; font-size: 1.1rem; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(10px); transition: background .25s; }
.lightbox__close:hover { background: rgba(255,255,255,.28); }
/* caption under the enlarged image (2026-07-11D #3): figcaption text, falls
   back to img alt — set by main.js. Low-key: small, pale, centered. */
.lightbox__cap { flex: none; margin: 0; max-width: min(84vw, 640px); padding: 0 1rem; text-align: center; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.8); }
.lightbox__cap:empty { display: none; }

/* ---------------------------------------------------------------- back-to-top (2026-07-11D #2)
   Injected by main.js on every page (progressive; no markup needed per page).
   Fades in once scrolled past roughly one viewport. */
.totop {
  position: fixed; right: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 120;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-ink); color: #fff; font-size: 1.15rem; line-height: 1; text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .35s var(--ease-io), transform .35s var(--ease-io), background .25s, visibility 0s linear .35s;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease-io), transform .35s var(--ease-io), background .25s; }
.totop:hover, .totop:focus-visible { background: var(--c-accent); }
@media (max-width: 640px) { .totop { width: 42px; height: 42px; right: 12px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .totop { transition: opacity .15s linear, visibility 0s linear; } }

/* ---------------------------------------------------------------- reveal animation
   只在 html.js（head 內聯腳本標記）時才隱藏待進場元素：
   JS 關閉或腳本失效時內容照常可見（SEO／無障礙防線）。 */
html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease) var(--d, 0ms), transform var(--dur) var(--ease) var(--d, 0ms); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media print {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------- image load-in
   同一套 reveal 動態語言（--ease／向上浮現），套用在內容圖片本身的載入完成瞬間，
   而非只有外層區塊。只作用於帶 loading="lazy" 的內容圖（main.js 會排除 nav/favicon），
   幅度較小、時間較短，避免和區塊 reveal 互相搶戲。 */
html.js img[loading="lazy"] { opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.js img[loading="lazy"].is-loaded { opacity: 1; transform: none; }
@media print {
  html.js img[loading="lazy"] { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------- anchors */
section[id], span.anchor { scroll-margin-top: 72px; }

/* ---------------------------------------------------------------- side quick-jump rails (CBS series) */
.rail { position: fixed; top: 50%; translate: 0 -50%; z-index: 90; display: flex; flex-direction: column; gap: 1.15rem; color: #fff; mix-blend-mode: difference; pointer-events: auto; }
.rail--series { right: clamp(14px, 1.4vw, 26px); align-items: flex-end; }
.rail__item { display: inline-flex; align-items: center; gap: .55rem; opacity: .68; transition: opacity .3s var(--ease); }
.rail--series .rail__item { flex-direction: row; }
.rail__item:hover { opacity: 1; }
.rail__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; transition: transform .35s var(--ease); }
.rail__label { font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
.rail__item.is-active { opacity: 1; }
.rail__item.is-active .rail__dot { transform: scale(1.7); }
.rail__item.is-active .rail__label { font-weight: 600; }
@media (max-width: 1100px) { .rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail__label, .rail__dot { transition: none; } }

/* ---------------------------------------------------------------- long-form text pages (texts/ — reserved for sonnet) */
.subpage-head { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; }
.subpage-head .block-head { margin-bottom: 0; }
.paper .block-head { margin-bottom: 0; }
.paper .wrap--read { max-width: min(58rem, 92vw); }
.paper-body p { max-width: none; font-size: clamp(1.06rem, 1rem + .45vw, 1.4rem); line-height: 1.85; color: #333336; margin-bottom: 1.5rem; text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.paper-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.12; }
.paper-subtitle { margin-top: 1rem; font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem); line-height: 1.5; color: var(--c-text-dim); font-weight: 400; max-width: 50ch; text-wrap: balance; }
.paper-meta { margin-top: 1.8rem; display: grid; gap: .45rem; border-top: 1px solid var(--c-line); padding-top: 1.3rem; }
.paper-meta > div { display: flex; gap: .9rem; font-size: .95rem; line-height: 1.55; }
.paper-meta dt { flex: none; min-width: 5.5em; color: var(--c-text-faint); letter-spacing: .12em; }
.paper-meta dd { color: var(--c-text); }
.paper-abstract { margin: clamp(2rem, 4vw, 3rem) 0; padding: clamp(1.4rem, 3vw, 2.2rem); background: rgba(0,0,0,.035); border: 1px solid var(--c-line); border-radius: var(--r); }
.paper-abstract h2 { font-size: 1.05rem; letter-spacing: .06em; margin-bottom: .8rem; }
.paper-abstract h2:not(:first-child) { margin-top: 1.8rem; }
.paper-abstract p { font-size: 1rem; line-height: 1.75; color: var(--c-text); text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.paper-keywords { margin-top: .9rem; font-size: .92rem; color: var(--c-text-dim); }
.paper-keywords strong { color: var(--c-text); letter-spacing: .06em; }
.paper-body { margin-top: clamp(2rem, 5vw, 3.5rem); }
.paper-body h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem); line-height: 1.25; margin: 0 0 1.1rem; }
.paper-body .reveal-block + .reveal-block { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.paper-refs { margin-top: clamp(2.6rem, 6vw, 4rem); border-top: 1px solid var(--c-line); padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.paper-refs h2 { font-size: 1.15rem; letter-spacing: .04em; margin-bottom: 1.2rem; }
.paper-refs p { font-size: .9rem; line-height: 1.6; color: var(--c-text-dim); margin-bottom: .8rem; padding-left: 2em; text-indent: -2em; max-width: none; text-align: var(--align-body); text-justify: inter-ideograph; hyphens: auto; }
.paper-refs a { color: var(--c-accent-ink); text-underline-offset: 2px; word-break: break-word; }
.paper-refs a:hover { text-decoration: underline; }
.sutra-process { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid rgba(0,0,0,.14); }
.process-title { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem); line-height: 1.2; margin-bottom: 1.4rem; letter-spacing: -.01em; color: var(--c-text); }
.sutra-process .prose__lead { margin-bottom: 1.8rem; }
.sutra-process strong { font-weight: 600; color: var(--c-text); }

/* ---------------------------------------------------------------- 404 */
.notfound { min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; text-align: center; padding: 4rem var(--pad-inline); }
.notfound__code { font-size: clamp(4rem, 2rem + 12vw, 9rem); font-weight: 600; letter-spacing: -.04em; color: var(--c-accent); line-height: 1; }
.notfound__msg { margin-top: 1rem; font-size: var(--t-lede); color: var(--c-text); }
.notfound__msg span { display: block; color: var(--c-text-dim); font-size: 1rem; margin-top: .4rem; }
.notfound__links { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ================================================================ breakpoints */
@media (min-width: 700px) { .award-grid { grid-template-columns: 1fr 1fr; } }
/* 700–979px: two award cards stay side by side, the video card drops to its own centered row
   (a third column here would fall under ~280px). From 980px there is room for three even columns. */
@media (min-width: 700px) { .award-grid--with-video .award--video { grid-column: 1 / -1; width: min(440px, 100%); margin-inline: auto; } }
@media (min-width: 760px) { .series-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .collage-item { grid-template-columns: minmax(0, 1.05fr) 1fr; }
  .collage-item__media { max-width: 480px; justify-self: center; }
  .collage-item--alt { direction: rtl; }
  .collage-item--alt > * { direction: ltr; }
  .collage-item__meta { padding-inline: clamp(0rem, 2vw, 2rem); }
}
@media (min-width: 1280px) { .collage-item { gap: 5rem; } }

/* ================================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
  html.js img[loading="lazy"] { opacity: 1; transform: none; }
  .filmstrip img { width: 100%; }
  .hero__cue { display: none; }
}