/* =========================================================
   Brewed Faith — Ghost theme
   Palette + type lifted from the AEMC reference design.
   ========================================================= */

:root {
    /* Core palette */
    --navy:        #0B3760;
    --navy-lift:   #2364A0;
    --navy-deep:   #072741;
    --gold:        #B08D57;
    --gold-lift:   #C79E63;

    /* Neutrals */
    --white:       #FFFFFF;
    --tint:        #FAFBFC;
    --tint-deep:   #F4F5F6;
    --line:        #E8E9EB;
    --line-soft:   #C7D2DE;

    /* Text */
    --ink:         #2B3540;
    --body:        #3A4654;
    --muted:       #4A5663;
    --muted-light: #9FB1C4;

    /* Type — --gh-font-* let Ghost admin's font picker override the defaults */
    --font-display: var(--gh-font-heading, 'Instrument Serif', Georgia, 'Times New Roman', serif);
    --font-body:    var(--gh-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

    /* Metrics */
    --radius:      14px;
    --radius-lg:   18px;
    --pill:        999px;
    --header-h:    82px;
    --shadow:      0 14px 34px rgba(11, 55, 96, 0.12);
    --shadow-lift: 0 22px 48px rgba(11, 55, 96, 0.16);
    --shadow-soft: 0 4px 18px rgba(11, 55, 96, 0.06);

    /* Motion — one vocabulary, used everywhere.
       ease   = settle, for colour and small moves
       glide  = expo-out, for reveals and long image moves */
    --ease:      cubic-bezier(0.33, 0.9, 0.36, 1);
    --glide:     cubic-bezier(0.16, 1, 0.30, 1);
    --dur-fast:  180ms;
    --dur:       340ms;
    --dur-slow:  720ms;
    --dur-image: 900ms;
}

/* ---------- Reset ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
    margin: 0;
    background: var(--white);
    color: var(--body);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, iframe, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--navy-lift); text-decoration: none; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

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

/* ---------- Layout primitives ---------- */

.wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}

.wrap-narrow { max-width: 800px; }
.center { text-align: center; }

.band { padding: clamp(70px, 9vw, 120px) 0; }
.band-white { background: var(--white); }
.band-tint  { background: var(--tint-deep); }
.band-navy  { background: var(--navy); }

.section-head {
    margin-bottom: clamp(36px, 4.5vw, 56px);
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line-soft);
}
.section-head.center { border-bottom: 0; padding-bottom: 0; }
.section-head .display { margin: 0; }

/* ---------- Type scale ---------- */

.display {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--navy);
    letter-spacing: -0.005em;
    text-wrap: balance;
}

.display-xl {
    font-size: clamp(44px, 5.4vw, 82px);
    line-height: 1.02;
}

.display-lg {
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
}

.display-md {
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.15;
}

.display-light { color: var(--white); }

.eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 18px;
}

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

.lede {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--muted);
    max-width: 62ch;
}

.lede-light { color: rgba(255, 255, 255, 0.78); }
.center .lede { margin-left: auto; margin-right: auto; }

.dot { color: var(--line-soft); margin: 0 8px; }

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

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 16px 34px;
    border-radius: var(--pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    /* Colour only. A button is a control, not something to look at. */
    transition: background-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease);
}

.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-lift); color: var(--white); }

.btn-gold { background: var(--gold); color: var(--white); }
.btn-gold:hover { background: var(--gold-lift); color: var(--white); }

.btn-outline {
    background: transparent;
    color: var(--navy);
    border-color: var(--line-soft);
}
.btn-outline:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--white);
}

.btn.is-disabled {
    opacity: 0.3;
    pointer-events: none;
}

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

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--header-h);
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: 0 1px 14px rgba(11, 55, 96, 0.05);
}

.site-header-inner {
    max-width: 1240px;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-brand { display: flex; align-items: center; gap: 12px; }

.site-brand-logo { width: auto; max-height: 46px; }
.site-brand.logo-sm .site-brand-logo { max-height: 34px; }
.site-brand.logo-md .site-brand-logo { max-height: 46px; }
.site-brand.logo-lg .site-brand-logo { max-height: 60px; }

.site-brand-mark {
    font-family: var(--font-display);
    font-size: 27px;
    line-height: 1;
    color: var(--navy);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.site-nav { display: flex; align-items: center; gap: 34px; }

.site-nav-list {
    display: flex;
    align-items: center;
    gap: 34px;
}

.site-nav-list .nav-link {
    position: relative;
    display: inline-block;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--muted);
    transition: color var(--dur-fast) var(--ease);
}
.site-nav-list .nav-link:hover { color: var(--navy); }
.site-nav-list .nav-link.is-current { color: var(--navy); font-weight: 600; }

/* Static gold rule marks the current page — a signpost, not an effect */
.site-nav-list .nav-link.is-current::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -7px;
    height: 1.5px;
    background: var(--gold);
}

.site-nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: var(--pill);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}
.site-search:hover { color: var(--navy); }
.site-search svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Icon alone on desktop; the word appears in the mobile drawer */
.site-search-label { display: none; }

.site-nav-cta { padding: 12px 26px; font-size: 15px; }

.site-nav-toggle {
    display: none;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.site-nav-toggle span {
    display: block;
    height: 2px;
    width: 22px;
    margin: 0 auto;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.site-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-main { padding-top: var(--header-h); }

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

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100dvh - var(--header-h));
    background: var(--tint-deep);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(60px, 8vw, 110px) clamp(32px, 5vw, 90px);
}

.hero-title {
    white-space: pre-line;   /* honours line breaks typed into the setting */
    margin: 0 0 26px;
}

.hero-lede {
    font-size: 18px;
    line-height: 1.72;
    color: var(--muted);
    max-width: 46ch;
    margin: 0 0 34px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions-center { justify-content: center; }

/* Centered hero variant */
.hero-centered {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: clamp(70px, 9vw, 130px) 0;
}
.hero-centered .hero-copy {
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}
.hero-centered .hero-lede { margin-left: auto; margin-right: auto; }
.hero-centered .hero-actions { justify-content: center; }

/* Scrolling image marquee */
.hero-marquee {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 18px 18px 18px 0;
    overflow: hidden;
}

.hero-col {
    position: relative;
    overflow: hidden;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,0.35) 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,0.35) 84%, transparent 100%);
}

.hero-track {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    animation: brewedScrollUp 60s linear infinite;
    will-change: transform;
}

.hero-track > img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 18px;
}

.hero-track-b {
    animation-duration: 74s;
    animation-direction: reverse;
}

.hero-marquee:hover .hero-track { animation-play-state: paused; }

@keyframes brewedScrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* ---------- Masthead ---------- */

.masthead {
    background: var(--tint-deep);
    padding: clamp(56px, 7vw, 92px) 0 clamp(52px, 6vw, 80px);
}

.masthead-title { margin: 0 0 14px; }

.masthead-tagline {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0;
}

.masthead-intro {
    font-size: 17.5px;
    line-height: 1.72;
    color: var(--muted);
    max-width: 56ch;
    margin: 22px auto 0;
}

.masthead-cta { margin-top: 30px; }

/* ---------- Lead story ---------- */

.lead {
    background: var(--white);
    padding: clamp(56px, 7vw, 96px) 0;
}

.lead-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(36px, 5vw, 68px);
    align-items: center;
}

.lead-grid-noimage {
    grid-template-columns: 1fr;
    max-width: 800px;
}

.lead-title { margin: 0 0 20px; }
.lead-title a { color: var(--navy); }
.lead-title a:hover { color: var(--navy-lift); }

.lead-excerpt {
    font-size: 18px;
    line-height: 1.72;
    color: var(--muted);
    max-width: 52ch;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.lead-meta {
    font-size: 14.5px;
    color: var(--muted-light);
    margin: 0 0 28px;
}

.lead-media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.lead-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--dur-image) var(--glide);
}
.lead-media:hover img { transform: scale(1.045); }

/* ---------- Post grid + cards ---------- */

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The card lifts fast, the photo drifts slowly — the difference in
   duration is what keeps it feeling composed instead of springy. */
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: transparent;
}

.post-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.post-card-media { overflow: hidden; }

.post-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform var(--dur-image) var(--glide);
}
.post-card:hover .post-card-image { transform: scale(1.055); }

.post-card-title { transition: color var(--dur-fast) var(--ease); }
.post-card:hover .post-card-title { color: var(--navy-lift); }

.post-card-body {
    padding: 28px 28px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-card-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 0 12px;
}

/* Clamped to whole lines: the ellipsis lands at the end of line 3,
   never mid-word. Feed it more words than fit so the clamp does the cutting. */
.post-card-excerpt {
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--muted);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.post-card-meta {
    font-size: 13.5px;
    color: var(--muted-light);
    margin: auto 0 0;
}

.post-card-noimage .post-card-body { padding-top: 34px; }

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

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: clamp(48px, 6vw, 72px);
}

.pagination-count {
    font-size: 14px;
    color: var(--muted-light);
    letter-spacing: 0.3px;
}

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

.post-hero { padding: clamp(56px, 7vw, 90px) 0 0; }

.post-title { margin: 0 0 22px; }

.post-lede {
    font-size: 19px;
    line-height: 1.7;
    color: var(--muted);
    max-width: 60ch;
    margin: 0 auto 30px;
}

.post-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14.5px;
    color: var(--muted-light);
}

.post-feature {
    max-width: 1140px;
    margin: clamp(44px, 5vw, 68px) auto 0;
    padding: 0 40px;
}

.post-feature img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.post-feature figcaption {
    margin-top: 14px;
    text-align: center;
    font-size: 14px;
    color: var(--muted-light);
}

/* Bottom padding lives here rather than on whatever follows, so the article
   always has room to breathe whether or not a related-posts band comes next. */
.post-content {
    padding: clamp(48px, 6vw, 72px) 0 clamp(60px, 7.5vw, 96px);
    font-size: 18.5px;
    line-height: 1.82;
    color: var(--body);
}

.post-content > * + * { margin-top: 1.5em; }

.post-content h2,
.post-content h3,
.post-content h4 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--navy);
    line-height: 1.2;
    margin-top: 1.9em;
    margin-bottom: 0.5em;
}
.post-content h2 { font-size: 36px; }
.post-content h3 { font-size: 28px; }
.post-content h4 { font-size: 22px; font-family: var(--font-body); font-weight: 600; }

.post-content a { color: var(--navy-lift); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--navy); }

.post-content img,
.post-content video { border-radius: var(--radius); }

.post-content blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 28px;
    border-left: 3px solid var(--gold);
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.45;
    color: var(--navy);
}

.post-content ul,
.post-content ol { padding-left: 1.3em; }
.post-content li + li { margin-top: 0.5em; }

.post-content hr {
    border: 0;
    height: 1px;
    background: var(--line);
    margin: 2.6em 0;
}

.post-content code {
    background: var(--tint-deep);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 0.88em;
}

.post-content pre {
    background: var(--navy-deep);
    color: #E6EDF5;
    padding: 22px 24px;
    border-radius: var(--radius);
    overflow-x: auto;
    font-size: 15px;
    line-height: 1.6;
}
.post-content pre code { background: none; border: 0; padding: 0; color: inherit; }

.post-content figcaption {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--muted-light);
}

/* Ghost Koenig wide / full-width cards */
.post-content .kg-width-wide {
    width: 100vw;
    max-width: 1140px;
    margin-left: 50%;
    transform: translateX(-50%);
}
.post-content .kg-width-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}
.post-content .kg-width-full img { border-radius: 0; }

/* Tags */

/* ---------- Archive heroes ---------- */

.archive-hero {
    background: var(--tint-deep);
    padding: clamp(70px, 9vw, 120px) 0;
}

.archive-avatar {
    width: 92px; height: 92px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 26px;
}

.archive-lede { margin: 22px auto 0; text-align: center; }

.archive-count {
    margin-top: 22px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted-light);
}

.error-page .hero-actions { margin-top: 34px; }

/* ---------- Archive page ---------- */

/* Count line doubles as the grid's header rule, matching .section-head */
.archive-total {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted-light);
    margin: 0 0 clamp(28px, 3.5vw, 40px);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
}

/* ---------- Subscribe band ---------- */

.subscribe-band {
    background: var(--tint);
    border-top: 1px solid var(--line);
    padding: clamp(70px, 9vw, 115px) 0;
}

.subscribe-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.subscribe-input {
    flex: 1 1 320px;
    max-width: 400px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--line-soft);
    border-radius: var(--pill);
    padding: 15px 24px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.subscribe-input:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 4px rgba(35, 100, 160, 0.12);
}

.subscribe-message {
    flex-basis: 100%;
    display: none;
    margin: 6px 0 0;
    font-size: 15px;
}
.subscribe-success { color: #1F7A54; }
.subscribe-error   { color: #B3322C; }

form[data-members-form].success .subscribe-success { display: block; }
form[data-members-form].error   .subscribe-error   { display: block; }

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

.site-footer {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.72);
    padding: clamp(40px, 4.5vw, 56px) 0 0;
}

/* Compact centred stack — a sign-off, not a second homepage */
.site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(28px, 3.5vw, 40px);
}

.site-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.site-footer-logo { max-height: 48px; width: auto; }
.site-footer-logo.is-inverted { filter: brightness(0) invert(1); }

.site-footer-wordmark {
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 32px);
    line-height: 1.1;
    color: var(--white);
}

.site-footer-tagline {
    white-space: pre-line;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-lift);
    margin: 12px 0 0;
}

.site-footer-rule {
    display: block;
    width: 44px;
    height: 2px;
    background: var(--gold);
    margin: clamp(20px, 2.5vw, 26px) 0;
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 32px;
}

.site-footer-nav .nav-link {
    font-size: 15.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    transition: color var(--dur-fast) var(--ease);
}
.site-footer-nav .nav-link:hover {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.site-footer-base {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
}
.site-footer-credit a { color: rgba(255, 255, 255, 0.62); }
.site-footer-credit a:hover { color: var(--white); }

/* =========================================================
   Motion & interaction
   ========================================================= */

/* ---------- Focus ---------- */

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible { outline-offset: 4px; }

.site-footer :focus-visible,
.band-navy :focus-visible { outline-color: var(--gold-lift); }

/* ---------- Scroll reveal ----------
   Deliberately scarce: only post cards and the homepage lead image carry
   [data-reveal]. Headings, buttons, nav and footer render immediately —
   motion everywhere is motion nowhere.

   The .js-reveal class is only added by an inline script when the browser
   supports IntersectionObserver AND the reader hasn't asked for reduced
   motion. Without it these rules never apply, so content is never hidden
   from anyone whose browser can't animate it back in. */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    will-change: opacity, transform;
}

.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--glide),
                transform var(--dur-slow) var(--glide);
    transition-delay: var(--reveal-delay, 0ms);
}

/* Media reveals with a slow settle out of scale — quieter than a slide */
.js-reveal [data-reveal="media"] {
    opacity: 0;
    transform: none;
    clip-path: inset(0 0 12% 0);
}
.js-reveal [data-reveal="media"] img { transform: scale(1.08); }

.js-reveal [data-reveal="media"].is-revealed {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transition: opacity var(--dur-slow) var(--glide),
                clip-path 1s var(--glide);
    transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal="media"].is-revealed img {
    transform: scale(1);
    transition: transform 1.2s var(--glide);
    transition-delay: var(--reveal-delay, 0ms);
}

/* Once revealed, drop the hint so hover transforms stay smooth */
.js-reveal [data-reveal].is-settled { will-change: auto; }

/* ---------- Reading progress ---------- */

.reading-progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 110;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-lift) 100%);
    pointer-events: none;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .lead-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .lead-copy { order: 2; }
    .lead-media { order: 1; }
    .lead-excerpt { max-width: none; }
}

@media (max-width: 1024px) {
    /* Hero collapses: marquee becomes a washed-out backdrop */
    .hero {
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
    }

    .hero-marquee {
        position: absolute;
        inset: 0;
        z-index: 0;
        padding: 0;
        gap: 6px;
    }
    .hero-marquee::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(244, 245, 246, 0.88);
        z-index: 1;
    }
    .hero-track > img { border-radius: 0; margin-bottom: 6px; }

    .hero-copy {
        position: relative;
        z-index: 2;
        align-items: center;
        text-align: center;
        padding: clamp(90px, 14dvh, 140px) 28px clamp(50px, 8dvh, 90px);
    }
    .hero-lede { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-title { font-size: clamp(38px, 6.4vw, 56px); }
}

@media (max-width: 880px) {
    :root { --header-h: 72px; }

    .wrap, .site-header-inner, .post-feature { padding-left: 28px; padding-right: 28px; }

    .site-nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--white);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-soft);
        padding: 12px 28px 26px;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }
    .site-nav.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .site-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav-list .nav-link {
        display: block;
        padding: 15px 0;
        font-size: 17px;
        border-bottom: 1px solid var(--line);
    }
    /* The centre-out gold rule doesn't belong on a stacked drawer */
    .site-nav-list .nav-link::after { display: none; }
    .site-nav-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-search {
        justify-content: flex-start;
        padding: 15px 0;
        font-size: 17px;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }
    .site-search-label { display: inline; }

    .site-nav-cta { margin-top: 20px; text-align: center; }

    .site-nav-toggle { display: flex; }

    .post-grid { grid-template-columns: 1fr; gap: 24px; }

    .site-footer-nav { gap: 10px 24px; }
    .site-footer-base { justify-content: center; text-align: center; }

    .post-content { font-size: 17.5px; }
    .post-content h2 { font-size: 30px; }
    .post-content h3 { font-size: 25px; }
    .post-content blockquote { font-size: 22px; }

    .post-content .kg-width-wide { width: auto; max-width: none; margin-left: 0; transform: none; }
}

@media (max-width: 560px) {
    body { font-size: 16px; }
    .wrap, .site-header-inner, .post-feature { padding-left: 20px; padding-right: 20px; }
    .hero-copy { padding-left: 20px; padding-right: 20px; }
    .btn { padding: 14px 28px; font-size: 15px; }
    .hero-actions { flex-direction: column; align-self: stretch; width: 100%; }
    .hero-actions .btn { width: 100%; text-align: center; }
    .post-card-body { padding: 24px 22px 26px; }
        .pagination { flex-direction: column; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-track { animation: none !important; }

    /* Belt and braces: the inline script already withholds .js-reveal here,
       but if the preference flips mid-session nothing stays hidden. */
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    [data-reveal] img { transform: none !important; }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}