/* ==========================================================================
   Porcelain — roelwillems.com (theme: solorw 2.0)
   White, petrol ink and one burnt-orange accent. Square, ruled, unhurried.
   The one rule: the accent appears once per view (plus link underlines in
   running text). Everything else is ink.
   ========================================================================== */


/* Code: JetBrains Mono, bundled with the theme */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-v13-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-v13-latin-italic.woff2") format("woff2"); }


/* Tokens
   -------------------------------------------------------------------------- */

:root {
    --surface: #ffffff;
    --surface-enamel: #f4f4f2;
    --surface-stone: #d1cecc;
    --ink: #003e52;
    --ink-muted: #456e7c;
    --accent: #b4461a;          /* burnt orange: 5.5:1 on white, 5:1 on enamel */
    --on-accent: #ffffff;
    --on-ink: #ffffff;
    --black: #131516;
    --rule: #003e52;
    --hairline: rgba(0, 62, 82, 0.15);
    --danger: #b3261e;

    --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
    --font-heading: var(--gh-font-heading, var(--font-serif));
    --font-body: var(--gh-font-body, var(--font-serif));

    --container-width: 1200px;
    --content-width: 680px;
    --page-width: 760px;
    --gap: clamp(20px, 4vw, 48px);

    color-scheme: light;
}

/* "Strap": the dark palette, only when the theme setting asks for it */
@media (prefers-color-scheme: dark) {
    :root.is-auto-scheme {
        --surface: #131516;
        --surface-enamel: #1c1f21;
        --surface-stone: #2a2d2f;
        --ink: #e6ecee;
        --ink-muted: #9db4bc;
        --accent: #ee8a52;
        --on-accent: #131516;
        --on-ink: #131516;
        --black: #0a0b0c;
        --rule: #e6ecee;
        --hairline: rgba(230, 236, 238, 0.16);
        --danger: #f2a19b;
        color-scheme: dark;
    }
}

/* Ghost's cards, Portal and search read the accent from here */
html:root {
    --ghost-accent-color: var(--accent);
}


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

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

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.75rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; }
img { height: auto; }
a { color: inherit; }
b, strong { font-weight: 500; }

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

::selection { background: var(--ink); color: var(--on-ink); }

.rw-skip {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 1000;
    padding: 8px 14px;
    background: var(--ink);
    color: var(--on-ink);
    font: 500 1.4rem/1.8rem var(--font-sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.rw-skip:focus { top: 12px; }

.gh-outer { padding-left: var(--gap); padding-right: var(--gap); }
.gh-inner { max-width: var(--container-width); margin-left: auto; margin-right: auto; }
.gh-site { display: flex; flex-direction: column; min-height: 100vh; }
#main { flex: 1 0 auto; }


/* Type roles
   -------------------------------------------------------------------------- */

.rw-display {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3.4rem, 2.4rem + 2.2vw, 5rem);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.rw-lede {
    max-width: 34em;
    margin: 0;
    font-size: clamp(1.9rem, 1.7rem + 0.4vw, 2.1rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.rw-body {
    max-width: 38em;
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.5;
}

.rw-note {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.35;
    color: var(--ink-muted);
}

.rw-label {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}
.rw-label a { text-decoration: none; }
.rw-label a:hover { color: var(--accent); }

.rw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    line-height: 1.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.rw-meta > span::before { content: "·"; margin-right: 10px; }

.rw-numeral {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(9.6rem, 6rem + 8vw, 16.8rem);
    font-style: italic;
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums;
    color: var(--accent);
}


/* Actions: arrow links and the square button
   -------------------------------------------------------------------------- */

.rw-arrow,
.rw-linkbar .nav a {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    transition: color 0.15s;
}
.rw-arrow::after,
.rw-linkbar .nav a::after {
    content: "→";
    font-family: var(--font-serif);
    letter-spacing: 0;
    transition: transform 0.15s;
}
.rw-arrow:hover,
.rw-linkbar .nav a:hover { color: var(--accent); }
.rw-arrow:hover::after,
.rw-linkbar .nav a:hover::after { transform: translateX(3px); }

.rw-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin: 0;
}

.rw-btn,
.gh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 0;
    border-radius: 0;
    background-color: var(--ink);
    color: var(--on-ink);
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.rw-btn:hover,
.gh-btn:hover {
    background-color: var(--accent);
    color: var(--on-accent);
}


/* Header
   -------------------------------------------------------------------------- */

.gh-head {
    position: relative;
    z-index: 100;
    background-color: var(--surface);
    border-bottom: 2px solid var(--rule);
}

.gh-head-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 40px;
    min-height: 84px;
}

.gh-head-brand { display: flex; align-items: center; gap: 12px; }
.gh-head-brand-wrapper { display: flex; align-items: center; }

.gh-head-logo {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
}
.gh-head-logo img { display: block; max-height: 40px; width: auto; }

/* inline-flex and no wrapping: the theme script measures this list and moves
   items into a "more" menu only when they don't fit */
.gh-head-menu .nav {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-head-menu .nav a,
.gh-head .nav-more-toggle {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
}
.gh-head-menu .nav a:hover,
.gh-head-menu .nav-current a { color: var(--accent); }

.gh-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

.gh-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.gh-icon-btn svg { width: 18px; height: 18px; }
.gh-icon-btn:hover { color: var(--accent); }

.gh-head-brand .gh-search,
.gh-burger { display: none; }

/* Overflow menu the theme script builds when the nav doesn't fit */
.gh-head .nav > li { position: relative; }
.gh-head .nav-more-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.gh-head .nav-more-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.gh-dropdown {
    position: absolute;
    top: 100%;
    right: -16px;
    z-index: 90;
    min-width: 200px;
    margin: 18px 0 0;
    padding: 8px 0;
    list-style: none;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-top: 2px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.is-dropdown-open .gh-dropdown { opacity: 1; visibility: visible; transform: none; }
.gh-dropdown li a { display: block; padding: 8px 20px; }

@media (max-width: 767px) {
    .gh-head-inner {
        grid-template-columns: 1fr;
        min-height: 64px;
    }
    .gh-head-brand { justify-content: space-between; height: 64px; }
    .gh-head-brand .gh-search { display: inline-flex; margin-left: auto; }
    .gh-head-logo { font-size: 2.2rem; }

    .gh-burger {
        position: relative;
        display: block;
        width: 36px;
        height: 36px;
        margin-right: -6px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .gh-burger::before,
    .gh-burger::after {
        content: "";
        position: absolute;
        left: 6px;
        width: 24px;
        height: 2px;
        background-color: var(--ink);
        transition: transform 0.2s, top 0.2s, bottom 0.2s;
    }
    .gh-burger::before { top: 12px; }
    .gh-burger::after { bottom: 12px; }
    .is-head-open .gh-burger::before { top: 17px; transform: rotate(45deg); }
    .is-head-open .gh-burger::after { bottom: 17px; transform: rotate(-45deg); }

    .gh-head-menu,
    .gh-head-actions { display: none; }

    .is-head-open { overflow: hidden; }
    .is-head-open .gh-head {
        position: fixed;
        inset: 0;
        overflow-y: auto;
        border-bottom: 0;
    }
    .is-head-open .gh-head-inner { align-content: start; min-height: 100%; }
    .is-head-open .gh-head-menu { display: block; padding: 32px 0 24px; border-top: 2px solid var(--rule); }
    .is-head-open .gh-head-menu .nav { flex-direction: column; align-items: flex-start; gap: 22px; }
    .is-head-open .gh-head-menu .nav a { font-size: 1.8rem; }
    .is-head-open .gh-head-actions { display: flex; justify-content: flex-start; padding-bottom: 32px; }
    .is-head-open .gh-head-actions .gh-search { display: none; }
    .is-head-open .gh-head-actions .rw-btn { width: 100%; }
}


/* Homepage
   -------------------------------------------------------------------------- */

.rw-home { padding-top: clamp(40px, 6vw, 64px); }

.rw-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    padding-bottom: 56px;
}

.rw-hero-main { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.rw-hero-main .rw-display { margin-bottom: 10px; }
.rw-hero-main .rw-arrow { margin-top: 6px; }

.rw-callout {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    border-top: 2px solid var(--rule);
}
.rw-callout .rw-numeral { margin: 4px 0 2px; }
.rw-callout-text { max-width: 24em; margin: 0; font-size: 1.75rem; line-height: 1.45; }
.rw-callout .rw-note { max-width: 26em; }

.rw-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 36px;
    margin: 0;
}
.rw-fact { padding: 12px 0 16px; border-top: 1px solid var(--hairline); }
.rw-fact dt {
    margin-bottom: 8px;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6rem;
    letter-spacing: 0.04em;
}
.rw-fact dd {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    line-height: 2.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rw-linkbar {
    margin-top: 36px;
    padding: 12px 0;
    border-top: 2px solid var(--rule);
    border-bottom: 2px solid var(--rule);
}
.rw-linkbar .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rw-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(24px, 5vw, 72px);
    padding: 60px 0 88px;
}
.rw-featured-intro { display: flex; flex-direction: column; gap: 12px; }
.rw-featured-newsletter { max-width: 22em; margin: 0; font-size: 1.75rem; line-height: 1.5; }
.rw-featured-newsletter a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.rw-featured-newsletter a:hover { color: var(--accent); }

.rw-feature-title {
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 2rem + 1.6vw, 3.8rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-wrap: balance;
}
.rw-feature-title a,
.rw-card-title a { text-decoration: none; }
.rw-feature-title a:hover,
.rw-card-title a:hover { color: var(--accent); }
.rw-feature-excerpt { max-width: 36em; margin: 0 0 16px; font-size: 1.9rem; line-height: 1.5; }
.rw-feature .rw-actions { margin-top: 22px; }

@media (max-width: 900px) {
    .rw-hero,
    .rw-featured { grid-template-columns: minmax(0, 1fr); }
    .rw-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .rw-facts { grid-template-columns: minmax(0, 1fr); }
    .rw-linkbar .nav { flex-direction: column; }
}


/* Lists: essays, tags, authors
   -------------------------------------------------------------------------- */

.rw-list-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(40px, 6vw, 64px) 0 40px;
    border-bottom: 2px solid var(--rule);
}
.rw-list-header .rw-display { max-width: 18em; }

.rw-author-image { width: 96px; height: 96px; object-fit: cover; }
.rw-author-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 4px 0 0; }

.rw-feed { display: flex; flex-direction: column; padding-bottom: 88px; }

.rw-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 0;
    border-bottom: 1px solid var(--hairline);
}
.rw-card-title {
    max-width: 26em;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 2rem + 1.2vw, 3.4rem);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0.01em;
    text-wrap: balance;
}
.rw-card-excerpt { max-width: 40em; margin: 0; font-size: 1.8rem; line-height: 1.5; }


/* Reading canvas (Ghost's main / wide / full columns)
   -------------------------------------------------------------------------- */

.gh-canvas {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gap), 1fr)
        [wide-start] minmax(0, calc((var(--container-width) - var(--content-width)) / 2))
        [main-start] min(var(--content-width), calc(100% - var(--gap) * 2))
        [main-end] minmax(0, calc((var(--container-width) - var(--content-width)) / 2))
        [wide-end] minmax(var(--gap), 1fr)
        [full-end];
}
.gh-canvas > * { grid-column: main; }
.gh-canvas > .kg-width-wide,
.gh-canvas > .gh-article-image { grid-column: wide; }
.gh-canvas > .kg-width-full { grid-column: full; }

/* Pages sit left, aligned with the header, like a document */
.rw-page .gh-canvas {
    grid-template-columns:
        [full-start] minmax(var(--gap), 1fr)
        [wide-start main-start] min(var(--page-width), calc(100% - var(--gap) * 2))
        [main-end] minmax(0, calc(var(--container-width) - var(--page-width)))
        [wide-end] minmax(var(--gap), 1fr)
        [full-end];
}


/* Essays and pages
   -------------------------------------------------------------------------- */

.rw-article-header,
.rw-page-header { padding-top: clamp(40px, 6vw, 72px); }

.rw-article-title {
    margin: 14px 0 18px;
    font-family: var(--font-heading);
    font-size: clamp(3.6rem, 2.4rem + 2.6vw, 5.4rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.rw-page-header .rw-display { font-size: clamp(3.4rem, 2.4rem + 2.2vw, 5rem); }
.rw-page-header .rw-lede { margin-top: 20px; }

.gh-article-image { margin: 40px 0 0; }
.gh-article-image img { display: block; width: 100%; }

figcaption {
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: 1.3rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
    text-align: left;
}

.gh-content {
    padding-top: 40px;
    padding-bottom: 8px;
    font-family: var(--font-body);
    font-size: clamp(1.8rem, 1.7rem + 0.25vw, 2rem);
    line-height: 1.6;
    word-break: break-word;
}
.rw-page .gh-content { padding-bottom: 96px; }

.gh-content > * { margin-top: 0; margin-bottom: 0; }
.gh-content > * + * { margin-top: 1.2em; }

.gh-content > h2,
.gh-content > h3,
.gh-content > h4 { font-family: var(--font-heading); font-weight: 400; color: var(--ink); }
.gh-content > h2 { margin-top: 2em; font-size: 1.6em; line-height: 1.2; letter-spacing: 0.01em; text-wrap: balance; }
.gh-content > h3 { margin-top: 1.8em; font-size: 1.25em; line-height: 1.3; }
.gh-content > h4 {
    margin-top: 2em;
    font-family: var(--font-sans);
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.gh-content > :is(h2, h3, h4) + * { margin-top: 0.6em; }
.gh-content > :is(h2, h3, h4):first-child { margin-top: 0; }

/* Links in running text: ink with a thin burnt-orange underline */
.gh-content a:not([class]) {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.15s;
}
.gh-content a:not([class]):hover { color: var(--accent); text-decoration-thickness: 2px; }

.gh-content ul,
.gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: 0.5em; }
.gh-content li::marker { color: var(--ink-muted); }

.gh-content blockquote:not([class]) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 24px;
    border-left: 2px solid var(--rule);
    font-size: 1.12em;
    font-style: italic;
    line-height: 1.5;
}
.gh-content blockquote.kg-blockquote-alt {
    margin: 1.6em 0;
    padding: 0;
    border: 0;
    font-size: 1.45em;
    font-style: italic;
    line-height: 1.35;
    text-align: left;
    color: var(--ink);
}

.gh-content hr {
    height: 0;
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--hairline);
}

.gh-content :not(pre) > code {
    padding: 0.1em 0.3em;
    background: var(--surface-enamel);
    font-family: var(--font-mono);
    font-size: 0.82em;
}
.gh-content pre {
    overflow-x: auto;
    padding: 20px;
    background: var(--surface-enamel);
    border: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: 1.45rem;
    line-height: 1.6;
}

.gh-content table:not(.gist table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: 1.5rem;
    line-height: 1.5;
}
.gh-content th {
    padding: 10px 12px 10px 0;
    border-bottom: 2px solid var(--rule);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.gh-content td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }


/* Ghost editor cards, made square and quiet
   -------------------------------------------------------------------------- */

.gh-content .kg-card { margin-top: 1.6em; }
.gh-content > .kg-card + * { margin-top: 1.6em; }

.gh-content :is(.kg-callout-card, .kg-bookmark-container, .kg-bookmark-thumbnail img, .kg-product-card-container,
    .kg-toggle-card, .kg-file-card-container, .kg-signup-card, .kg-cta-card, .kg-header-card, .kg-audio-card,
    .kg-video-card, .kg-image, .kg-gallery-image img, .kg-embed-card iframe) { border-radius: 0 !important; }

.gh-content .kg-btn,
.gh-content .kg-cta-button,
.gh-content .kg-header-card-button,
.gh-content .kg-product-card-button {
    border-radius: 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
}
.gh-content .kg-cta-card .kg-cta-button { width: fit-content; align-self: flex-start; padding: 0.8em 1.2em; }

.gh-content .kg-callout-card { padding: 20px 24px; font-size: 0.95em; }
.gh-content .kg-callout-card-grey,
.gh-content .kg-callout-card-white { background: var(--surface-enamel); }
.gh-content .kg-callout-card-white { border: 1px solid var(--hairline); }

.gh-content .kg-bookmark-container {
    border: 1px solid var(--hairline);
    color: var(--ink);
    text-decoration: none;
}
.gh-content .kg-bookmark-container:hover { border-color: var(--rule); }
.gh-content .kg-bookmark-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 400; color: var(--ink); }
.gh-content .kg-bookmark-description,
.gh-content .kg-bookmark-metadata { font-family: var(--font-sans); color: var(--ink-muted); }

.gh-content .kg-toggle-card { border: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); box-shadow: none; background: none; padding-left: 0; padding-right: 0; }
.gh-content .kg-toggle-heading-text { font-family: var(--font-heading); font-size: 1.1em; font-weight: 400; }
.gh-content .kg-toggle-card + .kg-toggle-card { margin-top: 0; border-top: 0; }

.gh-content .kg-cta-card .kg-cta-sponsor-label,
.gh-content .kg-cta-card .kg-cta-sponsor-label span {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
}

.gh-content .kg-header-card h2,
.gh-content .kg-header-card h3 { font-family: var(--font-heading); font-weight: 400; }


/* Essay end: newsletter, comments, previous / next
   -------------------------------------------------------------------------- */

/* Newsletter sign-up. One design for two sources:
   .rw-signup    the theme's default block after every essay
   .kg-signup-card  Ghost's Signup card, when added in the editor (its colour
   settings are overridden so every sign-up looks the same) */

.rw-signup-wrap { margin-top: 56px; }
.gh-content:has(.kg-signup-card) ~ .rw-signup-wrap { display: none; }

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

.rw-signup,
.gh-content .kg-signup-card {
    margin-left: 0;
    margin-right: 0;
    padding: 32px clamp(20px, 4vw, 40px) 28px !important;
    background: var(--surface-enamel) !important;
    border-top: 2px solid var(--rule);
    border-radius: 0 !important;
    color: var(--ink);
    text-align: left;
}
.gh-content .kg-signup-card { margin-top: 2em; }
.gh-content .kg-signup-card :is(.kg-signup-card-content, .kg-signup-card-text) {
    display: block;
    padding: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
}
.gh-content .kg-signup-card .kg-signup-card-image { display: none; }

.rw-signup-heading,
.gh-content .kg-signup-card-heading {
    margin: 0 !important;
    font-family: var(--font-heading) !important;
    font-size: clamp(2.6rem, 2.2rem + 0.8vw, 3.2rem) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: var(--ink) !important;
    text-wrap: balance;
}
.gh-content .kg-signup-card-heading * { font: inherit !important; color: inherit !important; }

.rw-signup-text,
.gh-content .kg-signup-card-subheading {
    max-width: 34em;
    margin: 12px 0 0 !important;
    font-family: var(--font-body) !important;
    font-size: 1.9rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: var(--ink) !important;
}
.gh-content .kg-signup-card-subheading * { font: inherit !important; color: inherit !important; }

.rw-signup-form,
.gh-content .kg-signup-card-form { max-width: 520px; margin: 24px 0 0 !important; }

.rw-signup-fields,
.gh-content .kg-signup-card-fields {
    display: flex !important;
    align-items: stretch;
    padding: 0 !important;
    background: var(--surface) !important;
    border: 1px solid var(--ink) !important;   /* control border, 11:1 */
    border-radius: 0 !important;
    box-shadow: none !important;
}

.rw-signup-input,
.gh-content .kg-signup-card-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline-offset: -3px;
    color: var(--ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
}
.rw-signup-input::placeholder,
.gh-content .kg-signup-card-input::placeholder { color: var(--ink-muted); opacity: 1; }

.rw-signup-button,
.gh-content .kg-signup-card-button {
    flex: 0 0 auto;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ink) !important;
    color: var(--on-ink) !important;
    font-family: var(--font-sans) !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    opacity: 1 !important;
}
.rw-signup-button:hover,
.gh-content .kg-signup-card-button:hover { background: var(--accent) !important; color: var(--on-accent) !important; }
.gh-content .kg-signup-card-button * { color: inherit !important; }

.rw-signup-loading { display: none; }
.rw-signup-form.loading .rw-signup-default { display: none; }
.rw-signup-form.loading .rw-signup-loading { display: inline; }

.rw-signup-success,
.rw-signup-error { display: none; margin: 12px 0 0; font-family: var(--font-sans); font-size: 1.5rem; line-height: 1.4; }
.rw-signup-form.success .rw-signup-fields { display: none !important; }
.rw-signup-form.success .rw-signup-success { display: block; color: var(--ink); }
.rw-signup-form.error .rw-signup-error { display: block; color: var(--danger); }
.gh-content .kg-signup-card-success,
.gh-content .kg-signup-card-error { font-family: var(--font-sans) !important; font-size: 1.5rem !important; color: var(--ink) !important; }
.gh-content .kg-signup-card-error { color: var(--danger) !important; }

.rw-signup-note,
.gh-content .kg-signup-card-disclaimer {
    margin: 12px 0 0 !important;
    font-family: var(--font-body) !important;
    font-size: 1.45rem !important;
    line-height: 1.35 !important;
    color: var(--ink-muted) !important;
}

@media (max-width: 480px) {
    .rw-signup-fields,
    .gh-content .kg-signup-card-fields { flex-direction: column; }
    .rw-signup-button,
    .gh-content .kg-signup-card-button { width: 100%; }
}

.gh-comments { margin-top: 56px; }
.gh-comments .rw-label { margin-bottom: 16px; }

.rw-article-footer { padding: 48px 0 96px; }
.rw-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rw-prevnext a {
    display: block;
    margin-top: 6px;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1.35;
    text-decoration: none;
}
.rw-prevnext a:hover { color: var(--accent); }
.rw-next { text-align: right; }
.rw-share { margin: 36px 0 0; }

@media (max-width: 480px) {
    .rw-prevnext { grid-template-columns: 1fr; }
    .rw-next { text-align: left; }
}


/* Members-only teaser and error page
   -------------------------------------------------------------------------- */

.rw-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 2em;
    padding: 28px 0;
    border-top: 2px solid var(--rule);
    border-bottom: 2px solid var(--rule);
}
.rw-cta-text { margin: 0; font-size: 1.1em; }

.rw-error { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 80px 0 120px; }


/* Footer: the petrol band. The accent never goes on petrol (2:1).
   -------------------------------------------------------------------------- */

.rw-foot {
    padding-top: 32px;
    padding-bottom: 36px;
    background-color: var(--ink);
    color: var(--on-ink);
}
.rw-foot-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
}
.rw-foot-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--on-ink);
}
.gh-foot-menu .nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gh-foot-menu .nav a {
    font-family: var(--font-sans);
    font-size: 1.3rem;
    line-height: 1.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--on-ink);
}
.gh-foot-menu .nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.rw-foot-legal { margin: 0; font-size: 1.4rem; line-height: 1.8rem; color: var(--on-ink); }
.rw-foot :focus-visible { outline-color: var(--on-ink); }


/* Motion
   -------------------------------------------------------------------------- */

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


/* Lightbox for galleries (PhotoSwipe, from Ghost's shared theme assets)
   -------------------------------------------------------------------------- */
.pswp{backface-visibility:hidden;display:none;height:100%;left:0;outline:0;overflow:hidden;position:absolute;top:0;touch-action:none;width:100%;z-index:3999999;-webkit-text-size-adjust:100%}
.pswp img{max-width:none}
.pswp--animate_opacity{opacity:.001;transition:opacity 333ms cubic-bezier(.4,0,.22,1);will-change:opacity}
.pswp--open{display:block}
.pswp--zoom-allowed .pswp__img{cursor:zoom-in}
.pswp--zoomed-in .pswp__img{cursor:grab}
.pswp--dragging .pswp__img{cursor:grabbing}
.pswp__bg{backface-visibility:hidden;background-color:rgba(0,0,0,.85);opacity:0;transform:translateZ(0);transition:opacity 333ms cubic-bezier(.4,0,.22,1);will-change:opacity}
.pswp__bg,.pswp__scroll-wrap{height:100%;left:0;position:absolute;top:0;width:100%}
.pswp__scroll-wrap{overflow:hidden}
.pswp__container,.pswp__zoom-wrap{backface-visibility:hidden;bottom:0;left:0;position:absolute;right:0;top:0;touch-action:none}
.pswp__container,.pswp__img{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.pswp__zoom-wrap{position:absolute;transform-origin:left top;transition:transform 333ms cubic-bezier(.4,0,.22,1);width:100%}
.pswp--animated-in .pswp__bg,.pswp--animated-in .pswp__zoom-wrap{transition:none}
.pswp__item{bottom:0;overflow:hidden;right:0}
.pswp__img,.pswp__item{left:0;position:absolute;top:0}
.pswp__img{height:auto;width:auto}
.pswp__img--placeholder{backface-visibility:hidden}
.pswp__img--placeholder--blank{background:var(--color-black)}
.pswp--ie .pswp__img{height:auto!important;left:0;top:0;width:100%!important}
.pswp__error-msg{color:var(--color-secondary-text);font-size:14px;left:0;line-height:16px;margin-top:-8px;position:absolute;text-align:center;top:50%;width:100%}
.pswp__error-msg a{color:var(--color-secondary-text);text-decoration:underline}
.pswp__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:0;box-shadow:none;cursor:pointer;display:block;float:right;height:44px;margin:0;overflow:visible;padding:0;position:relative;transition:opacity .2s;width:44px}
.pswp__button:focus,.pswp__button:hover{opacity:1}
.pswp__button:active{opacity:.9;outline:0}
.pswp__button::-moz-focus-inner{border:0;padding:0}
.pswp__ui--over-close .pswp__button--close{opacity:1}
.pswp__button,.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{background:url(../images/default-skin.png) 0 0 no-repeat;background-size:264px 88px;height:44px;width:44px}
@media (min-resolution:1.1dppx),(min-resolution:105dpi){.pswp--svg .pswp__button,.pswp--svg .pswp__button--arrow--left:before,.pswp--svg .pswp__button--arrow--right:before{background-image:url(../images/default-skin.svg)}.pswp--svg .pswp__button--arrow--left,.pswp--svg .pswp__button--arrow--right{background:0 0}}
.pswp__button--close{background-position:0 -44px}
.pswp__button--share{background-position:-44px -44px}
.pswp__button--fs{display:none}
.pswp--supports-fs .pswp__button--fs{display:block}
.pswp--fs .pswp__button--fs{background-position:-44px 0}
.pswp__button--zoom{background-position:-88px 0;display:none}
.pswp--zoom-allowed .pswp__button--zoom{display:block}
.pswp--zoomed-in .pswp__button--zoom{background-position:-132px 0}
.pswp--touch .pswp__button--arrow--left,.pswp--touch .pswp__button--arrow--right{visibility:hidden}
.pswp__button--arrow--left,.pswp__button--arrow--right{background:0 0;height:100px;margin-top:-50px;position:absolute;top:50%;width:70px}
.pswp__button--arrow--left{left:0}
.pswp__button--arrow--right{right:0}
.pswp__button--arrow--left:before,.pswp__button--arrow--right:before{content:"";height:30px;position:absolute;top:35px;width:32px}
.pswp__button--arrow--left:before{background-position:-138px -44px;left:6px}
.pswp__button--arrow--right:before{background-position:-94px -44px;right:6px}
.pswp__counter{color:var(--color-white);font-size:11px;font-weight:700;height:44px;left:0;line-height:44px;padding:0 15px;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.pswp__caption{bottom:0;left:0;min-height:44px;position:absolute;width:100%}
.pswp__caption__center{color:var(--color-white);font-size:11px;line-height:1.6;margin:0 auto;max-width:420px;padding:25px 15px 30px;text-align:center}
.pswp__caption__center .post-caption-title{font-size:15px;font-weight:500;margin-bottom:7px;text-transform:uppercase}
.pswp__caption__center .post-caption-meta-item+.post-caption-meta-item:before{content:"\02022";padding:0 4px}
.pswp__caption--empty{display:none}
.pswp__caption--fake{visibility:hidden}
.pswp__preloader{direction:ltr;height:44px;left:50%;margin-left:-22px;opacity:0;position:absolute;top:0;transition:opacity .25s ease-out;width:44px;will-change:opacity}
.pswp__preloader__icn{height:20px;margin:12px;width:20px}
.pswp__preloader--active{opacity:1}
.pswp__preloader--active .pswp__preloader__icn{background:url(../images/preloader.gif) 0 0 no-repeat}
.pswp--css_animation .pswp__preloader--active{opacity:1}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn{animation:clockwise .5s linear infinite}
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut{animation:donut-rotate 1s cubic-bezier(.4,0,.22,1) infinite}
.pswp--css_animation .pswp__preloader__icn{background:0 0;height:14px;left:15px;margin:0;opacity:.75;position:absolute;top:15px;width:14px}
.pswp--css_animation .pswp__preloader__cut{height:14px;overflow:hidden;position:relative;width:7px}
.pswp--css_animation .pswp__preloader__donut{background:0 0;border-bottom:2px solid transparent;border-left:2px solid transparent;border-radius:50%;border-right:2px solid var(--color-white);border-top:2px solid var(--color-white);box-sizing:border-box;height:14px;left:0;margin:0;position:absolute;top:0;width:14px}
@media screen and (max-width:1024px){.pswp__preloader{float:right;left:auto;margin:0;position:relative;top:auto}}
.pswp__ui{opacity:1;visibility:visible;z-index:1550;-webkit-font-smoothing:auto}
.pswp__top-bar{height:44px;left:0;position:absolute;top:0;width:100%}
.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right,.pswp__caption,.pswp__top-bar{backface-visibility:hidden;transition:opacity 333ms cubic-bezier(.4,0,.22,1);will-change:opacity}
.pswp--has_mouse .pswp__button--arrow--left,.pswp--has_mouse .pswp__button--arrow--right{visibility:visible}
.pswp__ui--idle .pswp__button--arrow--left,.pswp__ui--idle .pswp__button--arrow--right,.pswp__ui--idle .pswp__top-bar{opacity:0}
.pswp__ui--hidden .pswp__button--arrow--left,.pswp__ui--hidden .pswp__button--arrow--right,.pswp__ui--hidden .pswp__caption,.pswp__ui--hidden .pswp__top-bar{opacity:.001}
.pswp__ui--one-slide .pswp__button--arrow--left,.pswp__ui--one-slide .pswp__button--arrow--right,.pswp__ui--one-slide .pswp__counter{display:none}
.pswp__element--disabled{display:none!important}
.pswp--minimal--dark .pswp__top-bar{background:0 0}