/**
 * The Cozy Gamer — chrome.css
 *
 * The only hand-written stylesheet in the theme. Everything here is something
 * theme.json genuinely cannot express: the window frame's pseudo-element title
 * bar, the page grid, and the mark's sizing.
 *
 * If you're about to add a rule here, check theme.json first.
 */

/* ---------------------------------------------------------------- ground -- */

body {
	background-image:
		var(--wp--custom--grain),
		linear-gradient(var(--wp--custom--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--custom--grid-line) 1px, transparent 1px);
	background-size: 120px 120px,
		var(--wp--custom--grid-size) var(--wp--custom--grid-size),
		var(--wp--custom--grid-size) var(--wp--custom--grid-size);
	background-attachment: fixed;
}

/* ---------------------------------------------------------------- window -- */

.is-style-window,
.is-style-window-quiet {
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--hard);
	overflow: hidden;
	padding: 0;
}

/* The title bar. Set the label with data-title on the group block; it falls
   back to a generic one so a bar is never blank. */
.is-style-window::before {
	content: attr(data-title);
	display: flex;
	align-items: center;
	min-height: 28px;
	padding: 7px 11px;
	background: var(--wp--preset--gradient--chrome-bar);
	border-block-end: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--wp--preset--color--ink-900);
}

.is-style-window:not([data-title])::before {
	content: "thecozygamer.com";
}

/* The three window buttons. Drawn as one crisp SVG rather than stacked
   gradients + outline-offset, which rendered as a smudge at some zooms. */
.is-style-window::after {
	content: "";
	position: absolute;
	inset-block-start: 11px;
	inset-inline-end: 11px;
	width: 52px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 14'%3E%3Cg fill='%23fff' stroke='%233A2B52' stroke-width='2'%3E%3Crect x='1' y='1' width='12' height='12'/%3E%3Crect x='20' y='1' width='12' height='12'/%3E%3Crect x='39' y='1' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
	pointer-events: none;
}

.is-style-window {
	position: relative;
}

/* Genre-tinted title bars. */
.genre-accent-mint      .is-style-window::before { background: var(--wp--preset--color--mint); }
.genre-accent-bubblegum .is-style-window::before { background: var(--wp--preset--color--bubblegum); }
.genre-accent-butter    .is-style-window::before { background: var(--wp--preset--color--butter); }
.genre-accent-sky       .is-style-window::before { background: var(--wp--preset--color--sky); }
.genre-accent-lilac     .is-style-window::before { background: var(--wp--preset--color--lilac); }
.genre-accent-purple    .is-style-window::before { background: var(--wp--preset--color--purple); }

/* Padding on the window's contents, not the frame — the title bar is a
   ::before, so every real child needs it. (Excluding :first-child left the
   first heading flush to the top with no inline padding.) */
.is-style-window > *,
.is-style-window-quiet > * {
	padding-inline: var(--wp--preset--spacing--50);
}

.is-style-window > :first-child,
.is-style-window-quiet > :first-child { padding-block-start: var(--wp--preset--spacing--50); }
.is-style-window > :last-child,
.is-style-window-quiet > :last-child  { padding-block-end: var(--wp--preset--spacing--50); }

/* NEVER nest window frames. One per region — nesting is what turns loud into
   noise. A window inside a window degrades to a plain block. */
.is-style-window .is-style-window,
.is-style-window .is-style-window-quiet {
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

.is-style-window .is-style-window::before,
.is-style-window .is-style-window::after {
	display: none;
}

/* ----------------------------------------------------------- reading col -- */

/* The grid belongs to the page ground, never behind body copy. */
.wp-block-post-content {
	max-width: var(--wp--custom--measure);
	background: var(--wp--preset--color--paper);
}

/* --------------------------------------------------------------- chips ---- */

.is-style-chip,
.is-style-chip-row li {
	display: inline-block;
	margin: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
	padding: 4px 12px;
	border: var(--wp--custom--border-width-sm) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	/* Always ink, never white — every accent in this palette fails contrast
	   against white text. See the brand system. */
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}

.is-style-chip-row {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ---------------------------------------------------------------- cards ---- */

.cozy-card {
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--hard);
	overflow: hidden;
}

/* Halftone fallback for posts with no featured image. Zero bytes. */
.cozy-thumb {
	aspect-ratio: 16 / 9;
	border-block-end: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
}

/* Halftone, from the vaporwave reference. currentColor drives the dot. */
.cozy-thumb[class*="cozy-thumb--"] {
	background-image: var(--wp--custom--dots);
	background-size: 11px 11px;
}
.cozy-thumb--lilac     { color: var(--wp--preset--color--lilac);     background-color: #F4F0FE; }
.cozy-thumb--sky       { color: var(--wp--preset--color--sky);       background-color: #EDF7FE; }
.cozy-thumb--mint      { color: var(--wp--preset--color--mint);      background-color: #EEFAF7; }
.cozy-thumb--bubblegum { color: var(--wp--preset--color--bubblegum); background-color: #FFF0F6; }

/* ----------------------------------------------------------------- mark ---- */

.cozy-mark {
	display: block;
	height: auto;
	/* Backstop for pixel art. If you swap in a smooth vector or a wordmark,
	   delete this line — see assets/img/marks/README.md. */
	image-rendering: pixelated;
	width: calc(var(--cozy-mark-scale, 4) * 24px);
}

.cozy-mark--favicon { width: calc(var(--cozy-mark-scale, 2) * 18px); }

.cozy-mark-link {
	display: inline-flex;
	text-decoration: none;
	border-radius: var(--wp--custom--radius);
}

.cozy-mark-link:focus-visible {
	outline: 3px solid var(--wp--preset--color--purple-700);
	outline-offset: 3px;
}

/* Avatar frame. Turn it off entirely with:
   add_filter( 'cozy_gamer_avatar_frame', '__return_false' ); */
.cozy-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 88px;
	block-size: 88px;
	overflow: hidden;
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: 50%;
	background: linear-gradient(160deg, var(--wp--preset--color--butter), var(--wp--preset--color--bubblegum));
}

.cozy-avatar .cozy-mark { width: calc(var(--cozy-mark-scale, 3) * 24px); }

/* A real photo fills the circle edge to edge — no gradient behind it. */
.cozy-avatar--photo { background: var(--wp--preset--color--paper); }
.cozy-avatar--photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.cozy-avatar--bare {
	border: 0;
	border-radius: 0;
	background: none;
	inline-size: auto;
	block-size: auto;
}

/* ------------------------------------------------------------- byline ---- */

.cozy-byline-row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.cozy-byline-txt { min-inline-size: 0; }

.cozy-byline-handle {
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--purple-700);
	margin: 0 0 10px;
}


/* --------------------------------------------------------------- header ---- */

.cozy-masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

.cozy-wordmark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.05;
	margin: 0;
	color: var(--wp--preset--color--ink-900);
}

.cozy-byline {
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--purple-700);
	margin: 2px 0 0;
}

/* ------------------------------------------------------------ motion/a11y -- */

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translate(2px, 2px);
	box-shadow: var(--wp--preset--shadow--pressed);
}

/* The busy ground makes a weak focus ring invisible. Never remove these. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--purple-700);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* The grid is decorative texture. In forced-colours mode it's noise. */
@media (forced-colors: active) {
	body { background-image: none; }
}

/* ================================================================ tabs === */

.cozy-tabs {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 5px;
	padding-inline-start: 6px;
	/* Padding, not margin. A top margin here collapses up and out of
	   .wp-site-blocks on any template whose header is the first child, which
	   left single posts sitting flush against the browser chrome. */
	padding-block-start: var(--wp--preset--spacing--50);
	margin-block-start: 0;
}

.cozy-wm {
	padding: 4px 18px 12px 6px;
	margin-inline-end: 6px;
	text-align: start;
	text-decoration: none;
	color: var(--wp--preset--color--ink-900);
}

.cozy-wm b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.05;
}

.cozy-wm i {
	display: block;
	font-family: var(--wp--preset--font-family--chrome);
	font-size: 10px;
	font-style: normal;
	color: var(--wp--preset--color--purple-700);
	margin-block-start: 4px;
	letter-spacing: 0.03em;
}

.cozy-tab { position: relative; }

.cozy-tab > a {
	display: block;
	background: var(--wp--preset--color--peri-100);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-block-end: 0;
	border-radius: var(--wp--custom--radius) var(--wp--custom--radius) 0 0;
	padding: 8px 13px 9px;
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
	white-space: nowrap;
}

.cozy-tab.is-current > a,
.cozy-tab > a:hover { background: var(--wp--preset--color--paper); }
.cozy-tab.is-current > a { padding-block-end: 12px; }

.cozy-dd {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 40;
	min-width: 186px;
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--hard);
	padding: 5px;
	display: none;
}

.has-dd:hover .cozy-dd,
.has-dd:focus-within .cozy-dd { display: block; }

.cozy-dd a {
	display: block;
	padding: 6px 10px;
	border-radius: 3px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-900);
	text-decoration: none;
}

.cozy-dd a:hover { background: var(--wp--preset--color--peri-100); }

.cozy-clock {
	margin-inline-start: auto;
	align-self: center;
	margin-block-end: 8px;
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	background: var(--wp--preset--color--peri-100);
	border: var(--wp--custom--border-width-sm) solid var(--wp--preset--color--ink-700);
	border-radius: 3px;
	padding: 3px 8px;
}

.cozy-clock:empty { display: none; }

/* the window directly under the tabs loses its top corners */
.cozy-tabs + * .cozy-win:first-child,
.cozy-tabs ~ * .cozy-win:first-of-type,
.cozy-hero { border-start-start-radius: 0; border-start-end-radius: 0; }

.cozy-mobtab {
	display: none;
	background: var(--wp--preset--color--peri-100);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-block-end: 0;
	border-radius: var(--wp--custom--radius) var(--wp--custom--radius) 0 0;
	padding: 9px 13px 10px;
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
}

.cozy-mobtab[aria-expanded="true"] { background: var(--wp--preset--color--butter); }

.cozy-mobpanel {
	display: none;
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: 0 var(--wp--custom--radius) var(--wp--custom--radius) var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--hard);
	padding: 8px;
	margin-block-end: var(--wp--preset--spacing--50);
}

.cozy-mobpanel.is-open { display: block; }
.cozy-mobpanel .cozy-wm { display: none; }
.cozy-mobpanel .cozy-tab > a {
	border: 0; background: none; font-size: 13px; padding: 10px 12px;
	border-block-end: 1.5px dashed var(--wp--preset--color--peri-100);
}
.cozy-mobpanel .cozy-dd {
	position: static; display: block; border: 0; box-shadow: none;
	padding: 0 0 8px 14px; min-width: 0;
}
.cozy-mobpanel .cozy-car { display: none; }

@media (max-width: 780px) {
	/* wordmark and MENU share one row on the window's top edge */
	.cozy-tabs { flex-wrap: nowrap; gap: 12px; padding-inline-start: 0; }
	.cozy-wm { padding: 0 0 9px; margin: 0; flex: 1 1 auto; min-width: 0; }
	.cozy-wm b { font-size: 20px; }
	.cozy-tabs > .cozy-tab, .cozy-clock { display: none; }
	.cozy-mobtab { display: block; flex: 0 0 auto; margin-inline-start: auto; }
}

@media (max-width: 400px) {
	.cozy-wm b { font-size: 18px; }
	.cozy-mobtab { padding: 8px 10px 9px; }
}

/* ================================================================ hero === */

.cozy-win {
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--hard);
	overflow: hidden;
	margin-block-end: var(--wp--preset--spacing--60);
	position: relative;
}

.cozy-bar {
	background: var(--wp--preset--gradient--chrome-bar);
	border-block-end: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	display: flex; align-items: center; gap: 5px; padding: 7px 11px;
}
.cozy-bar-t {
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--ink-900);
	margin-inline-end: auto;
}
.cozy-bar-btns { display: flex; gap: 5px; }
.cozy-bar-btns u {
	width: 14px; height: 14px; background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width-sm) solid var(--wp--preset--color--ink-700);
	text-decoration: none; position: relative; cursor: help;
}
.cozy-bar-btns u:hover::after {
	content: attr(data-tip); position: absolute; top: 19px; right: 0; z-index: 20;
	background: var(--wp--preset--color--ink-700); color: var(--wp--preset--color--butter);
	font-family: var(--wp--preset--font-family--chrome); font-size: 10px;
	padding: 5px 8px; border-radius: 3px; white-space: nowrap;
}
.cozy-win-body { padding: 28px; position: relative; }
.cozy-win-body::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background-image: var(--wp--custom--grain); background-size: 120px 120px; opacity: .055;
}
.cozy-win-body > * { position: relative; z-index: 1; }

.cozy-hero-grid {
	display: grid; grid-template-columns: minmax(210px, 290px) 1fr;
	gap: 24px; align-items: start;
}
.cozy-polaroid {
	margin: 0; background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: 2px; padding: 12px 12px 42px;
	box-shadow: var(--wp--preset--shadow--hard); transform: rotate(-2deg); position: relative;
}
.cozy-ph {
	display: flex; align-items: center; justify-content: center; text-align: center;
	aspect-ratio: 4/5; width: 100%; object-fit: cover;
	border: var(--wp--custom--border-width-sm) solid var(--wp--preset--color--ink-700);
}
.cozy-ph--empty {
	color: var(--wp--preset--color--lilac);
	background-image: var(--wp--custom--dots); background-size: 11px 11px; background-color: #F4F0FE;
}
.cozy-ph em {
	font-family: var(--wp--preset--font-family--chrome); font-size: 10px; font-style: normal;
	color: var(--wp--preset--color--ink-500); padding: 0 12px; line-height: 1.7;
}
.cozy-cap {
	position: absolute; inset-block-end: 11px; inset-inline: 0; text-align: center;
	font-family: var(--wp--preset--font-family--chrome); font-size: var(--wp--preset--font-size--chrome);
}
.cozy-tape {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-3deg);
	width: 96px; height: 26px; background: rgba(159,227,208,.72);
	border: 1.5px solid rgba(58,43,82,.35);
	clip-path: polygon(0 12%,6% 0,14% 10%,22% 2%,32% 11%,42% 1%,52% 10%,62% 2%,72% 11%,82% 1%,92% 10%,100% 3%,100% 90%,92% 100%,82% 91%,72% 99%,62% 90%,52% 100%,42% 90%,32% 99%,22% 90%,14% 100%,6% 91%,0 99%);
}
.cozy-h1 { margin: 0 0 10px; }
.cozy-sub { font-size: 18.5px; color: var(--wp--preset--color--ink-500); max-width: 52ch; }
.cozy-socs {
	/* Cap the track so two links don't balloon into slabs when YouTube and
	   Pinterest are switched off. */
	display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 232px));
	gap: 10px; margin: 20px 0 18px;
}
.cozy-soc {
	display: block; text-decoration: none; color: var(--wp--preset--color--ink-900);
	padding: 11px 13px; border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius); box-shadow: var(--wp--preset--shadow--hard-solid);
}
.cozy-soc b { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 15px; display: block; }
.cozy-soc i {
	font-family: var(--wp--preset--font-family--chrome); font-size: 9.5px; font-style: normal;
	display: block; margin-block-start: 3px; opacity: .72;
}
.cozy-soc:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--wp--preset--color--ink-700); }
.s-bubblegum { background: var(--wp--preset--color--bubblegum); }
.s-lilac { background: var(--wp--preset--color--lilac); }
.s-sky { background: var(--wp--preset--color--sky); }
.s-mint { background: var(--wp--preset--color--mint); }
.cozy-now {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width-sm) dashed var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius); padding: 7px 13px; font-size: 14px;
}
.cozy-dot { width: 8px; height: 8px; background: var(--wp--preset--color--teal); border-radius: 50%; animation: cozy-pulse 1.6s infinite; }
@keyframes cozy-pulse { 50% { opacity: .25; } }

.cozy-stage { position: relative; display: inline-block; cursor: pointer; user-select: none; }
.cozy-stage.is-hop { animation: cozy-hop .42s ease; }
@keyframes cozy-hop { 40% { transform: translateY(-16px) rotate(-4deg); } 70% { transform: translateY(0); } }
.cozy-mark.p-blink, .cozy-mark.p-happy { display: none; }
.cozy-stage.is-blink .p-open, .cozy-stage.is-happy .p-open { display: none; }
.cozy-stage.is-blink .p-blink, .cozy-stage.is-happy .p-happy { display: block; }
.cozy-bubble {
	position: absolute; top: -16px; right: -26px; background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width-sm) solid var(--wp--preset--color--ink-700);
	border-radius: 4px; padding: 3px 8px;
	font-family: var(--wp--preset--font-family--chrome); font-size: 11px;
	opacity: 0; transition: opacity .18s; pointer-events: none; white-space: nowrap;
}
.cozy-stage.is-saying .cozy-bubble { opacity: 1; }
.cozy-zzz {
	position: absolute; top: -22px; right: -14px;
	font-family: var(--wp--preset--font-family--chrome); font-size: 13px;
	color: var(--wp--preset--color--purple-700); opacity: 0; transition: opacity .5s;
}
.cozy-stage.is-asleep .cozy-zzz { opacity: 1; animation: cozy-float 2.6s infinite; }
@keyframes cozy-float { 50% { transform: translateY(-6px); } }

@media (max-width: 700px) {
	.cozy-hero-grid { display: block; }
	.cozy-hero-grid::after { content: ""; display: block; clear: both; }
	.cozy-polaroid { float: left; width: 150px; margin: 2px 18px 12px 0; }
	.cozy-phx { display: none; }
	.cozy-stage .cozy-mark { width: 96px; }
	.cozy-h1 { font-size: clamp(27px, 8.5vw, 36px); }
	.cozy-sub { font-size: 16.5px; }
	.cozy-win-body { padding: 20px; }
	.cozy-socs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 430px) {
	.cozy-polaroid { width: 128px; margin-inline-end: 14px; }
	.cozy-stage .cozy-mark { width: 80px; }
}

/* sticky strip — Pidge follows the reader up once the hero is gone */
.cozy-ministrip {
	position: fixed; inset-inline: 0; inset-block-start: 0; z-index: 80;
	background: var(--wp--preset--color--paper);
	border-block-end: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	display: flex; align-items: center; gap: 10px; padding: 6px 18px;
	transform: translateY(-110%); transition: transform .28s ease;
}
.cozy-ministrip.is-up { transform: translateY(0); }
/* favicon.svg is now a square app-icon plate (browser tabs need square), so
   the strip uses the bare loaf. Pinned to the old width so the bar height
   doesn't move. */
.cozy-ministrip .cozy-mark { width: 36px; }
.cozy-ministrip .cozy-wm { padding: 0; margin: 0; }
.cozy-ministrip .cozy-wm b { font-size: 15px; }
.cozy-ministrip .cozy-wm i { font-size: 9px; margin-block-start: 1px; }
.cozy-ministrip .cozy-mininav { margin-inline-start: auto; display: flex; gap: 2px; }
@media (max-width: 780px) { .cozy-ministrip .cozy-mininav { display: none; } }
@media (prefers-reduced-motion: reduce) { .cozy-ministrip { transition: none; } }

/* Card titles are links, so they inherit the link colour. Inside a card the
   title is the whole point — it should read as a heading, not a link. */
.cozy-card .wp-block-post-title { font-size: 18px; line-height: 1.3; margin: 0; }
.cozy-card .wp-block-post-title a { color: var(--wp--preset--color--ink-900); text-decoration: none; }
.cozy-card .wp-block-post-title a:hover { color: var(--wp--preset--color--purple-700); }
.cozy-card .wp-block-post-terms { margin-block-end: 6px; }
.cozy-card .wp-block-post-terms a { text-decoration: none; }

/* ------------------------------------------------------------------ 404 -- */
.cozy-404 { max-width: 720px; margin-inline: auto; margin-block-start: var(--wp--preset--spacing--70); }
.cozy-404-grid { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.cozy-404-grid > div:last-child { flex: 1 1 280px; }
.cozy-404-search input[type="search"] {
	font-family: var(--wp--preset--font-family--body); font-size: 15px; padding: 9px 13px;
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
}

/* ============================================================== QA fixes == */

/* The tab strip must sit flush on the window below it. The root layout puts a
   blockGap between the header part and main, which opened a 24px gap. */
.wp-site-blocks > header + main { margin-block-start: 0; }
.cozy-tabs { margin-block-end: 0; }

/* Cards in a post-template grid were sizing to their own content, so a
   two-line title made one card taller than its neighbours. Stretch the grid
   item, then let the card fill it. */
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .cozy-card,
.cozy-card { display: flex; flex-direction: column; width: 100%; }
.cozy-card > :last-child { margin-block-start: auto; }
.cozy-card .wp-block-post-featured-image { margin: 0; }
.cozy-card .wp-block-post-featured-image img { display: block; width: 100%; }

/* Reading column: belt and braces now the token collision is fixed. */
.wp-block-post-content { max-width: min(var(--wp--custom--measure), 100%); }

/* ---------------------------------------------------------- instagram --- */
.cozy-sect-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block: 44px 14px; }
.cozy-sect-head h2 { margin: 0; }
.cozy-more {
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
}
.cozy-ig-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--ink-500); margin-block-start: -6px; }
.cozy-ig-setup {
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width) dashed var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	padding: 20px 22px;
}
.cozy-ig-setup--bad { border-color: #B3245B; }
.cozy-iggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.cozy-ig { margin: 0; position: relative; }
.cozy-ig img {
	display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--preset--shadow--hard);
}
.cozy-ighide {
	position: absolute; inset-block-start: 7px; inset-inline-end: 7px;
	width: 26px; height: 26px; line-height: 1; font-size: 15px; cursor: pointer;
	background: var(--wp--preset--color--paper);
	border: var(--wp--custom--border-width-sm) solid var(--wp--preset--color--ink-700);
	border-radius: 3px; opacity: 0; transition: opacity .15s;
}
.cozy-ig:hover .cozy-ighide, .cozy-ighide:focus-visible { opacity: 1; }
.cozy-ig.is-hidden img { opacity: .22; filter: grayscale(1); }
.cozy-ig.is-hidden .cozy-ighide { opacity: 1; background: var(--wp--preset--color--butter); }

/* Article and page frames hug the reading column. A 68ch measure centred in a
   1140px window leaves a dead third to one side and reads as a bug. */
/* One source of truth for the reading-frame width: the frame itself, and the
   header/footer that have to line up with it. */
:root { --cozy-frame-w: 880px; }
.cozy-article-frame { max-width: var(--cozy-frame-w); margin-inline: auto; }
.cozy-article-frame .wp-block-post-content,
.cozy-article-frame .wp-block-post-title,
.cozy-article-frame > * { margin-inline: 0; }
.cozy-article-frame .wp-block-post-content > * { margin-inline: 0; }

/* Featured-image fallback: halftone panel so card grids don't have holes. */
.cozy-thumb-fallback {
	display: block;
	aspect-ratio: 16 / 9;
	border-block-end: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	background-image: var(--wp--custom--dots);
	background-size: 11px 11px;
}

/* Everything inside an article frame shares one left edge. The title was
   constrained to contentSize while the body carried its own measure, so they
   started at different insets. */
.cozy-article-frame > * { max-width: none; }
.cozy-article-frame .wp-block-post-title,
.cozy-article-frame .wp-block-post-date,
.cozy-article-frame .wp-block-post-terms,
.cozy-article-frame .wp-block-post-featured-image,
.cozy-article-frame .wp-block-post-content { margin-inline: 0; max-width: min(var(--wp--custom--measure), 100%); }
.cozy-article-frame .wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) { margin-inline: 0; }

/* The fallback is a <span>; without an explicit width, aspect-ratio has
   nothing to compute against and it collapses to zero height. */
.cozy-thumb-fallback { width: 100%; }

/* post-content is a constrained layout, so its children were re-centred inside
   the measure — leaving the body ~50px right of the title. */
.cozy-article-frame .wp-block-post-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
	max-width: none;
	margin-inline: 0;
}

/* post-content carries WordPress's global root padding on top of the window's
   own, double-indenting the body relative to the title. */
.cozy-article-frame .wp-block-post-content.has-global-padding {
	/* Match the title's inset exactly rather than zeroing it, which left the
	   body 7px adrift the other way. */
	padding-inline: var(--wp--preset--spacing--50);
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* ---------------------------------------------------- archive headers --- */

/* Left-align the heading and description instead of letting the constrained
   layout centre them inside a 1140px window — that read as a random indent. */
.cozy-archive-head > * {
	max-width: none;
	margin-inline: 0;
}

.cozy-archive-head .wp-block-query-title,
.cozy-archive-head h1 { margin-block: 0 8px; }

.cozy-archive-head .wp-block-term-description,
.cozy-archive-head p {
	max-width: 62ch;
	margin-block: 0;
}

/* Empty term description shouldn't leave a gap. */
.cozy-archive-head .wp-block-term-description:empty { display: none; }

/* ------------------------------------------------ featured image caps --- */

/* Hard-cap every card thumbnail to one ratio. Source images vary wildly —
   16:9 key art, square covers, tall posters — and without this the grid
   goes ragged. object-fit crops rather than distorts. */
.cozy-card .wp-block-post-featured-image,
.cozy-card .wp-block-post-featured-image a { display: block; margin: 0; line-height: 0; }

.cozy-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
	border-block-end: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: 0;
}

/* Single/page hero image: same ratio, capped height so a tall source can't
   push the copy off the screen. */
.cozy-article-frame .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 420px;
	object-fit: cover;
	border: var(--wp--custom--border-width) solid var(--wp--preset--color--ink-700);
	border-radius: var(--wp--custom--radius);
}

/* WordPress's constrained-layout CSS auto-centres children with a selector
   that outranks a plain class, so term-description sat centred while the
   heading was flush left. Override explicitly. */
.wp-block-group.cozy-archive-head.is-layout-constrained > .wp-block-term-description,
.wp-block-group.cozy-archive-head.is-layout-constrained > * {
	margin-inline-start: 0;
	margin-inline-end: auto;
	max-width: none;
}
.cozy-archive-head .wp-block-term-description p {
	max-width: 62ch;
	margin-inline: 0;
	text-align: start;
}
.cozy-archive-head .wp-block-term-description:empty { display: none; }

/* -------------------------------------------------------------- footer ---- */

.cozy-footer-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px var(--wp--preset--spacing--40);
}

.cozy-foot-mark {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-900);
	margin: 0;
}

.cozy-foot-socs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cozy-foot-socs a {
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--ink-500);
	text-decoration: none;
	border-block-end: 2px solid transparent;
}
.cozy-foot-socs a:hover,
.cozy-foot-socs a:focus-visible {
	color: var(--wp--preset--color--purple-700);
	border-block-end-color: var(--wp--preset--color--purple-700);
}

.cozy-foot-handle {
	font-family: var(--wp--preset--font-family--chrome);
	font-size: var(--wp--preset--font-size--chrome);
	color: var(--wp--preset--color--purple-700);
	margin: 0;
}

/* Compact chips: label only, no handle line, sized for a byline not a hero. */
.cozy-socs--compact {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	grid-template-columns: none;
}
.cozy-socs--compact .cozy-soc { padding: 6px 12px; }
.cozy-socs--compact .cozy-soc b { font-size: 13px; }

/* ------------------------------------------------- narrow-frame alignment ---- */

/* Posts and pages put the article in a narrower reading frame than the 1140px
   the header and footer are constrained to, which left the wordmark and tabs
   hanging out past the window's left edge. Match the chrome to the frame so
   the whole page shares one left edge.

   Keyed off the frame itself rather than a body class, so any future template
   that uses .cozy-article-frame gets this automatically. Browsers without
   :has() just keep the old wider chrome — no breakage, only the offset. */
.wp-site-blocks:has(main .cozy-article-frame) .cozy-tabs,
.wp-site-blocks:has(main .cozy-article-frame) .cozy-mobpanel,
.wp-site-blocks:has(main .cozy-article-frame) .cozy-footer-row {
	max-width: var(--cozy-frame-w);
	margin-inline: auto;
}