/* ==========================================================================
   THE EDITION — Portal design system v2 (2026)

   A publication-first layout system used by 7 of the 8 portals (every portal
   except techna-pologne, which ships its own Neobrutalist system in its own
   theme CSS file and overrides everything here).

   Primitives exposed:
     .masthead          — top-of-page wordmark + edition strip + nav
     .cover             — full-viewport opening spread (hero)
     .spread            — asymmetric two-panel composition
     .plate             — oversized typographic tile (missing-image fallback)
     .index             — newspaper table-of-contents list w/ dot-leaders
     .rail              — vertical meta rail for single-post TOC/share/progress
     .colophon          — footer as publication credits page
     .archive-hero      — oversized category-name index masthead

   Token contract with per-portal theme CSS (each theme sets these):
     --primary-color      brand primary (accent)
     --primary-deep       darker variant
     --primary-contrast   readable text on primary
     --accent-color       second strong accent
     --surface-paper      light background
     --surface-ink        dark background (plates, colophon)
     --text-color         body text
     --text-secondary     muted text
     --heading-color      display heads
     --rule-color         hairline rule color
     --rule-width         hairline rule weight (default 1px)
     --font-display       masthead + display type
     --font-body          essay type
     --font-caption       captions, meta, dot-leaders
     --display-italic     theme opts into italic display via .is-italic class
     --plate-bg-1..4      4 deterministic plate colors
     --plate-ink          plate text color
   ========================================================================== */

:root {
    /* Measure + rhythm */
    --measure:            68ch;
    --measure-narrow:     52ch;
    --measure-wide:       84ch;
    --line:               clamp(1px, 0.08vw, 2px);
    --gutter:             clamp(1rem, 2.5vw, 2rem);
    --gutter-lg:          clamp(2rem, 5vw, 4rem);

    /* Containers */
    --container:          min(1440px, 100%);
    --container-inner:    min(1280px, 94vw);
    --container-narrow:   min(760px, 92vw);

    /* Fluid type scale — deliberate jumps, not uniform */
    --t-caption:          0.72rem;
    --t-small:            0.82rem;
    --t-body:             1.0625rem;
    --t-body-lg:          1.1875rem;
    --t-lead:             1.375rem;
    --t-h4:               1.5rem;
    --t-h3:               clamp(1.75rem, 2.5vw, 2.375rem);
    --t-h2:               clamp(2.125rem, 4vw, 3.25rem);
    --t-h1:               clamp(2.5rem, 6vw, 4.5rem);
    --t-display:          clamp(2.5rem, 4.2vw, 4.25rem);
    --t-display-xl:       clamp(2.75rem, 5.5vw, 5rem);

    /* Motion */
    --ease-page:          cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast:           240ms;
    --dur-base:           480ms;
    --dur-slow:           720ms;
    --dur-letter-stagger: 30ms;

    /* Spacing */
    --s-1: 0.25rem;   --s-2: 0.5rem;   --s-3: 0.75rem;
    --s-4: 1rem;      --s-5: 1.5rem;   --s-6: 2rem;
    --s-7: 3rem;      --s-8: 4.5rem;   --s-9: 6rem;
    --s-section:      clamp(2.5rem, 4vw, 3.5rem);

    /* Fallback tokens — per-portal themes override */
    --primary-color:      #0a0a0a;
    --primary-deep:       #000000;
    --primary-contrast:   #ffffff;
    --accent-color:       #b8842d;
    --surface-paper:      #f5f0e8;
    --surface-ink:        #0a0a0a;
    --text-color:         #1a1a1a;
    --text-secondary:     #6b6b6b;
    --heading-color:      #0a0a0a;
    --rule-color:         rgba(10,10,10,0.42);
    --rule-width:         1px;
    --font-display:       Georgia, 'Times New Roman', serif;
    --font-body:          'Helvetica Neue', Arial, sans-serif;
    --font-caption:       'JetBrains Mono', monospace;
    --display-weight:     400;
    --plate-bg-1:         #1a1a1a;
    --plate-bg-2:         #3b2415;
    --plate-bg-3:         #2a2a2a;
    --plate-bg-4:         #b8842d;
    --plate-ink:          #f5f0e8;

    --z-nav: 50; --z-rail: 40; --z-modal: 100;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--text-color);
    background: var(--surface-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: var(--rule-width); }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--heading-color);
    text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); line-height: 1.15; }

p { font-size: var(--t-body); line-height: 1.65; }
p + p { margin-top: var(--s-4); }

::selection { background: var(--accent-color); color: var(--primary-contrast); }

.mono, .t-caption { font-family: var(--font-caption); font-variant-numeric: tabular-nums; }

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

.wrap        { width: var(--container-inner); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide   { width: var(--container);       margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }

/* ==========================================================================
   Rule system — hairlines, double rules, dot leaders
   ========================================================================== */

.rule-hair        { border-top: var(--rule-width) solid var(--rule-color); }
.rule-hair-bottom { border-bottom: var(--rule-width) solid var(--rule-color); }
.rule-hair-both   { border-top: var(--rule-width) solid var(--rule-color); border-bottom: var(--rule-width) solid var(--rule-color); }
.rule-double {
    border-top: var(--rule-width) solid var(--rule-color);
    box-shadow: 0 4px 0 calc(-4px + var(--rule-width)) var(--rule-color);
    padding-top: 6px;
}
.rule-dots {
    display: flex; align-items: baseline; gap: var(--s-3);
}
.rule-dots::before {
    content: "";
    flex: 1;
    border-bottom: var(--rule-width) dotted var(--rule-color);
    transform: translateY(-4px);
    min-width: var(--s-6);
}

.kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text-secondary);
}
.kicker--accent { color: var(--accent-color); font-weight: 600; }
.kicker--ink    { color: var(--heading-color); font-weight: 600; }

.index-num {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.index-num--big {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    letter-spacing: 0;
    font-weight: var(--display-weight);
    font-style: italic;
    color: var(--accent-color);
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead {
    background: var(--surface-paper);
    padding-block: var(--s-5) var(--s-3);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.masthead__top {
    display: flex; align-items: baseline; justify-content: space-between;
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-bottom: var(--s-3);
}
.masthead__top-left, .masthead__top-right { display: flex; gap: var(--s-5); align-items: baseline; }
.masthead__top a { color: inherit; }

.masthead__wordmark {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--t-display);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-align: center;
    color: var(--heading-color);
    padding-block: var(--s-4) var(--s-5);
    text-decoration: none !important;
    overflow-wrap: break-word;
    hyphens: auto;
}
.masthead__wordmark.is-italic { font-style: italic; }
.masthead__wordmark:hover { text-decoration: none !important; }

.masthead__edition-strip {
    display: flex; align-items: center; justify-content: center;
    gap: var(--s-5);
    padding-block: var(--s-2) var(--s-5);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: var(--rule-width) solid var(--rule-color);
    border-bottom: var(--rule-width) solid var(--rule-color);
    flex-wrap: wrap;
}
.masthead__edition-strip span { white-space: nowrap; }
.masthead__edition-strip .sep { opacity: 0.5; }

.masthead__nav {
    display: flex;
    gap: var(--s-6);
    justify-content: center;
    align-items: baseline;
    padding-top: var(--s-5);
    flex-wrap: wrap;
}
.masthead__nav a {
    font-family: var(--font-caption);
    font-size: var(--t-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-color);
    padding-block: 2px;
    border-bottom: var(--rule-width) solid transparent;
    transition: border-color var(--dur-fast) var(--ease-page), color var(--dur-fast) var(--ease-page);
}
.masthead__nav a:hover { border-bottom-color: var(--accent-color); color: var(--heading-color); text-decoration: none; }
.masthead__nav a.is-current { border-bottom-color: var(--heading-color); }

@media (max-width: 720px) {
    .masthead__top-left .extra, .masthead__top-right .extra { display: none; }
    .masthead__wordmark { font-size: clamp(2.5rem, 14vw, 4.5rem); padding-block: var(--s-3); }
    .masthead__edition-strip { font-size: 0.65rem; gap: var(--s-3); padding-inline: var(--s-4); }
    .masthead__nav { gap: var(--s-4); font-size: 0.72rem; padding-top: var(--s-4); }
}

/* ==========================================================================
   COVER
   ========================================================================== */

.cover {
    position: relative;
    padding-block: var(--s-8) var(--s-section);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.cover__inner {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--gutter-lg);
    align-items: end;
    min-height: 44vh;
    max-height: 560px;
}
.cover__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-ink);
}
.cover__media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: saturate(0.92) contrast(1.03);
    transition: filter var(--dur-slow) var(--ease-page);
}
@media (hover: hover) {
    .cover:hover .cover__media img { filter: saturate(1.05) contrast(1.05); }
}
.cover__body { padding-bottom: var(--s-3); }
.cover__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-5);
    display: flex; align-items: center; gap: var(--s-3);
}
.cover__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    color: var(--heading-color);
}
.cover__title {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-size: var(--t-display);
    line-height: 0.95;
    letter-spacing: -0.028em;
    color: var(--heading-color);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
    margin-bottom: var(--s-5);
}
.cover__title.is-italic { font-style: italic; }
.cover__title a { color: inherit; }
.cover__title a:hover { color: var(--accent-color); text-decoration: none; }
.cover__lede {
    font-family: var(--font-body);
    font-size: var(--t-lead);
    line-height: 1.45;
    color: var(--text-color);
    max-width: 46ch;
    margin-bottom: var(--s-5);
}
.cover__meta {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex; gap: var(--s-4); align-items: baseline;
    border-top: var(--rule-width) solid var(--rule-color);
    padding-top: var(--s-4);
}
.cover__link {
    display: inline-flex; align-items: baseline; gap: var(--s-2);
    margin-top: var(--s-5);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--heading-color);
    font-weight: 600;
    border-bottom: 1px solid var(--heading-color);
    padding-bottom: 2px;
}

/* Cover media without image — use a type-plate */
.cover__media.is-plate {
    background: var(--plate-bg, var(--plate-bg-1));
    color: var(--plate-ink);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--s-5);
}
.cover__media.is-plate .plate__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    opacity: 0.78;
}
.cover__media.is-plate .plate__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.8;
}

@media (max-width: 900px) {
    .cover__inner { grid-template-columns: 1fr; min-height: 0; gap: var(--s-6); }
    .cover__media { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   SPREAD
   ========================================================================== */

.spread {
    padding-block: var(--s-section);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.spread__inner {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--gutter-lg);
    align-items: center;
}
.spread--reverse .spread__inner { grid-template-columns: 1fr 1.1fr; }
.spread--reverse .spread__body { order: 1; }
.spread--reverse .spread__media { order: 2; }
.spread__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.spread__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.2s var(--ease-page);
}
.spread__body { padding-block: var(--s-4); max-width: 52ch; }
.spread__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-4);
    display: flex; align-items: center; gap: var(--s-3);
}
.spread__kicker::before {
    content: ""; display: inline-block;
    width: 32px; height: 1px; background: currentColor; opacity: 0.6;
}
.spread__title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--heading-color);
    margin-bottom: var(--s-5);
}
.spread__title.is-italic { font-style: italic; }
.spread__title a { color: inherit; }
.spread__title a:hover { color: var(--accent-color); text-decoration: none; }
.spread__excerpt {
    font-size: var(--t-body-lg);
    line-height: 1.55;
    color: var(--text-color);
    margin-bottom: var(--s-5);
}
.spread__meta {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex; gap: var(--s-4); align-items: baseline;
    border-top: var(--rule-width) solid var(--rule-color);
    padding-top: var(--s-4);
}
@media (max-width: 900px) {
    .spread__inner, .spread--reverse .spread__inner { grid-template-columns: 1fr; }
    .spread--reverse .spread__body { order: 2; }
    .spread--reverse .spread__media { order: 1; }
}

/* ==========================================================================
   PLATE
   ========================================================================== */

.plate {
    position: relative;
    aspect-ratio: 3 / 4;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--plate-bg, var(--plate-bg-1));
    color: var(--plate-ink);
    overflow: hidden;
    text-decoration: none;
}
.plate:hover { text-decoration: none; }
.plate__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 0.88;
    letter-spacing: -0.02em;
    opacity: 0.78;
}
.plate__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: var(--s-3);
}
.plate__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--plate-ink);
    text-wrap: balance;
}
.plate__title.is-italic { font-style: italic; }
.plate__meta {
    margin-top: var(--s-4);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.68;
    border-top: 1px solid currentColor;
    padding-top: var(--s-3);
}

/* Full-width plate row between image-heavy sections */
.plate-row {
    padding-block: var(--s-section);
    background: var(--surface-paper);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.plate-row__inner {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: var(--rule-width) solid var(--rule-color);
}
.plate-row__inner .plate {
    aspect-ratio: 4 / 5;
    border-right: var(--rule-width) solid rgba(255,255,255,0.14);
}
.plate-row__inner .plate:last-child { border-right: 0; }
@media (max-width: 900px) {
    .plate-row__inner { grid-template-columns: 1fr; }
    .plate-row__inner .plate { border-right: 0; border-bottom: var(--rule-width) solid rgba(255,255,255,0.14); aspect-ratio: 3 / 2; }
    .plate-row__inner .plate:last-child { border-bottom: 0; }
}

/* ==========================================================================
   INDEX
   ========================================================================== */

.index {
    padding-block: var(--s-section);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.index__inner {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2.2fr;
    gap: var(--gutter-lg);
    align-items: start;
}
.index__head { position: sticky; top: var(--s-5); }
.index__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-4);
}
.index__name {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--heading-color);
    margin-bottom: var(--s-4);
}
.index__name.is-italic { font-style: italic; }
.index__blurb {
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 30ch;
}
.index__all-link {
    display: inline-flex; align-items: baseline;
    margin-top: var(--s-5);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--heading-color);
    font-weight: 600;
    border-bottom: var(--rule-width) solid var(--heading-color);
    padding-bottom: 2px;
}
.index__list { list-style: none; padding: 0; margin: 0; }
.index__list > li { border-top: var(--rule-width) solid var(--rule-color); }
.index__list > li:last-child { border-bottom: var(--rule-width) solid var(--rule-color); }
.index__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--s-4);
    padding-block: var(--s-4);
    text-decoration: none;
    color: inherit;
    transition: color var(--dur-fast) var(--ease-page);
}
.index__row:hover { color: var(--accent-color); text-decoration: none; }
.index__row-num {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 3em;
}
.index__row-title {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.625rem);
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--heading-color);
    text-wrap: balance;
}
.index__row:hover .index__row-title { color: inherit; }
.index__row-title.is-italic { font-style: italic; }
.index__row-meta {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

@media (max-width: 820px) {
    .index__inner { grid-template-columns: 1fr; gap: var(--s-6); }
    .index__head { position: static; }
    .index__row { grid-template-columns: auto 1fr; row-gap: var(--s-1); }
    .index__row-meta { grid-column: 1 / -1; font-size: 0.68rem; }
}

/* ==========================================================================
   SINGLE ARTICLE — rail + narrow reading column
   ========================================================================== */

.single-article {
    padding-block: var(--s-8) var(--s-section);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.single-article__wrap {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--gutter-lg);
    align-items: start;
}
.rail {
    position: sticky;
    top: var(--s-6);
    align-self: start;
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.rail__label {
    padding-bottom: var(--s-3);
    border-bottom: var(--rule-width) solid var(--rule-color);
    margin-bottom: var(--s-4);
    color: var(--accent-color);
    font-weight: 600;
}
.rail__toc { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.rail__toc li { padding-block: var(--s-2); border-bottom: var(--rule-width) dotted var(--rule-color); }
.rail__toc a {
    display: grid;
    grid-template-columns: 2em 1fr;
    align-items: baseline;
    column-gap: var(--s-2);
    color: var(--text-color);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.35;
    text-decoration: none;
}
.rail__toc a:hover { color: var(--accent-color); text-decoration: none; }
.rail__toc a.is-active { color: var(--accent-color); }
.rail__toc .num { color: var(--text-secondary); font-family: var(--font-caption); font-variant-numeric: tabular-nums; }
.rail__share { display: flex; flex-direction: column; gap: 0; margin-top: var(--s-5); }
.rail__share a {
    border-top: var(--rule-width) solid var(--rule-color);
    padding-block: var(--s-3);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: var(--t-caption);
}
.rail__share a:last-child { border-bottom: var(--rule-width) solid var(--rule-color); }
.rail__share a:hover { color: var(--accent-color); text-decoration: none; }

@media (max-width: 1000px) {
    .single-article__wrap { grid-template-columns: 1fr; }
    .rail { display: none; }
}

.reading-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0%;
    background: var(--accent-color);
    z-index: var(--z-modal);
    transition: width 60ms linear;
    pointer-events: none;
}

.single-article__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-4);
}
.single-article__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.028em;
    color: var(--heading-color);
    margin-bottom: var(--s-5);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}
.single-article__title.is-italic { font-style: italic; }
.single-article__lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.25;
    color: var(--text-color);
    max-width: 46ch;
    margin-bottom: var(--s-6);
    font-weight: 400;
    letter-spacing: -0.005em;
}
.single-article__meta {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex; gap: var(--s-4); align-items: baseline;
    border-top: var(--rule-width) solid var(--rule-color);
    border-bottom: var(--rule-width) solid var(--rule-color);
    padding-block: var(--s-4);
    margin-bottom: var(--s-7);
}
.single-article__hero {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--s-7);
}
.single-article__hero img { width: 100%; height: 100%; object-fit: cover; }

.entry-content {
    max-width: var(--measure);
    margin-inline: auto;
    font-size: var(--t-body-lg);
    line-height: 1.7;
    color: var(--text-color);
}
.entry-content > * + * { margin-top: var(--s-5); }
.entry-content h2 {
    font-size: var(--t-h2);
    font-family: var(--font-display);
    margin-top: var(--s-7);
    margin-bottom: var(--s-3);
    scroll-margin-top: var(--s-6);
    overflow-wrap: break-word;
    hyphens: auto;
}
.entry-content h3 {
    font-size: var(--t-h3);
    font-family: var(--font-display);
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
    scroll-margin-top: var(--s-6);
    overflow-wrap: break-word;
    hyphens: auto;
}
.entry-content p { font-size: var(--t-body-lg); line-height: 1.75; }
.entry-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 4.5em;
    line-height: 0.88;
    padding: 0.08em 0.1em 0 0;
    margin-right: 0.08em;
    color: var(--accent-color);
    font-weight: var(--display-weight);
}
.entry-content a {
    color: inherit;
    border-bottom: var(--rule-width) solid var(--accent-color);
    padding-bottom: 1px;
    transition: background var(--dur-fast) var(--ease-page);
}
.entry-content a:hover { background: var(--accent-color); color: var(--primary-contrast); text-decoration: none; }
.entry-content blockquote {
    margin: var(--s-7) 0;
    padding: var(--s-5) 0;
    border-top: var(--rule-width) solid var(--rule-color);
    border-bottom: var(--rule-width) solid var(--rule-color);
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.25;
    color: var(--heading-color);
    text-wrap: balance;
}
.entry-content blockquote p { font-size: inherit; line-height: inherit; }
.entry-content img { width: 100%; margin-block: var(--s-6); }
.entry-content ul, .entry-content ol { padding-left: var(--s-5); }
.entry-content li + li { margin-top: var(--s-2); }
.entry-content hr { margin-block: var(--s-7); border: 0; border-top: var(--rule-width) solid var(--rule-color); }

/* Next feature — closing block after single article */
.next-feature {
    padding-block: var(--s-section);
    background: var(--surface-ink);
    color: var(--plate-ink);
}
.next-feature__inner {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: var(--gutter-lg);
    align-items: center;
}
.next-feature__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-4);
}
.next-feature__title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    line-height: 1;
    letter-spacing: -0.028em;
    color: var(--plate-ink);
    margin-bottom: var(--s-5);
}
.next-feature__title.is-italic { font-style: italic; }
.next-feature__title a { color: inherit; }
.next-feature__media { aspect-ratio: 4 / 5; overflow: hidden; }
.next-feature__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }
.next-feature__link {
    display: inline-flex; align-items: baseline; gap: var(--s-2);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--plate-ink);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
@media (max-width: 900px) {
    .next-feature__inner { grid-template-columns: 1fr; }
    .next-feature__media { order: -1; }
}

/* ==========================================================================
   COLOPHON
   ========================================================================== */

.colophon {
    padding-block: var(--s-section) var(--s-7);
    background: var(--surface-ink);
    color: var(--plate-ink);
}
.colophon__inner { width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.colophon__top {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--gutter-lg);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.colophon__wordmark {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--plate-ink);
}
.colophon__wordmark.is-italic { font-style: italic; }
.colophon__tagline {
    margin-top: var(--s-4);
    font-family: var(--font-caption);
    font-size: var(--t-small);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    max-width: 42ch;
}
.colophon__newsletter {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    align-self: end;
}
.colophon__newsletter form { display: flex; gap: var(--s-3); align-items: baseline; margin-top: var(--s-3); }
.colophon__newsletter input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding: var(--s-2) 0;
    color: var(--plate-ink);
    font-family: var(--font-body);
    font-size: var(--t-body);
    letter-spacing: 0;
    text-transform: none;
    flex: 1;
    outline: none;
}
.colophon__newsletter input::placeholder { color: rgba(255,255,255,0.4); }
.colophon__newsletter input:focus { border-bottom-color: var(--accent-color); }
.colophon__newsletter button {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--plate-ink);
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 2px;
    background: transparent;
}

.colophon__credits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter-lg) var(--s-5);
    padding-block: var(--s-7);
}
.colophon__credit h5 {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-3);
}
.colophon__credit ul { list-style: none; padding: 0; margin: 0; }
.colophon__credit li { padding-block: 4px; font-family: var(--font-body); font-size: 0.95rem; }
.colophon__credit li a { color: rgba(255,255,255,0.8); }
.colophon__credit li a:hover { color: var(--plate-ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.colophon__credit p { font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.72); }

.colophon__bottom {
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255,255,255,0.18);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    flex-wrap: wrap;
    gap: var(--s-3);
}
.colophon__bottom a:hover { color: var(--plate-ink); text-decoration: none; border-bottom: 1px solid currentColor; }

@media (max-width: 900px) {
    .colophon__top { grid-template-columns: 1fr; }
    .colophon__credits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
    .colophon__credits { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ARCHIVE HERO + BODY
   ========================================================================== */

.archive-hero {
    padding-block: var(--s-section) var(--s-6);
    border-bottom: var(--rule-width) solid var(--rule-color);
}
.archive-hero__inner {
    width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--gutter-lg);
    align-items: end;
}
.archive-hero__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-4);
}
.archive-hero__name {
    font-family: var(--font-display);
    font-size: var(--t-display-xl);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--heading-color);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}
.archive-hero__name.is-italic { font-style: italic; }
.archive-hero__blurb {
    font-size: var(--t-body-lg);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 40ch;
}
.archive-hero__count {
    margin-top: var(--s-4);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-top: var(--rule-width) solid var(--rule-color);
    padding-top: var(--s-3);
}
@media (max-width: 820px) {
    .archive-hero__inner { grid-template-columns: 1fr; }
}

.archive-body { padding-block: var(--s-5) var(--s-section); }
.archive-body__inner { width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.archive-pagination {
    display: flex;
    justify-content: center;
    gap: var(--s-4);
    padding-top: var(--s-7);
    border-top: var(--rule-width) solid var(--rule-color);
    margin-top: var(--s-6);
}
.archive-pagination a, .archive-pagination span {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: var(--s-2) var(--s-3);
    border-bottom: var(--rule-width) solid transparent;
}
.archive-pagination a:hover, .archive-pagination .current { color: var(--heading-color); border-bottom-color: var(--accent-color); text-decoration: none; }

/* Archive featured card */
.edition-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--gutter-lg);
    align-items: center;
    padding-block: var(--s-7);
    border-top: var(--rule-width) solid var(--rule-color);
    border-bottom: var(--rule-width) solid var(--rule-color);
    margin-bottom: var(--s-6);
}
.edition-card__media { aspect-ratio: 4 / 5; overflow: hidden; }
.edition-card__media img { width: 100%; height: 100%; object-fit: cover; }
.edition-card__kicker {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-3);
}
.edition-card__title {
    font-family: var(--font-display);
    font-size: var(--t-h1);
    line-height: 0.98;
    letter-spacing: -0.025em;
    color: var(--heading-color);
    margin-bottom: var(--s-4);
    text-wrap: balance;
}
.edition-card__title a { color: inherit; }
.edition-card__title a:hover { color: var(--accent-color); text-decoration: none; }
.edition-card__excerpt {
    font-size: var(--t-body-lg);
    line-height: 1.55;
    color: var(--text-color);
    margin-bottom: var(--s-4);
    max-width: 48ch;
}
.edition-card__meta {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    display: flex; gap: var(--s-4); align-items: baseline;
}
@media (max-width: 820px) { .edition-card { grid-template-columns: 1fr; } }

/* ==========================================================================
   Legacy archive tag cloud / cross-nav (from main upstream) — edition-styled
   ========================================================================== */

.archive-tag-cloud, .archive-cross-nav {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: var(--rule-width) solid var(--rule-color);
}
.archive-section-title {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-4);
}
.tag-cloud-list { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tag-cloud-item {
    display: inline-flex; align-items: baseline; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    border: var(--rule-width) solid var(--rule-color);
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-color);
    text-decoration: none;
}
.tag-cloud-item:hover { background: var(--heading-color); color: var(--surface-paper); text-decoration: none; }
.tag-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.cross-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--s-4); }
.cross-nav-item {
    padding: var(--s-4); border: var(--rule-width) solid var(--rule-color);
    display: flex; flex-direction: column; gap: var(--s-2);
    font-family: var(--font-caption);
    text-decoration: none;
    color: var(--text-color);
}
.cross-nav-item:hover { background: var(--heading-color); color: var(--surface-paper); text-decoration: none; }
.cross-nav-name { font-family: var(--font-display); font-size: var(--t-h4); letter-spacing: -0.01em; text-transform: none; }
.cross-nav-count { font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase; color: inherit; opacity: 0.75; }

/* ==========================================================================
   Scroll reveal — gentle rise on display headlines
   ========================================================================== */

[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-page), transform var(--dur-slow) var(--ease-page);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Utility
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px;
    overflow: hidden;
    white-space: nowrap;
}
.stack > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-5); }
.text-italic { font-style: italic; }
.text-display { font-family: var(--font-display); }
.text-caption { font-family: var(--font-caption); }
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter-lg); }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.breadcrumbs, .pbn-breadcrumbs {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding-block: var(--s-4);
}
.breadcrumbs a, .pbn-breadcrumbs a { color: inherit; }
.breadcrumbs ol, .pbn-breadcrumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}
.breadcrumbs li, .pbn-breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs .separator, .pbn-breadcrumbs .separator { opacity: 0.45; }

/* Author box after article */
.author-box {
    max-width: var(--measure);
    margin: var(--s-7) auto 0;
    padding: var(--s-5) 0;
    border-top: var(--rule-width) solid var(--rule-color);
    border-bottom: var(--rule-width) solid var(--rule-color);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--s-5);
    align-items: start;
}
.author-box .author-avatar img { border-radius: 0; width: 80px; height: 80px; object-fit: cover; }
.author-box .author-name {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: var(--s-2);
}
.author-box .author-name a { color: inherit; border-bottom: 1px solid transparent; }
.author-box .author-name a:hover { border-bottom-color: var(--accent-color); text-decoration: none; }
.author-box .author-description {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--t-body-lg);
    line-height: 1.45;
    color: var(--text-color);
    margin-bottom: var(--s-3);
}
.author-box .author-link {
    font-family: var(--font-caption);
    font-size: var(--t-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}