/* pages/journal — /journal (the index) and /journal/:slug (the reading page).
   docs/DESIGN.md §6 Journal, §2 tokens, §4 layout. White ground, hairlines as the only separators,
   everything hung left from column 1. No numerals, no folio, no read times, no margin column.

   Column ledger (desktop, 12 cols starting at 1):
     index    head 1–9 · feature copy 1–6, still 7–13 bleeding right · note rows: still 1–5, copy 5–11
     article  head 1–9, standfirst 1–7 · cover 1–9 · prose 1–7 capped at 64ch · pull quotes 1–9
              · related notes three-up */

.journal { --measure-read: var(--measure); background: var(--bg); }

/* ================================================================================================
   Index
   ================================================================================================ */
.journal-head { padding-block: clamp(2.5rem, 5vw, 5rem) 0; }
.journal-head .grid { row-gap: 0; }
.journal-head__eyebrow { margin-block-end: clamp(1rem, 2vw, 1.75rem); }
.journal-head__title { max-width: 15ch; margin: 0; }
.journal-head__lead { margin-block-start: clamp(1rem, 2vw, 1.5rem); color: var(--fg-2); }
.journal-head__rule { margin-block-start: clamp(2rem, 4vw, 3.25rem); }

/* Category filter — eyebrow links sitting on the head hairline; the current one keeps its rule. */
.journal-filter { display: flex; flex-wrap: wrap; gap: .25rem clamp(1.25rem, 2.5vw, 2.5rem); }
.journal-filter__link {
  display: inline-block; padding-block: .85rem; min-height: 44px;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right calc(100% - .65rem);
  transition: background-size var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.journal-filter__link:hover, .journal-filter__link:focus-visible,
.journal-filter__link[aria-current="page"] { color: var(--fg); background-size: 100% 1px; background-position: left calc(100% - .65rem); }

/* ---- The featured note: copy in 1–6, the still in 7–13 running off the right edge --------------- */
.journal-feature { padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.journal-feature__grid { row-gap: clamp(2rem, 4vw, 3rem); }
.journal-feature__body { display: flex; flex-direction: column; align-items: flex-start; padding-block-end: clamp(.25rem, 1.5vw, 1.5rem); }
.journal-feature__eyebrow { margin-block-end: clamp(.75rem, 1.5vw, 1.25rem); }
.journal-feature__title { margin: 0; max-width: 13ch; }
.journal-feature__link {
  color: var(--fg);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right 100%;
  transition: background-size var(--d-hover) var(--ease-out);
}
.journal-feature__link:hover, .journal-feature__link:focus-visible { background-size: 100% 1px; background-position: left 100%; }
.journal-feature__dek { margin-block-start: clamp(1rem, 2vw, 1.5rem); color: var(--fg-2); max-width: 36ch; }
.journal-feature__cta { margin-block-start: clamp(1rem, 2.5vw, 1.75rem); }
.journal-feature__still { display: block; }
.journal-feature__mat { background: none; }   /* mat--flush: the still fills the column and runs off the edge */

@media (max-width: 63.98em) {
  /* align-items:end comes from .grid--end; in a flex column it is the cross axis, which would
     shrink the still to zero width. Stretch it back. */
  .journal-feature__grid { display: flex; flex-direction: column; align-items: stretch; }
  .journal-feature__still { order: -1; margin-inline: calc(var(--margin) * -1); }
  .journal-feature__body { padding: 0; }
  .journal-feature__title { max-width: 18ch; }
}

/* ---- The rest: a hairline row per note — still, category, title, dek --------------------------- */
.journal-list { padding-block: calc(var(--section-gap) * .7) 0; }
.journal-list__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem var(--gap); margin-block-end: clamp(1.25rem, 2.5vw, 2rem); }
.journal-list__empty { color: var(--fg-3); padding-block: var(--block); }

.journal-notes { list-style: none; margin: 0; padding: 0; }
.journal-note { border-block-start: 1px solid var(--line); }
.journal-note:last-child { border-block-end: 1px solid var(--line); }
.journal-note__link {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  align-items: start; padding-block: clamp(1.75rem, 3.5vw, 2.75rem); color: inherit;
}
.journal-note__still { grid-column: 1 / 5; display: block; overflow: clip; background: var(--bg-2); aspect-ratio: 3 / 2; }
.journal-note__still img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-hover) var(--ease-out); }
.journal-note__body { grid-column: 5 / 11; display: flex; flex-direction: column; align-items: flex-start; }
.journal-note__cat { display: block; }
.journal-note__title {
  display: block; margin-block-start: .55rem; max-width: 26ch; text-wrap: balance; color: var(--fg);
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right 100%;
  transition: background-size var(--d-hover) var(--ease-out);
}
.journal-note__dek { display: block; margin-block-start: .6rem; color: var(--fg-2); max-width: 54ch; text-wrap: pretty; }
.journal-note__read { margin-block-start: .75rem; }
.journal-note__link:hover .journal-note__title, .journal-note__link:focus-visible .journal-note__title { background-size: 100% 1px; background-position: left 100%; }
.journal-note__link:hover .journal-note__still img, .journal-note__link:focus-visible .journal-note__still img { scale: 1.03; }
@media (hover: hover) {
  .journal-note__read { opacity: 0; translate: 0 4px; transition: opacity var(--d-hover) var(--ease-out), translate var(--d-hover) var(--ease-out); }
  .journal-note__link:hover .journal-note__read, .journal-note__link:focus-visible .journal-note__read { opacity: 1; translate: none; }
}
/* Between phone and desktop the still stays beside the copy: one full-width still per row
   would swamp the list. */
@media (min-width: 40em) and (max-width: 63.98em) {
  .journal-note__link { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
  .journal-note__still, .journal-note__body { grid-column: auto; }
  .journal-note__title { max-width: 26ch; }
}
@media (max-width: 39.98em) {
  .journal-note__link { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .journal-note__still, .journal-note__body { grid-column: 1 / -1; }
  .journal-note__title { max-width: 26ch; }
}

/* ---- Close ------------------------------------------------------------------------------------ */
.journal-close { padding-block: calc(var(--section-gap) * .7) calc(var(--section-gap) * .8); }
.journal-close__line { color: var(--fg-2); }

/* ================================================================================================
   Article — the reading page
   ================================================================================================ */
.reader__head { padding-block: clamp(2.5rem, 5vw, 5rem) 0; }
.reader__head .grid { row-gap: 0; }
.reader__eyebrow { margin-block-end: clamp(1rem, 2vw, 1.75rem); }
.reader__title { max-width: 16ch; margin: 0; }
.reader__standfirst { margin-block-start: clamp(1rem, 2vw, 1.5rem); color: var(--fg-2); }
.reader__meta { margin-block-start: clamp(.85rem, 1.6vw, 1.25rem); }

.reader__cover { margin-block-start: clamp(2rem, 4vw, 3.5rem); }
.reader__mat { background: none; }            /* mat--flush: the still lines up with the reading column */

/* The body: one measured column hung left, with the quotes breaking out a column to the right. */
.reader__body { position: relative; padding-block: clamp(2.5rem, 5vw, 4.5rem) 0; }
.reader__grid { align-items: start; }
.reader__p, .reader__list, .reader__rule, .reader__end, .reader__h2, .reader__note { grid-column: 1 / 7; max-width: var(--measure-read); }

.reader__p { font-size: var(--t-body); line-height: 1.65; color: var(--fg-2); text-wrap: pretty; margin-block-end: 1.35em; }
.reader__p--lead { font-size: var(--t-lead); line-height: 1.45; color: var(--fg); margin-block-end: 1.15em; max-width: var(--measure-lead); }

/* Subheads carry a short mark above them — the same tick the home page puts over its hairlines. */
.reader__h2 { position: relative; margin-block: 1.6rem .7rem; padding-block-start: 1.4rem;
  font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--fg); text-wrap: balance; }
.reader__h2::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 2.5rem; height: 1px; background: var(--accent-bright); }
.reader__h2:first-child { margin-block-start: 0; padding-block-start: 0; }
.reader__h2:first-child::before { display: none; }

.reader__pull { grid-column: 1 / 9; margin-block: 1.75rem 2.75rem; padding-block-start: 1.75rem; }
.reader__pull-rule { margin-block-end: 1.75rem; }
.reader__pull-text { font-size: var(--t-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--fg); max-width: 26ch; text-wrap: balance; }

/* A note: small type under a hairline, set apart by space rather than by a box. */
.reader__note { margin-block: 1.25rem 2.5rem; padding-block-start: 1rem; border-block-start: 1px solid var(--line);
  font-size: var(--t-small); line-height: 1.55; color: var(--fg-3); text-wrap: pretty; max-width: 46ch; }
.reader__note-label { display: block; margin-block-end: .5rem; }

.reader__list { margin-block: .1rem 1.75rem; }
.reader__list li { position: relative; padding-inline-start: 1.75em; color: var(--fg-2); text-wrap: pretty; }
.reader__list li + li { margin-block-start: .5em; }
.reader__list li::before { content: "—"; position: absolute; left: 0; color: var(--fg-3); }

.reader__rule { margin-block: 1.5rem 2.75rem; }
.reader__end { color: var(--fg-4); margin-block-start: 1.5rem; letter-spacing: .18em; }

/* The reading-progress line: 1px of --accent under the bar, driven by --read-p. */
.reader__line { z-index: calc(var(--z-nav) + 1); }

@media (max-width: 63.98em) {
  .reader__p, .reader__list, .reader__rule, .reader__end, .reader__h2, .reader__note, .reader__pull { grid-column: 1 / -1; }
  .reader__title { max-width: 20ch; }
  .reader__pull { margin-block: 1.5rem 2.25rem; }
}

/* ---- Foot: related notes, three up ------------------------------------------------------------- */
.reader__foot { padding-block: calc(var(--section-gap) * .7) calc(var(--section-gap) * .8); }
.reader__foot-rule { margin: 0; }
.reader__foot-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem var(--gap); margin-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem); }
.reader__more { list-style: none; margin: 0; padding: 0; row-gap: clamp(2rem, 4vw, 3rem); }

.journal-card { grid-column: span 4; }
.journal-card__link { display: flex; flex-direction: column; align-items: flex-start; color: inherit; }
.journal-card__still { display: block; width: 100%; overflow: clip; background: var(--bg-2); aspect-ratio: 3 / 2; margin-block-end: .9rem; }
.journal-card__still img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--d-hover) var(--ease-out); }
.journal-card__cat { display: block; }
.journal-card__title {
  display: block; margin-block-start: .5rem; color: var(--fg); text-wrap: balance;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0 1px; background-position: right 100%;
  transition: background-size var(--d-hover) var(--ease-out);
}
.journal-card__dek { display: block; margin-block-start: .55rem; color: var(--fg-2); max-width: 40ch; text-wrap: pretty; }
.journal-card__link:hover .journal-card__title, .journal-card__link:focus-visible .journal-card__title { background-size: 100% 1px; background-position: left 100%; }
.journal-card__link:hover .journal-card__still img, .journal-card__link:focus-visible .journal-card__still img { scale: 1.03; }

@media (max-width: 63.98em) { .journal-card { grid-column: span 6; } }
@media (max-width: 39.98em) { .journal-card { grid-column: span 4; } }