/**
 * Life in Bold — base stylesheet.
 *
 * Tokens come from theme.json as --wp--preset--* and --wp--custom--*.
 * No hex literals below: if a colour is needed, it belongs in theme.json first.
 */

/* -------------------------------------------------------------------------
 * 0. Contrast-safe muted text
 *
 * Concrete on bone measures 3.14:1 — under the 4.5:1 floor for small text, and
 * every mono label uses it. Ash is dark enough on light grounds; Concrete is
 * light enough on ink. One token, redefined per ground, so muted text clears AA
 * on both without each rule having to know where it sits.
 * ---------------------------------------------------------------------- */

:root {
	--lib-dim: var(--wp--preset--color--ash);
}

.lib-band,
.wp-block-group.is-style-ink-band,
.wp-block-group.is-style-concrete,
.lib-drawer__head,
.lib-sticky-buy {
	--lib-dim: var(--wp--preset--color--concrete);
}

/* -------------------------------------------------------------------------
 * 1. Document
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

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

/* Square edges are a brand rule. Reassert it over plugin stylesheets. */
input,
select,
textarea,
button,
.wp-block-button__link {
	border-radius: 0;
}

/* -------------------------------------------------------------------------
 * 2. Typography
 * ---------------------------------------------------------------------- */

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/* Running text stays near 68 characters regardless of container width. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: var(--wp--custom--measure);
}

/**
 * The brand's small-print voice: mono, uppercase, wide-tracked.
 * Used for eyebrows, sizes, badges, shipping notes and order numbers.
 */
.lib-label {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.4;
	text-transform: uppercase;
}

.lib-label--dim {
	color: var(--lib-dim);
}

.lib-label--signal {
	color: var(--wp--preset--color--signal);
}

/* Acid never carries text on light grounds — it is a fill behind ink. */
.lib-label--acid {
	background: var(--wp--preset--color--acid);
	color: var(--wp--preset--color--ink);
	padding: 0.25em 0.5em;
}

/* -------------------------------------------------------------------------
 * 3. The monogram
 * ---------------------------------------------------------------------- */

/*
 * Dark logo by default: everything but the red "I" takes currentColor.
 * --lib-logo-h comes from Theme Settings.
 */
.lib-mark,
.lib-brand__logo {
	display: block;
	flex: none;
	height: var(--lib-logo-h, 3.25rem);
	width: auto;
}

@media (max-width: 599px) {
	.lib-mark,
	.lib-brand__logo {
		height: min(var(--lib-logo-h, 3.25rem), 3rem);
	}
}

.lib-mark {
	aspect-ratio: 1078 / 1030;
	color: #000;
}

.lib-brand__logo {
	max-width: 60vw;
	object-fit: contain;
}

/* White logo on ink grounds. */
.lib-band .lib-mark,
.wp-block-group.is-style-ink-band .lib-mark,
.wp-block-group.is-style-concrete .lib-mark {
	color: #fff;
}

/* Uploaded logos: the white version inside ink bands, the dark one elsewhere. */
.lib-brand__on-dark,
.lib-band .lib-brand__on-light,
.wp-block-group.is-style-ink-band .lib-brand__on-light,
.wp-block-group.is-style-concrete .lib-brand__on-light {
	display: none;
}

.lib-band .lib-brand__on-dark,
.wp-block-group.is-style-ink-band .lib-brand__on-dark,
.wp-block-group.is-style-concrete .lib-brand__on-dark {
	display: block;
}

/* -------------------------------------------------------------------------
 * Announcement bar (Theme Settings)
 * ---------------------------------------------------------------------- */

.lib-announce {
	background: var(--wp--preset--color--signal-deep);
	color: #fff;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	padding: 0.55rem 1rem;
	text-align: center;
	text-transform: uppercase;
}

.lib-announce__text {
	color: inherit;
	display: inline-block;
	margin: 0;
	text-decoration: none;
}

a.lib-announce__text:hover,
a.lib-announce__text:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lib-announce a:focus-visible {
	outline-color: #fff;
}

/* -------------------------------------------------------------------------
 * 4. Focus and skip link
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--signal-deep);
	outline-offset: var(--wp--custom--focus--offset);
}

/* On ink grounds the blue ring loses contrast; acid reads on both. */
.lib-band :where(a, button, input, select, summary, [tabindex]):focus-visible,
.wp-block-group.is-style-ink-band :where(a, button, input, select, summary, [tabindex]):focus-visible,
.wp-block-group.is-style-concrete :where(a, button, input, select, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--acid);
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--acid);
	color: var(--wp--preset--color--ink);
	clip-path: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	height: auto;
	left: 1rem;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1;
	padding: 1rem 1.5rem;
	text-decoration: none;
	text-transform: uppercase;
	top: calc(1rem + var(--lib-admin-bar, 0px));
	width: auto;
	z-index: 100000;
}

/* -------------------------------------------------------------------------
 * 5. Site chrome
 * ---------------------------------------------------------------------- */

/**
 * Full-bleed bands stack edge to edge. The site-level block gap would otherwise
 * open a bone seam between the header's signal rule and the section below it.
 * Every band carries its own padding, so the gap has nothing left to do.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.lib-header {
	position: sticky;
	top: var(--lib-admin-bar, 0px);
	z-index: 100;
	border-bottom: var(--wp--custom--rule--brand) solid var(--wp--preset--color--signal);
}

.lib-header__inner {
	align-items: center;
	display: flex;
	gap: clamp(1rem, 4vw, 2.5rem);
	justify-content: space-between;
}

/* Header opens on red; the footer closes on acid so the two bands differ. */
.lib-footer {
	border-top: var(--wp--custom--rule--brand) solid var(--wp--preset--color--acid);
}

/* Social links and email from Theme Settings, in the small-print voice. */
.lib-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0;
}

.lib-footer__social a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	padding-block: 0.5rem;
	text-decoration: none;
	text-transform: uppercase;
}

.lib-footer__social a:hover,
.lib-footer__social a:focus-visible {
	text-decoration: underline;
}

/* The email stays in its own case — an uppercased address reads wrong. */
.lib-footer__social a[href^="mailto:"] {
	text-transform: none;
}

/* Shared treatment for any full-bleed ink section. */
.lib-band {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.lib-band :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: inherit;
}

.lib-band a:not(.wp-block-button__link),
.wp-block-group.is-style-ink-band a:not(.wp-block-button__link),
.wp-block-group.is-style-concrete a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--bone);
	text-decoration-color: var(--wp--preset--color--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.lib-band a:not(.wp-block-button__link):hover,
.wp-block-group.is-style-ink-band a:not(.wp-block-button__link):hover,
.wp-block-group.is-style-concrete a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--acid);
}

/* -------------------------------------------------------------------------
 * 6. Block style variations
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-ink-band {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.wp-block-group.is-style-ink-band :is(h1, h2, h3, h4, h5, h6, p, li, cite) {
	color: inherit;
}

/**
 * Concrete: the wall texture from Campaigns 1 and 3. An SVG turbulence layer
 * over ink — no photograph, so it costs 1KB and scales to any viewport.
 */
.wp-block-group.is-style-concrete {
	background-color: var(--wp--preset--color--ink);
	background-image: url("../img/concrete.svg");
	background-size: 420px 420px;
	color: var(--wp--preset--color--bone);
}

.wp-block-group.is-style-concrete :is(h1, h2, h3, h4, h5, h6, p, li) {
	color: inherit;
}

/* The campaign headline treatment: as large as the container allows. */
.wp-block-heading.is-style-statement {
	font-size: var(--wp--preset--font-size--display-xl);
	/* Anton's caps nearly fill the em box; below 0.9 the lines collide. */
	line-height: 0.9;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.wp-block-paragraph.is-style-eyebrow {
	color: var(--lib-dim);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

.wp-block-separator.is-style-signal-rule {
	background: var(--wp--preset--color--signal);
	border: 0;
	height: var(--wp--custom--rule--structural);
	margin-inline: 0;
	max-width: 5rem;
	opacity: 1;
}

/* Torn paper edge, as used on every campaign card. */
.wp-block-image.is-style-torn img {
	-webkit-mask-image: url("../img/torn-edge.svg");
	mask-image: url("../img/torn-edge.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	box-shadow: inset 0 0 0 2px currentColor;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
}

.lib-band .wp-block-button.is-style-ghost .wp-block-button__link,
.is-style-ink-band .wp-block-button.is-style-ghost .wp-block-button__link,
.is-style-concrete .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--wp--preset--color--bone);
}

.lib-band .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.lib-band .wp-block-button.is-style-ghost .wp-block-button__link:focus,
.is-style-ink-band .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.is-style-ink-band .wp-block-button.is-style-ghost .wp-block-button__link:focus,
.is-style-concrete .wp-block-button.is-style-ghost .wp-block-button__link:hover,
.is-style-concrete .wp-block-button.is-style-ghost .wp-block-button__link:focus {
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
 * 7. Motion
 * ---------------------------------------------------------------------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 8. Marketing sections
 * ---------------------------------------------------------------------- */

.lib-hero .wp-block-buttons {
	gap: 0.75rem;
}

/* Four short statements, spread on desktop, stacked two-up on a phone. */
.lib-trust__row {
	gap: 0.75rem var(--wp--preset--spacing--30);
}

.lib-trust__row p {
	margin: 0;
}

@media (max-width: 600px) {
	.lib-trust__row {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lib-campaign .wp-block-image {
	margin: 0;
}

.lib-campaign .wp-block-image img {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * 9. Newsletter
 * ---------------------------------------------------------------------- */

.lib-newsletter {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 34rem;
}

.lib-newsletter__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 400;
	line-height: 0.95;
	margin: 0;
	text-transform: uppercase;
}

.lib-newsletter__note {
	color: var(--lib-dim);
	margin: 0 0 0.75rem;
}

/* MailPoet ships its own form styling; bring the field and button onto brand. */
.lib-newsletter__form input[type="email"],
.lib-newsletter__form input[type="text"] {
	background: var(--wp--preset--color--bone);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	padding: 0.9rem 1rem;
	width: 100%;
}

.lib-newsletter__form input[type="submit"],
.lib-newsletter__form button[type="submit"] {
	background: var(--wp--preset--color--signal-deep);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	padding: 0.9rem 1.4rem;
	text-transform: uppercase;
}

/* Editor-only notice, e.g. the newsletter band with no MailPoet form behind it. */
.lib-notice {
	border-left: var(--wp--custom--rule--structural) solid var(--wp--preset--color--signal);
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	max-width: var(--wp--custom--measure);
	padding: 0.9rem 1.1rem;
}

.lib-notice p {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 10. Editorial content pages
 * ---------------------------------------------------------------------- */

.lib-manifesto p {
	font-size: var(--wp--preset--font-size--lead);
}

.lib-lookbook figure {
	margin: 0;
}

.lib-lookbook img {
	display: block;
	width: 100%;
}

/* Long-form pages get a little more air between their sections. */
.lib-longform h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.lib-longform h2:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * 11. Mockups 4 — swash, note card, caption bar, torn edges
 *
 * The Mockups 4 posters share four devices the site did not have: a hand-drawn
 * marker swash under every headline, a torn note card carrying a stacked list
 * of fragments, a caption bar pairing a line of copy with the LIFE IN BOLD
 * lockup, and torn edges where one band meets the next. The accent colour
 * changes per poster, so all four take --lib-accent rather than a fixed value.
 * ---------------------------------------------------------------------- */

:root {
	--lib-accent: var(--wp--preset--color--signal);
}

/* Per-drop accents, so a drop can own a colour the way each poster does. */
.lib-accent--acid   { --lib-accent: var(--wp--preset--color--acid); }
.lib-accent--volt   { --lib-accent: var(--wp--preset--color--volt); }
.lib-accent--signal { --lib-accent: var(--wp--preset--color--signal); }
.lib-accent--flare  { --lib-accent: var(--wp--preset--color--flare); }

/**
 * Swash: two rough strokes beneath a heading.
 *
 * A mask rather than a background image, so one file tints to any accent
 * instead of needing a copy per colour.
 */
.lib-swash {
	background: var(--lib-accent);
	display: block;
	height: 1.15rem;
	margin-top: 0.25rem;
	width: 100%;

	/*
	 * The element stays full width and the MASK is what gets sized and pushed
	 * left. WordPress's constrained layout sets `margin-inline: auto` with
	 * !important on every direct child, so a max-width element is centred no
	 * matter what margins this rule asks for. A full-width element has no free
	 * space for those auto margins to distribute, and the stroke lands where
	 * the mask puts it.
	 */
	-webkit-mask-image: url("../img/swash.svg");
	mask-image: url("../img/swash.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: left center;
	mask-position: left center;
	-webkit-mask-size: 13rem 100%;
	mask-size: 13rem 100%;
}

.lib-swash--wide {
	height: 1.4rem;
	-webkit-mask-size: 19rem 100%;
	mask-size: 19rem 100%;
}

.lib-swash--tight {
	height: 0.85rem;
	-webkit-mask-size: 7.5rem 100%;
	mask-size: 7.5rem 100%;
}


/**
 * Note card: the handwritten aside from every poster.
 *
 * Torn top and bottom edges, a slight rotation so it reads as placed rather
 * than laid out, and the accent swash beneath the last line.
 */
.lib-note-card {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	line-height: 1.3;
	padding: 1.1rem 1.5rem 1.35rem;
	position: relative;
	transform: rotate(-1.4deg);
	-webkit-mask-image: url("../img/torn-edge.svg");
	mask-image: url("../img/torn-edge.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.lib-note-card p {
	margin: 0;
	max-width: none;
}

.lib-note-card .lib-swash {
	height: 0.8rem;
	margin-top: 0.55rem;
	-webkit-mask-size: 6.5rem 100%;
	mask-size: 6.5rem 100%;
}

@media (prefers-reduced-motion: reduce) {
	.lib-note-card { transform: none; }
}

/**
 * Caption bar: a line of copy, a divider, the wordmark. Closes a band the way
 * it closes every poster.
 */
.lib-caption-bar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	justify-content: space-between;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	position: relative;
}

.lib-caption-bar::before {
	background: var(--lib-accent);
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 4.5rem;
}

.lib-caption-bar__text {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

.lib-caption-bar__mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A torn edge where one full-bleed band meets the next. */
.lib-torn-bottom::after,
.lib-torn-top::before {
	background: inherit;
	content: "";
	display: block;
	height: 18px;
	left: 0;
	position: absolute;
	width: 100%;
	-webkit-mask-image: url("../img/torn-edge.svg");
	mask-image: url("../img/torn-edge.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.lib-torn-bottom { position: relative; }
.lib-torn-bottom::after { bottom: -17px; }

/* -------------------------------------------------------------------------
 * 12. Hero collage
 * ---------------------------------------------------------------------- */

.lib-hero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 900px) {
	.lib-hero__grid {
		align-items: center;
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	}
}

.lib-hero__type {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lib-hero__type .is-style-eyebrow {
	margin: 0 0 0.6rem;
}

/*
 * Capped below the global display-xl. At full size the headline alone filled a
 * 900px viewport and pushed every product out of the first screen.
 */
.lib-hero__title {
	font-size: clamp(2.6rem, 6.4vw, 5rem);
	line-height: 0.9;
	letter-spacing: -0.015em;
	margin: 0;
}

.lib-hero__lede {
	color: var(--wp--preset--color--bone);
	font-size: var(--wp--preset--font-size--lead);
	margin: var(--wp--preset--spacing--20) 0 0;
	max-width: 34ch;
}

.lib-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--30);
}

/* The photograph, torn along its edge the way the posters tear their panels. */
.lib-hero__media {
	min-width: 0;
	position: relative;
}

.lib-hero__figure {
	margin: 0;
	-webkit-mask-image: url("../img/torn-edge.svg");
	mask-image: url("../img/torn-edge.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.lib-hero__figure img {
	aspect-ratio: 4 / 5;
	display: block;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 900px) {
	/*
	 * Capped, because the photograph is what sets the hero's height: at 4:5
	 * across 45vw it made the band 923px tall on a 900px screen, so the whole
	 * first screen was hero and no product was reachable without scrolling.
	 *
	 * The height is capped and the width follows at 4:5, rather than the image
	 * filling the column and cropping: the campaign posters carry their
	 * headline in the image, and a cropped frame cut "QUIET" off the top.
	 */
	.lib-hero__media {
		justify-self: end;
		width: fit-content;
	}

	.lib-hero__figure img {
		height: min(52vh, 460px);
		width: auto;
	}
}

/* The note card overlaps the photograph's lower corner, as in the posters. */
.lib-hero__note {
	margin-top: -3.5rem;
	margin-left: 1rem;
	position: relative;
	z-index: 2;
}

@media (min-width: 900px) {
	.lib-hero__note {
		margin-left: -2.5rem;
		margin-top: -3.5rem;
	}
}

/* -------------------------------------------------------------------------
 * 13. Drop strip
 * ---------------------------------------------------------------------- */

.lib-drops {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 700px) {
	.lib-drops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.lib-drops { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lib-drop {
	background: var(--wp--preset--color--paper);
	border-top: var(--wp--custom--rule--brand) solid var(--lib-accent);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	min-width: 0;
	padding: var(--wp--preset--spacing--20);
	transition: transform var(--wp--custom--transition--base);
}

.lib-drop:hover {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.lib-drop:hover { transform: none; }
}

/*
 * The number is text, so it takes the contrast-safe muted colour; the accent
 * rides on a square beside it instead. Set in the accent itself, "Drop 03"
 * measured 1.26:1 in acid on paper — effectively invisible — and flare 4.31:1.
 */
.lib-drop__no {
	align-items: center;
	color: var(--lib-dim);
	display: inline-flex;
	gap: 0.45rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.lib-drop__no::before {
	background: var(--lib-accent);
	content: "";
	flex: none;
	height: 0.6rem;
	width: 0.6rem;
}

.lib-drop__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.lib-drop__name a {
	color: inherit;
	text-decoration: none;
}

.lib-drop__name a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.lib-drop { position: relative; }

.lib-drop:hover .lib-drop__name { color: var(--wp--preset--color--signal-deep); }

.lib-drop__meta {
	color: var(--lib-dim);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.06em;
	margin: auto 0 0;
	text-transform: uppercase;
}

.lib-drop__desc {
	color: var(--wp--preset--color--ash);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

/* A full-bleed breakout measured in vw can exceed the body by the scrollbar's
   width; clipping here keeps that from becoming a horizontal scroll. */
.lib-shop {
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
 * 14. Drops index (/drops/)
 * ---------------------------------------------------------------------- */

.lib-drops-hero__intro p {
	color: var(--wp--preset--color--bone);
	font-size: var(--wp--preset--font-size--lead);
	max-width: 46ch;
	margin-inline: 0 !important;
}

.lib-drops--index {
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 700px) {
	.lib-drops--index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Index cards are editorial rows, not the homepage's compact tiles. */
.lib-drops--index .lib-drop {
	border-top-width: 0;
	gap: 0;
	padding: 0;
}

.lib-drop__visual {
	align-items: center;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--ink);
	border-bottom: var(--wp--custom--rule--brand) solid var(--lib-accent);
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	overflow: hidden;
	padding: 1rem;
}

.lib-drop__thumb {
	flex: 1 1 0;
	height: 100%;
	min-width: 0;
	object-fit: cover;
}

/* An unreleased drop shows its number, set huge in its own colour. */
.lib-drop__big-no {
	color: var(--lib-accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 14vw, 9rem);
	line-height: 0.8;
}

.lib-drop__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.45rem;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.lib-drops--index .lib-drop__name {
	font-size: var(--wp--preset--font-size--display-s);
}

.lib-drops--index .lib-drop__desc {
	font-size: var(--wp--preset--font-size--body);
}

.lib-drop__cta {
	color: var(--wp--preset--color--signal-deep);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	margin-top: 0.4rem;
	text-transform: uppercase;
}

.lib-drop__cta::after {
	content: " \2192";
}

/*
 * Volt blue on ink measures 2.34:1 — the one accent that fails even the 3:1
 * large-text floor on a dark ground (signal 4.1, flare 4.1, acid 15). Where a
 * blue drop sits on ink, its accent is mixed toward bone to about 5.6:1; on
 * light grounds it stays pure volt.
 */
.lib-archive-band.lib-accent--volt,
.lib-accent--volt .lib-drop__visual {
	--lib-accent: color-mix(in srgb, var(--wp--preset--color--volt) 55%, var(--wp--preset--color--bone));
}

/* -------------------------------------------------------------------------
 * 15. Mobile menu overlay
 *
 * The header navigation inherits the desktop's 12px mono labels, which left
 * the phone's full-screen menu as four footnote-sized links on an empty black
 * screen with tap targets barely taller than the text. Open, it now uses the
 * display face at a size a thumb can hit.
 * ---------------------------------------------------------------------- */

.lib-nav--header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--30) clamp(1.25rem, 6vw, 2.5rem);
}

.lib-nav--header .is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--40);
}

.lib-nav--header .is-menu-open .wp-block-navigation__container {
	gap: 0.35rem !important;
}

.lib-nav--header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.4rem, 11vw, 3.4rem);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	padding-block: 0.3rem;
	text-transform: uppercase;
}

.lib-nav--header .is-menu-open .wp-block-navigation-item__content:hover,
.lib-nav--header .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--signal);
}

/* The current page is marked the way the posters mark a headline. */
.lib-nav--header .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--signal);
	text-decoration-thickness: 4px;
	text-underline-offset: 6px;
}

/*
 * 44px tap targets for the open and close buttons. Scoped to phone widths:
 * a display value here outranks core's rule that hides the open button from
 * 600px up, which put the hamburger above the full desktop menu.
 */
@media (max-width: 599px) {
	.lib-nav--header .wp-block-navigation__responsive-container-open,
	.lib-nav--header .wp-block-navigation__responsive-container-close {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}
}

/* Current section in the desktop menus. */
.lib-nav--header .current-menu-item > .wp-block-navigation-item__content,
.lib-nav--footer .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--signal);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}