/* Print — loosely following the advice in
   https://www.matuzo.at/blog/i-totally-forgot-about-print-style-sheets/.
   Loaded via <link media="print"> (base.njk) rather than an @media print
   block inside index.css, so it stays out of the main sheet entirely —
   the browser only ever parses/applies this file when actually printing.
   Nothing below needs its own @media print wrapper: the <link>'s media
   attribute already scopes the whole file. */

@page {
    margin: 2cm;
}

/* Eliminates nav: the footer, the color-theme picker, and the top nav
   are pure on-screen chrome — nothing in them means anything on
   paper. The site title itself survives (see below) — header can't
   just be dropped wholesale the way footer/skip-link/scripts are, so
   it's excluded from the blanket rule and instead has everything but
   .home-link stripped from inside it directly. #search is inside
   main but is the live search box/results UI, equally meaningless
   once printed. */
body > *:not(main):not(header) {
    display: none;
}
header > *:not(.home-link) {
    display: none;
}
#search {
    display: none;
}

/* The title block stays, but at on-screen size/rotation it's a giant
   decorative wordmark built for a screen header, not a printed page —
   shrunk to a small running masthead here (not matched to h1 — that was
   tried and still left the header eating enough of page one that the
   post's own first image/figure routinely didn't fit what was left,
   getting relocated wholesale onto page two by the page-break-inside:
   avoid rules further down, leaving page one with next to nothing on
   it). Its rotate() tilt is left alone (still reads fine small and
   flat-colored); the shadow layers giving it their brand-color depth
   effect are already gone via the ink-saving `*` reset below. Most of
   the on-screen spacing around it (header's own padding, .home-link's
   grid-snap padding-bottom, .site-subtitle's padding-bottom) exists to
   fit a full-bleed screen hero into the page's vertical rhythm —
   meaningless here, so those collapse to zero. .site-title-line's own
   padding-top/bottom is different: index.css's own comment on it
   explains rotate() doesn't reserve layout space for the box it visually
   swings into, so that padding is the only thing stopping the tilted
   text from bleeding into (and at the very top of the page, being
   clipped by) whatever's outside it — dropping it to zero clipped the
   title's top edge, so this only shrinks it (proportionally smaller
   anyway now that the font-size above is a small fraction of its
   on-screen size) rather than removing it outright. The separate gap
   wanted below the whole title block (so the post's own h1 doesn't sit
   right up against it) goes on header's margin instead, in `lh` — margin
   is genuinely empty space outside the box, unlike padding here which
   the rotated text's own bleed eats into; kept small for the same
   page-one-real-estate reason as the font-size shrink above. */
.site-title-line {
    font-size: 1rem;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
header {
    padding: 0;
    margin-bottom: 0.3lh;
}
.home-link {
    padding-bottom: 0;
}
.site-subtitle {
    font-size: 0.7rem;
    margin-top: 0;
    padding-bottom: 0;
}

/* index.css's --h1-title/--h2-title/--h3-title (2.6rem/2rem/1.6rem) were
   sized for the screen type scale, and even h1 at the same nominal
   2.6rem as .site-title-line above renders visually bigger on paper —
   Millie (the title's own font) runs smaller at a given font-size than
   the headings' sans/serif faces do. Scaled down a bit across the board
   so body headings read as clearly subordinate to the title block
   rather than competing with or outsizing it. font-size only overrides
   that one longhand out of each heading's own `font: var(--h#-title)`
   shorthand — family/weight/line-height still come from there. */
h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.6rem;
}

/* print-qr.njk's permalink QR — invisible on screen (index.css's own
   .print-qr rule) since there's nothing to scan there. position: fixed
   (rather than the float this used to be) pins it to the top-right
   corner of the page box itself, inset just enough to sit inside @page's
   own 2cm margin rather than the printable content area — so it never
   overlaps or competes for space with whatever's actually printed there,
   and the post's own content lays out exactly as if it weren't there at
   all (no float for text to wrap around, no box in the flow to push
   anything else down). A side effect of position: fixed under print
   pagination (not just a plain screen quirk) is that it repeats in that
   same corner on every page of the printout, not just the first — a nice
   property for a permalink QR specifically, since a printout can end up
   as several separate loose pages. */
.print-qr {
    display: block;
    position: fixed;
    top: 0.4cm;
    right: 0.4cm;
    width: 1.4cm;
    height: 1.4cm;
    margin: 0;
}
.print-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}
h3,
h4,
h5,
h6 {
    font-size: 1.3rem;
}

/* On screen, deliberate whitespace (2rlh padding above the post body,
   3rlh margin above its own h1) sets a post's title apart as a clear
   "start here" moment on a long scrolling page. Printed, that's just
   several inches of blank paper before the title shows up at all —
   cut down to a modest amount that still separates it from the title
   block above without eating most of the first page. */
[data-pagefind-body] {
    padding-top: 0;
}
h1 {
    margin-top: 0.5rlh;
}
.content-warning {
    margin-top: 0;
}

/* Neither the "proximate posts" table (collection-nav.njk) nor the
   newer/older pagination links (platform-archive-nav.njk) lead
   anywhere once printed — both are just other pages' URLs, already
   unreachable on paper. */
.archive-nav-table,
.archive-nav-links {
    display: none;
}

/* The Show/Hide affordance is a click target; there's nothing to
   click on paper. The content-warning label and blurred body it sits
   next to are untouched — this only drops the now-meaningless button
   text. !important is required, not just style: index.css's own
   .content-warning-toggle:checked ~ .content-warning-summary::after
   rule (the "Hide" state) has higher specificity than this plain class
   selector — three classes/pseudo-classes deep versus one — so without
   it, "Hide" would keep winning over this on any checked instance. */
.content-warning-summary::after {
    content: none !important;
}

/* dateline.njk always renders both the relative phrase and the real
   absolute date+time (index.css's own .dateline-absolute hides the
   latter by default) — flips which one's showing, since a printout has
   no "now" to be relative to. */
.dateline-relative {
    display: none;
}
.dateline-absolute {
    display: inline;
}

/* Same flip for the permalink text right after: a printout can't be
   clicked, so the short relative-URL link (meaningful on screen, where
   it's actually clickable) is swapped for the fully-qualified absolute
   URL instead, same as a[href^="http"]::after below does for arbitrary
   external links — this one needs its own rule since post-permalink
   hrefs are same-origin relative, so that generic rule never matches
   them. */
.dateline-permalink-relative {
    display: none;
}
.dateline-permalink-absolute {
    display: inline;
}

/* The separate "in both HTML and markdown" links are just two more
   copies of the same now-unreachable permalink — dropped entirely rather
   than given the relative/absolute treatment above, since there's no
   print-friendly form of "these two links happen to point to different
   file formats" worth spelling out on paper. */
.dateline-html-md-links {
    display: none;
}

/* var(--font-size)'s clamp(…vi…) chases viewport width, and a printed
   page has no viewport to chase — there's no guarantee it lands
   anywhere near a normal reading size once printed. Pins body copy to
   an absolute unit at an ordinary printed-document size instead;
   heading sizes are already rem-based off a fixed root, so they don't
   need the same override. */
body {
    font-size: 12pt;
    line-height: 1.4;
}

/* The href-after trick: a reader can't click a printed link, so its
   destination needs to become readable text in its own right.
   Scoped to href^="http" specifically — every internal link on this
   site is root-relative ("/2024/…"), so this only ever fires for
   external links, which is exactly the case where the destination
   isn't recoverable any other way on paper. .link-preview-card is
   excluded: it's itself an external-URL <a>, but its own ::after is
   already load-bearing (the card's underline bar, keyed off the same
   pseudo-element) — layering a second, unrelated `content` there
   would just win the cascade and clobber it. */
a[href^="http"]:not(.link-preview-card)::after {
    content: " (" attr(href) ")";
}

/* Ink-saving reset. Every text-shadow/box-shadow on the site is
   purely decorative (title flourish, hover glows, card shadows),
   never load-bearing, so stripping them everywhere is safe —
   needs !important since these are plain screen rules with real
   specificity of their own, and this stylesheet doesn't otherwise
   outrank them just by being print-only. Leaves `background`/
   `background-image` alone: several links and the link-preview
   thumbnail rely on those for actual content, not decoration. */
* {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Nothing here should ever start on one page and finish on the next: an
   image split across the page boundary, a figcaption stranded from the
   image it captions, a photo grid with half its thumbnails on the
   following page. figure (not just .captioned-figure) also catches any
   future figure markup without this list needing to be kept in sync by
   hand. picture/img cover both plain inline photos and the
   <picture><source>…<img> eleventy-img rewrites every markdown image
   into — img alone would miss a <picture> tall enough to split on its
   own. video is the same concern for embedded video. (iframe is left
   out: YouTube embeds print as a blank/broken frame regardless, so
   there's nothing there worth protecting from a split.)

   The actual fix for these being relocated wholesale onto page two when
   they don't fit whatever's left of the current page isn't here — it's
   .site-title-line etc. below being shrunk down, so there's enough room
   left on page one after the header for a normal-sized image/figure to
   actually fit. page-break-inside: avoid was never the bug: it doesn't
   make a tall element fit the page, it just refuses to split it, and a
   tall header eating most of page one is what left so little room that
   even a modest image no longer fit.

   The one exclusion is the bookwyrm cover .captioned-figure just below,
   overridden back to `auto`: it's float:right (index.css), and
   page-break-inside: avoid on a *floated* box is a known bad combination
   in print engines — rather than just keeping the float intact, they can
   shove the whole thing down to wherever it fits as a solid block, which
   knocked the cover down to the bottom of the page and, since floats in
   the same flow interact with each other, dragged the next paragraph's
   floated drop-cap initial loose from its own line right along with it.
   Nothing else in this list is ever floated (only .micropost-dropcap and
   that one bookwyrm selector use float: at all — see index.css), so
   nothing else here shares that failure mode. */
blockquote,
pre,
table,
figure,
picture,
img,
video,
.link-preview-card,
.strava-media {
    page-break-inside: avoid;
}
[data-platform="bookwyrm"] .captioned-figure:has(img[alt^="Cover of "]),
[data-platform="bookwyrm"] .captioned-figure:has(img[alt="Book cover"]) {
    page-break-inside: auto;
}