/* ============================================================================
   Light reading body (theme 0.19.0; Mike, 2026-10-10/11).

   Every page on the reading template (body.sd-longform: guides, topic pages, comparisons, article pages, the
   old landers, hubs; about 165 pages) reads on white, as apple.com mixes dark and light bands. Their content was
   written for a white page (black line art, light inline boxes), so under the dark title band the column,
   "On this page" and the gutters are white; the illustrations sit on the page, centered under the centered
   headings; the CTA band and the module wall after the article stay dark.

   Its own file on purpose: WP Fastest Cache keeps one minified copy per stylesheet path whatever its ?ver, and
   until Cloudflare stops sending pages with a one-year browser cache, clearing those copies leaves returning
   visitors with cached pages pointing at deleted bundles (unstyled pages; Mike saw /features/ like that,
   2026-10-11). A new file needs no clear: site.css stays as it was, so every bundle a cached page names still
   exists. Loaded after site.css (functions.php), so equal selectors here win.
   ========================================================================= */

/* the page under the title band is white */
.sd-longform .sd-entry { background: var(--light-bg); }

/* every reading row takes the light tokens: the same set as site.css's .sd-light, so every rule written for the
   dark ground reads on white without its own light copy */
.sd-longform .sd-entry > :not(.sd-secondary-header-color, .sd-lf-intro) {
	--bg: var(--light-bg); --panel: #F5F5F7; --raise: #FFFFFF; --line: var(--light-line); --line-2: #D2D2D7;
	--text: var(--light-text); --mute: #515154; --faint: #6E6E73; --accent: #0A6FAE; --on-accent: #FFFFFF; --grid-line: transparent;
	--c-blue: var(--accent); --c-void: var(--bg); --c-raise: var(--raise); --c-on-dark: var(--text); --c-mute-dark: var(--mute);
	--c-line-dark: var(--line); --c-line-dark-2: var(--line-2); --c-on-blue: var(--on-accent); --c-paper: var(--bg); --c-tint: var(--panel);
	--c-ink: var(--text); --c-copy: #333336; --c-mute: var(--mute); --c-faint: var(--faint); --c-line: var(--line); --c-line-2: var(--line-2);
	--c-link: var(--accent); --band: var(--accent); --sd-logo-white: var(--text);
	background-color: var(--bg); color: var(--c-copy);
}
/* primary buttons keep the brand fill on white, as in every light band */
.sd-longform .sd-entry > :not(.sd-secondary-header-color, .sd-lf-intro) :is(.sd-btn:not(.sd-btn--quiet), .sd-21btn-primary-l, .sd-21btn-primary-landing, .wp-block-button__link) {
	background: var(--btn-fill); border-color: var(--btn-fill); color: var(--btn-ink) !important;
}
.sd-longform .sd-entry > :not(.sd-secondary-header-color, .sd-lf-intro) :is(.sd-btn:not(.sd-btn--quiet), .sd-21btn-primary-l, .sd-21btn-primary-landing, .wp-block-button__link):hover {
	background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-ink) !important;
}

/* the title band keeps its dark ground on its grid (the page under it is white now) */
.sd-longform .sd-entry > :is(.sd-secondary-header-color, .sd-lf-intro) { background-color: var(--bg); }

/* the illustrations are black line art drawn for a white page: no card, centered in the column (Mike, 2026-10-10);
   site.css keeps the height cap and the phone guard */
.sd-longform .sd-entry .wp-block-image { text-align: center; }
.sd-longform .sd-entry .wp-block-image img { display: block; margin: 0 auto !important; padding: 0; background: none; }