/* how-to-wash-a-heated-blanket.html: page-only parts. Reuses site.css and article.css, including the
   article TIDY KIT (.sdek .srcline .safeline .fold .kchips .tiles .steps .choose .teambox--slim).
   Tidy pass 2026-10-18: how-to shape = short answer, what you need, numbered steps, do / don't, when to
   replace, FAQ; secondary detail in closed <details class="fold">. Only what the kit does not cover lives here. */

/* hero tags; the cover lines up with the reading column on desktop */
.ahero__tags a.pill{text-decoration:none}
.ahero__tags a.pill:hover{background:var(--frost-2)}
@media (min-width:64rem){.ahero--stack .ahero__media{max-width:calc(100% - 21.5rem)}}

/* kit lines run the full column width */
.amain.prose :is(p.safeline,p.srcline,p.tipline){max-width:none}
.prose .safeline--warn{font-size:.88rem}

/* quick answer: three conditions and four method chips */
.qa{position:relative;overflow:hidden;padding:1.1rem 1.15rem 1.15rem;border-radius:var(--r-l);background:linear-gradient(150deg,#fff 0%,#f2f8f4 100%);border:1.5px solid #bfe3cf;box-shadow:var(--sh-1)}
.qa::after{content:"";position:absolute;right:-3rem;top:-3rem;width:9rem;height:9rem;border-radius:999px;background:radial-gradient(closest-side,rgb(23 120 76/.12),transparent);pointer-events:none}
.qa__head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
.qa__yes{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem .35rem .45rem;border-radius:999px;background:var(--ok);color:#fff;font:800 .95rem/1 var(--display)}
.qa__yes .ic{width:1.35rem;height:1.35rem;padding:.2rem;border-radius:999px;background:rgb(255 255 255/.2)}
.qa__title{font:700 1.02rem/1.25 var(--display);color:var(--ink)}
.qa__checks{display:grid;gap:.5rem;margin-top:.8rem}
.qa__checks li{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:var(--r-s);background:#fff;border:1px solid var(--line)}
.qa__checks li>span:first-child{display:grid;place-items:center;flex:none;width:2.35rem;height:2.35rem;border-radius:12px;background:var(--ok-tint);color:var(--ok)}
.qa__checks b{display:block;font-size:.93rem;color:var(--ink);line-height:1.25}
.qa__checks small{display:block;font-size:.82rem;color:var(--muted);line-height:1.35}
.qa__how{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.qa__how .chip{background:#fff;border:1px solid var(--line);padding:.3rem .6rem;font-size:.8rem}
.qa__how .ic{color:var(--ok)}
@media (min-width:40rem){
  .qa__checks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qa__checks li{flex-direction:column;align-items:flex-start;gap:.45rem}
}

/* three-tile rows (before you wash, how often): one per row on phones, three across from 40rem */
.tiles--3{grid-template-columns:minmax(0,1fr)}
.tiles--3 .tile{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.85rem;row-gap:.1rem;align-items:center}
.tiles--3 .tile__ico{grid-row:span 2}
.tiles--3 .tile__title{margin-top:0}
@media (min-width:40rem){
  .tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles--3 .tile{display:flex}
  .tiles--3 .tile__title{margin-top:.25rem}
}
/* after washing: green check tiles; when to replace: ember top rule */
.tiles--ok .tile__ico{background:var(--ok-tint);color:var(--ok)}
.tiles--warm .tile{border-top:3px solid var(--ember)}

/* after washing: the stacked warning lines */
#after .safeline+.safeline{margin-top:.45rem}

/* the CPSC warning */
.cpsc-warn{background:#fff;border-color:#f3c4bf;border-left:4px solid var(--bad)}
.cpsc-warn .callout__ico{background:var(--bad-tint)}
.cpsc-warn p+p{margin-top:.4rem}
.cpsc-warn__links{display:flex;flex-wrap:wrap;gap:0 1.25rem}
.cpsc-warn a{display:inline-flex;align-items:center;min-height:2.75rem}

/* washing steps: kit steps; a warning sits under its line, a step photo is a thumbnail on the right */
.amain .step>.safeline{grid-column:2/-1;margin-top:.4rem}
.amain .step--img{grid-template-columns:2.4rem minmax(0,1fr) 4.75rem;grid-template-rows:auto 1fr}
.step__img{grid-column:3;grid-row:1/span 2;align-self:start;width:4.75rem;height:4.75rem;border-radius:var(--r-s);object-fit:cover;background:var(--frost)}
@media (min-width:40rem){
  .amain .step--img{grid-template-columns:2.4rem minmax(0,1fr) 8rem}
  .step__img{width:8rem;height:6rem}
}

/* machine vs hand: kit .choose cards with a small tag */
.ways__tag{display:inline-flex;align-self:flex-start;align-items:center;gap:.35rem;padding:.22rem .6rem;border-radius:8px;background:var(--ok-tint);color:var(--ok);font-size:.78rem;font-weight:800}
.ways__tag--label{background:var(--glow-tint);color:#7a4600}

/* drying and spot cleaning: a short row of icon tiles */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.flow li{display:grid;align-content:start;justify-items:start;gap:.1rem;padding:.8rem .75rem;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1)}
.flow li>span{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:.35rem;border-radius:11px;background:var(--frost);color:#24477a}
.flow li .ic{width:1.05rem;height:1.05rem}
.flow b{font:700 .9rem/1.25 var(--display);color:var(--ink)}
.flow small{font-size:.8rem;line-height:1.35;color:var(--muted)}
.flow--4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:40rem){.flow--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
#drying .afig>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 55%}
@media (min-width:48rem){#drying .afig>img{aspect-ratio:5/2}}
/* dryer table (in its fold): three short columns, readable on phones with no sideways scroll */
.drytable{min-width:0;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
@media (max-width:47.99rem){
  .drytable{table-layout:fixed}
  .drytable tbody th{position:static;min-width:0;width:34%}
  .drytable thead th:first-child{position:static}
  .drytable thead th{white-space:normal}
  .drytable th,.drytable td{padding:.6rem .5rem;font-size:.82rem}
}

/* never do */
.never{display:grid;gap:.5rem}
.never li{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:var(--r-s);background:#fff;border:1px solid #f3c4bf}
.never li>span:first-child{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:999px;background:var(--bad-tint);color:var(--bad)}
.never li .ic{width:1rem;height:1rem;stroke-width:2.6}
.never b{display:block;font-size:.92rem;line-height:1.25;color:var(--ink)}
.never small{display:block;font-size:.8rem;line-height:1.35;color:var(--muted)}
@media (min-width:40rem){.never{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* mattress pads and throws: photo and text in one card */
.msplit{display:grid;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh-1)}
.msplit>img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--frost)}
.msplit>div{padding:1rem 1.15rem 1.1rem;font-size:.94rem;line-height:1.55}
.msplit__links{margin-top:.55rem;font-size:.9rem;color:var(--muted)}
@media (min-width:40rem){
  .msplit{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
  .msplit>img{height:100%;min-height:11rem;aspect-ratio:auto}
  .msplit>div{align-self:center}
}

/* when to replace: hand-off box */
.shopbox{display:grid;gap:.9rem;padding:1.1rem 1.2rem;border-radius:var(--r-l);background:var(--night);color:var(--night-text)}
.shopbox__title{font:700 1.12rem/1.2 var(--display);color:#fff}
.shopbox p:not(.shopbox__title){margin-top:.25rem;font-size:.92rem;color:var(--night-muted)}
.shopbox__actions{display:flex;flex-wrap:wrap;gap:.5rem}
.shopbox .btn--line{background:transparent;border-color:var(--night-line);color:#fff}
.shopbox .btn--line:hover{border-color:#fff}
@media (min-width:48rem){.shopbox{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:1.25rem 1.5rem}}
@media (min-width:64rem) and (max-width:79.99rem){.shopbox{grid-template-columns:1fr}}

@media (min-width:64rem){.arail .toc li a{padding-block:.36rem}}

/* related reads: title only */
.rel h3{margin-top:.35rem}
@media (max-width:47.99rem){.teambox__links .btn{min-height:2.75rem}}