/* ============================================================================ print.css — the Index on paper ---------------------------------------------------------------------------- The site's own hero copy says every entry keeps its makers and its provenance. Paper is the format provenance has been carried in for five hundred years, and until this sheet existed the archive could not produce it: Cmd-P on a record printed the grid, Cmd-P on /radar printed a blank page, and every title came out pale grey on white because the dark theme's secondary ink is a light ink. Loaded with media="print", so nothing here can reach the screen. Four rules govern: 1. Ink is dark on white. The screen theme inverts; paper does not. 2. Chrome does not print. Nav, scrims, overlays, modals, tickers, the subscribe field, the social row — none of it is the record. 3. Entrance animation is not a gate. [data-reveal] starts at opacity 0 and is cleared by an IntersectionObserver on scroll. Print does not scroll, so on /radar the observer never fired and the entire Signals list came out invisible. The reveal script already guards no-JS, reduced-motion and no-IntersectionObserver; print is the fourth case, and it is the one CSS has to answer because by print time the script has already decided. 4. An address is part of the record. Every artifact has a real route (/a/A05). On screen the browser shows it in the status bar; on paper nothing does, so it is set after the link. ========================================================================== */ @page { margin: 16mm 14mm; } /* ---- 1. ink ------------------------------------------------------------- */ @media print { html, body { background: #fff !important; color: #111 !important; /* openDrawer sets document.body.style.overflow = 'hidden' inline to lock the page behind the panel. That lock is correct on screen and fatal on paper: overflow: hidden on clips the document to the first page box, so printing an open record produced one sheet with the footer on it and the record itself clipped away below. The scroll lock has no meaning in a medium with no scroll. */ overflow: visible !important; height: auto !important; /* The theme is authored in custom properties. Re-pointing them at paper values is one declaration instead of chasing every consumer, and it catches the rules this sheet has never seen. */ --bg: #fff; --paper: #fff; --ink: #111; --text: #111; --fg: #111; --muted: #444; --dim: #444; --line: #cfcfcf; --border: #cfcfcf; --rule: #cfcfcf; } /* Anything painted on carbon assumed a light foreground. On white that foreground is the paper. Reset the two properties that decide legibility and let the specific rules below re-assert hierarchy. */ body * { background-image: none !important; background-color: transparent !important; color: #111 !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; backdrop-filter: none !important; } /* Images are the exception: an artifact plate is the artifact. Keep them painted, and only them, so the page stays white but the record is not reduced to a caption. */ img, picture, video, canvas, svg { -webkit-print-color-adjust: exact; print-color-adjust: exact; max-width: 100% !important; height: auto !important; } /* Every Artifice mark on this site is a white-ink knockout PNG — the wordmark, the WHITEBOX and BLACKBOX lockups, the placeholder marks — measured at 250-255 mean luminance on transparency. They are drawn for carbon. On paper they print as nothing, which on a card is worse than absent: the format line reads "INSTALLATION · IRL" with a blank where the format was. Inverted here rather than shipping a second set of assets. (The comment at index.html:2430 says the wordmark ships dark on transparent. It does not; it measures 250.) */ .mode-icon, .overlay-icon, .card-ph-mark, .credit__link img, .drawer-meta-mode .mode-icon { filter: invert(1) !important; } /* Inverting is not the whole job. On screen the mark is a white script face at 9px over carbon — it reads as texture in a row of mid-grey type. Turned to solid black on white it became the heaviest object in the caption stack, heavier than the title it sits under, and the card's hierarchy read WHITEBOX first and "Antennae" second. Held back to the weight of the meta row it belongs to, which is what it is on screen. The placeholder mark is exempt: it sits alone in an empty disc and has nothing to out-weigh. */ .mode-icon, .overlay-icon, .drawer-meta-mode .mode-icon { opacity: 0.7 !important; } .card-ph-mark { opacity: 1 !important; } /* ---- 2. chrome does not print ---------------------------------------- */ .sitenav, .chrome-scrim, .panel-scrim, .drawer-backdrop, .skip-link, .toolbar, .panel-ticker, .footer-chapters, .footer-social, .footer-sub, .footer-objects, .footer-map, .footer-mark, .rs-overlay, .donate-modal, .view-toggle, .drawer-close, #empty-clear, [hidden] { display: none !important; } /* The footer keeps one line — who made it and when — because a printed sheet that cannot be attributed is not a record. Everything above it is site furniture and is hidden by name overhead. */ .footer { border-top: 1px solid #cfcfcf !important; padding: 6mm 0 0 !important; margin-top: 8mm !important; display: block !important; font-size: 8pt !important; color: #555 !important; } .footer * { color: #555 !important; } /* ---- 3. the entrance is not a gate ----------------------------------- */ /* Without this, /radar prints its hero and nothing else: the calendar and every signal below the fold are still at the opacity the reveal starts at. Scoped to body.reveal-on to match the rule it is answering. */ body.reveal-on [data-reveal], [data-reveal], .way, .is-revealing .way { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* ---- 4. addresses ---------------------------------------------------- */ /* The artifact route, printed where the status bar would have shown it. Not applied to nav or footer links: those are hidden, and a page full of bracketed URLs is a worse document than one without them. */ .card-link[href]::after { content: " · index.artificenyc.org" attr(href); font-size: 7pt; letter-spacing: 0.02em; color: #666 !important; display: block; margin-top: 2px; word-break: break-all; } /* Prose links keep their address inline. Fragment-only and javascript hrefs resolve to nothing useful on paper, so they are left alone. */ .intro-body a[href^="http"]::after, .rintro a[href^="http"]::after, main p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666 !important; word-break: break-all; } /* ---- the record, when one is open ------------------------------------ */ /* The drawer is position: fixed, which removes it from the print flow entirely — so printing an open artifact produced three pages of the grid and none of the record the reader was looking at. Put it back in the flow, and stand the grid down while it is up: on paper there is no z-axis, so two things cannot occupy the same page the way they do on screen. */ .artifact-drawer:not([hidden]) { position: static !important; display: block !important; inset: auto !important; width: auto !important; height: auto !important; overflow: visible !important; } .artifact-drawer:not([hidden]) .drawer-panel { position: static !important; transform: none !important; opacity: 1 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important; border: 0 !important; /* Block, not flex. The panel is a flex column sized to the viewport, so on paper the plate floated to the middle of a page-tall box with 40mm of white above it and pushed the maker's own description onto a second sheet. A record is one page: plate, code, title, byline, provenance table, description, in that order, stacked. */ display: block !important; flex: none !important; gap: 0 !important; justify-content: flex-start !important; } .artifact-drawer:not([hidden]) .drawer-body { display: block !important; overflow: visible !important; padding: 0 !important; flex: none !important; } .artifact-drawer:not([hidden]) .drawer-figure { max-width: 120mm; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; align-items: flex-start !important; display: block !important; margin: 0 0 6mm !important; padding: 0 !important; } /* The figure reserves a screen-sized box and lets the plate letterbox inside it. On paper that reserved height became 40mm of white between the image and the code that names it, which read as two objects rather than one record. */ .artifact-drawer:not([hidden]) .drawer-figure img { height: auto !important; max-height: 110mm; object-fit: contain !important; display: block; } /* The record's address, composed from the one element that already holds the code. CSS cannot read location, but it does not need to: the route is /a/ and #drawer-code's text is exactly that code, so setting the stem in front of it prints index.artificenyc.org/a/A05 without app.js having to know that paper exists. A printed record that cannot be found again is a photograph of a record. */ .artifact-drawer:not([hidden]) .drawer-code { font-size: 9pt !important; letter-spacing: 0.06em; color: #666 !important; display: block !important; } /* The code is set in tracked caps, which is right for A05 and wrong for the stem in front of it: uppercased and letter-spaced, the address printed as INDEX . ARTIFICENYC . ORG/A/A05, which is not a URL anyone can type. */ .artifact-drawer:not([hidden]) .drawer-code { text-transform: none !important; letter-spacing: normal !important; } .artifact-drawer:not([hidden]) .drawer-code::before { content: "index.artificenyc.org/a/"; } .artifact-drawer:not([hidden]) .drawer-title { font-size: 20pt !important; line-height: 1.15 !important; margin: 2mm 0 1mm !important; } .artifact-drawer:not([hidden]) .drawer-byline { font-size: 10pt !important; margin: 0 0 4mm !important; } /* When a record is open it is the document. The grid it came from is the index, and an index does not print behind the page it points at. */ /* main, not its parts. Hiding the grid and the two intro columns left their container's padding and min-height behind, which printed as 55mm of white above the plate — the record started a third of the way down its own page. When a record is open the page is the record; main is the index it came from, and an index does not print behind the page it points at. */ body:has(.artifact-drawer:not([hidden])) main, body:has(.artifact-drawer:not([hidden])) #empty-state, /* The drawer sits after in the DOM, so on a record print the footer came first and took a sheet of its own with the record pushed to page two. A record is one page; the credit line that belongs on it is the artifact's own provenance table, which the drawer already carries. */ body:has(.artifact-drawer:not([hidden])) .footer { display: none !important; } /* ---- the page plate -------------------------------------------------- */ /* /radar's title is not type — it is engraved into the cover plate, which is the poster frame of a