/* ============================================================================
   TO-CHOOSE · GLOBALS
   Imports tokens, sets base type, defines shared primitives:
   - .eyebrow (every section opener)
   - .badge (theme chips)
   - .btn / .link (CTAs and inline links)
   - .rule (hairlines and 2px section dividers)
   - .figure-placeholder (striped paper for assets pending)
   - Responsive type scale overrides per breakpoint
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap");
@import url("./tokens.css");

/* --------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

/* --------------------------------------------------------------- BASE TYPE */
html {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}
em, .italic { font-style: italic; }

/* --------------------------------------------------------------- EYEBROW
   The single most-used micro-element. Three colored variants. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow--identity { color: var(--color-identity); }
.eyebrow--learning { color: var(--color-learning-ink); }
.eyebrow--world    { color: var(--color-world); }
.eyebrow--reverse  { color: #fff; }
.eyebrow--reverse::before { background: #fff; }

/* --------------------------------------------------------------- BADGE */
.badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 8px 3px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pin);
  display: inline-block;
  line-height: 1;
}
.badge--identity { color: var(--color-identity); }
.badge--learning {
  color: var(--color-learning-ink);
  border-color: var(--color-learning);
  background: color-mix(in srgb, var(--color-learning) 22%, transparent);
}
.badge--world    { color: var(--color-world); }
.badge--upcoming {
  background: var(--color-brand);
  color: var(--color-ink);
  border-color: var(--color-brand);
}

/* --------------------------------------------------------------- BUTTON */
.btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  padding: 14px 22px;
  background: var(--color-ink);
  color: var(--color-paper);
  border: 0;
  border-radius: var(--radius-pin);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--motion-fast);
}
.btn::after { content: "→"; font-size: 16px; }
.btn:hover { background: #2A2724; }
.btn--brand {
  background: var(--color-brand);
  color: var(--color-ink);
}
.btn--brand:hover { background: var(--color-brand-deep); }
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}

/* --------------------------------------------------------------- LINK */
.link {
  font-family: var(--font-body);
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-ink);
  padding-bottom: 1px;
  display: inline-block;
  transition: color var(--motion-fast);
}
.link--arrow::after { content: " →"; }
.link--quiet { border-bottom-color: var(--color-rule-strong); color: var(--color-ink-muted); }
.link--reverse { color: #fff; border-bottom-color: #fff; }

/* --------------------------------------------------------------- RULE */
.rule { height: 1px; background: var(--color-rule); border: 0; margin: 0; width: 100%; }
.rule--strong   { background: var(--color-rule-strong); }
.rule--section  { width: 56px; height: 2px; margin: 16px 0 28px; background: var(--color-ink-quiet); }
.rule--identity { background: var(--color-identity); }
.rule--learning { background: var(--color-learning); }
.rule--world    { background: var(--color-world); }

/* --------------------------------------------------------------- FIGURE PLACEHOLDER */
.figure-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      #E8E3D4 0 12px,
      #E2DDCC 12px 24px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------- PROSE */
.prose { max-width: 62ch; }
.prose p { margin: 0; }
.prose > * + * { margin-top: 18px; }
.prose-lead {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-ink);
}

/* --------------------------------------------------------------- "ON REQUEST" */
.on-request {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------- TYPE SCALE
   Container-queried responsive scale. Pages wrap their root in
   `container-type: inline-size` and `container-name: page`; this block
   then resizes headings as the container grows. */

/* PageWrap container — owns the container-query context.
   Responsive overrides on the inner [data-tc-page] only re-style descendants,
   so the container and the styled element must NOT be the same node. */
.tc-page-container {
  container-type: inline-size;
  container-name: page;
}

[data-tc-page] {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: var(--leading-prose);
  overflow: hidden;
  /* mobile defaults — overrides ship inside @container page below */
  --page-pad-x: 22px;
  --section-y:  64px;
  --text-body:  16px;
  --text-h1:    56px;
  --text-h2:    42px;
  --text-h3:    26px;
  --text-lead:  22px;
}

@container page (min-width: 701px) {
  [data-tc-page] {
    --page-pad-x: 48px;
    --section-y:  96px;
    --text-body:  16px;
    --text-h1:    88px;
    --text-h2:    64px;
    --text-h2-section: 48px;
    --text-h3:    30px;
    --text-lead:  26px;
  }
}

@container page (min-width: 1024px) {
  [data-tc-page] {
    --page-pad-x: 88px;
    --section-y:  128px;
    --text-body:  17px;
    --text-h1:    128px;
    --text-h2:    88px;
    --text-h2-section: 56px;
    --text-h3:    34px;
    --text-lead:  32px;
  }
}

/* --------------------------------------------------------------- ACCESSIBILITY */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 999;
  padding: 8px 16px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  overflow: visible;
}

*:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

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