:root[data-theme="dark"]{
  --paper:#262626;
  --panel:#303030;
  --panel-soft:#383838;
  --panel-tint:#3b3b3b;
  --ink:#f5efe5;
  --muted:#c7c7c7;
  --soft:#b8b8b8;
  --line:#4b4b4b;
  --line-strong:#666;
  --accent:#ffb36f;
  --accent-soft:#3b332e;
  --shadow:0 20px 48px rgba(0,0,0,.22);
  color-scheme:dark;
}
:root[data-theme="dark"] body{
  background:linear-gradient(180deg,#2a2a2a 0,#242424 220px,#202020 100%) !important;
  color:var(--ink) !important;
}
:root[data-theme="dark"] header,
:root[data-theme="dark"] .topline{
  background:rgba(38,38,38,.94) !important;
  border-color:#494949 !important;
  color:#e7e1d8 !important;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] article,
:root[data-theme="dark"] aside,
:root[data-theme="dark"] .hero-main,
:root[data-theme="dark"] .hero-rail,
:root[data-theme="dark"] .section-intro,
:root[data-theme="dark"] .trust-band,
:root[data-theme="dark"] .feed-card,
:root[data-theme="dark"] .journey-card,
:root[data-theme="dark"] .guide-card,
:root[data-theme="dark"] .commercial-card,
:root[data-theme="dark"] .topic-card,
:root[data-theme="dark"] .fact,
:root[data-theme="dark"] .tool-card,
:root[data-theme="dark"] .news-card,
:root[data-theme="dark"] .method-card,
:root[data-theme="dark"] .editor-card,
:root[data-theme="dark"] .panel-note,
:root[data-theme="dark"] .featured-story,
:root[data-theme="dark"] .brief-card,
:root[data-theme="dark"] .status-card,
:root[data-theme="dark"] .desk-item,
:root[data-theme="dark"] .editorial-card{
  background:#303030 !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
}
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] .lead,
:root[data-theme="dark"] .summary,
:root[data-theme="dark"] .content p,
:root[data-theme="dark"] .content li,
:root[data-theme="dark"] .aux,
:root[data-theme="dark"] .footer-links,
:root[data-theme="dark"] .story-body p,
:root[data-theme="dark"] .feed-card p,
:root[data-theme="dark"] .section-head p,
:root[data-theme="dark"] .journey-card p,
:root[data-theme="dark"] .tool-card p,
:root[data-theme="dark"] .news-card p,
:root[data-theme="dark"] .topic-card p,
:root[data-theme="dark"] .fact p,
:root[data-theme="dark"] .commercial-card p{
  color:var(--muted) !important;
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] strong,
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] .logo-note,
:root[data-theme="dark"] .mini-label{
  color:var(--ink) !important;
}
:root[data-theme="dark"] a{color:#fff2df !important}
:root[data-theme="dark"] a:hover{color:var(--accent) !important}
.theme-toggle,.site-theme-toggle{
  width:34px !important;
  height:34px !important;
  border-radius:999px !important;
  border:1px solid var(--line,#d7d0c2) !important;
  background:rgba(255,253,249,.72) !important;
  color:var(--ink,#1e1e1b) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:none !important;
  font-size:.95rem !important;
  line-height:1 !important;
  opacity:.78 !important;
  padding:0 !important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease !important;
}
.theme-toggle:hover,.site-theme-toggle:hover{transform:translateY(-1px);opacity:1 !important}
.theme-toggle .sun,.site-theme-toggle .sun{display:none !important}
.theme-toggle .moon,.site-theme-toggle .moon{display:inline !important}
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .site-theme-toggle{
  background:rgba(48,48,48,.82) !important;
  border-color:#666 !important;
  color:#f5efe5 !important;
}
:root[data-theme="dark"] .theme-toggle .sun,
:root[data-theme="dark"] .site-theme-toggle .sun{display:inline !important}
:root[data-theme="dark"] .theme-toggle .moon,
:root[data-theme="dark"] .site-theme-toggle .moon{display:none !important}
.site-theme-toggle{position:fixed !important;top:14px !important;right:14px !important;z-index:9999 !important}
@media(max-width:920px){.site-theme-toggle{top:10px !important;right:10px !important}}

/* Mobile reading optimisation: keep article pages comfortable but less scroll-heavy. */
@media(max-width:560px){
  body{
    line-height:1.56 !important;
    text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
  }
  .wrap,
  .container{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .article-wrap{
    max-width:none !important;
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .page,
  main > article.card,
  main .card.content{
    border-left:0 !important;
    border-right:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .topline{font-size:11.5px !important;line-height:1.35 !important}
  .topline .wrap{padding-top:6px !important;padding-bottom:6px !important}
  header .top,.top{min-height:auto !important;padding-top:8px !important;padding-bottom:8px !important;gap:8px !important}
  .logo{font-size:1rem !important;line-height:1.15 !important;letter-spacing:.075em !important}
  .logo-note{font-size:.64rem !important;line-height:1.25 !important}
  nav{gap:10px !important}
  nav a{font-size:.72rem !important;letter-spacing:.055em !important}
  main{padding-top:18px !important;padding-bottom:18px !important}
  article,
  article.content,
  .content,
  .card{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  article.content{padding-top:20px !important;padding-bottom:30px !important}
  p,
  li,
  article.content p,
  article.content li,
  .content p,
  .content li,
  .intro-copy p,
  .dek,
  .lead{
    font-size:15.8px !important;
    line-height:1.55 !important;
  }
  p,
  article.content p,
  .content p,
  .intro-copy p{margin-bottom:11px !important}
  ul,ol,
  article.content ul,
  article.content ol{
    font-size:15.8px !important;
    line-height:1.55 !important;
    padding-left:20px !important;
    margin-bottom:12px !important;
  }
  li{margin-top:4px !important;margin-bottom:4px !important}
  h1{
    font-size:clamp(1.58rem,7vw,2.05rem) !important;
    line-height:1.08 !important;
    max-width:18ch !important;
    margin-bottom:10px !important;
  }
  h2{
    font-size:1.28rem !important;
    line-height:1.18 !important;
    margin-top:24px !important;
    margin-bottom:8px !important;
  }
  h3{font-size:1.05rem !important;line-height:1.22 !important;margin-bottom:7px !important}
  .article-head{
    padding-left:14px !important;
    padding-right:14px !important;
    padding-top:20px !important;
    padding-bottom:16px !important;
  }
  .standfirst,
  .verdict,
  .takeaway,
  .disclosure-box{
    padding:12px 13px !important;
    margin-top:14px !important;
    margin-bottom:14px !important;
  }
  .meta,
  .note,
  figcaption,
  .feature-image figcaption,
  .hero-illustration figcaption,
  .sources p,
  .sources li{
    font-size:12.8px !important;
    line-height:1.42 !important;
  }
  figcaption,
  .feature-image figcaption,
  .hero-illustration figcaption{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  table{font-size:12.8px !important;line-height:1.35 !important}
  th,td{padding:8px 7px !important}
  .related-reading{margin-top:18px !important;padding-top:15px !important}
  .related-card span{padding:9px 10px !important}
  .related-card strong{font-size:.94rem !important}
  .related-card small{font-size:12.2px !important;line-height:1.32 !important}
}
