/*
Theme Name: 62Pay Blog
Theme URI: https://62pay.com.br
Description: Blog de inteligência financeira da 62Pay para o setor educacional.
Version: 1.0.1
Author: Zero62
Author URI: https://zero62.com
License: Proprietary
Text Domain: 62pay-blog
*/

/* ============================================================
   62Pay Insights — design system
   Brand navy: #0B162E  ·  Hybrid theme (dark hero / light body)
   Type: Schibsted Grotesk (display) + Hanken Grotesk (text)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;450;500;600;700&display=swap');

:root{
  --navy-950:#060B18;
  --navy-900:#0B162E;
  --navy-850:#101D3A;
  --navy-800:#16244A;
  --navy-700:#21356A;
  --navy-600:#2C4488;

  --brand:#0B162E;
  --accent:#2747C9;
  --accent-bright:#3A60F0;
  --accent-soft:#E8ECFB;

  --paper:#FAFAFC;
  --surface:#FFFFFF;
  --surface-2:#F3F4F8;
  --surface-3:#ECEEF4;
  --border:#E5E7F0;
  --border-2:#D9DCE8;

  --ink:#0C1326;
  --ink-2:#37405A;
  --muted:#6A7390;
  --muted-2:#8b93ad;
  --on-dark:#F4F6FC;
  --on-dark-muted:#A6B0CC;

  --font-display:'Schibsted Grotesk', system-ui, sans-serif;
  --font-body:'Hanken Grotesk', system-ui, sans-serif;

  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --r-xl:30px;

  --shadow-sm:0 1px 2px rgba(12,19,38,.06), 0 1px 1px rgba(12,19,38,.04);
  --shadow:0 14px 34px -18px rgba(12,19,38,.28), 0 2px 8px -4px rgba(12,19,38,.10);
  --shadow-lg:0 40px 80px -32px rgba(8,16,40,.45);

  --maxw:1200px;
  --gutter:clamp(20px,5vw,56px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  font-weight:450;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.05;letter-spacing:-.025em;font-weight:700;}
p{margin:0;}
::selection{background:var(--navy-900);color:#fff;}

/* Accessibility: skip link */
.skip-link{
  position:absolute;top:-100px;left:var(--gutter);
  background:var(--accent);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  font-family:var(--font-display);font-weight:600;font-size:14px;
  z-index:999;transition:top .15s;
}
.skip-link:focus{top:0;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.eyebrow{
  font-family:var(--font-display);
  font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.eyebrow.on-dark{color:#8FA6FF;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;
  padding:.72em 1.25em;border-radius:999px;border:1px solid transparent;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px rgba(39,71,201,.7);}
.btn-primary:hover{background:var(--accent-bright);box-shadow:0 12px 26px -10px rgba(58,96,240,.8);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-2);}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--muted-2);}
.btn-on-dark{background:#fff;color:var(--navy-900);}
.btn-on-dark:hover{background:#E9ECF7;}
.btn-outline-dark{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.22);}
.btn-outline-dark:hover{background:rgba(255,255,255,.1);}
.btn .arr{transition:transform .2s;}
.btn:hover .arr{transform:translateX(3px);}

/* ---------- tags / chips ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  padding:.42em .7em;border-radius:7px;
}
.tag.solid{background:var(--navy-900);color:#fff;}
.tag.ghost-dark{background:rgba(255,255,255,.1);color:#cfd8f5;}

.dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.55;display:inline-block;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,252,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .bar{
  display:flex;align-items:center;gap:28px;
  height:70px;
}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand .mark,
.brand .custom-logo{
  height:30px;width:auto;display:block;
}
.brand .word{
  font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink);
}
.brand .word b{color:var(--accent);font-weight:800;}
.brand .sub{
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-left:11px;margin-left:3px;border-left:1px solid var(--border-2);
}
.nav{display:flex;align-items:center;gap:4px;margin-left:8px;}
.nav a{
  font-family:var(--font-display);font-weight:550;font-size:14.5px;color:var(--ink-2);
  padding:8px 13px;border-radius:9px;transition:background .15s,color .15s;
}
.nav a:hover{background:var(--surface-2);color:var(--ink);}
.nav a.active{color:var(--accent);}
.header-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--border-2);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-2);transition:.15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink);}
.menu-toggle{display:none;}

/* Mobile menu */
.mobile-menu{
  background:var(--paper);
  border-bottom:1px solid var(--border);
  padding:12px var(--gutter) 20px;
}
.mobile-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.mobile-menu li a{
  display:block;font-family:var(--font-display);font-weight:550;font-size:15px;
  color:var(--ink-2);padding:10px 12px;border-radius:9px;transition:background .15s,color .15s;
}
.mobile-menu li a:hover{background:var(--surface-2);color:var(--ink);}
.mobile-menu .current-menu-item > a{color:var(--accent);}

@media(max-width:900px){
  .nav{display:none;}
  .brand .sub{display:none;}
  .menu-toggle{display:grid;}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy-950);color:var(--on-dark);margin-top:96px;}
.site-footer .top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;
  padding-block:64px 48px;
}
.foot-brand .mark,
.foot-brand .custom-logo{height:75px;width:auto;margin-bottom:18px;}
.foot-brand p{color:var(--on-dark-muted);font-size:15px;max-width:30ch;}
.foot-col h5{
  font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#7E89AC;margin-bottom:16px;
}
.foot-col a{display:block;color:var(--on-dark-muted);font-size:14.5px;padding:6px 0;transition:color .15s;}
.foot-col a:hover{color:#fff;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding-block:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  color:#737E9F;font-size:13.5px;
}
.foot-bottom a{color:#9aa4c4;}
.foot-bottom a:hover{color:#fff;}
@media(max-width:760px){
  .site-footer .top{grid-template-columns:1fr 1fr;gap:32px;}
  .foot-brand{grid-column:1 / -1;}
}

/* ============================================================
   POST CARD
   ============================================================ */
.card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-2);}
.card .cover{aspect-ratio:16/10;position:relative;}
.card .cover img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.card .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.card .cat{font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--accent);text-transform:uppercase;}
.card h3{font-size:21px;line-height:1.18;letter-spacing:-.02em;font-weight:700;color:var(--ink);}
.card:hover h3{color:var(--navy-900);}
.card .excerpt{color:var(--muted);font-size:15px;line-height:1.55;}
.card .meta{margin-top:auto;display:flex;align-items:center;gap:9px;color:var(--muted-2);font-size:13px;}
.card .meta .who{color:var(--ink-2);font-weight:600;}
.avatar{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:12px;color:#fff;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900));
}

/* ============================================================
   ABSTRACT CSS COVERS
   ============================================================ */
.cover{background:var(--navy-900);overflow:hidden;}
.cover .cv-cat{
  position:absolute;left:14px;top:14px;z-index:3;
  font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:rgba(8,14,32,.5);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);padding:5px 10px;border-radius:7px;
}
.cv-mesh{
  background:
    radial-gradient(120% 120% at 12% 8%, #2C4488 0%, transparent 45%),
    radial-gradient(120% 120% at 90% 20%, #1B2E63 0%, transparent 50%),
    radial-gradient(140% 120% at 75% 110%, #3A60F0 0%, transparent 46%),
    linear-gradient(135deg,#0B162E,#060B18);
}
.cv-grid{background:linear-gradient(135deg,#101D3A,#0B162E);}
.cv-grid::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
  background-size:18px 18px;mask:linear-gradient(160deg,#000 20%,transparent 95%);
}
.cv-rings{background:radial-gradient(120% 120% at 78% 30%,#21356A,#0B162E 60%);}
.cv-rings::before{
  content:"";position:absolute;width:340px;height:340px;right:-90px;top:-90px;border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 28%, rgba(255,255,255,.12) 28% 29%, transparent 29% 44%,
    rgba(255,255,255,.10) 44% 45%, transparent 45% 62%, rgba(255,255,255,.07) 62% 63%, transparent 63%);
}
.cv-bars{background:linear-gradient(160deg,#16244A,#070C1A);}
.cv-bars::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64%;
  background:
    linear-gradient(#3A60F0,#3A60F0) 8% 100%/9% 40% no-repeat,
    linear-gradient(#2C4488,#2C4488) 24% 100%/9% 62% no-repeat,
    linear-gradient(#3A60F0,#3A60F0) 40% 100%/9% 50% no-repeat,
    linear-gradient(#5C79E8,#5C79E8) 56% 100%/9% 80% no-repeat,
    linear-gradient(#2C4488,#2C4488) 72% 100%/9% 44% no-repeat,
    linear-gradient(#3A60F0,#3A60F0) 88% 100%/9% 68% no-repeat;
  opacity:.92;
}
.cv-stripe{
  background:
    repeating-linear-gradient(125deg, rgba(255,255,255,.05) 0 2px, transparent 2px 16px),
    linear-gradient(135deg,#21356A,#0B162E);
}
.cv-stripe::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:200px;height:200px;border-radius:36px;
  background:linear-gradient(135deg,#3A60F0,#21356A);transform:rotate(18deg);opacity:.5;
}
.cv-glyph{background:linear-gradient(150deg,#1B2E63,#070C1A);display:grid;place-items:center;}
.cv-glyph .g{
  font-family:var(--font-display);font-weight:900;font-size:120px;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.22);line-height:1;
  user-select:none;
}

/* Placeholder pattern */
.ph{
  position:relative;background:
    repeating-linear-gradient(45deg,#EDEFF5 0 12px,#E6E9F1 12px 24px);
  display:grid;place-items:center;color:#9aa3bd;
}
.ph .ph-label{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12.5px;letter-spacing:.02em;
  background:rgba(255,255,255,.78);padding:6px 11px;border-radius:8px;border:1px dashed #b9c0d4;color:#727b95;
}
.ph.dark{background:repeating-linear-gradient(45deg,#101B36 0 12px,#0C1730 12px 24px);color:#6E7AA0;}
.ph.dark .ph-label{background:rgba(8,14,32,.6);border-color:rgba(255,255,255,.18);color:#9aa6cc;}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section{padding-block:clamp(48px,7vw,80px);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap;}
.sec-head h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.03em;}
.sec-head p{color:var(--muted);margin-top:8px;font-size:16px;}
.link-arrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--accent);}
.link-arrow:hover{color:var(--accent-bright);}
.link-arrow .arr{transition:transform .2s;}
.link-arrow:hover .arr{transform:translateX(3px);}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.grid-3,.grid-4{grid-template-columns:1fr;}}

.cat-rail{display:flex;gap:10px;flex-wrap:wrap;}
.cat-pill{
  font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--border-2);padding:9px 16px;border-radius:999px;transition:.16s;
}
.cat-pill:hover{border-color:var(--accent);color:var(--accent);}
.cat-pill.active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   HOME — hero
   ============================================================ */
.hero{background:var(--navy-950);color:#fff;position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(80% 90% at 88% -10%, rgba(58,96,240,.34),transparent 55%),
    radial-gradient(70% 80% at 6% 110%, rgba(33,53,106,.55),transparent 60%);
}
.hero .wrap{position:relative;}
.heroB{max-width:860px;margin-inline:auto;text-align:center;padding-block:clamp(60px,10vw,124px);}
.heroB h1{font-size:clamp(38px,6vw,72px);line-height:1.02;letter-spacing:-.038em;font-weight:800;}
.heroB h1 em{font-style:normal;color:#8FA6FF;}
.heroB .lead{color:var(--on-dark-muted);font-size:clamp(18px,2.1vw,21px);margin:24px auto 0;max-width:54ch;line-height:1.55;}
.heroB .cta{display:flex;gap:14px;margin-top:38px;justify-content:center;flex-wrap:wrap;}
.heroB .topics{margin-top:42px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.topics .chip{
  font-family:var(--font-display);font-weight:600;font-size:13.5px;color:#cbd3ee;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:8px 15px;border-radius:999px;transition:.15s;
}
.topics .chip:hover{background:rgba(255,255,255,.12);color:#fff;}

/* HOME — popular + materials */
.home-aside{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;}
@media(max-width:880px){.home-aside{grid-template-columns:1fr;gap:40px;}}
.aside-title{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}

.rank{display:flex;flex-direction:column;gap:2px;}
.rank a{display:flex;gap:18px;align-items:flex-start;padding:18px 4px;border-top:1px solid var(--border);transition:.15s;}
.rank a:hover{background:var(--surface);}
.rank a:first-child{border-top:0;}
.rank .num{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.04em;color:var(--border-2);line-height:1;width:42px;flex-shrink:0;}
.rank .rk-body h4{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);}
.rank a:hover .rk-body h4{color:var(--accent);}
.rank .rk-body .rk-meta{color:var(--muted-2);font-size:13px;margin-top:5px;}

.materials{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);
}
.materials .mtext{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:18px;}
.materials .mtext h2{font-size:clamp(24px,3vw,32px);}
.materials .mtext p{color:var(--muted);}
.materials .mvis{position:relative;min-height:280px;background:linear-gradient(150deg,var(--navy-850),var(--navy-950));}
@media(max-width:760px){.materials{grid-template-columns:1fr;}.materials .mvis{min-height:220px;}}

/* ============================================================
   CATEGORY ARCHIVE
   ============================================================ */
.cat-hero{background:var(--navy-950);color:#fff;position:relative;overflow:hidden;}
.cat-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 90% 0%, rgba(58,96,240,.28),transparent 55%);
}
.cat-hero .wrap{position:relative;padding-block:clamp(40px,6vw,68px) clamp(40px,6vw,60px);}
.crumbs{display:flex;align-items:center;gap:9px;color:#8b95bc;font-size:13.5px;font-family:var(--font-display);font-weight:500;}
.crumbs a{color:#8b95bc;}
.crumbs a:hover{color:#fff;}
.crumbs .sep{opacity:.5;}
.cat-hero h1{font-size:clamp(36px,5.4vw,58px);letter-spacing:-.035em;font-weight:800;margin-top:22px;}
.cat-hero .desc{color:var(--on-dark-muted);font-size:clamp(16px,2vw,19px);max-width:58ch;margin-top:18px;line-height:1.55;}
.cat-hero .stat{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap;}
.cat-hero .stat .s{display:flex;align-items:baseline;gap:8px;}
.cat-hero .stat .n{font-family:var(--font-display);font-weight:800;font-size:24px;color:#fff;letter-spacing:-.03em;}
.cat-hero .stat .l{color:#8b95bc;font-size:14px;}

.subnav{position:sticky;top:70px;z-index:40;background:rgba(250,250,252,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.subnav .wrap{display:flex;align-items:center;gap:18px;height:60px;overflow-x:auto;}
.subnav a{font-family:var(--font-display);font-weight:550;font-size:14.5px;color:var(--muted);white-space:nowrap;padding:6px 2px;border-bottom:2px solid transparent;transition:.15s;}
.subnav a:hover{color:var(--ink);}
.subnav a.active{color:var(--accent);border-color:var(--accent);}

.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);}
.feature .cover{position:relative;min-height:340px;}
.feature .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.feature .fbody{padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center;gap:16px;}
.feature .fbody h2{font-size:clamp(26px,3vw,36px);letter-spacing:-.03em;line-height:1.1;}
.feature .fbody p{color:var(--muted);font-size:16.5px;}
.feature .fmeta{display:flex;align-items:center;gap:10px;color:var(--muted-2);font-size:14px;margin-top:4px;}
.feature .fmeta .who{color:var(--ink-2);font-weight:600;}
@media(max-width:860px){.feature{grid-template-columns:1fr;}.feature .cover{min-height:220px;}}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:44px 0 26px;flex-wrap:wrap;}
.toolbar .count{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-2);}
.toolbar .count b{color:var(--ink);}
.sortpill{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border-2);border-radius:999px;padding:5px;}
.sortpill button{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--muted);background:transparent;border:0;padding:7px 14px;border-radius:999px;transition:.15s;}
.sortpill button.on{background:var(--navy-900);color:#fff;}

.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:52px;flex-wrap:wrap;}
.pager a,.pager span{
  min-width:42px;height:42px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--border-2);
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink-2);background:var(--surface);transition:.15s;padding:0 6px;
}
.pager a:hover{border-color:var(--accent);color:var(--accent);}
.pager .current{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.pager .dots{border:0;background:transparent;}
.pager .prev,.pager .next{gap:6px;min-width:auto;padding:0 16px;}
.pager .disabled{opacity:.4;pointer-events:none;}

/* ============================================================
   SINGLE POST
   ============================================================ */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:60;transition:width .1s linear;}

.art-hero{background:var(--navy-950);color:#fff;position:relative;overflow:hidden;}
.art-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 100% at 85% -10%, rgba(58,96,240,.26),transparent 55%);}
.art-hero .wrap{position:relative;max-width:820px;padding-block:clamp(38px,5vw,56px) clamp(28px,3vw,40px);}
.art-hero .crumbs{display:flex;align-items:center;gap:9px;color:#8b95bc;font-size:13.5px;font-family:var(--font-display);font-weight:500;margin-bottom:22px;}
.art-hero .crumbs a{color:#8b95bc;}
.art-hero .crumbs a:hover{color:#fff;}
.art-hero .crumbs .sep{opacity:.5;}
.art-hero h1{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.03em;line-height:1.06;font-weight:800;}
.art-hero .standfirst{color:#cbd3ee;font-size:clamp(17px,2vw,21px);line-height:1.5;margin-top:22px;font-weight:450;}
.byline{display:flex;align-items:center;gap:14px;margin:30px 0;flex-wrap:wrap;}
.byline .avatar{width:46px;height:46px;font-size:16px;}
.byline .who{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:#fff;}
.byline .sub{color:#8b95bc;font-size:13.5px;margin-top:2px;}
.byline .spacer{flex:1;}
.share{display:flex;gap:8px;}
.share a{width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#cbd3ee;transition:.15s;}
.share a:hover{background:rgba(255,255,255,.1);color:#fff;}

.art-cover{max-width:1040px;margin:0 auto;padding-inline:var(--gutter);margin-top:-40px;position:relative;z-index:2;}
.art-cover .cv{aspect-ratio:21/9;border-radius:var(--r-xl);position:relative;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08);overflow:hidden;}
.art-cover .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.art-cover .cap{color:var(--muted-2);font-size:13px;margin-top:12px;text-align:center;font-family:var(--font-display);}

.art-layout{max-width:1040px;margin:0 auto;padding-inline:var(--gutter);display:grid;grid-template-columns:200px 1fr;gap:48px;margin-top:clamp(40px,5vw,64px);align-items:start;}
.art-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px;}
.art-rail .lbl{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.toc a{display:block;font-size:14px;color:var(--muted);padding:5px 0 5px 14px;border-left:2px solid var(--border);line-height:1.4;transition:.15s;}
.toc a:hover,.toc a.active{color:var(--accent);border-color:var(--accent);}
.share-v{display:flex;gap:8px;}
.share-v a{width:38px;height:38px;border-radius:10px;border:1px solid var(--border-2);display:grid;place-items:center;color:var(--muted);transition:.15s;}
.share-v a:hover{border-color:var(--accent);color:var(--accent);}
@media(max-width:880px){.art-layout{grid-template-columns:1fr;gap:0;}.art-rail{display:none;}}

/* Article typography */
.prose{max-width:680px;font-size:19px;line-height:1.72;color:var(--ink-2);}
.prose>p{margin-bottom:26px;}
.prose>p:first-of-type::first-letter{font-family:var(--font-display);font-weight:800;font-size:3.4em;line-height:.82;float:left;margin:6px 14px 0 0;color:var(--navy-900);}
.prose h2{font-size:clamp(25px,2.6vw,32px);color:var(--ink);letter-spacing:-.025em;margin:48px 0 18px;scroll-margin-top:96px;}
.prose h3{font-size:21px;color:var(--ink);margin:34px 0 12px;letter-spacing:-.02em;}
.prose ul,.prose ol{margin:0 0 26px;padding-left:24px;}
.prose li{margin-bottom:10px;}
.prose li::marker{color:var(--accent);font-weight:700;}
.prose strong{color:var(--ink);font-weight:600;}
.prose a{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-soft);text-underline-offset:3px;}
.prose a:hover{text-decoration-color:var(--accent);}
.prose img{border-radius:var(--r);max-width:100%;height:auto;}
.prose figure{margin:34px 0;}
.prose figcaption{color:var(--muted-2);font-size:13.5px;margin-top:10px;font-family:var(--font-display);}

.callout{
  background:var(--accent-soft);border:1px solid #d4dbf7;border-radius:var(--r);
  padding:24px 26px;margin:34px 0;display:flex;gap:16px;
}
.callout .ico{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:var(--accent);display:grid;place-items:center;color:#fff;}
.callout .ttl{font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:16px;margin-bottom:5px;}
.callout p{font-size:15.5px;color:var(--ink-2);line-height:1.6;}

blockquote{
  margin:36px 0;padding:6px 0 6px 28px;border-left:4px solid var(--navy-900);
  font-family:var(--font-display);font-weight:500;font-size:25px;line-height:1.32;letter-spacing:-.02em;color:var(--ink);
}
blockquote cite{display:block;font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--muted);margin-top:14px;font-style:normal;}

.keybox{
  border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 28px;margin:38px 0;background:var(--surface);
}
.keybox h4{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;}
.keybox ul{margin:0;padding-left:20px;}
.keybox li{margin-bottom:9px;color:var(--ink-2);font-size:16px;}

.tag-list{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 0;}
.tag-list a{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink-2);background:var(--surface-2);padding:7px 14px;border-radius:999px;transition:.15s;}
.tag-list a:hover{background:var(--navy-900);color:#fff;}

.author-card{max-width:680px;margin:48px auto 0;padding-inline:var(--gutter);}
.author-card .inner{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 28px;}
.author-card .avatar{width:60px;height:60px;font-size:20px;flex-shrink:0;}
.author-card .who{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);}
.author-card .role{color:var(--accent);font-size:13.5px;font-weight:600;font-family:var(--font-display);margin-top:2px;}
.author-card p{color:var(--muted);font-size:15px;margin-top:10px;line-height:1.6;}

.cta-inline{max-width:680px;margin:44px auto 0;padding-inline:var(--gutter);}
.cta-inline .box{background:linear-gradient(135deg,var(--navy-900),var(--navy-950));border-radius:var(--r-xl);padding:36px;color:#fff;position:relative;overflow:hidden;}
.cta-inline .box::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 120% at 90% 0,rgba(58,96,240,.4),transparent 55%);}
.cta-inline .box>*{position:relative;}
.cta-inline h3{font-size:24px;color:#fff;letter-spacing:-.02em;}
.cta-inline p{color:var(--on-dark-muted);margin:12px 0 22px;max-width:46ch;}

.related .wrap{max-width:1040px;}

/* ============================================================
   WORDPRESS CONTENT DEFAULTS
   ============================================================ */
.wp-caption{max-width:100%;}
.wp-caption-text{color:var(--muted-2);font-size:13.5px;margin-top:8px;font-family:var(--font-display);}
.alignleft{float:left;margin:0 24px 16px 0;}
.alignright{float:right;margin:0 0 16px 24px;}
.aligncenter{margin-inline:auto;display:block;}