/* ═══════════════════════════════════════════════════
   Wind-Inspired Ghost Theme — screen.css
   ═══════════════════════════════════════════════════ */

/* ─── Font ────────────────────────────────────────── */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("../fonts/bricolage.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Design Tokens ───────────────────────────────── */
:root {
    --font-body:         "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --radius:            10px;
    --logo-height:       40px;
    --aspect-card:       16 / 10;
    --transition:        0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --container-max:     72rem;
    --container-px:      1.5rem;
}

/* Light (default) */
:root,
[data-theme="Light"] {
    --c-bg:          #ffffff;
    --c-surface:     #f4f4f5;
    --c-border:      #e4e4e7;
    --c-heading:     #09090b;
    --c-text:        #27272a;
    --c-meta:        #71717a;
    --c-accent:      #820ad1;
    --c-link:        #820ad1;
    --c-submenu-bg:  #ffffff;
    --c-submenu-txt: #27272a;
    --c-foot-bg:     #09090b;
    --c-foot-border: rgba(255,255,255,.1);
    --c-foot-slide:  rgba(255,255,255,.15);
    --c-foot-txt:    #fafafa;
}
[data-theme="Light"].dark {
    --c-bg:          #18181b;
    --c-surface:     #27272a;
    --c-border:      #3f3f46;
    --c-heading:     #fafafa;
    --c-text:        #e4e4e7;
    --c-meta:        #a1a1aa;
    --c-link:        #c084fc;
    --c-submenu-bg:  #27272a;
    --c-submenu-txt: #fafafa;
}

/* Sepia */
[data-theme="Sepia"] {
    --c-bg:          #fbf7f0;
    --c-surface:     #f6eede;
    --c-border:      #ecdabc;
    --c-heading:     #1f1f1f;
    --c-text:        #2f2e2d;
    --c-meta:        #65605c;
    --c-accent:      #8b4513;
    --c-link:        #8b4513;
    --c-submenu-bg:  #fbf7f0;
    --c-submenu-txt: #2f2e2d;
    --c-foot-bg:     #1f1f1f;
    --c-foot-border: rgba(255,255,255,.1);
    --c-foot-slide:  rgba(255,255,255,.15);
    --c-foot-txt:    #fafafa;
}
[data-theme="Sepia"].dark {
    --c-bg:          #272726;
    --c-surface:     #2f2e2d;
    --c-border:      #494644;
    --c-heading:     #faf6ef;
    --c-text:        #e8e0d5;
    --c-meta:        #a09890;
    --c-link:        #d4956a;
    --c-submenu-bg:  #2f2e2d;
    --c-submenu-txt: #faf6ef;
}

/* Wind */
[data-theme="Wind"] {
    --c-bg:          #f6f5ff;
    --c-surface:     #dfe4fa;
    --c-border:      #ced4f7;
    --c-heading:     #191b22;
    --c-text:        #21232b;
    --c-meta:        #797d8b;
    --c-accent:      #2448bf;
    --c-link:        #2448bf;
    --c-submenu-bg:  #f6f5ff;
    --c-submenu-txt: #21232b;
    --c-foot-bg:     #191b22;
    --c-foot-border: rgba(255,255,255,.1);
    --c-foot-slide:  rgba(255,255,255,.15);
    --c-foot-txt:    #fafafa;
}
[data-theme="Wind"].dark {
    --c-bg:          #21232b;
    --c-surface:     #2d2f38;
    --c-border:      #3a3d4a;
    --c-heading:     #f0f1ff;
    --c-text:        #e0e2f0;
    --c-meta:        #9fa3b5;
    --c-link:        #7b96e8;
    --c-submenu-bg:  #2d2f38;
    --c-submenu-txt: #f0f1ff;
}

/* Dark */
[data-theme="Dark"] {
    --c-bg:          #18181b;
    --c-surface:     #27272a;
    --c-border:      #3f3f46;
    --c-heading:     #fafafa;
    --c-text:        #e4e4e7;
    --c-meta:        #a1a1aa;
    --c-accent:      #820ad1;
    --c-link:        #c084fc;
    --c-submenu-bg:  #27272a;
    --c-submenu-txt: #fafafa;
    --c-foot-bg:     #09090b;
    --c-foot-border: rgba(255,255,255,.1);
    --c-foot-slide:  rgba(255,255,255,.15);
    --c-foot-txt:    #fafafa;
}

/* ─── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-text);
    background-color: var(--c-bg);
    transition: background-color var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; }

.skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 100;
    padding: .5rem 1rem; background: var(--c-accent); color: #fff;
    border-radius: var(--radius); font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ─── Layout ──────────────────────────────────────── */
.viewport { display: flex; flex-direction: column; min-height: 100dvh; }
.viewport > main { flex: 1; }

.container {
    width: 100%;
    max-width: calc(var(--container-max) + var(--container-px) * 2);
    margin-inline: auto;
    padding-inline: var(--container-px);
}
@media (min-width: 768px)  { :root { --container-px: 2rem; } }
@media (min-width: 1024px) { :root { --container-px: 2.5rem; } }

/* ─── Typography Utilities ────────────────────────── */
.heading-lg  { font-size: 1.125rem;  line-height: 1.3;  font-weight: 600; color: var(--c-heading); }
.heading-xl  { font-size: 1.25rem;   line-height: 1.3;  font-weight: 600; color: var(--c-heading); }
.heading-2xl { font-size: 1.5rem;    line-height: 1.25; font-weight: 600; color: var(--c-heading); }
.heading-3xl { font-size: 1.875rem;  line-height: 1.2;  font-weight: 700; color: var(--c-heading); }
.heading-4xl { font-size: 2.25rem;   line-height: 1.15; font-weight: 700; color: var(--c-heading); }
.heading-5xl { font-size: 3rem;      line-height: 1.1;  font-weight: 700; color: var(--c-heading); }
.heading-6xl { font-size: 3.75rem;   line-height: 1.05; font-weight: 700; color: var(--c-heading); }

.text-meta  { color: var(--c-meta); }
.text-link  { color: var(--c-link); }
.text-muted { opacity: 0.6; }

.text-deco             { transition: opacity var(--transition); }
.text-deco:hover       { opacity: .7; }

/* ─── Buttons ─────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .5625rem 1.25rem; border-radius: var(--radius);
    font-size: .9375rem; font-weight: 600; line-height: 1;
    border: 1px solid transparent; white-space: nowrap; cursor: pointer;
    transition: opacity var(--transition), background-color var(--transition);
}
.btn-lg {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .75rem 1.5rem; border-radius: var(--radius);
    font-size: 1rem; font-weight: 600; line-height: 1;
    border: 1px solid transparent; white-space: nowrap; cursor: pointer;
    transition: opacity var(--transition), background-color var(--transition);
}
.btn:hover, .btn-lg:hover { opacity: .85; }

/* ─── Icon Buttons ────────────────────────────────── */
.icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
    border: 1px solid transparent; flex-shrink: 0;
    color: var(--c-heading);
    transition: opacity var(--transition), background-color var(--transition);
}
.icon-sm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--radius);
    border: 1px solid transparent; flex-shrink: 0;
    transition: opacity var(--transition);
}
.icon:hover, .icon-sm:hover { opacity: .8; }

/* ─── Color Variants ──────────────────────────────── */
.v-primary   { background: var(--c-accent);   color: #fff;             border-color: var(--c-accent); }
.v-outline   { background: transparent;       color: var(--c-accent);  border-color: var(--c-accent); }
.v-secondary { background: var(--c-surface);  color: var(--c-text);    border-color: var(--c-border); }
.v-footer    { background: rgba(255,255,255,.07); color: var(--c-foot-txt); border-color: rgba(255,255,255,.18); }
.v-footer:hover { background: rgba(255,255,255,.14); opacity: 1; }

/* ─── Badge (featured posts) ──────────────────────── */
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: calc(var(--radius) * .6);
    background: var(--c-accent); color: #fff;
}
.badge svg { width: 1rem; height: 1rem; }

/* ─── Card image wrapper ──────────────────────────── */
.card-img {
    position: relative; width: 100%;
    aspect-ratio: var(--aspect-card);
    background: var(--c-surface);
    border-radius: var(--radius); overflow: hidden;
}
.card-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: filter var(--transition);
}

/* ─── Post Card (large) ───────────────────────────── */
.post-card {
    position: relative;
    display: flex; flex-direction: column; gap: 1rem;
}
.post-card:hover .card-img img { filter: brightness(1.05); }

.post-card__badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; }

.post-card__body  { display: flex; flex-direction: column; gap: .5rem; }

.post-card__tag {
    position: relative; display: inline-block;
    font-size: .8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-link); z-index: 10;
    transition: opacity var(--transition);
}
.post-card__tag:hover { opacity: .7; }

.post-card__title {
    font-size: 1.5rem; line-height: 1.25;
    font-weight: 600; color: var(--c-heading);
}
.post-card__title a {
    display: block; transition: opacity var(--transition);
}
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.post-card__title a:hover { opacity: .8; }

.post-card__excerpt { font-size: 1rem; color: var(--c-text); line-height: 1.6; }

/* ─── Post Card Mini ──────────────────────────────── */
.post-card-mini {
    position: relative;
    display: flex; align-items: flex-start; gap: 1.5rem;
}
.post-card-mini:hover .card-img img { filter: brightness(1.05); }

.post-card-mini .card-img { width: 9rem; flex-shrink: 0; }
@media (min-width: 768px) { .post-card-mini .card-img { width: 11rem; } }

.post-card-mini__body {
    flex: 1; align-self: center;
    display: flex; flex-direction: column; gap: .5rem;
}

.post-card-mini__tag {
    position: relative; display: inline-block;
    font-size: .8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-link); z-index: 10;
    transition: opacity var(--transition);
}
.post-card-mini__tag:hover { opacity: .7; }

.post-card-mini__title {
    font-size: 1.125rem; line-height: 1.3;
    font-weight: 600; color: var(--c-heading);
}
@media (min-width: 768px) { .post-card-mini__title { font-size: 1.25rem; } }
.post-card-mini__title a { display: block; transition: opacity var(--transition); }
.post-card-mini__title a::after { content: ""; position: absolute; inset: 0; z-index: 5; }
.post-card-mini__title a:hover { opacity: .8; }

/* ─── Navbar ──────────────────────────────────────── */
.navbar {
    position: sticky; top: 0; z-index: 50;
    padding-top: 1rem;
    background: var(--c-bg);
    transition: background-color var(--transition);
}
@media (min-width: 768px) { .navbar { padding-top: 1.5rem; } }

.navbar__inner {
    display: flex; align-items: center; gap: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--c-border);
    transition: border-color var(--transition);
}
@media (min-width: 768px) { .navbar__inner { padding-bottom: 1.5rem; } }

.navbar__brand {
    display: flex; justify-content: space-between;
    align-items: center; gap: 1rem;
}
@media (max-width: 1023px) { .navbar__brand { width: 100%; } }

.navbar__logo {
    display: inline-flex; align-items: center;
    max-width: fit-content; height: var(--logo-height);
    flex-shrink: 0; transition: opacity var(--transition);
}
.navbar__logo:hover { opacity: .85; }
.navbar__logo img { width: auto; height: 100%; }
.navbar__logo .logo-dark { display: none; }
.dark .navbar__logo .logo-light { display: none; }
.dark .navbar__logo .logo-dark  { display: block; }

.navbar__mobile-btns { display: flex; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .navbar__mobile-btns { display: none; } }

.navbar__nav { flex: 1; }
@media (max-width: 1023px) { .navbar__nav { display: none; } }

.navbar__nav ul { display: flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: 1.0625rem; }
.navbar__nav li { position: relative; }
.navbar__nav a { color: var(--c-heading); }

.navbar__more-btn {
    display: flex; align-items: center;
    height: var(--logo-height); font-size: 1.25rem;
    color: var(--c-heading);
    transition: opacity var(--transition);
}
.navbar__more-btn:hover { opacity: .85; }

.navbar__submenu {
    position: absolute; top: 100%; left: 0;
    min-width: 11rem; z-index: 50;
    background: var(--c-submenu-bg); color: var(--c-submenu-txt);
    display: flex; flex-direction: column; gap: .5rem;
    padding: 1.5rem; margin-top: .5rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
    transition: visibility var(--transition), opacity var(--transition);
}
.navbar__submenu[aria-hidden="true"] { visibility: hidden; opacity: 0; pointer-events: none; }
.navbar__submenu a { font-size: 1rem; transition: opacity var(--transition); }
.navbar__submenu a:hover { opacity: .7; }

.navbar__actions { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 1023px) { .navbar__actions { display: none; } }

.navbar__auth  { display: flex; align-items: center; gap: 1.5rem; }
.navbar__signin { font-size: 1.0625rem; transition: opacity var(--transition); }
.navbar__signin:hover { opacity: .7; }

/* ─── Mobile Menu ─────────────────────────────────── */
.mobile-menu {
    position: fixed; inset: 0; z-index: 50;
    visibility: hidden; opacity: 0;
    transition: visibility .3s, opacity .3s;
}
.mobile-menu[aria-expanded="true"] { visibility: visible; opacity: 1; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.mobile-menu__inner {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: var(--c-bg); overflow: hidden;
}

.mobile-menu__header {
    display: flex; justify-content: space-between;
    align-items: center; gap: 1rem; padding: 1rem;
}
@media (min-width: 768px) { .mobile-menu__header { padding-top: 1.5rem; } }

.mobile-menu__header-btns { display: flex; align-items: center; gap: .75rem; }

.mobile-menu__nav { flex: 1; overflow-y: auto; padding: 1rem; }

.mobile-menu__nav ul {
    display: flex; flex-direction: column; align-items: center;
    gap: .75rem; font-size: 1.5rem; font-weight: 600;
    text-align: center; color: var(--c-heading);
}
.mobile-menu__nav a { transition: opacity var(--transition); }
.mobile-menu__nav a:hover { opacity: .7; }

.mobile-menu__auth {
    display: flex; flex-direction: column;
    align-items: center; gap: 1rem;
    padding: 1rem 1rem 2rem;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu[aria-expanded="true"] .mobile-menu__nav ul {
    animation: fadeInUp .3s ease-out both;
}

/* ─── Back to Top ─────────────────────────────────── */
.back-top {
    position: fixed; bottom: 1rem; right: 1rem; z-index: 40;
    opacity: 0; visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.back-top.is-visible { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .back-top { bottom: 1.5rem; right: 1.5rem; } }

/* ─── Footer ──────────────────────────────────────── */
.site-footer { background: var(--c-foot-bg); color: var(--c-foot-txt); }

.site-footer__main {
    display: grid; gap: 3rem 2rem;
    padding: 5rem 0;
}
@media (min-width: 768px) {
    .site-footer__main { grid-template-columns: 1fr 1fr; padding: 7rem 0; }
}

.site-footer__brand  { display: flex; flex-direction: column; gap: 2rem; }
.site-footer__logo { display: inline-block; text-decoration: none; color: var(--c-foot-txt); font-size: 1.25rem; font-weight: 700; line-height: 1; transition: opacity var(--transition); }
.site-footer__logo:hover { opacity: .8; }
.site-footer__logo img { height: 40px; width: auto; display: block; }
.site-footer__desc   { font-size: 1.0625rem; line-height: 1.6; opacity: .9; max-width: 38ch; }
.site-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

.site-footer__links  { display: flex; flex-direction: column; gap: .5rem; font-size: 1.0625rem; }
@media (min-width: 768px) { .site-footer__links { align-items: flex-end; } }

.site-footer__links-label {
    display: block; font-size: .9375rem; font-weight: 600;
    opacity: .5; margin-bottom: .5rem; color: currentColor;
}

.site-footer__links a { transition: opacity var(--transition); opacity: .9; }
.site-footer__links a:hover { opacity: .7; }

.site-footer__bottom { padding: 2rem 0; border-top: 1px solid var(--c-foot-border); }

.site-footer__bottom-inner {
    display: flex; flex-direction: column-reverse;
    align-items: flex-start; gap: 1rem;
}
@media (min-width: 768px) {
    .site-footer__bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

.site-footer__copy        { font-size: 1.0625rem; opacity: .8; }
.site-footer__copy a      { transition: opacity var(--transition); }
.site-footer__copy a:hover { opacity: .7; }

/* Dark mode toggle pill */
.dark-toggle {
    position: relative; display: flex; justify-content: space-between;
    align-items: center; border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.06);
    padding: .25rem; cursor: pointer;
}
.dark-toggle__slider {
    position: absolute; left: .25rem;
    width: 1.75rem; height: 1.5rem;
    background: rgba(255,255,255,.15);
    border-radius: calc(var(--radius) * .6);
    border: 1px solid rgba(255,255,255,.1);
    z-index: 0; transition: left var(--transition);
}
.dark .dark-toggle__slider { left: calc(100% - 2rem); }

.dark-toggle__icon {
    display: flex; justify-content: center; align-items: center;
    width: 1.75rem; height: 1.5rem; z-index: 1; position: relative;
    color: var(--c-foot-txt);
}

/* ─── Homepage ────────────────────────────────────── */
.home-hero { padding: 5rem 0; }
@media (min-width: 768px) { .home-hero { padding: 7rem 0; } }

.home-hero__inner {
    display: flex; flex-direction: column;
    align-items: center; max-width: 48rem;
    margin-inline: auto; text-align: center; gap: 2rem;
}
.home-hero__text { display: flex; flex-direction: column; gap: 1rem; }

.home-hero__title {
    font-size: 3rem; line-height: 1.1;
    font-weight: 700; color: var(--c-heading);
}
@media (min-width: 768px) { .home-hero__title { font-size: 3.75rem; } }

.home-hero__desc { font-size: 1.125rem; color: var(--c-text); }

.home-hero__form { display: flex; gap: .75rem; width: 100%; max-width: 28rem; }

.home-hero__form input {
    flex: 1; height: 2.75rem;
    border-radius: var(--radius);
    background: var(--c-bg); padding: 0 1rem;
    font-size: 1.0625rem; color: var(--c-text);
    border: 1px solid var(--c-border); outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.home-hero__form input::placeholder { color: var(--c-meta); }
.home-hero__form input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 15%, transparent);
}

/* Post feed */
.home-feed { padding-bottom: 5rem; }
@media (min-width: 768px) { .home-feed { padding-bottom: 7rem; } }

.home-hero-grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .home-hero-grid { grid-template-columns: 1fr 1fr; } }

.home-mini-stack { display: flex; flex-direction: column; gap: 2rem; }

.home-grid { display: grid; gap: 2rem; }
@media (min-width: 640px)  { .home-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .home-grid { grid-template-columns: repeat(3,1fr); } }

/* Newsletter box */
.home-newsletter-wrap { padding-bottom: 5rem; }
@media (min-width: 768px) { .home-newsletter-wrap { padding-bottom: 7rem; } }

.home-newsletter {
    position: relative;
    background: var(--c-surface);
    border: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent);
    border-radius: var(--radius);
    overflow: hidden;
    padding: 1.5rem;
}
@media (min-width: 768px) { .home-newsletter { padding: 3rem; } }

.home-newsletter__dots {
    pointer-events: none;
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    color: var(--c-border);
}

.home-newsletter__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .home-newsletter__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}

.home-newsletter__content {
    display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 768px) { .home-newsletter__content { gap: 2rem; } }

.home-newsletter__wave {
    color: var(--c-accent);
    width: 70px; height: 16px;
    display: block; flex-shrink: 0; align-self: flex-start;
}

.home-newsletter__text { display: flex; flex-direction: column; gap: 1rem; }

.home-newsletter__title {
    display: block;
    font-size: 1.875rem; line-height: 1.2; font-weight: 700;
    color: var(--c-heading);
}
@media (min-width: 768px) { .home-newsletter__title { font-size: 2.25rem; } }

.home-newsletter__desc { font-size: 1.0625rem; color: var(--c-text); line-height: 1.6; }

.home-newsletter__form { display: flex; gap: .75rem; width: 100%; max-width: 28rem; }
.home-newsletter__form input {
    flex: 1; height: 2.75rem;
    border-radius: var(--radius);
    background: var(--c-bg); padding: 0 1rem;
    font-size: 1rem; color: var(--c-text);
    border: 1px solid color-mix(in srgb, var(--c-border) 50%, transparent);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.home-newsletter__form input::placeholder { color: var(--c-meta); }
.home-newsletter__form input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 15%, transparent);
}

.home-newsletter__image {
    aspect-ratio: var(--aspect-card);
    background: var(--c-border);
    border-radius: var(--radius); overflow: hidden;
    order: -1;
}
@media (min-width: 768px) { .home-newsletter__image { order: 0; } }
.home-newsletter__image img { width: 100%; height: 100%; object-fit: cover; }

/* Grid heading */
.home-grid-heading {
    font-size: 2.25rem; line-height: 1.15; font-weight: 700;
    color: var(--c-heading); text-align: center;
    margin-bottom: 3rem; max-width: 32rem; margin-inline: auto;
}
@media (min-width: 768px) { .home-grid-heading { font-size: 3rem; margin-bottom: 4rem; } }

.load-more-wrap { text-align: center; padding-top: 3rem; }
.load-more-wrap .btn-lg[disabled] { opacity: .5; cursor: wait; }

/* ─── Post Page ───────────────────────────────────── */
.post-main { padding-bottom: 5rem; }
@media (min-width: 768px) { .post-main { padding-bottom: 7rem; } }

/* Header — shared */
.post-header {
    position: relative;
    background: var(--c-surface);
    padding: 3rem 0; margin-bottom: 3rem;
}
@media (min-width: 768px) { .post-header { padding: 4rem 0; margin-bottom: 4rem; } }

.post-header__bg {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.post-header__bg img { width: 100%; height: 100%; object-fit: cover; }
.post-header__bg-blur {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--c-surface) 90%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 1;
}

.post-header__body { position: relative; z-index: 1; }

.post-header__grid { display: grid; gap: 3rem 2rem; align-items: start; }
@media (min-width: 768px) {
    .post-main.is-split .post-header__grid { grid-template-columns: 1fr 1fr; }
    .post-main.is-classic .post-header__grid,
    .post-main.is-wide .post-header__grid   { max-width: 52rem; margin-inline: auto; }
}

/* For Classic/Wide, hide blurred bg and use plain bg */
.post-main.is-classic .post-header__bg,
.post-main.is-wide .post-header__bg { display: none; }
.post-main.is-classic .post-header,
.post-main.is-wide .post-header { background: transparent; padding-top: 0; }

/* Classic/Wide: image not shown inside header — hide the right-col figure */
.post-main.is-classic .post-header__feat,
.post-main.is-wide .post-header__feat { display: none; }

.post-header__meta { display: flex; flex-direction: column; gap: 2rem; }

.post-header__tag {
    font-size: .875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-link); line-height: 1;
    transition: opacity var(--transition);
}
.post-header__tag:hover { opacity: .7; }

.post-header__titles { display: flex; flex-direction: column; gap: 1rem; }

.post-header__title {
    font-size: 2.25rem; line-height: 1.15;
    font-weight: 700; color: var(--c-heading);
}
@media (min-width: 768px) { .post-header__title { font-size: 3rem; } }
@media (min-width: 768px) { .post-main.is-split .post-header__title { font-size: 2.25rem; } }

.post-header__excerpt { font-size: 1.0625rem; line-height: 1.6; max-width: 42ch; color: var(--c-text); }

.post-header__byline {
    display: flex; flex-wrap: wrap;
    justify-content: space-between; align-items: flex-end; gap: 2rem;
}

.post-header__author { display: flex; align-items: center; gap: .75rem; }

.post-header__avatar {
    width: 3rem; height: 3rem; border-radius: var(--radius);
    overflow: hidden; flex-shrink: 0; background: var(--c-surface);
}
.post-header__avatar img { width: 100%; height: 100%; object-fit: cover; }

.post-header__author-info { display: flex; flex-direction: column; gap: .125rem; }

.post-header__author-name {
    font-size: 1rem; font-weight: 600; color: var(--c-heading);
    transition: opacity var(--transition);
}
.post-header__author-name:hover { opacity: .7; }

.post-header__date { font-size: .9375rem; color: var(--c-meta); line-height: 1; }

.post-header__share { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* Feature image (right col in Split) */
.post-header__feat {
    border-radius: var(--radius); overflow: hidden;
    background: var(--c-border);
    aspect-ratio: var(--aspect-card);
    width: 100%;
}
.post-header__feat img { width: 100%; height: 100%; object-fit: cover; }

/* Classic: feature image full-width above content */
.post-classic-img {
    width: 100%; max-width: 52rem; margin: 0 auto 3rem;
    padding-inline: var(--container-px);
}
.post-classic-img figure {
    border-radius: var(--radius); overflow: hidden;
    aspect-ratio: var(--aspect-card);
    background: var(--c-surface);
}
.post-classic-img img { width: 100%; height: 100%; object-fit: cover; }

/* Post body canvas */
.post-canvas {
    max-width: 46rem; margin-inline: auto;
    padding-inline: var(--container-px);
}
.post-main.is-wide .post-canvas { max-width: 56rem; }

/* ─── Prose ───────────────────────────────────────── */
.prose {
    font-size: 1.0625rem; line-height: 1.75; color: var(--c-text);
}
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    color: var(--c-heading); font-weight: 700;
    line-height: 1.25; margin: 2em 0 .75em;
}
.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.375rem; }
.prose h4 { font-size: 1.125rem; }
.prose p  { margin-bottom: 1.5em; }
.prose p:last-child { margin-bottom: 0; }
.prose > p:first-of-type::first-letter {
    float: left;
    font-size: 4.25rem; line-height: 0.82;
    font-weight: 700; padding-right: 0.08em;
    color: var(--c-heading);
}
.prose a  { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--transition); }
.prose a:hover { opacity: .8; }
.prose strong { font-weight: 700; color: var(--c-heading); }
.prose em { font-style: italic; }
.prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1.5em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
    border-left: 3px solid var(--c-accent); padding-left: 1.25rem;
    margin: 0 0 1.5em; color: var(--c-meta);
    font-style: italic; font-size: 1.125rem;
}
.prose hr { border: none; border-top: 1px solid var(--c-border); margin: 2.5em 0; }
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: .875em; background: var(--c-surface);
    padding: .125em .4em; border-radius: 4px;
}
.prose pre {
    background: var(--c-surface); border-radius: var(--radius);
    padding: 1.25rem 1.5rem; overflow-x: auto; margin-bottom: 1.5em;
}
.prose pre code { background: none; padding: 0; font-size: .875rem; }
.prose img { border-radius: var(--radius); margin-bottom: 1.5em; }
.prose figure { margin-bottom: 1.5em; }
.prose figcaption { text-align: center; font-size: .875rem; color: var(--c-meta); margin-top: .5rem; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; font-size: .9375rem; }
.prose th, .prose td { border: 1px solid var(--c-border); padding: .625rem .875rem; text-align: left; }
.prose th { background: var(--c-surface); font-weight: 600; color: var(--c-heading); }

/* Post footer (tags + share) */
.post-footer {
    display: grid; gap: 3rem 2rem;
    margin-top: 3rem; padding-top: 3rem;
    border-top: 1px solid var(--c-border);
}
@media (min-width: 640px) { .post-footer { grid-template-columns: 1fr 1fr; } }

.post-footer__label {
    display: block; font-size: 1.25rem; font-weight: 600;
    color: var(--c-heading); margin-bottom: 1rem;
}
.post-footer__tags  { display: flex; flex-wrap: wrap; gap: .75rem; }
.post-footer__share { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Related posts */
.related-posts { margin-top: 5rem; }
@media (min-width: 768px) { .related-posts { margin-top: 7rem; } }

.related-posts__title {
    font-size: 1.5rem; font-weight: 600;
    color: var(--c-heading); margin-bottom: 2rem;
}
.related-posts__grid { display: grid; gap: 2rem; }
@media (min-width: 640px)  { .related-posts__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .related-posts__grid { grid-template-columns: repeat(3,1fr); } }

/* Subscribe CTA */
.cta-subscribe {
    background: var(--c-surface); padding: 5rem 0;
    margin: 5rem 0;
}
@media (min-width: 768px) { .cta-subscribe { padding: 7rem 0; margin: 7rem 0; } }

.cta-subscribe__inner {
    max-width: 42rem; margin-inline: auto;
    text-align: center; display: flex; flex-direction: column; gap: 2rem;
}
.cta-subscribe__title { font-size: 2.25rem; font-weight: 700; color: var(--c-heading); line-height: 1.2; }
.cta-subscribe__desc  { font-size: 1.0625rem; color: var(--c-text); }
.cta-subscribe__form  { display: flex; gap: .75rem; max-width: 28rem; margin-inline: auto; width: 100%; }
@media (max-width: 480px) { .cta-subscribe__form { flex-direction: column; } }
.cta-subscribe__form input {
    flex: 1; height: 2.75rem; border-radius: var(--radius);
    background: var(--c-bg); padding: 0 1rem;
    font-size: 1rem; color: var(--c-text);
    border: 1px solid var(--c-border); outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cta-subscribe__form input::placeholder { color: var(--c-meta); }
.cta-subscribe__form input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 15%, transparent);
}

/* ─── Archive (Tag / Author) ──────────────────────── */
.archive-header { padding: 5rem 0 3rem; text-align: center; }
@media (min-width: 768px) { .archive-header { padding: 7rem 0 4rem; } }

.archive-header__inner {
    max-width: 42rem; margin-inline: auto;
    display: flex; flex-direction: column; gap: 1rem;
}

.archive-header__title {
    font-size: 2.25rem; line-height: 1.15; font-weight: 700; color: var(--c-heading);
    display: inline;
}
@media (min-width: 768px) { .archive-header__title { font-size: 3rem; } }

.archive-header__count {
    color: var(--c-link); font-weight: 600; font-size: 1.125rem;
    vertical-align: super; margin-left: .25rem;
}
.archive-header__desc { font-size: 1.0625rem; line-height: 1.6; color: var(--c-text); }

.archive-feed { padding-bottom: 5rem; }
@media (min-width: 768px) { .archive-feed { padding-bottom: 7rem; } }

.archive-grid { display: grid; gap: 2rem; }
@media (min-width: 640px)  { .archive-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .archive-grid { grid-template-columns: repeat(3,1fr); } }

/* Author extras */
.author-avatar {
    width: 5rem; height: 5rem; border-radius: var(--radius);
    overflow: hidden; margin-inline: auto; margin-bottom: 1rem;
    background: var(--c-surface);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }

.author-social { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }

/* ─── Pagination ──────────────────────────────────── */
.gh-pagination {
    display: flex; justify-content: center; gap: 1rem; padding-top: 3rem;
}
.gh-pagination a { display: inline-flex; }

/* ─── 404 ─────────────────────────────────────────── */
.error-page {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 7rem 1rem; gap: 2rem; min-height: 60vh;
}
.error-page__code  { font-size: 6rem; font-weight: 700; color: var(--c-border); line-height: 1; }
.error-page__title { font-size: 2rem; font-weight: 700; color: var(--c-heading); }
.error-page__desc  { font-size: 1.0625rem; color: var(--c-meta); max-width: 36ch; }

/* ─── Ghost Card Overrides ────────────────────────── */
.kg-card { margin-bottom: 1.5em; }
.kg-image-card img, .kg-gallery-card img { border-radius: var(--radius); }
.kg-bookmark-card { border: 1px solid var(--c-border); border-radius: var(--radius); }
.kg-callout-card  { border-radius: var(--radius); }

/* Required by Ghost: wide and full-width image bleed out of canvas */
.kg-width-wide {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 1200px);
}
.kg-width-full {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
}

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