/* ============================================================
   Portfolio UI kit — screen layouts
   ============================================================ */

/* ---------- Hero ---------- */
.hu-hero{ display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--space-8);
  align-items: center; padding: var(--space-8) var(--space-7); min-height: 72vh; box-sizing: border-box; }
.hu-hero__lockup{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.hu-namestack{ display: inline-block; width: fit-content; }
.hu-hero__name{ font-family: var(--font-cjk); font-weight: 500; font-size: clamp(3.6rem, 7.5vw, 6rem);
  letter-spacing: .18em; line-height: 1; margin: 0; padding-left: 0; color: var(--text-primary); white-space: nowrap; }
.hu-hero__rom{ font-family: var(--font-display); font-style: normal; font-size: clamp(2.05rem, 4.3vw, 3.43rem);
  color: var(--text-muted); margin: 2px 0 0; width: 100%; position: relative; }
.hu-hero__rom .hu-rom-a{ display: inline-block; margin-left: 0.8%; width: 56.3%; text-align: justify; text-align-last: justify; white-space: nowrap; }
.hu-hero__rom .hu-rom-b{ position: absolute; top: 2px; left: 80.4%; transform: translateX(-50%); white-space: nowrap; }

.hu-hero__plate{ margin: 0; cursor: pointer; margin-inline: auto; }
.hu-hero__mat{ background: var(--surface-card); padding: 20px; border: var(--hairline); box-shadow: 0 4px 12px rgba(33, 30, 24, 0.08);
  transition: transform var(--dur-slow) var(--ease-out); margin-inline: auto; }
.hu-hero__mat img, .hu-hero__frame img{ display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.97); }
.hu-hero__frame{ display: block; overflow: hidden; background: var(--surface-sunken); aspect-ratio: 4 / 5; }
.hu-hero__plate:hover .hu-hero__mat{ transform: translateY(-3px); }
.hu-hero__plate figcaption{ margin-top: var(--space-4); }

/* ---------- Hero: full-bleed ---------- */
:root{ --hdr-h: 88px; }
.hu-hero-full{ --nm: clamp(3rem, 13vh, 8rem); position: relative; display: grid; grid-template-columns: minmax(0, max-content) 1fr; height: calc(100svh - var(--hdr-h, 88px)); min-height: 0; overflow: hidden; background: #FBF7EF; }
.hu-hero-full .hu-hero__name{ font-size: var(--nm); }
.hu-hero-full .hu-hero__rom{ font-size: calc(var(--nm) * 0.5694); }
.hu-hero-full__lockup{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-4);
  padding: var(--space-8) clamp(36px, 5.2vw, 96px); }
.hu-hero-full__plate{ position: relative; overflow: hidden; background: var(--surface-sunken); cursor: pointer; }
.hu-hero-full__lockup .hu-eyebrow .rule{ width: 52px; }
.hu-hf-series{ display: flex; flex-direction: column; gap: .3em; margin-top: clamp(var(--space-7), 17vh, 220px); width: min(34ch, 34vw); }
.hu-hf-series__title{ display: flex; flex-direction: column; gap: .12em; font-size: clamp(1.35rem, 4.2vh, 2.7rem); white-space: nowrap; overflow: hidden; }
.hu-hf-series__cjk{ font-family: var(--font-cjk); font-size: 1em; font-weight: 500;
  letter-spacing: .06em; color: var(--text-primary); }
.hu-hf-series__en{ font-family: var(--font-display); font-style: italic; font-size: .66em;
  line-height: var(--lh-snug); color: var(--text-muted); }
.hu-hf-series__sub{ font-family: var(--font-display); font-size: clamp(1.15rem, 2.7vh, 1.65rem); line-height: 1.5;
  color: var(--text-secondary); text-wrap: pretty; margin-top: .12em; }
.hu-hero-full__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.97); }
.hu-hero-full__veil{ position: absolute; left: 0; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, #FBF7EF 0%, rgba(251,247,239,.97) 12%, rgba(251,247,239,.86) 26%, rgba(251,247,239,.62) 44%, rgba(251,247,239,.34) 64%, rgba(251,247,239,.12) 82%, rgba(251,247,239,0) 100%); }
.hu-hero-full__scrim{ position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(180deg, rgba(20,18,14,0) 0%, rgba(20,18,14,.18) 40%, rgba(20,18,14,.48) 68%, rgba(20,18,14,.76) 100%); pointer-events: none; }
.hu-hero-full__label{ position: absolute; left: 9%; right: 5.4%; bottom: 6.5%; }
.hu-hf-cap{ font-family: var(--font-sans); font-size: clamp(.84rem, 1.05vw, .95rem); letter-spacing: .01em;
  color: #F3EEE3; text-shadow: 0 1px 10px rgba(0,0,0,.72); }
.hu-hf-cap .cjk{ font-family: var(--font-cjk); letter-spacing: .06em; }
/* first-load intro */
.hu-hero-full__curtain{ position: absolute; top: 0; bottom: 0; left: 0; right: -100%; display: none; pointer-events: none;
  background: linear-gradient(90deg, #FBF7EF 0%, #FBF7EF 50%, rgba(251,247,239,.88) 64%, rgba(251,247,239,.45) 84%, rgba(251,247,239,0) 100%); }
.hu-hero-full.is-intro .hu-hero-full__curtain{ display: block; transform: translateX(0); will-change: transform; z-index: 1; }
/* the dark scrim and the caption belong to the picture — keep them out until it is unveiled */
.hu-hero-full.is-intro .hu-hero-full__scrim, .hu-hero-full.is-intro .hu-hero-full__label{ opacity: 0; }
.hu-hero-full.is-intro.is-unveil .hu-hero-full__scrim, .hu-hero-full.is-intro.is-unveil .hu-hero-full__label{
  opacity: 1; transition: opacity 1.15s var(--ease-out); }
.hu-hero-full.is-intro.is-unveil .hu-hero-full__curtain{ transform: translateX(-100%);
  transition: transform 1.15s cubic-bezier(.5,0,.2,1); }
.hu-hero-full.is-intro .hu-hero-full__lockup{ position: relative; z-index: 2; transform-origin: 0 0; }
.hu-hero-full.is-intro .hu-hero__name, .hu-hero-full.is-intro .hu-hero__rom,
.hu-hero-full.is-intro .hu-hero-full__lockup > .hu-eyebrow{ opacity: 0; }
.hu-hero-full.is-intro .hu-hero-full__lockup > .hu-eyebrow .rule{ clip-path: inset(0 100% 0 0); }
.hu-hero-full.is-intro.is-run .hu-hero__name{ animation: huAppear .45s ease .15s both; }
.hu-hero-full.is-intro.is-run .hu-hero__rom{ animation: huAppear .45s ease .15s both; }
.hu-hero-full.is-intro.is-run .hu-hero-full__lockup > .hu-eyebrow{ animation: huAppear .01s linear .8s both; }
.hu-hero-full.is-intro.is-run .hu-hero-full__lockup > .hu-eyebrow .rule{
  animation: huRule .55s cubic-bezier(.22,.68,.16,1) .8s both; }
.hu-hero-full.is-intro.is-run .hu-hero-full__lockup > .hu-eyebrow .lbl{ animation: huAppear .45s ease 1.28s both; }
.hu-hero-full.is-intro .hu-hf-series{ opacity: 0; will-change: opacity; transform: translateZ(0); }
.hu-hero-full.is-intro.is-settled .hu-hf-series{ opacity: 1; transition: opacity .6s var(--ease-out); }
.hu-home.is-intro > *:not(.hu-hero-full){ opacity: 0; will-change: opacity; }
.hu-home.is-intro.is-settled > *:not(.hu-hero-full){ opacity: 1; transition: opacity .6s var(--ease-out) .4s; }
/* portrait phone: hide them outright instead of fading — no extra compositing layer next to
   the picture (that seam was the flashing line), and they still only appear once the intro ends */
@media (max-width: 680px) and (orientation: portrait){
  .hu-home.is-intro > *:not(.hu-hero-full){ opacity: 1; visibility: hidden; will-change: auto; }
  .hu-home.is-intro.is-settled > *:not(.hu-hero-full){ visibility: visible; transition: none; }
}
@keyframes huAppear{ from{ opacity: 0 } to{ opacity: 1 } }
@keyframes huRule{ from{ clip-path: inset(0 100% 0 0) } to{ clip-path: inset(0 0 0 0) } }
@media (max-width: 1080px){
  .hu-hero-full{ grid-template-columns: 1fr; height: auto; min-height: 0; --nm: clamp(2.4rem, min(13vh, 17vw), 8rem); }
  .hu-hero-full > *{ min-width: 0; }
  .hu-hf-series{ width: auto; max-width: 34ch; margin-top: var(--space-5); }
  .hu-hero-full__lockup{ padding: var(--space-8) clamp(36px, 5.2vw, 96px) var(--space-6); }
  /* the picture fills this box, so tint it like the page: a sub-pixel seam at the row
     boundary then stays invisible instead of flashing as a dark hairline */
  /* overlap the row above by a pixel: on fractional-DPR screens a layer boundary here
     otherwise shows as a hairline while a neighbouring block composites */
  .hu-hero-full__plate{ aspect-ratio: 4 / 3; background: var(--bg-page); margin-top: -1px;
    /* own compositing layer with integer bounds: at fractional zoom the picture can otherwise
       bleed a dark hairline past the clip at the top edge */
    transform: translateZ(0); contain: paint; }
  .hu-hero-full{ background: var(--bg-page); }
  /* same for the hero/band boundary underneath it */
  .hu-band{ margin-top: -1px; padding-top: calc(var(--space-4) + 1px); }
  .hu-hero-full__veil{ left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 90px;
    background: linear-gradient(180deg, #FBF7EF 0%, rgba(251,247,239,0) 100%); }
  .hu-hero-full__label{ left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
  .hu-hf-series__title{ white-space: normal; overflow: visible; }
  .hu-hf-series__cjk, .hu-hf-series__en, .hu-hf-cap{ overflow-wrap: anywhere; }
}
@media (max-width: 680px) and (orientation: portrait){
  .hu-hf-cap{ display: flex; flex-direction: column; gap: .18em; line-height: 1.35; }
  .hu-hf-cap .sep{ display: none; }
  .hu-hf-cap .cjk{ font-size: 1.12em; }
  .hu-hf-cap .met{ opacity: .82; font-size: .94em; }
}

/* ---------- Band: selected works ---------- */
.hu-band{ padding: var(--space-4) var(--space-7) var(--space-9); max-width: var(--content-wide); }
.hu-band--flush{ max-width: none; margin: 0; padding-left: clamp(36px, 5.2vw, 96px); padding-right: clamp(36px, 5.2vw, 96px); }
.hu-band__eyebrow{ margin-bottom: var(--space-3); }
.hu-band__eyebrow .rule{ width: 44px; }
.hu-band__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  margin-bottom: var(--space-8); }
.hu-band__head > .hu-sh{ min-width: 0; max-width: 100%; }
.hu-grid-4{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-6); align-items: start; }
.hu-grid-4 .hu-art{ margin-bottom: 0; }
.hu-strip{ overflow: hidden; touch-action: pan-y; -webkit-user-select: none; user-select: none;
  width: 100vw; margin-inline: calc(50% - 50vw); margin-block: -36px -56px;
  padding: 36px 0 56px; }
.hu-strip::-webkit-scrollbar{ display: none; }
.hu-strip__track{ display: flex; gap: var(--space-5); align-items: flex-start; width: max-content; }
.hu-strip__cell{ flex: 0 0 62vw; max-width: 300px; }
/* desktop: the same rail, dragged with the mouse and clamped at both ends. it runs off the
   right edge of the window like the hero picture does */
.hu-strip--wide{ width: auto; cursor: grab;
  /* a little room either side so the mats' hairline and shadow aren't clipped by the rail */
  padding-inline: 12px; margin-inline: -12px calc(-1 * clamp(36px, 5.2vw, 96px)); }
.hu-strip--wide:active{ cursor: grabbing; }
/* the space between works belongs to the cell, so the loop repeats on an exact pitch */
.hu-strip--wide .hu-strip__track{ gap: 0; }
.hu-strip--wide .hu-strip__cell{ flex: 0 0 var(--cellw, clamp(220px, 21vw, 300px)); max-width: none; margin-right: var(--space-6); }
.hu-strip__cell .hu-art{ margin-bottom: 0; }

/* ---------- Statement band ---------- */
.hu-statement{ background: var(--surface-ink); padding: clamp(64px, 12vh, 140px) 0; }
.hu-statement__inner{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.hu-statement__eyebrow{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .28em; text-transform: uppercase; color: #97A57E; margin-bottom: clamp(28px, 4vh, 44px); }
.hu-statement__cjk{ font-family: "Noto Serif TC", serif; font-weight: 400; font-size: clamp(1.45rem, 2.9vw, 2.4rem); letter-spacing: .1em;
  color: var(--text-on-ink); margin: 0; line-height: 1.75; max-width: none; }
.hu-statement .sm-br{ display: inline; }
.hu-statement .st-seg{ white-space: nowrap; }
.hu-statement__en{ font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  line-height: 1.45; color: var(--text-on-ink-muted); max-width: min(92vw, 34ch); margin: clamp(20px, 3vh, 34px) 0 0; text-wrap: balance; }
.hu-statement__rule{ display: block; width: 60px; height: 1px; background: #5E6E47; margin: clamp(28px, 4.5vh, 48px) 0 clamp(16px, 2.4vh, 26px); }
.hu-statement__by{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: .22em; text-transform: uppercase; color: #97A57E; margin: 0; }

/* ---------- Generic page ---------- */
.hu-page{ padding: var(--space-9) var(--space-7) var(--space-10); }
.hu-page--tight{ padding-top: var(--space-7); }
.hu-page__head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  margin-bottom: var(--space-8); border-bottom: var(--hairline); padding-bottom: var(--space-6); }
/* one definition for both rows: three equal columns, so the top and the floating row match exactly */
.hu-filters{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
  align-items: center; width: min(350px, 100%); }
.hu-filters .hu-selectwrap, .hu-filters .hu-select{ width: 100%; }
.hu-filters--float{ position: fixed; left: 0; right: 0; bottom: var(--space-5); z-index: var(--z-sticky);
  max-width: var(--content-wide); margin-inline: auto; padding: 0 var(--space-7);
  display: flex; justify-content: flex-end; box-sizing: border-box;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.hu-filters--float.is-shown{ opacity: 1; transform: none; }
.hu-filters--float.is-shown .hu-filters{ pointer-events: auto; }
.hu-filters--float .hu-select{ background: var(--bg-page); box-shadow: 0 2px 12px rgba(0,0,0,.1); }

/* ---------- Works archive — tidy grid, natural proportions ---------- */
/* keep enough page below the grid that a small result set can still be pulled up under the bar */
.hu-masonry{ column-count: 3; column-gap: var(--space-7); min-height: calc(100svh - var(--hdr-h, 88px) - 120px); }
.hu-masonry .hu-art{ margin: 0 0 var(--space-8); break-inside: avoid; -webkit-column-break-inside: avoid; }
.hu-copyright{ text-align: center; font-family: var(--font-sans); font-size: var(--fs-caption);
  color: var(--text-faint); margin-top: var(--space-7); letter-spacing: .04em; }

/* ---------- Profile ---------- */
.hu-profile{ display: grid; grid-template-columns: 300px 1fr; gap: var(--space-9); align-items: start; }
.hu-profile__spacer{ width: 300px; }
.hu-profile__aside{ display: flex; flex-direction: column; gap: var(--space-3); width: 300px; }
.hu-namestack--profile{ align-self: flex-start; }
.hu-portrait{ background: var(--surface-card); padding: 12px; border: var(--hairline); box-shadow: var(--shadow-sm); margin-bottom: var(--space-3); }
.hu-portrait__frame{ display: block; overflow: hidden; background: var(--surface-sunken); aspect-ratio: 1 / 1; }
.hu-portrait__frame img, .hu-portrait img{ display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.97); }
.hu-profile__name{ font-family: var(--font-cjk); font-weight: 500; font-size: 2.4rem; letter-spacing: .18em; margin: 0; padding-left: 0; white-space: nowrap; }
.hu-profile__rom{ font-family: var(--font-display); font-style: normal; font-size: 1.37rem; color: var(--text-muted); margin: 2px 0 0; width: 100%; position: relative; }
.hu-profile__rom .hu-rom-a{ display: inline-block; margin-left: 0.8%; width: 56.3%; text-align: justify; text-align-last: justify; white-space: nowrap; }
.hu-profile__rom .hu-rom-b{ position: absolute; top: 2px; left: 80.4%; transform: translateX(-50%); white-space: nowrap; }
.hu-rom-sep{ font-family: var(--font-sans); vertical-align: -0.12em; }
.hu-profile__occ{ margin-top: var(--space-4); }
.hu-occ-label{ display:block; font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.hu-profile__occ p{ font-size: var(--fs-body-sm); color: var(--text-secondary); margin: 0 0 .4em; line-height: var(--lh-normal); }
.hu-profile__occ--compact{ margin-top: var(--space-3); }
.hu-profile__occ--compact .hu-occ-label{ margin-bottom: var(--space-1); }
.hu-profile__occ--compact p{ font-size: var(--fs-caption); margin: 0 0 .35em; line-height: 1.4; }
.hu-cv{ margin-bottom: var(--space-8); }
.hu-cv > .hu-eyebrow{ display: block; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: var(--hairline); }
.hu-cv__row{ display: grid; grid-template-columns: 64px 1fr; gap: var(--space-5); padding: var(--space-3) 0; }
.hu-cv__year{ font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); color: var(--accent-warm); padding-top: .2em; }
.hu-cv__text{ font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: var(--lh-normal); }

/* ---------- Information sections ---------- */.hu-page > .hu-sh--center{ margin-bottom: var(--space-8); }
.hu-page--tight > .hu-sh--center{ margin-bottom: var(--space-7); }
.hu-band__head .hu-sh__sub{ max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hu-info-sec{ max-width: 980px; margin: 0 auto var(--space-9); }
.hu-info-sec > .hu-eyebrow{ display: block; margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: var(--hairline); }
.hu-coll-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); align-items: start; }

/* ---------- Information / Contact ---------- */
.hu-contact{ display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-9); margin-top: 0;
  max-width: 980px; margin-left: auto; margin-right: auto; }
.hu-form{ display: flex; flex-direction: column; gap: var(--space-5); }
.hu-form__actions{ margin-top: var(--space-2); }
.hu-form__err{ font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--accent, #b3402f); margin: var(--space-3) 0 0; }
.hu-info{ display: flex; flex-direction: column; gap: var(--space-7); padding-top: var(--space-2); }
.hu-info__block .hu-eyebrow{ display: block; margin-bottom: var(--space-2); }
.hu-info__link{ display: inline-block; font-size: var(--fs-body) !important; font-family: var(--font-sans) !important; letter-spacing: .01em; color: var(--text-secondary); background: none; border: 0; padding: 0; margin-top: 0; cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease; }
.hu-info__block .cjk{ font-size: var(--fs-body); color: var(--text-muted); }
.hu-info__link:hover{ color: var(--text-primary); border-bottom-color: var(--text-primary); }
.hu-info__legal{ border-top: var(--hairline); padding-top: var(--space-3); }
.hu-info__copyright{ font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-secondary); margin: 0 0 var(--space-4); }
.hu-info__disc-head{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-2); }
.hu-info__disc{ font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); line-height: var(--lh-relaxed); margin: 0 0 var(--space-2); }

/* ---------- Writings (文章) ---------- */
.hu-wsec{ max-width: 820px; }
.hu-wlist{ display: flex; flex-direction: column; }
.hu-wlist__row{ display: grid; grid-template-columns: 64px 1fr 24px; align-items: baseline; gap: var(--space-5);
  width: 100%; text-align: left; background: transparent; border: 0; border-bottom: var(--hairline);
  padding: var(--space-5) var(--space-2); cursor: pointer; font-family: var(--font-sans);
  transition: background var(--dur-base) var(--ease-out); }
.hu-wlist__row:hover{ background: var(--surface-panel); }
.hu-wlist__row:hover .hu-wlist__go{ color: var(--accent); transform: translateX(3px); }
.hu-wlist__year{ font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--accent-warm); }
.hu-wlist__main{ display: flex; flex-direction: column; gap: 4px; }
.hu-wlist__title{ font-family: var(--font-cjk); font-size: var(--fs-title-3); letter-spacing: .04em; color: var(--text-primary); }
.hu-wlist__en{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-body-sm); color: var(--text-muted); }
.hu-wlist__go{ color: var(--text-faint); transition: color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.hu-wlist__go svg{ width: 18px; height: 18px; }

/* article reader */
.hu-article{ max-width: 680px; padding-top: var(--space-2); }
.hu-article__head{ margin-bottom: var(--space-7); padding-bottom: var(--space-5); border-bottom: var(--keyline); }
.hu-article__title{ font-family: var(--font-cjk); font-weight: 500; font-size: var(--fs-title-1); letter-spacing: .06em; color: var(--text-primary); margin: 0; }
.hu-article__sub{ font-family: var(--font-display); font-style: normal; font-size: var(--fs-title-3); line-height: var(--lh-snug); color: var(--text-muted); margin: var(--space-3) 0 0; }
.hu-article__venue{ font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); margin: var(--space-2) 0 0; }
.hu-article__body{ font-family: var(--font-display); font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.hu-article__body.is-cjk, .hu-article__body .is-cjk{ font-family: var(--font-cjk); font-size: var(--fs-body); line-height: var(--lh-cjk); }
.hu-article__body p{ margin: 0 0 var(--space-5); text-align: justify; }
.hu-article__lead{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-title-3); line-height: var(--lh-snug); color: var(--text-primary); margin: 0 0 var(--space-6); text-align: left !important; }
.hu-article__body.is-cjk .hu-article__lead{ font-family: var(--font-cjk); font-style: normal; }
.hu-article__rule{ display: flex; align-items: center; gap: var(--space-4); margin: var(--space-6) 0; }
.hu-article__rule::before, .hu-article__rule::after{ content: ""; flex: 1; height: 1px; background: var(--border-hairline); }
.hu-article__rule span{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-warm); }
.hu-article__sign{ font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); text-align: right; margin-top: var(--space-6); }

/* creative jottings */
.hu-jot{ display: flex; flex-direction: column; gap: var(--space-6); }
.hu-jot__line{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--text-secondary); margin: 0; padding: var(--space-4) 0; border-bottom: var(--hairline); text-wrap: pretty; }
.hu-jot__line.is-cjk{ font-family: var(--font-cjk); font-style: normal; font-size: var(--fs-body); line-height: var(--lh-cjk); letter-spacing: .03em; }
.hu-jot__pair{ display: grid; grid-template-columns: 280px 1fr; gap: var(--space-7); align-items: center; margin: 0; padding: var(--space-4) 0; border-bottom: var(--hairline); }
.hu-jot__pair--alt{ grid-template-columns: 1fr 280px; }
.hu-jot__pair--alt .hu-jot__plate{ order: 2; }
.hu-jot__plate{ background: var(--surface-card); padding: 10px; border: var(--hairline); box-shadow: var(--shadow-sm); }
.hu-jot__plate img{ display: block; width: 100%; height: auto; }
.hu-jot__cap{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-title-3); line-height: var(--lh-relaxed); color: var(--text-secondary); text-wrap: pretty; }
.hu-jot__cap.is-cjk{ font-family: var(--font-cjk); font-style: normal; font-size: var(--fs-lead); line-height: var(--lh-cjk); letter-spacing: .04em; }

/* full-paper PDF link */
.hu-pdf{ display: inline-flex; align-items: center; gap: .5em; margin-top: var(--space-7);
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); letter-spacing: .03em;
  color: var(--accent); text-decoration: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .7em 1.3em; cursor: pointer; background: transparent; white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.hu-pdf:hover{ border-color: var(--accent); color: var(--accent-hover); }
.hu-pdf svg{ width: 17px; height: 17px; }
.hu-pdfview{ margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.hu-pdfview iframe{ width: 100%; height: 78vh; border: var(--hairline); border-radius: var(--radius-sm); background: var(--surface-sunken); box-shadow: var(--shadow-sm); }
.hu-pdf-pages{ margin-top: var(--space-6); }
.hu-pdf-page{ display: block; width: 100%; height: auto; margin: 0 auto var(--space-4); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.08); background: #fff; }
.hu-pdf-load, .hu-pdf-err{ margin-top: var(--space-5); font-size: var(--fs-body-sm); color: var(--text-muted); }
.hu-pdf-err{ color: var(--accent); }

/* ---------- Footer ---------- */
.hu-footer{ padding: var(--space-7); display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.hu-footer__meta{ font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- Lightbox ---------- */
.hu-lb{ position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(20, 18, 14, 0.94); touch-action: none; overscroll-behavior: contain;
  display: flex; align-items: center; justify-content: center; padding: var(--space-8);
  animation: hu-fade var(--dur-base) var(--ease-out); }
@keyframes hu-fade{ from{ opacity: 0; } to{ opacity: 1; } }
.hu-lb__top{ position: fixed; top: var(--space-5); right: var(--space-5); z-index: 3; display: flex; align-items: center; gap: var(--space-2); }
.hu-lb__zoombtns{ display: flex; align-items: center; gap: 0; }
.hu-lb__top button{ width: 52px; height: 52px; }
.hu-lb__top button svg{ width: 30px; height: 30px; stroke-width: 1.6; }
.hu-lb__top .hu-lb__zoombtns button{ width: 40px; height: 52px; }
.hu-lb__top .hu-lb__zoombtns button svg{ width: 24px; height: 24px; }
.hu-lb__fig{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); max-width: 92vw; }
.hu-lb__fig.is-draggable{ cursor: grab; }
.hu-lb__fig.is-draggable:active{ cursor: grabbing; }
.hu-app img{ -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.hu-lb__box{ position: relative; display: block; overflow: hidden; cursor: zoom-in; background: transparent; box-shadow: none; scrollbar-width: none; }
.hu-lb__box::-webkit-scrollbar{ display: none; }
.hu-lb__pan{ position: absolute; inset: 0; display: block; }
.hu-lb.is-zoom{ padding: var(--space-8) var(--space-8) var(--space-6); align-items: flex-start; justify-content: flex-start; overflow: auto; scrollbar-width: none; }
.hu-lb::-webkit-scrollbar{ display: none; }
.hu-lb.is-zoom .hu-lb__fig{ max-width: none; margin-inline: auto; }
.hu-lb.is-zoom .hu-lb__box{ cursor: zoom-out; overflow: hidden; }
.hu-lb__box.is-ready{ box-shadow: none; }
.hu-lb__box.is-instant .hu-lb__full{ transition: none; }
.hu-lb__box img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; box-shadow: none; max-width: none; max-height: none; }
.hu-lb__full{ opacity: 1; }
.hu-lb__fig figcaption{ text-align: center; }
.hu-lb__fig .hu-label{ align-items: center; }
.hu-lb__fig .hu-label__top{ justify-content: center; }
.hu-lb.is-zoom .hu-lb__nav{ position: fixed; z-index: 3; }
.hu-lb__slide{ display: block; touch-action: none; }
@keyframes hu-lb-in-r{ from{ transform: translateX(64px); opacity: 0; } to{ transform: none; opacity: 1; } }
@keyframes hu-lb-in-l{ from{ transform: translateX(-64px); opacity: 0; } to{ transform: none; opacity: 1; } }
.hu-lb__nav{ position: fixed; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; z-index: 3;
  display: flex; align-items: center; justify-content: center; background: transparent; border: 0;
  color: var(--text-on-ink-muted); cursor: pointer; transition: color var(--dur-base) var(--ease-out); }
.hu-lb__nav:hover{ color: var(--text-on-ink); }
.hu-lb__nav svg{ width: 30px; height: 30px; }
.hu-lb__nav--prev{ left: var(--space-5); }
.hu-lb__nav--next{ right: var(--space-5); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .hu-hero{ grid-template-columns: 1fr; gap: var(--space-7); min-height: 0; padding-top: var(--space-8); }
  .hu-coll-grid{ grid-template-columns: repeat(2, 1fr); }
  .hu-masonry{ column-count: 2; }
  .hu-profile{ grid-template-columns: 1fr; }
  .hu-profile__spacer{ width: auto; }
  .hu-profile__aside{ position: static; width: auto; display: grid;
    grid-template-columns: minmax(132px, 46%) 1fr; align-items: center; column-gap: var(--space-5); row-gap: 0;
    margin-bottom: var(--space-5); }
  .hu-portrait{ width: 100%; flex: none; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; }
  .hu-namestack--profile{ grid-column: 2; align-self: end; justify-self: start; align-items: flex-start; }
  .hu-profile__name{ font-size: clamp(1.6rem, 7vw, 2.2rem); white-space: normal; letter-spacing: .12em; padding-left: 0; margin: 0; line-height: 1.1; }
  .hu-profile__rom{ font-size: clamp(1rem, 4.2vw, var(--fs-title-3)); margin: 2px 0 0; }
  .hu-profile__occ{ grid-column: 2; align-self: start; margin-top: var(--space-4); }
  .hu-profile__occ p{ font-size: clamp(.82rem, 3.4vw, var(--fs-body-sm)); margin: 0; }
  .hu-contact{ grid-template-columns: 1fr; }
}
@media (max-width: 680px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse){
  .hu-lb__nav{ display: none; }
  .hu-lb__zoombtns{ display: none; }
  .hu-lb__slide{ touch-action: pinch-zoom; }
  .hu-lb__box, .hu-lb__pan{ touch-action: pinch-zoom; }
  .hu-lb{ padding: 0; }
  .hu-lb__fig{ max-width: 96vw; gap: 0; justify-content: center; }
  .hu-lb__box{ box-shadow: none; cursor: default; touch-action: pinch-zoom; }
  .hu-lb__fig figcaption{ display: none; }
  .hu-coll-grid{ grid-template-columns: 1fr; gap: var(--space-6); }
  .hu-masonry{ column-count: 1; column-gap: var(--space-5); }
  .hu-wrap--wide.hu-page{ padding-left: var(--space-4); padding-right: var(--space-4); }
  .hu-masonry .cjh-art__mat{ --mat: 8px; }
  .hu-masonry .hu-art{ margin-bottom: var(--space-6); }
  .hu-band__head{ flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .hu-band__head > .hu-sh{ width: 100%; }
  .hu-page__head{ flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: var(--space-4); }
  .hu-band__head .hu-btn--ghost{ align-self: flex-end; }
  .hu-page__head .hu-filters{ width: 100%; gap: var(--space-2); }
  .hu-page__head .hu-filters .hu-select{ width: 100%; min-width: 0; padding: .5em 1.7em .5em .7em; text-overflow: ellipsis; }
  .hu-page__head .hu-filters .hu-selectwrap .chev{ right: .6em; }
  .hu-filters--float{ padding: 0 var(--space-4); }
  .hu-filters--float .hu-filters{ width: 100%; gap: var(--space-2); }
  .hu-filters--float .hu-select{ width: 100%; min-width: 0; padding: .5em 1.7em .5em .7em; text-overflow: ellipsis; }
  .hu-page__head .hu-eyebrow{ white-space: nowrap; letter-spacing: .1em; gap: .5em; }
  .hu-page__head .hu-eyebrow .rule{ width: 20px; flex: 0 0 20px; }
  .hu-jot__pair, .hu-jot__pair--alt{ grid-template-columns: 1fr; gap: var(--space-4); }
  .hu-jot__pair--alt .hu-jot__plate{ order: 0; }
  .hu-jot__plate{ max-width: 320px; }
  .hu-page{ padding-left: var(--space-5); padding-right: var(--space-5); }
  .hu-hero{ padding-left: var(--space-5); padding-right: var(--space-5); }
  .hu-band{ padding-left: var(--space-5); padding-right: var(--space-5); }
  .hu-band--flush{ padding-left: var(--space-5); padding-right: var(--space-5); }
  .hu-hero-full__lockup{ padding-left: var(--space-5); padding-right: var(--space-5); }
  .hu-hero-full__label{ left: var(--space-5); right: var(--space-5); }
  .hu-pdfview iframe{ height: 60vh; }
  .hu-statement{ padding: var(--space-8) var(--space-5); }
  .hu-statement__inner{ gap: 0; }
  .hu-statement__eyebrow{ margin-bottom: var(--space-5); letter-spacing: .22em; }
  .hu-statement__cjk{ line-height: 1.85; letter-spacing: .06em; }
  .hu-statement__en{ margin-top: var(--space-4); line-height: 1.55; max-width: 100%; }
  .hu-statement__rule{ margin: var(--space-6) 0 var(--space-3); width: 44px; }
  .hu-band{ padding-bottom: var(--space-6); }
  .hu-footer{ padding: var(--space-4) var(--space-5) var(--space-6); justify-content: flex-start; }
  .hu-footer__meta{ text-align: left; }
}
@media (max-width: 680px) and (orientation: portrait){
  /* the bar floats over the page here, so keep the icon clear of the content */
  .hu-page{ padding-top: 68px; }
  .hu-hero-full__lockup{ padding-top: 84px; }
}
@media (max-width: 860px){
  .hu-statement__cjk{ line-height: 1.7; letter-spacing: .04em; }  .hu-statement__en{ letter-spacing: .01em; }
}

/* 大標與作品名統一用簡報那支 Noto Serif TC;內文仍是霞鶩文楷 */
.hu-hero__name, .hu-profile__name, .hu-hf-series__cjk, .hu-article__title,
.hu-wlist__title, .hu-brand .cn,
.hu-sh__title.is-cjk, .hu-sh__title .cjk,
.hu-art__title.is-cjk, .hu-art__title .cjk,
.hu-label .t.is-cjk, .hu-label .t .cjk,
.hu-hf-cap .cjk{ font-family: "Noto Serif TC", serif; }
/* nav bar：作品/簡介/論述/資訊 用姓名那套字 */
.hu-nav a, .hu-mobnav a{ font-family: "Cormorant Garamond", "Noto Serif TC", Georgia, serif; font-style: normal; letter-spacing: .06em; }
/* 論述／資訊頁的副標題不用斜體 */
.hu-sh__sub{ font-style: normal; }

/* landscape phones: width alone triggers the stacked mobile layout above even though there's
   no vertical room for a full-bleed hero image — placed last so it wins the cascade over the
   max-width rules and forces the side-by-side layout, capping heights so the hero fits on
   screen instead of overflowing taller than the lightbox view. */
@media (max-height: 500px) and (orientation: landscape){
  /* the full bar is back on landscape phones — keep it slim */
  .hu-hdr{ padding: var(--space-3) var(--space-5); gap: var(--space-4); }
  .hu-brand .cn{ font-size: 1.15rem; letter-spacing: .12em; }
  .hu-brand .en{ font-size: .68rem; }
  .hu-nav{ gap: var(--space-4); }
  .hu-nav a{ font-size: var(--fs-caption); }
  .hu-lang button{ font-size: var(--fs-caption); }
  .hu-hero{ grid-template-columns: 0.85fr 1.15fr; min-height: 0; padding-top: var(--space-4); padding-bottom: var(--space-4); align-items: center; }
  .hu-hero__plate, .hu-hero__mat{ max-height: 82vh; }
  .hu-hero__frame{ max-height: calc(82vh - 40px); width: auto; margin-inline: auto; }
  .hu-hero__lockup{ gap: var(--space-2); }
  /* landscape phones have plenty of width even though they're short — use the same 3-up
     grid as desktop instead of the 1/2-col tiers picked by width alone */
  .hu-masonry{ column-count: 3; column-gap: var(--space-6); }
  /* landscape phone: keep the deck-style two-column hero instead of stacking */
  .hu-hero-full{ grid-template-columns: minmax(0, max-content) 1fr; height: calc(100svh - var(--hdr-h, 88px)); }
  .hu-hero-full__plate{ aspect-ratio: auto; }
  .hu-hero-full__lockup{ padding-top: var(--space-5); padding-bottom: var(--space-5); gap: var(--space-2); justify-content: flex-start; }
  .hu-hero-full{ --nm: clamp(2rem, 11vh, 3.6rem); }
  .hu-hf-series{ width: min(34ch, 34vw); margin-top: clamp(var(--space-3), 4vh, 34px); }
  .hu-hf-series__title{ font-size: clamp(1.05rem, 3.6vh, 1.6rem); }
  .hu-hf-series__sub{ font-size: clamp(.85rem, 2.1vh, 1.05rem); line-height: 1.45; }
  /* short screen, plenty of width: smaller plates, two more of them */
  .hu-grid-4{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-4); }
  .hu-hero-full__veil{ left: 0; top: 0; bottom: 0; right: auto; width: 30%; height: auto;
    background: linear-gradient(90deg, #FBF7EF 0%, rgba(251,247,239,.97) 12%, rgba(251,247,239,.86) 26%, rgba(251,247,239,.62) 44%, rgba(251,247,239,.34) 64%, rgba(251,247,239,.12) 82%, rgba(251,247,239,0) 100%); }
}