/* Journal index and article pages. Night into Day, like every page. Flat fills only. */

/* Extra sky keys inside a long section: invisible, zero-size markers the sky engine reads. */
.sky-key { position: absolute; left: 0; width: 0; height: 0; pointer-events: none; }

/* Emphasis stays upright everywhere: weight carries it, never slant. */
em, i, cite, dfn { font-style: normal; }
.prose em, .prose i { font-weight: 650; }

/* ---------------- Masthead: one sun per issue on the day's arc ---------------- */
.journal-hero .page-hero__art svg { max-height: 58vh; }
.m-path { fill: none; stroke: var(--ivory); stroke-opacity: .34; stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.m-horizon { stroke: var(--ivory); stroke-opacity: .22; stroke-width: 1; }
.m-disc { fill: var(--gold-600); }
.m-disc--latest { fill: var(--gold); }
.m-ring { fill: none; stroke: var(--gold-600); stroke-width: 1.5; opacity: .55; }
.m-ring--far { opacity: .28; }
.m-label { font-family: var(--font-body); font-size: 13px; font-weight: 650; letter-spacing: .14em; fill: var(--ivory); }
/* Hills drawn for the night hero: the far ridge darkest, the near one a step lighter. */
.m-hill { fill: var(--navy-700); }
.m-hill--front { fill: var(--navy-600); }
.m-rise { animation: m-rise 1.4s var(--ease-out-expo) both; animation-delay: calc(var(--i) * 140ms + 350ms); }
@keyframes m-rise { from { transform: translateY(54px); opacity: 0; } }

/* ---------------- Index: filter ---------------- */
.issues-sec { padding-top: clamp(4rem, 10vh, 7rem); }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.filter[hidden] { display: none; }
.filter__btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.1rem; border-radius: var(--radius-pill); border: 1px solid rgb(9 24 50 / 28%); background: transparent; color: inherit; font: inherit; font-size: var(--step-caption); font-weight: 600; cursor: pointer; transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base); }
.filter__btn span { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--paper-fg-muted); }
.filter__btn:hover { border-color: var(--navy); }
.filter__btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.filter__btn[aria-pressed="true"] span { color: var(--gold-100); }
/* The list opens before dawn, so the filter uses the dark styles there. */
.tone-dark .filter__btn { border-color: rgb(242 239 230 / 32%); }
.tone-dark .filter__btn span { color: var(--navy-fg-muted); }
.tone-dark .filter__btn:hover { border-color: var(--ivory); }
.tone-dark .filter__btn[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.tone-dark .filter__btn[aria-pressed="true"] span { color: var(--navy-700); }

/* ---------------- Issue cards (index and related reading) ----------------
   Solid paper cards with their own text colours, so they read on any sky from dawn to midday. */
.issues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.issue { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-card); overflow: hidden; background: var(--paper); color: var(--paper-fg); border: 1px solid rgb(9 24 50 / 12%); transition: transform var(--dur-base) var(--ease-out-expo), border-color var(--dur-base); }
.issue[hidden] { display: none; }
.issue:hover { transform: translateY(-4px); border-color: rgb(9 24 50 / 32%); }
.js .issue.rv.in:hover { transform: translateY(-4px); }
.issue:focus-within { border-color: var(--accent-text); }
.issue__art { position: relative; aspect-ratio: 16 / 7; background: var(--navy-700); }
.issue__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-sky { fill: var(--navy-700); }
.a-path { fill: none; stroke: var(--ivory); stroke-opacity: .28; stroke-width: 1.2; stroke-dasharray: 2 6; stroke-linecap: round; }
.a-dot { fill: var(--ivory); opacity: .4; }
.a-sun { fill: var(--gold); }
.a-ring { fill: none; stroke: var(--gold); stroke-width: 1.2; opacity: .4; }
.a-hill { fill: var(--navy-600); }
.a-hill--front { fill: var(--navy); }
.issue__num { position: absolute; left: 1.1rem; top: .85rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1; letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums; }
.issue__copy { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding: clamp(1.25rem, 2.4vw, 1.75rem); }
.issue__kicker { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--step-micro); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.issue h3 { font-size: clamp(1.3rem, 1.12rem + .7vw, 1.7rem); line-height: 1.15; overflow-wrap: break-word; }
.issue__link { text-decoration: none; transition: color var(--dur-base); }
.issue__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.issue:hover .issue__link { color: var(--accent-text); }
.issue__text { color: var(--paper-fg-muted); }
.issue .meta { margin-top: auto; padding-top: .35rem; color: var(--paper-fg-muted); }
.issue .text-link { border-bottom-color: var(--accent-text); }

/* The latest issue leads, full width. */
.issue--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.issue--lead .issue__art { order: 2; aspect-ratio: auto; min-height: 21rem; }
.issue--lead .issue__num { font-size: clamp(3rem, 2rem + 3.4vw, 5.5rem); left: clamp(1.25rem, 3vw, 2rem); top: clamp(1rem, 3vw, 1.75rem); }
.issue--lead .issue__copy { justify-content: center; gap: 1rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.issue--lead h3 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; max-width: 18ch; }
.issue--lead .issue__text { font-size: var(--step-subhead); line-height: 1.45; max-width: 44ch; }
.issue--lead .meta { margin-top: .25rem; }
.issue__more { align-self: flex-start; margin-top: .5rem; }

@media (max-width: 960px) { .issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .issue--lead { grid-template-columns: minmax(0, 1fr); }
  .issue--lead .issue__art { order: 0; min-height: 0; aspect-ratio: 16 / 8; }
}
@media (max-width: 600px) { .issues { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Article hero (Night) ---------------- */
.article-hero { min-height: auto; padding-block: 8rem clamp(3rem, 7vh, 5rem); }
.article-hero .page-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: center; }
.article-hero h1 { font-size: clamp(2.2rem, min(8.5cqi, 9vh), 4.6rem); line-height: 1.04; overflow-wrap: break-word; }
.article-hero .lede { max-width: 52ch; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--step-caption); color: var(--navy-fg-muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.crumbs a, .article-meta a { color: var(--ivory); text-decoration-color: var(--gold); text-underline-offset: .2em; }
.article-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(242 239 230 / 18%); font-size: var(--step-caption); color: var(--navy-fg-muted); }

/* Key figure: a flat sun with two thin rings. */
.keystat { margin: 0; min-height: 0; display: grid; justify-items: center; text-align: center; }
.keystat__sun { position: relative; display: grid; place-items: center; width: min(100% - 4rem, 15rem); aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: var(--navy); }
.keystat__sun::before, .keystat__sun::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid var(--gold-600); }
.keystat__sun::before { inset: -1rem; opacity: .5; }
.keystat__sun::after { inset: -2rem; opacity: .25; }
.keystat__value { padding: 0 1rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 2rem + 2.4vw, 4.2rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.keystat--long .keystat__value { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.2rem); line-height: 1.05; }
.keystat figcaption { margin-top: 3rem; max-width: 28ch; font-size: var(--step-caption); line-height: 1.45; color: var(--navy-fg-muted); }
.keystat figcaption small { display: block; margin-top: .6rem; font-size: var(--step-micro); }
@media (max-width: 760px) {
  .article-hero { padding-top: 6.5rem; }
  .article-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .article-hero .page-hero__art { order: 0; max-width: none; margin-top: 1rem; }
  .keystat__sun { width: 10rem; }
  .keystat figcaption { margin-top: 2.5rem; }
}

/* ---------------- Article body: rail + paper sheet ----------------
   The sky climbs from before dawn to sunrise behind this section, so the rail sits on its own paper panel. */
.article-body { padding-block: 1rem clamp(5rem, 12vh, 8rem); }
.article-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.article-rail { position: sticky; top: 6.5rem; display: grid; gap: 1.25rem; padding: clamp(1.1rem, 2vw, 1.4rem); border-radius: var(--radius-card); background: var(--paper); border: 1px solid rgb(9 24 50 / 10%); font-size: var(--step-caption); color: var(--paper-fg-muted); }
.article-rail > * + * { padding-top: 1.1rem; border-top: 1px solid rgb(9 24 50 / 14%); }
.rail-label { margin-bottom: .6rem; font-size: var(--step-micro); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-fg); }
.article-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.article-rail a { color: var(--paper-fg); text-decoration: none; }
.article-rail a:hover { text-decoration: underline; text-decoration-color: var(--accent-text); text-underline-offset: .2em; }
.article-rail .note { margin-top: .9rem; padding: .6rem .9rem; font-size: var(--step-micro); }
.article-sheet { max-width: 50rem; min-width: 0; border: 1px solid rgb(9 24 50 / 10%); }
.brief { margin-bottom: clamp(2rem, 5vh, 3rem); padding: clamp(1.1rem, 2.5vw, 1.5rem); border-radius: 10px; background: var(--paper-dim); border-top: 2px solid var(--accent-text); }
.brief h2 { margin-top: .7rem; font-size: var(--step-subhead); line-height: 1.2; }
.brief ul { margin: .9rem 0 0; padding-left: 1.15em; display: grid; gap: .45rem; }
.post-body > p:first-child { font-size: var(--step-subhead); line-height: 1.55; }
.post-body h2 { scroll-margin-top: 6rem; }
.post-body blockquote { margin: 1.6em 0; }
.post-body strong { font-weight: 650; }
.sources { margin-top: clamp(2.5rem, 6vh, 3.5rem); padding-top: 1.75rem; border-top: 1px solid rgb(9 24 50 / 14%); }
.sources h2 { margin-top: .7rem; font-size: var(--step-h3); line-height: 1.15; }
.sources ol { margin: 1.1rem 0 0; padding-left: 1.3em; display: grid; gap: .9rem; }
.sources a { font-weight: 650; text-decoration-color: var(--accent-text); text-underline-offset: .2em; }
.sources li p { margin-top: .2rem; font-size: var(--step-caption); color: var(--paper-fg-muted); }
.back { margin-top: 2.25rem; }
.text-link--back { border-bottom-color: var(--accent-text); }
.text-link--back svg { transform: rotate(180deg); }
.text-link--back:hover svg { transform: rotate(180deg) translateX(3px); }
@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .article-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
  .article-rail > * + * { padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .article-rail { grid-template-columns: minmax(0, 1fr); }
  .article-rail > * + * { padding-top: 1.1rem; border-top: 1px solid rgb(9 24 50 / 14%); }
}

/* Related reading and closing call. */
.related .issues { margin-top: 0; }
.cta-band > .text-link { margin-top: .25rem; }

/* ---------------- Reading progress: a thin gold line under the top edge ----------------
   A navy edge under the gold keeps it visible once the sky turns to paper. */
.read-progress { position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; transition: opacity var(--dur-base); }
.read-progress i { display: block; height: 100%; background: var(--gold); box-shadow: 0 1px 0 var(--navy); transform-origin: 0 50%; transform: scaleX(0); }
.menu-open .read-progress { opacity: 0; }