/* ==========================================================================
   yehuda-slater.com v2 — token layer
   --------------------------------------------------------------------------
   Single source of truth for colour, type and rule. Loaded before every other
   stylesheet. The legacy variable names in style.css and in each article's
   inline <style> are aliased onto these tokens, so existing rules keep working
   while the vocabulary moves across.
   ========================================================================== */

:root {
  /* ── Ground and ink ───────────────────────────────────────────────────── */
  --paper:        #F6F0E4;   /* page ground: warm off-white                  */
  --paper-raised: #EFE7D6;   /* tables, pull-outs, form fields               */
  --ink:          #16233F;   /* body and headline. Deep navy.                */
  --ink-muted:    #5A6274;   /* captions, metadata. 5.4:1 on --paper.        */
  --rule:         #DBD1BC;   /* hairlines, table borders, dividers           */

  /* ── Data colours ─────────────────────────────────────────────────────── */
  /* --signal is the brand accent: links, buttons, rules, highlights.
     --adverse stays the loss colour and is never decorative.                */
  --signal:        #82632C;   /* accent type on light grounds, and rules */
  --signal-bright: #B0863C;   /* accent as a ground, and accent type on navy */
  --adverse:      #8C1D18;

  /* 12% washes of the above, for table row tints and callout grounds.      */
  --signal-wash:  #EFE7D6;
  --adverse-wash: #E1D3CD;

  /* Accent ramp. --signal-2 is the lighter gold used for hover states.     */
  --signal-2:     #C9A34E;
  --signal-3:     #DDBE7C;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;

  /* Fixed scale. No fluid clamps. */
  --t-13: 13px;
  --t-15: 15px;
  --t-17: 17px;
  --t-21: 21px;
  --t-27: 27px;
  --t-36: 36px;
  --t-48: 48px;

  --lh-body:       1.55;
  --lh-tight:      1.15;
  --measure:       68ch;
  --track-label:   0.08em;
  --track-display: -0.02em;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-17);
  line-height: var(--lh-body);
}

/* Figures that do not align in columns are a credibility leak. */
body,
table, th, td,
code, kbd, samp, pre, time,
.num, .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
}
strong, b { font-weight: 500; }

/* Defaults for headings no class rule reaches. Without these the UA falls back
   to its own em-based scale, which is what put a lone 25.5px h2 on the
   insights index. Class rules still win. */
h1 { font-size: var(--t-48); }
h2 { font-size: var(--t-36); }
h3 { font-size: var(--t-27); }
h4 { font-size: var(--t-21); }
h5 { font-size: var(--t-17); }
h6 { font-size: var(--t-15); }

/* Every <small> on the site is a numeric delta, so it is set as a figure
   rather than as shrunken prose. */
small {
  font-size: var(--t-13);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

p { max-width: var(--measure); }

/* ==========================================================================
   Utility type: eyebrows, kickers, metadata, badges, spec labels
   Mono, uppercase, tracked. These carry information, so they are set as
   labels rather than as small decorative text.
   ========================================================================== */

.section-label,
.hero-tag,
.card-tag,
.feature-kicker .cat,
.ins-card .cat,
.product-meta-row .k,
.solution-body .sb-label,
.work-status,
.badge,
.rp-label,
.tl-label,
.feature-card .go,
.ins-card .go,
.card-arrow,
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* ==========================================================================
   Controls. Elevation is expressed with rules, not blur.
   ========================================================================== */

input, textarea, select, button {
  border-radius: 2px;
  font-family: var(--font-sans);
  font-size: var(--t-15);
}

a { color: var(--signal); }

/* The .amp class existed to dodge Playfair's ornate ampersand at 0.92em.
   Newsreader's is plain, so the exception is retired: it was the only thing
   putting 11.96px and 44.16px on a fixed scale. Markup keeps the class. */
.amp { font: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ==========================================================================
   Grid floors
   A grid item's automatic minimum is its min-content width, so one long token
   inside a card can push a 1fr track wider than the container that holds it.
   Both halves of the fix, at every breakpoint.
   ========================================================================== */

.product-card, .card, .pillar, .ins-card,
.feature-card, .work-card, .soon-tile, .resource-item { min-width: 0; }

/* A nowrap flex row has no way to absorb a larger type scale, so it pushes
   past its container instead. These rows wrap. */
.pc-file, .hero-actions, .cred-strip-inner, .sb-tools { flex-wrap: wrap; }
.pc-file > *, .resource-item > * { min-width: 0; }

@media (max-width: 768px) {
  .product-grid, .soon-grid, .cards, .pillars, .ins-grid,
  .feature-grid, .work-grid, .layers-grid,
  .package-files { grid-template-columns: minmax(0, 1fr); }
}

/* Three fixed tracks holding filenames, which are unbreakable tokens. */
.package-files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-file { min-width: 0; }
.pcf-name { overflow-wrap: anywhere; }

/* ==========================================================================
   Narrow viewports. The scale is fixed, so headings step down a rung rather
   than sliding continuously on a viewport unit.
   ========================================================================== */

@media (max-width: 640px) {
  .article-hero h1,
  .hero h1,
  .page-hero h1 { font-size: var(--t-36); }

  /* 13px is the floor of the scale, so the 6-item nav has to buy its room
     from tracking and gap instead of from type size. */
  .nav-links { gap: 10px; }
  .nav-links a { font-size: var(--t-13); letter-spacing: 0; }

  /* The article template predates any mobile treatment: its nav ran to 602px
     against a 360px viewport. Wrapping is the holding fix until phase 3
     rebuilds this template on the grid. */
  nav ul { flex-wrap: wrap; }

  /* Wide analytical tables scroll inside their own box. The page never does. */
  .scenario-table,
  .article-body table { display: block; overflow-x: auto; max-width: 100%; }

  /* Two full-width buttons stacked beat two clipped buttons in a row. */
  .hero-actions { flex-wrap: wrap; }
}

/* ==========================================================================
   Motion floor. The full motion specification lands in phase 2; this is the
   guarantee that everything already on the page respects the preference.
   ========================================================================== */

@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;
  }
}