/* ------------------------------------------------------------
   www.micro-glue.com
   ------------------------------------------------------------
   The product site. Grew out of the 2026-08 coverpage (one page, one
   mascot, a bounce to Substrate); became a destination on 2026-09-05.
   The token system and the timeline are inherited from it.

   Palette note: cyan is Micro-Substrate's colour (micro-glue is
   substrate connective tissue) and purple is the glue stick itself.
   Green is reserved estate-wide for status/liveness — not used here.
   ------------------------------------------------------------ */

/* Self-hosted, not Google-served: a public site should not hand every
   visitor's IP to a third party for a font, and the page is small enough
   that three files are cheaper than the DNS + TLS round trip to fetch them.

   Space Grotesk and Outfit are variable fonts, so one file each covers the
   whole weight range — hence `font-weight: 300 700` rather than a single
   value. Subset to Latin plus the punctuation this page actually uses (em
   dash, curly quotes, ®, ·): 92 KB for all three.

   font-display: swap — the fallback renders immediately and is replaced
   when the file lands. The alternative (`block`) leaves the wordmark
   invisible on a slow connection, which is the one thing the page cannot
   afford to lose.

   Licences ship beside the files: Space Grotesk and Outfit under SIL OFL
   1.1, JetBrains Mono under Apache-2.0. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-latin.woff2') format('woff2-variations'),
       url('../fonts/SpaceGrotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('../fonts/Outfit-latin.woff2') format('woff2-variations'),
       url('../fonts/Outfit-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark-only by design. Declared so the browser paints form controls and
     scrollbars dark too — without it they render in light chrome against a
     near-black page and read as a rendering fault. */
  color-scheme: dark;

  /* The timeline spine and its dots, separate from --border-light. The spine
     is a structural affordance — it is what makes the entries read as one
     sequence — and --border-light is 1.84:1 here, under the 3:1 that non-text
     contrast needs. This is 4.01:1. --border-light stays as it is for purely
     cosmetic edges, where 1.84 is fine. */
  --spine: #64748b;

  /* One size for every small tracked label — eyebrow, timeline dates,
     figcaptions, the mascot name. These were 0.76/0.74/0.7/0.82rem, four
     values for one role: differences too small to create hierarchy, big
     enough to need maintaining. 0.78rem also lifts the figcaptions off
     ~11.9px, under the ~12px floor where small text stops being readable
     regardless of contrast. */
  --fs-label: 0.78rem;

  --bg-abyss: #030712;
  --bg-deep: #0a0f1e;
  --bg-mid: #111827;
  --bg-surface: #162032;
  --bg-elevated: #1a2940;

  --accent: #00e5e3;          /* substrate cyan */
  --accent-dim: #00c4c2;
  --accent-glow: rgba(0, 229, 227, 0.12);
  --accent-glow-md: rgba(0, 229, 227, 0.25);

  --glue: #a78bfa;            /* the stick */
  --glue-deep: #8b5cf6;
  --glue-glow: rgba(167, 139, 250, 0.15);

  --text-bright: #f0f4f8;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-dim: #8693a8;

  --border: #1e293b;
  --border-light: #334155;

  --font-display: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --wrap: 1040px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 18% -12%, rgba(167, 139, 250, 0.12), transparent 60%),
    radial-gradient(900px 480px at 88% 8%, var(--accent-glow), transparent 62%),
    var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #5cfffd; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: rgba(0, 229, 227, 0.08);
  border: 1px solid rgba(0, 229, 227, 0.16);
  border-radius: 5px;
  padding: 0.1em 0.38em;
  color: #b9fffe;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--accent); color: #04121b;
  padding: 0.6rem 1rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; z-index: 50; }

:where(a, button):focus-visible {
  /* Why solid --accent and not the glow token: --accent-glow-md is 25% alpha,
     which computes to 1.54:1 against the page — WCAG 2.2 wants 3:1 for a focus
     indicator, so it was effectively invisible. Solid accent is 12.11:1. This
     page has four controls and one of them CANCELS A TIMED REDIRECT, so a
     keyboard user has to find it against the clock. */
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------ labels & type */
.eyebrow {
  margin: 0 0 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  /* Bigger, and flat. The wordmark should be the unarguably largest thing
     here; at the old 4.2rem cap it competed with a 300px mascot for the
     same optical space. Flat colour rather than the old purple->cyan ramp:
     gradient text on a dark hero is the house style of a different era and
     a different kind of company, and the palette already says cyan/purple
     through the eyebrow and the mascot. Dropping the gradient also removes
     background-clip:text, and with it the descender-clip on the "g" that
     needed a line-height/padding/negative-margin workaround. */
  font-size: clamp(3rem, 9vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-bright);
}

/* The hero terminal. Deliberately quiet: a bordered slab with a gradient and
   a shadow would out-shout the wordmark, and the wordmark has to win. Mono at
   body size, a hairline top and bottom, nothing else. */
.term {
  /* Bottom margin matters as much as the top: without it the caption butts
     straight into the paragraph below and reads as that paragraph's first
     line rather than as an annotation on the block. .sub has no top margin
     to supply the gap. */
  margin: 1.6rem 0 1.9rem;
  max-width: 44ch;
}

.term__block {
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--text-primary);
  /* A long command should scroll inside the block rather than widen the
     hero on a narrow screen. */
  overflow-x: auto;
}

/* Why the full reset and not just background/padding: the generic `code`
   rule above paints an inline chip — cyan background, border, radius — which
   is right for `mg` or `v1.0.0` inside a sentence and wrong inside a <pre>,
   where it drew a bordered pill around every command line and made the block
   look like two buttons rather than a terminal. The earlier reset cleared
   background and padding but left border and border-radius, which is what
   was still showing. `all: unset` would also drop the white-space handling
   the <pre> relies on, so the properties are cleared explicitly. */
.term__block code {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Dim, and aria-hidden in the markup: it is punctuation for the eye, not
   content, and it must not come along on a copy. */
.term__p { color: var(--text-dim); }

.term__cap {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-dim);
}

.lede {
  margin: 0 0 1rem;
  font-size: clamp(1.06rem, 2.1vw, 1.3rem);
  color: var(--text-primary);
}

.sub { margin: 0 0 1.9rem; color: var(--text-secondary); max-width: 56ch; }

/* ------------------------------------------------- history */
.history { padding: clamp(3rem, 8vw, 6rem) 0; }

.history h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  color: var(--text-bright);
  margin: 0 0 0.5rem;
}

.history__intro { margin: 0 0 2.4rem; color: var(--text-secondary); }

/* Single column by design — the vertical line and its dots are the
   spine of the story, and a second column would leave orphan dots with
   no line beside them. The generous max-width stops the entries
   hugging the left edge of a wide viewport. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.9rem;
  border-left: 2px solid var(--spine);
  display: grid;
  gap: 2.1rem;
}

.tl { position: relative; }

.tl::before {
  content: '';
  position: absolute;
  left: calc(-1.9rem - 7px);
  top: 0.5rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--spine);
}

/* 2026 is the pivot — where it stops being internal tooling and
   becomes the platform's engine. Mark it. */
.tl--mark::before {
  background: var(--glue);
  border-color: var(--glue);
  box-shadow: 0 0 0 5px var(--glue-glow);
}

.tl__date {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

.tl__h {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.tl p { margin: 0; color: var(--text-secondary); max-width: 74ch; }

/* Photo evidence on a timeline entry. These are proof the story
   happened, not the story itself, so they sit at thumbnail scale
   floated beside the prose rather than stacked under it — stacked,
   three photos turned a 30-second coverpage into a long scroll. */
.tl__fig {
  margin: 0;
  /* 250px was too small to be evidence — at that size a photograph reads as
     a stock thumbnail rather than as proof. Wider, and fewer entries carrying
     one, beats more entries carrying stamps. */
  max-width: 340px;
  position: relative;
}

/* Entries carrying a photo lay out as text | image, so the thumbnail
   sits directly beside the prose it evidences rather than floating off
   at the far edge of a wide column. Driven by an explicit .tl--fig
   class rather than :has(), which is too new to rely on here. */
.tl--fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "date  fig"
    "head  fig"
    "body  fig"
    ".     fig";
  /* The photo spans all three text rows, so those rows would otherwise
     stretch to share its height and pull date/heading/body apart —
     making photo entries look differently spaced from photo-less ones.
     A trailing 1fr row absorbs the slack instead. */
  grid-template-rows: auto auto auto 1fr;
  column-gap: 1.8rem;
  align-items: start;
}
.tl--fig .tl__date { grid-area: date; }
.tl--fig .tl__h    { grid-area: head; }
/* The body cell takes a wrapper, not each <p> directly — an entry can
   carry more than one paragraph, and pinning every <p> to the same grid
   area stacks them on top of each other. */
.tl--fig > p,
.tl--fig .tl__body { grid-area: body; }
.tl__body p + p    { margin-top: 0.7rem; }
.tl--fig .tl__fig  { grid-area: fig; }

.tl__fig img {
  display: block;
  width: 100%;
  /* Why 3:2 and object-fit rather than height:auto: the source photos are
     three different ratios (1.47, 1.78, 1.51), so each entry sized itself
     differently and the timeline reflowed as images loaded. Pinning the box
     and cropping to fill means a replacement photo drops in at any ratio
     without moving anything. Placeholders are authored at 1440x960, so
     shoot 3:2 to keep the whole frame. */
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  object-position: center;
  /* No border, no radius: a hard-edged photograph on a dark ground reads as
     documentary; a rounded bordered one reads as a UI card.

     Duotone rather than the old saturate/brightness lift. These are phone
     snaps taken across a decade in mixed light, and colour is the axis they
     lose on — the 2016 shots have the yellow cast of an office at night.
     Greyscale removes that axis entirely, and the purple wash below ties
     them to the palette, so they read as archival plates rather than as
     photos of varying quality. It applies to whatever lands here next
     without anyone having to edit the file. */
  filter: grayscale(1) contrast(1.06) brightness(1.02);
}

/* Placeholders opt out of the duotone. They are already drawn in the brand
   colours, so tinting them again washes the "awaiting photograph" text out
   and makes a holding plate look like faded artwork rather than an obvious
   gap. When a real photograph replaces one, delete the modifier class from
   its <figure> and it joins the treatment — that is the only switch. */

/* The tint sits over the IMAGE only — inset:0 on the figure would screen
   over the figcaption too and wash the text out. Bounded to the image's own
   3:2 box by matching its aspect-ratio and pinning to the top of the figure.
   Screened so it lifts shadows toward the glue purple without flattening
   highlights; pointer-events: none so it cannot eat a click. */
.tl__fig::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 3 / 2;
  background: linear-gradient(150deg,
              rgba(139, 92, 246, 0.30), rgba(0, 229, 227, 0.16));
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Opt-outs sit AFTER the tint rule: equal specificity, so order decides. */
.tl__fig--placeholder img { filter: none; }
.tl__fig--placeholder::after { content: none; }
/* Screen captures already in the brand colours, rendered on the page's own
   ground so they float on it: the duotone and its screen tint would turn the
   plate into a purple rectangle. Same switch as the placeholder. */
.tl__fig--flat img { filter: none; }
.tl__fig--flat::after { content: none; }

/* Reduced motion is about movement, not colour, so the duotone stays.
   But a viewer who has asked for less should not also get less contrast:
   nothing here animates, so there is nothing to disable. */

.tl__fig figcaption {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--text-dim);
}

/* Stop a float escaping its milestone and colliding with the next. */
.tl::after { content: ''; display: block; clear: both; }

@media (max-width: 700px) {
  /* Two columns don't fit a phone — drop back to one, photo under the
     prose. Resetting to block also clears the grid-area assignments. */
  .tl--fig { display: block; }
  .tl__fig { margin: 0.85rem 0 0; max-width: 100%; }
}

.linkish {
  background: none;
  border: 0;
  /* Why real padding and inline-block: this cancels the auto-redirect, and
     with zero vertical padding its hit area was the ~17px text line-box —
     under the 24x24 WCAG 2.2 minimum, on the control people tap in a hurry.
     It was also --text-dim, quieter than the paragraph around it, despite
     being the most important thing in the card. */
  display: inline-block;
  padding: 0.5rem 0.6rem;
  font: inherit;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover { color: var(--text-primary); }

.btn {
  display: inline-block;
  margin-top: 0.4rem;
  /* Why flat, not the old purple->cyan gradient: #051417 on the purple end
     was 4.43:1, just under the 4.5:1 AA floor for normal text, and this is
     the page's only call to action. Flat --accent-dim is 8.65:1 throughout. */
  background: var(--accent-dim);
  color: #051417;
  font-weight: 600;
  text-decoration: none;
  padding: 0.72rem 1.4rem;
  border-radius: 9px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  color: #051417;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 229, 227, 0.26);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* -------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--border);
  padding: 2rem 0 2.6rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.footer p { margin: 0 0 0.4rem; }

/* House attribution row (estate standard — see base.html for the rationale
   and the two sanctioned deviations). Ported from the substrate
   control-plane footer, with this site's tokens.

   inline-flex on the link, not the paragraph: the row is a sentence with a
   marked-up phrase inside it, so only the mark + wordmark share a
   centreline. Flexing the whole <p> would break "is part of" and "built by"
   onto their own flex items. */
.foot-brand .foot-powered {
  /* Why NOT inline-flex: a flex container establishes its own formatting
     context, so `align-items: center` centres the mark and the wordmark
     against EACH OTHER, and the box then meets the sentence by its bottom
     margin edge. Both together lifted "Microcelium" above "is part of" and
     "built by" — `vertical-align: baseline` could not rescue it, because
     the wordmark was no longer on the box's own baseline to begin with.

     Plain inline keeps the wordmark as ordinary inline text, so it shares
     the sentence's baseline by default. The mark is then aligned to that
     baseline itself (see the img rule below). Nothing here needs flex: it
     is a phrase in a sentence, not a layout. */
  color: inherit;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.foot-brand .foot-powered:hover { opacity: 1; }
/* Nudged down 1px: the mark's optical centre sits slightly above its box
   centre, so aligned geometrically it reads as riding high next to
   lowercase text. */
.foot-brand .foot-powered img {
  /* Inline, on the text baseline, with a small optical lift. The glyphs
     around it have descenders; the mark does not, so sitting it exactly on
     the baseline reads as sitting low. -0.16em splits the difference and
     centres it against the lowercase x-height. margin-right replaces the
     old flex gap. */
  display: inline;
  vertical-align: -0.16em;
  margin-right: 0.35rem;
}

/* The wordmark wears the brand gradient AS TEXT. Deliberately the house
   cyan->magenta rather than this site's bond-purple/teal: the point of the
   standard is that the parent mark looks identical everywhere it appears,
   so it is the one element on the page that does not take the local
   palette. */
.foot-brand .foot-powered strong {
  font-family: var(--font-display);
  font-weight: 600;
  background: linear-gradient(100deg, #00e5e3, #f500ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Trademark notice, matching the wording the sibling sites carry. Set
   quieter than the rest of the footer — it's a legal line, not a
   message. */
.footer__tm {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--text-dim);
  opacity: 0.75;
}

/* --------------------------------------------------- 404 */

.oops { padding: clamp(4rem, 12vw, 8rem) 0; text-align: center; }
.oops .mascot { width: min(58vw, 220px); }
.oops h1 { font-size: clamp(2rem, 6vw, 3rem); }


/* ============================================================
   Product site components (2026-09-05)
   ------------------------------------------------------------
   The page's grammar: a DESCRIPTION on the left in glue-lavender,
   the RUNNING RESULT on the right in substrate-cyan, and a BOND
   between them. Bo already encodes this (lavender body, cyan cap);
   the site borrows his logic rather than inventing one.
   ============================================================ */

:root {
  --describe: var(--glue);        /* the input side */
  --render:   var(--accent);      /* the output side */
  --bond: linear-gradient(90deg, var(--glue), var(--accent));
  --code-bg: #0c1224;
  --y-k: #c4b5fd;                 /* yaml key   — lighter glue, reads on the dark slab */
  --y-v: #7dd3fc;                 /* yaml value — a cool blue; cyan is kept for RESULTS */
}

/* ---- type scale ------------------------------------------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--text-bright); text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.2vw, 3.6rem); line-height: 1.05; letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; margin: 0.35rem 0 0.9rem; }
h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 600; }
.body { color: var(--text-secondary); max-width: 68ch; margin: 0 0 1rem; }
.small { font-size: 0.92rem; }
.body code, .lede code, .ctx code { font-family: var(--font-mono); font-size: 0.86em; color: var(--text-primary); background: var(--bg-mid); padding: 0.08em 0.4em; border-radius: 4px; }

/* ---- nav -------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg-abyss) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.nav__brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text-bright); }
.nav__ident { width: 28px; height: 28px; }
.nav__word { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; }
.nav__links a { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; transition: color .15s; }
.nav__links a:hover { color: var(--text-bright); }
/* The page you are on: bright, with a short rule beneath in the render colour. */
.nav__links a.is-active { color: var(--text-bright); position: relative; }
.nav__links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.45rem; height: 2px; border-radius: 1px; background: var(--render); }
.nav__door { color: var(--render) !important; }
.nav__door:hover { color: var(--text-bright) !important; }
@media (max-width: 720px) {
  .nav__links a:not(.nav__door) { display: none; }
}

/* ---- buttons (extends the inherited .btn) ------------------ */
.btn--primary { background: var(--render); color: var(--bg-abyss); border-color: var(--render); }
.btn--primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--bg-abyss); }
.btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-light); }
.btn--ghost:hover { border-color: var(--text-secondary); color: var(--text-bright); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }

/* ---- hero -------------------------------------------------- */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; }
/* One faint wash behind the render, glue-side to cyan-side. The only decorative gradient on the page. */
.hero::before { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; background:
  radial-gradient(60% 70% at 25% 60%, var(--glue-glow), transparent 70%),
  radial-gradient(60% 70% at 80% 40%, var(--accent-glow), transparent 70%); pointer-events: none; }
/* Thesis, then demonstration: the copy sits above, the render runs full width beneath it as a stage. */
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; align-items: start; }
.hero__copy { max-width: 62ch; }
.hero__copy .term { max-width: 34rem; }
.hero__h { margin: 0.4rem 0 1rem; }
.hero .lede { margin-bottom: 1.4rem; }

/* the render figure: in | bond | out */
.render { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
@media (min-width: 720px) { .render { grid-template-columns: minmax(0, 1.1fr) 150px minmax(0, 0.9fr); gap: 0; } }
.render__in, .render__out { min-width: 0; }
@media (min-width: 720px) { .render__in { align-self: center; } }
.render__lbl { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.5rem; }
.render__lbl--in  { color: var(--describe); }
.render__lbl--out { color: var(--render); }
.render__src { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); margin: 0.5rem 0 0; }

.code { margin: 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.55; color: var(--text-primary); }
.code--tree { font-size: 0.74rem; }
.code code { font: inherit; background: none; border: 0; border-radius: 0; padding: 0; color: inherit; }
.code { scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }
.code--yaml { border-color: color-mix(in srgb, var(--describe) 35%, var(--border)); }
.code--dim { color: var(--text-dim); }
.y-k { color: var(--y-k); } .y-v { color: var(--y-v); }
.t-dim { color: var(--text-dim); } .t-hi { color: var(--render); font-weight: 600; } .t-note { color: var(--text-dim); }
.d-add { color: #86efac; } .d-del { color: #fca5a5; text-decoration: line-through; text-decoration-color: rgba(252,165,165,.5); } .d-ctx { color: var(--text-dim); }

/* The bond turns vertical on narrow screens rather than disappearing: Bo sits on
   a short lavender-to-cyan line between "you write" and "you get". */
.render__bond { position: relative; display: block; height: 150px; }
.render__bond::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--glue), var(--accent)); border-radius: 1px; }
.bond-svg { display: none; }
@media (min-width: 720px) {
  .render__bond { height: auto; }
  .render__bond::before { content: none; }
  .bond-svg { display: block; }
}
.bond-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 719px) { .render__bo { width: 96px; } }
.bond-path { fill: none; stroke: url(#bondgrad); stroke-width: 1.5; stroke-linecap: round; opacity: 0.9; }
/* Draw the bonds once on load. Reduced motion: drawn at rest, no animation. */
@media (prefers-reduced-motion: no-preference) {
  .bond-path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: bond-draw 1.1s cubic-bezier(.4,0,.2,1) forwards; }
  .bond-path:nth-child(3) { animation-delay: .08s } .bond-path:nth-child(4) { animation-delay: .16s }
  .bond-path:nth-child(5) { animation-delay: .24s } .bond-path:nth-child(6) { animation-delay: .32s } .bond-path:nth-child(7) { animation-delay: .40s }
  @keyframes bond-draw { to { stroke-dashoffset: 0; } }
}
.render__bo { position: absolute; left: 50%; top: 50%; width: 132px; height: auto; transform: translate(-50%, -46%); filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

.outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.outs li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.6rem 0.7rem; align-items: center; background: var(--bg-mid); border: 1px solid color-mix(in srgb, var(--render) 22%, var(--border)); border-radius: 8px; padding: 0.55rem 0.75rem; }
.outs code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-bright); white-space: nowrap; }
.outs span { grid-column: 2; font-size: 0.78rem; color: var(--text-dim); margin-top: -0.35rem; }
.outs .ic { color: var(--render); }

/* icon via mask so it takes currentColor from its lane */
.ic { display: inline-block; width: 1.1rem; height: 1.1rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: 0 0 auto; }
.ic--lg { width: 1.5rem; height: 1.5rem; }

/* proof strip */
.proof { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(2rem, 4vw, 3rem); background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 720px) { .proof { grid-template-columns: repeat(4, 1fr); } }
.proof__tile { background: var(--bg-deep); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.2rem; }
.proof__tile b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; line-height: 1; }
.proof__tile b small { font-size: 1rem; color: var(--text-dim); font-weight: 500; }
.proof__tile span { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.35; }
.proof__tile em { font-style: normal; color: var(--text-dim); }

/* ---- sections ------------------------------------------------ */
.sec { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sec--alt { background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec__narrow { max-width: 760px; }
.sec .lede { margin-bottom: 1.6rem; }

/* the render lane, reused */
.lane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-top: 1.5rem; }
@media (min-width: 860px) {
  .lane { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: 2rem; }
  .lane--compare, .lane--three, .lane--sidecar { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); gap: 0.75rem; }
  .lane--sidecar { grid-template-columns: minmax(0, 1.25fr) 56px minmax(0, 0.75fr); }
}
.lane__out--wide { grid-column: 1 / -1; }
@media (min-width: 860px) { .lane__out--wide { grid-column: 1; } }
.lane__note p:first-child { margin-top: 0.2rem; }
.lane__mid { display: none; position: relative; }
@media (min-width: 860px) { .lane__mid { display: block; } }
.bond-h { position: absolute; left: 0; right: 0; top: 2.6rem; height: 2px; background: var(--bond); border-radius: 1px; }
.bond-h::after { content: ''; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--render); }

.annot { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.annot li { padding-left: 1rem; border-left: 2px solid var(--render); color: var(--text-secondary); font-size: 0.95rem; }
.annot b { color: var(--text-bright); font-weight: 600; }

.callout { margin: 1.75rem 0 1.25rem; padding: 1.1rem 1.3rem; border-left: 3px solid var(--describe); background: var(--bg-mid); border-radius: 0 10px 10px 0; max-width: 72ch; }
.callout p { margin: 0; color: var(--text-primary); }
.ctx { margin-top: 1.25rem; }
.ctx__row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: baseline; color: var(--text-secondary); margin: 0; }
.ctx__row code { color: var(--describe); }
.pull { margin: 1.5rem 0; padding: 0; border: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.35; color: var(--text-bright); font-weight: 500; text-wrap: balance; }
.pull::before { content: ''; display: block; width: 72px; height: 3px; background: var(--bond); border-radius: 2px; margin-bottom: 0.9rem; }

/* two ways */
.ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .ways { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 1rem; align-items: start; } }
.way--join { display: none; align-self: center; text-align: center; }
@media (min-width: 860px) { .way--join { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding-top: 2.4rem; } }
.way__same { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); line-height: 1.6; position: relative; padding: 0.8rem 0; }
.way__same::before, .way__same::after { content: ''; position: absolute; left: 50%; width: 2px; height: 2rem; background: var(--bond); transform: translateX(-50%); }
.way__same::before { bottom: 100%; } .way__same::after { top: 100%; }
.way__same code { color: var(--text-primary); text-transform: none; letter-spacing: 0; }
.caveat { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--border-light); color: var(--text-dim); }

/* lifecycle grid */
.life { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
@media (min-width: 640px) { .life { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .life { grid-template-columns: repeat(3, 1fr); } }
.life li { background: var(--bg-abyss); padding: 1.2rem 1.25rem; display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.35rem 0.8rem; align-content: start; }
.life .ic { width: 1.35rem; height: 1.35rem; color: var(--render); grid-row: 1 / span 2; margin-top: 0.1rem; }
.life b { color: var(--text-bright); font-weight: 600; }
.life span { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.life code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-primary); }

/* catalogue strip + page */
.cats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.5rem 0 1.5rem; }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cats { grid-template-columns: repeat(4, 1fr); } }
.cat { background: var(--bg-abyss); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; border-top: 3px solid var(--cat-c, var(--border-light)); }
.cat__h { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); display: flex; justify-content: space-between; }
.cat__h b { color: var(--cat-c, var(--text-bright)); font-weight: 600; }
.cat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.cat__list li { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-primary); }
.cat__list .ic { width: 0.95rem; height: 0.95rem; color: var(--cat-c, var(--text-dim)); }
/* one hue per category, from the two accents and their neighbours; no new colours */
.cat--ingress, .catnav__a--ingress, .sec--cat.cat--ingress { --cat-c: var(--accent); }
.cat--data, .catnav__a--data, .sec--cat.cat--data { --cat-c: #7dd3fc; }
.cat--messaging, .catnav__a--messaging, .sec--cat.cat--messaging { --cat-c: #fbbf24; }
.cat--observability, .catnav__a--observability, .sec--cat.cat--observability { --cat-c: #86efac; }
.cat--ops, .catnav__a--ops, .sec--cat.cat--ops { --cat-c: var(--text-secondary); }
.cat--app, .catnav__a--app, .sec--cat.cat--app { --cat-c: var(--glue); }
.cat--site, .catnav__a--site, .sec--cat.cat--site { --cat-c: #f0abfc; }

.pagehead { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.pagehead h1 { margin: 0.4rem 0 1rem; }
.facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 1.5rem 0 0; padding: 0; }
.facts div { display: flex; flex-direction: column; gap: 0.15rem; }
.facts dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.facts dd { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.catnav { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 60px; z-index: 30; background: var(--bg-abyss); padding-top: 0.75rem; }
.catnav__a { text-decoration: none; color: var(--text-secondary); font-size: 0.88rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; border-left: 3px solid var(--cat-c); }
.catnav__a b { color: var(--cat-c); font-weight: 600; margin-left: 0.25rem; }
.catnav__a:hover { color: var(--text-bright); border-color: var(--border-light); border-left-color: var(--cat-c); }
.sec--cat { padding: clamp(2rem, 4vw, 3rem) 0; }
.cat__title { display: flex; align-items: baseline; gap: 0.6rem; }
.cat__title::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cat-c); align-self: center; }
.cat__count { font-family: var(--font-mono); font-size: 1rem; color: var(--text-dim); font-weight: 400; }
.grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; align-items: start; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.card__head { display: flex; align-items: center; gap: 0.6rem; }
.card__head .ic { color: var(--cat-c); }
.card__name { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--text-bright); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card__ns { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); border: 1px solid var(--border-light); border-radius: 4px; padding: 0.1rem 0.4rem; }
.card__desc { margin: 0; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.5; flex: 1; }
.card__meta { display: flex; gap: 1rem; margin: 0; padding: 0.5rem 0 0; border-top: 1px solid var(--border); }
.card__meta div { display: flex; gap: 0.35rem; align-items: baseline; }
.card__meta dt { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.card__meta dd { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.card__tags { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.card__tags span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); background: var(--bg-mid); border-radius: 4px; padding: 0.1rem 0.4rem; }

/* years strip */
.years { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-left: 2px solid var(--spine); }
@media (min-width: 860px) { .years { grid-template-columns: repeat(6, 1fr); border-left: 0; border-top: 2px solid var(--spine); } }
.years li { position: relative; padding: 0.4rem 0 0.9rem 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; }
.years li::before { content: ''; position: absolute; left: -6px; top: 0.8rem; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-abyss); border: 2px solid var(--spine); }
@media (min-width: 860px) { .years li { padding: 1rem 0.75rem 0 0; } .years li::before { left: 0; top: -6px; } }
.years li:last-child::before { background: var(--render); border-color: var(--render); }
.years b { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--render); letter-spacing: 0.06em; }
.years span { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.4; }
.years code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text-primary); }

/* edges */
.edges { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.edges li { color: var(--text-secondary); padding-left: 1.1rem; position: relative; }
.edges li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--describe); }

/* the door */
.door { padding: clamp(3rem, 7vw, 5.5rem) 0; background: linear-gradient(180deg, var(--bg-abyss), var(--bg-deep)); border-top: 1px solid var(--border); }
.door__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
@media (min-width: 860px) { .door__grid { grid-template-columns: minmax(0, 1fr) 200px; } }
.door__bo { display: none; justify-self: end; }
@media (min-width: 860px) { .door__bo { display: block; } }
.door__note { margin-top: 1.25rem; color: var(--text-dim); }
.door--quiet { padding: 2rem 0 3rem; background: none; border-top: 0; }
.door__text { margin: 0; color: var(--text-secondary); }
.door__text a { color: var(--render); }
.history--page { padding-top: 0; }

/* footer grid (the attribution row beneath is inherited) */
.footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding-bottom: 1.75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); text-align: left; }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__col { display: flex; flex-direction: column; gap: 0.35rem; }
.footer__col a { color: var(--text-secondary); text-decoration: none; font-size: 0.92rem; }
.footer__col a:hover { color: var(--text-bright); }
.footer__h { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 0.5rem !important; }
.footer__bottom { text-align: left; }

/* ---- responsive odds and ends ------------------------------- */
@media (max-width: 720px) {
  .code { font-size: 0.74rem; }
  .proof__tile b { font-size: 1.6rem; }
}

/* --------------------------------------------------- software factories */
/* Same grammar as the render lane: lavender (--describe) is the input side — branches,
   templates — and cyan (--render) is what comes out — slots, estates. The graph copies
   the microcelium.com Dark Factory device (tokens moving along edges) so the two pages
   read as one story. */
.factory { margin: 1.6rem 0 0; }
.factory__graph { display: block; width: 100%; height: auto; }
.factory figcaption { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }
.fg-lane { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-dim); }
.fg-branch rect { fill: var(--bg-deep); stroke: color-mix(in srgb, var(--describe) 55%, var(--border)); stroke-width: 1.2; }
.fg-branch text { font-family: var(--font-mono); font-size: 14px; fill: var(--text-primary); }
.fg-mini { font-family: var(--font-mono); font-size: 11px; fill: var(--text-dim); }
.fg-edge { fill: none; stroke: color-mix(in srgb, var(--describe) 60%, var(--border)); stroke-width: 1.4; stroke-dasharray: 4 5; }
.fg-edge--out { stroke: color-mix(in srgb, var(--render) 60%, var(--border)); }
.fg-token { fill: var(--describe); }
.fg-token--out { fill: var(--render); }
.fg-stack { fill: color-mix(in srgb, var(--render) 6%, var(--bg-deep)); stroke: color-mix(in srgb, var(--render) 45%, var(--border)); stroke-width: 1.2; }
.fg-stack--b { fill: color-mix(in srgb, var(--render) 3%, var(--bg-deep)); }
.fg-stacklbl { font-family: var(--font-mono); font-size: 12px; fill: var(--render); }
.fg-slot rect { fill: var(--bg-mid); stroke: var(--border-light); stroke-width: 1; }
.fg-slotname { font-family: var(--font-mono); font-size: 13px; fill: var(--text-bright); font-weight: 600; }
.fg-slottag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-dim); }
.fg-tpl { fill: var(--bg-deep); stroke: color-mix(in srgb, var(--describe) 55%, var(--border)); stroke-width: 1.2; }
.fg-tpltitle { font-family: var(--font-display); font-size: 15px; font-weight: 600; fill: var(--text-bright); }
.fg-tplnote { font-family: var(--font-mono); font-size: 12px; fill: var(--describe); }
.grid--claims { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.6rem; }
.grid--claims .card { padding: 1.2rem 1.35rem; }
/* The direction paragraph: its own beat under the claims, not a fifth card and not a
   footnote — a rule above, air on both sides, the eyebrow naming it. */
.unlocks { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
.unlocks .eyebrow { margin-bottom: 0.6rem; }
.unlocks .body { margin: 0; max-width: 72ch; font-size: 1.02rem; line-height: 1.65; }
@media (max-width: 720px) { .grid--claims { grid-template-columns: minmax(0, 1fr); } .fg-mini, .fg-lane { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .fg-token { display: none; } }

/* --------------------------------------------------- history: the zig-zag
   Desktop only. The spine moves to the centre and entries alternate sides —
   text left / photo right, then photo left / text right — with a short
   connector from the spine to each entry's text. Richard, 2026-09-10: the
   lines can zig-zag to each other; mobile stays a single column. */
@media (min-width: 900px) {
  .history--page .timeline { padding: 0; border-left: 0; position: relative; gap: 3.2rem; }
  .history--page .timeline::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px; background: var(--spine);
  }
  .history--page .tl--fig {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 4.6rem;
    grid-template-areas: "date fig" "head fig" "body fig" ". fig";
  }
  .history--page .tl--fig:nth-child(even) {
    grid-template-areas: "fig date" "fig head" "fig body" "fig .";
  }
  .history--page .tl--fig .tl__fig { max-width: 100%; justify-self: start; }
  .history--page .tl--fig:nth-child(even) .tl__fig { justify-self: end; }
  .history--page .tl--fig:nth-child(odd) .tl__date,
  .history--page .tl--fig:nth-child(odd) .tl__h,
  .history--page .tl--fig:nth-child(odd) .tl__body { padding-right: 0.4rem; }
  /* the dot sits on the spine; the connector runs from it to the text side */
  .history--page .tl::before { left: 50%; margin-left: -6px; top: 0.55rem; }
  .history--page .tl::after {
    content: ''; display: block; clear: none; position: absolute; top: calc(0.55rem + 5px);
    height: 2px; width: calc(2.3rem - 8px); background: var(--spine);
  }
  .history--page .tl:nth-child(odd)::after  { right: calc(50% + 6px); }
  .history--page .tl:nth-child(even)::after { left:  calc(50% + 6px); }
  .history--page .tl--mark::after { background: var(--glue); }
}

/* Door cards on the home page (the depth moved to its own pages, 2026-09-10). */
.grid--doors .card__desc strong a { color: var(--text-bright); text-decoration: none; }
.grid--doors .card__desc strong a:hover { color: var(--render); }

/* A section that follows a page head keeps its bottom padding but not its top. */
.pagehead + .sec { padding-top: 0.75rem; }

/* The Microcelium mark on the door: the parent's badge, not another nav item (Richard, 2026-09-10). */
.nav__door { display: inline-flex !important; align-items: center; gap: 0.35rem; }
.nav__door-mark { display: block; width: 16px; height: 16px; flex: none; }

/* The "Now" block sits under the timeline, outside it: the present is not an entry. */
.history-now { padding-top: 0; }
.history-now h2 { margin-top: 0.3rem; }
/* The team photograph under the Now heading: full column width, the same duotone as the
   timeline plates so it reads as part of the record, not a staff page. */
.history-now .sec__narrow { max-width: 900px; }
.now__fig { margin: 1.2rem 0 1.4rem; position: relative; }
.now__fig img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.now__fig::after { content: ''; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 3 / 2; background: linear-gradient(150deg, rgba(139, 92, 246, 0.30), rgba(0, 229, 227, 0.16)); mix-blend-mode: screen; pointer-events: none; }
.now__fig figcaption { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }

/* The ten-word glossary on how-it-works. */
.words { margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 2.4rem; }
.words div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.8rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--border); }
.words dt { font-family: var(--font-mono); font-size: 0.9rem; color: var(--render); }
.words dd { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
@media (max-width: 720px) { .words { grid-template-columns: minmax(0, 1fr); } }

/* The walk-through ask at the foot of every inner page: button first, one sentence beside it. */
.door__cta { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.door__cta .btn--primary { color: var(--bg-abyss); flex: none; }
.door__cta .door__text { margin: 0; max-width: 60ch; }

.facts dd small { font-size: 0.72rem; font-weight: 400; color: var(--text-dim); }

/* "Ask your AI" row in the footer, between the columns and the house line. Icons are the
   vendors' product marks (white fill), dimmed until hovered; label above, hint below. */
.footer__col .ask-ai { margin-top: 1.1rem; }
.ask-ai { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.ask-ai__label { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.ask-ai__links { display: flex; gap: 1rem; flex-wrap: wrap; }
.ask-ai__link { display: inline-flex; width: 1.5rem; height: 1.5rem; opacity: 0.7; transition: opacity .15s; }
.ask-ai__link:hover { opacity: 1; }
.ask-ai__link img { width: 100%; height: 100%; display: block; filter: brightness(0) invert(1); }
[data-theme="light"] .ask-ai__link img { filter: brightness(0); }
.ask-ai__hint { margin: 0; font-size: 0.78rem; color: var(--text-dim); }