/* ===================================================================
   HIIPE Blog — editorial article system
   Loaded on /blog/ pages only. Sits on top of site.css + site-dark.css.
   =================================================================== */

html{ scroll-behavior:smooth; }

/* ---------- article shell: reading column + sticky TOC ---------- */
.article{ padding:40px 0 10px; }
.article-layout{ max-width:1010px; margin:0 auto; display:grid;
  grid-template-columns:minmax(0,690px) 200px; justify-content:center; gap:56px; align-items:start; }
.article-main{ min-width:0; }

/* ---------- editorial header ---------- */
.post-head{ margin-bottom:30px; }
.kicker{ display:inline-flex; align-items:center; font-family:var(--body); font-weight:700;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow-deep); margin-bottom:18px; }
.post-head h1{ font-size:clamp(36px,5.2vw,60px); line-height:.98; margin:0 0 16px; }
.post-dek{ font-family:var(--body); font-size:clamp(18px,2.1vw,22px); line-height:1.45; color:var(--text-dim);
  max-width:34ch; margin:0 0 24px; }
.byline{ display:flex; align-items:center; gap:12px; }
.byline .avatar{ width:38px; height:38px; border-radius:50%; background:var(--yellow); display:grid; place-items:center; flex:0 0 auto; }
.byline .avatar img{ height:22px; width:auto; }
.byline .who{ font-family:var(--body); }
.byline .name{ font-size:14px; font-weight:600; color:var(--text); }
.byline .meta{ font-size:12.5px; color:var(--text-faint); }
.byline .meta span+span::before{ content:"·"; margin:0 7px; color:var(--line-2); }

/* ---------- cover figure ---------- */
.cover{ margin:0 0 40px; }
.cover img{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--line); }
.cover figcaption{ font-size:12.5px; color:var(--text-faint); margin-top:10px; text-align:center; }

/* ---------- table of contents (sticky) ---------- */
.toc{ position:sticky; top:calc(var(--nav-h) + 26px); font-family:var(--body); }
.toc .toc-label{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:14px; }
.toc ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.toc li{ margin:0; }
.toc a{ display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent;
  font-size:13.5px; line-height:1.35; color:var(--text-faint); text-decoration:none; transition:color .15s, border-color .15s; }
.toc a:hover{ color:var(--text-dim); }
.toc a.active{ color:var(--text); border-left-color:var(--yellow); }

/* ---------- prose ---------- */
.article-body{ font-family:var(--body); font-size:18px; line-height:1.75; color:var(--text-dim); }
.article-body > p{ margin:0 0 22px; }
.article-body strong{ color:var(--text); font-weight:600; }
.article-body em{ color:var(--text); font-style:italic; }
.article-lead{ font-family:var(--body); font-size:21px; line-height:1.5; color:var(--text); margin:0 0 26px; }
/* drop cap on the lead — an editorial touch */
.article-lead::first-letter{ font-family:var(--display); font-weight:700; font-size:3.1em; line-height:.82;
  float:left; margin:6px 12px 0 0; color:var(--yellow); }

.article-body h2{ font-family:var(--display); font-weight:700; color:var(--text);
  font-size:clamp(26px,3.4vw,34px); line-height:1.06; letter-spacing:.005em; margin:46px 0 8px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.article-body h3{ font-family:var(--body); font-weight:600; color:var(--text); font-size:19px; margin:26px 0 6px; }
.article-body .ans{ color:var(--text); font-weight:600; font-size:18px; margin:0 0 14px; }
.article-body a{ color:var(--yellow); text-decoration:underline; text-underline-offset:2px; }
.article-body a:hover{ color:var(--yellow-deep); }
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:22px; }
.article-body li{ margin:0 0 9px; }

/* ---------- stat callout ---------- */
.stat{ display:flex; gap:18px; align-items:center; background:var(--paper-2);
  border:1px solid var(--line); border-left:3px solid var(--yellow); border-radius:14px; padding:20px 22px; margin:30px 0; }
.stat .num{ font-family:var(--display); font-weight:700; font-size:44px; line-height:.95; color:var(--yellow); flex:0 0 auto; }
.stat .txt{ font-size:14.5px; line-height:1.5; color:var(--text-dim); }
.stat .txt a{ color:var(--text-faint); text-decoration:underline; }

/* ---------- quotable POV pull-quote ---------- */
.pov{ border-left:3px solid var(--yellow); padding:6px 0 6px 24px; margin:38px 0;
  font-family:var(--display); font-weight:700; font-size:clamp(24px,3.4vw,34px); line-height:1.12; color:var(--text); }

/* ---------- inline flow diagram ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:30px 0; }
.flow-step{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:18px 16px; position:relative; }
.flow-step .n{ font-family:var(--display); font-weight:700; color:var(--yellow); font-size:26px; line-height:1; }
.flow-step .t{ font-family:var(--body); font-weight:600; color:var(--text); font-size:15px; margin:8px 0 4px; }
.flow-step .d{ font-size:12.5px; color:var(--text-faint); line-height:1.4; }

/* ---------- comparison table ---------- */
.cmp-wrap{ overflow-x:auto; }
table.cmp{ width:100%; border-collapse:collapse; margin:26px 0; font-size:14.5px; }
table.cmp th, table.cmp td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.cmp thead th{ color:var(--text); font-weight:600; }
table.cmp tbody th{ color:var(--text); font-weight:600; white-space:nowrap; }
table.cmp td{ color:var(--text-dim); }

/* ---------- FAQ ---------- */
.article-faq{ margin-top:48px; }
.article-faq h2{ font-family:var(--display); font-weight:700; color:var(--text); font-size:clamp(26px,3.4vw,34px); margin:0 0 18px; }

/* ---------- author bio ---------- */
.author-bio{ display:flex; gap:16px; align-items:flex-start; margin:44px 0 0; padding:24px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; }
.author-bio .avatar{ width:48px; height:48px; border-radius:50%; background:var(--yellow); display:grid; place-items:center; flex:0 0 auto; }
.author-bio .avatar img{ height:28px; }
.author-bio .name{ font-weight:600; color:var(--text); font-size:15px; margin-bottom:4px; }
.author-bio .txt{ font-size:14px; color:var(--text-dim); line-height:1.55; }
.author-bio .txt a{ color:var(--yellow); text-decoration:underline; }

/* ---------- keep reading ---------- */
.keep-reading{ margin-top:56px; }
.keep-reading .kr-label{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-bottom:16px; }
.kr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kr-card{ display:block; text-decoration:none; background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; padding:20px; transition:transform .2s var(--ease), border-color .2s; }
.kr-card:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.kr-card .tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-deep); font-weight:700; }
.kr-card .h{ font-family:var(--body); font-weight:600; color:var(--text); font-size:17px; line-height:1.25; margin:9px 0 0; }

/* ---------- blog index ---------- */
.blog-index{ padding:20px 0; }

/* meta row: date · read time · Read arrow */
.pc-meta{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:13px; color:var(--text-faint); }
.pc-meta .dot{ color:var(--line-2); }
.pc-meta .pc-go{ margin-left:auto; color:var(--yellow); font-weight:600; }

/* featured post — magazine card, image + text */
.post-feature{ display:grid; grid-template-columns:1.05fr .95fr; background:var(--paper-2);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none;
  transition:border-color .2s, transform .2s var(--ease); }
.post-feature:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.pf-media{ overflow:hidden; min-height:300px; }
.pf-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.post-feature:hover .pf-media img{ transform:scale(1.05); }
.pf-body{ padding:36px 40px; display:flex; flex-direction:column; justify-content:center; }
.pf-body .tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-deep); font-weight:700; }
.pf-body h3{ font-family:var(--display); font-weight:700; color:var(--text); font-size:clamp(27px,3vw,36px); line-height:1.03; margin:13px 0 13px; }
.pf-body p{ font-size:15.5px; line-height:1.55; color:var(--text-dim); margin:0; }

/* grid cards — for when there are more posts */
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:22px; }
.post-card{ display:flex; flex-direction:column; text-decoration:none; background:var(--paper-2);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .2s var(--ease), border-color .2s; }
.post-card:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.pc-media{ aspect-ratio:16/9; overflow:hidden; }
.pc-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); }
.post-card:hover .pc-media img{ transform:scale(1.05); }
.pc-body{ padding:22px 24px 24px; }
.pc-body .tag{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow-deep); font-weight:700; }
.pc-body h3{ font-family:var(--body); font-weight:600; color:var(--text); font-size:19px; line-height:1.22; margin:10px 0 8px; }
.pc-body p{ font-size:14px; line-height:1.5; color:var(--text-dim); margin:0; }

/* ---------- responsive ---------- */
@media (max-width:920px){
  .article-layout{ grid-template-columns:minmax(0,720px); }
  .toc{ display:none; }
}
@media (max-width:640px){
  .article-body{ font-size:17px; }
  .article-lead{ font-size:19px; }
  .flow{ grid-template-columns:1fr 1fr; }
  .stat{ flex-direction:column; align-items:flex-start; gap:10px; }
  .stat .num{ font-size:40px; }
  .kr-grid, .post-grid{ grid-template-columns:1fr; }
  .post-feature{ grid-template-columns:1fr; }
  .pf-media{ min-height:210px; }
  .pf-body{ padding:26px 24px; }
  .post-dek{ max-width:none; }
}