/* ============================================================================
   SILKSCREEN — the family stylesheet.
   A screenprinted poster register: warm paper, a few spot inks, real overprint.
   Family #6 in the portfolio (cinematic, broadsheet, journal, signpost,
   selvedge, silkscreen). First page: /silkscreen/day-2027/.

   THE INK LAW (WCAG ratios; every figure below is RE-COMPUTED by
   scripts/verify-silkscreen.mjs against the pair it names — see CLAUSE 2.
   Write ratios here only in the form `<subject> on <ground> <figure>`, which
   is the shape that gate can check; a figure in any other shape fails it):
     ink on paper 14.33 · ink on green 6.00 · ink on orange 6.12 — all AA+
     ink on overprint 2.34 — FAIL. NEVER set dark ink on the overprint.
     white on overprint 6.78 — AA, and the ONLY ground white may sit on.
     white on paper 1.11 · white on green 2.65 · white on orange 2.59 — FAIL.
   So: dark ink everywhere, EXCEPT the overprint, which takes white and only
   white. Every text element sits on a ground somebody chose — never on
   whatever the ink stack happens to produce underneath it.
   ========================================================================== */

/* ---- THE TOKEN BLOCK — every colour on the family lives here. -----------
   No colour literal is permitted anywhere below this block. */
:root {
  --paper:      #f7f3e8; /* warm off-white — the sheet */
  --ink-green:  #72af43; /* SAVE THE FROGS! brand green — used RAW, shapes only */
  --ink-orange: #f5821f; /* brand orange — used RAW, shapes only */
  --ink:        #14261a; /* near-black pond green; the only colour prose is set in */
  /* OVERPRINT — derived, not chosen. Per-channel multiply of its two parents,
     exactly what `mix-blend-mode: multiply` computes where they cross.
     Each channel is ROUNDED, not truncated — that is what the compositor does,
     and the red channel is the one that tells them apart:
       r: 0x72 x 0xf5 / 0xff = 109.53 -> 110 = 0x6e   (truncating gives 0x6d: WRONG)
       g: 0xaf x 0x82 / 0xff =  89.22 ->  89 = 0x59
       b: 0x43 x 0x1f / 0xff =   8.15 ->   8 = 0x08
     Verified by sampling a rendered screenshot of the stamp: #6e5908.
     If either parent ink changes, this value MUST be re-derived. */
  --overprint:  #6e5908;
  --white:      #ffffff; /* printed white ink: overprint labels ONLY (white on overprint 6.78) */
  --green-text: #3f6b1f; /* brand green darkened until green-text on paper 5.68 — TEXT only */
  --orange-text:#8a4b0f; /* brand orange darkened until orange-text on paper 6.12 — links + accents */

  /* derived furniture — mixes of the tokens above, no new hues */
  --hairline: color-mix(in srgb, var(--ink) 28%, var(--paper));
  --grain:    color-mix(in srgb, var(--ink) 4%, transparent);

  --font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---- self-hosted fonts (latin subsets; licence: fonts/OFL.txt) ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/silkscreen/fonts/anton-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/silkscreen/fonts/archivo-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/silkscreen/fonts/archivo-latin-700-normal.woff2') format('woff2');
}

/* ---- ground ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* paper grain: 1px tooth every 4px, ~4% ink — pure CSS, no image weight */
  background-image: repeating-linear-gradient(
    0deg, transparent 0 3px, var(--grain) 3px 4px);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.25rem;          /* body floor is 1.1875rem; we sit above it */
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--orange-text); text-decoration-thickness: 0.09em; text-underline-offset: 0.14em; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; }

::selection { background: var(--ink-green); color: var(--ink); }

/* =============================================================
   MOVEMENT 1 — THE SHEET.
   One viewport, full bleed. Crop this band and it is a poster.
   ============================================================= */
.sheet {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.8rem, 4svh, 3.2rem) var(--gutter);
  border-bottom: 4px solid var(--ink);
}

.sheet-inner {
  width: min(100%, 68rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(0.7rem, 1.8svh, 1.3rem);
}

/* top slug line — org left, cadence right; a poster's running head */
.sheet-topline {
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 1.0625rem;   /* the page-wide minimum */
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sheet-topline .slug-org { color: var(--green-text); }
.sheet-topline .slug-note { color: var(--orange-text); }

/* the drawn frog — two ink layers; overlaps multiply into the overprint.
   `isolation` keeps the blend inside the artwork, so each ink stays RAW
   where it sits alone on the paper. */
.frog-art {
  isolation: isolate;
  /* height-aware: the whole sheet must fit ONE viewport */
  width: min(58vw, 32svh, 21rem);
  display: block;
}
.frog-art .layer-ink-stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
}
.frog-art .layer-orange { fill: var(--ink-orange); }
.frog-art .layer-green  { fill: var(--ink-green); mix-blend-mode: multiply; }
/* orange printed OVER the green (the spots) multiplies too */
.frog-art .layer-orange--over { mix-blend-mode: multiply; }
.frog-art .layer-knockout { fill: var(--paper); }
.frog-art .layer-ink { fill: var(--ink); }

/* the headline. Largest type in the portfolio: two stacked lines that
   must NOT fit on one comfortable line at 1280px. */
.sheet-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.25rem, min(15.5vw, 16svh), 14rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.sheet-title .line { display: block; }

/* the date — second-loudest thing on the sheet */
.sheet-date {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, min(4.5vw, 5svh), 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--orange-text);
}

/* ---- the ordinal stamp: the page's ONE white-on-colour moment. ----------
   Two real ink spans; where they cross, multiply makes the overprint, and
   the white label sits INSIDE that overlap. Geometry is em-locked: each ink
   spans 90% of the stamp, so the middle 80% is overprint. The stamp's width
   is its own label + 2.4em side padding, which puts the overprint boundary
   at 0.10 x width from each end: safe while the stamp stays under 24em wide
   ("The 19th Annual" measures ~15.5em, fallback-font metrics included), so
   the white text keeps a real margin from the raw inks at every size. */
.ordinal-stamp {
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin: 0.4rem 0 0;
  transform: rotate(-3deg);   /* curated angle, not Math.random() */
}
.stamp-green, .stamp-orange {
  position: absolute;
  top: 0; bottom: 0;
  width: 90%;
}
.stamp-green  { left: 0;  background: var(--ink-green); }
.stamp-orange { right: 0; background: var(--ink-orange); mix-blend-mode: multiply; }
.stamp-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.5em 2.4em;
  font-weight: 700;
  font-size: clamp(1.1875rem, 2.6vw, 1.75rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);       /* white ONLY here — white on overprint 6.78 */
}

/* poster foot: the URL, as posters have always carried one */
.sheet-foot {
  width: 100%;
  margin: clamp(0.6rem, 2vh, 1.4rem) 0 0;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: clamp(1.0625rem, 2vw, 1.375rem);
  letter-spacing: 0.06em;
}
.sheet-foot a { text-transform: lowercase; }
.sheet-foot .foot-note { color: var(--green-text); text-transform: uppercase; letter-spacing: 0.12em; }

/* registration marks — printer's crosshairs, pure decoration */
.regmark {
  position: absolute;
  width: 26px; height: 26px;
  color: var(--ink);
  opacity: 0.4;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.regmark::before, .regmark::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.regmark::before { left: 50%; top: -6px; bottom: -6px; width: 1.5px; transform: translateX(-50%); }
.regmark::after  { top: 50%; left: -6px; right: -6px; height: 1.5px; transform: translateY(-50%); }
.regmark--tl { top: 18px; left: 18px; }
.regmark--tr { top: 18px; right: 18px; }
.regmark--bl { bottom: 18px; left: 18px; }
.regmark--br { bottom: 18px; right: 18px; }

/* =============================================================
   THE MOTION BUDGET — registration, 400ms, once, on load.
   The ink layers arrive out of register and snap into place.
   Default state (below) is ALREADY IN REGISTER: under
   prefers-reduced-motion the page simply renders finished.
   Prose never animates — no prose element carries any of this.
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reg-green  { animation: reg-green  0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  .reg-orange { animation: reg-orange 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  /* the headline's own snap: a misregistered orange ghost that lands.
     text-shadow, not text — no duplicate content, nothing for a reader. */
  .sheet-title { animation: reg-title 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both; }

  @keyframes reg-green  { from { transform: translate(-7px, 4px); }  to { transform: translate(0, 0); } }
  @keyframes reg-orange { from { transform: translate(6px, -5px); }  to { transform: translate(0, 0); } }
  @keyframes reg-title  {
    from { text-shadow: 7px -5px 0 var(--ink-orange); }
    to   { text-shadow: 0 0 0 transparent; }
  }
}
/* the stamp's inks keep their own geometry while registering */
.stamp-green.reg-green, .stamp-orange.reg-orange { will-change: transform; }

/* =============================================================
   MOVEMENTS 2–3 — the bands. Plain, warm, declarative.
   ============================================================= */
.band {
  padding: clamp(3rem, 8vh, 5.5rem) var(--gutter);
}
.band-inner {
  max-width: var(--measure);
  margin: 0 auto;
}

.band h2 {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--green-text);
}

.band p { margin: 0 0 1.1em; }
.band p:last-child { margin-bottom: 0; }

/* the reversed band — a change of ink IS the emphasis device.
   Prose here is ink on green 6.00 AA. No white, ever: white on green 2.65 FAIL. */
.band--green {
  background: var(--ink-green);
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
}
.band--green h2 { color: var(--ink); }

/* =============================================================
   TAKE PART — the band that has to WORK. Solid ink slabs,
   dark ink text (ink on green 6.00 · ink on orange 6.12), square corners.
   ============================================================= */
.actions {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.action {
  display: block;
  padding: 1.3rem 1.5rem;
  color: var(--ink);
  text-decoration: none;
  border: 3px solid var(--ink);
}
.action--green  { background: var(--ink-green); }
.action--orange { background: var(--ink-orange); }
.action:hover, .action:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--ink); }
.action:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .action:hover, .action:focus-visible { transform: none; }
}
.action-title {
  display: block;
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  line-height: 1.25;
}
.action-title::after { content: " \2192"; }
.action-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* =============================================================
   MOVEMENT 4 — THE COLOPHON. A rule, a label, small honest lines.
   Nothing on the page sits below 1.0625rem, this included.
   ============================================================= */
.colophon {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3.5rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.0625rem;
  line-height: 1.6;
}
.colophon-label {
  margin: 0 0 1rem;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-text);
}
.colophon p { margin: 0 0 0.8em; }
.ink-swatches {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0 0 1rem;
  padding: 0;
}
.ink-swatches li { display: flex; align-items: center; gap: 0.45em; }
.swatch {
  display: inline-block;
  width: 1em; height: 1em;
  border: 1px solid var(--hairline);
}
.swatch--paper { background: var(--paper); }
.swatch--green { background: var(--ink-green); }
.swatch--orange { background: var(--ink-orange); }
.swatch--ink { background: var(--ink); }
.swatch--overprint { background: var(--overprint); }

/* =============================================================
   GUIDE-ONLY furniture (build-notes page; shares this sheet)
   ============================================================= */
.guide-table-wrap { overflow-x: auto; }
.guide table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2rem 0;
  font-size: 1.0625rem;
}
.guide th, .guide td {
  text-align: left;
  padding: 0.5rem 0.9rem 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.guide code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.95em;
  background: color-mix(in srgb, var(--ink) 7%, var(--paper));
  padding: 0.08em 0.35em;
}
.guide .sheet { min-height: auto; }

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 480px) {
  .sheet-topline, .sheet-foot { justify-content: center; text-align: center; }
  .stamp-label { font-size: 1.0625rem; padding-inline: 1.8em; }
  .regmark { width: 18px; height: 18px; }
  .regmark--tl { top: 10px; left: 10px; }
  .regmark--tr { top: 10px; right: 10px; }
  .regmark--bl { bottom: 10px; left: 10px; }
  .regmark--br { bottom: 10px; right: 10px; }
}