/* ==========================================================================
   print.css — the printed page.

   Loaded with media="print", so it costs a fetch but blocks nothing and applies
   to nothing on screen. The brief: hand someone a page of this site on paper and
   it should read like a document, not like a screenshot of a website. `/roster/`
   comes out at three A4 pages and `/firm/` at six — it is a printable document,
   not a flyer, and the pages people actually hand across a table are the roster
   and the agent section.

   Three jobs, in order of how much they matter:

   1. Take the interactive furniture away. The film grain, the pointer spotlight,
      the announcement marquee, the fixed nav, the drawer, the scroll progress
      bar, the intro curtain, the prev/next pager, every button and arrow glyph.
      None of it means anything on paper, and the fixed layers actively obscure
      content when a print engine flattens them.

   2. Undo the screen styling that exists only to look good lit up. Glass panes
      with backdrop blur, hairline gradients, the lattice, drop shadows and the
      lift-on-hover transforms all print as grey mud or vanish. Flatten to black
      on white, which is also what most people's printer does to colour anyway.

   3. Stop a printer from breaking things it should not. A roster row, a service
      card or the agent's photograph split across a page boundary is worse than
      an ugly page. `break-inside: avoid` on the repeating units, and no orphaned
      headings.

   External links print their URL after the text, because a printed sheet has no
   hover and no address bar — a reader who wants project-rooted.com should not
   have to guess it. Internal links print nothing: on paper "See who is
   represented" pointing at /roster/ is noise.

   A TRAP WORTH KNOWING. `.rv` is the reveal class and lands on almost every
   heading, paragraph and card on the site. An earlier draft of this file grouped
   `.rv` with the panel selectors and gave the group a hairline border, which drew
   a grey box around every revealed element on every printed page. It looked like
   a stylesheet bug and it was one. `.rv` gets motion neutralised and nothing
   else — see the two separate rules below.

   Verified by tools/verify.mjs (which asserts the three things above on every
   page) and inspectable with tools/print-check.mjs, which renders each page under
   print media and writes a PNG and a PDF. Overflow is measured at 688px and 970px,
   the real printable widths of A4 portrait and landscape inside the @page margins
   below — not at the viewport width, which is a layout no printer will produce.
   ========================================================================== */

@page { margin: 14mm 13mm; }

/* ---------- screen-only furniture ---------- */
.grain,
.spot,
.curtain,
.topbar,
.nav,
.drawer,
.progress,
.skip,
.burger,
.nav-pill,
.cue,
.to-top,
.foot-mark,
.corner,
.pager,
.hero .lattice,
.mark-draw { display: none !important; }

.btn,
.arw,
.go { display: none !important; }

/* ---------- ground ---------- */
html, body {
  background: #FFFFFF !important;
  color: #000000 !important;
  font-size: 11pt;
  -webkit-print-color-adjust: economy;
  print-color-adjust: economy;
}

/* The fixed header is gone, so the clearance it needed is gone too. */
.page-head { padding-top: 0 !important; margin-top: 0 !important; }
.sec { border-top: 1px solid #BBBBBB !important; padding: 14pt 0 !important; }
.sec--alt { background: #FFFFFF !important; }
.wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* ---------- glass and shadows, flattened ---------- */
/* Panels: opaque white ground, one hairline, no shadow, no blur. A glass pane
   with a backdrop filter prints as grey mud, and a drop shadow prints as a dirty
   smudge next to the border. */
.glass,
.glass--card,
.glass--panel,
.lift,
.rv--card {
  background: #FFFFFF !important;
  border: 1px solid #BBBBBB !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
}
.glass::before,
.glass::after { display: none !important; }

/* Motion, neutralised. This is a separate rule from the one above on purpose:
   `.rv` is the reveal class and lands on almost every heading, paragraph and
   card in the site, so giving it a border — as an earlier draft of this file did
   — draws a grey box around every revealed element on the page. `.rv` is not a
   panel and must not be styled as one. */
.rv,
.rv--card,
[data-rv],
.is-entering main {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* ---------- type ---------- */
h1 { font-size: 22pt; margin: 0 0 6pt; }
h2 { font-size: 15pt; margin: 12pt 0 4pt; }
h3 { font-size: 12pt; margin: 10pt 0 3pt; }
h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
p, li { orphans: 3; widows: 3; }
.lede { font-size: 12pt; color: #333333 !important; }
.eyebrow, .num, .k, .lbl, .chip, .head-meta {
  color: #555555 !important;
  font-size: 8pt;
}
a { color: #000000 !important; text-decoration: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555555; word-break: break-all; }
.inline { border-bottom: 0 !important; }

/* ---------- repeating units must not split ---------- */
.rl-row,
.svc,
.arm,
.modtile,
.rv--card,
.glass--card,
.founder,
.agent-grid,
.specs li,
.faq details,
section { break-inside: avoid; page-break-inside: avoid; }

/* ---------- the roster ---------- */
.roster-list { border-top: 1px solid #BBBBBB !important; }
.rl-row { padding: 8pt 0 !important; border-bottom: 1px solid #DDDDDD !important; }
.rl-face img, .rl-face {
  width: 34pt !important; height: 42pt !important;
  border-radius: 0 !important;
  filter: grayscale(1) !important;
}
.rl-name { font-size: 13pt !important; }
.rl-club, .rl-tags { font-size: 9pt !important; color: #333333 !important; }
.roster-group {
  font-size: 11pt !important;
  border-top: 2px solid #000000 !important;
  padding-top: 5pt !important;
}

/* ---------- the agent, as a bio sheet ---------- */
.agent-photo img, .founder-photo img {
  width: 90pt !important; height: auto !important;
  filter: grayscale(1) !important;
}
.agent-claim {
  font-size: 14pt !important;
  border-left: 2px solid #000000 !important;
  padding-left: 8pt !important;
}
.agent-sig img { max-width: 120pt !important; }

/* ---------- the footer, reduced to what is worth printing ---------- */
.foot { border-top: 1px solid #000000 !important; margin-top: 16pt !important; }
.foot-top .foot-col ul { list-style: none; padding: 0; }
.foot-top a[href^="http"]::after,
.foot-top a[href^="mailto"]::after { content: ""; }
.foot-bot { font-size: 8pt; color: #555555 !important; }
.pb { display: none !important; }