/* ===========================================================
   Utex Blog — shared styles
   Same design tokens as the main site (index.html)
=========================================================== */
:root{
  --bg:#ffffff;
  --panel:#f6f6f5;
  --panel-2:#efefed;
  --text:#111110;
  --text-dim:#5a5955;
  --text-faint:#9c9a96;
  --btn-border:#e4e3e0;
  --dark:#111110;
  --dark-hover:#2a2a28;
  --radius:12px;
  --radius-sm:8px;
  --sans:'Inter', sans-serif;
  --mono:'JetBrains Mono', monospace;

  --dash-bg:#0a0a0a;
  --dash-panel:#141414;
  --dash-panel-2:#1c1c1c;
  --dash-border:#262626;
  --dash-text:#eeeeee;
  --dash-text-dim:#8a8a8a;
  --dash-text-faint:#5c5c5c;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
::selection{background:#111;color:#fff;}
img{max-width:100%;display:block;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:#ffffff;border-bottom:1px solid var(--btn-border);}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;max-width:1180px;margin:0 auto;}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-0.3px;color:var(--text);}
.logo svg{color:var(--text);flex-shrink:0;}
.nav-links{display:flex;gap:28px;font-size:13.5px;color:var(--text-dim);}
.nav-links a:hover{color:var(--text);}
.btn{font-size:13.5px;font-weight:500;padding:10px 18px;border:1px solid var(--btn-border);border-radius:var(--radius-sm);display:inline-block;}
.btn-primary{background:var(--dark);color:#fff;border-color:var(--dark);}
.btn-primary:hover{background:var(--dark-hover);border-color:var(--dark-hover);}

/* ---------- breadcrumb / back link ---------- */
.back-link{max-width:760px;margin:32px auto 0;padding:0 24px;display:flex;}
.back-link a{font-size:13px;color:var(--text-dim);display:inline-flex;align-items:center;gap:6px;}
.back-link a:hover{color:var(--text);}
.back-link svg{width:12px;height:12px;}

/* ---------- article header ---------- */
.article-head{max-width:760px;margin:0 auto;padding:28px 24px 0;}
.article-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-faint);margin-bottom:18px;}
.article-cat{color:var(--text-dim);background:var(--panel);border:1px solid var(--btn-border);padding:4px 11px;border-radius:999px;font-weight:600;font-size:11px;letter-spacing:0.3px;text-transform:uppercase;}
.article-title{font-size:clamp(28px,4.4vw,42px);font-weight:700;line-height:1.16;letter-spacing:-0.9px;margin-bottom:16px;}
.article-dek{font-size:16.5px;color:var(--text-dim);line-height:1.6;font-weight:400;margin-bottom:28px;}
.article-byline{display:flex;align-items:center;gap:10px;padding:18px 0;border-top:1px solid var(--btn-border);border-bottom:1px solid var(--btn-border);margin-bottom:0;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--text-dim);flex-shrink:0;}
.byline-name{font-size:13px;font-weight:600;color:var(--text);}
.byline-sub{font-size:12px;color:var(--text-faint);}

/* ---------- cover image ---------- */
.cover-img{max-width:900px;margin:32px auto;padding:0 24px;}
.img-placeholder{
  background:var(--panel);border:1px dashed var(--btn-border);border-radius:var(--radius);
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--text-faint);font-size:12.5px;text-align:center;
}
.img-placeholder svg{width:26px;height:26px;opacity:0.5;}
.img-placeholder .ph-label{font-family:var(--mono);font-size:10.5px;letter-spacing:0.3px;}
.img-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.img-gallery.cols-3{grid-template-columns:repeat(3,1fr);}
.img-gallery .img-placeholder{aspect-ratio:4/3;}

/* ---------- article body ---------- */
.article-body{max-width:700px;margin:0 auto;padding:0 24px 40px;}
.article-body h2{font-size:23px;font-weight:700;letter-spacing:-0.4px;margin:44px 0 14px;line-height:1.3;}
.article-body h3{font-size:18px;font-weight:700;letter-spacing:-0.2px;margin:32px 0 10px;}
.article-body p{font-size:16px;line-height:1.75;color:var(--text-dim);margin-bottom:18px;}
.article-body p strong{color:var(--text);font-weight:600;}
.article-body ul,.article-body ol{margin:0 0 20px 22px;}
.article-body li{font-size:16px;line-height:1.75;color:var(--text-dim);margin-bottom:8px;}
.article-body a.inline-link{color:var(--text);text-decoration:underline;text-decoration-color:var(--btn-border);text-underline-offset:3px;}
.content-note{
  font-family:var(--mono);font-size:11px;color:#9c6b1f;background:#fdf6e8;border:1px dashed #e5cf9a;
  border-radius:8px;padding:10px 14px;margin:18px 0;line-height:1.6;
}

/* ---------- pull quote ---------- */
.pull-quote{
  border-left:2px solid var(--text);padding:4px 0 4px 22px;margin:32px 0;
}
.pull-quote p{font-size:19px;font-weight:500;color:var(--text);line-height:1.5;font-style:normal;margin-bottom:8px;}
.pull-quote cite{font-size:12.5px;color:var(--text-faint);font-style:normal;}

/* ---------- stat callout row ---------- */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--btn-border);border:1px solid var(--btn-border);border-radius:var(--radius);overflow:hidden;margin:32px 0;}
.stat-cell{background:#fff;padding:20px 18px;text-align:center;}
.stat-num{font-size:26px;font-weight:700;letter-spacing:-0.6px;color:var(--text);}
.stat-label{font-size:11.5px;color:var(--text-faint);margin-top:6px;}

/* ---------- checklist card ---------- */
.check-card{background:var(--panel);border:1px solid var(--btn-border);border-radius:var(--radius);padding:22px 24px;margin:28px 0;}
.check-card-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;}
.check-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--btn-border);}
.check-item:first-of-type{border-top:none;padding-top:0;}
.check-tick{width:9px;height:6px;border-left:1.5px solid var(--text);border-bottom:1.5px solid var(--text);transform:rotate(-45deg);flex-shrink:0;margin-top:5px;}
.check-item p{font-size:14px;color:var(--text-dim);margin:0;line-height:1.55;}
.check-item p strong{color:var(--text);}

/* ---------- comparison table ---------- */
.data-table{width:100%;border-collapse:collapse;margin:28px 0;font-size:14px;}
.data-table th{text-align:left;font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.4px;padding:0 14px 10px;border-bottom:1px solid var(--btn-border);font-weight:600;}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--btn-border);color:var(--text-dim);}
.data-table td:first-child, .data-table th:first-child{padding-left:0;}
.data-table tr:last-child td{border-bottom:none;}
.data-table td strong{color:var(--text);font-weight:600;}

/* ---------- example / code style card ---------- */
.example-card{background:var(--dash-bg);border:1px solid var(--dash-border);border-radius:var(--radius);padding:20px 22px;margin:28px 0;font-family:var(--mono);font-size:12.5px;}
.example-card .ex-line{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--dash-border);color:var(--dash-text-dim);}
.example-card .ex-line:first-child{border-top:none;padding-top:0;}
.example-card .ex-val{color:var(--dash-text);}

/* ---------- CHART BLOCKS (Claude: swap the data-* attributes / SVG path / bar heights) ---------- */
.chart-block{margin:32px 0;}
.chart-card{background:var(--panel);border:1px solid var(--btn-border);border-radius:var(--radius);padding:22px 24px 18px;}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.chart-title{font-size:12px;font-weight:600;color:var(--text);letter-spacing:0.2px;}
.chart-range{font-size:11.5px;color:var(--text-faint);}
.chart-big{font-size:24px;font-weight:700;color:var(--text);margin:6px 0 14px;letter-spacing:-0.5px;}

/* line chart */
.line-chart-svg{width:100%;height:140px;display:block;}
.chart-grid{stroke:var(--btn-border);stroke-width:1;}
.chart-area{fill:var(--text);opacity:0.05;}
.chart-line{fill:none;stroke:var(--text);stroke-width:2;}
.chart-dot{fill:var(--text);}

/* bar chart */
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:6px;}
.bar-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.bar-chart .bar{width:100%;background:var(--panel-2);border-radius:4px 4px 0 0;}
.bar-chart .bar.hi{background:var(--text);}
.bar-chart .bar-val{font-size:10.5px;color:var(--text-faint);font-family:var(--mono);}
.bar-chart .bar-label{font-size:10.5px;color:var(--text-faint);margin-top:4px;}

/* funnel chart */
.funnel-chart{display:flex;flex-direction:column;gap:6px;}
.funnel-row{display:flex;align-items:center;gap:12px;}
.funnel-bar-track{flex:1;background:var(--panel-2);border-radius:6px;overflow:hidden;height:26px;}
.funnel-bar-fill{height:100%;background:var(--text);border-radius:6px;display:flex;align-items:center;padding-left:10px;font-size:11px;color:#fff;font-family:var(--mono);}
.funnel-label{width:110px;font-size:12px;color:var(--text-dim);flex-shrink:0;}

/* chart data table (below chart, for verifying the numbers Claude fills in) */
.chart-data-note{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);margin-top:10px;}

/* ---------- footer CTA ---------- */
.article-cta{max-width:700px;margin:52px auto 0;padding:0 24px;}
.cta-box{background:var(--panel);border:1px solid var(--btn-border);border-radius:var(--radius);padding:36px 32px;text-align:center;}
.cta-box h3{font-size:21px;font-weight:700;letter-spacing:-0.4px;margin-bottom:10px;}
.cta-box p{font-size:14px;color:var(--text-dim);margin-bottom:22px;}

/* ---------- related posts ---------- */
.related{max-width:900px;margin:64px auto 0;padding:0 24px;}
.related h3{font-size:13px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-faint);margin-bottom:18px;font-weight:600;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.related-card{border:1px solid var(--btn-border);border-radius:var(--radius);padding:18px;}
.related-card .rc-cat{font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:8px;}
.related-card h4{font-size:14px;font-weight:600;line-height:1.4;}

/* ---------- footer ---------- */
footer{padding:48px 24px 30px;border-top:1px solid var(--btn-border);margin-top:70px;}
.foot-inner{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--text-faint);}
.foot-inner a{color:var(--text-dim);}
.foot-inner a:hover{color:var(--text);}

/* ---------- responsive ---------- */
@media(max-width:720px){
  nav{padding:16px 20px;}
  .nav-links{display:none;}
  .img-gallery, .img-gallery.cols-3{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .article-title{letter-spacing:-0.5px;}
}