/* =========================================================
   Arthlens — Editorial Publisher Design System
   Newspaper-grade typography, paper palette, newsroom rhythm
   ========================================================= */

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;tab-size:4;scroll-behavior:smooth}
body{
  font-family:'Source Sans 3','Source Sans Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--red);text-decoration:none;transition:color .15s linear}
a:hover{color:var(--red-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;border-radius:0;
}

/* ---------- Tokens ---------- */
:root{
  /* Paper palette */
  --paper:       #FBF7F1;
  --paper-deep:  #F2EDE3;
  --paper-edge:  #EFE8DA;
  --surface:     #FFFFFF;
  --rule:        #D9D0BE;
  --rule-soft:   #E7DFCC;

  /* Ink */
  --ink:         #0E1116;
  --ink-2:       #1F222A;
  --ink-soft:    #3A3F4A;
  --muted:       #6B6458;
  --muted-light: #8B8477;

  /* Editorial red (dominant) */
  --red:         #C21E38;
  --red-dark:    #8E0F22;
  --red-soft:    #F9E4E8;
  --red-ink:     #4A0712;

  /* Support */
  --gold:        #B78D24;
  --gold-soft:   #F7ECCF;
  --green-up:    #1E7A53;
  --ticker-bg:   #11151C;
  --ticker-fg:   #D8D2C3;

  /* Layout */
  --container:       1280px;
  --container-wide:  1440px;
  --container-narrow: 760px;

  /* Type — Brazilian news-portal stack */
  --font-display:  'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:     'Source Sans 3','Source Sans Pro','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-ui:       'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Legacy alias (existing rules) */
  --font-serif:    var(--font-body);

  --fs-mega:   clamp(2.5rem, 1.7rem + 3.8vw, 5rem);
  --fs-h1:     clamp(1.875rem, 1.4rem + 2.3vw, 3.25rem);
  --fs-h2:     clamp(1.5rem,  1.2rem + 1.2vw, 2.125rem);
  --fs-h3:     clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --fs-h4:     1.125rem;
  --fs-deck:   clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body:   1.0625rem;
  --fs-sm:     .9375rem;
  --fs-xs:     .8125rem;
  --fs-2xs:    .6875rem;

  /* Motion */
  --ease:  cubic-bezier(.2,.7,.2,1);
  --d1:    120ms;
  --d2:    240ms;

  /* Shadow (minimal, paper doesn't glow) */
  --shadow-sheet: 0 1px 0 rgba(14,17,22,.04), 0 1px 2px rgba(14,17,22,.03);
}

/* ---------- Typography — news portal ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-0.015em;
  font-weight:800;
}
h1{font-size:var(--fs-h1);letter-spacing:-0.02em;line-height:1.08}
h2{font-size:var(--fs-h2);letter-spacing:-0.018em;line-height:1.1}
h3{font-size:var(--fs-h3);line-height:1.15;letter-spacing:-0.012em}
h4{font-size:var(--fs-h4);font-weight:700;letter-spacing:-.008em;line-height:1.25}

.display{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-mega);
  line-height:1;
  letter-spacing:-0.028em;
  color:var(--ink);
}
.deck{
  font-family:var(--font-body);
  font-size:var(--fs-deck);
  line-height:1.5;
  color:var(--ink-soft);
  font-weight:400;
}
.lede{
  font-family:var(--font-body);
  font-size:1.1875rem;
  line-height:1.6;
  color:var(--ink-2);
  font-weight:400;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);
  font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);
}
.eyebrow.is-ink{color:var(--ink)}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--red);
}
.eyebrow.is-ink::before{background:var(--ink)}

.meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  font-family:var(--font-ui);font-size:var(--fs-xs);
  color:var(--muted);letter-spacing:.01em;
}
.meta-row .sep{color:var(--rule)}
.byline{font-weight:600;color:var(--ink-soft)}
.byline em{color:var(--red);font-style:normal}

.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.tiny{font-size:var(--fs-xs)}

/* Article body styling — optimised for long reading */
.article-body{max-width:68ch;font-family:var(--font-body)}
.article-body>h2{
  font-family:var(--font-display);font-weight:800;
  margin:44px 0 12px;font-size:var(--fs-h2);
  letter-spacing:-0.018em;line-height:1.15;
  padding-top:22px;border-top:1px solid var(--rule);
}
.article-body>h3{
  font-family:var(--font-display);font-weight:700;
  margin:28px 0 8px;font-size:1.3125rem;letter-spacing:-0.012em;line-height:1.2;
}
.article-body>p{
  font-size:1.125rem;line-height:1.72;color:var(--ink-2);
  margin-bottom:18px;font-weight:400;
}
.article-body>p:first-of-type::first-letter{
  font-family:var(--font-display);font-weight:900;
  font-size:3.75rem;float:left;line-height:.95;padding:6px 10px 0 0;
  color:var(--red);letter-spacing:-0.04em;
}
.article-body>ul,.article-body>ol{
  margin:0 0 20px 1.25rem;color:var(--ink-2);font-size:1.0625rem;line-height:1.65;
}
.article-body>ul>li,.article-body>ol>li{margin-bottom:8px}
.article-body blockquote{
  font-family:var(--font-display);font-weight:800;
  font-size:1.5rem;line-height:1.25;letter-spacing:-.018em;
  color:var(--ink);
  border-left:4px solid var(--red);
  padding:4px 0 4px 22px;
  margin:32px 0;
  max-width:56ch;
}
.article-body strong{color:var(--ink);font-weight:700}
.article-body em{font-style:italic}
.article-body a{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body a:hover{color:var(--red-dark)}

/* ---------- Utilities ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.container-wide{width:100%;max-width:var(--container-wide);margin-inline:auto;padding-inline:20px}
.container-narrow{width:100%;max-width:var(--container-narrow);margin-inline:auto;padding-inline:20px}

.section{padding-block:clamp(40px,5vw,72px)}
.section-sm{padding-block:clamp(28px,3.5vw,48px)}
.section-tight{padding-block:clamp(18px,2.5vw,32px)}

.rule-top{border-top:1px solid var(--rule)}
.rule-bottom{border-bottom:1px solid var(--rule)}
.rule-x{height:1px;background:var(--rule);margin-block:32px;border:0}
.rule-x-thick{height:3px;background:var(--ink);margin-block:28px;border:0}
.rule-x-red{height:2px;background:var(--red);margin-block:24px;border:0;width:48px}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Header: two-tier publisher ---------- */
.top-strip{
  background:var(--ink);
  color:var(--ticker-fg);
  font-family:var(--font-ui);
  font-size:var(--fs-2xs);
  letter-spacing:.06em;
}
.top-strip .row{
  display:flex;align-items:center;gap:18px;
  height:34px;
}
.top-strip a{color:var(--ticker-fg);text-transform:uppercase;font-weight:600}
.top-strip a:hover{color:#fff}
.top-strip .spacer{flex:1}
.top-strip .date{color:#9A8E78;text-transform:uppercase;font-weight:600}
.top-strip .divider{width:1px;height:14px;background:rgba(255,255,255,.14)}

/* Main brand bar — dominant red */
.brand-bar{
  background:var(--red);
  color:#fff;
  position:sticky;top:0;z-index:60;
  border-bottom:3px solid var(--ink);
}
.brand-bar .row{
  display:flex;align-items:center;gap:28px;
  height:74px;
}
.brand{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:900;
  font-size:1.75rem;letter-spacing:-0.035em;
  color:#fff;line-height:1;
}
.brand:hover{color:#fff;opacity:.92}
.brand .mark{
  width:38px;height:38px;
  background:#fff;color:var(--red);
  font-family:var(--font-display);font-weight:900;font-size:1.5rem;
  display:grid;place-items:center;
  letter-spacing:-0.03em;
}
.brand .section-label{
  margin-left:10px;padding:4px 10px;
  background:rgba(255,255,255,.18);
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;
}
.brand-bar nav{margin-left:auto}
.nav-links{
  display:flex;align-items:center;gap:4px;list-style:none;
}
.nav-links a{
  display:inline-block;padding:8px 12px;
  color:#fff;opacity:.88;
  font-family:var(--font-ui);font-weight:600;font-size:var(--fs-sm);
  letter-spacing:.02em;
  border-bottom:2px solid transparent;
  transition:opacity var(--d1) linear, border-color var(--d1) linear;
  white-space:nowrap;
}
.nav-links a:hover{opacity:1;color:#fff;border-bottom-color:#fff}
.nav-links a[aria-current="page"]{opacity:1;border-bottom-color:#fff}

.brand-bar .tools{display:flex;align-items:center;gap:8px;margin-left:6px}
.icon-btn{
  width:40px;height:40px;display:grid;place-items:center;
  color:#fff;opacity:.9;border:1px solid rgba(255,255,255,.22);
}
.icon-btn:hover{opacity:1;background:rgba(255,255,255,.1)}
.brand-bar .cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;background:#fff;color:var(--red);
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.02em;white-space:nowrap;
}
.brand-bar .cta:hover{background:var(--paper)}

.menu-toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  color:#fff;border:1px solid rgba(255,255,255,.25);margin-left:auto;
}
.menu-toggle span{width:18px;height:2px;background:#fff;position:relative;transition:all .2s var(--ease)}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:all .2s var(--ease)}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg);top:0}
.menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg);top:0}

@media (max-width:980px){
  .top-strip .row{gap:12px}
  .top-strip .hide-tablet{display:none}
  .brand-bar .row{gap:12px;height:64px}
  .brand{font-size:1.4rem}.brand .mark{width:34px;height:34px;font-size:1.25rem}
  .brand .section-label{display:none}
  .menu-toggle{display:inline-flex}
  .brand-bar .tools,.brand-bar nav{display:none}
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;
    background:var(--ink);padding:0;
    max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease);
  }
  .nav-links[data-open="true"]{max-height:640px;border-bottom:3px solid var(--red);padding:8px 0}
  .nav-links a{width:100%;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);font-size:1rem;opacity:1}
  .nav-links a:hover{background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.06)}
  .brand-bar nav{display:block;margin-left:auto;order:3}
}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--ticker-bg);color:var(--ticker-fg);
  border-bottom:1px solid #000;
  font-family:var(--font-ui);font-size:var(--fs-xs);
  overflow:hidden;
}
.ticker .row{display:flex;align-items:center;gap:14px;height:38px;white-space:nowrap}
.ticker .label{
  color:#fff;font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;background:var(--red);
  position:relative;z-index:2;flex-shrink:0;
  box-shadow:8px 0 16px 0 var(--ticker-bg);
}
.ticker .row{position:relative}
.ticker-track{position:relative;z-index:1;overflow:hidden}
.ticker .label .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{0%,60%{opacity:1}80%{opacity:.2}100%{opacity:1}}
.ticker-track{display:flex;gap:36px;animation:tslide 55s linear infinite;min-width:max-content;padding-left:10px}
.ticker-track span{opacity:.85}
.ticker-track span strong{color:#fff;font-weight:700;opacity:1;margin-left:6px}
.ticker-track span .up{color:#4ADE80;margin-left:4px}
.ticker-track span .dn{color:#F87171;margin-left:4px}
@keyframes tslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Editorial disclosure bar ---------- */
.disclosure-bar{
  background:var(--gold-soft);
  border-bottom:1px solid var(--rule);
  color:#5E4A0F;
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  padding:8px 0;
}
.disclosure-bar .row{display:flex;gap:10px;align-items:center}
.disclosure-bar strong{color:#3B2E08;text-transform:uppercase;letter-spacing:.1em;font-size:var(--fs-2xs)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 20px;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-sm);
  letter-spacing:.02em;line-height:1;
  border-radius:2px;
  transition:background var(--d1) linear, color var(--d1) linear, border-color var(--d1) linear;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--red);color:#fff}
.btn-accent{background:var(--red);color:#fff}
.btn-accent:hover{background:var(--red-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-link{padding:0;color:var(--red);font-weight:700;font-size:var(--fs-sm);letter-spacing:.02em;gap:6px;border-bottom:0}
.btn-link:hover{color:var(--red-dark)}
.btn-link .arrow{transition:transform var(--d1) var(--ease)}
.btn-link:hover .arrow{transform:translateX(3px)}
.btn-lg{padding:16px 24px;font-size:1rem}
.btn-sm{padding:9px 14px;font-size:var(--fs-xs)}
.btn-block{width:100%}

/* ---------- Tags / Category pills ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  background:var(--red);color:#fff;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;
  border-radius:0;
}
.tag.is-ink{background:var(--ink);color:#fff}
.tag.is-gold{background:var(--gold);color:var(--ink)}
.tag.is-outline{background:transparent;color:var(--red);border:1px solid var(--red)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:600;
  color:var(--ink-soft);background:var(--surface);
  border:1px solid var(--rule);
  border-radius:999px;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- Cards (editorial) ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--rule);
  padding:22px;
  box-shadow:var(--shadow-sheet);
}

/* Story card — newspaper teaser */
.story{
  display:grid;gap:10px;
  padding:0;background:transparent;border:0;box-shadow:none;
}
.story .thumb{
  aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep);
  position:relative;border:1px solid var(--rule);
}
.story .thumb::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(135deg,var(--ink) 0%,transparent 55%),
    radial-gradient(circle at 25% 30%,rgba(255,255,255,.15),transparent 50%),
    radial-gradient(circle at 78% 70%,var(--red) 0,transparent 55%);
  opacity:.95;
}
.story .thumb .overlay-tag{
  position:absolute;left:10px;bottom:10px;z-index:2;
}
.story.variant-ink .thumb::after{
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%),radial-gradient(circle at 70% 30%,rgba(194,30,56,.6),transparent 60%);
}
.story.variant-gold .thumb::after{
  background:linear-gradient(135deg,var(--gold) 0%,#7A5C10 130%);
}
.story.variant-green .thumb::after{
  background:linear-gradient(135deg,#1A4734 0%,var(--green-up) 100%);
}
.story .body{display:grid;gap:6px}
.story .kicker{
  font-family:var(--font-ui);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.story h3{
  font-family:var(--font-display);font-weight:800;
  font-size:1.375rem;line-height:1.12;
  letter-spacing:-0.015em;
  color:var(--ink);
}
.story.sm h3{font-size:1.125rem}
.story.xs h3{font-size:1rem;line-height:1.2}
.story.lg h3{font-size:2rem;letter-spacing:-0.025em;line-height:1.05}
.story p{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.55}
.story .meta{
  font-family:var(--font-ui);font-size:var(--fs-2xs);color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  display:flex;gap:10px;align-items:center;
}
.story .meta .sep{color:var(--rule)}
.story a:hover h3{color:var(--red)}

/* List-style story (no image) */
.story-list{
  display:grid;gap:6px;padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.story-list:last-child{border-bottom:0}
.story-list .kicker{
  font-family:var(--font-ui);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.story-list h4{
  font-family:var(--font-display);font-weight:700;font-size:1.0625rem;
  line-height:1.2;color:var(--ink);letter-spacing:-.005em;
}
.story-list:hover h4{color:var(--red)}
.story-list .meta{
  font-family:var(--font-ui);font-size:var(--fs-2xs);color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;font-weight:600;
}

/* Numbered most-read list */
.most-read{list-style:none;counter-reset:mr}
.most-read li{
  counter-increment:mr;
  display:grid;grid-template-columns:44px 1fr;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.most-read li:last-child{border-bottom:0}
.most-read li::before{
  content:counter(mr,decimal-leading-zero);
  font-family:var(--font-display);font-weight:900;
  font-size:2rem;line-height:.9;color:var(--red);letter-spacing:-0.04em;
}
.most-read .kicker{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.most-read h4{
  font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.2;
  color:var(--ink);margin-top:4px;
}
.most-read li:hover h4{color:var(--red)}

/* Callout / Key-takeaway */
.callout{
  display:grid;grid-template-columns:auto 1fr;gap:14px;
  padding:20px 22px;
  background:var(--paper-deep);
  border-left:3px solid var(--red);
  margin-block:24px;
}
.callout .ic{
  width:40px;height:40px;background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:1.1rem;
}
.callout h4{font-family:var(--font-display);font-weight:800;font-size:1.0625rem;margin-bottom:4px;color:var(--ink)}
.callout p{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.callout.is-ink{background:var(--ink);color:#fff;border-left-color:var(--red)}
.callout.is-ink h4{color:#fff}
.callout.is-ink p{color:rgba(255,255,255,.78)}
.callout.is-ink .ic{background:var(--red);color:#fff}
.callout.is-gold{background:var(--gold-soft);border-left-color:var(--gold)}
.callout.is-gold .ic{background:var(--gold);color:var(--ink)}

/* Editor's note */
.editor-note{
  padding:18px 22px;background:var(--surface);
  border:1px solid var(--rule);border-top:3px solid var(--ink);
  margin-block:24px;
}
.editor-note .label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:6px;
}
.editor-note p{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-2);line-height:1.6}

/* Key takeaways box */
.takeaways{
  padding:22px;background:var(--ink);color:#fff;margin-block:28px;
}
.takeaways .label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px;
}
.takeaways h4{color:#fff;font-size:1.25rem;margin-bottom:12px;font-family:var(--font-display)}
.takeaways ul{list-style:none;margin:0}
.takeaways li{
  padding:8px 0 8px 28px;font-family:var(--font-serif);font-size:var(--fs-sm);line-height:1.5;
  position:relative;border-bottom:1px solid rgba(255,255,255,.08);
}
.takeaways li:last-child{border-bottom:0}
.takeaways li::before{
  content:"→";position:absolute;left:0;top:8px;color:var(--red);font-weight:700;
}

/* ---------- Share row ---------- */
.share-row{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:14px 0;border-block:1px solid var(--rule);margin-block:20px;
}
.share-row .lbl{
  font-family:var(--font-ui);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:6px;
}
.share-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
}
.share-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Byline ---------- */
.byline-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 0;border-block:1px solid var(--rule);margin-block:14px 0;
}
.avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--ink) 0%,var(--red) 130%);
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  flex-shrink:0;
}
.byline-row .author{
  font-family:var(--font-ui);font-weight:700;color:var(--ink);font-size:var(--fs-sm);line-height:1.2;
}
.byline-row .author small{
  display:block;font-weight:500;color:var(--muted);font-size:var(--fs-2xs);
  letter-spacing:.04em;text-transform:uppercase;margin-top:2px;
}
.byline-row .meta{
  margin-left:auto;font-family:var(--font-ui);font-size:var(--fs-2xs);
  color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;
}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);margin-block:24px}
.tbl{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:var(--fs-sm);min-width:560px}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{
  background:var(--ink);color:#fff;
  font-weight:700;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:nth-child(even) td{background:var(--paper-deep)}
.tbl td strong{color:var(--ink);font-weight:700}
.tbl .num{font-variant-numeric:tabular-nums;text-align:right}

/* ---------- Progress ---------- */
.progress{height:3px;width:100%;background:var(--rule);position:relative}
.progress>span{display:block;height:100%;background:var(--red);transition:width .35s var(--ease)}
.read-progress{
  position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:100;
}
.read-progress>span{display:block;height:100%;background:var(--red);width:0;transition:width .1s linear}

/* ---------- Ad slots — publisher style ---------- */
.ad, .ad-slot{
  margin-block:28px;
  background:var(--paper-deep);
  border:1px solid var(--rule-soft);
  padding:22px 20px;
  min-height:120px;
  display:grid;place-items:center;text-align:center;
  color:var(--muted-light);
  font-family:var(--font-ui);font-size:var(--fs-sm);
  position:relative;
}
.ad::before, .ad-slot::before{
  content:"Advertisement";
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-family:var(--font-ui);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  background:var(--paper);padding:0 10px;
}
.ad .dim, .ad-slot .dim{
  font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-light);margin-top:6px;
}
.ad .placeholder, .ad-slot .placeholder{
  font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--muted);font-weight:500;
}

/* Size variants — by class */
.ad-leaderboard{min-height:110px;max-width:970px;margin-inline:auto}
.ad-leaderboard::after{content:"970 × 90 · responsive";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}
.ad-inline{min-height:260px}
.ad-inline::after{content:"970 × 250 · responsive";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}
.ad-rectangle{min-height:260px;max-width:336px;margin-inline:auto}
.ad-rectangle::after{content:"336 × 280";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}
.ad-sidebar{min-height:600px;max-width:336px;margin-inline:auto}
.ad-sidebar::after{content:"300 × 600";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}
.ad-half{min-height:250px;max-width:336px;margin-inline:auto}
.ad-half::after{content:"300 × 250";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}

/* Grid-card ad — fills a newsroom-style grid cell */
.ad-grid-card{
  margin:0;min-height:300px;
  padding:22px;
  display:grid;place-items:center;
  background:var(--paper-deep);
  border:1px solid var(--rule-soft);
}
.ad-grid-card::after{
  content:"Responsive · 336 × 280 or 300 × 250";
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light);
  white-space:nowrap;
}
.ad-grid-card.lg{grid-row:span 2;min-height:620px}
.ad-grid-card.lg::after{content:"Responsive · 336 × 600 or Large Rectangle"}
.ad-grid-card .placeholder{font-size:1rem;font-weight:600}
@media (max-width:900px){
  .ad-grid-card.lg{min-height:380px;grid-row:auto}
}

/* Hero display unit — replaces the hero-visual block on homepage */
.ad-hero{
  margin:10px 0 6px;
  min-height:0;
  aspect-ratio:16/8;
  padding:22px;
  background:var(--paper-deep);
  border:1px solid var(--rule-soft);
}
.ad-hero::after{
  content:"970 × 250 · responsive · ideal for Billboard or Large Rectangle";
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light);
  white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:700px){
  .ad-hero{aspect-ratio:4/3;padding:18px}
  .ad-hero::after{font-size:9px}
}

/* Legacy data-size support */
.ad[data-size="leaderboard"]{min-height:110px;max-width:970px;margin-inline:auto}
.ad[data-size="inline"]{min-height:260px}
.ad[data-size="sidebar"]{min-height:600px;max-width:336px;margin-inline:auto}
.ad[data-size="half"]{min-height:250px;max-width:336px;margin-inline:auto}
.ad[data-size="rectangle"]{min-height:260px;max-width:336px;margin-inline:auto}

/* Sticky mobile bottom ad */
.ad-sticky-mobile{
  display:none;
  position:fixed;left:0;right:0;bottom:0;
  margin:0;padding:8px 14px;
  min-height:60px;max-height:100px;
  background:#fff;border:0;border-top:1px solid var(--rule);
  box-shadow:0 -4px 20px rgba(14,17,22,.08);
  z-index:70;
}
.ad-sticky-mobile::before{
  content:"Advertisement";
  position:static;transform:none;background:transparent;
  display:block;font-size:9px;letter-spacing:.2em;margin-bottom:2px;
  color:var(--muted-light);
}
.ad-sticky-mobile .close{
  position:absolute;top:6px;right:8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--rule-soft);color:var(--ink);
  display:grid;place-items:center;font-size:16px;line-height:1;
  font-family:var(--font-ui);font-weight:700;
  cursor:pointer;
}
.ad-sticky-mobile .close:hover{background:var(--ink);color:#fff}
.ad-sticky-mobile[data-dismissed="true"]{display:none!important}
@media (max-width:900px){
  .ad-sticky-mobile{display:grid;place-items:center}
  body.has-sticky-ad{padding-bottom:90px}
}

/* Native / sponsored card */
.ad-sponsored-card{
  display:grid;grid-template-columns:1fr;gap:10px;
  padding:0;background:var(--surface);border:1px solid var(--rule);
  min-height:auto;text-align:left;overflow:hidden;position:relative;
  color:var(--ink);
}
.ad-sponsored-card::before{
  content:"Sponsored";background:var(--gold);color:var(--ink);
  top:10px;left:10px;transform:none;font-size:10px;padding:3px 8px;letter-spacing:.14em;
  border-radius:0;z-index:2;
}
.ad-sponsored-card::after{content:none}
.ad-sponsored-card .thumb{
  aspect-ratio:16/10;background:linear-gradient(135deg,var(--paper-deep) 0%,var(--rule) 100%);
  position:relative;
}
.ad-sponsored-card .thumb::after{
  content:"Sponsor creative";position:absolute;inset:0;
  display:grid;place-items:center;color:var(--muted-light);
  font-family:var(--font-ui);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
}
.ad-sponsored-card .body{padding:14px 18px 18px}
.ad-sponsored-card h4{
  font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.25;
  color:var(--ink);margin-bottom:6px;
}
.ad-sponsored-card p{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.4}
.ad-sponsored-card .brand-line{
  font-family:var(--font-ui);font-size:var(--fs-2xs);color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:8px;
}

/* Footer banner (above site-footer) */
.ad-footer-banner{
  margin:0;padding:34px 20px;min-height:160px;
  background:var(--paper-deep);
  border-top:1px solid var(--rule);border-bottom:0;
}
.ad-footer-banner::before{top:12px}

/* Between-section continue-reading separator with ad */
.continue-ad{
  margin:48px auto;padding:28px 20px;
  display:grid;place-items:center;gap:10px;text-align:center;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  max-width:none;
}
.continue-ad .sep-label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted-light);
}
.continue-ad .ad{margin:0;width:100%;max-width:970px}

/* Sticky sidebar ad wrapper */
.ad-sticky-side{position:sticky;top:130px}

/* Responsive density tweaks */
@media (max-width:700px){
  .ad, .ad-slot{padding:18px 16px;margin-block:22px}
  .ad-inline{min-height:220px}
  .ad-leaderboard{min-height:96px}
}

/* ---------- Sticky sidebar ---------- */
.layout-with-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px}
@media (max-width:980px){.layout-with-aside{grid-template-columns:1fr}}
.aside-sticky{position:sticky;top:130px;align-self:start}

/* TOC — reading-progress style */
.toc{
  padding:0;background:transparent;border:0;
  position:relative;
}
.toc .label{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  padding-bottom:10px;border-bottom:3px solid var(--ink);margin-bottom:14px;
  display:block;
}
.toc ol{list-style:none;counter-reset:t}
.toc li{counter-increment:t;border-bottom:1px solid var(--rule)}
.toc li:last-child{border-bottom:0}
.toc a{
  display:grid;grid-template-columns:28px 1fr;gap:10px;
  padding:10px 2px;
  color:var(--ink-soft);font-family:var(--font-ui);font-weight:500;font-size:var(--fs-sm);
  line-height:1.3;transition:color var(--d1) linear;
}
.toc a::before{
  content:counter(t,decimal-leading-zero);
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-xs);
  color:var(--muted-light);letter-spacing:0;line-height:1.4;
}
.toc a:hover,.toc a.is-active{color:var(--ink)}
.toc a.is-active{background:linear-gradient(to right,var(--red) 2px,transparent 2px);padding-left:8px;color:var(--ink);font-weight:700}
.toc a.is-active::before{color:var(--red)}

/* ---------- Section heads (like newspaper section titles) ---------- */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  border-bottom:3px solid var(--ink);
  padding-bottom:10px;margin-bottom:24px;
}
.section-head h2{
  font-family:var(--font-display);font-weight:900;
  font-size:1.875rem;letter-spacing:-0.02em;line-height:1;
}
.section-head .link{
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
}
.section-head.red{border-bottom-color:var(--red)}
.section-head.red h2{color:var(--ink)}

/* ---------- Stats band ---------- */
.stats-band{
  background:var(--ink);color:#fff;padding:30px 0;
  border-block:3px solid var(--red);
}
.stats-band .grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.stats-band .stat{padding:10px 24px;border-left:1px solid rgba(255,255,255,.1)}
.stats-band .stat:first-child{border-left:0;padding-left:0}
.stats-band .value{
  font-family:var(--font-display);font-weight:900;
  font-size:2.5rem;letter-spacing:-0.03em;line-height:1;color:#fff;
}
.stats-band .value .up{color:#4ADE80}
.stats-band .label{
  font-family:var(--font-ui);font-size:var(--fs-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:#B8AE98;margin-top:10px;line-height:1.4;
}

/* ---------- Accordion ---------- */
.accordion{border-top:2px solid var(--ink)}
.accordion-item{border-bottom:1px solid var(--rule)}
.accordion-trigger{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 4px;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:1.125rem;
  color:var(--ink);letter-spacing:-.005em;
}
.accordion-trigger .plus{
  width:28px;height:28px;border-radius:0;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:1rem;font-weight:600;
  transition:background var(--d2) var(--ease), transform var(--d2) var(--ease);
  flex-shrink:0;
}
.accordion-trigger[aria-expanded="true"] .plus{background:var(--red);transform:rotate(45deg)}
.accordion-panel{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.accordion-panel>div{
  padding:0 4px 22px;color:var(--ink-2);
  font-family:var(--font-serif);font-size:var(--fs-body);line-height:1.7;
}
.accordion-panel[data-open="true"]{max-height:800px}

/* ---------- Forms ---------- */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:700;color:var(--ink);letter-spacing:.06em;text-transform:uppercase}
.field input[type=text],.field input[type=email],.field input[type=tel],.field textarea,.field select{
  padding:14px 14px;border-radius:0;
  background:var(--surface);border:1.5px solid var(--rule);
  font-family:var(--font-ui);font-size:1rem;
  transition:border-color var(--d1) linear;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ink);
}
.field .hint{color:var(--muted);font-size:var(--fs-xs)}
.check{
  display:grid;grid-template-columns:20px 1fr;gap:10px;
  font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer;
}
.check input{accent-color:var(--red);margin-top:4px}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:64px;background:var(--ink);color:#C9C3B2;
  padding:56px 0 30px;border-top:4px solid var(--red);
}
.site-footer .grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-footer .brand{color:#fff}
.site-footer .brand .mark{background:var(--red);color:#fff}
.site-footer .about{color:#8F8877;font-family:var(--font-serif);font-size:var(--fs-sm);max-width:40ch;margin-top:14px;line-height:1.55}
.site-footer h4{
  color:#fff;font-family:var(--font-ui);font-size:var(--fs-2xs);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;font-weight:700;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);
}
.site-footer ul{list-style:none;display:grid;gap:4px}
.site-footer a{color:#C9C3B2;font-size:var(--fs-sm);display:inline-block;padding:4px 0;font-family:var(--font-ui)}
.site-footer a:hover{color:#fff}
.footer-bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  color:#8F8877;font-size:var(--fs-xs);font-family:var(--font-ui);
}
@media (max-width:780px){.site-footer .grid{grid-template-columns:1fr 1fr}.site-footer .footer-brand{grid-column:1/-1}}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;max-width:600px;margin-left:auto;
  background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--red);
  padding:20px 22px;box-shadow:0 10px 30px rgba(14,17,22,.12);z-index:80;display:none;
}
.cookie-banner[data-open="true"]{display:block}
.cookie-banner h4{font-family:var(--font-display);font-size:1.125rem;margin-bottom:6px}
.cookie-banner p{font-family:var(--font-serif);font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:14px;line-height:1.5}
.cookie-banner .actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}