/* ---------------------------------------------------------------
   Design tokens: the PlugTrust palette (black, beige, sage).
   --------------------------------------------------------------- */
:root {
  --color-paper: #ede8df;
  --color-paper-raised: #f5f2ec;
  --color-ink: #171717;
  --color-ink-muted: #55575a;
  --color-rule: #d6d0c4;
  /* Sage: decorative and on black only (2.3:1 on beige). */
  --color-sage: #8d9c9d;
  /* Sage for text and links on beige (5.7:1). */
  --color-sage-deep: #4a5d60;

  --font-serif: 'Literata Variable', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'IBM Plex Sans Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-brand: 'Unbounded Variable', 'IBM Plex Sans Variable', system-ui, sans-serif;
  --font-tagline: 'Montserrat Variable', 'IBM Plex Sans Variable', system-ui, sans-serif;

  /* Modular scale, ratio 1.25 */
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --page-max: 72rem;
  --measure: 38rem;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

main {
  flex: 1;
}

h1,
h2,
h3,
p {
  margin: 0;
  overflow-wrap: break-word;
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 10vw, 7rem);
}

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-sage-deep);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 40;
  padding: 0.5rem 1rem;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------------------------------------------------------------
   Motion: CSS only, so the strict Content-Security-Policy stays as
   it is. Content is always visible by default; nothing moves for
   people who turned on "Reduce motion".
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.3s;
  }

  .motion-rise {
    animation: motion-rise 0.8s cubic-bezier(0.2, 0.7, 0.1, 1) both;
  }

  .motion-delay-1 {
    animation-delay: 0.1s;
  }

  .motion-delay-2 {
    animation-delay: 0.2s;
  }

  .motion-delay-3 {
    animation-delay: 0.3s;
  }

  @supports (animation-timeline: view()) {
    .motion-reveal {
      animation: motion-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

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

@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
}

@keyframes motion-reveal {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
}