/* Demo skin — Daily Dot (fast news): black + yellow, heavy Montserrat, live strip, yellow-dot timeline rows.
   Pairs with grid-rapid + single style-22. Loaded after skin-base.css + skin-10.css. */
html[data-demo="dailydot"] {
	--sk-radius: 0px; --sk-field-radius: 0px; --sk-btn-radius: 0px;
	--sk-head-bg: var(--bg-body);
	--sk-label-font: 'Montserrat', var(--font-body), sans-serif; --sk-label-ls: 2px; --sk-label-weight: 900; --sk-label-size: 11px;
	--sk-title-weight: 900; --sk-title-ls: -0.04em;
	--sk-soft: var(--bg-section-alt);
	--dd-ink: #111111; --dd-on-ink: var(--accent);
}
html[data-demo="dailydot"][data-theme="dark"] { --dd-ink: var(--accent); --dd-on-ink: #111111; }

/* Montserrat replaces the broadsheet serif */
html[data-demo="dailydot"] :is(.archive-title, .author-name, .comments-title, .comment-reply-title, .classic-article-row .headline, .vt-grid-circle h3, .error-title) { font-family: 'Montserrat', var(--font-heading), sans-serif; }

/* ---------- Archive header: live desk ---------- */
html[data-demo="dailydot"] .archive-header { padding: 46px 24px 40px; text-align: left; }
html[data-demo="dailydot"] .archive-header .container { padding: 26px 0 24px; border-top: 6px solid var(--text-main); border-bottom: 1px solid var(--border); }
html[data-demo="dailydot"] .archive-label { gap: 9px; padding: 7px 11px; background: var(--dd-ink); color: var(--dd-on-ink); }
html[data-demo="dailydot"] .archive-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; opacity: 1; animation: dd-skin-blink 1.4s ease-in-out infinite; }
html[data-demo="dailydot"] .archive-label::after { display: none; }
@keyframes dd-skin-blink { 50% { opacity: .2; } }
html[data-demo="dailydot"] .archive-title { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem); line-height: .95; }
html[data-demo="dailydot"] .archive-title::after { content: ''; display: inline-block; width: .2em; height: .2em; margin-left: .06em; border-radius: 50%; background: var(--accent); }
html[data-demo="dailydot"] .archive-desc { max-width: 620px; margin: 14px 0 0; padding-left: 14px; border-left: 4px solid var(--accent); font-family: var(--font-body); font-style: normal; font-weight: 500; color: var(--text-main); }
html[data-demo="dailydot"] .author-profile-wrapper { border-top-width: 6px; border-top-style: solid; }
html[data-demo="dailydot"] .author-avatar { border-radius: 0; box-shadow: 8px 8px 0 var(--accent); }
html[data-demo="dailydot"] .author-role { background: var(--dd-ink); color: var(--dd-on-ink); }

/* ---------- List rows → timeline feed ---------- */
html[data-demo="dailydot"] .classic-article-row { position: relative; border-bottom: 1px solid var(--border); }
html[data-demo="dailydot"] .classic-meta-time { position: relative; padding-top: 24px; }
html[data-demo="dailydot"] .classic-meta-time span { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11px; line-height: 1.3; letter-spacing: .4px; text-transform: uppercase; color: var(--text-main); }
html[data-demo="dailydot"] .classic-meta-time::after { content: ''; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
html[data-demo="dailydot"] .classic-article-row:first-child .classic-meta-time span { color: #a16207; }
html[data-demo="dailydot"][data-theme="dark"] .classic-article-row:first-child .classic-meta-time span { color: var(--accent-text, var(--accent)); }
html[data-demo="dailydot"] .classic-article-row .headline { font-weight: 800; letter-spacing: -.5px; }
html[data-demo="dailydot"] .classic-article-row .headline a { background: linear-gradient(var(--accent), var(--accent)) 0 92% / 0 .3em no-repeat; transition: background-size .35s; }
html[data-demo="dailydot"] .classic-article-row .headline a:hover { color: inherit; background-size: 100% .3em; }
html[data-demo="dailydot"][data-theme="dark"] .classic-article-row .headline a { background-image: linear-gradient(color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 55%, transparent)); }
html[data-demo="dailydot"] .classic-thumb, html[data-demo="dailydot"] .classic-thumb img { border-radius: 0; }
html[data-demo="dailydot"] .category-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; background: var(--dd-ink); color: var(--dd-on-ink); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 10.5px; letter-spacing: 1.4px; }
html[data-demo="dailydot"] .category-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ---------- Load more + pagination ---------- */
html[data-demo="dailydot"] .load-more-btn { padding: 14px 28px; border: 0; background: var(--accent); color: #111; font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: 1.4px; box-shadow: 5px 5px 0 var(--text-main); }
html[data-demo="dailydot"] .load-more-btn:hover { background: var(--accent); color: #111; transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--text-main); }
html[data-demo="dailydot"] .ep-pagination.numeric-pagination a,
html[data-demo="dailydot"] .ep-pagination.numeric-pagination span { border: 2px solid var(--text-main); background: var(--bg-body); font-weight: 800; }
html[data-demo="dailydot"] .ep-pagination.numeric-pagination a:hover { background: var(--accent); border-color: var(--accent); color: #111; }
html[data-demo="dailydot"] .ep-pagination.numeric-pagination span.current { border-color: var(--dd-ink); background: var(--dd-ink); color: var(--dd-on-ink); }

/* ---------- Comments ---------- */
html[data-demo="dailydot"] .comments-area { border: 0; border-top: 6px solid var(--text-main); background: var(--bg-body); }
html[data-demo="dailydot"] .comments-title, html[data-demo="dailydot"] .comment-reply-title { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-transform: uppercase; letter-spacing: -.01em; }
html[data-demo="dailydot"] .comments-title::before, html[data-demo="dailydot"] .comment-reply-title::before { content: ''; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
html[data-demo="dailydot"] .comments-title::after, html[data-demo="dailydot"] .comment-reply-title::after { height: 0; border-top: 1px solid var(--border); }
html[data-demo="dailydot"] .comment-content-wrap { border: 0; border-left: 4px solid var(--accent); background: var(--bg-section-alt); }
html[data-demo="dailydot"] .comment-avatar img { border-radius: 0; box-shadow: 4px 4px 0 var(--accent); }
html[data-demo="dailydot"] .comment-author { font-weight: 800; }
html[data-demo="dailydot"] .comment-date { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase; }
html[data-demo="dailydot"] .comment-reply-link { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
html[data-demo="dailydot"] .comment-form textarea,
html[data-demo="dailydot"] .comment-form input[type="text"],
html[data-demo="dailydot"] .comment-form input[type="email"],
html[data-demo="dailydot"] .comment-form input[type="url"],
html[data-demo="dailydot"] #commentform textarea,
html[data-demo="dailydot"] #commentform input[type="text"],
html[data-demo="dailydot"] #commentform input[type="email"] { border: 2px solid var(--border); background: var(--bg-body); }
html[data-demo="dailydot"] .comment-form textarea:focus,
html[data-demo="dailydot"] .comment-form input:focus,
html[data-demo="dailydot"] #commentform textarea:focus,
html[data-demo="dailydot"] #commentform input:focus { border-color: var(--text-main); box-shadow: 4px 4px 0 var(--accent); }
html[data-demo="dailydot"] .submit-btn { border: 0; background: var(--accent); color: #111; font-family: 'Montserrat', sans-serif; font-weight: 900; letter-spacing: 1.4px; box-shadow: 5px 5px 0 var(--text-main); }
html[data-demo="dailydot"] .submit-btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--text-main); }

/* ---------- Taxonomy index: dots ---------- */
html[data-demo="dailydot"] .vt-grid-circle .vt-circle-img { position: relative; box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--text-main); }
html[data-demo="dailydot"] .vt-grid-circle a:hover .vt-circle-img { box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 7px var(--accent); }
html[data-demo="dailydot"] .vt-grid-circle h3 { font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; }
html[data-demo="dailydot"] .vt-grid-circle h3::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--accent); }

@media (max-width: 768px) {
	html[data-demo="dailydot"] .archive-header { padding: 30px 20px 26px; }
	html[data-demo="dailydot"] .archive-header .archive-title { font-size: 3rem; }
	html[data-demo="dailydot"] .classic-meta-time { padding-top: 0; padding-left: 20px; }
	html[data-demo="dailydot"] .classic-meta-time::after { top: 50%; left: 2px; width: 10px; height: 10px; margin-top: -5px; }
}
@media (prefers-reduced-motion: reduce) { html[data-demo="dailydot"] .archive-label::before { animation: none; } }