/* ---- Fonts: self-hosted from fonts/ (SIL Open Font License). Latin + Latin Extended only. ---- */
@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inconsolata-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/inconsolata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/marcellus-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Tokens ---- */
:root {
  --ground: #e7e5df;
  --room: #fbfaf7;
  --ink: #2b2b2b;
  --caption: #4a463f;
  --caption-2: #5d584f;
  --shadow-soft: rgba(43,43,43,.16);
  --shadow-hard: rgba(43,43,43,.24);
}

/* Page variants and room tones */
.page--compact { --padtop: 40px; --gutter: 24px; --padbot: 64px; }
.page--narrow { --gutter: 24px; }
.page--wide { --gutter: 60px; }
.tone--exhibitions { --room-color: #FFDDA6; }
.tone--books { --room-color: #CBEAA7; }
.tone--lectures { --room-color: #AEE1EA; }
.tone--press { --room-color: #AB97C8; }
.tone--parlor { --room-color: #EF949D; }
/* Home: room placement */
.room--exhibitions { grid-column: 1 / span 5; grid-row: 1; background: #FFDDA6; }
.room--books { grid-column: 6 / span 3; grid-row: 1; background: #CBEAA7; }
.room--about { grid-column: 2 / span 4; grid-row: 2; background: #EF949D; }
.room--press { grid-column: 1 / span 3; grid-row: 3; background: #AB97C8; }
.room--lectures { grid-column: 6 / span 3; grid-row: 3; background: #AEE1EA; }
.wallpanel--a { grid-column: 1; grid-row: 2; }
.wallpanel--b { grid-column: 6 / span 3; grid-row: 2; }
.wallpanel--c { grid-column: 4 / span 2; grid-row: 3; }
.room-img--narrow { --iw: 148px; object-position: 50% 22%; }
.room-img--contain { --iw: auto; object-fit: contain; }
.img--mono { filter: grayscale(1) contrast(1.06); }
/* Wallpapers */
.wp-306734 { background-image: url(photos/DP306734-786deaa7.jpg); }
.wp-306732 { background-image: url(photos/DP306732-8dc53320.jpg); }
.wp-306738 { background-image: url(photos/DP306738.jpg); }
/* Hanging and framing */
.hang--hero { --drop: 50px; }
.hang--ink { --drop: 40px; }
.hang--wide { grid-column: span 2; }
.frame--hero { --tilt: -.35deg; box-shadow: 4px 4px 0 rgba(43,43,43,.2); }
/* Doubled class on purpose: must outrank .frame img { height: auto } below, or cropped heroes revert to full portrait. */
.frame.frame--crop img { height: 560px; object-fit: cover; object-position: 50% 45%; }
/* Photo focus */
.talk-photo--hem { --y: 62%; }
.talk-photo--rooms { --x: 25%; --y: 25%; }
.focus-12 { object-position: center 12%; }
.focus-30 { object-position: 50% 30%; }
.focus-60 { object-position: 50% 60%; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #141412;
    --room: #22221f;
    --ink: #e7e5df;
    --caption: #c4bdb1;
    --caption-2: #ada69a;
    --shadow-soft: rgba(0,0,0,.55);
    --shadow-hard: rgba(0,0,0,.66);
  }
}

:root[data-theme="dark"] {
  --ground: #141412;
  --room: #22221f;
  --ink: #e7e5df;
  --caption: #c4bdb1;
  --caption-2: #ada69a;
  --shadow-soft: rgba(0,0,0,.55);
  --shadow-hard: rgba(0,0,0,.66);
}

/* ---- Resets ---- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the hidden attribute always wins over a class that sets display */
body { margin: 0; background: var(--ground); }
a { color: var(--ink); text-decoration: none; }
:where(a:hover) { color: var(--ink); }   /* zero specificity: never overrides a link class that sets its own color */

/* ---- Form controls (Contact) ---- */
input, select, textarea, button { font: inherit; color: inherit; }
::placeholder { color: var(--caption-2); opacity: 1; }

/* ---- Type scale ---- */
.section-heading {
  font-family: 'Marcellus', serif;
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0;
}
.placeholder { border: 1px dashed var(--ink); background: var(--room); }

/* ---- Books index ---- */
.shelves { padding: 40px 34px 34px; }

/* Row-of-books emblem: seven uprights of differing heights. */

.case { position: relative; padding: 0 22px; }
.case::before, .case::after { content: ""; position: absolute; top: 0; bottom: 15px; width: 4px; background: var(--ink); }
.case::before { left: 0; }
.case::after { right: 0; }
.board { height: 4px; margin: 26px -22px 0; background: var(--ink); box-shadow: 3px 3px 0 var(--shadow-soft); }
.board--top { margin: 0 -22px; }
.board--base { height: 6px; box-shadow: none; }
.feet { display: flex; justify-content: space-between; margin: 0 -10px; }
.feet span { display: block; width: 22px; height: 8px; background: var(--ink); }

.plaque-row { padding: 16px 18px 0; }
.plaque { display: inline-block; padding: 2px; background: var(--ink); box-shadow: 2px 2px 0 var(--shadow-soft); clip-path: polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px)); }
.plaque > span { display: block; padding: 5px 13px; background: var(--room); font-family: 'Inconsolata', monospace; font-size: 16px; letter-spacing: .14em; color: var(--ink); clip-path: inherit; }

.shelf { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,150px), 1fr)); align-items: end; gap: 22px; padding: 26px 18px 0; }
.book { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; color: var(--ink); transition: transform .15s; }
.book:hover { transform: translateY(-8px); }
.book:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.book h2 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; line-height: 1.2; margin: 0 0 12px; }
.cover { padding: 5px; border: 2px solid var(--ink); background: var(--room); box-shadow: 4px 3px 0 var(--shadow-soft); transform: rotate(var(--tilt, 0deg)); transition: box-shadow .15s; }
.cover img { display: block; width: 100%; height: auto; }
.book:hover .cover { box-shadow: 7px 5px 0 var(--shadow-hard); }
.ext { font-family: 'Inconsolata', monospace; font-size: 14px; letter-spacing: .1em; line-height: 1.35; color: var(--caption); margin-top: 9px; }

.wallpaper { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.wallpaper .swatch { width: 100%; aspect-ratio: 3 / 4; background-size: 180px; background-position: center; }
a.cover { display: block; }
a.cover:hover { box-shadow: 7px 5px 0 var(--shadow-hard); }
a.cover:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---- Skip link ---- */
.skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; left: 16px; top: 16px; z-index: 300; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  background: #2b2b2b; color: #fbfaf7; border: 2px solid #fbfaf7;
  font-family: 'Inconsolata', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
main:focus, main:focus-visible { outline: none; }

/* ---- Site icon ---- */
.emblem { flex: none; display: block; width: 76px; height: 80px; }

/* ---- Focus rings ---- */
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.on-wall:focus-visible { outline-color: #2b2b2b; }

/* ---- House chrome (shared) ---- */
.page { min-height: 100vh; padding: var(--padtop, 56px) var(--gutter, 40px) var(--padbot, 90px); background: var(--ground); font-family: 'Inconsolata', monospace; }
.sheet { width: 100%; max-width: 1000px; margin: 0 auto; }
.house { background: var(--room); border: 2px solid var(--ink); }

.roof { position: relative; height: 58px; background: var(--room); }
.roof .gable { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 210px; height: 46px; background: var(--ink); clip-path: polygon(50% 0,100% 100%,0 100%); }
.roof .stack { position: absolute; left: calc(50% - 70px); bottom: 14px; transform: translateX(-50%); width: 14px; height: 26px; background: var(--ink); }
.roof .cap { position: absolute; left: calc(50% - 70px); bottom: 40px; transform: translateX(-50%); width: 20px; height: 4px; background: var(--ink); }
.roof::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 4px 40px; min-height: 52px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.topbar-end { display: inline-flex; align-items: center; gap: 14px; }
.topbar .here { color: var(--caption); }
.topbar a { display: inline-flex; align-items: center; white-space: nowrap; flex: none; min-height: 44px; padding: 0 2px; }
.ig { justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; }
.ig-glyph { position: relative; display: inline-block; width: 19px; height: 19px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 6px; }
.ig-glyph::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 50%; }
.ig-glyph::after { content: ""; position: absolute; top: 2px; right: 2px; width: 2.5px; height: 2.5px; border-radius: 50%; background: currentColor; }

.roombar { display: flex; align-items: center; gap: 18px; padding: 26px 40px; background: var(--room-color); border-top: 2px solid #2b2b2b; border-bottom: 2px solid #2b2b2b; color: #2b2b2b; }
.roombar > div { flex: 1; min-width: 0; }
.roombar h1 { font-family: 'Marcellus', serif; font-size: 48px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; line-height: 1; margin: 0; }
.roomsub { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin: 9px 0 0; }

.footbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 8px 40px; min-height: 60px; border-top: 2px solid var(--ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.footbar nav { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.footbar a, .footbar nav span { display: inline-flex; align-items: center; white-space: nowrap; flex: none; min-height: 44px; padding: 0 2px; }
.footbar [aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Exhibition wall ---- */
.wall { background: var(--room-color); padding: 0 34px; }
.wall-rule { height: 3px; margin: 0 -34px; background: #2b2b2b; }
.frames { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding: 0 0 40px; }

.exh { position: relative; display: block; padding-top: var(--drop, 40px); color: #2b2b2b; }
.exh::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: var(--drop, 40px); background: #2b2b2b; }
.exh::after { content: ""; position: absolute; left: calc(50% - 4px); top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #2b2b2b; }
.exh:focus-visible, .frame:focus-visible { outline: 3px solid #2b2b2b; outline-offset: 3px; }
.exh h2 { font-family: 'Marcellus', serif; font-size: 26px; font-weight: 400; line-height: 1.2; margin: 20px 0 0; }
.exh .arrow { font-family: 'Inconsolata', monospace; font-size: 15px; letter-spacing: .1em; white-space: nowrap; }

.frame { position: relative; display: block; padding: 8px; background: #fbfaf7; border: 2px solid #2b2b2b; box-shadow: 3px 3px 0 rgba(43,43,43,.18); transform: rotate(var(--tilt, 0deg)); transition: box-shadow .18s; }
.frame:hover { box-shadow: 7px 7px 0 rgba(43,43,43,.3); }
.frame img { display: block; width: 100%; height: var(--h, auto); object-fit: cover; border: 1px solid #2b2b2b; }
.badge { position: absolute; left: 16px; top: 16px; margin: 0; padding: 6px 11px; background: #fbfaf7; border: 1px solid #2b2b2b; box-shadow: 2px 2px 0 rgba(43,43,43,.18); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #2b2b2b; }

.year { display: inline-block; margin: 12px 0 0; padding: 2px; background: #2b2b2b; box-shadow: 2px 2px 0 rgba(43,43,43,.14); clip-path: polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px)); }
.year > span { display: block; padding: 5px 11px; background: #fbfaf7; font-size: 16px; letter-spacing: .14em; color: #2b2b2b; clip-path: inherit; }
.year--now > span { padding: 6px 13px; font-size: 18px; white-space: nowrap; text-transform: uppercase; }

/* ---- Home: the cabinet house ---- */
.interior { padding: 34px 40px 40px; }

.attic { position: relative; height: 150px; }
.attic .gable { position: absolute; left: 0; right: 0; bottom: 0; height: 126px; background: var(--ink); clip-path: polygon(50% 0,100% 100%,0 100%); }
.attic .stack { position: absolute; left: 17%; top: 50px; transform: translateX(-50%); width: 34px; height: 64px; background: var(--ink); }
.attic .cap { position: absolute; left: 17%; top: 42px; transform: translateX(-50%); width: 46px; height: 8px; background: var(--ink); }

.rooms { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); grid-template-rows: repeat(3, minmax(214px,auto)); gap: 2px; padding: 0 2px 2px; background: var(--ink); }
.wallpanel { position: relative; display: block; min-height: 44px; overflow: hidden; border: 1px solid var(--ink); background: var(--room) center / cover no-repeat; }
a.wallpanel:focus-visible { outline: 3px solid #2b2b2b; outline-offset: -5px; }

.room { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; padding: 20px; border: 1px solid #2b2b2b; color: #2b2b2b; transition: filter .18s; }
.room:hover, .room:active { outline: 2px solid #2b2b2b; outline-offset: -6px; filter: saturate(1.3); }
.room:focus-visible { outline: 3px solid #2b2b2b; outline-offset: -6px; }
.room--stack { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.room img { flex: 0 1 auto; width: var(--iw, 150px); max-width: 100%; height: 158px; object-fit: cover; display: block; border: 1px solid #2b2b2b; }
.room-text { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.room-text p { max-width: 44ch; }
.room h2 { font-family: 'Marcellus', serif; font-size: 26px; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; line-height: 1; margin: 0; }
.room p { font-size: 13px; line-height: 1.6; margin: 9px 0 0; }

.utils { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; padding: 0 2px; background: var(--ink); }
.utils a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 18px; background: var(--room); border: 1px solid var(--ink); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; transition: background .18s; }
.utils a:hover { background: var(--ground); }
.utils a:focus-visible { outline: 3px solid var(--room); outline-offset: -6px; }
.utils .pull { flex: none; width: 26px; height: 8px; border: 2px solid var(--ink); }

.plinth { height: 16px; margin: 0 -18px; background: var(--ink); }
.plinth-lip { height: 5px; margin: 2px -10px 0; background: var(--ink); }
.legs { position: relative; height: 66px; margin: 0 6px; }
.legs span { position: absolute; top: 0; background: var(--ink); }
.legs .l1 { left: 0; width: 18px; height: 52px; clip-path: polygon(0 0,100% 0,68% 100%,20% 100%); }
.legs .l2 { left: 150px; width: 14px; height: 38px; clip-path: polygon(0 0,100% 0,72% 100%,22% 100%); }
.legs .l3 { right: 150px; width: 14px; height: 38px; clip-path: polygon(0 0,100% 0,78% 100%,28% 100%); }
.legs .l4 { right: 0; width: 18px; height: 52px; clip-path: polygon(0 0,100% 0,80% 100%,32% 100%); }

/* Footer on a colored wall (Home, Books) rather than ink */
.footbar--wall { background: var(--room-color); border-top-color: #2b2b2b; color: #2b2b2b; padding: 20px 40px; min-height: 0; }
.footbar--wall a, .footbar--wall nav span { color: #2b2b2b; }
.footbar--wall a:focus-visible { outline-color: #2b2b2b; }

/* Hanging frames */

.hang { position: relative; padding-top: var(--drop, 36px); }
.hang::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: var(--drop, 36px); background: #2b2b2b; }
.hang::after { content: ""; position: absolute; left: calc(50% - 4px); top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #2b2b2b; }

.hero-cap { font-size: 13px; line-height: 1.6; color: #2b2b2b; margin: 12px 0 0; }

.dsec-label { font-size: 13px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--caption); margin: 0 0 10px; }
.dsec-label--ruled { padding-bottom: 9px; margin-bottom: 0; border-bottom: 2px solid var(--room-color, #FFDDA6); }
.dsec-label--spaced { margin-top: 20px; color: var(--ink); }

.facts { display: flex; flex-direction: column; }
.fact { padding: 11px 0; margin: 0; border-bottom: 2px solid var(--room-color, #FFDDA6); font-size: 14px; line-height: 1.6; color: var(--ink); }
.fact:last-child { border-bottom: 0; }
address.fact { font-style: normal; }
.fact--split { display: flex; justify-content: space-between; gap: 14px; }
.fact-key { color: var(--caption); }

.linklist { display: flex; flex-direction: column; gap: 10px; }
.linkcard { display: grid; grid-template-columns: 58px 1fr; gap: 13px; align-items: center; padding: 13px; background: var(--room); border: 2px solid var(--ink); color: var(--ink); transition: background .12s; }
.linkcard img { box-sizing: border-box; width: 58px; height: 58px; display: block; object-fit: cover; border: 1px solid var(--ink); box-shadow: 2px 2px 0 rgba(43,43,43,.10); }
.linkcard h3 { font-family: 'Marcellus', serif; font-size: 17px; font-weight: 400; line-height: 1.15; margin: 0; }
.linkcard .meta { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--caption); margin: 5px 0 0; }

.rule { height: 2px; background: var(--ink); margin: 14px 0 16px; }
.rule--tight { margin: 0 0 14px; }
.rule--gal { margin: 6px 0 0; }
.prose { font-size: 15px; line-height: 1.7; color: var(--ink); }
.prose p { margin: 0 0 14px; }
.prose p:last-child { margin-bottom: 0; }


.todo { padding: 13px 15px; margin: 0; border: 1px dashed var(--ink); font-size: 13px; line-height: 1.6; color: var(--ink); }

.btn { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; background: var(--room-color, #FFDDA6); border: 1px solid #2b2b2b; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #2b2b2b; }
.trail { margin-left: 8px; }

/* ---- Book detail ---- */
.crumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.crumb-sep { color: var(--caption); white-space: nowrap; }
.topbar .crumb-back { display: none; }

.roombar--stack h1 { font-size: 32px; line-height: 1.1; }
.subtitle { font-size: 13px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: #2b2b2b; margin: 12px 0 0; }

.case--book { margin: 36px 40px 8px; padding: 0 14px; }

.case--book::before, .case--book::after { bottom: 6px; width: 4px; }
.rule--head { margin: 0 0 20px; }
.case--book .board--top { height: 4px; margin: 0; }
.case--book .board--base { height: 5px; margin: 0; }

.case--book .feet span { width: 16px; height: 6px; }

.bookrow { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding: 26px 12px 30px; }

.bookcol { flex: 1 1 240px; min-width: 0; }
.bookcol--cover { flex: 1 1 260px; max-width: 300px; }
.cover--flat { box-shadow: 3px 2px 0 var(--shadow-soft); }
.btns { display: flex; flex-direction: column; gap: 10px; }
.btn--static { margin: 0; }

.bookbody { margin: 0 40px; padding: 58px 0 44px; }

.bookbody h2 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }
.pressboxes.pressboxes--stack { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 62ch; }
.pressboxes--stack .box { min-height: 0; }
.prose--narrow { max-width: 60ch; }
.textlink { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ell { letter-spacing: -.05em; }
.textlink:hover { text-decoration-thickness: 2px; }
.textlink:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.callout { margin-top: 26px; padding: 18px 20px; background: var(--room-color, #CBEAA7); border: 1px solid #2b2b2b; font-size: 15px; line-height: 1.7; color: #2b2b2b; max-width: 60ch; }
.callout .textlink { color: #2b2b2b; }
.callout .textlink:focus-visible { outline-color: #2b2b2b; }

.meta--lg { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--caption); margin: 7px 0 0; }
.meta--lg.mt { margin-top: 14px; }

.bleed { margin: 0 -14px; }

.mt-lg { margin-top: 26px; }
.mt-xl { margin-top: 38px; }
.fact-val { text-align: right; }

/* ---- About: the parlor elevation ---- */
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.drawing { padding: 26px; background: var(--room); }
.drawing-mat { padding: 11px; border: 2px solid var(--ink); }
.drawing-sheet { padding: 24px; border: 1px solid var(--ink); }

.elevation { display: flex; align-items: stretch; }
.elevation-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.hatch--v { flex: none; width: 24px; border: 1px solid #2b2b2b; background: repeating-linear-gradient(45deg, var(--room-color), var(--room-color) 4px, #2b2b2b 4px, #2b2b2b 5px); }
.hatch--h { height: 20px; border-top: 1px solid #2b2b2b; border-bottom: 1px solid #2b2b2b; background: repeating-linear-gradient(90deg, var(--room-color), var(--room-color) 6px, #2b2b2b 6px, #2b2b2b 7px); }
.hatch--sill { height: 14px; border-bottom: 1px solid #2b2b2b; background: repeating-linear-gradient(90deg, var(--room-color), var(--room-color) 6px, #2b2b2b 6px, #2b2b2b 7px); }

.parlor { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 26px; padding: 30px 28px 26px; background: var(--room-color); border-bottom: 1px solid #2b2b2b; }

.wallshot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.portrait-mat { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-top: 22px; }
.portrait-mat > div { border: 2px solid var(--ink); }
.portrait-mat img { display: block; width: 232px; height: 290px; max-width: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); }

.bio-card { position: relative; flex: 1; max-width: 42ch; margin-top: 22px; padding: 20px 22px; background: var(--room); border: 1px solid var(--ink); }
.bio-card h2 { font-family: 'Marcellus', serif; font-size: 26px; font-weight: 400; line-height: 1.15; color: var(--ink); margin: 0; }
.bio-card p { font-size: 15px; line-height: 1.7; color: var(--ink); margin: 11px 0 0; }

.about-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 26px; padding-top: 26px; }
.about-text { flex: 1 1 280px; min-width: 0; max-width: 58ch; display: flex; flex-direction: column; gap: 15px; font-size: 15px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.about-text p { margin: 0; }
.fn { font-size: 12px; }
.notes { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; border-top: 2px solid var(--room-color); font-size: 12px; line-height: 1.6; color: var(--ink); }
.notes p { margin: 0; }
.notes b { font-weight: 400; color: var(--caption); }

.titleblock { flex: 1 1 240px; min-width: 0; max-width: 330px; border: 1px solid var(--ink); }
.titleblock-head { padding: 12px 14px; margin: 0; background: var(--room-color); border-bottom: 1px solid #2b2b2b; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #2b2b2b; }
.tb-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.tb-cell { padding: 11px 14px; border-bottom: 1px solid var(--ink); }
.tb-cell--r { border-right: 1px solid var(--ink); }
.tb-cell--wide { grid-column: span 2; }
.tb-cell--end { border-bottom: 0; }
.tb-key { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--caption); margin: 0; }
.tb-val { font-size: 14px; color: var(--ink); margin: 3px 0 0; }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 40px 40px; }
.btn-out { display: inline-flex; align-items: center; white-space: nowrap; flex: none; min-height: 44px; padding: 0 16px; background: var(--room); border: 2px solid var(--ink); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); transition: background .18s; }
.btn-out:hover { background: var(--room-color); }
/* Hover turns the card to the room's wall color, which is light in both themes: ink goes dark with it. */
.linkcard:hover, .btn-out:hover { --ink: #2b2b2b; --caption: #2b2b2b; --caption-2: #2b2b2b; color: #2b2b2b; border-color: #2b2b2b; }

/* Contact takes .roombar / .footbar--wall like every other room. */

.contactbody { padding: 34px 40px 40px; }

.dsec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }

.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 24px; margin-top: 22px; padding: 26px 28px 28px; background: var(--room-color); border: 2px solid #2b2b2b; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #2b2b2b; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0 14px; background: var(--room); border: 2px solid var(--ink); border-radius: 0; font-size: 15px; color: var(--ink); }
.field--check { flex-direction: row; align-items: center; gap: 12px; min-height: 44px; margin-top: -8px; cursor: pointer; }
.field--check input { flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0; accent-color: var(--ink); cursor: pointer; }
.field textarea { min-height: 168px; padding: 13px 14px; line-height: 1.7; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 3px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-right: -20px; }   /* zero-width until a challenge shows; cancels the .formfoot gap */
.formfoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.formstatus { flex: 1 1 22ch; min-width: 0; font-size: 13px; line-height: 1.6; color: #2b2b2b; }
.formstatus--ok { padding: 9px 12px; background: var(--room); border: 2px solid #2b2b2b; color: var(--ink); }
/* Shown in place of the form once a message is sent. The wall color is light in both themes, so ink stays dark. */
.sentcard { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 44px 40px; background: var(--room-color); border: 2px solid #2b2b2b; color: #2b2b2b; }
.sentcard:focus { outline: none; }
.sentcard-env { position: relative; flex: none; width: 120px; height: 86px; border: 3px solid #2b2b2b; background: #fbfaf7; }
.sentcard-env > div { position: absolute; left: -3px; right: -3px; top: -3px; height: 52px; border: 3px solid #2b2b2b; clip-path: polygon(0 0, 100% 0, 50% 100%); background: var(--room-color); }
.sentcard > div:last-child { flex: 1; min-width: 0; }
.sentcard h2 { font-family: 'Marcellus', serif; font-size: 32px; font-weight: 400; line-height: 1.1; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: #2b2b2b; }
.sentcard p { font-size: 15px; line-height: 1.7; margin: 10px 0 0; max-width: 56ch; text-wrap: pretty; color: #2b2b2b; }
.formstatus--err { padding: 9px 12px; background: var(--room); border: 2px dashed #2b2b2b; color: var(--ink); }
.sendbtn[disabled] { cursor: default; opacity: .55; }
.sendbtn { appearance: none; -webkit-appearance: none; cursor: pointer; padding: 2px; border: 0; background: var(--ink); box-shadow: 2px 2px 0 rgba(43,43,43,.14); clip-path: polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px)); transition: box-shadow .18s; }
.sendbtn:hover { box-shadow: 4px 4px 0 rgba(43,43,43,.26); }
.sendbtn > span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; background: var(--room); clip-path: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }

/* ---- 404: the empty room. Room white walls; the doors carry the only color. ---- */

.tone--empty { --room-color: var(--room); }
.tone--empty .roombar, .tone--empty .footbar--wall, .tone--empty .footbar--wall a { color: var(--ink); border-color: var(--ink); }
.tone--empty .footbar--wall a:focus-visible { outline-color: var(--ink); }
.emptybody { padding: 34px 40px 48px; }
.emptybody > p { font-size: 15px; line-height: 1.7; color: var(--ink); max-width: 56ch; margin: 0; text-wrap: pretty; }
.doors { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 20px; }
.doors a { display: flex; flex-direction: column; gap: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.doors a:hover { text-decoration: underline; text-underline-offset: 4px; }
.doors a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.door { display: block; height: 150px; background: var(--room-color); border: 2px solid var(--ink); }
@media (max-width: 760px) {
  .emptybody { padding: 20px 16px 28px; }
  .doors { grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
  .doors a { flex-direction: row; align-items: center; gap: 14px; min-height: 44px; }
  .door { flex: none; width: 44px; height: 44px; }
}

/* ---- Lectures: the lecture room ---- */

.dsec-head--mt { margin-top: 44px; }
.talklist { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; }
.talk-none { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 22px 24px; background: #fbfaf7; border: 2px solid #2b2b2b; }
.talk-none p { margin: 0; font-size: 15px; line-height: 1.7; color: #2b2b2b; }
.talk { display: flex; align-items: stretch; min-height: 216px; background: var(--room-color); border: 2px solid #2b2b2b; }
.talk-date { flex: 0 1 118px; min-width: 88px; display: flex; flex-direction: column; overflow: hidden; background: #fbfaf7; border-right: 2px solid #2b2b2b; }
.talk-photo { flex: 1 1 0; width: 100%; height: 0; min-height: 90px; max-width: none; object-fit: cover; object-position: var(--x, 50%) var(--y, 50%); }
.datecard { order: -1; flex: none; padding: 14px 6px 12px; text-align: center; background: #fbfaf7; border-bottom: 2px solid #2b2b2b; }
.datecard .dow { display: block; margin: 0 0 5px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #2b2b2b; }
.datecard .day { display: block; margin: 3px 0 0; font-family: 'Marcellus', serif; font-size: 40px; font-weight: 400; line-height: 1; color: #2b2b2b; }
.datecard .mon { display: block; margin: 5px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #2b2b2b; }
.talk-time, .talk-dot { font-size: 15px; font-weight: 600; }
.talk-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: 12px 22px; padding: 22px 24px; }
.talk-body h3 { grid-column: 1 / -1; margin: 0; font-family: 'Marcellus', serif; font-size: 30px; font-weight: 400; line-height: 1.12; color: #2b2b2b; }
.talk-body .blurb { margin: 0; max-width: 54ch; font-size: 15px; line-height: 1.7; color: #2b2b2b; text-wrap: pretty; }
.chips { grid-column: 2; grid-row: 2; align-self: start; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 3px 9px; background: #fbfaf7; border: 1px solid #2b2b2b; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #2b2b2b; }
.talk-foot { grid-column: 1 / -1; align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 14px; border-top: 1px solid #2b2b2b; font-size: 13px; color: #2b2b2b; }
.talk--past { background: #e7e5df; transition: background-color .18s; }
.talk--past:hover { background: #fbfaf7; }
.talk--past .talk-body { grid-template-rows: auto auto 1fr; }
.talk--past .talk-foot { grid-column: 2; grid-row: 2; padding-top: 0; border-top: 0; }
.talk-where { flex: 1 1 24ch; min-width: 0; max-width: 44ch; line-height: 1.5; text-wrap: pretty; }
.plaque--btn { margin-left: auto; transition: box-shadow .18s; }
.plaque--btn:hover { box-shadow: 4px 4px 0 rgba(43,43,43,.26); }
.plaque--btn > span, .plaque--center > span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 16px; font-size: 13px; text-transform: uppercase; }
.plaque--center { flex: none; align-self: center; }
.plaque--wall > span { background: var(--room-color); color: #2b2b2b; }
.talk .plaque { background: #2b2b2b; }
.talk .plaque > span { background: #fbfaf7; color: #2b2b2b; }
.talk .plaque:focus-visible { outline-color: #2b2b2b; }

.reclist { display: flex; flex-direction: column; }
.rec { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin: 0 -18px; padding: 24px 18px; background: linear-gradient(var(--ink), var(--ink)) 18px 100% / calc(100% - 36px) 1px no-repeat; transition: background-color .18s; }
.rec:hover { background-color: var(--ground); }
.rec:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.still { position: relative; flex: 1 1 268px; min-width: 0; max-width: 268px; height: 151px; display: flex; align-items: center; justify-content: center; background: var(--ink); background-size: cover; background-position: center; border: 1px solid var(--ink); overflow: hidden; }
.still-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still::after { content: ""; position: absolute; inset: 0; background: rgba(43,43,43,.35); }
.still .play { position: relative; z-index: 1; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid var(--room); }
.rec-text { flex: 1; min-width: 0; }
.rec-text h3 { margin: 0; font-family: 'Marcellus', serif; font-size: 26px; font-weight: 400; line-height: 1.15; color: var(--ink); }
.rec-text p { margin: 10px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }

/* ---- Press: cuttings taped up ---- */
.presswall { padding: 34px 48px 56px; background: var(--room); }
.presswall .dsec-head { margin-bottom: 34px; }
.cuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: 52px 44px; align-items: start; }
.cut { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 420px; padding: 34px 30px 30px; background: var(--room); border: 2px solid var(--ink); border-bottom: 2px dashed var(--ink); box-shadow: 12px 14px 0 rgba(43,43,43,.16); }
.cut--a { transform: rotate(-.45deg); }
.cut--b { margin-top: 26px; transform: rotate(.6deg); }
.cut--c { transform: rotate(-.7deg); }
.tape { position: absolute; top: -11px; width: 74px; height: 22px; background: rgba(251,250,247,.72); border: 1px solid var(--ink); }
.tape--l { left: 36px; transform: rotate(-7deg); }
.tape--r { right: 40px; transform: rotate(6deg); }
.tape--c { left: 50%; transform: translateX(-50%) rotate(5deg); }
.tape--l2 { left: 40px; transform: rotate(7deg); }
.tape--r2 { right: 46px; transform: rotate(-5deg); }
.cut-mast { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-family: 'Marcellus', serif; font-size: 26px; font-weight: 400; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.cut-line { margin: 0; font-family: 'Marcellus', serif; font-size: 23px; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.cut-cred { margin: 0; font-size: 13px; line-height: 1.6; color: var(--caption); }
.cut .plaque { flex: none; align-self: flex-start; margin-top: auto; transition: box-shadow .18s; }
.cut .plaque:hover { box-shadow: 4px 4px 0 rgba(43,43,43,.22); }
.cut .plaque > span { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

.pressfile { padding: 46px 48px 56px; background: var(--room-color); border-top: 2px solid var(--ink); }
.pressfile .lede { margin: 14px 0 0; max-width: none; font-size: 15px; line-height: 1.7; color: #2b2b2b; text-wrap: pretty; }
.pressfile .section-heading { color: #2b2b2b; }
.pressfile .dsec-head { border-bottom-color: #2b2b2b; }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 18px; margin-top: 24px; }
.box { display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 20px; background: var(--room); border: 2px solid var(--ink); transition: box-shadow .18s; }
.box:hover { box-shadow: 6px 6px 0 var(--shadow-hard); }
.box-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.box-head span { font-family: 'Marcellus', serif; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.box-quote { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.box-line { margin: 0; font-family: 'Marcellus', serif; font-size: 20px; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.box-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.box-foot--end { justify-content: flex-end; }
.box-foot .go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.box-foot .who { display: flex; flex-direction: column; gap: 4px; }

/* Stacked-cuttings emblem (Press) */

/* ---- Exhibition detail, desktop ---- */

.showhead { display: flex; align-items: center; gap: 18px; padding: 26px 40px; background: var(--room-color, #FFDDA6); border-top: 2px solid #2b2b2b; }
.showhead-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.showhead-title { flex: 1 1 420px; min-width: 0; }
.showhead-top { flex: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.showhead h1 { font-family: 'Marcellus', serif; font-size: 32px; font-weight: 400; text-transform: uppercase; letter-spacing: .05em; line-height: 1.1; margin: 0; color: #2b2b2b; }

.showhero { padding: 0 40px 34px; background: var(--room-color, #FFDDA6); border-bottom: 2px solid #2b2b2b; }
.showhero .wall-rule { height: 3px; margin: 0 -40px; background: #2b2b2b; }

.showcols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding: 38px 40px 34px; }
.showcols .side { flex: 1 1 280px; min-width: 0; max-width: 300px; }
.showcols .main { flex: 1 1 280px; min-width: 0; }
.dsec-label--lg { font-size: 13px; }
.prose--lg { font-size: 15px; max-width: 60ch; }
.prose--lg p { margin: 0 0 16px; }
.linkcard:hover { background: var(--room-color, #FFDDA6); }
.showcred { margin-top: 14px; }
.notesrc { margin: -4px 0 0; max-width: 60ch; font-size: 13px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }

.hang--ink::before, .hang--ink::after { background: var(--ink); }
.showcols .main h2 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }
.showsec { padding: 0 40px 12px; }
.showsec h2 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin: 0; }
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 22px; align-items: start; }
.gal--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zoom { display: block; width: 100%; padding: 0; background: var(--room); border: 2px solid var(--ink); cursor: zoom-in; }
.zoom img { display: block; width: 100%; height: auto; }
.zoom:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.galcap { margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink); }

.showblocks { margin: 0 40px; padding: 34px 0 40px; }
.pressboxes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
.box--room { background: var(--room-color, #FFDDA6); border-color: #2b2b2b; }
.box--room, .box--room .box-head span, .box--room .box-quote, .box--room .cut-cred, .box--room .box-foot { color: #2b2b2b; }
.box--room .todo { color: #2b2b2b; border-color: #2b2b2b; }
.box--room .box-head { border-bottom-color: #2b2b2b; }
.btn + .pressboxes { margin-top: 16px; }
.showblocks h2 { font-family: 'Marcellus', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin: 0 0 6px; }

/* ---- Lightbox. Fixed dark ground, so its ink is the literal room white. ---- */
.lightbox { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; background: rgba(20,20,18,.93); }
.lbrow { display: flex; align-items: center; gap: 22px; }
.lightbox img { display: block; max-width: min(1100px,84vw); max-height: 70vh; object-fit: contain; border: 3px solid #fbfaf7; }
.lbnav { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; background: none; border: 2px solid #fbfaf7; color: #fbfaf7; font-family: 'Inconsolata', monospace; font-size: 20px; cursor: pointer; }
.lbfoot { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; flex-wrap: wrap; width: 100%; max-width: min(1100px,84vw); }
.lbcap { margin: 0; font-size: 13px; line-height: 1.6; color: #fbfaf7; }
.lbmeta { display: flex; align-items: center; gap: 20px; }
.lbpos { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fbfaf7; }
.lbclose { display: inline-flex; align-items: center; white-space: nowrap; flex: none; min-height: 44px; padding: 8px 14px; background: none; border: 1px solid #fbfaf7; color: #fbfaf7; font-family: 'Inconsolata', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.lightbox button:focus-visible { outline: 3px solid #fbfaf7; outline-offset: 3px; }
@media (max-width: 620px) {
  .lbnav { width: 44px; height: 44px; }
  .lightbox { gap: 14px; padding: 20px; }
}

.showsub { margin: 12px 0 0; font-size: 13px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: #2b2b2b; }

.frame--narrow { max-width: 340px; margin: 0 auto; }
.galslot { height: 240px; }
.galslot.galslot--sq { height: auto; aspect-ratio: 1 / 1; }
.galslot.galslot--land { height: auto; aspect-ratio: 4 / 3; }
.galslot.galslot--port { height: auto; aspect-ratio: 2 / 3; }
.galcap--todo { color: var(--ink); }

/* ================================================================
   Narrow widths (≤760px). The phone view is this same page reflowed:
   one file per room and one copy of the words.
   ================================================================ */
@media (max-width: 760px) {
  .emblem { width: 46px; height: 49px; }

  /* House chrome */
  .page { padding: 18px 12px 36px; }
  .roof { height: 42px; }
  .roof .gable { width: 150px; height: 33px; }
  .roof .stack { left: calc(50% - 50px); bottom: 10px; width: 11px; height: 19px; }
  .roof .cap { left: calc(50% - 50px); bottom: 29px; width: 15px; height: 3px; }
  .topbar { gap: 10px; padding: 2px 18px; min-height: 46px; font-size: 13px; letter-spacing: .12em; }
  .topbar .here { display: none; }
  .topbar .crumbs--show > :not(.crumb-back) { display: none; }
  .topbar .crumbs--show .crumb-back { display: inline-flex; }
  .roombar { gap: 12px; padding: 16px 18px 18px; }
  .roombar h1 { font-size: 30px; }
  .roomsub { font-size: 13px; letter-spacing: .12em; margin-top: 8px; }
  .footbar { flex-direction: column; align-items: flex-start; gap: 2px; padding: 18px 20px 30px; min-height: 0; }
  .footbar nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .footbar a, .footbar nav span { padding: 0; }
  .section-heading { font-size: 22px; }

  /* The dressmaker's bust, at the smaller scale */

  /* The parlor elevation */
  .drawing { padding: 14px 6px; }
  .drawing-mat { padding: 7px; }
  .drawing-sheet { padding: 0; border: 0; }
  .hatch--v { width: 14px; }
  .hatch--h { height: 14px; }
  .hatch--sill { height: 11px; }
  .parlor { flex-wrap: nowrap; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; padding: 20px 14px 18px; }
  .portrait-mat { flex: none; margin-top: 14px; }
  .portrait-mat img { width: 172px; height: 215px; }
  .bio-card { flex: none; width: 100%; max-width: none; margin-top: 0; padding: 14px 15px; }
  .bio-card h2 { font-size: 19px; }
  .bio-card p { margin-top: 8px; }
  .about-cols { display: block; padding-top: 0; }
  .about-text { max-width: none; gap: 14px; padding-top: 18px; font-size: 15px; }
  .notes { gap: 8px; padding-top: 12px; }
  .titleblock { max-width: none; margin-top: 18px; }
  .titleblock-head { padding: 10px 13px; font-size: 13px; }
  .tb-cell { padding: 10px 13px; }
  .tb-key { font-size: 13px; }
  .btnrow { flex-direction: column; gap: 10px; padding: 0 14px 28px; }
  .btn-out { justify-content: space-between; white-space: normal; }
}

/* ---- Narrow widths, room by room. Same markup, smaller room. ---- */
@media (max-width: 760px) {

  .shelves { padding: 18px 14px 24px; }
  .case { margin: 24px 0 0; padding: 0 14px; }
  .case::before, .case::after { width: 3px; }
  .board { height: 3px; margin: 20px -14px 0; box-shadow: 2px 2px 0 var(--shadow-soft); }
  .board--top { margin: 0 -14px; }
  .board--base { height: 4px; box-shadow: none; }
  .feet { margin: 0 -8px; }
  .feet span { width: 16px; height: 6px; }
  .plaque-row { padding: 12px 12px 0; }
  .plaque > span { padding: 4px 10px; font-size: 14px; letter-spacing: .12em; }
  .book h2 { font-size: 16px; line-height: 1.25; margin: 0 0 10px; }
  .cover { box-shadow: 3px 2px 0 var(--shadow-soft); }
  .book:hover { transform: none; }
  .book:hover .cover { box-shadow: 3px 2px 0 var(--shadow-soft); }
  .ext { font-size: 13px; margin-top: 8px; }
  .wall { padding: 0 18px 24px; }
  .wall-rule { height: 3px; margin: 0 -18px; }
  .wall > .wall-rule { display: none; }
  div.exh { display: none; }
  .frames { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0; }
  .exh { margin: 0 -18px; padding: var(--drop, 40px) 18px 26px; border-top: 3px solid #2b2b2b; }
  .exh .frame img { height: var(--h, 340px); }
  .exh h2 { font-size: 22px; margin-top: 15px; }
  .exh .arrow { font-size: 14px; }
  .frame:hover { box-shadow: 3px 3px 0 rgba(43,43,43,.18); }
  .badge { left: 13px; top: 13px; padding: 5px 9px; font-size: 13px; }
  .year { margin-top: 10px; }
  .year > span { padding: 4px 9px; font-size: 14px; }
  .year--now > span { padding: 5px 11px; font-size: 16px; }
  .roombar--stack h1 { font-size: 24px; line-height: 1.1; text-wrap: pretty; }
  .subtitle { font-size: 13px; line-height: 1.6; letter-spacing: .12em; margin-top: 10px; }
  .case--book { margin: 22px 20px 0; padding: 0 12px; }
  .frame.frame--crop img { height: 360px; }
  .wallpaper--wide { display: none; }
  .callout { margin-top: 22px; padding: 16px 18px; max-width: none; }
  .contactbody { padding: 20px 16px 28px; }
  .sentcard { padding: 28px 20px; gap: 20px; }
  .dsec-head { display: block; padding-bottom: 8px; }
  .form { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; padding: 18px 16px 20px; }
  .field { gap: 8px; }
  .field > span { font-size: 13px; }
  .field input, .field select, .field textarea { padding: 0 12px; }
  .field textarea { min-height: 150px; padding: 12px; }
  .formfoot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .formstatus { flex: none; }
  .sendbtn { align-self: flex-start; box-shadow: none; }
  .sendbtn > span { padding: 0 20px; }
  .talklist { gap: 16px; padding-top: 16px; }
  .talk-none { margin-top: 16px; padding: 16px; }
  .talk { flex-direction: column; min-height: 0; }
  .talk-date { flex: none; flex-direction: row; min-width: 0; height: 104px; border-right: 0; border-bottom: 2px solid #2b2b2b; }
  .datecard { width: 92px; display: flex; flex-direction: column; justify-content: center; padding: 8px 6px; border-bottom: 0; border-right: 2px solid #2b2b2b; }
  .talk-photo { width: 0; height: auto; min-height: 0; }
  .datecard .day { font-size: 30px; }
  .datecard .mon { font-size: 13px; }
  .talk-body { gap: 10px; padding: 16px; }
  .talk-body h3 { font-size: 22px; }
  .talk-body .blurb { max-width: none; font-size: 15px; }
  .talk-foot { gap: 10px 16px; }
  .plaque--btn { margin-left: 0; }
  .talk-body, .talk--past .talk-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .chips, .talk--past .talk-foot { grid-column: 1; grid-row: auto; }
  .rec { gap: 14px; margin: 0 -16px; padding: 18px 16px; background-position: 16px 100%; background-size: calc(100% - 32px) 1px; }
  .still { flex: none; max-width: none; width: 100%; height: 176px; }
  .rec-text h3 { font-size: 20px; }
  .rec-text p { font-size: 15px; margin-top: 8px; }
  .presswall { padding: 20px 16px 28px; }
  .presswall .dsec-head { margin-bottom: 26px; }
  .cuts { display: flex; flex-direction: column; gap: 26px; }
  .cut { min-height: 0; padding: 24px 18px 20px; box-shadow: 7px 8px 0 rgba(43,43,43,.16); }
  .cut--b { margin-top: 0; }
  .cut-mast { font-size: 20px; }
  .cut-line { font-size: 19px; }
  .tape { width: 62px; height: 19px; }
  .pressfile { padding: 24px 16px 28px; }
  .pressfile .lede { max-width: none; font-size: 15px; }
  .boxes { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
  .box { min-height: 0; padding: 16px; }
  .box:hover { box-shadow: none; }
  .box-head span { font-size: 16px; }
  .box-line { font-size: 17px; }

  /* Home and the exhibitions wall */
  .frames { gap: 20px; padding-bottom: 26px; }

  /* The bookshelf */
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 12px 0; }

  /* Book detail */
  .roombar--stack { padding: 16px 18px 20px; }
  .bookrow { gap: 24px; padding: 20px 10px 26px; }
  .bookcol--cover { max-width: none; }
  .bookbody { margin: 0 20px; padding: 30px 0 32px; }
  .bleed { margin: 0 -12px; }
  .bookbody h2 { font-size: 19px; }
  .pressboxes.pressboxes--stack { gap: 16px; max-width: none; }
  .prose--narrow { max-width: none; }
  .btn { justify-content: center; }

  /* Exhibition detail: both templates */
  .showhead { gap: 12px; padding: 16px 18px 18px; }
  .showhead-body { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
  .showhead-title { flex: none; }
  .showhead h1 { font-size: 24px; line-height: 1.1; }
  .showsub { margin-top: 10px; font-size: 13px; line-height: 1.6; letter-spacing: .12em; }
  .showhero { padding: 0 18px 24px; }
  .showhero .wall-rule { margin: 0 -18px; }
  .showhero .hero-cap { margin-top: 11px; }
  .prose--lg { font-size: 15px; max-width: none; }
  .prose--lg p { margin-bottom: 14px; }
  .showcols { flex-direction: column; gap: 24px; padding: 22px 18px 24px; }
  .showcols .side { flex: none; max-width: none; width: 100%; }
  .showcols .main h2 { font-size: 19px; }
  .showsec { padding: 0 18px 12px; }
  .showsec h2 { font-size: 19px; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .galslot { height: 160px; }
  .showblocks { margin: 0 18px; padding: 24px 0 28px; }
  .showblocks h2 { font-size: 19px; }
  .pressboxes { grid-template-columns: minmax(0,1fr); gap: 16px; }

  /* Home: the cabinet house stacks to one room per storey. The wallpaper
     panels are decorative, so they step out rather than push the rooms down. */
  .interior { padding: 18px 14px 24px; }
  .attic { height: 96px; }
  .attic .gable { height: 80px; }
  .attic .stack { top: 30px; width: 22px; height: 42px; }
  .attic .cap { top: 24px; width: 30px; height: 6px; }
  .rooms { grid-template-columns: 1fr; grid-template-rows: auto; }
  .rooms > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .rooms .wallpanel { display: none; }
  .room { gap: 14px; padding: 16px; }
  .room img { height: 130px; }
  .room--exhibitions img { flex: 1 1 100%; width: 100%; height: 180px; }
  .room--books img { flex: none; width: 50%; height: auto; }
  .room--about img { flex: none; width: 50%; height: auto; aspect-ratio: 3 / 4; }
  .room h2 { font-size: 22px; }
  .room p { font-size: 13px; }
  .utils { grid-template-columns: 1fr; }
  .utils a { min-height: 52px; padding: 12px 16px; font-size: 13px; }
  .plinth { margin: 0 -14px; }
  .plinth-lip { margin: 2px -8px 0; }
  .legs { height: 44px; margin: 0 4px; }
  .legs .l1, .legs .l4 { width: 13px; height: 36px; }
  .legs .l2, .legs .l3 { width: 10px; height: 26px; }
  .legs .l2 { left: 64px; }
  .legs .l3 { right: 64px; }
}

/* Phones: lowercase small type at 13px (uppercase labels are 13px at both sizes) */
@media (max-width: 760px) {
  .hero-cap, .galcap, .todo, .fn, .notes, .formstatus, .talk-foot { font-size: 13px; }
}

/* Smallest phones: give long exhibition titles the full header width */
@media (max-width: 380px) {
  .shelves { padding: 18px 8px 24px; }
  .case { padding: 0 10px; }
  .shelf { gap: 12px; padding: 20px 6px 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .book:hover, .exh:hover, .frame:hover, .cut:hover { transform: none; }
}