/* A poster for crawlers. Every line is set to the full measure, so the two sweet lines come out huge and the threat
   arrives smaller, underneath. The first two lines wear the colours they name. No script: the sizes are container
   units worked out from the font's own widths (tools/measure.mjs), a hair under 100 so rounding never clips. */
@font-face { font-family: "Bricolage"; font-weight: 800; font-display: swap; src: url(fonts/bricolage-800.woff2) format("woff2"); }
@font-face { font-family: "Bricolage"; font-weight: 500; font-display: swap; src: url(fonts/bricolage-500.woff2) format("woff2"); }

:root { --paper: #ffffff; --ink: #121117; --quiet: #66636f; --rose: #d31f45; --violet: #4c35e0; }
@media (prefers-color-scheme: dark) {
  :root { --paper: #131217; --ink: #f3f1f8; --quiet: #a09dab; --rose: #ff6d87; --violet: #9b8cff; }
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { font-family: "Bricolage", "Helvetica Neue", Arial, sans-serif; }
main {
  min-height: 100svh; display: grid; grid-template-rows: minmax(0.75rem, 1fr) auto minmax(1.5rem, 1.3fr) auto; justify-items: center;
  padding: clamp(1.25rem, 4vh, 2.5rem) clamp(1.25rem, 5vw, 4rem);
}
/* the poem is about half as tall as it is wide: cap the width by the height so it never leaves the screen.
   The note shares both edges with it. */
.sheet, .note { width: min(100%, 72rem, 125svh); }
.sheet { grid-row: 2; container-type: inline-size; }
.poem { font-weight: 800; white-space: nowrap; }
.poem br { display: none; }
.l { display: block; line-height: 0.98; }
.l1 { font-size: 16.3cqw; color: var(--rose); }
.l2 { font-size: 14.18cqw; color: var(--violet); margin-top: 0.02em; }
.l3 { font-size: 7.85cqw; margin-top: 0.5em; }
.l4 { font-size: 7.64cqw; margin-top: 0.12em; }
.note { grid-row: 4; font-weight: 500; font-size: 0.9375rem; line-height: 1.5; color: var(--quiet); text-wrap: balance; }