/* v5 — "A Virtual Exhibition": dark gallery walls, framed prints under
   spotlights, museum wall labels, three rooms. CSS-only motion; no WebGL. */
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --wall: #121214;
  --wall-deep: #0b0b0c;
  --ink: #ece9e1;
  --muted: #a9a49a;
  --quiet: #8a867e;
  --line: #26262a;
  --brass: #c2a164;
  --brass-dim: #8a7448;
  --serif: 'Newsreader', 'Iowan Old Style', 'Baskerville', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 24px; }
body { margin: 0; background: var(--wall); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body.room-mono { background: var(--wall-deep); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
main, .site-header, footer { width: min(1400px, calc(100% - 112px)); margin-inline: auto; }

/* ---------- header / footer ---------- */
.site-header { min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.wordmark { font: 28px/1.1 var(--serif); letter-spacing: -.4px; white-space: nowrap; color: var(--ink); }
.site-header nav { display: flex; gap: 32px; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a[aria-current=page] { color: var(--ink); position: relative; }
.nav-item{position:relative;display:inline-flex;}.nav-toggle{position:absolute;opacity:0;pointer-events:none;}.nav-burger{display:none;}.nav-links{display:contents;}
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(4px);display:flex;flex-direction:column;gap:2px;min-width:180px;padding:8px;background:#161618;border:1px solid #2a2a2e;border-radius:10px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:50;box-shadow:0 12px 32px rgba(0,0,0,.5);}
.nav-item:hover .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-drop a{display:block;padding:10px 14px;min-height:0;font-size:13px;color:var(--muted);border-radius:6px;white-space:nowrap;}
.nav-drop a:hover{background:#222226;color:var(--ink);}
.site-header nav a[aria-current=page]::after { content: ''; position: absolute; bottom: 8px; left: 0; right: 0; height: 1px; background: var(--brass); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 26px 34px; margin-top: 96px; border-top: 1px solid var(--line); font: 14px/1.6 var(--sans); color: var(--quiet); }
footer nav { display: flex; gap: 24px; }
footer nav a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; color: var(--quiet); }
footer nav a:hover { color: var(--muted); }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; background: var(--wall); color: var(--ink); padding: 12px; z-index: 60; }

/* ---------- homepage: one line, one image, three doors ---------- */
/* A Small Measure of Red: on phones the red canoe shrinks to a few pixels,
   and the whole picture is that one mark of red. Run it edge to edge as the
   first print in Nature (the home page does the same below). */
@media (max-width: 640px) {
  #photo-a-small-crossing .mat img { width: 100vw; max-width: none; max-height: none; height: auto; margin-left: calc(50% - 50vw); margin-right: 0; }
  #photo-a-small-crossing .frame, #photo-a-small-crossing .mat { display: block; padding: 0; border: 0; background: none; box-shadow: none; }
}
/* ---------- set group headers ---------- */
.set-head { text-align: center; margin-bottom: 36px; }
.set-head h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .005em; }
.set-head p { margin: 14px auto 0; font: 16px/1.7 var(--serif); color: var(--muted); max-width: 660px; }
/* ---------- room standfirst ---------- */
.room-standfirst { margin: 22px auto 0; font: 17px/1.7 var(--serif); color: var(--muted); max-width: 640px; }

/* ---------- room index ---------- */

/* ---------- series index ---------- */
.series-index { padding: 8px 0 24px; }
.series-card { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: center; padding: 36px 8px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.series-card:last-of-type { border-bottom: 1px solid var(--line); }
.series-card .mat img { width: 100%; aspect-ratio: 4/3; object-fit: cover; max-height: none; }
.series-card-title { display: block; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.015em; transition: color .3s; }
.series-card-count { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.series-card:hover .series-card-title { color: var(--brass); }

/* ---------- featured print (entry, slow Ken Burns) ---------- */
.kenburns { overflow: hidden; }
.kenburns img { animation: kb 26s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.055); } }

/* ---------- the walk: one print per wall ---------- */
.room-head { padding: 72px 0 8px; text-align: center; }
.room-head h1 { font-size: clamp(46px, 7vw, 96px); line-height: 1.02; letter-spacing: -.02em; }
.gallery-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px; margin: 44px 0 0; padding-bottom: 14px; color: var(--quiet); font-size: 14px; letter-spacing: .06em; }
.gallery-filters a { padding: 10px 2px; }
.gallery-filters a:hover { color: var(--ink); }
.gallery-filters a[aria-current=page] { color: var(--brass); border-bottom: 1px solid var(--brass-dim); }
.walk { padding: 24px 0 40px; }
.wall { padding: clamp(72px, 10svh, 112px) 0; position: relative; }
/* the print hangs bare on the wall: no frame, mat or shadow (#155 B3) */
.frame { display: inline-block; position: relative; }
.wall .frame, .print-room .frame { position: relative; z-index: 1; }
/* hover: the print dims slightly */
.wall a img, .print-room a img { transition: opacity .25s ease; }
.wall a:hover img, .print-room a:hover img { opacity: .92; }
.mat { display: block; }
.mat img { width: auto; height: auto; max-width: min(1200px, 88vw); max-height: 66svh; margin-inline: auto; }
.wall { text-align: center; }
/* museum wall label */
.plaque { display: grid; grid-template-columns: 64px minmax(0, 560px); gap: 20px; text-align: left; justify-content: center; margin: 34px auto 0; max-width: 720px; position: relative; z-index: 1; }
.plaque-no { font: 13px/2.2 var(--sans); letter-spacing: .24em; color: var(--brass-dim); }
.plaque h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; }
.plaque h2 a:hover { color: var(--brass); }
.plaque-meta { margin-top: 8px; font: 12.5px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #8f8b82; }
.plaque-note { margin-top: 12px; font: 17px/1.65 var(--serif); color: #c9c4b8; }
.plaque-note p + p { margin-top: 10px; }

/* scroll reveal removed — walls render immediately, no waiting on long pages */

/* ---------- the print room (single work page) ---------- */
.work-top { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 0; font: 14px/1.5 var(--sans); color: var(--muted); }
.work-top a { display: inline-flex; align-items: center; min-height: 44px; letter-spacing: .06em; }
.work-top a:hover { color: var(--ink); }
.work-index { display: flex; align-items: center; gap: 8px; }
.work-counter { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
.work-index .index-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; font: 20px/1 var(--sans); color: var(--muted); }
.work-index .index-arrow:hover { color: var(--brass); }
.index-arrow.is-disabled { opacity: .22; }
.series-end { color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.series-end:hover { color: var(--brass); }
.work-index { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.work-index .series-end + .series-end { margin-left: 16px; }
.print-room { padding: clamp(28px, 5svh, 64px) 0 8px; display: flex; flex-direction: column; align-items: center; position: relative; }
.print-room::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 240, 214, .11), rgba(255, 240, 214, 0) 74%); }
.print-room .mat img { max-width: min(1320px, 88vw); max-height: min(84svh, calc(100svh - 190px), 1250px); }
.print-room .plaque { margin-top: 40px; }
.print-room .plaque h2 { font-size: 32px; }

/* ---------- legal pages ---------- */
.legal { max-width: 680px; margin: 76px auto 100px; }
.legal h1 { font-size: 44px; letter-spacing: -.8px; line-height: 1.15; }
.legal p { margin-top: 24px; font: 19px/1.65 var(--serif); color: var(--muted); }
.legal a { text-decoration: underline; }
/* ---------- about: english first, chinese after ---------- */
.about { max-width: 680px; margin: 76px auto 100px; }
.about h1 { font-size: 44px; letter-spacing: -.8px; line-height: 1.15; }
.about .philo { margin-top: 30px; font: 19px/1.8 var(--serif); color: #b8b3a8; }
.about .body { margin-top: 22px; font: 18px/1.7 var(--serif); color: #b8b3a8; }
.about h2 { margin-top: 52px; font-size: 24px; letter-spacing: -.01em; }
.about a { text-decoration: underline; }
/* language toggle pill, same look as the critic's notes */
.about-lang { margin-top: 28px; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.about-lang button { appearance: none; background: none; border: 0; color: #8f8b82; font: 11.5px/1 var(--sans); letter-spacing: .14em; padding: 7px 11px; cursor: pointer; }
.about-lang button + button { border-left: 1px solid var(--line); }
.about-lang button[aria-pressed="true"] { color: #e8e3d8; background: rgba(255,255,255,.07); }
/* EN/中文 panes */
.about[data-lang="en"] .about-zh { display: none; }
.about[data-lang="zh"] .about-en { display: none; }
.about-zh .philo, .about-zh .body, .about-zh h2 { font-family: "Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif; }

/* ---------- guided tour overlay ---------- */
.tour { position: fixed; inset: 0; z-index: 50; background: rgba(7, 7, 8, .985); display: none; }
.tour.open { display: block; }
.tour-stage { position: absolute; inset: 0 0 190px; display: flex; align-items: center; justify-content: center; padding: 48px 72px 0; }
.tour-stage .frame { max-width: 100%; }
.tour-slide { position: absolute; opacity: 0; transition: opacity 1.4s ease; display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.tour-slide.on { opacity: 1; }
.tour-slide .mat img { max-width: min(1200px, 86vw); max-height: calc(100svh - 300px); }
.tour-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 72px 34px; display: grid; grid-template-columns: 1fr auto; gap: 8px 40px; align-items: end; border-top: 1px solid var(--line); background: linear-gradient(to top, rgba(7,7,8,.9), rgba(7,7,8,0)); }
.tour-caption h2 { font-size: 30px; letter-spacing: -.01em; }
.tour-caption .plaque-meta { margin-top: 6px; }
.tour-caption .plaque-note { margin-top: 8px; font-size: 16px; max-width: 640px; }
.tour-count { font: 13px/1.6 var(--sans); letter-spacing: .26em; color: var(--brass); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour-progress { position: absolute; top: 0; left: 0; height: 2px; background: var(--brass); width: 0; transition: width .5s linear; }
.tour-ui { position: absolute; top: 18px; right: 26px; display: flex; gap: 6px; z-index: 3; }
.tour-btn { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; font: 19px/1 var(--sans); color: var(--muted); border-radius: 999px; }
.tour-btn:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.tour-arrow { position: absolute; top: 96px; bottom: 190px; width: 72px; display: flex; align-items: center; justify-content: center; font: 30px/1 var(--sans); color: var(--quiet); z-index: 2; }
.tour-arrow:hover { color: var(--brass); }
.tour-arrow.prev { left: 0; }
.tour-arrow.next { right: 0; }
/* a set stop: its prints hang together on one tour-scale wall at one height;
   --ar/--n are set inline per set so the row fits the stage. Any print opens
   full size; the back button returns to the set. */
.tour-set-prints { --gap: clamp(18px, 2.6vw, 44px); display: flex; align-items: flex-end; justify-content: safe center; gap: var(--gap); max-width: 100%; overflow-x: auto; scrollbar-width: thin; padding: 4px; }
.tour-member { background: none; border: 0; padding: 0; margin: 0; cursor: zoom-in; min-width: 0; flex: 0 0 auto; }
.tour-member .mat img { height: min(48svh, max(120px, calc((88vw - (var(--n, 3) - 1) * var(--gap) - var(--n, 3) * 64px) / var(--ar, 3)))); width: auto; max-width: 100%; max-height: none; }
/* landscape sets stack vertically in the tour as well; the strip scrolls */
.tour-set-prints.lay-v { flex-direction: column; align-items: center; overflow-x: visible; overflow-y: auto; max-height: calc(100svh - 300px); row-gap: clamp(28px, 4vh, 56px); padding: 12px 4px; width: min(100vw - 160px, 980px); }
.tour-set-prints.lay-v .tour-member { width: 100%; }
.tour-set-prints.lay-v .frame, .tour-set-prints.lay-v .frame a, .tour-set-prints.lay-v .mat { display: block; }
.tour-set-prints.lay-v .tour-member .mat img { width: 100%; height: auto; max-width: none; }
.tour .tour-back { display: none; }
.tour.zoomed .tour-back { display: inline-flex; }

@media (max-width: 1000px) {
  main, .site-header, footer { width: calc(100% - 64px); }
  .series-card { grid-template-columns: 160px 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  main, .site-header, footer { width: calc(100% - 40px); }
  .site-header { min-height: 104px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding-block: 14px 8px; }
  .wordmark { font-size: 26px; }
  .site-header nav{display:block;font-size:13px;}
  .nav-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:44px;width:44px;cursor:pointer;position:relative;z-index:120;}
  .nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:1px;}
  /* mobile drawer: full-height fixed panel, solid, scrollable, slides in from the right */
  .nav-links{display:flex;position:fixed;top:0;right:0;bottom:0;width:min(340px,80vw);flex-direction:column;gap:2px;background:#141416;border-left:1px solid #2a2a2e;padding:110px 14px 24px;z-index:110;box-shadow:-18px 0 48px rgba(0,0,0,.55);overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(103%);transition:transform .28s ease;}
  .nav-toggle:checked ~ .nav-links{transform:none;}
  body:has(.nav-toggle:checked){overflow:hidden;}
  body:has(.nav-toggle:checked)::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;}
  .nav-links .nav-item{display:block;}
  .nav-links .nav-item>a{display:block;padding:11px 14px;}
  .nav-links .nav-drop{position:static;transform:none;opacity:1;visibility:visible;display:flex;box-shadow:none;border:none;background:transparent;padding:0 0 2px 16px;min-width:0;}
  .nav-links .nav-drop a{padding:9px 14px;font-size:13px;}
  .series-card { grid-template-columns: 1fr; gap: 16px; padding: 34px 4px; }
  .series-card .mat img { aspect-ratio: 16/9; }
  /* 80px = 20px page gutter each side + frame/mat chrome (~38px) */
  .mat img { max-width: min(86vw, calc(100vw - 80px)); max-height: 58svh; }
  /* set rows stack vertically on phones: no scrollbars in either direction */
  .set-wall.lay-grid .set-prints, .set-wall.lay-v .set-prints { flex-direction: column; align-items: center; overflow-x: visible; }
  .set-wall.lay-grid .set-print .mat img, .set-wall.lay-v .set-print .mat img { height: auto; max-height: 60svh; }
  .plaque { grid-template-columns: 1fr; gap: 8px; margin-top: 26px; }
  .plaque-no { line-height: 1.6; }
  .plaque h2 { font-size: 24px; }
  .print-room .mat img { max-width: 88vw; max-height: 72svh; }
  .tour-stage { inset: 0 0 220px; padding: 40px 20px 0; }
  .tour-slide .mat img { max-width: 88vw; max-height: calc(100svh - 330px); }
  .tour-caption { padding: 20px 24px 26px; grid-template-columns: 1fr; }
  .tour-caption h2 { font-size: 24px; }
  .tour-arrow { width: 52px; bottom: 220px; }
  .legal { margin-top: 48px; }
  .legal h1 { font-size: 36px; }
  .about { margin-top: 48px; }
  .about h1 { font-size: 36px; }
  footer { flex-wrap: wrap; margin-top: 64px; padding-block: 20px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* reveal removed */
}

/* ---------- photo sets: several prints, one wall ---------- */
/* figures top-align: plaques have different heights (notes wrap to 1-3
   lines), so aligning figure tops keeps the IMAGES in one clean band */
.set-wall .set-prints { --gap: clamp(20px, 3vw, 48px); display: flex; justify-content: safe center; align-items: flex-start; gap: var(--gap); overflow-x: auto; scrollbar-width: thin; position: relative; z-index: 1; padding-bottom: 30px; container-type: inline-size; }
.set-print { margin: 0; text-align: center; min-width: 0; flex: 0 0 auto; }
.set-print .frame a { display: block; }
/* one clean row: every print the same display height, top-aligned, even
   gaps. --ar (sum of the members' aspect ratios) and --n come from data-*
   (row-fit.js); 100cqw is the row's own width (.set-prints is an inline-size
   container), so the whole row fits. Prints hang bare, so only the gaps and 1px per print of rounding
   come off the width. row-fit.js refines this from measured widths; the CSS
   is the no-JS fallback. The vh cap keeps short rows from getting too tall. */
.set-wall.lay-h .set-print .mat img {
  height: min(74vh, calc((100cqw - (var(--n, 2) - 1) * var(--gap) - var(--n, 2) * 1px) / var(--ar, 2)));
  width: auto; max-width: none; max-height: none;
}
.set-print .mat img { height: max(120px, calc((min(1400px, 100vw - 112px) - var(--n, 3) * var(--gap)) / var(--ar, 3))); width: auto; max-width: none; max-height: none; }
.set-print .plaque { grid-template-columns: minmax(0, 100%); gap: 8px; margin-top: 24px; width: 0; min-width: 100%; }
.set-print .plaque-no { display: none; }
.set-print .plaque h2 { font-size: 22px; }
.set-print .plaque-meta { font-size: 12.5px; letter-spacing: .14em; color: var(--muted); }
.set-print .plaque-note { font-size: 15.5px; }
/* landscape sets stack vertically: one large print per row, centered, the
   page scrolls. .lay-v/.lay-h is set per set by the build (landscape
   majority -> lay-v). */
.set-wall.lay-v .set-prints { flex-direction: column; align-items: center; overflow-x: visible; row-gap: clamp(32px, 5vh, 64px); }
/* vertical stack: the figure gets a definite width (fits the wall) and the
   frame chain goes block so the img's percentage width resolves cleanly */
.set-wall.lay-v .set-print { width: min(100%, 1160px); }
.set-wall.lay-v .frame, .set-wall.lay-v .frame a, .set-wall.lay-v .mat { display: block; }
.set-wall.lay-v .set-print .mat img { width: 100%; height: auto; max-width: none; }
/* lay-grid: a set that wraps across several rows — uniform row height, prints
   flow left to right and wrap; still one wall unit, one guided-tour stop. */
.set-wall.lay-grid .set-prints { flex-wrap: wrap; overflow-x: visible; row-gap: clamp(32px, 5vh, 64px); }
.set-wall.lay-grid .set-print .mat img { height: clamp(240px, 38vh, 430px); width: auto; max-width: none; max-height: none; }
/* a set member shown upside-down for that wall only (180°) */
.set-print.rot180 .frame { transform: rotate(180deg); }
/* a set member shown rotated for that wall only: the slot is portrait, the
   framed print is laid out landscape inside it and turned 90° CW */
.set-print.rot-cw .rotslot { position: relative; display: inline-block; aspect-ratio: 508/800; height: min(50svh, 120vw); }
.set-print.rot-cw .rotslot > .frame { position: absolute; top: 50%; left: 50%; width: calc(100% * 800 / 508); aspect-ratio: 800/508; box-sizing: border-box; transform: translate(-50%, -50%) rotate(90deg); }
.set-print.rot-cw .frame > a { display: block; height: 100%; }
.set-print.rot-cw .mat { height: 100%; box-sizing: border-box; }
.set-print.rot-cw .mat img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
/* quiet one-line strip on a set member's work page */
.set-siblings { margin: 36px auto 0; text-align: center; color: var(--quiet); font: 14px/1.6 var(--sans); letter-spacing: .05em; position: relative; z-index: 1; }
.set-siblings + .set-siblings { margin-top: 10px; }
.set-siblings a { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.set-siblings a:hover { color: var(--brass); }
/* Bilingual artist notes keep one shared caption per Nature set. */
.set-copy { max-width: 660px; margin: 36px auto 0; text-align: left; font: 17px/1.7 var(--serif); color: #c9c4b8; }
.set-copy p + p { margin-top: 14px; }
.copy-zh { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.copy-zh p, .tour-caption .copy-zh { font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; line-height: 1.9; letter-spacing: .025em; }
.set-head:has(.copy-zh) .copy-en, .set-head .copy-zh { max-width: 660px; margin-left: auto; margin-right: auto; text-align: left; }
.set-head .copy-zh p:first-child { margin-top: 0; }
.tour.has-bilingual { --caption-space: clamp(220px, 40svh, 360px); }
.tour.has-bilingual .tour-stage { bottom: var(--caption-space); }
.tour.has-bilingual .tour-arrow { bottom: var(--caption-space); }
.tour.has-bilingual .tour-caption { height: var(--caption-space); box-sizing: border-box; overflow-y: auto; align-items: start; background: #09090a; }
.tour.has-bilingual .tour-slide .mat img { max-height: calc(100svh - var(--caption-space) - 110px); }
.tour-caption [hidden] { display: none; }
@media (max-width: 640px) {
  .set-wall .set-prints { --gap: 20px; }
  .set-print.rot-cw .rotslot { height: min(52svh, 120vw); }
}

.t-zh { display: block; font-size: .62em; font-weight: 400; letter-spacing: .04em; opacity: .7; margin-top: .3em; }
.tour-caption h2 .t-zh { font-size: .6em; }

/* ---------- Sequence / Overview toggle ---------- */
.view-toggle { display: flex; justify-content: center; margin: 26px 0 0; }
.view-toggle button { font: 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--quiet); background: none; border: 1px solid var(--line); padding: 11px 24px; cursor: pointer; }
.view-toggle button:first-child { border-radius: 999px 0 0 999px; border-right: none; }
.view-toggle button:last-child { border-radius: 0 999px 999px 0; }
.view-toggle button[aria-pressed="true"] { color: var(--ink); border-color: var(--brass-dim); background: rgba(194,161,100,.08); }
.view-toggle button:hover { color: var(--ink); }

/* ---------- Overview: the visual index ---------- */
.overview[hidden] { display: none; }
.overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; padding: 40px 0 80px; max-width: 1280px; margin: 0 auto; }
.ov-cell { display: block; color: var(--ink); }
.ov-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; background: #0d0d0f; border: 1px solid var(--line); }
.ov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-cell:hover .ov-thumb { border-color: rgba(255,244,220,.4); }
.ov-cap { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-size: 13px; }
.ov-no { font: 11px/1.6 var(--sans); letter-spacing: .2em; color: var(--brass-dim); }
.ov-title { color: var(--muted); }
.ov-cell:hover .ov-title { color: var(--ink); }
.ov-cell.is-current .ov-thumb { outline: 2px solid var(--brass); outline-offset: 3px; }
.ov-set { grid-column: 1 / -1; border: 1px solid var(--line); padding: 22px 22px 26px; }
.ov-set-label { font: 12.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-dim); margin: 0 0 18px; }
.ov-set-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
@media (max-width: 640px) {
  .overview { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; padding: 28px 0 56px; }
  .ov-set-cells { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .ov-set { padding: 14px 14px 18px; }
}

@media (max-width: 640px) {
}
/* Critic's notes (Mira photo-eval): quiet collapsible section on work pages. */
.critics{max-width:720px;margin:44px auto 0;text-align:left;border-top:1px solid var(--line);padding-top:18px}
.critics summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px}
.critics summary::-webkit-details-marker{display:none}
.critics-kicker{font:12.5px/1.6 var(--sans);letter-spacing:.2em;color:#8f8b82}
.critics-score{margin-left:14px;font:500 13px/1.6 var(--sans);letter-spacing:.06em;color:#c9c4b8}
.critics-ver{font:12px/1.6 var(--sans);color:var(--quiet)}
.critics summary::after{content:"+";color:#8f8b82;font-size:18px;line-height:1}
.critics[open] summary::after{content:"\2013"}
.critics-lang{margin-left:auto;flex:none;align-self:center;display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.critics-lang button{appearance:none;background:none;border:0;color:#8f8b82;font:11.5px/1 var(--sans);letter-spacing:.14em;padding:7px 11px;cursor:pointer}
.critics-lang button+button{border-left:1px solid var(--line)}
.critics-lang button[aria-pressed="true"]{color:#e8e3d8;background:rgba(255,255,255,.07)}
.critics[data-lang="zh"] .critics-en{display:none}
.critics[data-lang="en"] .critics-zh{display:none}
.critics-zh .critics-reading,.critics-zh .critics-verdict,.critics-zh .deep-ev,.critics-zh .deep-meas,.critics-zh .deep-a9{font-family:"Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif}
.critics-body{margin-top:16px}
.critics-reading{font:17px/1.65 var(--serif);color:#c9c4b8}
.critics-points{margin:14px 0 0 1.1em;font:15.5px/1.7 var(--sans);color:#a9a49a}
.critics-points li+li{margin-top:8px}
.critics-next{margin-top:14px;font:15px/1.7 var(--sans);color:#c9c4b8}
.critics-next span{color:#8f8b82}
.critics-band{margin-top:12px;font:13.5px/1.6 var(--sans);letter-spacing:.08em;color:#c9c4b8}
.critics-band span{color:#8f8b82;letter-spacing:.2em;font-size:12px}
.critics-verdict{margin-top:10px;font:16.5px/1.65 var(--serif);color:#e2ddd2}
.critics-gaps{margin:14px 0 0 0;list-style:none;padding:0}
.critics-gaps .gap{margin-top:12px;padding:12px 14px;border-left:2px solid var(--line);background:rgba(255,255,255,.015)}
.critics-gaps .gap.sev-g2{border-left-color:#8a6f4d}
.critics-gaps .gap.sev-g3{border-left-color:#9a4a3c}
.critics-gaps .gap.sev-g0{border-left-color:#5c6e58}
.gap-sev{display:inline-block;font:11px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8f8b82;margin-right:10px}
.gap-loc{font:12.5px/1.6 var(--sans);color:#8f8b82}
.gap-consequence{margin-top:6px;font:15.5px/1.7 var(--sans);color:#c9c4b8}
.gap-intervention,.gap-cost,.gap-counter{margin-top:6px;font:14.5px/1.7 var(--sans);color:#a9a49a}
.gap-intervention span,.gap-cost span,.gap-counter span{color:#8f8b82}
.critics-subhead{margin:16px 0 6px;font:12px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#8f8b82}
.critics-diff{margin-top:8px;font:15px/1.7 var(--sans);color:#c9c4b8}
.diff-tier{display:inline-block;font:11px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8f8b82;border:1px solid var(--line);padding:2px 10px;margin-right:10px;vertical-align:1px}
.diff-tier.tier-distinctive{color:#9db49a;border-color:#5c6e58}
.diff-tier.tier-partial{color:#b8a888;border-color:#8a6f4d}
.diff-tier.tier-indistinguishable{color:#b08a80;border-color:#9a4a3c}
.diff-ver{font-size:11px;letter-spacing:.08em;color:#8f8b82;text-transform:none}
.critics-aff,.critics-protect{margin:0 0 0 1.1em;font:15px/1.7 var(--sans);color:#a9a49a}
.critics-aff li+li,.critics-protect li+li{margin-top:6px}
.critics-nextband{margin-top:14px;font:15px/1.7 var(--sans);color:#c9c4b8}
.critics-nextband span{color:#8f8b82}
.critics-response{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);font:15px/1.7 var(--sans);color:#a9a49a}
.critics-response span{color:#8f8b82}
.critics-deep{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.critics-deep summary{cursor:pointer;font:12px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#8f8b82;list-style:none}
.critics-deep summary::-webkit-details-marker{display:none}
.deep-ver{margin-top:8px;font:12.5px/1.6 var(--sans);color:#8f8b82}
.deep-ev,.deep-corr{margin:8px 0 0 1.1em;font:13px/1.7 var(--sans);color:#a9a49a}
.deep-gaps{margin:8px 0 0 1.1em;font:13px/1.7 var(--sans);color:#a9a49a;list-style:none;padding:0}
.deep-gaps li+li{margin-top:4px}
.deep-ev li+li,.deep-corr li+li{margin-top:4px}
.ev-tag{color:#8f8b82;font-size:12px}
.corr-date{color:#8f8b82}
.corr-reason{color:#8f8b82}
.deep-meas{margin-top:8px;font:13px/1.7 var(--sans);color:#a9a49a;white-space:pre-wrap}
.deep-a9{margin-top:8px;font:13px/1.7 var(--sans);color:#8f8b82}
/* Work pages drop the plaque number: collapse the empty number column so the
   caption does not squeeze into the 64px slot. Desktop only — the mobile
   single-column rule below must win on small screens. */
@media (min-width: 641px) {
  .plaque:not(:has(> .plaque-no)) { grid-template-columns: minmax(0, 560px); }
}


/* Phones: every set (lay-h, lay-v, lay-grid) stacks into one column and each
   print fits the screen width. Placed last so it wins over the desktop set
   rules above, which share the same specificity. Rotated prints keep their
   own sizing. row-fit.js stands down at this width. */
@media (max-width: 640px) {
  .set-wall .set-prints { flex-direction: column; align-items: center; overflow-x: visible; }
  .set-wall .set-print:not(.rot-cw) { width: 100%; }
  .set-wall .set-print:not(.rot-cw) .frame, .set-wall .set-print:not(.rot-cw) .frame a, .set-wall .set-print:not(.rot-cw) .mat { display: block; }
  .set-wall .set-print:not(.rot-cw) .mat img { width: auto; height: auto; max-width: 100%; max-height: 70svh; margin: 0 auto; display: block; }
}


/* desktop: the Nature / Street rooms get a slim left column beside the work
   (after Gursky, Kawauchi) */
@media (min-width: 901px) {
  body.room .site-header { position: fixed; top: 0; left: 0; bottom: 0; width: 200px; margin: 0; padding: 44px 0 0 48px; min-height: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 36px; }
  body.room .wordmark { font-size: 21px; white-space: normal; }
  body.room .site-header nav { flex-direction: column; gap: 0; font-size: 13px; }
  body.room .site-header nav a { min-height: 30px; }
  body.room .site-header nav a[aria-current=page]::after { display: none; }
  body.room .nav-item { display: flex; }
  body.room .nav-drop { display: none; }
  body.room main { width: auto; margin: 0 48px 0 248px; padding-top: 44px; }
  body.room footer { position: fixed; left: 48px; bottom: 28px; width: 168px; margin: 0; padding: 0; border: 0; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11.5px; }
  body.room footer nav { gap: 14px; }
}


/* ===== Nature / Street rooms in the home page's language (WA, 2026-10-06):
   small left-aligned type, prints at full field width, one quiet caption.
   Scoped to body.room so work pages, the tour and About are untouched. ===== */
@media (min-width: 901px) {
  /* the current room's regions sit under it in the left column */
  body.room .nav-item { flex-direction: column; }
  body.room .nav-item:has(> a[aria-current=page]) .nav-drop { display: flex; position: static; transform: none; opacity: 1; visibility: visible; flex-direction: column; gap: 0; min-width: 0; padding: 0 0 6px 12px; background: none; border: 0; border-radius: 0; box-shadow: none; transition: none; }
  body.room .nav-drop a { min-height: 26px; display: flex; align-items: center; padding: 0; font-size: 12.5px; color: var(--quiet); border-radius: 0; background: none; }
  body.room .nav-drop a:hover, body.room .nav-drop a[aria-current=page] { background: none; color: var(--ink); }
  body.room .gallery-filters { display: none; }
  body.room .wall:not(.set-wall) .mat img { max-height: calc(100svh - 120px); }
}
body.room .room-head { padding: 0 0 4px; text-align: left; }
body.room .room-head h1 { font: 400 22px/1.3 var(--serif); letter-spacing: 0; }
body.room .room-standfirst { margin: 10px 0 0; font: 14px/1.65 var(--sans); max-width: 620px; }
body.room .gallery-filters { justify-content: flex-start; gap: 0 22px; margin-top: 14px; padding-bottom: 0; font-size: 13px; letter-spacing: .02em; }
body.room .gallery-filters a[aria-current=page] { color: var(--ink); border-bottom-color: var(--muted); }
body.room .view-toggle { justify-content: flex-start; gap: 20px; margin: 16px 0 0; }
body.room .view-toggle button, body.room .view-toggle button:first-child, body.room .view-toggle button:last-child { border: 0; border-radius: 0; background: none; padding: 6px 0; font: 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--quiet); }
body.room .view-toggle button[aria-pressed="true"] { color: var(--ink); border-bottom: 1px solid var(--muted); background: none; }
body.room .walk { padding: 0 0 40px; }
/* single prints: left-aligned, as large as the field and one screen allow */
body.room .wall { text-align: left; padding: 64px 0 24px; }
body.room .wall:not(.set-wall) .mat img { margin-inline: 0; max-width: 100%; }
/* captions: title (and Chinese title), then place and year, then the note */
body.room .plaque { display: block; margin: 14px 0 0; max-width: 640px; }
body.room .plaque-no { display: none; }
body.room .plaque h2, body.room .set-print .plaque h2 { font: 400 14px/1.5 var(--sans); letter-spacing: .01em; color: var(--ink); }
body.room .plaque .t-zh { display: inline; margin: 0 0 0 10px; font-size: 13px; letter-spacing: .04em; opacity: 1; color: var(--quiet); }
body.room .plaque-meta, body.room .set-print .plaque-meta { margin-top: 2px; font: 12.5px/1.6 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--quiet); }
body.room .plaque-note, body.room .set-print .plaque-note { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--muted); }
body.room .copy-zh { margin-top: 14px; padding-top: 12px; }
/* sets: a small heading, prints start at the left edge of the field */
body.room .set-head { text-align: left; margin-bottom: 20px; }
body.room .set-head h2 { font: 400 20px/1.3 var(--serif); letter-spacing: 0; }
body.room .set-head h2 .t-zh { display: block; margin-top: 4px; font: 13px/1.5 var(--sans); letter-spacing: .04em; opacity: 1; color: var(--quiet); }
body.room .set-head p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; max-width: 620px; }
body.room .set-head:has(.copy-zh) .copy-en, body.room .set-head .copy-zh { margin-left: 0; margin-right: 0; max-width: 620px; }
body.room .set-wall .set-prints { justify-content: flex-start; }
body.room .set-wall.lay-v .set-prints { align-items: flex-start; }
body.room .set-print { text-align: left; }
body.room .set-copy { margin: 24px 0 0; font-size: 15px; color: var(--muted); max-width: 620px; }
/* overview: plain thumbnails, no borders */
body.room .overview { margin: 0; padding-top: 32px; }
body.room .ov-thumb { border: 0; }
body.room .ov-cell:hover .ov-thumb { opacity: .9; }
body.room .ov-no { display: none; }
body.room .ov-set { border: 0; padding: 8px 0 0; }
body.room .ov-set-label { margin: 0 0 12px; font: 400 14px/1.4 var(--serif); letter-spacing: 0; text-transform: none; color: var(--muted); }
body.room .ov-cell.is-current .ov-thumb { outline: 1px solid var(--muted); outline-offset: 3px; }

/* ===== Home: a title page (after Michael Kenna; WA, 2026-10-06) ===== */
body.page-title .site-header, body.page-title footer { display: none; }
body.page-title main { width: auto; margin: 0; }
.tp { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; box-sizing: border-box; }
.tp-name { margin: 0 0 clamp(28px, 4.5svh, 48px); padding-left: .42em; font: 400 clamp(20px, 1.7vw, 26px)/1 var(--serif); letter-spacing: .42em; text-transform: uppercase; color: var(--ink); }
.tp-print { margin: 0; }
.tp-print img { display: block; width: min(62vw, 980px); height: auto; max-height: 56svh; object-fit: contain; }
.tp-print a:hover img { opacity: .94; }
.tp-line { margin: clamp(26px, 4svh, 40px) 0 0; font: italic 400 17px/1.5 var(--serif); color: var(--muted); }
.tp-nav { display: flex; gap: 34px; margin-top: clamp(24px, 4svh, 40px); font: 13px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.tp-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--quiet); }
.tp-nav a:hover { color: var(--ink); }
@media (max-width: 640px) { .tp-print img { width: 100vw; max-height: none; } .tp-nav { gap: 22px; } }