/*
Theme Name: TheSkillVault
Theme URI: https://www.theskillvault.com
Author: TheSkillVault
Description: Editorial learning and careers theme covering Career Advice, Skills Lab, Learning, Worklife, Mindset and Productivity. Two-row header with topic pills, auto-generated table of contents, reading progress, author credentials box and an ad-ready article rail.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theskillvault
*/

/* ---------- tokens ---------- */
:root{
  --bg:#F7F6F2; --surface:#FFFFFF; --surface-2:#EFEDE6;
  --ink:#151A2E; --ink-soft:#4F566B; --ink-faint:#767C91;
  --brand:#2F3E9E; --brand-ink:#1F2A6B;
  --gold:#E0A526; --gold-ink:#855B08;
  --teal:#1F8A7A; --teal-ink:#12665A;
  --plum:#8B4CA8; --plum-ink:#693082;
  --coral:#DC5E45; --coral-ink:#A33E2B;
  --tint-brand:#E3E6F7; --tint-gold:#FBEFD3; --tint-teal:#D9EFEA; --tint-plum:#F0E4F5; --tint-coral:#FBE4DE;
  --line:#E4E1D8; --line-strong:#D0CCBF;
  --ad-bg:#ECEAE3;
  --mark:#1F2A6B; --mark-ink:#FFFFFF; --mark-accent:#F2B33D;
  --shadow:0 1px 2px rgba(21,26,46,.05),0 8px 24px rgba(21,26,46,.06);
  --shadow-hover:0 2px 4px rgba(21,26,46,.06),0 16px 36px rgba(21,26,46,.11);
  /* Per-component tone, overridden by .tone-* */
  --tone:var(--brand); --tone-ink:var(--brand-ink); --tone-tint:var(--tint-brand);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1120; --surface:#161A2C; --surface-2:#1E2337;
    --ink:#ECEEF6; --ink-soft:#B6BBCF; --ink-faint:#878DA6;
    --brand:#8E9BF0; --brand-ink:#B6C0F8;
    --gold:#F2C25B; --gold-ink:#F6D58E;
    --teal:#5EC8B6; --teal-ink:#93DCCF;
    --plum:#C695E0; --plum-ink:#DBBAED;
    --coral:#F08B74; --coral-ink:#F6B19F;
    --tint-brand:#1F2545; --tint-gold:#342912; --tint-teal:#13302C; --tint-plum:#2B1F39; --tint-coral:#3A211B;
    --line:#252A41; --line-strong:#353B57;
    --ad-bg:#1A1F32;
    --mark:#8E9BF0; --mark-ink:#0E1120; --mark-accent:#F2C25B;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
    --shadow-hover:0 2px 4px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1120; --surface:#161A2C; --surface-2:#1E2337;
  --ink:#ECEEF6; --ink-soft:#B6BBCF; --ink-faint:#878DA6;
  --brand:#8E9BF0; --brand-ink:#B6C0F8;
  --gold:#F2C25B; --gold-ink:#F6D58E;
  --teal:#5EC8B6; --teal-ink:#93DCCF;
  --plum:#C695E0; --plum-ink:#DBBAED;
  --coral:#F08B74; --coral-ink:#F6B19F;
  --tint-brand:#1F2545; --tint-gold:#342912; --tint-teal:#13302C; --tint-plum:#2B1F39; --tint-coral:#3A211B;
  --line:#252A41; --line-strong:#353B57;
  --ad-bg:#1A1F32;
  --mark:#8E9BF0; --mark-ink:#0E1120; --mark-accent:#F2C25B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --shadow-hover:0 2px 4px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.4);
  color-scheme:dark;
}
.tone-brand{--tone:var(--brand);--tone-ink:var(--brand-ink);--tone-tint:var(--tint-brand);}
.tone-gold{--tone:var(--gold);--tone-ink:var(--gold-ink);--tone-tint:var(--tint-gold);}
.tone-teal{--tone:var(--teal);--tone-ink:var(--teal-ink);--tone-tint:var(--tint-teal);}
.tone-plum{--tone:var(--plum);--tone-ink:var(--plum-ink);--tone-tint:var(--tint-plum);}
.tone-coral{--tone:var(--coral);--tone-ink:var(--coral-ink);--tone-tint:var(--tint-coral);}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Safety net against unpredictable post content dragging the page sideways. */
html,body{overflow-x:hidden;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans','Inter',sans-serif;text-wrap:balance;color:var(--ink);font-weight:700;letter-spacing:-0.015em;margin:0;}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.skip-link,.screen-reader-text{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:100;}
.skip-link:focus{left:12px;top:12px;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.dot{color:var(--line-strong);}

/* ---------- single-row header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;}
.read-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--gold));transform:scaleX(0);transform-origin:left;}
.header-bar{display:flex;align-items:center;gap:32px;height:68px;}
.logo{display:flex;align-items:center;flex-shrink:0;}
.logo a{display:flex;align-items:center;gap:10px;}
.logo .mark{width:38px;height:38px;color:var(--mark);display:block;flex:none;}
.logo .mark svg{width:100%;height:100%;display:block;}
.wordmark{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:23px;letter-spacing:-0.03em;color:var(--ink);line-height:1;}
.wordmark .wm-the{font-weight:600;color:var(--ink-faint);margin-right:1px;}
.wordmark .wm-vault{color:var(--brand);}
.logo-img{display:block;height:44px;width:auto;}

/* Topic links fill the bar's height so the active underline sits on the header's bottom border. */
.main-nav{flex:1;align-self:stretch;display:flex;justify-content:center;min-width:0;}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;}
.main-nav li{display:flex;}
.main-nav a{position:relative;display:flex;align-items:center;padding:0 14px;font-size:14.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:color .15s ease;}
.main-nav a:hover{color:var(--ink);}
.main-nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--brand);transform:scaleX(0);transition:transform .2s ease;}
.main-nav a:hover::after{transform:scaleX(.5);background:var(--line-strong);}
.main-nav a.active{color:var(--ink);}
.main-nav a.active::after{transform:scaleX(1);background:var(--brand);}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;width:40px;height:40px;color:var(--ink-soft);cursor:pointer;flex-shrink:0;transition:border-color .15s ease,color .15s ease,background-color .15s ease;}
.icon-btn:hover{border-color:var(--brand);color:var(--brand-ink);}
.icon-btn svg{width:17px;height:17px;}
.icon-btn .i-close{display:none;}
.icon-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.icon-btn[aria-expanded="true"] .i-open{display:none;}
.icon-btn[aria-expanded="true"] .i-close{display:block;}
.menu-toggle{display:none;}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none;}
}

/* Search panel and mobile topic drawer drop down under the bar. */
.search-panel,.nav-drawer{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 18px 32px rgba(14,17,32,.12);}
.search-panel[hidden],.nav-drawer[hidden]{display:none;}
.search-panel{padding:26px 0 30px;}
.search-form{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line-strong);border-radius:999px;padding:6px 6px 6px 20px;transition:border-color .15s ease,box-shadow .15s ease;}
.search-form:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--tint-brand);}
.search-form svg{width:18px;height:18px;color:var(--ink-faint);flex:none;}
.search-form input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-family:'Inter',sans-serif;font-size:16px;color:var(--ink);padding:8px 0;}
.search-form input::placeholder{color:var(--ink-faint);}
.search-form input::-webkit-search-cancel-button{-webkit-appearance:none;}
.search-form button{border:0;border-radius:999px;background:var(--ink);color:var(--bg);font-family:'Inter',sans-serif;font-weight:700;font-size:14px;padding:11px 22px;cursor:pointer;}
.search-form button:hover{background:var(--brand-ink);}
.nav-drawer{padding:14px 0 18px;max-height:calc(100vh - 68px);overflow-y:auto;}
.nav-drawer ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.nav-drawer a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink);}
.nav-drawer a:hover{border-color:var(--tone);}
.nav-drawer a.active{border-color:var(--tone);background:var(--tone-tint);}
.nav-drawer .icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tone-tint);color:var(--tone-ink);flex:none;}
.nav-drawer a.active .icon{background:var(--surface);}
.nav-drawer .icon svg{width:18px;height:18px;}

/* Inline search field (404 page). */
.search-inline{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:10px 18px;}
.search-inline:focus-within{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--tint-brand);}
.search-inline input{border:none;background:transparent;outline:none;font-family:'Inter',sans-serif;font-size:14px;flex:1;min-width:0;color:var(--ink);}
.search-inline input::placeholder{color:var(--ink-faint);}
.search-inline svg{width:15px;height:15px;color:var(--ink-faint);flex:none;}

/* ---------- breadcrumb ---------- */
.breadcrumb{font-size:12.5px;color:var(--ink-faint);padding:20px 0 0;}
.breadcrumb a:hover{color:var(--brand-ink);}
.breadcrumb .sep{margin:0 7px;color:var(--line-strong);}

/* ---------- shared section chrome ---------- */
.eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;}
.section{padding:60px 0;border-top:1px solid var(--line);}
.section--tinted{background:var(--surface);}
.section--last{padding-bottom:72px;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.section-head h2{font-size:26px;margin-top:12px;max-width:30ch;line-height:1.25;}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:999px;}
.tag svg{width:14px;height:14px;}
.tag.brand{background:var(--tint-brand);color:var(--brand-ink);}
.tag.gold{background:var(--tint-gold);color:var(--gold-ink);}
.tag.teal{background:var(--tint-teal);color:var(--teal-ink);}
.tag.plum{background:var(--tint-plum);color:var(--plum-ink);}
.tag.coral{background:var(--tint-coral);color:var(--coral-ink);}
.view-all{font-size:13.5px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px;white-space:nowrap;}
.view-all:hover{color:var(--brand-ink);}

/* ---------- card (shared) ---------- */
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--line-strong);}
.card .art{aspect-ratio:16/10;background-color:var(--tone-tint);background-size:cover;background-position:center;}
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.card .kicker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tone-ink);}
.card h3{font-size:16.5px;line-height:1.35;}
.card:hover h3{color:var(--brand-ink);}
.card p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card .meta{font-size:12px;color:var(--ink-faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.card-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}

/* ---------- front page: hero ---------- */
.home-hero{padding:28px 0 56px;}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;}
.hero-lead{position:relative;display:flex;align-items:flex-end;min-height:540px;border-radius:20px;overflow:hidden;background-color:var(--brand-ink);background-size:cover;background-position:center;color:#fff;isolation:isolate;}
.hero-lead::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,17,32,0) 25%,rgba(14,17,32,.55) 55%,rgba(14,17,32,.92) 100%);}
.hero-lead-body{padding:36px;max-width:680px;}
.hero-lead .eyebrow{display:inline-block;background:var(--gold);color:#2A1D02;padding:6px 12px;border-radius:999px;margin-bottom:16px;}
.hero-lead h1{color:#fff;font-size:38px;line-height:1.12;font-weight:800;letter-spacing:-0.025em;margin-bottom:14px;}
.hero-lead p{color:rgba(255,255,255,.82);font-size:16px;margin:0 0 20px;max-width:58ch;}
.hero-lead .meta{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.85);font-weight:600;}
.hero-lead .meta .dot{color:rgba(255,255,255,.45);}
.meta-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7);}
.hero-lead:hover h1{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;}

.hero-side{background:var(--surface);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;}
.hero-side-head{padding:22px 24px 14px;border-bottom:1px solid var(--line);}
.hero-side-head .eyebrow{color:var(--brand-ink);display:flex;align-items:center;gap:8px;}
.hero-side-head .eyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px var(--tint-coral);}
.hero-side-list{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;}
.hero-side-list li{flex:1;display:flex;border-bottom:1px solid var(--line);}
.hero-side-list li:last-child{border-bottom:none;}
.hero-side-item{flex:1;display:flex;align-items:center;gap:14px;padding:16px 24px;transition:background-color .15s ease;}
.hero-side-item:hover{background:var(--surface-2);}
.hero-side-item .num{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;color:var(--line-strong);flex:none;width:30px;}
.hero-side-item:hover .num{color:var(--tone);}
.hero-side-item .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.hero-side-item .kicker{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tone-ink);}
.hero-side-item h3{font-size:15px;line-height:1.35;}
.hero-side-item .rt{font-size:12px;color:var(--ink-faint);}
.hero-side-item .thumb{width:72px;height:72px;border-radius:12px;background-color:var(--tone-tint);background-size:cover;background-position:center;flex:none;}

/* ---------- front page: topic tiles ---------- */
.topic-strip{padding:0 0 60px;}
.topic-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.topic-tile{position:relative;display:flex;flex-direction:column;gap:10px;padding:22px 20px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.topic-tile::after{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--tone);}
.topic-tile:hover{border-color:var(--tone);transform:translateY(-2px);box-shadow:var(--shadow-hover);}
.topic-tile .icon{width:46px;height:46px;border-radius:12px;background:var(--tone-tint);color:var(--tone-ink);display:grid;place-items:center;}
.topic-tile .icon svg{width:22px;height:22px;}
.topic-tile h3{font-size:18px;margin-top:4px;}
.topic-tile p{font-size:13px;color:var(--ink-soft);margin:0;flex:1;line-height:1.5;}
.topic-tile .count{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--tone-ink);padding-top:12px;border-top:1px dashed var(--line-strong);}
.topic-tile .count svg{width:15px;height:15px;transition:transform .2s ease;}
.topic-tile:hover .count svg{transform:translateX(3px);}

/* ---------- front page: feature + list sections ---------- */
.feature-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;}
.feature-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .2s ease;}
.feature-card:hover{box-shadow:var(--shadow-hover);}
.feature-card:hover h3{color:var(--brand-ink);}
.feature-card .art{aspect-ratio:16/9;background-color:var(--tone-tint);background-size:cover;background-position:center;flex:none;}
.feature-card .body{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;}
.feature-card h3{font-size:24px;line-height:1.25;}
.feature-card p{font-size:14.5px;color:var(--ink-soft);margin:0;}
.feature-card .meta{font-size:12.5px;color:var(--ink-faint);display:flex;gap:6px;}

.list-stack{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
/* flex:1 lets rows share whatever height the grid stretches the stack to. */
.list-item{display:flex;align-items:center;gap:16px;padding:16px 20px;flex:1;border-bottom:1px solid var(--line);transition:background-color .15s ease;}
.list-item:last-child{border-bottom:none;}
.list-item:hover{background:var(--surface-2);}
.list-item:hover h4{color:var(--brand-ink);}
.list-item .thumb{width:84px;height:84px;border-radius:12px;background-color:var(--tone-tint);background-size:cover;background-position:center;flex:none;}
.list-item h4{font-size:15px;line-height:1.35;margin-bottom:6px;}
.list-item span{font-size:12px;color:var(--ink-faint);}

/* ---------- category archive ---------- */
.cat-banner{position:relative;overflow:hidden;margin:16px 0 32px;padding:40px 40px 30px;border-radius:22px;background:var(--tone-tint);isolation:isolate;}
.cat-banner-watermark{position:absolute;right:-40px;top:-50px;width:300px;height:300px;color:var(--tone);opacity:.12;z-index:-1;transform:rotate(-12deg);}
.cat-banner-watermark svg{width:100%;height:100%;stroke-width:1.2;}
.cat-banner-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.cat-banner-main{max-width:640px;}
.cat-banner-head{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.cat-banner-icon{width:60px;height:60px;border-radius:16px;background:var(--surface);color:var(--tone-ink);display:grid;place-items:center;flex:none;box-shadow:var(--shadow);}
.cat-banner-icon svg{width:28px;height:28px;}
.cat-banner h1{font-size:42px;font-weight:800;letter-spacing:-0.03em;}
.cat-banner p{font-size:16.5px;color:var(--ink-soft);margin:0;line-height:1.55;}
.cat-stats{display:flex;gap:12px;}
.cat-stats .stat{background:var(--surface);border-radius:14px;padding:14px 20px;min-width:120px;box-shadow:var(--shadow);}
.cat-stats .stat b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:26px;font-weight:800;color:var(--tone-ink);letter-spacing:-0.02em;}
.cat-stats .stat span{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
.cat-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--tone) 22%,transparent);}
.cat-chips-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-right:4px;}
.cat-chips a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;background:var(--surface);color:var(--ink-soft);border:1px solid transparent;}
.cat-chips a svg{width:14px;height:14px;}
.cat-chips a:hover{border-color:var(--tone);color:var(--tone-ink);}
.cat-chips a.active{background:var(--ink);color:var(--bg);}

.list-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.result-count{font-size:13.5px;color:var(--ink-faint);margin:0;}

.archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:44px;}
/* Page-one lead: 2 columns × 2 rows, with the next two cards stacked beside it. */
.card--lead{grid-column:span 2;grid-row:span 2;}
.card--lead .art{aspect-ratio:auto;flex:1;min-height:300px;}
.card--lead .body{flex:none;padding:24px 26px 26px;gap:10px;}
.card--lead h3{font-size:26px;line-height:1.22;}
.card--lead p{font-size:15px;-webkit-line-clamp:3;}

.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 0 64px;flex-wrap:wrap;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border-radius:10px;font-size:13.5px;font-weight:700;color:var(--ink-soft);border:1px solid transparent;}
.pagination a.page-numbers:hover{border-color:var(--line-strong);color:var(--ink);background:var(--surface);}
.pagination .current{background:var(--ink);color:var(--bg);}
.pagination .prev,.pagination .next{padding:0 16px;border:1px solid var(--line-strong);background:var(--surface);}
.pagination svg{width:14px;height:14px;}
.no-results{padding:40px 0 60px;color:var(--ink-soft);}

.archive-head{padding:22px 0 30px;}
.archive-head h1{font-size:34px;font-weight:800;margin-bottom:8px;}
.archive-cards{margin-bottom:44px;}

/* ---------- single article ---------- */
.art-header{padding:22px 0 32px;}
.cat-pill{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tone-ink);background:var(--tone-tint);padding:7px 14px;border-radius:999px;margin-bottom:18px;}
.cat-pill svg{width:14px;height:14px;}
.art-header h1{font-size:44px;line-height:1.12;font-weight:800;letter-spacing:-0.03em;margin-bottom:16px;}
.art-header .dek{font-size:19px;color:var(--ink-soft);margin:0 0 26px;line-height:1.55;}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line);}
.byline-avatar{width:46px;height:46px;border-radius:50%;background:var(--tone-tint);flex:none;overflow:hidden;}
.byline-avatar img{width:100%;height:100%;object-fit:cover;}
.byline-info{display:flex;flex-direction:column;gap:2px;}
.byline-info .name{font-size:14px;font-weight:600;color:var(--ink-soft);}
.byline-info .name strong{font-weight:800;color:var(--ink);}
.byline-info .role{font-size:12px;color:var(--ink-faint);}
.byline-meta{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-faint);}
.byline-meta span{display:flex;align-items:center;gap:6px;}
.byline-meta svg{width:14px;height:14px;flex:none;}

.featured-media{margin:0 0 44px;}
.featured-media img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;object-position:center;border-radius:20px;background:var(--tone-tint);}

/* min-width:0 stops wide post content (tables, long URLs) blowing out the grid track. */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start;padding-bottom:56px;}
.article-body{max-width:740px;min-width:0;overflow-wrap:break-word;}
.article-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 28px;font-size:14.5px;}
.article-body th,.article-body td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top;}
.article-body th{background:var(--surface-2);font-weight:700;}
.article-body pre{overflow-x:auto;background:var(--surface-2);padding:16px;border-radius:10px;font-size:14px;}
.article-body iframe,.article-body embed,.article-body video{max-width:100%;}
.article-body p{font-family:'Source Serif 4',Georgia,serif;font-size:19px;line-height:1.75;color:var(--ink);margin:0 0 24px;}
.article-body a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);text-underline-offset:3px;}
.article-body a:hover{text-decoration-color:var(--brand);}
.article-body h2{font-size:28px;line-height:1.25;margin:48px 0 16px;scroll-margin-top:100px;}
.article-body h2::before{content:'';display:block;width:40px;height:4px;border-radius:4px;background:var(--tone);margin-bottom:16px;}
.article-body > h2:first-child{margin-top:0;}
.article-body h3{font-size:21px;margin:32px 0 12px;scroll-margin-top:100px;}
.article-body ul,.article-body ol{font-family:'Source Serif 4',Georgia,serif;font-size:18.5px;color:var(--ink);line-height:1.7;padding-left:24px;margin:0 0 24px;}
.article-body li{margin-bottom:10px;}
.article-body li::marker{color:var(--tone);font-weight:700;}
.article-body img{border-radius:14px;margin:32px 0;}
.article-body blockquote{border-left:4px solid var(--gold);background:var(--surface);padding:18px 24px;margin:32px 0;border-radius:0 14px 14px 0;}
.article-body blockquote p{font-size:21px;font-style:italic;margin:0;}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 0;}
.art-tags a{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);text-decoration:none;}

.author-box{margin-top:48px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:18px;display:flex;gap:20px;align-items:flex-start;scroll-margin-top:100px;}
.author-box .byline-avatar{width:76px;height:76px;}
.author-box .byline-avatar img{margin:0;border-radius:0;}
.author-box .label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--tone-ink);margin-bottom:4px;}
.author-box .name{font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;font-weight:800;margin-bottom:10px;}
.author-box .creds{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}
.author-box .creds li{display:flex;align-items:flex-start;gap:8px;font-family:'Inter',sans-serif;font-size:13px;color:var(--ink-soft);margin:0;}
.author-box .creds svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--tone-ink);}
.author-box p{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink-soft);margin:0;line-height:1.65;}

aside.rail{display:flex;flex-direction:column;gap:24px;position:sticky;top:96px;min-width:0;}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.widget-head{padding:15px 18px;border-bottom:1px solid var(--line);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);}
.widget-toc summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;}
.widget-toc summary::-webkit-details-marker{display:none;}
.widget-toc summary:hover{color:var(--ink);}
.widget-toc-chevron{width:14px;height:14px;flex:none;transition:transform .2s ease;}
.widget-toc[open] .widget-toc-chevron{transform:rotate(180deg);}
.widget-toc:not([open]) .widget-head{border-bottom:none;}
/* display:flex scoped to [open] so it never overrides the native closed state. */
.widget-toc[open] ul{list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:2px;max-height:min(52vh,460px);overflow-y:auto;}
.widget-toc a{display:block;font-size:13.5px;color:var(--ink-soft);padding:7px 12px;border-radius:8px;line-height:1.4;border-left:3px solid transparent;}
.widget-toc a:hover{background:var(--surface-2);color:var(--ink);}
.widget-toc a.is-current{background:var(--tone-tint);color:var(--tone-ink);border-left-color:var(--tone);font-weight:600;}
.widget-toc li.sub a{padding-left:24px;font-size:13px;color:var(--ink-faint);}
.ad-widget{background:var(--ad-bg);border:1px dashed var(--line-strong);border-radius:16px;min-height:280px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em;text-align:center;padding:16px;}
.widget-popular ul{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;}
.widget-popular li a{display:flex;gap:12px;padding:10px;border-radius:10px;}
.widget-popular li a:hover{background:var(--surface-2);}
.widget-popular li a:hover h5{color:var(--brand-ink);}
.widget-popular .thumb{width:60px;height:60px;border-radius:10px;background-color:var(--tone-tint);background-size:cover;background-position:center;flex:none;}
.widget-popular h5{font-size:13.5px;line-height:1.35;margin:0 0 4px;}
.widget-popular span{font-size:11.5px;color:var(--ink-faint);}

.related{padding:8px 0 64px;border-top:1px solid var(--line);}
.related h2{font-size:24px;margin:40px 0 24px;}

/* ---------- static pages ---------- */
.page-content{max-width:780px;padding:24px 0 72px;}
.page-content h1{font-size:40px;font-weight:800;letter-spacing:-0.03em;margin-bottom:10px;}
.page-content .page-meta{font-size:13px;color:var(--ink-faint);margin:0 0 28px;}
.page-content .page-lead{font-size:19px;line-height:1.6;color:var(--ink);margin:18px 0 28px;}
.page-content p{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 18px;}
.page-content h2{font-size:22px;margin:38px 0 12px;}
.page-content h3{font-size:17px;margin:24px 0 8px;}
.page-content ul{color:var(--ink-soft);line-height:1.7;padding-left:22px;margin:0 0 20px;}
.page-content li{margin-bottom:8px;}
.page-content li::marker{color:var(--brand);}
.page-content strong{color:var(--ink);}
.page-content a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent);text-underline-offset:3px;}
.page-content a:hover{text-decoration-color:var(--brand);}
/* Contact Us: content column plus a mailing-address card (stacks on mobile). */
.page-content:has(.contact-layout){max-width:1120px;}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;margin-top:18px;}
.contact-main{max-width:760px;}
.contact-main > :first-child{margin-top:0;}
.contact-card{position:sticky;top:96px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow);}
.page-content .contact-card h3{font-size:19px;margin:0 0 14px;}
.contact-card address{font-style:normal;font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin:0 0 14px;}
.page-content .contact-card-line{font-size:14.5px;line-height:1.6;margin:0;}
.page-content .contact-card-email{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
@media(max-width:980px){
  .contact-layout{grid-template-columns:minmax(0,1fr);gap:16px;}
  .contact-card{position:static;}
}
@media(max-width:640px){
  .page-content h1{font-size:30px;}
  .page-content .page-lead{font-size:17px;}
}

/* ---------- 404 ---------- */
.not-found{max-width:560px;margin:0 auto;padding:80px 0 96px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;}
.not-found-code{font-family:'Plus Jakarta Sans',sans-serif;font-size:96px;font-weight:800;line-height:1;letter-spacing:-0.05em;background:linear-gradient(135deg,var(--brand),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;}
.not-found h1{font-size:30px;font-weight:800;}
.not-found p{color:var(--ink-soft);margin:0;}
.search-inline--wide{width:100%;max-width:420px;margin-top:8px;}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;}

/* ---------- footer — same surface tokens as the header ---------- */
.site-footer{background:var(--surface);color:var(--ink);border-top:1px solid var(--line);padding:56px 0 28px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.footer-brand{max-width:400px;}
.footer-brand .footer-tagline{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;color:var(--ink);margin-top:16px;}
.footer-brand p{font-size:13.5px;color:var(--ink-faint);margin:10px 0 0;line-height:1.6;}
.footer-nav-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h4{font-family:'Inter',sans-serif;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:14px;font-weight:700;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-col a{font-size:14px;color:var(--ink-soft);}
.footer-col a:hover{color:var(--brand-ink);}
.footer-bottom-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:12.5px;color:var(--ink-faint);}
.footer-bottom-row .legal-links{display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.footer-bottom-row a:hover{color:var(--brand-ink);}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .main-nav{display:none;}
  .menu-toggle{display:inline-flex;}
  .topic-tiles{grid-template-columns:repeat(3,minmax(0,1fr));}
  .card-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);}
  .hero-lead{min-height:440px;}
  .feature-row{grid-template-columns:minmax(0,1fr);}
  .card-grid,.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .card--lead{grid-row:span 1;}
  .card--lead .art{aspect-ratio:16/9;flex:none;min-height:0;}
  /*
   * Single column on tablet/mobile: display:contents dissolves aside.rail
   * so its widgets can be ordered around the article (TOC above it, ads and
   * "more in" below).
   */
  .article-layout{grid-template-columns:minmax(0,1fr);gap:24px;}
  aside.rail{display:contents;}
  .widget-toc{order:1;}
  .article-body{order:2;max-width:none;}
  .ad-widget,.widget-popular{order:3;}
  .art-header h1{font-size:34px;}
}
@media(max-width:640px){
  .wrap{padding:0 16px;}
  .header-bar{height:60px;gap:12px;}
  .nav-drawer{max-height:calc(100vh - 60px);}
  .nav-drawer ul{grid-template-columns:repeat(2,minmax(0,1fr));}
  .search-panel{padding:16px 0 18px;}
  .search-form button{padding:10px 16px;}
  .home-hero{padding:16px 0 40px;}
  .hero-lead{min-height:420px;border-radius:16px;}
  .hero-lead-body{padding:22px;}
  .hero-lead h1{font-size:27px;}
  .hero-lead p{font-size:14.5px;}
  .hero-side-item{padding:14px 16px;}
  .topic-tiles{grid-template-columns:minmax(0,1fr);gap:10px;}
  .topic-tile{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px;}
  .topic-tile .icon{grid-row:span 2;}
  .topic-tile h3{margin:0;font-size:16.5px;}
  .topic-tile p{display:none;}
  .topic-tile .count{border-top:none;padding-top:0;justify-content:flex-start;gap:6px;}
  .section{padding:44px 0;}
  .section-head h2{font-size:21px;}
  .card-grid,.archive-grid,.card-row{grid-template-columns:minmax(0,1fr);}
  .card--lead{grid-column:span 1;}
  .card--lead h3{font-size:21px;}
  .list-item{padding:14px 16px;}
  .list-item .thumb{width:68px;height:68px;}
  .feature-card h3{font-size:20px;}
  .cat-banner{padding:26px 20px 20px;border-radius:18px;margin-top:12px;}
  .cat-banner-watermark{width:200px;height:200px;right:-50px;top:-40px;}
  .cat-banner-icon{width:46px;height:46px;border-radius:12px;}
  .cat-banner-icon svg{width:22px;height:22px;}
  .cat-banner h1{font-size:30px;}
  .cat-banner p{font-size:15px;}
  .cat-banner-inner{flex-direction:column;align-items:stretch;gap:18px;}
  .cat-stats .stat{flex:1;min-width:0;padding:12px 14px;}
  .cat-stats .stat b{font-size:20px;}
  .cat-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px;}
  .cat-chips a{flex:none;}
  .art-header h1{font-size:29px;}
  .art-header .dek{font-size:17px;}
  /* Compact byline: photo on the left, name / credentials / date stacked beside it. */
  .art-header{padding:14px 0 22px;}
  .cat-pill{margin-bottom:12px;}
  .art-header h1{margin-bottom:12px;}
  .art-header .dek{margin-bottom:16px;}
  .byline{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center;padding-top:14px;}
  .byline .byline-avatar{grid-row:span 2;width:42px;height:42px;align-self:start;}
  .byline-info{min-width:0;gap:1px;}
  .byline-info .role{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .byline-meta{margin-left:0;gap:12px;font-size:12px;}
  .byline-meta svg{width:13px;height:13px;}
  .featured-media{margin:0 -16px 28px;}
  .featured-media img{border-radius:0;aspect-ratio:1/1;}
  .article-body p{font-size:18px;}
  .article-body h2{font-size:23px;}
  .author-box{flex-direction:column;padding:20px;}
  .footer-top{flex-direction:column;}
  .footer-nav-cols{gap:40px;}
}
@media(max-width:400px){
  .logo .mark{width:32px;height:32px;}
  .wordmark{font-size:19px;}
  .header-actions{gap:6px;}
  .icon-btn{width:36px;height:36px;}
  .icon-btn svg{width:16px;height:16px;}
}

.advert {
   position: relative;
   margin: 0;
   text-align: center !important;
}
.advert:before {
 content: "Advertisement";
 display: block;
 left: 0;
 height: 20px;
 font-size: 11px;
 line-height: 20px;
 letter-spacing: 1px;
 color: #6f7174;
 top: -20px;
}

.advert:before {
   text-align: center !important
}
div.advertinside:before {
content: 'Advertisement - Continue Reading Below';
display: block;
top: -20px;
left: 0;
height: 20px;
font-size: 11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
text-align: center;
}

div.advertinside:after {
content: 'Advertisement - Continue Reading Below';
display: block;
top: -20px;
left: 0;
height: 20px;
font-size:11px;
line-height: 20px;
letter-spacing: 1px;
color: #6f7174;
text-align: center;
}
.mn-h-400 {
min-height: 400px
}
div.advertinside {
text-align: center;
background: #f5f5f5;
}
@media (min-width: 1024px) {
.advertmobile {
   display: none;
}
}

@media screen and (max-width:720px) {

.advert {
   position: relative;
   margin: 0;
   text-align: center !important;
}

.advert:before {
   text-align: center !important
}

}

/* ---------- inline Related Reading (function_files/functions-inline-related.php), after the 3rd paragraph ----------
   Colours come from the .tone-* class on the block, so light and dark both work. */
.article-body .inline-related{clear:both;margin:32px 0;padding:20px 22px 22px;background:var(--tone-tint);border-radius:14px;}
.article-body .inline-related-title{margin:0 0 14px;font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.08em;line-height:1.4;text-transform:uppercase;color:var(--tone-ink);}
.article-body .inline-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.article-body .inline-related-item{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;}
.article-body .inline-related-item:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--line-strong);text-decoration:none;}
.article-body .inline-related-image{aspect-ratio:16/10;background-color:var(--tone-tint);background-size:cover;background-position:center;}
.article-body .inline-related-body{display:flex;flex-direction:column;gap:6px;padding:14px 14px 16px;}
.article-body .inline-related-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-0.015em;}
.article-body .inline-related-item:hover .inline-related-name{color:var(--brand-ink);}
.article-body .inline-related-meta{font-size:12px;color:var(--ink-faint);}
@media(max-width:640px){
  .article-body .inline-related{padding:16px;}
  .article-body .inline-related-grid{grid-template-columns:1fr;gap:10px;}
  .article-body .inline-related-item{flex-direction:row;align-items:center;}
  .article-body .inline-related-image{flex:0 0 96px;aspect-ratio:4/3;}
  .article-body .inline-related-body{padding:10px 14px;gap:4px;}
}
@media (prefers-reduced-motion:reduce){.article-body .inline-related-item{transition:none;}.article-body .inline-related-item:hover{transform:none;}}