/* ============================================================
   paper-page.css — the poster's paper, and the ink header that sits on it
   Loaded by every page in docs/ except the Google site-verification stub.

   The front page wraps its content in the sheet itself (.mode-paper in
   branding.css, torn edge and all) and sits that sheet ON this paper.
   Every other page keeps its own layout and simply stands on the same
   paper, so the site reads as one stack of printed sheets no matter
   where you land.

   Cheap on purpose: one fixed layer, one WebP, no SVG filters, no
   masks, nothing that repaints while you scroll. That is the whole
   reason the poster's full spec stays on the front page only.

   STATUS: LIVE ON THE branding BRANCH — not merged, not published.
   ============================================================ */

/* Fallback for the second before the grain paints (and if it ever 404s). */
body.paper-page {
  background-color: #f1d8ba;   /* branding.css's --paper */
}

/* public-styles.css already reserves body::before for a texture overlay -
   fixed, inset 0, z-index -1, pointer-events none - but leaves it empty
   at opacity .25. This is that layer, filled in. */
body.paper-page::before {
  opacity: 1;
  /* White underneath and the grain on top, exactly like the sheet: the
     grain carries the colour, so the two stack to the poster's paper.
     cover keeps the 1200px tile seam-free at every viewport; the scale
     lands between 0.7x and 1.6x, close to the poster's own 1.1x. */
  background-color: #fff;
  background-image: url("../paper/paper-grain.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ============================================================
   THE HEADER, PRINTED IN INK
   public-styles.css still paints .site-header the old cool cream
   (#f3e9d7), which sits on warm paper like a web banner pasted over a
   print job. Inked instead, the header and the footer become a matched
   pair - the footer is already #0d0d0d under a red rule - so the paper
   reads as the page between two printed covers.

   Cream on ink is the flyer's own idiom: its phone/URL band is cream
   type on black. It also fixes the contrast. The nav's red #c62828
   scores 4.67:1 on the old beige and only 3.46:1 on black, which fails
   AA, so the links come up to cream (14.1:1) and red stays where it
   still reads: the active underline, hover, and the buttons.
   ============================================================ */

body.paper-page .site-header {
  background: #0d0d0d;
  border-bottom: 4px solid #c62828;   /* matches .footer's 4px red top rule */
}

body.paper-page .logo-title { color: #f1d8ba; }
body.paper-page .logo-sub   { color: rgba(241, 216, 186, .72); }

/* public-styles.css pins the nav red with !important, so this has to
   answer in kind. */
body.paper-page .main-nav a         { color: #f1d8ba !important; }
body.paper-page .main-nav a:hover   { color: #ffffff !important; }
body.paper-page .main-nav a.active  { color: #ffffff !important; }
body.paper-page .main-nav a::after  { background: #c62828; }