/* ==========================================================================
   ZAO — Guide / article pages: long-form editorial layout on the blueprint
   theme, breadcrumb, technical diagram figures with scroll "plotter wipe".
   ========================================================================== */

.article-head{
  position:relative;
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
  padding-top:calc(var(--nav-h) + clamp(1.6rem,4vw,2.6rem));
  padding-bottom:clamp(1.6rem,4vw,2.6rem);
}
/* thermal underline — the "heat" edge of the page header */
.article-head::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--thermal); opacity:.6; }
.article-head .wrap{ max-width:820px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; margin-top:1rem; font-family:var(--f-mono); font-size:var(--step--2); color:var(--ink-3); }
.article-meta .tag{ background:var(--paper); }

.article{
  max-width:760px; margin-inline:auto;
  padding:clamp(2rem,5vw,3.4rem) var(--gutter) clamp(3rem,7vw,5rem);
}
.article h1{
  font-family:var(--f-display); font-weight:800;
  font-size:var(--step-4); line-height:1.02; letter-spacing:-.025em; color:var(--ink);
  font-variation-settings:'wght' 800,'opsz' 60;
}
.article h2{
  font-family:var(--f-display); font-weight:700;
  font-size:var(--step-2); line-height:1.12; letter-spacing:-.015em;
  margin:2.6rem 0 1rem; padding-top:1.4rem; border-top:1px solid var(--line);
  color:var(--ink); position:relative;
}
.article h2::before{ content:""; position:absolute; top:-1px; left:0; width:56px; height:3px; border-radius:3px; background:var(--thermal); }
.article h3{
  font-family:var(--f-display); font-weight:700; font-size:var(--step-1);
  margin:1.8rem 0 .7rem; color:var(--blue-ink);
}
.article p{ margin:0 0 1.1rem; color:var(--ink-2); font-size:var(--step-0); line-height:1.72; }
.article strong{ color:var(--ink); }
.article a{ color:var(--blue-ink); text-decoration:underline; text-underline-offset:2px; }
.article ul,.article ol{ margin:1rem 0 1.4rem 1.4rem; color:var(--ink-2); }
.article li{ margin-bottom:.6rem; line-height:1.65; }
.article em{ color:var(--ink-3); }

/* Highlight / callout — a taped note in the notebook */
.highlight{
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-left:3px solid var(--red);
  padding:1.1rem 1.3rem; margin:1.8rem 0; border-radius:var(--radius);
  color:var(--ink-2); font-size:var(--step-0); line-height:1.65;
}
.highlight strong{ color:var(--ink); }

/* Tables — engineering datasheet look */
.table-wrap{ overflow-x:auto; margin:1.8rem 0; border:1px solid var(--line); border-radius:var(--radius); }
.article table{ width:100%; border-collapse:collapse; background:var(--paper-2); font-size:var(--step--1); min-width:520px; }
.article th,.article td{ padding:.7rem .9rem; text-align:left; border:1px solid var(--line); }
.article th{ background:var(--paper-3); color:var(--ink); font-family:var(--f-mono); font-size:var(--step--2); letter-spacing:.04em; text-transform:uppercase; }
.article td{ color:var(--ink-2); }
.article tr:last-child td{ font-weight:700; color:var(--ink); background:var(--paper); }

/* Figures with the technical diagrams */
.article figure{ margin:2rem 0; }
.article figure img{ width:100%; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.article figcaption{ margin-top:.7rem; font-family:var(--f-mono); font-size:var(--step--2); color:var(--ink-3); line-height:1.5; }
.article figcaption::before{ content:"FIG · "; color:var(--red); }

/* Plotter wipe: the diagram reveals left→right like a pen plotter drawing it.
   IntersectionObserver adds .is-drawn (baseline); scroll-timeline scrubs it
   where supported. Reduced motion shows it immediately. */
.diagram-wipe img{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1s var(--ease);
}
.diagram-wipe.is-drawn img{ clip-path:inset(0 0 0 0); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    body.has-scroll-anim .diagram-wipe.scrollwipe img{
      clip-path:inset(0 0 0 0);
      transition:none;
      animation:plot-wipe linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 55%;
    }
  }
}
@keyframes plot-wipe{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce){
  .diagram-wipe img{ clip-path:none!important; transition:none!important; }
}

/* CTA block */
.article .cta{
  background:var(--paper-2); border:1px solid var(--line-2);
  border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.4rem);
  margin:2.6rem 0; text-align:center; position:relative; overflow:hidden;
}
.article .cta::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,var(--tint-red),transparent 40%,var(--tint-blue)); pointer-events:none; opacity:.6; }
.article .cta > *{ position:relative; }
.article .cta h3{ margin:0 0 .6rem; color:var(--ink); }
.article .cta p{ margin-bottom:1.2rem; }

/* Table of contents (optional, hub-style) */
.guide-hub-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; margin-top:2.4rem; }
.guide-card{ display:flex; flex-direction:column; gap:.6rem; }
.guide-card h3{ font-size:var(--step-1); }
.guide-card p{ color:var(--ink-2); font-size:var(--step--1); line-height:1.6; flex:1; }
.guide-card .btn{ align-self:flex-start; }

@media (max-width:640px){
  .article h1{ font-size:var(--step-3); }
}