/* Resets, base typography, focus and motion foundations.

   Milestone 1 (Safety Baseline and CSS Isolation): every rule here is
   now scoped beneath .emt-journey-studio — previously *, html, body,
   h1-h3, p, img, button, a and :focus-visible applied globally to the
   whole document, which would have overridden a host WordPress page's
   own typography, links, buttons and focus rings site-wide the moment
   this stylesheet loaded on the same page.

   html/body specifically can never be the *target* of a descendant
   selector (a class can't select an ancestor of itself), so the two
   rules that used to read `html, body { margin: 0; padding: 0; }` and
   `body { background; color; font-family; line-height; ... }` are
   handled differently: the margin/padding/background reset is dropped
   entirely (a host page's own body must stay exactly as the theme set
   it — Journey Studio's own surfaces already declare their own
   background where needed, e.g. .journey-widget__card,
   .journey-booklet__frame), while the *typography*
   foundation (color/font-family/line-height/font-smoothing) that
   every Journey-Studio element was implicitly inheriting from body is
   re-declared directly on .emt-journey-studio instead — every
   Journey-Studio-owned root element carries this class (see
   index.html), so the same foundation still applies everywhere it did
   before, just never beyond Journey Studio's own markup. The
   standalone local preview's own body background/margin (previously
   provided here) now lives in index.html's own harness-only <style>
   block instead, clearly marked as not part of this distributable
   stylesheet. */

.emt-journey-studio,
.emt-journey-studio *,
.emt-journey-studio *::before,
.emt-journey-studio *::after {
  box-sizing: border-box;
}

/* Modal Architecture milestone: the one deliberate exception to this
   file's own scoping principle above — a scroll lock has to reach the
   host page's own scrolling root by definition, there's no way to
   "scope" that to Journey Studio's own markup. Distinctively
   namespaced (not bare .scroll-lock) so it can't collide with a host
   page's own class of the same purpose; toggled only by
   scripts/journey-booklet.js, for exactly as long as the modal is
   open, alongside showModal()'s own already-native inertness of
   background content. */
.emt-journey-studio-scroll-lock {
  overflow: hidden;
}

.emt-journey-studio {
  color: var(--emt-js-color-ink);
  font-family: var(--emt-js-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.emt-journey-studio h1,
.emt-journey-studio h2,
.emt-journey-studio h3 {
  font-family: var(--emt-js-font-display);
  color: var(--emt-js-color-ink);
  line-height: 1.2;
  margin: 0 0 var(--emt-js-space-2);
}

.emt-journey-studio p {
  margin: 0 0 var(--emt-js-space-2);
}

.emt-journey-studio img {
  max-width: 100%;
  display: block;
}

.emt-journey-studio button {
  font-family: inherit;
}

.emt-journey-studio a {
  color: var(--emt-js-color-terracotta-strong);
}

/* Keyboard focus: always visible, never suppressed. */
.emt-journey-studio :focus-visible {
  outline: 3px solid var(--emt-js-color-focus);
  outline-offset: 3px;
  border-radius: var(--emt-js-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .emt-journey-studio,
  .emt-journey-studio *,
  .emt-journey-studio *::before,
  .emt-journey-studio *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}