index.astro

---
/* Ported from docs/index.html (CCWEB2-317 phase 4). The brand page.

 * Shell extraction, and the page that needed DocPage to grow one thing. It
 * carries a second bar of its own — the section links — and the two bars have
 * to stick as one block rather than race for the same top edge, so they share a
 * positioned wrapper. DsNav has to be *inside* that wrapper, which is why the
 * wrapper is DocPage's, unconditionally, and the second bar is rendered from
 * menu.ts by SubNav -- neither is this page's arrangement any more. It was,
 * while this was the only page with a second tier; the kitchen sink needs one
 * too, so `.ds-nav-stack` and the bar's styles moved to docs/nav.css and the
 * seven hand-written <li>s became SUB.home.
 *
 * The page script is a plain classic script, not a module, and reads the
 * palette ramp off the computed custom properties so the strip cannot drift
 * from the token file. `is:inline` keeps it that way — processed, it would
 * become a module, and an IIFE that expects to run in document order at the
 * foot of the body would no longer be guaranteed to.
 *
 * The deleted head carried one comment worth keeping: colors_and_type.css also
 * declares the Satoshi @font-face rules with paths relative to docs/, so the
 * fonts arrive with the token sheet and nothing here re-declares a colour.
 */
import DocPage from '../layouts/DocPage.astro';
---
<DocPage title="CODECAVE — Design system" nav="home">
<style slot="head" is:inline>
/* ===========================================================================
   CODECAVE brand kit — dark first.

   This page is hand-authored and nothing regenerates it, which is why the dark
   treatment can live here permanently. An earlier generated token layer under
   system/ was removed rather than corrected: it derived its own primary
   (#7040da) from the seed and never once emitted #5F20FE.

   Every colour below resolves through a token in colors_and_type.css. The
   only literal hex values are the palette specimen's own swatch chips and
   their printed labels — a palette sheet has to render the values it
   documents.
   ======================================================================== */

body {
  margin: 0;
  background: var(--color-surface-primary);
  color: var(--color-body-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.bk-wrap {
  max-width: var(--max-width-desktop);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Section rhythm is asymmetric, exactly as the site sets it: 200px above,
   120px below. Clamped so small screens stay usable. */
.bk-section {
  padding-top: clamp(4.5rem, 13vw, 12.5rem);
  padding-bottom: clamp(2.7rem, 7.8vw, 7.5rem);
}
.bk-section + .bk-section { border-top: 1px solid var(--color-surface-quaternary); }

/* --- type ---------------------------------------------------------------- */
/* Violet used to clear the 3:1 large-text floor at the eyebrow's signature
   32px; on the rebuilt #0A0A0B page it measures 2.94:1 and no longer does
   (DESIGN.md sect. 10.5). Chrome eyebrows therefore step to the in-palette
   hover foreground at 8.41:1. */
.bk-eyebrow {
  display: block;
  color: var(--color-hovered);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;       /* caps need positive tracking to breathe */
  margin-bottom: 0.75rem;
}
.bk-h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, var(--text-heading-lg));
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: var(--font-weight-bold);
}
.bk-h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 4.4vw, var(--text-heading-md));
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-bold);
}
.bk-h3 {
  margin: 0 0 0.5rem;
  font-size: var(--text-subhead);
  line-height: var(--leading-subhead);
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-bold);
}
.bk-note {
  max-width: 62ch;
  color: var(--color-body-secondary-lighter);
  margin: 0 0 2rem;
}
.bk-note:last-child { margin-bottom: 0; }
.bk-note code, .bk-mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
.bk-note code { color: var(--color-brand-200); }
/* Metadata recedes by size and family, not by contrast. Since the rebuild
   --color-body-secondary is #9595BB — 6.87:1 on the page, comfortably over
   the 4.5:1 floor — and the lighter step lands at 11.9:1. Hierarchy here
   comes from 11px mono against 16px sans, which is the same argument the
   brand makes about surfaces. */
.bk-meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--color-body-secondary-lighter);
}

/* --- masthead ------------------------------------------------------------ */
.bk-masthead { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.bk-tagline {
  max-width: 34ch;
  margin: 1.5rem 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-body-secondary-lighter);
}
/* --- top nav -------------------------------------------------------------
   The site's actual header (common/BrandNav.vue, which both this site and
   codecave.pro now render): a bar at the very top, ghost-button links split
   around the centred wordmark, riding the translucent primary surface + blur
   its dropdown uses. */
/* The stack, the sticky behaviour and the anchor offset all live in nav.css
   now, linked by DocPage on every page — this file used to restate them because
   it was the only page with a second bar, and that stopped being true when the
   site collapsed to two surfaces.

   The leftover was doing active harm, not just sitting there: a stale
   `.bk-section { scroll-margin-top: 9rem }` here and `.ds-anchor` there are both
   single-class selectors, so source order decided, and this file comes after the
   linked stylesheet. Every section on this page kept the old 9rem and landed
   under the navigation while nav.css said otherwise and a probe element proved
   nav.css was winning everywhere else. The sections carry `.ds-anchor` instead. */

/* The wayfinding grid, carried over from the home page this file absorbed.
   Its own classes rather than the old page's `.cards`, because that name came
   from a stylesheet this page does not link. */
.bk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.bk-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-card);
  background: var(--color-surface-secondary);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-control, 150ms) ease;
}
.bk-card:hover { border-color: var(--color-action); }
.bk-card strong { color: var(--color-heading); font-size: var(--text-md); }
.bk-card span { color: var(--color-body-secondary-lighter); font-size: var(--text-base); }
.bk-card code { color: var(--color-body-secondary); font-size: var(--text-caption); }

/* --- logo ---------------------------------------------------------------- */
.bk-stage {
  display: grid;
  place-items: center;
  min-height: 260px;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-card);
  background: var(--color-surface-secondary);
  transition: background-color var(--transition-base);
}
/* The one declared exception: black-ink artwork needs a genuinely light
   ground. It is set per-variant in the markup, never inferred. */
.bk-stage[data-surface="light"] { background: var(--color-brand-25); }
.bk-stage img { max-height: 168px; max-width: 100%; object-fit: contain; }

.bk-variants {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.bk-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 0.75rem;
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-tile);
  background: var(--color-surface-secondary);
  cursor: pointer;
  transition: border-color var(--transition-colors);
}
.bk-thumb[data-surface="light"] { background: var(--color-brand-25); }
.bk-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bk-thumb:hover { border-color: var(--color-action); }
.bk-thumb[aria-current="true"] { border-color: var(--color-brand-200); }
.bk-thumb:focus-visible { outline: 2px solid var(--color-brand-200); outline-offset: 2px; }
.bk-caption { margin-top: 0.5rem; }
/* Icon tiles carry their own legend — the artwork is identical by design,
   so the caption is what tells the six files apart. */
.bk-icon { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.bk-icon .bk-thumb { width: 100%; }
.bk-icon figcaption { line-height: 1.5; }

/* --- palette ------------------------------------------------------------- */
/* 22rem floor lands on a clean 3 x 2 at desktop instead of 4 + 2 dead cells. */
.bk-roles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.bk-role {
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-secondary);
}
/* #0A0A0B and #0F0F15 are one hair apart from the card they sit on — which is
   the brand's whole thesis, but a specimen still has to show a bounded field.
   The hairline is the same one the system uses everywhere else. */
.bk-role-chip { height: 108px; border-bottom: 1px solid var(--color-surface-quaternary); }
.bk-role-body { padding: 1.25rem 1.25rem 1.5rem; }
.bk-role-name { font-weight: var(--font-weight-bold); }
.bk-role-hex {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-brand-200);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bk-role-use { margin: 0.5rem 0 0; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-body-secondary-lighter); }

.bk-ramp { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem; margin-top: 2.5rem; }
.bk-step { border-radius: var(--radius-control); overflow: hidden; border: 1px solid var(--color-surface-quaternary); }
.bk-step-chip { height: 52px; }
.bk-step-label { padding: 0.5rem 0.5rem 0.625rem; background: var(--color-surface-secondary); }

/* --- typography ---------------------------------------------------------- */
.bk-specimen {
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-card);
  background: var(--color-surface-secondary);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.bk-aa { font-size: clamp(4rem, 15vw, 8.5rem); line-height: 1; letter-spacing: -0.03em; font-weight: var(--font-weight-bold); margin: 0; }
.bk-charset { margin: 1.25rem 0 0; color: var(--color-body-secondary-lighter); word-break: break-word; }
.bk-scale { width: 100%; border-collapse: collapse; margin-top: 2.5rem; }
.bk-scale th, .bk-scale td {
  text-align: left;
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--color-surface-quaternary);
  vertical-align: baseline;
}
.bk-scale th {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-body-secondary-lighter);
  font-weight: var(--font-weight-bold);
}
.bk-scale td:last-child { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-body-secondary-lighter); padding-right: 0; }

/* --- components ---------------------------------------------------------- */
.bk-specimen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-surface-quaternary);
}
.bk-specimen-row:last-child { border-bottom: 0; }
.bk-specimen-row > .bk-meta { flex: 0 1 auto; min-width: 0; } /* annotations wrap */
.bk-specimen-row > .bk-meta:first-child { flex: 0 0 auto; min-width: 9rem; }
.bk-cta-field {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
  border-radius: var(--radius-card);
  background: var(--color-surface-secondary);
  margin-top: 2rem;
}

/* --- voice --------------------------------------------------------------- */
.bk-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bk-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bk-list li {
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-tile);
  font-size: var(--text-caption);
  background: var(--color-surface-tertiary);
  color: var(--color-body-primary);
}
.bk-list.is-avoid li { color: var(--color-body-secondary-lighter); text-decoration: line-through; }
.bk-rules { margin: 0; padding: 0; list-style: none; counter-reset: rule; }
/* The numeral is absolutely positioned, not a grid track. It used to be a grid
   track — which silently promoted every inline <code> inside a rule to its own
   grid item and dealt the hexes out into the 2.5rem numeral column. Harmless
   for the voice pillars in 05, which are plain sentences; it wrecked 06, which
   is mostly markup. Normal inline flow is the only thing that survives both. */
.bk-rules li {
  counter-increment: rule;
  position: relative;
  padding: 1rem 0 1rem 3.5rem;
  border-bottom: 1px solid var(--color-surface-quaternary);
  max-width: 76ch;
}
.bk-rules li::before {
  content: counter(rule, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-brand-200);   /* #5F20FE is 2.94:1 — too low for a numeral */
}
.bk-rules li:last-child { border-bottom: 0; }
/* Rules carry hexes and token names inline. Same mono treatment as .bk-note
   code, and a hex must never break across a line. */
.bk-rules code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--color-brand-200);
  white-space: nowrap;
}
.bk-rules strong { color: var(--color-heading); font-weight: var(--font-weight-bold); }

/* --- posture ------------------------------------------------------------- */
/* Each tile carries the real token on --r, so the corner is drawn at true size
   rather than described in prose. */
.bk-radii {
  display: grid;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
.bk-radius-tile {
  height: 104px;
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--r);
  background: var(--color-surface-secondary);
}
.bk-radii .bk-meta { display: block; }
.bk-radius-tok { margin-top: 0.625rem; color: var(--color-brand-200); }

/* The hatched bands are the padding itself: this box reads the same two custom
   properties the site's sections do, so it cannot drift from them. */
.bk-rhythm {
  position: relative;
  margin-top: 1.5rem;
  padding-top: var(--section-padding-top);
  padding-bottom: var(--section-padding-bottom);
  border: 1px solid var(--color-surface-quaternary);
  border-radius: var(--radius-card);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 7px,
    var(--color-surface-tertiary) 7px 8px);
}
.bk-rhythm-content {
  padding: 1.5rem;
  background: var(--color-surface-secondary);
  border-block: 1px dashed var(--color-surface-quaternary);
}
.bk-rhythm-label { position: absolute; left: 1.5rem; }
.bk-rhythm-label-top    { top: calc(var(--section-padding-top) / 2); transform: translateY(-50%); }
.bk-rhythm-label-bottom { bottom: calc(var(--section-padding-bottom) / 2); transform: translateY(50%); }

/* .section-container is --color-surface-primary — the same value as the page.
   This stage sits one step lighter so a specimen has an edge to show; the real
   site gives the panel nothing but the upward glow to find it by. */
.bk-glow-stage {
  display: grid;
  gap: 4.5rem;
  margin-top: 1.5rem;
  padding: 4.5rem clamp(1rem, 3vw, 2rem);
  border-radius: var(--radius-card);
  background: var(--color-surface-secondary);
}
.bk-glow-stage .section-container {
  display: grid;
  place-items: center;
  min-height: 200px;
  padding: 1.5rem;
  text-align: center;
}
/* The counter-example, and the only downward shadow anywhere in the package. */
.bk-glow-stage .section-container.is-conventional {
  box-shadow: 0 24px 48px 0 rgb(0 0 0 / 0.7);
}

.bk-foot { padding: 3rem 0 5rem; }

/* The system's one structural break. The site swaps to its burger sheet
   below 768px; the kit keeps a static stacked bar instead — a wrapped bar
   may not sit fixed over a phone viewport. */
@media (max-width: 768px) {
  /* display:contents removes the wrapper's box entirely, so .ds-nav is a direct
     child of <body> again and sticks to the viewport on its own — while the
     section bar, which is static, scrolls away as it should on a phone. Setting
     the wrapper to position:static instead would not do: .ds-nav's containing
     block would still be the wrapper, and it would stop sticking the moment the
     wrapper scrolled past. */
}
</style>
<div class="bk-wrap">

  <!-- ===================== MASTHEAD ===================== -->
  <header class="bk-masthead">
    <h1 class="bk-h1">Dark, round, and violet —<br>in that order of importance.</h1>
    <p class="bk-tagline">The brand kit for CODECAVE. There is no light theme; the
       surfaces below are the default, not a mode.</p>
  </header>


  <!-- ===================== START HERE ===================== -->
  <section class="bk-section" id="start">
    <span class="bk-eyebrow">00 — Start here</span>
    <h2 class="bk-h2">Two surfaces, and the files under them</h2>
    <p class="bk-note">This page is the brand: what the marks are, which colours
      carry which role, how the type is set, and how it should sound. Everything
      that <em>demonstrates</em> the system lives in one of two places, and the
      menu above has one entry for each.</p>
    <p class="bk-note"><code>DESIGN.md</code> remains the source of truth;
      <code>colors_and_type.css</code> is its machine-readable half. If the prose
      and the stylesheet ever disagree, the stylesheet wins.</p>
    <div class="bk-cards">
      <a class="bk-card" href="kitchen-sink/index.html">
        <strong>Kitchen sink</strong>
        <span>Every token and every component on one page — palette, type scale,
          spacing, radii, shadows and the brand assets, then thirteen components
          mounted live from the compiled sources the site ships — each with its
          real prop signature, a variant matrix, and what the extraction found:
          54 findings, 28 of them defects.</span>
        <code>kitchen-sink/</code>
      </a>
      <a class="bk-card" href="examples/index.html">
        <strong>Examples</strong>
        <span>Six whole surfaces built from the system — pitch deck, poster,
          email, newsletter, landing page and contact form. Each opens standalone,
          so it can be attached, printed or handed over as it is.</span>
        <code>examples/</code>
      </a>
      <a class="bk-card" href="DESIGN.md">
        <strong>The rules</strong>
        <span>Eleven sections: foundations, the ramp, components, motion,
          anti-patterns and the known divergences. Says so where evidence is thin
          rather than guessing.</span>
        <code>DESIGN.md</code>
      </a>
      <a class="bk-card" href="colors_and_type.css">
        <strong>The tokens</strong>
        <span>Every value as a custom property, with a semantic layer over the raw
          ramp. Consume the semantic names; never hard-code a hex.</span>
        <code>colors_and_type.css</code>
      </a>
    </div>
  </section>

  <!-- ===================== LOGO ===================== -->
  <section class="bk-section ds-anchor" id="logo">
    <span class="bk-eyebrow">01 — Logo</span>
    <h2 class="bk-h2">The horizontal wordmark is primary</h2>
    <p class="bk-note">Drawn at 357&times;110. The chevron is always
      <code>#5F20FE</code>; the wordmark paths are white, so the default pairing is
      white-on-near-black. Clear space equals the height of the chevron. The
      artwork predates Satoshi and is outlined Montserrat Bold — the paths are
      vector outlines, not live text, and must never be re-typed by hand.</p>

    <div class="bk-stage" id="logo-stage" data-surface="dark">
      <img id="logo-stage-img" src="logos/codecave-wide.svg" alt="CODECAVE horizontal wordmark">
    </div>
    <p class="bk-meta bk-caption" id="logo-caption">codecave-wide.svg &middot; primary &middot; dark ground</p>

    <h3 class="bk-h3" style="margin-top:2.5rem">Wordmark variants</h3>
    <p class="bk-note">One row per lockup, and each row reads the same left to
      right: vector master, then white text, black text, all-white ink, all-black
      ink. Black-ink artwork is the brand's only light-surface exception — those
      tiles carry a light ground because the ink demands it; the rule is declared
      per variant, never derived from the page.</p>
    <div>
      <p class="bk-meta" style="margin-top:1.25rem">Wide &mdash; primary, 357&times;110</p>
      <div class="bk-variants" style="margin-top:0.5rem">
        <button class="bk-thumb" type="button" data-surface="dark" aria-current="true"
                data-src="logos/codecave-wide.svg" data-label="codecave-wide.svg &middot; primary &middot; dark ground">
          <img src="logos/codecave-wide.svg" alt="Horizontal wordmark"></button>
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave-wide-1024-text-white.png" data-label="codecave-wide-1024-text-white.png &middot; default pairing">
          <img src="logos/codecave-wide-256-text-white.png" alt="Horizontal, white text"></button>
        <button class="bk-thumb" type="button" data-surface="light"
                data-src="logos/codecave-wide-1024-text-black.png" data-label="codecave-wide-1024-text-black.png &middot; light-surface exception">
          <img src="logos/codecave-wide-256-text-black.png" alt="Horizontal, black text"></button>
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave-wide-1024-all-white.png" data-label="codecave-wide-1024-all-white.png &middot; one-ink printing">
          <img src="logos/codecave-wide-256-all-white.png" alt="Horizontal, all white"></button>
        <button class="bk-thumb" type="button" data-surface="light"
                data-src="logos/codecave-wide-1024-all-black.png" data-label="codecave-wide-1024-all-black.png &middot; one-ink, light stock">
          <img src="logos/codecave-wide-256-all-black.png" alt="Horizontal, all black"></button>
      </div>
      <p class="bk-meta" style="margin-top:1.25rem">Tall &mdash; stacked, for square and narrow fields</p>
      <div class="bk-variants" style="margin-top:0.5rem">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave-tall.svg" data-label="codecave-tall.svg &middot; stacked lockup &middot; dark ground">
          <img src="logos/codecave-tall.svg" alt="Stacked wordmark"></button>
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave-tall-1024-text-white.png" data-label="codecave-tall-1024-text-white.png &middot; default pairing">
          <img src="logos/codecave-tall-256-text-white.png" alt="Stacked, white text"></button>
        <button class="bk-thumb" type="button" data-surface="light"
                data-src="logos/codecave-tall-1024-text-black.png" data-label="codecave-tall-1024-text-black.png &middot; light-surface exception">
          <img src="logos/codecave-tall-256-text-black.png" alt="Stacked, black text"></button>
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave-tall-1024-all-white.png" data-label="codecave-tall-1024-all-white.png &middot; one-ink printing">
          <img src="logos/codecave-tall-256-all-white.png" alt="Stacked, all white"></button>
        <button class="bk-thumb" type="button" data-surface="light"
                data-src="logos/codecave-tall-1024-all-black.png" data-label="codecave-tall-1024-all-black.png &middot; one-ink, light stock">
          <img src="logos/codecave-tall-256-all-black.png" alt="Stacked, all black"></button>
      </div>
    </div>

    <h3 class="bk-h3" style="margin-top:2.5rem">Mark &amp; application icons</h3>
    <p class="bk-note">Six files, one drawing — that is deliberate. The chevron
      is the entire icon program; the files differ in padding and raster size,
      never in artwork, so the legend under each tile is what tells them apart.
      The mark never carries the wordmark's clear-space rule — an app icon is
      already a bounded field.</p>
    <div class="bk-variants">
      <figure class="bk-icon">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave.svg" data-label="codecave-mark.svg &middot; chevron only">
          <img src="logos/codecave.svg" alt="Chevron mark"></button>
        <figcaption class="bk-meta">codecave-mark.svg<br>master vector &middot; source of all five</figcaption>
      </figure>
      <figure class="bk-icon">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="favicons/favicon.svg" data-label="favicons/favicon.svg &middot; browser tab">
          <img src="favicons/favicon.svg" alt="Favicon"></button>
        <figcaption class="bk-meta">favicon.svg<br>browser tab &middot; the mark + padding</figcaption>
      </figure>
      <figure class="bk-icon">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="logos/codecave-1024x1024.png" data-label="logos/codecave-1024x1024.png &middot; square app icon">
          <img src="logos/codecave-256x256.png" alt="Square app icon"></button>
        <figcaption class="bk-meta">codecave-1024x1024.png<br>1024&sup2; &middot; store listings</figcaption>
      </figure>
      <figure class="bk-icon">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="favicons/apple-touch-icon.png" data-label="favicons/apple-touch-icon.png &middot; iOS home screen">
          <img src="favicons/apple-touch-icon.png" alt="Apple touch icon"></button>
        <figcaption class="bk-meta">apple-touch-icon.png<br>180&sup2; &middot; iOS home screen</figcaption>
      </figure>
      <figure class="bk-icon">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="favicons/web-app-manifest-512x512.png" data-label="favicons/web-app-manifest-512x512.png &middot; PWA">
          <img src="favicons/web-app-manifest-192x192.png" alt="Web app manifest icon"></button>
        <figcaption class="bk-meta">web-app-manifest-512x512.png<br>512&sup2; &middot; PWA install</figcaption>
      </figure>
      <figure class="bk-icon">
        <button class="bk-thumb" type="button" data-surface="dark"
                data-src="icons/512x512.png" data-label="icons/512x512.png &middot; desktop app">
          <img src="icons/128x128.png" alt="Desktop app icon"></button>
        <figcaption class="bk-meta">icons/512x512.png<br>512&sup2; &middot; desktop app</figcaption>
      </figure>
    </div>
    <p class="bk-note" style="margin-top:1rem">Two of these are literally the same
      file — the desktop 512 is byte-for-byte the PWA 512 — and
      <code>favicon.svg</code> is <code>codecave-mark.svg</code> with 30 units of
      breathing room per side. Every raster keeps a transparent ground; iOS and
      Android composite their own plate behind it.</p>
  </section>

  <!-- ===================== PALETTE ===================== -->
  <section class="bk-section ds-anchor" id="palette">
    <span class="bk-eyebrow">02 — Palette</span>
    <h2 class="bk-h2">Six roles carry the brand</h2>
    <p class="bk-note">Depth never comes from contrast. The page is
      <code>#0A0A0B</code> and a card is <code>#0F0F15</code> — one hair apart.
      What separates them is the 24px radius and a 1px <code>#2B2848</code>
      hairline. Violet is an edge colour: it draws links, borders, eyebrows and
      the focus halo, and never fills a large area.</p>

    <div class="bk-roles">
      <article class="bk-role">
        <div class="bk-role-chip" style="background:#0a0a0b"></div>
        <div class="bk-role-body">
          <div class="bk-role-name">Surface primary</div>
          <div class="bk-role-hex">#0A0A0B</div>
          <p class="bk-role-use">The page canvas — near-black, never pure black.</p>
        </div>
      </article>
      <article class="bk-role">
        <div class="bk-role-chip" style="background:#f4f4f6"></div>
        <div class="bk-role-body">
          <div class="bk-role-name">Heading / body</div>
          <div class="bk-role-hex">#F4F4F6</div>
          <p class="bk-role-use">Headings and body text — 18.0:1 on the page.</p>
        </div>
      </article>
      <article class="bk-role">
        <div class="bk-role-chip" style="background:#5f20fe"></div>
        <div class="bk-role-body">
          <div class="bk-role-name">Action</div>
          <div class="bk-role-hex">#5F20FE</div>
          <p class="bk-role-use">Links, borders, eyebrows, focus halo — edges and marks only.</p>
        </div>
      </article>
      <article class="bk-role">
        <div class="bk-role-chip" style="background:#0f0f15"></div>
        <div class="bk-role-body">
          <div class="bk-role-name">Surface secondary</div>
          <div class="bk-role-hex">#0F0F15</div>
          <p class="bk-role-use">Cards and panels — one hair above the page.</p>
        </div>
      </article>
      <article class="bk-role">
        <div class="bk-role-chip" style="background:#9595bb"></div>
        <div class="bk-role-body">
          <div class="bk-role-name">Body secondary</div>
          <div class="bk-role-hex">#9595BB</div>
          <p class="bk-role-use">Metadata and placeholders only — never long-form copy.</p>
        </div>
      </article>
      <article class="bk-role">
        <div class="bk-role-chip" style="background:#2b2848"></div>
        <div class="bk-role-body">
          <div class="bk-role-name">Surface quaternary</div>
          <div class="bk-role-hex">#2B2848</div>
          <p class="bk-role-use">Hairline rules, dividers and card edges.</p>
        </div>
      </article>
    </div>

    <h3 class="bk-h3" style="margin-top:3rem">The full ramp</h3>
    <p class="bk-note">Two ramps ship in <code>colors_and_type.css</code> — twelve
      violet brand steps and thirteen grays, verbatim from the site's 2026
      rebuild — plus single-use accents for the glow button, the gradient and
      the section glow. The six roles above are drawn from them.</p>
    <div class="bk-ramp" id="ramp"></div>
  </section>

  <!-- ===================== TYPOGRAPHY ===================== -->
  <section class="bk-section ds-anchor" id="type">
    <span class="bk-eyebrow">03 — Typography</span>
    <h2 class="bk-h2">Satoshi, two weights</h2>
    <p class="bk-note">Regular 400 and Bold 700 carry everything. Production
      declares a single face with no weight descriptor, so live 700 text is
      browser-synthesized; this package binds the genuine cuts, which will read
      marginally tighter until production ships the same files. Fallbacks:
      <code>system-ui, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif</code>.</p>

    <div class="bk-specimen">
      <p class="bk-aa">Aa</p>
      <p class="bk-charset">ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
        abcdefghijklmnopqrstuvwxyz<br>
        0123456789 &amp; @ # % — “ ” ‘ ’</p>
    </div>

    <table class="bk-scale">
      <thead>
        <tr><th scope="col">Role</th><th scope="col">Specimen</th><th scope="col">Size / leading</th></tr>
      </thead>
      <tbody>
        <tr><td class="bk-meta">heading-lg</td>
            <td style="font-size:var(--text-heading-lg);line-height:1.3;letter-spacing:-0.025em;font-weight:700">Ship it</td>
            <td>56 / 130%</td></tr>
        <tr><td class="bk-meta">heading-md</td>
            <td style="font-size:var(--text-heading-md);line-height:1.15;letter-spacing:-0.02em;font-weight:700">Section heading</td>
            <td>44 / 115%</td></tr>
        <tr><td class="bk-meta">heading-sm</td>
            <td style="font-size:var(--text-heading-sm);line-height:1.1;letter-spacing:-0.02em;font-weight:700">Eyebrow lead</td>
            <td>32 / 110%</td></tr>
        <tr><td class="bk-meta">stat</td>
            <td style="font-size:var(--text-stat);line-height:var(--leading-stat);letter-spacing:-0.02em;font-weight:700">98%</td>
            <td>36 / 40</td></tr>
        <tr><td class="bk-meta">lg</td>
            <td style="font-size:var(--text-subhead);line-height:var(--leading-subhead);font-weight:700">Subsection heading</td>
            <td>24 / 32</td></tr>
        <tr><td class="bk-meta">md</td>
            <td style="font-size:var(--text-md);line-height:var(--leading-md)">Intro copy sits here.</td>
            <td>20 / 28</td></tr>
        <tr><td class="bk-meta">base</td>
            <td style="font-size:var(--text-body);line-height:var(--leading-body)">Body text and every button label.</td>
            <td>16 / 24</td></tr>
        <tr><td class="bk-meta">caption</td>
            <td style="font-size:var(--text-caption);line-height:var(--leading-caption)">Captions and form labels.</td>
            <td>14 / 20</td></tr>
      </tbody>
    </table>

    <h3 class="bk-h3" style="margin-top:2.5rem">The eyebrow</h3>
    <p class="bk-note">The system's one typographic signature: a bold violet line
      over a larger light lead line. It opens nearly every section.</p>
    <div class="eyebrow-lead">
      <span class="eyebrow">Cloud &amp; DevOps</span>
      <span class="lead">Optimize costs without pausing delivery</span>
    </div>
  </section>

  <!-- ===================== COMPONENTS ===================== -->
  <section class="bk-section ds-anchor" id="components">
    <span class="bk-eyebrow">04 — Components</span>
    <h2 class="bk-h2">Pill buttons, hairline cards</h2>
    <p class="bk-note">Every control is a 48px pill: <code>padding: 4px 24px</code>,
      <code>border-radius: 9999px</code>, 16px bold label. Hover raises contrast
      everywhere except the tertiary border, which production dims to
      <code>#4004AF</code> — reproduced faithfully, flagged in WEBSITE-REVIEW.md.
      Only <code>:disabled</code> reduces the label, to opacity 0.2.
      Rendered live from <code>colors_and_type.css</code>, so this row is a working
      check on the token file rather than a picture of one.</p>

    <div>
      <div class="bk-specimen-row">
        <span class="bk-meta">primary</span>
        <button class="btn btn-primary" type="button">Send request</button>
        <span class="bk-meta">#5F20FE → #4004AF hover → #1E113B active</span>
      </div>
      <div class="bk-specimen-row">
        <span class="bk-meta">secondary</span>
        <button class="btn btn-secondary" type="button">Download the brief</button>
        <span class="bk-meta">#1E113B → #1C1C27 hover</span>
      </div>
      <div class="bk-specimen-row">
        <span class="bk-meta">tertiary</span>
        <a class="btn btn-tertiary" href="#components">Learn more</a>
        <span class="bk-meta">1px #5F20FE → #4004AF hover</span>
      </div>
      <div class="bk-specimen-row">
        <span class="bk-meta">ghost / text / link</span>
        <a class="btn btn-ghost" href="#components">Services</a>
        <a class="btn btn-text" href="#components">Privacy policy</a>
        <a class="btn btn-link" href="#components">Read the case study</a>
      </div>
      <div class="bk-specimen-row">
        <span class="bk-meta">disabled</span>
        <button class="btn btn-primary btn-disabled" type="button" disabled>Send request</button>
        <span class="bk-meta">opacity 0.2 — the only state allowed to lose contrast</span>
      </div>
    </div>

    <h3 class="bk-h3" style="margin-top:2.5rem">The one violet field</h3>
    <p class="bk-note">One primary action per page. The glow button is
      <code>#9980FF</code> with <code>#1B0D4E</code> text at 5.67:1, and it is the
      only place violet fills an area. Three light sources stack: a static halo,
      a highlight travelling under the fill, and an edge bloom 8px outside each
      end. The fill never changes colour on hover.</p>
    <div class="bk-cta-field">
      <span class="btn-glow-field" id="cta-field">
        <a class="btn btn-glow" href="#components" id="cta"><span>Discuss partnership</span></a>
      </span>
      <a class="btn btn-tertiary" href="#components">About us &amp; how we work</a>
    </div>

    <h3 class="bk-h3" style="margin-top:3rem">Surfaces</h3>
    <div class="bk-cols" style="margin-top:1rem">
      <div class="card">
        <h4 class="bk-h3" style="font-size:var(--text-md);margin-bottom:0.5rem">Default card</h4>
        <p class="bk-note" style="margin:0">24px radius, 1px hairline, no shadow.
          Padding is bottom-heavy — <code>2rem 2rem 3rem</code> — so a footer
          action has room to sit.</p>
      </div>
      <div class="card card-article">
        <h4 class="bk-h3" style="font-size:var(--text-md);margin-bottom:0.5rem">Article card</h4>
        <p class="bk-note" style="margin:0">Same surface at a 36px radius. Radius is
          the loudest brand signal in the system.</p>
      </div>
      <div class="card-feature">
        <h4 class="bk-h3" style="font-size:var(--text-md);margin-bottom:0.5rem">Feature card</h4>
        <p class="bk-note" style="margin:0">44px radius, no fill — a gradient
          hairline drawn with <code>mask-composite</code> over a blurred backdrop.</p>
      </div>
    </div>

    <h3 class="bk-h3" style="margin-top:2.5rem">Input &amp; chips</h3>
    <p class="bk-note">Straight from the contact form. The label lives inside the
      field (<code>common/InputText.vue</code>), bold at caption size with a violet
      asterisk, and the placeholder is a full sentence, not a format hint. Nothing
      pins the 64px height — it is 28px of top padding around one 24px text line
      plus 12px below. The chips are checkboxes (<code>Checkbox.vue</code>,
      secondary&thinsp;/&thinsp;small), not tags — they toggle.</p>
    <div class="bk-cols" style="margin-top:1rem;align-items:start">
      <div style="display:grid;gap:0.75rem">
        <div class="field">
          <label for="kit-email">E-mail <span class="required">*</span></label>
          <input id="kit-email" type="email"
                 placeholder="The only necessary thing to get a free consultation."
                 autocomplete="off">
        </div>
        <div class="field is-error">
          <label for="kit-email-error">E-mail <span class="required">*</span></label>
          <input id="kit-email-error" type="email" value="yaroslav@codecave"
                 autocomplete="off" aria-invalid="true" aria-describedby="kit-email-error-msg">
          <span class="error-message" id="kit-email-error-msg">Please enter a valid e-mail address.</span>
        </div>
      </div>
      <fieldset style="margin:0;padding:0;border:0">
        <legend style="padding:0 0 0 0.75rem;margin:0 0 0.75rem;color:var(--color-heading);font-size:var(--text-caption);font-weight:var(--font-weight-bold)">Services</legend>
        <div style="display:flex;flex-wrap:wrap;gap:0.5rem">
          <label class="checkbox checkbox-chip"><input type="checkbox" checked><span>Cloud &amp; DevOps</span></label>
          <label class="checkbox checkbox-chip"><input type="checkbox"><span>E-Commerce</span></label>
          <label class="checkbox checkbox-chip"><input type="checkbox"><span>Autodesk plugins</span></label>
          <label class="checkbox checkbox-chip"><input type="checkbox"><span>Automation &amp; AI</span></label>
          <label class="checkbox checkbox-chip"><input type="checkbox"><span>HubSpot</span></label>
          <label class="checkbox checkbox-chip"><input type="checkbox"><span>AR &amp; VR</span></label>
        </div>
      </fieldset>
    </div>
    <p class="bk-note" style="margin-top:1rem">Focus is a violet halo —
      <code>outline: none</code> plus <code>--shadow-input-focus</code> — and the
      error state swaps the same halo red via <code>--shadow-input-error</code>.
      Everything else gets a 2px <code>#B19AFE</code> ring. Neither may be
      removed.</p>
  </section>

  <!-- ===================== VOICE ===================== -->
  <section class="bk-section ds-anchor" id="voice">
    <span class="bk-eyebrow">05 — Voice &amp; tone</span>
    <h2 class="bk-h2">A small senior team, talking straight</h2>
    <p class="bk-note">First-person plural, present tense, short declaratives.
      Lead with the business outcome, then name the technology. Risk, cost and
      ownership are addressed head-on, because reassurance rather than
      excitement is what the audience is buying.</p>

    <ol class="bk-rules">
      <li>Outcome before technology — every service is titled by what it produces, never by its stack.</li>
      <li>Risk is named, not hidden — NDA, scope, milestones and outcomes are stated upfront.</li>
      <li>One low-friction ask — a free consultation, requested through a single primary action per page.</li>
      <li>Evidence over adjectives — every figure carries a named source; nothing is claimed without one.</li>
    </ol>

    <div class="bk-cols" style="margin-top:2.5rem">
      <div>
        <div class="bk-meta">Use</div>
        <ul class="bk-list">
          <li>Discuss project for free</li>
          <li>Get a free consultation</li>
          <li>Discuss partnership</li>
          <li>Learn more</li>
          <li>Tell us about your project</li>
          <li>Optimize costs</li>
          <li>payback</li>
          <li>scope, milestones and outcomes upfront</li>
          <li>Your idea stays yours</li>
        </ul>
      </div>
      <div>
        <div class="bk-meta">Avoid</div>
        <ul class="bk-list is-avoid">
          <li>world-class</li>
          <li>best-in-class</li>
          <li>cutting-edge</li>
          <li>industry-leading</li>
          <li>revolutionary</li>
          <li>game-changing</li>
          <li>synergy</li>
          <li>paradigm</li>
          <li>hard-sell urgency</li>
          <li>invented metrics</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- ===================== POSTURE ===================== -->
  <section class="bk-section ds-anchor" id="posture">
    <span class="bk-eyebrow">06 — Layout posture</span>
    <h2 class="bk-h2">Round, asymmetric, lit from below</h2>
    <p class="bk-note">How a page is <em>built</em>, as opposed to what it is coloured.
      Every specimen below is drawn with the real token out of
      <code>colors_and_type.css</code> — a corner rounded at true size, padding at its
      literal value — rather than a picture of one.</p>

    <h3 class="bk-h3" style="margin-top:2.5rem">The radius ladder</h3>
    <p class="bk-note">Radius is the loudest signal in the system, and a 4px corner does
      not occur anywhere in source. Measured census on the homepage: 24px on 42 blocks,
      12px on 9, 44px on 8, 8px on 7, 120px on 2. Radii of 2–4px do not appear at all.</p>

    <div class="bk-radii">
      <div>
        <div class="bk-radius-tile" style="--r:var(--radius-control)"></div>
        <span class="bk-meta bk-radius-tok">--radius-control · 8px</span>
        <span class="bk-meta">inputs, small chips</span>
      </div>
      <div>
        <div class="bk-radius-tile" style="--r:var(--radius-tile)"></div>
        <span class="bk-meta bk-radius-tok">--radius-tile · 12px</span>
        <span class="bk-meta">inline chips, icon tiles</span>
      </div>
      <div>
        <div class="bk-radius-tile" style="--r:var(--radius-card)"></div>
        <span class="bk-meta bk-radius-tok">--radius-card · 24px</span>
        <span class="bk-meta">the default card — 42 blocks</span>
      </div>
      <div>
        <div class="bk-radius-tile" style="--r:var(--radius-article)"></div>
        <span class="bk-meta bk-radius-tok">--radius-article · 36px</span>
        <span class="bk-meta">article &amp; insight cards</span>
      </div>
      <div>
        <div class="bk-radius-tile" style="--r:var(--radius-custom)"></div>
        <span class="bk-meta bk-radius-tok">--radius-custom · 44px</span>
        <span class="bk-meta">feature &amp; testimonial cards</span>
      </div>
      <div>
        <div class="bk-radius-tile" style="--r:var(--radius-pill)"></div>
        <span class="bk-meta bk-radius-tok">--radius-pill · 9999px</span>
        <span class="bk-meta">every button, pill and avatar</span>
      </div>
    </div>
    <p class="bk-note" style="margin-top:1rem">The two section-panel steps — 64px below
      768px, 120px at and above it — are missing from this row on purpose. They are sized
      for a full-width panel and read as a lozenge on a tile this small; they are shown at
      their real width two blocks down.</p>

    <h3 class="bk-h3" style="margin-top:3rem">Section rhythm is asymmetric</h3>
    <p class="bk-note">200px of padding above a section, 120px below. Sections own their
      approach, not their exit — so vertical space never collapses into one shared symmetric
      gap. Drawn here at true size straight from
      <code>--section-padding-top</code> and <code>--section-padding-bottom</code>; the
      hatched bands <em>are</em> the padding.</p>

    <div class="bk-rhythm">
      <span class="bk-meta bk-rhythm-label bk-rhythm-label-top">200px above</span>
      <div class="bk-rhythm-content">
        <span class="bk-eyebrow" style="margin-bottom:0.25rem">07 — Next section</span>
        <span class="bk-meta">the content box</span>
      </div>
      <span class="bk-meta bk-rhythm-label bk-rhythm-label-bottom">120px below</span>
    </div>

    <h3 class="bk-h3" style="margin-top:3rem">The light comes from below</h3>
    <p class="bk-note">A section panel is <code>#0A0A0B</code> — the same value as the page
      behind it. Nothing separates the two but radius and light thrown <em>upward</em>:
      <code>--shadow-section</code> stacks three layers with negative Y offsets seeded from
      <code>#281470</code>. It is physically wrong and instantly recognisable. The stage
      below is one step lighter so the shoulder is visible; on the real site the glow alone
      finds the edge.</p>

    <div class="bk-glow-stage">
      <div class="section-container">
        <span class="bk-meta">--shadow-section · 64px radius under 768px, 120px at and above</span>
      </div>
      <div class="section-container is-conventional">
        <span class="bk-meta">a conventional downward drop shadow — never ship this</span>
      </div>
    </div>

    <h3 class="bk-h3" style="margin-top:3rem">What the posture forbids</h3>
    <ol class="bk-rules">
      <li>Depth never comes from contrast. The page is <code>#0A0A0B</code> and a card is
        <code>#0F0F15</code> — one hair apart on purpose. If you are lightening a card to
        make it read, you have made a layout mistake, not a colour one.</li>
      <li>Only section panels are lit. Cards, inputs and buttons take no shadow at all —
        <code>--shadow-section</code> belongs to <code>.section-container</code> and nowhere
        else. The glow button's halo is a separate token with a separate job.</li>
      <li>The container is fixed at <code>max-width: 1280px</code> with gutters stepping
        8px → 16px → 32px, and <strong>768px is the one structural break</strong> in the
        whole system. Nothing else in the layout gets a second opinion about where to bend.</li>
      <li>One primary action per page. A long page may repeat the glow button once at the
        very end, never twice inside a viewport.</li>
      <li>There is no light theme. The black-ink logo variants in 01 are a bounded exception
        for print and cannot be generalised into one.</li>
    </ol>
  </section>

  <footer class="bk-foot">
    <p class="bk-meta">CODECAVE brand kit · tokens in <code>colors_and_type.css</code> ·
      component previews in <code>kitchen-sink/</code> · source seed <code>brand.json</code>.
      This page is authored, not generated — the brand pipeline does not overwrite it.</p>
  </footer>

</div>

<script is:inline>
(function () {
  'use strict';

  /* ---- palette ramp -----------------------------------------------------
     Read straight off the computed custom properties so the strip can never
     drift from the token file. */
  var STEPS = [
    ['brand', [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]],
    ['gray',  [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000, 1100]]
  ];
  var root = getComputedStyle(document.documentElement);
  var ramp = document.getElementById('ramp');

  ramp.innerHTML = STEPS.map(function (group) {
    var name = group[0];
    return group[1].map(function (step) {
      var hex = root.getPropertyValue('--color-' + name + '-' + step).trim();
      return '<div class="bk-step">' +
               '<div class="bk-step-chip" style="background:' + hex + '"></div>' +
               '<div class="bk-step-label">' +
                 '<div class="bk-meta">' + name + '-' + step + '</div>' +
                 '<div class="bk-meta" style="color:var(--color-body-secondary-lighter)">' + hex + '</div>' +
               '</div>' +
             '</div>';
    }).join('');
  }).join('');

  /* ---- logo stage -------------------------------------------------------
     The stage adopts the clicked variant's own declared surface. Nothing is
     inferred from the filename; each tile states its ground in the markup. */
  var stage = document.getElementById('logo-stage');
  var stageImg = document.getElementById('logo-stage-img');
  var caption = document.getElementById('logo-caption');
  var thumbs = Array.prototype.slice.call(document.querySelectorAll('.bk-thumb'));

  thumbs.forEach(function (thumb) {
    thumb.addEventListener('click', function () {
      thumbs.forEach(function (t) { t.removeAttribute('aria-current'); });
      thumb.setAttribute('aria-current', 'true');
      stageImg.src = thumb.getAttribute('data-src');
      stageImg.alt = thumb.querySelector('img').alt;
      stage.setAttribute('data-surface', thumb.getAttribute('data-surface'));
      caption.innerHTML = thumb.getAttribute('data-label');
    });
  });

  /* ---- glow CTA ---------------------------------------------------------
     Mirrors GlowButton.vue: the highlight rests at 20% of the width and
     tracks pointer X; the two edge blooms cross-fade across the outer 10%.
     Production drives this with gsap.quickTo; here the CSS transitions on
     .btn-glow-field carry the same 0.2s ease. Touch devices skip it, as in
     source. */
  var EDGE_ZONE = 0.1;
  var field = document.getElementById('cta-field');
  var cta = document.getElementById('cta');

  if (field && cta && window.matchMedia('(hover: hover)').matches) {
    field.addEventListener('mousemove', function (event) {
      var box = cta.getBoundingClientRect();
      var pct = (event.clientX - box.left) / box.width;
      cta.style.setProperty('--glow-x', (pct * 100) + '%');

      var left = 0, right = 0;
      if (pct < EDGE_ZONE) left = 1 - pct / EDGE_ZONE;
      else if (pct > 1 - EDGE_ZONE) right = (pct - (1 - EDGE_ZONE)) / EDGE_ZONE;
      field.style.setProperty('--edge-left', left);
      field.style.setProperty('--edge-right', right);
    });

    field.addEventListener('mouseleave', function () {
      cta.style.removeProperty('--glow-x');
      field.style.removeProperty('--edge-left');
      field.style.removeProperty('--edge-right');
    });
  }
})();
</script>
</DocPage>