/*
Theme Name: Gugelot
Theme URI: https://synth.seancarney.ca
Author: Sean Carney
Description: A personal site theme for a DIY Eurorack synthesizer builder documenting a rack of self-designed modules. Follows the functionalist tradition of the Ulm school and Braun's industrial design programme — strict grid, one neutral grotesque, generous space, and colour reserved entirely for signalling state. Named for Hans Gugelot.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.1
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gugelot
*/

/* ============================================================
   1. RESET — corners, box-sizing (theme spec §4.4)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:where(.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-query,
.wp-block-post-template, img, figure, .wp-block-button__link, input, select,
textarea, .rm-panel, .rm-gap, .rm-faceplate-image-wrap, .rm-grid-photo) {
	border-radius: 0;
}

img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   2. LABEL STYLE — the theme's most-used device (theme spec §3.3)
   ============================================================ */

.is-style-label,
.rm-row-label, .rm-row-capacity,
.rm-spec-heading, .rm-files-heading, .rm-revisions-heading,
.rm-related-heading, .rm-recordings-heading, .rm-photos-heading,
.rm-spec-row dt, .rm-files-meta,
.rm-faceplate-caption,
.rm-module-eyebrow,
.rm-related-hp,
.rm-source-link,
.rm-audio-label,
.rm-grid-title + .rm-grid-meta,
.rm-sort,
.gugelot-tagline,
.gugelot-format-label,
.gugelot-entry-domain,
.gugelot-colophon,
.rm-recordings-date,
nav.gugelot-nav .wp-block-navigation-item__label {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	line-height: 1.2;
}

.rm-faceplate-caption { font-weight: 500; }

/* ============================================================
   3. TYPE — measure, line-height (theme spec §3.4)
   ============================================================ */

.gugelot-note-page .wp-block-post-content,
.wp-block-post-content {
	max-width: var(--wp--style--global--content-size, 680px);
}

.wp-block-post-content :where(h1, h2, h3, h4, h5, h6),
.rm-module-content :where(h1, h2, h3, h4, h5, h6) {
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	margin-top: 13px;
	margin-bottom: 6px;
}

/* ============================================================
   4. HEADER (theme spec §5.3)
   ============================================================ */

.gugelot-header {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: 0;
}

.gugelot-header-row { align-items: flex-end; gap: var(--wp--preset--spacing--40); }

.gugelot-brand { gap: 0; }

.gugelot-wordmark.wp-block-site-title,
.gugelot-wordmark.wp-block-site-title a {
	font-size: var(--wp--preset--font-size--masthead);
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.06;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.gugelot-tagline.wp-block-site-tagline { margin: 0; }

.home .gugelot-tagline,
.single-module .gugelot-tagline {
	display: none;
}

.gugelot-nav {
	font-size: var(--wp--preset--font-size--label);
}

.gugelot-nav .wp-block-navigation-item {
	gap: 16px;
}

.gugelot-nav a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	padding: 0;
}

.gugelot-nav .wp-block-navigation-item.current-menu-item a.wp-block-navigation-item__content,
.gugelot-nav a[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 2px;
}

.gugelot-header-rule.wp-block-separator {
	border: none;
	border-top: var(--wp--custom--rule--heavy) solid var(--wp--preset--color--contrast);
	margin: var(--wp--preset--spacing--40) 0 0;
	width: 100%;
	max-width: none;
	opacity: 1;
}

/* ============================================================
   5. FOOTER (theme spec §5.4)
   ============================================================ */

.gugelot-footer {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.gugelot-colophon a { color: var(--wp--preset--color--secondary); }

/* ============================================================
   6. FRONT PAGE — RACK (theme spec §6)
   ============================================================ */

.gugelot-rack-page { padding-top: var(--wp--preset--spacing--60); }

.rm-rack { display: block; }

/* 6.1 Summary statistics */

.rm-rack-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--60);
}

.rm-stat { margin: 0; }

.rm-stat dt {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin-bottom: 4px;
}

.rm-stat dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--contrast);
}

.rm-stat-unit {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	letter-spacing: 0;
}

/* 6.2 Rack */

.rm-rack-rows {
	background: var(--wp--custom--color--rack-ground);
	padding: 12px;
}

.rm-rack-row + .rm-rack-row { margin-top: var(--wp--preset--spacing--30); }

.rm-row-meta {
	display: flex;
	justify-content: space-between;
	color: #7E7D79;
	margin-bottom: 6px;
}
.rm-row-meta .rm-row-label, .rm-row-meta .rm-row-capacity { color: #7E7D79; }

.rm-row-scroll {
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--secondary) transparent;
	-webkit-overflow-scrolling: touch;
}

.rm-row-panels {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 640px;
	/* Height as a function of however wide this row actually renders —
	   not a fixed pixel value — so it stays physically true at every
	   viewport and column width, not just at two hand-picked breakpoints.
	   --rm-row-ratio (width/height) comes from the row's own HP capacity
	   (blocks/rack/rack.php); 3.32 ≈ 84 HP is the fallback for a row the
	   plugin didn't supply a capacity for. */
	aspect-ratio: var(--rm-row-ratio, 3.32);
}

.rm-panel, .rm-gap {
	flex: 1 1 0;
	flex-grow: var(--rm-hp, 1);
	/* Flex items default to min-width: auto, not 0 — meaning without this,
	   a panel's floor is set by its own content's intrinsic size (here, the
	   faceplate <img>'s natural width), not by anything declared in this
	   file. That's what was still forcing slim modules wide after the
	   explicit 44px floor was removed: removing an explicit min-width isn't
	   the same as actually setting min-width: 0. This is also what the
	   plugin spec calls for directly (flex-basis: 0 *and* min-width: 0) —
	   the flex-basis half was already here, this was the missing half.
	   .rm-row-panels' own 640px min-width (with horizontal scroll below
	   that) is what protects the row as a whole from collapsing too small —
	   individual panels don't need their own floor. */
	min-width: 0;
	position: relative;
}

.rm-panel {
	border-right: 1px solid var(--wp--preset--color--contrast);
}

.rm-panel a {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
	outline-offset: -2px;
}

.rm-panel a:hover,
.rm-panel a:focus-visible {
	/* signal-lit, not primary: this marker sits on --rack-ground, and
	   signal-lit is the amber variant calibrated for that ground (8.2:1
	   vs. primary's 3.3:1, meant for paper) — theme spec §2.2/§2.3. */
	outline: 2px solid var(--wp--custom--color--signal-lit);
	outline-offset: -2px;
}

.rm-panel .rm-faceplate-image {
	height: 100%;
	width: 100%;
	/* cover, not contain: real photos are never pixel-perfect to the
	   5.08mm/HP crop standard (two 12 HP faceplates on the live site
	   render at 141px and 145px wide at the same height — a ~2-3% real
	   photo-to-photo variance), and with `contain` that shows up as
	   slightly different letterboxing per panel — reading as modules of
	   different heights. `cover` guarantees every panel fills the row
	   exactly; the trade-off is a sliver cropped off whichever edge a
	   given photo runs slightly long on, which at this margin is not
	   visible in practice. */
	object-fit: cover;
}

.rm-panel[data-rm-medium="artwork"] .rm-faceplate-image {
	opacity: 0.6;
}
.rm-panel[data-rm-medium="artwork"] {
	outline: 1px dashed #5A5A57;
	outline-offset: 0;
}

.rm-panel[data-rm-medium="placeholder"],
.rm-gap {
	outline: 1px dashed #5A5A57;
	outline-offset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rm-panel[data-rm-medium="placeholder"] { outline-offset: -1px; }

.rm-placeholder-hp {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #7E7D79;
}

.rm-gap {
	color: #565654;
	font-size: 9px;
	font-weight: 600;
}

/* 6.3 Specification table */

.rm-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: var(--wp--preset--spacing--70);
	font-size: 13px;
}

.rm-spec-table thead th {
	text-align: left;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	border-bottom: var(--wp--custom--rule--medium) solid var(--wp--preset--color--contrast);
	padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
}

.rm-spec-table tbody td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--custom--color--rule-light);
}

.rm-spec-table tbody tr:last-child td { border-bottom: none; }

.rm-spec-table .rm-num,
.rm-spec-table td:nth-child(3),
.rm-spec-table td:nth-child(4) {
	font-variant-numeric: tabular-nums;
}

.rm-spec-table a { color: var(--wp--preset--color--contrast); }

/* ============================================================
   7. SINGLE MODULE (theme spec §7)
   ============================================================ */

.gugelot-module-page { padding-top: var(--wp--preset--spacing--60); }

.rm-module-layout {
	display: grid;
	grid-template-columns: 0.72fr 2fr;
	gap: var(--wp--preset--spacing--50);
}

@media (max-width: 900px) {
	.rm-module-layout {
		grid-template-columns: 1fr;
	}
	.rm-module-data { order: 1; }
	.rm-module-prose { order: 2; }
}

.rm-module-layout[data-rm-layout="compact"] {
	grid-template-columns: 1fr;
	max-width: 680px;
}

/* 7.1 Data column */

.rm-faceplate {
	margin: 0;
	background: var(--wp--custom--color--rack-ground);
	padding: 9px;
}

.rm-faceplate-image-wrap {
	display: flex;
	justify-content: center;
}

.rm-faceplate .rm-faceplate-image {
	max-height: 200px;
	width: auto;
	height: auto;
}

.rm-faceplate[data-rm-medium="artwork"] .rm-faceplate-image { opacity: 0.6; }
.rm-faceplate[data-rm-medium="artwork"] .rm-faceplate-image-wrap {
	outline: 1px dashed #5A5A57;
	outline-offset: 0;
}
.rm-faceplate[data-rm-medium="placeholder"] .rm-faceplate-image-wrap {
	outline: 1px dashed #5A5A57;
	outline-offset: 0;
	min-height: 120px;
	align-items: center;
}
.rm-faceplate[data-rm-medium="placeholder"] .rm-placeholder-hp { color: #7E7D79; }

.rm-faceplate-caption { text-align: center; margin-top: var(--wp--preset--spacing--20); }

.rm-spec, .rm-files {
	margin-top: var(--wp--preset--spacing--60);
}

.rm-spec-heading, .rm-files-heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	border-bottom: var(--wp--custom--rule--medium) solid var(--wp--preset--color--contrast);
	padding-bottom: var(--wp--preset--spacing--20);
}

.rm-spec-list, .rm-files-list { margin: 0; }

.rm-spec-row {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--custom--color--rule-light);
	margin: 0;
	position: relative;
}
.rm-spec-row:last-child { border-bottom: none; }

.rm-spec-row dt {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 13px;
}

.rm-spec-row dd {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	font-size: 13px;
}

.rm-spec-status[data-rm-status]:not([data-rm-status="built"]) {
	padding-left: var(--wp--preset--spacing--20);
}
.rm-spec-status[data-rm-status]:not([data-rm-status="built"])::before {
	content: "";
	position: absolute;
	left: -2px;
	top: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	width: 2px;
	background: var(--wp--preset--color--primary);
}

.rm-files-row {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20) 0;
	border-bottom: 1px solid var(--wp--custom--color--rule-light);
	margin: 0;
	align-items: baseline;
}
.rm-files-row:last-child { border-bottom: none; }

.rm-files-link {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	font-size: 13px;
	display: block;
}

.rm-files-contents {
	display: block;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

.rm-files-meta {
	text-align: right;
	color: var(--wp--preset--color--secondary);
}

/* 7.2 Prose column */

.rm-module-eyebrow { margin: 0 0 var(--wp--preset--spacing--20); }

.rm-title-rule {
	height: var(--wp--custom--rule--heavy);
	background: var(--wp--preset--color--contrast);
	margin-bottom: var(--wp--preset--spacing--20);
}
.rm-title-rule[data-rm-status]:not([data-rm-status="built"]) {
	background: var(--wp--preset--color--primary);
}

.rm-module-title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.04em;
	margin: 0 0 var(--wp--preset--spacing--40);
}

.rm-module-excerpt {
	font-size: var(--wp--preset--font-size--large);
	color: #3A3A38;
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* Title→excerpt, excerpt→audio, and audio→content (or excerpt→content when
   there's no audio) all resolve to the same 16px (spacing-40) gap via
   normal margin collapsing — .rm-audio's own margin is spacing-40 on both
   sides too. Was 12/16/24px in three different places, none matching the
   others, purely because each rule had been set independently without
   checking what it collapsed against. */
.rm-module-content { margin-top: var(--wp--preset--spacing--40); }

.rm-photos { margin-top: var(--wp--preset--spacing--60); }
.rm-photos-list {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--30);
}
.rm-photos-item { background: var(--wp--custom--color--rack-ground); }
.rm-photos-image { width: 100%; height: auto; }
.rm-photos-caption {
	display: block;
	padding: var(--wp--preset--spacing--10) 0 0;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.rm-revisions, .rm-related, .rm-recordings {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--tertiary);
}

.rm-recordings-list {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.rm-recordings-row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}
.rm-recordings-row a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.rm-recordings-row a:hover { text-decoration: underline; }

@media (min-width: 640px) {
	.rm-module-prose > .rm-revisions,
	.rm-module-prose > .rm-related {
		display: inline-grid;
	}
}

/* 7.4 Revision log */

.rm-revisions-list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }

.rm-revision-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
}

.rm-revision-letter {
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.rm-revision-date {
	display: inline-block;
	margin-right: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--wp--preset--color--secondary);
}

.rm-revision-note {
	font-size: 12px;
	font-weight: 400;
	color: #4A4A48;
}

.rm-revision-row[data-rm-built="false"] .rm-revision-letter {
	color: var(--wp--preset--color--secondary);
}
.rm-revision-row[data-rm-built="false"] .rm-revision-note {
	font-style: italic;
}

/* 7.5 Related and attribution */

.rm-related-list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }

.rm-related-row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.rm-related-name {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rm-related-name:hover { text-decoration: underline; }

.rm-related-hp { white-space: nowrap; }

.rm-source { margin-top: var(--wp--preset--spacing--30); }

.rm-source-link {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rm-source-link:hover { text-decoration: underline; }

/* 7.6 Audio */

.rm-audio {
	border-top: var(--wp--custom--rule--medium) solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--tertiary);
	padding: var(--wp--preset--spacing--30) 0;
	margin: var(--wp--preset--spacing--40) 0;
}

.rm-audio-label { margin: 0 0 var(--wp--preset--spacing--20); }

.rm-audio-element {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rm-audio-js .rm-audio-element { display: none; }
.rm-audio-js .rm-audio-control { display: flex; }
.rm-audio-control {
	display: none;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}
/* No-JS fallback: native controls stay visible and usable (theme spec §7.6) */
.rm-audio:not(.rm-audio-js) .rm-audio-element {
	position: static;
	width: 100%;
	height: auto;
	clip: auto;
	overflow: visible;
	white-space: normal;
}

.rm-audio-play {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.rm-audio-play-icon {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent var(--wp--preset--color--base);
}

.rm-audio.is-playing .rm-audio-play-icon {
	margin-left: 0;
	width: 8px;
	height: 10px;
	border-style: none;
	border-width: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 4px 0 0 var(--wp--preset--color--base);
}

.rm-audio-progress {
	flex: 1 1 auto;
	height: 2px;
	background: var(--wp--preset--color--tertiary);
	position: relative;
	cursor: pointer;
}

.rm-audio-elapsed {
	position: absolute;
	inset: 0;
	width: 0%;
	background: var(--wp--preset--color--contrast);
}

.rm-audio-caption {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--secondary);
}

/* ============================================================
   8. MODULE ARCHIVE (theme spec §8)
   ============================================================ */

.gugelot-archive-page { padding-top: var(--wp--preset--spacing--60); }

.rm-grid { display: block; }

.rm-sort {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--50);
}

.rm-sort a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.rm-sort a[aria-current="true"] {
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 2px;
}

.rm-grid-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
}

.rm-grid-item {
	/* CSS Grid stretches every item in a row to match the tallest by
	   default. A two-line title elsewhere in the row was stretching every
	   item's <li>, and since the photo box below had flex:1, it absorbed
	   that extra height — growing or shrinking per item depending on how
	   tall *that item's own* title happened to be, so images drifted off
	   a shared baseline instead of lining up. align-self: start opts this
	   item out of the stretch: it sizes to its own natural content height
	   and any leftover row height just shows as empty space below it. */
	align-self: start;
}

.rm-grid-item a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.rm-grid-photo {
	background: var(--wp--custom--color--rack-ground);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--wp--preset--spacing--20);
	/* Fixed, not flex-grown — every photo box is identically sized
	   regardless of how many lines its own title wraps to, so faceplates
	   land on a genuinely common baseline (theme spec §8). 150px image
	   max-height + 8px padding top and bottom. */
	height: calc(150px + 2 * var(--wp--preset--spacing--20));
}

.rm-grid-photo .rm-faceplate-image {
	max-height: 150px;
	width: auto;
	height: auto;
}

.rm-grid-photo[data-rm-medium="artwork"] .rm-faceplate-image { opacity: 0.6; }
.rm-grid-photo[data-rm-medium="artwork"],
.rm-grid-photo[data-rm-medium="placeholder"] {
	outline: 1px dashed #5A5A57;
	outline-offset: -1px;
}
.rm-grid-photo[data-rm-medium="placeholder"] .rm-placeholder-hp { color: #7E7D79; }

.rm-grid-title {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--tertiary);
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.rm-grid-meta {
	display: block;
	margin-top: 4px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--label);
}

/* ============================================================
   9. POST FORMATS (theme spec §9)
   ============================================================ */

.gugelot-notes-page, .gugelot-note-page { padding-top: var(--wp--preset--spacing--60); }

.gugelot-notes-item + .gugelot-notes-item {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--tertiary);
}

.gugelot-format-label { margin: 0 0 var(--wp--preset--spacing--10); }

.gugelot-entry-title { margin: 0 0 var(--wp--preset--spacing--20); }
.gugelot-entry-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.gugelot-entry-title a:hover { text-decoration: underline; }

/* Quote */
.single-format-quote .wp-block-post-content,
.format-quote .gugelot-notes-item .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--large);
	border-left: 4px solid var(--wp--preset--color--contrast);
	padding-left: 11px;
}
.single-format-quote .gugelot-entry-title {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}
.single-format-quote .gugelot-entry-title a { color: inherit; }

/* Link */
.gugelot-entry-title--link a {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
}
.gugelot-entry-domain {
	margin: 4px 0 var(--wp--preset--spacing--20);
}

/* Aside */
.single-format-aside .wp-block-post-content,
.format-aside .gugelot-notes-item .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--small);
}
@media (min-width: 640px) {
	.single-format-aside .wp-block-post-content {
		margin-left: var(--wp--preset--spacing--70);
	}
}
.single-format-aside .gugelot-entry-title,
.format-aside .gugelot-notes-item .gugelot-entry-title {
	display: none;
}

/* Image / Video */
.single-format-image .wp-block-post-content img,
.single-format-video .wp-block-post-content .wp-block-embed {
	width: 100%;
}
.single-format-image figcaption,
.single-format-video figcaption {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* Audio — reuses the rack-modules player frame (theme spec §7.6) via the
   .gugelot-audio/.rm-audio shared hook in audio-control.js. Native core
   audio blocks inside Audio-format posts get the same bounding rules. */
.single-format-audio .wp-block-audio {
	border-top: var(--wp--custom--rule--medium) solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--tertiary);
	padding: var(--wp--preset--spacing--30) 0;
	margin: var(--wp--preset--spacing--40) 0;
}

/* ============================================================
   10. ACCESSIBILITY (theme spec §10)
   ============================================================ */

/* General double focus ring (theme spec §10): 2px primary inner, 1px
   contrast outer, 2px offset. Rack panels keep their own inset ring from
   §6.2 instead — excluded here so the two treatments don't collide. */
:where(a, button, input, select, textarea, [tabindex]):not(.rm-panel a):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--contrast);
}

.rm-audio-progress:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--contrast);
}

.screen-reader-text,
.gugelot-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.gugelot-skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	z-index: 100;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}