/* ==========================================================================
   Director School — Base + Layout primitives
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

/* Motion is forced on for all users (Chris build rule) — prefers-reduced-motion is ignored. */

html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: 'kern', 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}

/* Universal mobile overflow safety — prevents the audit-flagged bug */
* { min-width: 0; }

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

ul, ol { list-style: none; }

/* --- Typography defaults --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-h3);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h3);
  font-family: var(--font-body);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  text-wrap: pretty;
  max-width: 65ch;
}

p.lead {
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 60ch;
}

strong { font-weight: 700; }
em { font-style: italic; }

/* --- Meta / monospace labels --- */
.meta, .dateline, .section-number {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- Layout primitives --- */
.container {
  width: 100%;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-9);
  position: relative;
}

@media (min-width: 1024px) {
  .section { padding-block: var(--space-10); }
}

/* Section header — number + label, top-left aligned */
.section-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.section-number { color: var(--brand); }

.section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Hairline rule */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 1.1rem 2.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  will-change: transform;
}

.btn--primary {
  background: var(--gold);
  color: var(--ink);
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover { background: var(--gold-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border-mid);
  padding: 1rem 1.5rem;
}

.btn--ghost:hover { background: var(--bg-subtle); border-color: var(--ink); }

.btn--text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--brand);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.btn--text:hover { border-bottom-color: var(--brand); }

.btn--text .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn--text:hover .arrow { transform: translateX(4px); }

/* --- Forms --- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field input, .field textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-size: var(--fs-body);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.field textarea { min-height: 140px; resize: vertical; font-family: var(--font-body); }

/* Honeypot field for spam */
.honeypot { position: absolute; left: -9999px; visibility: hidden; }

/* --- Reveal animations (IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }

.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }

/* Hairline rule reveal on scroll */
.rule.reveal {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path var(--dur-reveal) var(--ease-out-expo);
}

.rule.reveal.in-view { clip-path: inset(0 0 0 0); }

/* --- Skip link (a11y) --- */
.skip-link {
  position: absolute;
  top: -40px;
  left: var(--space-4);
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  border-radius: var(--radius);
  z-index: var(--z-loader);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: var(--space-4); }

/* --- Touch-target safety (WCAG 2.2) --- */
@media (pointer: coarse) {
  .btn, a, button { min-height: 44px; }
}