/* ──────────────────────────────────────────────────────────────────────────
   GLACIS editorial layout — 20 Sep 2026 (design pass)

   The house alternative to the Tailwind-era page kit (centred text heroes,
   three icon cards, rounded-xl tiles with shadows, key/value tables in
   cards). Pages that take these classes set their matter as an index:
   a section head on the left that stays put while the right column
   scrolls, entries separated by hairlines, numerals in the display face,
   and two buttons at most (one solid, one ghost).

   Scope: everything is prefixed ed- and lives under main.ed so it never
   collides with page-level CSS. Colours are tokens from the aubergine
   sheet, so the light theme is handled by the token flip, not by a second
   set of rules. Where glacis-aubergine.css repaints p / li / dd / a with
   !important, the rules here match that weight.

   Loads after glacis-aubergine.css. First users: /evidence-pack,
   /resources.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Shell and rhythm ──────────────────────────────────────────────────── */
main.ed .ed-shell { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
main.ed .ed-sec { padding: clamp(52px, 7vw, 96px) 0; }
main.ed .ed-sec + .ed-sec,
main.ed .ed-sec.ed-ruled { border-top: 1px solid var(--rule); }

/* Section head left, matter right. The head is sticky on wide screens so
   a long index keeps its label in view. */
main.ed .ed-split { display: grid; gap: clamp(22px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) {
  main.ed .ed-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  main.ed .ed-split.ed-split-narrow { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  main.ed .ed-split-head { position: sticky; top: 104px; }
}
main.ed .ed-split + .ed-split {
  margin-top: clamp(44px, 6vw, 80px);
  padding-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--rule);
}

/* ── Type ──────────────────────────────────────────────────────────────── */
html body.aubergine main.ed h1 {
  font-size: clamp(2.4rem, 4vw, 3.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  text-wrap: balance;
}
html body.aubergine main.ed h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px;
  max-width: 18ch;
  text-wrap: balance;
}
html body.aubergine main.ed .g-eyebrow { margin-bottom: 18px; }
html body.aubergine main.ed p.ed-lede {
  font-family: var(--body);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.6;
  color: var(--bone) !important;
  max-width: 56ch;
  margin: 0;
  text-wrap: pretty;
}
html body.aubergine main.ed .ed-split-head p:not(.g-eyebrow) {
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--bone) !important;
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}
html body.aubergine main.ed .ed-split-head p.ed-mute { color: var(--bone-mute) !important; }
html body.aubergine main.ed .ed-prose p {
  font-family: var(--body);
  font-size: clamp(1.02rem, 1.2vw, 1.12rem);
  line-height: 1.65;
  color: var(--bone) !important;
  max-width: 60ch;
  margin: 0 0 1.1em;
  text-wrap: pretty;
}
/* Numerals and small labels are the display face, never mono: mono is for
   hashes and timestamps (founder, Aug 2026). */
html body.aubergine main.ed .ed-num {
  font-family: var(--display) !important;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--bone-mute) !important;
}
html body.aubergine main.ed .ed-k {
  display: block;
  font-family: var(--display) !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mute) !important;
  margin: 0 0 8px;
}
html body.aubergine main.ed h3.ed-sub {
  font-family: var(--display) !important;
  font-weight: 500;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--bone-mute) !important;
  margin: 32px 0 4px;
}
html body.aubergine main.ed .ed-list + h3.ed-sub,
html body.aubergine main.ed .ed-lead + h3.ed-sub { margin-top: 30px; }
@media (min-width: 1024px) { main.ed .ed-keep { white-space: nowrap; } }

/* ── Buttons: one solid, one ghost ────────────────────────────────────── */
:is(main.ed, .ed-close) .ed-actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: clamp(24px, 3vw, 34px); }
html body.aubergine :is(main.ed, .ed-close) a.ed-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display) !important; font-weight: 500;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 15px 24px;
  color: var(--bone-strong) !important;
  background: linear-gradient(180deg, rgba(52,39,65,0.92) 0%, rgba(36,27,44,0.96) 100%);
  border: 1px solid rgba(167,139,250,0.45);
  border-radius: 2px;
  text-decoration: none !important;
  box-shadow: 0 0 0 1px rgba(130,196,208,0.16) inset, 0 1px 0 rgba(237,227,208,0.06) inset;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
html body.aubergine :is(main.ed, .ed-close) a.ed-btn:hover,
html body.aubergine :is(main.ed, .ed-close) a.ed-btn:focus-visible {
  border-color: var(--violet);
  box-shadow: 0 0 0 1px rgba(130,196,208,0.32) inset, 0 0 28px rgba(167,139,250,0.30);
}
html body.aubergine :is(main.ed, .ed-close) a.ed-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* On cream the solid button is the same dark slab the rest of the site
   uses in light theme. */
html body.aubergine.theme-light :is(main.ed, .ed-close) a.ed-btn {
  color: #FFFFFF !important;
  background: linear-gradient(180deg, #2A2034 0%, #1B1424 100%);
  border-color: #1B1424;
  box-shadow: none;
}
html body.aubergine.theme-light :is(main.ed, .ed-close) a.ed-btn:hover,
html body.aubergine.theme-light :is(main.ed, .ed-close) a.ed-btn:focus-visible {
  border-color: #1B1424;
  box-shadow: 0 8px 22px rgba(27,20,36,0.22);
}
html body.aubergine :is(main.ed, .ed-close) a.ed-btn-ghost {
  font-family: var(--display) !important; font-weight: 500;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-mute) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 4px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
html body.aubergine :is(main.ed, .ed-close) a.ed-btn-ghost:hover,
html body.aubergine :is(main.ed, .ed-close) a.ed-btn-ghost:focus-visible {
  color: var(--bone-strong) !important;
  border-color: var(--cyan);
}
html body.aubergine :is(main.ed, .ed-close) a.ed-btn-ghost:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* ── Numbered parts (replaces the three-card row) ─────────────────────── */
main.ed .ed-parts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); }
main.ed .ed-parts > li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
main.ed .ed-parts > li > .ed-num { padding-top: 5px; }
html body.aubergine main.ed .ed-parts h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 10px;
  text-wrap: balance;
}
html body.aubergine main.ed .ed-parts p:not(.ed-k) {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--bone) !important;
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

/* ── Specification list (replaces key/value tables in cards) ──────────── */
main.ed .ed-spec { margin: 0; border-top: 1px solid var(--rule-strong); }
main.ed .ed-spec > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 640px) { main.ed .ed-spec > div { grid-template-columns: 176px minmax(0, 1fr); } }
html body.aubergine main.ed .ed-spec dt {
  font-family: var(--display) !important; font-weight: 500;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-mute) !important;
  padding-top: 4px;
}
html body.aubergine main.ed .ed-spec dd {
  margin: 0;
  font-family: var(--body) !important;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bone) !important;
  text-wrap: pretty;
}

/* ── Index entries (replaces card grids) ──────────────────────────────── */
html body.aubergine main.ed a.ed-lead {
  display: block;
  padding: 22px 0 24px;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  color: var(--bone) !important;
  text-decoration: none !important;
}
html body.aubergine main.ed .ed-lead-t {
  display: block;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--bone-strong) !important;
  text-wrap: balance;
  transition: color 160ms var(--ease);
}
html body.aubergine main.ed .ed-lead-d {
  display: block;
  font-family: var(--body);
  font-size: 1.02rem;
  line-height: 1.58;
  color: var(--bone) !important;
  margin-top: 8px;
  max-width: 62ch;
  text-wrap: pretty;
}
html body.aubergine main.ed a.ed-lead:hover .ed-lead-t,
html body.aubergine main.ed a.ed-lead:focus-visible .ed-lead-t { color: var(--cyan) !important; }

main.ed .ed-list { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }
@media (min-width: 640px) {
  main.ed .ed-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
}
html body.aubergine main.ed a.ed-entry {
  display: block;
  min-width: 0;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--bone) !important;
  text-decoration: none !important;
}
html body.aubergine main.ed a.ed-entry .ed-k { margin-bottom: 6px; }
html body.aubergine main.ed .ed-entry-t {
  display: block;
  font-family: var(--display); font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--bone-strong) !important;
  text-wrap: balance;
  transition: color 160ms var(--ease);
}
html body.aubergine main.ed .ed-entry-d {
  display: block;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.52;
  color: var(--bone-mute) !important;
  margin-top: 5px;
  text-wrap: pretty;
}
html body.aubergine main.ed a.ed-entry:hover .ed-entry-t,
html body.aubergine main.ed a.ed-entry:focus-visible .ed-entry-t { color: var(--cyan) !important; }

/* Title-only entries, three columns wide. */
main.ed .ed-list-3 { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }
@media (min-width: 640px) { main.ed .ed-list-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 960px) { main.ed .ed-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html body.aubergine main.ed a.ed-plain {
  display: block;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display) !important; font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--bone) !important;
  text-decoration: none !important;
  transition: color 160ms var(--ease);
}
html body.aubergine main.ed a.ed-plain:hover,
html body.aubergine main.ed a.ed-plain:focus-visible { color: var(--cyan) !important; }

/* Focus ring for every link and button in the kit. */
:is(main.ed, .ed-close) a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ── Closing module for long-form pages (added 21 Sep 2026) ───────────────
   A quiet band set between sections of a guide: a caps label, one or two
   live sentences, one solid button and one ghost. It stands alone (no
   main.ed needed) so the Tailwind-era guides can carry it without taking
   the kit's heading sizes. Place it before a section heading, about once
   per thousand words, and never twice in a row. Founder direction
   (20 Sep 2026): the top landing pages are guides with no closing CTA
   for three to six thousand words. */
html body.aubergine .ed-close {
  margin: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 44px);
  padding: clamp(22px, 3vw, 30px) 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  background: none;
}
/* One column on purpose: inside a 730px article measure, two wide buttons
   beside the sentence squeezed it to four lines (verifier, 21 Sep 2026). */
html body.aubergine .ed-close p.ed-close-k {
  font-family: var(--display) !important;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-mute) !important;
  margin: 0 0 8px;
}
html body.aubergine .ed-close p.ed-close-t {
  font-family: var(--body) !important;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--bone-strong) !important;
  margin: 0;
  max-width: 52ch;
  text-wrap: pretty;
}
html body.aubergine .ed-close .ed-actions { margin-top: 0; }
@media (max-width: 759px) {
  html body.aubergine .ed-close .ed-actions { gap: 12px 24px; }
}