/* ══ stack.css — the site/stack/ family ══════════════════════════════════════
   Four pages: a hub plus one page each for the three engines TPL runs that do not
   already have a page of their own (Anthropic, NVIDIA, AWS). Google is the fourth
   engine and keeps channels/google.html; the hub links there rather than minting a
   second Google page on the same keyword.

   NO PER-VENDOR ACCENT, DELIBERATELY. ADR-020 §"the accent vocabulary is now two
   categories" pre-refuses this exact case: "A future non-red accent that is neither
   [region nor carrier] needs its own decision and does not get to cite this ADR as
   precedent." It would also fail on the merits — NVIDIA's #76B900 on paper is the
   same case that forced ADR-020 to darken #44D62C to #1F7A12 for AA, Google has no
   single brand colour, and no true-colour mark files exist (assets/partners/mq/*.svg
   carry no fill and render through the marquee's grayscale filter). So these pages
   run the house palette, red stays the sole accent, and a full-colour vendor lockup
   at hero scale never appears — which also keeps the pages from reading as vendor
   endorsement, on pages where TPL claims a relationship with only two of the three.

   NOT PHOTOGRAPHIC, ALSO DELIBERATELY. ADR-020 already reasoned this out for the
   sibling family: "There is no honest photograph of a carrier ACCOUNT; a stock
   parcel shot would be decoration standing in for an argument." Carriers only became
   photographic (ADR-024) because the owner supplied one real frame each. There is no
   photograph of a partnership and no vendor frames exist, so the hero here is type
   only. Nothing emits <picture> at a file that is not on disk.

   Loaded after tpl.css by the four pages this family owns. Everything below is
   scoped under .st-page or an .st-* class, so no other page can be reached. */

/* ── the type-only hero ───────────────────────────────────────────────────────
   Same shape as couriers.css .cr-hero, minus the --region hook: the rule and the
   wash are the house red on every page of the family, because the subject of the
   page is TPL's operation, not the vendor's brand. */
.st-hero {
  position: relative;
  padding-top: clamp(48px, 6vw, 96px);
  border-top: 3px solid var(--red);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--red) 5%, transparent) 0%, transparent 320px),
    var(--paper-50);
}
.st-hero .eyebrow { color: var(--red-ink); }
.st-hero .lede { max-width: 62ch; }

/* ── the layer spine (hub) ────────────────────────────────────────────────────
   The three rows are not decoration and not a ranking: models/ai-transformation.html
   already publishes the stack as Layer 01 Reasoning / 02 On-prem / 03 Elastic, and
   these are those three layers with the engine that runs each. The numbering is
   therefore real information — it is the site's own published order — which is the
   one condition under which a 01/02/03 marker earns its place. */
.st-layers { list-style: none; margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
  border-top: 1px solid var(--hairline); }
.st-layer { border-bottom: 1px solid var(--hairline); }
.st-layer > a {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 20px;
  align-items: baseline; gap: clamp(14px, 2vw, 30px);
  padding: clamp(22px, 2.6vw, 32px) 0; text-decoration: none; color: inherit;
  transition: background 220ms var(--ease);
}
.st-n { font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; color: var(--ink-muted); }
.st-layer h3 { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.01em; line-height: 1.18;
  margin: 0 0 7px; color: var(--ink); }
.st-layer p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft);
  max-width: 62ch; }
.st-kind { font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--red-ink);
  white-space: nowrap; }
.st-layer .st-go { display: block; width: 20px; height: 20px; flex: none;
  color: var(--ink-muted); transition: transform 200ms var(--ease), color 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .st-layer > a:hover { background: color-mix(in srgb, var(--red) 4%, transparent); }
  .st-layer > a:hover .st-go { transform: translateX(3px); color: var(--red-ink); }
}
.st-layer > a:focus-visible { outline: 2px solid var(--red-ink); outline-offset: -3px; }
.st-layer > a:active { transform: translateY(1px); }

/* the fourth engine is a note, not a fourth row: Google is an engine on ai.html:122
   AND a sales channel with its own page, so it is stated and linked, never duplicated */
.st-fourth { margin: clamp(26px, 3vw, 36px) 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--hairline); font-size: 14.5px; color: var(--ink-soft); }

/* ── what we run / why it matters ─────────────────────────────────────────────
   Plain house .card grid. No .card-arrive frame here: that mechanism measures its
   own trace off the rendered box (tpl.js fitFrame) and the courier rollout is its
   pilot per ADR-025; a second caller is a change to that rollout, not a styling
   choice, so it stays out until someone decides to widen it. */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 27vw, 320px), 1fr));
  gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(26px, 3vw, 36px); }
.st-grid .kicker { display: block; margin-bottom: 10px; }

/* ── the sibling nav ──────────────────────────────────────────────────────────
   Text links, no marks, no accents, no live/planned flag. The courier family's
   .cr-next chip row carries a per-carrier accent and a status tag, which on a vendor
   family would render five suppliers in one row ranked by relationship depth. That
   is a league table, so it is not ported. */
.st-next { margin-top: clamp(34px, 4vw, 50px); padding-top: 20px;
  border-top: 1px solid var(--hairline); }
.st-next .bkick { display: block; margin-bottom: 10px; }
.st-next ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; }
.st-next li + li::before { content: "\00b7"; margin: 0 11px; color: var(--paper-500); }
.st-next a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.st-next a:hover { color: var(--red-ink); }

/* ── the trademark line ───────────────────────────────────────────────────────
   Written per vendor in the generator, never templated. The courier version asserts
   "TPL S.A. holds a carrier account with them", and a template that asserts a
   relationship on every page would manufacture one for a vendor TPL only buys
   hardware from. See the TM notes in build-stack-pages.mjs. */
.st-tm { margin: clamp(30px, 3.4vw, 42px) 0 0; font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.6; letter-spacing: .02em; color: var(--ink-muted);
  max-width: 84ch; }

@media (max-width: 720px) {
  .st-layer > a { grid-template-columns: 54px minmax(0, 1fr); gap: 10px 14px; }
  .st-layer > a > span:nth-child(2) { grid-column: 2; }
  .st-kind { grid-column: 2; }
  .st-layer .st-go { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .st-layer > a, .st-layer .st-go { transition: none; }
  .st-layer > a:active { transform: none; }
}
html.a11y-no-motion .st-layer > a,
html.a11y-no-motion .st-layer .st-go { transition: none; }
html.a11y-no-motion .st-layer > a:active { transform: none; }