/**
 * AICT homepage "craft" pass  [2026-06-14]
 * Extends the tool-page "Workbench" aesthetic (cream graph paper, ink, ember,
 * Fraunces display) to the homepage so first-time visitors meet the same crafted
 * identity they'll see on the tool runner. CSS-ONLY, LIGHT mode only, scoped to
 * .aict-homepage. Touches no links/forms/CTAs/markup structure — fully reversible
 * by removing this file's enqueue. The hero + dark workflows section are untouched
 * (they keep their own backgrounds); only the capabilities+agents showcase band,
 * the section display titles, the showcase cards, and the category pills change.
 */
:root{
  --wb-paper:#f6efe2; --wb-card:#fffdf8; --wb-ink:#211b16; --wb-ink-soft:#5b5046;
  --wb-line:#cdbfa6; --wb-ember:#d24516; --wb-ember-deep:#a8330c;
}

/* ===== section display titles → Fraunces (match tool pages) ===== */
html:not([data-theme="dark"]) .aict-homepage .aict-hp-section-title{
  font-family:'Fraunces',Georgia,serif !important;
  font-optical-sizing:auto;
  font-weight:900 !important; letter-spacing:-.015em;
  color:var(--wb-ink) !important;
}

/* ===== "crafted showcase" band: capabilities + agents on cream graph paper =====
   Both sections share .aict-hp-craft; the :has()/+ rules collapse the inner border
   so the two render as one continuous band (graceful fallback = double hairline). */
html:not([data-theme="dark"]) .aict-homepage .aict-hp-craft{
  background:var(--wb-paper) !important;
  background-image:
    linear-gradient(#e3d7be 1px,transparent 1px),
    linear-gradient(90deg,#e3d7be 1px,transparent 1px) !important;
  background-size:30px 30px,30px 30px !important;
  border-top:2px solid var(--wb-ink) !important;
  border-bottom:2px solid var(--wb-ink) !important;
}
html:not([data-theme="dark"]) .aict-homepage .aict-hp-craft:has(+ .aict-hp-craft){border-bottom:none !important;}
html:not([data-theme="dark"]) .aict-homepage .aict-hp-craft + .aict-hp-craft{border-top:none !important;}
/* body copy + subtitles inside the band → warm ink-soft (was slate) */
html:not([data-theme="dark"]) .aict-homepage .aict-hp-craft p{color:var(--wb-ink-soft) !important;}

/* ===== letterpress cards (capability + agent) ===== */
html:not([data-theme="dark"]) .aict-homepage .aict-cap-card,
html:not([data-theme="dark"]) .aict-homepage .aict-hp-agent-card{
  background:var(--wb-card) !important;
  border:2px solid var(--wb-ink) !important;
  border-radius:14px !important;
  box-shadow:6px 6px 0 var(--wb-ink) !important;
  transition:transform .14s ease, box-shadow .14s ease !important;
}
/* beat the inline .aict-cap-card:hover style block AND the agent-card inline JS hover
   (stylesheet !important outranks JS-set inline non-important styles) */
html:not([data-theme="dark"]) .aict-homepage .aict-cap-card:hover,
html:not([data-theme="dark"]) .aict-homepage .aict-hp-agent-card:hover{
  transform:translate(-2px,-2px) !important;
  box-shadow:9px 9px 0 var(--wb-ink) !important;
  border-color:var(--wb-ink) !important;
}
html:not([data-theme="dark"]) .aict-homepage .aict-cap-card h3,
html:not([data-theme="dark"]) .aict-homepage .aict-hp-agent-card h3{
  color:var(--wb-ink) !important;
}

/* ===== category pills → workbench chips (ink border, ember hover, mono-ish) =====
   Literal hex (not var()) — the base .aict-pill border/bg/color declarations sit in a
   cascade context where var() substitution lands invalid-at-computed-value-time and
   silently falls back to the base values; literals are bulletproof. */
html:not([data-theme="dark"]) .aict-homepage .aict-category-pills .aict-pill{
  background:#fffdf8 !important;
  border:1.5px solid #211b16 !important;
  border-radius:9px !important;
  color:#211b16 !important;
  font-weight:600 !important;
  transition:background .14s,color .14s,transform .1s !important;
}
html:not([data-theme="dark"]) .aict-homepage .aict-category-pills .aict-pill:hover{
  background:#d24516 !important;
  border-color:#211b16 !important;
  color:#fff !important;
  transform:translateY(-1px);
}
/* replace opacity-based de-emphasis (prior a11y issue) with a real muted ink */
html:not([data-theme="dark"]) .aict-homepage .aict-category-pills .aict-pill .pill-count{
  color:#5b5046 !important; opacity:1 !important;
}
html:not([data-theme="dark"]) .aict-homepage .aict-category-pills .aict-pill:hover .pill-count{color:#fde8df !important;}