/* =================================================================
   The Land Remembered: the print edition.
   Linked from index.html with media="print": it never blocks the first paint (browsers fetch it at low
   priority) and the screen sheet is 22 KB lighter (styles.css block 8 moved here). Order: the page box, then one print block. The paper-only face
   ("Libre Franklin Print") stays declared in styles.css block 2, so app.js can warm it before a print.
   ================================================================= */

/* ---------- 8. PRINT ----------
   The print edition: white letter pages in dark ink with brass accents, about ten of them. Page 1 is a cover
   (the title, the poster matted at 60% of the page, the sub and the imprint); from page 2 a running head in
   IM Fell italic, the address bottom left and "Page n of N" bottom right (page margin boxes: Chrome 131+;
   Safari and Firefox print without them). The page is laid out at the page's own width (about 695 CSS px),
   so the tablet rules apply underneath; the rules here bring back the two-column spreads where paper has the
   room and condense the rest. The dark grounds turn to paper by re-pointing the on-dark tokens at ink, the
   grain and the three shadows are switched off, and prints, plates and the envelope get a hairline frame
   instead of a mat colour, so a reviewer's print looks the same with "Background graphics" on or off. The
   few things that are drawn as fills (map markers, numbered discs, the nesting bars, the Today line) keep
   them with print-color-adjust: exact. Not printed: the navigation, the cover photograph and buttons, the
   live strip (one line stands in for it), the player and its chrome, the map and key controls, the viewer,
   copy buttons, mail buttons (their addresses print as text), the cream emblem and the river's drawn layer
   (a static double rule and its stations stand in). Pond Restoration stays out of print until the crew
   member's consent is recorded. app.js (beforeprint) makes every photograph eager and, in Chromium, prints
   the JPEG files so the PDF stays small; it also writes each recording's full date and each outside link's
   address for the rules below. */
@page {
  size: letter;
  margin: 16mm 16mm 18mm;
  @top-left { content: "The Land Remembered"; vertical-align: bottom; padding-bottom: 5mm; font-family: "IM Fell English", Georgia, serif; font-style: italic; font-size: 9pt; color: #7d603d; }
  @bottom-left { content: "thelandremembered.com"; vertical-align: top; padding-top: 5mm; font-family: "Libre Franklin Print", "Libre Franklin", Arial, sans-serif; font-size: 7.5pt; color: #56614f; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); vertical-align: top; padding-top: 5mm; font-family: "Libre Franklin Print", "Libre Franklin", Arial, sans-serif; font-size: 7.5pt; color: #56614f; font-variant-numeric: lining-nums tabular-nums; }
}
@page :first {
  @top-left { content: none; }
  @bottom-right { content: none; }
}
@media print {
  /* ink, paper and rules */
  :root {
    --on-dark: var(--ink); --on-dark-dim: var(--ink-soft); --amber: var(--brass-ink);
    --rule-dark: rgba(23, 52, 43, 0.24); --rule-light: rgba(23, 52, 43, 0.24);
    --foot-small: var(--ink-on-sheet); --on-deep-head: var(--sepia-ink); --on-deep-warm: var(--sepia-ink);
    --frame: 0.75pt solid rgba(110, 86, 52, 0.55);
    --paper-grain: none; --lift-print: none; --lift-plate: none; --lift-frame: none;
    --gutter: 0px;
    --font-body: "Libre Franklin Print", "Libre Franklin", "Libre Franklin Fallback", "Helvetica Neue", Arial, sans-serif;
  }
  html { font-size: 12px; background: #fff; scroll-behavior: auto; }
  body { background: #fff; color: var(--ink); line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  img { opacity: 1 !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  main > section { padding: 0 !important; margin: 0; background: none !important; color: var(--ink); overflow: visible !important; }
  main > section + section { margin-top: 26pt; }
  .stewards, .support { break-before: page; margin-top: 0; }   /* the people and the ask each open a page */
  p { max-width: none; }

  /* not on paper */
  .skip-link, .nav, .hero-bg, .hero-actions, .cover-dateline, .now-strip, .cam-frame, .cam-caption, .cam-card-dwell,
  .cam-card-text:has(.cam-card-rec) .cam-card-date, .cam-plan-link, .cam-card[data-name="Pond Restoration"], .plan-tools, .plan-filter, .plan-tag,
  .map-card, .land-layer, .tl-river, .tl-nib, .resto-all, .give-actions, .give-copy, .colo-mast picture, .colo-emblem,
  dialog.viewer { display: none !important; }

  /* the house head: title left, intro right, as on a desktop */
  /* the head's air sits on its children: with padding, Chrome may leave the hairline alone at a page foot */
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6pt 24pt; margin-bottom: 18pt; padding-top: 0; }
  .section-head > * { margin-top: 12pt; }
  .section-head .section-sub { margin: 12pt 0 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft); }
  h2 { font-size: 2.55rem; line-height: 1.04; color: var(--ink); }
  .section-head, .give-head, h2, h3, h4 { break-after: avoid; }
  .section-head, .give-head { break-inside: avoid; }
  p, li, dd { orphans: 3; widows: 3; }

  /* outside links print their address at 8pt; mail addresses already print as text */
  a { color: inherit; }
  a[data-print-url]::after, a[href^="http"]:not([data-print-url])::after {
    content: attr(data-print-url); display: inline-block; max-width: 100%; margin-left: 0.3em; font: 400 8pt/1.3 var(--font-body); font-style: normal; letter-spacing: 0; color: var(--ink-on-sheet); text-decoration: none; white-space: normal; overflow-wrap: anywhere;   /* inline-block: the link's underline stops at its words */
  }
  a.nw[href^="http"] { white-space: normal; }   /* the address may wrap; the link's own words still read as one */
  a[href^="http"]:not([data-print-url])::after { content: attr(href); }

  /* page 1, the cover: the title across the top, the poster matted at 60% of the page, the sub beside it, the imprint at the foot */
  .hero { overflow: visible; background: none; break-after: page; }
  .hero-inner {
    min-height: 236mm; max-width: none; margin: 0; padding: 0;
    grid-template-columns: 60% minmax(0, 1fr); column-gap: 24pt; row-gap: 0;
    grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "title title" "poster sub" "poster foot";
  }
  .hero h1 { font-size: 64pt; line-height: 0.94; color: var(--ink); padding-bottom: 18pt; margin-bottom: 20pt; border-bottom: 0.75pt solid rgba(23, 52, 43, 0.35); }
  .hero-sub { margin: 0; max-width: none; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
  .hero-poster { align-self: end; justify-self: stretch; display: block; container-type: normal; }
  .hero-poster figure { --pw: auto; width: 100%; padding: 8pt 8pt 0; background: none; border: var(--frame); transform: none !important; }
  .hero-poster figure::before, .hero-poster figure::after { content: none; }
  .hero-poster img { width: 100%; height: auto; }
  .hero-poster figcaption { padding: 6pt 0 7pt; font-size: 0.92rem; color: var(--ink-on-sheet); }
  .cover-foot { grid-area: foot; align-self: end; display: block; margin: 0; padding-top: 8pt; }
  .cover-foot::before { background: rgba(23, 52, 43, 0.35); transform: none !important; }
  .cover-imprint { justify-self: start; text-align: left; font-size: 0.98rem; line-height: 1.5; color: var(--ink-soft); }

  /* the thesis beside the emblem in ink */
  .mission-inner { grid-template-columns: 28% minmax(0, 1fr); column-gap: 24pt; align-items: start; padding: 0; }
  .mission-emblem { width: 100%; margin-top: 4pt; }
  .mission p { max-width: none; font-size: 1.62rem; line-height: 1.32; }

  /* the cameras: one line for the live strip, the four recordings three across with the planned card beside the
     last, then the note and the ask */
  .cam-print-line { display: block; margin: -6pt 0 14pt; padding: 7pt 0; border-top: var(--frame); border-bottom: var(--frame); font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.4; color: var(--ink); }
  /* one grid: the recordings auto-placed three across (the tiles' box is display: contents), the planned card in
     the last two cells of row 2, then the note and the ask across the page */
  .cam-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: none; grid-template-rows: none; gap: 14pt 14pt; align-items: start; }
  .cam-tiles { display: contents; }
  .cam-demo-note { grid-area: 3 / 1 / auto / -1; margin-top: -2pt; max-width: none; font-size: 0.9rem; }
  .cam-ask { grid-area: 4 / 1 / auto / -1; margin-top: -6pt; padding-top: 7pt; font-size: 0.9rem; }
  .cam-ask a { text-decoration: none; font-weight: 400; }
  .cam-card { display: block; flex: none; aspect-ratio: auto; padding: 0; overflow: visible; border-radius: 0; background: none !important; color: var(--ink); break-inside: avoid; }
  .cam-card::before, .cam-card-thumb::after { content: none; }
  .cam-card-thumb { position: relative; inset: auto; aspect-ratio: 16 / 10; border-radius: 0; outline: var(--frame); }
  .cam-card-thumb img, .cam-card-text { opacity: 1 !important; filter: none !important; }
  .cam-card-text { position: static; margin-top: 6pt; padding: 0; }
  .cam-card-name { font-size: 1.16rem; line-height: 1.2; color: var(--ink); }
  .cam-card-date { display: block; margin-top: 1pt; font-size: 0.98rem; color: var(--sepia-ink); }   /* without app.js: the tile's own short date */
  .cam-card-rec { display: block; margin-top: 1pt; font-family: var(--font-display); font-style: italic; font-size: 0.98rem; line-height: 1.3; color: var(--sepia-ink); }
  .cam-plan { grid-area: 2 / 2 / auto / span 2; max-width: none; margin: 0; padding: 7pt; grid-template-columns: 96px minmax(0, 1fr); background: none; border: var(--frame); break-inside: avoid; }
  .cam-plan-pin { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* the ledger, in two columns as on a desktop */
  .ledger .section-head { margin-bottom: 12pt; }
  .ledger-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24pt; }
  .ledger-col { grid-row: span 2; grid-template-rows: subgrid; }
  .ledger-h { margin: 0 0 8pt; font-size: 1.3rem; }
  .ledger-state { font-size: 1.05rem; }
  .ledger-row { padding: 7pt 0 6pt; break-inside: avoid; }
  .ledger-row dt { font-size: 1.08rem; }
  .ledger-row dt::after { border-bottom-color: rgba(23, 52, 43, 0.4); }
  .ledger-row dd { font-size: 1.5rem; color: var(--brass-ink); }
  .ledger-planned .ledger-row dd { color: var(--ink-on-sheet); }
  .ledger-source { margin-top: 10pt; font-size: 0.86rem; }

  /* the land: the photograph as a band over the four features, two by two */
  .land-open { grid-template-columns: minmax(0, 1fr); }
  .land-spread { position: static; margin: 0 0 14pt; break-inside: avoid; }
  .land-spread img { aspect-ratio: auto; height: 46mm; max-height: none; }
  .land-spread figcaption { padding: 5pt 0 0; background: none; font-size: 0.92rem; }
  .land-features { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24pt; }
  .feature { padding: 10pt 0; break-inside: avoid; }
  .land-features .feature:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .feature h3 { margin-bottom: 4pt; font-size: 1.36rem; }
  .feature p { font-size: 0.94rem; line-height: 1.5; }

  /* the camera plate beside its key, as on a desktop; the locator under the caption */
  .plan { margin-top: 26pt; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24pt; }
  .plan-head { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
  .plan-key { grid-column: 2; grid-row: 2; max-width: none; margin-top: 4pt; }
  .plan-plate { grid-column: 1; grid-row: 1 / 3; width: 100%; padding: 8pt; grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "cap" "loc"; background: none; border: var(--frame); break-inside: avoid; }
  .plan-caption { margin-top: 7pt; font-size: 0.88rem; }
  .plate-locator { width: 62%; margin-top: 8pt; }
  .plate-locator figcaption { font-size: 0.8rem; }
  .plate-locator text { stroke: none; }
  .plate-locator .lr-loc-hatch { display: none; }   /* without the halo, the water hatching runs through the labels */   /* a stroked halo makes Chrome draw each IM Fell glyph as a path (0.57 MB); on paper the labels sit on flat land and water */
  .plan-title { margin-bottom: 6pt; font-size: 1.55rem; }
  .plan-intro { font-size: 0.92rem; line-height: 1.5; }
  .plan-zone-group { margin-top: 12pt; break-inside: avoid; }
  .plan-zone-head { font-size: 1.08rem; }
  .plan-zone-land { margin: 2pt 0 5pt; font-size: 0.9rem; line-height: 1.35; }
  .plan-rows li { padding: 3pt 4pt; font-size: 0.88rem; line-height: 1.3; }
  .plan-num { width: 18px; height: 18px; font-size: 0.72rem; }
  .plan-legend { margin-top: 9pt; font-size: 0.8rem; line-height: 1.4; }
  .plan-cam::before, .plan-num.is-mapped, .is-mapped .plan-num { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .free-watch { margin-top: 18pt; padding-top: 10pt; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6pt 24pt; break-inside: avoid; }
  .free-watch h3 { font-size: 1.3rem; }
  .free-watch p { font-size: 0.96rem; line-height: 1.5; }

  /* the seasons: the sheet framed, the six plates in one row */
  .season-sheet { padding: 12pt 14pt 10pt; background: none; border: var(--frame); }
  .season-top { padding-bottom: 6pt; }
  .season-title { font-size: 1.22rem; }
  .season-chart { break-inside: avoid; }
  .sc-row { grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; }
  .sc-name { padding: 6pt 0; font-size: 1rem; }
  .sc-track { min-height: 22pt; background-image: none; }   /* the month hairlines are a gradient: Chrome would rasterize every row */
  .sc-note { padding: 0 0 6pt; font-size: 0.8rem; line-height: 1.35; }
  .sc-cell { height: 12px; }
  .sc-cell, .lg, .has-today .sc-track::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .season-foot { padding-top: 8pt; gap: 4pt 24pt; }
  .season-now { font-size: 0.92rem; }
  .plate-cabinet { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12pt 10pt; margin-top: 14pt; padding-top: 12pt; break-inside: avoid; }
  .plate-img { padding: 0; background: none; outline: var(--frame); }
  .plate-name { margin-top: 6pt; font-size: 0.94rem; }
  .plate-ref { font-size: 0.72rem; }
  .plate-here { font-size: 0.82rem; }
  .plate-credit { margin-top: 12pt; font-size: 0.74rem; }

  /* history: a static double rule in the gutter, a sepia station on each era's baseline */
  .timeline { gap: 18pt; }
  .timeline::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--tl-x) - 2px); width: 4px;
    border-left: 1px solid rgba(91, 125, 140, 0.7); border-right: 1px solid rgba(91, 125, 140, 0.4);
  }
  .tl-base { position: relative; }
  .tl-base::after { content: ""; position: absolute; left: calc(var(--tl-x) - 140px - 2.5px); top: -0.42em; width: 5px; height: 5px; border-radius: 50%; background: var(--sepia-ink); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .timeline-item { break-inside: avoid; }
  .timeline-era { font-size: 1.7rem; }
  .timeline-item h3 { margin-bottom: 3pt; font-size: 1.4rem; }
  .timeline-item p { font-size: 0.96rem; line-height: 1.5; }

  /* restoration: the essay as a contact sheet, every print at one height, in the order they were taken */
  .restoration .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 12pt 10pt; }
  .restoration .section-head { order: -1; width: 100%; margin-bottom: 4pt; }
  .resto-essay, .resto-pair { display: contents; }
  .resto-print, .resto-front, .resto-lead { align-self: stretch; width: min-content; margin: 0; padding: 4pt 4pt 0; background: none; border: var(--frame); break-inside: avoid; }
  .resto-print .resto-ph, .resto-front .resto-ph { height: 38mm; aspect-ratio: var(--ar); }
  .resto-front .resto-ph { aspect-ratio: 16 / 9; }
  .resto-band { height: auto !important; min-height: 0; justify-content: flex-start; padding: 4pt 2pt 5pt; }
  .resto-cap { font-size: 0.8rem; line-height: 1.25; }
  .resto-date { font-size: 0.7rem; }
  .resto-close { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18pt; align-items: center; break-inside: avoid; }
  .resto-mat { justify-self: start; width: auto; padding: 4pt; background: none; border: var(--frame); }
  .resto-mat .resto-ph { height: 38mm; width: auto; aspect-ratio: var(--ar); }
  .resto-close-text .resto-cap { font-size: 1.4rem; line-height: 1.35; color: var(--ink); }
  .resto-foot { width: 100%; margin: 0; padding-top: 7pt; grid-template-columns: minmax(0, 1fr); border-top: var(--frame); }
  .resto-credit { grid-column: 1; font-size: 0.92rem; color: var(--ink-soft); }

  /* the stewards: the story beside the record, as on a desktop */
  .stewards-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24pt; }
  .steward-story { grid-column: 1; grid-row: 1; }
  .steward-record { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin: 0; }
  .steward-members { grid-column: 1; grid-row: 2; margin-top: 14pt; padding-top: 10pt; border-top: var(--frame); break-inside: avoid; }
  .steward-story p { margin-bottom: 9pt; font-size: 0.96rem; line-height: 1.55; }
  .record-h { margin-bottom: 6pt; font-size: 1.3rem; }
  .record-entry { padding: 7pt 0 8pt; break-inside: avoid; }
  .record-year { font-size: 1rem; }
  .record-place { margin-bottom: 2pt; font-size: 1.12rem; }
  .record-text { font-size: 0.9rem; line-height: 1.48; }
  .members-h { font-size: 1.1rem; }
  .members-list { font-size: 1rem; line-height: 1.5; }

  /* the giving desk: the head across, the photograph beside the three ways to give, the Corbetts' words and the note */
  .give-spread { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 24pt; }
  .give-head { grid-column: 1 / -1; grid-row: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6pt 24pt; padding-top: 12pt; }
  .give-intro { margin: 0; font-size: 0.98rem; line-height: 1.55; }
  .give-photo { grid-column: 1; grid-row: 2; position: static; margin: 18pt 0 0; break-inside: avoid; }
  .give-photo figcaption { padding: 5pt 0 0; background: none; font-size: 0.9rem; }
  .give-ways { grid-column: 2; grid-row: 2; max-width: none; margin-top: 18pt; }
  .give-ways-h { margin-bottom: 6pt; font-size: 1.3rem; }
  .give-entry { padding: 9pt 0 9pt; break-inside: avoid; }
  .give-entry h4 { margin-bottom: 3pt; font-size: 1.2rem; }
  .give-entry p { font-size: 0.94rem; line-height: 1.5; }
  .give-entry .give-credit { margin-top: 6pt; font-size: 1rem; }
  .give-entry .give-print { display: block; margin-top: 2pt; font-weight: 500; letter-spacing: normal; color: var(--ink); }
  .give-envelope { margin-top: 8pt; padding: 10pt 14pt; background: none; border: var(--frame); font-size: 1.2rem; }
  .give-foot { margin-top: 20pt; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24pt; break-inside: avoid; }
  .give-note, .give-quote { grid-row: 1; }
  .give-note { grid-column: 2; padding-top: 18pt; font-size: 0.9rem; }
  .give-quote { grid-column: 1; margin: 0; }
  .give-quote::before { margin-bottom: 12pt; }
  .give-quote p { font-size: 1.4rem; }

  /* the colophon: ink on the page, the three columns as on a desktop, no emblem */
  .footer { margin-top: 24pt; padding: 0; background: none; color: var(--ink-soft); }
  .colo-mast, .colo-cols, .colo-base { break-inside: avoid; }
  .colo-mast { break-after: avoid; }
  .colo-mast, .colo-cols, .colo-base { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18pt; }
  .colo-mast { padding-top: 12pt; }
  .colo-words { grid-column: 1 / -1; padding: 0; }
  .colo-motto { max-width: none; font-size: 1.9rem; color: var(--ink); }
  .colo-count { margin-top: 5pt; font-size: 1rem; }
  .colo-cols { margin-top: 14pt; padding-top: 10pt; }
  .colo-col:last-child { grid-column: auto; }
  .colo-h { margin-bottom: 5pt; font-size: 0.98rem; }
  .colo-col p, .colo-dl { font-size: 0.84rem; line-height: 1.5; }
  .colo-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .colo-dl dt, .colo-dl dd { grid-column: 1; }
  .colo-dl dt { font-size: 0.9rem; }
  .colo-dl > div + div dt { margin-top: 5pt; }
  .colo-base { margin-top: 14pt; padding-top: 8pt; font-size: 0.78rem; }
  .colo-disclaimer { grid-column: 1 / span 2; }
  .colo-imprint { grid-column: 3; }
}