/* Post and page reading view: the band header, the reading column, Ghost cards
   and highlighted code. Every value comes from tokens.css; the code ground is
   the one fixed dark panel in both modes. */

/* ---------- Band header: title and meta ---------- */

.post-header {
    grid-column: 1 / 11;
}

.post-title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5vw, var(--text-page-title)); /* 36px -> 64px */
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 22ch;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.page-description {
    max-width: 60ch;
    margin: 16px 0 0;
    color: var(--on-band);
    font-size: 1.25rem;
    line-height: 1.4;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 18px 0 0;
    color: var(--on-band-label);
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.post-meta__sep {
    opacity: 0.7;
}

/* The reading time is only rendered when it exists, so it needs no pseudo
   separator: post.hbs prints a real aria-hidden .post-meta__sep instead. */
.post-reading-time:empty {
    display: none;
}

.post-meta a {
    color: var(--on-band-label);
    text-decoration: none;
}

.post-meta a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* ---------- The reading column ---------- */

/* The reading column is a centred 68ch measure; wide media breaks out of it.
   Post and page share the same column. */
.post-body {
    width: min(calc(100% - 2 * var(--gutter)), 68ch);
    margin: 56px auto 0;
}

.content {
    max-width: 68ch;
    font-family: var(--font-text);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.content > *:first-child {
    margin-top: 0;
}

.content__feature-image {
    display: block;
    width: min(1000px, calc(100% - 2 * var(--gutter)));
    height: auto;
    margin: 48px auto;
}

.content p,
.content ul,
.content ol,
.content blockquote {
    margin: 0 0 1.1em;
}

.content ul,
.content ol {
    padding-left: 1.4em;
}

.content li + li {
    margin-top: 0.35em;
}

/* More space above a heading than below it. */
.content h2 {
    margin: 1.7em 0 0.5em;
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1.15;
}

.content h3,
.content h4 {
    margin: 1.5em 0 0.4em;
    font-family: var(--font-display);
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 1.2;
}

.content a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.content a:hover {
    text-decoration-thickness: 2px;
}

.content blockquote {
    margin: 1.5em 0;
    padding-left: 1.25em;
    border-left: 1px solid var(--line);
    color: var(--steel);
    font-style: italic;
}

.content hr {
    margin: 2.5em 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.content strong {
    font-weight: 600;
}

/* ---------- Tables: hairlines, tabular figures ---------- */

.content table {
    width: 100%;
    margin: 1.5em 0;
    border-collapse: collapse;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.content th,
.content td {
    padding: 0.6em 0.75em;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.content thead th {
    border-bottom-color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
}

/* ---------- Figures and images ---------- */

.content figure {
    margin: 1.75em 0;
}

.content figure img {
    width: 100%;
    height: auto;
}

.content figcaption {
    margin-top: 0.6em;
    color: var(--steel);
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
}

/* ---------- Code: one dark ground in both modes, palette tokens ---------- */

.content code {
    font-family: var(--font-code);
    font-size: 0.875em;
}

.content p code,
.content li code {
    padding: 0.1em 0.35em;
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.content pre {
    margin: 1.75em 0;
    padding: 20px 22px;
    overflow-x: auto;
    border-radius: 4px;
    background: #13262C;
    color: #DCEBEE;
    font-size: 0.875rem;
    line-height: 1.7;
}

.content pre code {
    display: block;
    min-width: max-content;
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.content .token.comment,
.content .token.prolog,
.content .token.doctype,
.content .token.cdata {
    color: #9AABB0; /* steel-light */
}

.content .token.punctuation {
    color: #DCEBEE;
}

.content .token.property,
.content .token.tag,
.content .token.constant,
.content .token.symbol,
.content .token.deleted {
    color: #A9D0D8; /* contour blue */
}

.content .token.boolean,
.content .token.number {
    color: #7FC4D0; /* accent light */
}

.content .token.selector,
.content .token.attr-name,
.content .token.string,
.content .token.char,
.content .token.builtin,
.content .token.inserted {
    color: #E2C79A; /* warm sand */
}

.content .token.operator,
.content .token.entity,
.content .token.url,
.content .language-css .token.string,
.content .style .token.string {
    color: #A9D0D8;
}

.content .token.atrule,
.content .token.attr-value,
.content .token.keyword {
    color: #7FC4D0;
}

.content .token.function,
.content .token.class-name {
    color: #A9D0D8;
}

.content .token.regex,
.content .token.important,
.content .token.variable {
    color: #E2C79A;
}

/* ---------- Ghost cards ---------- */

.content .kg-card {
    margin: 1.75em 0;
}

.content .kg-image-card img,
.content .kg-embed-card iframe,
.content .kg-video-card video {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Wide media leaves the reading measure; the gallery keeps Ghost's own flex
   layout (card_assets true), so only the width is touched here. */
.content .kg-width-wide {
    width: min(1000px, calc(100vw - 2 * var(--gutter)));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.content .kg-width-full {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
}

/* Callout: a tinted field, never a side stripe. */
.content .kg-callout-card {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 0;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--ink);
}

.content .kg-callout-card a,
.content .kg-callout-card a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Override Ghost's later (0,2,1) accent-variant link colour. */
.content .kg-callout-card.kg-callout-card-accent a,
.content .kg-callout-card.kg-callout-card-accent a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.content .kg-callout-emoji {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.4;
}

.content .kg-callout-text {
    margin: 0;
}

/* Bookmark: a hairline box, no shadow. */
.content .kg-bookmark-card {
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: none;
    overflow: hidden;
}

.content .kg-bookmark-card a.kg-bookmark-container,
.content .kg-bookmark-card a.kg-bookmark-container:hover {
    display: flex;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.content .kg-bookmark-content {
    padding: 18px 20px;
}

.content .kg-bookmark-title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
}

.content .kg-bookmark-description {
    margin-top: 6px;
    color: var(--steel);
    font-size: 0.9375rem;
    line-height: 1.45;
    opacity: 1;
}

.content .kg-bookmark-metadata {
    margin-top: 12px;
    color: var(--steel);
    font-size: var(--text-meta);
    opacity: 1;
}

.content .kg-bookmark-metadata > *:not(img) {
    opacity: 1;
}

.content .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Toggle: a simple hairline card. */
.content .kg-toggle-card {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
}

.content .kg-toggle-heading {
    padding: 14px 18px;
}

.content .kg-toggle-card-icon {
    margin: 0;
}

.content .kg-toggle-content {
    padding: 0 18px 16px;
}

.content .kg-file-card {
    border: 1px solid var(--line);
    border-radius: 4px;
}

/* ---------- After the article: newsletter, comments, keep reading ---------- */

.post-newsletter,
.comments,
.post-keep-reading {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--line);
}

.post-section-title {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1.1;
}

.post-newsletter .button {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: var(--accent);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.post-newsletter .button:hover {
    background: transparent;
    color: var(--accent);
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
    .post-header {
        grid-column: 1 / -1;
    }

    .post-body {
        margin-top: 36px;
    }

    .content__feature-image {
        margin: 28px auto;
    }

    .content pre {
        padding: 16px;
        font-size: 0.8125rem;
    }

    .post-newsletter,
    .comments,
    .post-keep-reading {
        margin-top: 40px;
        padding-top: 28px;
    }
}