/* Kiln crew. Bots stand on the hero's own bottom rule; the page ground shows through.
   Outlines stay in the hairline range of the UI (ash / charcoal) with ember as an accent.
   js/kiln-crew.js moves them with transform and opacity only. prefers-reduced-motion
   draws one still and never starts the loop. */

.kiln-crew {
  --kc-ink: #141210;
  --kc-ember-sh: #b44f1c;
  --kc-clay-sh: #ad8151;
  --kc-bone-sh: #d4cdc2;
  --kc-ash-sh: #948879;
  --kc-charcoal-sh: #1d1a17;
  --kc-brick-sh: #6b2918;
}

/* Floor reserved under the title, on the section's existing rule.
   Height tracks the H1 so the crew stays about 1–2× the cap height. */
.about-hero,
.page-intro {
  position: relative;
  overflow: hidden;
  --kc-floor: calc(var(--kc-h1, 2.2rem) * 1.55);
}
.about-hero {
  padding-bottom: calc(0.85rem + var(--kc-floor));
}
.page-intro {
  padding-bottom: calc(0.7rem + var(--kc-floor));
  border-bottom: 1px solid var(--sill);
}

.kc-hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--kc-floor);
  overflow: hidden;
  pointer-events: none;
}
.kc-hero svg,
.kc-vig svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* One small toaster beside the Submit control. No panel — the page ground shows through. */
.kc-vig-row {
  display: flex;
  align-items: flex-end;
  align-self: flex-start;
  gap: 0.7rem;
}
.kc-vig {
  width: 40px;
  height: 46px;
  flex: none;
  pointer-events: none;
}
.submit-cta-wrap.has-kc-vig {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
}

/* —— Paint. Strokes are hairline at hero scale; ember is a flat accent. —— */
.kiln-crew svg { stroke-linejoin: round; stroke-linecap: round; }
.kiln-crew .ol { stroke: var(--ash); stroke-width: 2.15; }
.kiln-crew .nof { fill: none; stroke: var(--ash); stroke-width: 2.15; }
.kiln-crew .nof2 { fill: none; stroke: var(--clay); stroke-width: 1.6; }
.bf { fill: var(--c); }
.bs { fill: var(--cs); }
.lo { fill: none; stroke: var(--ash); stroke-width: 8.2; }
.li { fill: none; stroke: var(--c); stroke-width: 6.4; }
.ink { fill: var(--kc-ink); }
.kiln-crew .eyew { fill: var(--bone); stroke: var(--charcoal); }
.fo { fill: var(--bone); }
.fa { fill: var(--ash); }
.fk { fill: var(--charcoal); }
.fe { fill: var(--ember); }
.fb { fill: var(--brick); }
.fs { fill: var(--sill); }
.fc2 { fill: var(--clay); }
.fcl { fill: var(--clay); }
.fst { fill: var(--clay); }
.fsw { fill: var(--bone); stroke: var(--ash); stroke-width: 1.2 !important; }
.ftg { fill: var(--ember); }
.fts { fill: var(--kc-clay-sh); }
.fti { fill: var(--clay); }
.bsh { fill: var(--kc-brick-sh); }
.slot { opacity: 1; }
.brow { fill: none; stroke: var(--charcoal); stroke-width: 2.1; }
.mline { fill: none; stroke: var(--charcoal); stroke-width: 1.9; }
.thin { fill: none; stroke: var(--charcoal); stroke-width: 1.3; }
.thin2 { fill: none; stroke: var(--ash); stroke-width: 1.2; opacity: 0.7; }
.hl { fill: none; stroke: var(--bone); stroke-width: 1.4; opacity: 0.45; }
.hl2 { fill: none; stroke: var(--ash); stroke-width: 1.3; opacity: 0.55; }
.tgo { fill: none; stroke: var(--ash); stroke-width: 3.6; }
.tg { fill: none; stroke: var(--charcoal); stroke-width: 1.8; }
.mugh { fill: none; stroke: var(--ash); stroke-width: 2.4; }
.steam { fill: none; stroke: var(--ash); stroke-width: 1.4; }
.sz { fill: none; stroke: var(--clay); stroke-width: 1.5; }
.dl { fill: none; stroke: var(--ember); stroke-width: 1.6; }
.puff { fill: var(--bone); }
.kc-shd { fill: var(--ash); }
.t-bean .li { stroke: #a08a72; }
.t-bean .lo { stroke: #8a7a68; }
.t-bean { --c: #a08a72 !important; --cs: #8a7a68 !important; }
.t-bean .brow,
.t-bean .mline { stroke: var(--charcoal); }
.t-bean .nof { stroke: var(--ground); }
.t-bean .p-torso .bf { fill: #a08a72; stroke: var(--bone); stroke-width: 7; }

/* Square and clover sit a step under the ember toaster: bone-ward and clay-ward, still dull. */
.t-square .lo { stroke: #c9c1b4; }
.t-square .nof { stroke: var(--ground); }
.t-clover {
  --c: #c4b7a4 !important;
  --cs: #a89078 !important;
}
.t-clover .lo { stroke: #b0a494; }
.t-clover .nof { stroke: var(--ground); }
.t-bean .p-handL .bf,
.t-bean .p-handR .bf { fill: var(--bone); stroke: var(--charcoal); }

/* Workshop props sit on the rule. Iron is charcoal, wood is clay, heat is ember. */
.kc-shop .ol { stroke: var(--bone); stroke-width: 2.2; }
.kc-shop .hl { opacity: 0.9; stroke-width: 2; }
.kc-shop .wood { fill: var(--clay); stroke: var(--ground); stroke-width: 2.6; }
.kc-shop .woodline { fill: none; stroke: var(--clay); stroke-width: 3.4; }
.kc-shop .brickline { fill: none; stroke: var(--clay); stroke-width: 1.6; }
.p-lamp { stroke: var(--ground); stroke-width: 1.6; }
.kc-hero .fx-sparks .dl { stroke-width: 2.8; }
.kc-mouth { fill: var(--ember); }
.kc-hero .t-toaster,
.kc-vig .t-toaster { pointer-events: auto; cursor: pointer; touch-action: manipulation; }

/* —— Pause control in the footer —— */
.kiln-crew-pause {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
  background: none;
  border: 1px solid var(--sill);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
}
.kiln-crew-pause:hover { color: var(--bone); }
.kiln-crew-pause[aria-pressed="true"] { color: var(--clay); border-color: var(--clay); }
.kiln-crew-pause:focus-visible { outline: 1px solid var(--ember); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .kiln-crew-pause { display: none; }
}
.kiln-crew .ol2 { stroke: var(--ash); stroke-width: 1.4; }

/* —— Seams: crawlers and break-and-fix (overlay only; never takes pointer events) —— */
.kiln-crew.kc-seams {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.kc-seam-fx { position: absolute; left: 0; top: 0; overflow: visible; }
.kc-clip { position: absolute; overflow: hidden; pointer-events: none; }
.kc-clip.kc-open { overflow: visible; }
.kc-cr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.kc-slip { display: inline-block; transform-origin: 30% 90%; }
.kc-crack .cov, .kc-peel .hole { fill: var(--ground); }
.kc-crack .seg { fill: none; stroke: var(--bone); stroke-width: 2.2; }
.kc-crack .crumb { fill: var(--ash); }
.kc-crack .tape { fill: var(--clay); stroke: var(--bone); stroke-width: 1.2; }
.kc-peel .flap { stroke: var(--sill); stroke-width: 1.4; }