/*
Theme Name: RAR Broadsheet
Theme URI: https://republicansareracists.com
Author: RAR Build Team
Author URI: https://republicansareracists.com
Description: A custom WordPress block theme that renders the site as a metropolitan broadsheet front page, circa 1972, lying on a newsroom desk. Aged newsprint, ink typography, letterpress rules. No cards, no rounded corners, no template dressing.
Version: 1.19.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rar
Tags: news, blog
*/

/* =====================================================================
   RAR BROADSHEET -- BASE LAYER (theme-core)
   Sections:
     1. Tokens (palette custom properties + the vertical rhythm ladder)
     2. Reset and print-appropriate defaults
     3. Ink typography defaults
     4. Links (ink underline, press-harder hover)
     5. Rules (.rar-rule, .rar-rule-oxford)
     6. The paper sheet (.rar-paper)
     7. Justified body copy (.rar-body)
     8. Screen reader text (.screen-reader-text)
   House rules honored here: no border-radius above zero, no em-dash
   characters, palette colors only, no scale-type transforms.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   Short aliases over the WP preset properties emitted by theme.json,
   with hard fallbacks so the base layer works even before global
   styles print. Grain is an inline SVG feTurbulence data-URI (zero
   network requests); the same texture exists as a source asset at
   assets/img/grain.svg.

   THE VERTICAL RHYTHM LADDER (P7, owner ruling 2026-07-27: "Margins
   between paragraphs and other elements may not be newspaper style but
   we need them on this website"). Modern readability wins over 1972
   typographic authenticity wherever the two fight: the ink, paper, type
   and furniture are unchanged, only the vertical spacing loosens.

   The ladder is FIVE steps and it is defined here, once. Every vertical
   gap in running copy on the article side resolves to one of these five
   custom properties; no file may invent a sixth value or hand-set a
   local px gap in the body. All five are drawn from the DESIGN-SYSTEM
   section 3 spacing scale (4 / 8 / 13 / 21 / 26 / 34 / 55).

     --rar-tight   8px   a caption to the image it belongs to; parts of
                         one object that must not read as two.
     --rar-lead   13px   a heading to the line it introduces; a bound
                         pair, deliberately tighter than the paragraph
                         gap so the heading stays attached downward.
     --rar-para   21px   paragraph to paragraph in running body copy.
     --rar-block  34px   running copy to a block object set into it:
                         figure, quotation, list, rebuttal exhibit.
     --rar-section 55px  a section break: crosshead, sources band, the
                         torn slip, the clip-and-share strip.

   26px is deliberately NOT on this ladder. It is the canonical COLUMN
   GAP (DESIGN-SYSTEM section 3) and stays a horizontal measure, so the
   two axes never resolve to the same number by accident.

   Steps are used, not summed: adjacent margins collapse in normal flow,
   so a paragraph's 21px bottom against a figure's 34px top yields 34px,
   never 55px. Every rule below sets symmetric block margins on block
   objects and bottom-only margins on paragraphs precisely so the
   collapse always resolves to the larger of the two neighbours.
   --------------------------------------------------------------------- */
:root {
	--paper: var(--wp--preset--color--paper, #f4efe4);
	--paper-slip: var(--wp--preset--color--paper-slip, #faf6ea);
	--paper-shade: var(--wp--preset--color--paper-shade, #eae3d2);
	--ink: var(--wp--preset--color--ink, #1a1712);
	--red: var(--wp--preset--color--red, #8c1f13);
	--rar-tight: 8px;
	--rar-lead: 13px;
	--rar-para: 21px;
	--rar-block: 34px;
	--rar-section: 55px;
	--rar-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='rargrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23rargrain)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   2. RESET AND PRINT-APPROPRIATE DEFAULTS
   border-radius is reset to zero everywhere; printed matter has no
   rounded corners. (Zero is the one legal value under the build
   contract's banned list.)
   --------------------------------------------------------------------- */
*,
::before,
::after {
	box-sizing: border-box;
	border-radius: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	/* Canvas behind the sheet: ink-dark, so the paper reads as the lit
	   subject before desk.css paints the newsdesk photograph over it.
	   (html carries no background, so this propagates to the canvas and
	   stays BEHIND the fixed z-index -1 desk layer.) */
	background-color: var(--ink);
	color: var(--ink);
	font-family: var(--wp--preset--font-family--old-standard-tt, "Old Standard TT", Georgia, serif);
	font-size: 17px;
	line-height: 1.55;
}

@media (max-width: 1100px) {

	/* Below 1100px the desk is unloaded and the paper fills the
	   viewport; the canvas itself becomes paper. */
	body {
		background-color: var(--paper);
	}
}

/* Base reset only. Figures inside running copy take their block margins
   from the rhythm ladder (components-article.css section "VERTICAL
   RHYTHM"); front-page figures take theirs from their brick or from the
   lead band (components-front.css). This zero is what an uncovered
   figure falls back to, and it also overrides core's
   :where(figure){margin:0 0 1em} so no gap arrives unasked. */
figure {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
	/* Every printed image carries a 1px ink border (SPEC section 9).
	   Desk props are not printed matter; desk.css overrides this for
	   .rar-prop imagery. */
	border: 1px solid var(--ink);
}

figcaption {
	font-family: var(--wp--preset--font-family--courier-prime, "Courier Prime", "Courier New", monospace);
	font-size: 13px;
}

::selection {
	background: var(--ink);
	color: var(--paper);
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   3. INK TYPOGRAPHY DEFAULTS
   --------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.35em;
	color: var(--ink);
	font-family: var(--wp--preset--font-family--libre-caslon-display, "Libre Caslon Display", Georgia, serif);
	font-weight: 700;
	line-height: 1;
}

/* Paragraph rhythm, bottom-only so adjacent margins collapse to the
   larger neighbour rather than summing. In practice core's layout rule
   (:root :where(.is-layout-flow) > *) outranks this bare type selector
   for block-level layout children, so this value governs paragraphs in
   hand-written markup and inside components; the article body's own
   paragraph rhythm is set at .rar-body p in components-article.css. */
p {
	margin: 0 0 var(--rar-para);
}

/* ---------------------------------------------------------------------
   4. LINKS
   Ink underline, 1px at rest, 2px on hover and keyboard focus, as if
   the ink were pressed harder. Never a color change.
   --------------------------------------------------------------------- */
a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------
   5. RULES
   Hairline: 1px ink. Oxford rule: 3px rule, 3px gap, 1px rule
   (border-top plus an absolutely positioned ::after; with the global
   border-box sizing, height 7px leaves exactly a 3px gap).
   .rar-rule-oxford below is THE single canonical recipe (DESIGN-SYSTEM
   section 3 "implement once"; Gate A dedupe). The variants in
   components-article.css and components-masthead.css delegate height
   and the ::after lower rule to this class; they keep only a matching
   3px border-top (specificity armor over core wp-block-separator
   styles, whose print order is not guaranteed relative to this file)
   plus separator neutralization and local width/spacing.
   --------------------------------------------------------------------- */
hr,
.rar-rule {
	height: 0;
	margin: 13px 0;
	border: 0;
	border-top: 1px solid var(--ink);
}

.rar-rule-oxford {
	position: relative;
	height: 7px;
	margin: 8px 0;
	border: 0;
	border-top: 3px solid var(--ink);
}

.rar-rule-oxford::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 0;
	right: 0;
	border-top: 1px solid var(--ink);
}

/* ---------------------------------------------------------------------
   6. THE PAPER SHEET
   The broadsheet itself, sitting on the desk. The sheet surface
   (paper tone plus grain) lives on ::before so the deckle mask can
   clip the paper without clipping the content.

   TWO BUGS FIXED HERE, 2026-07-28 (owner-reported, both visible on the
   Jim Crow dossier).

   1. THE TEAR SCALED WITH PAGE LENGTH. deckle-mask.svg was one
      1200x2400 mask applied with mask-size: 100% 100%, so it stretched
      to whatever the page height happened to be. Its wander is 0.3-2px
      in its own coordinates, which is right at 2400 tall and wrong
      everywhere else: a 26,000px dossier scales it 10.8x and a torn
      edge becomes a 13px sawtooth. It is now two FIXED-HEIGHT strips,
      deckle-top.svg and deckle-bottom.svg at 24px, unioned with a solid
      middle layer, so the tear is the same depth on every page at every
      length. (mask-composite's initial value is `add`, so the union
      holds even where the property itself is unsupported.)

   2. THE SHADOWS DREW A RECTANGLE THE PAPER NO LONGER FILLED. The mask
      was on ::before; the box-shadows were on .rar-paper, which is an
      unmasked box. So the two hard offset layers traced a crisp
      rectangle past the torn edge -- the vertical line down the right
      side in the owner's screenshot. The original comment here called
      that deliberate ("without clipping the sheet's shadows"); it was
      the bug. The page-stack layer moved to ::after, which carries the
      same mask and therefore the same torn silhouette. Only the soft
      grounding shadow stays on the box, because a shadow has to fall
      OUTSIDE the shape to ground it and mask would eat it -- at 30px of
      blur against a 24px tear it reads as diffuse contact, not an edge.
   --------------------------------------------------------------------- */
.rar-paper {
	position: relative;
	z-index: 0;
	max-width: 1200px;
	margin: 34px auto 55px;
	padding: 34px 34px 55px;
	/* Grounding shadow only. The page stack is ::after, masked. */
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45);
}

/* The three mask layers, shared by the sheet and its stack. Top strip,
   bottom strip, and a solid middle that overlaps both by 1px so no
   hairline of paper can drop out between them. */
.rar-paper::before,
.rar-paper::after {
	-webkit-mask-image:
		url(assets/img/deckle-top.svg),
		url(assets/img/deckle-bottom.svg),
		linear-gradient(#000, #000);
	mask-image:
		url(assets/img/deckle-top.svg),
		url(assets/img/deckle-bottom.svg),
		linear-gradient(#000, #000);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 24px, 100% 24px, 100% calc(100% - 46px);
	mask-size: 100% 24px, 100% 24px, 100% calc(100% - 46px);
	-webkit-mask-position: 0 0, 0 100%, 0 23px;
	mask-position: 0 0, 0 100%, 0 23px;
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

.rar-paper::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--paper);
	background-image: var(--rar-grain);
}

/* The page beneath the front sheet: one offset layer in paper-shade,
   torn to the same outline. This is what the old hard box-shadows were
   for, done in a way that follows the tear. */
.rar-paper::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	transform: translate(3px, 4px);
	background-color: var(--paper-shade);
}

@media (max-width: 1100px) {

	/* Edge to edge below 1100px: no desk, no deckle, no shadows;
	   the paper IS the site. */
	.rar-paper {
		max-width: none;
		margin: 0;
		padding: 21px 13px 34px;
		box-shadow: none;
	}

	.rar-paper::before,
	.rar-paper::after {
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* No desk below 1100px, so nothing for a page stack to sit on. */
	.rar-paper::after {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   7. JUSTIFIED BODY COPY
   Ragged-right body text is a blog tell; the broadsheet justifies
   and hyphenates. Drop caps are applied by components-article.css.
   --------------------------------------------------------------------- */
.rar-body {
	font-family: var(--wp--preset--font-family--old-standard-tt, "Old Standard TT", Georgia, serif);
	font-size: 17px;
	line-height: 1.55;
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
}

/* ---------------------------------------------------------------------
   8. SCREEN READER TEXT
   Standard WP visually-hidden recipe, clip-path form, defined here so
   the clip-share live region (and any skip link) never depends on core
   block styles being enqueued. The classic recipe marks position and
   word-wrap as !important; the build contract reserves !important for
   the reduced-motion kill block, and nothing in this theme repositions
   .screen-reader-text, so the plain declarations suffice. The :focus
   reveal is defense in depth for skip links; the live region itself is
   never focusable.
   --------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	word-wrap: normal;
}

.screen-reader-text:focus {
	position: absolute;
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 13px;
	clip-path: none;
	background-color: var(--paper);
	color: var(--ink);
	outline: 2px solid var(--ink);
}