/* ==========================================================================
   Dispatch — a Ghost theme
   1. Fonts           6. Hero, cards, rows       11. Section pages
   2. Tokens          7. Most popular            12. Articles & Koenig cards
   3. Base            8. Newsletter              13. Sidebar menu
   4. Masthead        9. Carousel                14. Responsive
   5. Compact bar    10. Footer
   ========================================================================== */

/* 1. Fonts (self-hosted, SIL Open Font License) */
@font-face {
    font-family: "Archivo Theme";
    src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* 2. Tokens */
:root {
    /* Brand accent as the publisher set it: for decoration (rules, dots). */
    --color-accent-brand: var(--ghost-accent-color, #d54b26);
    /* Accent for text and for backgrounds under white text: darkened where needed so it
       always reaches WCAG AA (4.5:1) against white, whatever accent the publisher picks. */
    --color-accent: var(--color-accent-brand);
    --color-ink: #1e1e1e;
    --color-ink-deep: #141e23;
    --color-muted: #6b6b6b;
    --color-date: #6f6f6f;
    --color-line: #cccccc;
    --color-band: #f0f0f0;
    --color-panel: #f3f4f6;
    --color-white: #ffffff;
    --color-link: #206dc5;
    --color-overlay: #212934bf;

    --font-heading: var(--gh-font-heading, "Archivo Theme"), Helvetica, Arial, sans-serif;
    --font-sans: var(--gh-font-body, "Figtree"), Helvetica, Arial, sans-serif;
    --font-serif: "Lora", Georgia, "Times New Roman", serif;
    --font-system: Helvetica, Arial, sans-serif;
    --font-headline: var(--font-heading);
    --heading-stretch: 92%;

    --container: 1243px;
    --list-width: 908px;
    --gutter: 24px;
    --gap: 24px;
    --radius-round: 50%;
    --radius-s: 2px;
}

@supports (color: oklch(from red l c h)) {
    :root { --color-accent: oklch(from var(--color-accent-brand) min(l, 0.53) c h); }
}

/* Headline font option: serif headlines use Lora (bundled) unless a Ghost heading font is set. */
.has-serif-headlines { --font-headline: var(--gh-font-heading, "Lora"), Georgia, "Times New Roman", serif; --heading-stretch: 100%; }
.has-serif-headlines .hero-title, .has-serif-headlines .article-title { letter-spacing: -0.01em; }

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-ink);
    background: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 8px 16px; background: var(--color-white); color: var(--color-ink); }
.skip-link:focus { left: 8px; top: 8px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; color: var(--color-white); }
.heading-font, .main-nav a, .section-title, .newsletter-title, .dig-deeper, .wordmark, .topbar-mark, .subnav, .related-title, .sidebar-nav a {
    font-family: var(--font-heading);
    font-stretch: var(--heading-stretch);
}
.card-title, .hero-title, .list-title, .popular-headline, .slide-title, .headline-title, .article-title {
    font-family: var(--font-headline);
    font-stretch: var(--heading-stretch);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.image-fallback { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #3a3f47, #1e1e1e); }

/* 4. Masthead (homepage) */
.masthead { background: var(--color-ink); color: var(--color-white); }
.masthead-top { position: relative; height: 97px; border-bottom: 1px solid var(--color-muted); }
.masthead-logo { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); height: 64px; display: flex; align-items: center; }
.masthead-logo img { max-height: 64px; width: auto; }
.wordmark { display: block; font-weight: 800; font-size: 66px; line-height: 1; letter-spacing: -0.035em; text-transform: lowercase; color: var(--color-white); white-space: nowrap; }
.masthead-actions { position: absolute; top: 29px; right: 24px; height: 38px; display: flex; align-items: center; gap: 24px; }
.masthead-burger, .masthead-search { display: none; }
.masthead-search .icon-btn { width: 16px; height: 56px; }
.signin-link { font-size: 13px; line-height: 20px; color: var(--color-white); white-space: nowrap; }
.btn-outline { display: inline-flex; align-items: center; height: 38px; padding: 0 13px; border: 1px solid var(--color-muted); font-size: 13px; color: var(--color-white); white-space: nowrap; }
.masthead-nav { height: 47px; }
.masthead-nav-inner { position: relative; height: 47px; display: flex; align-items: center; justify-content: space-between; }
.main-nav { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.main-nav .nav { display: flex; }
.main-nav a { display: block; padding: 0 14px; font-size: 15px; font-weight: 700; line-height: 47px; text-transform: uppercase; color: var(--color-white); white-space: nowrap; }
.main-nav a:hover { color: var(--color-line); }
.main-nav .nav-membership a, .main-nav .nav-become-a-member a { background: var(--color-accent); }
.main-nav .nav-membership a:hover { color: var(--color-white); filter: brightness(1.08); }

/* social icon sizes */
.social { display: flex; align-items: center; }
.social a { display: flex; align-items: center; color: var(--color-white); }
.social .icon { width: 100%; height: 100%; }
.social--masthead { gap: 24px; }
.social--masthead .social-facebook { width: 9px; height: 14px; }
.social--masthead .social-x { width: 15px; height: 14px; }
.social--masthead .social-instagram { width: 14px; height: 16px; }
.social--masthead .social-youtube { width: 24px; height: 16px; }
.social--masthead .social-tiktok { width: 13px; height: 14px; }
.social--masthead .social-threads { width: 18px; height: 18px; }
.social--masthead .social-bluesky { width: 18px; height: 16px; }

/* 5. Compact bar (section pages, and the bar that slides in on the homepage) */
.topbar { position: relative; z-index: 40; height: 58px; display: flex; align-items: center; padding: 0; background: var(--color-ink); color: var(--color-white); }
.topbar-logo { display: flex; align-items: center; width: 54px; height: 38px; margin-left: 24px; }
.topbar-logo img { max-height: 38px; width: auto; }
.topbar-mark { font-weight: 800; font-size: 46px; line-height: 38px; letter-spacing: -0.04em; text-transform: lowercase; color: var(--color-white); }
.topbar-burger { margin-left: 16px; width: 16px; height: 38px; }
.topbar-nav a { line-height: 58px; }
.topbar-actions { margin-left: auto; margin-right: 24px; display: flex; align-items: center; gap: 24px; }
.topbar-search, .masthead-nav [role="search"] { display: flex; }
.topbar-actions .icon-btn { width: 16px; height: 38px; }
.topbar--scroll { position: fixed; top: 0; left: 0; right: 0; z-index: 800; transform: translateY(-55px); transition: transform 0.25s ease; }
.topbar--scroll.is-visible { transform: translateY(0); }

/* 6. Hero, cards, rows */
.site-main { display: block; }
.home-top { padding-top: 72px; }
.grid { display: grid; gap: var(--gap); }
.grid + .grid { margin-top: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Adaptive layout: a brand-new site has few stories, so rows collapse gracefully. */
.grid:not(:has(> *)) { display: none; }
.grid--popular:not(:has(.popular)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--popular > .popular:first-child { grid-column: 1 / -1; }
.home-heroes > .hero:only-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.home-feature > :only-child { grid-column: 1 / -1; }
.home-feature > .carousel:only-child { aspect-ratio: 21 / 8; }
.empty-state { padding-top: 96px; padding-bottom: 96px; text-align: center; }
.empty-title { font-family: var(--font-heading); font-size: 28px; margin-bottom: 8px; }

/* Homepage layout: Lead and headlines */
.home-lead { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
.home-lead > .hero { aspect-ratio: auto; min-height: 500px; }
.home-lead > .hero:only-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; min-height: 0; }
.headlines { display: flex; flex-direction: column; min-width: 0; border-top: 4px solid var(--color-accent-brand); }
.headlines-title { padding: 10px 0; font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-size: 15px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--color-line); }
.headlines-list { flex: 1; display: flex; flex-direction: column; }
.headline-item { flex: 1; display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-line); }
.headline-item:last-child { border-bottom: 0; }
.headline-media { flex: none; display: block; width: 120px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-panel); }
.headline-media img { width: 100%; height: 100%; object-fit: cover; }
.headline-body { min-width: 0; }
.headline-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); }
.headline-title { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.25; }
.headline-title a:hover { color: var(--color-accent); }
.headline-item .byline { margin-top: 4px; font-size: 11px; line-height: 16px; }

/* Homepage layout: Single lead */
.hero--spotlight { aspect-ratio: 21 / 9; }
.hero--spotlight .hero-body { left: 40px; right: 40px; bottom: 32px; max-width: 880px; }
.hero--spotlight .hero-title { font-size: 44px; line-height: 52px; }
.hero--spotlight .hero-excerpt { display: block; margin-top: 10px; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; color: var(--color-white); }

/* Section pages: compact list */
.post-feed--compact .row-card { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--color-line); }
.post-feed--compact .row-card-media { width: 300px; height: 200px; }
.post-feed--compact .row-card-body { margin-left: 324px; min-height: 200px; }
.post-feed--compact .card-title { font-size: 24px; line-height: 1.2; }
.post-feed--compact .row-card-excerpt { font-size: 16px; line-height: 24px; }

.pill { display: inline-block; flex: none; height: 23px; padding: 0 12px; font-family: var(--font-sans); font-size: 11px; font-weight: 700; line-height: 23px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-white); background: var(--color-accent); white-space: nowrap; }
.byline { display: block; font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-muted); }

.hero { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media .image-fallback { width: 100%; height: 100%; object-fit: cover; }
.hero-media img { transition: transform 0.6s ease; }
.hero-media:hover img { transform: scale(1.02); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72) 100%); pointer-events: none; }
.hero-body { position: absolute; left: 28px; right: 28px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.hero-body a { pointer-events: auto; }
.hero-title { margin-top: 8px; font-size: 32px; font-weight: 700; line-height: 40px; color: var(--color-white); }
.hero .byline { margin-top: 8px; color: var(--color-line); }
.hero-excerpt { display: none; }

.card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.card-media { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-panel); }
.card-media img, .row-card-media img, .list-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card-media:hover img, .row-card-media:hover img, .list-media:hover img { transform: scale(1.03); }
.card .pill { position: relative; margin-top: -11px; }
.card-title { margin-top: 12px; font-size: 17px; font-weight: 700; line-height: 1.265; color: var(--color-ink); }
.card-title a:hover, .list-title a:hover, .popular-link:hover .popular-headline { color: var(--color-accent); }
.card .byline { margin-top: 8px; }
.card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-top: 8px; font-family: var(--font-serif); font-size: 13px; line-height: 1.5; color: var(--color-ink); }

.grid.home-rows { margin-top: 40px; }
.row-card { position: relative; min-width: 0; min-height: 176px; }
.row-card-media { position: absolute; top: 0; left: 0; width: 256px; height: 176px; overflow: hidden; background: var(--color-panel); }
.row-card-body { min-width: 0; margin-left: 276px; }
.row-card-tag { display: block; margin-top: -1px; font-size: 11px; font-weight: 700; line-height: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-accent); }
.row-card .card-title { margin-top: 11px; }
.row-card .byline { margin-top: 8px; }
.row-card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin-top: 7px; font-family: var(--font-serif); font-size: 15px; line-height: 22.5px; }

.load-more { display: flex; align-items: center; justify-content: center; gap: 8px; height: 47px; margin-top: 32px; background: var(--color-ink); font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--color-white); }
.load-more:hover { background: var(--color-accent); }
.load-more.is-loading { opacity: 0.7; pointer-events: none; }
.home-bottom { padding-top: 40px; padding-bottom: 136px; }

/* 7. Most popular */
.popular { border: 1px solid var(--color-muted); min-width: 0; }
.popular-title { height: 35px; font-size: 13px; font-weight: 700; line-height: 35px; text-align: center; text-transform: uppercase; color: var(--color-white); background: var(--color-ink); }
.popular-list { padding: 16px 24px; }
.popular-item + .popular-item { margin-top: 12px; }
.popular-link { display: block; }
.popular-headline { display: block; font-size: 15px; font-weight: 700; line-height: 20px; }
.popular-byline { display: block; margin-top: 5px; font-size: 11px; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-muted); }

/* 8. Newsletter */
.newsletter--band { margin-top: 36px; padding: 40px var(--gutter); background: var(--color-band); }
.newsletter-box { position: relative; max-width: 768px; margin: 0 auto; padding: 32px 32px 16px; border: 4px solid var(--color-accent-brand); }
.newsletter-title { position: absolute; top: -2px; left: 0; right: 0; transform: translateY(-50%); font-size: 22.4px; font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; color: var(--color-accent); }
.newsletter-title span { padding: 0 16px; background: var(--color-band); }
.newsletter-text { font-size: 17px; line-height: 25px; color: var(--color-ink); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.newsletter-input { flex: 1 1 200px; min-width: 0; height: 56px; padding: 0 16px; border: 1px solid var(--color-date); border-radius: 0; font-size: 13px; color: var(--color-ink); background: var(--color-white); }
.newsletter-input::placeholder { color: var(--color-ink); opacity: 1; }
.newsletter-button { flex: 0 0 256px; height: 56px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--color-white); background: var(--color-ink); }
.newsletter-button:hover { background: #000; }
.newsletter-button-loading, .newsletter-message { display: none; }
.newsletter-form.loading .newsletter-button-label { display: none; }
.newsletter-form.loading .newsletter-button-loading { display: inline; }
.newsletter-message { flex: 1 0 100%; margin: 0; font-size: 14px; }
.newsletter-form.success .newsletter-message--success, .newsletter-form.error .newsletter-message--error { display: block; }
.newsletter-message--error { color: var(--color-accent); }
.newsletter--inline { margin-bottom: 44px; padding: 41px 32px; background: var(--color-band); }
.newsletter--inline .newsletter-box { max-width: none; }
.ad-slot + .newsletter--inline { margin-top: 44px; }

/* 9. Carousel */
.carousel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; color: var(--color-white); text-align: center; background: var(--color-ink); }
.carousel-label { position: absolute; top: 0; left: 50%; z-index: 3; transform: translateX(-50%); }
.carousel-viewport { position: absolute; top: 0; bottom: 0; left: 37px; right: 37px; overflow: hidden; }
.carousel-track { display: flex; height: 100%; transition: transform 0.45s ease; }
.slide { flex: 0 0 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.slide-media { display: flex; justify-content: center; width: 100%; max-width: 375px; margin: 0 auto; }
.slide-media img { width: 100%; max-width: 375px; height: 250px; object-fit: contain; }
.slide-title { margin-top: 16px; font-size: 20px; font-weight: 700; line-height: 25px; }
.slide-byline { margin-top: 4px; font-size: 11px; font-weight: 700; line-height: 16px; letter-spacing: 0.03em; text-transform: uppercase; }
.carousel-arrow { position: absolute; top: 50%; z-index: 3; width: 38px; height: 58px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); color: var(--color-white); }
.carousel-arrow--prev { left: 48px; }
.carousel-arrow--next { right: 49px; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 15px; z-index: 3; display: flex; justify-content: center; gap: 13px; }
.carousel-dots button { display: block; width: 10px; height: 10px; border-radius: var(--radius-round); font-size: 0; background: var(--color-line); }
.carousel-dots button.is-active { background: var(--color-accent-brand); }

/* 10. Footer */
.site-footer { color: var(--color-white); background: var(--color-ink); }
.footer-top { container-type: inline-size; display: flex; justify-content: space-between; align-items: flex-start; min-height: 179px; padding-top: 36px; padding-bottom: 36px; }
.footer-logo { display: block; }
.footer-logo img { max-height: 38px; width: auto; }
.wordmark--footer { font-size: 40px; line-height: 38px; }
.footer-tagline { max-width: 175px; margin-top: 12px; font-size: 13px; font-weight: 600; line-height: 19.5px; }
.social--footer { gap: 23px; }
.social--footer .social-facebook { width: 14px; height: 22px; }
.social--footer .social-x { width: 20px; height: 18px; }
.social--footer .social-instagram { width: 21px; height: 24px; }
.social--footer .social-youtube { width: 24px; height: 18px; }
.social--footer .social-tiktok { width: 20px; height: 22px; }
.social--footer .social-threads { width: 20px; height: 20px; }
.social--footer .social-bluesky { width: 24px; height: 22px; }
.footer-menu .nav { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: calc((100cqw - 705px) / 3); row-gap: 10.7px; padding-top: 2px; }
.footer-menu a { display: block; font-size: 13px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.footer-menu a:hover, .footer-copy a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid var(--color-muted); padding: 20px 0; }
.footer-copy { font-size: 13px; font-weight: 600; line-height: 20px; text-align: center; }

/* 11. Section pages */
.section-head { padding: 6px 0; border-bottom: 1px solid var(--color-muted); }
.section-head-inner { display: flex; align-items: center; gap: 36px; }
.section-title { padding-bottom: 4px; border-bottom: 4px solid var(--color-accent-brand); font-size: 32px; font-weight: 700; line-height: 27px; text-transform: uppercase; }
.section-note { font-size: 13px; text-transform: uppercase; color: var(--color-muted); }
.subnav { position: relative; margin-top: -8px; }
.subnav-toggle { display: none; align-items: center; gap: 6px; font-size: 15px; text-transform: uppercase; color: var(--color-ink); }
.subnav-toggle .icon-caret { color: var(--color-muted); }
.subnav-list { display: flex; gap: 24px; }
.subnav-list a { font-size: 13px; line-height: 20px; text-transform: uppercase; color: var(--color-ink); }
.subnav-list a:hover { color: var(--color-accent); }
.list-main, .list-container { width: 100%; max-width: var(--list-width); margin: 44px auto 56px; padding: 0 var(--gutter); }
.list-item { position: relative; margin-bottom: 44px; padding-bottom: 32px; border-bottom: 1px solid var(--color-line); }
.list-media { display: block; aspect-ratio: 860 / 484; overflow: hidden; background: var(--color-panel); }
.list-title { margin-top: 24px; font-size: 32px; font-weight: 700; line-height: 40px; }
.list-meta { margin-top: 8px; font-size: 12px; line-height: 18px; text-transform: uppercase; }
.list-meta .byline { display: inline; }
.list-item .byline, .article .byline { color: var(--color-ink); }
.list-date { color: var(--color-date); letter-spacing: 0.03em; white-space: nowrap; }
.list-date::before { content: "•"; margin: 0 12px 0 14px; }
.list-excerpt { margin-top: 8px; font-family: var(--font-serif); font-size: 17px; line-height: 26px; }
.list-foot { position: relative; height: 35px; margin-top: 32px; }
.list-pill { position: absolute; top: 25px; left: 0; }
.list-foot-main { display: flex; align-items: center; height: 23px; }
.dig-deeper { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; line-height: 23px; color: var(--color-accent); }
.dig-deeper:hover { text-decoration: underline; }
.read-time { margin-left: 18px; font-size: 12px; color: var(--color-accent); }
.share { position: absolute; top: 4px; right: 0; display: flex; gap: 8px; }
.share a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-line); border-radius: var(--radius-round); color: var(--color-ink); background: var(--color-white); }
.share a:hover { border-color: var(--color-ink); }
.share .icon { width: 14px; height: 14px; }
.share .share-email .icon { width: 20px; height: 15px; }
.ad-slot { display: block; height: 90px; }
.ad-slot--top { display: none; }
.archive-main { padding-top: 44px; padding-bottom: 56px; }
.archive-main .home-rows { margin-top: 0; }
.author-bio { margin-bottom: 40px; font-family: var(--font-serif); font-size: 17px; line-height: 26px; }
.error-box { text-align: center; padding-top: 96px; padding-bottom: 96px; }
.error-code { font-family: var(--font-heading); font-size: 96px; font-weight: 800; line-height: 1; color: var(--color-accent); }
.error-message { margin: 16px 0 8px; font-family: var(--font-heading); font-size: 32px; }

/* 12. Articles & Koenig cards */
.article-main { padding-bottom: 56px; }
.article { max-width: var(--list-width); margin: 0 auto; padding: 44px var(--gutter) 0; }
.article-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 24px; }
.article-title { margin-top: 16px; font-size: 44px; font-weight: 700; line-height: 1.15; }
.article-dek { margin-top: 12px; font-family: var(--font-serif); font-size: 20px; line-height: 1.5; }
.article-meta { margin-top: 16px; flex-wrap: wrap; }
.article-meta .read-time { margin-left: 14px; }
.article-head .share { position: static; margin-top: 16px; }
.article-image { margin-bottom: 32px; }
.article-image img { width: 100%; height: auto; }
.article-image figcaption, .gh-content figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.gh-content { font-family: var(--font-serif); font-size: 18px; line-height: 1.7; }
.gh-content > * + * { margin-top: 1.25em; }
.gh-content h2, .gh-content h3 { font-family: var(--font-headline); font-stretch: var(--heading-stretch); line-height: 1.2; margin-top: 1.6em; }
.gh-content h2 { font-size: 28px; }
.gh-content h3 { font-size: 22px; }
.gh-content a { color: var(--color-accent); text-decoration: underline; }
.gh-content blockquote { margin-left: 0; padding-left: 20px; border-left: 4px solid var(--color-accent-brand); font-style: italic; }
.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content ul { list-style: disc; }
.gh-content img { height: auto; }
.gh-content hr { border: 0; border-top: 1px solid var(--color-line); }
.kg-width-wide { position: relative; width: min(1100px, 100vw - 48px); left: 50%; transform: translateX(-50%); }
.kg-width-full { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); }
.kg-width-wide img, .kg-width-full img { width: 100%; }
.kg-image-card img, .kg-gallery-image img { margin: 0 auto; }
.kg-gallery-container { display: flex; flex-direction: column; gap: 8px; }
.kg-gallery-row { display: flex; gap: 8px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.article-foot { position: relative; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--color-line); }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 210px; }
.article-foot .share { top: 20px; }
.article-main .newsletter--inline { max-width: calc(var(--list-width) - 48px); margin: 32px auto 0; }
.article-comments { max-width: var(--list-width); margin: 40px auto 0; padding: 0 var(--gutter); }
.related { margin-top: 56px; }
.related-title { margin-bottom: 24px; padding-bottom: 8px; border-bottom: 4px solid var(--color-accent-brand); font-size: 24px; text-transform: uppercase; }

/* 13. Sidebar menu */
.sidebar { position: fixed; inset: 0; z-index: 900; visibility: hidden; }
.sidebar.is-open { visibility: visible; }
.sidebar-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.25s ease; }
.sidebar.is-open .sidebar-backdrop { opacity: 1; }
.sidebar-panel { position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; width: 364px; max-width: 90vw; overflow-y: auto; padding: 20px 20px 40px; color: var(--color-ink); background: var(--color-white); transform: translateX(-100%); transition: transform 0.25s ease; }
.sidebar.is-open .sidebar-panel { transform: translateX(0); }
.sidebar-head { display: flex; align-items: flex-start; justify-content: space-between; }
.sidebar-logo { margin-top: 20px; }
/* The menu panel is white. With no menu logo set, the site logo (made for the dark masthead) is turned dark. */
.sidebar-logo img { width: auto; max-height: 38px; }
.sidebar-logo-img--auto { filter: brightness(0); }
.wordmark--sidebar { font-size: 40px; line-height: 38px; color: var(--color-ink); }
.sidebar-close { color: var(--color-ink); width: 17px; height: 17px; }
.sidebar-search { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; margin-top: 7px; padding: 0 12px 0 16px; border: 1px solid var(--color-line); color: var(--color-muted); text-align: left; }
.sidebar-nav { margin-top: 15px; }
.sidebar-nav li + li { margin-top: 15.5px; }
.sidebar-nav a { display: block; font-size: 15px; font-weight: 700; line-height: 23px; text-transform: uppercase; }
.sidebar-nav a:hover { color: var(--color-accent); }
.sidebar-cta { display: flex; align-items: center; justify-content: center; height: 49px; margin-top: 16px; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--color-white); background: var(--color-accent); }
.sidebar-follow { margin-top: 40px; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.social--sidebar { gap: 16px; margin-top: 12px; }
.social--sidebar a { width: 18px; height: 18px; color: var(--color-ink); }
.sidebar-member { margin-top: 24px; }
.sidebar-member .signin-link { font-weight: 700; font-size: 15px; color: var(--color-ink); }
body.has-open-menu { overflow: hidden; }

/* 14. Responsive */
@media (max-width: 1100px) {
    .masthead-top { height: 56px; border-bottom: 0; }
    .masthead-nav, .masthead-actions { display: none; }
    .masthead-burger, .masthead-search { display: flex; position: absolute; top: 0; height: 56px; width: 16px; }
    .masthead-burger { left: 24px; }
    .masthead-search { right: 24px; }
    .masthead-logo { top: 12px; height: 32px; }
    .masthead-logo img { max-height: 32px; }
    .masthead .wordmark { font-size: 34px; }
    .topbar-nav { display: none; }
    .topbar--scroll { display: none; }
    .grid--4, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slide-media, .slide-media img { max-width: 460px; }
    .slide-media img { height: 307px; }
    .grid--2.home-heroes, .home-feature { grid-template-columns: minmax(0, 1fr); }
    .home-heroes > .hero:only-child { aspect-ratio: 3 / 2; }
    .home-lead { grid-template-columns: minmax(0, 1fr); }
    .home-lead > .hero, .home-lead > .hero:only-child { aspect-ratio: 3 / 2; min-height: 0; }
    .hero--spotlight { aspect-ratio: 3 / 2; }
    .hero--spotlight .hero-body { left: 28px; right: 28px; bottom: 22px; }
    .hero--spotlight .hero-title { font-size: 32px; line-height: 40px; }
    .hero--spotlight .hero-excerpt { display: none; }
    .post-feed--compact .row-card-media { width: 144px; height: 96px; }
    .post-feed--compact .row-card-body { margin-left: 164px; min-height: 96px; }
    .post-feed--compact .card-title { font-size: 20px; }
    .home-feature > .carousel:only-child { aspect-ratio: auto; }
    .popular { display: none; }
    .carousel { aspect-ratio: auto; height: 460px; }
    .carousel-arrow--prev { left: 0; }
    .carousel-arrow--next { right: 0; }
    .carousel-viewport { left: 37px; right: 37px; }
    .row-card { min-height: 96px; }
    .row-card-body { margin-left: 164px; }
    .row-card-media { width: 144px; height: 96px; }
    .row-card-excerpt { font-size: 16px; }
    .ad-slot { height: 279px; }
    .ad-slot--top { display: block; height: 100px; }
    .footer-brand { display: none; }
    .footer-menu .nav { column-gap: calc((100cqw - 530px) / 2); }
}

@media (max-width: 767px) {
    .hero-title, .hero--spotlight .hero-title { font-size: 20px; line-height: 25px; }
    .headline-media { width: 96px; }
    .post-feed--compact .row-card-excerpt { display: none; }
    .hero-body { left: 28px; right: 28px; bottom: 16px; }
    .hero--feature { aspect-ratio: auto; overflow: visible; background: none; }
    .hero--feature .hero-media { position: relative; display: block; aspect-ratio: 3 / 2; }
    .hero--feature .hero-media::after { display: none; }
    .hero--feature .hero-body { position: relative; left: auto; right: auto; bottom: auto; margin-top: -11px; }
    .hero--feature .hero-title { margin-top: 12px; color: var(--color-ink); font-size: 20px; line-height: 25px; }
    .hero--feature .byline { color: var(--color-muted); }
    .hero--feature .hero-excerpt { display: block; margin-top: 8px; font-family: var(--font-serif); font-size: 13px; line-height: 1.5; }
    .grid--4, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
    .popular { display: block; }
    .home-feature .carousel { margin: 0 calc(var(--gutter) * -1); }
    .carousel-viewport { left: 7px; right: 8px; }
    .slide-media img { height: 230px; }
    .author-card { align-items: flex-start; }
    .author-avatar { width: 72px; height: 72px; }
    .carousel-arrow { width: 22px; }
    .carousel-arrow--prev { left: -4px; }
    .carousel-arrow--next { right: -4px; }
    .home-rows { gap: 24px; }
    .home-bottom { padding-bottom: 78px; }
    .newsletter-box { padding: 32px 32px 16px; }
    .newsletter-text { font-size: 15px; line-height: 19.5px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-input { flex: none; }
    .newsletter-button { flex: none; height: 46px; }
    .newsletter--inline { padding: 41px 0; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
    .newsletter--inline .newsletter-box { margin: 0 var(--gutter); }
    .footer-top { flex-direction: column; min-height: 0; }
    .footer-menu { order: 1; width: 100%; }
    .footer-social { order: 2; margin-top: 24px; }
    .footer-menu .nav { display: block; column-count: 2; column-gap: 24px; padding-top: 0; }
    .footer-menu li { break-inside: avoid; padding-bottom: 10.7px; }
    .footer-menu li:nth-child(5) { break-before: column; }
    .footer-menu a { white-space: normal; }
    .section-head { padding: 8px 0; }
    .section-title { font-size: 20px; line-height: 17px; padding-bottom: 4px; border-bottom-width: 4px; }
    .section-head-inner { justify-content: space-between; }
    .subnav { margin-top: 0; }
    .subnav-toggle { display: inline-flex; }
    .subnav-list { display: none; position: absolute; right: 0; top: 100%; z-index: 20; flex-direction: column; gap: 10px; min-width: 200px; padding: 16px; background: var(--color-white); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
    .subnav.is-open .subnav-list { display: flex; }
    .list-main, .list-container { margin-top: 32px; }
    .list-item { margin-bottom: 31px; padding-bottom: 24px; }
    .list-media { aspect-ratio: 3 / 2; }
    .list-title { margin-top: 24px; font-size: 22px; line-height: 28px; }
    .list-excerpt { font-size: 15px; line-height: 22.5px; }
    .list-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; height: auto; margin-top: 24px; }
    .share { position: static; margin-top: 0; }
    .list-pill { position: static; }
    .ad-slot { height: 600px; }
    .ad-slot--top { height: 100px; }
    .ad-slot + .newsletter--inline { margin-top: 31px; }
    .newsletter--inline { margin-bottom: 31px; }
    .article-title { font-size: 30px; }
    .article-tags { padding-right: 0; }
    .article-foot .share { position: static; margin-top: 16px; }
}

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

/* Premium details: members badge, author boxes, tables and code */
.card-media, .list-media { position: relative; }
.members-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-white); background: rgba(20, 20, 20, 0.88); }
.row-card-media .members-badge { top: 8px; left: 8px; padding: 4px 7px; font-size: 9.5px; }
.article-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.pill--members { display: inline-flex; align-items: center; gap: 6px; background: var(--color-ink); }
.author-box { display: flex; gap: 20px; align-items: flex-start; margin-top: 24px; padding: 24px 0 0; border-top: 1px solid var(--color-line); }
.author-box:first-of-type { margin-top: 0; }
.author-box-avatar { flex: none; display: block; width: 72px; height: 72px; overflow: hidden; border-radius: var(--radius-round); background: var(--color-panel); }
.author-box-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box-body { min-width: 0; }
.author-box-name { font-family: var(--font-heading); font-stretch: var(--heading-stretch); font-size: 18px; font-weight: 700; line-height: 1.25; }
.author-box-name a:hover { color: var(--color-accent); }
.author-box-loc { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); }
.author-box-bio { margin-top: 6px; font-family: var(--font-serif); font-size: 15px; line-height: 1.55; }
.author-box-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-accent); }
.author-box-link:hover { text-decoration: underline; }
.author-box-link .icon { width: 14px; height: 12px; }
.author-card { display: flex; align-items: center; gap: 24px; }
.author-avatar { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-round); background: var(--color-panel); }
.author-card-body p + p { margin-top: 6px; }
.author-meta { font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.gh-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; }
.gh-content th, .gh-content td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.gh-content th { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 2px solid var(--color-ink); }
.gh-content tbody tr:hover td { background: var(--color-panel); }
.gh-content pre { padding: 16px 20px; overflow-x: auto; font-size: 14px; line-height: 1.6; color: #eaeaea; background: var(--color-ink); border-radius: var(--radius-s); }
.gh-content :not(pre) > code { padding: 2px 6px; font-size: 0.85em; background: var(--color-panel); border-radius: var(--radius-s); }
.author-count { margin: -16px 0 32px; }