/* ==========================================================================
   Print
   ==========================================================================
   The screen design is ivory type on a near-black ground. Browsers drop
   background colours when printing unless the reader opts into "background
   graphics", so without this file a printed page is near-white text on white
   paper - technically present, effectively blank. Everything here exists to
   turn the site back into ink on paper.
   ========================================================================== */

@media print {

  /* ---- Safety first --------------------------------------------------- */
  /* Scroll reveals start at opacity 0 and are released by an observer as the
     reader scrolls. Printing does not scroll, so anything still waiting
     would print as a blank gap. Nothing below this line matters if the page
     comes out empty, so it goes first. */
  .js [data-reveal],
  .js [data-reveal="wipe"],
  .js [data-reveal="words"] .word > span,
  .enter > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Disclosures print open - a folded-away paragraph is just lost on paper. */
  details > *:not(summary) { display: block !important; }
  details::details-content { content-visibility: visible !important; }
  .edu__plus { display: none !important; }

  /* ---- Ink ------------------------------------------------------------ */
  html, body {
    background: #fff !important;
    color: #111 !important;
  }
  h1, h2, h3, h4, h5, h6, p, li, dd, span, strong, blockquote, figcaption, summary {
    color: #111 !important;
  }
  /* The amber does not survive as-is on paper - it is tuned for a dark
     ground and prints washed out. Darkened just enough to hold. */
  .eyebrow, em, .service__num, .cs-facts dt, .edu__years, .edu__mark {
    color: #A63D00 !important;
  }
  .muted, .band__note, .edu__org, .edu__rest, .cs-section p, .work-card__meta {
    color: #444 !important;
  }

  /* Panels lose their fill and keep only a hairline, so they still read as
     grouped without printing a solid block of grey. */
  .shot, .cs-figure, .mosaic__item, .cs-facts,
  .work-card, .edu__mark, .tags li, .service {
    background: transparent !important;
    border-color: #bbb !important;
    box-shadow: none !important;
  }
  .band--sunk, .hero, .contact { background: transparent !important; }
  .hero::before, .contact::before, .work-card__media::before { display: none !important; }

  /* ---- Chrome that has no meaning on paper ---------------------------- */
  .masthead, .skip-link, .marquee, .filters, .colophon,
  .work-card__go, .shot--link__go, .mosaic__play, .lightbox, .next, .to-top {
    display: none !important;
  }

  /* ---- Links ---------------------------------------------------------- */
  a { color: #111 !important; text-decoration: underline; }
/* The reader cannot click paper, so external links carry their
     destination. Only external ones - printing every internal href would
     be noise. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.82em;
    color: #555;
    word-break: break-all;
  }

  /* ---- Page economy --------------------------------------------------- */
  figure, .work-card, .edu__row, .service, .cs-figure, .mosaic__item {
    break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; height: auto !important; }
  .mosaic { columns: 2; }

  @page { margin: 16mm; }
}