/* ==========================================================================
   Zenith Grove — Ghost theme
   Brand Guidelines §3: the --zg-* palette, Merriweather over Inter,
   investor-letter restraint.

   Two surfaces, switched once on Ghost's body class:
     Brochure (home, archives, 404) — deep evergreen ground, cream type
     Reading  (post, page)          — cream ground, ink type

   Content layout follows Ghost's canonical gh-canvas grid, so Koenig cards
   marked wide or full break out of the measure natively. That is what makes
   full-bleed images and header cards behave the way they do on Ghost's own
   themes; faking it with calc(100vw) does not.
   ========================================================================== */

/* Manrope 700 — the face the live zenithgrove.com wordmark renders in.
   Inlined as a data URI because font CDNs are blocked in the artifact viewer.
   Latin subset, taken from the same fonts.bunny.net files the live site loads. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}

:root {
    /* Palette — Brand Guidelines §3.1 */
    --zg-royal: #143917;
    --zg-royal-deep: #0E2A11;
    --zg-royal-dark: #091E0C;
    --zg-emerald: #0E824F;
    --zg-highlight: #EE7631;
    --zg-highlight-soft: #F6A878;
    /* Derived: the brand orange fails contrast as small text or a UI edge on
       cream. Same accent darkened to clear 4.5:1. Not yet in the Guidelines. */
    --zg-highlight-deep: #A85118;
    --zg-cream: #EFEEE7;
    --zg-paper: #F4F3EC;
    --zg-inner: #FAF9F6;
    --zg-ink: #2B2C30;
    --zg-ink-soft: #57594F;
    --zg-ink-faint: #8A8B82;

    /* Type — pinned. Reading var(--gh-font-heading, …) here would let Ghost's
       Design settings replace the display face, which previously broke the
       hero layout. The wordmark matches the live site and is separate again. */
    --font-serif: Merriweather, "PT Serif", Georgia, "Times New Roman", serif;
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-wordmark: "Manrope", Inter, system-ui, -apple-system, sans-serif;

    /* Layout — Ghost canvas variables, matching the proportions of the theme
       this replaces. Measure trimmed from 720px so running text stays near a
       readable line length; wide and full breakouts are unchanged. */
    --content-width: 660px;
    --container-width: 1200px;
    --gap: 3.6rem;
    --header-spacing: 80px;
    --gutter: clamp(22px, 6vw, 96px);
    --measure: var(--content-width);
    --wide-max: 62rem;

    /* The rail crosses both grounds, so it takes colours of its own. */
    --rail-track: rgba(139, 143, 130, 0.60);
    --rail-fill: var(--zg-highlight);

    /* Insignia — the header-card image. Overridden by the theme setting. */
    --insignia-max: 420px;
}

@media (max-width: 46rem) {
    :root { --gap: 2rem; --header-spacing: 48px; }
}

/* ---------- Reading surface (default) ---------- */

body {
    --ground: var(--zg-cream);
    --ground-alt: var(--zg-paper);
    --text: var(--zg-ink);
    --text-soft: var(--zg-ink-soft);
    --text-faint: var(--zg-ink-faint);
    --accent: var(--zg-highlight);
    --mark: var(--zg-royal);
    --rule: rgba(43, 44, 48, 0.16);
    --rule-strong: rgba(43, 44, 48, 0.42);
}

/* ---------- Brochure surface ---------- */

/* Only the home page and the error page take the evergreen ground. Tag and
   author archives are lists of writing and lead into it, so they read better on
   the same cream as the posts themselves. */
body.home-template,
body.error-template {
    --ground: var(--zg-royal-deep);
    --ground-alt: var(--zg-royal);
    --text: var(--zg-cream);
    --text-soft: rgba(239, 238, 231, 0.66);
    --text-faint: rgba(239, 238, 231, 0.42);
    --accent: var(--zg-highlight-soft);
    --mark: var(--zg-highlight-soft);
    --rule: rgba(239, 238, 231, 0.18);
    --rule-strong: rgba(239, 238, 231, 0.42);
}

/* ---------- Base ---------- */

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ground); color: var(--text); padding: 12px 18px; z-index: 20; }
.skip-link:focus { left: 0; }

.kicker a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.kicker a:hover { color: var(--accent); border-bottom-color: currentColor; }

.kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin: 0 0 clamp(20px, 3.4vh, 40px);
}

/* ---------- Masthead: sticky ---------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px 32px;
    flex-wrap: wrap;
    padding: clamp(20px, 3vw, 30px) var(--gutter);
    background: var(--ground);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms ease;
}

body.scrolled .masthead { border-bottom-color: var(--rule); }

/* ---------- Mobile menu ----------
   The previous theme's mechanism, kept as-is: a 30px button drawn from two
   1px rules that rotate into a cross, toggling a class on <body> that turns
   the masthead into a full-height panel. Nothing more elaborate than that. */

.burger {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    height: 30px;
    width: 30px;
    padding: 0;
    position: relative;
}

.burger::before,
.burger::after {
    content: "";
    position: absolute;
    left: 3px;
    width: 24px;
    height: 1px;
    background-color: var(--text);
    transition: all 0.2s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1s;
}

.burger::before { top: 11px; }
.burger::after { bottom: 11px; }

body.is-head-open .burger::before { top: 15px; transform: rotate(45deg); }
body.is-head-open .burger::after { bottom: 14px; transform: rotate(-45deg); }

@media (max-width: 52rem) {
    .burger { display: block; }

    .masthead { align-items: center; }

    .site-nav { display: none; }

    body.is-head-open { overflow: hidden; }

    body.is-head-open .masthead {
        position: fixed;
        inset: 0;
        height: 100%;
        overflow-y: auto;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 40;
    }

    body.is-head-open .site-nav {
        display: block;
        width: 100%;
        margin-top: clamp(24px, 6vh, 56px);
    }

    body.is-head-open .nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        font-size: 15px;
        letter-spacing: 0.12em;
    }

    body.is-head-open .nav-item { border-top: 1px solid var(--rule); }
    body.is-head-open .nav-item:last-child { border-bottom: 1px solid var(--rule); }

    body.is-head-open .nav-item a {
        display: block;
        padding: 18px 0;
        border-bottom: none;
        color: var(--text);
    }
}

@media (prefers-reduced-motion: reduce) {
    .burger::before, .burger::after { transition: none; }
}



.wordmark { font-family: var(--font-wordmark); font-size: 20px; font-weight: 700; margin: 0; text-decoration: none; }

.nav {
    display: flex; flex-wrap: wrap; gap: 8px 24px;
    list-style: none; margin: 0; padding: 0;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
}

.nav-item a { text-decoration: none; color: var(--text-soft); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.nav-item a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* The current page is marked by weight of colour, not a standing rule. */
.nav-item.nav-current a { color: var(--text); }

/* ---------- Statements (home) ---------- */

.band { padding: clamp(48px, 7vh, 88px) var(--gutter); max-width: var(--wide-max); }

.stack { display: grid; gap: clamp(40px, 6vh, 72px); }

/* The opening: statements on the left, the record in the space to their right.
   One column until there is genuinely room for two, so the chart is never
   squeezed. */
.home-lede {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 7vh, 80px);
    padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(48px, 7vh, 88px);
    align-items: start;
}

@media (min-width: 76rem) {
    .home-lede {
        grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.95fr);
        gap: clamp(40px, 5vw, 80px);
    }

    .home-lede .record-panel { padding-left: clamp(8px, 1.5vw, 24px); }
}

.record-panel .kicker { margin-bottom: clamp(14px, 2vh, 22px); }



.line {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(34px, 5.6vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
    max-width: 18ch;
}

.line em { font-style: italic; color: var(--accent); }

.qual { margin: clamp(16px, 2.4vh, 24px) 0 0; max-width: 32rem; color: var(--text-soft); }

/* ---------- The record ---------- */

.record {
  margin: clamp(28px, 4vh, 44px) 0 0;
  max-width: 26rem;
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.record caption {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
}

.record th,
.record td {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 16px;
  font-weight: 400;
}

.record th {
  text-align: left;
  color: var(--text-soft);
  font-weight: 400;
}

.record td {
  text-align: right;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 18px;
}

.record tr.now th { color: var(--text); }
.record tr.now td { color: var(--accent); }
.record td.neg { color: var(--text-faint); }

/* Chart and caption are one object. The rule that used to sit here cut the text
   loose from the plot it belongs to, so the two lines now stack tight underneath
   it and take their hierarchy from size and weight of colour instead:
   attribution faint and smallest, the description of the series brighter above
   it. Width still tracks the chart's at both breakpoints. */
.record-note {
  margin: 5px 0 0;
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
}

@media (max-width: 75.99rem) { .record-note { max-width: 34rem; } }

/* ---------- The record: chart ----------
   Single-series line, cumulative change over time. Palette checked with the
   dataviz validator against this surface: chroma floor PASS, contrast PASS.
   The lightness-band check FAILs for every brand orange on a dark ground —
   that check exists to keep multiple categorical hues mutually separable and
   is not binding on a one-series chart (the validator scopes itself to
   categorical palettes). Zero baseline is mandatory: truncating it would
   overstate the shape. */

.chart { margin: clamp(24px, 3.5vh, 36px) 0 0; max-width: 100%; }

/* Stacked, the panel is full width and the chart would scale its type up with
   it. Cap it so the SVG renders at roughly the width it was drawn for. */
@media (max-width: 75.99rem) { .chart { max-width: 34rem; } }

.chart svg { width: 100%; height: auto; display: block; overflow: visible; }

.ch-grid { stroke: var(--rule); stroke-width: 1; }

.ch-tick {
  fill: var(--text-faint);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.ch-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ch-fy { stroke: var(--rule); stroke-width: 1; }

.ch-mark { fill: var(--accent); stroke: var(--ground); stroke-width: 2; }

.ch-val {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
}

.ch-dot { fill: var(--accent); }

/* Labels wear text tokens, never the series colour; the mark carries identity.
   Proportional figures, since these do not align in a column. */
.ch-cross { stroke: var(--rule-strong); stroke-width: 1; pointer-events: none; }
.ch-tip { pointer-events: none; transition: opacity 120ms ease; }
.ch-tip-bg { fill: var(--ground-alt); stroke: var(--rule-strong); stroke-width: 1; }
.ch-tip-k { fill: var(--text-faint); font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.18em; }
.ch-tip-v { fill: var(--text); font-family: var(--font-sans); font-size: 15px; }

/* SVG text scales with the viewBox, so as the chart narrows it shrinks its own
   labels. The type is scaled up inside the drawing to hold the rendered size in
   the 11-14px range instead of collapsing to 6px on a phone. */
@media (max-width: 48rem) {
  .ch-tick { font-size: 13px; }
  .ch-val { font-size: 15px; }
  .ch-tip-k { font-size: 12px; }
  .ch-tip-v { font-size: 17px; }
}

@media (max-width: 34rem) {
  .ch-tick { font-size: 17px; }
  .ch-val { font-size: 19px; }
  .ch-tip-k { font-size: 15px; }
  .ch-tip-v { font-size: 21px; }
  .ch-line { stroke-width: 2.5; }
}

@media (max-width: 26rem) {
  .ch-tick { font-size: 22px; }
  .ch-val { font-size: 24px; }
  .ch-tip-k { font-size: 19px; }
  .ch-tip-v { font-size: 26px; }
  .ch-line { stroke-width: 3; }
}

.ch-hit { cursor: crosshair; }
.ch-hit:focus-visible rect { fill: rgba(246, 168, 120, 0.10); outline: none; }

/* Attribution sits with the plot; it is the fine print, so it stays the
   smallest thing in the panel. The description of the series is below the
   rule, in .record-note. */
.chart figcaption {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-faint);
}

.table-view { margin-top: 22px; max-width: 26rem; }

.table-view summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 8px 0;
}

.table-view summary:hover { color: var(--text-soft); }
.table-view[open] summary { border-bottom: 1px solid var(--rule); margin-bottom: 6px; }
/* ---------- Writing strip ---------- */

.strip-section {
  /* The one light band on the page. It breaks up the green, and it previews
     the reading surface the essays actually live on — the same token set,
     switched to its other state rather than a one-off colour. */
  --ground: var(--zg-paper);
  --text: var(--zg-ink);
  --text-soft: var(--zg-ink-soft);
  --text-faint: #6E7066;
  --accent: var(--zg-highlight-deep);
  --rule: rgba(43, 44, 48, 0.16);
  --rule-strong: rgba(43, 44, 48, 0.42);

  background: var(--ground);
  color: var(--text);

  /* No right padding: the strip bleeds off the edge so it reads as continuing */
  padding: clamp(32px, 4.5vh, 56px) 0 clamp(28px, 4vh, 48px) var(--gutter);
  position: relative;
  z-index: 2;
}

.strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  padding-right: var(--gutter);
  max-width: var(--measure);
}

.strip-head .kicker { margin: 0; }

.strip-controls { display: flex; gap: 8px; }

.strip-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

/* Drawn rather than typed. The arrows were text glyphs, which centre on the
   font's baseline rather than the circle and carry whatever metrics the face
   happens to have — small and sitting high. An SVG centres on its own box. */
.strip-btn svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.strip-btn:hover:not([disabled]) { color: var(--text); border-color: var(--rule-strong); }

/* Bigger hit area and glyph on touch, where 38px is under the 44px minimum and
   the arrows read as specks. */
@media (max-width: 52rem) {
  .strip-btn { width: 44px; height: 44px; }
  .strip-btn svg { width: 21px; height: 21px; stroke-width: 1.4; }
  .strip-controls { gap: 12px; }
}
.strip-btn[disabled] { opacity: 0.3; cursor: default; }

.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(258px, 21rem);
  gap: 0;
  margin-top: clamp(26px, 4vh, 44px);
  padding-right: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.strip-card {
  scroll-snap-align: start;
  padding: 0 clamp(22px, 3vw, 40px);
  border-left: 1px solid var(--rule);
}

.strip-card:first-child { padding-left: 0; border-left: none; }

.strip-card { display: flex; flex-direction: column; }

.strip-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
}

/* Tag on the first line, date on the second, always. Left to wrap, a short tag
   let the date ride up beside it and the card titles started at different
   heights across the row. */
.strip-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.strip-tag {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.strip-tag:hover { border-bottom-color: currentColor; }

.strip-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
  transition: color 160ms ease;
}

.strip-link:hover .strip-title { color: var(--accent); }

.strip-excerpt {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}

.strip-more {
  margin-top: auto;
  padding-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.strip-link:hover .strip-more { color: var(--text-soft); }
/* ==========================================================================
   Reading: Ghost's canvas grid
   ========================================================================== */

.reading { padding-bottom: clamp(48px, 7vh, 80px); }

.reading-lede { position: relative; }

/* Set on the article's own measure and centred the same way, so the title
   starts exactly where the body copy does. Left-aligned with or without a
   cover image, so the two kinds of post do not differ. */
.reading-header {
    padding-block: clamp(40px, 6vh, 72px) clamp(24px, 3.5vh, 40px);
}

.reading-header > * { max-width: var(--content-width); }

.reading-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
    text-wrap: balance;
}

.standfirst { margin: clamp(16px, 2.4vh, 24px) 0 0; font-size: 19px; color: var(--text-soft); }

.byline {
    margin: clamp(16px, 2.4vh, 24px) 0 0;
    font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--text-faint);
}

/* Feature image: a cover band with the header over it — the treatment the
   previous theme used (.u-placeholder min-height 560px, object-fit cover, a
   dark scrim). The image fills the band, so the file's own dimensions never
   set the height. Rendering it as a plain full-width <img> is what made the
   pictures enormous. */

.reading-lede.post-cover {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    margin-bottom: clamp(32px, 5vh, 56px);
    overflow: hidden;
    isolation: isolate;
}

@media (max-width: 46rem) { .reading-lede.post-cover { min-height: 300px; } }

.reading-lede.post-cover .cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.reading-lede.post-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000;
    transition: background-color 1s ease;
}

.reading-lede.post-cover.initialized::before { background-color: rgba(0, 0, 0, 0.4); }

@media (prefers-reduced-motion: reduce) {
    .reading-lede.post-cover::before { transition: none; background-color: rgba(0, 0, 0, 0.4); }
}

.reading-lede.post-cover .reading-header {
    width: 100%;
    padding-block: clamp(48px, 8vh, 88px);
}


.reading-lede.post-cover .reading-title { color: var(--zg-cream); }
.reading-lede.post-cover .standfirst { color: rgba(239, 238, 231, 0.82); }
.reading-lede.post-cover .kicker,
.reading-lede.post-cover .byline { color: rgba(239, 238, 231, 0.68); }

/* The canvas grid — Ghost's own pattern. Content sits in [main]; Koenig cards
   marked wide or full break out to [wide] or [full] without any calc() tricks. */
/* Only .gh-canvas takes this grid. The selector used to include
   .kg-width-full.kg-content-wide — which is exactly what a split header card
   is — so the card itself became a five-track canvas grid, its content landed
   in a 120px track and the image column collapsed to zero. Ghost lays these
   cards out itself; the theme must not impose a grid on them. */
.gh-canvas,
.reading-header {
    --main: min(var(--content-width), 100% - var(--gap) * 2);
    --wide: minmax(0, calc((var(--container-width) - var(--content-width)) / 2));
    --full: minmax(var(--gap), 1fr);
    display: grid;
    grid-template-columns:
        [full-start] var(--full)
        [wide-start] var(--wide)
        [main-start] var(--main) [main-end]
        var(--wide) [wide-end]
        var(--full) [full-end];
}

.gh-canvas > *,
.reading-header > * { grid-column: main; }
.kg-width-wide { grid-column: wide; }
.kg-width-full { grid-column: full; }
.kg-width-full img { width: 100%; }

.gh-content { font-size: 18px; line-height: 1.68; }

/* Reading rhythm carried over from the theme this replaces: 1.6em between
   blocks, 1.6em before a heading, 0.8em after one.

   The paragraph reset is wrapped in :where() so it contributes no specificity.
   Written plainly as `.gh-content p` it scores (0,1,1) and out-specifies the
   rhythm rule below at (0,1,0) — the universal selector counts for nothing —
   so every paragraph silently lost its margin and posts published as one
   block. Same trap as Ghost's cards.min.css: match the specificity
   deliberately. Do not unwrap the :where().

   Order matters as much as specificity: the reset must come first so the
   rhythm rule can put the margin back on every block after the first. Lists
   are in the reset because their browser-default margin-bottom would
   otherwise open a gap no other block has.

   The reset also reaches paragraphs nested inside cards and blockquotes, where
   the browser default would otherwise apply; those get their spacing from the
   card's own rules. */
.gh-content :where(p, ul, ol) { margin: 0; }
.gh-content > * + * { margin-top: 1.6em; }

.gh-content h2, .gh-content h3, .gh-content h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 1.6em 0 0;
    text-wrap: balance;
}

/* An element following a heading sits closer to it than to the block before */
.gh-content h2 + *, .gh-content h3 + *, .gh-content h4 + * { margin-top: 0.8em; }

.gh-content h2 { font-size: 1.6em; }
.gh-content h3 { font-size: 1.4em; }
.gh-content h4 { font-size: 1.2em; }

.gh-content a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.gh-content a:hover { color: var(--mark); }
.gh-content strong { font-weight: 600; }

/* A quote is marked by a quotation mark, not by a rule down its edge. One
   opening mark only — no closing pair, which reads as clutter at this size.

   The glyph is decorative and large, so it takes the full brand orange rather
   than the darkened --zg-highlight-deep that small orange text on cream needs
   to clear 4.5:1; that floor governs text, not a display character.

   Size sits deliberately between the two things a quote could be confused
   with: above the 18px body, below the 25.2px h3, and set in the serif at
   regular weight where the headings are bold. Ghost's cards.min.css carries no
   blockquote border of its own — the rule was ours. */
.gh-content blockquote {
    position: relative;
    margin: 1.6em 0;
    border: 0;
    font-family: var(--font-serif);
    font-size: 1.15em;
    line-height: 1.5;
    color: var(--text);
}

/* Indent and mark only the standard quote. The :not() keeps every padding
   declaration off the alt variant, so Ghost's own `padding: 0 2.5em` and the
   two breakpoints that narrow it stay in charge there — setting padding-left
   alone would out-specify one side of that pair and leave it lopsided. */
.gh-content blockquote:not(.kg-blockquote-alt) { padding-left: 2.1em; }

.gh-content blockquote:not(.kg-blockquote-alt)::before {
    content: "\201C";
    position: absolute;
    left: 0;
    top: 0.06em;
    font-family: var(--font-serif);
    font-size: 2.8em;
    line-height: 1;
    color: var(--accent);
    pointer-events: none;
}

/* Nested paragraphs are zeroed by the reset above, so a multi-paragraph quote
   would otherwise run together. */
.gh-content blockquote p + p { margin-top: 0.8em; }

/* Ghost's alt blockquote is its own centred, italic treatment, with no left
   edge to hang a mark on. Only the size is brought down: cards.min.css sets
   1.5em, larger than any heading on the page. Two classes to clear it. */
.gh-content blockquote.kg-blockquote-alt {
    font-size: 1.3em;
    font-style: italic;
}

.gh-content ul, .gh-content ol { padding-left: 1.25em; }
.gh-content li + li { margin-top: 0.5em; }
.gh-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

.gh-content figure { margin-top: 2em; margin-bottom: 2em; }
.gh-content figcaption { margin-top: 10px; font-size: 13px; color: var(--text-faint); text-align: center; }

.gh-content code { font-size: 0.9em; background: rgba(43,44,48,0.06); padding: 2px 5px; border-radius: 2px; }
.gh-content pre { overflow-x: auto; padding: 18px 20px; background: var(--zg-royal-deep); color: var(--zg-cream); font-size: 14px; line-height: 1.55; }
.gh-content pre code { background: none; padding: 0; }

.gh-content table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.gh-content th, .gh-content td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
.gh-content th { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); }

/* ---------- Header cards: the branding insignia ----------
   Ghost lays the card out and the theme leaves it alone: split layout is a
   1fr 1fr grid of text and image, and under kg-content-wide the image is given
   height:100% with object-fit:contain so it fills its half.

   Bounding the insignia by width alone fought that rule. It is now bounded on
   both axes and centred in its half, which keeps Ghost's layout intact and
   still brings the mark down from the 600px it used to render at.
   --insignia-max comes from the "Insignia size" theme setting. */
/* Split cards are full-bleed, and Ghost's swapped variant leaves the text with
   no left padding — which puts the heading hard against the viewport edge. Give
   it the page gutter so it lines up with everything else on the page. */
.gh-content .kg-layout-split.kg-content-wide .kg-header-card-text,
.gh-content .kg-layout-split.kg-content-wide.kg-swapped .kg-header-card-text {
    padding-left: var(--gutter);
    padding-right: clamp(24px, 4vmax, 80px);
}

/* Sized against its own half of the card, not by a fixed pixel cap — a 258px
   mark adrift in a 720px column reads as an accident. Width is a share of the
   column, height a share of the band, so the insignia keeps its proportion to
   the heading at every width; --insignia-max is the ceiling, not the size.

   The selector carries four classes deliberately: Ghost sets height:100% at
   three, and a shorter selector loses silently. */
.gh-content .kg-content-wide .kg-header-card-content .kg-header-card-image,
.gh-content .kg-header-card-content .kg-header-card-image {
    width: min(var(--insignia-max), 70%);
    height: auto;
    max-height: 84%;
    margin: auto;
    padding: clamp(16px, 2.5vh, 32px) 0;
    object-fit: contain;
}
.gh-content .kg-header-card-heading { font-family: var(--font-serif); font-weight: 500; }
.gh-content .kg-header-card-subheading { font-family: var(--font-sans); color: var(--text-soft); }

.gh-content .kg-callout-card { display: flex; gap: 14px; padding: 18px 20px; background: var(--ground-alt); border-left: 1.5px solid var(--accent); }
.gh-content .kg-bookmark-card a { display: flex; flex-wrap: wrap; text-decoration: none; border: 1px solid var(--rule); }
.gh-content .kg-bookmark-content { padding: 18px 20px; flex: 1 1 260px; }
.gh-content .kg-bookmark-title { font-family: var(--font-serif); font-size: 19px; }
.gh-content .kg-bookmark-description { margin-top: 6px; font-size: 15px; color: var(--text-soft); }
.gh-content .kg-bookmark-metadata { margin-top: 10px; font-size: 12px; color: var(--text-faint); }
.gh-content .kg-bookmark-thumbnail { flex: 0 1 200px; }
.gh-content .kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }

.reading-tags {
    max-width: var(--container-width); margin: clamp(36px, 5vh, 56px) auto 0;
    padding: 18px var(--gutter) 0; border-top: 1px solid var(--rule);
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint);
}
.reading-tags a { text-decoration: none; }
.reading-tags a:hover { color: var(--mark); }

/* ---------- Archives ---------- */

.archive-header { padding: clamp(48px, 8vh, 96px) var(--gutter) clamp(20px, 3vh, 36px); max-width: var(--wide-max); }
.archive-header .line { font-size: clamp(34px, 5.4vw, 62px); max-width: none; }

.card-list { display: grid; border-top: 1px solid var(--rule); max-width: var(--wide-max); margin: 0 var(--gutter) clamp(48px, 8vh, 96px); }
.card { border-bottom: 1px solid var(--rule); }
.card { padding: clamp(20px, 3vh, 30px) 0; }
.card-link { display: block; text-decoration: none; }
.card-link:hover .card-title { color: var(--mark); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
.card-tag { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.card-tag:hover { border-bottom-color: currentColor; }
.card-locked { border: 1px solid var(--rule-strong); border-radius: 2px; padding: 2px 7px; letter-spacing: 0.14em; }
/* Capped like the excerpt beneath it. Uncapped, a long title ran the full
   container while shorter ones wrapped early, leaving the column ragged. */
.card-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 3vw, 32px); line-height: 1.18; margin: 0; max-width: 38rem; color: var(--text); text-wrap: balance; transition: color 160ms ease; }
.card-excerpt { margin: 10px 0 0; max-width: 38rem; font-size: 16px; color: var(--text-soft); }

.pagination { display: flex; justify-content: space-between; gap: 20px; padding: 0 var(--gutter) clamp(48px, 8vh, 96px); max-width: var(--wide-max); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.pagination a { text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.page-number { color: var(--text-faint); }

.writing-empty { padding: clamp(32px, 5vh, 56px) var(--gutter); }

/* ---------- Breadcrumb ---------- */

.breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb .here { color: var(--text-soft); }

/* ---------- Sleeves ---------- */

.sleeves {
    display: flex;
    flex-wrap: wrap;
    padding: 0 var(--gutter);
    max-width: var(--wide-max);
    border-top: 1px solid var(--rule);
}

.sleeve {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 0;
    margin-right: clamp(24px, 3vw, 48px);
    border-bottom: 1px solid transparent;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
}

.sleeve:hover { color: var(--text); border-bottom-color: var(--accent); }
.sleeve-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ---------- Footer ---------- */

/* Footer sits on the page's own ground: --ground-alt introduced a second,
   lighter green under the home page and read as a mistake. The block is
   centred in the container rather than pinned to a narrow left column. */
/* The footer spans the page exactly as the masthead does — same gutters, no
   inner max-width — so the secondary menu lands on the same right edge as the
   primary one, and the block reads as a band across the bottom rather than a
   column pinned to the left. */
.site-footer { padding: clamp(48px, 7vh, 80px) var(--gutter) clamp(48px, 8vh, 88px); border-top: 1px solid var(--rule); background: var(--ground); }
.footer-inner { display: flex; flex-direction: column; gap: clamp(24px, 4vh, 40px); }
.footer-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 32px; }

/* Legal text set in columns: it fills the width without the line length going
   to 170 characters. This is what makes the block read as a square. */
.legal-block { columns: 1; column-gap: clamp(32px, 4vw, 72px); }

@media (min-width: 52rem) { .legal-block { columns: 2; } }
@media (min-width: 88rem) { .legal-block { columns: 3; } }

/* No break-inside: avoid. Holding whole paragraphs together forces the
   balancer to leave gaps in the shorter columns whenever one paragraph is
   longer than the rest — which is what a four-paragraph block of uneven
   lengths guarantees. Letting the prose flow fills every column evenly;
   orphans and widows keep a single stranded line off a column break. */
.legal-block .legal {
    margin: 0 0 12px;
    orphans: 2;
    widows: 2;
}
.footer-wordmark { font-family: var(--font-wordmark); font-size: 17px; font-weight: 700; }
.footer-nav .nav { font-size: 11px; }

.legal { font-size: 12.5px; line-height: 1.6; color: var(--text-faint); margin: 0; }
.strip-foot { margin: clamp(16px, 2.4vh, 24px) 0 0; padding-right: var(--gutter); }

.more {
    display: inline-block;
    font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; text-decoration: none;
    color: var(--text-soft);
    border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}

.more:hover { color: var(--text); }

.legal.copyright { padding-top: 16px; border-top: 1px solid var(--rule); }