/* ==========================================================================
   base.css — element-level defaults only. Every named class lives in
   components.css or typography.css, so there is one place to look for each.
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  /* Anchor targets clear the sticky header instead of hiding underneath it. */
  scroll-padding-block-start: calc(var(--header-h) + var(--space-m));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Opts this document into cross-document view transitions. The animations
   themselves are in motion.css, inside the reduced-motion guard; this rule only
   states that the two documents may be transitioned between, and a browser that
   does not understand it simply navigates.

   Not inside the guard: `@view-transition` is a rule, not an animation, and a
   reduced-motion visitor whose browser honours the descriptor still gets no
   movement because no ::view-transition animation is ever declared for them. */
@view-transition {
  navigation: auto;
}

/* The page body is the part that changes between documents; the header and the
   footer are named in components.css, beside the components themselves, so they
   are held still while this cross-fades underneath them. */
main { view-transition-name: page; }

/* Anchor scrolling is smooth, except for the visitors who asked it not to be.
   Declared here rather than in motion.css because scroll-behavior is neither a
   transition nor an animation — the convention guard walks those two properties
   — and because the reduced-motion case is the one that needs stating. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* THE SHEET. One continuous lavender ground from the header to the top of the
   footer slab, and every section on it is transparent — a band of a different
   colour used as a section divider is the default shape of every
   section-stacked marketing site there is, and it is what makes a page read as
   a stack of templates rather than as one composition.

   Everything that reads as a section here is instead an OBJECT lying on this
   sheet: a white card, an ink flood, a floating solid. See the note at the
   head of tokens.css. */
body {
  min-block-size: 100svb;
  background-color: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Several compositions here deliberately bleed past the container, and the
     3D panels turn past it, so the one thing that must not happen is the page
     turning into a horizontal scroller on a 360px phone. clip, not hidden: it
     does not create a scroll container, so `position: sticky` still works
     inside it. */
  overflow-x: clip;
}

/* GRAIN, over everything, including the fixed header and the floating solids.

   Painted here rather than on `body` so it is not affected by any transform on
   the content: a grain layer that scales with a panel is a texture printed ON
   that panel, and the point of paper grain is that it belongs to the sheet
   rather than to anything lying on it.

   `multiply`, and at a fraction of the opacity the dark version needed. On a
   near-black ground mid-grey noise had to be composited with `overlay` to do
   anything at all; on lavender, multiplying it darkens the sheet slightly and
   unevenly, which is exactly what paper does. Anything stronger stops reading
   as tooth and starts reading as dirt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.07;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-stretch: var(--display-width);
  /* From the token, so the display voice has one weight and one place to
     change it. Archivo carries 400-900 as a real axis; font-synthesis-weight
     is off above so a stop the file does not hold cannot be faked into a
     smear. */
  font-weight: var(--weight-display);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p, li, dd, dt, figcaption, blockquote {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentcolor 38%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

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

svg {
  fill: none;
  stroke: currentcolor;
  flex: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
  /* Latin numerals and glyphs inside an Arabic UI still need their own
     direction resolved from the content, not from the button. */
  unicode-bidi: isolate;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
}

hr {
  border: 0;
  block-size: 1px;
  background-color: var(--line-strong);
}

:target {
  scroll-margin-block-start: calc(var(--header-h) + var(--space-m));
}

/* Keyboard focus only: a visible ring on every mouse click is noise, but a
   keyboard user must never lose track of where they are.

   The ink at full strength, because the ring has to be found against the paper
   and against all three lifts of it, and on every one of them the ink is the
   most findable mark available. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

/* The one exception, and it is the inversion the whole design turns on: a
   control sitting ON an ink flood — the primary button, the footer, the
   MatchAI island — where an ink ring is invisible for the same reason. */
.btn--primary:focus-visible,
.section--ink :focus-visible,
.on-ink :focus-visible {
  outline-color: var(--ink-inverse);
}

/* §6 — small, and the kind of detail the whole brief is about. */
::selection {
  background-color: var(--ink);
  color: var(--ink-inverse);
}

/* §6 — the scrollbar, on pointer devices only. A touch device draws its own
   overlay bar and hides it again; restyling it there replaces a native
   affordance with a worse one. `hover: hover` is the honest test for "there is
   a pointer", not a width breakpoint: a small window on a desktop still has a
   real scrollbar and a large tablet does not. */
@media (hover: hover) {
  :root {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

[hidden] {
  display: none !important;
}

/* Visually hidden but still announced — used by the skip link's target, the
   language switcher's legend and every icon-only control. */
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}