/* SURYABETON / TECH-GAMING EDITORIAL / LIGHT + DARK
   Theme tokens cover every component. No external JS/CSS/framework dependencies. */
:root,
html[data-theme="light"] {
  color-scheme:light;
  --bg:#f7f9ff;
  --ink:#172441;
  --muted:#63728f;
  --line:#dfe6f6;
  --accent:#6c5ce7;
  --accent-alt:#127ed7;
  --light:#f0f4ff;
  --surface:#fff;
  --surface-2:#f0f4ff;
  --surface-3:#eaf0ff;
  --elevated:#fff;
  --text-subtle:#596b88;
  --soft-border:#e6ebf7;
  --glow:rgba(111,93,231,.12);
  --shadow:0 12px 36px rgba(37,58,120,.08);
  --footer:#101c3a;
  --footer-text:#aebde2;
  --serif:'Segoe UI',Inter,ui-sans-serif,system-ui,Arial,sans-serif;
  --sans:'Segoe UI',Inter,ui-sans-serif,system-ui,Arial,sans-serif;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0b1020;
  --ink:#edf2ff;
  --muted:#9dacca;
  --line:#273452;
  --accent:#a698ff;
  --accent-alt:#66c7ff;
  --light:#131d35;
  --surface:#121b30;
  --surface-2:#17223d;
  --surface-3:#1e2b4c;
  --elevated:#18243e;
  --text-subtle:#a7b6d5;
  --soft-border:#263553;
  --glow:rgba(126,106,255,.18);
  --shadow:0 16px 42px rgba(0,0,0,.18);
  --footer:#080f20;
  --footer-text:#a4b7d9;
}
html { background:var(--bg); }
body {
  background:var(--bg);
  background-image:radial-gradient(circle at 10% 7%,rgba(69,137,240,.045),transparent 27%),radial-gradient(circle at 92% 16%,rgba(136,95,236,.045),transparent 29%);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
}
html[data-theme="dark"] body {
  background-image:radial-gradient(circle at 10% 6%,rgba(70,110,230,.085),transparent 28%),radial-gradient(circle at 90% 12%,rgba(116,63,221,.075),transparent 31%);
}
button,input,select { color:inherit; }
a { transition:color .18s ease; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid var(--accent-alt);outline-offset:3px; }
.shell { max-width:1300px; }
.utility-strip { background:var(--surface-2);color:var(--text-subtle);border-color:var(--line); }
.utility-content { letter-spacing:1.15px; }
.utility-content>span:first-child { color:var(--accent-alt); }
.dot-sep { color:var(--accent); }
.site-header { background:var(--surface);border-bottom:0; }
.header-inner { height:93px; }
.brand img { max-width:245px;max-height:64px; }
.header-right { gap:15px; }
.header-kicker { font:600 11px var(--sans);letter-spacing:.45px;color:var(--muted); }
.header-search { background:var(--surface-2);border:1px solid var(--line);border-radius:12px;width:235px;height:43px; }
.header-search input { color:var(--ink);font-size:12px; }
.header-search input::placeholder { color:var(--muted); }
.header-search button { color:var(--accent); }
.nav-wrap { background:var(--surface);border-color:var(--line); }
.main-nav { min-height:51px;gap:27px; }
.main-nav a { letter-spacing:.95px;font-size:10px;font-weight:800; }
.main-nav a:hover,.main-nav a:focus-visible { color:var(--accent); }
.main-nav a:first-child::before { bottom:-18px;background:linear-gradient(90deg,var(--accent-alt),var(--accent));height:3px;border-radius:3px; }
.theme-toggle { display:flex;gap:7px;align-items:center;justify-content:center;height:42px;min-width:88px;padding:0 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;color:var(--ink);transition:background .2s,border-color .2s; }
.theme-toggle:hover { border-color:var(--accent);background:var(--surface-3); }
.theme-toggle svg { width:17px;height:17px; }
.theme-toggle-label { font-size:11px;font-weight:800; }
html[data-theme="light"] .theme-toggle-sun, html[data-theme="dark"] .theme-toggle-moon { display:none; }
html[data-theme="dark"] .theme-toggle { color:var(--accent-alt); }
.news-ticker { background:var(--surface);border-color:var(--line); }
.ticker-label { color:var(--accent-alt); }
.live-dot { background:#28c8b2;box-shadow:0 0 0 4px rgba(40,200,178,.12); }
.ticker-items a { color:var(--text-subtle); }
.ticker-items a:hover { color:var(--accent); }
.ticker-date { color:var(--muted); }
/* Top-positioned blogroll / beneath top nav and ticker */
.top-blogroll { padding-top:28px;padding-bottom:10px; }
.top-blogroll-heading { display:flex;align-items:end;justify-content:space-between;gap:15px;margin:0 0 15px; }
.top-blogroll-heading .eyebrow { letter-spacing:1.5px;font-size:9px; }
.top-blogroll-heading h2 { font-family:var(--sans);font-size:22px;line-height:1.15;font-weight:830;letter-spacing:-.8px;margin:5px 0 0; }
.top-blogroll-heading h2 span { color:var(--accent); }
.top-blogroll-counter { font-size:9px;font-weight:850;letter-spacing:1px;color:var(--muted);white-space:nowrap; }
.top-blogroll-counter span { color:var(--accent-alt);font-size:15px;padding-left:4px; }
.top-blogroll-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.top-blogroll-link { display:flex;align-items:center;gap:12px;min-width:0;min-height:77px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 12px rgba(23,61,143,.025);transition:transform .2s,border-color .2s,box-shadow .2s; }
.top-blogroll-link:hover { transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 22px var(--glow); }
.top-blogroll-icon { display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:linear-gradient(135deg,rgba(45,146,244,.15),rgba(133,103,247,.17));color:var(--accent);font-size:17px;font-weight:900;flex:none; }
.top-blogroll-detail { display:flex;flex-direction:column;gap:4px;min-width:0; }
.top-blogroll-detail strong { font-size:12px;font-weight:850;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink); }
.top-blogroll-detail small { font-size:10px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5; }
/* Cover and editorial desk */
.lead-section { padding-top:34px; }
.lead-grid { grid-template-columns:minmax(0,1.62fr) minmax(285px,.84fr);gap:32px; }
.lead-story { background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow); }
.lead-media { height:338px;background:var(--surface-2); }
.lead-ribbon { bottom:14px;left:14px;padding:9px 13px;border-radius:8px;background:linear-gradient(135deg,#147ce8,#7755e7);color:#fff;letter-spacing:.8px;font-size:9px; }
.lead-copy { padding:21px 26px 25px; }
.meta-line { color:var(--muted); }
.meta-line a,.meta-line span:first-child { color:var(--accent); }
.lead-copy h1 { font-family:var(--sans);font-weight:850;font-size:34px;letter-spacing:-1.2px;line-height:1.19;margin:12px 0; }
.lead-copy h1 a:hover,.lead-mini h3 a:hover,.card-body h3 a:hover,.compact-post h3 a:hover { color:var(--accent); }
.lead-copy p { color:var(--text-subtle);font-size:13px;line-height:1.75;margin:0 0 16px; }
.text-cta,.explore-brief,.all-link,.read-more { color:var(--accent); }
.lead-right { padding:17px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);align-self:start; }
.lead-right-title { padding:0 0 18px;border-color:var(--line); }
.lead-right-title>span { color:var(--accent-alt);font-size:10px; }
.lead-right-title h2 { font:850 28px/1.2 var(--sans);letter-spacing:-1.1px; }
.lead-right-title h2 em { font-style:normal;color:var(--accent);font-weight:850; }
.lead-right-title p,.mini-date { color:var(--muted); }
.lead-mini { padding:16px 0;border-color:var(--line);gap:13px; }
.mini-no { font:800 21px var(--sans);color:var(--accent-alt);opacity:.7; }
.mini-topic { color:var(--accent); }
.lead-mini h3 { font:800 15px/1.42 var(--sans);letter-spacing:-.2px; }
.explore-brief { margin:16px 0 4px;font-size:10px; }
/* Brand banner is opt-in from CMS; hidden by default */
.brand-banner { border-radius:18px;margin-top:30px;margin-bottom:50px;box-shadow:var(--shadow); }
.banner-copy { background:linear-gradient(120deg,#112857,#252e75); }
.banner-label { color:#b3baff; }
.banner-copy h2 { font:850 26px/1.2 var(--sans); }
.banner-copy p { color:#d4dafe; }
.banner-copy a { color:#c8baff; }
.banner-art-minimal { background:linear-gradient(120deg,#2556c5,#6544cf); }
/* Feed + cards */
.feature-section { padding-top:43px;margin-bottom:67px; }
.section-heading { border-color:var(--line);margin-bottom:20px;padding-bottom:18px; }
.section-heading h2 { font:850 30px/1.2 var(--sans);letter-spacing:-1.05px; }
.eyebrow { color:var(--accent-alt);letter-spacing:1.7px; }
.feed-summary,.feed-empty-note { color:var(--muted); }
.category-quicknav { border-color:var(--line); }
.category-quicknav a { background:var(--surface);border-color:var(--line);color:var(--text-subtle);border-radius:9px; }
.category-quicknav a.active { background:linear-gradient(120deg,#1877db,#7252e8);color:#fff;border-color:transparent; }
.category-quicknav a:hover { color:var(--accent);border-color:var(--accent); }
.category-quicknav a.active:hover { color:#fff; }
.card-grid { gap:18px; }
.post-card { background:var(--surface);border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 5px 24px rgba(40,63,122,.035);transition:transform .2s,box-shadow .2s,border-color .2s; }
.post-card:hover { transform:translateY(-2px);box-shadow:var(--shadow);border-color:rgba(109,99,230,.48); }
.card-media { aspect-ratio:1.64;background:var(--surface-2); }
.media-type { bottom:12px;left:12px;border-radius:7px;padding:8px 10px;background:var(--surface);color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.07); }
.card-body { padding:17px 17px 19px; }
.card-body h3 { font:810 18px/1.33 var(--sans);letter-spacing:-.45px; }
.card-body p { color:var(--text-subtle);font-size:12px; }
.read-more { font-size:10px; }
.sidebar { gap:16px; }
.side-box { background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:19px; }
.side-title { border-color:var(--line); }
.side-icon { background:var(--surface-3);color:var(--accent); }
.side-title h3 { font:810 14px var(--sans); }
.compact-post { border-color:var(--line); }
.compact-no { font:850 23px var(--sans);color:var(--accent-alt); }
.compact-post h3 { font:750 13px/1.45 var(--sans); }
.side-subtext { color:var(--muted); }
.blogroll-list a { border-color:var(--line); }
.blogroll-list small { color:var(--muted); }
.blogroll-list svg { color:var(--accent); }
.blogroll-list a:hover strong { color:var(--accent); }
.topic-tags a { background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--text-subtle); }
.topic-tags a:hover { background:var(--surface-3);color:var(--accent);border-color:var(--accent); }
.news-section { background:var(--surface-2);padding:54px 0 60px;margin-bottom:50px;border-block:1px solid var(--line); }
.news-grid { gap:16px; }
.news-grid .post-card:last-child { display:block; }
.topics-section { margin-bottom:75px; }
.topic-cards { gap:14px; }
.topic-card { background:var(--surface);border-color:var(--line);border-radius:14px;min-height:177px; }
.topic-card:hover { background:var(--surface-2);border-color:var(--accent); }
.topic-num { color:var(--accent-alt); }
.topic-card strong { font:800 17px var(--sans); }
.topic-card p { color:var(--muted); }
.topic-arrow { color:var(--accent); }
/* Footer */
.footer { background:var(--footer);color:#eff4ff; }
.footer h3 { color:#b9b0ff; }
.footer-intro p,.footer-note p,.footer-main>div:not(:first-child)>a,.socials a { color:var(--footer-text); }
.footer-main a:hover { color:#a6b9ff; }
.footer-badge { color:#c0bdff;border-color:#44518d; }
.copyright { color:var(--footer-text);border-color:#293b65; }
/* archives, posts, static pages */
.archive-heading h1,.page-simple h1,.article-header h1,.related h2,.not-found h1 { font-family:var(--sans);font-weight:850;letter-spacing:-1.15px; }
.archive-heading p,.article-intro,.not-found p,.empty-state p,.article-cover figcaption { color:var(--muted); }
.breadcrumbs,.breadcrumb-current,.reading-time,.article-meta small,.article-end { color:var(--muted); }
.archive-count { color:var(--accent-alt); }
.pagination a,.empty-state { background:var(--surface);border-color:var(--line);color:var(--text-subtle);border-radius:8px; }
.pagination a.is-active { background:var(--accent);border-color:var(--accent);color:#fff; }
.article-header .article-label,.article-end a { color:var(--accent); }
.article-header h1 { color:var(--ink); }
.author-avatar,.pill-btn { background:linear-gradient(135deg,#167bdc,#764fe8); }
.article-cover img { border-radius:14px;background:var(--surface-2); }
.prose { color:var(--text-subtle);font-size:15px; }
.prose h2,.prose h3,.prose h4 { font-family:var(--sans);color:var(--ink);font-weight:820;letter-spacing:-.6px; }
.prose a { color:var(--accent);text-decoration-color:var(--accent); }
.prose strong { color:var(--ink); }
.prose blockquote { background:var(--surface-2);border-color:var(--accent);color:var(--text-subtle);font-family:var(--sans); }
.large-error { color:var(--soft-border); }
/* Dark mode contrast is fully tokenized for layout and all publication pages */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .nav-wrap,
html[data-theme="dark"] .news-ticker { box-shadow:none; }
html[data-theme="dark"] .lead-story,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .side-box,
html[data-theme="dark"] .lead-right,
html[data-theme="dark"] .topic-card { box-shadow:0 8px 26px rgba(0,0,0,.08); }
html[data-theme="dark"] .footer-logo img { filter:brightness(0) invert(1); }
html[data-theme="dark"] .lead-ribbon { color:white; }
html[data-theme="dark"] .brand img { filter:brightness(0) invert(1); }
/* Responsive */
@media(max-width:1080px){
 .top-blogroll-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .header-kicker { display:none; }
}
@media(max-width:760px){
 .header-inner { height:75px; }
 .lead-section { padding-top:22px; }
 .top-blogroll { padding-top:22px; }
 .top-blogroll-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .lead-right { padding:17px; }
 .news-grid .post-card:last-child { display:block; }
 .theme-toggle { min-width:42px;width:42px;padding:0; }
 .theme-toggle-label { display:none; }
 .main-nav a:first-child::before { display:none; }
 .main-nav a { border-color:var(--line); }
}
@media(max-width:520px){
 .top-blogroll-heading h2 { font-size:20px; }
 .top-blogroll-counter { display:none; }
 .top-blogroll-link { padding:12px;min-height:68px;gap:8px; }
 .top-blogroll-detail strong { font-size:11px; }
 .top-blogroll-detail small { font-size:9px; }
 .top-blogroll-icon { width:28px;height:28px;border-radius:8px; }
 .header-right { gap:7px; }
 .header-search:focus-within { background:var(--surface);border-color:var(--accent);right:105px; }
 .lead-copy { padding:17px; }
 .lead-copy h1 { font-size:27px; }
 .section-heading h2 { font-size:24px; }
 .card-body h3 { font-size:18px; }
 .topic-card strong { font-size:16px; }
 .prose { font-size:14px; }
}
@media(max-width:370px){
 .top-blogroll-grid { grid-template-columns:1fr; }
 .top-blogroll-link { min-height:58px; }
 .brand img { max-width:155px; }
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after { transition:none!important;scroll-behavior:auto!important; }
}