/* ==========================================================================
   FABRIC CARE ATLAS — v2 design system — "CARE CHIPS"

   Concept: the ISO 3758 care symbol stops being a thin line drawing and
   becomes a physical object — a moulded chip with a hard extrusion under it.
   The whole site is built from those chips and from tiles that share their
   geometry: 2px ink outline, generous radius, solid offset shadow, no blur.

   Colour is semantic, never decorative:
     blue     structure — the site's own furniture, links, panels
     magenta  action    — if it is magenta you can press it
     yellow   emphasis  — "look here", never "do this"
     aqua     permitted — a care action that is safe
     red      forbidden — ISO prohibition and nothing else, ever
   Each content silo owns one chip colour so the atlas is legible at a glance.

   IMAGES: Imagify serves next-gen formats through <picture>, which puts the
   <img> one level deeper than the markup suggests. Every image rule here is a
   DESCENDANT selector for that reason — never `.x > img`. Aspect ratio is
   reserved on the container, never inline on the <img>, because the optimiser
   migrates inline styles onto the <picture> where they do nothing.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
  /* Ink and ground */
  --ink:        #0F1633;   /* text, every outline, every extrusion */
  --ink-soft:   #4A5578;   /* secondary text — 6.50:1 on paper */
  --paper:      #EEF1FA;   /* cool near-white ground */
  --card:       #FFFFFF;
  --line:       #C9D2E8;   /* hairline on paper */
  --line-ui:    #7A87AD;   /* control outline — 3:1, WCAG 1.4.11 */

  /* The five semantic colours, each with its extrusion shade */
  --blue:       #2B4DFF;  --blue-d:    #1A2CA8;  --blue-wash:  #E3E8FF;
  --magenta:    #FF2E88;  --magenta-d: #A8155A;  --magenta-deep:#D80A66;
  --yellow:     #FFD23A;  --yellow-d:  #C48F00;  --yellow-wash:#FFF3CE;
  --aqua:       #35E0C4;  --aqua-d:    #12907B;  --aqua-wash:  #DFFAF4;
  --red:        #D91622;  --red-d:     #8E0912;  --red-wash:   #FDE7E8;

  /* Eleven symbols in inc/sprite.svg draw their ISO prohibition saltire with an
     inline `stroke: var(--warn)`, inherited from the v1 palette. Renaming the
     token to --red without this alias does not throw: the declaration simply
     becomes invalid, the stroke falls back to currentColor, and every crossed-out
     care symbol on the site quietly loses its red. Keep the alias. */
  --warn:       var(--red);

  /* Silo chips. Suede has none of its own: it is a child of Fabrics and
     inherits its colour, which is the truth of the taxonomy. */
  --silo-fabrics:       #35E0C4;
  --silo-home-textiles: #FFD23A;
  --silo-how-to:        #7CC4FF;
  --silo-objects:       #FF2E88;
  --silo-stains:        #FF8A3D;
  --silo-upholstery:    #C9A7FF;
  --silo:               var(--blue);   /* per-page override */

  /* Dark chrome */
  --head:       #0F1633;
  --head-2:     #182046;
  --on-head:    #EEF1FA;
  --on-head-2:  #A9B6DC;
  --head-hair:  rgba(255,255,255,.16);

  /* Type */
  --sans:  'Bricolage Grotesque', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.125rem;                                  /* 18px reading size */
  --step-2:  clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --step-3:  clamp(1.5rem, 1.2vw + 1.2rem, 2.05rem);
  --step-4:  clamp(1.9rem, 2.1vw + 1.4rem, 2.85rem);
  --step-5:  clamp(2.35rem, 4vw + 1.2rem, 4.15rem);

  /* Space */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;  --sp-9: 5.5rem;

  --wrap: 1240px;
  --measure: 64ch;
  --r-sm: 10px; --r: 15px; --r-lg: 22px;
  --lift: 6px;                      /* the extrusion under a resting chip */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 170ms;
}

/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
body {
  background: var(--paper);
  /* the sorting-board grid: two dot layers, cheap and non-repeating visually */
  background-image: radial-gradient(var(--line) 1px, transparent 1.4px);
  background-size: 26px 26px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yellow); color: var(--ink); padding: .8rem 1.2rem;
  font-family: var(--mono); font-weight: 600; border: 2px solid var(--ink);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --- 3. TYPOGRAPHY ------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.018em; }
h4 { font-size: var(--step-0); }

a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--magenta-deep); }

.eyebrow {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.meta { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-soft); }
.lede {
  font-size: var(--step-2); line-height: 1.5; color: var(--ink-soft);
  text-wrap: pretty; max-width: 54ch;
}

/* Marker: the one typographic flourish, a yellow highlight behind a word. */
.mark {
  background: linear-gradient(transparent 58%, var(--yellow) 58%);
  padding-inline: .08em;
}

/* --- 4. LAYOUT ----------------------------------------------------------- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.band { padding-block: var(--sp-9); }
.band--tight { padding-block: var(--sp-7); }
.band--ink { background: var(--head); color: var(--on-head); }
.band--ink h2, .band--ink h3 { color: var(--on-head); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.section-head p { max-width: 52ch; }

/* --- 5. THE CHIP --------------------------------------------------------- */
/* One object, reused everywhere: outline, radius, solid extrusion, no blur. */
.chip, .btn, .card, .tile, .note, .spec, .faq details, .toc, .carelabel {
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: 0 var(--lift) 0 var(--ink);
}

.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .34rem .7rem; border-radius: 999px;
  font-family: var(--mono); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--silo); color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  text-decoration: none;
}
.chip .sym { width: 17px; height: 17px; }
a.chip { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.chip:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); color: var(--ink); }

/* Silo colouring, applied by a single class on any chip or card. */
.s-fabrics       { --silo: var(--silo-fabrics); }
.s-home-textiles { --silo: var(--silo-home-textiles); }
.s-how-to        { --silo: var(--silo-how-to); }
.s-objects       { --silo: var(--silo-objects); }
.s-stains        { --silo: var(--silo-stains); }
.s-upholstery    { --silo: var(--silo-upholstery); }
.s-suede         { --silo: var(--silo-fabrics); }   /* child of Fabrics */

/* --- 6. BUTTONS ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.35rem;
  font-family: var(--sans); font-size: var(--step-0); font-weight: 500;
  letter-spacing: -.01em; text-decoration: none; color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn .sym { width: 19px; height: 19px; }
.btn:hover  { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); color: var(--ink); }
.btn:active { transform: translateY(var(--lift)); box-shadow: 0 0 0 var(--ink); }
.btn--go    { background: var(--magenta); }          /* ink on magenta = 5.07:1 */
.btn--ink   { background: var(--ink); color: var(--paper); box-shadow: 0 var(--lift) 0 var(--blue-d); }
.btn--ink:hover { color: var(--paper); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* --- 7. HEADER ----------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--head);
  border-bottom: 2px solid var(--ink);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 68px; padding-block: .6rem;
}
.brand {
  display: flex; align-items: center; gap: .65rem;
  color: var(--on-head); text-decoration: none; flex: 0 0 auto;
}
.brand .sym {
  width: 38px; height: 38px; padding: 6px;
  background: var(--blue); border: 2px solid var(--ink);
  border-radius: 11px; box-shadow: 0 3px 0 var(--ink);
  color: #fff; stroke-width: 2;
}
.brand b {
  display: block; font-family: var(--sans); font-weight: 500;
  font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.1;
}
.brand span span {
  display: block; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .19em; text-transform: uppercase; color: var(--on-head-2);
  margin-top: .18rem;
}

.nav { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border-radius: 999px;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--on-head-2); text-decoration: none;
  border: 2px solid transparent;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.nav .nav__i { width: 17px; height: 17px; stroke-width: 1.9; }
.nav a:hover { color: var(--on-head); border-color: var(--head-hair); }
.nav a[aria-current="page"] {
  background: var(--blue); color: #fff; border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--head-2); color: var(--on-head);
  border: 2px solid var(--head-hair); border-radius: var(--r-sm); cursor: pointer;
}

/* --- 8. SEARCH ----------------------------------------------------------- */
.searchform { display: flex; gap: .5rem; max-width: 460px; }
.searchform input[type="search"] {
  flex: 1; min-height: 50px; padding: .65rem 1rem;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  box-shadow: 0 4px 0 var(--ink);
}
.searchform button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1.1rem; cursor: pointer;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r-sm);
  box-shadow: 0 4px 0 var(--ink);
  font-family: var(--mono); font-weight: 600; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.searchform button:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.searchform .sym { width: 18px; height: 18px; }

/* --- 9. HERO ------------------------------------------------------------- */
.hero { padding-block: var(--sp-8) var(--sp-9); }
.hero__grid {
  display: grid; gap: var(--sp-7); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
.hero h1 { margin-block: var(--sp-4) var(--sp-5); }
.hero .lede { font-size: var(--step-2); color: var(--ink-soft); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }

/* The one element genuinely in space: a care tag, tilted. */
.hero__tag {
  --tilt: -4.5deg;
  transform: perspective(1100px) rotateY(-13deg) rotateX(6deg) rotate(var(--tilt));
  transform-style: preserve-3d;
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: 14px 18px 0 var(--blue-d);
  padding: var(--sp-5);
}
.hero__tag .tag-hd {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 2px dashed var(--line); padding-bottom: .7rem;
}
.hero__tag .tag-row {
  display: flex; gap: .55rem; flex-wrap: wrap;
  justify-content: space-between; padding-block: var(--sp-5);
}
.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 2px dashed var(--line);
}
.hero__stats b {
  display: block; font-family: var(--sans); font-weight: 500;
  font-size: var(--step-3); line-height: 1;
}
.hero__stats span {
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* --- 10. SYMBOL TILE ----------------------------------------------------- */
/* The signature object at its display size. */
.tile-sym {
  width: 62px; height: 62px; display: grid; place-items: center;
  background: var(--card); border: 2px solid var(--ink);
  border-radius: 16px; box-shadow: 0 5px 0 var(--ink);
  color: var(--ink);
}
.tile-sym .sym { width: 34px; height: 34px; }
.tile-sym.is-yes { background: var(--aqua); box-shadow: 0 5px 0 var(--aqua-d); }
.tile-sym.is-no  { background: var(--red-wash); box-shadow: 0 5px 0 var(--red-d); }
.tile-sym.is-key { background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-d); }
.sym-item { width: 78px; text-align: center; }
.sym-item .cap {
  display: block; font-family: var(--mono); font-size: .64rem; line-height: 1.35;
  margin-top: .7rem; color: var(--ink-soft); letter-spacing: .04em;
}

/* --- 11. BENTO + CARDS --------------------------------------------------- */
.bento {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bento__2 { grid-column: span 2; }
/* Six silos: auto-fit left an orphan on its own row at desktop width.
   Three columns divides them evenly into two rows. */
.bento--silos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bento--silos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento--silos { grid-template-columns: minmax(0, 1fr); } }
.bento__tall { grid-row: span 2; }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.card:hover { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); color: var(--ink); }

/* Descendant selector, and ratio on the container: both required so an
   Imagify <picture> wrapper cannot break the layout. */
.card__media {
  aspect-ratio: 4 / 3; background: var(--blue-wash);
  border-bottom: 2px solid var(--ink); overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card--wide .card__media { aspect-ratio: 16 / 9; }

.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.card__body h3 { font-size: var(--step-2); }
.card__body p { font-size: .98rem; line-height: 1.5; color: var(--ink-soft); }
/* The column is a flex container, so an inline-flex chip stretches to full
   width unless it is told to hug its own content. */
.card__body > .chip { align-self: flex-start; }

.card__meta {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: .55rem; align-items: center;
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.card__meta .sym { width: 15px; height: 15px; }
/* Separate the text items from each other. Without this the duration and the
   reading time read as one string: "15 MIN 9 MIN READ". */
.card__meta span + span::before {
  content: "·"; margin-right: .55rem; opacity: .55;
}

/* A card that is a statement rather than a link to a guide. */
.tile { padding: var(--sp-6); display: flex; flex-direction: column; gap: .8rem; }
.tile--yes  { background: var(--aqua);   box-shadow: 0 var(--lift) 0 var(--aqua-d); }
.tile--no   { background: var(--red);    box-shadow: 0 var(--lift) 0 var(--red-d); color: #fff; }
.tile--no h3, .tile--no .eyebrow { color: #fff; }
.tile--key  { background: var(--blue);   box-shadow: 0 var(--lift) 0 var(--blue-d); color: #fff; }
.tile--key h2, .tile--key h3, .tile--key .eyebrow { color: #fff; }
.tile--key .eyebrow { color: var(--yellow); }
.tile--warm { background: var(--yellow); box-shadow: 0 var(--lift) 0 var(--yellow-d); }

/* --- 12. LIST ROWS ------------------------------------------------------- */
.rows { display: grid; gap: var(--sp-4); }
.rows li a {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: var(--sp-5); align-items: center;
  padding: var(--sp-4); text-decoration: none; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r); box-shadow: 0 4px 0 var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rows li a:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.rows .row__media {
  aspect-ratio: 4 / 3; border: 2px solid var(--ink); border-radius: var(--r-sm);
  overflow: hidden; background: var(--blue-wash);
}
.rows .row__media img { width: 100%; height: 100%; object-fit: cover; }
.rows h3 { font-size: var(--step-1); }
.rows p { font-size: .95rem; line-height: 1.45; color: var(--ink-soft); margin-top: .3rem; }

/* --- 13. ARTICLE LAYOUT -------------------------------------------------- */
.doc {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  padding-block: var(--sp-7) var(--sp-9);
  align-items: start;
}
.doc__toc { position: sticky; top: 92px; }
.doc__head { margin-bottom: var(--sp-6); }
.doc__head h1 { margin-block: var(--sp-4) var(--sp-4); }

.crumbs {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  font-family: var(--mono); font-size: var(--step--1); color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--blue); }

.byline {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 2px dashed var(--line);
  font-family: var(--mono); font-size: var(--step--1); color: var(--ink-soft);
}
.byline .sym { width: 15px; height: 15px; }

/* Hero photograph of a guide. Ratio reserved here, never inline. */
.doc__hero {
  margin-block: var(--sp-6);
  border: 2px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 var(--lift) 0 var(--ink);
  overflow: hidden; background: var(--blue-wash);
  aspect-ratio: 16 / 9;
}
.doc__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Table of contents — the yellow block. */
.toc { background: var(--yellow); box-shadow: 0 var(--lift) 0 var(--yellow-d); padding: var(--sp-5); }
.toc__hd {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: var(--sp-4);
}
.toc ol { display: grid; gap: .55rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 2.1em 1fr; gap: .3rem;
  font-family: var(--mono); font-size: .78rem; line-height: 1.45;
  color: var(--ink); text-decoration: none;
}
.toc a::before { content: counter(toc, decimal-leading-zero); opacity: .55; }
.toc a:hover { text-decoration: underline; }

/* --- 14. PROSE ----------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: baseline;
}
.prose h2::before {
  content: attr(data-n);
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; color: var(--ink);
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px;
  padding: .18rem .55rem; align-self: center;
}
.prose h2:not([data-n]) { display: block; }
.prose h2:not([data-n])::before { content: none; }
.prose h3 { margin-top: var(--sp-6); }
.prose p, .prose li { text-wrap: pretty; }
.prose a { font-weight: 500; }

/* Figures injected by the illustration pipeline. */
.prose .fig { margin-block: var(--sp-6); }
.fig__frame {
  border: 2px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 var(--lift) 0 var(--ink);
  overflow: hidden; background: var(--blue-wash); aspect-ratio: 3 / 2;
}
.fig__frame img { width: 100%; height: 100%; object-fit: cover; }
.fig figcaption {
  margin-top: var(--sp-4); font-family: var(--mono);
  font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft);
  padding-left: var(--sp-4); border-left: 3px solid var(--silo);
}

/* Note blocks. */
.note { padding: var(--sp-5); background: var(--aqua-wash); box-shadow: 0 var(--lift) 0 var(--aqua-d); }
.note b {
  display: block; font-family: var(--sans); font-weight: 500;
  font-size: var(--step-1); margin-bottom: .4rem;
}
.note--warn { background: var(--red-wash); box-shadow: 0 var(--lift) 0 var(--red-d); }

/* Bullets. */
.prose .bullets { display: grid; gap: var(--sp-4); }
.prose .bullets li { position: relative; padding-left: 1.7rem; }
.prose .bullets li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .8rem; height: .28rem; border-radius: 2px; background: var(--silo);
}

/* Numbered method. */
.prose .steps { display: grid; gap: var(--sp-5); counter-reset: step; }
.prose .steps > li {
  counter-increment: step; position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 4.2rem;
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r); box-shadow: 0 4px 0 var(--ink);
}
.prose .steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: var(--sp-4); top: var(--sp-5);
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  font-family: var(--mono); font-size: .82rem; font-weight: 600;
  background: var(--blue); color: #fff;
  border: 2px solid var(--ink); border-radius: 999px;
}
.prose .steps h3 { margin-top: 0; font-size: var(--step-1); }
.prose .steps p { margin-top: .5rem; font-size: 1rem; }
.prose .steps time {
  display: inline-block; margin-top: .6rem;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; padding: .12rem .6rem;
}

/* Spec tables. */
.spec { width: 100%; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.prose .spec { display: table; }
.spec caption {
  caption-side: top; text-align: left; padding: var(--sp-4) var(--sp-5);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.spec th, .spec td {
  padding: .8rem var(--sp-4); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line); font-size: .98rem; line-height: 1.5;
}
.spec thead th {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper);
}
.spec tbody th { font-family: var(--sans); font-weight: 500; }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec .yes { color: var(--aqua-d); font-weight: 600; }
.spec .no  { color: var(--red-d);  font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* Questions. */
.faq { display: grid; gap: var(--sp-4); }
.faq details { padding: 0; overflow: hidden; box-shadow: 0 4px 0 var(--ink); }
.faq summary {
  padding: var(--sp-4) var(--sp-5); cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 500; font-size: var(--step-1);
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); font-size: 1.3rem; line-height: 1;
  flex: 0 0 auto; transition: transform var(--dur) var(--ease);
}
.faq details[open] summary { background: var(--yellow); border-bottom: 2px solid var(--ink); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p { padding: var(--sp-5); font-size: 1rem; }

/* --- 15. CARE LABEL STRIP ------------------------------------------------ */
.carelabel { padding: var(--sp-5); margin-block: var(--sp-6); }
.carelabel__hd {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: var(--sp-4); border-bottom: 2px dashed var(--line);
}
.carelabel__row {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  padding-block: var(--sp-5); justify-content: space-between;
}
.carelabel__foot {
  padding-top: var(--sp-4); border-top: 2px dashed var(--line);
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.5;
  color: var(--ink-soft);
}
.sym { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sym .fill { fill: currentColor; stroke: none; }
.sym .ban { stroke: var(--red); stroke-width: 2.2; }
.sym text {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  fill: currentColor; stroke: none; text-anchor: middle;
}

/* --- 16. RAIL + ADS ------------------------------------------------------ */
.rail { position: sticky; top: 92px; display: grid; gap: var(--sp-5); }
.rail__hd {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}
/* Height is reserved so an ad slot cannot shift the page as it fills. */
.ad { display: grid; place-items: center; margin-block: var(--sp-6); }
.ad--in-article { min-height: 280px; }
.ad--rail { min-height: 250px; }
.ad--multiplex { min-height: 320px; }

/* --- 17. FOOTER ---------------------------------------------------------- */
.site-foot {
  background: var(--head); color: var(--on-head);
  border-top: 2px solid var(--ink);
  padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-9);
}
.foot-grid {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
.site-foot h4 {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--yellow);
  margin-bottom: var(--sp-4);
}
.site-foot p { font-size: .98rem; line-height: 1.55; color: var(--on-head-2); max-width: 34ch; }

/* Footer link lists: every entry carries its own icon. */
.foot-list { display: grid; gap: .55rem; }
.foot-list a {
  display: flex; align-items: center; gap: .6rem;
  color: var(--on-head-2); text-decoration: none;
  font-family: var(--mono); font-size: .82rem; line-height: 1.4;
  padding: .18rem 0;
}
.foot-list .sym { width: 17px; height: 17px; flex: 0 0 auto; color: var(--on-head-2); stroke-width: 1.8; }
.foot-list a:hover { color: var(--yellow); }
.foot-list a:hover .sym { color: var(--yellow); }

.foot-note {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--head-hair);
  font-family: var(--mono); font-size: var(--step--2); color: var(--on-head-2);
  letter-spacing: .05em;
}

/* The standing editorial notice: this is a publication, not a service. */
/* Two classes, deliberately: `.site-foot p` sets max-width 34ch for the blurb
   and scores (0,1,1). A bare `.scope-note` scores (0,1,0) and loses, which
   squeezes this notice into one narrow column. */
.site-foot .scope-note {
  display: flex; gap: .8rem; align-items: flex-start;
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: var(--head-2); border: 2px solid var(--head-hair);
  border-radius: var(--r); color: var(--on-head-2);
  font-family: var(--mono); font-size: .8rem; line-height: 1.6;
  max-width: none;
}
.scope-note .sym { width: 20px; height: 20px; flex: 0 0 auto; color: var(--yellow); }
.scope-note b { color: var(--on-head); }

/* --- 18. PAGINATION + MISC ----------------------------------------------- */
.pager { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-7); }
.pager a, .pager span {
  min-width: 46px; padding: .55rem .8rem; text-align: center;
  font-family: var(--mono); font-size: .85rem; text-decoration: none; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--ink);
}
.pager .current { background: var(--blue); color: #fff; }

.page-numbers {
  display: inline-block; min-width: 46px; padding: .55rem .8rem; text-align: center;
  font-family: var(--mono); font-size: .85rem; text-decoration: none; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--ink);
}
.page-numbers.current { background: var(--blue); color: #fff; }
.page-numbers.dots { border-color: transparent; box-shadow: none; background: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 18b. AUTHOR, RELATED, RAIL WIDGETS --------------------------------- */
.authorbox {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-8); padding: var(--sp-5);
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r); box-shadow: 0 var(--lift) 0 var(--ink);
}
.authorbox__title {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
}
.authorbox__bio { font-size: 1rem; line-height: 1.6; }
.authorbox__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-family: var(--mono); font-size: var(--step--1); }
.byline__author { font-weight: 600; color: var(--ink); }

.related { display: grid; gap: var(--sp-4); }
.related a {
  display: flex; gap: var(--sp-4); align-items: center; text-decoration: none; color: var(--ink);
  padding: .6rem; border: 2px solid var(--line); border-radius: var(--r-sm);
}
.related a:hover { border-color: var(--ink); background: var(--card); }
.related img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }

.rail__widget {
  padding: var(--sp-5); background: var(--card);
  border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink);
}

/* --- 18c. ARCHIVE + CATEGORY HEADS -------------------------------------- */
.cat-head { padding-block: var(--sp-7) var(--sp-6); }
.cat-head__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.cat-head h1 { margin-top: var(--sp-3); }
.cat-head .description { color: var(--ink-soft); }

.cat-card {
  padding: var(--sp-5); background: var(--card);
  border: 2px solid var(--ink); border-radius: var(--r); box-shadow: 0 var(--lift) 0 var(--ink);
}
.cat-card__hd {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: var(--sp-3);
}

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--sp-5); }

.rule-gentle { border: 0; border-top: 2px solid var(--ink); margin: 0; width: 64px; }
.band--wash { background: var(--blue-wash); }
.separator { color: var(--ink-soft); opacity: .6; }

/* Fibre swatches — only rendered for terms that carry a colour in term meta. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.swatch {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .8rem .4rem .4rem; text-decoration: none; color: var(--ink);
  background: var(--card); border: 2px solid var(--ink);
  border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--mono); font-size: .8rem;
}
.swatch i { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--ink); flex: 0 0 auto; }
.swatch code { font-size: .72rem; color: var(--ink-soft); }

/* A single symbol with its caption, used in label rows. */
.sym-cell {
  display: grid; place-items: center; gap: .45rem; padding: .5rem;
  text-decoration: none; color: var(--ink); text-align: center;
  border-radius: var(--r-sm);
}
.sym-cell .sym { width: 38px; height: 38px; }
.sym-cell span {
  font-family: var(--mono); font-size: .64rem; line-height: 1.3;
  letter-spacing: .05em; color: var(--ink-soft);
}
a.sym-cell:hover { background: var(--blue-wash); color: var(--ink); }
.tag__symbols { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.list__syms { display: flex; gap: .4rem; }
.list__syms .sym { width: 22px; height: 22px; }
.carelabel__note {
  padding-top: var(--sp-4); border-top: 2px dashed var(--line);
  font-size: .96rem; line-height: 1.55; color: var(--ink-soft);
}
.carelabel__note b { color: var(--ink); }

/* --- 18d. THE LABEL DECODER --------------------------------------------- */
/* The site's one interactive tool. Chips are the same physical object as
   everywhere else; pressing one latches it rather than merely hovering. */
.tool {
  margin-block: var(--sp-7); padding: var(--sp-6);
  background: var(--card); border: 2px solid var(--ink);
  border-radius: var(--r-lg); box-shadow: 0 var(--lift) 0 var(--ink);
}
.tool__hd { margin-bottom: var(--sp-5); }
.tool__kicker {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.tool__hd h2 { margin: .4rem 0 .5rem; border: 0; padding: 0; display: block; }
.tool__hd h2::before { content: none; }
.tool__sub { color: var(--ink-soft); font-size: 1rem; }
.tool__grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.tool__chip {
  display: grid; place-items: center; gap: .5rem; padding: .8rem .4rem;
  cursor: pointer; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: 0 4px 0 var(--ink);
  font-family: var(--mono); font-size: .64rem; line-height: 1.3; text-align: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.tool__chip .sym { width: 34px; height: 34px; }
.tool__chip:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.tool__chip[aria-pressed="true"] {
  background: var(--yellow); transform: translateY(4px); box-shadow: 0 0 0 var(--ink);
}
.tool__out {
  margin-top: var(--sp-5); padding: var(--sp-5);
  background: var(--ink); color: var(--paper);
  border-radius: var(--r); min-height: 96px;
}
.tool__out b { color: var(--yellow); font-family: var(--sans); font-weight: 500; }
.tool__out .sym { color: var(--paper); }
.tool__hint { margin-top: var(--sp-4); font-family: var(--mono); font-size: var(--step--1); color: var(--ink-soft); }
.tool__out .tool__hint { color: var(--on-head-2); margin: 0; }
.tool__out h3 { color: var(--yellow); font-size: var(--step-2); }
.tool__out p { margin-top: .5rem; font-size: 1rem; line-height: 1.55; }
.tool__out--warn { background: var(--red-d); }
.tool__out--warn h3 { color: #fff; }
.tool .fca-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tool .fca-field { display: grid; gap: .4rem; }
.tool .fca-help { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-soft); }

/* --- 18e. FORMS AND COMMENTS -------------------------------------------- */
.form-field { display: grid; gap: .45rem; margin-bottom: var(--sp-4); }
.form-field label {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.form-field :is(input, textarea) {
  width: 100%; padding: .7rem .9rem; background: var(--card); color: var(--ink);
  border: 2px solid var(--line-ui); border-radius: var(--r-sm);
}
.form-field :is(input, textarea):focus-visible { border-color: var(--ink); }
.comments { margin-top: var(--sp-8); }
.comments ol { display: grid; gap: var(--sp-5); }

.lang { display: flex; gap: .3rem; }
.lang a {
  padding: .3rem .55rem; border-radius: 8px;
  font-family: var(--mono); font-size: .72rem; color: var(--on-head-2); text-decoration: none;
}
.lang a[aria-current="true"] { background: var(--blue); color: #fff; }

/* --- 19. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1180px) {
  .doc { grid-template-columns: 210px minmax(0, 1fr); }
  .doc .rail, .doc__rail { display: none; }
}
@media (max-width: 900px) {
  :root { --sp-9: 4rem; --sp-8: 3rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__tag { transform: none; box-shadow: 0 10px 0 var(--blue-d); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__2, .bento__tall { grid-column: auto; grid-row: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc__toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; }
}
@media (max-width: 720px) {
  .burger { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: .25rem; margin: 0; padding: var(--sp-4);
    background: var(--head-2); border-bottom: 2px solid var(--ink);
  }
  .nav.nav--open { display: flex; }
  .nav a { width: 100%; }
  .rows li a { grid-template-columns: 84px minmax(0, 1fr); }
  .rows li a > :last-child:not(div) { display: none; }
}
@media (max-width: 560px) {
  :root { --lift: 5px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .toc ol { grid-template-columns: 1fr; }
  .prose h2 { grid-template-columns: 1fr; gap: .5rem; }
  .prose h2::before { justify-self: start; }
  .prose .steps > li { padding-left: var(--sp-5); padding-top: 3.6rem; }
  .prose .steps > li::before { top: var(--sp-4); left: var(--sp-4); }
  .hero__stats { gap: var(--sp-5); }
}

/* --- 20. MOTION ---------------------------------------------------------- */
/* The only entrance animation: cards rise slightly. Translation, never
   opacity on the LCP element — a hero that waits for JS destroys the metric. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- 21. PRINT ----------------------------------------------------------- */
@media print {
  .site-head, .site-foot, .doc__toc, .rail, .ad, .burger { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .doc { grid-template-columns: 1fr; }
  .chip, .btn, .card, .note, .spec, .toc, .carelabel { box-shadow: none; }
}