/* Berita — base styles (Fase 1) */

:root {
    --color-ink: #0A0A0A;
    --color-gold: #C5A059;
    --color-gold-light: #E8D5A3;
    --color-gold-dark: #9A7B3C;
    --color-gold-50: #F5EDD8;
    --color-primary: #0A0A0A;
    --color-accent: #C5A059;
    --color-bg: #F5F5F5;
    --color-surface: #ffffff;
    --color-text: #1A1A1A;
    --color-muted: #6B7280;
    --color-border: #E5E5E5;
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-serif: var(--font-sans);
    --font-display: var(--font-sans);
    --container: 1280px;
    --radius: 6px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-surface: 0 2px 10px rgba(10, 10, 10, 0.065);
    --shadow-sm: 0 4px 16px rgba(10, 10, 10, 0.08);
    --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.08);
    --header-glass-bg: rgba(255, 255, 255, 0.84);
    --header-glass-border: rgba(10, 10, 10, 0.08);
    --headline-bar-bg: var(--color-ink);
    --headline-bar-border: rgba(197, 160, 89, 0.32);
    --site-gutter: 1rem;
    --article-meta-sep: ".";
    --hero-panel-desc: 0.6875rem;
    --hero-dek-lh: 1.45;
    --hero-feed-item-title: 0.875rem;
    --hero-feed-item-title-lh: 1.48;
    --hero-feed-item-meta: 0.75rem;
    --hero-feed-item-meta-lh: 1.45;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

.site-nav.is-open { display: flex; }

@media (max-width: 1023px) {
    .site-nav:not(.is-open) { display: none; }
    .nav-toggle { display: inline-flex; }
    .site-header .site-nav {
        flex: 0 0 100%;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .site-header .nav-list--archive { flex-direction: row; flex-wrap: wrap; }
    .site-header .search-form {
        width: 100%;
        display: flex;
        gap: 0.5rem;
        margin-left: 0;
    }
    .site-header .nav-categories {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
    }
}

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

/* Public Tailwind fallback for offline/local rendering */
.site-header .header-top-inner,
.site-header .header-nav-inner,
.header-headlines-inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
}

.public-home { background: var(--color-bg); padding-bottom: 3rem; }
.public-container { width: 100%; margin: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.public-page { background: var(--color-bg); padding: 0 0 3rem; }
.public-page-header {
    margin: 0 0 1.5rem;
    padding: 1.5rem 0 1rem;
    border-bottom: 2px solid #C5A059;
}
.public-page-header h1 {
    margin: 0;
    font-family: var(--font-display);
    color: #0A0A0A;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 700;
}
.public-page-header p:not(.page-kicker) {
    max-width: 720px;
    margin: 0.75rem 0 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
}
.page-kicker {
    margin: 0 0 0.5rem;
    color: #9A7B3C;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.public-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}
.public-main {
    min-width: 0;
    display: grid;
    gap: 1rem;
}
.public-sidebar {
    min-width: 0;
    display: grid;
    gap: 1.25rem;
    align-content: start;
}
.public-section-title,
.section-title {
    margin: 1.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #C5A059;
    color: #0A0A0A;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}
.empty-state {
    margin: 0;
    border: 1px dashed #cbd5e1;
    background: #fff;
    padding: 1.25rem;
    color: #64748b;
    font-style: normal;
}

.public-search {
    width: 100%;
    max-width: 760px;
    margin: 0 0 1.5rem;
    display: flex;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
}
.public-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.75rem 0.875rem;
}
.public-search button,
.btn-primary {
    border: 0;
    border-radius: 4px;
    background: #C5A059;
    color: #0A0A0A !important;
    padding: 0.75rem 1rem;
    font-weight: 800;
}

.public-search button:hover,
.btn-primary:hover {
    background: #9A7B3C;
    color: #0A0A0A !important;
}
.btn-ghost {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #0A0A0A !important;
}

.chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.chip-grid--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.chip-card {
    display: block;
    min-height: 120px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 1.25rem;
    color: #0A0A0A;
}
.chip-card strong {
    display: block;
    color: #0A0A0A;
    font-size: 1.125rem;
    font-weight: 900;
}
.chip-card span {
    display: block;
    margin-top: 0.5rem;
    color: #64748b;
    font-size: 0.925rem;
    line-height: 1.6;
}
.chip-card:hover {
    border-color: #C5A059;
    color: #C5A059;
}
.chip--large {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    padding: 0.625rem 1rem;
    color: #334155;
    font-size: 0.95rem;
    font-weight: 800;
}
.chip--large:hover { border-color: #C5A059; color: #C5A059; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.5rem 0 0;
}
.pagination a,
.pagination span {
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.625rem 0.875rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 800;
}
.pagination a:hover {
    border-color: #C5A059;
    color: #C5A059;
}
.pagination .is-disabled {
    color: #94a3b8;
    opacity: 1;
}

.public-article {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    padding: clamp(1.25rem, 4vw, 2.5rem);
}
.article-header h1 {
    margin: 0.75rem 0 1rem;
    color: #0A0A0A;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.75rem);
    line-height: 1.12;
    font-weight: 700;
}
.article-featured-image {
    margin: 1.5rem -1px;
    border-radius: 0;
    overflow: hidden;
}
.article-featured-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.article-content {
    color: #1f2937;
    font-family: var(--font-sans);
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    line-height: 1.9;
}

/* Fallback: WordPress legacy inline font overrides */
.article-content [style*="font-family"],
.article-content font {
    font-family: inherit !important;
}
.article-content p { margin: 0 0 1.35rem; }
.article-read-also {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: #fff;
    border-left: 5px solid var(--color-accent);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
}
.article-read-also-label {
    color: var(--color-primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.article-read-also a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.article-read-also a:hover {
    color: var(--color-accent);
}
.article-content h2,
.article-content h3 {
    margin: 2rem 0 1rem;
    color: #0A0A0A;
    font-family: var(--font-sans);
    line-height: 1.25;
}
.article-tags {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    color: #64748b;
    font-weight: 800;
}

.author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.author-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 1rem;
    color: #0A0A0A;
    box-shadow: none;
}
.author-card:hover { border-color: #C5A059; }
.author-card-avatar,
.author-profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}
.author-card-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C5A059;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
}
.author-card-body strong { color: #0A0A0A; font-weight: 900; }
.author-card-body p { margin: 0.35rem 0 0; color: #64748b; font-size: 0.9rem; line-height: 1.6; }
.public-author-profile {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    border-bottom: 2px solid #0A0A0A;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
}
.public-author-profile h1 {
    margin: 0;
    font-family: var(--font-display);
    color: #0A0A0A;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
}
.public-author-profile p { margin: 0.5rem 0 0; color: #475569; }
.author-contact { color: #9A7B3C !important; font-weight: 800; }

.comments-section {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--shadow-surface);
}
.comments-section h2 {
    margin: 0 0 1rem;
    color: #0A0A0A;
    font-size: 1.25rem;
    font-weight: 900;
}
.comment-form {
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 1rem;
}
.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
    color: #0A0A0A;
    font-weight: 800;
}
.comment-form textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0.75rem;
    font: inherit;
}
.comment { border-bottom: 1px solid #e2e8f0; padding: 1rem 0; }
.comment-header { display: flex; flex-wrap: wrap; gap: 0.75rem; color: #64748b; font-size: 0.875rem; }
.comment-body { margin-top: 0.35rem; white-space: pre-wrap; }

.public-footer {
    margin-top: 0;
    background: #0A0A0A;
    color: #cbd5e1;
}
.public-footer .footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.public-footer strong,
.public-footer h3 { color: #fff; }
.public-footer p {
    max-width: 420px;
    color: #cbd5e1;
    line-height: 1.7;
}
.public-footer ul { list-style: none; padding: 0; margin: 0; }
.public-footer li + li { margin-top: 0.4rem; }
.public-footer a { color: #cbd5e1; }
.public-footer a:hover { color: #C5A059; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    color: #94a3b8;
}

@media (min-width: 1024px) {
    .public-layout { grid-template-columns: 1fr 320px; }
}

@media (max-width: 640px) {
    .public-search { flex-direction: column; }
    .public-author-profile { align-items: flex-start; flex-direction: column; }
}

.article-card {
    display: grid;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-surface);
    margin-bottom: 0;
}

.article-card-image { display: block; overflow: hidden; background: #f1f5f9; }
.article-card-image img { width: 100%; height: 100%; min-height: 11rem; object-fit: cover; aspect-ratio: auto; }
.article-card-body { padding: 1rem; }
.article-card-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.article-card .chip { border-radius: 999px; background: #F5EDD8; color: #9A7B3C; padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; }
.article-card-title { margin: 0; font-size: 1.125rem; line-height: 1.35; font-weight: 900; color: #0A0A0A; }
.article-card-title a { color: inherit; }
.article-card-title a:hover { color: #9A7B3C; }
.article-card-excerpt { margin: 0.5rem 0 0; color: #475569; font-size: 0.875rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; color: #64748b; font-size: 0.75rem; font-weight: 700; }
.article-card-meta a { color: #334155; }
.article-card-meta a:hover { color: #C5A059; }

@media (min-width: 768px) {
    .site-chrome--header .site-header > .header-top {
        padding-left: 0;
        padding-right: 0;
    }

    .article-card { grid-template-columns: 220px 1fr; }
    .article-card-image img { min-height: 0; }
}

@media (min-width: 1024px) {
    .public-container { padding-left: 1.5rem; padding-right: 1.5rem; }
    .home-lead { grid-template-columns: 1.35fr 0.9fr; }
    .home-lead > a img { min-height: 430px; }
    .home-lead-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
    .home-grid { grid-template-columns: 1fr 320px; }
}

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

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-accent); }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: auto;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #e2e8f0;
}

.site-header .nav-toggle span {
    background: #C5A059;
}

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

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

.nav-list a.is-active { font-weight: 600; color: var(--color-accent); }

.nav-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
}

.nav-label { color: var(--color-muted); }

.search-form {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.search-form input {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
    min-width: 160px;
}

.search-form button {
    padding: 0.4rem 0.75rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-user { display: flex; align-items: center; gap: 0.5rem; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.btn-primary {
    background: var(--color-gold);
    color: #0A0A0A !important;
}

.btn-primary:hover { background: var(--color-gold-dark); color: #0A0A0A !important; }

.btn-ghost {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text) !important;
}

/* Main */
.main-content { padding: 2rem 0 3rem; min-height: 60vh; }

.hero { margin-bottom: 2rem; }

.hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 0.5rem;
    color: var(--color-primary);
}

.hero-lead { font-size: 1.125rem; color: var(--color-muted); margin: 0 0 1.5rem; }

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.home-placeholder {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
    color: var(--color-muted);
}

.layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

/* Article card */
.article-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.article-card-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.article-card-body { padding: 1rem 1.25rem; }

.article-card-categories { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

.chip {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    background: var(--color-gold-50);
    border-radius: 999px;
    color: var(--color-muted);
}

.article-card-title { margin: 0 0 0.5rem; font-size: 1.15rem; }

.article-card-excerpt { color: var(--color-muted); margin: 0 0 0.75rem; font-size: 0.95rem; }

.article-card-meta {
    font-size: 0.85rem;
    color: var(--color-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    row-gap: 0.35rem;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 0;
}

.pagination-prev.is-disabled,
.pagination-next.is-disabled {
    color: var(--color-muted);
    opacity: 0.5;
}

/* Ads */
.ad-unit {
    position: relative;
    margin: 0.75rem 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.ad-unit[hidden],
.ad-unit--empty {
    display: none !important;
}

.ad-unit-body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width: 100%;
}

.ad-unit--header {
    margin: 0.5rem 0 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: none;
    background: inherit;
}

.ad-unit--footer {
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--color-border);
}

.ad-unit--footer .ad-unit-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.ad-unit--header .ad-unit-body {
    max-width: none;
    margin: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

.ad-unit--sticky {
    margin: 0;
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: 0 -4px 20px rgba(10, 10, 10, 0.08);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: none;
}

.ad-unit--billboard {
    margin: 1.25rem 0;
}

.ad-unit--between {
    margin: 0;
    padding: 0.75rem 0 0.25rem;
}

.ad-unit--sidebar {
    position: sticky;
    top: calc(var(--header-offset, 120px) + 0.5rem);
}

.ad-unit--in-article {
    margin: 1.5rem 0;
    max-width: 336px;
    margin-left: auto;
    margin-right: auto;
}

.page-article-content .ad-unit--in-article {
    clear: both;
}

.ad-unit .ad-link {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    border-radius: 4px;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.ad-unit .ad-link:hover {
    opacity: 0.94;
}

.ad-unit .ad-link:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

.ad-unit-sponsor {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    z-index: 2;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.72);
    color: #94a3b8;
    font-size: 0.4375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    pointer-events: none;
    user-select: none;
}

.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.ad-slot[data-ad-loaded="false"],
.ad-slot:empty {
    display: none;
}

.ad-slot[data-ad-loading="true"] {
    display: flex;
    min-height: 50px;
}

.ad-slot--header {
    background: transparent;
    padding: 0;
    border: none;
}

.ad-slot[data-ad-loaded="true"] {
    --ad-slot-width: var(--ad-width, auto);
    --ad-slot-height: var(--ad-height, auto);
    --ad-slot-ratio: var(--ad-aspect-ratio, auto);
}

.ad-slot[data-ad-loaded="true"] .ad-link {
    width: min(var(--ad-slot-width), 100%);
    aspect-ratio: var(--ad-slot-ratio);
}

.ad-slot[data-ad-loaded="true"] .ad-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8fafc;
}

body.has-sticky-ad {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
    .ad-unit--sticky:not([hidden]):not(.ad-unit--empty) {
        display: block;
    }

    .ad-slot[data-ad-loaded="true"] .ad-link img {
        object-fit: cover;
    }

    .story-feed-ad .ad-unit {
        margin: 0 0.5rem;
    }
}

/* Flash */
.flash { padding: 0.75rem 0; font-weight: 500; }
.flash--success { background: #c6f6d5; color: #22543d; }
.flash--error { background: #fed7d7; color: #742a2a; }
.flash--info { background: #bee3f8; color: #2a4365; }

/* Footer */
.site-footer {
    background: var(--color-ink);
    color: #e2e8f0;
    margin-top: 2rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    padding: 2.5rem 1rem;
}

.footer-brand strong { font-size: 1.25rem; color: #fff; }

.footer-nav h3 { color: #fff; margin: 0 0 0.75rem; font-size: 0.95rem; }

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

.footer-nav a { color: #cbd5e0; }
.footer-nav a:hover { color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1rem 0;
    font-size: 0.875rem;
    color: #a0aec0;
}

/* Error pages */
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page h1 { font-size: 4rem; margin: 0; color: var(--color-primary); }

/* Admin shell (placeholder) */
.admin-body { background: var(--color-bg); }

.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: 240px;
    background: var(--color-primary);
    color: #fff;
    padding: 1.5rem;
}

.admin-logo { margin: 0 0 1rem; font-size: 1.25rem; }

.admin-note { font-size: 0.875rem; opacity: 0.8; }

.admin-main { flex: 1; padding: 2rem; }

/* Page header */
.page-header { margin-bottom: 2rem; }
.page-header h1 { margin: 0 0 0.5rem; color: var(--color-primary); }
.page-header p { color: var(--color-muted); margin: 0; }

.section-title { font-size: 1.25rem; margin: 2rem 0 1rem; color: var(--color-primary); }
.section-more { margin-top: 1.5rem; }
.empty-state { color: var(--color-muted); font-style: italic; }

/* Hero featured */
.hero-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.hero-featured-image img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.hero-featured-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.hero-featured-body h1 { margin: 0.5rem 0; font-size: 1.75rem; }
.hero-featured-body h1 a { color: var(--color-text); }

/* Article full */
.article-full { background: var(--color-surface); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); margin-bottom: 2rem; }
.article-header h1 { margin: 0.5rem 0 1rem; font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.3; font-weight: 700; }
.article-featured-image { margin: 1.5rem 0; border-radius: var(--radius); overflow: hidden; }
.article-content { font-family: var(--font-sans); font-size: 1.1rem; line-height: 1.8; }
.article-content p { margin: 0 0 1.25rem; }
.article-content h2, .article-content h3 { margin: 2rem 0 1rem; font-family: var(--font-sans); }
.article-tags { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Chips */
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.chip-grid--compact { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.chip-card { display: block; padding: 1.25rem; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--color-text); }
.chip-card:hover { border-color: var(--color-primary); }
.chip-card strong { display: block; margin-bottom: 0.35rem; color: var(--color-primary); }
.chip-card span { font-size: 0.9rem; color: var(--color-muted); }
.chip--large { font-size: 1rem; padding: 0.5rem 1rem; }

/* Authors */
.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.author-card { display: flex; gap: 1rem; padding: 1.25rem; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--color-text); }
.author-card-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-card-avatar--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-weight: 700; text-transform: uppercase; }
.author-card-body p { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--color-muted); }
.author-profile { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
.author-profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-contact { font-size: 0.9rem; color: var(--color-muted); }

/* Comments */
.comments-section { margin-top: 2rem; }
.comments-section h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.comment-form { background: var(--color-surface); padding: 1.25rem; border-radius: var(--radius); margin-bottom: 1.5rem; }
.comment-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; resize: vertical; }
.comment { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.comment-header { display: flex; gap: 1rem; align-items: baseline; margin-bottom: 0.35rem; font-size: 0.9rem; }
.comment-header time { color: var(--color-muted); }
.comment-body { margin-bottom: 0.5rem; white-space: pre-wrap; }
.comment-replies { margin-left: 1.5rem; border-left: 2px solid var(--color-border); padding-left: 1rem; }
.btn-sm { font-size: 0.85rem; padding: 0.25rem 0.5rem; }

/* Auth */
.container--narrow { max-width: 480px; }
.auth-card { background: var(--color-surface); padding: 2rem; border-radius: var(--radius); box-shadow: var(--shadow); }
.auth-card h1 { margin: 0 0 0.5rem; color: var(--color-primary); }
.auth-form { margin-top: 1.5rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: 0.35rem; font-weight: 500; font-size: 0.9rem; }
.form-group input, .form-group textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }
.form-group small { color: var(--color-muted); font-size: 0.8rem; }
.form-error { color: var(--color-accent); font-size: 0.9rem; }
.form-success { color: #276749; font-size: 0.9rem; }
.btn-block { width: 100%; }
.auth-switch { margin-top: 1.5rem; text-align: center; font-size: 0.9rem; color: var(--color-muted); }
.profile-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.profile-section h2 { font-size: 1.1rem; margin: 0 0 1rem; }

.search-form--page { margin-bottom: 2rem; max-width: 480px; }

/* Responsive */
@media (max-width: 900px) {
    .hero-featured { grid-template-columns: 1fr; }
    .layout-with-sidebar { grid-template-columns: 1fr; }
    .layout-sidebar { order: -1; }
}

/* Final public redesign overrides */
.public-container.container,
.public-container {
    width: 100%;
    margin: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.public-page .layout-with-sidebar,
.public-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.public-page .layout-sidebar,
.public-sidebar {
    order: initial;
}

.public-page-header h1 {
    font-family: var(--font-display);
    color: #0A0A0A;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 700;
}

.public-page-header p:not(.page-kicker) {
    color: #475569;
}

.public-page .article-card {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: var(--shadow-surface);
}

.public-page .article-card-title a,
.public-home .article-card-title a {
    color: #0A0A0A;
}

.public-page .article-card-title a:hover,
.public-home .article-card-title a:hover {
    color: #C5A059;
}

.public-article.article-full {
    max-width: 900px;
    margin: 0 auto 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.public-article .article-header h1 {
    font-family: var(--font-display);
    color: #0A0A0A;
    font-size: clamp(2rem, 6vw, 3.75rem);
    line-height: 1.12;
    font-weight: 700;
}

.public-article .article-content {
    color: #1f2937;
    font-size: clamp(1.05rem, 2vw, 1.18rem);
    line-height: 1.9;
}

.public-page .chip-card,
.public-page .author-card,
.public-page .auth-card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid #e2e8f0;
}

.public-page .comments-section.page-comments,
.public-page .page-comments {
    border-radius: 12px;
    box-shadow: var(--shadow-surface);
    border: 1px solid var(--color-border);
}

.public-page .page-comments .comment-form,
.public-page .page-comments .comment-login-prompt {
    box-shadow: none;
}

.public-page .chip-card strong,
.public-page .author-card-body strong,
.public-page .auth-card h1 {
    color: #0A0A0A;
    font-weight: 900;
}

.public-page .author-card-avatar--placeholder {
    background: #C5A059;
}

.public-footer.site-footer {
    background: #0A0A0A;
    color: #cbd5e1;
}

.public-footer .footer-inner {
    padding: 2.5rem var(--site-gutter);
}

.public-footer strong,
.public-footer h3 {
    color: #fff;
}

.public-footer p,
.public-footer a {
    color: #cbd5e1;
}

.public-footer a:hover {
    color: #C5A059;
}

.public-footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    color: #94a3b8;
}

@media (min-width: 768px) {
    .public-page .article-card,
    .public-home .article-card {
        grid-template-columns: 220px 1fr;
    }
}

@media (min-width: 1024px) {
    .public-container.container,
    .public-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .public-page .layout-with-sidebar,
    .public-layout {
        grid-template-columns: 1fr 320px;
    }
}

/* Distinct page identities */
.public-page--archive .public-page-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: 6px solid #0A0A0A;
    padding: 1.25rem;
}

.archive-ribbon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.archive-ribbon span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0.35rem 0.75rem;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-page--archive .article-card,
.public-page--category .article-card,
.public-page--topics .article-card {
    border-left: 5px solid #C5A059;
}

.public-page--map {
    background:
        linear-gradient(90deg, rgba(197,160,89,0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(15,23,42,0.05) 1px, transparent 1px),
        var(--color-bg);
    background-size: 44px 44px;
}

.public-page--map .public-page-header {
    background: #0A0A0A;
    color: #fff;
    border: 0;
    padding: 1.5rem;
}

.public-page--map .public-page-header h1,
.public-page--map .public-page-header p {
    color: #fff;
}

.font-display {
    font-family: var(--font-display);
}

.public-page--map .page-kicker {
    color: #C5A059;
}

.public-page--map .chip-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.public-page--map .chip-card {
    position: relative;
    min-height: 150px;
    border: 0;
    border-top: 5px solid #C5A059;
    background: #fff;
}

.public-page--map .chip-card::after {
    content: "Buka kanal";
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    color: #C5A059;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.public-page--category .public-page-header {
    border-bottom: 0;
    background: linear-gradient(90deg, #C5A059 0 10px, #fff 10px);
    border: 1px solid #e2e8f0;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
}

.public-page--topics .public-page-header {
    border: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    padding: 1.25rem 0;
}

.topic-cloud {
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    background: #fff;
}

.topic-cloud .chip--large {
    background: #fff;
    color: #334155;
    border-color: #e2e8f0;
}

.topic-cloud .chip--large:hover {
    border-color: #C5A059;
    color: #C5A059;
    background: #F5EDD8;
}

.public-page--search .public-page-header {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-bottom: 4px solid #C5A059;
    padding: 1.25rem;
}

.search-desk {
    max-width: none;
    border: 2px solid #0A0A0A;
    box-shadow: 8px 8px 0 #e2e8f0;
}

.search-desk input {
    font-size: 1rem;
}

.public-page--authors {
    background: var(--color-bg);
}

.public-page--authors .public-page-header,
.public-page--author .public-author-profile {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 6px solid #0A0A0A;
    padding: 1.25rem;
}

.public-page--authors .author-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.public-page--authors .author-card {
    min-height: 150px;
    border: 0;
    background: #fff;
}

.public-page--authors .author-card-avatar,
.public-page--author .author-profile-avatar {
    width: 76px;
    height: 76px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #cbd5e1;
}

.public-page--article {
    background: var(--color-bg);
}

.public-page--article .public-container {
    max-width: none;
}

.article-page-stack {
    width: 100%;
    max-width: none;
    margin: 0;
}

.article-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    width: 100%;
}

.article-detail-main,
.article-detail-aside {
    min-width: 0;
}

.article-detail-main {
    display: grid;
    gap: 0.625rem;
}

.article-aside-stick {
    position: static;
}

.article-ad-frame {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    padding: 0.75rem;
    overflow: hidden;
}

.article-ad-label {
    margin: 0 0 0.5rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.ad-unit--article-aside {
    margin: 0;
}

.ad-unit--rail-left,
.ad-unit--rail-right {
    width: auto;
    max-width: 160px;
    margin: 0;
    position: relative;
    z-index: 0;
}

@media (min-width: 1024px) {
    .article-detail-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-areas: "main aside";
        gap: 1.5rem 2rem;
    }

    .article-detail-main {
        grid-area: main;
    }

    .article-detail-aside {
        grid-area: aside;
    }

    .article-aside-stick {
        position: sticky;
        top: calc(7rem + env(safe-area-inset-top, 0px));
    }
}

.page-container--article .breadcrumb {
    margin-bottom: 1rem;
}

.page-container--article .breadcrumb ol {
    margin-bottom: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.article-page-stack .public-article,
.article-page-stack .article-full {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.article-page-stack .breadcrumb ol {
    margin-bottom: 1.25rem;
}

.public-page--article .article-meta-top,
.public-page--article .article-meta-bottom-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    row-gap: 0.35rem;
}

.public-page--article .article-meta-top {
    margin-top: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.public-page--article .article-meta-top > * + *::before,
.public-page--article .article-meta-bottom-primary > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.35rem;
    color: #cbd5e1;
    font-weight: 400;
}

.public-page--article .article-meta-top .article-meta-author {
    font-weight: 800;
    color: #334155;
}

.public-page--article .article-meta-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.public-page--article .article-meta-bottom .share-buttons {
    margin: 0;
}

.public-page--article .article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    row-gap: 0.35rem;
    padding: 0.75rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.public-page--article .article-card-meta > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.35rem;
    color: #cbd5e1;
    font-weight: 400;
}

.public-page--article .article-page-comments,
.public-page--article .page-comments {
    width: 100%;
    max-width: none;
    margin: 0;
}

.public-page--article .article-full.page-article {
    margin-bottom: 0;
}

.public-page--article .article-nav {
    margin-top: 0;
}

.public-page--auth {
    min-height: 60vh;
    background: linear-gradient(90deg, #0A0A0A 0 35%, var(--color-bg) 35% 100%);
}

.public-page--auth .container--narrow {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.public-page--auth .auth-card {
    border-top: 6px solid #C5A059;
}

@media (max-width: 767px) {
    .public-page--auth {
        background: var(--color-bg);
    }

    .search-desk {
        box-shadow: none;
    }
}

/* Homepage first-screen density */

.ad-slot--header {
    position: static;
    z-index: 1;
    margin: 0;
    border: none;
}

/* ============================================================
   Newsroom v3 — Header, Homepage, Footer redesign
   ============================================================ */

.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;
}

/* --- Header (merdeka-style) --- */

.site-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: inherit;
    text-decoration: none;
}

.brand-name {
    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1;
}

.site-logo .brand-name {
    font-size: 1.25rem;
    font-weight: 900;
}

.header-search {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
    max-width: 480px;
    margin-left: auto;
    min-height: 2.125rem;
    padding: 0 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.header-search:focus-within {
    background: #fff;
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.12);
}

.header-search-icon {
    display: flex;
    color: var(--color-gold-dark);
    flex-shrink: 0;
}

.header-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.8125rem;
}

.header-search input::placeholder {
    color: #9ca3af;
}

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

.nav-toggle {
    display: none;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-ink);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}

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

.site-header .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

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

.header-nav {
    border-bottom: none;
}

.header-nav-inner {
    padding-top: 0;
    padding-bottom: 0;
}

.site-nav {
    display: flex;
    align-items: stretch;
    min-height: 3rem;
}

.header-nav-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-width: 0;
}

.header-nav-section {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.header-nav-section--archive {
    flex-shrink: 0;
}

.header-nav-section--categories {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.header-nav-section--categories .header-nav-scroll {
    width: 100%;
}

.header-nav-label {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
}

.header-nav-label--link {
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    color: var(--color-gold-dark);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.header-nav-label--link:hover,
.header-nav-label--link.is-active {
    background: rgba(197, 160, 89, 0.12);
    color: var(--color-ink);
}

.header-nav-divider {
    flex-shrink: 0;
    align-self: stretch;
    width: 1px;
    min-height: 1.75rem;
    margin: 0.625rem 0;
    background: var(--color-border);
}

.header-nav-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 0.75rem, #000 calc(100% - 0.75rem), transparent 100%);
}

.header-nav-scroll::-webkit-scrollbar {
    display: none;
}

.header-nav-scroll:focus {
    outline: none;
}

.header-nav-scroll:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(197, 160, 89, 0.45);
    border-radius: 8px;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list--archive {
    flex-shrink: 0;
}

.nav-list--categories {
    flex-wrap: nowrap;
    gap: 0.125rem;
}

.nav-link {
    display: block;
    padding: 0.875rem 0.625rem;
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 0.15s;
}

.nav-list--archive > li:first-child > .nav-link {
    padding-left: 0;
}

.nav-link:hover {
    color: var(--color-gold-dark);
}

.nav-link--active {
    color: var(--color-gold-dark);
    box-shadow: inset 0 -2px 0 var(--color-gold);
}

.header-nav-utils {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-utils-separator {
    display: block;
    width: 1px;
    height: 1.5rem;
    background: var(--color-border);
    flex-shrink: 0;
}

.nav-auth {
    display: flex;
    align-items: center;
    position: relative;
}

.nav-auth-link {
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

.nav-auth-link:hover {
    color: var(--color-gold-dark);
}

.nav-auth-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.875rem;
    border: 1px solid var(--color-gold);
    border-radius: 999px;
    color: var(--color-ink);
    font-size: 0.8125rem;
    font-weight: 800;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.nav-auth-btn:hover {
    border-color: var(--color-gold-dark);
    background: var(--color-gold);
    color: var(--color-ink);
}

.nav-user-menu {
    position: relative;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 2px solid var(--color-gold);
    border-radius: 999px;
    background: var(--color-gold-50);
    color: var(--color-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.nav-avatar:hover,
.nav-avatar[aria-expanded="true"] {
    border-color: var(--color-gold-dark);
    background: var(--color-gold-light);
}

.nav-avatar-initials {
    line-height: 1;
    letter-spacing: 0.03em;
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--color-ink);
    user-select: none;
}

.nav-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    z-index: 50;
}

.nav-user-dropdown-logout {
    margin-top: 0.25rem;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 6px 6px;
    padding-top: 0.65rem !important;
}

.nav-user-dropdown-link,
.nav-user-dropdown-logout {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.nav-user-dropdown-link:hover,
.nav-user-dropdown-logout:hover {
    background: var(--color-gold-50);
    color: var(--color-gold-dark);
}

.nav-user-dropdown-logout {
    color: #b91c1c;
}

.nav-user-dropdown-logout:hover {
    background: #fef2f2;
    color: #991b1b;
}

.header-headlines {
    margin: 0.625rem var(--site-gutter) 0;
    width: auto;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--headline-bar-bg);
    overflow: hidden;
}

.header-headlines-inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    min-height: 2.375rem;
    background: transparent;
    border: none;
    border-radius: 0;
}

.header-headlines-badge {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--color-gold);
    color: var(--color-ink);
    font-size: 0.5625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.header-headlines-scroll {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.25rem, #000 calc(100% - 1.25rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 0.25rem, #000 calc(100% - 1.25rem), transparent);
}

.header-headlines-track {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: max-content;
    animation: headline-scroll 32s linear infinite;
    will-change: transform;
}

.header-headlines-link {
    flex-shrink: 0;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.header-headlines:hover .header-headlines-track {
    animation-play-state: paused;
}

.header-headlines-link:hover {
    color: var(--color-gold-light);
}

@keyframes headline-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .header-headlines-track {
        animation: none;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .header-headlines-track::-webkit-scrollbar {
        display: none;
    }

    .header-headlines-scroll {
        mask-image: none;
        -webkit-mask-image: none;
    }
}

@media (max-width: 767px) {
    .header-headlines {
        margin-top: 0.5rem;
        border-radius: 6px;
    }

    .header-headlines-inner {
        gap: 0.5rem;
        padding: 0.4375rem 0.625rem;
        min-height: 2.25rem;
    }

    .header-headlines-track {
        animation-duration: 42s;
    }

    .header-headlines-link {
        font-size: 0.75rem;
    }
}

.ad-slot--header {
    margin: 0;
    border: none;
    background: transparent;
}

/* --- Homepage --- */
.public-home {
    background: var(--color-bg);
    padding-bottom: 4rem;
}

.home-container {
    padding-top: 1.75rem;
    padding-bottom: 0;
}

.home-kicker {
    margin: 0 0 0.75rem;
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-hero {
    margin-bottom: 2.75rem;
}

.page-hero-grid {
    display: grid;
    gap: 1.125rem;
    align-items: start;
}

.page-hero-main {
    display: grid;
    gap: 1.125rem;
    min-width: 0;
}

.page-hero-carousel,
.page-hero-featured {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0a;
    box-shadow: var(--shadow-surface);
}

.page-hero-carousel {
    display: flex;
    flex-direction: column;
}

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

.page-hero-slide.is-active {
    display: block;
}

.page-hero-featured {
    min-width: 0;
}

/* Spotlight cards */
.story-spotlight {
    position: relative;
    display: block;
    width: 100%;
    min-height: 200px;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
}

.story-spotlight--lg {
    min-height: 360px;
}

.story-spotlight-media,
.story-spotlight-placeholder {
    position: absolute;
    inset: 0;
}

.story-spotlight-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-spotlight:hover .story-spotlight-media img {
    transform: scale(1.05);
}

.story-spotlight-placeholder {
    background: linear-gradient(145deg, #0a0a0a 0%, #1f1a14 45%, #2d2618 100%);
}

.story-spotlight-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.15) 0%, transparent 38%, rgba(10, 10, 10, 0.55) 68%, rgba(10, 10, 10, 0.94) 100%),
        linear-gradient(90deg, rgba(197, 160, 89, 0.12) 0%, transparent 42%);
    pointer-events: none;
}

.story-spotlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.story-spotlight:hover::after {
    transform: scaleX(1);
}

.story-spotlight-live {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    padding: 0.3rem 0.625rem;
    border-radius: 999px;
    background: var(--color-gold);
    color: var(--color-ink);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.story-spotlight-badges,
.story-feed-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.story-spotlight-badges {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.story-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.story-badge--breaking {
    background: #c62828;
    color: #fff;
}

.story-badge--developing {
    background: var(--color-gold);
    color: var(--color-ink);
}

.story-badge--featured {
    background: var(--color-ink);
    color: #fff;
}

.developing-strip {
    margin: 2rem 0;
    padding: 1.25rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
}

.developing-strip-head {
    margin-bottom: 0.25rem;
}

.developing-strip-title {
    margin: 0 0 1rem;
    font-size: 1.125rem;
}

.developing-strip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.developing-strip-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    color: inherit;
    text-decoration: none;
}

.developing-strip-link:hover .developing-strip-link-title {
    color: var(--color-gold-dark);
}

.developing-strip-link-title {
    flex: 1 1 12rem;
    font-weight: 700;
}

.home-discovery {
    margin: 1.75rem 0 2.25rem;
}

.home-discovery-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.home-discovery-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: var(--shadow-surface);
}

.home-discovery-head {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.home-discovery-intro {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.home-discovery-kicker {
    margin: 0;
    color: var(--color-gold-dark);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-discovery-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-ink);
}

.home-discovery-more {
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.home-discovery-more:hover {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.home-discovery-track {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 1rem;
    overflow: visible;
}

.home-discovery-chip {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border: 0;
    border-bottom: 1px solid #e8e8e4;
    border-radius: 0;
    background: transparent;
    color: var(--color-ink);
    text-decoration: none;
    transition: color 0.15s;
}

.home-discovery-chip:last-child {
    border-bottom: 0;
}

.home-discovery-chip:hover {
    color: var(--color-ink);
}

.home-discovery-chip:hover .home-discovery-chip-name {
    color: var(--color-gold-dark);
}

.home-discovery-chip-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.home-discovery-chip.is-top .home-discovery-chip-rank {
    width: 1.375rem;
    height: 1.375rem;
    background: linear-gradient(145deg, #d4b06a, var(--color-gold));
    color: #fff;
    font-size: 0.6875rem;
    box-shadow: 0 1px 3px rgba(197, 160, 89, 0.28);
}

.home-discovery-chip:nth-child(2) .home-discovery-chip-rank {
    color: #64748b;
    font-weight: 700;
}

.home-discovery-chip-name {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-discovery-chip-count {
    flex-shrink: 0;
    min-width: auto;
    padding: 0;
    color: #b0bac7;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.home-discovery-chip.is-top .home-discovery-chip-count {
    color: var(--color-gold-dark);
    font-weight: 800;
}

.home-discovery-chip--tag .home-discovery-chip-name::before {
    content: "#";
    margin-right: 0.1rem;
    color: var(--color-gold-dark);
    font-weight: 700;
}

.home-discovery-divider {
    display: none;
}

@media (min-width: 768px) {
    .home-discovery-card {
        gap: 1.25rem;
    }

    .home-discovery-row {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .home-discovery-head {
        display: contents;
    }

    .home-discovery-intro {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .home-discovery-track {
        flex: 1 1 auto;
        order: 1;
        flex-direction: row;
        align-items: stretch;
        gap: 0.625rem;
        min-width: 0;
        padding: 0;
    }

    .home-discovery-more {
        flex-shrink: 0;
        order: 2;
    }

    .home-discovery-chip {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.375rem;
        border-bottom: 0;
    }

    .home-discovery-chip-name {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
    }

    .home-discovery-chip-count {
        flex: 0 0 auto;
        margin-top: 0;
        margin-left: 0.125rem;
        text-align: left;
    }
}

.popular-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.popular-tab {
    padding: 0.4rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
}

.popular-tab--active,
.popular-tab:hover {
    border-color: var(--color-gold);
    color: var(--color-ink);
    background: rgba(212, 175, 55, 0.12);
}

.story-feed-list--page {
    margin-top: 1.5rem;
}

.story-spotlight-chip {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(6px);
    color: var(--color-gold-light);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.story-spotlight-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.375rem 1.5rem 1.5rem;
}

.story-spotlight-title {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.22;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.story-spotlight--lg .story-spotlight-title {
    font-size: clamp(1.375rem, 3.2vw, 2.125rem);
}

.story-spotlight-dek {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.625rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.story-spotlight-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.75rem;
    font-weight: 600;
}

.story-spotlight-meta span:first-child {
    color: var(--color-gold-light);
    font-weight: 800;
}

.story-spotlight-meta > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.35rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
}

.page-hero-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.125rem;
}

.page-hero-subgrid .story-spotlight {
    min-height: 200px;
    box-shadow: var(--shadow-surface);
}

@media (min-width: 768px) {
    .page-hero-subgrid .story-spotlight-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: clamp(1rem, 2.2vw, 1.1875rem);
        font-weight: 800;
        line-height: 1.34;
    }
}

/* Feed lists */
.story-feed-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.story-feed-list--panel {
    overflow-y: auto;
    max-height: 480px;
}

.story-feed-item {
    border-bottom: 1px solid var(--color-border);
}

.story-feed-item:last-child {
    border-bottom: 0;
}

.story-feed-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.story-feed-link:hover {
    background: rgba(197, 160, 89, 0.06);
}

.story-feed-item--lead .story-feed-link {
    padding: 0;
}

.story-feed-lead-media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 16 / 10;
    background: #111;
    border: 0;
    box-shadow: none;
}

.story-feed-lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.story-feed-item--lead:hover .story-feed-lead-media img {
    transform: scale(1.04);
}

.story-feed-lead-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #2d2618);
}

.story-feed-lead-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(10, 10, 10, 0.88) 100%);
}

.story-feed-lead-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.875rem 1rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.35;
    color: #fff;
}

.story-feed-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.125rem;
    min-width: 0;
}

.story-feed-rank {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background: var(--color-gold-50);
    color: var(--color-gold-dark);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
}

.story-feed-rank--overlay {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background: rgba(10, 10, 10, 0.78);
    color: var(--color-gold);
}

.story-feed-copy {
    flex: 1;
    min-width: 0;
}

.story-feed-title {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-ink);
}

.story-feed-link:hover .story-feed-title {
    color: var(--color-gold-dark);
}

.story-feed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
}

.story-feed-meta > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.25rem;
    color: #94a3b8;
    font-weight: 400;
}

.article-card-meta > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.35rem;
    color: #94a3b8;
    font-weight: 400;
}

.story-feed-thumb {
    display: block;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    margin: 0.9rem 1.125rem 0.9rem 0;
    overflow: hidden;
    border-radius: 0;
    background: #e2e8f0;
    border: 0;
    box-shadow: none;
}

.story-feed-item:not(.story-feed-item--lead) .story-feed-link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
}

.story-feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category hub */
.category-hub {
    margin-bottom: 2.75rem;
}

.category-hub-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.category-hub-header .page-hero-feed-title {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
}

.category-hub-grid {
    display: grid;
    gap: 1.125rem;
    align-items: stretch;
}

.category-hub-panel--featured .category-hub-featured-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    background: #fff;
}

.category-hub-panel--featured .page-hero-feed-head {
    border-bottom: 0;
}

.category-hub-panel--featured .page-hero--embedded {
    margin: 0;
}

.category-hub-panel--featured .story-spotlight--lg {
    border-radius: 0;
    overflow: hidden;
    border: 0;
    box-shadow: none;
}

.category-hub-featured .story-spotlight--lg,
.page-hero--embedded .story-spotlight--lg {
    height: auto;
    min-height: 0;
}

.home-container .category-hub + .category-hub {
    margin-top: 0.5rem;
}

.home-welcome {
    margin-bottom: 2rem;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
}

.home-welcome-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-ink);
}

.home-welcome-text {
    margin: 0.75rem 0 0;
    max-width: 56ch;
    color: #475569;
    line-height: 1.7;
}

.sidebar-panel {
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.sidebar-panel--dark {
    background: var(--color-ink);
    border-color: rgba(197, 160, 89, 0.25);
    color: #cbd5e1;
}

.sidebar-kicker {
    margin: 0;
    color: var(--color-gold);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-title {
    margin: 0.625rem 0 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.45;
    font-weight: 700;
    color: #fff;
}

.sidebar-checklist {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.sidebar-checklist li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #94a3b8;
}

.sidebar-checklist li + li {
    margin-top: 0.5rem;
}

.sidebar-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
}

.sidebar-heading {
    margin: 0 0 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.sidebar-panel--dark .sidebar-heading {
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.sidebar-panel--dark .sidebar-categories {
    margin-top: 1rem;
}

.sidebar-panel--dark .sidebar-categories li + li {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.sidebar-panel--dark .sidebar-categories a {
    color: #e2e8f0;
}

.sidebar-panel--dark .sidebar-categories a:hover {
    color: var(--color-gold);
}

.sidebar-panel--dark .sidebar-categories a::after {
    color: var(--color-gold);
}

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

.sidebar-categories li + li {
    border-top: 1px solid var(--color-border);
}

.sidebar-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    color: #334155;
    font-size: 0.9375rem;
    font-weight: 700;
}

.sidebar-categories a::after {
    content: "→";
    color: var(--color-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.sidebar-categories a:hover {
    color: var(--color-gold-dark);
}

.sidebar-categories a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.sidebar-panel--explore .sidebar-kicker {
    margin-bottom: 0.25rem;
}

.sidebar-panel--explore .sidebar-heading {
    margin-bottom: 0.5rem;
    padding-bottom: 0;
    border-bottom: 0;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.sidebar-panel--explore .sidebar-text {
    margin-bottom: 0;
}

.explore-search {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.explore-search:focus-within {
    border-color: rgba(197, 160, 89, 0.5);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.1);
}

.explore-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.625rem 0;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-ink);
}

.explore-search-input::placeholder {
    color: #94a3b8;
}

.explore-search-input:focus {
    outline: none;
    box-shadow: none;
}

.explore-search-icon {
    display: flex;
    align-items: center;
    color: var(--color-gold-dark);
    pointer-events: none;
}

.explore-empty {
    margin: 0.75rem 0 0;
    padding: 0.75rem;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: center;
}

.explore-empty--panel {
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    background: var(--color-surface);
}

.explore-index-toolbar {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.explore-index-lead {
    margin: 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.explore-index-stats {
    margin: 0.5rem 0 0;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.explore-index-stats strong {
    color: var(--color-ink);
    font-weight: 800;
}

[data-explore-item].explore-item--hidden,
[data-explore-filter] li.explore-item--hidden {
    display: none !important;
}

.explore-group--hidden {
    display: none !important;
}

.explore-list--empty {
    display: none !important;
}

/* --- Wilayah hub & detail --- */
.region-hub-hero {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.125rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    border-radius: 12px;
    background: #fff;
}

.region-hub-title {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 4vw, 2.125rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-ink);
}

.region-hub-desc {
    margin: 0.625rem 0 0;
    max-width: 42rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.region-hub-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
}

.region-hub-stat {
    flex: 1 1 6.5rem;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(197, 160, 89, 0.22);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.region-hub-stat dt {
    margin: 0;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.region-hub-stat dd {
    margin: 0.25rem 0 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
}

.region-hub-featured {
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.region-hub-featured-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
}

.region-hub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.region-hub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 700;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.region-hub-chip:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
}

.region-hub-chip-count {
    min-width: 1.5rem;
    padding: 0.125rem 0.45rem;
    border-radius: 999px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.region-hub-toolbar {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.region-hub-toolbar-lead {
    margin: 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.region-hub-group + .region-hub-group {
    margin-top: 1.5rem;
}

.region-hub-group-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-ink);
}

.region-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.625rem;
}

.region-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    color: var(--color-ink);
    box-shadow: var(--shadow-surface);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.region-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--color-ink);
}

.region-card-kind {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.25rem 0.375rem;
    border-radius: 6px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

.region-card-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.35;
}

.region-card-meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.region-card-arrow {
    color: var(--color-gold);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s, transform 0.15s;
}

.region-card:hover .region-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.region-breadcrumb {
    margin-bottom: 0.875rem;
}

.region-show-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.125rem 1.125rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    border-radius: 12px;
    background: #fff;
}

.region-show-kind {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.region-show-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
}

.region-show-desc {
    margin: 0.5rem 0 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.region-show-meta {
    margin: 0.625rem 0 0;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.region-show-meta strong {
    color: var(--color-ink);
    font-weight: 800;
}

.region-show-back {
    flex-shrink: 0;
    align-self: center;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-gold-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.region-show-back:hover {
    border-color: var(--color-gold);
    color: var(--color-ink);
}

.region-show-empty {
    padding: 2rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    text-align: center;
}

.region-show-empty-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.region-show-empty-desc {
    margin: 0.5rem auto 0;
    max-width: 28rem;
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.region-show-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

/* --- Tag hub & detail --- */
.tag-hub-hero,
.tag-show-hero {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.125rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    border-radius: 12px;
    background: #fff;
}

.tag-show-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.125rem;
}

.tag-hub-title,
.tag-show-title {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 4vw, 2.125rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-ink);
}

.tag-show-title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.tag-hub-desc,
.tag-show-desc {
    margin: 0.625rem 0 0;
    max-width: 42rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.tag-show-desc {
    margin: 0.5rem 0 0;
}

.tag-hub-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
}

.tag-hub-stat {
    flex: 1 1 6.5rem;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(197, 160, 89, 0.22);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.tag-hub-stat dt {
    margin: 0;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tag-hub-stat dd {
    margin: 0.25rem 0 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
}

.tag-hub-featured {
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.tag-hub-featured-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
}

.tag-hub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-hub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 700;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tag-hub-chip:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
}

.tag-hub-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-hub-chip-count {
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: 0.125rem 0.45rem;
    border-radius: 999px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.tag-hub-toolbar {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.tag-hub-toolbar-lead {
    margin: 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.tag-hub-group + .tag-hub-group {
    margin-top: 1.5rem;
}

.tag-hub-group-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-gold-dark);
}

.tag-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.625rem;
}

.tag-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    color: var(--color-ink);
    box-shadow: var(--shadow-surface);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.tag-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--color-ink);
}

.tag-card-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.8125rem;
    font-weight: 900;
    line-height: 1;
}

.tag-card-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-card-meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tag-card-arrow {
    color: var(--color-gold);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s, transform 0.15s;
}

.tag-card:hover .tag-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.tag-breadcrumb {
    margin-bottom: 0.875rem;
}

.tag-show-kind {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tag-show-meta {
    margin: 0.625rem 0 0;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.tag-show-meta strong {
    color: var(--color-ink);
    font-weight: 800;
}

.tag-show-back {
    flex-shrink: 0;
    align-self: center;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-gold-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.tag-show-back:hover {
    border-color: var(--color-gold);
    color: var(--color-ink);
}

.tag-show-empty {
    padding: 2rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    text-align: center;
}

.tag-show-empty-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.tag-show-empty-desc {
    margin: 0.5rem auto 0;
    max-width: 28rem;
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.tag-show-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

/* --- Category index hub & detail --- */
.public-page--categories,
.public-page--category {
    background: var(--color-bg);
}

.cat-hub-hero,
.category-show-hero {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.125rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-gold);
    border-radius: 12px;
    background: #fff;
}

.category-show-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem;
}

.cat-hub-title,
.category-show-title {
    margin: 0.35rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 4vw, 2.125rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-ink);
}

.category-show-title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.cat-hub-desc,
.category-show-desc {
    margin: 0.625rem 0 0;
    max-width: 42rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.category-show-desc {
    margin: 0.5rem 0 0;
}

.cat-hub-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
}

.cat-hub-stat {
    flex: 1 1 6.5rem;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(197, 160, 89, 0.22);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.cat-hub-stat dt {
    margin: 0;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cat-hub-stat dd {
    margin: 0.25rem 0 0;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
}

.cat-hub-featured {
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.cat-hub-featured-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
}

.cat-hub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cat-hub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 700;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cat-hub-chip:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink);
}

.cat-hub-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-hub-chip-count {
    flex-shrink: 0;
    min-width: 1.5rem;
    padding: 0.125rem 0.45rem;
    border-radius: 999px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.cat-hub-toolbar {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.cat-hub-toolbar-lead {
    margin: 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.cat-hub-group + .cat-hub-group {
    margin-top: 1.5rem;
}

.cat-hub-group-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-gold-dark);
}

.cat-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.625rem;
}

.cat-hub-grid--flat {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.category-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid rgba(197, 160, 89, 0.35);
    border-radius: 10px;
    background: #fff;
    color: var(--color-ink);
    box-shadow: var(--shadow-surface);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.category-card:hover {
    border-color: var(--color-gold);
    border-left-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--color-ink);
}

.category-card-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    background: rgba(197, 160, 89, 0.12);
    color: var(--color-gold-dark);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.category-card-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.35;
}

.category-card-desc {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-card-meta {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.category-card-arrow {
    color: var(--color-gold);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 0.15s, transform 0.15s;
}

.category-card:hover .category-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

.category-breadcrumb {
    margin-bottom: 0.875rem;
}

.category-show-kind {
    display: inline-block;
    margin-bottom: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(197, 160, 89, 0.14);
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.category-show-meta {
    margin: 0.625rem 0 0;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 600;
}

.category-show-meta strong {
    color: var(--color-ink);
    font-weight: 800;
}

.category-show-back {
    flex-shrink: 0;
    align-self: center;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-gold-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.category-show-back:hover {
    border-color: var(--color-gold);
    color: var(--color-ink);
}

.category-show-empty {
    padding: 2rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    text-align: center;
}

.category-show-empty-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.category-show-empty-desc {
    margin: 0.5rem auto 0;
    max-width: 28rem;
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.category-show-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.page-layout--after-hub {
    margin-top: 1.5rem;
    align-items: start;
}

.page-layout--after-hub .page-aside {
    align-self: start;
}

.article-detail-aside .ad-sidebar-stack {
    display: grid;
    gap: 1rem;
}

.article-detail-aside .ad-unit--sidebar {
    position: static;
}

.public-page--category .category-hub {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .region-hub-toolbar {
        grid-template-columns: 1fr minmax(220px, 280px);
        align-items: center;
        gap: 1.25rem;
    }

    .region-hub-toolbar .explore-search {
        margin-top: 0;
    }

    .region-hub-grid {
        grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    }

    .tag-hub-toolbar {
        grid-template-columns: 1fr minmax(220px, 280px);
        align-items: center;
        gap: 1.25rem;
    }

    .tag-hub-toolbar .explore-search {
        margin-top: 0;
    }

    .tag-hub-grid {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }

    .cat-hub-toolbar {
        grid-template-columns: 1fr minmax(220px, 280px);
        align-items: center;
        gap: 1.25rem;
    }

    .cat-hub-toolbar .explore-search {
        margin-top: 0;
    }

    .cat-hub-grid {
        grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    }
}

@media (max-width: 479px) {
    .region-hub-hero,
    .region-show-hero,
    .tag-hub-hero,
    .tag-show-hero,
    .cat-hub-hero,
    .category-show-hero {
        padding: 1rem;
    }

    .region-hub-stat,
    .tag-hub-stat,
    .cat-hub-stat {
        flex: 1 1 calc(50% - 0.35rem);
    }

    .cat-hub-grid,
    .cat-hub-grid--flat {
        grid-template-columns: 1fr;
    }

    .cat-hub-chip {
        flex: 1 1 calc(50% - 0.35rem);
        min-width: 0;
        justify-content: space-between;
    }

    .region-show-back,
    .tag-show-back,
    .category-show-back {
        width: 100%;
        text-align: center;
    }
}

@media (min-width: 768px) {
    .explore-index-toolbar {
        grid-template-columns: 1fr minmax(220px, 280px);
        align-items: center;
        gap: 1.25rem;
    }

    .explore-index-toolbar .explore-search {
        margin-top: 0;
    }
}

.sidebar-explore-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    max-height: 28rem;
    overflow-y: auto;
}

.sidebar-explore-list li + li {
    border-top: 1px solid var(--color-border);
}

.sidebar-explore-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    color: #334155;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.sidebar-explore-link:hover {
    color: var(--color-gold-dark);
}

.sidebar-explore-link.is-active {
    color: var(--color-ink);
    font-weight: 800;
}

.sidebar-explore-count {
    flex-shrink: 0;
    min-width: 1.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.sidebar-explore-link.is-active .sidebar-explore-count {
    background: rgba(197, 160, 89, 0.15);
    color: var(--color-gold-dark);
}

.sidebar-explore-more {
    display: inline-block;
    margin-top: 0.875rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-gold-dark);
}

.sidebar-explore-more:hover {
    color: var(--color-ink);
}

.sidebar-text {
    margin: 0 0 0.875rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
}

.sidebar-search {
    display: flex;
    gap: 0.5rem;
}

.sidebar-search input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem;
    font: inherit;
    font-size: 0.875rem;
}

.sidebar-search input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15);
}

.sidebar-search button {
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-ink);
    color: #fff;
    padding: 0.625rem 1rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    cursor: pointer;
}

.sidebar-search button:hover {
    background: var(--color-gold-dark);
    color: var(--color-ink);
}

/* --- Article cards (homepage feed) --- */
.public-home .article-card,
.home-feed .article-card {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: var(--shadow-surface);
    margin-bottom: 0;
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

.public-home .article-card:hover,
.home-feed .article-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: rgba(197, 160, 89, 0.45);
    transform: translateY(-1px);
}

.public-home .article-card-image,
.home-feed .article-card-image {
    display: block;
    overflow: hidden;
    background: #f1f5f9;
}

.public-home .article-card-image img,
.home-feed .article-card-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.public-home .article-card:hover .article-card-image img,
.home-feed .article-card:hover .article-card-image img {
    transform: scale(1.04);
}

.public-home .article-card-body,
.home-feed .article-card-body {
    padding: 1.125rem 1.25rem;
}

.public-home .article-card-categories .chip,
.home-feed .article-card-categories .chip {
    display: inline-flex;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    background: var(--color-gold-50);
    color: var(--color-gold-dark);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.public-home .article-card-title,
.home-feed .article-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-ink);
}

.public-home .article-card-title a,
.home-feed .article-card-title a {
    color: inherit;
}

.public-home .article-card-title a:hover,
.home-feed .article-card-title a:hover {
    color: var(--color-gold-dark);
}

.public-home .article-card-excerpt,
.home-feed .article-card-excerpt {
    margin: 0.5rem 0 0;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.public-home .article-card-meta,
.home-feed .article-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    row-gap: 0.35rem;
    margin-top: 0.875rem;
    padding-top: 0;
    border-top: 0;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
}

.public-home .article-card-meta a,
.home-feed .article-card-meta a {
    color: #334155;
}

.public-home .article-card-meta a:hover,
.home-feed .article-card-meta a:hover {
    color: var(--color-gold-dark);
}

/* --- Footer --- */
.public-footer.site-footer {
    margin-top: 0;
    background: var(--color-ink);
    color: #94a3b8;
}

.footer-cta {
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    background: linear-gradient(135deg, #111 0%, #0a0a0a 100%);
}

.footer-cta-inner {
    display: grid;
    gap: 1.5rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-cta-kicker {
    margin: 0;
    color: var(--color-gold);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-cta-copy h2 {
    margin: 0.5rem 0 0;
    max-width: 28ch;
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    line-height: 1.25;
    font-weight: 700;
    color: #fff;
}

.footer-cta-copy p {
    margin: 0.875rem 0 0;
    max-width: 52ch;
    color: #94a3b8;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.footer-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 800;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.footer-cta-btn--primary {
    background: var(--color-gold);
    color: var(--color-ink) !important;
}

.footer-cta-btn--primary:hover {
    background: var(--color-gold-light);
}

.footer-cta-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important;
}

.footer-cta-btn--ghost:hover {
    border-color: var(--color-gold);
    color: var(--color-gold) !important;
}

.public-footer .footer-inner {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-logo {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.125rem;
    color: inherit;
    text-decoration: none;
}

.footer-brand p {
    margin: 0;
    max-width: 36ch;
    color: #94a3b8;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.footer-social-icon:hover {
    border-color: var(--color-gold);
    background: rgba(197, 160, 89, 0.12);
    color: var(--color-gold);
    transform: translateY(-1px);
}

.footer-social-icon--fb:hover { color: #1877f2; border-color: rgba(24, 119, 242, 0.45); }
.footer-social-icon--ig:hover { color: #e4405f; border-color: rgba(228, 64, 95, 0.45); }
.footer-social-icon--x:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.footer-social-icon--yt:hover { color: #ff0000; border-color: rgba(255, 0, 0, 0.45); }
.footer-social-icon--tt:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.footer-social-icon--in:hover { color: #0a66c2; border-color: rgba(10, 102, 194, 0.45); }
.footer-social-icon--wa:hover { color: #25d366; border-color: rgba(37, 211, 102, 0.45); }
.footer-social-icon--tg:hover { color: #26a5e4; border-color: rgba(38, 165, 228, 0.45); }

.footer-contact {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.footer-contact p {
    margin: 0.35rem 0 0;
    max-width: none;
}

.footer-contact-label {
    color: #64748b;
    font-weight: 600;
}

.footer-contact a {
    color: #cbd5e1;
}

.footer-contact a:hover {
    color: var(--color-gold);
}

.footer-trust-list {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.footer-trust-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
}

.footer-trust-list li + li {
    margin-top: 0.375rem;
}

.footer-trust-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-gold);
}

.public-footer .footer-nav h3 {
    margin: 0 0 1rem;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-footer .footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.public-footer .footer-nav li + li {
    margin-top: 0.5rem;
}

.public-footer .footer-nav a {
    color: #94a3b8;
    font-size: 0.9375rem;
    font-weight: 600;
}

.public-footer .footer-nav a:hover {
    color: var(--color-gold);
}

.public-footer .footer-nav a.is-active {
    color: var(--color-gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #050505;
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.footer-bottom-inner p {
    margin: 0;
}

.footer-disclaimer {
    max-width: 42ch;
    text-align: right;
    font-size: 0.75rem;
    line-height: 1.5;
}

/* --- Responsive --- */
@media (min-width: 768px) {
    .public-home .article-card,
    .home-feed .article-card {
        grid-template-columns: 240px 1fr;
    }

    .public-home .article-card-image img,
    .home-feed .article-card-image img {
        height: 100%;
        min-height: 100%;
        aspect-ratio: auto;
    }

    .footer-cta-inner {
        grid-template-columns: 1fr auto;
        align-items: end;
    }
}

@media (min-width: 1024px) {
    .category-hub-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
        align-items: start;
    }

    .page-hero-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }

    .page-hero-feed {
        height: var(--page-hero-main-h, auto);
        max-height: var(--page-hero-main-h, none);
        overflow: hidden;
        box-sizing: border-box;
    }

    .page-hero-feed .story-feed-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .story-spotlight--lg {
        min-height: 440px;
    }

    .page-hero-subgrid .story-spotlight {
        min-height: 220px;
    }
}

@media (max-width: 1023px) {
    .public-footer .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1023px) {
    .nav-toggle {
        display: flex;
    }

    .header-nav {
        display: none;
    }

    .header-nav.is-open {
        display: block;
        border-bottom: 1px solid var(--color-border);
    }

    .header-nav-inner {
        padding-left: 0;
        padding-right: 0;
    }

    .site-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem var(--site-gutter) 1rem;
        gap: 0;
        min-height: 0;
    }

    .header-nav-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .header-nav-section {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }

    .header-nav-section--categories {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .header-nav-divider {
        width: 100%;
        height: 1px;
        min-height: 0;
        margin: 0;
    }

    .header-nav-scroll {
        margin: 0;
        padding: 0;
        mask-image: none;
        overflow: visible;
    }

    .nav-list--archive {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .nav-list--archive .nav-link {
        padding: 0.5rem 0.75rem;
    }

    .nav-list--archive > li:first-child > .nav-link {
        padding-left: 0.75rem;
    }

    .nav-list--categories {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.375rem;
        padding-bottom: 0;
    }

    .nav-list--categories > li {
        min-width: 0;
    }

    .nav-list--categories .nav-link {
        display: block;
        padding: 0.5rem 0.35rem;
        font-size: 0.8125rem;
        text-align: center;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nav-list--categories .nav-link--active {
        color: var(--color-gold-dark);
        border-color: var(--color-gold);
        background: rgba(197, 160, 89, 0.1);
        box-shadow: none;
    }

    .nav-list--archive .nav-link--active {
        box-shadow: inset 0 -2px 0 var(--color-gold);
    }

    .category-hub-grid {
        grid-template-columns: 1fr;
    }

    .page-hero-subgrid {
        grid-template-columns: 1fr;
    }


    .public-footer .footer-inner {
        grid-template-columns: 1fr;
    }

    .footer-disclaimer {
        text-align: left;
    }
}

@media (max-width: 479px) {
    .nav-list--categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── New components (v4) ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-ink);
    color: #fff;
}
.skip-link:focus { left: 0; }

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--color-muted);
}
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; }

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 1.5rem;
}

.share-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.share-buttons-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.share-icon:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-50);
    color: var(--color-gold-dark);
}

.share-icon.is-copied {
    border-color: var(--color-gold);
    background: var(--color-gold);
    color: var(--color-ink);
}

.share-icon--wa:hover { color: #25d366; }
.share-icon--fb:hover { color: #1877f2; }
.share-icon--x:hover { color: #0f1419; }
.share-icon--in:hover { color: #0a66c2; }

.share-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--color-line);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.article-filters { margin-bottom: 0; }
.article-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}
.article-filters label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
}
.article-filters select {
    min-width: 10rem;
    padding: 0.4rem 0.5rem;
}

.chip--live {
    background: #dc2626;
    color: #fff;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.home-developing-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.home-developing-list li { padding: 0.35rem 0; }
.article-location { color: var(--color-gold-dark); font-weight: 600; }
.article-disclaimer {
    font-size: 0.8125rem;
    color: var(--color-muted);
    border-left: 3px solid var(--color-gold);
    padding-left: 0.75rem;
    margin: 1.5rem 0;
}
.article-reading-time { color: var(--color-muted); }
.article-sources {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-line);
    background: #fff;
    border-radius: 0;
}
.article-sources h2 {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}
.article-sources-body { font-size: 0.9375rem; line-height: 1.6; }
.article-sources-body ul { margin: 0; padding-left: 1.25rem; }
.article-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
}
.article-nav-link {
    flex: 1 1 240px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: 0;
    text-decoration: none;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.article-nav-link:hover {
    border-color: var(--color-gold);
    box-shadow: 0 2px 0 var(--color-gold-50, #F5EDD8);
}
.article-nav-link--next:only-child {
    text-align: right;
    margin-left: auto;
    max-width: min(100%, 420px);
}
.article-nav-link--next:not(:only-child) {
    text-align: right;
}
.article-nav-link:only-child {
    flex: 1 1 100%;
    max-width: 100%;
}
.article-nav-link--prev:only-child {
    text-align: left;
    margin-left: 0;
    margin-right: auto;
    max-width: min(100%, 420px);
}
.article-nav-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}
.article-nav-title {
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.35;
}
.home-load-more {
    margin: 2rem 0 0;
    text-align: center;
}
.related-articles {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line);
}
.related-articles h2 {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-family: var(--font-display);
}
.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.article-page-stack .related-articles .article-card {
    margin-bottom: 0;
}

.auth-form .checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.auth-form .checkbox-row input { margin-top: 0.2rem; }
.auth-form .checkbox-row label { font-size: 0.875rem; line-height: 1.45; }
.static-content { max-width: 65ch; }
.chip-card em { display: block; font-style: normal; font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.25rem; }
.dev-reset-link {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--color-gold-50, #F5EDD8);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.profile-comment {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-line);
}
.profile-comment-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}
.profile-comment-head a { font-weight: 700; }
.profile-comment-head time { color: var(--color-muted); }
.profile-comment p { margin: 0; line-height: 1.55; }
.profile-section + .profile-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-line); }

@media (max-width: 640px) {
    .header-search input {
        font-size: 0.875rem;
    }

    .story-spotlight--lg {
        min-height: 280px;
    }
}

/* ============================================================
   Inner pages v5 — editorial shell + NTT form controls
   ============================================================ */

.page-shell {
    background: var(--color-bg);
    padding-bottom: 4rem;
}

.page-container {
    padding-top: 1.75rem;
}

.page-container--narrow .page-static,
.page-container--narrow .page-error {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.page-container--article {
    max-width: none;
}

.page-container--auth {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.page-container--auth .page-auth-card {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.page-container--account {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.page-container--account .page-auth-card {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* --- NTT News ID form controls --- */
.ntt-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.ntt-field label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink);
}

.ntt-hint {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.turnstile-widget {
    min-height: 4rem;
}

.ntt-input,
.ntt-select,
.ntt-textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.9375rem;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.ntt-input,
.ntt-select {
    border-radius: 999px;
    padding: 0.75rem 1.125rem;
}

.ntt-textarea {
    border-radius: 12px;
    padding: 0.875rem 1.125rem;
    resize: vertical;
    min-height: 120px;
    line-height: 1.55;
}

.ntt-select {
    appearance: none;
    padding-right: 2.75rem;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239A7B3C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

.ntt-input::placeholder,
.ntt-textarea::placeholder {
    color: #9ca3af;
}

.ntt-input:focus,
.ntt-select:focus,
.ntt-textarea:focus {
    outline: none;
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.12);
}

.ntt-field--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
}

.ntt-field--checkbox label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.45;
}

.ntt-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-gold);
}

.ntt-form {
    margin-top: 1.25rem;
}

.ntt-form .btn {
    margin-top: 0.25rem;
}

.ntt-filters {
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.04);
}

.ntt-filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem 1rem;
    align-items: flex-end;
}

.ntt-filters .ntt-field {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .ntt-filters .ntt-field {
        flex: 1 1 10rem;
    }
}

.ntt-filters-submit {
    flex-shrink: 0;
    border-radius: 999px;
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.ntt-filters .ntt-select {
    min-height: 2.75rem;
    box-sizing: border-box;
}

.ntt-field--submit {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.ntt-field-label-spacer {
    display: block;
    height: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    visibility: hidden;
}

.filter-guide {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid var(--color-gold);
    border-radius: 0 6px 6px 0;
    background: var(--color-gold-50);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #475569;
}

.ntt-search-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.625rem 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.ntt-search-bar:focus-within {
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.12);
}

.ntt-search-bar-icon {
    display: flex;
    color: var(--color-gold-dark);
    flex-shrink: 0;
}

.ntt-input--search {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0;
    background: transparent;
    border-radius: 0;
}

.ntt-input--search:focus {
    box-shadow: none;
    background: transparent;
}

.ntt-search-bar-btn {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
}

/* --- Page masthead --- */
.page-masthead {
    margin-bottom: 1rem;
    padding: 1.125rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.04);
}

.page-masthead h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    line-height: 1.12;
    font-weight: 700;
    color: var(--color-ink);
}

.page-masthead-desc {
    max-width: 56ch;
    margin: 0.75rem 0 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.65;
}

.page-masthead--dark {
    background: var(--color-ink);
    border-color: rgba(197, 160, 89, 0.25);
    border-top: 4px solid var(--color-gold);
}

.page-masthead--dark h1,
.page-masthead--dark .page-masthead-desc {
    color: #fff;
}

.page-masthead--dark .page-kicker {
    color: var(--color-gold);
}

.page-masthead--accent {
    border-left: 5px solid var(--color-gold);
    background: #fff;
}

.page-masthead--static {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 1.5rem;
    border-bottom: 2px solid var(--color-ink);
}

/* --- Page layout --- */
.page-layout {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

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

.page-aside {
    min-width: 0;
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.page-lead {
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
}

.page-lead--compact .story-spotlight {
    min-height: 280px;
}

.page-feed-section {
    margin-top: 2.25rem;
}

.page-feed-section-head {
    margin-bottom: 0.875rem;
}

.page-feed-panel {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(10, 10, 10, 0.05);
}

.page-feed-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.125rem;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.page-feed-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-ink);
}

.page-feed-panel-title::before {
    content: "";
    width: 4px;
    height: 1rem;
    border-radius: 2px;
    background: var(--color-gold);
}

.page-feed-panel-count {
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.page-feed-list {
    max-height: none;
}

.page-feed-empty,
.page-empty {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
}

.story-feed-ad {
    list-style: none;
    border-bottom: 0;
    padding: 0.25rem 0;
}

.story-feed-ad .ad-unit {
    margin: 0 0.75rem;
}

.story-feed-ad .ad-slot {
    margin: 0;
}

/* --- Index grids (categories, regions) --- */
.page-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.875rem;
}

.page-index-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-ink);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.page-index-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--color-ink);
}

.page-index-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--color-ink);
    color: var(--color-gold);
    font-size: 0.6875rem;
    font-weight: 900;
}

.page-index-body strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.page-index-body span {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.55;
}

.page-index-body em {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-gold-dark);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-index-arrow {
    color: var(--color-gold);
    font-size: 1.125rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.page-index-card:hover .page-index-arrow {
    opacity: 1;
    transform: translateX(0);
}

.page-index-grid--regions {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.page-index-grid--topics {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.page-index-card--topic .page-index-num {
    background: rgba(197, 160, 89, 0.15);
    color: var(--color-gold-dark);
}

/* --- Topic index (legacy pills, kept for reference) --- */
.page-topic-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.625rem;
}

.page-topic-pill {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-ink);
    transition: border-color 0.15s, background 0.15s;
}

.page-topic-pill:hover {
    border-color: var(--color-gold);
    background: var(--color-gold-50);
    color: var(--color-ink);
}

.page-topic-rank {
    font-size: 0.6875rem;
    font-weight: 900;
    color: var(--color-gold-dark);
}

.page-topic-name {
    font-size: var(--topic-weight, 0.9375rem);
    font-weight: 800;
    line-height: 1.3;
}

.page-topic-count {
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--color-gold-50);
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 800;
}

/* --- Author pages --- */
.page-author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.875rem;
}

.page-author-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.page-author-card:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-md);
    color: var(--color-ink);
}

.page-author-avatar,
.page-author-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--color-border);
}

.page-author-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold);
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
}

.page-author-body strong {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
}

.page-author-body span {
    display: block;
    margin-top: 0.35rem;
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.55;
}

.page-author-arrow {
    color: var(--color-gold);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

.page-author-card:hover .page-author-arrow {
    opacity: 1;
    transform: translateX(0);
}

.page-author-hero {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.75rem;
    padding: 1.5rem 1.375rem;
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-ink);
    border-radius: 12px;
    background: var(--color-surface);
}

.page-author-hero-avatar {
    width: 88px;
    height: 88px;
}

.page-author-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
}

.page-author-hero-bio {
    margin: 0.5rem 0 0;
    color: #475569;
    line-height: 1.65;
}

/* --- Article page --- */
.page-article {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    border-top: 5px solid var(--color-gold);
    background: var(--color-surface);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    box-shadow: 0 8px 28px rgba(10, 10, 10, 0.05);
}

.page-article-header h1 {
    margin: 0.75rem 0 0;
}

.page-article-hero {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.page-article-hero img {
    display: block;
    width: 100%;
    min-height: 16rem;
    max-height: 32rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}

.page-layout--comments,
.page-comments {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.comments-main {
    min-width: 0;
    width: 100%;
}

.form-success {
    margin: 0 0 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.875rem;
    font-weight: 600;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.article-tags-label {
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.chip--tag {
    font-weight: 700;
    color: #334155;
}

.chip--tag:hover {
    color: var(--color-gold-dark);
}

.page-related {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.page-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.875rem;
}

.page-layout--comments {
    margin-top: 2rem;
}

.page-comments {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    padding: 0 0 1.25rem;
    overflow: hidden;
    box-shadow: var(--shadow-surface);
}

.page-comments .comment-form {
    margin: 0 1.125rem 1.125rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
}

.page-comments .comment-form-wrap {
    padding: 0 1.125rem;
}

.page-comments .page-feed-panel-head + .comment-form-wrap {
    margin-top: 1.25rem;
    padding-top: 0.25rem;
}

.page-comments .comments-list {
    padding: 0 1.125rem;
}

/* --- Story cards (related) --- */
.story-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.story-card--compact {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: var(--shadow-surface);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.story-card--compact:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    color: inherit;
}

.story-card-compact-media,
.story-card-compact-placeholder {
    display: block;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 1;
    background: #e2e8f0;
    border: 0;
    box-shadow: none;
}

.story-card-compact-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.story-card--compact:hover .story-card-compact-media img {
    transform: scale(1.06);
}

.story-card-compact-placeholder {
    background: linear-gradient(135deg, #1a1a1a, #2d2618);
}

.story-card-compact-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.875rem;
}

.story-chip {
    display: inline-block;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--color-gold-50);
    color: var(--color-gold-dark);
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.story-chip--sm {
    font-size: 0.5625rem;
}

.story-card-compact-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-ink);
}

.story-card--compact:hover .story-card-compact-title {
    color: var(--color-gold-dark);
}

.story-card-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
}

.story-card-compact-meta > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.25rem;
    color: #94a3b8;
    font-weight: 400;
}

.story-card--editorial {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: var(--shadow-surface);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.story-card-editorial-media,
.story-card-editorial-placeholder {
    display: block;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 16 / 10;
    background: #e2e8f0;
    border: 0;
    box-shadow: none;
}

.story-card-editorial-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-card-editorial-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.875rem 1rem;
}

.story-card--editorial:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    color: inherit;
}

/* --- Static page --- */
.page-static {
    padding: 0.5rem 0 2rem;
}

.page-static-body {
    max-width: 68ch;
    margin: 0 auto;
}

/* --- Auth pages --- */
.public-page--auth.page-shell {
    min-height: 65vh;
    box-sizing: border-box;
    width: auto;
    margin-top: 1.25rem;
    margin-left: var(--site-gutter);
    margin-right: var(--site-gutter);
    background:
        linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink) 38%, transparent 38%),
        var(--color-bg);
}

/* Gutter sudah di main; hindari double inset vs header-top-inner */
.public-page--auth .page-container--auth,
.public-page--auth .page-container--account {
    padding-left: 0;
    padding-right: 0;
}

.page-auth-card {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    border-top: 4px solid var(--color-gold);
    background: var(--color-surface);
    padding: 2rem 1.75rem;
    box-shadow: 0 16px 48px rgba(10, 10, 10, 0.08);
}

.page-auth-card h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
}

.page-auth-lead {
    margin: 0.5rem 0 0;
    color: #475569;
    line-height: 1.6;
}

.page-profile-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.page-profile-section[id] {
    scroll-margin-top: 0;
}

.account-shell {
    margin-top: 1.5rem;
}

.account-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: 2px solid var(--color-border);
}

.account-tab {
    position: relative;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s;
}

.account-tab:hover {
    color: var(--color-ink);
}

.account-tab.is-active {
    color: var(--color-gold-dark);
}

.account-tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--color-gold);
}

.account-tab-panels {
    min-height: 12rem;
}

.account-tab-panel[hidden] {
    display: none !important;
}

.page-profile-heading {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-ink);
}

@media (min-width: 1024px) {
    .page-layout {
        grid-template-columns: 1fr 320px;
    }

    .page-layout--comments {
        max-width: none;
    }
}

/* Go to top */
.go-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.go-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.go-to-top:hover,
.go-to-top:focus-visible {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-ink);
    outline: none;
}

.go-to-top:focus-visible {
    box-shadow: var(--shadow-md), 0 0 0 3px var(--color-gold-50);
}

@media (max-width: 767px) {
    .go-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .public-page--auth.page-shell {
        background: var(--color-bg);
    }

    .ntt-filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .ntt-filters .ntt-field {
        flex: 0 0 auto;
        gap: 0.25rem;
    }

    .ntt-filters-submit {
        width: 100%;
        margin-top: 0;
        min-height: 2.75rem;
        height: 2.75rem;
    }

    .ntt-field--submit .ntt-field-label-spacer {
        display: none;
    }

    .ntt-search-bar {
        flex-wrap: nowrap;
        gap: 0.5rem;
        border-radius: 12px;
        padding: 0.375rem 0.5rem 0.375rem 0.75rem;
        margin-bottom: 0.75rem;
    }

    .ntt-search-bar-btn {
        width: auto;
        flex-shrink: 0;
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
    }

    .page-author-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-related-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Auth modal --- */
body.auth-modal-open {
    overflow: hidden;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.auth-modal[hidden] {
    display: none !important;
}

.auth-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(2px);
}

.auth-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-gold);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 24px 64px rgba(10, 10, 10, 0.2);
}

.auth-modal-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-ink);
}

.auth-modal-lead {
    margin: 0.5rem 0 1.25rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.auth-modal-close {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.auth-modal-close:hover {
    background: var(--color-gold-50);
    color: var(--color-ink);
}

.auth-switch-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-gold-dark);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-switch-link:hover {
    color: var(--color-gold);
}

.nav-auth-btn {
    cursor: pointer;
    font: inherit;
}

.comment-login-prompt {
    margin: 1.125rem 0;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.comment-login-text {
    margin: 0 0 1rem;
    color: var(--color-ink);
    font-weight: 600;
}

.comment-login-alt {
    margin: 0.875rem 0 0;
    color: var(--color-muted);
    font-size: 0.875rem;
}

.comment-login-alt a {
    color: var(--color-gold-dark);
    font-weight: 700;
}

.profile-comments-login {
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    box-shadow: var(--shadow-surface);
}

.profile-comments-login-text {
    margin: 0 0 1rem;
    color: var(--color-muted);
}

/* ─── Checkbox (auth forms) ─── */
.ui-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
}

.ui-checkbox-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    accent-color: var(--color-gold);
    cursor: pointer;
}

.ui-checkbox-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.45;
}

/* ─── Sedang Ramai & category hub feed panels ─── */
.page-hero-feed,
.category-hub-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-surface);
}

.page-hero-feed-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.page-hero-feed-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.page-hero-feed-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--color-ink);
}

.page-hero-feed-desc {
    margin: 0;
    max-width: none;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.45;
}

.page-hero-feed-more {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-gold-dark);
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.page-hero-feed-more:hover {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.page-hero-feed .page-hero-feed-title::before,
.category-hub-panel .page-hero-feed-title::before,
.category-hub-header .page-hero-feed-title::before {
    display: none;
}

.page-hero-feed .story-feed-list, .category-hub-panel .story-feed-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.page-hero-feed .story-feed-item, .category-hub-panel .story-feed-item {
    border-bottom: 1px solid #e8e8e4;
}

.page-hero-feed .story-feed-link, .category-hub-panel .story-feed-link {
    min-height: 0;
}

.page-hero-feed .story-feed-item:not(.story-feed-item--lead) .story-feed-link, .category-hub-panel .story-feed-item:not(.story-feed-item--lead) .story-feed-link {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 88px;
    grid-template-areas: "rank copy thumb";
    grid-template-rows: 1fr;
    column-gap: 0.625rem;
    align-items: center;
    padding: 0.75rem 1rem;
}

.page-hero-feed .story-feed-rank, .category-hub-panel .story-feed-rank {
    grid-area: rank;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.page-hero-feed .story-feed-copy, .category-hub-panel .story-feed-copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.page-hero-feed .story-feed-link:hover,
.category-hub-panel .story-feed-link:hover,
.page-hero-feed .story-feed-link:focus-visible, .category-hub-panel .story-feed-link:focus-visible {
    background: rgba(197, 160, 89, 0.06);
    outline: none;
}

.page-hero-feed .story-feed-link:focus-visible, .category-hub-panel .story-feed-link:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(197, 160, 89, 0.45);
}

.page-hero-feed .story-feed-item--lead .story-feed-link, .category-hub-panel .story-feed-item--lead .story-feed-link {
    padding: 0;
}

.page-hero-feed .story-feed-lead-card, .category-hub-panel .story-feed-lead-card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.page-hero-feed .story-feed-lead-media, .category-hub-panel .story-feed-lead-media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    overflow: hidden;
    background: #111;
    border: 0;
    box-shadow: none;
}

.page-hero-feed .story-feed-lead-body, .category-hub-panel .story-feed-lead-body {
    padding: 0.875rem 1rem;
}

.page-hero-feed .story-feed-lead-title, .category-hub-panel .story-feed-lead-title {
    position: static;
    display: block;
    padding: 0;
    font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
    font-weight: 800;
    line-height: 1.32;
    color: var(--color-ink);
}

.page-hero-feed .story-feed-lead-shade, .category-hub-panel .story-feed-lead-shade {
    display: none;
}

.page-hero-feed .story-feed-rank--media, .category-hub-panel .story-feed-rank--media {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    background: rgba(10, 10, 10, 0.82);
    color: var(--color-gold);
    font-size: 0.75rem;
}

.page-hero-feed .story-feed-chip, .category-hub-panel .story-feed-chip {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    z-index: 2;
    padding: 0.3rem 0.625rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-ink);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-hero-feed .story-feed-kicker, .category-hub-panel .story-feed-kicker {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--color-gold-dark);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-hero-feed .story-feed-title, .category-hub-panel .story-feed-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.48;
    color: var(--color-ink);
}

.page-hero-feed .story-feed-link:hover .story-feed-title,
.category-hub-panel .story-feed-link:hover .story-feed-title,
.page-hero-feed .story-feed-link:focus-visible .story-feed-title, .category-hub-panel .story-feed-link:focus-visible .story-feed-title {
    color: var(--color-ink);
}

.page-hero-feed .story-feed-meta, .category-hub-panel .story-feed-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    margin-top: 0.375rem;
    gap: 0;
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
}

.page-hero-feed .story-feed-meta-loc, .category-hub-panel .story-feed-meta-loc {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #475569;
    font-weight: 700;
}

.page-hero-feed .story-feed-meta-date, .category-hub-panel .story-feed-meta-date {
    flex-shrink: 0;
    white-space: nowrap;
}

.page-hero-feed .story-feed-thumb, .category-hub-panel .story-feed-thumb {
    grid-area: thumb;
    display: block;
    width: 88px;
    height: 56px;
    min-width: 88px;
    max-width: 88px;
    min-height: 56px;
    max-height: 56px;
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #e2e8f0;
}

.page-hero-feed .story-feed-thumb img, .category-hub-panel .story-feed-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .category-hub-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.95fr);
        align-items: start;
    }

    .category-hub-panel--latest,
    .category-hub-panel--trending {
        height: var(--category-hub-panel-h, auto);
        max-height: var(--category-hub-panel-h, none);
        overflow: hidden;
        box-sizing: border-box;
    }

    .page-hero-feed {
        height: var(--page-hero-main-h, auto);
        max-height: var(--page-hero-main-h, none);
        overflow: hidden;
        box-sizing: border-box;
    }

    .page-hero-feed .story-feed-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .category-hub-panel--latest .story-feed-list,
    .category-hub-panel--trending .story-feed-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        scrollbar-gutter: stable;
    }

    .page-hero-feed .story-feed-list,
    .category-hub-panel--latest .story-feed-list,
    .category-hub-panel--trending .story-feed-list {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f1f5f9;
    }

    .page-hero-feed .story-feed-list::-webkit-scrollbar,
    .category-hub-panel--latest .story-feed-list::-webkit-scrollbar,
    .category-hub-panel--trending .story-feed-list::-webkit-scrollbar {
        width: 6px;
    }

    .page-hero-feed .story-feed-list::-webkit-scrollbar-track,
    .category-hub-panel--latest .story-feed-list::-webkit-scrollbar-track,
    .category-hub-panel--trending .story-feed-list::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 999px;
    }

    .page-hero-feed .story-feed-list::-webkit-scrollbar-thumb,
    .category-hub-panel--latest .story-feed-list::-webkit-scrollbar-thumb,
    .category-hub-panel--trending .story-feed-list::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 999px;
    }

    .page-hero-feed .story-feed-lead-title,
    .category-hub-panel .story-feed-lead-title {
        font-family: var(--font-display);
        font-size: clamp(1rem, 2.2vw, 1.1875rem);
        font-weight: 800;
        line-height: 1.34;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .category-hub-panel--latest .story-feed-item--lead .story-feed-link,
    .category-hub-panel--trending .story-feed-item--lead .story-feed-link {
        padding: 0;
    }

    .category-hub-panel--latest .story-feed-lead-body,
    .category-hub-panel--trending .story-feed-lead-body {
        padding: 0.875rem 1rem;
    }

    .category-hub-panel--latest .story-feed-title,
    .category-hub-panel--trending .story-feed-title {
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.48;
    }

    .category-hub-panel--latest .story-feed-meta,
    .category-hub-panel--trending .story-feed-meta {
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.45;
    }

    .category-hub-panel--featured .category-hub-featured-body {
        padding: 0;
    }

    .category-hub-panel--featured .story-spotlight--lg {
        border: 0;
        border-radius: 0;
    }

    .category-hub-panel--featured .story-spotlight-media,
    .category-hub-panel--featured .story-spotlight-placeholder {
        border-radius: 0;
        overflow: hidden;
        border: 0;
        box-shadow: none;
    }

    .category-hub-panel--featured .story-spotlight-dek {
        display: none;
    }

    .category-hub-panel--featured .story-spotlight-meta {
        margin-top: 0.375rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.45;
    }
}

@media (max-width: 767px) {
    .page-hero-feed-head {
        padding: 0.75rem 0.875rem;
    }

    .page-hero-feed .story-feed-item:not(.story-feed-item--lead) .story-feed-link, .category-hub-panel .story-feed-item:not(.story-feed-item--lead) .story-feed-link {
        padding: 0.75rem 0.875rem;
    }

    .page-hero-feed .story-feed-rank, .category-hub-panel .story-feed-rank {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 0.625rem;
    }
}

/* --- Newsroom layout (header-top, hero, site-shell) --- */

/* Site shell & side rails */
.site-align,
.site-shell {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    --rail-body-gap: 1rem;
    position: relative;
    z-index: 0;
}

.site-align-main,
.site-shell-main {
    width: 100%;
    min-width: 0;
}

/* Body column — same width as header/footer center column */
.site-shell-main .public-container,
.site-shell-main .home-container,
.site-shell-main .page-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.site-rail {
    display: none;
    padding-bottom: 2rem;
}

.site-rail--align {
    display: none;
    padding-bottom: 0;
}

.site-rail-pin {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--rail-top, 8rem);
    bottom: var(--rail-bottom-gap, 2rem);
    padding-top: var(--rail-offset-top, 0);
    width: auto;
    max-width: 160px;
    box-sizing: border-box;
    z-index: 0;
}

.site-rail--left .site-rail-pin {
    align-items: flex-end;
    margin-left: auto;
}

.site-rail--right .site-rail-pin {
    align-items: flex-start;
    margin-right: auto;
}

@media (min-width: 1480px) {
    .site-chrome--header .site-align,
    .site-chrome--footer .site-align,
    .site-shell {
        display: grid;
        gap: var(--rail-body-gap);
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        grid-template-columns: 160px minmax(0, 1fr) 160px;
    }

    .site-shell > .site-rail--left,
    .site-shell > .site-rail--align:first-child {
        grid-column: 1;
    }

    .site-shell > .site-shell-main {
        grid-column: 2;
        min-width: 0;
    }

    .site-shell > .site-rail--right,
    .site-shell > .site-rail--align:last-child {
        grid-column: 3;
    }

    .site-rail--left,
    .site-rail--right {
        display: flex;
        align-items: flex-start;
        position: relative;
        z-index: 0;
    }

    .site-rail--left {
        justify-content: flex-end;
        padding-right: 0;
    }

    .site-rail--right {
        justify-content: flex-start;
        padding-left: 0;
    }

    .site-rail--align {
        display: block;
    }
}

/* Header chrome — near-white glass, bottom edge shadow */
.site-chrome--header {
    position: sticky;
    top: 0;
    z-index: 300;
    isolation: isolate;
    width: 100%;
    background: var(--header-glass-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--header-glass-border);
    box-shadow: 0 4px 12px -8px rgba(10, 10, 10, 0.12);
}

.site-chrome--header .site-header {
    position: static;
    z-index: auto;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
}

.site-chrome--header .header-chrome-body {
    padding-bottom: 0.75rem;
}

/* Body ad strips — leaderboard atas & banner bawah (bukan bagian header/footer chrome) */
.site-body-ad-strip--top .ad-unit--header {
    margin: 0.5rem 0 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: none;
    background: inherit;
}

.site-body-ad-strip--bottom .ad-unit--footer {
    margin: 0;
    padding: 0.75rem 0 1.25rem;
    border-top: 0;
}

.site-body-ad-strip--bottom .ad-unit--footer .ad-unit-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .site-body-ad-strip--top .ad-unit--header,
    .site-body-ad-strip--bottom .ad-unit--footer .ad-unit-body {
        padding-left: var(--site-gutter);
        padding-right: var(--site-gutter);
        box-sizing: border-box;
    }
}

@media (min-width: 768px) {
    .site-body-ad-strip--top .ad-unit--header,
    .site-body-ad-strip--bottom .ad-unit--footer .ad-unit-body {
        padding-left: var(--site-gutter);
        padding-right: var(--site-gutter);
        box-sizing: border-box;
    }
}

/* Header chrome — gutter mobile (jangan ubah) */
@media (max-width: 767px) {
    .site-chrome--header .header-top-inner,
    .site-chrome--header .header-nav-inner {
        padding-left: var(--site-gutter);
        padding-right: var(--site-gutter);
        box-sizing: border-box;
    }

    .site-chrome--header .header-headlines {
        margin-left: var(--site-gutter);
        margin-right: var(--site-gutter);
    }
}

@media (min-width: 768px) {
    /* Samakan inset horizontal dengan body: site-shell 0.5rem + public-container gutter */
    .site-chrome--header .site-align {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .site-chrome--header .header-top-inner {
        padding-left: 0;
        padding-right: 0;
        margin-left: var(--site-gutter);
        margin-right: var(--site-gutter);
        width: auto;
        box-sizing: border-box;
    }

    .site-chrome--header .header-nav-inner {
        padding-left: var(--site-gutter);
        padding-right: var(--site-gutter);
        box-sizing: border-box;
    }

    .site-chrome--header .header-headlines {
        margin-left: var(--site-gutter);
        margin-right: var(--site-gutter);
        width: auto;
    }
}

/* Footer chrome — full-width background, content aligned with header/body */
.site-chrome--footer {
    width: 100%;
    background: var(--color-ink);
}

.site-chrome--footer .public-footer.site-footer {
    background: transparent;
}

.site-chrome--footer .public-footer .footer-inner,
.site-chrome--footer .public-footer .footer-bottom-inner {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .site-chrome--footer .site-align {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 1023px) {
    .site-chrome--header .header-nav.is-open {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(12px);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
    }
}

.header-top {
    border-bottom: none;
}

.header-top-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.site-logo {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

.site-logo-mark,
.footer-logo-mark {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    object-fit: contain;
}

.site-logo-wordmark,
.footer-logo-wordmark {
    display: block;
    height: 1.0625rem;
    width: auto;
    max-width: min(7.5rem, 38vw);
    flex-shrink: 0;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 641px) {
    .site-logo-wordmark,
    .footer-logo-wordmark {
        height: 1.25rem;
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .site-logo-mark,
    .footer-logo-mark {
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (max-width: 640px) {
    .site-logo-mark,
    .footer-logo-mark {
        width: 2.125rem;
        height: 2.125rem;
    }

    .site-logo-wordmark,
    .footer-logo-wordmark {
        height: 1.125rem;
        max-width: min(7rem, 34vw);
    }

    .brand-tagline {
        font-size: 0.625rem;
    }
}

.brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
    max-width: 100%;
}

.brand-tagline {
    display: block;
    width: 100%;
    max-width: 100%;
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.header-search-wrap {
    min-width: 0;
}

.header-search {
    min-height: 2.125rem;
    padding: 0 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
}

.header-search:focus-within {
    background: #fff;
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.12);
}

.header-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-gold-dark);
    cursor: pointer;
}

.header-search-submit svg {
    width: 15px;
    height: 15px;
}

.ad-unit--header .ad-link {
    border-radius: 8px;
}

.ad-unit--header .ad-link img {
    background: transparent;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.nav-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    height: 2.5rem;
    padding: 0 1rem;
    line-height: 1.25;
    white-space: nowrap;
    background: #fff;
}

/* Page hero — carousel chrome */

.page-hero-carousel-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    background: #0a0a0a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-hero-carousel-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.page-hero-carousel-label {
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.page-hero-carousel-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.88);
    letter-spacing: 0.04em;
}

.page-hero-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 auto;
}

.page-hero-carousel-nav {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.page-hero-carousel-stage {
    position: relative;
    isolation: isolate;
}

.page-hero-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 2.125rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
}

.page-hero-nav:hover {
    background: rgba(255, 255, 255, 0.2);
}

.page-hero-nav-text {
    white-space: nowrap;
}

.page-hero-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.page-hero-dot.is-active {
    background: var(--color-gold);
    transform: scale(1.25);
}

.page-hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 3;
    height: 3px;
    background: rgba(10, 10, 10, 0.08);
}

.page-hero-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}

@keyframes page-hero-progress {
    from { width: 0; }
    to { width: 100%; }
}

/* Page hero — cinematic spotlight (berita utama) */
.page-hero-featured .story-spotlight--lg,
.page-hero-carousel-stage .story-spotlight--lg {
    min-height: 360px;
}

.page-hero:not(.page-hero--embedded) .page-hero-carousel-stage .story-spotlight--lg .story-spotlight-title,
.page-hero:not(.page-hero--embedded) .page-hero-main > .page-hero-featured .story-spotlight--lg .story-spotlight-title {
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
}

.page-hero-carousel-stage .story-spotlight {
    border-radius: 0;
}

.page-hero-carousel-stage .story-spotlight-badges {
    top: 0.75rem;
    right: 0.75rem;
}

.page-hero-carousel-stage .story-spotlight-chip {
    top: 0.75rem;
    left: 0.75rem;
}

/* Embedded / category featured spotlight */
.page-hero--embedded {
    margin-bottom: 0;
    background: #fff;
}

.page-hero--embedded .page-hero-main {
    background: #fff;
}

.page-hero--embedded .page-hero-featured,
.category-hub-panel--featured .page-hero-featured {
    background: #fff;
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.page-hero--embedded .page-hero-grid {
    display: block;
}

.page-hero-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.page-hero--embedded .story-spotlight--lg,
.category-hub-panel--featured .story-spotlight--lg {
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: var(--color-ink);
    background: #fff;
    border: 0;
    box-shadow: none;
}

.page-hero--embedded .story-spotlight-media,
.page-hero--embedded .story-spotlight-placeholder,
.category-hub-panel--featured .story-spotlight-media,
.category-hub-panel--featured .story-spotlight-placeholder {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 10;
    flex: none;
    width: 100%;
    min-height: 8rem;
}

.page-hero--embedded .story-spotlight-shade,
.page-hero--embedded .story-spotlight::after,
.category-hub-panel--featured .story-spotlight-shade,
.category-hub-panel--featured .story-spotlight::after {
    display: none;
}

.page-hero--embedded .story-spotlight-content,
.category-hub-panel--featured .story-spotlight-content {
    position: static;
    padding: 0.875rem 1rem;
}

.page-hero--embedded .story-spotlight--lg .story-spotlight-title,
.category-hub-panel--featured .story-spotlight--lg .story-spotlight-title {
    color: var(--color-ink);
    text-shadow: none;
    font-size: clamp(1rem, 2.2vw, 1.1875rem);
    font-weight: 800;
    line-height: 1.34;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.page-hero--embedded .story-spotlight-dek,
.category-hub-panel--featured .story-spotlight-dek {
    color: #64748b;
}

.page-hero--embedded .story-spotlight-meta,
.category-hub-panel--featured .story-spotlight-meta {
    color: #64748b;
}

.page-hero--embedded .story-spotlight-meta span:first-child,
.category-hub-panel--featured .story-spotlight-meta span:first-child {
    color: var(--color-gold-dark);
}

.page-hero--embedded .story-spotlight-meta > * + *::before,
.category-hub-panel--featured .story-spotlight-meta > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 0.35rem;
    color: #94a3b8;
    font-weight: 400;
}

@media (min-width: 1024px) {
    .page-hero-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
    }

    .category-hub-panel--featured .story-spotlight-media,
    .category-hub-panel--featured .story-spotlight-placeholder {
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 1023px) {
    .header-top-inner {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "logo actions"
            "search search";
        gap: 0.625rem 0.75rem;
    }

    .site-logo {
        grid-area: logo;
        align-items: center;
        max-width: calc(100vw - 8.5rem);
    }

    .site-logo-mark,
    .footer-logo-mark {
        width: 2.125rem;
        height: 2.125rem;
    }

    .site-logo-wordmark,
    .footer-logo-wordmark {
        height: 1.125rem;
        max-width: min(7.25rem, 36vw);
    }

    .header-search-wrap {
        grid-area: search;
    }

    .header-actions {
        grid-area: actions;
    }

    .brand-lockup {
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-tagline {
        font-size: 0.6875rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-search {
        max-width: none;
        margin-left: 0;
    }

    .page-hero-carousel-chrome {
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
    }

    .page-hero-carousel-dots {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .page-hero-nav-text {
        display: none;
    }

    .page-hero-nav {
        width: 2.125rem;
        min-height: 2.125rem;
        padding: 0;
    }

    .page-hero-subgrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .brand-tagline {
        font-size: 0.625rem;
        line-height: 1.25;
    }
}

@media (max-width: 360px) {
    .brand-tagline {
        font-size: 0.5rem;
    }
}

/* ============================================================
   Responsive v6 — spacing, gutters, cross-page polish
   ============================================================ */

:root {
    --section-gap: 1.25rem;
    --page-pad-bottom: 2.5rem;
}

.public-page,
.page-shell,
.public-home {
    padding-bottom: var(--page-pad-bottom);
}

.public-container,
.page-container,
.ad-unit--footer .ad-unit-body {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
}

.home-container,
.page-container {
    padding-top: 1.25rem;
}

.page-hero {
    margin-bottom: 2rem;
}

.category-hub {
    margin-bottom: 2rem;
}

.home-discovery {
    margin: 1.5rem 0 2rem;
}

.page-masthead {
    margin-bottom: 1rem;
    padding: 1.125rem 1rem;
}

.page-feed-section {
    margin-top: 1.75rem;
}

.page-layout {
    gap: var(--section-gap);
}

.page-aside {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.page-error {
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.5rem 0 0;
    text-align: center;
}

.page-error-code {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 18vw, 7rem);
    line-height: 1;
    font-weight: 800;
    color: var(--color-ink);
}

.page-error-lead {
    margin: 0.75rem 0 1.5rem;
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
}

.page-error-search {
    max-width: 32rem;
    margin: 0 auto 2rem;
}

.page-error-suggestions {
    margin: 0 0 1.5rem;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
}

.page-error-suggestions .page-feed-panel-title {
    margin: 0;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.page-error-actions {
    margin: 1.5rem 0 0;
}

body.has-sticky-ad .go-to-top {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

.public-page--article .article-meta-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.public-page--article .article-meta-bottom .share-buttons {
    width: 100%;
}

@media (min-width: 640px) {
    .public-page--article .article-meta-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .public-page--article .article-meta-bottom .share-buttons {
        width: auto;
    }
}

@media (min-width: 768px) {
    :root {
        --site-gutter: 1.25rem;
        --section-gap: 1.5rem;
    }

    .home-container,
    .page-container {
        padding-top: 1.5rem;
    }

    .public-page--auth.page-shell {
        margin-top: 1.5rem;
    }

    .page-masthead {
        padding: 1.375rem 1.25rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --site-gutter: 1.5rem;
    }

    .page-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .site-shell-main > .site-body-ad-strip {
        padding-left: var(--site-gutter);
        padding-right: var(--site-gutter);
        box-sizing: border-box;
    }

    .site-body-ad-strip--top .ad-unit--header,
    .site-body-ad-strip--bottom .ad-unit--footer .ad-unit-body {
        padding-left: 0;
        padding-right: 0;
    }

    .site-body-ad-strip--bottom .ad-unit--footer .ad-unit-body {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .header-search {
        min-height: 2.5rem;
        height: 2.5rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .public-page--article .page-container--article {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

@media (max-width: 1023px) {
    .page-layout {
        grid-template-columns: 1fr;
    }

    .page-aside {
        order: 2;
    }

    .ad-unit--sidebar {
        position: static;
    }
}

@media (max-width: 767px) {
    .page-article {
        padding: 1rem;
    }

    .page-article-hero img {
        min-height: 12rem;
        max-height: 20rem;
    }

    .page-masthead h1 {
        font-size: clamp(1.5rem, 6.5vw, 2rem);
    }

    .page-feed-panel-head {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 0.875rem;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .footer-disclaimer {
        max-width: none;
        text-align: left;
    }

    .home-discovery-head {
        padding: 0.75rem 0.875rem;
    }

    .home-discovery-track {
        padding: 0 0.875rem;
    }

    .category-hub-header {
        margin-bottom: 0.75rem;
    }

    .category-hub-panel--featured .category-hub-featured-body {
        padding: 0;
    }

    .ntt-filters {
        margin-bottom: 0.75rem;
        padding: 0.75rem;
    }

    .ntt-filters .ntt-select {
        padding: 0.5rem 2.25rem 0.5rem 0.875rem;
        font-size: 0.875rem;
    }

    .public-page--archive .page-masthead,
    .public-page--search .page-masthead {
        margin-bottom: 0.625rem;
        padding: 0.75rem 0.875rem;
    }

    .public-page--archive .page-masthead-desc,
    .public-page--search .page-masthead-desc {
        margin-top: 0.375rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .public-page--archive .page-lead {
        margin-bottom: 0.75rem;
    }

    .public-page--archive .page-container,
    .public-page--search .page-container {
        padding-top: 1rem;
    }

    .popular-tabs {
        margin-top: 0.75rem;
    }
}

@media (max-width: 479px) {
    .header-actions .nav-auth-btn {
        padding: 0 0.875rem;
        font-size: 0.8125rem;
    }

    .page-related-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Readable public pages (senior-friendly) --- */
.public-page .page-kicker {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

.public-page .page-masthead-desc,
.public-page .page-intro {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #334155;
}

.page-intro {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
}

.page-feed-panel-title {
    font-size: 1.0625rem;
}

.story-feed-title,
.story-feed-lead-title {
    font-size: 1.0625rem;
    line-height: 1.45;
}

.story-feed-meta,
.story-feed-meta-date {
    font-size: 0.9375rem;
}

.category-hub-header {
    margin-bottom: 1rem;
}

.category-hub-desc {
    margin: 0.5rem 0 0;
    max-width: 56ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #475569;
}

/* --- Article archive (category pages) --- */
.article-archive {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 3px solid var(--color-gold);
}

.article-archive-head {
    margin-bottom: 1.5rem;
}

.article-archive-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-ink);
}

.article-archive-summary {
    margin: 0.625rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #475569;
}

.article-archive-month {
    margin-bottom: 2rem;
}

.article-archive-month-title {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    border-left: 4px solid var(--color-gold);
    border-radius: 0 8px 8px 0;
    background: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-ink);
}

.article-archive-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
}

.archive-item {
    border-bottom: 1px solid var(--color-border);
}

.archive-item:last-child {
    border-bottom: 0;
}

.archive-item-link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.875rem 1rem;
    color: var(--color-ink);
    text-decoration: none;
    transition: background 0.15s;
}

.archive-item-link:hover,
.archive-item-link:focus-visible {
    background: rgba(197, 160, 89, 0.06);
    color: var(--color-ink);
}

.archive-item-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.45;
}

.archive-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    color: #64748b;
}

.archive-item-loc::after {
    content: "·";
    margin-left: 0.75rem;
    color: #cbd5e1;
}

.archive-item-date {
    font-weight: 600;
    color: var(--color-gold-dark);
}

.archive-item-thumb {
    width: 72px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.archive-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 639px) {
    .archive-item-link {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .archive-item-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        order: -1;
    }

    .article-archive-month-title {
        font-size: 1.125rem;
    }
}

/* --- Article archive pagination --- */
.article-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.article-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

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

.article-pagination-btn.is-disabled {
    color: var(--color-muted);
    opacity: 0.45;
    pointer-events: none;
}

.article-pagination-status {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    min-width: 4.5rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-ink);
    letter-spacing: 0.02em;
}

.article-pagination-status-sep {
    color: var(--color-muted);
    font-weight: 600;
}

.article-pagination-status-total {
    color: var(--color-muted);
    font-weight: 700;
}

@media (max-width: 640px) {
    .article-pagination {
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding-top: 1.25rem;
    }

    .article-pagination-btn {
        width: 3rem;
        height: 3rem;
    }

    .article-pagination-status {
        min-width: 4rem;
        font-size: 0.875rem;
    }
}

/* --- Index page readability --- */
.page-index-card,
.page-topic-pill,
.page-author-card {
    min-height: 3.5rem;
}

.page-index-body strong,
.page-topic-name,
.page-author-body strong {
    font-size: 1.0625rem;
}

.page-index-body em {
    font-size: 0.8125rem;
}

/* --- Popular tabs --- */
.popular-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}

.popular-tab {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.popular-tab:hover {
    border-color: var(--color-gold);
    color: var(--color-ink);
}

.popular-tab--active {
    border-color: var(--color-gold);
    background: var(--color-gold-50);
    color: var(--color-ink);
}

/* --- Error pages --- */
.page-error {
    text-align: center;
    padding: 2rem 0;
}

.page-error-code {
    margin: 0;
    font-size: clamp(3rem, 12vw, 5rem);
    font-weight: 900;
    color: var(--color-gold);
    line-height: 1;
}

.page-error-lead {
    margin: 0.75rem 0 1.5rem;
    font-size: 1.125rem;
    line-height: 1.6;
    color: #475569;
}

.page-error-search {
    max-width: 32rem;
    margin: 0 auto 2rem;
}

.page-error-actions {
    margin-top: 1.5rem;
}

/* --- Auth pages --- */
.page-auth-card h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.page-auth-lead {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #475569;
}

.ntt-field label {
    font-size: 0.9375rem;
    font-weight: 700;
}

.ntt-input {
    font-size: 1rem;
    min-height: 2.75rem;
}

/* --- Search page --- */
.search-hero {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    border-top: 4px solid var(--color-gold);
    background: #fff;
    box-shadow: 0 8px 28px rgba(10, 10, 10, 0.05);
}

.search-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--color-ink);
}

.search-hero-desc {
    margin: 0.5rem 0 1rem;
    max-width: 52ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #475569;
}

.search-hero-form {
    margin-bottom: 0;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 12px;
}

.search-hero-form .ntt-input--search {
    font-size: 1.0625rem;
    min-height: 2.75rem;
}

.search-tips,
.search-examples {
    margin-bottom: 1.25rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.search-tips-title,
.search-examples-title {
    margin: 0 0 0.75rem;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--color-ink);
}

.search-tips-list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #334155;
}

.search-tips-list li + li {
    margin-top: 0.5rem;
}

.search-examples-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.search-example-chip {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-gold-50);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

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

.page-layout--search .page-aside {
    order: 0;
}

/* --- Archive / article list toolbar --- */
.page-toolbar {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    box-shadow: 0 4px 16px rgba(10, 10, 10, 0.04);
}

.page-toolbar-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
}

.page-toolbar-desc {
    margin: 0.5rem 0 1rem;
    max-width: 56ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #475569;
}

.page-toolbar .popular-tabs {
    margin-top: 0;
}

.page-toolbar-search.ntt-search-bar {
    margin-bottom: 0;
    padding: 0 0 0 1rem;
    min-height: 2.75rem;
    height: 2.75rem;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    gap: 0.625rem;
    overflow: hidden;
    flex-wrap: nowrap;
    background: #fff;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.page-toolbar-search.ntt-search-bar:focus-within {
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.12);
}

.page-toolbar-search .ntt-input--search {
    font-size: 0.9375rem;
    min-height: 0;
    height: auto;
    padding: 0;
    align-self: center;
    border: none;
    box-shadow: none;
}

.page-toolbar-search .ntt-input--search:focus {
    border: none;
    box-shadow: none;
}

.page-toolbar-search .ntt-search-bar-btn {
    align-self: stretch;
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.page-toolbar .search-examples {
    margin-top: 0.75rem;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.page-toolbar .ntt-filters-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.public-page--search .page-toolbar-head + .ntt-filters-fieldset {
    margin-top: 1rem;
}

.page-toolbar .ntt-filters {
    margin-bottom: 0;
    padding: 0.875rem;
    background: #fff;
}

.ntt-filters-fieldset {
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.ntt-filters-legend {
    padding: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-ink);
}

.page-feed-panel-foot {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-border);
}

.page-empty-state {
    padding: 2rem 1.25rem;
    text-align: center;
}

.page-empty-state--panel {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.page-empty-state-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-ink);
}

.page-empty-state-desc {
    margin: 0.5rem auto 0;
    max-width: 40ch;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #64748b;
}

.article-archive-list--feed {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.article-archive-list--feed .archive-item:first-child {
    border-top: 1px solid var(--color-border);
}

.archive-item-cat {
    display: inline-block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gold-dark);
}

.story-feed-ad {
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}

.story-feed-ad .ad-unit {
    margin: 0.75rem 1rem;
}

/* --- Article detail polish --- */
.page-article-dek {
    margin: 0.75rem 0 0;
    font-size: 1.125rem;
    line-height: 1.65;
    color: #475569;
}

.page-article-header h1 {
    font-size: clamp(1.625rem, 4.5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 800;
}

.page-article-meta-bar {
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
}

.page-article-meta-bar .article-meta-bottom {
    margin: 0;
    padding: 0;
    border: 0;
}

.public-page--article .article-meta-top {
    margin-top: 0.875rem;
    padding: 0;
    border: 0;
    font-size: 1rem;
}

.article-header-taxonomy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.5rem;
}

.article-header-taxonomy-sep {
    color: #cbd5e1;
    font-weight: 400;
    line-height: 1;
}

.article-header-taxonomy .article-location {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
}

.article-header-taxonomy .article-location:hover {
    color: var(--color-gold-dark);
    text-decoration: underline;
}

.page-article-meta-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0.875rem 0 0;
    padding: 0.625rem 0 0.375rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
    color: #475569;
}

.page-article-meta-byline-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 3rem;
    min-width: 0;
}

.page-article-meta-byline-primary > * + *::before {
    content: var(--article-meta-sep);
    margin: 0 1.25rem;
    color: #cbd5e1;
    font-weight: 400;
}

.page-article-meta-byline time {
    font-weight: 700;
    color: var(--color-gold-dark);
}

.page-article-meta-byline .article-meta-author {
    font-weight: 700;
    color: #334155;
    text-decoration: none;
}

.page-article-meta-byline .article-meta-author:hover {
    color: var(--color-gold-dark);
    text-decoration: underline;
}

.page-article-meta-byline .article-meta-reading {
    margin-left: auto;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.page-article-meta-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0 0 0.875rem;
    padding: 0.375rem 0 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.page-article-meta-actions-primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.article-meta-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #475569;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

a.article-meta-action:hover {
    color: var(--color-gold-dark);
}

.article-meta-action svg {
    flex-shrink: 0;
    color: #64748b;
}

.article-hero-zoom-label {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    pointer-events: none;
}

.share-buttons--inline {
    margin: 0;
}

.share-buttons--inline .share-buttons-icons {
    gap: 0.35rem;
}

.share-buttons--inline .share-icon {
    width: 2.125rem;
    height: 2.125rem;
    border: 1px solid var(--color-border);
    background: #fff;
}

.public-page--article .article-meta-top .article-meta-author,
.public-page--article .article-meta-top .article-location {
    font-size: 1rem;
    font-weight: 700;
}

.public-page--article .article-meta-bottom-primary {
    font-size: 0.9375rem;
    color: #475569;
}

.public-page--article .article-meta-bottom-primary time {
    font-weight: 700;
    color: var(--color-gold-dark);
}

.page-article-content {
    font-size: 1.25rem;
    line-height: 1.85;
    margin-top: 1.25rem;
}

.page-article-content p,
.page-article-content li {
    font-size: inherit;
}

.article-hero-frame {
    position: relative;
}

.article-hero-image-btn {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    position: relative;
}

.article-hero-image-btn picture,
.article-hero-image-btn img {
    display: block;
    width: 100%;
}

.article-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.article-lightbox[hidden] {
    display: none !important;
}

.article-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.88);
}

.article-lightbox-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 72rem);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.article-lightbox-close {
    align-self: flex-end;
    margin: 0 0 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.article-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.24);
}

.article-lightbox-content {
    margin: 0;
    overflow: auto;
    border-radius: 10px;
    background: #0f172a;
}

.article-lightbox-content img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 5rem);
    object-fit: contain;
}

body.article-lightbox-open {
    overflow: hidden;
}

.article-archive-list--related {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.public-page--article .page-feed-panel,
.public-page--article .page-comments {
    background: #fff;
}

.public-page--article .page-feed-panel-head {
    background: #fff;
}

.public-page--article .page-related {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.page-related.page-feed-panel {
    overflow: hidden;
}

.page-related .page-feed-panel-head {
    margin: 0;
}

.article-nav {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

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

.article-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 3.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #fff;
    color: var(--color-ink);
    text-decoration: none;
    box-shadow: var(--shadow-surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.article-nav-link:hover {
    border-color: var(--color-gold);
    box-shadow: var(--shadow-sm);
    background: #fff;
    color: var(--color-ink);
}

.article-nav-label {
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-gold-dark);
}

.article-nav-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .page-toolbar-search.ntt-search-bar {
        flex-wrap: nowrap;
        height: 2.75rem;
        min-height: 2.75rem;
        overflow: hidden;
        border-radius: 999px;
        padding: 0 0 0 0.875rem;
        gap: 0.5rem;
        margin-bottom: 0;
    }

    .page-toolbar-search .ntt-input--search {
        flex: 1 1 auto;
        order: 0;
        padding: 0;
        min-height: 0;
    }

    .page-toolbar-search .ntt-search-bar-icon {
        order: 0;
        flex-shrink: 0;
    }

    .page-toolbar-search .ntt-search-bar-btn {
        order: 0;
        width: auto;
        margin-top: 0;
        min-height: 2.75rem;
        height: 2.75rem;
        align-self: stretch;
        border-radius: 0;
        padding: 0 1rem;
        font-size: 0.875rem;
    }

    .search-hero {
        padding: 1rem;
    }

    .search-hero-form {
        flex-wrap: wrap;
        border-radius: 12px;
        padding: 0.625rem;
    }

    .search-hero-form .ntt-input--search {
        flex: 1 1 100%;
        order: 1;
        padding: 0.625rem 0.25rem;
    }

    .search-hero-form .ntt-search-bar-icon {
        order: 0;
    }

    .search-hero-form .ntt-search-bar-btn {
        order: 2;
        width: 100%;
        margin-top: 0.25rem;
        min-height: 2.75rem;
    }

    .page-toolbar {
        padding: 1rem;
    }

    .page-article {
        padding: 1rem;
    }

    .page-article-meta-byline {
        font-size: 0.875rem;
    }

    .page-article-meta-actions {
        gap: 0.625rem;
    }

    .share-buttons--inline .share-icon {
        width: 2rem;
        height: 2rem;
    }

    .share-buttons--inline .share-icon svg {
        width: 16px;
        height: 16px;
    }

    .article-hero-zoom-label {
        left: 0.5rem;
        bottom: 0.5rem;
        font-size: 0.75rem;
    }

    .page-article-content {
        font-size: 1.1875rem;
        line-height: 1.8;
    }

    .archive-item-link {
        padding: 0.75rem;
    }

    .archive-item-title {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .page-layout--search {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

/* Public pages: gray canvas, pure-white card surfaces */
:is(.public-home, .public-page, .page-shell) {
    background: var(--color-bg);
}

:is(.public-home, .public-page) :is(
    .article-card,
    .chip-card,
    .author-card,
    .auth-card,
    .page-auth-card,
    .auth-modal-dialog,
    .home-discovery-row,
    .page-hero-feed,
    .category-hub-panel,
    .page-feed-panel,
    .page-feed-panel-head,
    .page-toolbar,
    .ntt-filters,
    .page-masthead:not(.page-masthead--dark):not(.page-masthead--static),
    .public-page-header,
    .search-hero,
    .search-tips,
    .search-examples,
    .explore-search,
    .region-hub-hero,
    .region-show-hero,
    .region-hub-featured,
    .region-hub-stat,
    .region-hub-toolbar,
    .region-hub-chip,
    .tag-hub-hero,
    .tag-show-hero,
    .tag-hub-featured,
    .tag-hub-stat,
    .tag-hub-toolbar,
    .tag-hub-chip,
    .cat-hub-hero,
    .category-show-hero,
    .cat-hub-featured,
    .cat-hub-stat,
    .cat-hub-toolbar,
    .cat-hub-chip,
    .category-show-back,
    .category-show-empty,
    .tag-show-back,
    .tag-show-empty,
    .region-show-back,
    .region-show-empty,
    .region-card,
    .category-card,
    .tag-card,
    .topic-cloud,
    .page-index-card,
    .page-author-card,
    .page-author-hero,
    .story-card--compact,
    .story-card--editorial,
    .page-article,
    .public-article,
    .article-full,
    .comments-section,
    .comments-section.page-comments,
    .comment-form,
    .comment-login-prompt,
    .developing-strip,
    .explore-index-toolbar,
    .explore-empty,
    .explore-empty--panel,
    .page-intro,
    .page-empty-state--panel,
    .page-error-suggestions,
    .article-archive-list,
    .article-archive-month-title,
    .article-sources,
    .article-read-also,
    .article-nav-link,
    .sidebar-panel:not(.sidebar-panel--dark),
    .page-article-meta-bar,
    .profile-comments-login,
    .public-author-profile
) {
    background: #fff;
}

.page-hero--embedded .story-spotlight--lg,
.category-hub-panel--featured .story-spotlight--lg {
    background: #fff;
}

.page-masthead--dark,
.public-page--map .public-page-header {
    background: var(--color-ink);
    color: #fff;
}

.page-hero-carousel {
    background: #0a0a0a;
    box-shadow: var(--shadow-surface);
}

.page-hero-featured {
    background: #0a0a0a;
    box-shadow: var(--shadow-surface);
}

.page-hero--embedded .page-hero-featured,
.category-hub-panel--featured .page-hero-featured {
    background: #fff;
    border: 0;
    box-shadow: none;
}

.page-hero-carousel-chrome {
    background: #0a0a0a;
}

.page-hero-carousel-stage {
    position: relative;
    isolation: isolate;
}

.public-page--map .public-page-header h1,
.public-page--map .public-page-header p {
    color: #fff;
}

:is(.public-home, .public-page) :is(
    .developing-strip,
    .page-toolbar,
    .page-feed-panel,
    .search-hero,
    .page-empty-state--panel,
    .chip-card,
    .author-card,
    .page-comments,
    .comments-section.page-comments,
    .article-nav-link
) {
    box-shadow: var(--shadow-surface);
}

/* Archive lists per bulan — shadow hanya di kotak daftar artikel */
.page-layout .article-archive {
    box-shadow: none;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.article-archive-month .article-archive-list {
    box-shadow: var(--shadow-surface);
}

/* Sidebar explore — scrollbar tidak menutupi angka */
.sidebar-explore-list {
    padding-right: 0.375rem;
    scrollbar-gutter: stable;
}

.sidebar-explore-link {
    padding-right: 0.125rem;
}

.sidebar-panel--explore {
    border-radius: 12px;
}

/* Sidebar iklan — beberapa slot */
.ad-sidebar-stack {
    display: grid;
    gap: 1rem;
}

.ad-sidebar-stack .ad-unit[hidden],
.ad-sidebar-stack .ad-unit--empty {
    display: none !important;
}

/* Header & footer ad — ukuran sama (970×90) */
.site-body-ad-strip--top .ad-unit--header .ad-unit-body,
.site-body-ad-strip--bottom .ad-unit--footer .ad-unit-body {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.ad-unit--header .ad-slot,
.ad-unit--footer .ad-slot {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
}

.ad-unit--header .ad-link,
.ad-unit--footer .ad-link {
    width: 100%;
    max-width: 970px;
}

.ad-unit--header .ad-link img,
.ad-unit--footer .ad-link img {
    width: 100%;
    height: auto;
    aspect-ratio: 970 / 90;
    object-fit: cover;
}

.site-body-ad-strip--bottom .ad-unit--footer {
    border-top: 0;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    margin-bottom: 0.5rem;
}

.site-body-ad-strip--top .ad-unit--header {
    margin-bottom: 0.25rem;
}

/* Komentar — jarak di atas form setelah login */
.comments-section .comment-form-wrap {
    margin-top: 1.25rem;
    padding-top: 0.25rem;
}

/* Halaman statis */
.page-static-panel {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    overflow: hidden;
}

.page-static-panel .page-static-body {
    padding: 1.25rem 1.125rem 1.5rem;
}

/* Penulis — hero inline avatar */
.page-author-show-hero .tag-show-title {
    margin: 0;
}

.page-author-show-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.page-author-show-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.page-author-show-avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold);
    color: var(--color-ink);
    font-size: 1.5rem;
    font-weight: 800;
}

/* Desktop — logo sear tinggi dengan kotak cari & tombol Masuk */
@media (min-width: 1024px) {
    .site-chrome--header .site-logo {
        align-items: center;
        height: 2.5rem;
    }

    .site-chrome--header .brand-lockup {
        justify-content: center;
        height: 2.5rem;
    }

    .site-chrome--header .site-logo-mark {
        width: 2.5rem;
        height: 2.5rem;
    }

    .site-chrome--header .site-logo-wordmark {
        height: 1.35rem;
    }

    .page-layout .page-aside {
        align-self: start;
    }

    .page-layout .page-aside > .sidebar-panel--explore:first-child,
    .page-layout .page-aside > .ad-sidebar-stack:first-child {
        margin-top: 0;
    }
}

:is(.article-card, .story-card--compact, .story-card--editorial) :is(
    .article-card-image,
    .article-card-body,
    .story-card-compact-media,
    .story-card-compact-body,
    .story-card-editorial-media,
    .story-card-editorial-body
) {
    border: 0;
    box-shadow: none;
}