/*
 * The design layer. Ships as a sane, fast base that reads the theme.json
 * tokens; the WordPress Site Team pipeline extends and overrides this file
 * from the approved design contract. Everything here reads a custom property,
 * so re-theming is a token change, not a rewrite.
 */

*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; display: block; }

:root {
  --container: var(--wp--style--global--wide-size, 1200px);
  --reveal-y: 16px;
  --reveal-dur: 0.6s;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Readable measure for running text inside a constrained column. */
.entry-content p, .wp-block-post-content p { max-width: 68ch; }

a { color: var(--wp--preset--color--accent); }
a:hover { text-decoration: underline; }

/* Focus visible, on-token, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.wp-block-button__link { transition: transform .18s ease, filter .18s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Skip link. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--text); color: var(--wp--preset--color--background);
  padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

/*
 * Class-based motion. The markup starts in its final position; JS adds
 * .is-in to play the entrance. If JS never runs, everything is already
 * visible. See design.js.
 */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) ease-out, transform var(--reveal-dur) ease-out; }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .reveal-stagger > * { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) ease-out, transform var(--reveal-dur) ease-out; }
  .js .reveal-stagger.is-in > * { opacity: 1; transform: none; }
  .js .reveal-stagger.is-in > *:nth-child(2) { transition-delay: .08s; }
  .js .reveal-stagger.is-in > *:nth-child(3) { transition-delay: .16s; }
  .js .reveal-stagger.is-in > *:nth-child(4) { transition-delay: .24s; }
}