/* ============================================================
   GROUNDLOCK — Blog article + visual library
   Builds on styles.css + site.css tokens.
   ============================================================ */

/* reading progress bar */
.readbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:70;transition:width .1s linear;}

/* article hero */
.post-hero{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(36px,5vw,60px);}
.post-hero .hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(236,230,217,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(236,230,217,.05) 1px,transparent 1px);background-size:clamp(28px,4vw,46px) clamp(28px,4vw,46px);pointer-events:none;mask-image:radial-gradient(120% 90% at 25% 0%,#000,transparent 75%);}
.post-hero h1{color:var(--paper);margin-top:16px;max-width:20ch;font-size:clamp(32px,5vw,60px);}
.post-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-ink);}
.cat-badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:2px;border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);}

/* article body */
.article{display:grid;gap:clamp(28px,4vw,56px);align-items:start;}
@media(min-width:1000px){.article{grid-template-columns:minmax(0,1fr) 300px;}}
.article .body{max-width:74ch;min-width:0;}
.article .body h2{margin-top:clamp(34px,4vw,52px);font-size:clamp(24px,3vw,34px);}
.article .body h3{margin-top:28px;font-size:clamp(18px,2vw,22px);}
.article .body p{margin-top:16px;font-size:clamp(16px,1.7vw,18px);line-height:1.72;color:#33302A;}
.article .body p:first-of-type{font-size:clamp(18px,2vw,21px);line-height:1.6;color:#2A2823;}
.article .body a{color:var(--accent-deep);text-decoration:underline;text-decoration-color:rgba(194,60,18,.35);text-underline-offset:3px;}
.article .body a:hover{text-decoration-color:var(--accent);}
.article .body ul,.article .body ol{margin:18px 0 0;padding-left:0;list-style:none;display:grid;gap:11px;}
.article .body ul li{position:relative;padding-left:28px;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:#33302A;}
.article .body ul li::before{content:"";position:absolute;left:3px;top:9px;width:9px;height:9px;border:2px solid var(--accent);border-radius:1px;}
.article .body ol{counter-reset:n;}
.article .body ol li{position:relative;padding-left:38px;counter-increment:n;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:#33302A;}
.article .body ol li::before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center;}
.article .body strong{font-weight:600;color:var(--ink);}
.article .body blockquote{margin:24px 0;padding:18px 22px;border-left:3px solid var(--accent);background:var(--paper-card);font-family:var(--disp);font-weight:600;font-stretch:106%;font-size:clamp(17px,2vw,21px);line-height:1.4;color:#2A2823;border-radius:0 3px 3px 0;}
.keytake{background:var(--ink);color:var(--paper);border-radius:4px;padding:clamp(18px,2.4vw,26px);margin:26px 0;}
.keytake .mono{color:var(--accent);}
.keytake ul li{color:rgba(236,230,217,.86);}
.keytake ul li::before{border-color:var(--accent);}

/* sidebar */
.post-aside{position:sticky;top:84px;display:grid;gap:var(--gutter);}
.toc a{display:block;font-size:13.5px;color:var(--muted);text-decoration:none;padding:6px 0 6px 12px;border-left:2px solid var(--line);line-height:1.4;}
.toc a:hover{color:var(--accent-deep);border-color:var(--accent);}

/* ===== FIGURE / VISUAL FRAME ===== */
figure.viz{margin:30px 0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--paper-card);}
figure.viz.dark{background:#0F1318;border-color:var(--line-paper);}
.viz-body{padding:clamp(14px,2vw,22px);}
figure.viz figcaption{display:flex;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
figure.viz.dark figcaption{border-color:var(--line-paper);color:var(--muted-ink);}
.viz svg{display:block;width:100%;height:auto;}
.viz .vlabel{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}

/* trigger flag */
.viz{opacity:1;}
.viz .anim{opacity:0;}
.viz.in .anim{opacity:1;}

/* --- soil cross-section --- */
.soil-swell{transform-box:fill-box;transform-origin:center;}
.viz.in .soil-arrow-up{animation:soilUp 2.6s ease-in-out infinite;}
.viz.in .soil-arrow-dn{animation:soilDn 2.6s ease-in-out infinite;}
@keyframes soilUp{0%,100%{transform:translateY(3px);opacity:.4}50%{transform:translateY(-3px);opacity:1}}
@keyframes soilDn{0%,100%{transform:translateY(-3px);opacity:.4}50%{transform:translateY(3px);opacity:1}}
.viz.in .slab-tilt{animation:slabRock 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%;}
@keyframes slabRock{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}

/* --- pier drive --- */
.viz .pier-seg2{opacity:0;transform:translateY(-30px);transform-box:fill-box;}
.viz.in .pier-seg2{animation:pierIn .5s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes pierIn{to{opacity:1;transform:translateY(0)}}
.viz .lift2{opacity:0;}
.viz.in .lift2{animation:liftIn .6s ease forwards 1.6s;}
@keyframes liftIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* --- bars / charts --- */
.bar-track{fill:var(--paper-2);}
.bar-fill{transform:scaleX(0);transform-box:fill-box;transform-origin:left;transition:transform 1s cubic-bezier(.2,.8,.2,1);}
.viz.in .bar-fill{transform:scaleX(1);}
.line-path{stroke-dasharray:1000;stroke-dashoffset:1000;}
.viz.in .line-path{animation:draw 1.8s ease forwards;}
@keyframes draw{to{stroke-dashoffset:0}}
.dot-pop{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;}
.viz.in .dot-pop{animation:pop .4s cubic-bezier(.3,1.4,.4,1) forwards;}
@keyframes pop{to{opacity:1;transform:scale(1)}}

/* --- gauge / severity bar --- */
.sevbar{display:flex;border-radius:3px;overflow:hidden;height:34px;box-shadow:inset 0 0 0 1px var(--line);}
.sevbar span{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.sev-needle{height:14px;width:14px;margin-top:6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.4);position:relative;transition:margin-left 1.2s cubic-bezier(.2,.8,.2,1);}

/* --- cycle (drought/rain) --- */
.viz.in .cyc-slab{animation:cycMove 6s ease-in-out infinite;transform-box:fill-box;}
@keyframes cycMove{0%,100%{transform:translateY(0)}25%{transform:translateY(-8px)}75%{transform:translateY(8px)}}
.viz.in .cyc-sun{animation:cycFade 6s ease-in-out infinite;}
@keyframes cycFade{0%,100%{opacity:1}50%{opacity:.15}}
.viz.in .cyc-rain{animation:cycFade2 6s ease-in-out infinite;}
@keyframes cycFade2{0%,100%{opacity:.15}50%{opacity:1}}

/* --- before/after lift --- */
.viz.in .ba-house{animation:baLift 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:80% 100%;}
@keyframes baLift{0%,40%{transform:rotate(4deg)}70%,100%{transform:rotate(0deg)}}
.viz.in .ba-pier{opacity:0;animation:baPier .5s ease forwards 1.6s;}
@keyframes baPier{to{opacity:1}}

/* --- process timeline --- */
.tl{display:grid;gap:14px;}
@media(min-width:640px){.tl{grid-template-columns:repeat(4,1fr);}}
.tl .tl-step{position:relative;padding:16px;border:1px solid var(--line);border-radius:4px;background:#fff;opacity:0;transform:translateY(12px);}
.viz.in .tl .tl-step{animation:tlIn .5s ease forwards;}
.tl .tl-step:nth-child(2){animation-delay:.12s;}
.tl .tl-step:nth-child(3){animation-delay:.24s;}
.tl .tl-step:nth-child(4){animation-delay:.36s;}
@keyframes tlIn{to{opacity:1;transform:none}}
.tl .tn{font-family:var(--disp);font-weight:800;font-stretch:120%;font-size:24px;color:var(--accent);}

/* --- compare --- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.cmp .cmp-col{border:1px solid var(--line);border-radius:4px;padding:16px;background:#fff;}
.cmp .cmp-col.win{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.cmp .depthbar{height:120px;width:100%;background:linear-gradient(#E7E0D1,#cfc6b2);border-radius:3px;position:relative;overflow:hidden;margin-top:10px;}
.cmp .depthfill{position:absolute;left:0;right:0;bottom:0;background:var(--accent);height:0;transition:height 1.2s cubic-bezier(.2,.8,.2,1);}
.cmp .depthfill.steel{background:var(--accent);}
.cmp .depthfill.conc{background:var(--steel);}
.viz.in .cmp .depthfill.steel{height:92%;}
.viz.in .cmp .depthfill.conc{height:42%;}

/* --- stat grid (count up) --- */
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;}
@media(min-width:560px){.statgrid{grid-template-columns:repeat(4,1fr);}}
.statgrid .sg{background:#fff;padding:18px 14px;text-align:center;}
.statgrid .sg .v{font-family:var(--disp);font-weight:800;font-stretch:120%;font-size:clamp(24px,3.4vw,34px);color:var(--ink);line-height:.9;}
.statgrid .sg .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:8px;}

/* --- checklist infographic --- */
.checklist{display:grid;gap:10px;}
@media(min-width:560px){.checklist{grid-template-columns:1fr 1fr;}}
.checklist .ci{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;}
.checklist .ci .cicon{flex:none;color:var(--accent);}
.checklist .ci .ct{font-size:14px;line-height:1.35;color:#2C2A23;font-weight:500;}

/* --- corridor map --- */
.cmap{position:relative;}
.cmap .mdot{fill:var(--steel-2);}
.cmap .mdot.on{fill:var(--accent);}

/* related posts */
.related{display:grid;gap:14px;}
@media(min-width:640px){.related{grid-template-columns:repeat(3,1fr);}}

/* author / share row */
.byline{display:flex;align-items:center;gap:12px;margin-top:8px;}
.byline .av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;font-size:15px;}

@media(prefers-reduced-motion:reduce){
  .viz .anim,.viz .pier-seg2,.viz .lift2,.viz .tl-step,.viz .dot-pop{opacity:1 !important;transform:none !important;animation:none !important;}
  .bar-fill{transform:scaleX(1) !important;}
  .line-path{stroke-dashoffset:0 !important;}
  .viz.in .cmp .depthfill.steel{height:92%;}
  .viz.in .cmp .depthfill.conc{height:42%;}
  .viz.in .soil-arrow-up,.viz.in .soil-arrow-dn,.viz.in .slab-tilt,.viz.in .cyc-slab,.viz.in .cyc-sun,.viz.in .cyc-rain,.viz.in .ba-house{animation:none !important;}
}