/* ---------------------------------------------------------------------------
   Print styles for davidacitron.com.

   Browsers drop background colours when printing but keep foreground ones, so
   any design with light text on a dark ground prints invisibly unless the text
   colour is reset explicitly. That is #41, and it reached production on two
   sites before anyone printed a page. This site has three dark grounds — the
   hero, the ledger hero and the STARMAN panel — so every one of them resets its
   text to black here rather than relying on inheritance.

   Verify with `node print-check.js --site=personal`, which emulates print media
   and measures contrast against white paper. Guessing is what caused #41.
   --------------------------------------------------------------------------- */

@page {
    margin: 1.6cm;
}

/* No transitions or animations on paper. Beyond being meaningless in print,
   a `transition: color` means the colour a print snapshot sees depends on when
   it was taken: print-check caught the Elsewhere links mid-fade from cream to
   black and reported 1.45:1 for a rule that resolves to #000. */
*, *::before, *::after {
    transition: none !important;
    animation: none !important;
}

html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
}

/* EVERY element prints black on nothing.

   This started as a list of the classes that are light-on-dark on screen, which
   is how #41 was fixed elsewhere — and it broke three times in one afternoon,
   once per new dark band added to the site (.elsewhere, then .pageHead). A rule
   that has to be updated every time someone adds a background is a rule that
   will be wrong again.

   So: reset everything, then re-state the handful of things that genuinely need
   ink on paper (the bars and the chart, below). Greys that are already dark
   enough are left to the specific rules further down. */
*, *::before, *::after {
    background: transparent !important;
    background-image: none !important;
    color: #000 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-color: #999 !important;
}

/* The YouTube and Instagram sprites are white artwork; on paper they would be
   invisible, and the link text beside them already names both. */
.links a span { display: none !important; }

/* Photographs carry no information on paper, and worse than none: print.css
   resets every colour to black, so a header picture that survives leaves black
   text sitting on a full-colour image. Measured before this rule, the h1 on
   /works printed over a 10.8% grey — about 1.3:1.

   `.hero > img` used to be the rule and matched NOTHING: the markup is
   .hero > .heroPhoto > img, so the photo is a grandchild. The interior pages'
   .pageHeadPhoto was never listed at all, having arrived after this file was
   last touched. Five of seven pages printed their header photograph.

   This is #41 in a new form. That issue was about text colour on dark bands;
   the same band is now a photograph, and print-check.js cannot see it —
   the harness measures text against white paper on the assumption backgrounds
   are dropped, and an <img> is not a background. Any future banner image needs
   adding here, or the check extended. */
.heroPhoto, .pageHeadPhoto,
.pianoBand,
.nowBar,
.hero::before, .hero::after,
.ledgerHero::after,
.sectionRule,
.navOverlay, .navBurger, .navToggle, .skipLink,
.rowMark, .rowsToggle,
.instPick, .instSaid, .instDock,
.vClip, .vMuteBox, .vMore, .vWatch {
    display: none !important;
}

.hero, .ledgerHero {
    min-height: 0 !important;
    padding: 0 0 1rem !important;
}

/* Nav is navigation; on paper it is noise. The footer nav goes too — but the
   copyright stays, because a printed page should still say whose it is. */
.siteHead, .footNav {
    display: none !important;
}

.siteFoot {
    border-top: 1pt solid #000;
    padding: 0.6rem 0 0;
}

/* Bars still mean something in print, so they are kept — but as outlined shapes
   rather than colour fills, since the fill is a background and would vanish. */
.barTrack {
    border: 0.5pt solid #666 !important;
    height: 7pt !important;
    background: transparent !important;
}

.barFill {
    background: #444 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.yearChart rect {
    fill: #444 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Open every ledger row so a printed ledger is the whole ledger, not the
   summary lines of a page whose detail happens to be collapsed on screen. */
.rowDetail {
    display: block !important;
}

.rowHead { cursor: default !important; }
/* The disclosure buttons are furniture on paper, where everything is open. */
.rowToggle { display: none !important; }
.ledgerRow { break-inside: avoid; }
section { padding-block: 1.2rem !important; break-inside: auto; }
h1, h2, h3 { break-after: avoid; }

a { color: #000 !important; text-decoration: underline; }

/* Print the destination of real links, but not of internal nav or anchors —
   "/ledger" after every word is worse than useless on paper. */
main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
}