/* =============================================================================
   OpenMFDA Foundry — home.css
   Landing-page-only sections. Loaded AFTER main.css so it inherits all
   tokens (--color-*, --sp-*, --fs-*, --radius, --shadow-card,
   --shadow-card-hover, --font-*).

   Scope:
     - .pillars + .pillar-grid + .pillar-card + .pillar-num
     - .chip-library + .chip-grid + .chip-card (v0.2 portrait card)
     - .request-band + .request-band__ctas
     - .citations + .citation-grid + .citation + .citation-label
     - .citation pre (URL wrap override; base pre styling stays in main.css)

   Hard rules respected:
     - No inline hex anywhere. Tokens only.
     - Sparing-orange: no --color-accent reference in this file at all.
     - Mobile-first. Em breakpoints: 48em, 80em. No new breakpoints.
     - No new utility classes.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. .pillars — three-pillar overview section
      Ice background sets it off from the white page body and the white
      .chip-library section that follows.
   -------------------------------------------------------------------------- */
.pillars {
  background: var(--bg-soft);
  padding-block: var(--sp-16);
}

.pillars h2 {
  margin-bottom: var(--sp-8);
}

.pillar-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.pillar-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--bg-page);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  border-top: 4px solid transparent;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Colored top border per pillar variant. The .pillar-card--phase2 rule
   below uses --color-accent and is one of FOUR sanctioned orange surfaces
   site-wide. Complete site-wide orange audit (post-Block 10a-fix):
     1. Hero gradient mesh warmth node (via --mesh-warmth in main.css)
     2. .pillar-card--phase2 top border           (this rule)
     3. .pillar-card--phase2 .pillar-num color    (below)
     4. .badge-phase2 background (main.css)
   The sys_4in_3mix.svg validated-corner mark (formerly surface 2) was
   removed in Block 10a-fix once the chip's provenance was corrected from
   "validated assay chip" to "pipeline demonstration". The SVG file at
   /assets/img/chips/sys_4in_3mix.svg no longer contains the orange rect.
   Do not introduce any further orange surface without an explicit policy
   update — surfaces 2 and 3 cluster on the Phase 2 card by design. */
.pillar-card--available { border-top-color: var(--color-deep-blue); }
.pillar-card--beta      { border-top-color: var(--color-teal); }
.pillar-card--phase2    { border-top-color: var(--color-accent); }
/* Not-yet-shipped. Named for the badge it pairs with (.badge-coming-soon) and
   sharing its --color-muted, so the card's colour and its badge cannot drift
   apart again: pillar 02 spent a while with a teal "beta" border above a grey
   "Phase 1" badge. --pillar-card--beta is kept because it is still a valid
   variant, just unused on the landing page right now. */
.pillar-card--coming-soon { border-top-color: var(--color-muted); }

.pillar-card:hover,
.pillar-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.pillar-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

/* Numeral color matches the variant's top border — same coherence across
   the colored top stripe and the pillar number. The --phase2 rule is the
   third sanctioned orange surface; see audit comment above. */
.pillar-card--available .pillar-num { color: var(--color-deep-blue); }
.pillar-card--beta      .pillar-num { color: var(--color-teal); }
.pillar-card--phase2    .pillar-num { color: var(--color-accent); }
.pillar-card--coming-soon .pillar-num { color: var(--color-muted); }

/* Glyph wrapper between .pillar-num and the h3. The SVG inside uses
   stroke="currentColor"; the per-variant color rules below set the
   inherited color. Pillar 3 glyph is TEAL not orange — the Phase 2
   badge below already carries the sparing-orange signal, doubling on
   the same card over-weights an unshipped pillar. */
.pillar-glyph {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: var(--sp-2);
}

.pillar-glyph svg {
  width: 40px;
  height: 40px;
  display: block;
}

.pillar-card--available .pillar-glyph { color: var(--color-deep-blue); }
.pillar-card--beta      .pillar-glyph { color: var(--color-teal); }
.pillar-card--phase2    .pillar-glyph { color: var(--color-teal); }
/* Glyph stays teal, following the --phase2 precedent: the border and the
   number carry the status, the glyph stays in brand colour. A grey glyph
   would read as disabled rather than as unshipped. */
.pillar-card--coming-soon .pillar-glyph { color: var(--color-teal); }

.pillar-card h3 {
  font-size: var(--fs-600);
  line-height: 1.25;
}

.pillar-card p {
  color: var(--fg-body);
}

/* Badge pinned to the bottom of the card so cards with shorter copy
   still align with neighbours visually. Scoped override bumps font-size
   and padding for more presence in the pillar context only — the base
   .badge rule in main.css keeps its compact size elsewhere on the site.
   font-weight intentionally NOT bumped: the base .badge inherits body
   weight, and going bolder fights the academic tone. */
/* Each card's link to its page, pinned to the bottom of the card so the
   three line up (since 2026-10-06, in place of the "Available" badge). */
.pillar-link {
  align-self: flex-start;
  margin-top: auto;
  font-weight: 600;
}

.pillar-card .badge {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--fs-400);
  padding: 0.4rem 0.85rem;
  letter-spacing: 0.04em;
}


/* -----------------------------------------------------------------------------
   2. .how — "How it works" three-step strip
      Sits between .pillars (ice) and .chip-library (white). Uses the ice
      page-soft background so the visual cadence is navy -> ice -> ice ->
      white -> ice -> white -> navy. The .pillars -> .how handoff (ice ->
      ice) is intentional: the .section-heading teal-rule accent + numbered
      step glyphs + chevron gutters carry the structural break, not a fill
      swap. Fixed in 9d.1: was --bg-page, now --bg-soft.

      Layout: mobile vertical stack; at 48em three equal columns separated
      by unicode "›" chevron connectors positioned absolutely in the gutter.
      Step glyph colors are deep-blue / teal / deep-blue via :nth-child
      so the markup stays free of modifier classes.

      Orange budget: zero. The 5 sanctioned orange surfaces site-wide
      remain untouched (see audit comment in section 1 above).
   -------------------------------------------------------------------------- */
.how {
  background: var(--bg-soft);
  padding-block: var(--sp-16);
}

.how h2 {
  margin-bottom: var(--sp-3);
}

.how__lede {
  font-size: var(--fs-500);
  color: var(--fg-body);
  max-width: 56ch;
  margin: 0 0 var(--sp-12);
}

.how__lede code {
  font-size: inherit;
}

.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.how__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  position: relative;
}

.how__step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-400);
  color: var(--fg-muted);
  letter-spacing: 0.08em;
}

.how__step-glyph {
  width: 64px;
  height: 64px;
}

.how__step-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Per-step glyph color via :nth-child keeps the <li> markup clean — no
   modifier classes. Steps 1 and 3 are deep-blue to bookend the strip;
   step 2 (the EDA-tool compile phase) is teal, matching pillar-2's
   "Hosted design pipeline" color treatment. NO orange — would push the
   site over the 5-surface budget. */
.how__step:nth-child(1) .how__step-glyph { color: var(--color-deep-blue); }
.how__step:nth-child(2) .how__step-glyph { color: var(--color-teal); }
.how__step:nth-child(3) .how__step-glyph { color: var(--color-deep-blue); }

.how__step-title {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  line-height: 1.25;
  margin: 0;
}

.how__step-desc {
  color: var(--fg-body);
  margin: 0;
  line-height: 1.6;
}

.how__step-tools {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  margin: var(--sp-2) 0 0;
  letter-spacing: 0.04em;
}

.how__step-tools code {
  font-size: inherit;
  color: var(--fg-body);
  background: var(--bg-soft);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
}


/* -----------------------------------------------------------------------------
   3. .chip-library — chip-library section wrapper
      White (default page) background. Generous vertical padding to separate
      from neighbouring ice sections. Replaces the v0.1 .featured wrapper.
   -------------------------------------------------------------------------- */
.chip-library {
  background: var(--bg-page);
  padding-block: var(--sp-16);
}

.chip-library h2 {
  margin-bottom: var(--sp-8);
}


/* -----------------------------------------------------------------------------
   4. Chip grid + chip card (v0.2)
      Replaces the v0.1 single-row card. Now a portrait card sized to fit
      a 3-up grid at desktop, 2-up at tablet, 1-up at mobile.
   -------------------------------------------------------------------------- */
.chip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.chip-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid var(--bg-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* 9e: timing/easing aligned with the inner-image scale and the link
     translate below so the whole card animates as one. */
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 9e: -4px lift (was -2px) with the deeper --shadow-card-hover-strong token.
   The pillar-cards stay on the base --shadow-card-hover so the hierarchy
   reads pillars-restrained / chip-cards-prominent on hover. */
.chip-card:hover,
.chip-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover-strong);
}

.chip-card__media-link {
  display: block;
  position: relative;
  background: var(--bg-soft);
  padding: var(--sp-4);
  text-decoration: none;
  /* 9e: tray-like recess on the SVG art area. The parent .chip-card
     already has overflow:hidden so the scaled-on-hover image is clipped
     at the card boundary; this rule's own overflow:hidden is the local
     guarantee in case the parent's rule changes later. */
  box-shadow: var(--shadow-art-inset) inset;
  overflow: hidden;
}

.chip-card__media-link[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
}

.chip-card__media {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  /* 9e: the schematic scales 1.02x on card hover. Container holds the
     inset shadow still while the image grows behind/within it. */
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chip-card:hover .chip-card__media,
.chip-card:focus-within .chip-card__media {
  transform: scale(1.02);
}

.chip-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  flex: 1;
}

.chip-id {
  font-family: var(--font-mono);
  font-size: var(--fs-300);
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.chip-id code {
  font-size: inherit;
}

.chip-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  line-height: 1.25;
  margin: 0;
}

.chip-tagline {
  color: var(--fg-body);
  margin: 0;
  font-size: var(--fs-400);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}


/* -----------------------------------------------------------------------------
   5. .cell-list — inline list of standard-cell chips
      Resets list styles; each <code> gets a subtle pill background.
      Shared between the v0.1 single-card layout (now gone) and the v0.2
      portrait card. Markup is identical, so the rule survives unchanged.
   -------------------------------------------------------------------------- */
.cell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cell-list li {
  display: inline-flex;
}

.cell-list code {
  display: inline-block;
  background: var(--bg-soft);
  color: var(--fg-body);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius);
  font-size: var(--fs-300);
  /* 9e: aesthetic-only hover. The <code> pills are labels, not links —
     this fires on mouse but not on touch, which is the intended polish. */
  transition: background-color 150ms ease;
}

.cell-list code:hover {
  background: var(--bg-soft-hover);
}


/* -----------------------------------------------------------------------------
   6. .chip-card__footer — badge left, "View details" right
      Hairline ice border separates from the cell-list above. Pushed to the
      bottom of the flex column so cards with shorter taglines still align.
   -------------------------------------------------------------------------- */
.chip-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bg-soft);
}

.chip-card__link {
  font-size: var(--fs-300);
  color: var(--link);
  text-decoration: none;
  /* 9e: nudge-right on card hover. The trailing "→" is part of the text
     node, not a separate element — nudging the whole link reads as "this
     link wants to go somewhere" rather than animating one glyph in
     isolation. */
  display: inline-flex;
  align-items: center;
  transition:
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    color 120ms ease;
}

.chip-card__link:hover,
.chip-card__link:focus-visible {
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chip-card__link[aria-disabled="true"] {
  color: var(--fg-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* 9e: nudge fires only on non-disabled links. v0.3 status: every
   chip-card__link is aria-disabled="true" until detail pages ship,
   so this rule activates at v0.4. Forward-correct, harmless until then. */
.chip-card:hover .chip-card__link:not([aria-disabled="true"]),
.chip-card:focus-within .chip-card__link:not([aria-disabled="true"]) {
  transform: translateX(4px);
}


/* -----------------------------------------------------------------------------
   6b. sys_4in_3mix validated-corner pulse on the home-page chip card
       (Block 9e + Block 10a refactor)

       The sys_4in_3mix card's SVG is inlined directly into index.html so its
       corner-mark <rect> can carry .validated-corner and be targeted by CSS.
       The pulse fires once, 500ms after the card's .reveal-in class lands,
       drawing the eye to the only "validated" chip in the catalog. The corner
       mark itself remains one of the 5 sanctioned orange surfaces site-wide —
       it is rendered both here (home card) and on the per-chip detail page
       hero, but counts as a single distinct surface (same chip, same SVG).

       Block 10a refactor: @keyframes validated-corner-pulse moved from this
       file to main.css so the detail-page chip-hero (in detail.css) can share
       it without a duplicate keyframe. The animation-application rule below
       stays here because .chip-card is a home-page-only surface.

       prefers-reduced-motion: the global block at main.css section 3 sets
       `animation: none !important` on every selector, which kills this
       animation with no scoped override. The rest state of the corner mark
       (opacity 1, scale 1) is the visible end state — reduced-motion users
       just see the corner sitting there, which is exactly what the pulse
       lands on anyway.
   -------------------------------------------------------------------------- */
.chip-card.reveal-in .validated-corner {
  transform-origin: center;
  transform-box: fill-box;
  animation: validated-corner-pulse 600ms ease-in-out 500ms 1 both;
}


/* -----------------------------------------------------------------------------
   7. .request-band — "Request a custom design" callout
      Sits below the chip grid. Ice background, large heading, two CTAs
      that route to contact-style endpoints (mailto: / GitHub issue).
      NO payment processing — hard rule.

      Block 9f: channel-pattern backdrop added as the topmost background
      layer. SAME data-URI geometry as the hero pattern in main.css; the
      only differences are stroke color (%23065A82 deep-blue, not %23ffffff
      white) and opacity (0.03 vs 0.06) — both calibrated for the inverted
      contrast against an ice field instead of navy.

      The raw `%23065A82` here is URL-encoded `#065A82` inside a data URI
      inside a CSS url(). It is the SECOND sanctioned inline-hex exception
      to the "no-hex-below-:root" rule, alongside the hero's `%23ffffff` in
      main.css. The exception stands because CSS custom properties (var(--*))
      do NOT expand inside url() — the data URI is opaque to the parser.

      Vertical spacing tightened from --sp-16/--sp-24 to --sp-12/--sp-16
      (mobile/80em) — the band carried too much air relative to its weight.
   -------------------------------------------------------------------------- */
.request-band {
  background-color: var(--bg-soft);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23065A82' stroke-width='1.2' stroke-linecap='round' opacity='0.03'><path d='M 0 120 L 200 120 L 220 100 L 240 140 L 260 100 L 280 140 L 300 120 L 800 120 L 820 100 L 840 140 L 860 100 L 880 140 L 900 120 L 1200 120'/><path d='M 0 300 L 400 300 L 420 280 L 440 320 L 460 280 L 480 320 L 500 300 L 1200 300'/><path d='M 0 480 L 150 480 L 170 460 L 190 500 L 210 460 L 230 500 L 250 480 L 700 480'/><circle cx='220' cy='120' r='3' fill='%23065A82'/><circle cx='880' cy='120' r='3' fill='%23065A82'/><circle cx='440' cy='300' r='3' fill='%23065A82'/><circle cx='190' cy='480' r='3' fill='%23065A82'/></g></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding-block: var(--sp-12);
  text-align: center;
}

.request-band h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}

.request-band p {
  font-size: var(--fs-500);
  color: var(--fg-body);
  margin: 0 auto var(--sp-4);
  max-width: 56ch;
}

.request-band__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
}

/* Scoped overrides — the global .cta-secondary (defined in main.css) is
   white-on-navy for the hero. On the ice-background .request-band it would
   render invisible. Same story for .btn-primary, whose white background
   vanishes against ice. Scope by .request-band so the hero stays intact.

   Block 9f: hover transitions from solid deep-blue to a deep-blue -> teal
   135deg gradient. CSS does not interpolate gradient stops natively, so a
   direct gradient hover would hard-swap mid-transition. Instead we hold the
   gradient on a ::before pseudo-element and crossfade its opacity, which
   gives a true smooth color shift. Base state shows the deep-blue solid;
   :hover fades the gradient pseudo in over 200ms. */
.request-band .btn-primary {
  position: relative;
  isolation: isolate;
  background: var(--color-deep-blue);
  color: var(--color-white);
  border-color: var(--color-deep-blue);
  overflow: hidden;
  transition: border-color 200ms ease;
}

.request-band .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-deep-blue), var(--color-teal));
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: -1;
}

.request-band .btn-primary:hover,
.request-band .btn-primary:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-white);
}

.request-band .btn-primary:hover::before,
.request-band .btn-primary:focus-visible::before {
  opacity: 1;
}

.request-band .cta-secondary {
  color: var(--link);
}

.request-band .cta-secondary:hover,
.request-band .cta-secondary:focus-visible {
  color: var(--link-hover);
}


/* -----------------------------------------------------------------------------
   8. .citations — bottom citations band
      White background — fixed in 9d.1 (was ice). Full site-wide cadence is
      navy / ice / ice / white / ice / white / navy: hero -> pillars ->
      how -> chip-library -> request-band -> citations -> footer. The
      request-band -> citations handoff (ice -> white) restores rhythm so
      the band reads as a distinct CTA above the citations rather than as
      a continuous ice sheet under it.
   -------------------------------------------------------------------------- */
.citations {
  background: var(--bg-page);
  padding-block: var(--sp-16);
}

.citations h2 {
  margin-bottom: var(--sp-8);
}

.citation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

.citation {
  background: var(--bg-page);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
}

.citation-label {
  font-family: var(--font-serif);
  font-size: var(--fs-500);
  color: var(--color-deep-blue);
  margin: 0 0 var(--sp-3);
}

/* Augments main.css's base pre: keep the ice background and padding,
   but allow long DOI URLs to wrap rather than horizontal-scroll on mobile. */
.citation pre {
  white-space: pre-wrap;
  word-break: break-word;
}


/* -----------------------------------------------------------------------------
   9. Breakpoints — em-based, mirroring main.css (48em, 80em).
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  .pillar-card {
    padding: var(--sp-8);
  }

  .how__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-12);
  }

  /* Unicode "›" chevron in the gutter between adjacent steps. Mobile
     hides this entirely (the rule lives inside the 48em+ media query,
     so it never paints on a narrow viewport — the stacked layout already
     reads top-to-bottom). Positioned absolute to the parent .how__step
     (relative), pulled right into the gap by half the negative gutter,
     vertically aligned with the glyph row's center. Last step skipped
     so we don't dangle a chevron off the right edge. */
  .how__step:not(:last-child)::after {
    content: "\203A";  /* SINGLE RIGHT-POINTING ANGLE QUOTATION MARK */
    position: absolute;
    top: calc(var(--sp-4) + 32px);  /* num row height + half of 64px glyph */
    right: calc(var(--sp-12) / -2);
    transform: translate(50%, -50%);
    font-family: var(--font-serif);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-muted);
    opacity: 0.5;
    pointer-events: none;
  }

  .chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  .citation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }
}

@media (min-width: 80em) {
  .pillars,
  .how,
  .chip-library,
  .citations {
    padding-block: var(--sp-24);
  }

  /* Block 9f: request-band stays tighter than its neighbours at 80em
     too — the CTA band reads as a focused interruption between the
     chip grid and the citations, not another full-height section. */
  .request-band {
    padding-block: var(--sp-16);
  }

  .chip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =============================================================================
   Featured-from-the-library strip (lives only on the landing page).
   Slim marketing register: one short eyebrow ("kind · status"), a serif name,
   a single-sentence description, a CTA link. No metadata clutter — the
   catalog at /library/ is where rich .lib-card markup belongs.

   Sparing-orange rule respected: zero --color-accent / --mesh-warmth use here.
   ========================================================================== */
.featured-lib {
  padding-block: var(--sp-16);
  background: var(--bg-page);
}

.featured-lib__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-500);
  color: var(--fg-muted);
  margin-bottom: var(--sp-8);
  max-width: 48rem;
}

.featured-lib__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 48em) {
  .featured-lib__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
  .featured-lib__inner { grid-template-columns: repeat(3, 1fr); }
}

.featured-lib__card {
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  border: 1px solid rgba(28, 114, 147, 0.15);
  border-radius: var(--radius);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.featured-lib__card:hover,
.featured-lib__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-teal);
  outline: none;
}

.featured-lib__card-kind {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--sp-2);
}

.featured-lib__card-name {
  font-family: var(--font-serif);
  font-size: var(--fs-600);
  color: var(--color-navy);
  margin: 0 0 var(--sp-3);
  line-height: 1.25;
}

.featured-lib__card-desc {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  color: var(--fg-body);
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-lib__card-cta {
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  color: var(--color-deep-blue);
  margin-top: auto;
  font-weight: 600;
}

.featured-lib__card:hover .featured-lib__card-cta,
.featured-lib__card:focus-visible .featured-lib__card-cta {
  color: var(--color-teal);
}

.featured-lib__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-8);
}


/* =============================================================================
   Hero chip render (Block 17a→static) — the chip-render column in the navy hero.
   The static poster <img> IS the hero now (always visible, no JS, can't crash).
   The live 3D WebGL viewer is PARKED: the <canvas> is commented out in index.html
   and three.js/hero3d.js are no longer loaded. The .hero__viewer-canvas and
   is-ready crossfade rules below are kept (inert) so the 3D path can be revived.
   Existing hero copy/CTAs are unchanged. Tokens only; no orange.
   ========================================================================== */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}

.hero__text { min-width: 0; }

.hero__viewer {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}

.hero__viewer-poster,
.hero__viewer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__viewer-poster {
  object-fit: contain;
  transition: opacity 400ms ease;
}

.hero__viewer-canvas {
  opacity: 0;
  transition: opacity 500ms ease;
  touch-action: none;          /* the hand-rolled drag owns the gesture */
  cursor: grab;
}

.hero__viewer-canvas:active { cursor: grabbing; }

/* The hero's build animation (index.html): a square animated WebP in a
   <picture> on the hero's navy, the frames' own background. On phones the
   grid is one column, so it sits under the text. */
.hero__viewer--build {
  aspect-ratio: 1 / 1;
  max-width: 30rem;
}

.hero__build {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--color-navy);
}

.hero__build img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Its pause/play button: a 44 px target in the corner, ice on navy. The
   script shows it; it stays hidden without scripts and under reduced motion. */
.hero__pause {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--color-ice);
  border-radius: 50%;
  background: rgba(33, 41, 92, 0.85);
  color: var(--color-ice);
  cursor: pointer;
}

.hero__pause[hidden] { display: none; }
.hero__pause:hover { background: var(--color-navy); }
.hero__pause:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 2px; }
.hero__pause-icon { width: 20px; height: 20px; fill: currentColor; }
.hero__pause-icon--play,
.hero__pause.is-paused .hero__pause-icon--pause { display: none; }
.hero__pause.is-paused .hero__pause-icon--play { display: block; }

/* The render and the line under it, which says what is wrong with the model
   it shows. On the navy, so its link takes the hero's light blue. */
.hero__media { min-width: 0; }

.hero__viewer-note {
  max-width: 34rem;
  margin: var(--sp-3) auto 0;
  font-size: var(--fs-300);
  line-height: 1.5;
  color: var(--fg-on-dark);
  opacity: 0.92;
}

.hero__viewer-note a { color: var(--link-on-dark); }
.hero__viewer-note a:hover { color: var(--link-on-dark-hover); }

/* Block 17a→static: 3D viewer PARKED — the poster is the hero and must ALWAYS show,
   so the poster-hiding rule is disabled (no is-ready dependency, no JS). To revive
   the live canvas crossfade, restore the <canvas> + script tags and un-comment:
     .hero__viewer.is-ready .hero__viewer-canvas { opacity: 1; }
     .hero__viewer.is-ready .hero__viewer-poster { opacity: 0; } */

@media (min-width: 56em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-12);
  }
  .hero__viewer { max-width: none; }
  .hero__viewer-note { max-width: none; }
}

/* Reduced-motion users get the static framed angle (hero3d.js skips
   auto-rotate); keep the poster->canvas swap instant rather than crossfaded. */
@media (prefers-reduced-motion: reduce) {
  .hero__viewer-poster,
  .hero__viewer-canvas { transition: none; }
}


/* --------------------------------------------------------------------------
   Design review 2026-10-03, item 1: the home page's main actions in the
   first screen. A smaller headline; the intro's first two sentences, then the
   actions, then the rest of the intro (.hero__context), unchanged.
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 4vw, 3rem); }

.hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  max-width: 18ch;
  margin-bottom: 1.25rem;
}

.hero .lede { line-height: 1.55; margin-bottom: 1.5rem; }
.hero .cta-row { gap: .75rem 1.5rem; }

.hero__context {
  max-width: 56ch;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-on-dark);
}

.hero__context a { color: var(--link-on-dark); }
.hero__context a:hover { color: var(--link-on-dark-hover); }

@media (max-width: 40rem) {
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row a { min-height: 44px; text-align: center; }
}

/* --------------------------------------------------------------------------
   The hero's second action, "Design a chip" (2026-10-05): a button like
   "Browse the chip library", filled in the deep blue of the "Open … maker"
   buttons, white text (7.5:1), with a light border (sky, 7.7:1 on the navy)
   so it stands out from the navy. On hover and focus, teal (white on it
   5.0:1) with an ice border.
   -------------------------------------------------------------------------- */
.hero .btn-hero-design {
  padding: 1rem 1.75rem;
  font-size: var(--fs-500);
  background: var(--color-deep-blue);
  color: var(--color-white);
  border: 2px solid var(--color-sky);
}

.hero .btn-hero-design:hover,
.hero .btn-hero-design:focus-visible {
  background: var(--color-teal);
  color: var(--color-white);
  border-color: var(--color-ice);
}

/* Under the animation, the link to the full build (/how-its-built/). */
.hero__build-link {
  margin: var(--sp-3) 0 0;
  text-align: center;
  font-size: var(--fs-400);
}

.hero__build-link a { color: var(--link-on-dark); }
.hero__build-link a:hover { color: var(--link-on-dark-hover); }

/* On a phone the hero ends with the licence line, and the scroll arrow
   (absolute, 1.5rem from the bottom, 28 px tall) sat on it: room for it. */
@media (max-width: 40rem) {
  .hero { padding-bottom: 4.5rem; }
}