/* ============================================================
   Portfolio UI kit — component + layout styles (tokens from styles.css)
   ============================================================ */

.hu-app { min-height: 100vh; background: var(--bg-page); color: var(--text-primary); }
.hu-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-7); }
.hu-wrap--wide { max-width: var(--content-wide); }

/* ---------- buttons ---------- */
.hu-btn{ font-family: var(--font-sans); font-weight: var(--fw-semibold); letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; }
.hu-btn:active{ transform: translateY(1px); }
.hu-btn--md{ font-size: var(--fs-body-sm); padding: .72em 1.45em; }
.hu-btn--lg{ font-size: var(--fs-body); padding: .72em 2.1em; min-width: 107px; min-height: 43px; }
.hu-btn--primary{ background: var(--accent); color: var(--text-on-ink); }
.hu-btn--primary:hover{ background: var(--accent-hover); }
.hu-btn--outline{ background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.hu-btn--outline:hover{ border-color: var(--accent); color: var(--accent); }
.hu-btn--onink{ background: transparent; color: var(--text-on-ink); border-color: var(--border-on-ink); }
.hu-btn--onink:hover{ background: var(--text-on-ink); color: var(--c-ink); border-color: var(--text-on-ink); }
.hu-btn--ghost{ background: transparent; color: var(--text-secondary); padding: .5em .4em; }
.hu-btn--ghost:hover{ color: var(--accent); }

.hu-iconbtn{ display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--text-secondary);
  border-radius: var(--radius-sm); transition: all var(--dur-base) var(--ease-out); }
.hu-iconbtn:hover{ color: var(--accent); border-color: var(--border-hairline); }
.hu-iconbtn--onink{ color: var(--text-on-ink-muted); }
.hu-iconbtn--onink:hover{ color: var(--text-on-ink); border-color: var(--border-on-ink); }
.hu-iconbtn svg{ width: 20px; height: 20px; }

/* ---------- tags / eyebrow ---------- */
.hu-tag{ font-family: var(--font-sans); font-size: var(--fs-caption); letter-spacing: .03em;
  display: inline-flex; align-items: center; gap: .4em; line-height: 1; padding: .42em .85em;
  border-radius: var(--radius-pill); font-weight: var(--fw-medium); }
.hu-tag--Watercolor{ background: var(--accent-wash); color: var(--accent); }
.hu-tag--Oil{ background: #F2E2D6; color: var(--accent-warm-hover); }
.hu-tag--Ink{ background: var(--surface-sunken); color: var(--text-secondary); }
.hu-eyebrow{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .7em; }
.hu-eyebrow .rule{ width: 44px; height: 1px; background: #A85C3C; opacity: 1; }
/* keyboard focus — never shown for mouse clicks, and drawn in the same terracotta as the rules */
.hu-app :focus{ outline: none; }
.hu-app :focus-visible{ outline: none; }
.hu-nav a:focus-visible::after{ right: 0; }
.hu-nav a:focus-visible{ color: var(--text-primary); }
.hu-lang button:focus-visible{ color: var(--text-primary); outline: 1px solid #A85C3C; outline-offset: 4px; }
.hu-art:focus-visible, .hu-btn:focus-visible, .hu-iconbtn:focus-visible, .hu-burger:focus-visible,
.hu-select:focus-visible{ outline: 1px solid #A85C3C; outline-offset: 5px; }
.hu-mobnav a:focus-visible{ background: rgba(168,92,60,.07); }
.hu-mobnav__lang button:focus-visible{ outline: 1px solid #A85C3C; outline-offset: 4px; }

/* ---------- header ---------- */
.hu-hdr{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-5) var(--space-7); font-family: var(--font-sans); box-sizing: border-box; }
.hu-hdr.hu-hdr--bordered{ border-bottom: var(--hairline); position: relative; z-index: var(--z-sticky); background: var(--bg-page); }
.hu-hdr.hu-hdr--bordered.is-pinned{ position: sticky; top: 0; }
.hu-hdr.hu-hdr--bordered.is-float{ position: fixed; top: 0; left: 0; right: 0; transform: translate3d(0,-101%,0);
  transition: none; }
.hu-hdr.hu-hdr--bordered.is-float.is-armed{ will-change: transform;
  transition: transform .42s cubic-bezier(.22,.61,.36,1); }
.hu-hdr.hu-hdr--bordered.is-float.is-in{ transform: translate3d(0,0,0); }
.hu-brand{ display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; cursor: pointer; white-space: nowrap; flex: none;
  opacity: 1; transition: opacity .5s var(--ease-out); }
.hu-brand.is-hidden{ opacity: 0; pointer-events: none; }
.hu-hdr .hu-nav, .hu-hdr .hu-right{ transition: opacity .6s var(--ease-out); }
.hu-hdr.hu-hdr--bordered{ transition: border-color .01s linear; }
.hu-hdr.hu-hdr--bordered.is-line{ border-bottom-color: transparent; }
.hu-hdr.is-line::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--border-hairline); clip-path: inset(0 0 0 100%); }
.hu-hdr.is-line.is-drawing::after{ clip-path: inset(0 0 0 0); transition: clip-path 1.15s cubic-bezier(.5,0,.2,1); }
.hu-hdr.is-quiet .hu-nav, .hu-hdr.is-quiet .hu-right{ opacity: 0; pointer-events: none; }

.hu-brand .cn{ font-family: var(--font-cjk); font-weight: 500; font-size: 1.4rem; letter-spacing: .18em; padding-left: 0; margin-right: 0; color: var(--text-primary); white-space: nowrap; }
.hu-brand .en{ font-family: var(--font-display); font-style: normal; font-size: .8rem; letter-spacing: .02em; color: var(--text-muted); align-self: stretch; position: relative; }
.hu-brand .en .hu-rom-a{ display: inline-block; margin-left: 0.8%; width: 56.3%; text-align: justify; text-align-last: justify; white-space: nowrap; }
.hu-brand .en .hu-rom-b{ position: absolute; top: 0; left: 80.4%; transform: translateX(-50%); white-space: nowrap; }
.hu-nav{ display: flex; align-items: center; gap: var(--space-5); }
.hu-nav a{ font-size: var(--fs-body-sm); font-weight: var(--fw-medium); letter-spacing: .03em; color: var(--text-secondary); white-space: nowrap;
  text-decoration: none; position: relative; padding: 2px 0; cursor: pointer; transition: color var(--dur-base) var(--ease-out); }
.hu-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background: #A85C3C; transition: right var(--dur-base) var(--ease-out); }
.hu-nav a:hover{ color: var(--accent); }
.hu-nav a:hover::after, .hu-nav a.active::after{ right: 0; }
.hu-nav a.active{ color: var(--text-primary); }
.hu-right{ display: flex; align-items: center; gap: var(--space-5); }
.hu-hdr{ position: relative; }
.hu-burger{ display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer; color: var(--text-primary); padding: 0; }
.hu-burger svg{ width: 24px; height: 24px; }
.hu-mobnav{ display: none; }
@media (max-width: 680px) and (orientation: portrait){
  /* no header bar on phones — the name stays top-left, the menu icon top-right */
  .hu-hdr, .hu-hdr.hu-hdr--bordered{ position: fixed; top: 0; left: 0; right: 0;
    background: linear-gradient(180deg, #FBF7EF 0%, #FBF7EF 38%, rgba(251,247,239,.97) 55%, rgba(251,247,239,.88) 68%, rgba(251,247,239,.68) 79%, rgba(251,247,239,.4) 88%, rgba(251,247,239,.16) 95%, rgba(251,247,239,0) 100%);
    border-bottom: 0; padding: var(--space-3) var(--space-4) var(--space-4); pointer-events: none; }
  .hu-hdr.is-line::after{ display: none; }
  .hu-hdr > *{ pointer-events: auto; }
  .hu-brand{ display: inline-flex; }
  .hu-brand.is-hidden{ opacity: 0; }
  .hu-brand .cn, .hu-brand .en{ text-shadow: none; }
  .hu-right{ margin-left: auto; }
  .hu-burger{ display: inline-flex; background: none; box-shadow: none; backdrop-filter: none;
    -webkit-backdrop-filter: none; border-radius: 0; }
  .hu-hdr.is-menu, .hu-hdr.hu-hdr--bordered.is-menu{ background: var(--bg-page); }
  .hu-mobnav{ display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface-card); border-bottom: var(--hairline); box-shadow: var(--shadow-md); z-index: var(--z-sticky);
    animation: huMobIn .3s var(--ease-out) both; }
  @keyframes huMobIn{ from{ opacity: 0; transform: translateY(-6px) } to{ opacity: 1; transform: none } }  .hu-mobnav a{ font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium);
    color: var(--text-secondary); text-decoration: none; padding: var(--space-4) var(--space-6);
    border-top: var(--hairline); cursor: pointer; }
  .hu-mobnav a:first-child{ border-top: 0; }
  .hu-mobnav a.active{ color: var(--accent); }
  .hu-mobnav__lang{ display: flex; gap: var(--space-6); border-top: var(--hairline);
    padding: var(--space-4) var(--space-6) var(--space-5); }
  .hu-mobnav__lang button{ background: none; border: 0; padding: 2px 0; cursor: pointer; position: relative;
    font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400;
    letter-spacing: normal; color: var(--text-faint); }
  .hu-mobnav__lang button::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
    background: #A85C3C; transition: right var(--dur-base) var(--ease-out); }
  .hu-mobnav__lang button.on{ color: var(--text-primary); }
  .hu-mobnav__lang button.on::after{ right: 0; }
  .hu-right__lang{ display: none; }
  .hu-nav{ display: none; }
  .hu-hdr{ padding: var(--space-4) var(--space-5); gap: var(--space-4); }
  .hu-brand .cn{ font-size: 1.25rem; letter-spacing: .12em; padding-left: 0; }
  .hu-brand .en{ font-size: .72rem; }
  .hu-right{ gap: var(--space-4); }
  .hu-burger{ width: 36px; height: 36px; margin-right: calc(var(--space-3) * -1); }
  .hu-mobnav{ border-top: var(--hairline); }
}

.hu-lang{ display: inline-flex; align-items: center; gap: .55em; font-family: var(--font-sans); }
.hu-lang button{ background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium); color: var(--text-faint); position: relative;
  transition: color var(--dur-base) var(--ease-out); }
.hu-lang button::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: #A85C3C; transition: right var(--dur-base) var(--ease-out); }
.hu-lang button:hover{ color: var(--text-secondary); }
.hu-lang button.on{ color: var(--text-primary); }
.hu-lang button.on::after{ right: 0; }
.hu-lang .sep{ color: var(--text-faint); font-size: var(--fs-caption); }

/* header-on-dark (overlay + ink) */
.hu-hdr--ondark .hu-brand .cn, .hu-hdr--ondark .hu-nav a.active{ color: var(--text-on-ink); }
.hu-hdr--ondark .hu-brand .en, .hu-hdr--ondark .hu-nav a{ color: var(--text-on-ink-muted); }
.hu-hdr--ondark .hu-nav a:hover, .hu-hdr--ondark .hu-nav a.active{ color: var(--text-on-ink); }
.hu-hdr--ondark .hu-nav a::after{ background: var(--text-on-ink); }
.hu-hdr--ondark .hu-lang button{ color: var(--text-on-ink-muted); }
.hu-hdr--ondark .hu-lang button:hover, .hu-hdr--ondark .hu-lang button.on{ color: var(--text-on-ink); }
.hu-hdr--ondark .hu-lang .sep{ color: var(--border-on-ink); }

/* ---------- artwork card ---------- */
.hu-art{ display: block; width: 100%; background: transparent; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font-family: var(--font-sans); }
.hu-art__mat{ display: block; background: var(--surface-card); padding: 14px; border: var(--hairline); box-shadow: var(--shadow-sm); margin-inline: 0;
  transition: box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.hu-art__frame{ display: block; overflow: hidden; background: var(--surface-sunken); aspect-ratio: 4 / 5; }
.hu-art__frame[style*="aspect-ratio"]{ width: 100%; }
.hu-art__img{ display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-grand) var(--ease-out), filter var(--dur-grand) var(--ease-out); filter: saturate(.96); }
.hu-art:hover .hu-art__mat{ box-shadow: var(--shadow-frame); transform: translateY(-3px); }
.hu-art:hover .hu-art__img{ transform: scale(1.035); filter: saturate(1.05); }
.hu-art__label{ margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.hu-art__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hu-art__title{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-title-3); line-height: 1.15; font-weight: var(--fw-medium); color: var(--text-primary); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.hu-art__title.is-cjk{ font-family: var(--font-cjk); font-style: normal; letter-spacing: .04em; }
.hu-art__title .cjk{ font-family: var(--font-cjk); font-style: normal; letter-spacing: .06em; }
.hu-art__year{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--text-muted); flex: none; }
.hu-art__meta{ font-size: var(--fs-caption); color: var(--text-muted); }
.hu-art__coll{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--accent-warm); margin-top: 2px; }

/* ---------- museum label ---------- */
.hu-label{ font-family: var(--font-sans); display: flex; flex-direction: column; gap: 5px; }
.hu-label__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hu-label__year{ font-family: var(--font-sans); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); color: var(--text-muted); flex: none; }
.hu-label--onink .hu-label__year{ color: var(--text-on-ink-muted); }
.hu-label .t{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); color: var(--text-secondary); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.hu-label .t.is-cjk{ font-family: var(--font-cjk); font-style: normal; letter-spacing: .04em; color: var(--text-primary); }
.hu-label .t .cjk{ font-family: var(--font-cjk); font-style: normal; letter-spacing: .06em; color: var(--text-primary); }
.hu-label .m{ font-size: var(--fs-caption); color: var(--text-muted); }
.hu-label--onink .t,
.hu-label--onink .t.is-cjk,
.hu-label--onink .t .cjk{ color: var(--text-on-ink); }
.hu-label--onink .m{ color: #DDD6C8; }
.hu-label__coll{ font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--accent-gold); margin-top: 4px; }

/* ---------- section heading ---------- */
.hu-sh{ display: flex; flex-direction: column; }
.hu-sh--center{ align-items: center; text-align: center; }
.hu-sh__title{ font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display-3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; margin: var(--space-3) 0 0; }
.hu-sh__title .cjk{ font-family: var(--font-cjk); font-weight: 500; letter-spacing: var(--ls-cjk); }
.hu-sh__title.is-cjk{ font-family: var(--font-cjk); font-weight: 500; letter-spacing: var(--ls-cjk); }
.hu-sh__sub{ font-family: var(--font-display); font-style: italic; font-size: var(--fs-lead); color: var(--text-secondary); text-wrap: balance; margin: var(--space-3) 0 0; max-width: 56ch; }

/* ---------- inputs ---------- */
.hu-fieldlabel{ 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); display: block; }
.hu-input{ font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary); background: var(--surface-card);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: .7em .9em; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.hu-input::placeholder{ color: var(--text-faint); }
.hu-input:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
textarea.hu-input{ resize: vertical; min-height: 128px; line-height: var(--lh-normal); }
.hu-select{ appearance: none; -webkit-appearance: none; font-family: var(--font-sans); font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium); color: var(--text-primary); background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: .5em 2.2em .5em .9em; cursor: pointer; }
.hu-select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.hu-select{ display: inline-flex; align-items: center; text-align: left; line-height: 1.2;
  height: 2.5em; box-sizing: border-box; padding-block: 0; }
.hu-select__val{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hu-selectwrap{ position: relative; display: inline-flex; align-items: center; }
.hu-selectwrap .chev{ position: absolute; right: .8em; pointer-events: none; color: var(--text-muted); font-size: .7em;
  transition: transform var(--dur-fast) var(--ease-out); }
.hu-selectwrap.is-open .chev{ transform: rotate(180deg); }
.hu-selectwrap.is-open .hu-select{ border-color: var(--accent); }
/* opens upward by default; downward when there is room below (the filter row at the top of a page) */
.hu-selectmenu{ position: absolute; bottom: calc(100% + 6px); left: 0; right: auto; min-width: 100%; width: max-content; max-width: min(70vw, 380px); overflow-y: auto;
  margin: 0; padding: var(--space-2) 0; list-style: none; background: var(--bg-page); border: var(--hairline);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: var(--z-modal); overscroll-behavior: contain;
  animation: huSelFade .16s var(--ease-out) both; }
@keyframes huSelFade{ from{ opacity: 0 } to{ opacity: 1 } }
.hu-selectmenu.is-down{ bottom: auto; top: calc(100% + 6px); }
/* per-control alignment: series runs right to the row's edge, medium centres, year matches its button */
.hu-selectmenu.al-wide{ max-width: none; }
.hu-selectmenu.al-center{ left: 50%; transform: translateX(-50%); }
.hu-selectmenu.al-exact{ width: 100%; min-width: 0; max-width: none; }
.hu-selectmenu.al-exact button{ white-space: normal; }
.hu-selectmenu li{ margin: 0; }
.hu-selectmenu button{ display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--text-secondary);
  padding: .58em 1.1em; white-space: normal; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.hu-selectmenu button:hover{ background: var(--surface-sunken); color: var(--text-primary); }
.hu-selectmenu button.on{ color: var(--text-primary); font-weight: var(--fw-medium); }