/* ═══ design/site.css — the corporate-surface COMPONENT layer ═════════════
 * Generated-adjacent, but NOT generated: a third artifact class alongside
 * canon (`tenax.tokens.json`, `DESIGN.md`) and generated (`tenax.css`).
 * Promoted from `tenaxlabs-dark-cyberpunk.html`'s inline <style> block by
 * ADR 0131, because that block was the only place these component classes
 * existed — `tenax.css` ships 47 custom properties and four `.t-*` type
 * classes and defines none of `.hero`, `.grid`, `.card`, `.synth`, `.pill`.
 *
 * LOAD ORDER: after `tenax.css`, which supplies every custom property read
 * below. This file is served by `porta-site` (ADR 0131 D1) and carries NO
 * vertical override layer — the corporate surface is the base design layer
 * with nothing stacked on it, the inverse of how `civic.css` works.
 *
 * THE RULE, and it is gated by `just check-design-tokens`, not promised:
 * every COLOUR resolves through `var(…)`. This file holds no colour values,
 * and no `px` for type or spacing — those have token scales. It does hold
 * `px` for hairline borders, border-radii, and one blur, because the canon
 * ships no radius or border-width token. Inventing one is an additive
 * grammar change and `DESIGN.md` requires that be flagged, never silent —
 * so it is recorded as a design-canon follow-up rather than done here.
 *
 * Edit this file to change the corporate surface's COMPONENTS. Edit
 * `tenax.tokens.json` to change its VALUES, then regenerate `tenax.css`.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══ THE COMPANY-SITE REFERENCE ═════════════════════════════════════════
 * tenaxlabs.dev — the endorser, and the fullest expression of the house
 * aesthetic: dark muted cyberpunk. Violet-charcoal ground lifted off pure
 * black, a faint structural grid, a soft purple/gold glow, and the
 * signature purple->gold gradient edge. Atmospheric, never neon —
 * restraint is the credibility argument.
 *
 * Always dark. Chrome stays dark cyberpunk regardless of any product's
 * content theme, and this page is all chrome.
 *
 * Every value resolves to a token in ./tenax.css. This file holds none.
 * ═══════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg);
  font-family: var(--font-sans); font-size: var(--size-body); line-height: 1.6;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(120% 80% at 78% -6%, color-mix(in srgb, var(--color-mood-current) 16%, transparent), transparent 60%),
    radial-gradient(90% 60% at 12% -4%, color-mix(in srgb, var(--color-gold) 7%, transparent), transparent 55%),
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: auto, auto, 2.75rem 2.75rem, 2.75rem 2.75rem;
  background-attachment: fixed;
}
/* The signature gradient edge. Amethyst->gold: this is the parent, so it is
 * the endorsement gradient, fixed on every surface. */
.edge { height: 2px; background: var(--gradient-endorsement); }

header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
}
.bar {
  max-width: 68rem; margin: 0 auto;
  padding: var(--space-normal) var(--space-loose);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-normal); flex-wrap: wrap;
}
/* The platform wordmark is MONO — it reads as engineering. A product
 * wordmark is a serif masthead; that contrast is the brand architecture
 * made visible in the type. */
/* V2 wordmark: LOWERCASE `tenax labs`, IBM Plex Mono Medium, .05em tracking.
 * V1 set this in Instrument Serif; V2 moved the house to the mono CLI voice
 * and reserved the serif for vertical mastheads. Not uppercase, and not the
 * .2em tracking a platform mark usually wants — the kit specifies .05em. */
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font-family: var(--font-mono); font-size: 0.95rem;
  font-weight: var(--weight-medium); letter-spacing: 0.05em;
  color: var(--text); text-decoration: none;
}
/* THE MARK — `design/brand/tenax-mark.svg`, V2, locked 2026-07-02.
 * A layered purple substrate (the models and agents everything runs on)
 * capped by a DETACHED gold bar (the grounded context Tenax adds) across a
 * 12-unit signal gap that is locked open — do not close it. The legacy
 * rotated gradient diamond this replaces is RETIRED; replace it on sight.
 * Sized here, never redrawn: the geometry lives in the asset. */
.mark { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; display: block; }
nav { display: flex; flex-wrap: wrap; gap: var(--space-loose);
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.12em; text-transform: uppercase; }
nav a { color: var(--text-dim); text-decoration: none; }
nav a:hover { color: var(--text); }

main { max-width: 68rem; margin: 0 auto; padding: 0 var(--space-loose); }
section { padding: var(--space-loose) 0; }
.kicker {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--space-normal);
}
.kicker::before { content: ""; width: 1.6rem; height: 1px;
  background: var(--color-gold); display: inline-block; }
.no { font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: var(--space-tight); }

.hero { padding: 5rem 0 3rem; }
h1 {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--size-display); line-height: 1.0; letter-spacing: 0.005em;
  margin: 0 0 var(--space-loose); max-width: 24ch;
}
/* Gold italic on the one phrase the eye should land on in the headline.
 * This and the CTA are the only gold on the page. */
h1 em { font-style: italic; color: var(--color-gold); }
.lede { font-size: 1.15rem; line-height: 1.55; color: var(--text-dim);
  max-width: 62ch; margin: 0 0 var(--space-loose); }
h2 {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--size-title); line-height: 1.1; margin: 0 0 var(--space-normal);
}
.sub { color: var(--text-dim); max-width: 68ch; margin: 0 0 var(--space-loose); }

/* The single call to action. Gold = signal. */
.cta {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font-family: var(--font-mono); font-size: var(--size-micro);
  font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bg); background: var(--color-gold);
  border-radius: 99px; padding: var(--space-normal) var(--space-loose);
  text-decoration: none; border: 1px solid var(--color-gold);
}
.cta:hover { background: var(--color-gold-bright); border-color: var(--color-gold-bright); }
.cta-sub { font-family: var(--font-mono); font-size: var(--size-micro);
  color: var(--text-faint); margin-left: var(--space-normal); }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-normal); }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 12px; padding: var(--space-loose); min-width: 0;
}
/* A card whose left edge carries the mark gradient — the vertical signature
 * flourish. Follows the ACTIVE mood, so a card that overrides the mood gets
 * its own edge for free. */
.card-mark { position: relative; overflow: hidden; padding-left: 1.9rem; }
.card-mark::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gradient-mark);
}
.card h3 {
  font-family: var(--font-mono); font-size: var(--size-small);
  font-weight: var(--weight-medium); letter-spacing: 0.06em;
  margin: 0 0 var(--space-tight); color: var(--text);
}
.card p { margin: 0; color: var(--text-dim); font-size: var(--size-small); }
.plane-label {
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--space-tight);
}

/* Portfolio cards. Each one sets --color-mood-current locally; --accent and
 * --gradient-mark both resolve through it, so the card re-skins itself from
 * ONE declaration. That is the "a vertical is a short override file" claim,
 * demonstrated rather than asserted. */
.v-herald    { --color-mood-current: var(--color-mood-herald); }
.v-financial { --color-mood-current: var(--color-mood-financial); }
.v-legal     { --color-mood-current: var(--color-mood-legal); }
.v-name {
  font-family: var(--font-serif); font-size: 1.9rem; line-height: 1;
  color: var(--text); display: inline-flex; align-items: center; gap: var(--space-tight);
}
/* Herald, the one live vertical, carries its real mark. The two illustrative
 * placeholders have no mark asset and show a mood swatch instead — the
 * difference is deliberate: a real product gets a real mark. */
.v-name img { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; display: block; }
.v-name.swatch::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--color-mood-current); flex: 0 0 auto; }
.v-byline { font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin-top: var(--space-normal); }
.pill {
  font-family: var(--font-mono); font-size: var(--size-micro); color: var(--text-dim);
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: 99px; padding: 0.2rem var(--space-normal);
}
.illustrative { opacity: 0.72; }

/* The trust pattern, on the house surface. The portfolio-wide signature:
 * synthesis on a separated ground with a mood rule and a persistent label,
 * structurally apart from verbatim fact. */
.synth {
  background: var(--lift); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: var(--space-loose);
}
.synth-label {
  display: block; font-family: var(--font-mono); font-size: var(--size-micro);
  font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--space-normal);
}
/* The canon label is "<lozenge> {Product} · synthesis". U+2B29 BLACK SMALL
 * LOZENGE is absent from IBM Plex Mono and renders as tofu, so the lozenge is
 * DRAWN, not typed — same mark, no font dependency. */
/* A REAL element, not a ::before, and painted from the token rather than
 * `currentColor`: engines vary on both `currentColor` backgrounds and
 * `transform` on pseudo-elements, and a mark that is a diamond in one
 * browser and a square (or invisible) in another is exactly the drift a
 * reference file exists to prevent. */
.loz {
  display: inline-block; width: 0.45em; height: 0.45em;
  background: var(--accent); transform: rotate(45deg);
  margin-right: 0.7em; vertical-align: 0.05em;
}
.synth p { font-family: var(--font-serif); font-size: var(--size-heading);
  line-height: 1.45; margin: 0; }
.synth .gap {
  display: block; margin-top: var(--space-normal); padding-top: var(--space-normal);
  border-top: 1px solid var(--rule); font-family: var(--font-sans);
  font-size: var(--size-small); font-style: italic; color: var(--text-dim);
}
.verbatim {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 8px; padding: var(--space-normal);
}
.verbatim blockquote {
  font-family: var(--font-serif); font-style: italic; margin: 0;
  border-left: 2px solid var(--accent); padding-left: var(--space-normal);
}
.attrib { color: var(--text-dim); font-size: var(--size-small); margin: var(--space-tight) 0 0; }
.prov { font-family: var(--font-mono); font-size: var(--size-micro);
  color: var(--text-faint); margin: var(--space-tight) 0 0; word-break: break-all; }

/* Type specimen */
.ramp { display: flex; flex-direction: column; gap: var(--space-normal); }
.ramp-row { display: flex; align-items: baseline; gap: var(--space-loose); flex-wrap: wrap; }
.ramp-tag { font-family: var(--font-mono); font-size: var(--size-micro);
  color: var(--text-faint); min-width: 7rem; }
.sw { display: flex; flex-wrap: wrap; gap: var(--space-normal); }
.sw-item { display: flex; align-items: center; gap: var(--space-tight);
  font-family: var(--font-mono); font-size: var(--size-micro); color: var(--text-dim); }
.sw-chip { width: 2.25rem; height: 1.25rem; border-radius: 4px;
  border: 1px solid var(--rule); flex: 0 0 auto; }

.rule { border: none; border-top: 1px solid var(--rule); margin: 0; }
footer {
  max-width: 68rem; margin: 0 auto;
  padding: var(--space-loose); border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-normal);
}
.endorse {
  display: inline-flex; align-items: center; gap: var(--space-tight);
  font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
/* The endorsement variant pins the stack to house amethyst on EVERY
 * vertical, so the parent signal stays constant and learnable. */
.endorse img { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; display: block; }
.meta { font-family: var(--font-mono); font-size: var(--size-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.note { color: var(--text-dim); font-size: var(--size-small); }
.note code { font-family: var(--font-mono); font-size: 0.85em; color: var(--text); }