/* THE HOUSE MUSEUM  --  museum.css
 *
 * Sonnet 5.5, 2026-10-22.  One stylesheet, no images, no fonts, no inline
 * anything (meadow CSP: style-src 'self').  Same press as the rest of the
 * book: flat dot screen, hard second-ink shadows, squares stay square.
 * What is new is the architecture: rooms with walls, a picture rail in each,
 * pictures hung from it on cords at honest sizes, sound in niches, live
 * things under glass, and words pinned up on the good paper.
 *
 * Sizes (.pw-N), cord drops (.drop-N), frames (.frame-X) and walls (.wall-X)
 * are all chosen by build_museum.py and only DEFINED here.
 */

:root {
  --paper: #f1ead6;
  --paper-deep: #e8ddc2;
  --ink: #2e3026;
  --muted: #55523f;
  --rasp: #7d2f43;
  --rasp-hi: #a13e55;
  --ochre: #6b4713;
  --sage: #34503a;
  --night: #24271f;
  --brass: #c9a24a;
  --lamp: #ffe9a8;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --edge: max(1rem, calc((100% - 1280px) / 2));
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.6;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, #0000 0 2.1rem, #a13e5518 2.1rem 2.2rem, #0000 2.2rem),
    radial-gradient(circle, #2e302612 0 .55px, #0000 .7px);
  background-size: auto, 5px 5px;
  background-repeat: no-repeat, repeat;
}

img, video, audio { max-width: 100%; }
a { color: var(--rasp); text-underline-offset: .22em; text-decoration-thickness: .08em; }
a:hover { color: var(--ink); }
h1, h2, h3, p { margin-top: 0; }
:target { scroll-margin-top: 1.5rem; }

/* one focus ring that works on paper and on dark walls: ink line, pale halo */
:where(a, button, input, summary, audio, video, main):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--lamp), 0 0 0 7px var(--lamp);
  border-radius: 1px;
}
main:focus-visible { outline: none; box-shadow: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem .9rem;
  background: var(--ink); color: var(--paper); font-weight: 700;
}
.skip:focus { top: 1rem; }

.preview-banner {
  margin: 0; padding: .7rem var(--edge); background: var(--ink); color: var(--lamp);
  font-size: .82rem; border-bottom: .3rem solid var(--rasp-hi);
}

/* ------------------------------------------------------------------ lintel */
.lintel { position: relative; padding: 0 0 clamp(2rem, 5vw, 4rem); }
.lintel__rail {
  height: .9rem;
  background: repeating-linear-gradient(90deg, var(--ochre) 0 .5rem, #835817 .5rem 1rem);
  border-bottom: 2px solid var(--ink);
}
.lintel__inner { padding: 0 var(--edge); }
.kicker {
  margin: 0 0 1.1rem; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rasp);
}
/* the title hangs as a sign on two cords from the rail above */
.sign {
  position: relative; display: block; width: fit-content; max-width: 100%;
  margin: 3.6rem 0 1.8rem; padding: .4rem clamp(1rem, 3vw, 2.2rem) .9rem;
  background: var(--paper-deep); border: 3px solid var(--ink);
  box-shadow: .55rem .55rem 0 var(--sage);
}
.sign h1 {
  margin: 0; font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.7rem, 9.5vw, 7.6rem); line-height: .86; letter-spacing: -.05em;
  text-shadow: .045em .045em 0 var(--rasp-hi);
  overflow-wrap: anywhere;
}
.sign__cord {
  position: absolute; top: calc(-3.6rem - 3px); width: 2px; height: calc(3.6rem + 3px); background: var(--ink);
}
.sign__cord--l { left: 12%; } .sign__cord--r { right: 12%; }
.sign__cord::after {
  content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brass); border: 1.5px solid var(--ink);
}
.lede {
  max-width: 42rem; margin: 0 0 1.2rem; font-family: var(--serif); font-size: clamp(1.12rem, 2.2vw, 1.4rem);
  line-height: 1.65;
}
.stats {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.4rem; padding: 0;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.stats span + span::before { content: "·"; margin-right: 1.4rem; color: var(--rasp); }
.start {
  display: inline-block; padding: .65rem 1rem; min-height: 44px; border: 2px solid var(--ink);
  background: var(--rasp); color: var(--paper); font-weight: 700; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  box-shadow: 3px 3px 0 var(--ochre);
}
.start:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------- floor plan */
.plan { padding: 0 var(--edge) clamp(2rem, 5vw, 3.5rem); }
.plan__title {
  margin: 0 0 .9rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase;
}
.plan__title small {
  display: block; margin-top: .15rem; color: var(--muted); font-size: .72rem;
  letter-spacing: .03em; text-transform: none; font-weight: 400;
}
.plan__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 0;
  margin: 0; padding: 0; list-style: none; border: 3px solid var(--ink);
  background: var(--ink); gap: 3px;
}
.plan__room { min-width: 0; }
.plan__room a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem; height: 100%;
  min-height: 6.5rem; padding: .7rem .85rem; color: var(--paper); text-decoration: none;
  background: var(--wall);
  background-image: radial-gradient(circle, #ffffff1c 0 .6px, #0000 .8px); background-size: 6px 6px;
}
.plan__room a:hover { filter: brightness(1.25); color: var(--paper); }
.plan__num { font-size: .75rem; letter-spacing: .14em; color: var(--lamp); }
.plan__name { font-family: var(--serif); font-size: 1.2rem; line-height: 1.15; overflow-wrap: anywhere; }
.plan__count { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; opacity: .92; }
.span-1 { grid-column: span 2; } .span-2 { grid-column: span 3; } .span-3 { grid-column: span 4; }

/* walls: each room sets its own palette; the plan reuses it */
.wall-sage  { --wall: #34503a; --wain: #28402e; --rail: #6a8a63; --cord: #e8ddc2; }
.wall-rasp  { --wall: #7d2f43; --wain: #632335; --rail: #b05a70; --cord: #f1ead6; }
.wall-ochre { --wall: #6b4713; --wain: #54370d; --rail: #a77a2e; --cord: #f1ead6; }
.wall-night { --wall: #2b2e25; --wain: #1f221a; --rail: #6d7060; --cord: #e8ddc2; }

/* ------------------------------------------------------------------ toolbar */
.toolbar {
  display: grid; grid-template-columns: minmax(14rem, 1.3fr) auto; gap: .9rem 1.6rem; align-items: end;
  margin: 0 var(--edge) 2.5rem; padding: .9rem 1rem 1rem;
  border: 2px solid var(--ink); background: color-mix(in srgb, var(--paper-deep) 55%, transparent);
  box-shadow: .45rem .45rem 0 var(--ochre);
}
.toolbar label, .toolbar legend {
  display: block; padding: 0; margin: 0 0 .3rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.toolbar input[type="search"] {
  width: 100%; min-height: 46px; padding: .55rem .75rem; border: 2px solid var(--ink); border-radius: 0;
  background: #fffaf0; color: var(--ink); font: inherit; font-size: 1rem;
}
.toolbar input::placeholder { color: #6c6853; opacity: 1; }
.toolbar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.chip, .reset {
  min-height: 44px; margin: 0 .35rem .35rem 0; padding: .4rem .75rem; border: 2px solid var(--ink);
  border-radius: 0; background: var(--paper); color: var(--ink); cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ochre);
}
.chip:hover, .reset:hover { background: #fffaf0; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--rasp-hi); }
.toolbar__status { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: .8rem; color: var(--muted); }
.toolbar .reset { justify-self: start; margin: 0; }

.nothing {
  display: grid; grid-template-columns: minmax(7rem, 14rem) minmax(0, 32rem); gap: 2rem; align-items: center;
  justify-content: center; margin: 0 var(--edge) 3rem; padding: 2rem 0;
}
.nothing h2 { margin: 0 0 .5rem; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; }
.nothing__frame {
  aspect-ratio: 4 / 5; border: .5rem solid var(--ochre); outline: 2px solid var(--ink);
  background: repeating-linear-gradient(135deg, transparent 0 .7rem, #2e302618 .7rem .8rem);
  box-shadow: .4rem .5rem 0 #0000004d;
}
.reset--big { margin-top: .6rem; }

/* -------------------------------------------------------------------- rooms */
main { display: block; }
.room {
  position: relative; color: var(--paper);
  background-color: var(--wall);
  background-image:
    linear-gradient(to top, var(--wain) 0 4.4rem, var(--rail) 4.4rem 4.65rem, #0000 4.65rem),
    radial-gradient(circle, #ffffff17 0 .6px, #0000 .8px);
  background-size: auto, 6px 6px;
  padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(5.5rem, 9vw, 8rem);
  border-top: 3px solid var(--ink);
}
.room + .room { margin-top: 0; }
.room a { color: var(--lamp); }
.room a:hover { color: #fff; }
.room__head {
  display: flex; align-items: baseline; gap: clamp(.8rem, 3vw, 2rem); padding: 0 var(--edge);
  margin-bottom: 1.8rem;
}
.room__num {
  margin: 0; font-family: var(--serif); font-size: clamp(3rem, 8vw, 6rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 2px var(--lamp); letter-spacing: -.04em;
}
.room__head h2 {
  margin: 0; font-family: var(--serif); font-size: clamp(1.7rem, 4.4vw, 3.1rem); line-height: 1.02;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}
.room__meta {
  margin: .35rem 0 0; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lamp);
}

/* the picture rail, and everything that hangs from it */
.hang {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(1.6rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4.5rem);
  padding: 2.4rem var(--edge) 0;
}
.hang::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: .7rem;
  background: var(--rail); border-top: 2px solid #0006; border-bottom: 2px solid #0007;
}

.piece {
  position: relative; flex: 0 0 auto; min-width: 0;
  width: min(100%, max(var(--w, 22rem), 14rem));
  padding-top: var(--drop, 2.4rem);
}
.drop-1 { --drop: 1.6rem; } .drop-2 { --drop: 2.6rem; } .drop-3 { --drop: 3.6rem; } .drop-4 { --drop: 4.6rem; }
/* a V of cord to a brass nail */
.piece--image::before, .piece--interactive::before, .piece--film::before {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: var(--drop);
  background:
    linear-gradient(to bottom right, #0000 calc(50% - 1px), var(--cord) calc(50% - 1px) calc(50% + 1px), #0000 calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to bottom left,  #0000 calc(50% - 1px), var(--cord) calc(50% - 1px) calc(50% + 1px), #0000 calc(50% + 1px)) right / 50% 100% no-repeat;
}
.piece--image::after, .piece--interactive::after, .piece--film::after {
  content: ""; position: absolute; top: -.32rem; left: calc(50% - .32rem); width: .64rem; height: .64rem;
  border-radius: 50%; background: var(--brass); border: 1.5px solid #0009;
}
/* things that stand or are pinned do not hang */
.piece--sound, .piece--text { padding-top: 0; }

.ribbon {
  position: absolute; z-index: 2; top: calc(var(--drop, 2rem) - .2rem); left: -.5rem; margin: 0;
  padding: .2rem .6rem; background: var(--rasp-hi); color: var(--paper); border: 2px solid var(--ink);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
}
.piece--sound .ribbon, .piece--text .ribbon { top: -.7rem; }

/* frames */
.frame-gilt  { --frame: #b88b2e; }
.frame-black { --frame: #1b1d16; }
.frame-bone  { --frame: #d9cba7; }
.frame-moss  { --frame: #8fa57e; }
.frame {
  margin: 0; padding: .65rem; background: var(--paper);
  border: .55rem solid var(--frame, #b88b2e); outline: 2px solid #000a;
  box-shadow: .4rem .5rem 0 #0000004d;
}
.frame-link { display: block; line-height: 0; cursor: zoom-in; }
.frame-link:focus-visible { outline-offset: 2px; }
.still { display: block; width: 100%; height: auto; border: 1px solid #0006; background: var(--paper-deep); }
.frame--words {
  display: grid; place-items: center; min-height: 11rem; text-align: center;
  background: repeating-linear-gradient(135deg, var(--paper) 0 .7rem, var(--paper-deep) .7rem .8rem);
}
.no-still { margin: 0; padding: 1rem; font-family: var(--serif); font-style: italic; color: var(--muted); line-height: 1.4; }

/* museum labels: the tombstone under every work */
.label {
  margin-top: .95rem; padding: .7rem .85rem .75rem; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: .3rem .3rem 0 #0000004d; font-size: .84rem; line-height: 1.5;
}
.label p { margin: 0; }
.label a { color: var(--rasp); }
.label a:hover { color: var(--ink); }
.accno {
  display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .3rem !important;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.label .title { margin: 0; font-family: var(--serif); font-size: 1.22rem; line-height: 1.2; font-style: italic; overflow-wrap: anywhere; }
.maker { margin-top: .15rem !important; font-weight: 700; overflow-wrap: anywhere; }
.date { color: var(--muted); font-size: .78rem; }
.undated { font-style: italic; }
.desc { margin-top: .5rem !important; overflow-wrap: anywhere; }
.original { margin-top: .5rem !important; font-weight: 700; }
.preview-tag {
  margin: -.1rem 0 .5rem !important; padding: .15rem .45rem; width: fit-content; border: 2px dashed var(--rasp);
  color: var(--rasp); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.prov { margin-top: .6rem; border-top: 1px solid #2e302633; padding-top: .45rem; font-size: .76rem; color: var(--muted); }
.prov summary { cursor: pointer; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; min-height: 1.6rem; }
.prov p { margin: .35rem 0 0; overflow-wrap: anywhere; }
.acc-date { opacity: .85; }

/* --------------------------------------------------- listening alcove (sound) */
.piece--sound { --w: 21rem; }
.alcove {
  position: relative; overflow: clip; padding: 5.2rem 1.2rem 3.6rem; color: var(--paper);
  border: .5rem solid var(--paper-deep); border-bottom: 0; outline: 2px solid #000a;
  border-radius: 12rem 12rem 0 0 / 10rem 10rem 0 0;
  background:
    radial-gradient(ellipse at 50% 18%, #ffe9a838 0 18%, #0000 62%),
    var(--night);
  box-shadow: .4rem .5rem 0 #0000004d;
}
.rings {
  position: absolute; left: 50%; top: -3.5rem; width: 15rem; height: 15rem; translate: -50% 0; opacity: .55;
  background: repeating-radial-gradient(circle, #0000 0 .55rem, #ffe9a855 .55rem .65rem);
  mask-image: radial-gradient(circle, #000 20%, #0000 70%);
  -webkit-mask-image: radial-gradient(circle, #000 20%, #0000 70%);
}
.alcove__sign {
  position: relative; margin: 0 0 1rem; text-align: center; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--lamp);
}
.alcove__art { position: relative; margin: 0 auto 1rem; max-width: 12rem; border: 3px solid var(--paper); box-shadow: 3px 3px 0 #0008; line-height: 0; }
.alcove .label { position: relative; background: transparent; color: var(--paper); border: 0; box-shadow: none; padding: 0; margin: 0; }
.alcove .label .title { font-size: 1.45rem; text-align: center; }
.alcove .accno, .alcove .date { color: #d5cdb3; }
.alcove .accno { justify-content: center; gap: 1rem; }
.alcove .maker, .alcove .date { text-align: center; }
.alcove .label a, .alcove a { color: var(--lamp); }
.alcove .prov { border-top-color: #f1ead633; color: #d5cdb3; }
.alcove .preview-tag { color: var(--lamp); border-color: var(--lamp); margin-inline: auto !important; }
.alcove__deck { position: relative; margin-top: 1.1rem; }
.player { display: block; width: 100%; color-scheme: dark; }
audio.player { min-height: 54px; }
.elsewhere, .transcript { margin: .6rem 0 0; font-size: .82rem; text-align: center; }
.bench {
  position: absolute; left: 12%; right: 12%; bottom: 0; height: 1.5rem; background: var(--rasp-hi);
  border-top: 3px solid var(--ink); box-shadow: inset 0 .4rem 0 #ffffff22;
}

/* ------------------------------------------------- live things under glass */
.vitrine { position: relative; border: .55rem solid #1b1d16; outline: 2px solid #000a; background: #1b1d16; box-shadow: .4rem .5rem 0 #0000004d; }
.vitrine__window { position: relative; display: block; line-height: 0; background: var(--paper-deep); color: inherit; text-decoration: none; }
.vitrine__window .still { border: 0; }
.vitrine__window .no-still { display: block; min-height: 9rem; line-height: 1.4; padding: 2.5rem 1rem; text-align: center; }
.glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, #fff0 0 38%, #ffffff30 38% 46%, #fff0 46% 52%, #ffffff1c 52% 56%, #fff0 56%);
  box-shadow: inset 0 0 0 1px #fff5, inset 0 0 2.2rem #0000002e;
}
.enter {
  position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: .5rem .8rem; line-height: 1.3;
  background: var(--ink); color: var(--lamp); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-top: 2px solid var(--lamp);
}
a.vitrine__window:hover .enter, a.vitrine__window:focus-visible .enter { background: var(--rasp); color: #fff; }
.enter--shut { background: #55523f; color: var(--paper); }
.vitrine__note {
  margin: 0; padding: .6rem .85rem .7rem; background: #1b1d16; color: #e8ddc2;
  font-size: .72rem; line-height: 1.45; font-style: italic; border-top: 1px solid #f1ead633;
}

/* --------------------------------------------------------------- films */
.piece--film { --w: 36rem; }
.screen { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) 1.1rem; box-shadow: .4rem .5rem 0 #0000004d; border: 3px solid #0a0b08; background: #0a0b08; }
.curtain { background: repeating-linear-gradient(90deg, var(--rasp) 0 .22rem, #9d3f58 .22rem .44rem); }
.screen__glass { min-width: 0; background: #0a0b08; }
.player--film { width: 100%; height: auto; aspect-ratio: auto 16 / 9; object-fit: contain; background: #0a0b08; }
.screen__still { position: relative; display: block; min-height: 7rem; line-height: 0; background: #1b1d16; color: var(--paper); text-decoration: none; }
.screen__still .still { border: 0; }
.screen__still .no-still { display: block; padding: 2.5rem 1rem; color: #d5cdb3; line-height: 1.4; }
.piece--film .transcript { margin-top: .7rem; text-align: left; }

/* ---------------------------------------- words: pinned to the good paper */
.piece--text { --w: 36rem; }
.piece--text.is-featured { --w: 44rem; }
.broadside {
  position: relative; padding: 2.2rem clamp(1.1rem, 4vw, 2.4rem) 1.9rem; color: var(--ink);
  background: #f7f0dc; border: 2px solid var(--ink); box-shadow: .55rem .55rem 0 var(--ochre);
}
.pin {
  position: absolute; top: .7rem; left: calc(50% - .5rem); width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--rasp-hi); border: 2px solid var(--ink); box-shadow: 2px 3px 0 #0004;
}
.plate { margin: 0 0 1.2rem; max-width: 15rem; border: .4rem solid var(--paper-deep); outline: 1px solid var(--ink); line-height: 0; }
.words { font-family: var(--serif); font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.75; max-width: 34rem; }
.words .stanza { margin: 0 0 1.3em; white-space: pre-line; overflow-wrap: anywhere; }
.words .stanza:last-child { margin-bottom: 0; }
.verse { font-style: italic; }
.verse .stanza { padding-left: 1.1em; text-indent: -1.1em; padding-right: .3em; }
.prose .stanza { text-indent: 1.4em; }
.prose .stanza:first-child { text-indent: 0; }
.prose .stanza:first-child:first-letter {
  float: left; margin: .08em .1em 0 0; font-size: 3.4em; line-height: .8; font-weight: 700; color: var(--rasp);
}
.broadside .original a { color: var(--rasp); }
.piece--text .label { margin-top: 1.2rem; }
.more-words { margin-top: 1rem; padding: .8rem 1rem; background: #f7f0dc; color: var(--ink); border: 2px solid var(--ink); }
.more-words summary { cursor: pointer; font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

/* a short quotation gets the page to itself, centred, large and slow */
.words.fragment { max-width: 30rem; margin-inline: auto; font-style: italic; text-align: center; font-size: clamp(1.3rem, 3.2vw, 1.85rem); line-height: 1.5; }
.fragment .stanza { text-indent: 0; }
.broadside__lede { margin: 0; max-width: 34rem; font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.6; }

/* ------------------------------------------------------------------ empty */
.bare .hang { padding-top: 3rem; }
.bare__hooks { display: flex; justify-content: space-around; width: min(100%, 36rem); }
.bare__hooks span { display: block; width: 6rem; height: 8rem; border: 2px dashed #f1ead677; }
.bare__text { flex: 0 1 36rem; margin: 1rem 0 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.65; color: var(--paper); text-align: center; }

/* ----------------------------- the beautiful unnecessary display case */
.room--case {
  --wall: #261a22; --wain: #1b1218; --rail: #5c3a4a;
  background-image:
    linear-gradient(to top, var(--wain) 0 4.4rem, var(--rail) 4.4rem 4.65rem, #0000 4.65rem),
    radial-gradient(circle, #ffffff12 0 .6px, #0000 .8px);
}
.hang--case::before { display: none; }
.hang--case { padding-top: 1rem; }
.case { position: relative; width: min(100%, 44rem); margin: 0 auto; }
.case__lamp {
  position: absolute; left: 50%; top: -1.2rem; width: 70%; height: 21rem; translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0, #0000 0 38%, #ffe9a826 38% 62%, #0000 62%);
  opacity: .55;
}
.case__glass {
  position: relative; padding: 2.2rem 1.4rem 1.2rem; border: .5rem solid #cdbf93; outline: 2px solid #000a;
  background:
    radial-gradient(ellipse at 50% 0, #ffe9a85e, #0000 65%),
    repeating-linear-gradient(90deg, #5a1f31 0 .22rem, #6a2539 .22rem .44rem);
  box-shadow: inset 0 0 0 2px #0008, .5rem .6rem 0 #0006;
}
.objects { display: block; width: 100%; height: auto; max-height: 14rem; }
.case__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, #fff0 0 14%, #ffffff2e 14% 21%, #fff0 21% 26%, #ffffff1a 26% 29%, #fff0 29%);
}
.case__plinth { height: 1.6rem; margin: 0 -.9rem; background: linear-gradient(#8a6420, #5f4414); border: 2px solid #000a; box-shadow: .5rem .6rem 0 #0006; }
.case__plaques { display: grid; gap: .7rem 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.6rem; }
.case__plaques p {
  margin: 0; padding: .7rem .85rem; background: #d6b255; color: #251a05; border: 2px solid #000a;
  font-size: .8rem; line-height: 1.5; box-shadow: 3px 3px 0 #0007;
}
.case__plaques .case__fine { grid-column: 1 / -1; background: transparent; border: 0; box-shadow: none; color: #d8cbb3; text-align: center; font-style: italic; padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .case__lamp { transition: opacity .5s ease; }
  .case:hover .case__lamp, .case:focus-within .case__lamp { opacity: .95; }
}

/* ------------------------------------------------------------------ colophon */
.colophon { padding: 3rem var(--edge) 4rem; border-top: 3px solid var(--ink); }
.colophon__inner { max-width: 44rem; font-size: .86rem; color: var(--muted); }
.colophon strong { color: var(--ink); }
.colophon p { margin: 0 0 1rem; }

/* ----------------------------------------------------------------- lightbox */
.lightbox {
  width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: #14160fed; color: var(--paper);
}
.lightbox::backdrop { background: #14160fe6; }
.lb { display: flex; flex-direction: column; min-height: 100%; padding: .8rem clamp(.6rem, 3vw, 2rem) 1rem; }
.lb__close {
  align-self: flex-end; min-height: 44px; margin-bottom: .5rem; padding: .4rem .9rem; border: 2px solid var(--paper);
  border-radius: 0; background: var(--ink); color: var(--paper); cursor: pointer; font: inherit; font-size: .78rem;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.lb__close:hover { background: var(--rasp); }
.lb__stage { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.lb__nav {
  width: 3.2rem; height: 4.2rem; border: 2px solid var(--paper); border-radius: 0; background: var(--ink); color: var(--paper);
  cursor: pointer; font-size: 2.4rem; line-height: 1; padding: 0 0 .3rem;
}
.lb__nav:hover { background: var(--rasp); }
.lb__figure { margin: 0; display: grid; justify-items: center; gap: .9rem; min-width: 0; }
.lb__figure img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 15rem); object-fit: contain;
  background: var(--paper-deep); border: .4rem solid var(--paper); outline: 2px solid #000;
}
.lb__figure figcaption { width: min(100%, 44rem); font-size: .86rem; line-height: 1.55; }
.lb__figure figcaption .t { margin: 0; font-family: var(--serif); font-size: 1.4rem; font-style: italic; }
.lb__figure figcaption p { margin: .25rem 0 0; overflow-wrap: anywhere; }
.lb__figure figcaption .m { color: #d5cdb3; font-size: .78rem; }
.lb__figure figcaption a { color: var(--lamp); }
.lb__count { margin: .6rem 0 0; text-align: center; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #d5cdb3; }
body.lb-open { overflow: hidden; }
.lightbox :focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lamp); outline: 3px solid var(--lamp); outline-offset: 3px; }

/* ---------------------------------------------------------------- sizes */
.pw-10{--w:10rem}
.pw-12{--w:12rem}
.pw-14{--w:14rem}
.pw-16{--w:16rem}
.pw-18{--w:18rem}
.pw-20{--w:20rem}
.pw-22{--w:22rem}
.pw-24{--w:24rem}
.pw-26{--w:26rem}
.pw-28{--w:28rem}
.pw-30{--w:30rem}
.pw-32{--w:32rem}
.pw-34{--w:34rem}
.pw-36{--w:36rem}
.pw-38{--w:38rem}
.pw-40{--w:40rem}
.pw-42{--w:42rem}
.pw-44{--w:44rem}

/* ------------------------------------------------------------------ narrow */
@media (max-width: 880px) {
  .plan__grid { grid-template-columns: repeat(2, 1fr); }
  .span-1, .span-2 { grid-column: span 1; }
  .span-3 { grid-column: span 2; }
  .toolbar { grid-template-columns: 1fr; }
  .case__plaques { grid-template-columns: 1fr; }
  .nothing { grid-template-columns: 1fr; }
  .nothing__frame { max-width: 8rem; }
}
@media (max-width: 560px) {
  body { background-image: radial-gradient(circle, #2e302612 0 .55px, #0000 .7px); background-size: 5px 5px; }
  .hang { gap: 1.4rem; }
  .piece, .piece--sound, .piece--film, .piece--text { width: 100%; }
  .room__head { flex-direction: column; gap: .3rem; }
  .sign__cord { height: calc(2.6rem + 3px); top: calc(-2.6rem - 3px); }
  .sign { margin-top: 2.6rem; }
  .lb__stage { grid-template-columns: 1fr; }
  .lb__nav { position: fixed; bottom: 1rem; z-index: 2; width: 3.4rem; height: 3.4rem; }
  .lb__prev { left: .8rem; } .lb__next { right: .8rem; }
  .lb__figure img { max-height: calc(100vh - 17rem); }
  .lb__count { padding-bottom: 3.4rem; }
}
@media (forced-colors: active) {
  .frame, .label, .broadside, .vitrine, .alcove, .screen { border: 2px solid CanvasText; }
  .sign h1 { text-shadow: none; }
}
@media print {
  .toolbar, .nothing, .lightbox, .skip { display: none !important; }
  .room { color: #000; background: none; border-top: 2px solid #000; }
  .room a, .room__meta { color: #000; }
  .piece { break-inside: avoid; }
}