/* ============================================================
   Kineon Blog — shared styles
   Built on the Kineon design system tokens (colors_and_type.css)
   ============================================================ */

@font-face {
  font-family: "Helvetica Neue";
  src: url("./assets/fonts/HelveticaNeue.ttc") format("truetype-collection");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Monument Grotesk";
  src: url("./assets/fonts/monument-grotesk-medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
  ascent-override: 82%; descent-override: 18%; line-gap-override: 0%;
}
@font-face {
  font-family: "Monument Grotesk Mono";
  src: url("./assets/fonts/ABCMonumentGroteskMono-Regular-Trial.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: block;
  ascent-override: 82%; descent-override: 18%; line-gap-override: 0%;
}

:root {
  --k-white:#FFFFFF; --k-beige:#F5F4F1; --k-black:#000000;
  --k-grey-25:rgba(0,0,0,.05); --k-grey-50:rgba(0,0,0,.08); --k-grey-100:rgba(0,0,0,.16);
  --k-grey-200:rgba(0,0,0,.20); --k-grey-300:rgba(0,0,0,.24); --k-grey-400:rgba(0,0,0,.38);
  --k-grey-500:rgba(0,0,0,.42); --k-grey-700:rgba(0,0,0,.60); --k-grey-800:rgba(0,0,0,.68);
  --k-grey-900:rgba(0,0,0,.72); --k-grey-950:rgba(0,0,0,.84);

  --k-fg:var(--k-black); --k-fg-muted:var(--k-grey-900); --k-fg-subtle:var(--k-grey-500);
  --k-fg-on-dark:var(--k-beige);
  --k-bg:var(--k-beige); --k-bg-elev:var(--k-white); --k-bg-dark:var(--k-black);
  --k-border:var(--k-grey-50); --k-border-strong:var(--k-grey-100);
  --k-border-on-dark:rgba(255,255,255,.16);
  --k-shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --k-shadow-md:0 8px 24px rgba(0,0,0,.08);
  --k-shadow-lg:0 24px 64px rgba(0,0,0,.12);
  --k-photo-gradient:linear-gradient(180deg,rgb(80,96,112) 1%,rgb(232,247,254) 100%);
  --k-gradient-slate-sky:linear-gradient(180deg,#506070 0%,#E8F7FE 100%);

  --k-font-display:"Helvetica Neue","Helvetica","Arial",sans-serif;
  --k-font-body:"Helvetica Neue","Helvetica","Arial",sans-serif;
  --k-font-mono:"Monument Grotesk Mono","IBM Plex Mono","Menlo",monospace;
  --k-font-accent:"Monument Grotesk","Helvetica Neue",sans-serif;

  --k-tr-tight:-0.028em; --k-tr-snug:-0.02em; --k-tr-mono-wide:0.02em;
  --k-radius-sm:9px; --k-radius-md:16px; --k-radius-lg:24px; --k-radius-xl:32px; --k-radius-pill:999px;

  --maxw:1320px;
  --gutter:40px;
  /* Match the running-campaign landing page: tighter 12px card corners */
  --card-radius:12px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--k-font-body); color:var(--k-fg);
  background:var(--k-bg); letter-spacing:var(--k-tr-snug);
  line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
button{font-family:inherit;}

.mono{font-family:var(--k-font-mono); letter-spacing:var(--k-tr-mono-wide); text-transform:uppercase;}
.eyebrow{
  font-family:var(--k-font-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--k-fg-subtle);
}

/* ---------- Top promo bar ---------- */
.promo{
  background:var(--k-black); color:var(--k-beige);
  font-family:var(--k-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  text-align:center; padding:9px 16px;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:40; background:rgba(245,244,241,.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--k-border);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);
  height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{display:flex; align-items:center;}
.nav-logo svg, .nav-logo img{height:20px; width:auto; display:block;}
.nav-links{display:flex; gap:30px; align-items:center;}
.nav-links a{font-size:14px; color:var(--k-fg); position:relative; padding:4px 0;}
.nav-links a.active{font-weight:500;}
.nav-links a:hover{opacity:.62;}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-ico{
  width:38px; height:38px; border-radius:var(--k-radius-pill); border:1px solid var(--k-border-strong);
  display:grid; place-items:center; cursor:pointer; background:transparent; color:var(--k-fg);
  transition:background .18s ease;
}
.nav-ico:hover{background:var(--k-grey-25);}
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  font-size:14px; letter-spacing:var(--k-tr-snug); border-radius:var(--k-radius-pill);
  padding:11px 20px; transition:filter .18s ease, transform .05s ease, background .18s ease, color .18s ease;
}
.btn:active{transform:scale(.98);}
.btn-dark{background:var(--k-black); color:var(--k-beige);}
.btn-dark:hover{filter:brightness(.88);}
.btn-light{background:var(--k-white); color:var(--k-fg); border:1px solid var(--k-border-strong);}
.btn-light:hover{background:var(--k-grey-25);}
.btn-ghost{background:transparent; color:var(--k-fg); border:1px solid var(--k-border-strong);}
.btn-ghost:hover{background:var(--k-grey-25);}

/* ---------- Page shell ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}

/* ---------- Blog masthead ---------- */
.masthead{padding:48px 0 26px;}
.masthead h1{
  font-family:var(--k-font-display); font-weight:500; font-size:54px; line-height:1;
  letter-spacing:var(--k-tr-tight); margin:0 0 14px;
}
.masthead .lede{
  font-size:19px; color:var(--k-fg-muted); max-width:620px; line-height:1.45;
}
.masthead-row{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap;}

/* ---------- Filter bar ---------- */
.filterbar{
  position:sticky; top:68px; z-index:30;
  background:rgba(245,244,241,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--k-border); border-bottom:1px solid var(--k-border);
  margin-top:8px;
}
.filterbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.filter-label{font-family:var(--k-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--k-fg-subtle); margin-right:2px;}
.dropdown{position:relative;}
.dropdown-btn{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--k-bg-elev); border:1px solid var(--k-border-strong); color:var(--k-fg);
  border-radius:var(--k-radius-pill); padding:9px 14px; font-size:14px; letter-spacing:var(--k-tr-snug);
  transition:border-color .15s ease, background .15s ease;
}
.dropdown-btn:hover{border-color:var(--k-grey-300);}
.dropdown-btn.has-value{background:var(--k-black); color:var(--k-beige); border-color:var(--k-black);}
.dropdown-btn svg{transition:transform .18s ease;}
.dropdown.open .dropdown-btn svg{transform:rotate(180deg);}
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:50; min-width:230px;
  background:var(--k-white); border:1px solid var(--k-border-strong); border-radius:var(--k-radius-md);
  box-shadow:var(--k-shadow-md); padding:6px; opacity:0; transform:translateY(-6px);
  pointer-events:none; transition:opacity .16s ease, transform .16s ease; max-height:340px; overflow:auto;
}
.dropdown.open .dropdown-menu{opacity:1; transform:translateY(0); pointer-events:auto;}
.dropdown-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border-radius:var(--k-radius-sm); font-size:14px; cursor:pointer; color:var(--k-fg);
}
.dropdown-item:hover{background:var(--k-grey-25);}
.dropdown-item.sel{background:var(--k-grey-25); font-weight:500;}
.dropdown-item .cnt{font-family:var(--k-font-mono); font-size:11px; color:var(--k-fg-subtle); letter-spacing:.04em;}
.dropdown-item .tick{color:var(--k-fg); opacity:0; }
.dropdown-item.sel .tick{opacity:1;}

.search{
  display:flex; align-items:center; gap:9px; flex:1; min-width:200px; max-width:340px;
  background:var(--k-bg-elev); border:1px solid var(--k-border-strong); border-radius:var(--k-radius-pill);
  padding:9px 16px; margin-left:auto;
}
.search input{border:none; outline:none; background:transparent; font-family:inherit; font-size:14px; width:100%; color:var(--k-fg); letter-spacing:var(--k-tr-snug);}
.search input::placeholder{color:var(--k-fg-subtle);}
.search svg{color:var(--k-fg-subtle); flex-shrink:0;}

.clearbtn{
  background:transparent; border:none; cursor:pointer; color:var(--k-fg-muted);
  font-family:var(--k-font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px;
}
.clearbtn:hover{color:var(--k-fg);}

/* active chips row */
.activechips{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:14px 0 0;}
.chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--k-black); color:var(--k-beige);
  border-radius:var(--k-radius-pill); padding:6px 8px 6px 13px; font-size:13px; letter-spacing:var(--k-tr-snug);
}
.chip button{background:rgba(255,255,255,.16); border:none; color:var(--k-beige); width:18px; height:18px; border-radius:50%; cursor:pointer; display:grid; place-items:center; padding:0;}
.chip button:hover{background:rgba(255,255,255,.3);}

/* ---------- Featured ---------- */
.featured{
  display:grid; grid-template-columns:1.15fr .85fr; gap:0; margin:34px 0 14px;
  background:var(--k-bg-elev); border:1px solid transparent; border-radius:var(--card-radius); overflow:hidden;
  box-shadow:var(--k-shadow-sm);
}
.featured-media{position:relative; min-height:440px; overflow:hidden;}
.featured-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.featured:hover .featured-media img{transform:scale(1.03);}
.featured-flag{
  position:absolute; top:18px; left:18px; background:var(--k-black); color:var(--k-beige);
  font-family:var(--k-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 11px; border-radius:var(--k-radius-pill);
}
.featured-body{padding:44px 46px; display:flex; flex-direction:column; justify-content:center;}
.featured-body .cats{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.featured-body h2{
  font-family:var(--k-font-display); font-weight:500; font-size:38px; line-height:1.05;
  letter-spacing:var(--k-tr-tight); margin:0 0 16px;
}
.featured-body p{font-size:17px; color:var(--k-fg-muted); line-height:1.5; margin:0 0 26px; max-width:46ch;}
.tagcat{
  font-family:var(--k-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--k-fg-muted); background:var(--k-grey-25); padding:5px 10px; border-radius:var(--k-radius-pill);
}
.byline{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--k-fg-subtle); margin-top:auto;}
.byline .dot{width:3px; height:3px; border-radius:50%; background:var(--k-grey-300);}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--k-photo-gradient); flex-shrink:0; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:500;}

/* ---------- Layout: content + sidebar ---------- */
.layout{display:grid; grid-template-columns:1fr 332px; gap:48px; padding:26px 0 80px; align-items:start;}
body[data-sidebar="left"] .layout{grid-template-columns:332px 1fr;}
body[data-sidebar="left"] .layout .content{order:2;}
body[data-sidebar="left"] .layout .sidebar{order:1;}

.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 20px;}
.section-head h3{font-family:var(--k-font-display); font-weight:500; font-size:24px; letter-spacing:var(--k-tr-snug); margin:0;}
.section-head .count{font-family:var(--k-font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--k-fg-subtle);}

/* must-read row */
.mustread{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:46px;}

/* article cards grid */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 24px;}
body[data-layout="magazine"] .grid{grid-template-columns:1fr;}

.card{
  background:var(--k-bg-elev); border:1px solid transparent; border-radius:var(--card-radius);
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover{box-shadow:var(--k-shadow-md); transform:translateY(-2px);}
body[data-cardstyle="flat"] .card{border-color:transparent; background:transparent;}
body[data-cardstyle="flat"] .card:hover{box-shadow:none; background:var(--k-bg-elev);}
.card-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--k-grey-25);}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.card:hover .card-media img{transform:scale(1.04);}
.card-flag{
  position:absolute; top:12px; left:12px; background:rgba(0,0,0,.78); color:var(--k-beige);
  font-family:var(--k-font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:var(--k-radius-pill); backdrop-filter:blur(4px);
}
.card-body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card-body .cats{display:flex; gap:7px; flex-wrap:wrap;}
.card-body h4{
  font-family:var(--k-font-display); font-weight:500; font-size:20px; line-height:1.14;
  letter-spacing:var(--k-tr-snug); margin:0;
}
.card-body p{font-size:14.5px; color:var(--k-fg-muted); line-height:1.45; margin:0;}
.card-meta{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--k-fg-subtle); margin-top:auto; padding-top:6px;}

/* magazine wide card */
body[data-layout="magazine"] .card{flex-direction:row;}
body[data-layout="magazine"] .card-media{aspect-ratio:auto; width:300px; flex-shrink:0;}
body[data-layout="magazine"] .card-body{padding:26px 28px; justify-content:center; gap:12px;}
body[data-layout="magazine"] .card-body h4{font-size:25px;}
body[data-layout="magazine"] .card-body p{font-size:15.5px; max-width:60ch;}

/* mustread cards a touch tighter */
.mustread .card-body{padding:16px 16px 18px;}
.mustread .card-body h4{font-size:17px;}

.noresults{padding:60px 20px; text-align:center; color:var(--k-fg-subtle); border:1px dashed var(--k-border-strong); border-radius:var(--card-radius);}
.noresults h4{font-family:var(--k-font-display); font-size:22px; color:var(--k-fg); margin:0 0 8px;}

.loadmore{display:flex; justify-content:center; margin-top:44px;}

/* ---------- Sidebar ---------- */
.sidebar{display:flex; flex-direction:column; gap:26px; position:sticky; top:148px;}
.swidget{background:var(--k-bg-elev); border:1px solid transparent; border-radius:var(--card-radius); padding:22px;}
.swidget.dark{background:var(--k-black); color:var(--k-beige); border-color:transparent;}
.swidget h5{
  font-family:var(--k-font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--k-fg-subtle); margin:0 0 16px; display:flex; align-items:center; gap:8px;
}
.swidget.dark h5{color:rgba(245,244,241,.55);}
.swidget.dark h5::before, .swidget h5::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor; display:inline-block;}

/* latest list */
.latest{display:flex; flex-direction:column;}
.latest-item{display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--k-border); cursor:pointer;}
.latest-item:first-child{border-top:none; padding-top:0;}
.latest-item:hover h6{opacity:.6;}
.latest-thumb{width:64px; height:64px; border-radius:var(--k-radius-md); object-fit:cover; flex-shrink:0;}
.latest-item .num{font-family:var(--k-font-mono); font-size:14px; color:var(--k-fg-subtle); width:22px; flex-shrink:0;}
.latest-item h6{font-family:var(--k-font-display); font-weight:500; font-size:15px; line-height:1.2; letter-spacing:var(--k-tr-snug); margin:0 0 6px; transition:opacity .15s ease;}
.latest-item .m{font-family:var(--k-font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--k-fg-subtle);}

/* product card in sidebar */
.prod{display:flex; flex-direction:column; gap:0;}
.prod-media{border-radius:var(--k-radius-md); overflow:hidden; background:var(--k-gradient-slate-sky); aspect-ratio:4/3; display:grid; place-items:center; margin-bottom:16px;}
.prod-media img{width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 14px 24px rgba(0,0,0,.28));}
.prod h4{font-family:var(--k-font-display); font-weight:500; font-size:20px; letter-spacing:var(--k-tr-snug); margin:0 0 6px;}
.prod p{font-size:13.5px; color:var(--k-fg-muted); line-height:1.45; margin:0 0 14px;}
.prod .price{display:flex; align-items:baseline; gap:9px; margin-bottom:14px;}
.prod .price b{font-family:var(--k-font-display); font-size:22px; font-weight:500;}
.prod .price s{color:var(--k-fg-subtle); font-size:14px;}
.prod .price .save{font-family:var(--k-font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; background:var(--k-grey-25); padding:4px 8px; border-radius:var(--k-radius-pill);}

/* topics */
.topics{display:flex; flex-direction:column; gap:2px;}
.topic-row{display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid var(--k-border); font-size:15px; cursor:pointer;}
.topic-row:first-child{border-top:none;}
.topic-row:hover{color:var(--k-fg-muted);}
.topic-row .cnt{font-family:var(--k-font-mono); font-size:11px; letter-spacing:.04em; color:var(--k-fg-subtle);}

/* newsletter */
.swidget.dark p{font-size:14px; color:rgba(245,244,241,.78); line-height:1.45; margin:0 0 16px;}
.swidget.dark h4{font-family:var(--k-font-display); font-weight:500; font-size:21px; letter-spacing:var(--k-tr-snug); margin:0 0 8px;}
.nl-form{display:flex; flex-direction:column; gap:9px;}
.nl-form input{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:var(--k-radius-pill); padding:12px 16px; color:var(--k-beige); font-family:inherit; font-size:14px; outline:none;}
.nl-form input::placeholder{color:rgba(245,244,241,.5);}
.btn-bone{background:var(--k-beige); color:var(--k-black); justify-content:center;}
.btn-bone:hover{filter:brightness(.94);}

/* quiz cta */
.quiz{position:relative; overflow:hidden; padding:26px; border-radius:var(--card-radius); color:var(--k-beige);}
.quiz::before{content:""; position:absolute; inset:0; background:var(--k-gradient-slate-sky); z-index:0;}
.quiz::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.45)); z-index:1;}
.quiz > *{position:relative; z-index:2;}
.quiz .qlabel{font-family:var(--k-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-bottom:10px;}
.quiz h4{font-family:var(--k-font-display); font-weight:500; font-size:24px; line-height:1.08; letter-spacing:var(--k-tr-snug); margin:0 0 16px;}

/* ---------- Footer ---------- */
.footer{background:var(--k-black); color:var(--k-beige); padding:70px 0 36px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:36px;}
.footer-grid svg, .footer-grid img{height:20px; width:auto;}
.footer-grid .blurb{font-size:15px; line-height:1.5; opacity:.7; margin:20px 0 0; max-width:300px;}
.footer-col h6{font-family:var(--k-font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(245,244,241,.5); margin:0 0 16px;}
.footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:14px; opacity:.92;}
.footer-col a:hover{opacity:.6;}
.footer-bot{display:flex; justify-content:space-between; align-items:center; margin-top:56px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); font-family:var(--k-font-mono); font-size:11px; letter-spacing:.03em; color:rgba(245,244,241,.6);}

/* ============================================================
   Article page
   ============================================================ */
.art-hero{padding:40px var(--gutter) 0;}
.crumbs{display:flex; align-items:center; gap:9px; font-family:var(--k-font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--k-fg-subtle); margin-bottom:28px;}
.crumbs a:hover{color:var(--k-fg);}
.art-head{max-width:780px;}
.art-head .cats{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.art-head h1{font-family:var(--k-font-display); font-weight:500; font-size:48px; line-height:1.04; letter-spacing:var(--k-tr-tight); margin:0 0 20px;}
.art-head .standfirst{font-size:21px; line-height:1.5; color:var(--k-fg-muted); margin:0 0 28px;}
.art-byline{display:flex; align-items:center; gap:13px; padding:20px 0; border-top:1px solid var(--k-border); border-bottom:1px solid var(--k-border);}
.art-byline .avatar{width:44px; height:44px; font-size:15px;}
.art-byline .info{display:flex; flex-direction:column; gap:3px;}
.art-byline .nm{font-size:15px; font-weight:500;}
.art-byline .rl{font-size:13px; color:var(--k-fg-subtle);}
.art-byline .meta{margin-left:auto; display:flex; gap:18px; font-family:var(--k-font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--k-fg-subtle); text-align:right;}
.art-byline .meta span b{display:block; color:var(--k-fg); font-family:var(--k-font-body); font-size:13px; letter-spacing:var(--k-tr-snug); text-transform:none; margin-top:3px;}
.art-cover{margin:34px 0 0; border-radius:16px; overflow:hidden; aspect-ratio:21/9;}
.art-cover img{width:100%; height:100%; object-fit:cover;}
.art-cover .cap, .cap{font-size:12px; color:var(--k-fg-subtle); padding:10px 2px 0;}

.art-layout{display:grid; grid-template-columns:230px 1fr 318px; gap:48px; padding:48px var(--gutter) 80px; align-items:start;}

/* TOC */
.toc{position:sticky; top:160px; font-size:13.5px;}
.toc h6{font-family:var(--k-font-mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--k-fg-subtle); margin:0 0 14px;}
.toc ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--k-border);}
.toc a{display:block; padding:7px 0 7px 16px; color:var(--k-fg-subtle); line-height:1.3; border-left:2px solid transparent; margin-left:-1px; transition:color .15s ease, border-color .15s ease;}
.toc a:hover{color:var(--k-fg);}
.toc a.active{color:var(--k-fg); border-left-color:var(--k-black); font-weight:500;}
.toc .share{margin-top:26px; padding-top:22px; border-top:1px solid var(--k-border); display:flex; gap:9px;}
.toc .share .nav-ico{width:36px; height:36px;}

/* prose */
.prose{max-width:720px;}
.prose h2{font-family:var(--k-font-display); font-weight:500; font-size:32px; line-height:1.12; letter-spacing:var(--k-tr-snug); margin:46px 0 16px; scroll-margin-top:160px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-family:var(--k-font-display); font-weight:500; font-size:22px; letter-spacing:var(--k-tr-snug); margin:32px 0 12px;}
.prose p{font-size:18px; line-height:1.66; color:var(--k-grey-950); margin:0 0 22px;}
.prose p a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--k-grey-300);}
.prose p a:hover{text-decoration-color:var(--k-black);}
.prose ul, .prose ol{font-size:18px; line-height:1.6; color:var(--k-grey-950); margin:0 0 22px; padding-left:22px; display:flex; flex-direction:column; gap:10px;}
.prose li::marker{color:var(--k-fg-subtle);}
.prose strong{font-weight:500;}
.prose figure{margin:34px 0;}
.prose figure img{border-radius:var(--card-radius); width:100%;}
.prose figcaption{font-size:13px; color:var(--k-fg-subtle); padding-top:10px;}

.pullquote{margin:40px 0; padding:6px 0 6px 28px; border-left:3px solid var(--k-black); font-family:var(--k-font-display); font-weight:500; font-size:27px; line-height:1.25; letter-spacing:var(--k-tr-snug);}

/* key takeaways box */
.takeaways{background:var(--k-bg-elev); border:1px solid transparent; border-radius:var(--card-radius); padding:28px 30px; margin:36px 0;}
.takeaways h5{font-family:var(--k-font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--k-fg-subtle); margin:0 0 16px; display:flex; align-items:center; gap:9px;}
.takeaways ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:13px;}
.takeaways li{display:flex; gap:13px; font-size:16px; line-height:1.45; color:var(--k-grey-950);}
.takeaways li svg{flex-shrink:0; margin-top:2px; color:var(--k-black);}

/* inline product callout */
.callout{display:grid; grid-template-columns:150px 1fr; gap:24px; align-items:center; background:var(--k-black); color:var(--k-beige); border-radius:var(--card-radius); padding:26px 30px; margin:38px 0;}
.callout .cmedia{aspect-ratio:1; border-radius:var(--k-radius-md); background:var(--k-gradient-slate-sky); display:grid; place-items:center; overflow:hidden;}
.callout .cmedia img{width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));}
.callout .clabel{font-family:var(--k-font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin-bottom:9px;}
.callout h4{font-family:var(--k-font-display); font-weight:500; font-size:23px; line-height:1.1; letter-spacing:var(--k-tr-snug); margin:0 0 10px;}
.callout p{font-size:14.5px; line-height:1.5; opacity:.8; margin:0 0 16px;}

/* article sidebar */
.art-aside{display:flex; flex-direction:column; gap:24px; position:sticky; top:160px;}

/* quiz banner full width */
.quizbanner{position:relative; overflow:hidden; border-radius:16px; margin:24px 0 0; min-height:300px; display:flex; align-items:center;}
.quizbanner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.quizbanner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.15) 100%); z-index:1;}
.quizbanner-in{position:relative; z-index:2; padding:48px 56px; color:var(--k-beige); max-width:620px;}
.quizbanner .qlabel{font-family:var(--k-font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; opacity:.85; margin-bottom:14px;}
.quizbanner h2{font-family:var(--k-font-display); font-weight:500; font-size:40px; line-height:1.04; letter-spacing:var(--k-tr-tight); margin:0 0 16px;}
.quizbanner p{font-size:17px; line-height:1.5; opacity:.9; margin:0 0 24px; max-width:46ch;}

/* related */
.related{padding:64px var(--gutter) 96px;}
.related .section-head{margin-bottom:24px;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}

/* progress bar */
.readbar{position:fixed; top:0; left:0; height:3px; background:var(--k-black); z-index:60; width:0;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr;}
  body[data-sidebar="left"] .layout{grid-template-columns:1fr;}
  .sidebar, .art-aside{position:static; flex-direction:row; flex-wrap:wrap;}
  .sidebar .swidget{flex:1; min-width:260px;}
  .art-layout{grid-template-columns:1fr;}
  .toc{display:none;}
  .featured{grid-template-columns:1fr;}
  .featured-media{min-height:300px;}
  .mustread{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  :root{--gutter:20px;}
  .masthead h1{font-size:38px;}
  .art-head h1{font-size:34px;}
  .nav-links{display:none;}
  body[data-layout="magazine"] .card{flex-direction:column;}
  body[data-layout="magazine"] .card-media{width:100%; aspect-ratio:16/10;}
  .footer-grid{grid-template-columns:1fr;}
  .search{margin-left:0; max-width:none; order:5; width:100%;}
}