/*
 Theme Name:   Dagensanalys
 Theme URI:    https://www.dagensanalys.se
 Description:  GeneratePress child theme for Dagensanalys.se. Dark editorial treatment derived from the Recap reference, carrying the existing Dagensanalys amber.
 Author:       Dagensanalys.se
 Template:     generatepress
 Version:      4.7.0
 Text Domain:  dagensanalys
*/

/* =========================================================================
   SCOPE
   GeneratePress loads this automatically, after the parent stylesheet.
   Global colours, container width and base font sizes live in the
   Customizer — see README.md. This file is the editorial layer.

   Typefaces are self-hosted from fonts/ and declared below.
   ========================================================================= */


/* -------------------------------------------------------------------------
   0. Typefaces — self-hosted

   Served from the theme, not fonts.gstatic.com. Two reasons: it removes a
   third-party connection on every page load (the usual GDPR objection to
   Google Fonts), and it drops the DNS + TLS handshake to another origin.

   Variable WOFF2, latin + latin-ext only — the other eight subsets Google
   offers (cyrillic, greek, vietnamese) are dead weight for Swedish. Because
   each face declares a unicode-range, a browser only fetches latin-ext if a
   character from that range actually appears on the page, so the common case
   costs one file per family.

   Licences: OFL, see fonts/OFL-*.txt. Self-hosting is expressly permitted.
   ------------------------------------------------------------------------- */

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

:root {
	--da-font-display: "Bricolage Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--da-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--da-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Ground and ink. Near-black rather than pure black: pure #000 makes
	   white body text vibrate at long reading lengths. */
	--da-bg:        #161616;
	--da-surface:   #1c1c1c;
	--da-elevated:  #232323;
	--da-pill:      #3e3e3e;

	--da-ink:       #ffffff;
	--da-ink-soft:  #cdcdcd;
	--da-ink-faint: #8a8a8a;

	--da-rule:      #343434;
	--da-rule-soft: #262626;

	/* Amber carried over from the current site — the one piece of the old
	   identity worth keeping. Reads as a signal on near-black, and needs
	   dark text on top of it, never white. */
	--da-accent:     #fdc926;
	--da-accent-dim: #d9a911;
	--da-accent-ink: #161616;

	/* Type scale. Display tracking is tight and negative, per the reference. */
	--da-text-base: 1.125rem;      /* 18px article body */
	--da-text-lead: clamp(1.1875rem, 1.06rem + 0.6vw, 1.4375rem);
	--da-text-sm:   0.9375rem;
	--da-text-xs:   0.875rem;      /* 14px — meta, eyebrows */

	--da-h1: clamp(2.125rem, 1.35rem + 3.4vw, 3.375rem);   /* → 54px */
	--da-h2: clamp(1.5rem, 1.2rem + 1.35vw, 2rem);
	--da-h3: clamp(1.25rem, 1.11rem + 0.62vw, 1.5rem);
	--da-h4: 1.125rem;

	--da-track-display: -0.045em;
	--da-leading-display: 1.2;
	--da-leading-body: 1.6;

	--da-measure: 68ch;
	--da-radius: 12px;
	--da-radius-sm: 8px;
	--da-space: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);

	/* Card growth on wide displays. The card box grows with --da-card-scale
	   in full; its type grows at roughly 40% of that rate, because text
	   scaled 1:1 with its container stops looking like a card and starts
	   looking like a mistake. */
	--da-card-scale: 1;
	--da-card-pad:   calc(1.15rem * var(--da-card-scale));
	--da-card-title: calc(1.1875rem * (0.6 + 0.4 * var(--da-card-scale)));
	--da-card-body:  calc(0.9375rem * (0.7 + 0.3 * var(--da-card-scale)));

	/* ---------------------------------------------------------------
	   GeneratePress token bridge.

	   GP is entirely custom-property driven — it paints body, header,
	   nav, containers and links from these seven variables, e.g.
	     body { background-color: var(--base-2); color: var(--contrast); }
	     .separate-containers .inside-article { background-color: var(--base-3); }

	   Overriding GP's *rules* is a losing game: .separate-containers
	   .inside-article (0,2,0) outguns .inside-article (0,1,0). Redefining
	   its *tokens* is the clean fix. This stylesheet loads after GP's
	   inline block, so at equal specificity these win.

	   Setting them here rather than in the Customizer keeps the palette
	   in the theme, where it is versioned and reviewable.
	   --------------------------------------------------------------- */

	--contrast:   #ffffff;   /* primary text, headings */
	--contrast-2: #cdcdcd;   /* body copy */
	--contrast-3: #8a8a8a;   /* meta, captions */
	--base:       #232323;   /* hovers, subtle fills */
	--base-2:     #161616;   /* page ground */
	--base-3:     #161616;   /* header, nav, article containers */
	--accent:     #fdc926;   /* links */
}


/* -------------------------------------------------------------------------
   1b. Page gutters

   GeneratePress serves .grid-container{padding:0 20px}, but the computed
   value on #page is 0 at every width — so content sits flush against both
   screen edges. On desktop the 1200px max-width hides it, because the spare
   viewport either side looks like a margin. On a phone there is no spare
   viewport and the text runs into the bezel.

   Set here rather than in the Customizer so the gutter is part of the theme
   and cannot be zeroed by a setting nobody remembers changing.
   ------------------------------------------------------------------------- */

#page.grid-container {
	padding-left: clamp(1.15rem, 0.75rem + 1.6vw, 2.25rem);
	padding-right: clamp(1.15rem, 0.75rem + 1.6vw, 2.25rem);
}

/* The header and footer are inside #page, so they inherit the same gutter.
   Zero their own padding so it is never applied twice. */
#page > .site-header .inside-header.grid-container,
#page .site-footer .inside-site-info.grid-container {
	padding-left: 0;
	padding-right: 0;
}


/* -------------------------------------------------------------------------
   2. Ground
   ------------------------------------------------------------------------- */

body {
	background-color: var(--da-bg);
	color: var(--da-ink-soft);
	font-family: var(--da-font-body);
	font-feature-settings: "cv05" 1, "ss01" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* GeneratePress paints several of its own surfaces. Keep them on the ground
   so no default white slabs survive behind the content. */
.site-content,
.site-main,
.inside-article,
.sidebar .widget,
.site-footer,
.footer-widgets,
.site-header,
.main-navigation,
.comments-area {
	background-color: transparent;
	color: inherit;
}

/* A long Swedish compound must never widen the page on a phone. */
body,
.entry-content {
	overflow-wrap: break-word;
	hyphens: auto;
}

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--da-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* -------------------------------------------------------------------------
   3. Display type
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title {
	font-family: var(--da-font-display);
	font-weight: 600;
	font-optical-sizing: auto;
	line-height: var(--da-leading-display);
	letter-spacing: var(--da-track-display);
	color: var(--da-ink);
	text-wrap: balance;
}

/* Headline measure sized from the actual archive, not by eye. Across 844
   titles the median is 50 characters and the 90th percentile is 69, so the
   original 20ch cap put 73% of headlines onto three or more lines — the
   squeezed look. At 32ch, 83% land on two. */
.single .entry-title {
	font-size: var(--da-h1);
	margin: 0 0 0.5em;
	max-width: 32ch;
}

.entry-content h2 {
	font-size: var(--da-h2);
	margin-top: 1.9em;
	margin-bottom: 0.5em;
}

.entry-content h3 {
	font-size: var(--da-h3);
	margin-top: 1.7em;
	margin-bottom: 0.45em;
	letter-spacing: -0.03em;
}

.entry-content h4 {
	font-size: var(--da-h4);
	font-family: var(--da-font-body);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 1.6em;
	margin-bottom: 0.4em;
	color: var(--da-ink);
}


/* -------------------------------------------------------------------------
   4. Article body
   ------------------------------------------------------------------------- */

.entry-content {
	font-size: var(--da-text-base);
	line-height: var(--da-leading-body);
	color: var(--da-ink-soft);
}

/* Constrain the measure without boxing in full-bleed media. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > blockquote,
.entry-content > .wp-block-table,
.entry-content > figure.wp-block-table {
	max-width: var(--da-measure);
}

.entry-content p { margin-bottom: 1.4em; }

.entry-content strong,
.entry-content b {
	color: var(--da-ink);
	font-weight: 600;
}

/* Lead paragraph. Add class="da-lead", or lead with a "Kort svar:" bold run. */
.entry-content .da-lead,
.entry-content > p.has-large-font-size:first-of-type {
	font-size: var(--da-text-lead);
	line-height: 1.5;
	color: var(--da-ink);
	margin-bottom: 1.5em;
}

.entry-content a {
	color: var(--da-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.19em;
	text-decoration-color: var(--da-accent);
	transition: color 130ms ease, text-decoration-color 130ms ease;
}

.entry-content a:hover {
	color: var(--da-accent);
	text-decoration-color: var(--da-accent);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.3em;
	margin-bottom: 1.4em;
}

.entry-content li { margin-bottom: 0.45em; }
.entry-content li::marker { color: var(--da-accent); }

.entry-content blockquote {
	margin: 1.9em 0;
	padding: 1.15em 1.4em;
	background: var(--da-surface);
	border: 0;
	border-left: 3px solid var(--da-accent);
	border-radius: 0 var(--da-radius-sm) var(--da-radius-sm) 0;
	font-family: var(--da-font-display);
	font-size: 1.0625em;
	font-weight: 500;
	font-style: normal;
	letter-spacing: -0.02em;
	line-height: 1.45;
	color: var(--da-ink);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content code,
.entry-content kbd {
	font-family: var(--da-font-mono);
	font-size: 0.87em;
	background: var(--da-elevated);
	border: 1px solid var(--da-rule);
	border-radius: 5px;
	padding: 0.1em 0.36em;
	color: var(--da-ink);
}

.entry-content pre {
	font-family: var(--da-font-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	background: var(--da-surface);
	border: 1px solid var(--da-rule);
	border-radius: var(--da-radius-sm);
	padding: 1.05rem 1.2rem;
	overflow-x: auto;
	margin-bottom: 1.6em;
	color: var(--da-ink-soft);
}

.entry-content pre code {
	background: none;
	border: 0;
	padding: 0;
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--da-rule);
	margin: 2.4em 0;
	max-width: var(--da-measure);
}


/* ---- Ad disclosure on sponsored posts ------------------------------------

   Solid accent rather than a tinted panel. This is a legal disclosure under
   marknadsföringslagen 9 § (reklamidentifiering), so it should read as a
   notice the eye cannot skim past, not as a decorative callout. Dark ink on
   the accent yellow clears WCAG AA comfortably.

   The measure is set here rather than in the list above, because that list
   enumerates the tags the block editor emits and this element is injected by
   the theme. Matching it keeps the box aligned with the body text instead of
   spanning the full content column.
   -------------------------------------------------------------------------- */

.entry-content > .da-ad-notice {
	max-width: var(--da-measure);
	margin: 0 0 1.9em;
	padding: 0.85rem 1.15rem;
	background: var(--da-accent);
	color: var(--da-accent-ink);
	border-radius: var(--da-radius-sm);
	font-family: var(--da-font-body);
	font-size: var(--da-text-sm);
	line-height: 1.5;
}

.entry-content > .da-ad-notice strong {
	font-weight: 700;
	color: inherit;
}


/* -------------------------------------------------------------------------
   5. Media
   ------------------------------------------------------------------------- */

.entry-content img,
.entry-content video,
.entry-content iframe,
.post-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--da-radius);
}

/* GeneratePress wraps the featured image differently depending on template:
   .post-image on archives (featured-images.php:37) but
   .featured-image.page-header-image-single on single posts (line 83). Only
   the first was covered above, which is why article hero images stayed
   square. The wrapper is rounded and clipped rather than the <img>, so the
   corners hold even when a caption or link sits inside it. */
.featured-image,
.page-header-image,
.page-header-image-single {
	overflow: hidden;
	border-radius: var(--da-radius);
	line-height: 0;          /* kill the inline-image descender gap */
	margin-bottom: var(--da-space);
}

.featured-image img,
.page-header-image img,
.page-header-image-single img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--da-radius);
}

.entry-content figure { margin: 1.9em 0; }

.entry-content figcaption,
.entry-content .wp-caption-text {
	font-size: var(--da-text-xs);
	line-height: 1.5;
	color: var(--da-ink-faint);
	margin-top: 0.65em;
	max-width: var(--da-measure);
}

/* Wide content scrolls inside itself; the page body never moves sideways. */
.entry-content .wp-block-table,
.entry-content .da-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--da-text-sm);
	margin-bottom: 1.7em;
}

.entry-content th,
.entry-content td {
	padding: 0.65em 0.8em;
	border-bottom: 1px solid var(--da-rule);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	font-family: var(--da-font-body);
	font-weight: 600;
	font-size: var(--da-text-xs);
	color: var(--da-ink);
	border-bottom-color: var(--da-ink-faint);
}

.entry-content tbody tr:hover { background: var(--da-surface); }


/* -------------------------------------------------------------------------
   6. Meta and eyebrows
   ------------------------------------------------------------------------- */

.entry-meta {
	font-family: var(--da-font-body);
	font-size: var(--da-text-xs);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.5;
	color: var(--da-ink-faint);
}

.entry-meta a {
	color: var(--da-ink-soft);
	text-decoration: none;
}

.entry-meta a:hover {
	color: var(--da-accent);
}

.single .entry-header .entry-meta {
	margin-top: 0.6em;
	padding-bottom: 1.2em;
	border-bottom: 1px solid var(--da-rule);
}

.da-updated {
	font-size: var(--da-text-xs);
	color: var(--da-ink-faint);
	margin: 0.55em 0 0;
}

/* Category eyebrow — the small label above a card or article title. */
.entry-meta .cat-links a,
.da-eyebrow {
	display: inline-block;
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--da-accent);
	text-decoration: none;
}


/* -------------------------------------------------------------------------
   7. Archives — card grid
   ------------------------------------------------------------------------- */

.page-header {
	margin-bottom: var(--da-space);
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--da-rule);
}

.page-header .page-title {
	font-size: var(--da-h2);
	margin: 0 0 0.3em;
}

.page-header .taxonomy-description,
.page-header .author-info {
	font-size: var(--da-text-sm);
	line-height: 1.6;
	color: var(--da-ink-faint);
	max-width: var(--da-measure);
}

/* ---- masthead: standfirst above the homepage grid ---------------------- */

.da-masthead {
	grid-column: 1 / -1;   /* works whether GP places it in or before the grid */
	max-width: 62ch;
	margin: 0 0 clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
	padding-bottom: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	border-bottom: 1px solid var(--da-rule);
}

.da-masthead__eyebrow {
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--da-accent);
	margin: 0 0 0.85rem;
}

.da-masthead__title {
	font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.05em;
	color: var(--da-ink);
	margin: 0 0 0.6rem;
	text-wrap: balance;
}

.da-masthead__lead {
	font-size: var(--da-text-lead);
	line-height: 1.5;
	color: var(--da-ink-soft);
	margin: 0 0 1.5rem;
	max-width: 52ch;
}

.da-masthead__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--da-text-xs);
	color: var(--da-ink-faint);
}

.da-masthead__facts li::marker { content: none; }

.da-masthead__facts span {
	color: var(--da-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---- category buttons -------------------------------------------------- */

/* Output alongside the masthead, then ordered below the hero. Both are grid
   items of .site-main, so `order` alone does the placement — no template
   override, no second loop. */
.da-cats {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0.25rem;
}

.da-cats__label {
	font-family: var(--da-font-body);
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--da-ink-faint);
	margin: 0 0 0.9rem;
}

.da-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.da-cats__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.95rem;
	background: var(--da-surface);
	border: 1px solid var(--da-rule);
	border-radius: 999px;
	color: var(--da-ink-soft);
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color 140ms ease, border-color 140ms ease,
	            background-color 140ms ease, transform 140ms ease;
}

.da-cats__icon {
	flex: none;
	color: var(--da-accent);
	transition: color 140ms ease;
}

.da-cats__count {
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	color: var(--da-ink-faint);
	transition: color 140ms ease;
}

.da-cats__pill:hover,
.da-cats__pill:focus-visible {
	color: var(--da-accent-ink);
	background: var(--da-accent);
	border-color: var(--da-accent);
	transform: translateY(-1px);
}

.da-cats__pill:hover .da-cats__icon,
.da-cats__pill:focus-visible .da-cats__icon,
.da-cats__pill:hover .da-cats__count,
.da-cats__pill:focus-visible .da-cats__count {
	color: var(--da-accent-ink);
}

/* On a phone the row scrolls sideways instead of stacking into a wall. */
@media (max-width: 600px) {
	.da-cats__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.4rem;
		scrollbar-width: none;
	}

	.da-cats__list::-webkit-scrollbar { display: none; }
	.da-cats__list > li { scroll-snap-align: start; }
}

/* ---- grid -------------------------------------------------------------- */

/* Grid applies to post lists only, never to the single-post template.
   min() keeps a single column from overflowing a 320px phone. */
.archive .site-main,
.blog .site-main,
.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.5rem, 1.2rem + 1.1vw, 2.5rem) clamp(1.25rem, 1rem + 0.9vw, 2rem);
	align-items: start;
}

/* Three across once there is room for it. */
@media (min-width: 1024px) {
	.archive .site-main,
	.blog .site-main,
	.search-results .site-main {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* On a wide display, let the page breathe and scale the cards up with it
   rather than leaving three narrow columns marooned in white space. */
@media (min-width: 1500px) {
	.blog #page.grid-container,
	.archive #page.grid-container {
		max-width: 1560px;
	}

	.blog .site-main,
	.archive .site-main,
	.search-results .site-main {
		--da-card-scale: 1.5;
	}
}

/* ---- reading order of the homepage grid --------------------------------- */

/* The masthead and the category row are both emitted before the loop, so
   `order` does the placement and no template needs overriding.

   DOM order   : masthead → buttons → posts   (sensible for screen readers)
   Visual order: masthead → 2 spotlights → buttons → grid

   .da-masthead and .da-cats are not <article>, so :nth-of-type(-n + 2)
   counts posts only and lands on the two newest.

   Scoped with :not(.paged) so page 2 onward is a plain 3-up grid, matching
   the masthead and buttons, which PHP already limits to page one. */
.blog .site-main > .da-masthead { order: -3; }
.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) { order: -2; }
.blog .site-main > .da-cats { order: -1; }


/* ---- spotlight: the two newest posts ------------------------------------ */

/* Two large cards can't sit side by side in a 3-column grid — each would need
   1.5 columns. So at desktop the grid becomes 6 columns: spotlights span 3
   (two across), everything else spans 2 (three across). Same visual rhythm,
   arithmetic that actually works. */
@media (min-width: 1024px) {
	.blog .site-main {
		grid-template-columns: repeat(6, 1fr);
	}

	.blog .site-main > article {
		grid-column: span 2;
	}

	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) {
		grid-column: span 3;
	}
}

/* Between phone and desktop there isn't room for two spotlights abreast, so
   they stack full width and the rest stay 2-up. */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) {
		grid-column: 1 / -1;
	}
}

/* A spotlight is the same card, scaled up: taller image, bigger type. Keeping
   the structure identical means it degrades exactly like the others when a
   post has no featured image. */
@media (min-width: 640px) {
	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .post-image img {
		aspect-ratio: 16 / 9;
	}

	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .entry-title {
		font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.95rem);
		line-height: 1.16;
		letter-spacing: -0.042em;
	}

	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .entry-summary {
		font-size: var(--da-text-sm);
		line-height: 1.6;
		color: var(--da-ink-soft);
	}

	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .entry-header,
	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .entry-summary,
	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .entry-meta {
		padding-left: calc(var(--da-card-pad) * 1.25);
		padding-right: calc(var(--da-card-pad) * 1.25);
	}

	.blog:not(.paged) .site-main > article:nth-of-type(-n + 2) .inside-article {
		padding-bottom: calc(var(--da-card-pad) * 1.25);
	}
}

/* The page header and pagination span the full grid. */
.archive .site-main > .page-header,
.blog .site-main > .page-header,
.search-results .site-main > .page-header,
.archive .site-main > .paging-navigation,
.blog .site-main > .paging-navigation,
.search-results .site-main > .paging-navigation {
	grid-column: 1 / -1;
}

/* Recap's cards are transparent because every post there has artwork. Roughly
   half of yours have no featured image, so a transparent card leaves them as
   text floating in a grid. A quiet filled card reads correctly either way. */
.archive .inside-article,
.blog .inside-article,
.search-results .inside-article {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin-bottom: 0;
	padding: 0 0 var(--da-card-pad);
	background: var(--da-surface);
	border: 1px solid var(--da-rule-soft);
	border-radius: var(--da-radius);
	overflow: hidden;
	transition: border-color 160ms ease;
}

.archive .inside-article:hover,
.blog .inside-article:hover,
.search-results .inside-article:hover {
	border-color: var(--da-rule);
}

/* GeneratePress hooks generate_post_image onto generate_after_entry_header,
   so the featured image is emitted *after* the title and byline. In a card
   the image belongs on top, so it is hoisted with order rather than by
   changing the Customizer's image-position setting — one less thing living
   outside the theme. */
.archive .post-image,
.blog .post-image,
.search-results .post-image {
	order: -1;
	margin: 0 0 0.25rem;
	overflow: hidden;
	background: var(--da-elevated);
}

/* The .entry-header:first-child top padding below still applies, because the
   header remains first in the DOM — order only moves it visually. That padding
   now reads as the gap under the image, and as the card's top inset when a
   post has no image at all. Correct in both cases. */

.archive .entry-header,
.archive .entry-summary,
.archive .entry-meta,
.blog .entry-header,
.blog .entry-summary,
.blog .entry-meta,
.search-results .entry-header,
.search-results .entry-summary,
.search-results .entry-meta {
	padding-left: var(--da-card-pad);
	padding-right: var(--da-card-pad);
}

/* A card with no image needs breathing room where the image would have been. */
.archive .inside-article > .entry-header:first-child,
.blog .inside-article > .entry-header:first-child,
.search-results .inside-article > .entry-header:first-child {
	padding-top: var(--da-card-pad);
}

.archive .post-image img,
.blog .post-image img,
.search-results .post-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(.4, 0, .2, 1);
}

.archive .inside-article:hover .post-image img,
.blog .inside-article:hover .post-image img {
	transform: scale(1.035);
}

.archive .entry-header,
.blog .entry-header,
.search-results .entry-header {
	margin-bottom: 0;
}

.archive .entry-title,
.blog .entry-title,
.search-results .entry-title {
	font-size: var(--da-card-title);
	line-height: 1.25;
	letter-spacing: -0.035em;
	margin: 0 0 0.35em;
	max-width: none;
}

.archive .entry-title a,
.blog .entry-title a,
.search-results .entry-title a {
	color: var(--da-ink);
	text-decoration: none;
	transition: color 130ms ease;
}

.archive .entry-title a:hover,
.blog .entry-title a:hover,
.search-results .entry-title a:hover {
	color: var(--da-accent);
}

.archive .entry-summary,
.blog .entry-summary,
.search-results .entry-summary {
	font-size: var(--da-card-body);
	line-height: 1.55;
	color: var(--da-ink-faint);
	margin: 0;
}

.archive .entry-summary p:last-child,
.blog .entry-summary p:last-child { margin-bottom: 0; }


/* -------------------------------------------------------------------------
   8. Navigation, buttons, footer
   ------------------------------------------------------------------------- */

.main-navigation,
.main-navigation .main-nav > ul > li > a {
	font-family: var(--da-font-body);
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.main-navigation .main-nav > ul > li > a { color: var(--da-ink-soft); }

.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--da-ink);
}

.site-header { border-bottom: 1px solid var(--da-rule); }

/* GeneratePress calls the site name .main-title, not .site-title — and it
   swaps the tag by context: <h1> on the homepage, <p> everywhere else. The
   generic h1 rule above was therefore styling it on the homepage only, and
   category and article pages fell back to the body font. Target the class,
   not the tag. */
.main-title,
.main-title a,
.site-branding .main-title a {
	font-family: var(--da-font-display);
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--da-ink);
	text-decoration: none;
}

.button,
button,
input[type="submit"],
.wp-block-button__link {
	font-family: var(--da-font-body);
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: -0.01em;
	background: var(--da-accent);
	color: var(--da-accent-ink);
	border: 0;
	border-radius: var(--da-radius-sm);
	padding: 0.6rem 1rem;
	transition: background 130ms ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	background: var(--da-accent-dim);
	color: var(--da-accent-ink);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
	background: var(--da-surface);
	border: 1px solid var(--da-rule);
	border-radius: var(--da-radius-sm);
	color: var(--da-ink);
	padding: 0.6rem 0.75rem;
	font-family: var(--da-font-body);
}

::placeholder { color: var(--da-ink-faint); opacity: 1; }

.site-footer,
.site-info {
	border-top: 1px solid var(--da-rule);
	font-size: var(--da-text-xs);
	color: var(--da-ink-faint);
}

.site-footer a,
.site-info a { color: var(--da-ink-soft); }
.site-footer a:hover,
.site-info a:hover { color: var(--da-accent); }

.sidebar .widget {
	border: 1px solid var(--da-rule);
	border-radius: var(--da-radius);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.sidebar .widget-title {
	font-size: 1rem;
	margin: 0 0 0.8rem;
}

.sidebar .widget a { color: var(--da-ink-soft); text-decoration: none; }
.sidebar .widget a:hover { color: var(--da-accent); }


/* -------------------------------------------------------------------------
   8b. Breadcrumbs and footer navigation
   ------------------------------------------------------------------------- */

.da-crumbs {
	font-size: var(--da-text-xs);
	line-height: 1.5;
	color: var(--da-ink-faint);
	margin: 0 0 1.4rem;
}

.da-crumbs a {
	color: var(--da-ink-soft);
	text-decoration: none;
}

.da-crumbs a:hover {
	color: var(--da-accent);
	text-decoration: underline;
	text-underline-offset: .16em;
}

/* Yoast prints its separator as a bare character between links. */
.da-crumbs .breadcrumb_last {
	color: var(--da-ink-faint);
}

.da-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 4rem;
	padding: 0 0 2rem;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--da-rule);
	text-align: left;
}

.da-footer-nav__col h2 {
	font-family: var(--da-font-body);
	font-size: var(--da-text-xs);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--da-ink-faint);
	margin: 0 0 .8rem;
}

.da-footer-nav__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .45rem;
}

.da-footer-nav__col a {
	font-size: var(--da-text-sm);
	color: var(--da-ink-soft);
	text-decoration: none;
}

.da-footer-nav__col a:hover { color: var(--da-accent); }

@media (max-width: 600px) {
	.da-footer-nav { gap: 1.5rem 2.5rem; }
}


/* ---- Social profiles ------------------------------------------------------

   Scoped under .da-footer-nav__col on purpose. The column rules above are
   `.da-footer-nav__col ul` and `.da-footer-nav__col a`, both (0,1,1); a bare
   `.da-social a` is also (0,1,1) and would depend on source order to win,
   which is exactly the fragility that broke the related-posts cards. The
   extra class puts these at (0,2,1) and settles it outright.

   Icons inherit `currentColor`, so the hover state is one colour change on
   the anchor rather than a rule per icon.
   -------------------------------------------------------------------------- */

.da-footer-nav__col .da-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.da-footer-nav__col .da-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	border: 1px solid var(--da-rule);
	border-radius: 50%;
	color: var(--da-ink-soft);
	text-decoration: none;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.da-footer-nav__col .da-social a:hover,
.da-footer-nav__col .da-social a:focus-visible {
	color: var(--da-accent-ink);
	background: var(--da-accent);
	border-color: var(--da-accent);
}

.da-footer-nav__col .da-social a:focus-visible {
	outline: 2px solid var(--da-accent);
	outline-offset: 2px;
}

.da-footer-nav__col .da-social svg {
	display: block;
	width: 1.0625rem;
	height: 1.0625rem;
	fill: currentColor;
}

/* Optical size correction.

   The four marks do not fill their 24x24 viewBox equally. Measured extents:

     Facebook        24 x 23.9   (100% of the box)
     Apple Podcasts  24 x 24
     X               24 x 21.7
     SoundCloud      24 x 10.8   (45%)

   SoundCloud is a wide, short waveform, so at equal width it draws half the
   height of the others and reads as a smaller, fainter icon. Scaling its
   whole viewBox up restores the visual mass without distorting the logo.
   The drawn mark ends up 1.5rem x 0.67rem, still clear of the 2.375rem
   circle around it. */

.da-footer-nav__col .da-social .da-social__icon--soundcloud {
	width: 1.5rem;
	height: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.da-footer-nav__col .da-social a { transition: none; }
}


/* -------------------------------------------------------------------------
   9. Related posts (Contextual Related Posts)

   Jetpack's block is switched off in functions.php, so its styles went with
   it rather than being left here as cruft.

   Markup is a single <a> wrapping both the figure and the title:

     .crp_related > ul > li > a.crp_link > figure > img
                                         > span.crp_title

   so the <li> is the card and the <a> is a full-height flex column inside it,
   which keeps the whole tile clickable.

   NOT scoped to .entry-content: functions.php appends this block on
   generate_after_entry_content, which lands *outside* .entry-content. Only
   the handful of posts with an inline [crp] sit inside it. Scoping here was
   why none of this applied to the ~811 appended blocks.

   WORKS WITH ANY "Related Posts style" SETTING. When set to anything other
   than "No styles", CRP ships rounded-thumbs.min.css plus an inline block
   hard-coding a { width: 300px; height: 300px } and floating the title over
   the image in a black bar. Section 9b neutralises all of it, so this does
   not depend on a plugin setting staying where someone left it.
   ------------------------------------------------------------------------- */

.crp_related {
	margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
	padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	border-top: 1px solid var(--da-rule);
	clear: both;
	max-width: none;
	float: none;
}

.crp_related > h2,
.crp_related > h3 {
	font-family: var(--da-font-display);
	font-size: var(--da-h3);
	font-weight: 600;
	letter-spacing: -0.035em;
	color: var(--da-ink);
	margin: 0 0 1.3rem;
	padding: 0;
	border: 0;
	float: none;
	text-align: left;
}

/* Four across, as asked. Two on tablets and phones, one only when a pair
   genuinely will not fit. */
.crp_related ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

@media (min-width: 480px) {
	.crp_related ul { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.crp_related ul { grid-template-columns: repeat(4, 1fr); }
}

.crp_related li {
	margin: 0;
	padding: 0;
	background: var(--da-surface);
	border: 1px solid var(--da-rule-soft);
	border-radius: var(--da-radius);
	overflow: hidden;
	box-shadow: none;
	text-align: left;
	transition: border-color 160ms ease;
}

.crp_related li::marker { content: none; }

.crp_related li:hover {
	background: var(--da-surface);
	border-color: var(--da-rule);
}

.crp_related .crp_link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--da-ink);
	text-decoration: none;
	text-align: left;
}

.crp_related figure {
	position: relative;
	margin: 0;
	background: var(--da-elevated);
}

/* CRP returns thumbnails at whatever ratio the source was — 300x300, 300x200
   and 300x120 all appear in one row — so a fixed ratio plus cover is what
   stops four cards looking ragged. */
.crp_related img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
}

/* 46% of posts have no featured image, so CRP falls back to its grey
   default.png on nearly half of these cards. Rather than show that, the tile
   becomes a quiet branded panel. */
.crp_related figure:has(.crp_default_thumb) {
	background: linear-gradient(135deg, var(--da-elevated) 0%, var(--da-surface) 100%);
}

.crp_related figure:has(.crp_default_thumb) img { opacity: 0; }

.crp_related figure:has(.crp_default_thumb)::after {
	content: "D/A";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--da-font-display);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: -0.05em;
	color: var(--da-accent);
	opacity: 0.32;
}

.crp_related .crp_title {
	display: block;
	flex: 1;
	padding: 0.85rem 1rem 1rem;
	font-family: var(--da-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.03em;
	color: var(--da-ink);
	transition: color 140ms ease;
}

.crp_related li:hover .crp_title { color: var(--da-accent); }

.crp_clear { display: none; }


/* ---- 9b. Neutralise CRP's bundled stylesheet -----------------------------

   functions.php stops CRP's stylesheet from loading, so in normal operation
   nothing below matches anything. It stays as a fallback for the cases that
   bypass that: a cached page built before the change, or a future CRP release
   that renames its style handles.

   Written against crp-rounded-thumbs 4.0.3, which rebuilt the stylesheet
   around custom properties and added width/height on the li plus aspect-ratio
   on the img. Those three declarations are what broke the cards in Aug 2026 —
   the fixed 300x300 li met `overflow: hidden` and clipped the title away.

   Selectors mirror CRP's own shape to win on specificity; !important appears
   only where CRP used it first.
   ------------------------------------------------------------------------- */

.crp_related.crp-rounded-thumbs {
	clear: both;
	margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
}

.crp_related.crp-rounded-thumbs ul,
.crp_related.crp-rounded-thumbs li,
.crp_related.crp-rounded-thumbs a {
	float: none;
	text-align: left;
}

/* CRP: display:flex; flex-wrap:wrap; gap:var(--crp-gap). The grid columns
   themselves come from section 9 — CRP sets none, so those still apply. */
.crp_related.crp-rounded-thumbs ul {
	display: grid;
	gap: 1.15rem;
	margin: 0 !important;
	padding: 0 !important;
}

.crp_related.crp-rounded-thumbs li {
	width: auto;                       /* CRP: width:var(--crp-thumb-width) */
	height: auto;                      /* CRP: height:var(--crp-thumb-height) */
	margin: 0 !important;              /* CRP: margin:0!important */
	padding: 0;
	border: 1px solid var(--da-rule-soft);
	border-radius: var(--da-radius);
	box-shadow: none;                  /* CRP: box-shadow:var(--crp-shadow) */
	vertical-align: top;
	overflow: hidden;
	position: relative;
}

.crp_related.crp-rounded-thumbs li:hover {
	background: var(--da-surface);     /* CRP: background:var(--crp-bg-hover) */
	border-color: var(--da-rule);
	box-shadow: none;                  /* CRP: box-shadow:var(--crp-shadow-hover) */
}

/* CRP boxes the anchor at 100% of the fixed li. */
.crp_related.crp-rounded-thumbs a.crp_link {
	display: flex;                     /* CRP: display:block */
	flex-direction: column;
	width: auto;
	height: 100%;
	position: static;
	overflow: visible;
	border-radius: 0;
}

.crp_related.crp-rounded-thumbs a.crp_link:focus-visible {
	border: 0;
	outline: 2px solid var(--da-accent);
	outline-offset: -2px;
	border-radius: var(--da-radius);
}

/* CRP floats the title over the image in a translucent black bar. */
.crp_related.crp-rounded-thumbs .crp_title,
.crp_related.crp-rounded-thumbs .crp_title:visited {
	position: static;
	display: block;
	width: auto;
	flex: 1;
	padding: 0.85rem 1rem 1rem;
	margin: 0;
	background: none;
	background-color: transparent;
	backdrop-filter: none;
	text-shadow: none;
	text-align: left;
	border-radius: 0;
	font-size: 1rem;
	line-height: 1.28;
	color: var(--da-ink) !important;   /* CRP: color:...!important */
}

.crp_related.crp-rounded-thumbs li:hover .crp_title {
	background-color: transparent;
	color: var(--da-accent) !important;
}

.crp_related.crp-rounded-thumbs a figure,
.crp_related.crp-rounded-thumbs figure {
	display: block;
	width: auto;                       /* CRP: width:100% */
	height: auto;                      /* CRP: height:100% */
	margin: 0 !important;              /* CRP: margin:0!important — keep parity */
}

.crp_related.crp-rounded-thumbs img {
	width: 100%;
	max-width: none;
	height: auto;                      /* CRP: height:100% */
	aspect-ratio: 16 / 10;             /* CRP: aspect-ratio:var(--crp-aspect-ratio) */
	object-fit: cover;
	margin: 0;
}


/* -------------------------------------------------------------------------
   10. Print
   ------------------------------------------------------------------------- */

@media print {
	body { background: #fff; color: #000; }

	.site-header,
	.site-footer,
	.sidebar,
	.entry-meta,
	.comments-area,
	.post-navigation,
	.paging-navigation { display: none !important; }

	.entry-content { font-size: 11pt; line-height: 1.5; max-width: none; color: #000; }
	.entry-content a::after { content: " (" attr(href) ")"; font-size: 9pt; }
	h1, h2, h3, .entry-title { color: #000; }
}