/*
Theme Name: MJ Sterling
Theme URI: https://mjsterling.com
Author: MJ Sterling
Author URI: https://mjsterling.com
Description: A custom editorial block theme for MJ Sterling — long-form writing on law, policy, technology, and ownership. Warm-paper ground, slate-navy and oxblood accents; Libre Caslon Display wordmark and headlines, Hanken Grotesk UI, EB Garamond body. Built for policy briefings, essays, and research with strong typography, accessible contrast, and good Core Web Vitals.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mj-sterling
Tags: blog, news, editorial, custom-colors, custom-menu, block-styles, full-site-editing, wide-blocks, block-patterns, rtl-language-support, accessibility-ready
*/

/* ------------------------------------------------------------------
   Supplemental styles. The brand system lives in theme.json; this file
   covers only what block styles cannot express cleanly.
------------------------------------------------------------------ */

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

/* The large / x-large presets used to be pinned here, blamed on the fluid engine.
   The real cause was `defaultFontSizes` defaulting to true: core's own small /
   medium / large / x-large presets occupy those slugs, so theme.json's same-slug
   entries were discarded and core's 13px / 20px / 36px / 42px were emitted
   instead. theme.json now sets `defaultFontSizes: false`, so all seven sizes come
   through natively and this override is redundant. Same fix as
   `defaultSpacingSizes` for the spacing scale. */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

/* Long-form measure and rhythm inside article content */
.mjs-prose p,
.mjs-prose ul,
.mjs-prose ol,
.mjs-prose blockquote {
	max-width: 42rem;
}

/* Accessible, visible keyboard focus everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Skip link */
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 0.75rem; left: 0.75rem;
	z-index: 100000;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	padding: 0.6rem 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	border-radius: 3px;
}

/* Section labels ("Recent work", "What I cover", "About"). These are h2 for the
   document outline but need to read as the small-caps eyebrow they were when
   they were h6 — so this restates the h6 treatment from theme.json. The tag is
   part of the selector because theme.json emits its heading styles at :root
   :where(h2), which a bare class only ties with; h2.mjs-section__label wins on
   specificity without needing !important. */
h2.mjs-section__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* Utility: eyebrow / metadata label (used in patterns) — warm oxblood accent */
.mjs-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--oxblood);
}

/* Header navigation: quiet, editorial */
.wp-block-navigation {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.01em;
}
.wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
}
.wp-block-navigation a:where(:not(.wp-element-button)):hover,
.wp-block-navigation .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.28em;
	text-decoration-thickness: 1px;
}

/* Mobile overlay menu — full-screen paper panel: wordmark, nav, and a social row.
   The wordmark + social block are injected by the mjs-mobile-menu mu-plugin. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	inset: 0;
	background-color: var(--wp--preset--color--base);
	/* Horizontal padding tracks the masthead's root padding so the wordmark, items,
	   and X line up with the closed header. !important overrides WP's cascade reset. */
	padding: 1.35rem var(--wp--style--root--padding-right, 1.5rem) 2.5rem var(--wp--style--root--padding-left, 1.5rem) !important;
	overflow-y: auto;
}
/* Chain height down the WP wrappers so the social block can pin to the bottom */
.is-menu-open .wp-block-navigation__responsive-close,
.is-menu-open .wp-block-navigation__responsive-dialog { height: 100%; }
.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex; flex-direction: column; align-items: flex-end;
	min-height: 100%; width: 100%; gap: 0;
	padding: 0 !important;   /* WP defaults a 56px top padding here; the container owns padding now */
}
/* The wordmark + social are injected into the nav content, which is ALSO the
   inline desktop nav — so keep them hidden unless the overlay is actually open. */
.mjs-menu__wordmark,
.mjs-menu__foot { display: none; }
/* Wordmark — top-left, echoing the masthead it covers */
.is-menu-open .mjs-menu__wordmark {
	display: block;
	align-self: flex-start; margin: 0 0 2.75rem;
	font-size: 1.5rem; letter-spacing: 0.01em; font-weight: 400;
	color: var(--wp--preset--color--contrast);
}
/* Nav links — larger, editorial serif, right-aligned */
.is-menu-open .wp-block-navigation__container {
	flex-direction: column; align-items: flex-end; width: 100%; gap: 1.4rem;
}
.is-menu-open .wp-block-navigation-item > a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem; font-weight: 400; letter-spacing: 0.005em;
	color: var(--wp--preset--color--contrast);
}
.is-menu-open .wp-block-navigation-item > a:hover,
.is-menu-open .current-menu-item > a {
	color: var(--wp--preset--color--oxblood); text-decoration: none;
}
/* Social footer — pinned to the bottom of the panel */
.is-menu-open .mjs-menu__foot {
	display: flex;
	margin-top: auto; width: 100%;
	flex-direction: column; align-items: flex-end; gap: 1rem;
	padding-top: 1.75rem; border-top: 1px solid var(--wp--preset--color--line);
}
.mjs-menu__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.mjs-menu__foot .mjs-social { justify-content: flex-end; gap: 1.35rem; margin: 0; }
.mjs-menu__micro {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem; color: var(--wp--preset--color--muted); margin: 0;
}
.mjs-menu__micro a { color: var(--wp--preset--color--accent); }
/* Close (X) — aligned to the hamburger it replaces */
.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 1.35rem;
	right: var(--wp--style--root--padding-right, 1.5rem);
	color: var(--wp--preset--color--contrast);
}
.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); }

/* Editorial card (register_block_style: core/group / mjs-card) */
.wp-block-group.is-style-mjs-card {
	background: var(--wp--preset--color--subtle);
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--oxblood);
	border-radius: 5px;
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* "Coming soon" holding slate — shown by query-no-results on the Briefings
   archive and the homepage featured section while briefings are unpublished. */
.mjs-comingsoon.is-style-mjs-card {
	padding: clamp(1.75rem, 5vw, 3rem);
	/* Colored LEFT rule (matches .mjs-featured__card) rather than the top border. */
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--oxblood);
}
.mjs-comingsoon .wp-block-heading { font-family: var(--wp--preset--font-family--display); }

/* Reader CTA below the briefings list (subscribe + suggest a topic) */
.mjs-briefings-cta .wp-block-heading { font-family: var(--wp--preset--font-family--display); }
.mjs-briefings-cta .has-medium-font-size { max-width: 42rem; }

/* Suggest-a-topic box */
.mjs-suggest-block { padding-top: 1.75rem; border-top: 1px solid var(--wp--preset--color--line); }
.mjs-suggest-block .wp-block-heading { font-family: var(--wp--preset--font-family--display); }
/* The CTA wrapper is the full 76rem shell so its rule and heading line up with
   the cards above it, but its body copy still needs the canonical measure —
   otherwise this paragraph alone runs 1216px. */
.mjs-suggest-block > p,
.mjs-briefings-cta > p { max-width: 42rem; margin-left: 0 !important; margin-right: 0 !important; }
.mjs-suggest__form {
	display: flex; flex-direction: column; gap: 1rem;
	max-width: 34rem; margin-top: 0.25rem;
}
.mjs-suggest__field { display: flex; flex-direction: column; gap: 0.4rem; }
.mjs-suggest__field label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
}
.mjs-suggest__opt { font-weight: 400; color: var(--wp--preset--color--muted); }
.mjs-suggest__form textarea,
.mjs-suggest__form input[type="email"] {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px; padding: 0.6rem 0.7rem;
	width: 100%; box-sizing: border-box; resize: vertical;
}
.mjs-suggest__form textarea:focus,
.mjs-suggest__form input[type="email"]:focus {
	outline: none; border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(31, 45, 61, 0.08);
}
.mjs-suggest__form textarea::placeholder { color: var(--wp--preset--color--muted); opacity: 0.7; }
/* Honeypot — off-screen, never shown to humans */
.mjs-suggest__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mjs-suggest__submit {
	align-self: flex-start; cursor: pointer; border: none;
	font-family: var(--wp--preset--font-family--sans); font-size: 0.875rem;
	padding: 0.7rem 1.4rem;
}
.mjs-suggest__notice {
	font-family: var(--wp--preset--font-family--sans); font-size: 0.9rem;
	padding: 0.7rem 0.9rem; border-radius: 4px; margin: 0 0 1.1rem; max-width: 34rem;
}
.mjs-suggest__notice.is-ok { color: #2f6e50; background: #eef5f0; border: 1px solid #cfe5d8; }
.mjs-suggest__notice.is-err { color: var(--wp--preset--color--oxblood); background: #f7ecec; border: 1px solid #e6cccc; }
.mjs-suggest__captcha { margin-top: 0.25rem; }

/* Callout / aside (core/group / mjs-callout) */
.wp-block-group.is-style-mjs-callout {
	background: var(--wp--preset--color--subtle);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 0 4px 4px 0;
	padding: clamp(1rem, 2.5vw, 1.75rem);
	font-size: var(--wp--preset--font-size--small);
}
.wp-block-group.is-style-mjs-callout > *:first-child { margin-top: 0; }
.wp-block-group.is-style-mjs-callout > *:last-child { margin-bottom: 0; }

/* Citations list (core/list / mjs-citations) — for endnotes / sources */
.wp-block-list.is-style-mjs-citations {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.5;
}
.wp-block-list.is-style-mjs-citations li { margin-bottom: 0.6rem; }
.wp-block-list.is-style-mjs-citations li a { word-break: break-word; }

/* Selection */
::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Refined pointer on interactive elements — a small navy target ring.
   Falls back to the standard pointer where custom cursors aren't honored. */
a:any-link,
button:not([disabled]),
.wp-element-button,
[role="button"],
summary,
label[for] {
	cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'%20fill='%237A2E2E'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'%20fill='none'%20stroke='%237A2E2E'%20stroke-opacity='.4'%20stroke-width='1.25'/%3E%3C/svg%3E") 12 12, pointer;
}
@media (hover: none) {
	/* Touch devices: no custom cursor. */
	a:any-link, button, .wp-element-button, [role="button"], summary, label[for] { cursor: auto; }
}

/* ------------------------------------------------------------------
   Structural layout for templates and parts
------------------------------------------------------------------ */

/* Masthead */
.mjs-masthead {
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.mjs-masthead__inner { row-gap: 0.75rem; }
.wp-block-site-title { margin: 0; }
.wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.wp-block-site-title a:hover { text-decoration: none; color: var(--wp--preset--color--accent); }

/* Close of main — every template ended flush against the footer's own top
   padding, leaving only 24px between the last content block and the footer rule
   on every page. Blocks that end a page (the suggest-a-topic form, subscribe)
   carry top padding but no bottom padding, so they read as cramped. One rule
   here gives every page the same closing breath; 404.html sets its own padding
   inline and keeps it. */
.mjs-main { padding-bottom: var(--wp--preset--spacing--60); }

/* Page heads (archives, indexes, search). The shell is 76rem so the eyebrow and
   H1 start on the same left edge as the masthead and the cards below — the
   archives used to sit at 52rem, which is what made the column look like it
   changed width from page to page. The standfirst paragraph is capped at the
   canonical 42rem measure, since 76rem of body copy is far past a readable line
   length.

   The margin reset is needed because WP's constrained layout centres any child
   narrower than the container — without it the standfirst sits inset from the H1
   above it instead of sharing its left edge. !important is not cosmetic here:
   WP emits `margin-left: auto !important` on
   `.is-layout-constrained > :where(:not(.alignleft)...)`, so no amount of
   specificity wins. Physical properties, not margin-inline, for the same reason
   the declaration has to be !important — it has to match what WP set. */
.mjs-page-head > p:not(.mjs-eyebrow) {
	max-width: 42rem;
	/* Not 0: the eyebrow and H1 are 76rem-wide children that WP centres inside the
	   container's padding box, so their left edge sits one auto-margin in from it.
	   Reproducing that same offset lands the standfirst on their left edge; max()
	   collapses it to 0 once the viewport is narrower than the shell. */
	margin-left: max(0px, calc((100% - 76rem) / 2)) !important;
	margin-right: 0 !important;
}

/* Post template lists */
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.wp-block-post-template > li { list-style: none; margin-left: 0; }
.wp-block-post-template > li::marker { content: ""; }
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* Hairline dividers between list items; drop the last one */
.mjs-list__item { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-post-template > li:last-child .mjs-list__item { border-bottom: 0; }

/* Lead card in "recent work" — an editorial card with an accent LEFT rule.
   No max-width: it used to be capped at 60rem and centred, from when this was a
   standalone featured section. Inside a 76rem section whose other children run
   full width, that cap left the card 256px narrower than the index rows beneath
   it and offset by 4px — two of the three mismatched left edges on the page. */
.mjs-featured__card {
	padding: clamp(1.75rem, 4vw, 2.75rem);
}
.mjs-featured__card.is-style-mjs-card {
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--oxblood);
}
.mjs-featured__card .wp-block-post-excerpt { max-width: 42rem; }
.mjs-featured__card .wp-block-post-title { margin: 0; }
.mjs-featured__card .wp-block-post-title a { text-decoration: none; }
.mjs-featured__card .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.mjs-featured__card .wp-block-post-excerpt__more-text a { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); }

/* Outline button reads as the slate-navy accent */
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--accent);
	border: 1.5px solid var(--wp--preset--color--accent);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Readability: EB Garamond (serif) is delicate at small sizes on screen, so
   supporting text at the small / x-small steps uses the more legible Hanken sans
   (the brand kit's face for UI, metadata, and labels). The serif stays on
   reading-size body (medium and up), where it reads beautifully. */
.has-small-font-size,
.has-x-small-font-size {
	font-family: var(--wp--preset--font-family--sans);
}
.has-small-font-size { line-height: 1.6; }

/* Long-form prose rhythm (constrained to contentSize = 42rem for measure) */
.mjs-prose { font-size: var(--wp--preset--font-size--medium); line-height: 1.7; }
.mjs-prose > * { margin-top: 1.4em; margin-bottom: 0; }
.mjs-prose > *:first-child { margin-top: 0; }
.mjs-prose > h2 { margin-top: 2em; }
.mjs-prose > h3 { margin-top: 1.7em; }
.mjs-prose li { margin-top: 0.5em; }

/* Native Footnotes block */
.wp-block-footnotes {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}

/* Article/briefing hero meta row — one cohesive line under a hairline */
.mjs-article__meta { align-items: baseline; row-gap: 0.4rem; }
.mjs-metaright { align-items: baseline; font-family: var(--wp--preset--font-family--sans); }

/* Byline — metadata reads in the sans */
.mjs-byline { align-items: baseline; font-family: var(--wp--preset--font-family--sans); }
.mjs-byline p { font-family: var(--wp--preset--font-family--sans); }
.mjs-byline .wp-block-post-author-name a { text-decoration: none; color: var(--wp--preset--color--contrast); }

/* Article measure: keep the head/foot aligned to the reading column */
.mjs-article__head,
.mjs-article__foot { max-width: 44rem; margin-inline: auto; }

/* Download-PDF button (hero) */
.mjs-article__head .wp-block-shortcode { margin: 1.5rem 0 0; }
.mjs-download {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.5rem 0.95rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.mjs-download:hover,
.mjs-download:focus-visible {
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}
.mjs-download:focus-visible { outline: 2px solid var(--wp--preset--color--oxblood); outline-offset: 2px; }
.mjs-download__icon { width: 1rem; height: 1rem; flex: none; }
.mjs-download__label { font-weight: 600; letter-spacing: 0.01em; }
.mjs-download__meta {
	font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-left: 0.55rem; margin-left: 0.1rem;
	border-left: 1px solid var(--wp--preset--color--line);
}
.mjs-download:hover .mjs-download__meta,
.mjs-download:focus-visible .mjs-download__meta {
	color: rgba(255, 255, 255, 0.72);
	border-left-color: rgba(255, 255, 255, 0.28);
}

/* Post navigation */
.mjs-postnav a { font-family: var(--wp--preset--font-family--sans); text-decoration: none; }
.mjs-postnav a:hover { text-decoration: underline; }

/* Footer */
.mjs-footer { border-top: 1px solid var(--wp--preset--color--line); }
.mjs-wordmark {
	font-weight: 400;
	letter-spacing: 0.01em;
	font-size: 1.5rem;
	margin: 0 0 0.75rem;
}
.mjs-footer__nav a,
.mjs-footer__links a { text-decoration: none; }
.mjs-footer__nav a:hover,
.mjs-footer__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mjs-footer__links { list-style: none; margin: 0; padding: 0; }
.mjs-footer__links li { margin-bottom: 0.5rem; }
.mjs-disclaimer { max-width: none; text-align: right; line-height: 1.55; }
@media (max-width: 600px){ .mjs-disclaimer { text-align: left; } }

/* Subjects */
.mjs-subject .wp-block-heading { margin-bottom: 0.4rem; }

/* ------------------------------------------------------------------
   Homepage "recent work" — a lead card plus a compact index
------------------------------------------------------------------ */
/* Rows read as an index, not a feed: one line each, hairline separated, the
   date and format label held in a fixed-width sans gutter so titles start on a
   common edge however long the label is. */
.mjs-workindex__row {
	display: grid;
	grid-template-columns: 6.5rem 8.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 0 1rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.mjs-workindex__row:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.mjs-workindex__date { margin: 0; white-space: nowrap; }
.mjs-workindex__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--wp--preset--color--oxblood);
}
.mjs-workindex__title { margin: 0; }
.mjs-workindex__title a { text-decoration: none; }
.mjs-workindex__title a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
/* The accent follows the item's own type rather than the block it sits in:
   oxblood for briefings, navy for dispatches. post_class() puts type-briefing /
   type-post on the post-template item, so the card and row markup stay
   type-agnostic and a mixed index colours itself. */
.mjs-work__lead .type-post .mjs-featured__card { border-left-color: var(--wp--preset--color--accent); }
.mjs-workindex .type-post .mjs-workindex__label { color: var(--wp--preset--color--accent); }
.mjs-work__more a { font-family: var(--wp--preset--font-family--sans); }
.mjs-work__sep { color: var(--wp--preset--color--line); margin: 0 0.4rem; }
/* Stack the gutter above the title on narrow screens — 15rem of fixed columns
   leaves nothing for a headline at phone widths. */
@media (max-width: 600px) {
	.mjs-workindex__row { grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; }
	.mjs-workindex__title { grid-column: 1 / -1; }
}

/* Hero: the section runs the full 76rem so its left edge matches every section
   below it; the reading measure is capped here instead. Left-aligned rather than
   centred, or the headline would sit inset from the rest of the page — which is
   what made the column look like it changed width partway down.

   The headline and the standfirst used to share one 50rem cap, which left 416px
   of dead space to the right of both and made the whole page read left-heavy.
   Splitting them gives the display type room to work (62rem) while the body copy
   drops to the canonical 42rem measure, so the hierarchy is deliberate rather
   than a single ragged block. text-wrap: balance keeps the two headline lines
   even instead of leaving a short widow on the second. */
.mjs-hero__text > h1 { max-width: 62rem; text-wrap: balance; }
.mjs-hero__text > p { max-width: 42rem; }

/* Topics — links, with the post count as a quiet superior figure. Terms with
   nothing published render unlinked (see patterns/home-sections.php) and are
   dimmed so the difference is visible rather than a dead link.

   A grid rather than a flex row: flex packed the items left and stopped wherever
   the last one happened to end, leaving a ragged right edge that didn't reach
   the column. Three even columns span it fully and land the six topics as a
   tidy 3x2 block. */
.mjs-topics {
	list-style: none; margin: 1.25rem 0 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.85rem 1.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.95rem;
}
@media (max-width: 900px) { .mjs-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mjs-topics { grid-template-columns: 1fr; } }
.mjs-topics__item { margin: 0; }
.mjs-topics__item a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.mjs-topics__item a:hover { text-decoration: underline; text-underline-offset: 0.15em; color: var(--wp--preset--color--oxblood); }
.mjs-topics__count {
	font-size: 0.68rem; vertical-align: super;
	color: var(--wp--preset--color--muted); margin-left: 0.15rem;
}
.mjs-topics__item.is-empty { color: var(--wp--preset--color--muted); opacity: 0.6; }

/* Briefing archive cards — oxblood left rule, matching the featured card.
   Dispatch cards on /writing/ share every dimension and differ only in the
   colour of that rule: navy instead of oxblood, so format is legible before a
   word is read. Selectors are paired rather than duplicated so the two card
   types cannot drift out of alignment. */
.mjs-briefing-card.is-style-mjs-card,
.mjs-dispatch-card.is-style-mjs-card,
.mjs-archive-card.is-style-mjs-card {
	border-top: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--oxblood);
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.mjs-dispatch-card.is-style-mjs-card { border-left-color: var(--wp--preset--color--accent); }

/* Category, tag, date and search archives mix briefings and posts, so one fixed
   accent would mislabel half the list. Colour the rule by post type instead, so
   an item carries the same accent here as on its own index: oxblood for
   briefings (inherited above), navy for dispatches. */
.type-post .mjs-archive-card.is-style-mjs-card { border-left-color: var(--wp--preset--color--accent); }
.mjs-briefing-card .wp-block-post-title,
.mjs-dispatch-card .wp-block-post-title,
.mjs-archive-card .wp-block-post-title { margin: 0; }
.mjs-briefing-card .wp-block-post-title a,
.mjs-dispatch-card .wp-block-post-title a,
.mjs-archive-card .wp-block-post-title a { text-decoration: none; }
.mjs-briefing-card .wp-block-post-title a:hover,
.mjs-dispatch-card .wp-block-post-title a:hover,
.mjs-archive-card .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.mjs-briefing-card .wp-block-post-excerpt__more-text a,
.mjs-dispatch-card .wp-block-post-excerpt__more-text a,
.mjs-archive-card .wp-block-post-excerpt__more-text a { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--small); }

/* Briefing standfirst / dek — a quiet subtitle, clearly subordinate to the title.
   No width cap: it aligns to the same reading column as the title, rule, and body. */
.mjs-standfirst { color: var(--wp--preset--color--muted); max-width: none; }
.mjs-standfirst.has-large-font-size { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem) !important; line-height: 1.55; }
.mjs-standfirst p { margin: 0; }
.mjs-standfirst .wp-block-post-excerpt__more-text { display: none; }

/* ------------------------------------------------------------------
   Polished About + Contact
------------------------------------------------------------------ */

/* About: a contained, left-aligned canvas */
/* One column for the whole page, at the same 44rem measure the briefing
   layout uses — About now matches the rest of the site.

   The group is alignwide, and WP's .alignwide rule (wideSize, 76rem) outranked
   a plain .mjs-about selector, so the 62rem declared here previously never
   applied: the page rendered at 76rem and stranded the 42rem prose against a
   wide empty right-hand side. Chaining .alignwide raises specificity enough to
   win without !important. */
.mjs-about.alignwide { max-width: 44rem; margin-inline: auto; }
.mjs-about .mjs-prose-p { max-width: 40rem; }
/* Prose is contentSize (42rem) inside a 44rem column — centre the 1rem
   remainder so the inset is symmetric. The pullquote is 2rem wider than the
   paragraphs, which is exactly its 1rem text inset per side, so both land on
   the same text edge. */
.mjs-about > p,
.mjs-about > .mjs-pullquote { margin-inline: auto; }

/* About intro: text + portrait, vertically balanced */
.mjs-about__intro { align-items: center; }
.mjs-about__lead {
	font-family: var(--wp--preset--font-family--serif);
	max-width: 22ch;
}
.mjs-about__portrait { margin: 0; }
.mjs-about__portrait img {
	width: 100%; max-width: 280px; height: auto; display: block;
	margin-left: auto; border-radius: 4px;
}
@media (max-width: 782px){ .mjs-about__portrait img { margin-inline: 0; } }
.mjs-about__portrait figcaption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem; letter-spacing: 0.04em; line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin-top: 0.55rem; text-align: left;
	/* Match the image box (max-width 280px, right-aligned) so the caption sits
	   directly under the headshot instead of drifting to the figure's left edge. */
	max-width: 280px; margin-left: auto;
}
.mjs-about__portrait figcaption .mjs-portrait-credit {
	color: var(--wp--preset--color--muted); opacity: 0.75;
	font-style: italic; letter-spacing: 0.02em;
}
@media (max-width: 782px){ .mjs-about__portrait figcaption { margin-left: 0; } }

/* Pull quote — Caslon in navy, with a small oxblood label */
.mjs-pullquote { max-width: 44rem; }
.mjs-pullquote__q {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.2vw, 2.0625rem);
	line-height: 1.28;
	color: var(--wp--preset--color--accent);
	margin: 0;
}
.mjs-pullquote__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--wp--preset--color--oxblood);
	margin: 1rem 0 0;
}

/* Hairline-divided lists (focus areas) — editorial, not bullets */
.mjs-hairlist { list-style: none; margin: 0; padding: 0; }
.mjs-hairlist li {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	color: var(--wp--preset--color--contrast);
	padding: 0.8rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.mjs-hairlist li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.mjs-focus__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.25rem;
}

/* Contact: centered and composed */
/* 42rem, not 40rem: the contact copy was the one prose column on the site that
   didn't sit on the canonical measure, so it read narrower than About, Speaking
   and Press for no reason. */
.mjs-contact { max-width: 42rem; margin-inline: auto; }
.mjs-contact__head { text-align: center; }
.mjs-contact__lead {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--muted);
	max-width: 46ch; margin-inline: auto;
}
.mjs-form-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line-strong, #CFC9BB);
	border-radius: 8px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
}
.mjs-form-card .wpforms-container { margin: 0; }
.mjs-contact__elsewhere { text-align: center; border-top: 1px solid var(--wp--preset--color--line); }
.mjs-contact__elsewhere .mjs-social { justify-content: center; }
.mjs-contact__elsewhere .mjs-eyebrow-label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--wp--preset--color--muted);
}

/* About-preview portrait */
.mjs-portrait { margin: 0; }
.mjs-portrait img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* Social icons — logos in the brand palette (navy, oxblood on hover) */
.mjs-social { align-items: center; }
.mjs-social__link {
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	line-height: 0;
	transition: color 0.15s ease;
}
.mjs-social__link:hover,
.mjs-social__link:focus-visible { color: var(--wp--preset--color--oxblood); }
.mjs-social__link svg { width: 20px; height: 20px; display: block; fill: currentColor; }

/* Share row (briefings) — platform-optimized share links */
.mjs-share { display: flex; align-items: center; gap: 0.95rem; flex-wrap: wrap; }
.mjs-share__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--muted); margin-right: 0.15rem;
}
.mjs-share__link,
.mjs-share__copy {
	color: var(--wp--preset--color--accent);
	display: inline-flex; line-height: 0;
	background: none; border: 0; padding: 0; cursor: pointer;
	transition: color 0.15s ease;
}
.mjs-share__link:hover, .mjs-share__link:focus-visible,
.mjs-share__copy:hover, .mjs-share__copy:focus-visible { color: var(--wp--preset--color--oxblood); }
.mjs-share svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.mjs-share__copy { position: relative; }
.mjs-share__copy.is-copied { color: #2f6e50; }
.mjs-share__copy::after {
	content: "Copied";
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%) translateX(-3px);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
	color: #2f6e50; white-space: nowrap;
	opacity: 0; pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.mjs-share__copy.is-copied::after { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Search block — editorial styling for footer, search, and 404 */
.wp-block-search__input {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line-strong, #CFC9BB);
	padding: 0.6rem 0.75rem;
}
.wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-color: var(--wp--preset--color--line-strong, #CFC9BB);
}
.wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	fill: var(--wp--preset--color--base);
}
.wp-block-search__button:hover { background: var(--wp--preset--color--accent-2); }
.mjs-footer__search { max-width: 22rem; }

/* ------------------------------------------------------------------
   WPForms — bring the contact form in line with the editorial system
------------------------------------------------------------------ */
.wpforms-container {
	font-family: var(--wp--preset--font-family--sans);
	/* WPForms modern-markup design tokens → brand palette */
	--wpforms-field-border-radius: 3px;
	--wpforms-field-border-color: var(--wp--preset--color--line-strong, #CFC9BB);
	--wpforms-field-text-color: var(--wp--preset--color--contrast);
	--wpforms-label-color: var(--wp--preset--color--contrast);
	--wpforms-label-sublabel-color: var(--wp--preset--color--muted);
	--wpforms-button-border-radius: 3px;
	--wpforms-button-background-color: var(--wp--preset--color--accent);
	--wpforms-button-background-color-alt: var(--wp--preset--color--accent-2);
	--wpforms-button-text-color: var(--wp--preset--color--base);
	--wpforms-button-text-color-alt: var(--wp--preset--color--base);
}
.wpforms-container .wpforms-field-label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.01em;
}
.wpforms-container .wpforms-required-label { color: var(--wp--preset--color--oxblood); }
.wpforms-container .wpforms-field-description {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="url"],
.wpforms-field input[type="tel"],
.wpforms-field textarea,
.wpforms-field select {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line-strong, #CFC9BB);
	border-radius: 3px;
	padding: 0.7rem 0.8rem;
	box-shadow: none;
}
.wpforms-field input:focus,
.wpforms-field textarea:focus,
.wpforms-field select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}
.wpforms-container button.wpforms-submit {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.01em;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 3px;
	padding: 0.85rem 1.7rem;
	transition: background-color 0.15s ease;
}
.wpforms-container button.wpforms-submit:hover,
.wpforms-container button.wpforms-submit:focus {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
}
.wpforms-confirmation-container-full {
	font-family: var(--wp--preset--font-family--serif);
	background: var(--wp--preset--color--subtle);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--oxblood);
	border-radius: 0 4px 4px 0;
	color: var(--wp--preset--color--contrast);
}

/* ------------------------------------------------------------------
   Ported briefing content — figures, footnote markers, sources
   (from the self-contained briefing HTML; scoped to article prose)
------------------------------------------------------------------ */
.mjs-series {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 2rem;
}
.mjs-prose figure.fig {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	padding: clamp(1rem, 2.5vw, 1.4rem);
	margin: 2.2em 0;
	overflow-x: auto;
}
.mjs-prose figure.fig svg { max-width: 100%; height: auto; display: block; }
.mjs-prose figure.fig figcaption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem; color: var(--wp--preset--color--muted);
	margin-top: 0.75em; line-height: 1.5;
}
/* Figure source tag — small, right-aligned "MJ Sterling · mjsterling.org"
   beneath each caption, matching the social graphics. */
.mjs-prose figure.fig .figattr {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem; text-align: right; margin-top: 0.55em;
}
.mjs-prose sup.fn { font-size: 0.62em; line-height: 0; }
.mjs-prose sup.fn a { color: var(--wp--preset--color--accent); text-decoration: none; }
.mjs-prose sup.fn a:hover { text-decoration: underline; }
.mjs-prose section.sources {
	margin-top: 2.8em; padding-top: 1.4em;
	border-top: 2px solid var(--wp--preset--color--accent);
}
.mjs-prose section.sources h2 { font-size: 1.35rem; margin-bottom: 0.4em; }
.mjs-prose section.sources ol {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem; color: var(--wp--preset--color--muted);
	line-height: 1.55; padding-left: 1.5em; max-width: none;
}
.mjs-prose section.sources li { margin: 0.5em 0; scroll-margin-top: 1.5rem; }
.mjs-prose section.sources li b { color: var(--wp--preset--color--contrast); font-weight: 600; }
.mjs-prose section.sources li a { color: var(--wp--preset--color--accent); }
/* Footnote jump targets clear of any fixed chrome */
.mjs-prose [id^="fn"] { scroll-margin-top: 1.5rem; }
@media print { .mjs-prose figure.fig { break-inside: avoid; } }

/* Common questions ([mjs_faq]) — sits above the sources block, so it takes the
   lighter rule; sources keeps the accent rule as the end-of-article marker.
   Questions are H3s to stay out of the table of contents, and sized down from
   the theme's x-large H3 so they read as questions rather than sections. */
.mjs-prose section.mjs-faq {
	margin-top: 2.8em; padding-top: 1.4em;
	border-top: 1px solid var(--wp--preset--color--line);
}
.mjs-prose section.mjs-faq > h2 { font-size: 1.35rem; margin: 0 0 0.9em; }
.mjs-prose .mjs-faq__item + .mjs-faq__item {
	margin-top: 1.5em; padding-top: 1.5em;
	border-top: 1px solid var(--wp--preset--color--line);
}
.mjs-prose .mjs-faq__q {
	font-size: 1.15rem; line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 0.5em; scroll-margin-top: 2rem;
}
.mjs-prose .mjs-faq__a > p { margin: 0 0 0.75em; }
.mjs-prose .mjs-faq__a > p:last-child { margin-bottom: 0; }
.mjs-prose .mjs-faq__a a { color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------------
   Briefing layout — sticky left-margin table of contents
------------------------------------------------------------------ */
/* Shared by single-briefing.html and single.html: one 44rem article column, so a
   dispatch and a briefing sit on identical edges. Briefings put a sticky TOC in
   column 1; posts leave it empty. Defined once here rather than twice, because
   two copies of a measure drift. */
.mjs-briefing-layout,
.mjs-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(44rem, 100%) minmax(0, 1fr);
	align-items: start;
}
.mjs-briefing-article,
.mjs-article-layout > .mjs-article { grid-column: 2; min-width: 0; }
/* Align the hero, body, and foot to identical edges by dropping the constrained
   layout's root padding on the body/foot. On desktop the head (no padding) and the
   body/foot then all span the full 44rem article column; on mobile the horizontal
   gutter comes from .mjs-briefing-layout's padding-inline (see media query below). */
.mjs-briefing-article > .wp-block-post-content,
.mjs-briefing-article > .mjs-article__foot,
.mjs-article-layout > .mjs-article > .wp-block-post-content,
.mjs-article-layout > .mjs-article > .mjs-article__foot {
	padding-left: 0;
	padding-right: 0;
}

.mjs-toc {
	grid-column: 1; justify-self: end; align-self: start;
	position: sticky; top: 5.5rem;
	width: 12.5rem; margin-right: 2.25rem;
	max-height: calc(100vh - 8rem); overflow-y: auto;
	font-family: var(--wp--preset--font-family--sans);
}
/* Start the TOC level with the briefing's kicker. Uses the logical property and a
   specificity of (0,2,1) to beat WP's flow reset:
   :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }. */
.mjs-briefing-layout > nav.mjs-toc {
	margin-block-start: 3.75rem;
}
.mjs-toc[hidden] { display: none; }
.mjs-toc__label {
	font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
	text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 0.9rem;
}
.mjs-toc__list, .mjs-toc__list ul { list-style: none; margin: 0; padding: 0; }
.mjs-toc__list a {
	display: block; font-size: 0.8125rem; line-height: 1.35;
	color: var(--wp--preset--color--muted); text-decoration: none;
	padding: 0.34rem 0 0.34rem 0.9rem;
	border-left: 2px solid var(--wp--preset--color--line);
	transition: color 0.12s ease, border-color 0.12s ease;
}
.mjs-toc__list a:hover { color: var(--wp--preset--color--contrast); }
.mjs-toc__list a.is-active { color: var(--wp--preset--color--accent); border-left-color: var(--wp--preset--color--oxblood); font-weight: 600; }
.mjs-toc__list .mjs-toc__sub a { padding-left: 1.75rem; font-size: 0.78rem; color: #8a8474; }
.mjs-toc__list .mjs-toc__sub a.is-active { color: var(--wp--preset--color--accent); }

/* Briefing reading column nudged to 44rem so the data figures breathe. Posts
   take the same measure: without this the global 42rem prose rule wins on the
   inner elements while the hero, takeaways box and FAQ sit at the 44rem column
   edge, so a dispatch renders with its body text inset from everything else. */
.mjs-briefing .mjs-prose p,
.mjs-briefing .mjs-prose ul,
.mjs-briefing .mjs-prose ol,
.mjs-briefing .mjs-prose blockquote,
.mjs-article-layout .mjs-prose p,
.mjs-article-layout .mjs-prose ul,
.mjs-article-layout .mjs-prose ol,
.mjs-article-layout .mjs-prose blockquote { max-width: 44rem; }
.mjs-prose h2, .mjs-prose h3 { scroll-margin-top: 2rem; }

/* Mobile: collapsible "Contents" at the top; sidebar hidden */
.mjs-toc-mobile { display: none; }
@media (max-width: 1180px) {
	.mjs-briefing-layout,
	.mjs-article-layout { grid-template-columns: 1fr; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
	.mjs-briefing-article,
	.mjs-article-layout > .mjs-article { grid-column: 1; max-width: 44rem; margin-inline: auto; width: 100%; }
	.mjs-toc { display: none; }
	.mjs-toc-mobile {
		display: block; max-width: 44rem; margin: 1.75rem auto 0;
		border: 1px solid var(--wp--preset--color--line); border-radius: 6px;
		font-family: var(--wp--preset--font-family--sans);
	}
	.mjs-toc-mobile > summary {
		font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
		color: var(--wp--preset--color--muted); padding: 0.85rem 1.1rem; cursor: pointer; list-style: none;
	}
	.mjs-toc-mobile > summary::-webkit-details-marker { display: none; }
	.mjs-toc-mobile > summary::after { content: "▾"; float: right; }
	.mjs-toc-mobile[open] > summary::after { content: "▴"; }
	.mjs-toc-mobile ul { list-style: none; margin: 0; padding: 0 1.1rem 0.9rem; }
	.mjs-toc-mobile a { display: block; font-size: 0.85rem; color: var(--wp--preset--color--muted); text-decoration: none; padding: 0.32rem 0; }
	.mjs-toc-mobile .mjs-toc__sub a { padding-left: 1rem; font-size: 0.8rem; }
}

/* Smooth jump to sections */
html { scroll-behavior: smooth; }

/* Back to top — narrow viewports only (the sticky desktop TOC covers wide screens).
   Rendered on briefings by the mjs-backtotop mu-plugin; hidden until scrolled. */
.mjs-top {
	position: fixed;
	right: clamp(1rem, 4vw, 1.5rem);
	bottom: clamp(1rem, 4vw, 1.5rem);
	z-index: 50;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	box-shadow: 0 2px 12px rgba(27, 26, 23, 0.2);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}
.mjs-top svg { width: 1.15rem; height: 1.15rem; display: block; }
.mjs-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.mjs-top:hover, .mjs-top:focus-visible { background: var(--wp--preset--color--accent-2); border-color: var(--wp--preset--color--accent-2); }
.mjs-top:focus-visible { outline: 2px solid var(--wp--preset--color--oxblood); outline-offset: 2px; }
@media (max-width: 1180px) {
	.mjs-top { display: inline-flex; }
}

/* Section rail — mobile "where am I" anchor pinned to the right edge.
   Built on briefings by the mjs-toc mu-plugin; hidden on wide screens where
   the sticky sidebar TOC already does this job. */
.mjs-railnav {
	display: none;
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 40;
	pointer-events: none;          /* let taps pass through except on the ticks */
}
@media (max-width: 1180px) {
	.mjs-railnav { display: block; }
}
.mjs-rail {
	list-style: none; margin: 0;
	padding: 0 6px 0 0;
	display: flex; flex-direction: column; align-items: flex-end;
	gap: 0.2rem;
	pointer-events: auto;
}
.mjs-rail__seg {
	display: flex; align-items: center; justify-content: flex-end;
	padding: 3px 5px;              /* enlarge the tap target around the hairline tick */
	-webkit-tap-highlight-color: transparent;
}
.mjs-rail__tick {
	display: block;
	width: 2px; height: 15px;
	border-radius: 2px;
	background: var(--wp--preset--color--line);
	transition: background-color 0.18s ease, height 0.18s ease, width 0.18s ease, opacity 0.18s ease;
}
.mjs-rail__seg.is-past .mjs-rail__tick { background: var(--wp--preset--color--muted); opacity: 0.5; }
.mjs-rail__seg.is-active .mjs-rail__tick {
	background: var(--wp--preset--color--oxblood);
	width: 3px; height: 22px; opacity: 1;
}
.mjs-rail__label {
	position: absolute;
	right: 1.15rem; top: 50%;
	transform: translateY(-50%) translateX(0.4rem);
	max-width: 62vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
	color: var(--wp--preset--color--surface);
	background: var(--wp--preset--color--accent);
	padding: 0.32rem 0.62rem;
	border-radius: 3px;
	box-shadow: 0 2px 12px rgba(27, 26, 23, 0.2);
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.mjs-rail__label.is-shown {
	opacity: 1; visibility: visible;
	transform: translateY(-50%) translateX(0);
}

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

/* ------------------------------------------------------------------
   Press / Media kit page
------------------------------------------------------------------ */
.mjs-press { max-width: 60rem; margin: 0 auto; padding: var(--wp--preset--spacing--60) clamp(1.25rem, 5vw, 2rem) var(--wp--preset--spacing--70); }
.mjs-press__title { font-family: var(--wp--preset--font-family--display); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.05; margin: 0.4rem 0 0.6rem; }
.mjs-press__lede { font-family: var(--wp--preset--font-family--serif); font-size: 1.25rem; line-height: 1.5; color: var(--wp--preset--color--muted); max-width: 40rem; margin: 0 0 1.5rem; }
.mjs-press__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; }
.mjs-press__download {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--wp--preset--font-family--sans); font-size: 0.9rem; font-weight: 600;
	color: var(--wp--preset--color--base); background: var(--wp--preset--color--accent);
	padding: 0.7rem 1.3rem; border-radius: 4px; text-decoration: none;
	transition: background-color 0.15s ease;
}
.mjs-press__download:hover { background: var(--wp--preset--color--accent-2); }
.mjs-press__zipnote { font-family: var(--wp--preset--font-family--sans); font-size: 0.78rem; color: var(--wp--preset--color--muted); }

.mjs-press__section { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--line); }
.mjs-press__h2 { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; margin: 0 0 0.5rem; }
.mjs-press__note { font-family: var(--wp--preset--font-family--sans); font-size: 0.9rem; line-height: 1.6; color: var(--wp--preset--color--muted); max-width: 42rem; margin: 0 0 1.5rem; }

.mjs-press__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mjs-press__grid--marks { grid-template-columns: repeat(3, 1fr); max-width: 34rem; }
.mjs-press__asset { margin: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; overflow: hidden; background: var(--wp--preset--color--surface); }
.mjs-press__preview { display: flex; align-items: center; justify-content: center; padding: 1.75rem 1.5rem; min-height: 7rem; }
.mjs-press__preview.is-light { background: var(--wp--preset--color--surface); }
.mjs-press__preview.is-paper { background: var(--wp--preset--color--base); }
.mjs-press__preview.is-dark  { background: var(--wp--preset--color--accent); }
.mjs-press__preview img { max-width: 100%; height: auto; display: block; }
.mjs-press__markimg { width: 4.25rem; height: 4.25rem; }
.mjs-press__asset figcaption { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--sans); }
.mjs-press__name { font-size: 0.8rem; color: var(--wp--preset--color--contrast); }
.mjs-press__asset figcaption a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none; border: 1px solid var(--wp--preset--color--line); border-radius: 3px; padding: 0.25rem 0.55rem; }
.mjs-press__asset figcaption a:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent); }

.mjs-press__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.mjs-press__swatch { display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--wp--preset--font-family--sans); }
.mjs-press__chip { display: block; height: 4.5rem; border-radius: 5px; }
.mjs-press__cname { font-size: 0.85rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
.mjs-press__hex { font-size: 0.78rem; letter-spacing: 0.03em; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }

.mjs-press__type { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mjs-press__face { border: 1px solid var(--wp--preset--color--line); border-radius: 6px; padding: 1.25rem 1.4rem; background: var(--wp--preset--color--surface); }
.mjs-press__specimen { display: block; font-size: 3.25rem; line-height: 1; color: var(--wp--preset--color--contrast); margin-bottom: 0.6rem; }
.mjs-press__facename { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.9rem; font-weight: 600; color: var(--wp--preset--color--contrast); }
.mjs-press__facerole { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.78rem; color: var(--wp--preset--color--muted); margin-top: 0.15rem; }

.mjs-press__bio { border-left: 3px solid var(--wp--preset--color--oxblood); background: var(--wp--preset--color--subtle); border-radius: 0 5px 5px 0; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.mjs-press__biolabel { display: block; font-family: var(--wp--preset--font-family--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: 0.4rem; }
.mjs-press__bio p { font-family: var(--wp--preset--font-family--serif); font-size: 1.05rem; line-height: 1.55; margin: 0; color: var(--wp--preset--color--contrast); }

.mjs-press__portrait { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.mjs-press__portrait img { width: 12rem; height: auto; border-radius: 5px; display: block; }
.mjs-press__credit { font-family: var(--wp--preset--font-family--sans); font-size: 0.82rem; color: var(--wp--preset--color--muted); margin: 0 0 0.6rem; }
.mjs-press__portrait-meta a, .mjs-press__mail { font-family: var(--wp--preset--font-family--sans); font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; }
.mjs-press__portrait-meta a:hover, .mjs-press__mail:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.mjs-press__mail { font-size: 1.15rem; }

@media (max-width: 782px) {
	.mjs-press__grid, .mjs-press__grid--marks, .mjs-press__type { grid-template-columns: 1fr 1fr; }
	.mjs-press__swatches { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.mjs-press__grid, .mjs-press__grid--marks, .mjs-press__type, .mjs-press__swatches { grid-template-columns: 1fr; }
}