/*
 * GlideMission Blog - public site styles (blog.glidemission.africa).
 *
 * Mobile first: base rules target phones, min-width media queries add the larger layouts.
 * The look follows www.glidemission.africa (Lexend headings, gold hero, white header on scroll).
 * Text on gold uses the deeper golds below so every text colour pair meets WCAG AA; the bright
 * brand golds are kept for buttons with dark labels, accents and decoration.
 */

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

:root {
    --gold: #d0a000;
    --gold-dark: #b38f00;
    --gold-light: #ffe066;
    --gold-ink: #7a5c00;          /* gold text on white: 6.3:1 */
    --gold-ink-strong: #5c4500;
    --gold-tint: #fff8db;
    --on-gold: #1d1600;           /* labels on the bright golds */
    --ink: #1a202c;
    --text: #374151;
    --muted: #5f6673;             /* 5.4:1 on white and on --surface-alt */
    --line: #e5e7eb;
    --surface: #fff;
    --surface-alt: #f8f9fa;
    --focus: var(--gold-ink);

    /* Hero and CTA backgrounds: the main site's #hero-14 gradient and pattern, for one brand look.
       White text on this bright gold relies on weight, size and a soft shadow for legibility. */
    --gold-gradient: linear-gradient(90deg, #d0a000 0%, #d0a000 66%, #f6bb00 100%);
    --gold-pattern: url("../img/pattern-01.png");

    --font-heading: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 30px rgba(16, 24, 40, .07);
    --shadow-lg: 0 24px 60px rgba(16, 24, 40, .16);
    --ease: cubic-bezier(.165, .84, .44, 1);

    --header-h: 60px;
    --header-h-scrolled: 54px;
    --admin-bar-h: 0px;
}

.has-admin-bar {
    --admin-bar-h: 32px;
}

@media (min-width: 992px) {
    /* Desktop: a taller header around the larger logo. */
    :root {
        --header-h: 70px;
        --header-h-scrolled: 58px;
    }
}

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

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Anchored headings must not end up under the fixed header (and admin bar). */
    scroll-padding-top: 7rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

p,
ul,
ol,
figure,
blockquote,
pre {
    margin: 0;
}

img,
video,
svg,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

a {
    color: var(--gold-ink);
}

a:hover {
    color: var(--gold-ink-strong);
}

button,
input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

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

/* The skip link moves focus to <main tabindex="-1">: a ring around the whole page helps no one. */
#main:focus {
    outline: none;
}

/* Dark gold surfaces need a light focus ring. */
.page-hero,
.demo-cta-box,
.admin-bar,
.site-header:not(.is-scrolled):not(.is-open) {
    --focus: var(--gold-light);
}

.icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -.125em;
}

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

/* Makes a whole card clickable through its title link; other links in the card sit above it. */
.stretched-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.skip-link {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--gold-ink);
    font: 600 1rem/1.2 var(--font-heading);
    box-shadow: var(--shadow-lg);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* ---------------------------------------------------------------- Grid (the Bootstrap 5.3 classes the templates use) */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
        padding-inline: .75rem;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

.row {
    --gutter-x: 1.5rem;
    --gutter-y: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--gutter-y));
    margin-inline: calc(-.5 * var(--gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--gutter-y);
    padding-inline: calc(.5 * var(--gutter-x));
}

.g-4 {
    --gutter-x: 1.5rem;
    --gutter-y: 1.5rem;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media (min-width: 1200px) {
    .g-xl-5 {
        --gutter-x: 2.5rem;
        --gutter-y: 2.5rem;
    }
}

/* ---------------------------------------------------------------- Buttons */

.btn-gold,
.btn-light-gm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .65rem 1.35rem;
    border: 0;
    border-radius: var(--radius-sm);
    font: 600 1rem/1.2 var(--font-heading);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease);
}

.btn-gold {
    background: var(--gold);
    color: var(--on-gold);
    box-shadow: 0 4px 14px rgba(208, 160, 0, .28);
}

.btn-light-gm {
    background: var(--surface);
    color: var(--gold-ink);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}

.btn-gold:hover,
.btn-light-gm:hover {
    background: var(--gold-light);
    color: var(--on-gold);
    transform: translateY(-1px);
}

.btn-gold .icon,
.btn-light-gm .icon {
    transition: transform .2s var(--ease);
}

.btn-gold:hover .icon,
.btn-light-gm:hover .icon {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------- Admin bar (signed-in editors) */

.admin-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    height: var(--admin-bar-h);
    background: #111827;
    color: #e5e7eb;
    font: 500 .8rem/1 var(--font-heading);
}

.admin-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
}

.admin-bar-user {
    display: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-bar-user strong {
    color: #fff;
    font-weight: 600;
}

.admin-bar-links {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;
}

.admin-bar-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 0;
    color: #fff;
    text-decoration: none;
}

.admin-bar-links a:hover {
    color: var(--gold-light);
}

@media (min-width: 576px) {
    .admin-bar-user {
        display: block;
    }
}

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

.site-header {
    position: fixed;
    top: var(--admin-bar-h);
    right: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    height: var(--header-h);
    border-bottom: 1px solid transparent;
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), height .35s var(--ease);
}

.site-header.is-scrolled,
.site-header.is-open {
    height: var(--header-h-scrolled);
    border-bottom-color: rgba(229, 231, 235, .8);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-scrolled,
    .site-header.is-open {
        background: var(--surface);
    }
}

.site-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    text-decoration: none;
}

.brand-logo {
    width: auto;
    height: 28px;
}

@media (min-width: 992px) {
    .brand-logo {
        height: 34px;
    }
}

/* The white logo sits on the gold hero; the coloured one on the white (scrolled) header. */
.brand-logo-dark,
.is-scrolled .brand-logo-light,
.is-open .brand-logo-light {
    display: none;
}

.is-scrolled .brand-logo-dark,
.is-open .brand-logo-dark {
    display: block;
}

.brand-tag {
    padding: .3rem .6rem;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    color: #fff;
    font: 600 .72rem/1 var(--font-heading);
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .3s, background-color .3s, border-color .3s;
}

.is-scrolled .brand-tag,
.is-open .brand-tag {
    border-color: var(--gold);
    background: var(--gold-tint);
    color: var(--gold-ink);
}

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s var(--ease), opacity .2s, background-color .3s;
}

.is-scrolled .nav-toggle-bar,
.is-open .nav-toggle-bar {
    background: var(--ink);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(4) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Phones and tablets: the menu is a panel under the header, opened by the toggle (blog.js). */
.site-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    display: none;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.is-open .site-menu {
    display: block;
    animation: menu-in .25s var(--ease);
}

/* Without JavaScript the toggle still opens the menu while it (or a menu link) has focus. */
html:not(.js) .site-nav:focus-within .site-menu {
    display: block;
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.nav-list {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link-gm {
    display: block;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    font: 600 1.05rem/1.2 var(--font-heading);
    text-decoration: none;
}

.nav-link-gm:hover,
.nav-link-gm.is-active {
    background: var(--surface-alt);
    color: var(--gold-ink);
}

.header-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: .75rem;
    padding: .6rem 1.4rem;
    border: 2px solid var(--gold);
    border-radius: var(--radius-sm);
    background: var(--gold);
    color: var(--on-gold);
    font: 700 .95rem/1.2 var(--font-heading);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}

.header-cta:hover {
    border-color: var(--gold-light);
    background: var(--gold-light);
    color: var(--on-gold);
}

@media (min-width: 992px) {
    .nav-toggle {
        display: none;
    }

    .site-menu,
    .is-open .site-menu {
        position: static;
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        animation: none;
    }

    .nav-list {
        display: flex;
        gap: 2rem;
    }

    .nav-link-gm {
        position: relative;
        padding: .5rem 0;
        border-radius: 0;
        color: #fff;
        font-size: .98rem;
    }

    .nav-link-gm:hover,
    .nav-link-gm.is-active {
        background: none;
        color: #fff;
    }

    .nav-link-gm::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        border-radius: 2px;
        background: var(--gold-light);
        transform: scaleX(0);
        transition: transform .3s var(--ease);
    }

    .nav-link-gm:hover::after,
    .nav-link-gm.is-active::after {
        transform: scaleX(1);
    }

    .is-scrolled .nav-link-gm {
        color: #4a5568;
    }

    .is-scrolled .nav-link-gm:hover,
    .is-scrolled .nav-link-gm.is-active {
        color: var(--gold-ink);
    }

    .is-scrolled .nav-link-gm::after {
        background: var(--gold);
    }

    .header-cta {
        margin-top: 0;
        border-color: #fff;
        background: transparent;
        color: #fff;
    }

    .header-cta:hover {
        border-color: #fff;
        background: #fff;
        color: var(--gold-ink);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
        transform: translateY(-2px);
    }

    .is-scrolled .header-cta {
        border-color: var(--gold-dark);
        color: var(--gold-ink);
    }

    .is-scrolled .header-cta:hover {
        border-color: var(--gold);
        background: var(--gold);
        color: var(--on-gold);
    }
}

/* ---------------------------------------------------------------- Hero */

.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: calc(var(--admin-bar-h) + var(--header-h) + 1.5rem) 0 1.75rem;
    background: var(--gold-gradient);
    color: #fff;
}

.page-hero::before,
.demo-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--gold-pattern);
    opacity: .4;
    pointer-events: none;
}

.page-hero h1,
.page-hero h2,
.page-hero p,
.demo-cta-box h2,
.demo-cta-box p {
    text-shadow: 0 1px 2px rgba(61, 46, 0, .25);
}

.page-hero h1,
.page-hero h2,
.page-hero p {
    color: #fff;
}

.hero-home,
.hero-search {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    font: 600 .8rem/1.2 var(--font-heading);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hero-eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-light);
}

.hero-eyebrow .icon {
    color: var(--gold-light);
}

.hero-title {
    margin-bottom: .5rem;
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    text-wrap: balance;
}

.hero-lead {
    max-width: 34rem;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    line-height: 1.6;
}

.hero-home .hero-lead,
.hero-search .hero-lead {
    margin-inline: auto;
}

.hero-count {
    font: 500 .95rem/1.4 var(--font-heading);
}

.page-hero-home {
    padding-bottom: 2rem;
}

.page-hero-compact .hero-lead:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .page-hero {
        padding-top: calc(var(--admin-bar-h) + var(--header-h) + 2rem);
        padding-bottom: 2.25rem;
    }

    .page-hero-home {
        padding-bottom: 2.5rem;
    }
}

/* ---------------------------------------------------------------- Breadcrumbs */

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font: 500 .875rem/1.4 var(--font-heading);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: .5rem;
    opacity: .75;
}

.breadcrumbs a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .5);
    text-underline-offset: 3px;
}

.breadcrumbs a:hover {
    color: #fff;
    text-decoration-color: #fff;
}

/* ---------------------------------------------------------------- Search form */

.search-form {
    display: flex;
    align-items: center;
    gap: .25rem;
    max-width: 30rem;
    margin: 0 auto 1rem;
    padding: .25rem;
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

/* The input has no ring of its own: the whole box shows focus. */
.search-form:focus-within {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.search-form-icon {
    display: flex;
    padding-left: .65rem;
    color: var(--muted);
    font-size: 1.15rem;
}

.search-form-input {
    flex: 1;
    min-width: 0;
    padding: .45rem .5rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: .95rem;
}

.search-form-input:focus {
    outline: none;
}

.search-form-input::placeholder {
    color: var(--muted);
    opacity: 1;
}

.search-form-button {
    padding-inline: 1.1rem;
    box-shadow: none;
}

/* ---------------------------------------------------------------- Chips (categories) */

.chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-home .chips-list {
    justify-content: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: .4rem .5rem .4rem .95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: 500 .9rem/1.2 var(--font-heading);
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.chip-count {
    min-width: 1.6rem;
    padding: .2rem .45rem;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}

.chip:hover {
    border-color: var(--gold);
    background: var(--gold-tint);
    color: var(--gold-ink);
}

.chip[aria-current="page"] {
    border-color: var(--gold-ink);
    background: var(--gold-ink);
    color: #fff;
}

.chip[aria-current="page"] .chip-count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.page-hero .chip {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.page-hero .chip-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.page-hero .chip:hover {
    border-color: #fff;
    background: #fff;
    color: var(--gold-ink);
}

.page-hero .chip:hover .chip-count {
    background: var(--gold-tint);
    color: var(--gold-ink);
}

/* ---------------------------------------------------------------- Sections */

.section {
    padding: 2.25rem 0;
}

.section-tinted {
    background: var(--surface-alt);
}

.layout-section {
    padding-top: 2rem;
}

.layout-note {
    color: var(--muted);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1.1rem;
}

.section-title {
    margin-bottom: 1rem;
    font-size: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
    letter-spacing: -.01em;
}

.section-head .section-title {
    margin-bottom: 0;
}

.section-title-sm {
    margin-bottom: .75rem;
    font-size: 1.05rem;
}

.link-arrow {
    font: 600 .95rem/1.4 var(--font-heading);
    text-decoration: none;
}

.link-arrow::after {
    content: " \2192";
}

.link-arrow:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.explore {
    margin-top: 3rem;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}

.empty-state-title {
    color: var(--ink);
    font: 600 1.25rem/1.3 var(--font-heading);
}

.empty-state .btn-gold {
    margin-top: .5rem;
}

/* ---------------------------------------------------------------- Post cards */

.badge-category {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--gold-tint);
    color: var(--gold-ink);
    font: 600 .75rem/1.3 var(--font-heading);
    letter-spacing: .02em;
    text-decoration: none;
}

.badge-category:hover {
    background: var(--gold-light);
    color: var(--on-gold);
}

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.post-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.post-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--gold-tint);
}

.post-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.post-card:hover .post-card-media img {
    transform: scale(1.04);
}

/* Posts without a cover get a quiet branded panel instead of an empty box. */
.media-placeholder {
    width: 100%;
    height: 100%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M4 84 28 42l24 42ZM52 46 76 4l24 42' fill='none' stroke='%23b38f00' stroke-opacity='.22' stroke-width='2'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #fff8db 0%, #fde9a6 100%);
}

.post-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: 1rem 1.1rem 1.15rem;
}

/* The card titles stretch across their column flex bodies: sized to their content, a long
   unbreakable word (an e-mail address, a hashtag) would widen them past the card, which clips
   it, instead of wrapping. */
.post-card-title {
    align-self: stretch;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.post-card-title a,
.featured-title a {
    color: var(--ink);
    text-decoration: none;
}

.post-card-title a:hover,
.featured-title a:hover {
    color: var(--gold-ink);
}

.post-card-summary {
    color: var(--text);
    font-size: .95rem;
}

.post-card .post-meta {
    margin-top: auto;
}

/* Keyboard users see the whole card outlined rather than just the title. */
@supports selector(:has(*)) {
    .post-card:has(.stretched-link:focus-visible) {
        outline: 3px solid var(--focus);
        outline-offset: 3px;
    }

    .post-card .stretched-link:focus-visible {
        outline: none;
    }
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: var(--muted);
    font: 400 .85rem/1.5 var(--font-heading);
}

.post-meta > * + *::before {
    content: "\00B7";
    margin-inline: .45rem;
}

/* ---------------------------------------------------------------- Featured post (home lead row) */

/* Home: the featured post leads the page beside the most-read list. */
.lead {
    padding-top: 1.75rem;
}

.lead-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: box-shadow .3s var(--ease);
}

.lead-card:hover {
    box-shadow: var(--shadow-lg);
}

.lead-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--gold-tint);
}

.lead-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.lead-card:hover .lead-media img {
    transform: scale(1.03);
}

.lead-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: 1.25rem 1.5rem 1.4rem;
}

.lead-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
}

.featured-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--gold-ink);
    font: 700 .78rem/1.2 var(--font-heading);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.featured-title {
    align-self: stretch;
    font-size: clamp(1.3rem, 1.12rem + .75vw, 1.75rem);
    letter-spacing: -.01em;
    line-height: 1.2;
}

.featured-summary {
    color: var(--text);
    font-size: .975rem;
}

@media (min-width: 992px) {
    /* Side by side with the most-read list, the lead image stays at a sensible height. */
    .lead .col-lg-8 .lead-media {
        aspect-ratio: auto;
        height: 19rem;
    }
}

/* ---------------------------------------------------------------- Tag cloud */

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 36px;
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: 500 .875rem/1.2 var(--font-heading);
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.tag-link .icon {
    color: var(--gold-ink);
}

.tag-link:hover {
    border-color: var(--gold);
    background: var(--gold-tint);
    color: var(--gold-ink);
}

/* ---------------------------------------------------------------- Sidebar and widgets */

/* The home posts grid and the article sit beside a sidebar; widgets are white cards with a gold title rule. */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* The post sidebar follows the article, but never runs past the viewport: a sidebar taller than
   the window scrolls inside itself, or its lower widgets would stay out of view for the whole
   article. The padding, cancelled by the negative margin (within the column gutter), leaves room
   for the widget shadows that the overflow would otherwise clip. */
@media (min-width: 992px) {
    .sidebar-sticky {
        position: sticky;
        top: calc(var(--admin-bar-h) + var(--header-h-scrolled) + .5rem);
        max-height: calc(100vh - var(--admin-bar-h) - var(--header-h-scrolled) - 1rem);
        margin: -.75rem;
        padding: .75rem;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

.widget {
    padding: 1.1rem 1.25rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.widget-fill {
    height: 100%;
}

.widget-title {
    position: relative;
    margin: 0 0 .5rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font: 600 .78rem/1.2 var(--font-heading);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.widget-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background: var(--gold);
}

.post-mini {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .7rem 0;
}

.post-mini + .post-mini {
    border-top: 1px solid var(--line);
}

.post-mini-media {
    flex: 0 0 5.25rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: var(--gold-tint);
}

.post-mini-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-mini-rank {
    display: grid;
    flex: 0 0 2rem;
    place-items: center;
    height: 2rem;
    border-radius: 8px;
    background: var(--gold-tint);
    color: var(--gold-ink);
    font: 700 .9rem/1 var(--font-heading);
}

.post-mini-body {
    min-width: 0;
}

.post-mini-title {
    margin: 0 0 .25rem;
    font: 600 .95rem/1.35 var(--font-heading);
}

.post-mini-title a {
    color: var(--ink);
    text-decoration: none;
}

.post-mini:hover .post-mini-title a {
    color: var(--gold-ink);
}

.post-mini-meta {
    margin: 0;
    color: var(--muted);
    font-size: .8rem;
}

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

.topic-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--line);
    color: var(--text);
    font-size: .925rem;
    text-decoration: none;
}

.topic-list li:last-child a {
    border-bottom: 0;
}

.topic-list a:hover,
.topic-list a[aria-current="page"] {
    color: var(--gold-ink);
}

.topic-count {
    min-width: 1.75rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--muted);
    font: 600 .75rem/1.2 var(--font-heading);
    text-align: center;
}

.widget .tag-cloud {
    margin-top: .75rem;
}

/* The demo card: the main site's gold with its pattern. */
.widget-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    background: var(--gold-gradient);
    color: #fff;
}

.widget-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: var(--gold-pattern);
    opacity: .35;
}

.widget-cta .widget-title {
    border-bottom-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.widget-cta .widget-title::after {
    background: #fff;
}

.widget-cta-lead {
    margin: .75rem 0 .6rem;
    color: #fff;
    font: 600 1.05rem/1.4 var(--font-heading);
    text-shadow: 0 1px 2px rgba(61, 46, 0, .25);
}

.widget-cta-points {
    display: grid;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    text-shadow: 0 1px 2px rgba(61, 46, 0, .25);
}

.widget-cta-points li {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.widget-cta-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1rem;
    border-radius: 10px;
    background: #fff;
    color: var(--gold-ink);
    font: 600 .9rem/1.2 var(--font-heading);
    text-decoration: none;
    transition: background-color .2s var(--ease);
}

.widget-cta-button:hover {
    background: var(--gold-tint);
    color: var(--gold-ink-strong);
}

/* ---------------------------------------------------------------- Pagination */

.pager {
    margin-top: 3rem;
}

.pager-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pager-number,
.pager-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 44px;
    height: 44px;
    padding: 0 .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    font: 600 .95rem/1 var(--font-heading);
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.pager-number:hover,
.pager-step:hover {
    border-color: var(--gold);
    background: var(--gold-tint);
    color: var(--gold-ink);
}

.pager-number[aria-current="page"] {
    border-color: var(--gold-ink);
    background: var(--gold-ink);
    color: #fff;
}

.pager-gap {
    padding: 0 .25rem;
    color: var(--muted);
}

/* Phones: arrows only, so a long pager still fits on one line. */
@media (max-width: 575.98px) {
    .pager-step {
        padding: 0;
    }

    .pager-step span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------- Post page */

.post-hero-inner {
    max-width: 54rem;
}

.post-title {
    margin-bottom: .6rem;
    font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.35rem);
    letter-spacing: -.02em;
    line-height: 1.15;
    text-wrap: balance;
}

.post-lead {
    max-width: 42rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

.post-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
    margin-top: 1rem;
    font: 500 .925rem/1.4 var(--font-heading);
}

.post-byline-author {
    font-weight: 600;
}

.post-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-facts li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.post-facts .icon {
    color: var(--gold-light);
}

.avatar {
    flex: none;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--on-gold);
    font-family: var(--font-heading);
    font-weight: 700;
}

.avatar-sm {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .75);
    font-size: .85rem;
}

.avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 1.4rem;
}

.preview-banner {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 42rem;
    margin: 0 auto 1.5rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--gold-light);
    border-left: 5px solid var(--gold);
    border-radius: 12px;
    background: var(--gold-tint);
    font-size: .95rem;
    line-height: 1.5;
    text-align: left;
}

.page-hero .preview-banner,
.page-hero .preview-banner strong {
    color: #3d2e00;
}

.preview-banner .icon {
    margin-top: .15rem;
    color: var(--gold-ink);
    font-size: 1.2rem;
}

.post-layout {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.post-main {
    min-width: 0;
}

.article-cover {
    margin: 0 0 1.75rem;
    overflow: hidden;
    border-radius: 14px;
    background: var(--gold-tint);
    box-shadow: var(--shadow);
}

.article-cover img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 30rem;
    object-fit: cover;
}

/* ---------------------------------------------------------------- Article content (docs/API.md "Content HTML contract") */

.prose {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.prose > * {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose h2,
.prose h3,
.prose h4 {
    color: var(--ink);
    letter-spacing: -.01em;
}

.prose h2 {
    margin: 2.1em 0 .7em;
    font-size: 1.6em;
    line-height: 1.25;
}

.prose h3 {
    margin: 1.8em 0 .6em;
    font-size: 1.3em;
    line-height: 1.3;
}

.prose h4 {
    margin: 1.6em 0 .5em;
    font-size: 1.1em;
    line-height: 1.35;
}

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

.prose a {
    color: var(--gold-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.prose a:hover {
    color: var(--gold-ink-strong);
    text-decoration-thickness: 2px;
}

.prose strong,
.prose b {
    color: var(--ink);
    font-weight: 700;
}

.prose mark {
    padding: 0 .15em;
    border-radius: 3px;
    background: var(--gold-light);
    color: var(--ink);
}

.prose sub,
.prose sup {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline;
}

.prose sup {
    top: -.5em;
}

.prose sub {
    bottom: -.25em;
}

.prose ul,
.prose ol {
    padding-left: 1.5em;
}

.prose li {
    margin: .4em 0;
    padding-left: .25em;
}

.prose li > ul,
.prose li > ol {
    margin: .4em 0;
}

.prose ul > li::marker {
    color: var(--gold-dark);
}

.prose ol > li::marker {
    color: var(--gold-ink);
    font-family: var(--font-heading);
    font-weight: 600;
}

.prose blockquote {
    margin: 1.75em 0;
    padding: 1.1rem 1.25rem 1.1rem 1.5rem;
    border-left: 4px solid var(--gold);
    border-radius: 0 12px 12px 0;
    background: var(--gold-tint);
    color: var(--ink);
    font-size: 1.08em;
}

.prose blockquote > :last-child {
    margin-bottom: 0;
}

.prose blockquote p + p {
    margin-top: .75em;
}

.prose code {
    padding: .12em .38em;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-alt);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .875em;
}

.prose pre {
    overflow-x: auto;
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: #1f2430;
    color: #e6e8ee;
    font-size: .9rem;
    line-height: 1.65;
    tab-size: 4;
}

.prose pre code {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.prose hr {
    width: 6rem;
    height: 3px;
    margin: 2.75em auto;
    border: 0;
    border-radius: 3px;
    background: var(--gold);
}

.prose img,
.prose video {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    border-radius: 12px;
}

.prose video {
    width: 100%;
    background: #000;
}

.prose figure {
    margin: 2em 0;
}

.prose figure > img,
.prose figure > video,
.prose figure > [data-youtube-video] {
    margin: 0 auto;
}

.prose figcaption {
    margin-top: .65rem;
    color: var(--muted);
    font-size: .875rem;
    line-height: 1.5;
    text-align: center;
}

/* 16:9 video embeds (YouTube / Vimeo iframes). */
.prose [data-youtube-video] {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin: 2em 0;
    border-radius: 12px;
    background: #000;
}

.prose [data-youtube-video] iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Wide tables scroll sideways inside their own region (PostContent::forDisplay adds it). */
.table-scroll {
    overflow-x: auto;
    margin: 1.75em 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.5;
}

.prose th,
.prose td {
    min-width: 8rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.prose th {
    background: var(--gold-tint);
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 600;
}

.prose thead th {
    border-bottom: 2px solid var(--gold);
}

.prose tbody tr:nth-child(even) td {
    background: #fcfcfd;
}

.prose tr:last-child > td {
    border-bottom: 0;
}

@media (min-width: 768px) {
    .prose {
        font-size: 1.125rem;
    }
}

/* ---------------------------------------------------------------- Tags, sharing, author */

.post-tags {
    margin-top: 2rem;
}

.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.share-title {
    font-size: 1rem;
    font-weight: 600;
}

.share-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--gold-ink);
    font: 600 .875rem/1 var(--font-heading);
    text-decoration: none;
    transition: background-color .2s, border-color .2s, color .2s;
}

.share-btn .icon {
    font-size: 1.15rem;
}

.share-btn:hover {
    border-color: var(--gold-ink);
    background: var(--gold-ink);
    color: #fff;
}

.share-copy {
    padding: 0 1rem;
}

.share-copy.is-copied,
.share-copy.is-copied:hover {
    border-color: #12b76a;
    background: #ecfdf3;
    color: #05603a;
}

.author-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.author-eyebrow {
    margin-bottom: .2rem;
    color: var(--muted);
    font: 600 .75rem/1.3 var(--font-heading);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.author-name {
    font-size: 1.25rem;
}

.author-bio {
    margin-top: .5rem;
    color: var(--text);
}

/* ---------------------------------------------------------------- Previous / next */

.post-nav {
    padding-bottom: 2.5rem;
}

.post-nav-grid {
    display: grid;
    gap: 1rem;
}

.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: border-color .2s, box-shadow .2s;
}

.post-nav-link:hover {
    border-color: var(--gold);
    box-shadow: var(--shadow);
}

.post-nav-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted);
    font: 600 .78rem/1.2 var(--font-heading);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.post-nav-title {
    color: var(--ink);
    font: 600 1.05rem/1.4 var(--font-heading);
}

.post-nav-link:hover .post-nav-title {
    color: var(--gold-ink);
}

@media (min-width: 768px) {
    .post-nav-grid {
        grid-template-columns: 1fr 1fr;
    }

    .post-nav-newer {
        grid-column: 2;
        align-items: flex-end;
        text-align: right;
    }
}

/* ---------------------------------------------------------------- Call to action */

.demo-cta {
    padding: 2.25rem 0;
}

.demo-cta-box {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--gold-gradient);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.demo-cta-title {
    margin-bottom: .5rem;
    color: #fff;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.65rem);
    letter-spacing: -.01em;
}

.demo-cta-text p {
    max-width: 38rem;
    font-size: 1.05rem;
}

@media (min-width: 992px) {
    .demo-cta {
        padding: 2.75rem 0;
    }

    .demo-cta-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.5rem;
        padding: 1.75rem 2.5rem;
    }
}

/* ---------------------------------------------------------------- Error pages */

.debug-details {
    overflow-x: auto;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    background: #1f2430;
    color: #e6e8ee;
    font: .85rem/1.6 var(--font-mono);
    white-space: pre-wrap;
}

/* ---------------------------------------------------------------- Footer */

.site-footer {
    padding: 3.5rem 0 1.5rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
    font-size: .95rem;
}

.footer-brand {
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-brand img {
    display: block;
    width: auto;
    height: 36px;
}

.footer-about {
    max-width: 22rem;
    color: var(--muted);
}

.footer-title {
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li + li {
    margin-top: .65rem;
}

.footer-links a {
    color: #4b5563;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--gold-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    color: #4b5563;
}

.footer-contact a {
    display: inline-flex;
    align-items: flex-start;
    gap: .6rem;
}

.footer-links .icon {
    margin-top: .2rem;
    color: var(--gold-ink);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .875rem;
    text-align: center;
}

.footer-heart {
    color: var(--gold);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------- Motion and print */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .post-card:hover,
    .btn-gold:hover,
    .btn-light-gm:hover,
    .header-cta:hover,
    .post-card:hover .post-card-media img {
        transform: none;
    }
}

@media print {
    .admin-bar,
    .site-header,
    .search-form,
    .share,
    .post-nav,
    .demo-cta,
    .site-footer,
    .skip-link {
        display: none !important;
    }

    .page-hero {
        padding: 0 0 1rem;
        background: none;
        color: #000;
    }

    .page-hero::before {
        display: none;
    }

    .page-hero h1,
    .page-hero p,
    .breadcrumbs a {
        color: #000;
    }

    .prose a::after {
        content: " (" attr(href) ")";
        font-size: .85em;
    }
}