/* ===========================================================================
   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}

/* 5rem clears the nav, which is what an id generated by src/build/content.ts
   scrolls under otherwise. */
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}

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}

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:.18em}
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}
.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:.63rem;letter-spacing:.22em;
  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)}

a:focus-visible,button:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px}

/* -- 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}

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