/* ============================================================
   fradzano.com — editorial patina system
   Ported from the "fradzano.com Design System" (Claude Design).
   One family (Source Serif 4), warm-stone paper, one subject-derived
   accent (patina) spent only on structure — the series spine, the
   active TOC state, series nav, and the focus ring. Reading is the
   product; the design's one job is to get out of the way of a
   4000-word argument.

   Fonts are self-hosted (DSGVO: no third-party font CDN) and carry
   the opsz + wght variable axes and real `smcp` small-cap glyphs.
   ============================================================ */

/* ---------- self-hosted webfonts ---------- */
@font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 200 900;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/source-serif-4-opsz-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 200 900;
    font-stretch: normal;
    font-display: swap;
    src: url('/fonts/source-serif-4-opsz-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/source-code-pro-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/source-code-pro-500.woff2') format('woff2');
}

/* ============================================================
   TOKENS
   ============================================================ */

/* ---- colour: warm stone paper, warm ink, one patina accent ---- */
:root {
    /* base ramp: warm stone paper */
    --stone-50:  #F2EEE3;
    --stone-100: #ECE7DB;
    --stone-200: #E5E0D2;   /* the paper */
    --stone-300: #DBD5C4;
    --stone-400: #CCC5B1;
    --stone-500: #B4AC94;

    /* base ramp: warm ink */
    --ink-900: #1C1A15;     /* headings / near-black */
    --ink-800: #262319;
    --ink-700: #3A362B;     /* body text */
    --ink-500: #6B6552;     /* muted metadata */
    --ink-400: #857E68;     /* faint / captions */

    /* accent: patina (oxidation) */
    --patina-700: #35504A;
    --patina-600: #45635A;  /* the accent */
    --patina-500: #567367;
    --patina-300: #8AA79B;
    --patina-100: #C9D6CF;

    /* semantic aliases (light) */
    --paper:          var(--stone-200);
    --paper-raised:   var(--stone-100);
    --paper-sunken:   var(--stone-300);
    --paper-inset:    var(--stone-50);

    --text-strong:    var(--ink-900);
    --text-body:      var(--ink-700);
    --text-muted:     var(--ink-500);
    --text-faint:     var(--ink-400);

    --rule:           #D0C9B8;   /* hairline dividers */
    --rule-strong:    #BDB49E;
    --selection:      #D8CBB0;

    --accent:         var(--patina-600);
    --accent-strong:  var(--patina-700);
    --accent-quiet:   var(--patina-300);
    --spine:          var(--patina-600);   /* the series-spine device */
    --focus:          var(--patina-600);

    color-scheme: light;
}

/* ---- explicit dark theme (not a mechanical inversion) ---- */
:root[data-theme="dark"] {
    --paper:          #16150F;
    --paper-raised:   #1E1C14;
    --paper-sunken:   #100F0A;
    --paper-inset:    #232016;

    --text-strong:    #EDE8DA;
    --text-body:      #D8D2C2;
    --text-muted:     #9A9280;
    --text-faint:     #7C7563;

    --rule:           #322E25;
    --rule-strong:    #47422F;
    --selection:      #3A4B44;

    --accent:         #86A99B;
    --accent-strong:  #9DBEB0;
    --accent-quiet:   #4E6A61;
    --spine:          #86A99B;
    --focus:          #9DBEB0;

    color-scheme: dark;
}

/* ---- typography ---- */
:root {
    --font-serif: "Source Serif 4", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
    --font-mono:  "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* type scale (rem @ 16px root) */
    --fs-micro:   0.75rem;    /* 12px */
    --fs-label:   0.8125rem;  /* 13px */
    --fs-meta:    0.9375rem;  /* 15px */
    --fs-small:   1.0625rem;  /* 17px */
    --fs-body:    1.25rem;    /* 20px — reading body */
    --fs-lead:    1.4375rem;  /* 23px */
    --fs-h3:      1.5rem;     /* 24px */
    --fs-h2:      2rem;       /* 32px */
    --fs-h1:      clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);
    --fs-display: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);

    /* line-heights */
    --lh-solid:  1;
    --lh-tight:  1.14;
    --lh-snug:   1.28;
    --lh-lede:   1.45;
    --lh-body:   1.62;
    --lh-loose:  1.78;

    /* weights */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* tracking */
    --track-caps:   0.075em;
    --track-tight: -0.011em;
    --track-normal: 0;

    /* measure (line length) */
    --measure:       66ch;
    --measure-wide:  52rem;
    --measure-narrow:52ch;
}

/* ---- spacing, rhythm, layout, radius, motion ---- */
:root {
    --space-3xs: 0.25rem;   /*  4px */
    --space-2xs: 0.5rem;    /*  8px */
    --space-xs:  0.75rem;   /* 12px */
    --space-s:   1rem;      /* 16px */
    --space-m:   1.5rem;    /* 24px */
    --space-l:   2rem;      /* 32px */
    --space-xl:  3rem;      /* 48px */
    --space-2xl: 4.5rem;    /* 72px */
    --space-3xl: 7rem;      /* 112px */

    --baseline:   1.62rem;
    --flow:       1.35em;
    --flow-tight: 0.6em;

    --gutter:      clamp(1.25rem, 5vw, 3rem);
    --frame:       76rem;      /* outer page frame */
    --margin-note: 15rem;

    --radius-0:  0;
    --radius-sm: 2px;
    --radius:    3px;
    --radius-pill: 999px;

    --hair:    1px;
    --rule-w:  1px;
    --spine-w: 2px;

    --shadow-none: none;
    --shadow-pop:  0 1px 2px rgba(28,26,21,0.06), 0 8px 24px -8px rgba(28,26,21,0.18);

    --ease:     cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur:      220ms;
    --dur-slow: 360ms;

    --z-skip: 200;
    --z-nav:  100;
    --z-pop:  150;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
    background: var(--paper);
    color: var(--text-body);
    font-family: var(--font-serif);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    font-optical-sizing: auto;
}

::selection { background: var(--selection); color: var(--text-strong); }

img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    letter-spacing: var(--track-tight);
    text-wrap: balance;
}

/* links: monochrome underline + weight, never a blanket tint */
a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
    text-decoration-color: var(--rule-strong);
    transition: text-decoration-color var(--dur-fast) var(--ease);
}
a:hover { text-decoration-color: currentColor; }
a:visited { color: inherit; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* skip link */
.fr-skip-link {
    position: absolute;
    left: var(--space-s);
    top: var(--space-s);
    z-index: var(--z-skip);
    padding: var(--space-2xs) var(--space-s);
    background: var(--paper-raised);
    color: var(--text-strong);
    border: var(--hair) solid var(--rule-strong);
    text-decoration: none;
    font-size: var(--fs-meta);
    transform: translateY(calc(-100% - var(--space-l)));
    transition: transform var(--dur) var(--ease);
}
.fr-skip-link:focus { transform: translateY(0); }

/* small-caps utility: real smcp glyphs of the reading face */
.fr-smallcaps {
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
    letter-spacing: var(--track-caps);
    font-weight: var(--fw-medium);
}

/* kicker / eyebrow */
.fr-kicker {
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "kern" 1;
    letter-spacing: var(--track-caps);
    font-weight: var(--fw-medium);
    font-size: var(--fs-label);
    color: var(--text-muted);
    margin: 0;
}
.fr-kicker--accent { color: var(--accent); }
.fr-kicker--section { display: block; margin-bottom: var(--space-2xs); }
.fr-kicker--accent a { color: inherit; text-decoration: none; }
.fr-kicker--accent a:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* ============================================================
   PAGE FRAME + CHROME
   ============================================================ */

.fr-frame {
    max-width: var(--frame);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---- masthead ---- */
.fr-masthead {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: var(--paper);
    border-bottom: var(--hair) solid var(--rule);
}
.fr-masthead__inner {
    max-width: var(--frame);
    margin-inline: auto;
    padding: var(--space-s) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
}
.fr-wordmark {
    font-size: 1.4rem;
    letter-spacing: -0.01em;
    font-weight: var(--fw-regular);
    color: var(--text-strong);
    text-decoration: none;
}
.fr-wordmark:hover { text-decoration: none; }

.fr-nav {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-wrap: wrap;
}
.fr-nav__link {
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "kern" 1;
    letter-spacing: var(--track-caps);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    text-decoration: none;
}
.fr-nav__link:hover { color: var(--text-strong); text-decoration: none; }
.fr-nav__link.is-active { color: var(--text-strong); font-weight: var(--fw-semibold); }
.fr-nav__divider {
    width: 1px;
    height: 1.1em;
    background: var(--rule-strong);
}

/* ---- theme toggle ---- */
.fr-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background: transparent;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 0.4em 0.75em;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-serif);
    font-variant-caps: all-small-caps;
    font-feature-settings: "smcp" 1, "kern" 1;
    font-size: var(--fs-label);
    letter-spacing: var(--track-caps);
}
.fr-theme-toggle:hover { color: var(--text-strong); }
.fr-theme-toggle__disc {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    background: transparent;
}
:root[data-theme="dark"] .fr-theme-toggle__disc { background: currentColor; }
/* label swaps via the two spans below */
.fr-theme-toggle .fr-theme-toggle__to-dark { display: inline; }
.fr-theme-toggle .fr-theme-toggle__to-light { display: none; }
:root[data-theme="dark"] .fr-theme-toggle .fr-theme-toggle__to-dark { display: none; }
:root[data-theme="dark"] .fr-theme-toggle .fr-theme-toggle__to-light { display: inline; }

/* ---- footer ---- */
.fr-footer {
    border-top: var(--hair) solid var(--rule);
    margin-top: var(--space-3xl);
    background: var(--paper);
}
.fr-footer__inner {
    max-width: var(--frame);
    margin-inline: auto;
    padding: var(--space-xl) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-l);
    justify-content: space-between;
    align-items: flex-end;
}
.fr-footer__blurb {
    max-width: 40ch;
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: var(--lh-lede);
}
.fr-footer__meta {
    font-size: var(--fs-micro);
    color: var(--text-faint);
    margin-top: var(--space-m);
}
.fr-footer__nav {
    display: flex;
    gap: var(--space-m);
    align-items: center;
}
.fr-footer__nav a {
    font-size: var(--fs-label);
    color: var(--text-muted);
    text-decoration: none;
}
.fr-footer__nav a:hover { color: var(--text-strong); text-decoration: underline; }
.fr-footer__rss { display: inline-flex; align-items: center; gap: 0.4em; }
.fr-footer__rss img { display: inline-block; }

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

.fr-hero {
    max-width: var(--frame);
    margin-inline: auto;
    padding: var(--space-3xl) var(--gutter) var(--space-2xl);
    border-bottom: var(--hair) solid var(--rule);
}
.fr-hero__title {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    font-weight: var(--fw-regular);
    max-width: 18ch;
    margin: var(--space-m) 0 var(--space-l);
}
.fr-hero__lede {
    font-size: var(--fs-lead);
    line-height: var(--lh-lede);
    color: var(--text-muted);
    max-width: 52ch;
}

/* hero rendered from _index.md markdown: first heading is the display line,
   any second heading is the lede, prose is muted. */
.fr-hero__content > :first-child {
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    font-weight: var(--fw-regular);
    max-width: 18ch;
    margin: var(--space-m) 0 var(--space-l);
}
.fr-hero__content h2 {
    font-size: var(--fs-lead);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    letter-spacing: var(--track-normal);
    margin: 0 0 var(--space-l);
    max-width: 52ch;
}
.fr-hero__content p {
    font-size: var(--fs-lead);
    line-height: var(--lh-lede);
    color: var(--text-muted);
    max-width: 52ch;
}
.fr-hero__content p + p { margin-top: var(--space-m); }
.fr-hero__content em { font-style: italic; }

/* start-reading link under the series feature */
.fr-series-feature__start {
    font-size: var(--fs-small);
    color: var(--text-strong);
    text-decoration-color: var(--text-faint);
}

.fr-section {
    max-width: var(--frame);
    margin-inline: auto;
    padding: var(--space-2xl) var(--gutter);
}
.fr-section--flush { padding-top: 0; }

/* current-series feature */
.fr-series-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-2xl);
    align-items: start;
}
.fr-series-feature__title {
    font-size: var(--fs-h2);
    letter-spacing: var(--track-tight);
    margin: 0 0 var(--space-s);
}
.fr-series-feature__title a { color: var(--text-strong); text-decoration: none; }
.fr-series-feature__title a:hover { text-decoration: underline; }
.fr-series-feature__blurb {
    font-size: var(--fs-body);
    color: var(--text-body);
    line-height: var(--lh-body);
    max-width: 56ch;
    margin: var(--space-m) 0 var(--space-l);
}
.fr-series-feature__spine {
    border-left: var(--hair) solid var(--rule);
    padding-left: var(--space-l);
}

/* section head with a rule + "all" link */
.fr-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: var(--hair) solid var(--rule);
    padding-bottom: var(--space-s);
    margin-bottom: var(--space-m);
    gap: var(--space-m);
}
.fr-section-head a {
    font-size: var(--fs-label);
    color: var(--text-muted);
    text-decoration: none;
}
.fr-section-head a:hover { color: var(--text-strong); }

/* ---- entry card (index item) ---- */
.fr-entry-list { list-style: none; margin: 0; padding: 0; }
.fr-entry {
    border-top: var(--hair) solid var(--rule);
    padding: var(--space-l) 0;
}
.fr-entry__kind {
    font-size: var(--fs-label);
    color: var(--text-muted);
    margin-bottom: 0.55em;
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
}
.fr-entry--series .fr-entry__kind { color: var(--accent); }
.fr-entry__kind .sep { color: var(--text-faint); }
.fr-entry__title {
    font-size: var(--fs-h3);
    margin: 0 0 0.3em;
    letter-spacing: var(--track-tight);
    font-weight: var(--fw-semibold);
}
.fr-entry__title a {
    color: var(--text-strong);
    text-decoration: none;
    text-decoration-color: var(--text-faint);
    text-underline-offset: 0.14em;
}
.fr-entry__title a:hover { text-decoration: underline; }
.fr-entry__standfirst {
    font-size: var(--fs-small);
    color: var(--text-muted);
    margin: 0 0 0.7em;
    max-width: 56ch;
    line-height: var(--lh-lede);
}
.fr-entry__meta {
    font-size: var(--fs-micro);
    color: var(--text-faint);
}

/* ---- shorts feed ---- */
.fr-shorts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 62ch;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}
.fr-short {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--space-m);
    align-items: baseline;
}
.fr-short__date {
    font-size: var(--fs-micro);
    color: var(--text-faint);
}
.fr-short__text {
    margin: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-lede);
    color: var(--text-body);
}
.fr-short__text a { text-decoration-color: var(--text-faint); }

/* ============================================================
   SERIES SPINE — the signature device
   ============================================================ */

.fr-spine__title {
    font-size: var(--fs-label);
    color: var(--accent);
    margin: 0 0 var(--space-m);
}
.fr-spine__list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.fr-spine__list::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.5em;
    bottom: 0.5em;
    width: var(--spine-w);
    background: var(--rule);
}
.fr-spine__item {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: var(--space-m);
}
.fr-spine__item:last-child { margin-bottom: 0; }
.fr-spine__node {
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--spine);
    background: var(--paper);
    box-sizing: border-box;
}
.fr-spine__link {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: var(--fw-regular);
    font-size: var(--fs-small);
    line-height: var(--lh-lede);
    display: block;
}
.fr-spine__link:hover { color: var(--text-strong); text-decoration: underline; }
.fr-spine__item.is-active .fr-spine__node { background: var(--spine); }
.fr-spine__item.is-active .fr-spine__link {
    color: var(--text-strong);
    font-weight: var(--fw-semibold);
}

/* ============================================================
   ESSAY / SINGLE
   ============================================================ */

.fr-article {
    max-width: var(--frame);
    margin-inline: auto;
    padding: var(--space-2xl) var(--gutter) var(--space-3xl);
}
.fr-article__head {
    border-bottom: var(--hair) solid var(--rule);
    padding-bottom: var(--space-l);
    margin-bottom: var(--space-xl);
    max-width: 40rem;
}
.fr-article__head .fr-kicker { margin-bottom: var(--space-s); }
.fr-article__title {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--space-m);
}
.fr-article__standfirst {
    font-size: var(--fs-lead);
    line-height: var(--lh-lede);
    color: var(--text-muted);
    margin: 0 0 var(--space-m);
    text-wrap: pretty;
}

/* byline */
.fr-byline {
    font-size: var(--fs-meta);
    color: var(--text-muted);
    display: flex;
    gap: 0.6em;
    flex-wrap: wrap;
    align-items: baseline;
}
.fr-byline .sep { color: var(--text-faint); }

/* body grid: sticky rail + prose */
.fr-article__body {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}
.fr-rail {
    position: sticky;
    top: 5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* in-essay table of contents */
.fr-toc { font-size: var(--fs-meta); }
.fr-toc__title {
    font-size: var(--fs-micro);
    color: var(--text-faint);
    margin: 0 0 var(--space-s);
}
.fr-toc__list,
.fr-toc ol,
.fr-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
/* only the outermost list carries the rail; nested lists do not double it */
.fr-toc > nav > ol,
.fr-toc > .fr-toc__list {
    border-left: var(--spine-w) solid var(--rule);
}
.fr-toc li {
    padding-left: 0.9rem;
    margin-left: -2px;
    border-left: var(--spine-w) solid transparent;
}
.fr-toc li li { padding-left: 1.7rem; }
.fr-toc a {
    text-decoration: none;
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}
.fr-toc a:hover { color: var(--text-strong); }
.fr-toc li.is-active {
    border-left-color: var(--spine);
}
.fr-toc li.is-active > a {
    color: var(--text-strong);
    font-weight: var(--fw-medium);
}

/* ---- series prev/next ---- */
.fr-series-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    border-top: var(--hair) solid var(--rule);
    padding-top: var(--space-l);
    margin-top: var(--space-2xl);
}
.fr-series-nav__next { text-align: right; }
.fr-series-nav a { text-decoration: none; }
.fr-series-nav a:hover .fr-series-nav__ttl { text-decoration: underline; }
.fr-series-nav__dir {
    font-size: var(--fs-micro);
    color: var(--accent);
    display: block;
    margin-bottom: 0.35em;
}
.fr-series-nav__ttl {
    font-size: var(--fs-small);
    color: var(--text-strong);
    display: block;
    line-height: var(--lh-snug);
}

/* ============================================================
   PROSE — the reading surface (markdown output)
   ============================================================ */

.fr-prose {
    color: var(--text-body);
    hyphens: auto;
    hanging-punctuation: first last;
}
/* standalone pages (colophon, impressum) with no rail: centre the column */
.fr-prose--centered { max-width: var(--measure); margin-inline: auto; }
/* text blocks held at the reading measure */
.fr-prose > p,
.fr-prose > ul,
.fr-prose > ol,
.fr-prose > h2,
.fr-prose > h3,
.fr-prose > h4,
.fr-prose > blockquote {
    max-width: var(--measure);
}
.fr-prose > * + * { margin-block-start: var(--flow); }
.fr-prose p { text-wrap: pretty; }
.fr-prose h2 {
    font-size: var(--fs-h2);
    margin-block-start: 2em;
    letter-spacing: var(--track-tight);
}
.fr-prose h3 {
    font-size: var(--fs-h3);
    margin-block-start: 1.6em;
    letter-spacing: var(--track-tight);
}
.fr-prose h2 + p,
.fr-prose h3 + p { margin-block-start: 0.6em; }
.fr-prose em { font-style: italic; }
.fr-prose strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
.fr-prose a { text-decoration-color: var(--text-faint); }
.fr-prose a:hover { text-decoration-color: currentColor; }

.fr-prose ul, .fr-prose ol { padding-left: 1.4rem; }
.fr-prose li { margin-bottom: 0.4em; }
.fr-prose li > ul, .fr-prose li > ol { margin-top: 0.4em; }

/* drop cap — opening paragraph */
.fr-prose.has-dropcap > p:first-of-type::first-letter {
    float: left;
    font-size: 3.6em;
    line-height: 0.82;
    padding-right: 0.06em;
    margin-top: 0.06em;
    font-weight: var(--fw-regular);
    color: var(--text-strong);
}

/* thought-break / scene break: markdown --- */
.fr-prose hr {
    border: 0;
    height: 0;
    max-width: var(--measure);
    margin: var(--space-xl) 0;
    color: var(--text-faint);
    text-align: center;
}
.fr-prose hr::before {
    content: "* * *";
    letter-spacing: 0.6em;
    font-size: var(--fs-small);
}

/* blockquote — restrained, hairline rule, no accent tint */
.fr-prose blockquote {
    border-left: var(--hair) solid var(--rule-strong);
    padding-left: var(--space-m);
    color: var(--text-muted);
    font-style: italic;
}
.fr-prose blockquote p:last-child { margin-bottom: 0; }

/* code — the one mono context; breaks out to the wide measure */
.fr-prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--paper-inset);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 0.1em 0.35em;
}
.fr-prose pre {
    max-width: var(--measure-wide);
    background: var(--paper-inset);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-sm);
    padding: var(--space-m);
    overflow-x: auto;
    font-size: var(--fs-small);
    line-height: 1.55;
}
.fr-prose pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
}

/* tables — break out to the wide measure */
.fr-prose table {
    max-width: var(--measure-wide);
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-small);
    margin-block-start: var(--flow);
}
.fr-prose th, .fr-prose td {
    padding: 0.55rem 0.8rem;
    text-align: left;
    border-bottom: var(--hair) solid var(--rule);
}
.fr-prose th { font-weight: var(--fw-semibold); color: var(--text-strong); }

/* figures / images — break out to the wide measure */
.fr-prose img,
.fr-prose figure {
    max-width: var(--measure-wide);
}
.fr-prose img {
    border-radius: var(--radius-sm);
    outline: var(--hair) solid var(--rule);
    outline-offset: -1px;
}
.fr-prose figure { margin-block: var(--space-l); }
.fr-prose figcaption {
    font-size: var(--fs-micro);
    color: var(--text-faint);
    margin-top: var(--space-2xs);
    max-width: var(--measure);
}

/* ============================================================
   LIST PAGES (section archives)
   ============================================================ */

.fr-list-head {
    max-width: var(--frame);
    margin-inline: auto;
    padding: var(--space-2xl) var(--gutter) var(--space-l);
}
.fr-list-head h1 {
    font-size: var(--fs-h1);
    letter-spacing: var(--track-tight);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
    .fr-article__body {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
    .fr-rail {
        position: static;
        top: auto;
        flex-direction: column;
        gap: var(--space-l);
        padding-bottom: var(--space-l);
        border-bottom: var(--hair) solid var(--rule);
    }
    .fr-prose > p,
    .fr-prose > ul,
    .fr-prose > ol,
    .fr-prose > h2,
    .fr-prose > h3,
    .fr-prose > h4,
    .fr-prose > blockquote { max-width: none; }
}

@media (max-width: 760px) {
    .fr-series-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
    .fr-series-feature__spine {
        border-left: 0;
        padding-left: 0;
        border-top: var(--hair) solid var(--rule);
        padding-top: var(--space-l);
    }
}

@media (max-width: 600px) {
    :root { --fs-body: 1.15rem; }
    .fr-short {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }
    .fr-series-nav {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-m);
    }
    .fr-series-nav__next { text-align: left; }
}

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