/* Face layout baseline — seeded by hatched_face_workspace_create.
 *
 * These are DEFAULTS, not a house style: change any value to fit the site.
 * What the server checks is the rhythm, not the choices — that spacing is on a
 * 4px grid, that section gaps come from --space-section, that type steps by
 * --type-ratio from --type-base, and that a deliberate overlap is marked with
 * data-face-allow-overlap in the markup. Palette, fonts, composition and motion
 * are the site's own. */

:root {
  /* Spacing: a 4/8px grid. Use these instead of ad-hoc padding. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* The gap between adjacent sections. qa-checks measures content, not boxes. */
  --space-section: 64px;

  /* Distance from the viewport edge. The clamp stays at or above 24px desktop. */
  --gutter: clamp(16px, 4vw, 48px);

  /* Measure cap. The line-length check wants body text at or under ~80ch. */
  --container-max: 72rem;

  /* Type scale. Every size is --type-base x --type-ratio^n. */
  --type-base: 1rem;
  --type-ratio: 1.125;
  --type-0: var(--type-base);
  --type-1: calc(var(--type-base) * var(--type-ratio));
  --type-2: calc(var(--type-base) * var(--type-ratio) * var(--type-ratio));
  --type-3: calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
  --type-4: calc(var(--type-base) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio) * var(--type-ratio));
}

@media (max-width: 390px) {
  :root {
    --space-section: 40px;
  }
}

/* Rhythm. Sections stack with the rhythm gap rather than a one-off margin. */
body {
  line-height: 1.5;
  margin: 0;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section + section {
  margin-block-start: var(--space-section);
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
}