/*
Theme Name: Melbourne Dusk
Theme URI: https://maxshifman.com
Author: Max Shifman
Author URI: https://maxshifman.com
Description: Max Shifman's personal theme — the "Melbourne Dusk" palette (page #F1F4F9, band #161A33, steel-teal accent #4A9CB0 with accent ink #17505F, cool-green secondary #3A957E) in Manrope + JetBrains Mono. Block theme: colours, type scale and spacing are all editable in the Site Editor.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 2.7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: melbourne-dusk
Tags: block-theme, one-column, custom-colors, custom-typography, editor-style, full-site-editing, block-patterns
*/

/* ---------------------------------------------------------------------------
   Melbourne Dusk — the parts theme.json cannot express.

   CONTRAST DISCIPLINE (measured on the brand sheet, do not "brighten" casually):
     • #4A9CB0 (--accent) is an ON-BAND accent: 6.12:1 on the #161A33 band, but
       only 2.85:1 on the #F1F4F9 page. Use it ONLY on the band.
     • Accent TEXT on the light ground is #17505F (accent-ink, 8.94:1 on white);
       accent FILLS with white text are #2F7F93 (accent-solid, 4.59:1).
     • Secondary #3A957E is on-band only; on white use #1A6150.
   --------------------------------------------------------------------------- */

/* Kicker: the mono eyebrow used above headings and in cards. */
.is-style-kicker,
.wp-block-post-date.is-style-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-ink);
	margin-bottom: var(--wp--preset--spacing--20);
}

/* On the band, the same kicker takes the on-band accent. */
.has-band-background-color .is-style-kicker {
	color: var(--wp--preset--color--accent);
}

/* Quiet meta line (dates, role lines, footnotes). */
.is-style-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* Card: the one container style used for posts and panels. */
.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--card);
}

/* A card that links out lifts on hover so the whole panel reads as clickable
   without needing JS. */
@media (prefers-reduced-motion: no-preference) {
	.is-style-card {
		transition: box-shadow 140ms ease, border-color 140ms ease;
	}
}
.is-style-card:hover {
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: var(--wp--preset--color--accent-tint);
}

/* In a query grid, let each card fill its row so titles of different lengths
   do not leave ragged bottoms. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}
.wp-block-post-template.is-layout-grid > li > .is-style-card {
	flex: 1 1 auto;
	width: 100%;
}

/* Hairline rule that reads as a rule, not a border. */
.is-style-hairline {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
	opacity: 1;
}

/* Links inside body copy get a heavier, offset underline so colour is never the
   only signal (the sheet's own rule: the accent ink sits 2.95:1 from body text). */
.entry-content a,
.wp-block-post-content a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
	text-decoration-thickness: 2px;
}

/* Focus ring — visible on both grounds, teal family, never removed. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-solid);
	outline-offset: 2px;
	border-radius: 2px;
}
.has-band-background-color :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

::selection {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
}

/* Header: the band holds a hairline so the nav reads as chrome, not content. */
.md-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Wordmark lockup — the site wordmark is set to match the document/email
   masthead, which is uppercase and letter-spaced. Decided by Max on card
   t_985cde59 ("uppercase if it looks better") after an A/B render: a bare
   `text-transform: uppercase` at the old `-0.02em` tracking read *worse* than
   title case (capitals collided), so the case change carries tracking, and the
   header wordmark takes the same 700 the footer already used. Both losing
   variants are kept as evidence in the theme repo, not in this theme:
   /root/infra/wordpress/preview/wordmark-ab/ (see also README §Brand decisions). */
.md-header .wp-block-site-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.md-header .wp-block-site-title a {
	color: var(--wp--preset--color--on-band);
	text-decoration: none;
}
/* The footer carries the same lockup one step larger — only case and tracking
   are added here; the block itself sets 20px/700. The copyright line below it
   is a plain paragraph and is deliberately untouched. */
footer .wp-block-site-title {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.md-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}
.md-header .wp-block-site-tagline {
	color: var(--wp--preset--color--on-band-dim);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 2px;
}
/* THE NAV CONTRAST TRAP — do not "simplify" these selectors.
   The navigation block hard-sets `color: inherit` on every link, using a
   DOUBLED class:
     .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   That is (0,3,0). It out-specifies an ordinary theme rule such as
   `.md-header .wp-block-navigation a` (0,2,1), which is what used to live here
   — so the rule looked right, matched, and lost anyway. The link then inherited
   from the nearest coloured ancestor, which was `body`
   (theme.json styles.color.text = #2E3A4E), and #2E3A4E on the band #161A33 is
   **1.49:1** — the header and footer menus were effectively invisible.
   Two independent anchors fix it, so neither a core edit to that selector nor a
   colour added to an ancestor can silently break it again:
     1. the colour is set on the container, which is what `inherit` reads; and
     2. the link rule carries core's own doubled class, giving (0,4,0).
   Measured on the live band: on-band #F2F6FB 15.74:1, on-band-dim #9FB0C4
   7.71:1, accent hover #4A9CB0 5.43:1 — all pass WCAG AA. */
.md-header .wp-block-navigation,
.md-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-band);
}
/* The footer carries the same menu one step dimmer, matching its dim tagline and
   copyright line. It needs the identical treatment for the identical reason. */
footer .wp-block-navigation,
footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--on-band-dim);
}
.md-header .wp-block-navigation a,
footer .wp-block-navigation a {
	text-decoration: none;
}
.md-header .wp-block-navigation a {
	font-weight: 500;
}
/* Hover/focus must carry the SAME doubled class as the base rule above. A plain
   `a:hover` is (0,3,1) and the base rule is (0,4,0), so a plain hover loses on
   colour — the underline still appears (the base rule sets no text-decoration),
   which is exactly what makes this hide. Verified by really hovering the live
   link: underline yes, colour no. */
.md-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.md-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus,
footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
footer .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.md-header .wp-block-navigation__responsive-container-open,
.md-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--on-band);
}

/* Hero: display type on the band, tagline in the dim on-band tone. */
.md-hero h1,
.md-hero .wp-block-site-title {
	color: var(--wp--preset--color--on-band);
}
.md-hero .wp-block-post-title,
.md-hero .wp-block-heading {
	color: var(--wp--preset--color--on-band);
}
.md-hero .md-hero-lede {
	color: var(--wp--preset--color--on-band-dim);
}

/* Post cards in the archive/query loops. */
.md-card-link {
	text-decoration: none;
	color: inherit;
}
.wp-block-post-title a {
	text-decoration: none;
}
.wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* Embeds and third-party widgets (Instagram/LinkedIn) sit inside the grid. */
.wp-block-embed,
.tagembed-widget {
	max-width: 100%;
}

/* Media: never overflow the column on small screens. */
img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: no-preference) {
	a,
	button {
		transition: color 120ms ease, background-color 120ms ease,
			text-decoration-color 120ms ease;
	}
}

/* ---------------------------------------------------------------------------
   Home hero — the band leads with the latest piece, not with the name.

   The name is present for search engines and screen readers as an h1 with
   .md-visually-hidden; nothing on screen repeats the header wordmark.
   --------------------------------------------------------------------------- */
.md-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* Accent bar: a short, deliberate rule — the one piece of pure decoration.
   WordPress centres every child of a constrained-layout container with
   `margin-left/right: auto !important`, so a bare separator always lands in the
   *middle* of the band. Two tempting fixes are both wrong:
     - `margin-left: 0 !important` does win the cascade (higher specificity than
       the :where() rule) but it drags the bar to the *container's* edge, 120px
       left of the text column, because the centring is what puts a child inside
       the content column in the first place.
     - `"align":"left"` (class `alignleft`) is excluded from that rule, so it has
       the same effect: the bar escapes the column and sits on the wide edge.
   The correct fix is structural: the separator is wrapped in a flex group
   (handled in front-page.html), which makes it a flex item. Flex items are not
   subject to the auto-margin rule, so plain `margin-left: 0` below aligns it
   flush with the heading, inside the column. */
.wp-block-separator.is-style-accent-bar {
	width: 72px;
	max-width: 72px;
	height: 3px;
	min-height: 3px;
	border: 0;
	background-color: var(--wp--preset--color--accent);
	margin-left: 0;
	margin-right: auto;
	opacity: 1;
}

/* The static social proof on the band.
   It replaced the dynamic featured piece, and it deliberately holds the type
   size the featured headline used to hold (x-large, the theme's h2 step) rather
   than introducing a display size the design system does not have. */
.md-proof {
	border: 0;
	margin: 0 0 var(--wp--preset--spacing--50) 0;
	padding: 0;
	/* THE MEASURE IS NOT HERE, and that was the bug. `ch` resolves against this
	   element's own font-size — the blockquote inherits the 16px body size —
	   while the quote itself is set at the fluid x-large step (25.6px → 36px on
	   the paragraph). `max-width: 25ch` was therefore a FIXED 244px that ignored
	   the type scale, and the ≤900px rule below then deleted it outright. Net
	   effect was three different wraps: one line at 600–768px (stacked column
	   wide enough to swallow the whole quote), two at 360–480px, three from
	   1024px up. The measure belongs on the paragraph, where the type size is. */
	/* Core centres any max-width child of a constrained-layout container with
	   `margin-left/right: auto !important` (:where() keeps that selector's
	   specificity at zero, but `!important` still beats a plain declaration).
	   The quote carries `max-width: 25ch`, so it was being centred ~150px inside
	   the copy column — measured: bar 73px, quote 223px, kicker and prose 73px —
	   which left the accent bar stranded in the margin, unaligned with the text
	   it introduces. Pin the left edge to the column and let the right margin
	   absorb the remainder; `!important` is the only way past core's own. */
	margin-left: 0 !important;
	margin-right: auto !important;
}

.md-proof p {
	color: var(--wp--preset--color--on-band);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
	/* TWO LINES, AT EVERY WIDTH — the decided lockup (Max, 2026-09-23). `ch`
	   here scales with the quote's own fluid size, and the paragraph is a child
	   of an `is-layout-flow` block, so core's constrained-layout auto-margins do
	   not touch it (see the .md-proof note above and the quirks).
	   Why 21ch: the quote is ~19.8 × font-size wide, so balance holds two lines
	   while the measure M satisfies S/2 ≤ M < S — at 36px that is 16ch…32ch, and
	   at the narrow end M is bounded by the column rather than this value. 21ch
	   sits mid-window, with margin on both sides: 461px at 36px (2 lines in the
	   545px desktop column), 334px at the 26px mobile size (2 lines in a 281px
	   column). Too small and the mobile wrap breaks to three lines; too large and
	   the wider stacked columns run it back onto one. Verified 320–1920px. */
	max-width: 21ch;
}

.md-proof cite {
	color: var(--wp--preset--color--on-band-dim);
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	margin-top: var(--wp--preset--spacing--30);
}

.md-proof cite a {
	color: var(--wp--preset--color--on-band-dim);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.md-proof cite a:hover,
.md-proof cite a:focus {
	color: var(--wp--preset--color--accent);
}

/* The identity block moved onto the band, so everything the page content brings
   with it has to be re-toned: the site's reading colours are dark-on-light.
   Single-class selectors on purpose — the kicker and meta rules above are more
   specific and must still win. */
.md-hero-copy p,
.md-hero-copy li {
	color: var(--wp--preset--color--on-band);
}

.md-hero-copy a {
	color: var(--wp--preset--color--accent);
}

.md-hero-band .is-style-meta,
.md-hero-band .is-style-meta a {
	color: var(--wp--preset--color--on-band-dim);
}

/* The credits: three stacked rows on the band rather than a row of white cards,
   which would be a wall of light in the middle of the dark column. */
.md-hero-copy .md-role-cards {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--wp--preset--spacing--40);
}

.md-hero-copy .md-role-cards > .wp-block-column {
	flex-basis: auto;
	width: 100%;
}

/* On the band a credit is a *row*, so the dot can no longer be the marker that
   sat at the top of a card: stacked, it stranded itself on a line of its own
   above the label, with flex gap on either side of it (Max: "Are the lines and
   dots meant to be split from the job titles?"). The dot becomes an inline
   bullet on the label's own line, so line + dot + label + title read as one
   unit. The hairline above each row is the separator and stays. */
.md-hero-copy .md-role-card {
	align-items: start;
	background: transparent;
	border: 0;
	border-radius: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	column-gap: 0.7rem;
	display: grid;
	grid-template-columns: auto 1fr;
	row-gap: 0.4rem;
	/* !important is required: the card's padding comes from the block's own
	   inline style attribute, which a class rule cannot outrank. */
	padding: 1.1rem 0 !important;
}

/* The dot is an empty aria-hidden paragraph, so it is placed explicitly — column
   1 against the label's column 2 — rather than left to auto-placement. */
.md-hero-copy .md-role-card .md-role-dot {
	/* Centred in the label's grid row rather than nudged with a margin: the label
	   is letterspaced mono with a tall line box, so any pixel offset guessed here
	   drifts the moment the type scale or the label copy changes. */
	align-self: center;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.md-hero-copy .md-role-card .is-style-kicker,
.md-hero-copy .md-role-card .md-role-value {
	grid-column: 2;
}

/* As a grid item the label would keep the global 20px paragraph top margin, so
   its box sat 20px below the row it is in and dragged the dot's centre 10px off
   the label's. The row gap owns the spacing in this layout. */
.md-hero-copy .md-role-card .is-style-kicker {
	margin-top: 0;
}

.md-hero-copy .md-role-card .md-role-value {
	color: var(--wp--preset--color--on-band);
}

/* The networks' own pill colours (an almost-black X on a near-black band)
   disappear here, so on the band the social links take the neutral panel. */
.md-hero-copy .wp-block-social-link {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.md-hero-copy .wp-block-social-link a {
	color: var(--wp--preset--color--on-band);
}

.md-hero-copy .wp-block-social-link svg {
	fill: currentColor;
}

/* Featured-image thumbnails inside the query cards. */
.md-card-thumb,
.wp-block-post-featured-image.md-card-thumb {
	margin: 0 0 var(--wp--preset--spacing--20) 0;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0;
}
.md-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------------
   Front-page section headers — the heading + "All …" pair on each grid row.

   As a space-between flex row the pair wraps the link onto a second line once
   the two no longer fit, and they run out at *different* widths, because the
   strings differ in length: measured at the 14px / 1.96px-tracked kicker,
   "Recent Articles" + "All articles →" need 293px and "Recent Commentary" +
   "All commentary →" need 331px. Any viewport between those two measures
   (≈373–410px, which is exactly where 390px phones sit) therefore rendered the
   two sibling rows differently — one kept its link inline, the other dropped it
   below the heading. Wrapping is text-length-dependent and so is not a rule.

   Stack the pair together below 480px, where the longer row needs 331px of a
   335px measure, so both rows read the same at every width. Above it both fit
   inline with ≥80px of headroom. Do not "fix" this by shrinking the kicker's
   tracking: that is the site-wide type treatment, and re-tuning it for one
   label would desynchronise the kicker from every other one on the site.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.md-section-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------------
   Home hero — the identity band.

   The band now carries the whole identity block: the static social proof, then
   the page's own content (the former About copy) beside the portrait. Nothing in
   it is dynamic, so it cannot go stale or reprint a headline that the Recent
   Articles grid below is also printing — the newest writing lives in that grid.

   The portrait is the front page's *featured image*, so replacing the
   photograph is an upload in the Media Library rather than a template edit. Its
   frame fills the column's full height and the photograph is cropped to it
   (50% 18% keeps the face in frame), so a replacement image of any aspect ratio
   still composes. The mask is the site's squircle: top-left rounded, the other
   three corners square, the bottom edge flush with the band (the hero group's
   bottom padding is 0) so the photograph sits *in* the band, not on it.
   --------------------------------------------------------------------------- */
.md-hero-grid {
	align-items: stretch;
	margin-bottom: 0;
}

.md-hero-copy {
	max-width: 36rem;
}

/* The portrait column is a flex column so the frame can fill its height. */
.md-hero-grid > .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
}

.md-hero-portrait,
.wp-block-post-featured-image.md-hero-portrait {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
	width: 100%;
	line-height: 0;
}

.md-hero-portrait img {
	/* flex-basis 0 + grow: the image takes exactly the frame's height, and
	   object-fit crops the photograph into it. */
	flex: 1 1 0;
	min-height: 420px;
	width: 100%;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 200px 0 0 0;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 0;
}

/* Role cards — the credits row, three up on the light ground. Equal heights
   regardless of how long the organisation name is. (On the band they are
   overridden into stacked rows; see the hero block above.) */
.md-role-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.md-role-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.md-role-card .is-style-kicker {
	margin-bottom: 0;
}

.md-role-card .md-role-value {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	line-height: 1.3;
	margin: 0;
}

/* The accent dot on each card. Decorative only, so it is not announced. */
.md-role-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-solid);
	margin: 0 0 var(--wp--preset--spacing--30) 0;
	padding: 0;
}

/* Stacked hero: the photograph goes under the copy at a fixed height — the
   flex-fill above has no definite height to fill once the columns stack. Below
   782px WordPress stacks the columns itself. */
@media (max-width: 900px) {
	/* The quote's measure used to be unset here; it now scales with the type on
	   .md-proof p, so it needs no override at any width. */

	.md-hero-portrait img {
		flex: 0 0 auto;
		height: 380px;
		min-height: 0;
		border-radius: 140px 0 0 0;
		object-position: 50% 14%;
	}
}

/* ---------------------------------------------------------------------------
   Contact form — the only interactive form on the site. Inputs are plain
   surface-and-rule fields so the page still reads as a document, and the
   button is the one filled control in the whole design.
   --------------------------------------------------------------------------- */

.md-link-cta {
	color: var(--wp--preset--color--accent-ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.md-contact {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 620px;
}

.md-form-notice {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-left-width: 3px;
	border-radius: 6px;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 12px 16px;
}

.md-form-notice.is-good {
	border-left-color: var(--wp--preset--color--good);
}

.md-form-notice.is-warn {
	border-left-color: var(--wp--preset--color--warn);
}

.md-form-notice.is-bad {
	border-left-color: var(--wp--preset--color--bad);
}

/* Honeypot: out of the visual flow but not display:none, because some bots skip
   hidden inputs while every human (and no screen reader user) lands here. */
.md-hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.md-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.md-field label {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.md-field input,
.md-field textarea {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	font: inherit;
	padding: 12px 14px;
	width: 100%;
}

.md-field input:focus,
.md-field textarea:focus {
	border-color: var(--wp--preset--color--accent-ink);
	outline: 2px solid var(--wp--preset--color--accent-ink);
	outline-offset: 1px;
}

.md-submit {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.md-button {
	background: var(--wp--preset--color--accent-solid);
	border: 0;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 12px 24px;
}

.md-button:hover,
.md-button:focus-visible {
	background: var(--wp--preset--color--accent-ink);
}

.md-form-meta {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------------------------------------------------------------------------
   Analytics notice — deliberately quiet, sits on the band palette, keyboard
   dismissible, and only rendered once a dismissal is not already stored.
   --------------------------------------------------------------------------- */
.md-cookie {
	position: fixed;
	left: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	z-index: 100;
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 860px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--band);
	color: var(--wp--preset--color--on-band);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--lift);
}
.md-cookie[hidden] {
	display: none;
}
.md-cookie__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--on-band-dim);
}
.md-cookie__text a {
	color: var(--wp--preset--color--accent);
}
.md-cookie__dismiss {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--on-band);
	cursor: pointer;
}
.md-cookie__dismiss:hover,
.md-cookie__dismiss:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--band);
}