/* Chinese furniture gallery: material-inspired colours, rectangular forms,
   and generous photograph areas. No external font or framework dependency. */
:root {
  --paper: #f4f1eb;
  --ink: #24211f;
  --wood: #49352e;
  --accent: #873b32;
  --line: #d7cfc4;
  --muted: #6c645d;
  --surface: #e9e3da;
  --white: #fcfaf6;
  --rosewood: #30201d;
  --control-border: #9a8b7e;
  --serif: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --sans: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --chinese: 'Songti SC', STSong, SimSun, 'Noto Serif CJK SC', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.7 var(--sans); }
body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 6px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
button:focus-visible, .button:focus-visible, .nav-donate:focus-visible, input[type=file]:focus-visible { outline-color: var(--wood); }
::selection { color: var(--ink); background: #ded0c2; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(40px, 4.1vw, 62px); line-height: 1.14; letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.22; letter-spacing: -.025em; }
h3 { font-size: 18px; line-height: 1.4; font-weight: 500; }
p { max-width: 68ch; }
p + p { margin-top: 16px; }
.wrap { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -90px; left: 16px; z-index: 20; padding: 12px 20px; background: var(--rosewood); color: var(--paper); }
.skip-link:focus { top: 12px; }
.fine-print, .image-caption, figcaption { font-size: 13px; line-height: 1.6; color: var(--muted); }
.muted { color: var(--muted); font-weight: 400; }

/* A quiet masthead: the existing English project name remains the only name. */
[data-site-header] {
  position: sticky;
  top: 0;
  z-index: 10;
  max-height: 100dvh;
  overflow-y: auto;
  color: var(--ink);
  background: var(--paper);
}
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 102px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 13px; text-decoration: none; color: var(--wood); }
.brand img { width: 32px; height: 32px; }
.brand-name { white-space: nowrap; font: 23px/1.2 var(--serif); letter-spacing: -.025em; }
@media (max-width: 380px) {
  .site-header { column-gap: 12px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand img { width: 24px; height: 24px; }
  .site-header .brand-name { font-size: clamp(16px, 5vw, 19px); }
}
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { padding-block: 12px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.site-nav a[aria-current=page] { color: var(--accent); text-decoration: underline; text-underline-offset: 10px; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 10px; }
.site-nav .nav-donate, .site-nav .nav-donate[aria-current=page] { padding: 8px 16px; border: 1px solid var(--rosewood); background: var(--rosewood); color: var(--paper); }
.site-nav .nav-donate:hover { background: var(--wood); border-color: var(--wood); color: var(--paper); }
.menu-toggle { display: none; padding: 9px 14px; border: 1px solid var(--control-border); background: var(--paper); color: var(--wood); }
.site-footer { margin-top: 86px; padding-block: 38px 26px; border-top: 1px solid var(--line); }
.footer-top, .footer-bottom { display: flex; justify-content: space-between; gap: 30px; }
.footer-top > div > p { margin-top: 15px; font-size: 14px; color: var(--muted); }
.footer-links { display: flex; align-items: start; gap: 25px; font-size: 14px; }
.footer-bottom { padding-top: 40px; font-size: 12px; color: var(--muted); }

/* Home: the photograph is the centre of the opening composition. */
.hero { padding-top: 48px; }
.hero-heading { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 34px; }
.hero-side-note { font-size: 14px; color: var(--muted); padding-bottom: 8px; flex-shrink: 0; }
.hero-figure figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 13px; }
.hero-figure figcaption span:first-child { color: var(--wood); }
.hero-introduction { display: grid; grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: center; margin-top: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.hero-introduction > p { max-width: 700px; font-size: 17px; line-height: 1.8; }
.actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: 24px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 12px 24px; color: var(--paper); background: var(--rosewood); border: 1px solid var(--rosewood); font-size: 14px; font-weight: 500; text-decoration: none; }
.button:hover { background: var(--wood); border-color: var(--wood); color: var(--paper); }
.text-link { display: inline-block; padding-block: 8px; font-size: 14px; text-decoration-color: #938276; }
.text-link:hover { text-decoration-color: var(--accent); }
.section { padding-block: 78px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 30px; }
.section-heading p { margin-top: 10px; color: var(--muted); }
.section-heading > a { flex-shrink: 0; }
.paired-heading { display: flex; align-items: baseline; gap: 22px; }
.chinese-label { font: 26px/1.4 var(--chinese); color: var(--accent); letter-spacing: .08em; white-space: nowrap; }
.archive-translation { display: block; margin-top: 16px; }
.sample-note { max-width: none; font-size: 13px; color: var(--muted); margin-bottom: 23px; }
.section-aside { max-width: 290px; font-size: 13px; }

/* Photo surfaces accept real photos at any time. No generated stand-ins. */
.photo-surface { position: relative; background: var(--surface); overflow: hidden; }
.photo-surface > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Swap the image frame before rotating, keeping the whole photo visible. */
.photo-surface.photo-rotate-left, .photo-surface.photo-rotate-right { container-type: size; }
.photo-surface.photo-rotate-left > img, .photo-surface.photo-rotate-right > img { inset: 50% auto auto 50%; width: 100cqh; height: 100cqw; max-width: none; transform: translate(-50%, -50%) rotate(-90deg); }
.photo-surface.photo-rotate-right > img { transform: translate(-50%, -50%) rotate(90deg); }
/* Crop the source's top/bottom, which become the sides after a quarter-turn. */
.photo-surface.photo-rotate-left.photo-crop-sides > img { width: min(100cqh, calc(100cqw / var(--photo-crop-ratio))); height: auto; aspect-ratio: var(--photo-source-ratio); clip-path: inset(var(--photo-crop-inset) 0); }
.photo-placeholder { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: 160px; padding: 32px; color: #70665c; text-align: center; background: var(--surface); }
.photo-placeholder::before { content: ''; position: absolute; inset: 25px; border: 1px solid #d2c9bc; pointer-events: none; }
.photo-placeholder > span { position: relative; max-width: 24ch; font: 24px/1.3 var(--serif); }
.photo-placeholder > small { position: relative; max-width: 32ch; font-size: 12px; line-height: 1.6; }
.hero-photo, .hero-media > .photo-placeholder { width: 100%; height: auto; aspect-ratio: 8 / 5; }
.hero-photo > img { object-position: center bottom; }
.hero-photo .photo-placeholder::before { inset: 36px; }
.hero-photo .photo-placeholder > span { font-size: 32px; }


/* Objects, rather than boxes: images above open catalogue labels. */
.furniture-grid { display: grid; grid-template-columns: 1.22fr 1fr 1fr; gap: 30px; align-items: start; }
.piece-card { min-width: 0; }
.piece-photo { position: relative; display: block; text-decoration: none; }
.photo-count { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; background: #30201d; color: #f4f1eb; font-size: 12px; line-height: 1.7; }
.piece-photo .photo-surface { height: clamp(280px, 29vw, 400px); }
.piece-photo .collection-cover { background: transparent; }
.collection-cover-extended { container-type: size; }
.collection-photo-scene { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--scene-ratio))); aspect-ratio: var(--scene-ratio); transform: translate(-50%, -50%); }
.collection-photo-scene > img { position: absolute; display: block; max-width: none; }
.collection-photo-scene > .collection-scene-background { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-photo-scene > .collection-photo-original { left: var(--source-left); top: var(--source-top); width: var(--source-width); height: auto; mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 var(--fade-bottom), transparent), linear-gradient(to right, transparent, #000 var(--fade-left), #000 var(--fade-right), transparent); mask-composite: intersect; }
.collection-cover:not(.collection-cover-extended) .collection-photo-scene { position: static; width: auto; aspect-ratio: auto; transform: none; }
.collection-cover:not(.collection-cover-extended) .collection-scene-background { display: none; }
.piece-photo:hover .photo-placeholder > span { color: var(--accent); }
.piece-card:nth-child(2) .photo-placeholder { background: #e4ded5; }
.piece-card:nth-child(3) .photo-placeholder { background: #ebe6de; }
.piece-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 18px; font-size: 12px; color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; color: var(--ink); }
.status::before { content: ''; width: 5px; height: 5px; background: #60674f; }
.status-reserved::before { background: #866d48; }
.status-sold::before { background: var(--muted); }
.status-unknown::before { background: var(--line); }
.piece-info { padding-top: 6px; }
.piece-info h3 { font: 25px/1.3 var(--serif); letter-spacing: -.02em; }
.piece-info h3 a { text-decoration: none; }
.piece-info h3 a:hover { text-decoration: underline; }
.piece-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.object-attribution { margin-top: 8px; font-size: 13px; color: var(--muted); }
.archive-introduction { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; padding: 50px 0; border-block: 1px solid var(--line); }
.archive-intro-title > .chinese-label { display: block; font-size: 21px; margin-bottom: 16px; }
.archive-intro-title > a { margin-top: 20px; }
.archive-intro-copy > p { max-width: 54ch; }
.archive-intro-copy > .fine-print { margin-top: 24px; }
.craft-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; }
.craft-photo { aspect-ratio: 4 / 3; }
.craft-photo .photo-placeholder > span { font-size: 20px; }
.craft-detail h3 { font-family: var(--serif); font-size: 23px; color: var(--ink); }
.craft-detail figcaption { padding-top: 18px; }
.craft-detail p { margin-top: 8px; max-width: 38ch; font-size: 14px; }
.craft-detail small { display: block; margin-top: 12px; font-size: 12px; }
.process-section { background: #eae4db; padding-block: 44px; }
.process-section .section-heading { margin-bottom: 30px; }
.process-section h2 { font-size: 30px; }
.process-section .section-heading p { font-size: 14px; }
.process-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px; padding: 0; margin: 0; list-style: none; }
.process-list li { border-top: 1px solid #bdb1a3; padding-top: 18px; }
.process-list h3 { font-size: 17px; }
.process-list p { font-size: 14px; color: var(--muted); margin-top: 9px; }
.metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); }
.metric { padding: 28px 24px; border-right: 1px solid var(--line); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; }
.metric strong { display: block; font: 24px/1.35 var(--serif); }
.metric span { display: block; font-size: 12px; color: var(--muted); margin-top: 12px; }
.metrics + .fine-print { margin-top: 18px; }
.invitation { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 36px; border-top: 2px solid var(--wood); border-bottom: 1px solid var(--line); }
.invitation h2 { font-size: 30px; }
.invitation p { margin-top: 9px; font-size: 14px; color: var(--muted); }
.invitation .button { flex-shrink: 0; }

/* Collection, archive and inner pages retain their existing URLs and behaviours. */
.page-heading { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: end; padding-block: 64px 42px; }
[data-page="furniture"] .page-heading { align-items: start; }
.collection-contact { margin-top: 20px; max-width: 54ch; font-size: 14px; color: var(--muted); }
.collection-contact a { color: var(--wood); text-decoration-color: var(--control-border); overflow-wrap: anywhere; }
.collection-contact a[href^="sms:"] { white-space: nowrap; }
.collection-contact a:hover { color: var(--accent); }
.page-heading > p { max-width: 50ch; color: var(--muted); padding-bottom: 6px; }
.notice { border-left: 2px solid #ae9685; padding: 13px 18px; background: #ebe5dc; font-size: 13px; line-height: 1.7; max-width: none; }
.catalogue { padding-top: 28px; }
.catalogue-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.catalogue-toolbar > p { color: var(--muted); font-size: 13px; padding-bottom: 12px; }
.collection-search { width: min(100%, 560px); }
.collection-search > label { display: block; margin-bottom: 8px; color: var(--wood); font-size: 14px; }
.collection-search-controls { display: flex; align-items: stretch; gap: 10px; }
.collection-search input { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid var(--control-border); border-radius: 0; background: var(--white); color: var(--ink); font-size: 16px; -webkit-appearance: none; appearance: none; }
.collection-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.collection-search button { flex-shrink: 0; padding: 10px 16px; border: 1px solid var(--control-border); background: var(--paper); color: var(--wood); font-size: 14px; }
.collection-search button:hover { background: var(--surface); border-color: var(--wood); }
.quiet-callout { padding-block: 50px 20px; margin-top: 58px; border-top: 1px solid var(--line); }
.quiet-callout p { margin-block: 16px 10px; color: var(--muted); }
.empty-state { grid-column: 1/-1; padding: 30px; border: 1px solid var(--line); }
.empty-state p { margin-top: 12px; color: var(--muted); }
.archive-entry { padding-block: 40px 48px; border-bottom: 1px solid var(--line); }
.archive-entry-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 25px; }
.archive-entry-heading > div { min-width: 0; }
.archive-entry-heading .status { flex-shrink: 0; }
.record-kind { margin-bottom: 7px; font-size: 12px; color: var(--muted); }
.archive-entry-heading h2 { font-size: 36px; }
.archive-entry-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: start; }
.archive-entry-body > * { min-width: 0; }
.archive-photo { display: block; text-decoration: none; }
.archive-photo .photo-surface { aspect-ratio: 6/5; }
.archive-photo .photo-surface,
.archive-thumbnails .photo-surface,
[data-page="projects"] .detail-gallery .photo-surface { background: var(--paper); }
.archive-entry figure > figcaption { padding-top: 10px; font-size: 12px; }
.record-notes { margin: 0; }
.record-notes > div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.record-notes > div:first-child { padding-top: 0; }
.record-notes dt { font-size: 13px; color: var(--muted); }
.record-notes dd { margin: 0; font-size: 14px; }
.work-list { padding-left: 18px; margin: 10px 0; font-size: 14px; }
.work-list li { padding-block: 3px; }
.record-notes .work-list { margin: 0; }
.record-notes .work-list li:first-child { padding-top: 0; }
.record-outcome { margin-top: 24px; }
.record-outcome h3 { font-size: 14px; }
.record-outcome p { font-size: 14px; color: var(--muted); margin-top: 8px; }
.archive-notes .text-link { margin-top: 16px; }
.archive-description { margin-bottom: 22px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.archive-thumbnails { display: flex; gap: 10px; overflow-x: auto; padding: 5px; margin: 12px -5px 0; }
.archive-thumbnails button { flex-shrink: 0; padding: 3px; border: 1px solid transparent; background: transparent; }
.archive-thumbnails button[aria-pressed=true] { border-color: var(--wood); }
.archive-thumbnails .photo-surface { width: 76px; height: 64px; }
.archive-facts { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 24px clamp(10px,2vw,24px); margin: 30px 0 12px; padding-block: 20px; }
.archive-facts dt { font-size: 12px; color: var(--muted); }
.archive-facts dd { margin: 5px 0 0; font: clamp(18px,2.7vw,24px)/1.4 var(--serif); }
/* Shared costs and the donation read as one open account, alongside the archive. */
.shared-tools { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; margin-top: 32px; padding-block: 28px; border-block: 1px solid var(--line); }
.shared-tools h2 { font-size: 30px; }
.shared-tools > div { min-width: 0; }
.shared-tools .fine-print { margin-top: 9px; }
.financial-summary { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px 70px; padding-block: 42px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.financial-summary > * { min-width: 0; }
.financial-summary .section-heading { grid-row: 1 / 3; display: block; margin: 0; }
.financial-summary .section-heading p { max-width: 46ch; font-size: 14px; }
.financial-ledger { margin: 0; }
.financial-ledger > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.financial-ledger > div:first-child { padding-top: 0; }
.financial-ledger dt { font-size: 14px; color: var(--muted); }
.financial-ledger dd { margin: 0; flex-shrink: 0; font: 24px/1.4 var(--serif); font-variant-numeric: tabular-nums; }
.financial-ledger > .financial-donation { margin-top: 7px; padding-top: 20px; border-top: 2px solid var(--wood); border-bottom: 0; color: var(--wood); }
.financial-donation dt { max-width: 22ch; color: var(--wood); font-size: 16px; font-weight: 500; }
.financial-donation dd { font-size: 34px; }
.financial-equation { grid-column: 2; font-size: 14px; color: var(--wood); font-variant-numeric: tabular-nums; }
.financial-summary > .fine-print { grid-column: 2; margin: 0; max-width: 62ch; }
.metrics-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.two-column h2 { margin-bottom: 22px; }
.two-column p { color: var(--muted); }
.record { padding: 22px 0; border-top: 1px solid var(--line); }
.record p { margin-block: 10px; }
.impact-overview .section-heading { margin-bottom: 24px; }
.impact-overview .section-heading p { margin-top: 12px; color: var(--muted); font-size: 14px; }
[data-page="impact"] .records-section { padding-top: 40px; }
.receipt-placeholder { display: grid; place-items: center; min-height: 260px; padding: 32px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); text-align: center; }
.donation-record { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,min(60%,760px)); gap: 40px; align-items: center; border-top: 0; padding: 0; }
.donation-record + .donation-record { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.donation-record-details { min-width: 0; }
.donation-record time { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.donation-receipt { width: 100%; max-width: 760px; margin: 0; justify-self: end; }
.donation-receipt-frame { position: relative; overflow: hidden; }
.donation-receipt img { width: 100%; height: auto; }
.donation-receipt-frame.receipt-cropped { aspect-ratio: var(--receipt-frame-ratio); }
/* Keep the receipt at its natural ratio; crop the frame, not the image box. */
.donation-receipt-frame.receipt-cropped img { position: absolute; inset: auto; top: 50%; left: 0; height: auto; object-fit: contain; transform: translateY(-50%); }
.donation-receipt figcaption { margin-top: 12px; }
[data-page="about"] main.wrap { max-width: 1120px; }
.about-overview, .about-story-section { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.about-overview { padding-block: 56px 48px; }
.about-overview h1 { font-size: clamp(36px, 3.5vw, 48px); }
.about-story-section { padding-block: 48px; border-top: 1px solid var(--line); }
.about-story-section h2 { font-size: clamp(28px, 2.5vw, 34px); }
.about-story-section > h2 { max-width: 16ch; }
.about-overview .prose, .about-story-section .prose { min-width: 0; max-width: 68ch; line-height: 1.8; }
.about-overview .prose > p + p, .about-story-section .prose > p + p { margin-top: 18px; }
.about-origin > .prose, .about-giving > .prose { align-self: center; }
.about-origin-visual > h2, .about-giving-visual > h2 { margin-bottom: 20px; }
.about-origin-visual > figure, .about-giving-visual > figure { max-width: 360px; }
.about-origin-media .photo-surface, .about-origin-media > .photo-placeholder { aspect-ratio: 3 / 4; }
.about-origin figcaption, .about-giving-visual figcaption { padding-top: 10px; max-width: 50ch; }
.about-giving-media .photo-surface, .about-giving-media > .photo-placeholder { aspect-ratio: 3 / 4; }
.about-origin-media .photo-surface > img,
.about-giving-media .photo-surface > img,
.about-origin-media .photo-surface > .photo-placeholder,
.about-giving-media .photo-surface > .photo-placeholder { position: absolute; inset: 0; }
.about-pull-quote { margin: 24px 0; }
.prose .about-pull-quote > p { max-width: 29ch; font: clamp(28px, 2.7vw, 38px)/1.25 var(--serif); letter-spacing: -.02em; color: var(--wood); }
.about-chinese { grid-template-columns: minmax(0, 292px) minmax(0, 1fr); padding: 48px; border-top: 0; background: var(--rosewood); color: var(--paper); }
.about-chinese .prose p { color: #e1d6ca; }
.about-chinese .about-pull-quote > p { color: var(--paper); }
.about-chinese ::selection { color: var(--rosewood); background: #ded0c2; }
.about-giving { border-top: 0; }
[data-page="about"] .site-footer { margin-top: 48px; }
.prose h2 { margin-bottom: 17px; }
.prose p + h2 { margin-top: 32px; }
.prose p { color: #574e47; }
.prose .text-link { margin-top: 20px; }

/* Donation preview remains entirely on this device. */
[data-page="donate"] main.wrap { max-width: 1120px; }
[data-page="donate"] .page-heading { align-items: center; gap: 48px; padding-bottom: 40px; }
.donate-layout { padding-bottom: 24px; }
.donate-aside { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; padding-block: 32px; margin-bottom: 48px; border-block: 1px solid var(--line); }
.donate-aside > div { min-width: 0; }
.donate-aside h2 { font-size: 27px; }
.donate-aside h2 + p { margin-top: 14px; }
.donate-aside p { font-size: 14px; color: var(--muted); }
.donate-aside .fine-print { font-size: 12px; }
.donate-form-section { max-width: 820px; margin-inline: auto; }
.donate-layout > section > h2 { font-size: 30px; margin-bottom: 18px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
form > fieldset > .fine-print { margin-block: 22px 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { margin-bottom: 22px; min-width: 0; }
.field label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.field input:not([type=file]), .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid #9a8b7e; border-radius: 0; background: var(--white); color: var(--ink); padding: 11px 12px; }
.field textarea { resize: vertical; }
.field small { font-size: 12px; color: var(--muted); }
::placeholder { color: #766b62; opacity: 1; }
.upload-field { padding: 20px; border: 1px dashed #9a8b7e; }
.upload-field p { font-size: 12px; margin-block: 8px 12px; }
input[type=file] { width: 100%; font-size: 12px; }
input::file-selector-button { font: inherit; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 0; background: var(--paper); color: var(--wood); margin-right: 10px; cursor: pointer; }
input::file-selector-button:hover { background: var(--surface); border-color: var(--wood); }
.photo-previews { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-previews img { width: 76px; height: 76px; object-fit: cover; }
.offer-preview { margin-top: 30px; padding: 25px; background: var(--surface); overflow-wrap: anywhere; }
.offer-preview > p { margin-top: 12px; font-size: 14px; }
.offer-preview dl { margin-bottom: 0; }
.offer-preview dt { font-size: 13px; font-weight: 600; margin-top: 14px; }
.offer-preview dd { margin: 0; white-space: pre-wrap; }

/* Native dialog contains focus, supports Escape and makes the page behind inert. */
.piece-dialog { width: min(1160px,calc(100% - 48px)); max-height: calc(100dvh - 48px); border: none; padding: 0; background: var(--paper); color: var(--ink); }
.piece-dialog::backdrop { background: rgba(36,33,31,.65); }
.dialog-top { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 26px; background: var(--paper); border-bottom: 1px solid var(--line); }
.dialog-top p { font-size: 12px; color: var(--muted); }
.dialog-close { flex-shrink: 0; min-height: 44px; padding: 8px 15px; border: 1px solid var(--control-border); color: var(--wood); background: var(--paper); }
.dialog-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 35px; padding: 26px; }
.detail-main-photo { height: 480px; }
/* Collection viewers follow each original photo, without contain-letterboxing.
   Higher specificity keeps this natural height at every mobile breakpoint. */
.detail-main-photo.detail-natural-photo { height: auto; aspect-ratio: var(--gallery-photo-ratio); background: transparent; }
.thumbnails .collection-thumbnail { background: transparent; }
.detail-caption { font-size: 12px; color: var(--muted); padding-top: 10px; }
.thumbnails { display: flex; gap: 10px; margin: 12px -5px 0; padding: 5px; overflow-x: auto; }
.thumbnails button { flex-shrink: 0; padding: 3px; border: 1px solid transparent; background: none; }
.detail-gallery { min-width: 0; }
.gallery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.gallery-toolbar button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--control-border); background: var(--paper); color: var(--wood); font-size: 13px; }
.gallery-toolbar button:hover, .dialog-close:hover, .menu-toggle:hover { border-color: var(--wood); background: var(--surface); color: var(--wood); }
.gallery-toolbar > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.thumbnails button[aria-pressed=true] { border-color: var(--wood); }
.thumbnails .photo-surface { height: 64px; width: 76px; }
.thumbnails .photo-surface > img { object-fit: cover; }
.thumbnails .photo-placeholder { min-height: 0; padding: 3px; }
.thumbnails .photo-placeholder::before, .thumbnails .photo-placeholder small { display: none; }
.thumbnails .photo-placeholder > span { font: 11px/1.3 var(--sans); }
.detail-copy { min-width: 0; }
.detail-copy h2 { font-size: 35px; margin-block: 15px 10px; }
.detail-copy > p { font-size: 14px; }
.detail-copy .detail-price { font-size: 15px; color: var(--muted); margin-bottom: 18px; }
.detail-copy h3 { font-size: 15px; margin-top: 24px; }
.detail-copy h3 + p { margin-top: 8px; }
.detail-facts, .object-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-facts dt, .object-facts dt { font-size: 12px; color: var(--muted); }
.detail-facts dd, .object-facts dd { margin: 4px 0 0; font-size: 14px; }
.detail-restoration-facts { grid-template-columns: repeat(5,minmax(0,1fr)); column-gap: 10px; }
.archive-facts > .financial-fact, .detail-restoration-facts > .financial-fact { min-width: 0; }
.archive-facts .financial-fact dt, .detail-restoration-facts .financial-fact dt { min-height: 3.4em; }
.archive-facts .financial-fact dd, .detail-restoration-facts .financial-fact dd { white-space: nowrap; }
.detail-restoration-facts > .supporting-fact { grid-column: 1 / -1; min-width: 0; }
.object-facts > .dimensions-fact { grid-column: 1 / -1; min-width: 0; }
.detail-copy .notice { margin-top: 24px; }

@media (min-width: 901px) {
  .dialog-body:has(.detail-restoration-facts) { grid-template-columns: minmax(0,1.15fr) minmax(450px,1fr); }
}
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .site-nav { gap: 17px; }
  .brand-name { font-size: 21px; }
  .hero-heading { gap: 25px; }
  .hero-introduction, .page-heading, .archive-introduction, .two-column { gap: 40px; }
  .furniture-grid, .craft-grid { gap: 22px; }
  .archive-entry-body { gap: 30px; }
  .shared-tools, .financial-summary { gap: 24px 40px; }
}
@media (max-width: 900px) {
  .about-overview, .about-story-section { grid-template-columns: minmax(0, 68ch); justify-content: center; gap: 28px; }
  .about-origin-visual, .about-giving-visual, .about-overview .prose, .about-story-section .prose { width: 100%; max-width: 68ch; margin-inline: auto; }
  .about-origin-visual > figure, .about-giving-visual > figure { margin-inline: auto; }
  .about-story-section > h2 { max-width: none; }
  .site-header { flex-wrap: wrap; min-height: 84px; padding-block: 20px; }
  .menu-toggle { display: block; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 3px; padding-top: 15px; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 10px 4px; font-size: 16px; }
  .site-nav .nav-donate { text-align: center; margin-top: 8px; }
  .hero-heading { align-items: start; }
  .hero-side-note { display: none; }
  .hero-introduction { grid-template-columns: 1fr; gap: 20px; }
  .actions { justify-content: start; }
  .page-heading { grid-template-columns: 1fr; gap: 20px; }
  .page-heading > p { max-width: 65ch; }
  .furniture-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 24px; }
  .piece-photo .photo-surface { height: 360px; }
  .craft-grid { gap: 18px; }
  .craft-photo .photo-placeholder { padding: 20px; }
  .craft-photo .photo-placeholder::before { inset: 12px; }
  .craft-photo .photo-placeholder > span { font-size: 18px; }
  .process-list { grid-template-columns: 1fr 1fr; }
  .metrics-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metrics-four .metric:nth-child(2) { border-right: 0; }
  .metrics-four .metric:nth-child(n+3) { border-top: 1px solid var(--line); }
  .metrics-four .metric:nth-child(3) { padding-left: 0; }
  .archive-entry-body { grid-template-columns: 1.1fr 1fr; }
  .shared-tools, .financial-summary { grid-template-columns: 1fr; }
  .financial-summary .section-heading { grid-row: auto; }
  .financial-summary .section-heading p { max-width: none; }
  .financial-equation, .financial-summary > .fine-print { grid-column: 1; }
  .record-notes > div { grid-template-columns: 1fr; gap: 5px; }
  [data-page="donate"] .page-heading { gap: 24px; }
  .donate-aside { gap: 32px; }
  .dialog-body { grid-template-columns: 1fr; }
  .detail-main-photo { height: 400px; }
}
@media (max-width: 600px) {
  .donation-record { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .donation-receipt { justify-self: start; }
  .wrap { width: calc(100% - 40px); }
  .brand-name { font-size: 20px; }
  .brand { gap: 10px; }
  .brand img { width: 28px; height: 28px; }
  .menu-toggle { font-size: 14px; padding: 8px 11px; }
  .hero { padding-top: 32px; }
  .hero-heading { margin-bottom: 25px; }
  h1 { font-size: clamp(35px,9.5vw,46px); }
  .hero-photo, .hero-media > .photo-placeholder { height: auto; aspect-ratio: 3 / 2; min-height: 0; }
  .hero-photo .photo-placeholder::before { inset: 20px; }
  .hero-photo .photo-placeholder > span { font-size: 26px; }
  .hero-figure figcaption { flex-direction: column; gap: 5px; font-size: 12px; }
  .hero-introduction { margin-top: 24px; padding-bottom: 30px; }
  .hero-introduction > p { font-size: 15px; }
  .actions { gap: 20px; }
  .section { padding-block: 50px; }
  .section-heading { display: block; margin-bottom: 22px; }
  .section-heading > a, .section-heading > p { margin-top: 14px; }
  .section-heading p { font-size: 14px; }
  .paired-heading { gap: 16px; flex-wrap: wrap; }
  .chinese-label { font-size: 23px; }
  .section-aside { max-width: none; }
  .furniture-grid { grid-template-columns: 1fr; gap: 32px; }
  .piece-photo .photo-surface { height: auto; aspect-ratio: 4/5; }
  .piece-card:first-child .piece-photo .photo-surface { aspect-ratio: 6/5; }
  .piece-info h3 { font-size: 27px; }
  .archive-introduction { grid-template-columns: 1fr; gap: 25px; padding-block: 34px; }
  .archive-intro-title > .chinese-label { font-size: 20px; }
  .craft-grid { grid-template-columns: 1fr; gap: 30px; }
  .craft-photo { aspect-ratio: 4/3; }
  .craft-photo .photo-placeholder > span { font-size: 23px; }
  .craft-photo .photo-placeholder::before { inset: 22px; }
  .process-section { padding-block: 34px; }
  .process-list { gap: 24px 22px; }
  .process-list h3 { font-size: 16px; }
  .process-list p { font-size: 13px; }
  .metrics { grid-template-columns: 1fr; }
  .metric, .metric:first-child { padding: 22px 0; border-right: none; border-bottom: 1px solid var(--line); }
  .metric:last-child { border-bottom: none; }
  .metric span { margin-top: 7px; }
  .metrics-four .metric:nth-child(n+3) { border-top: none; }
  .invitation { align-items: start; flex-direction: column; gap: 22px; }
  .invitation h2 { font-size: 28px; }
  .page-heading { padding-block: 38px 30px; }
  .page-heading > p { font-size: 15px; }
  .catalogue-toolbar { flex-direction: column; align-items: start; gap: 15px; }
  .catalogue-toolbar > p { padding-bottom: 0; }
  .archive-entry-heading { align-items: start; }
  .archive-entry-heading h2 { font-size: 29px; }
  .archive-entry-heading .status { padding-top: 8px; }
  .archive-entry-body { grid-template-columns: 1fr; gap: 25px; }
  .archive-entry { padding-block: 30px; }
  .record-notes > div { grid-template-columns: 80px 1fr; gap: 15px; }
  .archive-facts, .detail-restoration-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .archive-facts .financial-fact dt, .detail-restoration-facts .financial-fact dt { min-height: 0; }
  .archive-facts dd { font-size: 22px; }
  .shared-tools { gap: 14px; margin-top: 24px; padding-block: 24px; }
  .shared-tools h2 { font-size: 27px; }
  .shared-tools > div > p:first-child { font-size: 15px; }
  .financial-summary { gap: 20px; padding-block: 30px; }
  .financial-summary .section-heading { margin: 0; }
  .financial-ledger > div { gap: 16px; }
  .financial-ledger dd { font-size: 22px; }
  .financial-donation dt { max-width: 18ch; font-size: 14px; }
  .financial-donation dd { font-size: 30px; }
  .financial-equation { font-size: 13px; }
  .two-column { grid-template-columns: 1fr; gap: 35px; }
  .about-overview { padding-block: 36px; gap: 20px; }
  .about-story-section { padding-block: 36px; gap: 24px; }
  .about-chinese { padding: 32px 24px; }
  .about-overview .prose > p + p, .about-story-section .prose > p + p { margin-top: 16px; }
  [data-page="about"] .site-footer { margin-top: 36px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  [data-page="donate"] .page-heading { padding-bottom: 30px; }
  .donate-aside { grid-template-columns: 1fr; gap: 24px; padding-block: 28px; margin-bottom: 36px; }
  .donate-aside h2 { font-size: 25px; }
  .donate-layout > section > h2 { font-size: 28px; }
  .site-footer { margin-top: 55px; }
  .footer-top, .footer-bottom { flex-direction: column; gap: 20px; }
  .footer-links { flex-wrap: wrap; gap: 14px 24px; }
  .footer-bottom { padding-top: 28px; gap: 8px; }
  .piece-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .dialog-top { padding: 12px 16px; }
  .dialog-body { padding: 16px; gap: 22px; }
  .detail-main-photo { height: 310px; }
  .detail-copy h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}