/* =========================================================================
 * Elysium — 01-home hi-fi page styles
 * ------------------------------------------------------------------------
 * Loaded AFTER wireframe.css and components/kpi-strip/kpi-strip.css.
 * Tokens only: every color / size / space / radius / shadow / ease /
 * duration is a var(--…) from tokens.css / motion.css. Alpha variants of
 * token colors are derived via color-mix(token, transparent) — repo
 * precedent: wireframe.css .site-header. Sanctioned literal values:
 * 1px hairlines, 2px focus outline (accessibility-performance.md §3
 * minimum), and the 900px / 600px breakpoints (components/README.md).
 * RTL-safe: logical properties only. No new motion — hover transitions
 * exist only on links/buttons (wireframe.css precedent); everything else
 * is static and belongs to the Motion Engineer.
 * ===================================================================== */

/* ── CTA buttons — exactly two styles: accent + quiet ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--s-7);              /* ≥44px touch target */
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition:
    background-color var(--dur-hover) var(--ease-soft),
    border-color     var(--dur-hover) var(--ease-soft),
    color            var(--dur-hover) var(--ease-soft);
}
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper-2);
}
.btn--accent:hover { background: var(--violet-deep); border-color: var(--violet-deep); }
.btn--quiet {
  border-color: color-mix(in oklab, var(--ink) 42%, transparent);
  color: var(--fg);
}
.btn--quiet:hover { border-color: var(--accent); color: var(--accent); }

/* Visible focus — ≥2px, shape + color (accessibility-performance.md §3) */
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Chapter furniture ─────────────────────────────────────────────── */
.section-eyebrow {
  display: block;
  margin-block-end: var(--s-6);
}

/* ── Chapter 1 · Hero ──────────────────────────────────────────────── */
.hero__lede {
  max-width: 60ch;
  font-size: var(--fs-20);
  color: var(--fg-2);
}

/* Hero canvas — luminous panel: soft brand halo, engraved gold mandala,
 * dotted-matrix glass frame, gold light seam, corner brackets. Static. */
.hero-canvas {
  position: relative;
  margin: 0;
  padding: var(--s-6) var(--s-4);
  /* Soft hero halo — the only brand-gradient moment outside the wordmark */
  background:
    radial-gradient(60% 55% at 50% 42%, color-mix(in oklab, var(--lavender) 28%, transparent), transparent 72%),
    radial-gradient(45% 40% at 68% 72%, color-mix(in oklab, var(--magenta) 7%, transparent), transparent 70%);
}

.hero-mandala {
  position: absolute;
  inset: 0;
  margin: auto;                 /* direction-agnostic centering */
  inline-size: 100%;
  aspect-ratio: 1 / 1;
  color: color-mix(in oklab, var(--gold) 62%, var(--paper));
  pointer-events: none;
}
.hero-mandala text { font-size: var(--fs-14); }

.hero-canvas__frame {
  position: relative;
  padding: var(--s-3);
  background-color: color-mix(in oklab, var(--paper-2) 65%, transparent);
  /* Static dotted-matrix texture — echoes the glass-panel matrix refs */
  background-image: radial-gradient(color-mix(in oklab, var(--lavender) 50%, transparent) 1px, transparent 1px);
  background-size: var(--s-4) var(--s-4);
  border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); /* gold light seam */
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
/* Corner brackets — thin, asymmetric pair (design/secondary-vfx.md §4) */
.hero-canvas__frame::before,
.hero-canvas__frame::after {
  content: "";
  position: absolute;
  inline-size: var(--s-5);
  block-size: var(--s-5);
  pointer-events: none;
}
.hero-canvas__frame::before {
  inset-block-start: calc(-1 * var(--s-2));
  inset-inline-start: calc(-1 * var(--s-2));
  border-block-start: 1px solid var(--gold);
  border-inline-start: 1px solid var(--gold);
}
.hero-canvas__frame::after {
  inset-block-end: calc(-1 * var(--s-2));
  inset-inline-end: calc(-1 * var(--s-2));
  border-block-end: 1px solid var(--gold);
  border-inline-end: 1px solid var(--gold);
}

.hero-fresco {
  display: block;
  inline-size: 100%;
  block-size: auto;             /* keep intrinsic ratio; width/height attrs reserve space */
  border-radius: var(--r-1);
}

/* Inert until the Motion Engineer wires the dither-dissolve */
.hero-dither {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* ── Chapter 2 · Trust strip — deliberately quiet, ink/muted only ──── */
.trust-strip {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid var(--border);
}
.trust-strip__eyebrow { margin-block-end: var(--s-5); }
.trust-strip__ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin: 0;
}
.trust-strip__item dt {
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-block-end: var(--s-2);
}
.trust-strip__item dd {
  margin: 0;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* ── Cards (pillars + capability index) ────────────────────────────── */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
/* Corner brackets — section-dominant violet, hairline, static */
.card::before,
.card::after {
  content: "";
  position: absolute;
  inline-size: var(--s-4);
  block-size: var(--s-4);
  pointer-events: none;
}
.card::before {
  inset-block-start: calc(-1 * var(--s-1));
  inset-inline-start: calc(-1 * var(--s-1));
  border-block-start: 1px solid color-mix(in oklab, var(--violet) 55%, transparent);
  border-inline-start: 1px solid color-mix(in oklab, var(--violet) 55%, transparent);
}
.card::after {
  inset-block-end: calc(-1 * var(--s-1));
  inset-inline-end: calc(-1 * var(--s-1));
  border-block-end: 1px solid color-mix(in oklab, var(--violet) 55%, transparent);
  border-inline-end: 1px solid color-mix(in oklab, var(--violet) 55%, transparent);
}

.card__status {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
}
.card .tag { background: var(--lilac-2); color: var(--violet-deep); }

.card__title {
  font-size: var(--fs-20);
  margin-block: var(--s-4) var(--s-3);
  color: var(--fg);
}
.card__body {
  font-size: var(--fs-16);
  color: var(--fg-2);
}
.card__link {
  display: inline-block;
  margin-block-start: var(--s-5);
  font-family: var(--mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.card__link::after { content: "→"; margin-inline-start: var(--s-2); }
[dir="rtl"] .card__link::after { content: "←"; }

/* Signal dot — static state only; pulse belongs to the Motion Engineer.
 * One dot per capability card, all violet (role: structure/processing).
 * No per-product color language. */
.signal-dot {
  flex: 0 0 auto;
  inline-size: var(--s-2);
  block-size: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--accent);
}

/* Magenta highlight role — underline carries the accent so body text
 * keeps full ink contrast; italic keeps meaning without color alone. */
.hl-highlight {
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--accent-2);
  text-decoration-thickness: 1px;
  text-underline-offset: var(--s-1);
}

/* ── Chapter 4 · Problem · answer ──────────────────────────────────── */
.duet__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-6);
}
/* Edge illumination, 1px trace: magenta = tension, chartreuse = resolution */
.duet__panel--problem { border-inline-start: 1px solid var(--accent-2); }
.duet__panel--answer  { border-inline-start: 1px solid var(--accent-3); }

.duet__eyebrow { margin-block-end: var(--s-4); }
.duet__body {
  font-size: var(--fs-18);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.duet__list {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}
.duet__list li {
  position: relative;
  padding-inline-start: var(--s-6);
  font-size: var(--fs-16);
  color: var(--fg-2);
}
.duet__list li + li { margin-block-start: var(--s-3); }
/* Chartreuse data tick — same grammar as kpi-strip's tick, never text */
.duet__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--s-3);
  inline-size: var(--s-4);
  border-block-start: 1px solid var(--accent-3);
}

/* ── Chapter 7 · Conversion band — the one dark ink-surface moment ── */
.covenant {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-7);
  background-color: var(--ink);
  /* Static gold dotted-matrix, very low intensity */
  background-image: radial-gradient(color-mix(in oklab, var(--gold) 22%, transparent) 1px, transparent 1px);
  background-size: var(--s-5) var(--s-5);
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent); /* gold light seam */
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
.covenant__eyebrow { color: var(--gold); }
.covenant__title {
  color: var(--paper-2);
  margin-block-start: var(--s-3);
}
.covenant__note {
  color: var(--paper-3);
  margin-block-start: var(--s-3);
  max-width: 60ch;
}
.covenant__cta { justify-content: flex-end; }
.covenant .btn--quiet {
  border-color: color-mix(in oklab, var(--paper-2) 40%, transparent);
  color: var(--paper-2);
}
.covenant .btn--quiet:hover { border-color: var(--gold); color: var(--gold); }
/* Violet outline is illegible on ink — gold carries focus here */
.covenant a:focus-visible,
.covenant .btn:focus-visible { outline-color: var(--gold); }

/* ── Responsive (breakpoints per components/README.md convention) ──── */
@media (max-width: 900px) {
  .trust-strip__ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-canvas { margin-block-start: var(--s-6); }
  .covenant { grid-template-columns: minmax(0, 1fr); }
  .covenant__cta { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .trust-strip__ledger { grid-template-columns: minmax(0, 1fr); }
  .covenant__cta { flex-direction: column; align-items: stretch; }
  .covenant__cta .btn { inline-size: 100%; }
}