/* ===== article / pillar page ===== */

/* breadcrumb */
.crumb{border-bottom:1px solid var(--line);}
.crumb .wrap{display:flex;gap:10px;align-items:center;min-height:46px;font-size:12.5px;color:var(--dim);flex-wrap:wrap;}
.crumb a:hover{color:var(--gold2);}
.crumb .sep{color:var(--bronze);}

/* article hero */
.a-hero{padding:64px 0 48px;}
.a-hero .h-kick{margin-bottom:18px;}
.a-hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4.6vw,56px);line-height:1.35;max-width:20ch;margin-bottom:18px;}
.a-hero h1 em{font-style:normal;color:var(--gold);}
.a-hero .dek{color:var(--mute);font-size:18px;max-width:62ch;margin-bottom:26px;}
.a-meta{display:flex;flex-wrap:wrap;gap:22px;font-size:13px;color:var(--dim);border-top:1px solid var(--line);padding-top:18px;max-width:720px;}
.a-meta b{color:var(--paper);font-weight:600;}
.a-meta .mono{color:var(--gold);font-size:11px;}

/* engineering-framed figure */
.efig{position:relative;border:1px solid var(--line2);border-radius:14px;overflow:hidden;margin:0;}
.efig img{width:100%;object-fit:cover;display:block;}
.efig::before,.efig::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--gold);z-index:2;}
.efig::before{top:10px;inset-inline-start:10px;border-width:1px 0 0 1px;}
.efig::after{bottom:10px;inset-inline-end:10px;border-width:0 1px 1px 0;}
.efig .im-cap{z-index:3;}

/* layout grid */
.art-grid{display:grid;grid-template-columns:288px minmax(0,1fr);gap:64px;align-items:start;padding-block:26px 90px;}

/* ---- TOC rail + thread spine ---- */
.tocbox{position:sticky;top:96px;}
.toc{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--ink2);padding:22px 20px;}
.toc .t-h{grid-column:1 / -1;font-family:var(--disp);font-weight:800;font-size:15px;color:var(--paper);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;}
.toc .t-h .mono{font-size:9.5px;color:var(--dim);}
.toc ul{grid-column:1;}
.toc li{margin-bottom:2px;}
.toc a{display:flex;gap:10px;align-items:baseline;padding:7px 8px;border-radius:8px;font-size:13px;color:var(--mute);line-height:1.6;transition:color .2s,background .2s;}
.toc a:hover{color:var(--paper);}
.toc a.on{color:var(--gold2);background:rgba(201,162,39,.07);}
.toc .t-i{font-size:9.5px;color:var(--bronze);min-width:18px;}
.toc a.on .t-i{color:var(--gold);}

/* the rod */
.rodcol{grid-column:2;position:relative;}
.rod{position:absolute;inset:4px 10px 4px 10px;width:10px;border-radius:6px;
  background:repeating-linear-gradient(-58deg, #33280E 0 3px, #77601F 3px 4.5px, #2A210C 4.5px 6.5px);
  box-shadow:inset 0 0 0 1px rgba(206,166,60,.35);}
.rod .fill{position:absolute;top:0;left:0;right:0;height:0;border-radius:6px;
  background:repeating-linear-gradient(-58deg, #6B531A 0 3px, #E4C25C 3px 4.5px, #55411400 4.5px 6.5px);
  opacity:.9;}
.rod .stopper{position:absolute;bottom:-2px;left:-5px;right:-5px;height:5px;background:var(--gold);border-radius:2px;opacity:.85;}
.rodnut{position:absolute;top:0;left:50%;margin-left:-13px;width:26px;height:26px;z-index:2;will-change:transform;}
.rodnut svg{width:26px;height:26px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));}
.rodnut.lock svg path{fill:#EFCF6F;}
.rodnut.lock{animation:snap .4s ease;}
@keyframes snap{40%{margin-left:-11px;}70%{margin-left:-14px;}}

/* rail CTA */
.t-cta{border:1px solid var(--line);border-radius:14px;background:var(--ink2);padding:20px;margin-top:16px;}
.t-cta .k{font-size:12px;color:var(--dim);margin-bottom:6px;}
.t-cta a.tel{font-family:var(--mono);font-weight:700;font-size:17px;color:var(--gold2);direction:ltr;display:inline-block;}
.t-cta p{font-size:12px;color:var(--mute);line-height:1.8;margin-top:8px;}

/* ---- mobile toc bar + sheet ---- */
.mtoc{display:none;}
.mtoc-sheet,.mtoc-veil{display:none;}

/* ---- article content ---- */
.artc{max-width:780px;counter-reset:sec;font-size:17px;}
.artc .lede{font-size:19.5px;line-height:2.1;color:var(--paper);font-weight:500;}
.artc .lede::first-letter{color:var(--gold);font-family:var(--disp);font-weight:900;font-size:1.6em;}
.artc p{margin-block:18px;color:#D8CFB8;}
.artc p b,.artc li b{color:var(--paper);}
.artc a{color:var(--gold2);border-bottom:1px dotted var(--bronze);}
.artc h2{counter-increment:sec;display:flex;align-items:center;gap:16px;font-family:var(--disp);font-weight:850;font-size:clamp(24px,3vw,33px);line-height:1.4;margin:74px 0 20px;scroll-margin-top:110px;}
.artc h2::before{content:counter(sec,decimal-leading-zero);font-family:var(--mono);font-weight:700;font-size:13px;color:var(--gold);border:1px solid var(--line2);border-radius:8px;padding:5px 9px;flex:none;}
.artc h2::after{content:"";flex:1;height:1px;background:var(--line);min-width:30px;}
.artc h3{font-family:var(--disp);font-weight:800;font-size:21px;margin:40px 0 12px;padding-inline-start:14px;border-inline-start:3px solid var(--gold);scroll-margin-top:110px;}
.artc ul.dots{margin:16px 0;}
.artc ul.dots li{position:relative;padding:9px 30px 9px 0;color:#D8CFB8;}
.artc ul.dots li::before{content:"";position:absolute;top:19px;inset-inline-start:6px;width:9px;height:9px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);}
.artc figure{margin:30px 0;}
.artc .im-cap{position:static;display:inline-flex;margin-top:10px;background:none;border:0;padding:0;color:var(--dim);font-size:12px;}

/* callout */
.note{border:1px solid var(--line2);border-inline-start:3px solid var(--gold);border-radius:10px;background:var(--ink2);padding:18px 22px;margin:26px 0;font-size:15px;color:var(--mute);}
.note b{color:var(--gold2);}

/* ---- engineering table sheet ---- */
.sheet{border:1px solid var(--line2);border-radius:12px;overflow:hidden;margin:30px 0;background:var(--ink2);}
.sheet .sh-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line2);font-size:13px;font-weight:600;color:var(--paper);}
.sheet .sh-cap .mono{font-size:10px;color:var(--gold);}
.sheet .tw{overflow-x:auto;}
.sheet table{width:100%;min-width:540px;border-collapse:collapse;font-size:14px;}
.sheet th{background:#1C160A;color:var(--gold);font-weight:600;font-size:12.5px;padding:11px 14px;text-align:center;border-bottom:1px solid var(--line2);white-space:nowrap;}
.sheet td{padding:10px 14px;text-align:center;border-bottom:1px solid var(--line);color:#D8CFB8;}
.sheet tr:nth-child(even) td{background:rgba(201,162,39,.035);}
.sheet tr:last-child td{border-bottom:0;}
.sheet td:first-child{font-family:var(--mono);font-weight:700;color:var(--gold2);font-size:13px;direction:ltr;}
.sheet .fa td:first-child{font-family:var(--body);direction:rtl;color:var(--paper);font-weight:600;}
.sheet .sh-ft{padding:10px 18px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);}

/* ---- grade explorer ---- */
.gx{border:1px solid var(--line2);border-radius:14px;background:var(--ink2);margin:30px 0;overflow:hidden;}
.gx .g-tabs{display:flex;border-bottom:1px solid var(--line2);overflow-x:auto;}
.g-tab{flex:1;min-width:86px;background:none;border:0;border-inline-end:1px solid var(--line);color:var(--mute);font-family:var(--mono);font-weight:700;font-size:14px;padding:15px 8px;cursor:pointer;transition:color .2s,background .2s;}
.g-tab:last-child{border-inline-end:0;}
.g-tab:hover{color:var(--paper);}
.g-tab.on{background:var(--gold);color:#171204;}
.gx .g-bd{padding:26px 26px 22px;}
.gx .g-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.gx .g-std{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--gold2);direction:ltr;}
.gx .g-mat{font-size:13.5px;color:var(--mute);}
.gx .g-use{font-size:14.5px;color:#D8CFB8;margin:10px 0 20px;min-height:44px;}
.gbar{margin-bottom:14px;}
.gbar .gb-l{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-bottom:6px;}
.gbar .gb-l .mono{font-size:11px;color:var(--gold2);}
.gbar .gb-t{height:8px;background:#241D0D;border-radius:4px;overflow:hidden;}
.gbar .gb-f{height:100%;width:0;background:linear-gradient(90deg,var(--bronze),var(--gold));border-radius:4px;transition:width .7s cubic-bezier(.2,.7,.2,1);}
.gx .g-chem{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}

/* ---- coatings trio ---- */
.coats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0;}
.coat{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--ink2);}
.coat img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:1px solid var(--line);}
.coat .c-t{padding:16px 18px 6px;font-family:var(--disp);font-weight:800;font-size:16.5px;}
.coat p{padding:0 18px 18px;font-size:12.5px;color:var(--mute);line-height:1.9;}

/* ---- install steps + pattern ---- */
.inst{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;margin:30px 0;}
.isteps{counter-reset:ist;}
.isteps li{counter-increment:ist;position:relative;padding:0 62px 26px 0;}
.isteps li::before{content:counter(ist);position:absolute;top:0;inset-inline-start:0;width:42px;height:42px;border:1px solid var(--gold);border-radius:10px;color:var(--gold);font-family:var(--disp);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;background:var(--ink);}
.isteps li::after{content:"";position:absolute;top:46px;bottom:6px;inset-inline-start:21px;width:1px;background:var(--line2);}
.isteps li:last-child::after{display:none;}
.isteps h4{font-family:var(--disp);font-weight:800;font-size:16.5px;margin-bottom:4px;}
.isteps p{margin:0;font-size:14px;color:var(--mute);}
.pat{border:1px solid var(--line2);border-radius:14px;background:var(--ink2);padding:20px;text-align:center;position:sticky;top:110px;}
.pat .p-t{font-size:13px;font-weight:600;color:var(--paper);margin-bottom:4px;}
.pat .p-n{font-size:12px;color:var(--gold2);min-height:20px;margin-top:6px;}
.pat svg{width:100%;height:auto;}
.pat .pb circle{fill:#241D0D;stroke:#C9A227;stroke-width:1.4;transition:fill .3s;}
.pat .pb text{fill:#B0A587;font-size:11px;font-family:'Mono';font-weight:700;}
.pat .pb.hot circle{fill:#C9A227;}
.pat .pb.hot text{fill:#171204;}

/* ---- mistakes ---- */
.mis{counter-reset:mi;margin:26px 0;}
.mis li{counter-increment:mi;display:grid;grid-template-columns:52px 1fr;gap:18px;border:1px solid var(--line);border-radius:12px;background:var(--ink2);padding:20px 22px;margin-bottom:12px;}
.mis li::before{content:counter(mi,decimal-leading-zero);font-family:var(--mono);font-weight:700;font-size:20px;color:var(--bronze);align-self:center;}
.mis h4{font-family:var(--disp);font-weight:800;font-size:16px;margin-bottom:4px;}
.mis p{margin:0;font-size:13.5px;color:var(--mute);}

/* ---- faq ---- */
.faq{border:1px solid var(--line);border-radius:12px;background:var(--ink2);margin-bottom:12px;overflow:hidden;}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:19px 22px;font-weight:600;font-size:15.5px;color:var(--paper);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"";flex:none;width:11px;height:11px;background:var(--gold);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .3s;}
.faq[open] summary::before{transform:rotate(90deg);}
.faq .fa-b{padding:0 47px 20px 22px;font-size:14.5px;color:var(--mute);line-height:2;}
.faq[open]{border-color:var(--line2);}

/* ---- summary cta ---- */
.endcta{border:1px solid var(--gold);border-radius:16px;background:linear-gradient(180deg,#1A150A,#12100A);padding:40px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;margin:40px 0 0;}
.endcta h3{font-family:var(--disp);font-weight:850;font-size:24px;margin-bottom:6px;}
.endcta p{color:var(--mute);font-size:14px;margin:0;}

/* related */
.rel{padding-block:70px;border-top:1px solid var(--line);}

/* ================= responsive ================= */
@media (max-width:1080px){
  .art-grid{grid-template-columns:minmax(0,1fr);gap:0;}
  .tocbox{display:none;}
  .artc{max-width:100%;}
  .inst{grid-template-columns:1fr;}
  .pat{position:static;max-width:360px;margin:0 auto;}

  /* mobile toc bar */
  .mtoc{display:flex;position:sticky;top:73px;z-index:55;background:rgba(12,10,6,.96);border-bottom:1px solid var(--line2);align-items:center;gap:12px;padding:10px var(--pad);}
  .mtoc .m-btn{flex:none;background:none;border:1px solid var(--line2);border-radius:8px;color:var(--gold);font-family:var(--body);font-weight:600;font-size:12.5px;padding:7px 13px;cursor:pointer;}
  .mtoc .m-cur{flex:1;min-width:0;font-size:12.5px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .mtoc .m-track{flex:2;position:relative;height:8px;border-radius:4px;background:repeating-linear-gradient(-58deg,#33280E 0 3px,#6B551B 3px 4.5px,#2A210C 4.5px 6px);box-shadow:inset 0 0 0 1px rgba(206,166,60,.3);}
  .mtoc .m-fill{position:absolute;top:0;bottom:0;inset-inline-start:0;width:0;border-radius:4px;background:repeating-linear-gradient(-58deg,#6B531A 0 3px,#E4C25C 3px 4.5px,#554114 4.5px 6px);}
  .mtoc .m-nut{position:absolute;top:50%;inset-inline-end:0;margin-top:-10px;width:20px;height:20px;will-change:transform;}
  .mtoc .m-nut svg{width:20px;height:20px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.7));}
  .mtoc .m-pct{flex:none;font-size:11px;color:var(--gold2);min-width:34px;text-align:center;}

  .mtoc-veil{display:block;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:70;opacity:0;pointer-events:none;transition:opacity .3s;}
  .mtoc-veil.on{opacity:1;pointer-events:auto;}
  .mtoc-sheet{display:block;position:fixed;inset-inline:0;bottom:0;z-index:75;background:var(--ink2);border-top:1px solid var(--gold);border-radius:18px 18px 0 0;max-height:76dvh;overflow-y:auto;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.7,.2,1);padding:20px var(--pad) 30px;}
  .mtoc-sheet.open{transform:none;}
  .mtoc-sheet .s-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .mtoc-sheet .s-h b{font-family:var(--disp);font-weight:800;font-size:17px;}
  .mtoc-sheet .s-x{background:none;border:1px solid var(--line2);border-radius:8px;color:var(--gold);width:38px;height:38px;font-size:18px;cursor:pointer;}
  .mtoc-sheet a{display:flex;gap:12px;align-items:baseline;padding:13px 6px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mute);}
  .mtoc-sheet a.on{color:var(--gold2);}
  .mtoc-sheet .t-i{font-size:10px;color:var(--bronze);min-width:20px;}
}
@media (max-width:760px){
  .a-hero{padding:40px 0 30px;}
  .a-hero .dek{font-size:16px;}
  .artc{font-size:16px;}
  .artc .lede{font-size:17.5px;}
  .artc h2{margin-top:56px;gap:12px;}
  .coats{grid-template-columns:1fr;}
  .endcta{padding:26px 20px;}
  .sheet .tw{margin:0;}
  /* full-bleed figures */
  .artc .efig{margin-inline:calc(var(--pad) * -1);border-radius:0;border-inline:0;}
  .a-hero .efig{margin-inline:calc(var(--pad) * -1);border-radius:0;border-inline:0;}
}