/* ============================================================
   TED Digital - base layer
   Reset, document, container, type defaults, the teal rule.
   Every value is a token from tokens.css. Components come later,
   one file per kit component, copied from the locked kit.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Thin scrollbar, teal on stone (kit) */
html { scrollbar-color: var(--ted-teal) var(--ted-stone); scrollbar-width: thin; }
::-webkit-scrollbar { width: var(--gap-tight); height: var(--gap-tight); }
::-webkit-scrollbar-track { background: var(--ted-stone); }
::-webkit-scrollbar-thumb { background: var(--ted-teal); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ted-teal-dark); }

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

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  min-height: 100dvh;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
figure.wp-block-image { margin: 0; }

/* Visually hidden, still read out (skip link, labels) - core's copy is not loaded on this theme */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* One container - 1440 outer, 40 desktop / 20 mobile padding, applied everywhere */
.container {
  width: 100%;
  max-width: var(--width-container);
  margin-inline: auto;
  padding-inline: var(--gap-md);
}
@media (max-width: 768px) { .container { padding-inline: var(--gap-sm); } }

/* Display type: Poppins, light tracked caps, never an orphaned word */
h1, h2, h3, h4, .display {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

/* Subheads and labels: Poppins 500 */
.subhead { font-family: var(--font-heading); font-weight: 500; font-size: var(--text-lg); }
.label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.label--teal { color: var(--ted-teal); }

/* Prose never ends on a lone word (display type balances; body copy takes the last-line fix) */
p { text-wrap: pretty; }

/* Reading measure for prose */
.prose { max-width: 65ch; color: var(--ink-70); }
.prose > * + * { margin-top: var(--gap-sm); }

/* The brochure signature: a short thin teal rule under display type */
.teal-rule { display: block; width: 48px; height: 2px; border: 0; background: var(--ted-teal); margin-top: var(--gap-sm); }

/* Section rhythm */
.section { padding-block: var(--gap-xl); }
@media (max-width: 768px) { .section { padding-block: var(--gap-lg); } }

/* Focus: visible, teal, never removed */
:focus-visible { outline: 2px solid var(--ted-teal); outline-offset: 3px; }

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