/* =====================================================================
   ADVOKAT FRIDA -- "Dispatch"
   Bold, color-forward editorial magazine styling for a privacy
   publication. Loud Anton nameplate, filled per-category colour chips,
   a black edition band, oversized headlines.
   Plain source CSS, no build step. Linked directly from default.hbs.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
    /* Palette */
    --ground:      #f6f4ef; /* warm off-white page ground */
    --paper:       #fffdf8; /* brighter paper for framed surfaces */
    --ink:         #16140f; /* near-black, body + headings + rules */
    --ink-soft:    #4a463d; /* secondary text + meta / captions */
    --line:        #1f1d18; /* heavy editorial rules */
    --hairline:    rgba(31, 29, 24, 0.14); /* thin separators */
    --chip-tint:   #fffaf2; /* light text on a filled colour chip */

    /* Per-category accent. Defaults to forest; overridden per primary-tag slug. */
    --teal:   #12666a;
    --indigo: #3a3a8c;
    --amber:  #9e5415;
    --red:    #c83232;
    --forest: #2f6b3a;
    --accent: var(--forest);

    /* Type */
    --font-display: "Anton", Impact, "Arial Narrow", sans-serif;            /* nameplate + lead + big headlines */
    --font-head:    "Space Grotesk", "Segoe UI", system-ui, sans-serif;     /* card/article titles + body */
    --font-label:   "Archivo", system-ui, -apple-system, sans-serif;        /* eyebrows, labels, meta, nav */
    --font-body:    "Space Grotesk", system-ui, -apple-system, sans-serif;

    /* Type scale -- every font-size snaps to one of these steps. Kills the
       old 0.66-1.1rem small-text sprawl by putting it on a real ladder. */
    --fs-micro:   0.72rem; /* uppercase chips, labels, meta rows, captions, fine print */
    --fs-meta:    0.8rem;  /* nav, buttons, table head, section + toc + toolkit labels */
    --fs-label:   0.9rem;  /* "Filed under" + rail section headers, h3 jump-list items */
    --fs-small:   0.95rem; /* small body: excerpts, descriptions, tables, "By Frida" */
    --fs-body:    1rem;    /* compact body (callouts, Frida's note) */
    --fs-reading: 1.1rem;  /* the article reading column */
    --fs-lead:    1.2rem;  /* standfirst, blockquote, subheads, h4 */
    --fs-h3:      1.4rem;
    --fs-h2:      1.8rem;
    --fs-xl:      1.5rem;  /* alt blockquote / big pull moment */

    /* Measure + rhythm */
    --measure: 40rem;   /* readable column width for article body */
    --gutter:  2rem;
    --maxw:    82rem;   /* outer content width */
}

/* ---------------------------------------------------------------------
   2. Reset-ish base
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--ground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.12;
    color: var(--ink);
    margin: 0 0 0.5em;
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 1.15em;
}

/* Skip link + visible focus (accessibility) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: #fff;
    padding: 0.6rem 1rem;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.skip-link:focus {
    left: 0;
    text-decoration: none;
}

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

/* Visually-hidden, available to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared meta-label treatment: small, heavy, uppercase, tracked. */
.eyebrow,
.edition-eyebrow,
.post-card-label,
.article-label,
.fridas-note-label,
.read-next-label,
.article-tags-label,
.article-byline-name {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* ---------------------------------------------------------------------
   3. Viewport shell
   --------------------------------------------------------------------- */
.viewport {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------
   4. Masthead
   --------------------------------------------------------------------- */
.masthead {
    padding: 1.4rem 0 1.25rem;
    border-bottom: 4px solid var(--ink);
    text-align: center;
}

.masthead .eyebrow {
    color: var(--ink-soft);
    letter-spacing: 0.22em;
    margin: 0 0 0.85rem;
}

.masthead-nameplate {
    display: inline-block;
    color: var(--ink);
}

.masthead-nameplate:hover {
    text-decoration: none;
}

.masthead-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 11vw, 6.5rem);
    line-height: 0.86;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    margin: 0;
}

.masthead-tagline {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.3;
    color: var(--ink);
    margin: 0.9rem auto 0;
    max-width: none;
}

.masthead-nav {
    margin-top: 1.1rem;
}

.masthead-nav .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

.masthead-nav .nav li {
    position: relative;
}

.masthead-nav .nav li a {
    display: block;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 0.45rem 1rem;
}

.masthead-nav .nav li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 0.8rem;
    background: var(--hairline);
}

.masthead-nav .nav li a:hover {
    color: var(--red);
    text-decoration: none;
}

/* ---------------------------------------------------------------------
   5. Main + edition rail (black band)
   --------------------------------------------------------------------- */
.site-main {
    flex: 1 0 auto;
    padding: 2rem 0 3.5rem;
}

.edition-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--ink);
    color: var(--ground);
    padding: 0.6rem 1.15rem;
    margin-bottom: 2rem;
}

.edition-eyebrow {
    color: #fff;
    letter-spacing: 0.2em;
    margin: 0;
}

.edition-dateline {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: var(--fs-meta);
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

/* ---------------------------------------------------------------------
   6. Post feed (magazine grid)
   --------------------------------------------------------------------- */
.post-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 1.6rem;
}

/* Per-category accents (keyed off the primary tag slug) */
.tag-setup-guide      { --accent: var(--teal); }
.tag-playbook-drop    { --accent: var(--indigo); }
.tag-toolkit          { --accent: var(--amber); }
.tag-week-in-privacy  { --accent: var(--red); }
.tag-fridas-take      { --accent: var(--forest); }

/* ---------------------------------------------------------------------
   7. Post card
   --------------------------------------------------------------------- */
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: transparent;
}

.post-card-image-link {
    display: block;
    overflow: hidden;
}

.post-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: var(--accent);
    transition: transform 0.4s ease;
}

.post-card:hover .post-card-image {
    transform: scale(1.03);
}

.post-card-body {
    padding: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    align-items: flex-start;
}

.post-card-label {
    align-self: flex-start;
    color: var(--chip-tint);
    background: var(--accent);
    padding: 0.32rem 0.6rem 0.28rem;
    margin-bottom: 0.7rem;
    font-size: var(--fs-micro);
    letter-spacing: 0.13em;
}

.post-card-label:hover {
    text-decoration: none;
    opacity: 0.9;
}

.post-card-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.32rem;
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 0.5rem;
}

.post-card-title a {
    color: var(--ink);
}

.post-card-title a:hover {
    color: var(--accent);
    text-decoration: none;
}

.post-card-excerpt {
    color: var(--ink-soft);
    font-size: var(--fs-small);
    line-height: 1.45;
    margin: 0 0 0.85rem;
}

.post-card-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.post-card-byline {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
}

.post-card-dot {
    color: var(--accent);
    font-weight: 700;
}

/* The lead story: a bordered box with a big image and oversized headline.
   Scoped with :not(.read-next-feed) so the "More from the desk" grid below
   an article does NOT promote its first card to a lead. */
.post-feed:not(.read-next-feed) > .post-card:first-child {
    grid-column: 1 / -1;
    border: 3px solid var(--line);
    background: var(--paper);
}

/* Two-column lead only when the lead actually has a feature image; a
   text-only lead stays one full-width bordered block (no empty column). */
.post-feed:not(.read-next-feed) > .post-card:first-child:has(.post-card-image-link) {
    display: grid;
    grid-template-columns: 1.18fr 1fr;
    gap: 0;
    align-items: stretch;
}

.post-feed:not(.read-next-feed) > .post-card:first-child .post-card-image-link {
    height: 100%;
}

.post-feed:not(.read-next-feed) > .post-card:first-child .post-card-image {
    height: 100%;
    aspect-ratio: auto;
    min-height: 22rem;
}

.post-feed:not(.read-next-feed) > .post-card:first-child .post-card-body {
    padding: 1.9rem 2rem 2rem;
    justify-content: center;
}

.post-feed:not(.read-next-feed) > .post-card:first-child .post-card-label {
    font-size: var(--fs-micro);
    padding: 0.42rem 0.8rem 0.36rem;
    margin-bottom: 1rem;
}

.post-feed:not(.read-next-feed) > .post-card:first-child .post-card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    margin-bottom: 0.8rem;
}

.post-feed:not(.read-next-feed) > .post-card:first-child .post-card-excerpt {
    font-size: var(--fs-reading);
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 1rem;
}

@media (max-width: 50rem) {
    .post-feed:not(.read-next-feed) > .post-card:first-child:has(.post-card-image-link) {
        grid-template-columns: 1fr;
    }
    .post-feed:not(.read-next-feed) > .post-card:first-child .post-card-image {
        min-height: 14rem;
    }
}

/* ---------------------------------------------------------------------
   8. Single article
   --------------------------------------------------------------------- */
.article {
    max-width: var(--maxw);
    margin: 0 auto;
}

.article-header {
    max-width: 72rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.page-avatar {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ink);
    margin: 0 auto 1.3rem;
}

.article-label {
    display: inline-block;
    color: var(--chip-tint);
    background: var(--accent);
    padding: 0.4rem 0.8rem 0.34rem;
    margin-bottom: 1.1rem;
    font-size: var(--fs-micro);
    letter-spacing: 0.13em;
}

.article-label--page {
    color: var(--chip-tint);
    background: var(--forest);
}

.article-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    margin: 0 0 1rem;
}

.article-standfirst {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: var(--ink-soft);
    margin: 0 0 1.3rem;
    white-space: pre-line;
}

.article-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    padding-top: 1rem;
    border-top: 2px solid var(--ink);
}

.article-byline-name {
    color: var(--ink);
}

.article-byline-pub {
    font-family: var(--font-label);
    font-style: normal;
}

.article-byline-dot {
    color: var(--accent);
    font-weight: 700;
}

.article-feature {
    margin: 0 0 2.5rem;
}

.article-feature-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 30rem;
    object-fit: cover;
    border: 3px solid var(--line);
}

.article-feature figcaption {
    margin-top: 0.6rem;
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    text-align: center;
}

/* Magazine layout: a sticky meta rail beside the body, the whole group
   centred in the wide article container. The feature image and wide Koenig
   cards span wider than the body so the horizontal space gets used. */
.article-main {
    display: grid;
    grid-template-columns: 14rem minmax(0, 60rem);
    justify-content: center;
    gap: 4rem;
    align-items: start;
}

.article-rail-inner {
    position: sticky;
    top: 2rem;
    border-top: 3px solid var(--ink);
    padding-top: 0.9rem;
}

.article-rail-avatar {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--ink);
    margin: 0 0 0.8rem;
}

.article-rail-byline {
    font-family: var(--font-label);
    font-weight: 800;
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 0.45rem;
}

.article-rail-line {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    margin: 0 0 0.25rem;
}

.article-rail-tags {
    margin-top: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: var(--font-label);
}

.article-rail-tags .article-tags-label {
    display: block;
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    margin-bottom: 0.55rem;
}

.article-rail-tags a {
    font-size: var(--fs-meta);
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    overflow-wrap: break-word;
}

/* "In this piece" jump-list */
.article-toc {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--hairline);
}

.article-toc-label {
    font-family: var(--font-label);
    font-weight: 800;
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 0.7rem;
}

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

.article-toc-list li {
    margin: 0 0 0.45rem;
}

.article-toc-list a {
    display: block;
    font-family: var(--font-head);
    font-size: var(--fs-small);
    line-height: 1.3;
    color: var(--ink-soft);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
}

.article-toc-list .toc-h3 a {
    padding-left: 1.4rem;
    font-size: var(--fs-label);
}

.article-toc-list a:hover {
    color: var(--ink);
}

.article-toc-list a.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 500;
}

/* Toolkit download (conditional) */
.article-toolkit {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.6rem;
    padding: 0.75rem 0.85rem;
    background: var(--accent);
    color: var(--chip-tint);
    text-decoration: none;
}

.article-toolkit:hover {
    text-decoration: none;
    opacity: 0.93;
}

.article-toolkit-icon {
    flex: none;
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
}

.article-toolkit-icon svg {
    width: 100%;
    height: 100%;
}

.article-toolkit-body {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.article-toolkit-label {
    font-family: var(--font-label);
    font-weight: 800;
    font-size: var(--fs-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.article-toolkit-sub {
    font-family: var(--font-label);
    font-size: var(--fs-micro);
    margin-top: 0.15rem;
    opacity: 0.85;
}

/* Privacy badge */
.article-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--hairline);
}

.article-privacy-icon {
    flex: none;
    display: inline-flex;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--forest);
}

.article-privacy-icon svg {
    width: 100%;
    height: 100%;
}

.article-privacy-text {
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    line-height: 1.4;
    color: var(--ink-soft);
}

.article-privacy-text strong {
    display: block;
    color: var(--ink);
    font-weight: 800;
}

/* The body fills its column; line length is held by the 60rem track. The
   column sits ~9rem right of the viewport centre (the left rail), so breakout
   cards correct for that offset via --col-shift (zeroed when the rail collapses). */
.article-content {
    max-width: none;
    font-size: var(--fs-reading);
    line-height: 1.75;
    overflow-wrap: break-word;
    --col-shift: 9rem;
}

.article-content p {
    margin: 0 0 1.4em;
}

.article-content h1 {
    font-family: var(--font-head);
    font-size: var(--fs-h2);
    letter-spacing: -0.02em;
    margin: 2.4rem 0 0.8rem;
}

.article-content h2 {
    font-family: var(--font-head);
    font-size: var(--fs-h2);
    letter-spacing: -0.02em;
    margin: 2.4rem 0 0.8rem;
}

.article-content h3 {
    font-size: var(--fs-h3);
    margin: 2rem 0 0.6rem;
}

.article-content h4 {
    font-size: var(--fs-lead);
    margin: 1.6rem 0 0.5rem;
}

.article-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 2px;
}

.article-content strong {
    font-weight: 700;
}

.article-content blockquote {
    margin: 1.8rem 0;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-left: 4px solid var(--accent);
    font-family: var(--font-head);
    font-weight: 500;
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: var(--ink);
}

.article-content ul,
.article-content ol {
    padding-left: 1.4rem;
    margin: 0 0 1.4em;
}

.article-content li {
    margin-bottom: 0.5em;
}

.article-content img {
    margin: 1.8rem auto;
}

.article-content figcaption {
    text-align: center;
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    margin-top: 0.5rem;
}

.article-content hr {
    border: 0;
    border-top: 3px solid var(--ink);
    margin: 2.6rem 0;
}

.article-content pre {
    background: var(--ink);
    color: #f6f4ef;
    border-left: 4px solid var(--forest);
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 1.6rem 0;
}

.article-content code {
    font-family: "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.88em;
    color: var(--forest);
    background: rgba(31, 29, 24, 0.07);
    padding: 0.1em 0.35em;
}

.article-content pre code {
    color: inherit;
    background: none;
    padding: 0;
}

/* Long unbroken tokens (tracking URLs, hashes) must wrap, not overflow. */
.article-content a,
.article-content code {
    overflow-wrap: anywhere;
}

.article-content li > ul,
.article-content li > ol {
    margin: 0.4em 0 0;
}

/* Tables -- the markdown/HTML pipeline can emit them. Fixed layout + wrap so a
   wide table fits the column instead of overflowing it. */
.article-content table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 1.8rem 0;
    font-size: var(--fs-small);
    line-height: 1.5;
}

.article-content th,
.article-content td {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}

.article-content thead th {
    border-bottom: 2px solid var(--forest);
    background: var(--paper);
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   9. Koenig editor cards (the HTML Ghost generates from the editor /
      from the draft pipeline). Styled to the Dispatch language.
   --------------------------------------------------------------------- */
.article-content :where(figure.kg-card, div.kg-card) {
    margin: 1.9rem 0;
}

.kg-width-wide {
    position: relative;
    width: min(72rem, 94vw);
    margin-left: 50%;
    transform: translateX(calc(-50% - var(--col-shift, 0rem)));
}

.kg-width-full {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw - var(--col-shift, 0rem));
    margin-right: calc(50% - 50vw - var(--col-shift, 0rem));
}

.kg-width-full img {
    width: 100%;
}

.kg-image-card {
    text-align: center;
}

.kg-image-card img,
.kg-image {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Card images manage their own layout -- cancel the standalone-image margin
   (.article-content img { margin: 1.8rem auto }) so the bookmark favicon,
   bookmark thumbnail and gallery images are not auto-centred. */
.article-content .kg-bookmark-icon,
.article-content .kg-bookmark-thumbnail img,
.article-content .kg-gallery-image img {
    margin: 0;
}

/* Callout */
.kg-callout-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1.1rem 1.3rem;
    border-left: 4px solid var(--accent);
    background: var(--paper);
}

.kg-callout-emoji {
    font-size: 1.2rem;
    line-height: 1.5;
}

.kg-callout-text {
    font-size: var(--fs-body);
    line-height: 1.6;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Bookmark */
.kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    min-height: 6rem;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    border: 2px solid var(--ink);
    background: var(--paper);
}

.kg-bookmark-container:hover {
    text-decoration: none;
}

.kg-bookmark-content {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
}

.kg-bookmark-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--fs-reading);
    color: var(--ink);
}

.kg-bookmark-description {
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 0.4rem;
    overflow: hidden;
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: auto;
    padding-top: 0.7rem;
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    color: var(--ink-soft);
}

.kg-bookmark-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.1rem;
}

.kg-bookmark-thumbnail {
    order: 1;
    position: relative;
    flex: 0 0 34%;
    align-self: stretch;
}

.kg-bookmark-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Button */
.kg-button-card {
    display: flex;
}

.kg-button-card.kg-align-center {
    justify-content: center;
}

.kg-btn {
    display: inline-block;
    max-width: 100%;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    padding: 0.7rem 1.4rem;
    background: var(--accent);
    color: var(--chip-tint);
}

.kg-btn:hover {
    text-decoration: none;
    opacity: 0.92;
}

/* Header card */
.kg-header-card {
    padding: 3rem 2rem;
    text-align: center;
    background: var(--paper);
    border: 3px solid var(--line);
}

.kg-header-card .kg-header-card-heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0;
}

.kg-header-card .kg-header-card-subheader {
    font-family: var(--font-head);
    font-size: var(--fs-lead);
    color: var(--ink-soft);
    margin: 0.8rem 0 0;
}

/* Toggle */
.kg-toggle-card {
    border: 2px solid var(--ink);
    padding: 1rem 1.2rem;
}

.kg-toggle-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.kg-toggle-heading-text {
    font-family: var(--font-head);
    font-weight: 700;
    min-width: 0;
    overflow-wrap: break-word;
    margin: 0;
}

.kg-toggle-card-icon {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    transition: transform 0.2s ease;
}

.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content {
    display: none;
}

.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-card-icon {
    transform: rotate(-90deg);
}

.kg-toggle-content {
    margin-top: 0.7rem;
}

.kg-toggle-content > :last-child {
    margin-bottom: 0;
}

/* Embed (video, social card, etc.) */
/* SafeSeed generator -- injected by dispatch.js into the [[safeseed-generator]]
   marker so the iframe survives Ghost's content sanitizer. Width comes from
   .kg-width-wide; this only sets the vertical rhythm. */
.article-content .safeseed-embed {
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
}

/* Cards ported from the SafeSeed demo, restyled to Dispatch. */
.article-content .job-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin: 1.9rem 0;
}

.article-content .job-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--ink);
    background: var(--paper);
    padding: 1.2rem 1.25rem;
}

.article-content .job-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--forest);
    margin: 0 0 0.5rem;
}

.article-content .job-desc {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 0.9rem;
}

.article-content .job-note {
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    line-height: 1.45;
    color: var(--ink-soft);
    margin: auto 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--hairline);
}

@media (max-width: 48rem) {
    .article-content .job-cards {
        grid-template-columns: 1fr;
    }
}

/* "See the live demo" CTA button */
.article-content .demo-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0.6rem;
    padding: 0.75rem 1.4rem;
    background: var(--forest);
    color: var(--chip-tint);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}

.article-content .demo-cta:hover {
    text-decoration: none;
    opacity: 0.93;
}

/* Four honesty tiers — colour-coded cards */
.article-content .tier-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin: 1.9rem 0;
}

.article-content .tier-card {
    border: 1px solid var(--hairline);
    border-left: 5px solid var(--tier, var(--ink));
    background: var(--paper);
    padding: 1.1rem 1.25rem;
}

.article-content .tier-name {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--tier, var(--ink));
    margin: 0 0 0.45rem;
}

.article-content .tier-desc {
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
}

.article-content .tier-provable  { --tier: var(--teal); }
.article-content .tier-reserved   { --tier: var(--indigo); }
.article-content .tier-designated { --tier: var(--amber); }
.article-content .tier-fake       { --tier: var(--red); }

/* What it proves / doesn't — two columns */
.article-content .proof-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    margin: 1.9rem 0;
}

.article-content .proof-col {
    border: 2px solid var(--ink);
    background: var(--paper);
    padding: 1.2rem 1.35rem;
}

.article-content .proof-head {
    font-family: var(--font-label);
    font-weight: 800;
    font-size: var(--fs-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.7rem;
}

.article-content .proof-yes .proof-head { color: var(--forest); }
.article-content .proof-no .proof-head  { color: var(--red); }

.article-content .proof-col ul {
    margin: 0;
    padding-left: 1.2rem;
}

.article-content .proof-col li {
    margin-bottom: 0.55em;
    font-size: 0.96rem;
    line-height: 1.45;
}

/* Skeptic FAQ */
.article-content .faq {
    margin: 1.9rem 0;
    border-bottom: 1px solid var(--hairline);
}

.article-content .faq-item {
    padding: 1.1rem 0;
    border-top: 1px solid var(--hairline);
}

.article-content .faq-q {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}

.article-content .faq-a {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.55;
}

@media (max-width: 48rem) {
    .article-content .tier-cards,
    .article-content .proof-split {
        grid-template-columns: 1fr;
    }
}

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

.kg-embed-card iframe {
    width: 100%;
    max-width: 100%;
}

.kg-embed-card iframe[src*="youtube"],
.kg-embed-card iframe[src*="youtube-nocookie"],
.kg-embed-card iframe[src*="vimeo"] {
    height: auto;
    aspect-ratio: 16 / 9;
}

.kg-embed-card > :not(iframe) {
    max-width: 100%;
}

/* Gallery */
.kg-gallery-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.kg-gallery-image {
    flex: 1 1 0;
    min-width: 0;
}

.kg-gallery-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Alt blockquote */
.article-content blockquote.kg-blockquote-alt {
    border-left: 0;
    border-top: 3px solid var(--ink);
    border-bottom: 3px solid var(--ink);
    padding: 1.3rem 0;
    text-align: center;
    font-size: var(--fs-xl);
}

/* ---------------------------------------------------------------------
   10. Article footer: tags, Frida's note, read-next
   --------------------------------------------------------------------- */
.article-footer {
    max-width: 52rem;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 3px solid var(--ink);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    font-family: var(--font-label);
    font-size: var(--fs-meta);
}

.article-tags-label {
    color: var(--ink-soft);
}

.article-tags a {
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* "Frida's note" -- intended signed aside, rendered LOUD on an ink panel. */
.fridas-note {
    background: var(--ink);
    color: var(--ground);
    border-left: 6px solid var(--accent);
    padding: 1.4rem 1.6rem;
}

.fridas-note-label {
    color: #fff;
    margin: 0 0 0.5rem;
}

.fridas-note-body {
    margin: 0;
    font-family: var(--font-head);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

/* Read next */
.read-next {
    max-width: var(--maxw);
    margin: 3.5rem auto 0;
    padding-top: 2rem;
    border-top: 4px solid var(--ink);
    text-align: center;
}

.read-next-label {
    color: var(--ink);
    font-size: var(--fs-small);
    margin: 0 0 1.5rem;
}

.read-next-feed {
    text-align: left;
}

/* ---------------------------------------------------------------------
   11. Pagination
   --------------------------------------------------------------------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--ink);
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagination a {
    color: var(--chip-tint);
    background: var(--ink);
    padding: 0.6rem 1.1rem;
}

.pagination a:hover {
    background: var(--accent);
    text-decoration: none;
}

.pagination .page-number {
    color: var(--ink-soft);
    font-weight: 700;
}

.feed-empty {
    text-align: center;
    color: var(--ink-soft);
    font-family: var(--font-head);
    font-size: var(--fs-reading);
    padding: 4rem 0;
}

/* Archive intro (tag / author pages) + error-page actions */
.archive-intro {
    max-width: 44rem;
    margin: 0 auto 2rem;
    font-family: var(--font-head);
    font-size: var(--fs-reading);
    line-height: 1.5;
    color: var(--ink-soft);
    text-align: center;
}

.error-actions {
    text-align: center;
    margin-top: 1.75rem;
}

/* ---------------------------------------------------------------------
   12. Colophon / footer
   --------------------------------------------------------------------- */
.colophon {
    flex-shrink: 0;
    margin-top: auto;
    padding: 2.25rem 0 3rem;
    border-top: 4px solid var(--ink);
}

.colophon-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
}

.colophon-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin: 0 0 0.4rem;
}

.colophon-desc {
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    margin: 0;
}

.colophon-nav .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.6rem 1.6rem;
}

.colophon-nav .nav li a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: var(--fs-meta);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
}

.colophon-nav .nav li a:hover {
    color: var(--accent);
    text-decoration: none;
}

.colophon-nav .nav-icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--accent);
}

.colophon-nav .nav-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.colophon-meta {
    margin-top: 1rem;
}

.colophon-credit {
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--forest);
    margin: 0 0 0.4rem;
}

.colophon-copy {
    font-family: var(--font-label);
    font-size: var(--fs-meta);
    color: var(--ink-soft);
    margin: 0;
}

.colophon-copy a {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 64rem) {
    .article-main {
        grid-template-columns: minmax(0, 52rem);
        gap: 0;
    }
    .article-rail-inner {
        position: static;
        border-top: 0;
        border-bottom: 2px solid var(--ink);
        padding: 0 0 1rem;
        margin-bottom: 1.75rem;
    }
    .article-rail-tags {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem 0.9rem;
    }
    .article-content {
        --col-shift: 0rem;
    }
    .kg-width-wide,
    .kg-width-full {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }
}

@media (max-width: 56rem) {
    .post-feed {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 40rem) {
    html {
        font-size: 17px;
    }
    :root {
        --gutter: 1.25rem;
    }
    .post-feed {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .post-feed:not(.read-next-feed) > .post-card:first-child:has(.post-card-image-link) {
        grid-template-columns: 1fr;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}