/* Luxury Serif, adapted to the image-wall brief. Original artwork stays ungraded. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('fonts/bodoni-moda-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Fallback';
  src: local('Georgia');
  size-adjust: 96%;
}
:root {
  color-scheme: light;
  --bg: #f4f1ea;
  --ink: #1a1712;
  --muted: #625a50;
  --line: #d8d1c4;
  --accent: #1a1712;
  --gap: 28px;
  --ease-lux: cubic-bezier(.22,1,.36,1);
}
body { font-size: 16px; line-height: 1.65; }
.masthead, main { width: calc(100% - 96px); max-width: 1280px; margin-inline: auto; }
.masthead { height: 88px; }
.wordmark, .edition, footer, footer > span:first-child {
  font: 400 12px/1.5 Arial,Helvetica,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.wordmark, .edition { position: relative; text-decoration: none; }
.wordmark { min-height: 48px; display: inline-flex; align-items: center; }
.edition { min-height: 48px; gap: 20px; color: var(--ink); }
.edition span { font-size: 17px; color: var(--ink); }
.intro { padding: 54px 0 40px; align-items: center; }
.eyebrow { font: 500 11px/1.6 Arial,Helvetica,sans-serif; letter-spacing: .22em; margin-bottom: 20px; color: var(--muted); }
h1 {
  font: 400 clamp(48px, 5.5vw, 80px)/1.08 'Bodoni Moda','Bodoni Fallback',serif;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}
.intro-note { font-size: 13px; line-height: 1.65; color: var(--muted); letter-spacing: 0; }
.filter-bar { border-bottom: 1px solid var(--line); padding: 0 0 17px; margin-bottom: 36px; align-items: center; }
.filters { gap: 4px 22px; }
.filters button {
  position: relative;
  min-height: 48px;
  min-width: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  transition: color 500ms ease;
}
.filters button[aria-pressed=true], .filters button:hover { background: transparent; color: var(--ink); border: 0; }
.filters button::after {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 4px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(.65,0,.35,1);
}
.filters button[aria-pressed=true]::after,
.filters button:hover::after,
.filters button:focus-visible::after { transform: scaleX(1); }
.all-count { color: var(--muted); font-size: 10px; letter-spacing: 0; opacity: 1; margin-left: 7px; }
#count { color: var(--muted); font-size: 12px; padding: 0; }
.wall { columns: 3; }
.wall.masonry { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tile img { border-radius: 0; background: #ede8de; }
.tile-mark { display: none; }
.tile:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.wall.is-filtering { animation: luxury-reveal 1200ms var(--ease-lux); }
@keyframes luxury-reveal { from { opacity: .65; } to { opacity: 1; } }
footer { margin-top: 64px; padding: 32px 0 40px; font-size: 11px; gap: 24px; color: var(--muted); }
footer > span:first-child { font-size: 11px; }
footer > span:nth-child(2) { text-transform: none; letter-spacing: 0; font-size: 12px; }
footer a, .edition { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: #b4aa9a; }
footer a:hover, footer a:focus-visible, .edition:hover, .edition:focus-visible { text-decoration-color: currentColor; }
footer a { min-height: 48px; position: relative; }
.wordmark::after, .edition::after, footer a::after {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 10px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(.65,0,.35,1);
}
footer a::after { top: 22px; bottom: auto; }
.wordmark:hover::after, .wordmark:focus-visible::after,
.edition:hover::after, .edition:focus-visible::after,
footer a:hover::after, footer a:focus-visible::after { transform: scaleX(1); }
dialog { background: var(--bg); color: var(--ink); padding: 24px 32px; }
dialog::backdrop { background: #ede8de; }
.viewer-brand { font: 400 12px/1.5 Arial,Helvetica,sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.icon-button { border-radius: 0; border-color: var(--line); width: 48px; height: 48px; transition: background 500ms ease; }
.icon-button:hover { background: #ede8de; }
.viewer-bottom { font-size: 13px; }
#description { max-width: 62ch; }
#image-vibes, #position, .keyboard-hint { color: var(--muted); letter-spacing: 0; }
@media (max-width: 1199px) {
  .filters { gap: 4px 18px; }
  .filter-bar { display: block; }
  #count { padding-top: 12px; }
}
@media (max-width: 1023px) {
  :root { --gap: 24px; }
  .wall { columns: 2; }
  .wall.masonry { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .intro-note { display: none; }
}
@media (max-width: 767px) {
  .masthead, main { width: calc(100% - 48px); }
  .masthead { height: 76px; padding: 0; }
  .intro { padding: 38px 0 32px; }
  .eyebrow { font-size: 11px; max-width: 31ch; margin-bottom: 16px; }
  h1 { font-size: 48px; }
  h1 span { display: block; }
  .edition { font-size: 11px; letter-spacing: .12em; gap: 8px; }
  .wordmark { font-size: 11px; }
  .filter-bar { padding: 0 0 18px; margin-bottom: 28px; }
  .filters { gap: 4px 18px; }
  .filters button { font-size: 11px; padding: 0; min-height: 48px; }
  footer { flex-wrap: wrap; gap: 16px; margin-top: 40px; padding: 26px 0; }
  footer > span:nth-child(2) { display: none; }
  .viewer-brand { font-size: 11px; }
}
@media (max-width: 599px) {
  :root { --gap: 24px; }
  .wall { columns: 1; }
  .wall.masonry { grid-template-columns: minmax(0,1fr); }
  .edition { text-decoration: none; font-size: 0; }
  .edition span { font-size: 18px; }
  dialog { padding: 16px; }
  .viewer-bottom { margin-inline: 0; }
  .viewer-top { padding-inline: 0; }
  .icon-button { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Dusty paper, quiet olive wayfinding, and a dark room for individual images. */
:root { --bg:#eee9df; --ink:#25251f; --muted:#605e51; --line:#cec7b8; --accent:#626647; }
.catalog-tools { padding:0 0 26px; }
.search-row { display:flex; align-items:end; gap:32px; margin-bottom:22px; }
.search-row label { flex:1; max-width:640px; }
.catalog-tools label { display:block; font-size:11px; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.catalog-tools input,.catalog-tools select { display:block; width:100%; min-width:0; min-height:48px; margin-top:8px; padding:10px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; color:var(--ink); font:16px/1.5 Arial,Helvetica,sans-serif; }
.catalog-tools input::placeholder { color:var(--muted); opacity:1; }
.catalog-tools select { padding-right:20px; cursor:pointer; }
.catalog-tools input:focus-visible,.catalog-tools select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.catalog-tools select option { background:var(--bg); }
.catalog-facets { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
#reset { min-height:48px; border:0; padding:0; background:transparent; text-decoration:underline; text-underline-offset:5px; color:var(--muted); font-size:13px; }
.filter-bar { margin-bottom:0; }
.collection-note { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0 30px; }
#collection-description { font-size:13px; color:var(--muted); margin:0; }
.filters button[aria-pressed=true] { color:var(--accent); }
.tile-caption { display:flex; align-items:baseline; gap:14px; padding:13px 0 4px; color:var(--muted); font:12px/1.6 Arial,Helvetica,sans-serif; }
.image-number { flex-shrink:0; font-size:10px; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:var(--accent); }
.tile:hover .tile-caption { color:var(--ink); }
#empty { padding:48px 0; color:var(--muted); }
dialog { --bg:#1c1e19; --ink:#eee9df; --muted:#c0bdaf; --line:#525548; --accent:#d1d3b5; color-scheme:dark; }
dialog::backdrop { background:#1c1e19; }
dialog .icon-button:hover { background:#35382e; }
@media(max-width:767px) { .catalog-facets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .search-row { gap:16px; } .search-row input { font-size:16px; } .collection-note { display:block; } .collection-note .filters { margin-top:8px; } }
@media(max-width:374px) { .search-row { display:block; } #reset { margin-top:4px; } }
/* Compact gallery controls: soft system UI against faded hallway paper. */
.gallery-toolbar { position:sticky; top:0; z-index:4; padding:12px 0 8px; background:rgba(238,233,223,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.toolbar-search { display:flex; align-items:center; gap:10px; padding:0 6px 0 14px; background:#e4dfd4; border-radius:14px; }
.gallery-toolbar svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; }
.toolbar-search input { width:100%; min-width:0; border:0; background:transparent; color:var(--ink); font:16px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; height:48px; outline-offset:0; }
.toolbar-search input::placeholder { color:var(--muted); opacity:1; }
#open-filters { position:relative; flex-shrink:0; width:48px; height:48px; display:grid; place-items:center; border:0; border-left:1px solid #ccc6b8; background:transparent; }
#open-filters circle { fill:#e4dfd4; }
#filter-badge { position:absolute; right:0; top:0; font:11px/18px Arial,sans-serif; min-width:18px; border-radius:9px; background:var(--accent); color:var(--bg); }
.toolbar-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.toolbar-bottom #count { padding:0; font-size:12px; }
.view-switch { display:flex; background:#e4dfd4; padding:3px; border-radius:12px; }
.view-switch button { width:44px; height:38px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:var(--muted); }
.view-switch button[aria-pressed=true] { background:var(--bg); color:var(--ink); box-shadow:0 1px 3px #25251f14; }
.collection-summary { margin:10px 0 24px!important; font-size:12px!important; }
.wall.large-view { display:block; columns:1; max-width:760px; margin-inline:auto; }
.wall.large-view .tile { padding-bottom:28px; }
#filter-sheet { --bg:#eee9df; --ink:#25251f; --muted:#605e51; --line:#cec7b8; --accent:#626647; color-scheme:light; width:min(560px,100%); height:auto; max-height:85dvh; margin:auto; padding:0; border-radius:24px; background:var(--bg); color:var(--ink); overflow:hidden; }
#filter-sheet::backdrop { background:rgba(20,22,17,.5); backdrop-filter:blur(6px); }
.sheet-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px 12px; flex-shrink:0; }
.sheet-header h2 { margin:0; font:500 22px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.5px; }
#close-filters { width:44px; height:44px; border:0; border-radius:50%; background:#e4dfd4; font:26px Arial,sans-serif; }
.sheet-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; padding:0 24px 20px; }
.sheet-label { font:12px Arial,sans-serif; color:var(--muted); margin:10px 0; }
#filter-sheet .filter-bar { display:block; padding:0; margin:0; border:0; }
#filter-sheet .filters { gap:8px; }
#filter-sheet .filters button { font:14px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-transform:none; letter-spacing:0; min-height:44px; padding:10px 14px; background:#e4dfd4; border-radius:12px; }
#filter-sheet .filters button::after { display:none; }
#filter-sheet .filters button[aria-pressed=true] { background:#626647; color:#eee9df; }
#filter-sheet .all-count { color:inherit; }
.corridor-choice { margin-top:8px; }
#filter-sheet .catalog-tools { padding:24px 0 0; }
#filter-sheet .catalog-facets { grid-template-columns:1fr; gap:0; }
#filter-sheet .catalog-facets label { display:flex; align-items:center; justify-content:space-between; gap:16px; font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; text-transform:none; letter-spacing:0; border-bottom:1px solid var(--line); color:var(--ink); }
#filter-sheet select { width:65%; text-align:right; margin:0; border:0; font-size:16px; min-height:54px; }
.sheet-footer { display:flex; gap:24px; justify-content:space-between; align-items:center; padding:16px 24px max(16px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); flex-shrink:0; }
#apply-filters { border:0; border-radius:14px; min-height:48px; padding:12px 24px; background:var(--ink); color:var(--bg); font:500 15px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
#filter-sheet #reset { font-size:15px; min-width:48px; }
body.viewer-open { position:fixed; width:100%; overflow:hidden; }
#lightbox { padding-top:max(16px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)); }
#lightbox .icon-button { border:0; border-radius:50%; background:#36392f; width:48px; height:48px; }
@media(max-width:767px) {
  .masthead,main { width:calc(100% - 32px); margin-inline:auto; }
  .masthead { height:56px; }
  .intro { padding:22px 0 14px; }
  .intro .eyebrow { font-size:9px; margin-bottom:10px; max-width:none; letter-spacing:.15em; }
  .intro h1 { font-size:48px; line-height:1; }
  .intro h1 span { display:block; }
  .gallery-toolbar { padding-top:8px; }
  .collection-summary { margin:6px 0 16px!important; font-size:11px!important; }
  .wall.masonry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:16px 12px; align-items:start; }
  .wall.masonry .tile { grid-row-end:auto!important; padding:0; margin:0; min-width:0; }
  .wall:not(.large-view) .tile-caption { display:block; padding-top:8px; font-size:11px; line-height:1.4; }
  .wall:not(.large-view) .tile-caption>span:last-child { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; }
  .wall.masonry.large-view { display:block; }
  .wall.masonry.large-view .tile { margin-bottom:24px; }
  #filter-sheet { margin:auto 0 0; width:100%; max-height:88dvh; border-radius:24px 24px 0 0; }
  #lightbox .viewer-stage { padding-bottom:76px; }
  #lightbox .viewer-bottom { font-size:12px; max-height:120px; overflow-y:auto; }
  #lightbox #image-vibes { display:none; }
}
@media(max-height:500px) { #lightbox .viewer-bottom { max-height:48px; overflow:auto; } #lightbox .keyboard-hint { display:none; } #filter-sheet { max-height:96dvh; } }
.view-switch button { height:44px; }
.toolbar-search input:focus-visible { outline:2px solid var(--accent); border-radius:6px; }
@media(max-height:500px) and (max-width:1000px) {
  .masthead { height:48px; }
  .intro { padding:12px 0; }
  .intro .eyebrow { display:none; }
  .intro h1 { font-size:48px; }
  .intro h1 span { display:inline; }
  .collection-summary { margin:4px 0 12px!important; }
}