/* ==========================================================================
   Demo skin — Headline Hub (header 12 · Headline Stack grid · single 14)
   Black slab headers with a red slash, oversized Manrope type (upright, not
   the Arena italic), sharp corners and black/red buttons.
   ========================================================================== */
html[data-demo="headline"] {
    --sk-radius: 0px; --sk-field-radius: 0px; --sk-btn-radius: 0px;
    --sk-head-bg: #111111; --sk-head-fg: #ffffff; --sk-head-muted: rgba(255, 255, 255, .68);
    --sk-head-align: left;
    --sk-label-font: 'Manrope', var(--font-body), sans-serif; --sk-label-weight: 800; --sk-label-ls: 1.8px;
    --sk-title-weight: 800; --sk-title-style: normal; --sk-title-tt: none; --sk-title-ls: -0.045em;
    --sk-btn-ls: 1.4px;
    --sk-ink: #111111;
    --sk-soft: color-mix(in srgb, var(--accent) 4%, var(--bg-body));
}
html[data-demo="headline"][data-theme="dark"] { --sk-head-bg: color-mix(in srgb, var(--accent) 7%, #0c0c0f); --sk-ink: var(--text-main); }
html[data-demo="headline"] :is(.archive-title, .author-name, .comments-title, .comment-reply-title, .error-title, .classic-article-row .headline, .vt-grid-circle h3) { font-family: 'Manrope', var(--font-heading), sans-serif; }

/* --- Archive header: black slab, red slash, heavy rule --- */
html[data-demo="headline"] .archive-header { padding: 70px 24px 74px; }
html[data-demo="headline"] .archive-header::before { top: -20%; right: 14%; bottom: -20%; width: 46px; background: var(--accent); opacity: 1; transform: skewX(-16deg); box-shadow: -34px 0 0 -12px color-mix(in srgb, var(--accent) 50%, transparent), 70px 0 0 -18px rgba(255, 255, 255, .06); }
html[data-demo="headline"] .archive-header::after { height: 8px; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 220px 8px, linear-gradient(#ffffff, #ffffff) no-repeat 0 3.5px / 100% 1px; }
html[data-demo="headline"] .archive-header .container { padding-right: 22%; }
html[data-demo="headline"] .archive-label { position: relative; margin-right: 18px; padding: 8px 13px 7px; background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); font-style: normal; transform: none; }
html[data-demo="headline"] .archive-label::after { content: ''; display: block; position: absolute; top: 0; right: -16px; bottom: 0; width: 9px; height: auto; background: var(--accent); opacity: 1; transform: skewX(-16deg); }
html[data-demo="headline"] .archive-title { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem); line-height: .96; }
html[data-demo="headline"] .archive-tag-prefix { color: var(--accent-text, var(--accent)); }
html[data-demo="headline"] .archive-desc { font-size: 1.12rem; font-weight: 600; }
html[data-demo="headline"] .author-hero-section::before { right: 14%; width: 46px; background: var(--accent); opacity: 1; transform: skewX(-16deg); }

/* --- Lists: kicker labels, heavy rows --- */
html[data-demo="headline"] .category-tag,
html[data-demo="headline"] .card-cat { padding: 0; background: none; color: var(--accent-text, var(--accent)) !important; font: 800 11.5px/1 'Manrope', var(--font-body), sans-serif; letter-spacing: 1.5px; text-transform: uppercase; font-style: normal; transform: none; }
html[data-demo="headline"] .category-tag::before,
html[data-demo="headline"] .card-cat::before { content: '/'; margin-right: 6px; font-weight: 900; }
html[data-demo="headline"] .classic-article-row { position: relative; border-color: var(--border); }
html[data-demo="headline"] .classic-article-row .headline { font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
html[data-demo="headline"] .classic-article-row .headline a:hover { color: var(--accent-text, var(--accent)); }
html[data-demo="headline"] .classic-meta-time { font: 800 12px/1.35 'Manrope', var(--font-body), sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--sk-ink); }
html[data-demo="headline"] .classic-meta-time::before { content: ''; display: block; width: 26px; height: 4px; margin-bottom: 10px; background: var(--accent); transform: skewX(-16deg); }
html[data-demo="headline"] .classic-thumb, html[data-demo="headline"] .classic-thumb img { border-radius: 0; }
html[data-demo="headline"] .article-card { border-radius: 0; }
html[data-demo="headline"] .ep-section-heading .title-text { letter-spacing: -.02em; }

/* --- Load more / pagination --- */
html[data-demo="headline"] .load-more-btn { padding: 15px 30px; border: 2px solid var(--sk-ink); background: transparent; color: var(--sk-ink); font-style: normal; font-weight: 800; transform: none; }
html[data-demo="headline"] .load-more-btn:hover { border-color: var(--accent); background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); transform: translateY(-1px); }
html[data-demo="headline"] .ep-pagination.numeric-pagination a,
html[data-demo="headline"] .ep-pagination.numeric-pagination span { border: 2px solid var(--sk-ink); font-weight: 800; }
html[data-demo="headline"] .ep-pagination.numeric-pagination a:hover { border-color: var(--accent); color: var(--accent-text, var(--accent)); }
html[data-demo="headline"] .ep-pagination.numeric-pagination span.current { border-color: var(--accent); }

/* --- Comments --- */
html[data-demo="headline"] .comments-area { border: 0; border-top: 6px solid var(--sk-ink); background: transparent; }
html[data-demo="headline"] .comments-title,
html[data-demo="headline"] .comment-reply-title { font-style: normal; text-transform: none; letter-spacing: -.03em; }
html[data-demo="headline"] .comments-title::after,
html[data-demo="headline"] .comment-reply-title::after { width: 64px; height: 6px; border-radius: 0; transform: skewX(-16deg); }
html[data-demo="headline"] .comment-content-wrap { border: 0; border-left: 4px solid var(--accent); border-radius: 0; background: var(--bg-section-alt); }
html[data-demo="headline"] .comment-author { font-weight: 800; }
html[data-demo="headline"] .comment-date { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
html[data-demo="headline"] .comment-avatar img { border-radius: 0; box-shadow: 4px 4px 0 var(--accent); }
html[data-demo="headline"] .comment-reply-link { color: var(--accent-text, var(--accent)); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; }
html[data-demo="headline"] :is(.comment-form, #commentform) :is(textarea, input[type="text"], input[type="email"], input[type="url"]) { border: 2px solid var(--border); background: var(--bg-body); }
html[data-demo="headline"] :is(.comment-form, #commentform) :is(textarea, input):focus { border-color: var(--sk-ink); box-shadow: 4px 4px 0 var(--accent); }
html[data-demo="headline"] .submit-btn { padding: 16px 30px; background: var(--sk-ink); color: var(--bg-body); font-style: normal; font-weight: 800; transform: none; box-shadow: 6px 6px 0 var(--accent); }
html[data-demo="headline"] .submit-btn:hover { background: var(--accent-fill, var(--accent)); color: var(--on-accent-fill, #fff); transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--sk-ink); }

/* --- Taxonomy circles: red slash ring --- */
html[data-demo="headline"] .vt-grid-circle h3 { font-weight: 800; letter-spacing: -.02em; }
html[data-demo="headline"] .vt-circle-img { box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--sk-ink); }
html[data-demo="headline"] .vt-grid-circle a:hover .vt-circle-img { box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 7px var(--accent); }

@media (max-width: 768px) {
    html[data-demo="headline"] .archive-header { padding: 46px 20px 52px; }
    html[data-demo="headline"] .archive-header::before { right: 6%; width: 26px; }
    html[data-demo="headline"] .archive-header .container { padding-right: 34px; }
}