/* ============================================================================
   CrochetCalc Homepage — Wave 1C
   ============================================================================

   Route-scoped: linked only from index.html, so no other page pays for it.
   Replaces the 14,443-byte homepage-only <style> block that was inlined into
   the HTML and therefore re-downloaded on every visit; this file is cached.

   Built entirely on the Wave 1A tokens (--cc-*) and the Wave 1B shell
   (--ccs-*). It defines no colour, spacing step or type size of its own.

   THE DESIGN PROBLEM
   ------------------
   The old homepage expressed every group as a rounded white card, so a tool,
   a category, a guide and a trust point all carried identical visual weight
   and the page read as a wall. Hierarchy here comes from typography, rule
   weight and surface tone instead - cards are used once, for the featured
   tools, where lifting them off the page is the point.

   ICONS
   -----
   The old homepage used 33 emoji as its icon system. These are CSS masks in
   the Wave 1A icon language (24x24 grid, 1.5 stroke, round caps), defined once
   here so they cost nothing per page and inherit currentColor.
   ========================================================================= */

/* ==========================================================================
   1. SHARED SECTION FURNITURE
   ========================================================================== */

.home-section { padding-block: var(--cc-space-8); }
.home-section--tight { padding-block: var(--cc-space-7); }
.home-section--surface { background: var(--cc-color-surface); border-block: 1px solid var(--cc-color-border); }
.home-section--subtle { background: var(--cc-color-surface-subtle); border-block: 1px solid var(--cc-color-border); }

.home-wrap {
  width: 100%;
  max-width: var(--ccs-nav-max);
  margin-inline: auto;
  padding-inline: var(--cc-space-5);
}
.home-wrap--narrow { max-width: var(--cc-container-content); }

.home-head { max-width: 62ch; margin-bottom: var(--cc-space-6); }
.home-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin: 0 0 var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-brand-strong);
}
.home-head h2 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-3xl);
  line-height: var(--cc-line-heading);
  letter-spacing: var(--cc-tracking-tight);
  font-weight: var(--cc-weight-semibold);
  margin: 0 0 var(--cc-space-3);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.home-head p {
  margin: 0;
  font-size: var(--cc-text-lg);
  line-height: 1.55;
  color: var(--cc-color-text-secondary);
}

/* ==========================================================================
   2. HERO
   Asymmetric 57/43. Fixed min-height on the visual column so the SVG cannot
   shift the fold as it decodes.
   ========================================================================== */

.home-hero {
  padding-block: var(--cc-space-8) var(--cc-space-7);
  border-bottom: 1px solid var(--cc-color-border);
  background:
    linear-gradient(180deg, var(--cc-color-surface) 0%, var(--cc-color-canvas) 100%);
}
.home-hero__grid {
  display: grid;
  gap: var(--cc-space-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1024px) {
  .home-hero__grid { grid-template-columns: 57fr 43fr; gap: var(--cc-space-8); }
}

.home-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin: 0 0 var(--cc-space-4);
  padding: 5px var(--cc-space-3) 5px var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-brand-strong);
  background: var(--cc-color-brand-soft);
  border: 1px solid #E7D3CB;
  border-radius: var(--cc-radius-pill);
}
.home-hero h1 {
  font-family: var(--cc-font-display);
  font-size: clamp(2.1rem, 1.6rem + 2.1vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--cc-weight-bold);
  color: var(--cc-color-text);
  margin: 0 0 var(--cc-space-4);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.home-hero h1 em {
  display: block;
  font-style: italic;
  color: var(--cc-color-brand-strong);
}
.home-hero__lede {
  max-width: 56ch;
  margin: 0 0 var(--cc-space-5);
  font-size: var(--cc-text-lg);
  line-height: 1.6;
  color: var(--cc-color-text-secondary);
}
.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
  margin-bottom: var(--cc-space-5);
}

/* Trust line. Only defensible statements - see the copy in index.html. */
.home-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2) var(--cc-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
}
.home-trust li { display: flex; align-items: center; gap: var(--cc-space-2); }
.home-trust li::before {
  content: "";
  width: 14px; height: 14px;
  flex: 0 0 auto;
  background-color: var(--cc-color-sage-strong);
  -webkit-mask: var(--home-ic-check) center / contain no-repeat;
  mask: var(--home-ic-check) center / contain no-repeat;
}

.home-hero__figure { margin: 0; min-width: 0; }
.home-hero__frame {
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-lg);
  background: var(--cc-color-surface);
  padding: var(--cc-space-4);
  box-shadow: var(--cc-shadow-sm);
}
.home-hero__frame img { display: block; width: 100%; height: auto; }
.home-hero__caption {
  margin: var(--cc-space-3) 0 0;
  font-size: var(--cc-text-sm);
  line-height: 1.5;
  color: var(--cc-color-text-secondary);
}
.home-hero__caption b { color: var(--cc-color-text); font-weight: var(--cc-weight-semibold); }

/* ==========================================================================
   3. QUICK TASK FINDER
   Compact rows, not a nine-card wall. Two columns from 768px.
   ========================================================================== */

.home-tasks {
  display: grid;
  gap: 0 var(--cc-space-6);
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--cc-color-border);
}
@media (min-width: 768px) { .home-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.home-task {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  min-height: 60px;
  padding: var(--cc-space-3) var(--cc-space-2);
  border-bottom: 1px solid var(--cc-color-border);
  text-decoration: none;
  color: var(--cc-color-text);
}
.home-task:hover { background: var(--cc-color-surface); }
.home-task__icon {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
  color: var(--cc-color-data);
}
.home-task__text { min-width: 0; }
.home-task__q {
  display: block;
  font-size: 1rem;
  font-weight: var(--cc-weight-medium);
  line-height: 1.3;
}
.home-task:hover .home-task__q { text-decoration: underline; text-decoration-thickness: 2px; }
.home-task__tool {
  display: block;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
  margin-top: 2px;
}
.home-task__arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--cc-color-brand-strong);
  transition: transform var(--cc-duration-base) var(--cc-ease-standard);
}
.home-task:hover .home-task__arrow { transform: translateX(3px); }

/* ==========================================================================
   4. FEATURED TOOLS
   The one place cards are used, because lifting these off the page is the
   point of the section.
   ========================================================================== */

.home-featured {
  display: grid;
  gap: var(--cc-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
}
/* Six tools: auto-fit gave 4+2 on wide screens, which leaves a ragged last
   row. Three columns divides evenly. */
@media (min-width: 1000px) { .home-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-tool {
  display: flex;
  flex-direction: column;
  padding: var(--cc-space-5);
  background: var(--cc-color-surface);
  border: 1px solid var(--cc-color-border);
  border-top: 3px solid var(--cc-color-brand);
  border-radius: var(--cc-radius-lg);
}
.home-tool__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: var(--cc-space-3);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-brand-soft);
  color: var(--cc-color-brand-hover);
}
.home-tool h3 {
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-weight-semibold);
  line-height: 1.25;
  margin: 0 0 var(--cc-space-2);
}
.home-tool p {
  margin: 0 0 var(--cc-space-4);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cc-color-text-secondary);
}
.home-tool__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  min-height: 44px;
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-brand-strong);
  text-decoration: none;
}
.home-tool__cta::after {
  content: "\2192";
  transition: transform var(--cc-duration-base) var(--cc-ease-standard);
}
.home-tool__cta:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.home-tool__cta:hover::after { transform: translateX(3px); }

/* ==========================================================================
   5. CATEGORY BLOCKS
   Deliberately NOT cards. A category is a headed region with a rule, a short
   explanation, a compact list of tools and one supporting diagram.
   ========================================================================== */

.home-cat { padding-block: var(--cc-space-6); border-top: 1px solid var(--cc-color-border); }
.home-cat:first-of-type { border-top: 0; }
.home-cat__grid {
  display: grid;
  gap: var(--cc-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .home-cat__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cc-space-7); align-items: start; }
  .home-cat--reverse .home-cat__body { order: 2; }
}
.home-cat__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  margin: 0 0 var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
}
.home-cat h3 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-weight-semibold);
  line-height: 1.25;
  margin: 0 0 var(--cc-space-3);
  overflow-wrap: break-word;
}
.home-cat__note {
  margin: 0 0 var(--cc-space-4);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cc-color-text-secondary);
  max-width: 54ch;
}
.home-cat__list { list-style: none; margin: 0; padding: 0; }
.home-cat__list li { border-top: 1px solid var(--cc-color-border); }
.home-cat__list li:first-child { border-top: 1px solid var(--cc-color-border-strong); }
.home-toollink {
  display: flex;
  align-items: baseline;
  gap: var(--cc-space-3);
  min-height: 52px;
  padding: var(--cc-space-2) var(--cc-space-1);
  color: var(--cc-color-text);
  text-decoration: none;
}
.home-toollink:hover { background: var(--cc-color-surface); }
.home-toollink b {
  font-weight: var(--cc-weight-medium);
  font-size: 1rem;
  flex: 0 0 auto;
}
.home-toollink:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.home-toollink span {
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
  min-width: 0;
}
.home-toollink em {
  margin-left: auto;
  font-style: normal;
  color: var(--cc-color-brand-strong);
  flex: 0 0 auto;
}
@media (max-width: 599px) {
  .home-toollink { flex-direction: column; align-items: stretch; gap: 2px; }
  .home-toollink em { display: none; }
}

.home-cat__figure { margin: 0; min-width: 0; }
.home-cat__figure img { display: block; width: 100%; height: auto; }
.home-cat__figure figcaption {
  margin-top: var(--cc-space-3);
  font-size: var(--cc-text-sm);
  line-height: 1.5;
  color: var(--cc-color-text-secondary);
}

/* ==========================================================================
   6. KNOWLEDGE GRAPH
   <details> based, so every explanation is reachable with JavaScript
   disabled and the whole section is keyboard operable with no custom code.
   ========================================================================== */

.home-graph {
  display: grid;
  gap: var(--cc-space-3);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: gnode;
}
@media (min-width: 900px) { .home-graph { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.home-node {
  counter-increment: gnode;
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius-md);
  background: var(--cc-color-surface);
}
.home-node[open] { border-color: var(--cc-color-border-control); }
.home-node__head {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  min-height: 56px;
  padding: var(--cc-space-3) var(--cc-space-4);
  cursor: pointer;
  list-style: none;
  font-weight: var(--cc-weight-semibold);
}
.home-node__head::-webkit-details-marker { display: none; }
.home-node__head::before {
  content: counter(gnode, decimal-leading-zero);
  font-family: var(--cc-font-mono);
  font-size: var(--cc-text-xs);
  color: var(--cc-color-text-muted);
  flex: 0 0 auto;
}
.home-node__chev { margin-left: auto; flex: 0 0 auto; transition: transform var(--cc-duration-base) var(--cc-ease-standard); }
.home-node[open] .home-node__chev { transform: rotate(180deg); }
.home-node__body {
  padding: 0 var(--cc-space-4) var(--cc-space-4);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cc-color-text-secondary);
}
.home-node__body p { margin: 0 0 var(--cc-space-3); }
.home-node__links { display: flex; flex-wrap: wrap; gap: var(--cc-space-2) var(--cc-space-4); }
.home-node__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-weight-medium);
  color: var(--cc-color-brand-strong);
  text-decoration: none;
}
.home-node__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* The chain reads left to right on desktop and top to bottom on mobile. */
.home-graph__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cc-space-2);
  margin: 0 0 var(--cc-space-5);
  padding: 0;
  list-style: none;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-secondary);
}
.home-graph__flow li { display: flex; align-items: center; gap: var(--cc-space-2); }
.home-graph__flow li + li::before { content: "\2192"; color: var(--cc-color-text-muted); }
.home-graph__flow b { font-weight: var(--cc-weight-semibold); color: var(--cc-color-text); }

/* ==========================================================================
   7. FEATURED REFERENCE (hook size chart)
   ========================================================================== */

.home-ref__grid {
  display: grid;
  gap: var(--cc-space-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) { .home-ref__grid { grid-template-columns: 42fr 58fr; gap: var(--cc-space-7); } }
.home-ref__figure { margin: 0; min-width: 0; grid-row: 2; }
@media (min-width: 900px) { .home-ref__figure { grid-row: auto; grid-column: 2; } }
.home-ref__figure img { display: block; width: 100%; height: auto; }

.home-ref__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--cc-space-4) 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.home-ref__table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--cc-space-2);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
}
.home-ref__table th, .home-ref__table td {
  padding: var(--cc-space-2) var(--cc-space-3);
  text-align: left;
  border-bottom: 1px solid var(--cc-color-border);
}
.home-ref__table thead th {
  font-size: var(--cc-text-xs);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
  border-bottom: 2px solid var(--cc-color-border-control);
}
.home-ref__actions { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); align-items: center; }

/* ==========================================================================
   8. REFERENCE LIBRARY  (editorial lists, not a blog feed)
   ========================================================================== */

.home-library {
  display: grid;
  gap: var(--cc-space-6) var(--cc-space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.home-libcol h3 {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-family: var(--cc-font-body);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-weight-semibold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  color: var(--cc-color-text-muted);
  margin: 0 0 var(--cc-space-2);
  padding-bottom: var(--cc-space-2);
  border-bottom: 2px solid var(--cc-color-border-control);
}
.home-libcol ul { list-style: none; margin: 0; padding: 0; }
.home-libcol li { border-bottom: 1px solid var(--cc-color-border); }
.home-libcol a {
  display: block;
  min-height: 48px;
  padding: var(--cc-space-2) 0;
  color: var(--cc-color-text);
  text-decoration: none;
}
.home-libcol a:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.home-libcol b { display: block; font-size: 0.95rem; font-weight: var(--cc-weight-medium); line-height: 1.3; }
.home-libcol span { display: block; font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); margin-top: 1px; }

/* ==========================================================================
   9. TRUST / METHODOLOGY
   ========================================================================== */

.home-trustgrid {
  display: grid;
  gap: var(--cc-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.home-trustitem h3 {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-family: var(--cc-font-body);
  font-size: 1.05rem;
  font-weight: var(--cc-weight-semibold);
  margin: 0 0 var(--cc-space-2);
}
.home-trustitem h3 .home-i { color: var(--cc-color-sage-strong); }
.home-trustitem p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--cc-color-text-secondary); }

/* Counts are supporting evidence, not the value proposition, so they sit
   below the methodology rather than above it - and the standards statement is
   a sentence, not a fourth number pretending to be a metric. */
.home-counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-6);
  margin: var(--cc-space-6) 0 0;
  padding: var(--cc-space-5) 0 0;
  border-top: 1px solid var(--cc-color-border);
  list-style: none;
}
.home-counts b {
  display: block;
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cc-color-text);
}
.home-counts span { display: block; font-size: var(--cc-text-sm); color: var(--cc-color-text-muted); margin-top: 4px; }
.home-standards {
  margin: var(--cc-space-4) 0 0;
  font-size: var(--cc-text-sm);
  line-height: 1.55;
  color: var(--cc-color-text-muted);
  max-width: 70ch;
}

/* ==========================================================================
   10. FINAL CTA
   ========================================================================== */

.home-final { text-align: center; }
.home-final h2 {
  font-family: var(--cc-font-display);
  font-size: var(--cc-text-3xl);
  font-weight: var(--cc-weight-bold);
  line-height: 1.15;
  letter-spacing: var(--cc-tracking-tight);
  margin: 0 0 var(--cc-space-3);
  text-wrap: balance;
}
.home-final p { margin: 0 auto var(--cc-space-5); max-width: 52ch; font-size: var(--cc-text-lg); color: var(--cc-color-text-secondary); }
.home-final__cta { display: flex; flex-wrap: wrap; gap: var(--cc-space-3); justify-content: center; }
.home-final__terms {
  margin: var(--cc-space-6) 0 0;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-text-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   11. ICON LANGUAGE  (replaces 33 emoji)
   Wave 1A contract: 24x24 grid, 1.5 stroke, round caps and joins, no fill.
   ========================================================================== */

.home-i {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.home-i--sm { width: 15px; height: 15px; }
.home-i--lg { width: 24px; height: 24px; }

.home-i--yardage  { -webkit-mask-image: var(--home-ic-yardage);  mask-image: var(--home-ic-yardage); }
.home-i--gauge    { -webkit-mask-image: var(--home-ic-gauge);    mask-image: var(--home-ic-gauge); }
.home-i--stitches { -webkit-mask-image: var(--home-ic-stitches); mask-image: var(--home-ic-stitches); }
.home-i--hook     { -webkit-mask-image: var(--home-ic-hook);     mask-image: var(--home-ic-hook); }
.home-i--square   { -webkit-mask-image: var(--home-ic-square);   mask-image: var(--home-ic-square); }
.home-i--hat      { -webkit-mask-image: var(--home-ic-hat);      mask-image: var(--home-ic-hat); }
.home-i--shape    { -webkit-mask-image: var(--home-ic-shape);    mask-image: var(--home-ic-shape); }
.home-i--price    { -webkit-mask-image: var(--home-ic-price);    mask-image: var(--home-ic-price); }
.home-i--time     { -webkit-mask-image: var(--home-ic-time);     mask-image: var(--home-ic-time); }
.home-i--blanket  { -webkit-mask-image: var(--home-ic-blanket);  mask-image: var(--home-ic-blanket); }
.home-i--counter  { -webkit-mask-image: var(--home-ic-counter);  mask-image: var(--home-ic-counter); }
.home-i--book     { -webkit-mask-image: var(--home-ic-book);     mask-image: var(--home-ic-book); }
.home-i--check    { -webkit-mask-image: var(--home-ic-check);    mask-image: var(--home-ic-check); }
.home-i--input    { -webkit-mask-image: var(--home-ic-input);    mask-image: var(--home-ic-input); }
.home-i--method   { -webkit-mask-image: var(--home-ic-method);   mask-image: var(--home-ic-method); }
.home-i--mobile   { -webkit-mask-image: var(--home-ic-mobile);   mask-image: var(--home-ic-mobile); }
.home-i--source   { -webkit-mask-image: var(--home-ic-source);   mask-image: var(--home-ic-source); }
.home-i--arrow    { -webkit-mask-image: var(--home-ic-arrow);    mask-image: var(--home-ic-arrow); }

:root {
  --home-ic-yardage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='12' r='6.5'/%3E%3Cpath d='M4.6 8.2c3 1.5 6 3 8.4 6.2M6 5.9c2.3 2.3 4.6 4.6 6.1 8.4'/%3E%3Cpath d='M17 6h4M19 4v4M17 18h4'/%3E%3C/svg%3E");
  --home-ic-gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='1.5'/%3E%3Cpath d='M9 3.5v17M15 3.5v17M3.5 9h17M3.5 15h17'/%3E%3C/svg%3E");
  --home-ic-stitches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8v8M8 8v8M12 8v8M16 8v8M20 8v8M2 12h20'/%3E%3C/svg%3E");
  --home-ic-hook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v11a4 4 0 0 0 8 0'/%3E%3Cpath d='M17 14a2.5 2.5 0 0 1-5 0'/%3E%3Cpath d='M7 3h4'/%3E%3C/svg%3E");
  --home-ic-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  --home-ic-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15a7 7 0 0 1 14 0'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M12 8V5'/%3E%3C/svg%3E");
  --home-ic-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18h16'/%3E%3Cpath d='M7 15V9M7 9 4.5 11.5M7 9l2.5 2.5'/%3E%3Cpath d='M17 9v6M17 15l-2.5-2.5M17 15l2.5-2.5'/%3E%3C/svg%3E");
  --home-ic-price: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V13M10 20V7M16 20v-5M22 20H2'/%3E%3C/svg%3E");
  --home-ic-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
  --home-ic-blanket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M7 13h4M7 16h8'/%3E%3C/svg%3E");
  --home-ic-counter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2'/%3E%3Cpath d='M8 7h8M8 12h3M13 12h3M8 16.5h3M13 16.5h3'/%3E%3C/svg%3E");
  --home-ic-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h6a2.5 2.5 0 0 1 2 2.5v12a2 2 0 0 0-2-1.5H4z'/%3E%3Cpath d='M20 4.5h-6a2.5 2.5 0 0 0-2 2.5v12a2 2 0 0 1 2-1.5h6z'/%3E%3C/svg%3E");
  --home-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
  --home-ic-input: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11v2'/%3E%3C/svg%3E");
  --home-ic-method: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12'/%3E%3Cpath d='M10 4v6l-4.6 8A1.5 1.5 0 0 0 6.7 20h10.6a1.5 1.5 0 0 0 1.3-2L14 10V4'/%3E%3C/svg%3E");
  --home-ic-mobile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");
  --home-ic-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 20 7v5.5c0 4.3-3.2 7.3-8 8.5-4.8-1.2-8-4.2-8-8.5V7z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --home-ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E");
}

/* ==========================================================================
   12. FOCUS, MOTION, PRINT
   ========================================================================== */

.home-task:focus-visible,
.home-tool__cta:focus-visible,
.home-toollink:focus-visible,
.home-node__head:focus-visible,
.home-node__links a:focus-visible,
.home-libcol a:focus-visible {
  outline: var(--cc-focus-outer-width) solid var(--cc-color-focus);
  outline-offset: var(--cc-focus-offset);
  box-shadow: 0 0 0 var(--cc-focus-inner-width) var(--cc-color-focus-inner);
  border-radius: var(--cc-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .home-task__arrow, .home-tool__cta::after, .home-node__chev { transition: none !important; }
}

@media print {
  .home-hero__figure, .home-cat__figure, .home-ref__figure,
  .home-final__cta, .home-hero__cta { display: none !important; }
  .home-node__body { display: block !important; }
}