/* Unsigned · 無名 — a dark warm room. Every image is hung whole and uncropped; every label keeps a blank maker line. */
:root{color-scheme:dark;--wall:#1c211d;--wall-deep:#171c18;--wall-lit:#2a302a;--paper:#efe8d8;--ink:#1f2420;--card-muted:#5d5a4f;--muted:#b9b4a6;--gold:#d9bf87;--rule:#3f4840;--seal:#c46a52;--serif:'Iowan Old Style',Baskerville,'Palatino Linotype',Georgia,'Songti TC',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;--gutter:clamp(16px,5vw,64px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--wall)}
body{margin:0;background:var(--wall);color:var(--paper);font:17px/1.7 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:400}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em}
a,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
::selection{background:#d9bf8755;color:var(--paper)}
.wrap{width:min(1240px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.eyebrow{font:600 11px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.skip{position:fixed;top:10px;left:16px;z-index:20;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--paper);color:var(--ink);font:14px var(--sans);transform:translateY(-160%)}
.skip:focus{transform:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Header: the house mark, then the room's own line. */
.room-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;min-height:80px;padding:14px var(--gutter);border-bottom:1px solid var(--rule)}
.brand{display:inline-flex;align-items:center;gap:.85rem;min-height:44px;text-decoration:none;font:500 11px/1.25 var(--sans);letter-spacing:.16em}
.brand-mark{display:grid;place-items:center;width:34px;height:38px;padding-right:.5rem;border-right:1px solid #6f765f;color:var(--gold);font:italic 2.6rem/.9 var(--serif);letter-spacing:-.08em}
.brand small{display:block;margin-top:.35rem;color:var(--muted);font:12px/1.3 var(--serif);letter-spacing:.02em}
.room-header nav{display:flex;align-items:center;gap:26px;font:13px/1.4 var(--sans)}
.room-header nav a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;text-decoration:none}
.room-header nav a:hover{color:var(--gold);text-decoration:underline}

/* Arrival. */
.intro{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);column-gap:clamp(32px,6vw,96px);row-gap:44px;padding-block:clamp(52px,8vw,104px) clamp(44px,6vw,80px)}
.intro-head{grid-column:1;grid-row:1}
.intro-body{grid-column:2;grid-row:1/3;align-self:end}
.intro-head .eyebrow [lang]{font:400 15px/1 var(--serif);letter-spacing:.18em}
.intro h1{margin-top:24px;font-size:clamp(54px,7.4vw,112px);line-height:.95;letter-spacing:-.045em}
.intro h1 em{color:var(--gold)}
.intro-body p{max-width:34em;text-wrap:pretty;color:#ded7c6;font-size:clamp(17px,1.5vw,19px);line-height:1.75}
.intro-body p+p{margin-top:1em}
.intro-body p:first-child{color:var(--paper);font-size:clamp(20px,1.9vw,24px);line-height:1.55}
.intro-sign{grid-column:1;grid-row:2;align-self:start;max-width:540px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;padding-bottom:6px}
.seal{grid-row:1/3;width:62px;height:62px;border:2px solid var(--seal);border-radius:4px;transform:rotate(-3deg);opacity:.9}
.sign-line{height:52px;border-bottom:1px solid #efe8d8b3}
.sign-caption{grid-column:2;padding-top:8px;color:var(--muted);font:italic 15px/1.4 var(--serif)}

/* The register of ten. */
.index{padding-bottom:0}
.index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);border-bottom:1px solid var(--rule)}
.index a{display:grid;grid-template-columns:2.6em minmax(0,max-content) minmax(0,1fr);align-items:baseline;column-gap:14px;min-height:52px;padding:13px 0 11px;border-top:1px solid var(--rule);text-decoration:none}
.index a:hover .index-chapter{text-decoration:underline}
.index-number{color:var(--gold);font:italic 20px/1 var(--serif)}
.index-chapter{font-size:17px;line-height:1.35}
.index-maker{color:var(--muted);font:12px/1.45 var(--sans);text-align:right;text-wrap:balance}

/* Bays: the work on the wall, its label beside it. */
.bay{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:clamp(32px,5vw,80px);align-items:start;padding-block:clamp(56px,8vw,120px);border-top:1px solid var(--rule);scroll-margin-top:0}
.bay-art{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;padding:clamp(20px,3.4vw,52px) clamp(12px,2.4vw,40px) clamp(14px,2vw,24px);background:radial-gradient(ellipse 62% 58% at 50% 44%,var(--wall-lit) 0%,#2a302a00 72%)}
.art-link{display:block;width:min(100%,calc(min(76vh,720px) * var(--r,1)));line-height:0;border-radius:1px}
/* The link's width comes from the work's own ratio (--r, written by the generator), and the image's
   width/height attributes give its height, so every box is its final size before the bytes arrive:
   fragment links land on the right work and nothing shifts while the room loads. */
.art-link img{width:100%;height:auto;object-fit:contain;box-shadow:0 22px 44px -18px #000000b0,0 2px 8px #00000059}
.art-link:focus-visible{outline-offset:6px}
.art-hint{margin-top:16px;color:var(--muted);font:12px/1.4 var(--sans);letter-spacing:.06em}
.art-hint span{margin-left:.3em;color:var(--gold)}
.bay:first-child{border-top:0}
/* Flipped bays keep the wide column for the work. The figure stays first in the document in every bay,
   so reading and tab order is always work, then label, even where the label hangs on the left. */
.bay-flip{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.bay-flip .bay-art{grid-column:2;grid-row:1}
.bay-flip .bay-text{grid-column:1;grid-row:1}
.bay-text{min-width:0}
.bay-col+.bay-col{margin-top:40px}

/* The label is a paper card. The maker line stays blank. */
.label{padding:24px 26px 22px;background:var(--paper);color:var(--ink);box-shadow:0 14px 30px -20px #000000cc}
.label h2{font-size:clamp(23px,2vw,28px);line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.tombstone{display:grid;gap:12px;margin-top:20px;padding-top:4px}
.tombstone>div{display:grid;grid-template-columns:7.6em minmax(0,1fr);column-gap:14px;align-items:baseline}
.tombstone dt{color:var(--card-muted);font:600 10px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.tombstone dd{font-size:15px;line-height:1.5}
.maker-row{padding-bottom:4px}
.maker-row dt{align-self:start;padding-top:22px}
.blank-line{display:block;height:36px;border-bottom:1px solid var(--ink)}
.blank-caption{display:block;margin-top:6px;color:var(--card-muted);font:italic 13px/1.4 var(--serif)}
.chapter{display:flex;align-items:baseline;gap:14px;margin-top:34px}
.chapter-number{color:var(--gold);font:italic 44px/1 var(--serif);letter-spacing:-.03em}
.chapter-name{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}

/* Ai's reading, then the record. */
.reading h3{margin:12px 0 18px;font-size:clamp(27px,2.7vw,38px);line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.reading p:not(.eyebrow){max-width:36em;font-size:17px;line-height:1.75;text-wrap:pretty}
.reading p:not(.eyebrow)+p{margin-top:.9em}
.look-for{margin-top:30px}
.look-for ul{margin-top:10px;border-top:1px solid var(--rule)}
.look-for li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--rule);color:#e4ddcc;font-size:15.5px;line-height:1.6}
.look-for li::before{content:'';position:absolute;left:2px;top:1.15em;width:9px;height:9px;border:1px solid var(--gold);border-radius:50%}
.museum{padding-left:18px;border-left:1px solid var(--rule);color:var(--muted)}
.museum p:not(.eyebrow){margin-top:8px;font:14.5px/1.65 var(--sans)}
.museum .museum-fields{font-size:12.5px;line-height:1.55;letter-spacing:.01em}
.museum-sources{display:flex;flex-wrap:wrap;column-gap:22px}
.museum-sources a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;color:var(--gold);font-size:13px}
.care{margin-top:24px;color:#d6cfbe;font:italic 16px/1.6 var(--serif)}
.care::before{content:'';display:block;width:28px;margin-bottom:12px;border-top:1px solid var(--gold)}
.provenance{margin-top:20px;color:var(--muted);font:13.5px/1.65 var(--sans)}
.provenance .key{margin-right:.4em;color:var(--paper);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.record-link{display:inline-flex;align-items:center;gap:.5em;min-height:46px;margin-top:22px;padding:0 18px;border:1px solid #d9bf8780;color:var(--gold);font:13.5px/1.3 var(--sans);text-decoration:none}
.record-link:hover{background:#d9bf8714;text-decoration:underline}

/* Works wider than 5:2 hang across the wall at no more than their natural width; the label runs beneath. */
.bay-wide{display:block}
.bay-wide .bay-art{position:static;padding-inline:0;background:radial-gradient(ellipse 56% 70% at 50% 46%,var(--wall-lit) 0%,#2a302a00 74%)}
.bay-wide .art-link{width:100%;max-width:843px}
.bay-wide .bay-text{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.6vw,52px);margin-top:clamp(28px,3vw,44px)}
.bay-wide .bay-col+.bay-col{margin-top:0}
.bay-wide .tombstone>div{grid-template-columns:1fr;row-gap:2px}
.bay-wide .maker-row dt{padding-top:0}
.bay-wide .blank-line{height:30px}

/* Leaving. */
.ending{max-width:760px;padding-block:clamp(72px,10vw,140px) clamp(48px,6vw,80px);border-top:1px solid var(--rule);text-align:center}
.ending-text{margin-top:22px}
.ending-text p{font-size:clamp(20px,2.2vw,26px);line-height:1.55;text-wrap:pretty}
.ending-text p+p{margin-top:1em}
.signature{display:flex;flex-direction:column;align-items:center;margin:clamp(40px,6vw,64px) auto 0;max-width:520px}
.signature-text{color:var(--gold);font:italic 18px/1.5 var(--serif)}
.signature-line{display:block;align-self:stretch;margin-top:8px;border-top:1px solid #efe8d8b3}
.credit{max-width:600px;margin:clamp(40px,5vw,56px) auto 0;color:var(--muted);font:14px/1.65 var(--sans)}
.credit a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;margin-top:4px;color:var(--gold)}
.onward{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 32px;margin-top:28px;font:14px/1.4 var(--sans)}
.onward a{display:inline-flex;align-items:center;gap:.35em;min-height:44px}
.onward a:hover{color:var(--gold)}
.room-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:22px 28px;border-top:1px solid var(--rule);color:var(--muted);font:12px/1.6 var(--sans)}
.room-footer a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;color:var(--gold)}

/* The whole-work viewer (progressive enhancement). */
#unsigned-viewer{width:min(1240px,calc(100vw - 32px));height:min(920px,calc(100svh - 32px));max-width:none;max-height:none;padding:0;border:1px solid #efe8d84d;background:var(--wall-deep);color:var(--paper);box-shadow:0 20px 90px #000a}
#unsigned-viewer::backdrop{background:#0c100de8;backdrop-filter:blur(8px)}
.viewer-shell{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:100%;padding:12px 22px 16px}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.viewer-top p{color:var(--muted);font:12px/1.4 var(--sans);letter-spacing:.06em}
.viewer-top button{min-height:44px;padding:0 16px;border:1px solid #efe8d859;background:transparent;font:13px var(--sans)}
.viewer-top button:hover{border-color:var(--gold)}
.viewer-art{position:relative;min-height:0}
.viewer-art img{width:100%;height:100%;object-fit:contain}
.viewer-art img:not([src]){visibility:hidden}
.viewer-art p{position:absolute;left:50%;top:50%;width:max-content;max-width:90%;padding:12px;background:#171c18e8;text-align:center;font:13px var(--sans);transform:translate(-50%,-50%)}
.viewer-art p:empty{display:none}
.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}
.viewer-bottom h2{font-size:20px;line-height:1.25}
.viewer-bottom p{margin-top:4px;color:var(--muted);font:12px/1.5 var(--sans)}
.viewer-bottom a{display:inline-flex;flex-shrink:0;align-items:center;gap:.35em;min-height:44px;color:var(--gold);font:13px var(--sans)}

@media(max-width:1080px){.bay-wide .bay-text{grid-template-columns:repeat(2,minmax(0,1fr))}.bay-wide .col-museum{grid-column:1/-1;margin-top:40px}.bay-wide .col-museum>*{max-width:40em}}
@media(max-width:900px){
 .intro{grid-template-columns:1fr}
 .intro-sign{max-width:460px}
 .bay{display:block}
 .bay-art{position:static}
 .bay-flip .bay-art,.bay-flip .bay-text{grid-column:auto;grid-row:auto}
 .intro-head,.intro-body,.intro-sign{grid-column:1;grid-row:auto}
 .intro-body{align-self:start}
 .art-link{width:min(100%,calc(min(72vh,640px) * var(--r,1)))}
 /* In the viewer a work wider than 5:2 keeps up to its natural height and pans sideways. */
 #unsigned-viewer[data-wide] .viewer-art{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
 #unsigned-viewer[data-wide] .viewer-art img{flex:none;width:auto;max-width:none;height:min(100%,var(--natural-height,100%))}
 .bay-text{max-width:620px;margin:28px auto 0}
 .bay-wide .bay-text{max-width:none}
 .index ol{grid-template-columns:1fr}
}
@media(max-width:680px){
 .bay-wide .bay-text{display:block}
 .bay-wide .bay-col+.bay-col,.bay-wide .col-museum{margin-top:36px}
 .bay-wide .bay-art{margin-inline:calc(-1 * var(--gutter))}
 .index-maker{display:none}
 .index a{grid-template-columns:2.4em minmax(0,1fr)}
 .label{padding:20px 18px 18px}
 .tombstone>div{grid-template-columns:1fr;row-gap:2px}
 .maker-row dt{padding-top:0}
 .blank-line{height:28px}
 .chapter-number{font-size:38px}
 .viewer-shell{padding:10px 12px}
 #unsigned-viewer{width:calc(100vw - 16px);height:calc(100svh - 16px)}
 .viewer-bottom{display:block}
 .viewer-bottom a{margin-top:2px}
}
@media(max-width:480px){
 .room-header{padding-block:10px 4px}
 .room-header nav{width:100%;justify-content:space-between;gap:16px;border-top:1px solid var(--rule)}
 .brand small{font-size:11.5px}
 .intro h1{font-size:clamp(40px,12.3vw,60px)}
 .seal{width:48px;height:48px}
 .sign-line{height:40px}
 .reading h3{font-size:27px}
 .onward{flex-direction:column;align-items:center}
 .room-footer{flex-direction:column;align-items:flex-start}
}
@media(max-height:480px){.viewer-shell{gap:6px;padding-block:6px}.viewer-bottom h2{font-size:16px}}
/* Short landscape screens: the caption moves beside the work so the work keeps the height. */
@media(max-height:480px) and (orientation:landscape){
 .viewer-shell{grid-template-columns:minmax(0,1fr) minmax(150px,30%);grid-template-rows:auto minmax(0,1fr);column-gap:16px}
 .viewer-top{grid-column:1/-1}
 .viewer-art{grid-column:1;grid-row:2}
 .viewer-bottom{display:block;grid-column:2;grid-row:2;align-self:end}
 .viewer-bottom a{margin-top:2px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.room-header nav,.index,.skip,#unsigned-viewer,.art-hint{display:none!important}body,html{background:#fff;color:#111}.bay{break-inside:avoid}.bay-art{position:static;background:none}.reading p,.look-for li,.museum,.provenance,.care{color:#222}}