/* Ironledge Carriers components. Built ONLY from tokens.css: no raw colour, size or font here.
   Load order on every page: tokens.css, then ironledge.css. */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-body); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); font-weight: var(--weight-body); overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }

.il-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Type ---- */
.il-display, .il-h1, .il-h2, .il-h3 { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--track-display); margin: 0; text-wrap: balance; }
.il-display { font-size: var(--text-display); }
.il-h1 { font-size: var(--text-3xl); }
.il-h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
.il-h3 { font-size: var(--text-xl); font-weight: 700; line-height: var(--leading-snug); }
.il-lead { font-size: var(--text-lg); line-height: var(--leading-body); color: var(--color-ink-muted); max-width: 38em; margin: 0; }
.il-small { font-size: var(--text-sm); color: var(--color-ink-muted); }
.il-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 var(--space-4); }
.il-eyebrow::before { content: ""; width: var(--space-6); height: 3px; background: var(--color-accent); }

/* the signal line: the red line from the mark, used as a rule */
.il-rule { width: var(--space-7); height: 4px; background: var(--color-accent); border: 0; margin: 0; }

/* ---- Links ---- */
.il-link { color: var(--color-accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.il-link:hover { text-decoration-thickness: 2px; }
.il-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---- Buttons: filled objects, small by default, 44 px touch skirt ---- */
.il-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--button-h); padding: 0 var(--space-5); border: 0; border-radius: var(--radius);
  background: var(--color-button); color: var(--color-on-button); font: var(--weight-strong) var(--text-sm)/1 var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.il-btn::after { content: ""; position: absolute; inset: calc((var(--button-h) - var(--control-h)) / 2) 0; }
.il-btn:hover { background: var(--color-button-hover); }
.il-btn:active { transform: translateY(1px); }
.il-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.il-btn[disabled], .il-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.il-btn--2 { background: var(--color-button-2); color: var(--color-on-button-2); }
.il-btn--2:hover { background: var(--color-button-2-hover); }
.il-btn--film { background: var(--film-ink); color: var(--film-ground); }
.il-btn--film:hover { background: var(--il-ledge); }
.il-btn--lg { --button-h: var(--control-h); font-size: var(--text-base); padding: 0 var(--space-6); }

/* ---- Forms ---- */
.il-field { display: grid; gap: var(--space-2); }
.il-label { font-weight: var(--weight-strong); font-size: var(--text-sm); }
.il-input, .il-select, .il-textarea { width: 100%; min-height: var(--control-h); padding: 0 var(--space-3);
  border: 1px solid var(--color-field-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink);
  font: inherit; font-size: var(--text-base); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.il-textarea { min-height: 7rem; padding: var(--space-3); resize: vertical; }
.il-input::placeholder, .il-textarea::placeholder { color: var(--color-ink-muted); }
.il-input:focus, .il-select:focus, .il-textarea:focus { outline: none; border-color: var(--color-ink); box-shadow: var(--focus-ring); }
.il-input[aria-invalid="true"], .il-textarea[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
.il-input:disabled { opacity: 0.55; cursor: not-allowed; }
.il-help { font-size: var(--text-sm); color: var(--color-ink-muted); }
.il-error { font-size: var(--text-sm); color: var(--color-danger); font-weight: var(--weight-medium); }
.il-ok { font-size: var(--text-sm); color: var(--color-success); font-weight: var(--weight-medium); }

/* ---- Surfaces ---- */
.il-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-1); }
.il-band-film { background: var(--film-ground); color: var(--film-ink); }
.il-band-film .il-lead, .il-band-film .il-small, .il-band-film .il-eyebrow { color: var(--film-ink-muted); }
.il-band-alt { background: var(--color-bg-alt); }

/* ---- Reveal on scroll. Plays on its own clock once in view; never tied to scroll speed. ---- */
.js .il-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: var(--d, 0ms); }
.js .il-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .il-reveal { opacity: 1; transform: none; transition: none; } }

.il-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }