/* The capsule pages — design_handoff_gr_iv_decompose, section E (2026-09-16): the
   homepage's theme carried down one level. A paper strip, then the dark ground:
   gold eyebrow, a Cormorant title, a hairline row with the capsule's line and
   its count; a single-column wall, captions in Cormorant italic; a hairline
   footer row with the way back and the next capsule. Loaded after catalog.css
   on every wall capsule page (curator/build_spine.py ensure_catalog_shell), so
   everything here overrides the paper catalog's rules by order and scope. */
body.catalog.capsule {
  --bg: #0e0d0c; --bg2: #161412; --text: #d4cfc9; --bright: #f0ece6; --muted: #8f8980;
  --gold: #c8a96e; --border: rgba(255,255,255,0.07); --paper: #f7f7f4; --ink: #181918;
  --focus: #c8a96e; --white: #f0ece6; --chapter: #0e0d0c; --counter: #c8a96e;
  background: var(--bg); color: var(--text); font-family: 'Geist Mono', var(--mono, monospace);
}
body.catalog.capsule ::selection { background: #c8a96e; color: #0e0d0c; }
body.catalog.capsule :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
body.catalog.capsule a { color: inherit; text-decoration: none; }

/* The header: strip, then the title block */
/* catalog.css shapes this header through :has(#gallery) and [data-capsule] selectors; match their weight */
body.catalog.capsule:has(#gallery)[data-capsule] > header { padding: 0; border: 0; background: transparent; display: block; gap: 0; margin: 0; }
body.catalog.capsule .header-eyebrow { height: 80px; background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 48px; width: auto; }
body.catalog.capsule .header-eyebrow .back { color: var(--ink); font: 10px/1 'Geist Mono', monospace; letter-spacing: 0.24em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
body.catalog.capsule .header-eyebrow .back:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
body.catalog.capsule .site-name-link { font: 400 20px/1 'Cormorant Garamond', serif; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
body.catalog.capsule .site-name-link:hover { text-decoration: underline; text-underline-offset: 5px; }
body.catalog.capsule:has(#gallery)[data-capsule] .header-meta { max-width: 1600px; margin: 0 auto; padding: 96px 5vw 24px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 14px; width: auto; box-sizing: border-box; }
body.catalog.capsule:has(#gallery)[data-capsule] .header-meta > * { flex: 1 0 100%; width: 100%; }
body.catalog.capsule .ep-label, body.catalog:has(#gallery).capsule .ep-label { font: 10px/1.5 'Geist Mono', monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); border: 0; padding: 0; transform: none; }
body.catalog.capsule .header-meta .ep-title, body.catalog:has(#gallery).capsule .header-meta .ep-title { font: 300 clamp(44px, 6vw, 72px)/1 'Cormorant Garamond', serif; letter-spacing: 0; text-transform: none; color: var(--bright); transform: none; padding: 0; margin: 0; }
body.catalog.capsule .ep-rule { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 22px; margin-top: 8px; }
body.catalog.capsule .ep-desc { margin: 0; font: 12px/1.7 'Geist Mono', monospace; color: var(--muted); letter-spacing: 0; }
body.catalog.capsule .ep-count, body.catalog.capsule .header-meta .ep-count { font: 10px/1.7 'Geist Mono', monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
body.catalog.capsule .ep-count::after { content: "\00a0\00b7\00a0Ricoh GR IV"; }
body.catalog.capsule .ep-line { margin: 0 auto; max-width: 1600px; padding: 0 5vw 12px; box-sizing: border-box; font: italic 300 17px/1.5 'Cormorant Garamond', serif; color: var(--muted); letter-spacing: 0; }

/* The wall: one column, the photograph never dimmed, the caption under it */
body.catalog.capsule .gallery-wrap { background: transparent; }
body.catalog.capsule #gallery .photo-item { cursor: zoom-in; }
body.catalog.capsule #gallery .photo-item::before { display: none; content: none; }
body.catalog.capsule .photo-item picture { background: var(--bg2); }
body.catalog.capsule .photo-item img { filter: grayscale(1) contrast(1.05); }
body.catalog.capsule #gallery .photo-item:hover img { transform: none; }
body.catalog.capsule .photo-cap { font: italic 300 17px/1.5 'Cormorant Garamond', serif; font-style: italic; color: var(--muted); text-align: center; padding-top: 16px; letter-spacing: 0.01em; }
body.catalog.capsule .photo-cap:empty { padding-top: 0; min-height: 0; }
body.catalog.capsule .photo-error { color: var(--bright); }

/* The footer row: the way back, and the next capsule; the site's quiet line under it */
body.catalog.capsule .capsule-nav { max-width: 1600px; margin: 0 auto; padding: 0 5vw 72px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
body.catalog.capsule .capsule-nav::before { content: ""; flex: 1 0 100%; height: 1px; background: var(--border); margin-bottom: 28px; }
body.catalog.capsule .cnav { display: inline-flex; flex-direction: column; gap: 6px; max-width: none; min-height: 44px; border: 0; padding: 8px 0; box-shadow: none; transition: none; }
body.catalog.capsule .cnav:is(:hover, :focus-visible) { border: 0; box-shadow: none; }
body.catalog.capsule .cnav-all { justify-content: center; font: 10px/1.5 'Geist Mono', monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
body.catalog.capsule .cnav-all:hover { color: var(--bright); }
body.catalog.capsule .cnav-next { align-items: flex-end; text-align: right; margin-left: auto; }
body.catalog.capsule .cnav-dir, body.catalog.capsule .cnav .cnav-dir { font: 10px/1.5 'Geist Mono', monospace; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
body.catalog.capsule .cnav-title, body.catalog:has(.ep-title).capsule .cnav-title, body.catalog.capsule .cnav:is([href='/passages'], [href='/structure'], [href='/objects'], [href='/blue-moon-rising']) .cnav-title { font: 300 28px/1 'Cormorant Garamond', serif; letter-spacing: 0; color: var(--bright); }
body.catalog.capsule .cnav-next:hover .cnav-title { text-decoration: underline; text-underline-offset: 6px; }
body.catalog.capsule footer { border-top: 0; padding: 0 5vw 40px; max-width: 1600px; margin: 0 auto; box-sizing: border-box; justify-content: flex-start; }
body.catalog.capsule footer span, body.catalog.capsule footer span:first-child { font: 10px/1.5 'Geist Mono', monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }

/* The lightbox keeps its behavior; its chrome takes the same ink */
body.catalog.capsule #lightbox { background: #0e0d0c; --white: #f0ece6; --text: #f0ece6; --muted: #8f8980; --gold: #c8a96e; --focus: #c8a96e; }
body.catalog.capsule #lightbox .lb-caption { font: italic 300 18px/1.5 'Cormorant Garamond', serif; color: var(--bright); }
body.catalog.capsule #lightbox .lb-counter { font: 10px/1.5 'Geist Mono', monospace; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 700px) {
  body.catalog.capsule .header-eyebrow { height: 64px; padding: 0 20px; }
  body.catalog.capsule:has(#gallery)[data-capsule] .header-meta { padding: 56px 6vw 20px; }
  body.catalog.capsule:has(#gallery)[data-capsule] > header { padding: 0; }
  body.catalog.capsule .capsule-nav { padding: 0 6vw 56px; }
  body.catalog.capsule footer { padding: 0 6vw 32px; }
}