/* ============================================================
   Newspaper Typography — V2
   Goal: ~20% more content visible per page via tighter type,
   denser line-height, reduced section spacing, and smaller
   image captions. Visual identity (fonts, colors) unchanged.
   ============================================================ */

/* ── Base body type ───────────────────────────────────────── */
body, html {
    font-size: 24px;          /* was 18px — tighter base */
    line-height: 150%;        /* was 160% */
    letter-spacing: 0.01em;
}

/* ── Heading scale — traditional broadsheet proportions ─── */
h1 { font-size: 70px; }       /* was 55px */
h2 { font-size: 54px; }       /* was 38px */
h3 { font-size: 50px; }       /* was 34px */
h4 { font-size: 46px; }       /* was 30px */
h5 { font-size: 43px; }       /* was 26px */
h6 { font-size: 37px; }       /* was 22px */

h1, h2, h3, h4, h5, h6 {
    line-height: 115%;        /* was 120% — slightly tighter */
}

/* ── Body paragraph ───────────────────────────────────────── */
p {
    font-size: 20px;          /* was 17px */
    line-height: 152%;
    margin-bottom: 0.65em;    /* tighter paragraph spacing */
}

/* ── Post content paragraph spacing ──────────────────────── */
.post-content > * {
    margin-bottom: 0.9em;     /* was calc(1.7vw * var(--scale)) */
}

/* ── Article body text ────────────────────────────────────── */
.post-content p,
.post-content li {
    font-size: 22px;
    line-height: 155%;
}

/* ── Post heading (article title) ────────────────────────── */
.post-heading {
    font-size: 62px !important;   /* was ~48–55px */
    line-height: 112% !important;
    margin-bottom: 10px !important;
    font-weight: 900 !important;   /* Thicker/heavier */
    max-width: 100% !important;    /* Full-width */
    color: #000000 !important;     /* Deep Crimson (Light Mode) */
}

html[data-theme="dark"] .post-heading {
    color: #FFFFFF !important;     /* White (Dark Mode) */
}


/* Post excerpt (deck/standfirst below title) */
.post-excerpt {
    font-size: 13px !important;
    line-height: 148% !important;
    opacity: 0.72 !important;
    letter-spacing: 0.005em !important;
    font-weight: 400 !important;
}
/* ── Post tag / section label ─────────────────────────────── */
.post-tag {
    font-size: 11px !important;
    letter-spacing: 0.1em;
    margin-bottom: 6px !important;
}

/* ── Blockquote — pull-quote style ───────────────────────── */
blockquote {
    font-size: 22px;          /* was 32px */
    /* padding-left intentionally omitted — blockquote.css sets 1.6em !important */
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    line-height: 130% !important;
}

.kg-blockquote-alt {
    font-size: 24px;          /* was 34px */
}

/* ── Captions and small text ──────────────────────────────── */
figcaption,
small,
.post-content figcaption {
    font-size: 11px;
    line-height: 140%;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* ── Section headings (section labels above card groups) ─── */
.section-heading {
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 6px 0;
}

/* ── Card headings — tighter for density ─────────────────── */
.small-card-heading,
.extra-small-card-heading,
.slide-card-heading {
    font-size: 15px;
    line-height: 118%;
}

.big-card-heading {
    font-size: 26px;
    line-height: 115%;
}

.horizontal-card-heading {
    font-size: 20px;
    line-height: 118%;
}

/* ── Author byline ────────────────────────────────────────── */
.post-authors,
.post-author-name,
.post-author-date {
    font-size: 11px;
    line-height: 140%;
}

/* ── Section padding — reduce vertical breathing room ─────── */
.section-padding {
    padding-top: 32px;
    padding-bottom: 32px;
}

.section-padding-top {
    padding-top: 32px;
}

.section-padding-bottom {
    padding-bottom: 32px;
}

.section-padding-small {
    padding-top: 22px;
    padding-bottom: 22px;
}

/* ── Post content top margin ─────────────────────────────── */
.post-content {
    margin-top: 22px;         /* was 38px */
}

.post-content-no-image {
    margin-top: 36px;         /* was 57px */
}

/* ── Drop cap — scaled to new base ───────────────────────── */
.initial-paragraph::first-letter {
    font-size: 3.8em;
    line-height: 0.8;
    margin-right: 0.06em;
    margin-top: 0.06em;
}

/* ── Table of contents link size ─────────────────────────── */
a.toc-link {
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
}

/* ── Medium / big / small text utilities ─────────────────── */
.medium-text { font-size: 20px; }
.big-text    { font-size: 26px; }
.small-text  { font-size: 13px; }

/* ── Navbar logo text ─────────────────────────────────────── */
.navbar-logo-text {
    font-size: 28px;
}

/* ── Button size ──────────────────────────────────────────── */
button,
.button,
.kg-btn,
.kg-header-card-button {
    font-size: 13px;
    padding: 6px 22px;
}

/* ── Subscribe button ─────────────────────────────────────── */
.subscribe-button {
    font-size: 12px;
    padding: 5px 18px;
    letter-spacing: 0.06em;
}

/* ── Image cards — link height should be auto so the inner wrapper drives it ── */
.small-card-image-link,
.extra-small-side-card-image-link,
.slide-card-image-link {
    height: auto;
}

/* ── Post hero image — slightly shorter ──────────────────── */
.post-main-image {
    max-height: 420px;
    overflow: hidden;
}

.post-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Announcement bar ─────────────────────────────────────── */
#announcement-bar-root .gh-announcement-bar {
    font-size: 12px;
    padding-top: 7px;
    padding-bottom: 7px;
    min-height: 34px;
}

/* ── World clock bar ──────────────────────────────────────── */
.world-clock-bar {
    font-size: 11px;
}

/* ── Navbar top bar ───────────────────────────────────────── */
.navbar-top {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
    font-size: 13px;
}

/* ── Large desktop scale overrides ───────────────────────── */
@media (min-width: 1239px) {
    body, html { font-size: calc(0.83vw * var(--scale)); }
    h1 { font-size: calc(3.2vw * var(--scale)); }
    h2 { font-size: calc(2.1vw * var(--scale)); }
    h3 { font-size: calc(1.8vw * var(--scale)); }
    h4 { font-size: calc(1.53vw * var(--scale)); }
    h5 { font-size: calc(1.32vw * var(--scale)); }
    h6 { font-size: calc(1.11vw * var(--scale)); }
    .post-heading { font-size: calc(2.64vw * var(--scale)) !important; }
    blockquote { font-size: calc(1.53vw * var(--scale)); }
    .post-content > * { margin-bottom: calc(0.9vw * var(--scale)); }
    .section-padding { padding-top: calc(2.2vw * var(--scale)); padding-bottom: calc(2.2vw * var(--scale)); }
    .section-padding-top { padding-top: calc(2.2vw * var(--scale)); }
    .section-padding-bottom { padding-bottom: calc(2.2vw * var(--scale)); }
    .section-padding-small { padding-top: calc(1.5vw * var(--scale)); padding-bottom: calc(1.5vw * var(--scale)); }
    .medium-text { font-size: calc(1.39vw * var(--scale)); }
    .big-text    { font-size: calc(1.81vw * var(--scale)); }
    .small-text  { font-size: calc(0.9vw * var(--scale)); }
    .section-heading { font-size: calc(0.76vw * var(--scale)); }
    figcaption, small { font-size: calc(0.76vw * var(--scale)); }
    .post-content { margin-top: calc(1.53vw * var(--scale)); }
    .post-main-image { max-height: 29.2vw; }
}

/* ── Tablet ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    body, html { font size: 24px; }
    h1 { font-size: 40px; }
    h2 { font-size: 30px; }
    h3 { font-size: 26px; }
    h4 { font-size: 23px; }
    h5 { font-size: 21px; }
    h6 { font-size: 19px; }
    .post-heading { font-size: 34px !important; }
    blockquote { font-size: 17px; }
    .post-content > * { margin-bottom: 0.8em; }
    .section-padding { padding-top: 24px; padding-bottom: 24px; }
    .section-padding-small { padding-top: 16px; padding-bottom: 16px; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 479px) {
    body, html { font-size: 14px; }
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    h3 { font-size: 19px; }
    h4 { font-size: 17px; }
    .post-heading { font-size: 24px !important; }
    blockquote { font-size: 16px; }
    .post-content > * { margin-bottom: 0.7em; }
}