/* ==========================================================================
   Even Adama — reset, typography defaults, accessibility primitives
   RTL-first: use logical properties everywhere. --flip covers the rest.
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

/* The responsive sources are an implementation detail of the <img>: with
   display:contents the picture generates no box at all, so every rule written
   against the bare <img> — absolute positioning, object-fit, direct-child
   selectors — keeps working exactly as before. The declaration lives with the
   element reset below, not here: at equal specificity the later rule wins, and
   putting it above the reset is what silently un-sized every full-bleed
   photograph on the site. */

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-inline-size: 100%;
}

/* NOT display:block. A <picture> is a wrapper around its <img>, and a block
   wrapper with auto height breaks any block-size:100% on the image inside it —
   the percentage has nothing to resolve against, so the image falls back to its
   intrinsic ratio and a full-bleed background stops filling its section. */
picture {
  display: contents;
}

img,
video {
  block-size: auto;
}

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

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

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

ul,
ol {
  list-style: none;
}

/* --- Type defaults -------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  color: var(--t-muted);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* Numerals stay LTR even inside RTL text.
   fit-content matters: a stretched LTR box puts `text-align: start` on the
   left, which drops the number on the opposite side of an RTL layout. */
.num,
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.num {
  inline-size: fit-content;
  justify-self: start;
}

/* --- Accessibility -------------------------------------------------------- */

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--u-2);
  inset-inline-start: var(--u-2);
  z-index: calc(var(--z-preloader) + 1);
  padding: var(--u-3) var(--u-5);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-sm);
  transform: translateY(-200%);
}

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

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Every interactive control clears the WCAG 2.2 target-size minimum. */
a,
button,
summary,
[role="button"] {
  min-block-size: 44px;
  min-inline-size: 44px;
}

/* Inline text links are exempt from target sizing — they sit in a sentence. */
a.inline {
  min-block-size: 0;
  min-inline-size: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --- Layout --------------------------------------------------------------- */

.container {
  inline-size: min(100% - (2 * var(--gutter)), var(--w-max));
  margin-inline: auto;
}

.prose {
  max-inline-size: var(--w-text);
  /* When .prose is a plain child of a wider .container (rather than combined
     on the same element), it must still centre itself in that container —
     otherwise it hugs the container's own start edge, sitting measurably
     closer to the screen edge than every section using .container.prose
     together, which reads as an inconsistent side gutter. */
  margin-inline: auto;
}

.section {
  position: relative;
  background: var(--t-bg);
  color: var(--t-fg);
}

/* --- Motion gate ----------------------------------------------------------
   .js-motion is added to <html> by main.js ONLY when motion is permitted.
   Without it, every animated element must be visible and static. All the
   hidden-initial-state rules below are therefore scoped to .js-motion.
   -------------------------------------------------------------------------- */

.js-motion [data-anim] {
  visibility: hidden;
}

.js-motion [data-anim].is-ready {
  visibility: visible;
}

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

  [data-anim] {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}