/* ==========================================================================
   Schoolopedia — reset + typography scale
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-height) + var(--space-6));
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-ink-soft);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

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

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

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  color: var(--color-ink);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Visible, consistent focus for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--color-copper);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-copper);
  color: var(--color-ink-invert);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.text-hero {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.text-display-xl {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.text-display-l {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}

.text-display-m {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--color-ink);
}

.text-title-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}

.text-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
}

.text-body-s {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}

.text-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.text-label-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.text-overline-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Colour utilities — all reference tokens, no literals. */
.text-muted {
  color: var(--color-ink-muted);
}

.text-soft {
  color: var(--color-ink-soft);
}

.text-invert {
  color: var(--color-ink-invert);
}

.text-invert-muted {
  color: var(--color-ink-invert-muted);
}

.text-accent {
  color: var(--color-copper-text);
}

/* Accent word inside a heading. Deep copper by default so it clears AA at any
   size; the two display titles below are large enough to carry the brighter
   copper, which reads better at 40px+. */
.accent {
  color: var(--color-copper-text);
}


/* ---------------------------------------------------------------------------
   Utilities that replace inline style attributes
   ---------------------------------------------------------------------------
   The Blade templates carry no `style` attribute: the Content Security Policy
   forbids inline styles, and a one-off declaration in markup is a token that
   escaped tokens.css. These are the only values the pages actually use.
   --------------------------------------------------------------------------- */

/* Scroll-reveal stagger. components.css reads --reveal-delay. */
.reveal-delay-40 {
  --reveal-delay: 40ms;
}

.reveal-delay-60 {
  --reveal-delay: 60ms;
}

.reveal-delay-80 {
  --reveal-delay: 80ms;
}

.reveal-delay-100 {
  --reveal-delay: 100ms;
}

.reveal-delay-120 {
  --reveal-delay: 120ms;
}

.reveal-delay-160 {
  --reveal-delay: 160ms;
}

.reveal-delay-200 {
  --reveal-delay: 200ms;
}

.reveal-delay-240 {
  --reveal-delay: 240ms;
}

/* Spacing. Only the two steps the pages use, expressed as tokens. */
.space-above-4 {
  margin-top: var(--space-4);
}

.space-above-5 {
  margin-top: var(--space-5);
}

.fill-width {
  width: 100%;
}