/* -------------------------------------------------------------------
 * RAR Press Kit -- house ad slot.
 *
 * A 1972 broadsheet framed an advertisement with a rule and a small
 * label, and it never pretended the ad was editorial. That is the whole
 * design: a hairline box, a Courier ADVERTISEMENT label in caps, ink on
 * paper. No card, no shadow, no radius, no fill.
 *
 * The slot reserves its creative's exact box via the --rar-ad-w and
 * --rar-ad-h custom properties printed by rar_ad_slot(), so a late or
 * failed creative cannot shift the column it sits in.
 * ------------------------------------------------------------------- */

.rar-ad {
	display: block;
	box-sizing: content-box;
	margin: 34px auto;
	padding: 8px;
	border: 1px solid var(--rar-ink, #1a1712);
	max-width: 100%;
	text-align: center;
}

.rar-ad-label {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--rar-ink, #1a1712);
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rar-ink, #1a1712);
}

/* Reserve the creative's box so nothing reflows when it loads. */
.rar-ad > a,
.rar-ad > img {
	display: block;
	margin: 0 auto;
}

.rar-ad img {
	display: block;
	width: 100%;
	max-width: var(--rar-ad-w, 300px);
	height: auto;
	aspect-ratio: var(--rar-ad-w, 300) / var(--rar-ad-h, 250);
	/* Advertising is not editorial: no halftone, no grayscale, and the
	   global 1px ink border on img would double the slot's own rule. */
	border: 0;
	filter: none;
}

/* The leaderboard spans the measure; the tower and rectangle sit in a
   column, so they never exceed their gutter at narrow widths. */
.rar-ad--728x90 {
	max-width: 744px;
}

.rar-ad--300x250 {
	max-width: 316px;
}

.rar-ad--160x600 {
	max-width: 176px;
}

@media (max-width: 700px) {
	.rar-ad {
		margin: 26px auto;
	}

	/* A 600px tower on a phone is a wall. Drop it rather than squeeze it. */
	.rar-ad--160x600 {
		display: none;
	}
}

/* -------------------------------------------------------------------
 * SPUTNIK SIGNAL, set as a footer advertisement.
 *
 * Same furniture as the house slot: a ruled band and a Courier
 * ADVERTISEMENT label, sitting above the copyright line.
 *
 * The newspaper treatment DOES reach this one. Signal fills the slot
 * with markup we do not control and cannot select into, but a CSS
 * filter applies to a rendered element and everything inside it,
 * including a cross-origin iframe: the browser composites the frame
 * first, then filters the result. So the halftone screen and the colour
 * snap work on an ad exactly as they do on a press photo, without
 * reaching across the origin boundary at all.
 *
 * Deliberately gentler than the editorial halftone. A photograph on
 * this site is printed matter; an advertisement is a paid insert, and
 * screening it into near-illegibility would be taking the joke out on
 * the advertiser. It reads as newsprint at rest and snaps clean on
 * hover or keyboard focus.
 * ------------------------------------------------------------------- */

.rar-signal {
	margin: 34px auto 21px;
	padding-top: 13px;
	border-top: 1px solid var(--rar-ink, #1a1712);
	max-width: 100%;
	text-align: center;
}

.rar-signal-label {
	margin: 0 0 13px;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rar-ink, #1a1712);
}

/* -------------------------------------------------------------------
 * WHERE THE SCREEN GOES, AND WHY IT MOVED (owner report, 2026-07-28:
 * "the effect on the ads is being disrupted by the newspaper effect as
 * it goes outside the image").
 *
 * Correct, and the cause was that the screen was on the wrong element.
 *
 * The outer .signal-slot is OUR div. It is a container, and it is
 * nothing like the size of the advert -- measured on the live footer,
 * the slot was 841 x 285 around a 300 x 250 creative. A screen at
 * inset: 0 on that box therefore printed a dot pattern over 540px of
 * bare newsprint either side of the ad, and over Signal's own ADS BY
 * SIGNAL attribution line beneath it, which is what made that line look
 * broken rather than small.
 *
 * Signal's injected markup, read off the page rather than guessed at:
 *
 *   div.signal-slot                     <- ours, a container
 *     div.signal-slot__slot             <- THEIRS, sized to the creative
 *       a > img                            with inline width/height
 *     a.signal-slot__signal             <- THEIRS, the attribution line
 *
 * .signal-slot__slot carries `position: relative; width: Npx;
 * height: Npx` as an inline style written by their script, sized to
 * whatever creative was served. So the screen and the grade go there.
 * inset: 0 on that element is the advert's exact box at every size the
 * network serves -- 250x360 on desktop, 250x250 on a phone, 300x250 in
 * the footer -- with no dimension hardcoded here and nothing to update
 * when a size changes. It is also a div rather than an iframe, so it
 * can carry a pseudo-element at all.
 *
 * The attribution line is deliberately left un-screened and un-graded.
 * It is Signal's disclosure, not our editorial furniture, and it was
 * never ours to print a dot screen over.
 * ------------------------------------------------------------------- */

.signal-slot {
	display: inline-block;
	max-width: 100%;
	isolation: isolate;
	border: 1px solid var(--rar-ink, #1a1712);
	/* A printed advert sat inside its rule box, never flush against it. */
	padding: 10px;
	line-height: 0;
}

/* THE HALFTONE STAGE: the creative's own box, and only that.
   position: relative is already set inline by Signal's script; it is
   restated here so the overlay still anchors correctly if they ever
   stop writing it. */
.signal-slot__slot {
	position: relative;
	margin-inline: auto;
	/* Lighter than the editorial screen (grayscale .85, not 1) so the
	   creative stays readable at rest. An advertisement is a paid
	   insert, not printed matter we are entitled to bury. */
	filter: grayscale(0.85) contrast(1.06) sepia(0.06);
	transition: filter 0.45s ease;
}

/* The dot screen, laid over the creative the same way a press cut
   carries it. pointer-events none so it never eats a click on the ad. */
.signal-slot__slot::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.5;
	transition: opacity 0.45s ease;
	background-image: radial-gradient(circle, rgba(26, 23, 18, 0.55) 0.5px, transparent 0.6px);
	background-size: 3px 3px;
}

/* Whatever shape the creative arrives in, centre it and keep it inside
   the column. An iframe is replaced content and needs the same
   treatment as an image. */
.signal-slot iframe,
.signal-slot img,
.signal-slot canvas,
.signal-slot video {
	display: block;
	margin-inline: auto;
	max-width: 100%;
}

/* Signal's attribution line: readable, unscreened, out of the way. */
.signal-slot__signal {
	display: block;
	margin-top: 6px;
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--rar-ink, #1a1712);
	opacity: 0.65;
}

/* The snap: fast in, slow back, same asymmetry as the press photos.
   Latched from the outer slot so the pointer only has to reach the
   advert's container, not the creative box itself. */
@media (hover: hover) {
	.signal-slot:hover .signal-slot__slot {
		filter: none;
		transition: filter 0.16s ease-out;
	}

	.signal-slot:hover .signal-slot__slot::after {
		opacity: 0;
		transition: opacity 0.16s ease-out;
	}
}

.signal-slot:focus-within .signal-slot__slot {
	filter: none;
	transition: filter 0.16s ease-out;
}

.signal-slot:focus-within .signal-slot__slot::after {
	opacity: 0;
	transition: opacity 0.16s ease-out;
}

/* -------------------------------------------------------------------
 * SIGNAL IN THE WIRE FEED.
 *
 * The same advertisement, set as a brick rather than a footer band: it
 * stands in one masonry column between two stories, so it closes with
 * the same 1px hairline every wire teaser closes with and carries no
 * rule above it. Everything else -- the halftone screen, the colour
 * snap, the Courier label -- is inherited from .rar-signal and
 * .signal-slot above and is not restated.
 *
 * THE RESERVED BOX IS LOAD-BEARING, not decoration. main.js decides
 * which column this brick lands in by measuring heights at layout time,
 * and Signal fills the slot afterwards. An unreserved slot would be
 * measured at nearly zero, take a column it should not have taken, and
 * then grow -- so the reservation is what keeps the placement honest as
 * well as what keeps the column from jumping under the reader. The
 * measured sizes and the breakpoint are documented at the min-height
 * rules below.
 * ------------------------------------------------------------------- */

.rar-wire-slot {
	list-style: none;
}

/* NO BOX (owner directive, 2026-07-28: "remove the containers around the
   in-column ads, just center the ad").
   The footer band keeps its rule and its frame -- it sits alone at the
   foot of the sheet and needs an edge to be a thing at all. A slot in a
   column does not: it already has a hairline column rule to its left and
   a story above and below it, so a frame around a frame inside a frame
   was three boxes deep. The creative arrives with its own border and its
   own background; anything this stylesheet drew around it was a second
   edge around a finished object.

   The ADVERTISEMENT label STAYS. It is not a container, it is a
   disclosure -- the one part of an ad slot a newspaper never dropped and
   the FTC still expects. It is the smallest type on the sheet and it
   costs the advertiser nothing.

   The halftone screen stays too -- it lives on .signal-slot__slot now,
   so it prints on the creative and stops at its edge, which is what the
   owner reported it was failing to do. The ad still reads as newsprint
   at rest and snaps clean on hover, which was the point of putting
   Signal in this paper rather than beside it. */
.rar-signal--wire {
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

.rar-signal--wire .rar-signal-label {
	margin: 0 0 8px;
}

/* inline-block shrink-wraps the slot to the creative; text-align on the
   parent centres it in the column. The screen no longer depends on this
   -- it sits on Signal's own .signal-slot__slot box now -- but a
   shrink-wrapped slot still keeps the click target off the newsprint
   either side of the advert. */
.rar-signal--wire .signal-slot {
	display: inline-block;
	border: 0;
	padding: 0;
	min-height: 250px;
}

/* THE RESERVATION, sized to what the network actually serves into this
   column: 250x360 on a desktop sheet, 250x250 on a phone (owner,
   2026-07-28). The old flat 250px under-reserved the desktop advert by
   110px, which is exactly the failure the reservation exists to prevent
   -- main.js would measure the brick 110px short, hand it a column it
   should not have had, and then the column would grow under the reader
   when the creative arrived.
   700px is the theme's own hinge between the phone stack and the sheet,
   not a guess at Signal's breakpoint; if the network turns out to switch
   somewhere else, over-reserving leaves a little dead air under the ad
   and under-reserving moves the page, so this errs tall on purpose. */
@media (min-width: 700px) {
	.rar-signal--wire .signal-slot {
		min-height: 360px;
	}
}

/* An advertiser is entitled to be seen as designed if the reader has
   asked for less motion; hold it clean rather than animating. */
@media (prefers-reduced-motion: reduce) {
	.signal-slot__slot,
	.signal-slot__slot::after {
		transition: none;
	}
}