/* ==========================================================================
   MJR.News — Ghost theme
   --------------------------------------------------------------------------
   EVERYTHING BRAND-SPECIFIC LIVES IN THE :root BLOCK BELOW.
   To reskin this theme, change those variables and nothing else.
   ========================================================================== */

:root {
    /* --- Brand palette (from MJR.News Color Scheme) --------------------- */
    --brand-ink:        #160C28;  /* deep aubergine — primary text, masthead */
    --brand-accent:     #F35B04;  /* orange — links, the dot, active states  */
    --brand-highlight:  #E5E059;  /* citron — selection, marker, rare accent */
    --brand-muted:      #706C61;  /* warm grey — meta, captions, rules       */
    --brand-paper:      #E9F1F7;  /* pale blue — the reading surface         */

    /* --- Semantic tokens (light) ---------------------------------------
       The reading surface is pure white, not the brand pale blue: content
       images (photos, charts) sit much better on white and don't pick up a
       blue cast at their edges. --brand-paper is kept above as the brand
       reference value. */
    --paper:            #FFFFFF;
    --paper-raised:     #F7F9FB;
    --ink:              var(--brand-ink);
    --ink-soft:         #3A3049;
    --ink-muted:        var(--brand-muted);
    --accent:           var(--brand-accent);
    --accent-ink:       #FFFFFF;
    --rule:             rgba(22, 12, 40, 0.14);
    --rule-strong:      rgba(22, 12, 40, 0.32);
    --selection-bg:     var(--brand-highlight);
    --selection-fg:     var(--brand-ink);
    --shadow:           0 1px 2px rgba(22, 12, 40, 0.06);

    /* --- Type ----------------------------------------------------------- */
    --font-body:    "Source Serif 4", "Source Serif Pro", Charter, "Iowan Old Style",
                    Georgia, "Times New Roman", serif;
    --font-display: "Playfair Display", "Source Serif 4", Georgia, serif;
    --font-brand:   "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-ui:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Helvetica, Arial, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                    "Liberation Mono", monospace;

    --text-base:    1.1875rem;   /* 19px body */
    --leading:      1.72;
    --measure:      44rem;       /* ~78 characters — the reading column */
    --measure-wide: 68rem;       /* lists, archive, footer               */

    /* --- Space ---------------------------------------------------------- */
    --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: 4rem;
    --s-9: 6rem;

    --radius:    3px;
    --radius-lg: 6px;
}

/* --- Dark ------------------------------------------------------------- */
:root.dark-mode {
    --paper:        #0E0719;
    --paper-raised: #170E29;
    --ink:          #ECF1F6;
    --ink-soft:     #C6CEDA;
    --ink-muted:    #9A94A8;
    --accent:       #FF7A2E;
    --accent-ink:   #160C28;
    --rule:         rgba(236, 241, 246, 0.16);
    --rule-strong:  rgba(236, 241, 246, 0.34);
    --shadow:       0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading);
    font-variant-numeric: oldstyle-nums proportional-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.22; }
p, ul, ol, figure, blockquote, pre, table { margin: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--s-7) 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.u-wrap {
    width: 100%;
    max-width: var(--measure-wide);
    margin-inline: auto;
    padding-inline: var(--s-5);
}

.u-measure {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
}

.u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.u-skip-link {
    position: absolute;
    top: -100%; left: var(--s-4);
    z-index: 100;
    padding: var(--s-3) var(--s-4);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
}
.u-skip-link:focus { top: 0; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main { flex: 1 0 auto; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead {
    border-bottom: 1px solid var(--rule);
    padding-block: var(--s-5);
}

.masthead__inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-5);
    flex-wrap: wrap;
}

.masthead__brand {
    display: inline-flex;
    align-items: baseline;
    text-decoration: none;
    line-height: 1;
}

/* The wordmark: MJR in geometric sans, .News in display serif orange */
.wordmark {
    font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.1rem);
    letter-spacing: -0.015em;
    white-space: nowrap;
}
.wordmark__mjr {
    font-family: var(--font-brand);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.005em;
}
.wordmark__news {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent);
    font-style: normal;
}

/* --- Uploaded logo ---------------------------------------------------- */

.masthead__logos { display: block; }

.masthead__logo {
    height: auto;
    width: auto;
    max-height: var(--logo-height, 2.5rem);
    max-width: min(100%, 20rem);
    object-fit: contain;
}

/* Dark-mode variant. Only swaps when a light logo has actually been
   uploaded; otherwise the single logo is used in both modes. */
.masthead__logo--dark { display: none; }
:root.dark-mode .masthead__logos.has-dark .masthead__logo--light { display: none; }
:root.dark-mode .masthead__logos.has-dark .masthead__logo--dark  { display: block; }

body.logo-small  { --logo-height: 1.9rem; }
body.logo-medium { --logo-height: 2.5rem; }
body.logo-large  { --logo-height: 3.4rem; }

@media (max-width: 46rem) {
    .masthead__logo { max-height: calc(var(--logo-height, 2.5rem) * 0.82); }
}

.masthead__tagline {
    margin-top: var(--s-2);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* --- Navigation ------------------------------------------------------- */

.nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}
.nav ul {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    list-style: none;
    margin: 0; padding: 0;
    flex-wrap: wrap;
}
.nav a {
    text-decoration: none;
    color: var(--ink-soft);
    padding-block: 2px;
    border-bottom: 1.5px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.nav a:hover,
.nav li.nav-current a {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.nav__actions { display: flex; align-items: center; gap: var(--s-4); }

.nav__account {
    font-family: var(--font-ui);
    font-size: 0.875rem;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink-muted);
    padding-block: 2px;
    border-bottom: 1.5px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.nav__account:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 2rem; height: 2rem;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 50%;
    cursor: pointer;
    color: var(--ink-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--rule-strong); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-sun { display: none; }
:root.dark-mode .theme-toggle .icon-sun  { display: block; }
:root.dark-mode .theme-toggle .icon-moon { display: none; }

/* Mobile nav toggle */
.nav__burger {
    display: none;
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    cursor: pointer;
}

@media (max-width: 46rem) {
    .masthead__inner { align-items: center; }
    .nav__burger { display: inline-block; }
    .nav__list-wrap {
        flex-basis: 100%;
        display: none;
        padding-top: var(--s-4);
    }
    .nav__list-wrap.is-open { display: block; }
    .nav ul { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
    .nav__actions { margin-top: var(--s-4); }
}

/* ==========================================================================
   Post list
   ========================================================================== */

.stream { padding-block: var(--s-7) var(--s-8); }

.stream__heading {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--rule-strong);
}

.post-list { list-style: none; margin: 0; padding: 0; }

.post-card {
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--rule);
}
.post-card:first-child { padding-top: 0; }

.post-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
    margin-bottom: var(--s-3);
}
.post-card__meta a { color: inherit; text-decoration: none; }
.post-card__meta a:hover { color: var(--accent); }
.post-card__meta .dot { opacity: 0.5; }

.post-card__tag {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent) !important;
    letter-spacing: 0.1em;
}

.post-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
    letter-spacing: -0.012em;
    margin-bottom: var(--s-3);
}
.post-card__title a {
    text-decoration: none;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.25s ease;
}
.post-card__title a:hover { background-size: 100% 2px; }

.post-card__excerpt {
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.65;
    max-width: 40rem;
}

.post-card__footer {
    margin-top: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--ink-muted);
    display: flex;
    gap: var(--s-4);
    align-items: center;
}

/* Lead post on the homepage */
.post-card--lead { padding-bottom: var(--s-7); }
.post-card--lead .post-card__title {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    line-height: 1.12;
}
.post-card--lead .post-card__excerpt { font-size: 1.15rem; }
.post-card--lead .post-card__image {
    margin-bottom: var(--s-5);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.post-card__image img { width: 100%; }

/* "Pop-out" card: one feature image every fourth card on the homepage feed.
   The image is floated right and placed in the DOM just after the kicker
   (tag / date) line, so its top edge sits on the headline's row and the
   title + excerpt wrap around it. Cards without a feature image render as
   ordinary cards. */
.post-card__image--feed { display: none; }
.home .post-list li:nth-child(4n) { overflow: hidden; }
.home .post-list li:nth-child(4n) .post-card__image--feed {
    display: block;
    margin-bottom: var(--s-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.home .post-list li:nth-child(4n) .post-card__image--feed img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
@media (min-width: 62rem) {
    .home .post-list li:nth-child(4n) .post-card__image--feed {
        float: right;
        width: 14rem;
        margin: 0.35em 0 var(--s-3) var(--s-5);
    }
    .home .post-list li:nth-child(4n) .post-card__image--feed img {
        aspect-ratio: 3 / 2;
        width: 100%;
    }
    .home .post-list li:nth-child(4n) .post-card__title,
    .home .post-list li:nth-child(4n) .post-card__excerpt {
        max-width: calc(100% - 14rem - var(--s-5));
    }
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-7);
    font-family: var(--font-ui);
    font-size: 0.875rem;
}
.pagination a {
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
    transition: background 0.15s ease, color 0.15s ease;
}
.pagination a:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pagination__where { color: var(--ink-muted); }

/* ==========================================================================
   Article
   ========================================================================== */

.article { padding-block: var(--s-7) var(--s-8); }

.article__header { margin-bottom: var(--s-6); }

.article__kicker {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
    display: inline-block;
    margin-bottom: var(--s-4);
}

.article__title {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1.5rem + 2.8vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-4);
}

.article__excerpt {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: var(--s-5);
}

.article__byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}
.article__byline-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: calc(var(--s-1) * -1);
}
.article__byline a { color: var(--ink-soft); text-decoration: none; }
.article__byline a:hover { color: var(--accent); }
.article__byline .dot { opacity: 0.5; }

.article__feature {
    margin-block: var(--s-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}
.article__feature figcaption {
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--ink-muted);
    border-top: 1px solid var(--rule);
    background: var(--paper-raised);
}

/* --- Post body -------------------------------------------------------- */

.post-body > * + * { margin-top: var(--s-5); }

.post-body p { max-width: var(--measure); }

.post-body h2, .post-body h3, .post-body h4 {
    font-family: var(--font-display);
    letter-spacing: -0.012em;
    margin-top: var(--s-7);
}
.post-body h2 { font-size: 1.65rem; }
.post-body h3 { font-size: 1.35rem; }
.post-body h4 { font-size: 1.15rem; font-family: var(--font-ui); font-weight: 600; }

.post-body a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease, background 0.15s ease;
}
.post-body a:hover { color: var(--accent); }

.post-body strong { font-weight: 700; }

.post-body ul, .post-body ol { padding-left: 1.4em; max-width: var(--measure); }
.post-body li + li { margin-top: var(--s-2); }
.post-body li::marker { color: var(--accent); }

.post-body blockquote {
    border-left: 3px solid var(--accent);
    padding-left: var(--s-5);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}

.post-body figure { margin-block: var(--s-6); }
.post-body figcaption {
    margin-top: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    color: var(--ink-muted);
    text-align: center;
}

.post-body img { border-radius: var(--radius-lg); margin-inline: auto; }

.post-body pre {
    background: var(--brand-ink);
    color: #ECF1F6;
    padding: var(--s-5);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
}
.post-body :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: rgba(243, 91, 4, 0.1);
    padding: 0.15em 0.4em;
    border-radius: var(--radius);
}

.post-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    font-family: var(--font-ui);
}
.post-body th, .post-body td {
    text-align: left;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule);
}
.post-body th { font-weight: 600; border-bottom-color: var(--rule-strong); }

.post-body hr { max-width: var(--measure); margin-inline: auto; }

/* Ghost cards that break out of the measure */
.post-body .kg-width-wide  { max-width: var(--measure-wide); margin-inline: auto; }
.post-body .kg-width-full  { max-width: 100vw; margin-inline: calc(50% - 50vw); }
.post-body .kg-width-full img { border-radius: 0; }

/* ==========================================================================
   Reactions (likes / dislikes)
   ========================================================================== */

.reactions {
    margin-top: var(--s-7);
    padding-block: var(--s-5);
    border-block: 1px solid var(--rule);
    display: flex;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.reactions__label {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-right: auto;
}
/* On phones the label + both pills don't fit one row; give the label its
   own line and let the two buttons sit together on the next. */
@media (max-width: 40rem) {
    .reactions__label { flex-basis: 100%; margin-right: 0; }
}

.reaction {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    padding: var(--s-2) var(--s-4);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 0.875rem;
    line-height: 1;
    color: var(--ink-soft);
    transition: border-color 0.15s ease, color 0.15s ease,
                background 0.15s ease, transform 0.1s ease;
}
.reaction:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reaction:active:not(:disabled) { transform: scale(0.96); }
.reaction:disabled { opacity: 0.55; cursor: default; }

.reaction svg { width: 16px; height: 16px; }

.reaction__count { font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: left; }

.reaction.is-active[data-reaction="like"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.reaction.is-active[data-reaction="dislike"] {
    background: var(--ink-muted);
    border-color: var(--ink-muted);
    color: var(--paper);
}

.reactions__status {
    flex-basis: 100%;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--ink-muted);
    min-height: 1em;
}

/* ==========================================================================
   Author box / related / comments
   ========================================================================== */

.author-box {
    margin-top: var(--s-7);
    padding: var(--s-5);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    display: flex;
    gap: var(--s-5);
    align-items: flex-start;
}
.author-box__avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.author-box__name {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--s-2);
}
.author-box__name a { text-decoration: none; }
.author-box__bio { font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.6; }
.author-box__links {
    margin-top: var(--s-3);
    display: flex; gap: var(--s-4);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
}
.author-box__links a { color: var(--accent); text-decoration: none; }
.author-box__links a:hover { text-decoration: underline; }

.related { margin-top: var(--s-8); }
.related__heading {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule-strong);
    margin-bottom: var(--s-5);
}
.related__tag { color: var(--accent); }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 46rem) {
    .related__list { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
.related__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: var(--s-2);
}
.related__title a { text-decoration: none; }
.related__title a:hover { color: var(--accent); }

/* ==========================================================================
   Homepage — narrow reading column + suggested-reading aside. On wide
   screens the main feed becomes 1fr of a 68rem grid beside a 19rem rail,
   so the lead post reads at a ~39rem column (close to the article measure)
   and the next stories are visible without scrolling.
   ========================================================================== */

/* A humbler lead so the stories beneath it show on one screen. On wide
   screens the lead image is height-capped (it used to fill the whole column)
   and the vertical padding is tightened; on phones the image keeps its
   natural proportions with a looser cap. */
.post-card--lead { padding-bottom: 0; }
.post-card--lead .post-card__image { margin-bottom: var(--s-4); }
.post-card--lead .post-card__title {
    font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
    line-height: 1.16;
}
.post-card--lead .post-card__excerpt {
    font-size: 1.0625rem;
    margin-bottom: var(--s-3);
}
@media (min-width: 62rem) {
    .post-card--lead .post-card__image img { max-height: 20rem; width: auto; margin-inline: auto; }
    .post-card--lead .post-card__title { margin-bottom: var(--s-3); }
    .post-card--lead .post-card__meta { margin-bottom: var(--s-3); }
}

/* Wide screens only: the feed and the rail sit side by side, with
   "Get every piece by email" spanning underneath them. When there are no
   featured posts yet, the rail is empty and the grid simply collapses to a
   single column (or falls back to that same single column in browsers
   without :has support). The rail is a quiet sticky column rather than a
   full-height panel: no divider line running the height of the page, it
   simply pins near the top of the viewport and follows you as you read the
   feed in order. If it ever grows taller than the viewport it scrolls in
   place instead. */
/* Two-column layout: the home feed plus the site-wide pages that carry the
   side rail (About, Privacy, Archive) all share .home__grid, so the same
   2-column + sticky-rail rules apply to all four. The Topics block is always
   rendered, so :has() is a safe trigger; when a page's rail is empty the
   grid collapses to a single column. */
@media (min-width: 62rem) {
    .home__grid:has(.home__side .topics) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 19rem;
        column-gap: var(--s-8);
    }
    .home__grid:has(.home__side .topics) .home__main { min-width: 0; }
    .home__grid .home__main .u-measure { max-width: calc(var(--measure) - 2rem); }
    .home__grid .home__main .post-body p { max-width: calc(var(--measure) - 2rem); }
    .home__grid:has(.home__side .topics) .home__side {
        align-self: start;
        position: sticky;
        top: var(--s-6);
        max-height: calc(100vh - (2 * var(--s-6)));
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* The aside only exists when there is something to suggest, so spacing only
   appears alongside a populated rail. On phones that means it stacks below
   the feed with a top gap; on wide screens no gap is needed. */
.home__side:has(.related__list) { margin-top: var(--s-8); }
@media (min-width: 62rem) {
    .home__side:has(.related__list) { margin-top: 0; }
}
.home__side .related__list {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    counter-reset: suggested;
}
.home__side .related__list li { counter-increment: suggested; position: relative; padding-left: 1.6rem; }
.home__side .related__list li::before {
    content: counter(suggested, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent);
    line-height: calc(var(--s-4) + 0.25rem);
}
.related__date {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--ink-muted);
}

/* Rail announcements + topics blocks. Each sits under the block above it;
   the gap applies whenever the section renders. */
.home__side .announcements,
.home__side .topics { margin-top: var(--s-8); }
.topics__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.topics__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.topics__name {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}
.topics__name:hover { text-decoration: underline; }

.comments {
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule-strong);
}

/* Slot for a third-party embed if you ever swap away from native comments */
.comments--external { min-height: 4rem; }

/* ==========================================================================
   Archive
   ========================================================================== */

.archive { padding-block: var(--s-7) var(--s-8); }

.archive__intro {
    max-width: var(--measure);
    color: var(--ink-soft);
    margin-bottom: var(--s-7);
}

.archive__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--rule-strong);
}
.archive__filter {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    text-decoration: none;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--ink-soft);
    background: none;
    cursor: pointer;
}
.archive__filter:hover { border-color: var(--accent); color: var(--accent); }
.archive__filter.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.archive__search {
    width: 100%;
    max-width: 22rem;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    margin-bottom: var(--s-6);
    transition: border-color 0.15s ease;
}
.archive__search:focus { border-color: var(--accent); }
.archive__search::placeholder { color: var(--ink-muted); }

.archive__year {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--ink-muted);
    padding-top: var(--s-6);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-3);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 2;
}

.archive__list { list-style: none; margin: 0; padding: 0; }

.archive__item {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--rule);
}
.archive__item[hidden] { display: none; }

.archive__date {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.archive__link { text-decoration: none; font-size: 1.0625rem; line-height: 1.45; }
.archive__link:hover { color: var(--accent); }
.archive__item-tag {
    font-family: var(--font-ui);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
    margin-left: var(--s-3);
}

.archive__empty {
    padding: var(--s-6) 0;
    color: var(--ink-muted);
    font-style: italic;
}

@media (max-width: 40rem) {
    .archive__item { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ==========================================================================
   About page / generic pages
   ========================================================================== */

.page { padding-block: var(--s-7) var(--s-8); }

.page__header { margin-bottom: var(--s-6); }
.page__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.page__subtitle {
    margin-top: var(--s-4);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink-soft);
}

.about__portrait {
    float: right;
    width: 12rem;
    margin: 0 0 var(--s-5) var(--s-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--rule);
}
@media (max-width: 40rem) {
    .about__portrait { float: none; width: 100%; margin: 0 0 var(--s-5); }
}

/* ==========================================================================
    Notes — micro-blog stream (/tag/notes/). Short entries with no card chrome:
    no images, no reading time, no "..." excerpt — the note itself.
   ========================================================================== */

.notes__header { margin-bottom: var(--s-4); }
.note-list { list-style: none; margin: 0; padding: 0; }
.note-item { position: relative; }
.note-item__body {
    padding-block: var(--s-5);
    border-bottom: 1px solid var(--rule);
}
.note-item__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: var(--s-2);
}
.note-item__title a { text-decoration: none; }
.note-item__title a:hover { color: var(--accent); }
/* Notes write in the same body styles as posts — they share .post-body so
   the theme's link/image/quote rules already apply; this just removes the
   per-paragraph measure since the column is already narrow. */
.note-item__text {
    padding-top: var(--s-1);
    color: var(--ink-soft);
}
.note-item__text p { margin-block: 0; max-width: none; }
.note-item__text p + p { margin-top: var(--s-4); }
.note-item__text img { width: 100%; height: auto; }
.note-item__text figure { margin-bottom: 0; }
.note-item__date {
    margin-top: var(--s-3);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}
.note-item__read {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.note-item__read:hover { border-bottom-color: var(--accent); }
.notes__empty {
    margin-top: var(--s-4);
    font-style: italic;
    color: var(--ink-muted);
    border-top: 1px solid var(--rule);
    padding-top: var(--s-5);
}
.notes__rail {
    max-width: var(--measure);
    margin-top: var(--s-8);
    display: grid;
    gap: var(--s-6);
    border-top: 1px solid var(--rule-strong);
    padding-top: var(--s-6);
}
.notes__subscribe-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: var(--s-2);
}
.notes__subscribe-text { color: var(--ink-soft); margin-bottom: var(--s-4); }
.notes__member { color: var(--ink-muted); font-style: italic; }
.notes__rss { margin-top: var(--s-4); }

/* ==========================================================================
   Subscribe / footer
   ========================================================================== */

.subscribe {
    margin-top: var(--s-9);
    text-align: center;
}
.subscribe__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--s-3);
}
.subscribe__text { color: var(--ink-soft); font-size: 1rem; margin-bottom: var(--s-5); }

.subscribe__form {
    display: flex;
    gap: var(--s-4);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.subscribe__input {
    flex: 1 1 16rem;
    max-width: 20rem;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    transition: border-color 0.15s ease;
}
.subscribe__input:focus { border-color: var(--accent); }
.btn {
    display: inline-block;
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent-ink);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.btn:hover { opacity: 0.88; }
.btn--ghost {
    background: none;
    color: var(--ink);
    border-color: var(--rule-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.site-footer {
    margin-top: var(--s-8);
    border-top: 1px solid var(--rule-strong);
    padding-block: var(--s-6);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}
.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer ul {
    display: flex; gap: var(--s-4);
    list-style: none; margin: 0; padding: 0;
    flex-wrap: wrap;
}

/* ==========================================================================
   Error page
   ========================================================================== */

.error {
    padding-block: var(--s-9);
    text-align: center;
}
.error__code {
    font-family: var(--font-display);
    font-size: clamp(4rem, 3rem + 8vw, 8rem);
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.03em;
}
.error__message {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-block: var(--s-4) var(--s-6);
}

/* ==========================================================================
   Print — the writing, nothing else
   ========================================================================== */

@media print {
    .masthead, .site-footer, .reactions, .comments,
    .related, .subscribe, .theme-toggle, .u-skip-link { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .post-body a { text-decoration: none; color: #000; }
    .post-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}