/* how-to-wash-silk-pillowcase.html only. Shared parts come from site.css and article.css (incl. its tidy kit:
   rp-asec, rp-itiles, rp-pc, rp-expand, rp-srcline). Tokens only, prefix hw-. */

/* hero: the ownership line stays one readable measure (the promise chips went: the rail and team box say it) */
.rp-ahero{padding-bottom:clamp(1.25rem,1rem + 1vw,1.75rem)}
/* jumps land at html's own scroll-padding (site.css), so no section adds a margin of its own (review P3-1) */
.rp-asec,.hw-pre__card,#stains{scroll-margin-top:0}

/* the short answer: one card, four fact tiles, three jump buttons */
.hw-answer{position:relative;padding:clamp(1rem,.8rem + 1vw,1.5rem);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
.hw-answer::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--lilac),var(--act),var(--moon))}
.hw-answer>.rp-head .rp-head__ico{background:var(--moon-soft);color:var(--moon-text)}
.hw-facts .rp-itile{background:var(--ground);box-shadow:none}
@media (min-width:768px){.hw-facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hw-jump{display:flex;flex-wrap:wrap;gap:.5rem}
@media (max-width:419px){.hw-jump{display:grid}.hw-jump .rp-btn{width:100%}}

/* before you start: the kit chips, then two numbered cards */
.hw-kit{display:grid;gap:.6rem;padding:.85rem 1rem 1rem;border-radius:var(--r-l);background:var(--lav);border:1px solid var(--line-2)}
.hw-kit__title{display:flex;align-items:center;gap:.4rem;font:700 .95rem/1.3 var(--display);color:var(--ink)}
.hw-kit__title .rp-ic{color:var(--act)}
.hw-kit .rp-need li{font-size:.88rem}
.hw-pre{display:grid;gap:.7rem}
@media (min-width:640px){.hw-pre{grid-template-columns:1fr 1fr}}
.hw-pre__card{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:.85rem;align-items:start;padding:.8rem .9rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hw-pre__media{position:relative;display:grid;place-items:center;width:4.75rem;height:4.75rem;border-radius:var(--r-m);overflow:hidden;background:var(--lav);color:var(--act)}
.hw-pre__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hw-pre__no{position:absolute;left:.3rem;top:.3rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 .8rem/1 var(--display);box-shadow:0 0 0 2px #fff}
.hw-pre__card h3{font-size:1.05rem}
.hw-pre__card p{margin-top:.3rem;font-size:.92rem;line-height:1.45;color:var(--text)}

/* hand-wash and machine: the drawing beside a short numbered list, in one card; from 768 the drawing sits at the
   top of its column with the source line under it, so neither floats in empty space (review P3-9) */
.hw-method{display:grid;gap:1rem;align-items:start;grid-template-areas:"art" "steps" "src";padding:clamp(.8rem,.6rem + .8vw,1.2rem);border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hw-method__art img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);background:var(--lav)}
.hw-method__art{grid-area:art}
.hw-method>.hw-steps{grid-area:steps}
.hw-method__src{grid-area:src}
@media (min-width:768px){.hw-method{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;grid-template-areas:"art steps" "src steps";gap:.9rem 1.25rem}}
.hw-steps{display:grid;gap:.45rem;counter-reset:hw}
.hw-steps li{display:grid;grid-template-columns:1.9rem minmax(0,1fr);column-gap:.7rem;align-items:start;padding:.5rem .7rem .55rem .5rem;border-radius:12px;background:var(--ground)}
.hw-steps li::before{counter-increment:hw;content:counter(hw);grid-row:1 / span 2;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:999px;background:var(--night);color:var(--moon);font:800 .86rem/1 var(--display)}
.hw-steps b{font:700 .98rem/1.35 var(--display);color:var(--ink)}
.hw-steps span{font-size:.88rem;line-height:1.45;color:var(--muted)}
.hw-steps a{font-weight:600}

/* two cards: a thumbnail beside the text on phones; photo on top from 640 (dry / iron) */
.hw-duo{display:grid;gap:.7rem}
@media (min-width:640px){.hw-duo{grid-template-columns:1fr 1fr}}
.hw-card{display:grid;grid-template-columns:6rem minmax(0,1fr);border-radius:var(--r-l);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hw-card img{width:100%;height:100%;min-height:6rem;object-fit:cover}
.hw-card__body{display:grid;gap:.3rem;align-content:start;padding:.8rem .9rem .9rem}
.hw-card h3{font-size:1.05rem}
.hw-card p{font-size:.92rem;line-height:1.45;color:var(--text)}
@media (min-width:640px){
  .hw-duo:not(.hw-duo--row) .hw-card{grid-template-columns:minmax(0,1fr)}
  .hw-duo:not(.hw-duo--row) .hw-card img{height:auto;aspect-ratio:16/9}
}

/* the tumble dryer: one line, then the two makers' exceptions */
.hw-dryer{display:grid;gap:.6rem;padding:.85rem 1rem 1rem;border-radius:var(--r-l);background:var(--warn-tint);border:1px solid #f1dc9f}
.hw-dryer__head{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.7rem;align-items:center;font-size:.94rem;line-height:1.45;color:var(--ink)}
.hw-dryer__ico{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:#fff;color:var(--moon-text)}
.hw-dryer__ex{display:grid;gap:.5rem}
@media (min-width:640px){.hw-dryer__ex{grid-template-columns:1fr 1fr}}
.hw-dryer__ex li{display:grid;gap:.1rem;padding:.55rem .75rem;border-radius:12px;background:#fff;font-size:.9rem;line-height:1.45;color:var(--text)}
.hw-dryer__ex b{font:700 .92rem/1.3 var(--display);color:var(--ink)}

/* never / stains: the kit's two-half card, the "don't" half first */
.hw-dodont li b{color:var(--ink)}
.hw-pc-src{margin-top:.6rem}

/* how often: two tiles, icon beside the text */
.hw-often{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.hw-often .rp-itile{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.8rem;row-gap:.1rem;align-items:center}
.hw-often .rp-itile__ico{grid-row:1 / span 2;margin:0}

/* where makers disagree: one row per topic, both sides named, no winner */
.hw-rows{display:grid;gap:.6rem}
.hw-row{display:grid;gap:.5rem;padding:.8rem .9rem;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.hw-row__topic{display:grid;grid-template-columns:2.4rem minmax(0,1fr);column-gap:.7rem;row-gap:.25rem;align-items:center}
.hw-row__ico{grid-row:1 / span 2;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--lav);color:var(--act)}
.hw-row h3{font-size:1.05rem}
.hw-row__take{justify-self:start;padding:.12rem .55rem;border-radius:999px;background:var(--moon-soft);color:var(--moon-text);font:700 .78rem/1.4 var(--body)}
.hw-row__side{display:grid;gap:.05rem;align-content:start;padding:.45rem .65rem;border-radius:12px;font-size:.88rem;line-height:1.4;color:var(--text)}
.hw-row__side b{font:700 .84rem/1.3 var(--body)}
.hw-row__side--yes{background:var(--ok-tint)}
.hw-row__side--yes b{color:var(--ok)}
.hw-row__side--no{background:var(--bad-tint)}
.hw-row__side--no b{color:var(--bad)}
@media (min-width:768px){
  .hw-row{grid-template-columns:minmax(0,15rem) minmax(0,1fr) minmax(0,1fr);gap:.7rem;align-items:stretch}
  .hw-row__topic{align-self:center}
}

/* sources: a closed row at the foot */
.hw-sources{margin-top:clamp(2rem,1.6rem + 1.4vw,2.75rem)}
.hw-srclist{display:grid;gap:.5rem}
@media (min-width:640px){.hw-srclist{grid-template-columns:1fr 1fr}}
.hw-srclist li{display:flex;flex-direction:column;padding:.6rem .8rem;border-radius:12px;background:#fff;font-size:.88rem;color:var(--text)}
.hw-srclist b{color:var(--ink);font-size:.92rem}

/* phones: the six kit chips two to a row, so the list stays short */
@media (max-width:639px){
  .hw-kit .rp-need{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .hw-kit .rp-need li{align-items:flex-start;padding:.45rem .6rem;line-height:1.3}
  .hw-kit .rp-need .rp-ic{flex:none;margin-top:.05rem}
}