/* ImpromptBrü — the COLOPHON PAGE. Loaded after ./site.css and ./note.css, which own
   the shell and the prose. This file owns the four things the colophon needs that no
   other page on the property has, and nothing else.

   It is a separate file rather than three more rules in note.css because site.css and
   note.css are on the byte-identical list in the README: they ship to the Astro build
   untouched, and a page-specific block in either of them is the first crack in that.

   Same rules as its two parents: every value is a design-system custom property, every
   rule is a class a template will emit, and nothing here needs JavaScript. */

/* ---------- 1. the stage specimens ----------
   The reason this page exists. A reader lands on a note marked "steeping" and has
   nowhere to look the word up, so the three markers are printed here at a size where
   the fill level is legible as a level rather than as a smudge.
   40px is the specimen rung: the levels are percentages, so the same drawing that
   renders at 12px in a stream row renders here with no second asset and no override
   beyond the box and the stroke. The stroke goes to 2px because 1.5px at 40px reads as
   a hairline the row version does not have.
   Cards, not a table: each stage is a definition plus a rule, and a three-column table
   would make the rule look like the more important of the two. Same paper and hairline
   as .cal and .quad, so it belongs to the family of blocks the property already has. */
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.prose.prose>.stages{margin-top:var(--space-5)}
.stagec{display:flex;flex-direction:column;padding:var(--space-4);border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface-raised)}
.stagec .mk{width:40px;height:40px;margin:0 0 var(--space-3);border-width:2px}
.stagen{margin:0;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-accent)}
.stagew{margin:var(--space-2) 0 0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text-lead);text-wrap:pretty}
/* The computed rule is the small print under the definition, on its own hairline, so a
   reader can take the meaning and leave the arithmetic. Poured has no arithmetic; its
   line says so in the same slot rather than leaving a gap. */
.stager{margin:var(--space-3) 0 0;padding-top:var(--space-3);border-top:var(--border-hair) solid var(--color-rule);font-family:var(--font-mono);font-size:var(--text-2xs);line-height:1.5;letter-spacing:var(--tracking-micro);color:var(--color-text-faint);text-wrap:pretty}

/* ---------- 2. the credit list ----------
   Typefaces and tools: a name, where it comes from, and one line on why it is here.
   A definition list because that is what it is, and because the why has to sit under
   the name rather than beside it — four two-column rows of prose would set the reason
   in a 30-character gutter. */
.dfl{margin:0}
.dfl>div+div{margin-top:var(--space-4)}
.dfl dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3);font-weight:var(--weight-semibold);color:var(--color-heading)}
.dfr{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-faint)}
.dfl dd{margin:5px 0 0;font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--color-text-muted);text-wrap:pretty}

/* ---------- 3. the way out ----------
   Five links that are not prose: the design system, the feed, search, and the two short
   statements. A mono row rather than a list, because they are labels rather than
   sentences, and it sits directly above the revised line so the page ends on its
   own record. */
.outs{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin-top:var(--space-7);padding-top:var(--space-4);border-top:var(--border-hair) solid var(--color-border);max-width:var(--measure)}
.page a.out{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-micro);text-transform:uppercase;color:var(--color-text-accent);text-decoration:none}
.page a.out:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- 4. 320px ----------
   The three specimens stack. They do not shrink: the whole point of the block is that
   the fill level is legible, and three 90px cards in a row at 320 would put it back
   where it was on the stream row. */
@media (max-width:760px){
  .stages{grid-template-columns:1fr}
  .stagec{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 var(--space-4)}
  .stagec .mk{margin-bottom:0}
  .stagec>:not(.mk){flex:1 1 60%;min-width:0}
  .stager{flex-basis:100%}
}