/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--t-font);
  color: var(--t-fg);
  background: var(--t-bg);
  font-size: var(--t-size-sm);
  line-height: var(--t-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }

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

/* ============ TYPOGRAPHY ============ */
.t-display {
  font-size: var(--t-size-3xl);
  line-height: var(--t-lh-tight);
  letter-spacing: var(--t-tracking-tight);
  font-weight: 600;
}
@media (min-width: 1100px) {
  .t-display { font-size: var(--t-size-4xl); }
}
.t-h1 { font-size: var(--t-size-2xl); line-height: var(--t-lh-tight); letter-spacing: var(--t-tracking-tight); font-weight: 600; }
.t-h2 { font-size: var(--t-size-xl); line-height: var(--t-lh-snug); letter-spacing: var(--t-tracking-tight); font-weight: 600; }
.t-h3 { font-size: var(--t-size-lg); line-height: var(--t-lh-snug); font-weight: 600; }
.t-eyebrow {
  font-size: var(--t-size-2xs);
  letter-spacing: var(--t-tracking-wider);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--t-fg-muted);
}
.t-lede { font-size: var(--t-size-md); line-height: var(--t-lh-relaxed); color: var(--t-fg-muted); font-weight: 400; }
.t-body { font-size: var(--t-size-sm); line-height: var(--t-lh-relaxed); }

/* ============ LAYOUT ============ */
.t-container {
  max-width: var(--t-container-max);
  margin-inline: auto;
  padding-inline: var(--t-gutter);
}
.t-section { padding-block: var(--t-space-7); }
@media (min-width: 900px) {
  .t-section { padding-block: var(--t-space-8); }
}
.t-grid { display: grid; gap: var(--t-space-3); }

/* ============ ACCESSIBILITY ============ */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
  word-wrap: normal !important; margin: -1px; padding: 0;
}
.screen-reader-text:focus {
  background: var(--t-white); color: var(--t-black);
  clip: auto !important; clip-path: none; display: block;
  height: auto; width: auto; padding: 1rem; position: fixed;
  top: 0; left: 0; z-index: 100000; text-decoration: underline;
}
:focus-visible {
  outline: 2px solid var(--t-accent);
  outline-offset: 3px;
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; }

/* ============ BUTTONS / CTA ============ */
.t-btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--t-size-xs);
  letter-spacing: var(--t-tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  padding: 1em 1.6em;
  border: 1px solid var(--t-black);
  border-radius: var(--t-radius);
  background: var(--t-black);
  color: var(--t-white);
  transition: background var(--t-duration-fast) var(--t-ease), color var(--t-duration-fast) var(--t-ease), border-color var(--t-duration-fast) var(--t-ease);
}
.t-btn:hover, .t-btn:focus-visible { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-white); }
.t-btn--ghost { background: transparent; color: var(--t-black); }
.t-btn--ghost:hover, .t-btn--ghost:focus-visible { background: var(--t-black); color: var(--t-white); border-color: var(--t-black); }
.t-btn--on-dark { background: var(--t-white); color: var(--t-black); border-color: var(--t-white); }
.t-btn--on-dark:hover, .t-btn--on-dark:focus-visible { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-white); }

.t-link-arrow { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; }
.t-link-arrow svg { transition: transform var(--t-duration-fast) var(--t-ease); }
.t-link-arrow:hover svg, .t-link-arrow:focus-visible svg { transform: translateX(4px); }

/* ============ SKIP TO CONTENT etc handled by header.php markup ============ */

.t-visually-hidden-label { display: block; margin-bottom: 0.4em; font-size: var(--t-size-2xs); letter-spacing: var(--t-tracking-wide); text-transform: uppercase; color: var(--t-fg-muted); }

/* ============ SCROLL REVEAL ============
   Content is visible by default (safe if JS never runs). reveal.js opts
   elements into the hidden-then-fade-in treatment by adding
   .t-reveal-armed to <html> only after it has confirmed IntersectionObserver
   is available and reduced-motion is off — so there is no scenario where
   a failed script leaves a section permanently blank. */
html.t-reveal-armed [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-duration-slow) var(--t-ease), transform var(--t-duration-slow) var(--t-ease);
}
html.t-reveal-armed [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ============ CINEMATIC PAGE TRANSITIONS (progressive enhancement) ============
   Entrance fade is pure CSS — it always plays, needs no JS, and can never
   leave the page stuck blank (e.g. if a script fails to load or another
   plugin's JS errors on the page). JS (transitions.js) only adds an
   optional fade-out before same-page navigation; if that script never
   runs, links behave as normal, unstyled browser navigation. */
body {
  animation: t-page-in-anim 420ms var(--t-ease) both;
}
@keyframes t-page-in-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.t-page-out { animation: none; opacity: 0; transition: opacity 240ms var(--t-ease-in-out); }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}