/*! SCALE — every size the design uses, once.

**The name is the value.** `--space-20` is 20px. Nothing to memorise, nothing to look up, and no
argument about whether "normal" is bigger than "snug". The design is drawn on a 5px grid and these
are its eleven steps — not a t-shirt scale invented on top of it.

The system this replaces carried 21 spacing names for 11 values (three different names for 0, three
for 20px) and 13 radius names for 5 values, six of which were 0. */

/* THE GROUPS, and the four boxes named for what they hold: `--width-column` is the reading column
   (prose, in-body media, every body module), `--width-headline` the headline block above the hero,
   `--width-hero` the overlay headline on a full-bleed hero, `--width-page` the widest content box.
   `--gutter` is the page's side margin — ONE name, and it steps by itself below, so a page never
   restates the margin and a breakpoint never has to remember which rules to rewrite. */
:root{--space-0:0px;--space-2:2px;--space-3:3px;--space-5:5px;--space-10:10px;--space-15:15px;--space-20:20px;--space-30:30px;--space-40:40px;--space-50:50px;--space-60:60px;--corner-none:0px;--corner-4:4px;--corner-8:8px;--corner-12:12px;--corner-round:9999px;--border-none:0px;--border-thin:1px;--border-thick:4px;--width-column:620px;--width-headline:840px;--width-hero:944px;--width-page:1280px;--gutter:var(--space-20);}

/* The page gutter steps with the design's own grid margins: 20 mobile / 30 tablet / 40 desktop. */
@media (min-width:768px){
  :root{--gutter:var(--space-30);}
}
@media (min-width:1024px){
  :root{--gutter:var(--space-40);}
}

/*! BREAKPOINTS — the group's unified ladder (client, 2026-08-11), and Figma draws the article at
exactly these widths. CSS cannot read a variable inside a media query, so they are written out; this
comment is the single place they are defined.

    mobile    < 768      (drawn at 402)
    tablet    768-1023   (drawn at 768)
    desktop   1024-1279  (drawn at 1024)
    wide      >= 1280    (drawn at 1440)

Rules step DOWN, so a component's queries run widest first: they carry equal specificity, and at a
narrow viewport every one of them matches, so the last one wins. */