/* ---------- print ----------

   The print design system, served as a media="print" stylesheet so its
   bytes never sit in the render-blocking path: a reader pays for print
   styles when they print, and the screen-hiding of the print furniture
   lives in css/artwork.css, which always loads. One layer owns the sheet: geometry, ink,
   attribution, figures, and what never reaches paper. Per-page print blocks
   (essay.css for articles, resume.css for the resume sheet) refine on top of
   this; resume.css loads after it on /resume, so its own @page wins there.

   The rules exist because Cmd+P used to emit a webpage with the styling
   stripped: no page margins (text touched the paper edge), interactive
   figures frozen mid-animation or blank, control buttons printed as dead
   chrome, and not a name anywhere on the artifact. Print is a render target,
   not an afterthought: the reader who prints keeps the file, and the file is
   the version that travels. */

@media print {
  /* ---------- sheet geometry ----------

     The margins live on the page box, not on the containers: tokens.css
     zeroes every container pad under print, so the @page margin is the one
     source of edge distance on every route. Bottom is deeper to keep running
     text clear of the fold a reader staples or clips. */
  @page {
    margin: 0.75in 0.7in 0.85in;
  }

  /* ---------- ink ----------

     Paper is white; the screen's ivory and its grain stay on screen. Color
     survives only where it is content: figures, plates, chips, code. */
  html,
  body,
  body.bg-paper,
  main,
  .rm-route-transition {
    background: #fff !important;
  }

  /* ---------- what never reaches paper ----------

     Everything that is an action rather than content: navigation, search,
     progress, the mobile toc, the site footer (the colophon below replaces
     it), and every figure control. Paper has no click. */
  .rm-header-shell,
  footer.rm-q-shell,
  .m-toc,
  .essay-progress,
  .essay-action,
  .art-related,
  .fig .fig-head .btn,
  .fig .fig-link,
  .fig .fig-view,
  .essay-reply,
  .art-views,
  .rm-reactions,
  .rm-mark-lozenge {
    display: none !important;
  }

  /* ---------- figures settle ----------

     On screen a figure earns its state: reveal on approach, demo on arrival,
     steps on click. Paper takes the figure at rest: the reveal wrappers and
     declarative step structure print at full ink, timing is frozen, and
     nothing else is touched. A first version forced opacity and transform on
     every stage element, which un-hid the actors the drivers park with
     inline styles — a traveling token printed as a dot frozen off its wire.
     Structure is declared (.reveal, .stagger, [data-rv]); actors are inline;
     the selectors below cross that line on purpose and never the other. */
  .fig,
  .fig .reveal,
  .fig .stagger > *,
  .fig [data-rv] {
    opacity: 1 !important;
    transition: none !important;
  }
  .fig {
    transform: none !important;
  }
  /* No timing blanket here, on a lesson: `animation: none` on stage
     internals erased every finished keyframe state held by a `forwards`
     fill, printing a completed timeline as two empty tracks. Timing is
     resolved in JS instead — settleFiguresForPrint finishes every running
     animation (WAAPI and CSS alike) at beforeprint, so paper gets final
     frames without discarding them. */
  /* A stage that only ever fills on interaction prints as its caption. */
  .fig .stage:empty {
    display: none !important;
  }

  /* Figure panels, plates, and code stay whole on one sheet. */
  figure.fig,
  figure.rm-article-image,
  .uth-figure-embed,
  pre {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  figure.rm-article-image img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* The plates fade in on load and stay at opacity 0 until their onLoad
     fires. Paper does not wait for onLoad: every plate prints at full ink,
     and the blur placeholder never prints over one. */
  figure.rm-article-image img,
  figure.rm-article-image div {
    opacity: 1 !important;
    filter: none !important;
  }

  /* The panels keep their designed color on paper. */
  .fig,
  figure.rm-article-image,
  .rm-chip,
  .archive-row .chip {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* ---------- typographic fragmentation ----------

     A heading never signs off a page alone, and no paragraph strands a
     single line on either side of a break. */
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
    page-break-after: avoid;
  }
  p,
  li,
  blockquote {
    orphans: 3;
    widows: 3;
  }

  /* ---------- attribution ----------

     The name on every sheet, set as a watermark: large, diagonal, and at
     five percent ink, so the page reads clean and the artifact still says
     whose it is when it travels without its URL. Fixed elements repeat on
     every printed page. */
  .print-watermark {
    display: block !important;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    z-index: 0;
    pointer-events: none;
  }
  /* The ghost is the hand itself now: the drawn signature at five percent
     ink, wide across the sheet, repeating on every printed page. */
  .print-watermark img {
    width: 6in;
    height: auto;
    opacity: 0.05;
  }

  /* The document signs once at the end, in the same voice as the site's own
     footer: the name, the address. */
  .print-colophon {
    display: block !important;
    margin-top: 0.6in;
    padding-top: 10pt;
    border-top: 1pt solid #ddd;
    font-family: var(--f-mono, 'Söhne Mono', monospace);
    font-size: 7.5pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a857e;
    text-align: center;
  }
  /* The document signs by hand above the imprint line. */
  .print-colophon img {
    display: block;
    height: 32pt;
    width: auto;
    margin: 0 auto 6pt;
  }
}

/* ---------- the per-surface print rules, consolidated ----------

   These blocks used to live inside tokens.css, artwork.css, uth.css and
   essay.css, which are render-blocking on every route. Print rules belong
   on the print sheet: same cascade, zero render-blocking bytes. */

@media print {
  /* ---------- lifted from css/essay ---------- */
  .rm-page .essay-progress,
  .rm-q .essay-with-side .toc,
  .rm-q .essay-with-side .sidenotes,
  .rm-q .essay-meta-strip,
  .rm-q .essay-footer .next,
  .rm-q .essay-footer .post-nav,
  .rm-q .essay-footer .series-continue {
    display: none !important;
  }

  .rm-q .essay,
  .rm-q .essay-with-side,
  .rm-q .essay-prose {
    background: white !important;
    color: black !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .rm-q .essay header h1 {
    font-size: 36pt !important;
    line-height: 1.1 !important;
    color: black !important;
  }
  .rm-q .essay header h1 em {
    color: black !important;
    font-style: italic;
  }
  .rm-q .essay header .dek {
    font-size: 14pt !important;
    color: #222 !important;
  }

  .rm-q .essay-prose p {
    font-family: var(--f-serif), Georgia, serif !important;
    font-size: 12pt !important;
    line-height: 1.6 !important;
    color: black !important;
    page-break-inside: avoid;
  }
  .rm-q .essay-prose h2 {
    font-size: 18pt !important;
    page-break-after: avoid;
    color: black !important;
  }
  .rm-q .essay-prose blockquote {
    border-color: black !important;
    color: black !important;
  }
  .rm-q .essay-prose sup.note {
    color: black !important;
  }

  /* ---------- lifted from css/uth ---------- */
  .rm-q .uth-essay.is-ready .reveal,
  .rm-q .uth-essay.is-ready .reveal .stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* ---------- lifted from css/artwork ---------- */
  body::after {
    display: none;
  }

  /* ---------- lifted from css/artwork ---------- */
  [data-reveal],
  [data-reveal][data-revealed] {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  /* ---------- lifted from css/artwork ---------- */
  .rm-page > *,
  .rm-q .art-head > *,
  .rm-q .rm-series-strip,
  .rm-q .art-spec,
  .rm-q .essay-meta-strip,
  .rm-q .essay .essay-with-side,
  .rm-q .essay .essay-prose.art-prose-solo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* ---------- lifted from css/tokens ---------- */
  .rm-page .rm-header,
  .rm-q .rm-breadcrumb,
  .rm-q .rm-series-strip,
  .rm-page .rm-colophon,
  .rm-page {
    background: white !important;
    color: black !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  .rm-q .v-decision .body,
  .rm-q .v-constraint .body {
    color: black !important;
  }
  .rm-q .v-decision .kicker,
  .rm-q .v-constraint .kicker {
    color: black !important;
  }

  /* ---------- lifted from css/tokens ---------- */
  .rm-header-shell {
    display: none !important;
    position: static;
  }
}

/* ---------- page furniture and archetype grammar ----------

   The furniture a printed document carries in its margins: running heads and
   folios. The margin boxes live on the page box, so their *content* cannot be
   selected per archetype from this sheet — one @page rule serves whatever is
   printing. The split that resolves it: this sheet owns geometry and the rules
   that read the archetype off the article element; ArticleLayout emits a small
   per-document style block that fills the margin boxes, because only one
   document prints at a time and the layout knows its title and archetype at
   build time. Letters carry a folio alone (correspondence has no running
   head); essays and book notes run bookwork (title in the head, folio from
   page two); dispatches and build notes run report grammar (folio on every
   page, contents up front). */

@media print {
  /* A letter's valediction never opens a page by itself: the closing and the
     signature stay with the paragraph they answer. */
  .rm-letter-signoff {
    break-inside: avoid;
    page-break-inside: avoid;
    break-before: avoid;
  }

  /* ---------- the address, kept ----------

     On screen a link holds its destination; on paper it is only underlined
     text. Every link in running prose prints its address after itself, the
     way a report's apparatus does — except in letters, where correspondence
     stays correspondence and an address would be furniture inside a private
     page. Anchor links (#section) never print an address; they point inside
     the artifact the reader is already holding. */
  .art-essay:not([data-archetype='letter']) .essay-prose a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-family: var(--f-mono, monospace), monospace;
    font-size: 7.5pt;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    color: #8a857e;
    word-break: break-all;
  }
  .art-essay:not([data-archetype='letter']) .essay-prose a[href^='/']::after {
    content: ' (rajdeepmondal.com' attr(href) ')';
    font-family: var(--f-mono, monospace), monospace;
    font-size: 7.5pt;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    color: #8a857e;
    word-break: break-all;
  }

  /* ---------- contents, printed ----------

     A dispatch or build note is a report, and a report opens on its contents.
     The sections nav already exists in the markup (hidden above for every
     other archetype); here it prints as a front-matter block between the spec
     strip and the first section. No page numbers — Chromium has no
     target-counter — so the list is an overview, not an index. The action
     cluster inside it (top / reply / print) is chrome and stays off paper. */
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc {
    display: block !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 14pt 0 18pt !important;
    padding: 10pt 0 12pt !important;
    border-top: 1pt solid #ddd;
    border-bottom: 1pt solid #ddd;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc .lbl,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc .lbl {
    font-family: var(--f-mono, monospace), monospace;
    font-size: 7pt;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8a857e;
    margin-bottom: 8pt;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc ol,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc ol {
    columns: 2;
    column-gap: 24pt;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc li,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc li {
    break-inside: avoid;
    margin: 0 0 4pt;
    padding: 0;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc a,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc a {
    font-family: var(--f-mono, monospace), monospace;
    font-size: 8pt;
    line-height: 1.5;
    color: #333 !important;
    text-decoration: none !important;
    /* The scrollspy's active trail is a reading position, and paper has no
       reading position. */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc a::before,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc a::before,
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc li::before,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc li::before,
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc .toc-marker,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc .toc-marker {
    display: none !important;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc a.active,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc a.active {
    color: #333 !important;
    font-weight: 400 !important;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc a .n,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc a .n {
    color: #8a857e !important;
  }
  .rm-q .art-essay[data-archetype='dispatch'] .essay-with-side .toc .meta,
  .rm-q .art-essay[data-archetype='buildnote'] .essay-with-side .toc .meta {
    display: none !important;
  }
}