/* ── Ravens of Odin — Atelier template ───────────────────────────────────
   Template for working artists — watercolorists, pen-and-ink illustrators,
   sketchbook artists, painters. Optimized for individual artworks ("plates")
   with museum-card metadata, plus essays / process posts about the work.

   Home page: a featured-piece hero with an artist's note, then a
   year-grouped gallery wall of plates (a masonry of artwork thumbnails
   with caption strips beneath). Story pages render as a single-piece
   essay — a museum-card sidecar with medium/dimensions/year/edition info
   alongside a generously-sized cover, with optional process strip and
   detail shots inline.

   Color/typography rules go on `body` so design.css (loaded after this
   file) can override via the cascade.

   Author-supplied per-story metadata lives in page.data, which on Atelier
   we interpret as a `card`: a list of {label, value} pairs that populate
   the museum card. Plus optional page.data.process: an array of
   {image_url, caption} stages for the process strip. And per-page
   `availability` ('available' | 'sold' | 'commission' | 'edition') drives
   the wax-seal stamp.                                                       */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --at-bg:           #f5f0e6;
  --at-paper:        #faf6ed;
  --at-paper-deep:   #efe7d6;
  --at-ink:          #2a261e;
  --at-muted:        #7a6e5e;
  --at-soft:         #a89f8e;
  --at-border:       rgba(42,38,30,0.14);
  --at-rule:         rgba(42,38,30,0.08);
  --at-stamp:        #8a3a2c;
  --at-accent:       #5a6a4a;
  --at-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --at-font-ui:      'Inter', system-ui, sans-serif;
  --at-content-w:    640px;
  --at-wide-w:       1200px;
  /* Cross-template hook used by rvns.css for hero / cover / heading
   * elements. Atelier uses Cormorant italic on display elements. */
  --t-font-heading:  'Cormorant Garamond', Georgia, serif;
}

/* ── Base — on body so design.css can override ──────────────────────────── */

body {
  background:
    /* very subtle paper grain via inline SVG turbulence */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") repeat,
    var(--at-bg);
  color: var(--at-ink);
  font-family: var(--at-font-ui);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
em, i { font-family: var(--at-font-display); font-style: italic; font-weight: 500; }

/* ── Masthead (shared by home + story pages) ─────────────────────────────── */

.rvns-mast {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 28px 40px 22px;
  border-bottom: 1px solid var(--at-border);
  gap: 24px; flex-wrap: wrap;
}
.rvns-mast-brand {
  display: inline-flex; align-items: baseline; gap: 14px;
  text-decoration: none;
  color: var(--at-ink);
}
.rvns-mast-brand-name {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
}
.rvns-mast-brand-kind {
  font-family: var(--at-font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-muted);
}
.rvns-mast-nav {
  display: flex; gap: 24px;
  font-family: var(--at-font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--at-muted);
}
.rvns-mast-nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.rvns-mast-nav a:hover { color: var(--at-ink); }
.rvns-mast-nav a.active { color: var(--at-ink); border-bottom-color: var(--at-stamp); }

/* ── Home: hero — featured piece + artist's note ────────────────────────── */

.rvns-at-hero {
  max-width: var(--at-wide-w);
  margin: 0 auto;
  padding: 56px 40px 48px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
  border-bottom: 1px solid var(--at-rule);
}
.rvns-at-hero-platecol {
  display: flex;
  flex-direction: column;
}
.rvns-at-hero-platecol .rvns-at-hero-plate { flex: 0 0 auto; }
.rvns-at-hero-plate {
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  background: var(--at-paper);
  padding: 14px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.06),
    0 8px 28px rgba(42,38,30,0.06);
}
.rvns-at-hero-plate img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rvns-at-hero-plate-cap {
  margin-top: 14px;
  font-family: var(--at-font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-muted);
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.rvns-at-hero-plate-cap span { padding: 0 14px; }
.rvns-at-hero-plate-cap span + span { border-left: 1px solid var(--at-rule); }

.rvns-at-hero-text { padding-right: 24px; }
.rvns-at-hero-eye {
  font-family: var(--at-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--at-stamp);
  margin-bottom: 18px;
}
.rvns-at-hero-eye::before { content: '✦  '; }
.rvns-at-hero-title {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--at-ink);
  margin: 0 0 22px;
  max-width: 14ch;
  text-wrap: balance;
}
.rvns-at-hero-title a { text-decoration: none; }
.rvns-at-hero-note {
  font-size: 16px;
  line-height: 1.65;
  color: #3a352c;
  max-width: 38ch;
  margin: 0 0 24px;
}
.rvns-at-hero-note p + p { margin-top: 0.9em; }
.rvns-at-hero-cta {
  font-family: var(--at-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--at-ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--at-stamp);
  padding-bottom: 3px;
}

/* Wax-seal style availability stamp, used on hero + per-tile */
.rvns-at-stamp {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 1.5px solid var(--at-stamp);
  color: var(--at-stamp);
  background: rgba(250,246,237,0.9);
  font-family: var(--at-font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  transform: rotate(-6deg);
  pointer-events: none;
  padding: 6px;
}
.rvns-at-stamp.sold      { color: #6a6a6a; border-color: #6a6a6a; }
.rvns-at-stamp.commission { color: var(--at-accent); border-color: var(--at-accent); }
.rvns-at-stamp.edition    { color: var(--at-stamp); border-color: var(--at-stamp); }
.rvns-at-hero-plate .rvns-at-stamp { top: 26px; right: 26px; }

/* ── Home: gallery wall ─────────────────────────────────────────────────── */

.rvns-at-wall {
  max-width: var(--at-wide-w);
  margin: 0 auto;
  padding: 48px 40px 24px;
}
.rvns-at-wall-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--at-ink);
  padding-bottom: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap; gap: 12px;
}
.rvns-at-wall-title {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--at-ink);
}
.rvns-at-wall-sub {
  font-family: var(--at-font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--at-muted);
  text-transform: uppercase;
}

.rvns-at-year {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 36px;
  align-items: start;
  padding: 24px 0 32px;
  border-top: 1px solid var(--at-rule);
}
.rvns-at-year:first-child { border-top: 0; padding-top: 0; }
.rvns-at-year-tag {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  color: var(--at-ink);
  line-height: 1;
  position: sticky; top: 24px;
}
.rvns-at-year-tag .ct {
  display: block;
  margin-top: 6px;
  font-family: var(--at-font-ui);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-muted);
}

/* Masonry — same row-equalizing trick as Lens (no gaps).
   The grid lays out in 30px row units; each tile spans rows = ceil(its
   pixel height / 30). The browser auto-flows them with `dense` packing. */
.rvns-at-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 30px;
  grid-auto-flow: dense;
  gap: 18px;
}
.rvns-at-tile {
  display: flex;
  flex-direction: column;
  background: var(--at-paper);
  padding: 12px 12px 10px;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.04),
    0 6px 18px rgba(42,38,30,0.05);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.rvns-at-tile:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.05),
    0 14px 32px rgba(42,38,30,0.09);
}
.rvns-at-tile-img {
  flex: 1 1 auto;
  width: 100%;
  background: var(--at-paper-deep);
  overflow: hidden;
  position: relative;
}
.rvns-at-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rvns-at-tile-caps {
  flex: 0 0 auto;
  padding: 12px 4px 4px;
  text-align: center;
}
.rvns-at-tile-title {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: var(--at-ink);
  margin: 0 0 4px;
}
.rvns-at-tile-meta {
  font-family: var(--at-font-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rvns-at-tile-meta strong { color: var(--at-ink); font-weight: 500; }
.rvns-at-tile .rvns-at-stamp {
  width: 56px; height: 56px;
  font-size: 8px; letter-spacing: 0.14em;
  top: 18px; right: 18px;
}

/* Wall pattern — explicit spans so the masonry feels composed.
   12-col grid, 30px row units. Six recurring tile shapes:
     A: 5 col × 16 rows  (tall — ~480px image area)
     B: 4 col × 12 rows  (small — ~360px)
     C: 7 col × 14 rows  (wide — ~420px)
     D: 4 col × 10 rows  (squat — ~300px)
     E: 6 col × 12 rows  (medium — ~360px)
     F: 6 col × 14 rows  (medium-tall — ~420px)
   Pattern repeats every 6 tiles.                                            */
.rvns-at-tile:nth-of-type(6n+1) { grid-column: span 5; grid-row: span 16; }
.rvns-at-tile:nth-of-type(6n+2) { grid-column: span 7; grid-row: span 14; }
.rvns-at-tile:nth-of-type(6n+3) { grid-column: span 4; grid-row: span 10; }
.rvns-at-tile:nth-of-type(6n+4) { grid-column: span 4; grid-row: span 12; }
.rvns-at-tile:nth-of-type(6n+5) { grid-column: span 6; grid-row: span 12; }
.rvns-at-tile:nth-of-type(6n+0) { grid-column: span 6; grid-row: span 14; }

/* Empty state */
.rvns-at-empty {
  text-align: center;
  padding: 72px 36px;
  font-family: var(--at-font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--at-muted);
}

/* ── Home: footer ───────────────────────────────────────────────────────── */

/* The footer is text-only on the page background — same warm cream as the
 * body, no contrasting band. The thin top rule extends across the full
 * viewport width while the inner content stays constrained to --at-wide-w.
 * We use a ::before pseudo-element rather than the element's own border so
 * the line can escape the max-width without restructuring atelier.js's
 * flat <footer> markup. */
.rvns-at-foot {
  position: relative;
  max-width: var(--at-wide-w);
  margin: 64px auto 0;
  padding: 28px 40px 36px;
  /* Explicit transparent — defeats the rvns.css base `footer { background: ... }`
   * rule (line ~342, var(--t-bg-subtle, #f5f5f5)) which is element-selector
   * specificity but wins by default since this class rule has no bg of its own. */
  background: transparent;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  font-family: var(--at-font-ui);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--at-muted);
  text-transform: uppercase;
}
.rvns-at-foot::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--at-border);
}
.rvns-at-foot em {
  font-family: var(--at-font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--at-ink);
  font-weight: 500;
}

/* ── Story page ─────────────────────────────────────────────────────────── */

body.rvns-at-story { background: var(--at-bg); }

.story {
  background: transparent;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Story head — flex band, title left + museum card right */
.story > .story-head {
  max-width: var(--at-wide-w);
  margin: 0 auto;
  padding: 56px 40px 36px;
  display: flex;
  align-items: stretch;
  gap: 48px;
}
.story > .story-head > .story-head-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex; flex-direction: column;
}
.story-eyebrow {
  font-family: var(--at-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--at-stamp);
  margin-bottom: 18px;
}
.story-eyebrow::before { content: '✦  '; }
.story-title {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  max-width: 16ch;
  text-wrap: balance;
  color: var(--at-ink);
}
.story-deck {
  font-size: 17px;
  line-height: 1.65;
  color: #3a352c;
  margin: 0 0 16px;
  max-width: 48ch;
}
.story-byline {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--at-font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--at-muted);
}
.story-byline a { color: var(--at-ink); text-decoration: none; }

/* Museum card sidecar — populated from page.data.card */
.rvns-at-card {
  flex: 0 0 280px;
  align-self: stretch;
  background: var(--at-paper);
  padding: 22px 22px 18px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.06),
    0 6px 18px rgba(42,38,30,0.05);
}
.rvns-at-card h4 {
  font-family: var(--at-font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--at-muted);
  margin: 0 0 14px;
}
.rvns-at-card dl { margin: 0; }
.rvns-at-card dt {
  font-family: var(--at-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-muted);
  margin-top: 12px;
}
.rvns-at-card dt:first-child { margin-top: 0; }
.rvns-at-card dd {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  color: var(--at-ink);
  margin: 2px 0 0;
  line-height: 1.3;
}
.rvns-at-card-foot {
  margin-top: 18px;
  border-top: 1px solid var(--at-rule);
  padding-top: 14px;
  font-family: var(--at-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rvns-at-card-foot a { color: var(--at-stamp); text-decoration: none; border-bottom: 1px solid var(--at-stamp); padding-bottom: 1px; }

/* Cover plate — paper-framed, centered */
.story > .story-cover {
  max-width: 900px;
  margin: 16px auto 0;
  padding: 0 40px;
  width: auto;
  position: static; left: auto; transform: none;
  text-align: center;
}
.story > .story-cover img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--at-paper);
  padding: 18px;
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.06),
    0 12px 36px rgba(42,38,30,0.08);
  box-sizing: border-box;
}
.story > .story-cover figcaption {
  margin-top: 12px;
  font-family: var(--at-font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--at-muted);
}

/* Body blocks — centered narrow column. Server emits .block-* directly
   under .story; we constrain widths uniformly.                              */
.story > .block-paragraph,
.story > .block-heading,
.story > .block-quote,
.story > .block-impact,
.story > .block-image,
.story > .block-video,
.story > .block-embed,
.story > .rvns-at-process {
  max-width: var(--at-content-w);
  margin-left: auto; margin-right: auto;
  padding-left: 40px; padding-right: 40px;
  box-sizing: content-box;
}

/* Story-credits and series-nav are body-children (publish.ts emits them
 * AFTER the closing `</article>`), so they're constrained explicitly here
 * rather than via the .story > * joint rule above. Same content column
 * width and padding as paragraphs, so the rule lines up visually. */
.story-credits,
.rvns-series-nav {
  max-width: var(--at-content-w);
  margin-left: auto; margin-right: auto;
  padding-left: 40px; padding-right: 40px;
  box-sizing: content-box;
}

.story > .block-paragraph:first-of-type,
.story > .block-heading:first-of-type {
  margin-top: 56px;
}

.story > .block-paragraph {
  font-family: var(--at-font-ui);
  font-size: 16px;
  line-height: 1.8;
  color: #3a352c;
  margin: 0 auto 1.3em;
}
/* Drop cap on the very first paragraph */
.story > .block-paragraph:first-of-type::first-letter {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.92;
  margin: 0.06em 0.12em -0.05em -0.04em;
  color: var(--at-ink);
}

.story > .block-heading {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  color: var(--at-ink);
  margin: 2.2em auto 0.6em;
  text-align: center;
  line-height: 1.2;
}
.story > .block-heading::before,
.story > .block-heading::after {
  content: '✦';
  display: inline-block;
  margin: 0 0.6em;
  color: var(--at-soft);
  font-size: 0.5em;
  vertical-align: middle;
  font-style: normal;
}

.story > .block-quote {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--at-ink);
  text-align: center;
  margin: 2em auto;
  max-width: 32ch;
  position: relative;
}
.story > .block-quote::before {
  content: '“';
  display: block;
  font-size: 3rem;
  color: var(--at-stamp);
  line-height: 0.6;
  margin-bottom: 0.2em;
}

.story > .block-impact {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  line-height: 1.2;
  text-align: center;
  margin: 2.4em auto;
  color: var(--at-ink);
  max-width: 22ch;
}

/* Inline image plates */
.story > .block-image { margin: 2em auto; }
.story > .block-image img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--at-paper);
  padding: 12px;
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.06),
    0 8px 24px rgba(42,38,30,0.06);
  box-sizing: border-box;
}
.story > .block-image figcaption {
  margin-top: 10px;
  font-family: var(--at-font-ui);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--at-muted);
  text-align: center;
}

/* ── Process strip ─────────────────────────────────────────────────────── */

/* Server emits this from the new "Process" block:
     <section class="rvns-at-process">
       <h4>Stages</h4>
       <ol>
         <li><figure>
           <img src="…">
           <figcaption><strong>Pencil sketch</strong>graphite, 9×12</figcaption>
         </figure></li>
         …
       </ol>
     </section>
*/
.rvns-at-process {
  max-width: var(--at-wide-w) !important;
  padding-left: 40px; padding-right: 40px;
  margin: 3em auto !important;
  border-top: 1px solid var(--at-rule);
  border-bottom: 1px solid var(--at-rule);
  padding-top: 28px; padding-bottom: 32px;
}
.rvns-at-process h4 {
  font-family: var(--at-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--at-muted);
  margin: 0 0 22px;
  text-align: center;
}
.rvns-at-process h4::before,
.rvns-at-process h4::after {
  content: '— ';
  margin: 0 8px;
  color: var(--at-soft);
}
.rvns-at-process h4::after { content: ' —'; }
.rvns-at-process ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  counter-reset: stage;
}
.rvns-at-process li {
  counter-increment: stage;
  position: relative;
}
.rvns-at-process li figure { margin: 0; }
.rvns-at-process li img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  background: var(--at-paper);
  padding: 8px;
  box-shadow:
    0 1px 0 rgba(42,38,30,0.04) inset,
    0 1px 2px rgba(42,38,30,0.06),
    0 6px 16px rgba(42,38,30,0.06);
  box-sizing: border-box;
}
.rvns-at-process li figcaption {
  margin-top: 12px;
  font-family: var(--at-font-ui);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  color: var(--at-muted);
}
.rvns-at-process li figcaption strong {
  display: block;
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--at-ink);
  margin-bottom: 2px;
}
.rvns-at-process li figcaption strong::before {
  content: counter(stage, decimal-leading-zero) ' · ';
  font-family: var(--at-font-ui);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--at-stamp);
  vertical-align: middle;
  margin-right: 4px;
}

/* Credits / series nav. Both are body-children (publish.ts emits them after
 * the closing </article>), so selectors are unprefixed. No background — text
 * on the page bg with a thin top rule constrained to the content column. */
.story-credits {
  background: transparent;
  border-top: 1px solid var(--at-rule);
  margin-top: 56px;
  padding-top: 22px;
  font-family: var(--at-font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-muted);
  text-align: center;
}
.rvns-series-nav {
  background: transparent;
  margin-top: 56px;
  padding-top: 28px; padding-bottom: 64px;
  border-top: 1px solid var(--at-rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.rvns-series-nav a {
  text-decoration: none;
  color: var(--at-ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.rvns-series-nav .dir {
  font-family: var(--at-font-ui);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--at-muted);
}
.rvns-series-nav .t {
  font-family: var(--at-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--at-ink);
}
.rvns-series-nav .next { text-align: right; align-items: flex-end; }

/* Tag page */
.tag-page-wrap {
  font-family: var(--at-font-ui);
  max-width: var(--at-wide-w);
  margin: 0 auto;
  padding: 56px 40px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .rvns-at-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 24px 36px;
  }
  .rvns-at-hero-plate { aspect-ratio: 5/6; max-width: 460px; margin: 0 auto; }
  .rvns-at-hero-text { padding-right: 0; }

  .rvns-at-grid {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 24px;
    gap: 14px;
  }
  .rvns-at-tile:nth-of-type(6n+1) { grid-column: span 5; grid-row: span 14; }
  .rvns-at-tile:nth-of-type(6n+2) { grid-column: span 3; grid-row: span 10; }
  .rvns-at-tile:nth-of-type(6n+3) { grid-column: span 4; grid-row: span 10; }
  .rvns-at-tile:nth-of-type(6n+4) { grid-column: span 4; grid-row: span 12; }
  .rvns-at-tile:nth-of-type(6n+5) { grid-column: span 4; grid-row: span 11; }
  .rvns-at-tile:nth-of-type(6n+0) { grid-column: span 4; grid-row: span 11; }

  .story > .story-head {
    flex-direction: column;
    padding: 36px 24px 28px;
    gap: 28px;
  }
  .rvns-at-card { flex: 0 0 auto; align-self: stretch; }
  .story > .story-cover { padding: 0 24px; }
  .story > .block-paragraph,
  .story > .block-heading,
  .story > .block-quote,
  .story > .block-impact,
  .story > .block-image,
  .story > .rvns-at-process,
  .story-credits,
  .rvns-series-nav {
    padding-left: 24px; padding-right: 24px;
  }
}

@media (max-width: 640px) {
  .rvns-mast { padding: 22px 22px 18px; gap: 14px; }
  .rvns-mast-brand-name { font-size: 22px; }
  .rvns-mast-nav { gap: 16px; font-size: 11px; }

  .rvns-at-hero { padding: 32px 22px 28px; }
  .rvns-at-hero-plate { aspect-ratio: 4/5; }

  .rvns-at-wall { padding: 32px 22px 18px; }
  .rvns-at-wall-title { font-size: 24px; }
  .rvns-at-year {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px 0 22px;
  }
  .rvns-at-year-tag {
    position: static;
    font-size: 28px;
    display: flex; align-items: baseline; gap: 14px;
  }
  .rvns-at-year-tag .ct { display: inline; margin-top: 0; }

  .rvns-at-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 18px;
    gap: 12px;
  }
  /* Two-column simple alternation on the smallest viewport — every tile
     sized identically by its image's natural aspect ratio. We give every
     tile span 1 col and let the image dictate height. */
  .rvns-at-tile,
  .rvns-at-tile:nth-of-type(6n+1),
  .rvns-at-tile:nth-of-type(6n+2),
  .rvns-at-tile:nth-of-type(6n+3),
  .rvns-at-tile:nth-of-type(6n+4),
  .rvns-at-tile:nth-of-type(6n+5),
  .rvns-at-tile:nth-of-type(6n+0) {
    grid-column: span 1;
    grid-row: span 14;
  }
  .rvns-at-tile:nth-of-type(4n+1),
  .rvns-at-tile:nth-of-type(4n+0) { grid-row: span 16; }

  .rvns-at-foot { padding: 22px 22px 28px; flex-direction: column; align-items: flex-start; gap: 8px; }

  .story > .block-quote { font-size: 1.3rem; }
  .rvns-series-nav { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rvns-series-nav .next { text-align: left; align-items: flex-start; }
}