/*
 * Great White North — theme stylesheet.
 *
 * Only what theme.json cannot express. Three things live here:
 *   1. Display type — optical-size and wonk settings for Fraunces.
 *   2. The bay grid — section headers, rules, asymmetric columns.
 *   3. Editable placeholder slots — visible gaps for content that
 *      does not exist yet, which disappear when it does.
 *
 * Loaded on the front end and inside the editor, so the canvas matches.
 */

:root {
	--gwn-gutter: clamp(1rem, 4.5vw, 4.5rem);
	--gwn-measure: 1380px;
}

/* ---------------------------------------------------------------
   1. Display type
   Fraunces carries an optical-size axis. Large display sizes want
   opsz pushed high; small headings want it low, or the letterforms
   get spindly. theme.json cannot set font-variation-settings.
   --------------------------------------------------------------- */

h1, .gwn-d1 { font-variation-settings: "opsz" 144, "WONK" 1; }
h2, .gwn-d2 { font-variation-settings: "opsz" 96, "WONK" 1; }
h3          { font-variation-settings: "opsz" 48, "WONK" 1; }
h4, .gwn-d4 { font-variation-settings: "opsz" 36, "WONK" 1; }

.gwn-accent { color: var(--wp--preset--color--accent); }

/* Mono labels: the one place uppercase tracking is used. */
.gwn-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}
.gwn-label--accent { color: var(--wp--preset--color--accent); }
.gwn-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
}

/* A deck is the sentence under a heading. It keeps a reading measure
   regardless of the column it sits in. */
.gwn-deck {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--body);
	max-width: 44ch;
}

/* ---------------------------------------------------------------
   2. Bays
   Every top-level section is a full-width group with a 1380px inner
   measure. Ruled top and bottom, never boxed.
   --------------------------------------------------------------- */

.gwn-bay {
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--gwn-gutter);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.gwn-bay--ink { border-bottom-color: #1C363D; }
.gwn-bay--ink .gwn-label { color: var(--wp--preset--color--on-ink-2); }
.gwn-bay--ink .gwn-deck { color: var(--wp--preset--color--on-ink-2); }
.gwn-bay--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.gwn-bay--hero { border-bottom-color: var(--wp--preset--color--ink); }

/* Section number — a large light display figure hung above the heading. */
.gwn-num {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 144, "WONK" 1;
	font-weight: 400;
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 0.8;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--rule);
	display: block;
}
.gwn-bay--ink .gwn-num { color: #1C363D; }

/* The 7/5 asymmetric split used by every section header and the work
   plates. Collapses to one column below 900px. */
/* Ratios, not basis percentages — 58% + 42% + the column gap overflows the
   row and wraps. Growing from a zero basis is gap-safe. */
.gwn-split > .wp-block-column:first-child { flex-grow: 58; flex-basis: 0; }
.gwn-split > .wp-block-column:last-child  { flex-grow: 42; flex-basis: 0; }
@media (max-width: 899px) {
	.gwn-split > .wp-block-column { flex-basis: 100%; flex-grow: 1; }
}

/* A statement is a short line set in display type, used once per page
   at most, hung off a rule. */
.gwn-statement {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 48, "WONK" 1;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.14;
	letter-spacing: -0.02em;
	max-width: 34ch;
	border-top: 1px solid var(--wp--preset--color--ink);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* ---------------------------------------------------------------
   3. Placeholder slots
   Content that does not exist yet renders as a visible, labelled gap
   on a drafting grid — never as blank space and never as a fake value.
   Deliberately shorter than the real thing it stands in for, so an
   unfinished page reads as a gap to fill.
   --------------------------------------------------------------- */

.gwn-slot {
	display: flex;
	align-items: flex-end;
	padding: 1rem;
	border: 1px solid #C9C0AE;
	background:
		linear-gradient(var(--wp--preset--color--rule) 1px, transparent 1px) 0 0 / 100% 28px,
		linear-gradient(90deg, var(--wp--preset--color--rule) 1px, transparent 1px) 0 0 / 28px 100%,
		var(--wp--preset--color--paper-3);
}
.gwn-slot > * {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	line-height: 1.7;
	max-width: 28ch;
	margin: 0;
	background: var(--wp--preset--color--paper);
	padding: 0.35em 0.5em;
	border: 1px solid #C9C0AE;
}
.gwn-slot--16x10 { aspect-ratio: 16 / 10; }
.gwn-slot--4x3   { aspect-ratio: 4 / 3; }
.gwn-slot--ink {
	border-color: #1C363D;
	background:
		linear-gradient(#1C363D 1px, transparent 1px) 0 0 / 100% 28px,
		linear-gradient(90deg, #1C363D 1px, transparent 1px) 0 0 / 28px 100%,
		var(--wp--preset--color--ink-deep);
}
.gwn-slot--ink > * {
	color: var(--wp--preset--color--on-ink-2);
	background: var(--wp--preset--color--ink);
	border-color: #1C363D;
}
/* Inline slot — for a single missing figure inside a row. */
.gwn-slot--inline {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	aspect-ratio: auto;
}
.gwn-slot--inline > * { max-width: none; }

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

.gwn-masthead {
	padding-inline: var(--gwn-gutter);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	min-height: 74px;
}
.gwn-brand {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 24, "WONK" 1;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	line-height: 1;
	text-decoration: none;
}
.gwn-brand a { text-decoration: none; }
.gwn-tel {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	white-space: nowrap;
}
.gwn-tel a { text-decoration: none; }

/* Navigation: the burger breakpoint is set by what actually fits on one
   row — brand, four links, the number and the button. Keep this in step
   with the navigation block's own overlayBreakpoint. */
@media (max-width: 1119px) {
	.gwn-desktop-only { display: none !important; }
}

/* ---------------------------------------------------------------
   Ticker — the live measurement rule under the hero
   --------------------------------------------------------------- */

.gwn-ticker {
	padding-inline: var(--gwn-gutter);
	padding-block: 1rem;
	background: var(--wp--preset--color--paper-3);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	border-top: 1px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}
.gwn-ticker .gwn-k {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #94A3A6;
}
.gwn-ticker .gwn-u { color: #94A3A6; }
.gwn-ticker .gwn-note {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
	max-width: 42ch;
}

/* ---------------------------------------------------------------
   Platforms — three columns divided by rules, not boxed as cards
   --------------------------------------------------------------- */

.gwn-platforms { gap: 0 !important; }
.gwn-platforms > .wp-block-column {
	padding-block: 2rem 3rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}
@media (min-width: 782px) {
	.gwn-platforms > .wp-block-column { padding-inline: 1.5rem; border-left: 1px solid var(--wp--preset--color--rule); border-top: 0; }
	.gwn-platforms > .wp-block-column:first-child { padding-left: 0; border-left: 0; }
	.gwn-platforms > .wp-block-column:last-child { padding-right: 0; }
}
.gwn-for {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	border-top: 1px solid var(--wp--preset--color--rule);
	padding-top: 0.75rem;
	display: block;
}

/* ---------------------------------------------------------------
   Work plates
   --------------------------------------------------------------- */

.gwn-plate .wp-block-image,
.gwn-plate .gwn-slot { margin-bottom: 1rem; }
.gwn-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.gwn-open {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
}
.gwn-open a {
	text-decoration: none;
	border-bottom: 1px solid #C9C0AE;
	padding-bottom: 2px;
}
.gwn-open a:hover { border-bottom-color: var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------
   Housekeeping
   --------------------------------------------------------------- */

/* Anything that can outgrow its track wraps rather than clipping. */
.wp-block-group, .wp-block-column { min-width: 0; }

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

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

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

/* Raise the navigation overlay breakpoint from core's 600px to 1120px.
   Between those widths the inline nav wrapped to two rows and doubled the
   header height. Keep this in step with .gwn-desktop-only above. */
@media (max-width: 1119px) {
	.gwn-masthead .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.gwn-masthead .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
}

/* Navigation list reset — the navigation block ships its own layout, this only
   sets the type and spacing so it matches the rest of the masthead. */
.wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.wp-block-navigation .wp-block-navigation-item a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--body);
}
.wp-block-navigation .wp-block-navigation-item a:hover { color: var(--wp--preset--color--accent); }

/* ---------------------------------------------------------------
   Lanes — the two kinds of work, divided by a rule not a card
   --------------------------------------------------------------- */

.gwn-lane { border-top: 2px solid var(--wp--preset--color--ink); padding-top: var(--wp--preset--spacing--30); }
.gwn-lane--restricted { border-top-color: var(--wp--preset--color--accent); }
.gwn-lane ul { list-style: none; margin: 0; padding: 0; }
.gwn-lane li {
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
}
.gwn-lane li strong { display: block; font-weight: 600; margin-bottom: 2px; }
.gwn-lane li span {
	display: block;
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* ---------------------------------------------------------------
   Codes — the restricted vocabulary bay
   --------------------------------------------------------------- */

.gwn-codes { gap: 1px !important; background: #1C363D; border: 1px solid #1C363D; }
.gwn-codes > .wp-block-column {
	background: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.gwn-code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--accent);
	display: block;
}
.gwn-bay--ink h3 { color: var(--wp--preset--color--on-ink); }
.gwn-bay--ink p { color: var(--wp--preset--color--on-ink-2); }
.gwn-fix { color: var(--wp--preset--color--on-ink); font-weight: 500; }
.gwn-note-ink {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	max-width: 64ch;
}
.gwn-note-ink strong { color: var(--wp--preset--color--on-ink); font-weight: 600; }

/* ---------------------------------------------------------------
   Cases — the deep work plates
   --------------------------------------------------------------- */

.gwn-case .gwn-slot { aspect-ratio: 16 / 10; }
/* Same rule as .gwn-split: ratios, never basis percentages, or the row wraps
   once the column gap is added and the plate drops below its text. */
.gwn-case > .wp-block-column { flex-basis: 0; }
.gwn-case > .wp-block-column:first-child { flex-grow: 58; }
.gwn-case > .wp-block-column:last-child { flex-grow: 42; }
.gwn-case--flip > .wp-block-column:first-child { flex-grow: 42; }
.gwn-case--flip > .wp-block-column:last-child { flex-grow: 58; }
@media (max-width: 781px) {
	.gwn-case > .wp-block-column { flex-basis: 100%; flex-grow: 1; }
}
.gwn-figs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}
.gwn-where {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--muted);
}
.gwn-more {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	font-weight: 500;
}
.gwn-more a { text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--accent); padding-bottom: 3px; }

/* ---------------------------------------------------------------
   Process — numbered rows, not cards in a grid
   --------------------------------------------------------------- */

.gwn-steps { border-top: 1px solid var(--wp--preset--color--ink); }
.gwn-step {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	gap: var(--wp--preset--spacing--40) !important;
	align-items: baseline;
}
.gwn-step > .wp-block-column:first-child { flex-grow: 8; flex-basis: 0; }
.gwn-step > .wp-block-column:nth-child(2) { flex-grow: 30; flex-basis: 0; }
.gwn-step > .wp-block-column:last-child { flex-grow: 62; flex-basis: 0; }
@media (max-width: 781px) {
	.gwn-step > .wp-block-column { flex-basis: 100%; flex-grow: 1; }
}
.gwn-step-n {
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 96, "WONK" 1;
	font-weight: 400;
	font-size: clamp(1.75rem, 3.2vw, 3rem);
	line-height: 0.85;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--rule);
}
.gwn-when {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
   Offer and contact
   --------------------------------------------------------------- */

.gwn-offer-list { list-style: none; margin: 0; padding: 0; max-width: 44ch; }
.gwn-offer-list li {
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid #1C363D;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--on-ink);
}
.gwn-offer-list li::marker { content: ""; }
.gwn-contact { border-top: 1px solid #1C363D; }
.gwn-contact p {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid #1C363D;
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}
.gwn-contact p a { text-decoration: none; color: var(--wp--preset--color--on-ink); }
.gwn-contact p a:hover { color: var(--wp--preset--color--accent); }
.gwn-contact .gwn-k {
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--on-ink-2);
}

/* ---------------------------------------------------------------
   FAQ — core details blocks, no accordion plugin
   --------------------------------------------------------------- */

.gwn-faq { max-width: 60rem; border-top: 1px solid var(--wp--preset--color--ink); }
.gwn-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 0;
	margin: 0;
}
.gwn-faq .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	padding-block: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-variation-settings: "opsz" 36, "WONK" 1;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	line-height: 1.15;
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	min-height: 46px;
}
.gwn-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.gwn-faq .wp-block-details summary::after {
	content: "+";
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	font-weight: 400;
	color: #94A3A6;
}
.gwn-faq .wp-block-details[open] summary::after { content: "\2013"; }
.gwn-faq .wp-block-details summary:hover { color: var(--wp--preset--color--accent); }
.gwn-faq .wp-block-details > *:not(summary) {
	color: var(--wp--preset--color--body);
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.75;
	margin-top: 0;
	padding-bottom: var(--wp--preset--spacing--40);
}

/* A constrained container centres its children, which is right for prose and
   wrong for anything that sets its own measure. Everything below is deliberately
   left-aligned to the bay gutter. */
.gwn-statement,
.gwn-faq,
.gwn-steps,
.gwn-note-ink,
.gwn-deck,
.gwn-offer-list,
.gwn-contact {
	margin-left: 0;
	margin-right: auto;
}

/* ---------------------------------------------------------------
   Coexistence with a page builder's global kit
   --------------------------------------------------------------
   A builder's global styles target bare h1–h6 and the body with a
   class selector (.elementor-kit-NN h1), which outranks anything
   theme.json emits for a bare element. On a site where the builder
   stays installed for other work, its kit will silently restyle —
   or in one observed case, make transparent — every heading this
   theme renders.

   So the theme re-asserts its own type inside its own markup,
   scoped to .wp-site-blocks and raised one element above a kit
   selector. It changes nothing on pages the builder owns.
   --------------------------------------------------------------- */

body .wp-site-blocks {
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--ink);
}
body .wp-site-blocks :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: inherit;
	-webkit-text-fill-color: currentColor;
	text-transform: none;
	text-shadow: none;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0;
}
body .wp-site-blocks h1 {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 0.9;
	letter-spacing: -0.035em;
}
body .wp-site-blocks h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 0.96;
}
body .wp-site-blocks h3 {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.08;
	letter-spacing: -0.025em;
}
body .wp-site-blocks h4 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.14;
	letter-spacing: -0.02em;
	font-weight: 500;
}

/* The accent phrase in a headline keeps its own colour through the
   reset above — it is the one place a heading is not one colour. */
body .wp-site-blocks .gwn-accent {
	color: var(--wp--preset--color--accent);
	-webkit-text-fill-color: var(--wp--preset--color--accent);
}

/* Display type that isn't a heading element. */
body .wp-site-blocks .gwn-brand,
body .wp-site-blocks .gwn-num,
body .wp-site-blocks .gwn-step-n,
body .wp-site-blocks .gwn-statement,
body .wp-site-blocks .gwn-faq summary {
	font-family: var(--wp--preset--font-family--display);
	-webkit-text-fill-color: currentColor;
	text-transform: none;
}

/* Buttons and mono labels, in case the kit reaches them too. */
body .wp-site-blocks .wp-block-button__link {
	font-family: var(--wp--preset--font-family--sans);
	text-transform: none;
	letter-spacing: 0;
}
body .wp-site-blocks .gwn-label,
body .wp-site-blocks .gwn-mono,
body .wp-site-blocks .gwn-code,
body .wp-site-blocks .gwn-tag,
body .wp-site-blocks .gwn-when,
body .wp-site-blocks .gwn-for,
body .wp-site-blocks .gwn-where,
body .wp-site-blocks .gwn-open,
body .wp-site-blocks .gwn-more,
body .wp-site-blocks .gwn-ticker {
	font-family: var(--wp--preset--font-family--mono);
	-webkit-text-fill-color: currentColor;
}

/* ---------------------------------------------------------------
   Work archive
   --------------------------------------------------------------- */

.gwn-work-grid {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 760px) {
	.gwn-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gwn-work-grid > * { margin: 0; }
.gwn-plate > * + * { margin-top: var(--wp--preset--spacing--20); }
.gwn-plate .gwn-slot,
.gwn-plate .gwn-work-image { margin-bottom: var(--wp--preset--spacing--30); }
.gwn-work-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 1px solid var(--rule-2, #C9C0AE);
}
.gwn-plate .wp-block-post-title { line-height: 1.05; }
.gwn-plate .wp-block-post-title a { text-decoration: none; }
.gwn-plate .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.gwn-plate .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	padding-bottom: 3px;
}
/* The project type label, rendered by the post-terms block. */
.gwn-tag a { text-decoration: none; color: inherit; }
.gwn-tag a:hover { text-decoration: underline; }
.gwn-pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}
.gwn-pagination a { text-decoration: none; }

/* Buttons.
   A builder's kit styles bare `a` inside its body class, which beats
   anything theme.json emits through :where(). That turned button text
   black on an ink ground — invisible. Two rules matter here:
   colour is set with enough specificity to win, and -webkit-text-fill-color
   is pinned to currentColor rather than a literal, so a button that sets
   its own colour inline (the one on a dark bay) still paints correctly. */

body .wp-site-blocks .wp-block-button__link,
body .wp-site-blocks .wp-element-button {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	-webkit-text-fill-color: currentColor;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	text-decoration: none;
}
body .wp-site-blocks .wp-block-button__link:hover,
body .wp-site-blocks .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #FFFFFF;
}

/* Secondary — outlined on paper, filled on hover. */
body .wp-site-blocks .is-style-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	border-color: #C9C0AE;
}
body .wp-site-blocks .is-style-outline > .wp-block-button__link:hover,
body .wp-site-blocks .is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

/* On a dark bay the roles invert. */
body .wp-site-blocks .gwn-bay--ink .wp-block-button__link {
	background-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
body .wp-site-blocks .gwn-bay--ink .wp-block-button__link:hover,
body .wp-site-blocks .gwn-bay--ink .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #FFFFFF;
}

/* Plain links inside theme markup keep the theme's colours, not the kit's. */
body .wp-site-blocks .gwn-bay a:not(.wp-block-button__link):not(.wp-element-button) {
	color: inherit;
	-webkit-text-fill-color: currentColor;
}
body .wp-site-blocks .gwn-bay a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--accent); }

/* A case study with no screenshot yet.
   The featured-image block renders nothing at all when a post has no image,
   so a card without one collapsed and sat at a different height from its
   neighbour — which reads as broken rather than unfinished. There is no
   conditional rendering in a block template, so :has() does the work.

   Scoped against .gwn-slot as well, because the homepage work plates use the
   same .gwn-plate class with their own hand-placed placeholder; without that
   guard they would get a second box stacked on top. */

.gwn-plate:not(:has(.wp-block-post-featured-image)):not(:has(.gwn-slot))::before {
	content: "Screenshot — to come";
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 1rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border: 1px solid #C9C0AE;
	background:
		linear-gradient(var(--wp--preset--color--rule) 1px, transparent 1px) 0 0 / 100% 28px,
		linear-gradient(90deg, var(--wp--preset--color--rule) 1px, transparent 1px) 0 0 / 28px 100%,
		var(--wp--preset--color--paper-3);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* On a single case study there is no card to balance, so the image bay simply
   collapses rather than leaving a padded empty band. */
.gwn-case-hero:not(:has(.wp-block-post-featured-image)) { display: none; }