/* Non-critical CSS - loaded async by build.js. Below-the-fold and inner pages. */

/* ---- Breadcrumbs ---------------------------------------------------- */
.crumbs{font-size:14.5px;color:var(--muted);padding-top:var(--s5);margin:0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:var(--s2);color:var(--edge)}
.crumbs a{color:var(--muted)}
.crumbs [aria-current="page"]{color:var(--paper)}

/* ---- Page shell ----------------------------------------------------- */
.page{padding-top:var(--s6);padding-bottom:var(--s8)}
.page__head{margin-bottom:var(--s6)}
.page__lead{font-size:19px;line-height:1.55;color:var(--paper);max-width:58ch}
@media (min-width:760px){.page__lead{font-size:21px}}

.prose>*+h2{margin-top:var(--s7)}
.prose ul,.prose ol{max-width:var(--measure);margin:0 0 var(--s4);padding-left:var(--s5)}
.prose li{margin-bottom:var(--s2)}
.prose li::marker{color:var(--lime)}
.prose strong{font-weight:600;color:var(--paper)}

/* ---- The fanned-hand device ----------------------------------------- */
/* Overlapping, slightly angled panels - the site's one structural motif. */
.fan{margin:var(--s5) 0 var(--s7);padding:0;list-style:none}
.fan>*{
  background:var(--surface);
  border:1px solid var(--edge);
  border-left:3px solid var(--lime);
  border-radius:10px;
  padding:var(--s5);
  margin:0 0 -14px;
  position:relative;
  box-shadow:0 6px 18px rgba(11,10,32,.5);
  max-width:640px;
}
.fan>*:nth-child(1){transform:rotate(-1.5deg);z-index:4}
.fan>*:nth-child(2){transform:rotate(1deg);margin-left:auto;z-index:3}
.fan>*:nth-child(3){transform:rotate(-.75deg);z-index:2}
.fan>*:nth-child(4){transform:rotate(1.25deg);margin-left:auto;z-index:1}
.fan>*:last-child{margin-bottom:0}
.fan h3{margin:0 0 var(--s2)}
.fan p{margin:0;max-width:52ch}
.fan p+p{margin-top:var(--s3)}
@media (max-width:479px){
  .fan>*:nth-child(1){transform:rotate(-.5deg)}
  .fan>*:nth-child(2){transform:rotate(.5deg)}
  .fan>*:nth-child(3){transform:rotate(-.4deg)}
  .fan>*:nth-child(4){transform:rotate(.5deg)}
}

/* ---- Link list ------------------------------------------------------ */
.linklist{list-style:none;padding:0;margin:0 0 var(--s5);max-width:var(--measure)}
.linklist li{border-top:1px solid var(--edge)}
.linklist li:last-child{border-bottom:1px solid var(--edge)}
.linklist a{display:block;padding:var(--s4) 0;text-decoration:none;font-size:17px}
.linklist a:hover{color:var(--lime)}
.linklist span{display:block;font-size:14.5px;color:var(--muted);margin-top:2px}

/* ---- Spec table ----------------------------------------------------- */
.spec{width:100%;max-width:560px;border-collapse:collapse;margin:0 0 var(--s5);
  font-size:16px;background:var(--surface);border:1px solid var(--edge);border-radius:10px}
.spec th,.spec td{text-align:left;padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--edge);vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{font-weight:600;color:var(--muted);width:38%;white-space:nowrap}
.spec td{color:var(--paper)}

/* ---- Numbered install steps ----------------------------------------- */
.steps{counter-reset:step;list-style:none;padding:0;margin:0 0 var(--s6);max-width:var(--measure)}
.steps li{counter-increment:step;position:relative;padding:0 0 var(--s5) 44px}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-2px;
  width:30px;height:30px;border-radius:50%;
  background:var(--lime);color:var(--ink);
  font:700 15px/30px var(--display);text-align:center}
.steps li:last-child{padding-bottom:0}
.steps strong{display:block;margin-bottom:2px}

/* ---- Q&A ------------------------------------------------------------ */
.qa{max-width:var(--measure);margin:0 0 var(--s6)}
.qa dt{font-weight:600;color:var(--paper);margin-top:var(--s4)}
.qa dd{margin:var(--s2) 0 0}

/* ---- Safety / compliance note --------------------------------------- */
.note{border:1px solid var(--edge);border-radius:10px;padding:var(--s4) var(--s5);
  margin:0 0 var(--s6);max-width:var(--measure);font-size:16px;color:var(--muted)}
.note strong{color:var(--paper)}

/* ---- Blog ----------------------------------------------------------- */
.posts{list-style:none;padding:0;margin:0}
.posts li{border-top:1px solid var(--edge);padding:var(--s5) 0}
.posts li:last-child{border-bottom:1px solid var(--edge)}
.post-card{display:flex;gap:var(--s4);align-items:flex-start;text-decoration:none}
.post-card picture{flex:0 0 auto;display:block;width:104px}
.post-card img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  border-radius:8px;background:var(--surface)}
.post-card h2,.post-card h3{margin:0 0 var(--s1);font-size:19px;color:var(--paper);line-height:1.3}
.post-card:hover h2,.post-card:hover h3{color:var(--lime)}
.post-card time{display:block;font-size:14.5px;color:var(--muted);margin-bottom:var(--s2)}
.post-card p{margin:0;font-size:16px;color:var(--muted);max-width:60ch}
@media (min-width:420px){.post-card picture{width:148px}}
@media (min-width:760px){.post-card picture{width:210px}}

.postmeta{font-size:15px;color:var(--muted);margin:0 0 var(--s5)}
.posthero{border-radius:12px;margin:0 0 var(--s6);width:100%;max-width:720px}
.prose blockquote{margin:0 0 var(--s4);padding-left:var(--s4);
  border-left:3px solid var(--lime);color:var(--muted);max-width:var(--measure)}
.prose table{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 var(--s5);font-size:16px}
.prose th,.prose td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--edge)}
.prose th{color:var(--lime);font-weight:600;font-family:var(--display)}
.prose code{background:var(--surface);padding:2px 6px;border-radius:4px;font-size:.92em}
.prose hr{border:0;border-top:1px solid var(--edge);margin:var(--s6) 0}

/* ---- Footer --------------------------------------------------------- */
.foot{background:var(--surface);border-top:1px solid var(--edge);padding:var(--s7) 0 var(--s6)}
.foot__grid{display:grid;gap:var(--s6)}
@media (min-width:760px){.foot__grid{grid-template-columns:1fr 1fr}}
.foot h2{font-size:17px;font-family:var(--display);font-weight:700;
  color:var(--paper);margin:0 0 var(--s3)}
.foot address{font-style:normal;color:var(--muted);margin:0 0 var(--s3);font-size:16px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--lime)}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.foot ul a{font-size:16px}
.compliance{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--edge);
  font-size:15px;color:var(--muted);max-width:64ch}
.compliance strong{color:var(--paper);font-weight:600}

/* ---- Table of contents ---------------------------------------------- */
.toc{border:1px solid var(--edge);border-radius:10px;padding:var(--s4) var(--s5);
  margin:0 0 var(--s7);max-width:var(--measure);background:var(--surface)}
.toc h2{font-size:15px;font-family:var(--display);font-weight:700;color:var(--muted);
  margin:0 0 var(--s3);text-transform:none}
.toc ol{margin:0;padding-left:var(--s5);counter-reset:none}
.toc li{margin-bottom:var(--s2)}
.toc li::marker{color:var(--edge)}
.toc a{font-size:16px;color:var(--paper)}
.toc a:hover{color:var(--lime)}

/* Anchored headings get room under a fixed-bar layout when jumped to. */
.prose h2[id]{scroll-margin-top:var(--s5)}

/* ---- Previous / next post ------------------------------------------- */
.postnav{display:grid;gap:var(--s3);margin:var(--s7) 0 0;max-width:var(--measure)}
@media (min-width:640px){.postnav{grid-template-columns:1fr 1fr}}
.postnav__item{display:block;border:1px solid var(--edge);border-radius:10px;
  padding:var(--s4);text-decoration:none;font-weight:600;color:var(--paper);
  font-family:var(--display);line-height:1.3}
.postnav__item:hover{border-color:var(--lime);color:var(--lime)}
.postnav__item span{display:block;font-family:var(--sans);font-weight:400;
  font-size:14px;color:var(--muted);margin-bottom:var(--s1)}
.postnav__item[rel="next"]{text-align:right}
@media (max-width:639px){.postnav__item[rel="next"]{text-align:left}}

/* ---- Related reading ------------------------------------------------- */
.related{margin-top:var(--s7)}
.related h2{font-size:20px;margin-bottom:var(--s4)}