/* Soar Beyond · site.css
   Component styles for the Glass Tower look, built only from theme.json presets:
   --wp--preset--color--*, --wp--preset--font-size--*, --wp--preset--spacing--*, --wp--custom--*.
   Never add raw hex here; add a token to theme.json first. */

:root {
	--sb-line-hair: var(--wp--custom--line--hair);
	--sb-line-soft: var(--wp--custom--line--soft);
	--sb-line-strong: var(--wp--custom--line--strong);
	--sb-ease: var(--wp--custom--motion--ease-out);
	--sb-state: var(--wp--custom--motion--state);
	--sb-focus: 0 0 0 2px var(--wp--preset--color--bg-void), 0 0 0 4px var(--wp--preset--color--cyan), var(--wp--preset--shadow--glow-cyan);
}

/* sb-motion.js is shared with the Claude Design prototypes and reads the design
   system's token names; map them to the theme presets here. */
sb-globe, sb-contrail, sb-network, sb-flapboard, sb-poster {
	--cyan: var(--wp--preset--color--cyan);
	--cyan-deep: var(--wp--preset--color--cyan-deep);
	--gold: var(--wp--preset--color--gold);
	--amber: var(--wp--preset--color--amber);
	--ink-bright: var(--wp--preset--color--ink-bright);
	--ink-mute: var(--wp--preset--color--ink-mute);
	--ink-label: var(--wp--preset--color--ink-label);
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
p { text-wrap: pretty; }
:where(a, button, input, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--sb-focus); border-radius: var(--wp--custom--radius--sm); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.sb-main { margin-block: 0; }
.sb-main > * { margin-block-start: 0; }

/* ---------- Text styles ---------- */
.is-style-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--eyebrow); font-weight: 500; text-transform: uppercase; color: var(--wp--preset--color--ink-label); }
.is-style-caption { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); font-weight: 500; letter-spacing: var(--wp--custom--track--caption); text-transform: uppercase; color: var(--wp--preset--color--ink-mute); }

/* ---------- Buttons (Glass Tower CtaButton) ----------
   Default = gold store CTA. Glow blooms in slowly, collapses quickly. 44px touch height. */
.wp-element-button, .wp-block-button__link {
	position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--wp--custom--control--height); white-space: nowrap; text-decoration: none;
	transition: background-color var(--sb-state) var(--sb-ease), border-color var(--sb-state) var(--sb-ease), color var(--sb-state) var(--sb-ease), transform var(--wp--custom--motion--quick) var(--sb-ease);
}
.wp-block-button__link::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: 0 0 18px 0 rgba(255, 217, 102, .42); opacity: 0; transition: opacity calc(var(--sb-state) * .8) var(--sb-ease); }
.wp-block-button__link:hover::before, .wp-block-button__link:focus-visible::before { opacity: 1; transition-duration: calc(var(--sb-state) * 1.6); }
.wp-block-button__link:active { transform: scale(.97); }
.wp-block-button__link:focus-visible { box-shadow: var(--sb-focus); }
.wp-block-button.is-compact .wp-block-button__link { min-height: var(--wp--custom--control--height-compact); padding: 7px 12px; }

.wp-block-button.is-style-glass .wp-block-button__link {
	background: rgba(8, 18, 38, .55); color: var(--wp--preset--color--ink-body); border-color: rgba(126, 208, 245, .35); border-radius: var(--wp--custom--radius--sm);
}
.wp-block-button.is-style-glass .wp-block-button__link:hover { background: rgba(20, 40, 70, .70); border-color: rgba(126, 208, 245, .70); color: var(--wp--preset--color--ink-bright); }
.wp-block-button.is-style-glass .wp-block-button__link::before { box-shadow: none; }

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--ink-mute); border-color: rgba(46, 156, 219, .40);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover { background: rgba(46, 156, 219, .12); border-color: rgba(46, 156, 219, .75); color: var(--wp--preset--color--ink-bright); }
.wp-block-button.is-style-ghost .wp-block-button__link::before { box-shadow: none; }

/* ---------- Card (Glass Tower CardPanel): accent top edge + corner ticks ---------- */
.is-style-card, .is-style-card-gold {
	--sb-accent: var(--wp--preset--color--cyan);
	position: relative; background: var(--wp--custom--card-bg);
	border: 1px solid var(--wp--custom--card-border-side); border-top-color: color-mix(in srgb, var(--sb-accent) 55%, transparent);
	border-radius: var(--wp--custom--radius--sm); box-shadow: var(--wp--preset--shadow--card);
	padding: 22px 26px 24px; color: var(--wp--preset--color--ink-body);
}
.is-style-card-gold { --sb-accent: var(--wp--preset--color--gold); }
.is-style-card::after, .is-style-card-gold::after {
	content: ""; position: absolute; inset: -1px; pointer-events: none; --c: var(--sb-accent);
	background:
		linear-gradient(var(--c),var(--c)) 0 0/10px 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 0/1px 10px no-repeat,
		linear-gradient(var(--c),var(--c)) 100% 0/10px 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 0/1px 10px no-repeat,
		linear-gradient(var(--c),var(--c)) 0 100%/10px 1px no-repeat, linear-gradient(var(--c),var(--c)) 0 100%/1px 10px no-repeat,
		linear-gradient(var(--c),var(--c)) 100% 100%/10px 1px no-repeat, linear-gradient(var(--c),var(--c)) 100% 100%/1px 10px no-repeat;
}
.sb-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--title); margin: 0; }
.sb-post-card .wp-block-post-title a { color: var(--wp--preset--color--ink-bright); text-decoration: none; }
.sb-post-card .wp-block-post-excerpt { color: var(--wp--preset--color--ink-mute); font-size: var(--wp--preset--font-size--data); }
.sb-type-label a { display: inline-block; padding: 2px 10px; border: 1px solid var(--sb-line-strong); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--cyan); text-decoration: none; }

/* ---------- Header ---------- */
.sb-header { max-width: 1280px; margin-inline: auto; min-height: 80px; padding-inline: var(--wp--preset--spacing--10); gap: var(--wp--preset--spacing--10); }
.sb-header-wrap.is-over-hero { position: absolute; inset: 0 0 auto 0; z-index: 10; }
.sb-header__mark { display: inline-flex; color: var(--wp--preset--color--ink-bright); }
.sb-header__mark svg { width: 40px; height: 40px; }
.sb-nav { flex: 1; }
.sb-nav a { color: var(--wp--preset--color--ink-body); text-decoration: none; }
.sb-nav a:hover { color: var(--wp--preset--color--ink-bright); }
.sb-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--bg-deep); color: var(--wp--preset--color--ink-bright); padding: var(--wp--preset--spacing--8); }
.sb-nav .wp-block-navigation__responsive-container-open, .sb-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; color: var(--wp--preset--color--ink-bright); }
/* Phones: the header button moves into the drawer, and the menu button sits at the right edge.
   Extra specificity beats core's .wp-block-buttons-is-layout-flex { display: flex }. */
@media (max-width: 599px) {
	.sb-header .wp-block-buttons.sb-header__cta { display: none; }
	.sb-header .wp-block-navigation.sb-nav { justify-content: flex-end; }
}
/* Phones: the header button moves into the drawer as its last item, styled as the gold CTA. */
.sb-nav .sb-nav__cta { display: none; }
.sb-nav .is-menu-open .sb-nav__cta { display: block; margin-top: var(--wp--preset--spacing--4); }
.sb-nav .is-menu-open .sb-nav__cta .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--wp--preset--spacing--6); background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink-on-gold); border-radius: var(--wp--custom--radius--md); }
/* Drawer: left-aligned items with 44px targets, larger type. */
/* Core copies the nav's items-justified-center class onto the list itself, so set the layout variable there. */
.sb-nav .is-menu-open ul.wp-block-navigation__container { --navigation-layout-justification-setting: flex-start; --navigation-layout-justify: flex-start; }
.sb-nav .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: var(--wp--preset--spacing--10); }
.sb-nav .is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: var(--wp--preset--spacing--2); }
.sb-nav .is-menu-open .wp-block-navigation-item:not(.sb-nav__cta) .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--wp--preset--font-size--title); }

/* ---------- Sections ---------- */
.sb-section { padding-block: var(--wp--preset--spacing--14); border-top: 1px solid var(--sb-line-hair); }
.sb-section--deep { background: var(--wp--preset--color--bg-deep); }
.sb-section--horizon { background: var(--wp--preset--color--bg-horizon); border-top-color: var(--sb-line-soft); }
.sb-section__head { gap: var(--wp--preset--spacing--4); margin-bottom: var(--wp--preset--spacing--8); }
.sb-section__head h2 { margin: 0; }

/* ---------- Hero ---------- */
.sb-hero {
	position: relative; overflow: hidden; height: max(640px, 100svh); max-height: 1100px; margin: 0; padding: 0;
	background:
		radial-gradient(ellipse 60% 40% at 50% 100%, color-mix(in oklch, var(--wp--preset--color--gold) 18%, transparent), transparent 70%),
		linear-gradient(180deg, var(--wp--preset--color--bg-deep) 0%, var(--wp--preset--color--bg-horizon) 45%, color-mix(in oklch, var(--wp--preset--color--cyan-deep) 42%, var(--wp--preset--color--bg-horizon)) 100%);
}
.sb-hero__motion { position: absolute; inset: 0; }
.sb-hero__motion > * { display: block; width: 100%; height: 100%; }
.sb-hero__content { position: absolute; left: 0; right: 0; top: 47%; padding-inline: var(--wp--preset--spacing--6); text-align: center; gap: var(--wp--preset--spacing--5); align-items: center; }
.sb-hero__tagline { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: var(--wp--preset--font-size--title); letter-spacing: var(--wp--custom--track--title); text-transform: uppercase; color: var(--wp--preset--color--ink-bright); margin: 0; }
@media (max-width: 599px) {
	/* Phones: the logo needs more width; keep tagline + CTA clear of it and above the globe. */
	.sb-hero sb-contrail { --sb-logo-top: 30%; --sb-logo-width: 78vw; }
	.sb-hero__content { top: 46%; }
	.sb-hero sb-globe { --sb-globe-top: 0.66; }
}

/* ---------- Stores ---------- */
.sb-store-grid { gap: var(--wp--preset--spacing--5); }
.sb-store-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.sb-store-card__art { position: relative; margin: 0; background: radial-gradient(circle at 50% 130%, color-mix(in oklch, var(--wp--preset--color--cyan) 45%, transparent), transparent 65%), var(--wp--preset--color--bg-horizon); }
.sb-store-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--wp--preset--color--bg-deep)); pointer-events: none; }
.sb-store-card__banner { margin: 0; }
.sb-store-card__badge { margin: 0; }
/* Official store logos stand alone on a plain surface, never over banner art, with clear space
   around them. Steam requires at least 50px tall on screen. */
.sb-store-card__badge img { display: block; height: 50px; width: auto; max-width: 100%; margin-block: var(--wp--preset--spacing--2); }
.sb-store-card__badge:has(img:not([src])), .sb-store-card__badge:has(img[src=""]) { display: none; }
.sb-store-card__body { padding: var(--wp--preset--spacing--4); gap: var(--wp--preset--spacing--3); flex: 1; justify-content: space-between; }
.sb-store-card__name { width: 100%; align-items: baseline; }
.sb-store-card__name h3 { margin: 0; font-size: var(--wp--preset--font-size--title); }
.sb-store-card__name p { margin: 0; }
.sb-store-card__cta { width: 100%; }
/* One live store (launch state): a single wide banner instead of a lonely card. */
.sb-store-grid:has(> .wp-block-post:only-child) { grid-template-columns: 1fr !important; }
.sb-store-grid:has(> .wp-block-post:only-child) .sb-store-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.sb-store-grid:has(> .wp-block-post:only-child) .sb-store-card__body { padding: var(--wp--preset--spacing--8); justify-content: center; }
.sb-store-grid:has(> .wp-block-post:only-child) .sb-store-card__name h3 { font-size: var(--wp--preset--font-size--h-2); }
.sb-empty { border: 1px dashed var(--sb-line-soft); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--14) var(--wp--preset--spacing--6); text-align: center; align-items: center; }
.sb-empty h3 { margin: 0; }
.sb-empty p { color: var(--wp--preset--color--ink-mute); margin: 0; }

/* ---------- Game features ---------- */
.sb-features__grid { gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--8); margin-bottom: var(--wp--preset--spacing--10); }
.sb-feature { gap: var(--wp--preset--spacing--4); }
.sb-feature h3, .sb-feature p { margin: 0; }
.sb-feature p { max-width: 480px; }
/* Full card width: the vertical flex card would otherwise shrink the frame to its (lazy, still 0px) image. */
.sb-feature__shot { align-self: stretch; width: 100%; margin: 0; border: 1px solid var(--sb-line-soft); border-radius: var(--wp--custom--radius--sm); overflow: hidden; }
.sb-feature__shot img { display: block; width: 100%; height: auto; }

/* ---------- Discord ---------- */
.sb-discord {
	background: radial-gradient(ellipse 60% 90% at 20% 50%, color-mix(in oklch, var(--wp--preset--color--cyan-deep) 32%, transparent), transparent 70%), var(--wp--preset--color--bg-horizon);
	border-top-color: var(--sb-line-soft); border-bottom: 1px solid var(--sb-line-soft); padding-block: var(--wp--preset--spacing--18);
}
.sb-discord__row { gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--14); }
/* Official mark as supplied: never recolored, filtered, or given a glow (Discord brand rules). */
.sb-discord__mark { flex: none; width: clamp(96px, 12vw, 160px); }
.sb-discord__mark img { display: block; width: 100%; height: auto; }
.sb-discord__copy { flex: 1 1 420px; gap: var(--wp--preset--spacing--4); }
.sb-discord__copy > * { margin: 0; }

/* ---------- Quiet CTA, posts ---------- */
.sb-quiet-cta { margin-block: var(--wp--preset--spacing--14) var(--wp--preset--spacing--8); padding-block: var(--wp--preset--spacing--6); border-top: 1px solid var(--sb-line-hair); border-bottom: 1px solid var(--sb-line-hair); gap: var(--wp--preset--spacing--4); }
.sb-quiet-cta__text { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title); text-transform: uppercase; color: var(--wp--preset--color--ink-bright); }
.sb-page { padding-block: calc(80px + var(--wp--preset--spacing--10)) var(--wp--preset--spacing--18); }
.sb-page .wp-block-post-content { font-size: 1.0625rem; }
/* Long-form text spans the 720px content column (about 70 characters), aligned with headings. */
.sb-page .wp-block-post-content > :where(h2, h3) { margin-top: var(--wp--preset--spacing--10); }
.sb-page :not(pre) > code { font-family: var(--wp--preset--font-family--mono); font-size: .9em; padding: 1px 6px; background: var(--wp--preset--color--surface); border: 1px solid var(--sb-line-hair); border-radius: var(--wp--custom--radius--sm); color: var(--wp--preset--color--ink-bright); }
.sb-page figcaption { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); color: var(--wp--preset--color--ink-mute); }
.sb-page table { border-collapse: collapse; width: 100%; }
.sb-page th, .sb-page td { border-bottom: 1px solid var(--sb-line-hair); padding: 10px 12px; text-align: left; }
.sb-page th { color: var(--wp--preset--color--ink-label); font-weight: 500; text-transform: uppercase; font-size: var(--wp--preset--font-size--caption); }

/* ---------- Footer ---------- */
.sb-footer { background: var(--wp--preset--color--bg-void); border-top: 1px solid var(--sb-line-hair); padding-block: var(--wp--preset--spacing--8); }
.sb-footer__row { gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--8); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); text-transform: uppercase; color: var(--wp--preset--color--ink-label); }
.sb-footer__brand { display: flex; align-items: center; gap: var(--wp--preset--spacing--6); color: var(--wp--preset--color--ink-mute); }
.sb-footer__wordmark { width: 80px; height: auto; }
.sb-footer__legal { font-family: inherit; font-size: inherit; letter-spacing: var(--wp--custom--track--caption); }
.sb-footer__legal a { color: var(--wp--preset--color--ink-label); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.sb-footer__legal a:hover { color: var(--wp--preset--color--ink-bright); }
.sb-socials { list-style: none; margin: 0 0 var(--wp--preset--spacing--6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); }
.sb-socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--wp--preset--color--ink-mute); text-decoration: none; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); text-transform: uppercase; }
.sb-socials a:hover { color: var(--wp--preset--color--ink-bright); }
.sb-socials svg { width: 20px; height: 20px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* Store trademark attributions (required by store brand rules). */
.sb-attributions { margin: var(--wp--preset--spacing--4) 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-mute); }

/* Small text links in section heads ("All news") still get a 44px tap target. */
.sb-section__head .is-style-caption a { display: inline-flex; align-items: center; min-height: 44px; }

/* Coming-soon panel: the stores section until the first store is live. */
.sb-coming-soon { width: 100%; box-sizing: border-box; padding: var(--wp--preset--spacing--10); gap: var(--wp--preset--spacing--4); max-width: 820px; }
.sb-coming-soon h3, .sb-coming-soon p { margin: 0; }

/* Section archives (/news/, /dev-blog/): title row with the RSS link. */
.sb-archive-head { max-width: 1280px; margin-inline: auto; margin-bottom: var(--wp--preset--spacing--8); }
.sb-archive-head h1, .sb-archive-head p { margin: 0; }
.sb-archive-head .wp-block-term-description { color: var(--wp--preset--color--ink-mute); }
.sb-feed-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); letter-spacing: var(--wp--custom--track--caption); text-transform: uppercase; }

/* 404: departures-board error code, with room between each part. */
.sb-404 { min-height: 70svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.sb-404 > * { margin-block: 0; }
.sb-404 > .is-style-eyebrow { margin-bottom: var(--wp--preset--spacing--5); }
.sb-404 h1 { margin-top: var(--wp--preset--spacing--8); }
.sb-404__lead { margin-top: var(--wp--preset--spacing--4); color: var(--wp--preset--color--ink-mute); font-size: var(--wp--preset--font-size--lead); max-width: 40ch; }
.sb-404__actions { margin-top: var(--wp--preset--spacing--10); gap: var(--wp--preset--spacing--4); justify-content: center; }
.sb-404__code { display: flex; gap: .12em; font-size: clamp(56px, 12vw, 120px); }
.sb-flap {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: .78em; height: 1.08em; overflow: hidden;
	font-family: var(--wp--preset--font-family--mono); font-weight: 500; line-height: 1;
	color: var(--wp--preset--color--ink-bright);
	background: linear-gradient(180deg, var(--wp--preset--color--surface-hi) 0 49.4%, var(--wp--preset--color--bg-void) 49.4% 50.6%, var(--wp--preset--color--surface) 50.6%);
	border-radius: var(--wp--custom--radius--sm); box-shadow: inset 0 0 0 1px var(--sb-line-hair), var(--wp--preset--shadow--panel);
}
.sb-flap.is-flip { animation: sb-flap-tick 55ms linear; }
.sb-flap.is-set { color: var(--wp--preset--color--gold); text-shadow: 0 0 18px color-mix(in srgb, var(--wp--preset--color--gold) 45%, transparent); transition: color var(--sb-state) var(--sb-ease); }
@keyframes sb-flap-tick { 0% { transform: scaleY(.86); } 100% { transform: scaleY(1); } }

/* Legal pages: title, then the last-updated line, then the text. */
.sb-legal > .wp-block-post-title { margin-bottom: 0; }
.sb-legal__updated { gap: var(--wp--preset--spacing--2); margin-top: var(--wp--preset--spacing--3); margin-bottom: var(--wp--preset--spacing--8); padding-bottom: var(--wp--preset--spacing--5); border-bottom: 1px solid var(--sb-line-hair); }
.sb-legal__updated p { margin: 0; }

/* Game legal documents (rendered from the game's text files). */
.sb-game-legal__meta { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); letter-spacing: var(--wp--custom--track--caption); text-transform: uppercase; color: var(--wp--preset--color--ink-label); padding-bottom: var(--wp--preset--spacing--5); border-bottom: 1px solid var(--sb-line-hair); margin: var(--wp--preset--spacing--3) 0 var(--wp--preset--spacing--8); }
.sb-game-legal h2 { margin-top: var(--wp--preset--spacing--10); font-size: var(--wp--preset--font-size--title); }
.sb-game-legal h3 { margin-top: var(--wp--preset--spacing--6); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--body); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--wp--preset--color--ink-bright); }
.sb-game-legal ul { padding-left: 1.25em; }
.sb-game-legal li { margin-bottom: var(--wp--preset--spacing--2); }
/* Legal index */
.sb-legal-index { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--wp--preset--spacing--4); }
.sb-legal-index a { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--title); letter-spacing: var(--wp--custom--track--title); text-transform: uppercase; }

/* Desktop nav stays on one line; mid widths (600 to 900px, above the drawer) tighten the gap. */
.sb-header .wp-block-navigation__container { flex-wrap: nowrap; }
.sb-header .wp-block-navigation-item__label { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 899px) {
	.sb-header { gap: var(--wp--preset--spacing--5); padding-inline: var(--wp--preset--spacing--6); }
	.sb-header .wp-block-navigation__container { gap: var(--wp--preset--spacing--4); }
}

/* Single posts: room between the title (and cover image) and the body. */
.sb-page > .wp-block-post-title { margin-top: var(--wp--preset--spacing--4); margin-bottom: var(--wp--preset--spacing--8); }
.sb-page > .wp-block-post-featured-image { margin-bottom: var(--wp--preset--spacing--8); }

/* Dev blog cards: date, then topic tags as quiet mono labels. */
.sb-tag-list { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); letter-spacing: var(--wp--custom--track--caption); text-transform: uppercase; color: var(--wp--preset--color--ink-label); }
.sb-tag-list a { color: inherit; text-decoration: none; }
.sb-tag-list a:hover { color: var(--wp--preset--color--cyan); }
.sb-tag-list .wp-block-post-terms__separator { color: var(--wp--preset--color--ink-label); }