/* WHYZ base - resets, elements, layout primitives. Colours come only from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Without this every one of the four in-page nav anchors lands with the target
     section's first 53px hidden under the sticky masthead - measured at 390x844, where
     the heading of #what sat at y=-9 after the jump. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-3);          /* 16px - standard 23: no iOS zoom on focus */
  line-height: var(--lh-body);
  overflow-x: hidden;              /* standard 20 backstop; layouts must not rely on it */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img, picture, video { max-width: 100%; height: auto; display: block; }
/* The UA stylesheet gives <figure> `margin: 1em 40px`. Every bleed on this site is a
   figure, so without this reset a "full bleed" silently stops 40px short of the edge -
   measured: the hero image ran 760..1400 inside a 0..1440 viewport. */
figure { margin: 0; }
a { color: inherit; }
:focus-visible {
  /* The ring sits 3px OUTSIDE the element, so it is seen against the surrounding
     background - which on this site is either the black ground or a cream section.
     Gold is 11.08:1 on black and only 1.4:1 on cream, so .invert redefines --focus.
     Measured in-page: the worst ring was 1.4:1 on "Join the community" before this. */
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:where(button, a, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Standard 26: skip link is the first focusable element */
.skip {
  position: absolute; left: var(--sp-2); top: -100px; z-index: 100;
  background: var(--accent); color: var(--whyz-ink);
  padding: var(--sp-2) var(--sp-3); font-family: var(--font-text);
  min-height: var(--tap); display: inline-flex; align-items: center;   /* standard 22 */
  letter-spacing: var(--tracking-label); text-transform: uppercase; font-size: var(--fs-1);
}
.skip:focus { top: var(--sp-2); }

h1, h2, h3 {
  /* Balanced headings avoid a single trailing word on its own line; pretty body copy
     avoids widows. Both degrade to normal wrapping where unsupported. */
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}
p { margin: 0 0 var(--sp-3); max-width: var(--measure); text-wrap: pretty; }

.label {
  font-family: var(--font-text); font-size: var(--fs-1);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--sp-3);
}
.shell { margin-inline: auto; }
/* On the narrowest phone still in use, 32px of gutter is 10% of the screen and it costs a
   character per line: measured on vol01.html at 320, every reading paragraph rendered 288px
   wide at 29 characters per line, one short of the 30-45 band the whole scale is written
   against. 20px of gutter gives 300px and clears it. Width is scarcest exactly where the
   gutters were taking the largest share of it. */
.shell { width: min(100% - (var(--gutter) * 2), 90rem); }   /* one gutter token, shared with .edge */
/* .section lives in layout.css, under "vertical rhythm", where the rest of the page's
   spacing is decided. It used to be declared here as well, identically, which meant the
   file you edited to change the rhythm was a coin toss and one of the two edits did
   nothing; `no-duplicate-css-rule` fails the build if a selector is declared in two
   stylesheets again. */

/* Inverted cream sections - the bold transition device (DESIGN_SYSTEM.md) */
.invert { background: var(--inv-bg); color: var(--inv-text); --focus: var(--inv-focus); }
.invert .label { color: var(--inv-accent); }
.invert .rule { background: var(--inv-border); }

.rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* Present for the accessibility tree, absent from the eye - the standard sr-only clip.
   Reused by two different elements for two different reasons: a heading that exists for
   the document outline rather than for the eye (the four cards need an h2 above them so
   the outline does not jump h1 -> h3; visually the section title is already carried by
   the h1 above), and mobile100 item 53's fix (defect f5637639dc) on the collab form's
   message field, where a visible label plus a near-duplicate placeholder line was the
   space keeping the submit button out of thumb reach once a keyboard covers the screen. */
.visually-hidden, .visually-hidden-heading {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}