/* ============================================
   WeWillExplain — design tokens
   ============================================ */
:root {
    --bg: #F6F7FA;
    --bg-soft: #FFFFFF;
    --ink: #14172B;
    --ink-soft: #4B5170;
    --fog: #C9CEDC;
    --fog-light: #E4E7F0;
    --navy: #1B2140;
    --navy-soft: #262C50;
    --accent: #F0A93D;
    --accent-deep: #D98F1F;

    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --max-width: 1180px;
    --radius: 10px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
    color: var(--ink);
}

p { margin: 0; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: var(--ink);
    padding: 10px 16px;
    z-index: 1000;
    font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; border-radius: 6px; }

:focus-visible {
    outline: 2.5px solid var(--accent-deep);
    outline-offset: 3px;
}

.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.96rem;
    border: 1.5px solid transparent;
    transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
    cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--navy); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--fog); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-large { padding: 15px 30px; font-size: 1rem; white-space: nowrap; }

/* ============================================
   Header
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 247, 250, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
    border-bottom-color: var(--fog-light);
    box-shadow: 0 6px 20px rgba(20, 23, 43, 0.04);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    flex-shrink: 0;
}
.logo-mark { color: var(--accent-deep); display: inline-flex; }

.main-nav {
    display: flex;
    gap: 26px;
    margin-right: auto;
}
.main-nav a {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.15s var(--ease);
    padding: 6px 0;
    position: relative;
}
.main-nav a:hover { color: var(--ink); }
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s var(--ease);
}
.main-nav a:hover::after { transform: scaleX(1); }

.search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1.5px solid var(--fog-light);
    border-radius: 999px;
    padding: 9px 16px;
    width: 240px;
    transition: border-color 0.18s var(--ease), width 0.2s var(--ease);
}
.search-form:focus-within {
    border-color: var(--accent);
    width: 280px;
}
.search-icon { color: var(--ink-soft); flex-shrink: 0; }
.search-form input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.9rem;
    width: 100%;
    color: var(--ink);
}
.search-form input::placeholder { color: #9AA1B8; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.account-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    padding: 8px 14px;
    border: 1.5px solid var(--fog);
    border-radius: 999px;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
    white-space: nowrap;
}
.account-link:hover { border-color: var(--ink); background: var(--bg-soft); }

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 34px; height: 34px;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s var(--ease);
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
/* Margin fallback in addition to the parent's flex `gap`, for older mobile
   browsers/webviews that don't support gap on flex containers. */
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    flex-direction: column;
    padding: 8px 28px 20px;
    gap: 4px;
    background: var(--bg);
    border-top: 1px solid var(--fog-light);
}
.mobile-nav a {
    padding: 14px 4px;
    font-weight: 500;
    font-size: 1rem;
    border-bottom: 1px solid var(--fog-light);
    color: var(--ink);
}
.mobile-nav.is-open { display: flex; }

/* Persistent search row shown under the top bar on phones (see .mobile-topbar-search
   below in Responsive) — hidden by default so it never appears on desktop, where
   the inline .search-form in header-inner already covers this. */
.mobile-topbar-search {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--bg-soft);
    border: 1.5px solid var(--fog-light);
    border-radius: 999px;
    padding: 10px 16px;
}
.mobile-topbar-search .search-icon { color: var(--ink-soft); flex-shrink: 0; }
.mobile-topbar-search input {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.95rem;
    width: 100%;
    color: var(--ink);
}
.mobile-topbar-search input::placeholder { color: #9AA1B8; }
.mobile-topbar-search:focus-within { border-color: var(--accent); }

/* ============================================
   Hero — the signature moment
   ============================================ */
.hero {
    padding: 76px 0 88px;
    overflow: hidden;
}
.hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 56px;
}

.hero-kicker {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--accent-deep);
    margin-bottom: 18px;
}

.hero-title {
    font-size: clamp(2.6rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
}

.clarify-word {
    filter: blur(9px);
    opacity: 0;
    transform: translateY(6px);
    animation: clarify 1.1s var(--ease) forwards;
}
.clarify-word:nth-child(2) { animation-delay: 0.28s; }

@keyframes clarify {
    to { filter: blur(0); opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .clarify-word { animation: none; filter: none; opacity: 1; transform: none; }
    .untangle-svg .tangle-path,
    .untangle-svg .clear-path,
    .untangle-svg .travel-dot { animation: none !important; }
    .untangle-svg .tangle-path { opacity: 0; }
    .untangle-svg .clear-path { opacity: 1; }
}

.hero-sub {
    margin-top: 22px;
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 46ch;
    line-height: 1.6;
}

.hero-actions {
    margin-top: 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-stats {
    margin-top: 44px;
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
}
.stat-item { display: flex; flex-direction: column; gap: 4px; }
.stat-num {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--ink);
}
.stat-label {
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.hero-art { position: relative; }
.untangle-svg { width: 100%; height: auto; }
.tangle-path {
    animation: fade-out-tangle 0.01s linear 1.6s forwards;
}
.clear-path {
    opacity: 0;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: draw-clear 1s var(--ease) 1.5s forwards;
}
.travel-dot {
    opacity: 0;
    animation: dot-appear 0.01s linear 1.5s forwards, travel-dot 1s var(--ease) 1.5s forwards;
}
@keyframes fade-out-tangle { to { opacity: 0; } }
@keyframes draw-clear { to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dot-appear { to { opacity: 1; } }
@keyframes travel-dot {
    from { transform: translateX(0); }
    to { transform: translateX(320px); }
}

/* ============================================
   Topics rail
   ============================================ */
.topics { padding: 20px 0 70px; }

.topics-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.topic-card {
    flex: 0 0 auto;
    width: 168px;
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.topic-card:hover { transform: translateY(-2px); border-color: var(--fog); }
.topic-icon {
    width: 42px; height: 42px;
    border-radius: 999px;
    background: rgba(240, 169, 61, 0.14);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topic-name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.topic-count { font-size: 0.82rem; color: var(--ink-soft); }

/* ============================================
   Trending strip
   ============================================ */
.trending { padding: 20px 0 70px; }

.trending-row {
    display: flex;
    gap: 22px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.trend-card {
    position: relative;
    flex: 0 0 auto;
    width: 250px;
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    overflow: hidden;
}
.trend-rank {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 1;
    width: 28px; height: 28px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.86rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trend-media { display: block; aspect-ratio: 16 / 10; background: var(--navy); }
.trend-media svg, .trend-media iframe { width: 100%; height: 100%; display: block; }
.trend-body { padding: 16px 18px 18px; }
.trend-body h3 { font-size: 1rem; margin: 6px 0 0; }
.trend-body h3 a:hover { color: var(--accent-deep); }
.trend-body .meta { margin-top: 10px; }

/* ============================================
   Latest / featured articles
   ============================================ */
.latest { padding: 20px 0 90px; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.see-all {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-deep);
    white-space: nowrap;
}
.see-all:hover { text-decoration: underline; }

.latest-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
}

.featured-article {
    background: var(--bg-soft);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--fog-light);
}
.featured-media { display: block; aspect-ratio: 16 / 9.6; background: var(--navy); }
.featured-body { padding: 26px 28px 30px; }

.tag {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-deep);
    background: rgba(240, 169, 61, 0.14);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.tag-small { font-size: 0.72rem; padding: 3px 9px; }

.featured-body h3 { font-size: 1.5rem; margin-bottom: 10px; }
.featured-body h3 a:hover,
.list-article h3 a:hover { color: var(--accent-deep); }
.featured-body p:not(.meta) { color: var(--ink-soft); line-height: 1.6; }
.meta { margin-top: 14px; font-size: 0.84rem; color: #9AA1B8; }

.article-list {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.list-article {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--fog-light);
}
.list-article:last-child { border-bottom: none; }
.list-article h3 { font-size: 1.14rem; margin-bottom: 8px; }
.list-article p:not(.meta) { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.list-media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--navy);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 14px;
}
.list-media svg, .list-media iframe { width: 100%; height: 100%; display: block; }

.mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.mini-article {
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    overflow: hidden;
}
.mini-media { display: block; aspect-ratio: 16 / 10; background: var(--navy); }
.mini-media svg, .mini-media iframe { width: 100%; height: 100%; display: block; }
.mini-body { padding: 14px 16px 16px; }
.mini-body h3 { font-size: 0.98rem; margin: 6px 0 0; line-height: 1.35; }
.mini-body h3 a:hover { color: var(--accent-deep); }
.mini-body .meta { margin-top: 10px; }

/* ============================================
   Community band — full-bleed navy section
   ============================================ */
.community { background: var(--navy); padding: 76px 0; }
.section-head-light h2 { color: #fff; }

.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.community-card {
    background: var(--navy-soft);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.community-card:hover { transform: translateY(-3px); border-color: rgba(240,169,61,0.4); }
.community-icon {
    width: 44px; height: 44px;
    border-radius: 999px;
    background: rgba(240, 169, 61, 0.16);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.community-card h3 { color: #fff; font-size: 1.12rem; }
.community-card p { color: #B7BCD6; font-size: 0.92rem; line-height: 1.55; margin-top: 4px; }
.community-link { margin-top: 12px; font-size: 0.88rem; font-weight: 600; color: var(--accent); }

/* ============================================
   Why grid
   ============================================ */
.why { padding: 76px 0 90px; }
.why h2 {
    font-size: clamp(1.7rem, 3vw, 2.1rem);
}
.why-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.why-card {
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    padding: 24px 22px 26px;
}
.why-icon {
    width: 42px; height: 42px;
    border-radius: 999px;
    background: rgba(240, 169, 61, 0.14);
    color: var(--accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.why-card h3 { font-size: 1.04rem; margin-bottom: 6px; }
.why-card p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }

/* ============================================
   Join CTA
   ============================================ */
.join-cta {
    padding: 0 0 100px;
}
.join-inner {
    background: var(--navy);
    border-radius: 18px;
    padding: 48px 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.join-inner h2 {
    color: #fff;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    max-width: 22ch;
    margin-bottom: 10px;
}
.join-inner p {
    color: #B7BCD6;
    max-width: 46ch;
    line-height: 1.6;
}
.join-inner .btn-primary { background: var(--accent); color: var(--ink); }
.join-inner .btn-primary:hover { background: var(--accent-deep); }
.join-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.join-ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.join-ghost:hover { border-color: #fff; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: var(--navy);
    color: #B7BCD6;
    padding-top: 64px;
}
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 28px 48px;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 32px;
}
.footer-brand p { margin-top: 14px; font-size: 0.92rem; line-height: 1.6; max-width: 30ch; }
.logo-footer { color: #fff; }
.logo-footer::before { content: none; }

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 16px;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.footer-col a {
    font-size: 0.9rem;
    color: #B7BCD6;
    transition: color 0.15s var(--ease);
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 22px 28px;
}
.footer-bottom p {
    max-width: var(--max-width);
    margin: 0 auto;
    font-size: 0.84rem;
    color: #7C82A3;
}

/* ============================================
   Article page
   ============================================ */
.breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.86rem;
    color: var(--ink-soft);
    margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span { color: var(--fog); }

.article-head { padding-top: 44px; max-width: 760px; }
.article-title {
    font-size: clamp(2rem, 4.2vw, 2.9rem);
    margin: 16px 0 18px;
}
.article-excerpt {
    font-size: 1.14rem;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 62ch;
}
.article-byline {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 24px;
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.article-byline span[aria-hidden] { color: var(--fog); }

.article-cover {
    margin-top: 36px;
    /* aspect-ratio + background on the container itself (matching
       .featured-media/.trend-media/.mini-media below) so it's already the
       right size before the thumbnail loads, and so .thumb-image's
       height:100% has an actual height to resolve against — without
       this, an <img>-based thumbnail (the common case now that the AI
       thumbnail generator's static feature image populates
       thumbnail_image_url) had nothing but its own natural size to fall
       back on here, unlike the svg/iframe cases the rule below already
       covered. */
    aspect-ratio: 1000 / 460;
    background: var(--navy);
    border-radius: var(--radius);
    overflow: hidden;
}
.article-cover svg,
.article-cover iframe,
.article-cover img {
    width: 100%;
    height: 100%;
    display: block;
}
.thumb-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
}
.thumb-image { width: 100%; height: 100%; object-fit: cover; }
.featured-media svg,
.featured-media iframe { width: 100%; height: 100%; display: block; }

.article-body-wrap {
    display: grid;
    grid-template-columns: 1fr 64px;
    gap: 40px;
    margin-top: 44px;
    max-width: 900px;
}

.article-body { max-width: 68ch; }
.article-body::after { content: ""; display: table; clear: both; }
.article-body h2 {
    font-size: 1.5rem;
    margin-top: 42px;
    margin-bottom: 14px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body p {
    margin-bottom: 18px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
}
.article-body ul, .article-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
    line-height: 1.75;
}
.article-body blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--ink-soft);
}
.article-body a { color: var(--accent-deep); text-decoration: underline; }
.article-body img { border-radius: var(--radius); margin: 10px 0 26px; }

.article-stats {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--fog-light);
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.article-stats svg { flex-shrink: 0; opacity: 0.8; }

/* ---- Rich content produced by the simple article editor ---- */
.article-body .wwe-align-left { float: left; margin: 6px 20px 16px 0; max-width: 48%; }
.article-body .wwe-align-right { float: right; margin: 6px 0 16px 20px; max-width: 48%; }
.article-body .wwe-align-center { display: block; margin: 16px auto; float: none; }
.article-body .wwe-align-full { display: block; width: 100%; float: none; }
.article-body .wwe-valign-top { vertical-align: top; }
.article-body .wwe-valign-middle { vertical-align: middle; }
.article-body .wwe-valign-bottom { vertical-align: bottom; }

.article-body .wwe-callout {
    clear: both;
    padding: 18px 22px;
    border-radius: var(--radius);
    margin: 20px 0;
}

.article-body .wwe-video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 10px 0 26px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--navy);
    clear: both;
}
.article-body .wwe-video-embed iframe,
.article-body .wwe-video-embed video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.article-body video.wwe-plain-video { width: 100%; border-radius: var(--radius); margin: 10px 0 26px; }

.article-body .wwe-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    margin: 6px 0 20px;
    border: 1.5px solid var(--fog);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none !important;
}
.article-body .wwe-attachment:hover { border-color: var(--accent-deep); }
.article-body .wwe-attachment svg { flex-shrink: 0; }

.article-share {
    position: sticky;
    top: 96px;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.article-share p {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.article-share a {
    width: 38px; height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1.5px solid var(--fog);
    color: var(--ink-soft);
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.article-share a:hover { border-color: var(--ink); color: var(--ink); }

.related { padding: 20px 0 20px; margin-top: 40px; border-top: 1px solid var(--fog-light); }
.related .section-inner { padding-top: 60px; }
.article-list-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}
.article-list-grid .list-article {
    flex: 1 1 280px;
    border-bottom: none;
    padding-bottom: 0;
}

.comments { padding: 50px 0 100px; }
.comments h2 { font-size: 1.4rem; margin-bottom: 20px; }
.comment-count { color: var(--ink-soft); font-weight: 400; }
.comments-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    padding: 22px 26px;
    flex-wrap: wrap;
}
.comments-locked p { color: var(--ink-soft); }

.comment-form {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 36px;
}
.comment-form-avatar,
.comment-avatar {
    width: 38px; height: 38px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.comment-form-avatar img,
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-form-body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--fog-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    resize: vertical;
    min-height: 84px;
    background: var(--bg-soft);
    transition: border-color 0.15s var(--ease);
}
.comment-form textarea:focus { outline: none; border-color: var(--accent); }
.comment-form .btn { align-self: flex-end; }
.comment-error { color: #B23A3A; font-size: 0.88rem; }

.comment-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.comment-item { display: flex; gap: 14px; }
.comment-content { flex: 1; padding-bottom: 24px; border-bottom: 1px solid var(--fog-light); }
.comment-item:last-child .comment-content { border-bottom: none; }
.comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.comment-author { font-weight: 600; font-size: 0.94rem; }
.comment-date { font-size: 0.82rem; color: #9AA1B8; }
.comment-body { color: var(--ink-soft); line-height: 1.6; font-size: 0.96rem; }
.comment-empty { color: #9AA1B8; font-size: 0.92rem; }

/* ---- Comment threading, edit/delete, team badge ---- */
.comment-item:last-child .comment-content { border-bottom: 1px solid var(--fog-light); }
.comment-list > .comment-item:last-child > .comment-content { border-bottom: none; }
.comment-edited { font-size: 0.8rem; color: #9AA1B8; font-style: italic; }
.team-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(240,169,61,0.15);
    color: var(--accent-deep);
}
.comment-author-deleted, .chat-author-deleted { color: #9AA1B8; font-style: italic; font-weight: 400; }
.comment-body-deleted, .chat-text-deleted { color: #9AA1B8; font-style: italic; }

.comment-actions { display: flex; gap: 16px; margin-top: 8px; align-items: flex-start; flex-wrap: wrap; }
.btn-small { padding: 7px 16px; font-size: 0.84rem; }
.btn-link-danger { color: #B23A3A; }

.comment-reply-toggle, .comment-edit-toggle { display: inline-block; }
/* When a reply/edit form is expanded it claims the full row, so anything
   after it (Edit, Delete) wraps cleanly onto its own line below instead
   of squeezing awkwardly to the right of the open textarea. */
.comment-reply-toggle[open], .comment-edit-toggle[open] { flex-basis: 100%; }
.comment-reply-toggle summary, .comment-edit-toggle summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent-deep);
    list-style: none;
}
.comment-reply-toggle summary::-webkit-details-marker,
.comment-edit-toggle summary::-webkit-details-marker { display: none; }
.comment-reply-toggle summary:hover, .comment-edit-toggle summary:hover { text-decoration: underline; }

.comment-form-inline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    max-width: 480px;
}
.comment-form-inline textarea {
    padding: 10px 12px;
    border: 1.5px solid var(--fog-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    resize: vertical;
    background: var(--bg-soft);
}
.comment-form-inline .btn { align-self: flex-start; }
.comment-delete-form { display: inline; }

.comment-replies {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 24px;
    border-left: 2px solid var(--fog-light);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.comment-item-reply .comment-avatar { width: 32px; height: 32px; font-size: 0.8rem; }

/* ============================================
   Notification bell (header)
   ============================================ */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    color: var(--ink);
}
.notif-bell:hover { background: var(--bg-soft); }
.notif-badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #D9524C;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notifications-page { padding: 50px 0 100px; }
.notifications-inner { max-width: 640px; }
.notifications-inner h1 { font-size: 1.9rem; margin: 8px 0 26px; }
.notification-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.notification-item { border-bottom: 1px solid var(--fog-light); }
.notification-item:last-child { border-bottom: none; }
.notification-link {
    display: flex;
    gap: 14px;
    padding: 16px 4px;
    align-items: flex-start;
}
.notification-link:hover { background: var(--bg-soft); }
.notification-avatar {
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.notification-body { flex: 1; }
.notification-text { font-size: 0.94rem; color: var(--ink); }
.notification-excerpt { font-size: 0.88rem; color: var(--ink-soft); margin-top: 4px; font-style: italic; }
.notification-date { font-size: 0.78rem; color: #9AA1B8; margin-top: 6px; }

/* ============================================
   Community Chatroom
   ============================================ */
.chat-page { padding: 50px 0 100px; }
.chat-page-inner { max-width: 720px; }
.chat-title { font-size: 1.9rem; margin: 8px 0 6px; }
.chat-locked-inner { max-width: 520px; text-align: left; }
.chat-locked-inner h1 { font-size: 1.9rem; margin: 8px 0 12px; }

.chat-window {
    margin-top: 28px;
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    background: var(--bg-soft);
    max-height: 60vh;
    overflow-y: auto;
    padding: 20px;
}
.chat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.chat-empty { color: #9AA1B8; font-size: 0.92rem; text-align: center; padding: 20px 0; }

.chat-message { display: flex; gap: 12px; }
.chat-avatar {
    width: 34px; height: 34px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-message-mine .chat-avatar { background: var(--ink); color: #fff; }
.chat-bubble {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--fog-light);
    border-radius: 12px;
    padding: 10px 14px;
    max-width: 92%;
}
.chat-message-mine .chat-bubble { background: rgba(240,169,61,0.08); }
.chat-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.chat-author { font-weight: 600; font-size: 0.88rem; }
.chat-time { font-size: 0.76rem; color: #9AA1B8; }
.chat-text { color: var(--ink); line-height: 1.55; font-size: 0.94rem; white-space: pre-wrap; word-break: break-word; }
.chat-quote {
    border-left: 3px solid var(--fog);
    padding: 4px 10px;
    margin-bottom: 6px;
    font-size: 0.82rem;
    color: var(--ink-soft);
    background: var(--bg-soft);
    border-radius: 4px;
}
.chat-actions { display: flex; gap: 14px; margin-top: 6px; }
.chat-actions .btn-link { font-size: 0.78rem; }
.chat-edit-form { margin-top: 6px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.chat-edit-form textarea {
    flex: 1;
    min-width: 160px;
    padding: 8px 10px;
    border: 1.5px solid var(--fog-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    resize: vertical;
}

.chat-error {
    color: #B23A3A;
    font-size: 0.88rem;
    margin-top: 10px;
}
.chat-reply-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: 8px;
    padding: 10px 14px;
    margin-top: 14px;
    font-size: 0.86rem;
    color: var(--ink-soft);
}
/* The `display: flex` above would otherwise override the plain HTML
   `hidden` attribute (author CSS always beats the UA stylesheet), so
   this has to be spelled out explicitly or the banner shows empty on
   every page load until JS reveals it on purpose. */
.chat-reply-banner[hidden], .chat-error[hidden], .chat-empty[hidden] { display: none; }
.chat-compose {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-top: 14px;
}
.chat-compose textarea {
    flex: 1;
    padding: 12px 14px;
    border: 1.5px solid var(--fog-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    resize: vertical;
    min-height: 46px;
    background: var(--bg-soft);
}
.chat-compose textarea:focus { outline: none; border-color: var(--accent); }

@media (max-width: 560px) {
    .chat-window { max-height: 50vh; padding: 14px; }
    .chat-bubble { max-width: 100%; }
    .chat-compose { flex-direction: column; align-items: stretch; }
}

/* ============================================
   Chatroom — full-page layout
   ============================================
   Applied via <body class="chat-fullpage"> (set by chatroom.php) on both
   the locked "sign in to chat" state and the live chat itself, so the
   room fills the viewport like a real chat app instead of sitting as one
   scrollable section on an otherwise-normal page — the message list
   scrolls internally, the composer stays pinned at the bottom, and the
   footer is hidden. Pure flexbox, so it works the same on desktop and
   phone without extra breakpoints; the specificity of these selectors
   (all scoped under body.chat-fullpage) already beats the plain
   `.chat-window`/`.chat-bubble` rules in the mobile media query above,
   regardless of source order. */
body.chat-fullpage {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body.chat-fullpage #main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.chat-fullpage .site-footer { display: none; }

body.chat-fullpage .chat-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 0 16px;
}
body.chat-fullpage .chat-page-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    max-width: 900px;
    width: 100%;
}
body.chat-fullpage .chat-locked-inner {
    /* The "sign in to chat" state has nothing to scroll — just center it
       in the available height instead of stretching it. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 520px;
}
body.chat-fullpage .hero-kicker,
body.chat-fullpage .chat-title,
body.chat-fullpage .hero-sub {
    flex-shrink: 0;
}
body.chat-fullpage .chat-window {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 14px;
}
body.chat-fullpage .chat-compose,
body.chat-fullpage .chat-reply-banner,
body.chat-fullpage .chat-error {
    flex-shrink: 0;
}

.not-found { padding: 100px 0 140px; }
.not-found-inner { max-width: 520px; }
.not-found h1 { font-size: 2rem; margin: 14px 0 14px; }
.not-found .hero-sub { margin-bottom: 30px; }

@media (max-width: 760px) {
    .article-body-wrap { grid-template-columns: 1fr; }
    .article-share {
        position: static;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 10px;
    }
    .article-share p { writing-mode: horizontal-tb; transform: none; }
}

/* ============================================
   Search page
   ============================================ */
.search-head { padding-top: 56px; max-width: 720px; }
.search-title { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 14px 0 30px; }

.search-form-large {
    width: 100%;
    padding: 8px 8px 8px 20px;
    gap: 10px;
}
.search-form-large:focus-within { width: 100%; }
.search-form-large input { font-size: 1rem; }
.search-form-large .btn { flex-shrink: 0; }

.search-results { padding: 44px 0 100px; }
.search-hint { color: var(--ink-soft); font-size: 1.02rem; max-width: 50ch; }
.search-count { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 24px; }

/* ============================================
   Account badge (signed-in state in header)
   ============================================ */
.account-link-active { padding: 6px 14px 6px 6px; }
.account-avatar {
    width: 26px; height: 26px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Avatar field on the account page ---- */
.avatar-field { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.avatar-field-preview {
    width: 52px; height: 52px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.avatar-field-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-field input { flex: 1; }
.avatar-field-inputs { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.avatar-field-inputs input[type="file"] { flex: none; padding: 6px 0; }
.auth-checkbox-inline { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: -6px 0 4px; cursor: pointer; }
.auth-checkbox-inline input { width: auto; }

/* ============================================
   Auth pages (login / signup / account)
   ============================================ */
.auth-page { padding: 64px 0 120px; }
.auth-inner { display: flex; justify-content: center; }
.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-soft);
    border: 1px solid var(--fog-light);
    border-radius: var(--radius);
    padding: 40px 36px 36px;
}
.auth-title { font-size: 1.9rem; margin: 12px 0 6px; }
.auth-sub { color: var(--ink-soft); margin-bottom: 26px; }
.auth-hint { color: var(--ink-soft); font-size: 0.8rem; margin: 0 0 4px; }

.auth-errors {
    background: rgba(217, 76, 76, 0.08);
    border: 1px solid rgba(217, 76, 76, 0.25);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 22px;
}
.auth-errors p { color: #B23A3A; font-size: 0.9rem; margin: 4px 0; }

.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 14px;
}
.auth-form input {
    padding: 11px 14px;
    border: 1.5px solid var(--fog-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    background: var(--bg);
    transition: border-color 0.15s var(--ease);
}
.auth-form input:focus {
    outline: none;
    border-color: var(--accent);
}
.auth-submit { margin-top: 24px; width: 100%; }

.auth-switch {
    margin-top: 22px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    text-align: center;
}
.auth-switch a { color: var(--accent-deep); font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

.account-details {
    margin-top: 6px;
    padding-top: 20px;
    border-top: 1px solid var(--fog-light);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.account-details p { font-size: 0.94rem; color: var(--ink-soft); }
.account-details strong { color: var(--ink); }

/* ============================================
   OAuth ("Continue with...") buttons
   ============================================ */
.oauth-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.btn-oauth {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--fog-light);
    gap: 10px;
    width: 100%;
    font-size: 0.92rem;
}
.btn-oauth:hover { border-color: var(--fog); background: var(--bg-soft); }
.btn-oauth svg { flex-shrink: 0; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 4px;
    color: var(--ink-soft);
    font-size: 0.82rem;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fog-light);
}

.auth-notice {
    background: rgba(76, 175, 118, 0.1);
    border: 1px solid rgba(76, 175, 118, 0.3);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 22px;
}
.auth-notice p { color: #2E7D4F; font-size: 0.9rem; margin: 4px 0; }

.auth-forgot { margin: 6px 0 0; text-align: right; font-size: 0.85rem; }
.auth-forgot a { color: var(--accent-deep); font-weight: 600; }
.auth-forgot a:hover { text-decoration: underline; }

/* ============================================
   OTP code input
   ============================================ */
.otp-input {
    letter-spacing: 0.5em;
    font-size: 1.3rem !important;
    font-weight: 700;
    text-align: center;
}
.otp-resend-form { margin-top: 16px; text-align: center; }
.btn-link {
    background: none;
    border: none;
    color: var(--accent-deep);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 4px;
}
.btn-link:hover { text-decoration: underline; }

/* ============================================
   Account settings: tabs, tier badge, sections
   ============================================ */
.auth-inner-wide { }
.account-card { max-width: 520px; }

.tier-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.account-tabs {
    display: flex;
    gap: 4px;
    margin: 26px 0 22px;
    border-bottom: 1px solid var(--fog-light);
}
.account-tabs a {
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.account-tabs a:hover { color: var(--ink); }
.account-tabs a.is-active { color: var(--ink); border-bottom-color: var(--accent-deep); }

.account-form { gap: 4px; }
.account-form select {
    padding: 11px 14px;
    border: 1.5px solid var(--fog-light);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.96rem;
    background: var(--bg);
}
.account-section-title { font-size: 1.1rem; margin: 6px 0 14px; }
.account-divider { height: 1px; background: var(--fog-light); margin: 30px 0; }
.account-logout { margin-top: 30px; }

/* ============================================
   Articles archive
   ============================================ */
.archive-head { padding-top: 56px; max-width: 700px; }
.archive-title { font-size: clamp(2rem, 4vw, 2.7rem); margin: 14px 0 14px; }
.archive-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 26px;
}
.archive-filters a {
    font-size: 0.86rem;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--fog-light);
    color: var(--ink-soft);
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.archive-filters a:hover { border-color: var(--ink); color: var(--ink); }
.archive-filters a.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.archive-results { padding: 44px 0 60px; }
.archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 30px;
}
.archive-grid .list-article { border-bottom: none; padding-bottom: 0; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 56px;
}
.pagination-status { font-size: 0.86rem; color: var(--ink-soft); }

@media (max-width: 900px) {
    .archive-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .archive-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FAQ accordion
   ============================================ */
.faq-list { padding-top: 40px; display: flex; flex-direction: column; }
.faq-item {
    border-bottom: 1px solid var(--fog-light);
    padding: 18px 0;
}
.faq-item summary {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--accent-deep);
    flex-shrink: 0;
    transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
    margin-top: 14px;
    color: var(--ink-soft);
    line-height: 1.65;
    max-width: 62ch;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
    .main-nav, .search-form { display: none; }
    .account-link > span:not(.account-avatar) { display: none; }
    .account-link-active { padding: 6px; }
    .account-link:not(.account-link-active) { padding: 8px; }
    .nav-toggle { display: flex; }

    /* Header becomes a compact two-row bar on phones: the branding/icon row
       stays as-is above, and the search box (normally hidden with .search-form)
       reappears here as its own full-width row so search is always one tap
       away instead of buried in the hamburger menu. */
    .header-inner { padding: 12px 20px; gap: 10px; }
    .header-actions { gap: 4px; }
    .mobile-topbar-search { display: flex; margin: 0 20px 12px; }

    .hero-inner { grid-template-columns: 1fr; }
    .hero-art { order: -1; max-width: 320px; }
    .hero-stats { gap: 26px; }
    .latest-grid { grid-template-columns: 1fr; }
    .mini-grid { grid-template-columns: 1fr 1fr; }
    .community-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .join-inner { padding: 36px 28px; }
}

@media (max-width: 560px) {
    .header-inner { padding: 10px 16px; gap: 8px; }
    .mobile-topbar-search { margin: 0 16px 10px; padding: 9px 14px; }
    .notif-bell { width: 34px; height: 34px; }
    .nav-toggle { width: 34px; height: 34px; }
    .account-link-active { padding: 4px; }
    .account-link:not(.account-link-active) { width: 34px; height: 34px; padding: 0; justify-content: center; }
    .account-avatar { width: 26px; height: 26px; font-size: 0.74rem; }
    .logo { font-size: 1.02rem; gap: 6px; }
    .section-inner { padding: 0 20px; }
    .hero { padding: 44px 0 60px; }
    .hero-inner, .latest-grid { padding: 0 20px; }
    .mini-grid { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .topic-card { width: 148px; }
    .trend-card { width: 220px; }
    .footer-inner { grid-template-columns: 1fr; padding: 0 20px 40px; }

    /* Auth cards (login/signup/account/etc): tighter padding so the "Continue
       with Microsoft" button has room to stay on one line like Google's does. */
    .auth-card { padding: 32px 22px 28px; }
    .btn-oauth { padding: 13px 14px; font-size: 0.88rem; white-space: nowrap; }
}

/* Icon-only branding on the narrowest phones (guarantees the header never
   overflows into the notification bell / avatar / hamburger cluster, no
   matter how the actual web font happens to measure). */
@media (max-width: 400px) {
    .logo-word { display: none; }
    .logo { gap: 0; }
}

/* Community band and topic/trend rails on very small phones */
@media (max-width: 480px) {
    .community { padding: 56px 0; }
    .community-card { padding: 22px 20px 24px; }
}