/* =========================================================================
   Incubate — screen.css
   Editorial theme for Ghost. Monochrome; Inter + Georgia.

   Contents
     1.  Tokens & colour schemes
     2.  Reset & base elements
     3.  Layout primitives (.wrap, .site-main)
     4.  Masthead & navigation
     5.  Buttons, slugs, bylines, pills
     6.  Cards
     7.  The feed column
     8.  Subscribe interstitial
     9.  Article (single post/page)
     10. Koenig card contract (.kg-*)
     11. Archives, related, pagination, error
     12. Footer
     13. Utilities & motion preferences
   ========================================================================= */


/* 0. Inter — self-hosted variable font (SIL OFL 1.1, see assets/fonts/)
   One file per subset covers weights 400–700, so headings, bylines and UI all
   draw from a single ~48KB download for latin.
   ------------------------------------------------------------------------ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 1. Tokens & colour schemes
   ------------------------------------------------------------------------ */

:root {
    /* Palette */
    --ink:            #0b0b0c;
    --ink-soft:       #55565b;
    --ink-faint:      #8b8d94;
    --paper:          #ffffff;
    --paper-alt:      #f2f2f0;
    --rule:           #e2e2df;
    /* Monochrome: the "accent" is simply ink. Kept as a token so emphasis has
       one name, and so it inverts automatically with the dark scheme. Ghost's
       Admin accent colour is deliberately ignored. */
    --accent:         var(--ink);
    --accent-ink:     var(--paper);
    /* Hover highlight — the marker band swept across a headline. Opaque, and
       the same in both colour schemes, so --highlight-ink can be a single
       value: the band always supplies its own near-black-on-yellow contrast
       regardless of what --ink is doing. */
    --highlight:      #fff899;
    --highlight-ink:  #0b0b0c;

    /* Form feedback — the one place where monochrome would cost the reader
       real information. Unlike the highlight, these sit on the page rather
       than on a band of their own, so they flip with the scheme. */
    --positive:       #0f7a4d;
    --negative:       #b3261e;

    /* Type — two faces, strictly divided:
         --font-sans   Inter (self-hosted) — ALL furniture: headings, bylines,
                       kickers, captions, nav, buttons, everything on the homepage
         --font-serif  Georgia — article prose only
       --gh-font-heading / --gh-font-body are injected by {{ghost_head}} when a
       publisher picks fonts in Admin → Design; they win when present. */
    --font-sans:   var(--gh-font-heading, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
    --font-serif:  var(--gh-font-body, Georgia, "Times New Roman", serif);
    --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Rhythm */
    --wrap:        1360px;
    --column:      48rem;  /* the post feed — one column, on every list page */
    --measure:     42rem;  /* article prose, narrower than the feed */
    --gap:         clamp(1rem, 2.2vw, 2rem);
    --gutter:      clamp(1.25rem, 4vw, 3.5rem);
    --radius:       6px;  /* figures, cards, inputs */
    --radius-btn:   8px;  /* buttons */
    --radius-panel: 18px; /* the two subscribe panels */

    /* Motion */
    --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dark scheme — applied explicitly, or by preference when set to Auto */
.is-dark {
    --ink:        #f4f4f2;
    --ink-soft:   #a6a7ac;
    --ink-faint:  #75767c;
    --paper:      #0b0b0c;
    --paper-alt:  #171719;
    --rule:       #2a2a2d;
    --positive:   #6ee7a8;
    --negative:   #ff8f8f;
}

@media (prefers-color-scheme: dark) {
    .is-auto {
        --ink:       #f4f4f2;
        --ink-soft:  #a6a7ac;
        --ink-faint: #75767c;
        --paper:     #0b0b0c;
        --paper-alt: #171719;
        --rule:      #2a2a2d;
        --positive:  #6ee7a8;
        --negative:  #ff8f8f;
    }
}


/* 2. Reset & base elements
   ------------------------------------------------------------------------ */

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.55;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }

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

p { margin: 0 0 1em; }

button, input, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

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

/* Selecting text draws the same marker band as hovering a headline — one
   highlight colour in the theme, whoever or whatever applies it. */
::selection {
    background: var(--highlight);
    color: var(--highlight-ink);
}


/* 3. Layout primitives
   ------------------------------------------------------------------------ */

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-main { display: block; }

/* The reading column. Everything on a list page that must line up with the
   feed — the feed itself, the pagination beneath it — sits in one of these,
   centred inside a .wrap. */
.column {
    width: 100%;
    max-width: var(--column);
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--accent);
    color: var(--accent-ink);
}
.skip-link:focus { left: 0; }

.section-title {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
}


/* 4. Masthead & navigation
   ------------------------------------------------------------------------ */

.masthead__bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.masthead__bar.is-stuck {
    box-shadow: 0 1px 12px rgb(0 0 0 / 8%);
}

.masthead__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--gap);
    min-height: 72px;
}

/* The wordmark holds the centre of the bar at every width — navigation and
   members actions in the outer columns above 900px, the menu toggle alone on
   the right below it.

   Every item is pinned to row 1 explicitly: auto-placement fills columns in
   DOM order and never backtracks, so the wordmark taking column 2 first would
   otherwise push the navigation onto a second row. */
.masthead__brand {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.brand {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.brand img { max-height: 34px; width: auto; }

.nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.9rem, 1.8vw, 1.9rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__item a {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.94rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.nav__item.is-current a { border-bottom-color: var(--accent); }

/* display: contents lifts the nav's two halves out of their wrapper and into
   the masthead grid, so they can take the outer columns while the wordmark
   keeps the middle one. Below 900px the wrapper becomes the drop-down panel
   again (section 13) and both halves travel with it. */
@media (min-width: 900px) {
    .nav { display: contents; }
    .nav__list    { grid-column: 1; grid-row: 1; justify-self: start; }
    .nav__actions { grid-column: 3; grid-row: 1; justify-self: end; }
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Sign in sits beside Subscribe — quieter, so the button stays the one CTA */
.nav__signin {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--ink-soft);
}

.nav__search {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.2rem;
    background: none;
    border: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.nav__search:hover { color: var(--accent); }
.nav__search svg { width: 17px; height: 17px; }
.nav__search-label { display: none; }

/* Hamburger — three bars drawn from one element plus its pseudo-elements */
.nav-toggle {
    display: none;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    padding: 0.5rem;
    background: none;
    border: 0;
}
.nav-toggle__box { display: block; width: 22px; height: 14px; position: relative; }
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.22s var(--ease), opacity 0.15s linear;
}
.nav-toggle__bar { top: 6px; }
.nav-toggle__bar::before { content: ""; top: -6px; }
.nav-toggle__bar::after  { content: ""; top: 6px; }

[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateY(-6px) rotate(-45deg); }

.masthead-intro {
    padding-block: clamp(2rem, 5vw, 3.75rem) clamp(1.25rem, 3vw, 2rem);
}
.masthead-intro p {
    margin: 0;
    max-width: 34ch;
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}


/* 5. Buttons, slugs, bylines, pills
   ------------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--ghost  { border-color: currentColor; color: var(--ink); }

/* -- The marker sweep -----------------------------------------------------
   Every text link in the theme draws the same band on hover, so "you can click
   this" is one gesture rather than a different colour shift per context.

   Deliberately not on the list:
     * .btn, .skip-link, .slug   — already carry a solid background of their own
     * .tag-pill                 — a bordered pill; a band inside it reads as a
                                   rendering fault rather than a highlight
     * .brand with a logo, .card__media, .footer__social
                                 — images, not text. .brand--text gets the sweep;
                                   an uploaded logo does not, since a band behind
                                   a transparent PNG is nobody's idea of a hover.

   Inline padding only. Several of these are inline-block or flex items whose
   vertical padding is load-bearing (.nav__item a hangs its current-page rule off
   it), so the band takes the line box's height and bleeds sideways only.
   ------------------------------------------------------------------------ */

.brand--text,
.nav__item a,
.nav__signin,
.kicker,
.byline__author,
.hero-author__name,
.author-chip__name,
.author-bio__link,
.card__title a,
.pagination__link:not(.is-disabled),
.footer__brand,
.footer__nav a,
.footer__credit a,
.archive-head__count a,
.content-body a {
    padding-inline: 0.1em;
    margin-inline: -0.1em;
    background-image: linear-gradient(var(--highlight), var(--highlight));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0 100%;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.32s var(--ease), color 0.32s var(--ease);
}

.brand--text:hover,
.nav__item a:hover,
.nav__signin:hover,
.kicker:hover,
.byline__author:hover,
.hero-author:hover .hero-author__name,
.author-chip:hover .author-chip__name,
.author-bio__link:hover,
.card__title a:hover,
.pagination__link:not(.is-disabled):hover,
.footer__brand:hover,
.footer__nav a:hover,
.footer__credit a:hover,
.archive-head__count a:hover,
.content-body a:hover {
    background-size: 100% 100%;
    color: var(--highlight-ink);
}

/* Category label — a highlight chip above every headline, inverting on hover */
.slug {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.22em 0.5em;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.slug:hover { background: var(--ink); color: var(--paper); }
.slug--lg { font-size: 0.92rem; margin-bottom: 1rem; }

.byline {
    margin: 0.9rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--ink-faint);
}
.byline__author { color: var(--ink-soft); font-weight: 500; }
.byline__sep { margin-inline: 0.4em; }

.badge {
    display: inline-block;
    padding: 0.1em 0.5em;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tag-pill {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--rule);
    border-radius: 100px;
    font-size: 0.8rem;
    color: var(--ink-soft);
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.tag-pill:hover { border-color: var(--accent); color: var(--accent); }


/* 6. Cards
   ------------------------------------------------------------------------ */

.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.card__media {
    display: block;
    overflow: hidden;
    background: var(--paper-alt);
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }

.card__title {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}
/* Headlines take the shared marker sweep (section 5) with a little vertical
   bleed on top, so the band clears the ascenders of display-sized type. Safe
   here and not in the shared rule: these links are inline, so vertical padding
   overflows the line box instead of resizing it. */
.card__title a { padding-block: 0.04em; }

.card__excerpt {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.5;
    max-width: 46ch;
}

/* -- Lead story: the same card as the rest of the feed, scaled up --------- */

.card--hero .card__media {
    aspect-ratio: 16 / 9;
    margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
    border-radius: var(--radius);
}
.card--hero .card__title {
    font-size: clamp(1.9rem, 5.2vw, 2.9rem);
    letter-spacing: -0.032em;
    margin-bottom: 0.7rem;
}
.card--hero .card__excerpt {
    font-size: clamp(1.05rem, 1.7vw, 1.22rem);
    max-width: 54ch;
}

/* Kicker — uppercase category label above the hero headline */
.kicker {
    display: inline-block;
    margin-bottom: 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.hero-author {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.hero-author__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-alt);
}
.hero-author__avatar--blank { display: block; }

/* -- Feed card: image on top, text beneath ------------------------------- */

.card--stack .card__media {
    aspect-ratio: 16 / 10;
    margin-bottom: clamp(1rem, 1.8vw, 1.4rem);
    border-radius: var(--radius);
}
.card--stack .card__title {
    font-size: clamp(1.45rem, 3.4vw, 1.95rem);
    letter-spacing: -0.026em;
    margin-bottom: 0.55rem;
}
.card--stack .card__excerpt {
    font-size: 1.02rem;
    max-width: 54ch;
}

/* -- Compact tile: side-by-side thumbnail ------------------------------- */

.card--compact .card__media {
    aspect-ratio: 16 / 10;
    margin-bottom: 0.9rem;
}
.card--compact .card__title { font-size: 1.15rem; }


/* 7. The feed column
   ------------------------------------------------------------------------
   Every post list in the theme — homepage, tag archive, author archive — is
   the same thing: one column of stacked cards, separated by a hairline.

   All vertical rhythm hangs off the adjacent-sibling rule rather than off the
   container, so a .feed that renders empty (a site with fewer posts than the
   split index in index.hbs expects) collapses to nothing instead of leaving a
   stray rule or a band of white space.
   ------------------------------------------------------------------------ */

.feed {
    margin-block: clamp(1.5rem, 4vw, 2.75rem) clamp(2.5rem, 5vw, 4rem);
}

.feed > * + * {
    margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
    padding-top: clamp(2.25rem, 4.5vw, 3.5rem);
    border-top: 1px solid var(--rule);
}

/* The lead story closes with the theme's heavy rule, so the drop from lead
   to feed reads as a deliberate change of gear rather than another card. */
.feed > .card--hero + * {
    border-top: 3px solid var(--ink);
}


/* 8. Subscribe interstitial
   ------------------------------------------------------------------------
   The same grey panel as the members paywall on a post (section 9): centred
   copy, one field, one button. The theme has exactly two places that ask for
   an email address, and they are deliberately the same object.
   ------------------------------------------------------------------------ */

.signup {
    margin-block: clamp(2.5rem, 5vw, 4rem);
}

.signup__inner {
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--paper-alt);
    border-radius: var(--radius-panel);
    text-align: center;
}

.signup__title {
    max-width: 22ch;
    margin-inline: auto;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.signup__sub {
    margin: 0.85rem auto 1.5rem;
    max-width: 44ch;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.signup__form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    max-width: 27rem;
    margin-inline: auto;
}

.signup__input {
    flex: 1 1 13rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink);
}
.signup__input::placeholder { color: var(--ink-faint); }
.signup__input:focus { border-color: var(--ink); outline: none; }

.signup__button { flex: 0 0 auto; }

.signup__message {
    position: absolute;
    top: calc(100% + 0.7rem);
    inset-inline: 0;
    margin: 0;
    font-size: 0.85rem;
    display: none;
}
.signup__message--success { color: var(--positive); }
.signup__message--error   { color: var(--negative); }

/* Ghost's members script sets these state classes on the form */
.success .signup__message--success,
.error   .signup__message--error { display: block; }


/* 9. Article
   ------------------------------------------------------------------------ */

.article { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }

.article__header {
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin-inline: auto;
    text-align: left;
}

.kicker--lg { font-size: 0.85rem; margin-bottom: 1rem; }

.article__title {
    font-size: clamp(2.05rem, 5vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.033em;
    font-weight: 700;
}
.article__title em {
    font-style: italic;
    font-weight: 400;
}

/* Dek — the standfirst, set in the body reading face */
.article__standfirst {
    margin: 1.15rem 0 0;
    font-family: var(--font-sans);
    font-size: clamp(1.08rem, 1.6vw, 1.28rem);
    line-height: 1.48;
    letter-spacing: -0.005em;
    color: var(--ink-soft);
    max-width: 56ch;
}

/* Author row — avatar, name, then a single middot-separated meta chain */
.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-sans);
    font-size: 0.875rem;
}
.article__meta .byline {
    margin-top: 0;
    font-size: inherit;
}

.authors { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.author-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 550;
    color: var(--ink);
}
.author-chip__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-alt);
}
.author-chip__avatar--blank { display: block; }

.article__figure {
    margin: clamp(2rem, 4vw, 3.25rem) auto;
    max-width: var(--wrap);
    padding-inline: var(--gutter);
}
.article__figure img { width: 100%; }
.article__figure figcaption {
    margin-top: 0.8rem;
    font-family: var(--font-sans);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--ink-faint);
    text-align: left;
    max-width: 62ch;
}
.article__figure figcaption strong {
    font-weight: 600;
    color: var(--ink-soft);
}

.article__tags,
.author-bio,
.paywall {
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin-inline: auto;
}

.article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.paywall {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--paper-alt);
    border-radius: var(--radius-panel);
    text-align: center;
}
.paywall__title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.paywall__body { margin: 0.85rem auto 1.5rem; max-width: 44ch; color: var(--ink-soft); }
.paywall__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.author-bio {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}
/* background, so the --blank variant below shows a filled circle rather than
   nothing — the bio keeps its shape for authors with no picture uploaded, the
   same way .hero-author and .author-chip do. */
.author-bio__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--paper-alt);
}
.author-bio__avatar--blank { display: block; }
.author-bio__text { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.author-bio__name { font-size: 1.2rem; }
.author-bio__blurb { margin: 0.5rem 0 0.5rem; color: var(--ink-soft); font-size: 0.95rem; }
.author-bio__link { font-size: 0.85rem; color: var(--accent); }

.comments { margin-block: clamp(2.5rem, 5vw, 4rem); max-width: calc(var(--measure) + var(--gutter) * 2); }


/* 10. Koenig card contract (.kg-*)
   ------------------------------------------------------------------------
   Ghost emits fixed markup for editor cards; the theme's only job is CSS.
   The body is a three-track grid so that .kg-width-wide / .kg-width-full can
   break out of the text measure without negative margins.
   ------------------------------------------------------------------------ */

.content-body {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start] minmax(0, 12rem)
        [main-start] min(var(--measure), calc(100% - var(--gutter) * 2)) [main-end]
        minmax(0, 12rem) [wide-end]
        minmax(var(--gutter), 1fr) [full-end];
    margin-top: clamp(2rem, 4vw, 3.25rem);
    font-family: var(--font-serif);
    font-size: 1.2rem;
    line-height: 1.7;
}

.content-body > * { grid-column: main; }
.content-body > .kg-width-wide { grid-column: wide; }
.content-body > .kg-width-full { grid-column: full; }

.content-body > p { margin: 0 0 1.45em; }

/* Section headings stay in Inter, so structure reads as a different voice
   from the body copy rather than just a bigger version of it. */
.content-body > h2,
.content-body > h3,
.content-body > h4 {
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.content-body > h2 {
    margin: 2.2em 0 0.5em;
    font-size: 1.62em;
    font-weight: 650;
    line-height: 1.18;
}
.content-body > h3 {
    margin: 1.9em 0 0.45em;
    font-size: 1.24em;
    font-weight: 600;
    line-height: 1.25;
}
.content-body > h4 {
    margin: 1.7em 0 0.4em;
    font-size: 1.05em;
    font-weight: 600;
}

/* Acronyms get a dotted underline, as in the reference articles */
.content-body abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.content-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.content-body > ul,
.content-body > ol { margin: 0 0 1.5em; padding-inline-start: 1.4em; }
.content-body li { margin-bottom: 0.5em; }

/* Pull quote — no rule, no quotation marks, no accent bar. Centred at a
   shorter measure than the body and set larger, so it reads as a lift out of
   the text rather than a paragraph that happens to be indented. The scale
   change and the surrounding air carry it; nothing is drawn. */
.content-body > blockquote {
    margin: 2.2em auto;
    max-width: 34ch;
    padding: 0;
    border: 0;
    font-size: 1.25em;
    font-style: italic;
    line-height: 1.45;
    text-align: center;
    color: var(--ink-soft);
}
.content-body > blockquote p { margin: 0 0 0.5em; }
.content-body > blockquote p:last-child { margin-bottom: 0; }

.content-body blockquote.kg-blockquote-alt {
    border: 0;
    padding: 0;
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
}

.content-body > hr {
    grid-column: main;
    margin: 2.75em 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

.content-body code {
    padding: 0.15em 0.35em;
    background: var(--paper-alt);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.88em;
}
.content-body > pre {
    margin: 1.75em 0;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    font-size: 0.9rem;
    line-height: 1.55;
}
.content-body > pre code { background: none; padding: 0; color: inherit; }

.content-body > table { width: 100%; border-collapse: collapse; margin: 1.75em 0; font-size: 0.95em; }
.content-body th, .content-body td { padding: 0.6em 0.8em; border-bottom: 1px solid var(--rule); text-align: start; }
.content-body th { font-family: var(--font-sans); font-weight: 600; }

/* Cards */
.kg-card { margin: 2em 0; }

.kg-image-card { text-align: center; }
.kg-image { margin-inline: auto; border-radius: var(--radius); }
.kg-width-full .kg-image { border-radius: 0; width: 100%; }
/* Captions match the article's figure captions: Inter, small, left-aligned,
   with a bold lead-in ("Fig 1.") when the author writes one. */
.kg-image-card figcaption,
.kg-gallery-card figcaption,
.kg-embed-card figcaption,
.kg-video-card figcaption,
.kg-audio-card figcaption {
    margin-top: 0.8em;
    font-family: var(--font-sans);
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--ink-faint);
    text-align: left;
    max-width: 62ch;
}
.kg-card figcaption strong { font-weight: 600; color: var(--ink-soft); }

.kg-gallery-container { display: flex; flex-direction: column; }
.kg-gallery-row { display: flex; }
.kg-gallery-row:not(:first-of-type) { margin-top: 0.6rem; }
.kg-gallery-image { margin-inline: 0.3rem; }
.kg-gallery-image:first-child { margin-inline-start: 0; }
.kg-gallery-image:last-child  { margin-inline-end: 0; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.kg-embed-card iframe { max-width: 100%; }

.kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    flex-wrap: wrap;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.18s var(--ease);
}
.kg-bookmark-card a.kg-bookmark-container:hover { border-color: var(--accent); }
.kg-bookmark-content { display: flex; flex-direction: column; flex: 1 1 240px; padding: 1.15em; order: 1; }
.kg-bookmark-title { font-family: var(--font-sans); font-size: 0.95em; font-weight: 600; }
.kg-bookmark-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.4em;
    font-size: 0.88em;
    color: var(--ink-soft);
}
.kg-bookmark-metadata { display: flex; align-items: center; flex-wrap: wrap; margin-top: 1em; font-size: 0.8em; color: var(--ink-soft); }
.kg-bookmark-icon { width: 1.2em; height: 1.2em; margin-inline-end: 0.5em; }
.kg-bookmark-author::after { content: "•"; margin: 0 0.5em; }
.kg-bookmark-publisher {
    overflow: hidden;
    max-width: 240px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink-faint);
}
.kg-bookmark-thumbnail { flex: 1 1 30%; order: 2; position: relative; min-width: 200px; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 640px) {
    .kg-bookmark-card a.kg-bookmark-container { flex-direction: column; }
    .kg-bookmark-thumbnail { order: -1; min-height: 160px; }
}

.kg-callout-card {
    display: flex;
    gap: 0.8em;
    padding: 1.15em 1.4em;
    border-radius: var(--radius);
    background: var(--paper-alt);
}
.kg-callout-card-accent { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.kg-callout-emoji { flex: none; font-size: 1.15em; line-height: 1.4; }
.kg-callout-text { margin: 0; }

.kg-toggle-card {
    padding: 1.15em 1.4em;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.kg-toggle-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kg-toggle-heading-text { font-size: 1.05em; margin: 0; }
.kg-toggle-card-icon { width: 14px; height: 14px; transition: transform 0.2s var(--ease); }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon { transform: rotate(180deg); }
.kg-toggle-content { margin-top: 0.9em; color: var(--ink-soft); }

.kg-button-card { display: flex; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.7em 1.4em;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
}

.kg-header-card { padding: clamp(2rem, 5vw, 4rem) var(--gutter); text-align: center; }
.kg-header-card-header { font-family: var(--font-sans); font-size: clamp(1.8rem, 4vw, 3rem); }

.kg-product-card-container,
.kg-signup-card,
.kg-cta-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.5em;
}

.kg-nft-card { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }


/* 11. Archives, related, pagination, error
   ------------------------------------------------------------------------ */

.archive-head {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.archive-head__kicker {
    margin: 0 0 0.75rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.archive-head__title { font-size: clamp(2.2rem, 6vw, 4.5rem); letter-spacing: -0.035em; }
.archive-head__desc { margin: 1.1rem 0 0; max-width: 52ch; font-size: 1.1rem; color: var(--ink-soft); }
.archive-head__count { margin: 1.25rem 0 0; font-size: 0.85rem; color: var(--ink-faint); }
.archive-head__avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5rem; }

.related {
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--rule);
    background: var(--paper-alt);
}
.related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
    font-size: 0.9rem;
    font-weight: 500;
}
.pagination__link.is-disabled { color: var(--ink-faint); pointer-events: none; }
.pagination__count { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.error {
    padding-block: clamp(4rem, 12vw, 9rem);
    text-align: center;
}
.error__code {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(5rem, 18vw, 12rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--accent);
}
.error__title { margin-top: 1.5rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.error__body { margin: 1rem auto 2rem; max-width: 40ch; color: var(--ink-soft); }
.error__details { list-style: none; padding: 0; margin-top: 2rem; font-size: 0.85rem; color: var(--ink-faint); }


/* 12. Footer
   ------------------------------------------------------------------------ */

.footer {
    margin-top: clamp(3rem, 7vw, 6rem);
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 3px solid var(--ink);
}

.footer__inner {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 800px) {
    .footer__inner {
        grid-template-columns: auto 1fr auto;
        gap: 2.5rem;
    }
    .footer__meta { grid-column: 1 / -1; }
}

.footer__brand {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.footer__nav ul,
.footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer__nav a { font-size: 0.92rem; color: var(--ink-soft); }

.footer__social a { display: block; color: var(--ink-soft); }
.footer__social svg { width: 18px; height: 18px; }
.footer__social a:hover { color: var(--accent); }

.footer__meta {
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.82rem;
    color: var(--ink-faint);
}
.footer__meta p { margin: 0 0 0.35rem; }
.footer__meta a { text-decoration: underline; text-underline-offset: 2px; }


/* 13. Utilities & motion preferences
   ------------------------------------------------------------------------ */

.u-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Mobile navigation: the nav collapses behind the toggle below 900px */
@media (max-width: 899px) {
    .nav-toggle { display: block; }

    .nav {
        position: fixed;
        inset: 72px 0 0;
        z-index: 90;
        display: none;
        flex-direction: column;
        /* Resets the bar's align-items: center — as a column, that would
           shrink-wrap the list and float it in the middle of the panel. */
        align-items: stretch;
        justify-content: flex-start;
        gap: 2rem;
        padding: 2rem var(--gutter) 4rem;
        background: var(--paper);
        overflow-y: auto;
    }
    .nav.is-open { display: flex; }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__item a {
        display: block;
        padding: 0.9rem 0;
        border-bottom: 1px solid var(--rule);
        font-family: var(--font-sans);
        font-size: 1.5rem;
    }
    .nav__item.is-current a { border-bottom-color: var(--accent); }

    .nav__actions { flex-direction: column; align-items: stretch; }
    .nav__search { justify-content: flex-start; padding: 0.75rem 0; }
    .nav__search-label { display: inline; }

    .card--hero .card__media { aspect-ratio: 3 / 2; }
}

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

@media print {
    .masthead, .footer, .signup, .related, .pagination { display: none !important; }
    .content-body { display: block; }
}