/* Journal Landing (desktop) — reproduces the authoritative Figma node
   "Blog / Journal Landing — Desktop"
   (figma.com/design/NmseLluZJR0NqBKcwIq02A, node 2:53, confirmed 1429×900
   reference frame). All positions/sizes are percentages of that
   reference frame, taken directly from the audited Figma geometry
   (FIGMA EXACT values, or DERIVED FROM FIGMA values resolved from
   calc()+translate centering and cross-validated against metadata).

   Three coordinate conflicts between Figma's own two data sources were
   resolved against the finalized rendered reference (not estimated):
   green paper x=-546 (not 256.39), logo y=-25 (not 115.72), footer
   message y=755 (not 832.30). See the geometry audit for the reasoning.

   All raster artwork uses object-fit: cover, matching Figma's own
   generated code exactly (it uses object-cover throughout) — nothing
   here is non-uniformly stretched. Rotations are Figma's exact values
   with default (center) transform-origin, matching Figma's own
   flex-center-then-rotate technique for the logo, green paper, and
   footer blue paper.

   Typography stays inside the established Sarahtonin Sounds system
   (PROJECT-SPEC.md §5) rather than Figma's generated font metadata
   (Crimson Text / Playfair Display / "Figma Hand"): Perandory
   Semi-Condensed for headings/editorial display (including card titles,
   which Figma itself specifies as "Perandory:Semi-Condensed" — an exact
   match to what we have), IM Fell English for readable body copy, Sue
   Ellen Francisco only for the hero subtitle and footer note.

   Card/featured images, titles, dates, excerpts, and category labels
   are populated entirely from CMS content via js/journal.js — none of
   the Figma sample copy is hard-coded here. */

.page-journal {
  background-color: var(--color-paper);
}

.page-journal main.journal-page {
  max-width: none;
  padding: 0;
}

/* ── Stage: the 1429×900 reference frame, scaled responsively ──
   .journal-v2 does the clipping instead of the stage itself, with a
   little extra room below it (padding-bottom, a % of width) so the
   Recent cards, which run past the frame's bottom edge (more on narrow
   screens, where their text wraps more), are never cut off. The textures already extend well below the frame, so
   that extra room is the same paper, not a seam. */
/* Query container so --jv2-gutter can use cqw (window width minus any
   scrollbar); overflow-x:clip trims the edge textures at the window. */
.journal-page {
  container-type: inline-size;
  overflow-x: clip;
}

.journal-v2 {
  /* Empty margin either side of the 1600px frame on wide windows (0 at
     or below 1600). The stripe band, green paper, logo and paper
     texture extend or shift by this much so they reach the window
     edges instead of stopping at the frame. */
  --jv2-gutter: max(0px, (100cqw - 1600px) / 2);
  max-width: 1600px;
  margin: 0 auto;
  padding-bottom: max(2.5rem, calc(240px - 12%));
  overflow-x: visible;
  overflow-y: clip;
  background-color: var(--color-paper);
}

/* Fades the textured paper into the flat --color-paper the page
   continues with below, so there's no visible edge where the texture
   ends. z-index 4 sits above the paper textures (1-3) but below the
   cards (6) and everything else. */
.journal-v2 {
  position: relative;
}

.journal-v2::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--jv2-gutter));
  right: calc(-1 * var(--jv2-gutter));
  bottom: 0;
  height: 160px;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(255, 230, 172, 0), var(--color-paper));
  pointer-events: none;
}

.journal-v2__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1429 / 900;
}

/* ── Background textures — real exported assets, stacked in Figma's
   own documented paint order (red stripe → green paper → foreground
   paper, foreground on top). Percentages from the audited geometry. ── */
.jv2-bg-stripe {
  position: absolute;
  left: calc(-10.077% - var(--jv2-gutter));
  top: -104.6667%;
  width: calc(129.881% + 2 * var(--jv2-gutter));
  height: 250%;
  max-width: none;
  object-fit: cover;
  z-index: 1;
}

/* Figma centers this texture (pre-rotation 726×1082) inside a larger
   bounding wrapper at left=-546 (resolved conflict), top=-482, then
   rotates 47.87deg around its own center — expressed here as a
   translate+rotate from the wrapper's own center point, matching
   Figma's flex-center-then-rotate technique. */
.jv2-bg-green {
  position: absolute;
  left: 6.8291%;
  top: 16.6111%;
  width: 50.804%;
  height: 120.2222%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(47.87deg);
  translate: calc(-1 * var(--jv2-gutter)) 0;
  z-index: 2;
}

.jv2-bg-foreground {
  position: absolute;
  left: calc(-14.2757% - var(--jv2-gutter));
  top: 6.6667%;
  width: calc(128.5514% + 2 * var(--jv2-gutter));
  height: 128.5556%;
  max-width: none;
  object-fit: cover;
  z-index: 3;
}

/* ── Brand logo — flex-center-then-rotate, matching Figma exactly. ── */
.jv2-logo {
  position: absolute;
  left: -1.6095%;
  top: -2.7778%;
  width: 25.1512%;
  height: 29.4287%;
  translate: calc(-1 * var(--jv2-gutter)) 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* home-logo.png has substantial transparent padding around the visible
   ticket artwork (measured: 824×365 canvas, visible content 673×295).
   Sized so the VISIBLE content matches Figma's 332.689×136.998 target,
   not the full padded canvas — width scaled by 332.689/673, height
   follows the asset's own natural aspect ratio (no distortion). */
/* width/height are % of the parent .jv2-logo box (25.1512%/29.4287% of
   stage), scaled so the rendered size equals 23.2813%/15.2222% of the
   stage — i.e. Figma's exact 332.69×137px at this 1429-wide frame. */
.jv2-logo > a {
  display: block;
  width: 92.56%;
  height: 51.72%;
  max-width: none;
  object-fit: cover;
  transform: rotate(-25deg);
}

/* ── Primary nav — reuses the approved nav-paper-tab asset with real
   HTML text (ASSET-MANIFEST.md §1). Home's per-tab rotated-scatter
   treatment is documented Home-specific and intentionally not reused
   here. Nav labels use the established display face (Perandory
   Semi-Condensed, the same face Home's nav now uses too), not Figma's
   generated Crimson Text. ── */
.jv2-nav {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.jv2-nav ul {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.jv2-nav__tab {
  position: absolute;
  pointer-events: auto;
  top: 1.6667%;
  width: 9.937%;
  height: 6.3333%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/assets/images/shared/nav-paper-tab.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.2vw, 1.1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--color-near-black);
}

.jv2-nav__tab--home { left: 42.9671%; }
.jv2-nav__tab--about { left: 54.6536%; }
.jv2-nav__tab--listen { left: 66.3401%; }
.jv2-nav__tab--journal { left: 78.2365%; }
.jv2-nav__tab--contact { left: 90.063%; }

.jv2-nav__tab[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-crimson);
  text-underline-offset: 3px;
}

.jv2-nav__tab:hover {
  text-decoration: underline;
}

/* ── Hero heading ──
   z-index raised above .jv2-featured deliberately — see the HTML
   comment above this block's markup for why. */
/* top raised from Figma's 11.2222%, the title about 10% smaller, and
   its line box and the gaps below it tightened, so the subtitle clears
   the Featured Post's torn top edge instead of sitting on it. */
.jv2-hero {
  position: absolute;
  left: 37.7887%;
  top: 9.4%;
  width: 24.9825%;
  z-index: 8;
  text-align: center;
}

.jv2-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 4.7rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-near-black);
  margin: 0;
}

.jv2-hero__divider {
  width: 82%;
  height: 2px;
  margin: 0.3em auto 0;
  background-color: var(--color-crimson);
}

.jv2-hero__subtitle {
  font-family: var(--font-marginalia);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  letter-spacing: 0.03em;
  color: var(--color-near-black);
  margin: 0.35em 0 0;
}

/* ── Flow layer: Featured Post + Recent cards ──
   .journal-v2 is a one-cell grid: the fixed-ratio stage and this flow
   layer share the cell, so the page grows to fit whichever is taller
   while the stage's textures keep their Figma proportions. Inside the
   layer, the Featured card and Recent row are in normal flow, so a
   longer title or summary grows the card and pushes the Recent row
   down instead of colliding with it. Percentages here are of the stage
   width (padding/margin %), converted from the 1429×900 Figma frame. */
.journal-v2 {
  display: grid;
}

.journal-v2__stage,
.jv2-flow {
  grid-area: 1 / 1;
}

.journal-v2__stage {
  align-self: start;
}

.jv2-flow {
  position: relative;
  z-index: 5;
  /* Figma's card top, 18.4444% of the frame height, as % of width. */
  padding-top: 11.6166%;
  pointer-events: none;
}

/* ── Featured entry ──
   Two real columns: the photo keeps Figma's box (x 20.01%, w 24.49%)
   and the text sits in its own column to the right, so an image of any
   shape can never cover the meta line, divider, or summary. The card
   keeps the backdrop's own 1914×816 ratio (Figma's 957×408 box) as its
   minimum size and only grows taller when the text needs more room. */
.jv2-featured {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 44.03% 1fr;
  column-gap: 4.49%;
  width: 66.9699%;
  margin-left: 14.5556%;
  aspect-ratio: 1914 / 816;
  padding: 4.9% 5.88% 2.87% 5.46%;
  container-type: inline-size;
  pointer-events: auto;
}

/* Nine-slice: the torn top (with both tapes) and torn bottom keep their
   natural proportions at any card height; only the plain paper band
   between them (42%-82% of the image) stretches when the card grows.
   Slice sizes are image px; widths are the same slices at card scale
   (344/1914 and 144/1914 of the card width). */
.journal-featured__backdrop {
  position: absolute;
  inset: 0;
  border-image-source: url('/assets/images/journal/featured-paper-backdrop.png');
  border-image-slice: 344 0 144 0 fill;
  /* Fallback without container units: same slices at the base ratio. */
  border-image-width: 42.16% 0 17.65% 0;
  border-image-width: 17.973cqw 0 7.524cqw 0;
  border-image-repeat: stretch;
}

/* Cropped to fill its box (cover) unless the CMS "Show the whole
   Featured Image" switch is on (contain, below). */
.journal-featured__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Desktop: the photo fills its column at whatever height the card
   ends up, so landscape and portrait images both stay inside it. The
   inset leaves a band of paper around it and tucks its top-left corner
   under the tape (.jv2-featured::after). */
.jv2-featured .journal-featured__photo {
  position: relative;
  min-height: 12rem;
  margin: 2.6cqw 0 1.4cqw 2.4cqw;
}

/* The backdrop's upper-left tape, cut out on its own and laid exactly
   over the backdrop's copy so it sits on top of the photo's corner.
   Box = the cutout's crop (x 8, y 24, 488x352 of the 1914px-wide
   backdrop), inside the backdrop's top slice. Horizontal values are %
   of the card (the backdrop spans it); vertical ones use cqw, the same
   scale as the backdrop's top border-image-width. */
.jv2-featured::after {
  content: "";
  position: absolute;
  left: 0.418%;
  top: 1.254cqw;
  width: 25.496%;
  height: 18.391cqw;
  background: url('/assets/images/journal/featured-tape-left.webp') 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}

.jv2-featured .journal-featured__photo img {
  position: absolute;
  inset: 0;
}

.jv2-featured .journal-featured__body {
  position: relative;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* No image: the text takes the whole card. */
.jv2-featured .journal-featured__backdrop + .journal-featured__body {
  grid-column: 1 / -1;
}

.journal-featured__meta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-near-black);
  margin: 0;
}

.journal-featured__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.9vw, 4.4rem);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  overflow-wrap: break-word;
  color: var(--color-near-black);
  margin: 0;
}

.journal-featured__divider {
  height: 2px;
  background-color: var(--color-crimson);
}

.journal-featured__excerpt {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--color-near-black);
  margin: 0;
}

.journal-featured__link {
  display: inline-block;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(0.85rem, 1.4vw, 1.25rem);
  color: var(--color-near-black);
  text-decoration: none;
  border-bottom: 2px solid var(--color-crimson);
  padding-bottom: 2px;
}

.jv2-featured .journal-featured__title {
  margin-top: 0.15em;
}

/* Titles over 16 characters (set by renderFeaturedEntry) step down a
   size so a 40-character title (the CMS limit) wraps to three lines at
   most instead of five. */
.jv2-featured .journal-featured__title--long {
  font-size: clamp(1.6rem, 3.4vw, 3.05rem);
}

.jv2-featured .journal-featured__divider {
  margin: 0.5em 0 0.7em;
}

/* READ gets its own row under the summary, never on top of it. */
.jv2-featured .journal-featured__link {
  align-self: flex-start;
  margin-top: 0.9em;
}

/* ── Recent entries: four slots at their exact individual Figma x
   offsets (see journal.html comment on why these are fixed offsets
   rather than an equal-gap grid), one flex row directly under the
   Featured card. Each slot is filled with the same .journal-card
   markup used by renderJournalCard() everywhere. ── */
.jv2-recent {
  display: flex;
  align-items: stretch;
  /* Figma's 0.39%-of-height gap between the Featured card and cards. */
  margin-top: 0.245%;
}

/* aspect-ratio is a minimum here: the card keeps Figma's 269×326 size
   but grows when its text wraps more on narrower screens. */
.jv2-card-slot {
  display: flex;
  flex-direction: column;
  width: 18.8244%;
  aspect-ratio: 269 / 326;
  pointer-events: auto;
}

.jv2-recent[hidden],
.jv2-card-slot[hidden] {
  display: none;
}

.jv2-card-slot > .journal-card {
  flex: 1 0 auto;
}

/* Same image shape as Figma's 48.773%-of-card-height slot, expressed
   as an aspect ratio now that the card height can grow. */
.jv2-card-slot .journal-card__image {
  height: auto;
  aspect-ratio: 1.6915;
}

.jv2-card-slot--1 { margin-left: 5.7383%; }
.jv2-card-slot--2 { margin-left: 2.2393%; }
.jv2-card-slot--3 { margin-left: 1.2595%; }
.jv2-card-slot--4 { margin-left: 1.2596%; }

.journal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background-color: rgba(246, 231, 154, 0.55);
}

.journal-card__image {
  display: block;
  width: 100%;
  height: 48.773%;
  object-fit: cover;
}

.journal-card__meta {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  letter-spacing: 0.05em;
  color: var(--color-near-black);
  padding: 0.9em 5.2% 0;
}

.journal-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-near-black);
  padding: 0.3em 5.2% 0;
  margin: 0;
}

.journal-card__divider {
  width: 63.94%;
  height: 1px;
  margin: 0.6em auto 0;
  background-color: var(--color-crimson);
}

.journal-card__excerpt {
  flex: 1;
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.45;
  color: var(--color-near-black);
  padding: 0.6em 5.2% 0;
  margin: 0;
}

.journal-card__link {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(0.7rem, 0.85vw, 0.85rem);
  color: var(--color-near-black);
  text-decoration: none;
  border-bottom: 1px solid var(--color-crimson);
  margin: 0.9em 5.2% 1em;
  padding-bottom: 1px;
}

.journal-empty {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--text-lg);
  text-align: center;
  padding: var(--space-6) 0;
}

/* ── "Read something new!" footer note ──
   Visual treatment only per the Figma reference — kept non-interactive
   since the destination Journal Post page doesn't exist until the next
   phase. */
/* Shrunk and moved right from Figma's 82.14% / 77.44% / 14.86% so the
   rotated note sits in the margin past the 4th card instead of
   covering its title. */
.jv2-footer-note {
  position: absolute;
  left: 88%;
  top: 72%;
  width: 10%;
  height: 15.6%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jv2-footer-note img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(-26.93deg);
}

.jv2-footer-note span {
  position: relative;
  z-index: 1;
  display: block;
  width: 70%;
  font-family: var(--font-marginalia);
  font-size: clamp(0.65rem, 0.78vw, 0.8rem);
  text-align: center;
  color: var(--color-near-black);
  transform: rotate(-37.15deg);
}

@media (max-width: 900px) {
  .journal-v2 {
    padding-bottom: 110px;
  }

  .journal-v2__stage {
    aspect-ratio: auto;
    min-height: 700px;
  }

  /* The card top stays at 18.4444% of the now 700px-tall stage. */
  .jv2-flow {
    padding-top: 129px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Mobile Journal Landing (390px reference frame)
   Reproduces the finalized Figma mobile frame ("mobile-blog-landing-
   page", 390×844+ scrolling flow). This is a real stacked flow layout,
   not the desktop stage scaled down — sizes/spacing/rotations below
   are Figma's own literal px values, used as static px because this
   frame scrolls and reflows rather than locking to one aspect ratio.

   .jv2m-page is hidden by default and only shown under the breakpoint;
   .journal-v2__stage (desktop) is hidden in the same breakpoint so the
   two never render at once. Desktop's rules above are untouched.

   Text fields reuse the exact same classes renderFeaturedEntry() /
   renderJournalCard() already emit (journal-featured__*, journal-
   card__*) — only position/size/spacing are overridden here for the
   flow context; font-family and color stay the established site
   values already set above (Perandory / IM Fell English / Sue Ellen
   Francisco, near-black text), not Figma's Crimson Text/Young Serif/
   Playfair Display/gray accents. Two exceptions, both matched directly
   against the supplied screenshot rather than assumed: article/card
   titles are NOT uppercased on mobile (the screenshot shows mixed-case
   titles), and text that is centered on desktop's absolute layout is
   left-aligned here to match the screenshot's flow reading order.

   Visual order (image, meta, divider, title, excerpt, read-link) is
   achieved with flexbox `order` on the existing DOM — not by
   reordering or forking the renderer output. ══════════════════════ */

.jv2m-page {
  display: none;
}

@media (max-width: 599px) {
  .journal-v2 {
    display: none;
  }

  /* Shared mobile paper and red-stripe band (css/layout.css); the page
     runs full width, its content keeps the 430px reference column. */
  .jv2m-page {
    display: block;
    width: 100%;
    background: var(--m-paper);
  }

  .jv2m-page > :not(.jv2m-masthead) {
    max-width: 430px;
    margin-inline: auto;
  }

  .jv2m-masthead {
    background: var(--m-band);
  }

  /* ── Header + logo ── */
  .jv2m-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 0;
  }

  .jv2m-logo {
    display: block;
    width: 280px;
    max-width: 71.79%;
    height: auto;
    aspect-ratio: 280 / 115;
    object-fit: cover;
    transform: rotate(-2deg);
    transform-origin: top left;
  }

  /* ── 3 + 2 torn-paper nav tapes ── */
  .jv2m-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 24px;
  }

  .jv2m-nav__row {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .jv2m-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    background-image: url('/assets/images/shared/nav-paper-tab.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: var(--font-display);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--color-near-black);
  }

  .jv2m-tab--home { width: 100px; transform: rotate(-2deg); transform-origin: top left; }
  .jv2m-tab--about { width: 100px; transform: rotate(3deg); transform-origin: top left; }
  .jv2m-tab--listen { width: 110px; transform: rotate(-1deg); transform-origin: top left; }
  .jv2m-tab--journal { width: 110px; transform: rotate(2deg); transform-origin: top left; }
  .jv2m-tab--contact { width: 110px; transform: rotate(-3deg); transform-origin: top left; }

  .jv2m-tab[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--color-crimson);
    text-underline-offset: 3px;
  }

  /* ── Hero ── */
  .jv2m-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 24px 24px;
    text-align: center;
  }

  .jv2m-hero__title {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-near-black);
    margin: 0;
  }

  .jv2m-hero__divider {
    width: 200px;
    height: 2px;
    background-color: var(--color-crimson);
  }

  .jv2m-hero__subtitle {
    font-family: var(--font-marginalia);
    font-size: 1rem;
    color: var(--color-near-black);
    margin: 0;
  }

  /* ── Featured card ──
     backdrop is hidden (the card box itself supplies the bg/outline);
     meta + photo are visually fused into one "polaroid" block using
     order + a shared white background, matching the screenshot,
     without reordering renderFeaturedEntry()'s actual markup. */
  .jv2m-featured-section {
    padding: 0 20px 36px;
  }

  .jv2m-featured-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    background: #faf8ee;
    box-shadow: 0 8px 16px rgba(72, 44, 8, 0.16);
    border-radius: 4px;
    outline: 2px solid var(--color-crimson);
    outline-offset: -2px;
  }

  .jv2m-featured-card .journal-empty {
    width: 100%;
  }

  .jv2m-featured-card .journal-featured__backdrop {
    display: none;
  }

  .jv2m-featured-card .journal-featured__body {
    display: contents;
  }

  .jv2m-featured-card .journal-featured__meta {
    order: 0;
    position: static;
    width: 100%;
    background: #fff;
    outline: 1px solid #e5decd;
    outline-offset: -1px;
    border-radius: 4px 4px 0 0;
    padding: 12px 12px 8px;
    margin: 0;
    font-size: 0.8125rem;
  }

  .jv2m-featured-card .journal-featured__photo {
    order: 1;
    position: static;
    width: 100%;
    margin: -1px 0 16px;
    background: #fff;
    outline: 1px solid #e5decd;
    outline-offset: -1px;
    border-radius: 0 0 4px 4px;
    padding: 0 12px 12px;
    box-sizing: border-box;
  }

  /* 3:2 to match the CMS Featured Image guidance. */
  .jv2m-featured-card .journal-featured__photo img {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
  }

  .jv2m-featured-card .journal-featured__title {
    order: 2;
    position: static;
    width: 100%;
    text-align: left;
    text-transform: none;
    font-size: 2rem;
    line-height: 1.1;
    margin: 0 0 8px;
  }

  .jv2m-featured-card .journal-featured__divider {
    order: 3;
    position: static;
    width: 100px;
    height: 4px;
    margin: 0 0 16px;
  }

  .jv2m-featured-card .journal-featured__excerpt {
    order: 4;
    position: static;
    width: 100%;
    text-align: left;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 0 16px;
  }

  .jv2m-featured-card .journal-featured__link {
    order: 5;
    position: static;
    font-size: 0.875rem;
  }

  /* ── "More to Read" (recent entries) ──
     .journal-card is already a normal (non-absolute) flex column on
     desktop, so mobile only needs a solid-card treatment plus a few
     field-level overrides — no structural rebuild. */
  .jv2m-recent {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 20px 48px;
  }

  /* No entries beyond the Featured one: no "More to Read" heading. */
  .jv2m-recent[hidden] {
    display: none;
  }

  .jv2m-recent__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    text-transform: none;
    color: var(--color-near-black);
    margin: 0;
  }

  .jv2m-card-slot .journal-card {
    height: auto;
    background: #fdfbed;
    box-shadow: 0 4px 8px rgba(72, 44, 8, 0.12);
    border-radius: 8px;
    outline: 1px solid var(--color-crimson);
    outline-offset: -1px;
    padding: 16px;
    gap: 4px;
  }

  /* The card's red border is an outline, so focus has to restate the
     site ring here or it would replace it. */
  .jv2m-card-slot .journal-card:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--color-focus-gap), 0 4px 8px rgba(72, 44, 8, 0.12);
  }

  .jv2m-card-slot .journal-card__image {
    order: 0;
    width: 100%;
    height: 160px;
    border-radius: 4px;
    margin: 0 0 12px;
  }

  .jv2m-card-slot .journal-card__meta {
    order: 1;
    text-align: left;
    font-size: 0.8125rem;
    padding: 0;
  }

  .jv2m-card-slot .journal-card__divider {
    order: 2;
    width: 100%;
    margin: 4px 0 8px;
  }

  .jv2m-card-slot .journal-card__title {
    order: 3;
    text-align: left;
    text-transform: none;
    font-size: 1.375rem;
    line-height: 1.2;
    padding: 0;
    margin: 0 0 4px;
  }

  .jv2m-card-slot .journal-card__excerpt {
    order: 4;
    font-size: 0.9375rem;
    line-height: 1.4;
    padding: 0;
    margin: 0 0 12px;
  }

  .jv2m-card-slot .journal-card__link {
    order: 5;
    font-size: 0.75rem;
    margin: 0;
  }

  /* ── Footer note ── */
  .jv2m-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    padding: 20px;
  }

  .jv2m-footer__frame {
    position: relative;
    width: 212.29px;
    height: 200.45px;
  }

  .jv2m-footer__paper {
    position: absolute;
    left: 0;
    top: 75.63px;
    width: 167px;
    height: 140px;
    object-fit: contain;
    transform: rotate(-27deg);
    transform-origin: top left;
  }

  .jv2m-footer__text {
    position: absolute;
    left: 48.15px;
    top: 89.57px;
    width: 89.8px;
    text-align: center;
    font-family: var(--font-marginalia);
    font-size: 1.25rem;
    color: var(--color-near-black);
    transform: rotate(-28deg);
    transform-origin: top left;
  }
}

/* ── Filters: All / Essays / Monthly Favs ── Built by journal.html's
   journalFilters() macro and wired up by js/journal-filters.js. Plain
   display-face labels with the same crimson underline as the "Read"
   links marking the active one. On desktop it is a short stacked list
   in the open column under the logo (the gap between the Featured Post
   and the Recent cards is too tight to hold it); on mobile it is a row
   under the hero. */
.journal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.6em;
}

.journal-filters[hidden] {
  display: none;
}

.journal-filter {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.2vw, 1.1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-near-black);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.15em 0 2px;
  cursor: pointer;
}

.journal-filter:hover {
  border-bottom-color: rgba(28, 26, 22, 0.35);
}

.journal-filter[aria-pressed="true"] {
  border-bottom-color: var(--color-crimson);
}

.journal-filters--desktop {
  position: absolute;
  left: 2.8%;
  top: 34%;
  z-index: 7;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7em;
}

.journal-filters--mobile {
  justify-content: center;
  padding: 0 20px 24px;
}

.journal-filters--mobile .journal-filter {
  font-size: 1rem;
}

/* CMS "Show the whole Featured Image": polaroids and cut-outs are shown
   entire (contain) instead of cropped to fill (cover, the default for
   photos). Applies to the Featured slot and cards, desktop and mobile. */
.journal-card__image.journal-image--whole,
.journal-featured__photo img.journal-image--whole {
  object-fit: contain;
}