/* ============================================================================
   AGLOCOM DESIGN KIT
   One source of truth for all three properties:

     · the agency site      (root + /blog/)   — dark
     · the Schools Guide    (/schools/)       — light, re-themes the tokens
     · SEO Autopilot        (seo-autopilot)   — dark, the reference standard

   Load order everywhere: kit.css FIRST, then the property's own sheet.

   ── Why this file exists ────────────────────────────────────────────────────
   Before it, three stylesheets defined their own spacing, colour and alignment,
   and every fix in one leaked into another. A probe of the homepage found FIVE
   different left edges in a single page: content inset from the container by
   0, 33, 36, 247 and 295px, depending on which inline style had won. This file
   makes the contract explicit so it can be checked instead of discovered.

   ── The three rules ─────────────────────────────────────────────────────────

   1. ONE LEFT EDGE.  Every section's content begins at the container's left
      edge. Centring is opt-in via .kit-center and must be complete — a block
      that centres its heading centres its eyebrow, deck and actions too.

   2. THE MEASURE IS ON THE TYPE, NOT THE BOX.  Line length is capped in `ch`
      on the text itself. Never on a wrapper, and never with `margin: 0 auto`,
      which is what produced the second left edge on almost every page.

   3. COLOUR REPORTS MEASUREMENT.  --up / --down / --flat / --frozen mean a
      figure moved the way you want, against you, not at all, or is the
      baseline. A figure earns a direction colour only where the page shows
      BOTH endpoints, so the reader can check it. --brand is the logo and the
      primary action, nothing else.
   ============================================================================ */

:root {
  /* ── Ground ────────────────────────────────────────────────────────────────
     Cool and faintly blue rather than neutral grey. /schools/ re-declares all
     of these on .schools-body for its light theme. */
  --kit-bg:        #090B0F;
  --kit-surface:   #12171E;
  --kit-raised:    #171D26;
  --kit-rule:      #1D242E;
  --kit-rule-2:    #2B3441;

  /* ── Text ──────────────────────────────────────────────────────────────────
     Not pure white: #FFFFFF on near-black vibrates at paragraph length.
     --kit-fg-3 clears 4.5:1 on --kit-raised, its worst ground. */
  --kit-fg:        #EEF1F5;
  --kit-fg-2:      #A3ADBB;
  --kit-fg-3:      #7F8996;

  /* ── Measurement ───────────────────────────────────────────────────────────
     See rule 3. */
  --kit-up:        #47A176;
  --kit-down:      #D2922B;
  --kit-flat:      #49515D;
  --kit-frozen:    #7B8593;

  /* ── Brand — logo and primary action only ─────────────────────────────── */
  --kit-brand:     #E8000D;
  --kit-brand-hi:  #FF2C38;

  /* ── Type ──────────────────────────────────────────────────────────────────
     Inter only — it is the brand face. The hierarchy is carried by the gap
     between 800-weight display with hard negative tracking and 400 body, so
     both ends have to be set deliberately rather than left at defaults. */
  --kit-font:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --kit-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --kit-t-display: clamp(38px, 5.1vw, 66px);
  --kit-t-h2:      clamp(28px, 3.3vw, 46px);
  --kit-t-h3:      clamp(17.5px, 1.35vw, 20px);
  --kit-t-lede:    clamp(16.5px, 1.25vw, 19px);
  --kit-t-body:    16px;
  --kit-t-sm:      13.5px;
  --kit-t-label:   11.5px;    /* the label role: Inter as tracked uppercase */

  /* ── Measure ───────────────────────────────────────────────────────────────
     In ch so it tracks the font as the fluid scale moves. */
  --kit-measure:      74ch;   /* long-form reading */
  --kit-measure-deck: 58ch;   /* a section deck */
  --kit-measure-head: 19ch;   /* a display heading beside a deck */

  /* ── Rhythm ──────────────────────────────────────────────────────────────── */
  --kit-container: 1200px;
  --kit-gutter:    clamp(20px, 3.6vw, 44px);
  --kit-section-y: clamp(64px, 7.4vw, 118px);
  --kit-gap-x:     clamp(24px, 3vw, 56px);

  --kit-r:    4px;
  --kit-r-lg: 8px;
  --kit-ease: cubic-bezier(.2, .7, .2, 1);
  --kit-transition: 0.18s var(--kit-ease);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The container ──────────────────────────────────────────────────────────
   One width, one left edge, on all three properties. */
.kit-container {
  width: min(100% - var(--kit-gutter) * 2, var(--kit-container));
  margin-inline: auto;
}

/* ── RULE 1 — one left edge ─────────────────────────────────────────────────
   A direct child of a container never centres itself. This is the rule that
   the inline `margin: 0 auto` scattered through the markup was breaking, and
   it is stated here so a probe can assert it. */
.kit-container > * { margin-inline: 0; }

/* ── RULE 2 — the measure is on the type ────────────────────────────────────
   Cap line length here, never on a wrapper that then centres itself. */
.kit-measure      { max-width: var(--kit-measure); }
.kit-measure-deck { max-width: var(--kit-measure-deck); }
.kit-measure-head { max-width: var(--kit-measure-head); }

/* ── Full-bleed ─────────────────────────────────────────────────────────────
   A band that must reach the viewport edge, declared rather than accidental.
   Works inside a grid column too, which is where the schools quiz band broke:
   it had a dark background but no bleed, so it stopped at the column edge. */
.kit-bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* Its inner container has to re-centre inside the bled box or the content
   drifts left by half the gutter. */
.kit-bleed > .kit-container { margin-inline: auto; }

/* ── Centring, opt-in and complete ──────────────────────────────────────────
   The CTA banner had a left eyebrow, a centred heading, a right-hand deck and
   centred buttons — four alignments in one box — because centring was applied
   per-element by inline styles. Here it is one decision for the whole block. */
.kit-center { text-align: center; }
.kit-center > * { margin-inline: auto; text-align: center; }
.kit-center > [class*="label"],
.kit-center > [class*="eyebrow"] { justify-content: center; }

/* ── The section head ───────────────────────────────────────────────────────
   Heading left, deck right, on one shape. Applied with :has() so no markup
   moves: a regex that inserts a wrapper div will eventually consume a closing
   tag from an ancestor and silently renest half a section — that happened
   here on 2026-08-26 and cost a full revert.

   Not inside a grid column, and not on a centred block: nested, it splits an
   already narrow column in two and wraps the heading to seven lines. */
.kit-head {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--kit-gap-x);
  align-items: end;
}

.kit-head > [class*="label"],
.kit-head > [class*="eyebrow"] { grid-column: 1 / -1; }

/* Anything after the deck spans, so the two-column shape is the head alone
   and never the section's content. */
.kit-head > :nth-child(n + 3) { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .kit-head { grid-template-columns: 1fr; align-items: start; gap: var(--kit-gap-x); }
}

/* ── Section rhythm ─────────────────────────────────────────────────────────
   ONE selector owns padding-block. Nothing else sets it — that is what stops
   the cancelling-margin fights that leave 300px voids between blocks. */
.kit-section { padding-block: var(--kit-section-y); }

/* ══════════════════════════════════════════════════════════════════════════
   TYPE PRIMITIVES
   ══════════════════════════════════════════════════════════════════════════ */

.kit-display {
  font-family: var(--kit-font);
  font-weight: 800;
  font-size: var(--kit-t-display);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.kit-h2 {
  font-family: var(--kit-font);
  font-weight: 800;
  font-size: var(--kit-t-h2);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The label role. Inter set as tracked uppercase — not a second family, and
   not a colour: the mark beside it is a 2px upright, the same tick that marks
   a frozen baseline elsewhere, saying "this section is measured from here". */
.kit-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--kit-font);
  font-size: var(--kit-t-label);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--kit-fg-3);
}

.kit-label::before {
  content: '';
  flex: none;
  width: 2px;
  height: 13px;
  background: var(--kit-frozen);
}

/* ══════════════════════════════════════════════════════════════════════════
   MEASUREMENT PRIMITIVES  (rule 3)
   ══════════════════════════════════════════════════════════════════════════ */

.kit-figure {
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--kit-fg);
}

/* Earned only where both endpoints are on screen. */
.kit-figure.is-up   { color: var(--kit-up); }
.kit-figure.is-down { color: var(--kit-down); }
.kit-figure.is-flat { color: var(--kit-flat); }

/* The baseline half of a two-endpoint figure: colourless on purpose, because
   the number you started from has no opinion. */
.kit-figure .from { color: var(--kit-frozen); font-weight: 700; }

/* Provenance. This business sells numbers you can check, and a number whose
   source is not stated cannot be. */
.kit-source {
  font-size: var(--kit-t-sm);
  line-height: 1.7;
  color: var(--kit-fg-3);
  max-width: 92ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   QUALITY FLOOR
   Applies on all three properties. Each of these was a real defect found by
   measurement across the 50 pages, not a precaution.
   ══════════════════════════════════════════════════════════════════════════ */

/* `overflow-x: hidden` computes overflow-y to auto, making body a scroll
   container — and it silently hides real overflow. Three pages were spilling
   23-120px at 390px and looked fine because of it. */
body { overflow-x: clip; }

/* Without height:auto an HTML height attribute survives as a presentational
   hint and object-fit:fill distorts the image. The header logo was compressed
   28% by exactly this. */
img, svg { display: block; max-width: 100%; height: auto; }

/* A grid item defaults to min-width:auto, so a wide child — a table, a long
   string, an image — drags the column and the document past the viewport
   instead of shrinking. */
.kit-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kit-gap-x); }
.kit-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kit-gap-x); }

@media (max-width: 900px) { .kit-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kit-grid-2, .kit-grid-3 { grid-template-columns: 1fr; } }

/* Wide data scrolls inside its own box so the page does not. */
.kit-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* AGENTS.md floor. Inline links inside a sentence are exempt (WCAG 2.5.8) and
   must stay inline or they break the line box they sit in. */
.kit-tap { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.kit-tap-block { min-height: 44px; }   /* for blocks that stack children */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}