/* Silver thread, one flower, and a readable hierarchy. Artwork stays untouched. */
@font-face {
  font-family: "Lianlian Serif";
  src: url("assets/fonts/lianlian-serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
html[data-surface] {
  --serif: "Lianlian Serif", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --ease-settle: cubic-bezier(.22,.68,.25,1);
  --ease-touch: cubic-bezier(.18,.8,.3,1.16);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  text-underline-offset: .25em;
}
html[data-surface] :is(h1,h2,h3) { font-family: var(--serif); font-weight: 500; line-height: 1.55; letter-spacing: .025em; text-wrap: pretty; }
html[data-surface] :is(button,input,select) { line-height: 1.45; }
html[data-surface] :is(button,a,select) { touch-action: manipulation; }
html[data-surface] :is(button,a,select):focus-visible { outline-width: 1.5px; outline-offset: 4px; border-radius: 2px; }
html[data-surface] .brand { gap: 10px; }
html[data-surface] .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
html[data-surface] .brand b { font-family: var(--serif); font-weight: 500; letter-spacing: .11em; }
html[data-surface] .brand small { font-size: 11px; letter-spacing: .1em; }
html[data-surface] .site-header nav { font-size: 13px; letter-spacing: .03em; }
html[data-surface] .nav-count { font-size: 11px; margin-left: 6px; font-variant-numeric: tabular-nums; }
html[data-surface] .eyebrow { font-size: 12px; letter-spacing: .11em; }
html[data-surface] .index-page .index-heading h1 { letter-spacing: .055em; }
html[data-surface] .index-page .index-heading h1 small { font: 12px var(--sans); letter-spacing: 0; }
html[data-surface] .index-page .filter-chip { font-size: 13px; min-height: 40px; padding: 8px 11px; }
html[data-surface] .index-page .catalog-select { font-size: 13px; }
html[data-surface] .index-page .search-field input { font-size: 14px; }
html[data-surface] .index-page .results-summary { font-size: 12px; min-height: 36px; padding: 10px 0 12px; line-height: 1.5; gap: 14px; }
html[data-surface] .index-page .wall-chapter small { font-size: 12px; }
html[data-surface] .index-page .art-card h3 { font-size: 19px; line-height: 1.6; letter-spacing: .015em; }
html[data-surface] .index-page .art-card small { font-size: 12px; line-height: 1.6; }
html[data-surface] .index-page :is(.card-explore,.card-compare) { font-size: 12px; min-height: 40px; display: inline-flex; align-items: center; }
html[data-surface] .index-page .card-links { gap: 14px; flex-wrap: wrap; }
html[data-surface] .index-page .card-seen { font-size: 10px; }
html[data-surface] .card-save { color: #c5b6d0; }
html[data-surface] .card-save[aria-pressed="true"] { color: #e0bfea; }
html[data-surface] .context-return { font-size: 13px; }
html[data-surface] .routes-heading p { font-size: 13px; }
html[data-surface] .routes-tools select { font-size: 12px; min-height: 40px; }
html[data-surface] .route-choice-title h3 { font-size: 21px; line-height: 1.55; }
html[data-surface] .route-choice-title > span { font-size: 12px; }
html[data-surface] .exhibition-choice > p { font-size: 14px; line-height: 1.85; margin-top: 7px; }
html[data-surface] .segment-picker { font-size: 12px; }
html[data-surface] .segment-picker select { font-size: 12px; }
html[data-surface] .segment-heading > p:last-child { font-size: 14px; line-height: 1.85; max-width: 760px; }
html[data-surface] .segment-heading .eyebrow { font-size: 12px; }
html[data-surface] .segment-work figcaption > p { font-size: 14px; line-height: 1.85; margin-top: 7px; }
html[data-surface] .segment-image img { max-height: min(48svh,560px); }
html[data-surface] .segment-work-links > * { font-size: 12px; min-height: 42px; }
html[data-surface] .segment-version { font-size: 12px; }
html[data-surface] .segment-ending small { font-size: 12px; }
html[data-surface] .segment-home .text-link { font-size: 13px; }
html[data-surface] .linked-pair .pair-heading h1 { line-height: 1.65; letter-spacing: .025em; }
html[data-surface] .encounter-figure figcaption > span { font-size: 12px; letter-spacing: .04em; }
html[data-surface] .encounter-figure small { font-size: 12px; }
html[data-surface] .pair-current-note > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; }
html[data-surface] .connection-label { font-size: 13px; }
html[data-surface] .connection-reason { font-size: 14px !important; line-height: 1.7; }
html[data-surface] .connection-title { font-size: 12px !important; }
html[data-surface] :is(.work-actions button,.work-actions .text-link,.pair-ending .text-link,.trail-archive summary) { font-size: 12px; }
html[data-surface] .compare-head p:not(.eyebrow) { font-size: 14px; }
html[data-surface] :is(.compare-tools button,.compare-note,.compare-pair figcaption) { font-size: 13px; line-height: 1.85; }
html[data-surface] .about-copy p { font-size: 15px; line-height: 1.95; }
html[data-surface] .about-copy :is(.colophon,.eyebrow), html[data-surface] .about-art figcaption { font-size: 13px; }
html[data-surface] .about-copy h2 { font-size: 23px; margin-bottom: 13px; }
html[data-surface] .empty-state { padding: 50px 20px 65px; }
html[data-surface] .empty-state::before { content: ""; display: block; width: 38px; height: 38px; margin: 0 auto 18px; background: url("mark.svg") center/contain no-repeat; opacity: .8; }
html[data-surface] .empty-state p { font-size: 14px; line-height: 1.85; }
html[data-surface] .empty-state button { font-size: 13px; }
html[data-surface] .site-footer { position: relative; font-size: 12px; padding-top: 30px; gap: 18px; }
html[data-surface] .site-footer::before { content: ""; position: absolute; width: 26px; height: 26px; top: -13px; left: calc(50% - 13px); background: #302a36 url("mark.svg") center/24px no-repeat; }
html[data-surface] .site-footer a { min-height: 40px; display: inline-flex; align-items: center; }
/* A tiny opening in a line recalls a ribbon, without framing each artwork. */
html[data-surface] :is(.route-theme-heading,.wall-chapter) { border-image: linear-gradient(90deg,#a794b66b,#a794b621 72%,transparent) 1; }
html[data-surface] .segment-ending { border-image: linear-gradient(90deg,transparent,#b8a5c576 20%,#b8a5c576 80%,transparent) 1; }
@media(hover:hover) {
  html[data-surface] :is(.brand-mark,.filter-chip,.card-save,.context-return,.segment-work-links > *,.card-explore,.card-compare,.text-link) { transition: color 160ms,background-color 160ms,transform 200ms var(--ease-settle); }
  html[data-surface] .brand:hover .brand-mark { transform: rotate(8deg); }
  html[data-surface] :is(.card-explore,.card-compare,.segment-work-links > *, .site-footer a):hover { color: #f0d9fa; text-decoration: underline; text-decoration-thickness: 1px; }
}
html[data-surface] :is(.filter-chip,.card-save):active { transform: scale(.96); }
/* Entry establishes the new page without taking the image out of view. */
html[data-surface] .page-enter { animation: gallery-enter 180ms var(--ease-settle) both; }
@keyframes gallery-enter { from { opacity: .65; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media(max-width:800px) {
  html[data-surface] .route-choice-title h3 { font-size: 20px; }
}
@media(max-width:520px) {
  html[data-surface] .brand { gap: 6px; }
  html[data-surface] .brand-mark { width: 27px; height: 27px; }
  html[data-surface] .brand b { font-size: 22px; letter-spacing: .07em; }
  html[data-surface] .brand small { font-size: 9px; letter-spacing: .025em; margin-left: 4px; }
  html[data-surface] .site-header nav { font-size: 12px; gap: 14px; white-space: nowrap; }
  html[data-surface] .nav-count { display: none; }
  html[data-surface] .index-page .filter-chip { font-size: 12px; padding: 8px 9px; }
  html[data-surface] .index-page .catalog-select { font-size: 13px; }
  html[data-surface] .index-page .search-field input { font-size: 16px; }
  html[data-surface] .index-page .results-summary { font-size: 12px; }
  html[data-surface] .index-page .art-card h3 { font-size: 19px; }
  html[data-surface] .index-page .art-card small { font-size: 12px; }
  html[data-surface] .context-return { font-size: 12px; }
  html[data-surface] .routes-heading p { font-size: 12px; }
  html[data-surface] .routes-tools { gap: 9px; }
  html[data-surface] .routes-tools select { font-size: 12px; max-width: 116px; }
  html[data-surface] .segment-picker { gap: 8px; }
  html[data-surface] .segment-picker > span { font-size: 12px; }
  html[data-surface] .segment-picker select { width: 110px; font-size: 12px; }
  html[data-surface] .segment-heading h1 { font-size: 25px; line-height: 1.55; }
  html[data-surface] .segment-heading > p:last-child { font-size: 14px; }
  html[data-surface] .segment-work-title h2 { font-size: 21px; }
  html[data-surface] .segment-work-links { gap: 17px; }
  html[data-surface] .segment-home .text-link { font-size: 12px; }
  html[data-surface] .linked-pair .pair-heading h1 { font-size: 22px; }
  html[data-surface] .about-copy p { font-size: 14px; }
  html[data-surface] .site-footer { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-surface] *, html[data-surface] *::before, html[data-surface] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html[data-surface] :is(.brand-mark,.filter-chip,.card-save) { transform: none !important; }
}