/* /wall — every frame at once (curator/build_wall.py). The capsule pages' dark
   ground and paper strip (capsule.css), without their gallery machinery: a
   strip of slices that reads as one print, then a square grid. Loaded after
   catalog.css, so these rules win by order and scope. */
body.catalog.wall {
  --bg: #0e0d0c; --text: #d4cfc9; --bright: #f0ece6; --muted: #8f8980;
  --gold: #c8a96e; --border: rgba(255,255,255,0.09); --paper: #f7f7f4; --ink: #181918;
  --focus: #c8a96e;
  background: var(--bg); color: var(--text); font-family: var(--mono, 'Geist Mono', monospace);
}
body.catalog.wall a { color: inherit; text-decoration: none; }
body.catalog.wall :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

body.catalog.wall > header { display: block; padding: 0; margin: 0; border: 0; background: transparent; }
.wall-strip-bar { display: flex; justify-content: space-between; align-items: center;
  background: var(--paper); color: var(--ink); padding: 0 5vw; min-height: 76px; }
.wall-strip-bar .back { min-height: 44px; display: inline-flex; align-items: center;
  font: 11px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.wall-strip-bar .site-name-link { min-height: 44px; display: inline-flex; align-items: center;
  font: 400 26px/1 var(--serif); color: var(--ink); }

.wall-head { padding: clamp(56px, 9vw, 120px) 5vw 0; display: flex; flex-direction: column; gap: 18px; }
.wall-head .ep-label { font: 11px/1.5 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.wall-head .ep-title { margin: 0; font: 400 clamp(54px, 6vw, 88px)/1 var(--serif); letter-spacing: -.015em; color: var(--bright); }
.wall-rule { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px; border-bottom: 1px solid var(--border); }
body.catalog.wall .ep-line { margin: 0; font: 13px/1.7 var(--mono); color: var(--muted); max-width: 62ch; }
body.catalog.wall .ep-count { font: 11px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text); }

/* The strip: full-bleed, one print. On a phone it is three screens wide and scrolls inside itself. */
.wall-strip { margin: clamp(56px, 8vw, 104px) 0 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
.wall-strip picture, .wall-strip img { display: block; width: 100%; height: auto; }
.wall-legend { display: flex; padding: 0; }
.wall-legend a { flex: 0 0 auto; min-height: 44px; display: flex; align-items: center; padding-left: 6px;
  font: 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.wall-legend a:hover { color: var(--gold); }
.wall-legend a:first-child { border-left: 0; }

/* Every way in */
.ways { padding: clamp(88px, 12vw, 160px) 5vw clamp(72px, 10vw, 140px); display: flex; flex-direction: column; gap: 18px; }
.ways-title { margin: 0; font: 400 clamp(36px, 4vw, 54px)/1.05 var(--serif); color: var(--bright); letter-spacing: -.01em; }
.ways-grid { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px); }
.way { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.way picture, .way img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.way img { transition: opacity .2s ease; }
.way:hover img { opacity: .86; }
.way-cap { font: italic 300 17px/1.3 var(--serif); color: var(--text); min-height: 1.3em; }

body.catalog.wall footer { padding: 26px 5vw; border-top: 1px solid var(--border); }
body.catalog.wall footer span:first-child { font: 11px var(--mono); color: var(--muted); }
body.catalog.wall footer a:hover { color: var(--gold) !important; }

@media (max-width: 700px) {
  .wall-strip-bar { padding: 0 6vw; min-height: 64px; }
  .wall-strip-bar .site-name-link { font-size: 22px; }
  .wall-head { padding: 44px 6vw 0; }
  .wall-head .ep-title { font-size: 52px; }
  .wall-strip picture, .wall-strip img, .wall-legend { width: 300vw; max-width: none; }
  .ways { padding: 72px 6vw 64px; }
  .ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .way-cap { font-size: 15px; }
  .wall-legend a { font-size: 9px; letter-spacing: .04em; padding-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .way img { transition: none; } }