@import url("tokens.css");
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * Hallmark · macrostructure: Photographic · tone: documentary-austere · anchor hue: warm (55)
 * nav: N5 floating pill · footer: Ft5 statement · theme: custom (dark gallery)
 * contrast: pass (40–41) · nav: N5 · footer: Ft5 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * mobile: pass (34, 50–57) · outlier: mono on wordmark only (≤2 slots)
 */

/* No horizontal scroll, ever (gate 34) */
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow-x: clip; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

/* ---- Typography ---- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;          /* roman — never italic headers */
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.display {
  font-size: var(--text-display);
  font-weight: 350;
  line-height: 0.98;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;       /* gate 51 */
  min-width: 0;
}
.measure { max-width: var(--measure); }

a { color: inherit; text-decoration: none; }

/* Affordances stay single-line (gate 49) — but NOT feature titles: those must wrap
   inside their own column so they never overflow into the description column. */
.nav__link, .foot__link, .next__link { white-space: nowrap; }

/* ---- Brand wordmark · standalone top-left (outside the nav pill) ---- */
.brand {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  z-index: var(--z-sticky);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: var(--shadow-text);
}
/* ---- Navigation · N5 floating pill (links only, top-right) ---- */
.nav {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  left: auto;
  transform: none;
  z-index: var(--z-sticky);
  width: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  box-shadow: var(--shadow-nav);
}
.nav__links { display: flex; align-items: center; gap: var(--space-xs); }
.nav__link {
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px;
  transition: color var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); background: var(--hover-trans); }
.nav__link[aria-current="page"] { color: var(--color-accent-ink); background: var(--color-accent); }
.nav__link:active { transform: translateY(1px); }
.nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Subjects dropdown · N5 pill extension (token-driven: nav-bg / hover-trans / nav-border) */
.nav__menu { position: relative; display: flex; }
.nav__menu-toggle { font: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-3xs); }
.nav__menu-toggle[aria-expanded="true"] { color: var(--color-ink); background: var(--hover-trans); }
.nav__chev { display: inline-block; font-size: 0.7em; transition: transform var(--dur-short) var(--ease-out); }
.nav__menu-toggle[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__submenu {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  margin: 0;
  min-width: 16rem;
  max-height: calc(100svh - 6rem);
  overflow-y: auto;
  padding: var(--space-2xs);
  display: grid;
  gap: var(--space-3xs);
  list-style: none;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--nav-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-nav);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  z-index: var(--z-dropdown);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.nav__menu-toggle[aria-expanded="true"] + .nav__submenu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav__submenu a {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-card);
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav__submenu a:hover, .nav__submenu a:focus-visible { color: var(--color-ink); background: var(--hover-trans); }
.nav__submenu a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__submenu .sub__place { color: var(--color-accent); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.nav__submenu .sub__name { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.1; }
@media (prefers-reduced-motion: reduce) { .nav__submenu, .nav__chev { transition: none; } }

/* ---- Photographic fold (hero) ---- */
.fold {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.fold__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.fold__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-fold);
}
/* Hero slider — tokenized crossfade, 3 slides */
.fold__slides { position: absolute; inset: 0; z-index: -2; }
.fold__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
  pointer-events: none;
}
.fold__slide.is-active { opacity: 1; }
.fold__slide .fold__img { z-index: 0; }
.fold__dots {
  position: absolute;
  left: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 3;
  display: flex;
  gap: var(--space-sm);
}
.fold__dot {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-rule-2);
  background: transparent;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.fold__dot.is-active { background: var(--color-accent); border-color: var(--color-accent); }
.fold__dot:hover { border-color: var(--color-focus); }
.fold__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .fold__slide { transition: none; }
}
.fold__inner {
  padding: clamp(1.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 8vw, 5rem);
  max-width: 1100px;
}
.fold__kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-shadow: var(--shadow-text);
  margin: 0 0 var(--space-sm);
}
.fold__title { max-width: 16ch; text-shadow: var(--shadow-text); }
.fold__lede {
  margin: var(--space-lg) 0 0;
  max-width: 48ch;
  color: var(--color-muted);
  font-size: var(--text-md);
  font-weight: 350;
  text-shadow: var(--shadow-text);
}
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-faint);
  text-shadow: var(--shadow-text);
}
.scroll-cue::after {
  content: "";
  width: 1px;
  height: 1.8rem;
  background: var(--color-accent);
  animation: cue 2.4s var(--ease-in-out) infinite;
  transform-origin: top;
}
/* ---- Award / exhibition note (reusable; minimalist, flows in hero text) ---- */
.award {
  position: relative;
  top: 0;
  right: 0;
  z-index: 2;
  max-width: 30rem;
  margin-top: var(--space-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}
.award__star {
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0.2rem;
  color: var(--color-accent);
}
.award__body { min-width: 0; }
.award__kind {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.2rem;
}
.award__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
}
.award__text strong { font-weight: 500; }
@media (max-width: 40rem) {
  .index-hero { display: flex; flex-direction: column; justify-content: flex-end; }
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ---- Gallery (supporting frames) ---- */
.gallery {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);   /* gate 50 — image track */
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
  max-width: 1400px;
  margin-inline: auto;
}
@media (min-width: 60rem) {
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .gallery__frame:nth-child(1) { grid-column: 1 / 8; }
  .gallery__frame:nth-child(2) { grid-column: 8 / 13; }
}
.frame {
  position: relative;
  overflow: hidden;
  background: var(--color-paper-2);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-ink);
  background: var(--scrim-caption);
  width: 100%;
}

/* ---- Series gallery (one page per feature) ---- */
.series {
  max-width: 1400px;
  margin-inline: auto;
  padding: clamp(3rem, 10vw, 7rem) clamp(1rem, 4vw, 3rem);
}
.series__head { margin: 0 0 clamp(1.5rem, 4vw, 3rem); }
.series__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}
.series__title { font-size: var(--text-4xl); }
/* Series gallery — compact 3-column grid (8 photos = 3 rows of 3/3/2), every photo uncropped (gate: uncropped). */
.gallery--series { display: grid; grid-template-columns: 1fr; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
@media (min-width: 40rem) { .gallery--series { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .gallery--series { grid-template-columns: repeat(3, 1fr); } }
.gallery--series .frame { margin: 0; width: 100%; background: var(--color-paper-2); }
.gallery--series .frame img { width: 100%; height: auto; object-fit: initial; aspect-ratio: auto; display: block; }

/* ---- Note block (writing under the work) ---- */
.note {
  max-width: 64ch;
  margin-inline: auto;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1.25rem, 5vw, 3rem);
}
.note__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-md);
}
.note p { color: var(--color-muted); font-size: var(--text-md); line-height: 1.65; }
.note p + p { margin-top: var(--space-lg); }
.note__nft { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }
.note__nft-label { display: block; font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-sm); }
.note__nft a { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid var(--color-rule-2); }
.note__nft a:hover { color: var(--color-focus); border-bottom-color: var(--color-focus); }
.note p a { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.15em; }
.note p a:hover { color: var(--color-accent); }

/* A STORY membership box — tokenized, sits under the bio (no invented values) */
.story-box {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card);
}
.story-box__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}
.story-box__title { font-size: var(--text-xl); margin: 0 0 var(--space-sm); }
.story-box__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-muted);
  margin: 0 0 var(--space-md);
}
.story-box__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule-2);
}
.story-box__link:hover { color: var(--color-focus); border-bottom-color: var(--color-focus); }
.story-box__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Series note — embedded video (responsive 16:9) */
.note__video { margin: var(--space-lg) 0 0; }
.note__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule-2);
}
.note__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.note__video-cap {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-faint);
}

/* About author portrait (tokenized — warm-ash gallery, 20px card radius) */
.note__portrait {
  margin: 0 0 var(--space-xl);
  padding: 0;
}
.note__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-rule);
  background: var(--color-paper-2);
}
.note__caption {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-faint);
}

/* ---- Next link ---- */
.next {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  border-top: 1px solid var(--color-rule);
}
.next__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-faint);
}
.next__link {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  transition: color var(--dur-short) var(--ease-out);
}
.next__link .arrow { color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.next__link:hover { color: var(--color-accent); }
.next__link:hover .arrow { transform: translateX(6px); }
.next__link:active { transform: translateY(1px); }
.next__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---- Footer · Ft5 statement ---- */
.foot {
  border-top: 1px solid var(--color-rule);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 5vw, 3rem);
  max-width: 1100px;
  margin-inline: auto;
}
.foot__statement {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
.foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-2xl);
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--color-faint);
}
.foot__link {
  color: var(--color-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.foot__link:hover { color: var(--color-ink); border-color: var(--color-accent); }
.foot__link:active { transform: translateY(1px); }
.foot__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.foot__copy { width: 100%; color: var(--color-faint); font-size: var(--text-xs); letter-spacing: 0.04em; }
.foot__social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  order: -1;
  padding-bottom: var(--space-sm);
}
.foot__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  transition: color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.foot__social-link:hover { color: var(--color-ink); transform: translateY(-2px); }
.foot__links { display: inline-flex; align-items: center; gap: var(--space-sm); }
.foot__sep { color: var(--color-muted); }
.foot__link-text { color: var(--color-ink); font-weight: 500; text-decoration: none; }
.foot__link-text:hover { color: var(--color-accent); }
.foot__social-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
/* whole footer meta centered as a unit */
.foot__meta { justify-content: center; text-align: center; }

/* ---- Index page (feature list) ---- */
.index-hero .fold__kicker { margin-bottom: var(--space-lg); }

.features {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
  max-width: 1100px;
  margin-inline: auto;
}
.feature {
  position: relative;
  border-bottom: 1px solid var(--color-rule);
  overflow: hidden;
}
.feature__link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 3rem);
  align-items: start;   /* top-align columns so title & description align regardless of wrap (gate: aligned) */
  z-index: 1;
  transition: background-color var(--dur-long) var(--ease-out);
}
.feature__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.feature__link:active { background: var(--color-paper-2); }
.feature__name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  min-width: 0;   /* allow track to shrink so columns align across rows (gate: aligned) */
  white-space: normal;        /* wrap long titles inside the column — never spill into col 3 */
  overflow-wrap: break-word;
}
.feature__place {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.feature__desc { color: var(--color-muted); max-width: 42ch; min-width: 0; }
.feature__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.feature__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-feature);
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .feature__link:hover { background: var(--color-paper-2); }
  .feature__link:hover .feature__thumb { opacity: 0.5; transform: scale(1); }
  .feature__link:hover .feature__scrim { opacity: 1; }
}
@media (min-width: 60rem) {
  .feature__link { grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr) minmax(0, 2.5fr); gap: var(--space-xl); }
  .feature__name { grid-column: 2; min-width: 0; }
  .feature__body { grid-column: 3; min-width: 0; }
  .feature__place { text-align: center; align-self: center; padding-inline: var(--space-sm); }  /* center country label in its column (both axes) */
}

/* ---- Mobile collapse (gate 49, 52) ---- */
@media (max-width: 40rem) {
  .brand { top: var(--space-sm); left: var(--space-sm); font-size: var(--text-xs); }
  .nav { top: calc(var(--space-sm) + 1.9rem); right: var(--space-sm); width: auto; padding: var(--space-3xs) var(--space-xs); }
  .nav__links { gap: var(--space-3xs); }
  .nav__link { padding: var(--space-2xs) var(--space-xs); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Focus visibility baseline ---- */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- Lightbox (click-to-enlarge, series galleries) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--scrim-lightbox);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-short) var(--ease-out), visibility var(--dur-short) var(--dur-short));
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100% - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-nav);
}
.lightbox__caption {
  margin: 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-rule-2);
  border-radius: 50%;
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--hover-trans); }
.gallery--series .frame img { cursor: zoom-in; }