/* ===========================================================================
   Municorn design system · 2 · base
   Reset, document type, and the four primitives every page uses: .wrap, .tag,
   .lede, .btn. Nothing here knows about a specific page.
   =========================================================================== */

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}

/* -- browser surfaces -----------------------------------------------------
   The parts of a page the browser draws rather than the stylesheet: the
   selection highlight, the scrollbar, the focus ring, the underline offset.
   Left at their defaults they are the one place a carefully set page still
   looks like every other page, and a reader who drags across a figure to copy
   it sees the operating system's blue over brass and ink. Cheap to set, and
   the clearest evidence that a page was built rather than assembled. */
::selection{background:var(--brass);color:var(--paper)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--thumb)}
::-webkit-scrollbar-thumb:hover{background:var(--faint)}
/* The SVG <defs> block src/design/primitives.ts emits once per page. It defines
   the hatch pattern and draws nothing, so it must occupy no space: width and
   height of 0 are not enough on their own in every engine. */
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* 5rem clears the nav, which is what an id generated by src/build/content.ts
   scrolls under otherwise. */
/* scrollbar-color/-width are Firefox's equivalent of the ::-webkit- rules above;
   the two together cover every engine. */
html{scroll-padding-top:5rem;-webkit-text-size-adjust:100%;
  scrollbar-color:var(--thumb) var(--paper);scrollbar-width:thin}
/* Smooth scrolling is motion, so it answers to the same switch as everything
   else. It used to be unconditional, which meant calm mode still animated the
   viewport on every nav and footer anchor — the one movement a reader who asked
   for no movement cannot look away from. */
html:not(.calm){scroll-behavior:smooth}

/* tabular-nums site-wide, not per component. This site's whole claim is that
   its figures are comparable, and proportional digits put 17.9% and 9.1% on
   different widths in the same column of the same table. Lining figures for the
   same reason: old-style digits in Crimson Pro drop the 3, 4, 7 and 9 below the
   baseline, which is correct in a sentence and wrong in a column. */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(.96rem,.35vw + .89rem,1.04rem);line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}

h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.02em}
strong{font-weight:500}
a{color:inherit;text-decoration-color:var(--brass);text-underline-offset:.22em;
  text-decoration-thickness:1px}
a:hover{color:var(--brick)}

/* -- slabs ---------------------------------------------------------------- */
/* Sections alternate dark -> brick -> light -> footer. A new section joins the
   rotation rather than inventing a background. */
.slab{position:relative;padding:var(--section) 0}
/* The slab rhythm assumes the background changes at every boundary: dark, then
   brick, then light. Doubled padding between two planes of DIFFERENT colour
   reads as a transition. Between two of the same colour there is no transition
   to read, so the same 160px reads as a hole — which is what appeared the
   moment a second dark slab was added above the exhibits. When neighbours
   share a ground they are one plane with two sections on it, and the first
   slab's bottom padding is already the gap. */
/* MEASURED, on a page that now has six sections rather than twelve: a boundary
   between two slabs of DIFFERENT ground gets 96-160px of breathing and one
   between two of the same ground was getting 48-80px, which was right when a
   reader met a boundary every few hundred pixels and is too tight when he meets
   five in the whole page. This is 40-56px, so the same-ground gap is 88-136px —
   still visibly less than a change of plane, because it is a smaller break, and
   no longer so small that three consecutive dark sections read as one. */
.slab--dark + .slab--dark,
.slab--light + .slab--light,
.brickwall + .brickwall{padding-top:clamp(2.5rem,4vw,3.5rem)}
/* A slab's padding is its top space. A first child adding its own margin to it
   is compounding two spacings that were each designed to be the whole gap. */
.slab__in > :first-child{margin-top:0}
.slab--dark{background:var(--ink);color:var(--lime-2);overflow:hidden}
.slab--light{background:var(--paper)}
.brickwall{background-color:var(--mortar);background-image:var(--brickimg);
  background-size:var(--bricksize)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
/* content inside a textured or canvas-backed slab sits above the overlay */
.slab__in{position:relative;z-index:3}

/* -- eyebrow -------------------------------------------------------------- */
/* Labels a section in two to four plain words. Never a tease. */
.tag{font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);display:block;margin-bottom:1.1rem}
.slab--dark .tag,.glass .tag{color:var(--brass-lt)}

/* -- lede -----------------------------------------------------------------
   One paragraph under a heading. The --doc variant is the serif version a
   reference page opens with; the shape is the same, the register is not. */
.lede{color:var(--ink-soft);max-width:50ch;margin-top:.7rem;line-height:1.72}
.slab--dark .lede,.glass .lede{color:var(--lime-3)}
.lede--doc{font-family:var(--serif);font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.25;
  max-width:52ch;margin-top:.8rem}

/* -- metadata and secondary text -----------------------------------------
   Mono says fact about the thing, not the thing. */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--ink-soft)}
.slab--dark .dim{color:var(--lime-mute)}

/* -- button ---------------------------------------------------------------
   Two fills, one shape. Brass is the bright accent and carries the primary
   action on a dark or brick ground; ink carries it on light. */
.btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--sans);
  font-weight:600;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;padding:.85rem 1.4rem;
  border:1px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn--brass{background:var(--brass-lt);color:var(--on-brass)}
.btn--brass:hover{background:var(--brass-hi)}
.btn--ink{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.btn--ink:hover{background:var(--brick);border-color:var(--brick);color:var(--lime)}

/* Every focusable thing, not just a and button. It was the two of them, which
   left the door radios, the FAQ summaries and the search input with the
   browser's own ring — the three controls on this site a keyboard reader most
   needs to be able to find. Brass on light and the bright brass on a dark or
   brick ground, because one ring cannot be seen against both. */
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.slab--dark :focus-visible,.brickwall :focus-visible,.glass :focus-visible,
.nav :focus-visible,.foot :focus-visible,.tick :focus-visible{outline-color:var(--brass-lt)}

/* -- skip link ------------------------------------------------------------ */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--lime);color:var(--ink);
  padding:.75rem 1.1rem;font-family:var(--sans);font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:.7rem;top:.7rem}

/* -- measure ---------------------------------------------------------------
   No line of prose runs past 62 characters. Stated once here rather than per
   component, because the components that had their own max-width were the ones
   somebody noticed and the ones that did not were the ones that got long.

   Scoped to prose, and the exclusions are all the same kind of thing: a
   paragraph that is a LAYOUT rather than a sentence. .cite and the split bar's key are
   flex rows of swatches and machine coordinates, and a character-count cap on a
   flex row silently collapses one. A paragraph that carries its own
   max-width is unaffected either way. */
main p:not(.cite):not(.fine):not(.split__key){max-width:62ch}

/* -- fine print ----------------------------------------------------------- */
.fine,.faint{font-size:.8rem;color:var(--faint)}