/* =========================================================
   Site styles — Momentum design system
   Consumes the shared brand tokens (public/brand.css, loaded
   first). No brand token is defined here (ADR-0001).
   Every surface here — homepage, global chrome, and the blog
   listing + article pages — is fully migrated to Momentum and
   references no retired engineering-era bridge token.
   ========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--surface);
  color:var(--on-surface);
  font-family:var(--sans);
  font-size:var(--text-body-md);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--margin-mobile)}
@media(min-width:768px){.wrap{padding:0 var(--gutter)}}

.accent{color:var(--secondary)}
.sig{color:var(--primary)}

/* ---- Material Symbols base ---- */
.material-symbols-outlined{
  font-family:"Material Symbols Outlined";
  font-weight:normal;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;white-space:nowrap;
  display:inline-block;direction:ltr;vertical-align:middle;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
}

/* ---- label-caps eyebrow / section index ---- */
.sec-index{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
}
.sec-index b{
  font-size:var(--text-label);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--primary);
}
.sec-index .rule{flex:1;height:1px;background:var(--border-subtle)}

/* =========================================================
   NAVIGATION — fixed-feel blurred top bar (~80px)
   ========================================================= */
.statusbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
.statusbar .wrap{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px;letter-spacing:-.01em;text-decoration:none;color:var(--on-surface);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.brand:link,.brand:visited,.brand:hover,.brand:active,.brand:focus{text-decoration:none;color:var(--on-surface)}
.brand .glyph{
  width:36px;height:36px;flex:none;border-radius:var(--radius-md);
  display:block;object-fit:contain;
}

.topnav{display:none;align-items:center;gap:32px}
@media(min-width:920px){.topnav{display:flex}}
.topnav a{
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--on-surface-variant);text-decoration:none;transition:color .18s;position:relative;padding:4px 0;
}
.topnav a:hover{color:var(--on-surface)}
.topnav a[aria-current="page"]{color:var(--on-surface);font-weight:700}
.topnav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;border-radius:var(--radius-full);background:var(--primary);transition:width .2s}
.topnav a:hover::after,.topnav a[aria-current="page"]::after{width:100%}

.nav-cta{
  font-size:14px;font-weight:700;
  background:var(--primary);color:var(--on-primary);text-decoration:none;
  padding:11px 18px;border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--primary);transition:background .18s,border-color .18s,transform .18s;
}
.nav-cta:hover{background:var(--primary-strong);border-color:var(--primary-strong)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-linkedin{
  font-size:14px;font-weight:600;
  color:var(--on-surface-variant);text-decoration:none;
  padding:10px 14px;border-radius:var(--radius-md);display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border-subtle);transition:color .18s,border-color .18s;
  white-space:nowrap;
}
.nav-linkedin:hover{color:var(--on-surface);border-color:var(--outline)}
@media(max-width:919px){.nav-linkedin span{display:none}}

/* --- hamburger --- */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:space-between;
  width:28px;height:20px;padding:0;background:none;border:none;
  cursor:pointer;-webkit-tap-highlight-color:transparent;flex:none;
}
.nav-toggle span{
  display:block;width:100%;height:2px;border-radius:var(--radius-full);background:var(--on-surface);
  transition:transform .22s,opacity .15s;transform-origin:center;
}
@media(min-width:920px){.nav-toggle{display:none}}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* --- mobile nav panel --- */
@media(max-width:919px){
  .statusbar.nav-open{border-bottom:none}
  .statusbar.nav-open .topnav{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:80px;left:0;right:0;
    background:color-mix(in srgb,var(--surface) 97%,transparent);
    backdrop-filter:saturate(160%) blur(12px);
    -webkit-backdrop-filter:saturate(160%) blur(12px);
    border-bottom:1px solid var(--border-subtle);
    padding:8px 0 16px;
    z-index:39;
  }
  .statusbar.nav-open .topnav a{
    width:100%;padding:14px var(--margin-mobile);font-size:16px;
  }
  .statusbar.nav-open .topnav a::after{display:none}
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  font-family:var(--sans);font-weight:700;font-size:15px;
  background:var(--btn-bg);color:var(--btn-on);
  padding:14px 24px;text-decoration:none;border:1px solid var(--btn-border);border-radius:var(--radius-md);
  display:inline-flex;align-items:center;gap:10px;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  cursor:pointer;
}
.cta-btn{
  font-family:var(--sans);font-weight:700;font-size:15px;
  background:var(--primary);color:var(--secondary);
  padding:14px 24px;text-decoration:none;border:1px solid var(--btn-border);border-radius:var(--radius-md);
  display:inline-flex;align-items:center;gap:10px;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.btn .arr{font-size:20px}
.btn-ghost{
  font-family:var(--sans);font-weight:600;font-size:15px;
  background:var(--btn-ghost-bg);color:var(--btn-ghost-on);
  padding:14px 24px;text-decoration:none;border:1px solid var(--btn-ghost-border);border-radius:var(--radius-md);
  display:inline-flex;align-items:center;gap:8px;transition:color .18s,border-color .18s,transform .18s;
}
.btn-ghost:hover{color:var(--btn-ghost-on-hover);border-color:var(--btn-ghost-border-hover);transform:translateY(-2px)}

/* =========================================================
   HERO — soft blue-to-white gradient + coral blob
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--gradient-end) 0%,var(--surface) 72%);
}
.hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:560px;height:560px;border-radius:var(--radius-full);
  right:-140px;top:-180px;
  background:radial-gradient(circle at center,rgba(246, 106, 71, 0.305),rgba(246,105,71,0) 70%);
}
.hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:600px;height:600px;border-radius:var(--radius-full);
  left:-200px;top:-160px;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--tertiary-container) 60%,var(--tertiary)),transparent 70%);
}
/* second, softer blue glow — lower in the hero to spread the cool wash */
.hero-glow{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:480px;height:480px;border-radius:var(--radius-full);
  left:6%;bottom:-220px;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--tertiary-container) 80%,transparent),transparent 70%);
}
.hero .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:84px}
@media(min-width:768px){.hero .wrap{padding-top:108px;padding-bottom:112px}}

.hero-inner{display:block}
.hero h1{
  font-weight:800;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(var(--text-display-mobile),7vw,var(--text-display));
  max-width:18ch;color:var(--on-surface);
}
.hero .sub{
  margin-top:24px;font-size:clamp(17px,2.3vw,var(--text-body-lg));line-height:1.6;
  color:var(--on-surface-variant);max-width:60ch;
}
.hero .sub b{color:var(--on-surface);font-weight:600}
.cta-row{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* stat row beneath hero */
.hero-foot{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--stack-md);
  max-width:var(--container-max);margin:0 auto;padding:0 var(--margin-mobile) 56px;
}
@media(min-width:768px){.hero-foot{grid-template-columns:repeat(4,1fr);gap:var(--stack-lg);padding:0 var(--gutter) 72px}}
.hf-cell{
  background:var(--surface-container);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:20px 22px;
}
.hf-cell .k{font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant)}
.hf-cell .v{font-size:17px;font-weight:700;margin-top:6px;letter-spacing:-.01em;color:var(--on-surface)}

/* =========================================================
   SECTION shell — alternating warm backgrounds
   ========================================================= */
section{scroll-margin-top:96px}
.block{padding:var(--section-gap-md) 0;background:var(--surface)}
@media(min-width:768px){.block{padding:var(--section-gap-lg) 0}}
main > section:nth-of-type(even){background:var(--surface-muted)}

.head-2{
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(var(--text-headline-md),4.6vw,var(--text-headline-lg));
  max-width:20ch;color:var(--on-surface);
}
.head-2 .sig{color:var(--primary)}
.lede{margin-top:18px;color:var(--on-surface-variant);font-size:clamp(15px,1.9vw,var(--text-body-lg));max-width:56ch}

/* =========================================================
   UNTERSCHIED (cards)
   ========================================================= */
.why-head{margin-top:8px;text-align:center;font-weight:800;
  letter-spacing:-.02em;line-height:1.1;font-size:clamp(28px,4.4vw,var(--text-headline-lg));color:var(--on-surface)}
.why-rule{display:block;width:56px;height:4px;background:var(--primary);margin:18px auto 0;border-radius:var(--radius-full)}

.why-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:var(--stack-lg)}
@media(min-width:620px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.why-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.why-card{
  background:var(--surface-container);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;
  box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s,border-color .2s;
}
.why-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover);border-color:var(--primary-container)}
.wc-badge{width:72px;height:72px;border-radius:var(--radius-full);background:var(--primary-container);
  display:grid;place-items:center;color:var(--primary);flex:none}
.wc-badge .material-symbols-outlined{font-size:36px}
.wc-title{margin-top:22px;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(18px,2.1vw,var(--text-headline-sm));line-height:1.2;color:var(--on-surface)}
.wc-rule{display:block;width:32px;height:3px;background:var(--secondary);margin:14px 0 0;border-radius:var(--radius-full)}
.why-card p{margin-top:18px;color:var(--on-surface-variant);font-size:15px;line-height:1.6;max-width:30ch;text-wrap:pretty}

/* =========================================================
   LEISTUNGEN
   ========================================================= */
.serv{margin-top:48px;display:grid;grid-template-columns:1fr;gap:var(--stack-lg)}
@media(min-width:860px){.serv{grid-template-columns:repeat(3,1fr)}}
.serv-cell{
  background:var(--surface-container);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:32px 28px;display:grid;gap:12px;align-content:start;
  box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.serv-cell:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.serv-cell .num{font-size:var(--text-label);font-weight:700;letter-spacing:.05em;color:var(--primary)}
.serv-cell h3{font-weight:700;font-size:20px;letter-spacing:-.01em;line-height:1.25;color:var(--on-surface)}
.serv-cell p{color:var(--on-surface-variant);font-size:15px}

/* =========================================================
   PROJEKTE
   ========================================================= */
.proj-note{margin-top:14px;font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant)}
.cases{margin-top:44px;display:grid;grid-template-columns:1fr;gap:var(--stack-lg)}
@media(min-width:820px){.cases{grid-template-columns:1fr 1fr}}

.case{
  position:relative;background:var(--surface-container);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:18px;
  box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s;
}
.case:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.case .c-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.case .c-sector{
  font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--secondary);background:var(--secondary-container);
  padding:5px 12px;border-radius:var(--radius-full);
}
.case .c-meta{font-size:12px;font-weight:500;color:var(--on-surface-variant);text-align:right;white-space:nowrap;line-height:1.4}
.case h3{font-weight:700;font-size:clamp(18px,2.2vw,22px);letter-spacing:-.012em;line-height:1.25;color:var(--on-surface)}
.case .steps{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--border-subtle)}
.case .step{padding:14px 0;border-bottom:1px solid var(--border-subtle);display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:baseline}
.case .step:last-child{border-bottom:none;padding-bottom:0}
.case .step .st-k{font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant);padding-top:2px}
.case .step.result .st-k{color:var(--secondary)}
.case .step .st-v{font-size:15px;line-height:1.55;color:var(--on-surface-variant)}
.case .step.result .st-v{font-weight:600;color:var(--on-surface)}

/* =========================================================
   ÜBER MICH
   ========================================================= */
.about-grid{margin-top:48px;display:grid;grid-template-columns:1fr;gap:38px}
@media(min-width:900px){.about-grid{grid-template-columns:1.8fr 1fr;gap:56px}}
.about-body p{font-size:clamp(16px,2vw,var(--text-body-lg));line-height:1.65;color:var(--on-surface)}
.about-body p + p{margin-top:18px;color:var(--on-surface-variant)}
.about-body p b{font-weight:600;color:var(--on-surface)}

.about-body{display:flex;flex-direction:column}
.about-side{display:flex;flex-direction:column;align-self:start}
.about-body .creds{margin-top:32px}
.about-portrait-wrap{position:relative;margin:0}
.about-portrait{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);display:block}
.about-portrait-wrap figcaption{
  margin-top:14px;font-size:12px;color:var(--on-surface-variant);line-height:1.6;
}
.about-portrait-wrap figcaption a{color:var(--primary);text-decoration:none;transition:color .2s}
.about-portrait-wrap figcaption a:hover{color:var(--primary-strong)}

.creds{background:var(--surface-container);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:var(--shadow-card)}
.creds .ct{font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);margin-bottom:18px}
.creds ul{list-style:none;display:grid;gap:0}
.creds li{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--border-subtle);font-size:15px;font-weight:600;color:var(--on-surface)}
.creds li:first-of-type{border-top:none;padding-top:0}
.creds li .mk{font-size:13px;font-weight:700;color:var(--secondary)}

/* =========================================================
   KONTAKT
   ========================================================= */
.contact{position:relative;overflow:hidden}
.contact .wrap{position:relative;z-index:2}
.contact-card{
  margin-top:46px;background:var(--tertiary-strong);border:1px solid transparent;border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);padding:clamp(32px,5vw,56px);
  display:grid;grid-template-columns:1fr;gap:30px;
}
@media(min-width:820px){.contact-card{grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}}
.contact-card .c-cta h2{font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(28px,4vw,var(--text-headline-lg));color:var(--on-tertiary)}
.contact-card .c-cta p{color:color-mix(in srgb,var(--on-tertiary) 75%,transparent);margin-top:14px;font-size:var(--text-body-md);max-width:42ch}
.contact-side{display:grid;gap:24px}
.contact-side .cta-row{margin-top:0}
.contact-lines{display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--on-tertiary) 16%,transparent)}
.contact-lines a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--on-tertiary) 16%,transparent);text-decoration:none;color:var(--on-tertiary);
  font-size:15px;transition:color .18s;
}
.contact-lines a:last-child{border-bottom:none}
.contact-lines a:hover{color:var(--tertiary-container)}
.contact-lines .k{font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--on-tertiary) 60%,transparent)}
.contact-lines .v{font-weight:600;display:flex;align-items:center;gap:10px}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--border-subtle);padding:36px 0 60px;background:var(--surface)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between}
.foot .legal{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.foot a{font-size:14px;font-weight:500;color:var(--on-surface-variant);text-decoration:none}
.foot a:hover{color:var(--primary)}
.foot .copy{font-size:13px;color:var(--on-surface-variant)}

/* =========================================================
   reveal on scroll
   ========================================================= */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .why-card,.serv-cell,.case,.btn,.btn-ghost{transition:none}
  .why-card:hover,.serv-cell:hover,.case:hover{transform:none}
}

/* =========================================================
   BLOG — listing page (Momentum)
   ========================================================= */
/* category tag — Deep Mint chip, shared by listing cards and article hero */
.c-tag{
  display:inline-block;
  font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--secondary);background:var(--secondary-container);
  padding:5px 12px;border-radius:var(--radius-full);
}
.blog-grid{
  display:grid;grid-template-columns:1fr;gap:var(--stack-lg);margin-top:44px;
}
@media(min-width:620px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.blog-grid{grid-template-columns:repeat(3,1fr)}}

.blog-card{
  background:var(--surface-container);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:0;display:flex;flex-direction:column;gap:0;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow-card);
  transition:border-color .2s,transform .2s,box-shadow .2s;
  overflow:hidden;
}
.blog-card-img{
  width:100%;aspect-ratio:16/9;overflow:hidden;flex-shrink:0;position:relative;
}
.blog-card-img .hero-credit{font-size:8px;right:8px;bottom:8px;padding:3px 5px}
.blog-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s;
}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-card-body{
  padding:20px 24px 20px;display:flex;flex-direction:column;gap:12px;flex:1;
}
.blog-card:hover{
  border-color:var(--primary-container);transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
}
.blog-card .c-tag{align-self:flex-start}
.blog-card h2{
  font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--on-surface);margin:0;
}
.blog-card p{color:var(--on-surface-variant);font-size:14px;line-height:1.55;margin:0;flex:1}
.blog-card .byline{
  font-size:12px;font-weight:500;letter-spacing:.01em;
  color:var(--on-surface-variant);margin-top:auto;padding-top:14px;
  border-top:1px solid var(--border-subtle);
}

/* =========================================================
   BLOG — article pages (Momentum)
   ========================================================= */
.article-hero{
  padding:80px 0 0;background:var(--surface-muted);
  border-bottom:1px solid var(--border-subtle);
  position:relative;overflow:hidden;
}
.article-hero .wrap{position:relative;z-index:1}
.article-hero-img{width:100%;line-height:0;position:relative}
.article-hero-img img{width:100%;display:block;object-fit:cover;aspect-ratio:16/7}
.hero-credit{
  position:absolute;right:10px;bottom:10px;line-height:1;
  font-size:10.5px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.92);background:rgba(0,0,0,.34);
  padding:4px 7px;border-radius:var(--radius-sm);pointer-events:none;
}
@media(min-width:768px){
  .article-hero-img{
    position:absolute;inset:0 0 0 auto;width:55%;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,black 38%);
    mask-image:linear-gradient(to right,transparent 0%,black 38%);
  }
  .article-hero-img img{width:100%;height:100%;aspect-ratio:auto}
}
.article-hero .c-tag{margin-bottom:18px}
.article-hero h1{
  font-size:clamp(26px,4.5vw,46px);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--on-surface);max-width:600px;
}
.article-hero .byline{
  font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--on-surface-variant);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
  margin-top:22px;padding:18px 0;border-top:1px solid var(--border-subtle);
}
.article-hero .byline a{color:var(--primary);text-decoration:none}
.article-hero .byline a:hover{color:var(--primary-strong)}

.article-body{padding:56px 0 80px}
.article-wrap{max-width:760px;margin:0 auto;padding:0 22px}
@media(min-width:768px){.article-wrap{padding:0 40px}}

.tldr-box{
  background:var(--primary-container);border-left:4px solid var(--primary);
  border-radius:var(--radius-md);
  padding:22px 26px;margin:32px 0 36px;
}
.tldr-box strong{
  font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--primary-strong);display:block;margin-bottom:14px;
}
.tldr-box ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px}
.tldr-box li{color:var(--on-surface);line-height:1.5;font-size:15px}

.article-body h2{
  font-size:clamp(18px,2.6vw,24px);font-weight:700;line-height:1.25;
  color:var(--on-surface);margin:44px 0 14px;letter-spacing:-.01em;
}
.article-body h3{
  font-size:clamp(16px,2vw,19px);font-weight:700;line-height:1.3;
  color:var(--on-surface);margin:32px 0 10px;
}
.article-body p{color:var(--on-surface);font-size:17px;line-height:1.62;margin:0 0 18px}
.article-body ul,.article-body ol{
  padding-left:22px;display:flex;flex-direction:column;gap:6px;margin-bottom:18px;
}
.article-body li{color:var(--on-surface);font-size:16px;line-height:1.58}
.article-body strong{font-weight:700}

.art-table,
.article-body table{width:100%;border-collapse:collapse;margin:28px 0 36px;font-size:14.5px}
.art-table th,
.article-body th{
  font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-surface-variant);text-align:left;padding:10px 14px;
  border-bottom:2px solid var(--border-subtle);background:var(--surface-muted);
}
.art-table td,
.article-body td{
  padding:10px 14px;border-bottom:1px solid var(--border-subtle);
  color:var(--on-surface);vertical-align:top;line-height:1.5;
}
.art-table tr:hover td,
.article-body tr:hover td{background:var(--surface-muted)}
.art-table .criterion{font-weight:600}

.art-faq{margin-top:52px;padding-top:36px;border-top:1px solid var(--border-subtle)}
.art-faq > h2{
  font-size:clamp(18px,2.6vw,24px);font-weight:700;color:var(--on-surface);margin:0 0 28px;
}
.art-faq h3{
  font-size:clamp(15px,1.8vw,17px);font-weight:700;color:var(--on-surface);margin:28px 0 8px;
}
.art-faq h3:first-of-type{margin-top:0}
.art-faq p{color:var(--on-surface-variant);font-size:16px;line-height:1.6;margin:0 0 4px}

.author-bio{
  display:flex;gap:18px;align-items:flex-start;
  margin-top:52px;padding:24px;background:var(--surface-container);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.author-bio img{
  width:56px;height:56px;border-radius:var(--radius-full);object-fit:cover;flex-shrink:0;
}
.author-bio .bio-text{font-size:14px;line-height:1.6;color:var(--on-surface-variant)}
.author-bio .bio-text strong{color:var(--on-surface);font-weight:700;display:block;margin-bottom:4px}
.author-bio .bio-text a{color:var(--primary);text-decoration:none}
.author-bio .bio-text a:hover{color:var(--primary-strong)}

.related-grid{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-top:52px;padding-top:32px;border-top:1px solid var(--border-subtle);
}
@media(min-width:620px){.related-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.related-grid-label{
  font-size:var(--text-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-surface-variant);grid-column:1/-1;margin-bottom:4px;
}
.related-card{
  background:var(--surface-container);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:18px 20px;text-decoration:none;color:var(--on-surface);
  font-size:14px;font-weight:600;line-height:1.35;
  transition:border-color .18s,color .18s,transform .2s,box-shadow .2s;
}
.related-card:hover{border-color:var(--primary-container);color:var(--primary-strong);transform:translateY(-4px);box-shadow:var(--shadow-hover)}

.art-cta{
  margin-top:44px;padding:24px 28px;background:var(--primary-container);
  border:1px solid var(--primary-container);border-left:4px solid var(--primary);
  border-radius:var(--radius-md);
  font-size:16px;line-height:1.55;color:var(--on-surface-variant);
}
.art-cta a{color:var(--primary-strong);font-weight:600;text-decoration:none}
.art-cta a:hover{color:var(--on-surface)}