/* ─────────────────────────────────────────────────────────────────
   Ben Mo — Photographs · 无计划蒙特利尔漫游 (montreal-citywalk)
   L3 gallery. Generated from tools/templates/gallery/styles.css.

   Structure:
     §1  Theme tokens — paper / wall / cyan (light) · darkroom / dusk / film (dark);
         body.theme-* picks one (set in gallery.json → build)
     §2  Base canvas, archive container
     §3  Site-anchor overrides for dark themes (.on-dark, added by build)
     §4  Frontispiece (title block, lede, meta)
     §5  Plate divider · interlude
     §6  Photo grid + span variants
     §7  Photo card / wrapper / index chip / caption
     §8  (lightbox lives in ../../level3-lightbox.css)
     §9  End mark
     §10 Reveal-on-scroll
     §11 Responsive (tablet ≤1024, phone ≤640)
     §12 Theme signatures — how each theme mounts the prints

   Customise freely below §3 — typography, spacing, grid variants —
   but keep the token names so the theme switch keeps working.
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600&display=swap');

/* ── §1. Theme tokens ────────────────────────────────────────────── */
:root {
  --bm-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC',
              'STSong', 'Songti', serif;
}

/* Six themes, each a different way of showing a print — not just a
   different ground colour. §1 holds the colour tokens; the mounting /
   type treatment that makes each one recognisable lives in §12.

     paper     light  site paper, prints flush with a soft shadow (default)
     wall      light  white gallery wall, prints in a white mat + hairline frame
     cyan      light  cyanotype: pale ground, everything printed in Prussian blue
     darkroom  dark   pure black, safelight-red frame numbers and easel ticks
     dusk      dark   blue-hour navy, prints outlined like a lit window
     film      dark   warm brown, prints on a black film strip with sprocket holes */

/* paper — the L1/L2 palette, for daylight / warm / everyday street */
body.theme-paper {
  --g-bg:          #f1ede2;
  --g-bg-soft:     #e8e3d5;            /* photo backing */
  --g-ink:         #181816;
  --g-ink-soft:    #5a5854;
  --g-ink-muted:   #8a8780;
  --g-ink-dim:     #b3aea2;
  --g-line:        rgba(0, 0, 0, 0.12);
  --g-line-strong: rgba(0, 0, 0, 0.28);
  --g-shadow-a:    rgba(38, 36, 30, 0.10);
  --g-shadow-b:    rgba(38, 36, 30, 0.16);
  --g-vignette:    rgba(0, 0, 0, 0.06);
  --g-tick:        rgba(24, 24, 22, 0.55);
  --g-chip-bg:     rgba(241, 237, 226, 0.86);
  --g-chip-ink:    #3b362a;
}

/* wall — neutral white gallery wall. For high-key, minimal, "exhibition" series. */
body.theme-wall {
  --g-bg:          #f9f9f7;
  --g-bg-soft:     #ffffff;            /* the mat */
  --g-ink:         #262624;
  --g-ink-soft:    #5c5b56;
  --g-ink-muted:   #8f8e87;
  --g-ink-dim:     #c2c1ba;
  --g-line:        rgba(0, 0, 0, 0.09);
  --g-line-strong: rgba(0, 0, 0, 0.20);
  --g-shadow-a:    rgba(0, 0, 0, 0.035);
  --g-shadow-b:    transparent;
  --g-vignette:    transparent;
  --g-tick:        rgba(38, 38, 36, 0.35);
  --g-chip-bg:     transparent;
  --g-chip-ink:    #8f8e87;
}

/* cyan — cyanotype. Pale blue-grey paper, all type and rules in Prussian blue.
   For overcast, sea, winter, the north. */
body.theme-cyan {
  --g-bg:          #e6ebef;
  --g-bg-soft:     #d6dee6;
  --g-ink:         #1b3a5e;
  --g-ink-soft:    #3a5676;
  --g-ink-muted:   #6a819c;
  --g-ink-dim:     #a0b1c3;
  --g-line:        rgba(27, 58, 94, 0.16);
  --g-line-strong: rgba(27, 58, 94, 0.38);
  --g-shadow-a:    transparent;
  --g-shadow-b:    transparent;
  --g-vignette:    transparent;
  --g-tick:        rgba(27, 58, 94, 0.60);
  --g-chip-bg:     #1b3a5e;
  --g-chip-ink:    #e6ebef;
}

/* darkroom — pure black, prints float under a single safelight.
   For night, high contrast, black-and-white. */
body.theme-darkroom {
  --g-bg:          #000000;
  --g-bg-soft:     #0a0a0a;
  --g-ink:         #dcd8d0;
  --g-ink-soft:    #a9a59c;
  --g-ink-muted:   #77736c;
  --g-ink-dim:     #45423e;
  --g-line:        rgba(220, 216, 208, 0.12);
  --g-line-strong: rgba(220, 216, 208, 0.26);
  --g-shadow-a:    transparent;
  --g-shadow-b:    transparent;
  --g-vignette:    transparent;
  --g-tick:        rgba(222, 74, 50, 0.85);
  --g-chip-bg:     rgba(0, 0, 0, 0.72);
  --g-chip-ink:    #de4a32;            /* safelight */
}

/* dusk — blue hour. A navy that reads as blue, not as black.
   For twilight, night sea, rain, lit windows. */
body.theme-dusk {
  --g-bg:          #22365a;
  --g-bg-soft:     #1a2b4a;
  --g-ink:         #e6ebf3;
  --g-ink-soft:    #b3bfd2;
  --g-ink-muted:   #93a5c0;
  --g-ink-dim:     #5c6f90;
  --g-line:        rgba(230, 235, 243, 0.14);
  --g-line-strong: rgba(230, 235, 243, 0.30);
  --g-shadow-a:    rgba(8, 16, 34, 0.40);
  --g-shadow-b:    rgba(8, 16, 34, 0.30);
  --g-vignette:    rgba(0, 0, 0, 0.18);
  --g-tick:        rgba(230, 235, 243, 0.55);
  --g-chip-bg:     rgba(26, 43, 74, 0.82);
  --g-chip-ink:    #e6ebf3;
}

/* film — warm brown ground, prints on a black film strip, edge print in
   film-box orange. For analogue, archives, nostalgia, dusk light. */
body.theme-film {
  --g-bg:          #2b2019;
  --g-bg-soft:     #0d0b09;            /* film base */
  --g-ink:         #efe3d0;
  --g-ink-soft:    #cbb9a0;
  --g-ink-muted:   #978470;
  --g-ink-dim:     #62544a;
  --g-line:        rgba(239, 227, 208, 0.14);
  --g-line-strong: rgba(239, 227, 208, 0.30);
  --g-shadow-a:    rgba(0, 0, 0, 0.40);
  --g-shadow-b:    rgba(0, 0, 0, 0.28);
  --g-vignette:    rgba(0, 0, 0, 0.16);
  --g-tick:        rgba(239, 227, 208, 0.5);
  --g-chip-bg:     transparent;
  --g-chip-ink:    #e39433;            /* edge print */
}

/* ── §2. Base ────────────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  background: var(--g-bg);
  color: var(--g-ink-soft);
  font-family: var(--bm-mono);
  font-size: 12px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--g-ink); color: var(--g-bg); }

/* Container — echoes the L1/L2 .shell width (1240) with deeper top
   padding to clear the floating breadcrumb anchor. */
.archive {
  max-width: 1240px;
  margin: 0 auto;
  padding: 140px 60px 60px;
}

.hairline { height: 1px; background: var(--g-line); width: 100%; }

/* ── §3. Site-anchor on dark themes ──────────────────────────────── */
.site-anchor.on-dark {
  background: color-mix(in srgb, var(--g-bg-soft) 82%, transparent) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.55) !important;
}
.site-anchor.on-dark .site-anchor__sep { opacity: 0.5 !important; }
.site-anchor.on-dark .site-anchor__arrow,
.site-anchor.on-dark .site-anchor__home { color: var(--g-ink) !important; }
.site-anchor.on-dark .site-anchor__arrow:hover,
.site-anchor.on-dark .site-anchor__home:hover {
  background: var(--g-ink) !important;
  color: var(--g-bg) !important;
}

/* ── §4. Frontispiece ────────────────────────────────────────────── */
.frontispiece {
  padding-bottom: 100px;
  border-bottom: 1px solid var(--g-line);
}
.frontispiece__head { margin-bottom: 72px; }

.frontispiece__kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--bm-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
}
.frontispiece__kicker .dot { color: var(--g-ink-dim); letter-spacing: 0; }

.frontispiece__title {
  font-family: var(--bm-serif);
  font-size: clamp(48px, 7.2vw, 88px);
  line-height: 1.04;
  font-weight: 300;
  color: var(--g-ink);
  letter-spacing: -0.02em;
  margin: 26px 0 0;
  text-wrap: balance;
}

.frontispiece__rule {
  margin: 36px 0 22px;
  width: 56px;
  height: 1px;
  background: var(--g-line-strong);
}

.frontispiece__subtitle {
  font-family: var(--bm-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--g-ink);
}

.frontispiece__byline {
  margin-top: 14px;
  font-family: var(--bm-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--g-ink-muted);
}

.frontispiece__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
  align-items: start;
}
.frontispiece__body { max-width: 600px; }

.frontispiece__lede {
  margin: 0;
  font-family: var(--bm-serif);
  font-size: 19px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--g-ink);
  text-wrap: pretty;
  letter-spacing: 0.005em;
}
.frontispiece__intro {
  margin: 26px 0 0;
  font-family: var(--bm-serif);
  font-size: 15.5px;
  line-height: 1.95;
  font-weight: 400;
  color: var(--g-ink-soft);
  text-wrap: pretty;
}

/* meta key-value list — mirrors the L1 .identity block */
.frontispiece__meta {
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--g-line);
  display: grid;
  row-gap: 12px;
  font-family: var(--bm-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.frontispiece__meta > div {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: baseline;
  gap: 16px;
}
.frontispiece__meta dt {
  color: var(--g-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
}
.frontispiece__meta dd { margin: 0; color: var(--g-ink); text-wrap: pretty; }

/* ── §5. Plate divider · interlude ───────────────────────────────── */
.plate-divider {
  display: grid;
  grid-template-columns: 56px auto auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin: 140px 0 80px;
  padding-top: 14px;
}
.plate-divider__numeral {
  font-family: var(--bm-serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--g-ink);
  letter-spacing: 0.08em;
  text-align: center;
  border-right: 1px solid var(--g-line-strong);
  padding-right: 22px;
  margin-right: -22px;
}
.plate-divider__name {
  font-family: var(--bm-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--g-ink);
  letter-spacing: 0.04em;
}
.plate-divider__english {
  font-family: var(--bm-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
}
.plate-divider__rule { height: 1px; background: var(--g-line); }
.plate-divider__range {
  font-family: var(--bm-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--g-ink-muted);
}

/* prose between plates */
.interlude {
  max-width: 560px;
  margin: 120px auto 0;
  text-align: center;
}
.interlude p {
  margin: 0;
  font-family: var(--bm-serif);
  font-size: 16px;
  line-height: 1.95;
  color: var(--g-ink-soft);
  text-wrap: pretty;
}

/* ── §6. Photo grid + span variants ──────────────────────────────── */
.opening {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 96px 36px;
  margin-top: 80px;
}
.opening__epigraph {
  grid-column: 8 / span 5;
  align-self: end;
  padding-bottom: 56px;
}
.opening__epigraph p {
  margin: 0;
  font-family: var(--bm-serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.85;
  color: var(--g-ink-soft);
  text-wrap: pretty;
  font-weight: 400;
}
.opening__epigraph cite {
  display: block;
  margin-top: 22px;
  font-family: var(--bm-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
}

.plate {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 96px 36px;
}

.photo-card                { margin: 0; position: relative; }
.photo-card--solo-left     { grid-column: 1 / span 5; }
.photo-card--solo-center   { grid-column: 5 / span 4; }
.photo-card--solo-right    { grid-column: 8 / span 5; }
.photo-card--pair-wide-l   { grid-column: 1 / span 6; }
.photo-card--pair-wide-r   { grid-column: 7 / span 6; }
.photo-card--pair-tight-l  { grid-column: 2 / span 5; }
.photo-card--pair-tight-r  { grid-column: 7 / span 5; }
.photo-card--full          { grid-column: 1 / -1; }
.photo-card--wide-l        { grid-column: 1 / span 10; }   /* 2-col gutter right */
.photo-card--wide-r        { grid-column: 3 / span 10; }   /* 2-col gutter left  */
/* three-up row for small/related frames (H or V) */
.photo-card--third-l       { grid-column: 1 / span 4; }
.photo-card--third-c       { grid-column: 5 / span 4; }
.photo-card--third-r       { grid-column: 9 / span 4; }

/* ── §7. Photo wrapper + index chip + caption ────────────────────── */
.photo-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--g-bg-soft);
  box-shadow:
    0 2px 18px var(--g-shadow-a),
    0 22px 80px var(--g-shadow-b);
  cursor: zoom-in;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-wrapper:focus-visible { outline: 2px solid var(--g-ink); outline-offset: 4px; }

/* inner vignette */
.photo-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 70px var(--g-vignette);
  pointer-events: none;
  z-index: 1;
}

/* corner registration ticks — darkroom L-marks, fade in on hover */
.photo-wrapper::before {
  content: '';
  position: absolute;
  inset: 8px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 360ms ease;
  --tick: var(--g-tick);
  background:
    linear-gradient(var(--tick), var(--tick)) top    left  / 12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top    left  / 1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top    right / 12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) top    right / 1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left  / 12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom left  / 1px 12px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 12px 1px no-repeat,
    linear-gradient(var(--tick), var(--tick)) bottom right / 1px 12px no-repeat;
}
.photo-wrapper:hover::before { opacity: 1; }
.photo-wrapper:hover { transform: translateY(-4px); }

/* frame number chip — echoes L2 .work__index */
.photo-index {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  font-family: var(--bm-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  background: var(--g-chip-bg);
  color: var(--g-chip-ink);
  padding: 3px 7px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-wrapper:hover .gallery-img { transform: scale(1.025); }

/* optional caption under a card */
.photo-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--g-line);
}
.photo-caption__text {
  font-family: var(--bm-serif);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--g-ink-soft);
  text-wrap: pretty;
}
.photo-caption__meta {
  font-family: var(--bm-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g-ink-muted);
  white-space: nowrap;
}

/* ── §8. Lightbox — see ../../level3-lightbox.css ────────────────── */

/* ── §9. End mark ────────────────────────────────────────────────── */
.end-mark {
  max-width: 1240px;
  margin: 100px auto 0;
  padding: 28px 60px 40px;
  color: var(--g-ink-muted) !important;
  border-top: 1px solid var(--g-line) !important;
}
.end-mark a {
  color: var(--g-ink-soft) !important;
  border-bottom-color: var(--g-line-strong) !important;
}
.end-mark a:hover {
  color: var(--g-ink) !important;
  border-bottom-color: var(--g-ink) !important;
}

/* ── §10. Reveal on scroll ───────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.js .reveal.is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .photo-wrapper, .gallery-img, .photo-wrapper::before { transition: none; }
  .photo-wrapper:hover { transform: none; }
  .photo-wrapper:hover .gallery-img { transform: none; }
}

/* ── §11. Responsive (site standard 1024 / 640) ──────────────────── */
@media (max-width: 1024px) {
  .archive { padding: 110px 36px 48px; }
  .end-mark { padding: 24px 36px 32px; }

  .frontispiece { padding-bottom: 72px; }
  .frontispiece__head { margin-bottom: 56px; }
  .frontispiece__title { font-size: clamp(40px, 8vw, 64px); }
  .frontispiece__main { grid-template-columns: 1fr; gap: 44px; }
  .frontispiece__meta { border-top: 1px solid var(--g-line); padding-top: 22px; }

  .opening { gap: 48px 24px; margin-top: 64px; }
  .opening .photo-card--solo-left { grid-column: 1 / span 7; }
  .opening__epigraph { grid-column: 1 / -1; padding: 0; align-self: start; }

  .plate { gap: 72px 24px; }
  .plate-divider {
    margin: 100px 0 56px;
    grid-template-columns: 48px auto auto 1fr auto;
    gap: 16px;
  }
  .plate-divider__numeral { font-size: 26px; padding-right: 16px; margin-right: -16px; }
  .plate-divider__name { font-size: 16px; }
  .interlude { margin-top: 88px; }

  .photo-card--solo-left   { grid-column: 1 / span 8; }
  .photo-card--solo-center { grid-column: 3 / span 8; }
  .photo-card--solo-right  { grid-column: 5 / span 8; }
  .photo-card--pair-wide-l  { grid-column: 1 / span 6; }
  .photo-card--pair-wide-r  { grid-column: 7 / span 6; }
  .photo-card--pair-tight-l { grid-column: 1 / span 6; }
  .photo-card--pair-tight-r { grid-column: 7 / span 6; }
  .photo-card--wide-l       { grid-column: 1 / -1; }
  .photo-card--wide-r       { grid-column: 1 / -1; }
  .photo-card--full         { grid-column: 1 / -1; }
  .photo-card--third-l      { grid-column: 1 / span 4; }
  .photo-card--third-c      { grid-column: 5 / span 4; }
  .photo-card--third-r      { grid-column: 9 / span 4; }
}

@media (max-width: 640px) {
  .archive { padding: 96px 22px 36px; }
  .end-mark { padding: 22px 22px 28px; }

  .frontispiece { padding-bottom: 56px; }
  .frontispiece__head { margin-bottom: 40px; }
  .frontispiece__kicker { font-size: 10px; letter-spacing: 0.18em; gap: 6px 10px; flex-wrap: wrap; }
  .frontispiece__title { font-size: clamp(34px, 10vw, 44px); }
  .frontispiece__rule { margin: 26px 0 16px; width: 44px; }
  .frontispiece__subtitle { font-size: 11px; letter-spacing: 0.26em; }
  .frontispiece__lede { font-size: 16.5px; line-height: 1.7; }
  .frontispiece__intro { font-size: 14.5px; line-height: 1.9; }
  .frontispiece__meta > div { grid-template-columns: 64px 1fr; gap: 12px; }

  .plate-divider {
    grid-template-columns: auto auto 1fr auto;
    gap: 14px;
    margin: 72px 0 44px;
  }
  .plate-divider__numeral { font-size: 22px; padding-right: 12px; margin-right: 0; }
  .plate-divider__english { display: none; }
  .interlude { margin-top: 64px; }
  .interlude p { font-size: 15px; }

  /* every card spans full width on phones */
  .photo-card,
  .photo-card--solo-left, .photo-card--solo-center, .photo-card--solo-right,
  .photo-card--pair-wide-l, .photo-card--pair-wide-r,
  .photo-card--pair-tight-l, .photo-card--pair-tight-r,
  .photo-card--full, .photo-card--wide-l, .photo-card--wide-r,
  .photo-card--third-l, .photo-card--third-c, .photo-card--third-r {
    grid-column: 1 / -1;
  }
  .opening { gap: 32px 0; margin-top: 48px; }
  .opening .photo-card--solo-left { grid-column: 1 / -1; }
  .opening__epigraph p { font-size: 15.5px; line-height: 1.8; }
  .plate { gap: 56px 0; }

  .photo-index { font-size: 9.5px; padding: 2px 6px; top: 8px; left: 8px; }
  .photo-caption { flex-direction: column; gap: 6px; }
}

/* ── §12. Theme signatures ───────────────────────────────────────────
   Each theme gets one physical treatment of the print. Everything
   else stays on the shared layout above. Selectors are body.theme-x
   so they win over §6–§11 without !important. */

/* wall — white mat inside a hairline frame; the frame number is
   pencilled on the mat, not stamped on the photo. Quiet, no motion. */
body.theme-wall .photo-card { container-type: inline-size; }
body.theme-wall .photo-wrapper {
  --mat: clamp(12px, 4.5cqi, 38px);
  padding: var(--mat);
  background: var(--g-bg-soft);
  box-shadow: 0 0 0 1px var(--g-line-strong), 0 1px 3px var(--g-shadow-a);
}
body.theme-wall .photo-wrapper::before { inset: calc(var(--mat) - 6px); }
body.theme-wall .photo-wrapper:hover { transform: none; }
body.theme-wall .photo-wrapper:hover .gallery-img { transform: none; }
body.theme-wall .photo-index {
  top: auto;
  bottom: 0;
  left: var(--mat);
  height: var(--mat);
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 9.5px;
  font-weight: 400;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-wall .frontispiece__title {
  font-size: clamp(38px, 5vw, 62px);
  letter-spacing: 0.06em;
}
body.theme-wall .plate { row-gap: 120px; }
body.theme-wall .plate-divider { margin: 170px 0 96px; }

/* cyan — the whole page is printed in one blue. Prints sit flat on the
   paper behind a blue keyline; frame numbers are solid blue stamps. */
body.theme-cyan .photo-wrapper {
  box-shadow: 0 0 0 1px var(--g-line-strong);
}
body.theme-cyan .photo-wrapper:hover { transform: none; }
body.theme-cyan .photo-index {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-cyan .frontispiece__title { font-weight: 500; letter-spacing: 0; }
body.theme-cyan .frontispiece__rule { width: 100%; background: var(--g-ink); }
body.theme-cyan .plate-divider__rule { background: var(--g-line-strong); }

/* darkroom — prints float on black; the only colour on the page is the
   safelight red on frame numbers, plate numerals and the easel ticks. */
body.theme-darkroom .photo-wrapper:hover { transform: none; }
body.theme-darkroom .photo-wrapper:hover .gallery-img { transform: none; }
body.theme-darkroom .photo-index { font-weight: 600; }
body.theme-darkroom .plate-divider__numeral { color: var(--g-chip-ink); }
body.theme-darkroom .frontispiece__rule { background: var(--g-chip-ink); }
body.theme-darkroom .frontispiece__title {
  font-size: clamp(52px, 8.4vw, 104px);
  line-height: 1;
}

/* dusk — the sky darkens down the page; each print carries a thin
   light outline set off its edge, like a lit window at blue hour. */
body.theme-dusk {
  background:
    linear-gradient(180deg, #30497a 0, var(--g-bg) 1400px) no-repeat,
    var(--g-bg);
}
body.theme-dusk .photo-wrapper {
  outline: 1px solid var(--g-line-strong);
  outline-offset: 7px;
}
body.theme-dusk .photo-wrapper:hover { transform: none; outline-color: var(--g-ink-soft); }
body.theme-dusk .photo-wrapper:hover .gallery-img { transform: none; }
body.theme-dusk .photo-wrapper:focus-visible { outline: 2px solid var(--g-ink); outline-offset: 7px; }
body.theme-dusk .frontispiece__title { font-weight: 300; letter-spacing: 0.02em; }

/* film — every print sits on a strip of black film base: sprocket holes
   top and bottom (showing the ground through them), edge print in
   orange along the bottom rebate. */
body.theme-film .photo-card { container-type: inline-size; }
body.theme-film .photo-wrapper {
  --rebate: clamp(16px, 5cqi, 34px);      /* hole band */
  --edge:   clamp(12px, 2.4cqi, 18px);    /* edge-print band, bottom only */
  --hole-w: calc(var(--rebate) * 0.34);
  --hole-h: calc(var(--rebate) * 0.46);
  --pitch:  calc(var(--rebate) * 0.92);
  padding: var(--rebate) calc(var(--rebate) * 0.4) calc(var(--rebate) + var(--edge));
  background: var(--g-bg-soft);
  box-shadow: 0 10px 40px var(--g-shadow-a);
}
body.theme-film .photo-wrapper::before {
  inset: 0;
  opacity: 1;
  transition: none;
  --hole: repeating-linear-gradient(90deg,
            transparent 0 calc((var(--pitch) - var(--hole-w)) / 2),
            var(--g-bg) 0 calc((var(--pitch) + var(--hole-w)) / 2),
            transparent 0 var(--pitch));
  background:
    var(--hole) left 0 top    calc((var(--rebate) - var(--hole-h)) / 2) / 100% var(--hole-h) no-repeat,
    var(--hole) left 0 bottom calc(var(--edge) + (var(--rebate) - var(--hole-h)) / 2) / 100% var(--hole-h) no-repeat;
}
body.theme-film .photo-wrapper::after { inset: var(--rebate) calc(var(--rebate) * 0.4) calc(var(--rebate) + var(--edge)); }
body.theme-film .photo-wrapper:hover { transform: none; }
body.theme-film .photo-wrapper:hover .gallery-img { transform: none; }
body.theme-film .photo-index {
  top: auto;
  bottom: 0;
  left: 8%;
  height: var(--edge);
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.24em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.theme-film .photo-index::before { content: '▸'; margin-right: 0.7em; letter-spacing: 0; }
body.theme-film .plate-divider__numeral { color: var(--g-chip-ink); }

@media (max-width: 640px) {
  body.theme-wall .plate { row-gap: 64px; }
  body.theme-wall .plate-divider { margin: 88px 0 48px; }
  body.theme-dusk .photo-wrapper { outline-offset: 5px; }
}