/*
 * Online Earning Zone — design system
 * Single stylesheet, no framework, no build step required.
 * Sections: 1 tokens · 2 reset · 3 layout · 4 typography · 5 header/nav
 *           6 components · 7 article · 8 forms · 9 ads · 10 footer · 11 utilities
 */

/* ============ 1. TOKENS ============ */
:root {
  /* brand */
  --navy-900:#0B2239; --navy-800:#123255; --navy-700:#1B4472; --navy-050:#E9EEF4;
  --emerald-700:#0A6647; --emerald-600:#0C7A54; --emerald-050:#E6F2EC;
  --amber-700:#9A5B06; --amber-600:#C97A0B; --amber-050:#FBF0DC;
  --red-600:#A32B22; --red-050:#F8E9E7;

  /* surfaces + ink */
  --paper:#F8F7F3;
  --surface:#FFFFFF;
  --surface-2:#F2F1EC;
  --ink:#1D242B;
  --ink-2:#4C5762;
  --ink-3:#6C7681;
  --line:#E2E0D8;
  --line-strong:#CBC8BD;

  /* roles */
  --brand:var(--navy-800);
  --brand-ink:#FFFFFF;
  --accent:var(--emerald-600);
  --alert:var(--amber-600);
  --focus:#1B7FD1;

  /* type */
  --font-ui:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-read:"Iowan Old Style","Charter","Georgia","Times New Roman",serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.3125rem; --fs-2xl:1.5rem; --fs-3xl:clamp(1.75rem,1.3rem + 1.8vw,2.25rem);
  --fs-4xl:clamp(2.1rem,1.5rem + 2.8vw,3rem);
  --lh-tight:1.18; --lh-snug:1.35; --lh:1.6; --lh-read:1.72;

  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;

  /* shape */
  --r-sm:6px; --r:10px; --r-lg:16px;
  --shadow:0 1px 2px rgba(11,34,57,.06), 0 6px 18px -12px rgba(11,34,57,.25);
  --wide:1180px; --content:44rem;
  --dur:.18s;
}

html[data-theme="dark"] {
  --paper:#0C1620; --surface:#121E2B; --surface-2:#182634;
  --ink:#E8EBEF; --ink-2:#B4BEC9; --ink-3:#8D97A2;
  --line:#243343; --line-strong:#31445A;
  --navy-050:#182634; --emerald-050:#102C24; --amber-050:#2E2312; --red-050:#301B19;
  --emerald-600:#3FBF8D; --emerald-700:#5CCFA0; --amber-600:#E8A94A; --amber-700:#F0BC6E;
  --red-600:#E58A80; --brand:#0B2239; --focus:#68B6F5;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -14px rgba(0,0,0,.7);
}

/* ============ 2. RESET ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-base)/var(--lh) var(--font-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{max-width:100%;height:auto;display:block}
img{background:var(--surface-2)}
a{color:var(--navy-700);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--emerald-700)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
:target{scroll-margin-top:5.5rem}
hr{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
table{border-collapse:collapse;width:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ============ 3. LAYOUT ============ */
.wrap{width:min(100% - 2rem,var(--wide));margin-inline:auto}
.stack > * + *{margin-top:var(--s4)}
.section{padding-block:var(--s7)}
.section--tight{padding-block:var(--s6)}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.section__head h2{margin:0}
.grid{display:grid;gap:var(--s5)}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:899px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
.layout-main{display:grid;gap:var(--s7);align-items:start}
@media (min-width:1040px){.layout-main--sidebar{grid-template-columns:minmax(0,1fr) 300px}}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);
  padding:var(--s3) var(--s4);border:2px solid var(--focus);border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

/* ============ 4. TYPOGRAPHY ============ */
h1,h2,h3,h4{font-family:var(--font-ui);color:var(--ink);line-height:var(--lh-tight);
  letter-spacing:-.015em;font-weight:650;margin:0 0 var(--s3)}
h1{font-size:var(--fs-4xl);letter-spacing:-.025em}
h2{font-size:var(--fs-3xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
p{margin:0 0 var(--s4)}
.lede{font-size:var(--fs-lg);color:var(--ink-2);max-width:60ch}
.meta{font-size:var(--fs-sm);color:var(--ink-3)}
.meta a{color:var(--ink-2)}
small{font-size:var(--fs-xs)}

/* ============ 5. HEADER / NAV ============ */
.topbar{background:var(--navy-900);color:#DCE6F1;font-size:var(--fs-xs)}
.topbar .wrap{display:flex;gap:var(--s4);align-items:center;justify-content:center;
  min-height:2.25rem;text-align:center}
.topbar a{color:#fff}

.site-header{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);transition:box-shadow var(--dur) ease}
.site-header[data-scrolled="true"]{box-shadow:0 6px 20px -18px rgba(11,34,57,.9)}
.header-bar{display:flex;align-items:center;gap:var(--s4);min-height:4rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:700;
  letter-spacing:-.02em;font-size:var(--fs-lg);margin-right:auto}
.brand:hover{color:var(--ink)}
.brand__mark{width:2rem;height:2rem;flex:0 0 auto}
.brand__name small{display:block;font-weight:500;font-size:.6875rem;color:var(--ink-3);letter-spacing:.02em}

.nav-primary{display:none}
@media (min-width:1040px){.nav-primary{display:block}}
.nav-primary ul{display:flex;gap:var(--s2);list-style:none;margin:0;padding:0}
.nav-primary a{display:block;padding:.5rem .625rem;border-radius:var(--r-sm);color:var(--ink-2);
  text-decoration:none;font-size:var(--fs-sm);font-weight:550}
.nav-primary a:hover,.nav-primary .current-menu-item > a{background:var(--navy-050);color:var(--navy-800)}
html[data-theme="dark"] .nav-primary a:hover{color:#fff}

.header-tools{display:flex;align-items:center;gap:var(--s2)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;
  background:none;border:1px solid transparent;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.icon-btn svg{width:1.25rem;height:1.25rem}
@media (min-width:1040px){.icon-btn--menu{display:none}}

.header-search{display:none;padding-bottom:var(--s4)}
.header-search[data-open="true"]{display:block}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:60;display:none}
.drawer[data-open="true"]{display:block}
.drawer__scrim{position:absolute;inset:0;background:rgba(11,34,57,.5)}
.drawer__panel{position:absolute;inset-block:0;right:0;width:min(20rem,86vw);background:var(--surface);
  padding:var(--s4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4);
  border-left:1px solid var(--line)}
.drawer__panel ul{list-style:none;margin:0;padding:0}
.drawer__panel li + li{border-top:1px solid var(--line)}
.drawer__panel a{display:block;padding:.85rem .25rem;text-decoration:none;color:var(--ink);font-weight:550}

/* ============ 6. COMPONENTS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.875rem;
  padding:.7rem 1.15rem;border-radius:var(--r-sm);border:1px solid transparent;font-weight:600;
  font-size:var(--fs-sm);text-decoration:none;cursor:pointer;
  transition:background var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease}
.btn--primary{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn--primary:hover{background:var(--navy-900);color:#fff}
.btn--accent{background:var(--emerald-600);color:#fff;border-color:var(--emerald-600)}
.btn--accent:hover{background:var(--emerald-700);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--navy-700);color:var(--navy-800)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.55;pointer-events:none}
html[data-theme="dark"] .btn--primary{background:var(--emerald-600);border-color:var(--emerald-600);color:#06231A}
html[data-theme="dark"] .btn--primary:hover{background:var(--emerald-700)}

.tag{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;
  padding:.2rem .55rem;border-radius:999px;background:var(--navy-050);color:var(--navy-800);text-decoration:none}
.tag--safety{background:var(--amber-050);color:var(--amber-700)}
.tag--verified{background:var(--emerald-050);color:var(--emerald-700)}
html[data-theme="dark"] .tag{color:var(--ink)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);transition:border-color var(--dur) ease}
.card:hover{border-color:var(--line-strong)}
.card__title{font-size:var(--fs-lg);margin:0}
.card__title a{color:inherit;text-decoration:none}
.card__title a:hover{color:var(--navy-700);text-decoration:underline}
.card__excerpt{color:var(--ink-2);font-size:var(--fs-sm);margin:0}
.card__foot{margin-top:auto;padding-top:var(--s2);font-size:var(--fs-xs);color:var(--ink-3)}
.card__media{margin:calc(var(--s4) * -1) calc(var(--s4) * -1) 0;border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.card__media img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* category cards: low chrome, glyph-led */
.path-card{display:grid;grid-template-columns:2.5rem 1fr;gap:var(--s3);align-items:start;
  padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:var(--ink);transition:border-color var(--dur) ease}
.path-card:hover{border-color:var(--navy-700);color:var(--ink)}
.path-card svg{width:1.75rem;height:1.75rem;color:var(--emerald-600)}
.path-card strong{display:block;font-size:var(--fs-base)}
.path-card span{font-size:var(--fs-sm);color:var(--ink-2)}
.path-card__count{font-size:var(--fs-xs);color:var(--ink-3)}

/* hero */
.hero{padding-block:var(--s7) var(--s6);border-bottom:1px solid var(--line);background:
  linear-gradient(180deg,var(--navy-050) 0,transparent 70%)}
.hero__inner{display:grid;gap:var(--s6)}
@media (min-width:960px){.hero__inner{grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:center}}
.hero h1{max-width:16ch;margin-bottom:var(--s4)}
.hero .lede{margin-bottom:var(--s5)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.hero__note{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2);max-width:48ch}
.hero__note svg{width:1.1rem;height:1.1rem;flex:0 0 auto;color:var(--emerald-600);margin-top:.15rem}

/* the roadmap rail — a real sequence, so numbering is meaningful */
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.rail h2{font-size:var(--fs-base);letter-spacing:0;color:var(--ink-3);font-weight:600;margin-bottom:var(--s4)}
.rail ol{list-style:none;margin:0;padding:0;position:relative}
.rail li{position:relative;padding-left:2.75rem;padding-bottom:var(--s5)}
.rail li:last-child{padding-bottom:0}
.rail li::before{content:counter(step);counter-increment:step;position:absolute;left:0;top:-.1rem;
  width:1.75rem;height:1.75rem;border-radius:50%;background:var(--navy-800);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700}
.rail ol{counter-reset:step}
.rail li:not(:last-child)::after{content:"";position:absolute;left:.8125rem;top:1.9rem;bottom:.35rem;
  width:2px;background:linear-gradient(var(--line-strong),var(--line))}
.rail li strong{display:block;font-size:var(--fs-base)}
.rail li span{font-size:var(--fs-sm);color:var(--ink-2)}
html[data-theme="dark"] .rail li::before{background:var(--emerald-600);color:#06231A}

/* featured pillar */
.pillar{display:grid;gap:var(--s5);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
@media (min-width:820px){.pillar{grid-template-columns:1fr 1fr;align-items:center}}
.pillar__body{padding:var(--s6)}
.pillar__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* safety strip */
.safety{background:var(--amber-050);border-block:1px solid var(--line)}
html[data-theme="dark"] .safety{background:var(--surface-2)}
.safety__grid{display:grid;gap:var(--s5)}
@media (min-width:900px){.safety__grid{grid-template-columns:1fr 1.4fr}}

/* newsletter */
.subscribe{background:var(--navy-900);color:#EAF1F8;border-radius:var(--r-lg);padding:var(--s6)}
.subscribe h2{color:#fff}
.subscribe p{color:#C3D2E2}
.subscribe .form-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
.subscribe input[type=email]{flex:1 1 16rem}
.subscribe .consent{color:#AFC1D4;font-size:var(--fs-xs)}
.subscribe a{color:#9FD8BE}

/* accordion (FAQ) */
.accordion{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.accordion details + details{border-top:1px solid var(--line)}
.accordion summary{cursor:pointer;padding:var(--s4);font-weight:600;list-style:none;display:flex;
  justify-content:space-between;gap:var(--s4);align-items:center;min-height:3rem}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform var(--dur) ease;flex:0 0 auto}
.accordion details[open] summary::after{transform:rotate(-135deg)}
.accordion .accordion__body{padding:0 var(--s4) var(--s4);color:var(--ink-2)}

/* breadcrumbs + pagination */
.breadcrumbs{font-size:var(--fs-sm);color:var(--ink-3);padding-block:var(--s4)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.breadcrumbs li::after{content:"/";margin-left:.35rem;color:var(--line-strong)}
.breadcrumbs li:last-child::after{content:""}
.pagination{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;padding-block:var(--s6)}
.pagination .page-numbers{display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem;
  padding:0 .6rem;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;background:var(--surface)}
.pagination .current{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}

/* ============ 7. ARTICLE ============ */
.progress{position:fixed;inset-inline:0;top:0;height:3px;z-index:70;background:transparent}
.progress__bar{height:100%;width:0;background:var(--emerald-600);transform-origin:left;transition:width .1s linear}
.article-head{padding-block:var(--s5) var(--s4)}
.article-head h1{margin-bottom:var(--s4)}
.byline{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;font-size:var(--fs-sm);color:var(--ink-2)}
.byline img{width:2.5rem;height:2.5rem;border-radius:50%;flex:0 0 auto}
.byline__dates{display:flex;flex-wrap:wrap;gap:var(--s3);color:var(--ink-3);font-size:var(--fs-xs)}
.entry-content{font-family:var(--font-read);font-size:var(--fs-lg);line-height:var(--lh-read);max-width:var(--content)}
.entry-content > *{max-width:var(--content)}
.entry-content h2{font-family:var(--font-ui);font-size:var(--fs-2xl);margin-top:var(--s7)}
.entry-content h3{font-family:var(--font-ui);font-size:var(--fs-xl);margin-top:var(--s6)}
.entry-content ul,.entry-content ol{padding-left:1.35em;margin-bottom:var(--s4)}
.entry-content li + li{margin-top:.4em}
.entry-content figure{margin:var(--s6) 0}
.entry-content figcaption{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--ink-3);margin-top:var(--s2)}
.entry-content blockquote{margin:var(--s6) 0;padding-left:var(--s4);border-left:3px solid var(--emerald-600);color:var(--ink-2)}
.entry-content a{color:var(--navy-700);text-decoration:underline}
.entry-content img{border-radius:var(--r-sm)}

/* editorial boxes */
.box{font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);margin:var(--s6) 0;background:var(--surface)}
.box__label{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;margin-bottom:var(--s2)}
.box > :last-child{margin-bottom:0}
.box--takeaways{background:var(--navy-050);border-color:transparent}
.box--takeaways .box__label{color:var(--navy-800)}
.box--tip{background:var(--emerald-050);border-color:transparent}
.box--tip .box__label{color:var(--emerald-700)}
.box--warning{background:var(--amber-050);border-color:transparent}
.box--warning .box__label{color:var(--amber-700)}
.box--definition{border-left:3px solid var(--navy-700)}
.box--example{border-left:3px solid var(--line-strong);background:var(--surface-2)}
.box--disclosure{background:var(--surface-2);font-size:var(--fs-sm);color:var(--ink-2)}
.box--sponsored{border:2px solid var(--amber-600);background:var(--amber-050)}

.proscons{display:grid;gap:var(--s4);margin:var(--s6) 0;font-family:var(--font-ui);font-size:var(--fs-base)}
@media (min-width:640px){.proscons{grid-template-columns:1fr 1fr}}
.proscons > div{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.proscons h3{font-size:var(--fs-base);margin-bottom:var(--s2)}
.proscons ul{list-style:none;padding:0;margin:0}
.proscons li{padding-left:1.5rem;position:relative;margin-bottom:.4rem}
.proscons--pros li::before{content:"+";position:absolute;left:0;color:var(--emerald-600);font-weight:700}
.proscons--cons li::before{content:"−";position:absolute;left:0;color:var(--red-600);font-weight:700}

.steps{counter-reset:s;list-style:none;padding:0;margin:var(--s6) 0;font-family:var(--font-ui);font-size:var(--fs-base)}
.steps > li{counter-increment:s;position:relative;padding:0 0 var(--s5) 3rem;border-left:2px solid var(--line);margin-left:1rem}
.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
.steps > li::before{content:counter(s);position:absolute;left:-1rem;top:0;width:2rem;height:2rem;border-radius:50%;
  background:var(--surface);border:2px solid var(--navy-800);color:var(--navy-800);display:grid;place-items:center;
  font-weight:700;font-size:var(--fs-sm)}
html[data-theme="dark"] .steps > li::before{border-color:var(--emerald-600);color:var(--emerald-600)}
.steps h3{margin-bottom:var(--s2)}

.table-scroll{overflow-x:auto;margin:var(--s6) 0;border:1px solid var(--line);border-radius:var(--r)}
.table-scroll table{font-family:var(--font-ui);font-size:var(--fs-sm);min-width:34rem}
.table-scroll th,.table-scroll td{text-align:left;padding:.75rem var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.table-scroll thead th{background:var(--surface-2);font-weight:650;position:sticky;top:0}
.table-scroll tr:last-child td{border-bottom:0}

/* table of contents */
.toc{font-family:var(--font-ui);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:var(--s4) var(--s5);margin:var(--s5) 0;font-size:var(--fs-sm)}
.toc h2{font-size:var(--fs-base);margin-bottom:var(--s3)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{margin:.35rem 0}
.toc li.is-sub{padding-left:var(--s4)}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover,.toc a[aria-current="true"]{color:var(--navy-800);text-decoration:underline}

/* helpful / corrections / share */
.article-tools{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;
  border-block:1px solid var(--line);padding-block:var(--s4);margin-block:var(--s6)}
.share{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.share a,.share button{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.4rem .75rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);text-decoration:none;
  color:var(--ink-2);font-size:var(--fs-sm);cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--line-strong);color:var(--ink)}
.helpful{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}

.author-box{display:grid;gap:var(--s4);grid-template-columns:4rem 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);margin-block:var(--s6)}
.author-box img{width:4rem;height:4rem;border-radius:50%}
.sources ol{font-size:var(--fs-sm);color:var(--ink-2)}
.post-nav{display:grid;gap:var(--s4);margin-block:var(--s6)}
@media (min-width:700px){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{display:block;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);text-decoration:none;color:var(--ink)}
.post-nav small{display:block;color:var(--ink-3);margin-bottom:.25rem}

/* sidebar */
.sidebar{display:none}
@media (min-width:1040px){.sidebar{display:block;position:sticky;top:5.5rem}}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s5)}
.widget h2{font-size:var(--fs-base);margin-bottom:var(--s3)}
.widget ul{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.widget li + li{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}

/* ============ 8. FORMS ============ */
.field{display:block;margin-bottom:var(--s4)}
.field > label,.label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:.35rem}
.field .hint{font-size:var(--fs-xs);color:var(--ink-3);margin-top:.3rem}
input[type=text],input[type=email],input[type=url],input[type=search],input[type=tel],select,textarea{
  width:100%;min-height:2.875rem;padding:.65rem .85rem;background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm)}
textarea{min-height:9rem;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--red-600);background:var(--red-050)}
.error-msg{color:var(--red-600);font-size:var(--fs-sm);margin-top:.3rem}
.form-note{font-size:var(--fs-xs);color:var(--ink-3)}
.checkbox{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--fs-sm)}
.checkbox input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:0 0 auto}
.notice{border-radius:var(--r-sm);padding:var(--s3) var(--s4);font-size:var(--fs-sm);margin-bottom:var(--s4)}
.notice--ok{background:var(--emerald-050);color:var(--emerald-700)}
.notice--err{background:var(--red-050);color:var(--red-600)}
.search-form{display:flex;gap:var(--s2)}
.search-form input{flex:1}

/* ============ 9. AD SLOTS (reserved space, never fake ads) ============ */
.ad-slot{display:flex;align-items:center;justify-content:center;margin:var(--s6) auto;
  background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  color:var(--ink-3);font-size:var(--fs-xs);overflow:hidden}
.ad-slot::before{content:"Advertisement"}
.ad-slot:empty,.ad-slot--live::before{content:""}
.ad-slot[data-format="in-content"]{width:min(100%,336px);height:280px}
.ad-slot[data-format="leaderboard"]{width:min(100%,728px);height:90px}
.ad-slot[data-format="sidebar"]{width:300px;height:600px;margin-inline:0}
@media (max-width:639px){.ad-slot[data-format="leaderboard"]{width:320px;height:100px}}
.ad-label{display:block;text-align:center;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.02em}

/* ============ 10. FOOTER ============ */
.site-footer{background:var(--navy-900);color:#C7D5E3;margin-top:var(--s8);padding-block:var(--s7) var(--s5)}
.site-footer a{color:#E6EEF6;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-grid{display:grid;gap:var(--s6)}
@media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.footer-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.footer-grid h2{font-size:var(--fs-sm);color:#fff;margin-bottom:var(--s3);font-weight:650}
.footer-grid ul{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.footer-grid li{margin-bottom:.55rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s6);padding-top:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-size:var(--fs-xs);color:#9FB3C8}

/* ============ 11. UTILITIES ============ */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.center{text-align:center}
.muted{color:var(--ink-2)}
.no-js-hide{display:none}
.js .no-js-hide{display:initial}
.reveal{opacity:0;transform:translateY(8px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
html:not(.js) .reveal{opacity:1;transform:none}

/* Core details block styled as the house accordion */
.accordion .wp-block-details{border:0;padding:0}
.accordion .wp-block-details + .wp-block-details{border-top:1px solid var(--line)}
.accordion .wp-block-details > summary{cursor:pointer;padding:var(--s4);font-weight:600;min-height:3rem}
.accordion .wp-block-details > *:not(summary){padding:0 var(--s4) var(--s4);margin:0;color:var(--ink-2)}

/* ============ 12. MAGAZINE LAYOUT ============
   Dense news-magazine homepage: full-bleed spotlights with overlaid headlines,
   thumbnail rails, story rails and alternating section bands.
   Every image box declares an aspect-ratio, so a page this image-heavy still
   holds CLS at zero while pictures load. */

/* --- section bands ------------------------------------------------ */
.band{padding-block:var(--s6)}
.band + .band{padding-top:var(--s6)}
.band--dark{
  --surface:#132234; --surface-2:#0E1B2B; --ink:#F2F5F8; --ink-2:#B9C7D6; --ink-3:#8CA0B5;
  --line:#22374F; --line-strong:#2F4A67; --navy-050:#1B2E45;
  background:var(--navy-900);color:#F2F5F8}
.band--dark a{color:#E9F0F7}
.band--dark .tag{background:#1B2E45;color:#CFE0F0}
.band--dark .card{background:#132234}
.band__label{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.band__label h2{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.09em;
  font-weight:700;margin:0;white-space:nowrap}
.band__label::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.band__label a{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;
  text-decoration:none;color:var(--ink-3);white-space:nowrap}
.band__label a:hover{color:var(--emerald-600)}

/* --- spotlight: image with overlaid headline ---------------------- */
.spotlight{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  background:var(--navy-900);text-decoration:none;color:#fff;isolation:isolate}
.spotlight:hover{color:#fff}
.spotlight__media{aspect-ratio:4/5}
@media (min-width:700px){.spotlight__media{aspect-ratio:21/9}}
.spotlight__media img{width:100%;height:100%;object-fit:cover}
.spotlight::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(6,16,26,.94) 0%,rgba(6,16,26,.72) 34%,rgba(6,16,26,.28) 62%,rgba(6,16,26,.1) 100%)}
.spotlight__body{position:absolute;z-index:2;inset:auto 0 0 0;padding:var(--s5);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
@media (min-width:700px){.spotlight__body{padding:var(--s6) var(--s6) var(--s7)}}
.spotlight__title{font-family:var(--font-ui);text-transform:uppercase;font-weight:800;
  letter-spacing:-.02em;line-height:.98;margin:0;color:#fff;text-wrap:balance;
  font-size:clamp(2rem,1rem + 6vw,4.25rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.spotlight__deck{margin:0;max-width:52ch;color:#E4EBF2;font-size:var(--fs-base);line-height:1.45}
.spotlight__meta{font-size:var(--fs-xs);color:#B7C6D6;text-transform:uppercase;letter-spacing:.06em}
.spotlight--compact .spotlight__media{aspect-ratio:4/3}
@media (min-width:700px){.spotlight--compact .spotlight__media{aspect-ratio:16/9}}
.spotlight--compact .spotlight__title{font-size:clamp(1.5rem,.9rem + 2.6vw,2.5rem)}

/* kicker pill — meaning-carrying, not decoration */
.kicker{display:inline-block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:.3rem .6rem;border-radius:3px;background:var(--emerald-600);color:#fff}
.kicker--safety{background:var(--amber-600);color:#221302}
.kicker--updated{background:#E9EEF4;color:var(--navy-800)}
.kicker--sponsored{background:transparent;border:1px solid currentColor;color:inherit}

/* --- thumbnail rail beneath a spotlight --------------------------- */
.thumbrail{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden}
@media (min-width:560px){.thumbrail{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.thumbrail{grid-template-columns:repeat(4,1fr)}}
.thumbrail__item{display:grid;grid-template-columns:5.5rem 1fr;gap:var(--s3);
  background:var(--surface);padding:var(--s3);text-decoration:none;color:var(--ink)}
.thumbrail__item:hover{background:var(--surface-2);color:var(--ink)}
.thumbrail__item img{width:5.5rem;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm)}
.thumbrail__kicker{display:block;font-size:.625rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--emerald-700);margin-bottom:.2rem}
.thumbrail__title{font-size:var(--fs-sm);font-weight:600;line-height:1.3;margin:0}
.thumbrail__meta{font-size:var(--fs-xs);color:var(--ink-3);margin:.25rem 0 0}

/* --- lead story + right rail -------------------------------------- */
.feature{display:grid;gap:var(--s5)}
@media (min-width:960px){.feature{grid-template-columns:minmax(0,1fr) 19rem;gap:var(--s6)}}
.feature__lead h3{font-size:var(--fs-2xl);margin:var(--s4) 0 var(--s2);line-height:1.15}
.feature__lead h3 a{color:inherit;text-decoration:none}
.feature__lead h3 a:hover{text-decoration:underline}
.feature__media{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.feature__media img{width:100%;height:100%;object-fit:cover}

.storylist{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.storylist__item{display:grid;grid-template-columns:1fr 4.5rem;gap:var(--s3);align-items:start;
  padding:var(--s3) var(--s4);text-decoration:none;color:var(--ink)}
.storylist__item + .storylist__item{border-top:1px solid var(--line)}
.storylist__item:hover{background:var(--surface-2);color:var(--ink)}
.storylist__item img{width:4.5rem;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm)}
.storylist__item h4{font-size:var(--fs-sm);font-weight:600;line-height:1.3;margin:.15rem 0 0}
.storylist__group{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);padding:var(--s3) var(--s4);background:var(--surface-2);
  border-top:1px solid var(--line);font-weight:700}
.storylist__group:first-child{border-top:0}

/* --- three-across opinion / author row ---------------------------- */
.voices{display:grid;gap:var(--s4)}
@media (min-width:700px){.voices{grid-template-columns:repeat(3,1fr)}}
.voice{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  text-decoration:none;color:#fff;background:var(--navy-800)}
.voice__media{aspect-ratio:16/10}
.voice__media img{width:100%;height:100%;object-fit:cover}
.voice::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,16,26,.92),rgba(6,16,26,.15))}
.voice__body{position:absolute;z-index:2;inset:auto 0 0 0;padding:var(--s4)}
.voice__body h3{font-size:var(--fs-base);color:#fff;margin:.4rem 0 0;line-height:1.3}
.voice__body p{margin:.3rem 0 0;font-size:var(--fs-xs);color:#C3D2E2}

/* --- sponsored strip: visibly separated from editorial ------------ */
.sponsored-strip{border:1px solid var(--amber-600);border-radius:var(--r);padding:var(--s4);
  background:var(--amber-050)}
html[data-theme="dark"] .sponsored-strip{background:transparent}
.sponsored-strip__note{font-size:var(--fs-xs);color:var(--ink-2);margin:var(--s3) 0 0}

/* placeholder art blocks used in previews and before images exist */
.imgph{display:grid;place-items:center;text-align:center;padding:1rem;
  background:linear-gradient(140deg,#0B2239,#1B4472);color:#9FD8BE;font-size:.75rem;
  font-family:var(--font-ui);width:100%;height:100%}