/* ============================================================
   Backstage — custom layer on top of "Editorial" by HTML5 UP
   Loaded after assets/css/main.css
   ============================================================ */

:root{
	--bs-wine:#7D1226;
	--bs-gold:#C9962E;
	--bs-navy:#1C2740;
	--bs-accent:#f56a6a;
}

/* ---------- Category tag ---------- */
.cat-tag{
	display:inline-block; margin:0 0 .6em 0; padding:.35em .9em; border-radius:3px;
	font-family:"Roboto Slab",serif; font-size:.6em; font-weight:700; line-height:1;
	letter-spacing:.2em; text-transform:uppercase; color:#fff; background:var(--bs-wine);
}

/* ---------- Meta / bylines ---------- */
.byline{ margin-top:-.5em; color:#9fa3a6; font-size:.8em; letter-spacing:.05em; text-transform:uppercase; }
.byline .dot{ margin:0 .5em; opacity:.5; }
.mini-meta{ color:#9fa3a6; font-size:.85em; letter-spacing:.04em; text-transform:uppercase; }
#header .logo strong{ color:var(--bs-wine); }
.spotlight-excerpt{ font-size:1.15em; }
.lead{ font-size:1.15em; font-weight:600; }

/* ---------- Today / edition bar ---------- */
.edition-bar{
	background:var(--bs-navy); color:#e7e9f0;
	font-family:"Roboto Slab",serif; font-size:.68em; letter-spacing:.14em; text-transform:uppercase;
}
.edition-bar .inner{ display:flex; align-items:center; justify-content:space-between; padding:.6em 0; }
.edition-bar .live{ display:inline-flex; align-items:center; gap:.6em; }
.edition-bar .live::before{
	content:""; width:7px; height:7px; border-radius:50%; background:var(--bs-gold);
	box-shadow:0 0 0 0 rgba(201,150,46,.6); animation:bs-pulse 2.4s ease-out infinite;
}
@keyframes bs-pulse{ 70%{ box-shadow:0 0 0 9px rgba(201,150,46,0); } 100%{ box-shadow:0 0 0 0 rgba(201,150,46,0); } }
.theme-toggle{
	border:0; background:transparent; color:#e7e9f0; cursor:pointer;
	font-size:1.3em; line-height:1; padding:0 .2em; opacity:.85;
}
.theme-toggle:hover{ opacity:1; }

/* ---------- Section quick-nav (chips) ---------- */
.section-nav{ display:flex; flex-wrap:wrap; gap:.5em; margin:0 0 2em; }
.section-nav a{
	font-family:"Roboto Slab",serif; font-size:.62em; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	padding:.7em 1.2em; border:1px solid #dbdbe1; border-radius:999px; color:#7f888b; transition:all .15s;
}
.section-nav a:hover,.section-nav a.is-active{ background:var(--bs-wine); border-color:var(--bs-wine); color:#fff; }

/* ---------- Active menu link ---------- */
#menu a.is-active{ color:var(--bs-accent); font-weight:600; }

/* ---------- Headline ticker ---------- */
.ticker{ display:flex; align-items:stretch; margin:0 0 2.5em 0; border-top:1px solid #d1d5d8; border-bottom:1px solid #d1d5d8; overflow:hidden; }
.ticker-label{ flex:none; display:flex; align-items:center; padding:.6em 1.25em; background:var(--bs-wine); color:#fff;
	font-family:"Roboto Slab",serif; font-weight:700; font-size:.6em; letter-spacing:.25em; text-transform:uppercase; }
.ticker-viewport{ flex:1; overflow:hidden; display:flex; align-items:center;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
	        mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.ticker-track{ display:flex; width:max-content; white-space:nowrap; font-size:.8em; animation:bs-ticker 1600s linear infinite; }
.ticker-track:hover{ animation-play-state:paused; }
.ticker-track span{ padding:0 1.75em; color:#7f888b; }
.ticker-track span a{ border:none; color:#7f888b; }
.ticker-track span a:hover{ color:var(--bs-accent); }
.ticker-track span::before{ content:"\25C6"; margin-right:1.75em; color:var(--bs-accent); font-size:.6em; vertical-align:middle; }
@keyframes bs-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; } }

/* ---------- Lead / spotlight image ----------
   Cap the WIDTH on big screens so a 2:1 banner never becomes a billboard,
   and never crop the designed covers. Full-bleed on phones. */
.image.main{ display:block; max-width:760px; margin:0 0 2em 0; }
.image.main img{
	display:block; width:100%; height:auto;
	aspect-ratio:2 / 1; object-fit:cover; object-position:center;
	border-radius:6px;
}
@media (max-width:820px){
	.image.main{ max-width:none; }
}
@media (max-width:736px){
	.image.main img{ border-radius:4px; }
	.image.main{ margin-bottom:1.4em; }
}

/* ---------- Article: share + related + back-to-top ---------- */
.article-caption{ display:block; margin-top:.6em; color:#9fa3a6; font-size:.75em; font-style:italic; }

.share-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.7em; margin:2em 0; padding:1.2em 0; border-top:1px solid #e7e3d8; border-bottom:1px solid #e7e3d8; }
.share-row .label{ font-family:"Roboto Slab",serif; font-size:.6em; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#9fa3a6; margin-right:.4em; }
.share-row a,.share-row button{
	display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
	border:1px solid #dbdbe1; border-radius:50%; color:#7f888b; background:transparent; cursor:pointer; transition:all .15s;
}
.share-row a:hover,.share-row button:hover{ border-color:var(--bs-wine); color:var(--bs-wine); transform:translateY(-2px); }
.share-row .copied{ font-size:.8em; color:#3B6B52; letter-spacing:.04em; text-transform:uppercase; }

.related h2{ font-size:1.1em; }
.related-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5em; margin-top:1em; }
.related-list article{ border:1px solid #e7e3d8; border-radius:8px; overflow:hidden; }
.related-list .thumb{ display:block; aspect-ratio:16/9; background:#f0eee6; overflow:hidden; }
.related-list .thumb img{ width:100%; height:100%; object-fit:cover; }
.related-list .body{ padding:.9em 1em 1.1em; }
.related-list h3{ font-size:.95em; line-height:1.35; margin:0; }
@media (max-width:980px){ .related-list{ grid-template-columns:1fr; } }

#backtotop{
	position:fixed; right:1.4em; bottom:1.4em;
	width:44px; height:44px; min-width:44px; max-width:44px; padding:0; line-height:44px;
	border-radius:50%; border:0; background:var(--bs-wine); color:#fff; font-size:1.1em;
	cursor:pointer; z-index:1000; text-align:center;
	opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s, transform .2s;
}
#backtotop.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* ---------- Newsletter ---------- */
.newsletter form{ display:flex; gap:.5em; flex-wrap:wrap; }
.newsletter input[type="email"]{ flex:1; min-width:0; }
.newsletter .note{ margin-top:.6em; font-size:.8em; color:#9fa3a6; }
.newsletter .ok{ color:#3B6B52; font-weight:600; }

/* ---------- Search ---------- */
.search-results-list{ display:grid; gap:1.2em; }
.search-results-list article{ display:grid; grid-template-columns:150px 1fr; gap:1.2em; border:1px solid #e7e3d8; border-radius:8px; overflow:hidden; }
.search-results-list .thumb{ background:#f0eee6; }
.search-results-list .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.search-results-list .body{ padding:1em 1.2em; }
.search-results-list h3{ margin:.3em 0; font-size:1.05em; }
.search-empty{ color:#9fa3a6; font-style:italic; }
@media (max-width:640px){ .search-results-list article{ grid-template-columns:90px 1fr; } }

/* ---------- Daily Quiz ---------- */
.quiz-card{ background:#faf7f0; border:1px solid #e7e3d8; border-radius:12px; padding:2em 1.8em; max-width:640px; }
.quiz-progress{ font-family:"Roboto Slab",serif; font-size:.7em; letter-spacing:.1em; text-transform:uppercase; color:#9fa3a6; margin-bottom:1em; }
.quiz-question{ font-family:"Roboto Slab",serif; font-size:1.35em; font-weight:700; line-height:1.4; margin:0 0 1.2em; }
.quiz-options{ display:grid; gap:.6em; }
.quiz-option{ text-align:left; padding:.9em 1.1em; border-radius:8px; border:1px solid #dbdbe1; background:#fff;
	font-family:"Open Sans",sans-serif; font-size:1em; font-weight:400; letter-spacing:normal; text-transform:none;
	color:#3d3a34; line-height:1.5; height:auto; cursor:pointer; transition:border-color .12s; box-shadow:none; }
.quiz-option:hover{ border-color:var(--bs-wine); }
.quiz-option.correct{ border-color:#3B6B52; background:rgba(59,107,82,.12); font-weight:600; }
.quiz-option.wrong{ border-color:var(--bs-wine); background:rgba(125,18,38,.10); }
.quiz-option:disabled{ cursor:default; }
.quiz-next-btn{ margin-top:1.2em; width:100%; padding:1em; border-radius:8px; background:var(--bs-wine); color:#fff; border:0;
	font-family:"Roboto Slab",serif; font-size:.72em; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.quiz-next-btn:hover{ background:#5F0E1D; }
.quiz-result{ text-align:center; }
.quiz-result .score{ font-family:"Roboto Slab",serif; font-size:3.4em; font-weight:700; color:var(--bs-wine); margin:.1em 0; }

/* ---------- Prose (about / privacy / terms) ---------- */
.prose p{ line-height:1.75; }
.prose h2{ font-size:1.15em; margin-top:1.6em; }

/* ============================================================
   Dark mode  (body.dark)
   ============================================================ */
body.dark{ background:#15161a; color:#c3c6cd; }
body.dark #bg:before{ background-image:none; }
body.dark #bg:after{ opacity:.03; }
body.dark #wrapper,
body.dark #main{ background:#15161a; }
body.dark #main .inner > section > .major,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark strong, body.dark b{ color:#eceef2; }
body.dark a{ color:#eceef2; }
body.dark a:hover{ color:var(--bs-accent); }
body.dark #main .inner{ }
body.dark input, body.dark select, body.dark textarea{ background:#20222a !important; border-color:#33363f !important; color:#e7e8ec !important; box-shadow:none !important; }
body.dark hr{ border-bottom-color:#31343c; }
body.dark .box,
body.dark .related-list article,
body.dark .search-results-list article,
body.dark .quiz-card,
body.dark .quiz-option{ background:#1c1e24; border-color:#33363f; }
body.dark .quiz-option{ color:#e7e8ec; }
body.dark .quiz-option.correct{ background:rgba(59,107,82,.22); }
body.dark .quiz-option.wrong{ background:rgba(245,106,106,.16); }
body.dark .related-list h3 a,
body.dark .search-results-list h3 a{ color:#e7e8ec; }
body.dark #sidebar{ background:#101116; border-left-color:#2a2c33; }
body.dark #sidebar input{ background:#20222a; }
body.dark #sidebar .toggle:before{ background:#101116; color:#c3c6cd; }
body.dark .ticker{ border-color:#31343c; }
body.dark .ticker-viewport{ background:#101116; }
body.dark .section-nav a{ border-color:#33363f; color:#a7abb3; }
body.dark .share-row{ border-color:#31343c; }
body.dark .byline, body.dark .mini-meta, body.dark .newsletter .note{ color:#8b8f98; }
body.dark #footer{ color:#8b8f98; }