/**
 * Oldspeak — base typography and the tri-band section system.
 *
 * The band system is the structural spine of the theme. A Penguin cover is
 * fielded into coloured bands; sections here alternate the same way. Each
 * section is one band and declares its own ground via a modifier class.
 */

/* ---------------------------------------------------------------
 * Reset-ish. Storefront brings its own normalise; we only correct
 * what fights the token system.
 * --------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background-color: var(--os-bg);
	color: var(--os-fg);
	font-family: var(--os-font-body);
	font-size: var(--os-step-0);
	line-height: var(--os-lh-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------
 * Headings — Caslon, tightened. Display sizes get optical tracking
 * correction; Caslon opens up badly at large sizes otherwise.
 * --------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6,
.os-display {
	margin: 0 0 var(--os-space-s);
	font-family: var(--os-font-display);
	font-weight: 400;
	line-height: var(--os-lh-snug);
	letter-spacing: var(--os-tracking-display);
	color: inherit;
	text-wrap: balance;
}

h1,
.os-h1 {
	font-size: var(--os-step-4);
	line-height: var(--os-lh-tight);
}

h2,
.os-h2 {
	font-size: var(--os-step-3);
}

h3,
.os-h3 {
	font-size: var(--os-step-2);
}

h4,
.os-h4 {
	font-size: var(--os-step-1);
}

h5,
h6 {
	font-size: var(--os-step-0);
}

/* The one place we go really large — hero headline only. */
.os-h-hero {
	font-size: var(--os-step-5);
	line-height: 0.98;
	letter-spacing: -0.026em;
}

p {
	margin: 0 0 var(--os-space-s);
	text-wrap: pretty;
}

p:last-child {
	margin-bottom: 0;
}

/* Reading measure. Long-form prose should never run the full container. */
.os-prose {
	max-width: var(--os-container-narrow);
}

.os-prose > * + * {
	margin-top: var(--os-space-s);
}

.os-lede {
	font-size: var(--os-step-1);
	line-height: 1.5;
	color: var(--os-muted);
}

/* ---------------------------------------------------------------
 * Shelf marks — the structural device. These are the letter codes a
 * bookshop puts on shelf-edge labels (FIC, HIS, POL). They carry real
 * navigational meaning, which is why they're here and 01/02/03 isn't.
 * --------------------------------------------------------------- */
.os-shelfmark {
	display: inline-flex;
	align-items: center;
	gap: var(--os-space-2xs);
	margin: 0 0 var(--os-space-xs);
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	font-weight: 600;
	letter-spacing: var(--os-tracking-label);
	text-transform: uppercase;
	color: var(--os-brass);
}

.os-shelfmark::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	background: currentColor;
	flex: none;
}

/* ---------------------------------------------------------------
 * Links
 * --------------------------------------------------------------- */
a {
	color: var(--os-oxide);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color var(--os-dur-fast) var(--os-ease);
}

a:hover {
	color: var(--os-oxide-bright);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--os-focus-ring);
	outline-offset: var(--os-focus-offset);
	border-radius: var(--os-radius-sm);
}

/* Never remove focus outright — only swap it for the ring. */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------------
 * Skip link — the source site has one, but it is visually broken.
 * --------------------------------------------------------------- */
.os-skip-link {
	position: absolute;
	inset-inline-start: var(--os-space-s);
	inset-block-start: var(--os-space-s);
	z-index: 999;
	padding: var(--os-space-2xs) var(--os-space-s);
	background: var(--os-ink);
	color: #fff;
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--os-dur) var(--os-ease);
}

.os-skip-link:focus {
	transform: translateY(0);
}

/* ---------------------------------------------------------------
 * Containers
 * --------------------------------------------------------------- */
.os-container {
	inline-size: 100%;
	max-inline-size: var(--os-container);
	margin-inline: auto;
	padding-inline: var(--os-gutter);
}

.os-container--wide {
	max-inline-size: var(--os-container-wide);
}

.os-container--narrow {
	max-inline-size: var(--os-container-narrow);
}

/* ---------------------------------------------------------------
 * The tri-band system.
 *
 * .os-band is the section wrapper. Ground is set by modifier, and the
 * modifier also rebinds --os-fg / --os-muted / --os-rule so that every
 * child picks up correct contrast without knowing which band it's in.
 * --------------------------------------------------------------- */
.os-band {
	padding-block: var(--os-band-pad);
	background-color: var(--os-bg);
	color: var(--os-fg);
	position: relative;
}

.os-band--paper {
	--os-bg: var(--os-paper);
	--os-fg: var(--os-ink);
}

.os-band--shelf {
	--os-bg: var(--os-shelf);
	--os-fg: var(--os-shelf-fg);
	--os-muted: var(--os-shelf-muted);
	--os-rule: var(--os-shelf-rule);
	--os-accent: var(--os-brass);
}

.os-band--shelf-deep {
	--os-bg: var(--os-shelf-deep);
	--os-fg: var(--os-shelf-fg);
	--os-muted: var(--os-shelf-muted);
	--os-rule: var(--os-shelf-rule);
	--os-accent: var(--os-brass);
}

.os-band--oxide {
	--os-bg: var(--os-oxide);
	--os-fg: var(--os-oxide-fg);
	--os-muted: var(--os-oxide-muted);
	--os-rule: var(--os-oxide-rule);
	--os-accent: var(--os-oxide-fg);
}

.os-band--ink {
	--os-bg: var(--os-ink);
	--os-fg: var(--os-paper);
	--os-muted: #8d8b84;
	--os-rule: #2f3238;
	--os-accent: var(--os-brass);
}

/* Links invert correctly inside coloured bands. */
.os-band--shelf a:not(.os-btn),
.os-band--shelf-deep a:not(.os-btn) {
	color: var(--os-accent);
}

.os-band--ink a:not(.os-btn) {
	color: var(--os-brass-bright);
}

.os-band--oxide a:not(.os-btn) {
	color: var(--os-oxide-fg);
}

/* In a light preset the shelf band is nearly the same colour as the page,
 * so accent links there should use the ordinary link colour. */
.os-preset-paper .os-band--shelf a:not(.os-btn),
.os-preset-paper .os-band--shelf-deep a:not(.os-btn) {
	color: var(--os-oxide);
}

/* Band seam — a hairline rule between two bands of the same ground,
 * so consecutive paper sections don't merge into one slab. */
.os-band--paper + .os-band--paper {
	padding-block-start: 0;
}

.os-band--paper + .os-band--paper .os-band__inner::before {
	content: "";
	display: block;
	block-size: 1px;
	background: var(--os-rule);
	margin-block-end: var(--os-band-pad);
}

/* Tighter band, for CTA strips */
.os-band--tight {
	padding-block: calc(var(--os-band-pad) * 0.5);
}

.os-band__head {
	margin-block-end: var(--os-space-l);
}

.os-band__head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--os-space-m);
}

.os-band__title {
	margin: 0;
}

/* ---------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------- */
.os-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--os-space-2xs);
	padding: 0.72em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--os-radius);
	background: var(--os-oxide);
	color: #fff;
	font-family: var(--os-font-ui);
	font-size: var(--os-step--1);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color var(--os-dur-fast) var(--os-ease),
		border-color var(--os-dur-fast) var(--os-ease),
		color var(--os-dur-fast) var(--os-ease),
		transform var(--os-dur-fast) var(--os-ease);
}

.os-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--os-oxide-bright);
	color: #fff;
	transform: translateY(-1px);
}

.os-btn:active {
	transform: translateY(0);
}

.os-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--os-fg);
}

.os-btn--ghost:hover {
	background: var(--os-fg);
	color: var(--os-bg);
}

.os-btn--brass {
	background: var(--os-brass);
	color: var(--os-ink);
}

.os-btn--brass:hover {
	background: var(--os-brass-bright);
	color: var(--os-ink);
}

.os-btn--quiet {
	padding-inline: 0;
	background: none;
	color: var(--os-fg);
	border: 0;
	border-block-end: 1px solid var(--os-brass);
	border-radius: 0;
}

.os-btn--quiet:hover {
	background: none;
	color: var(--os-brass);
	transform: none;
}

.os-btn--block {
	inline-size: 100%;
}

.os-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--os-space-xs);
	margin-block-start: var(--os-space-m);
}

/* ---------------------------------------------------------------
 * Utility
 * --------------------------------------------------------------- */
.screen-reader-text,
.os-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.os-stack > * + * {
	margin-block-start: var(--os-space-s);
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
	display: block;
}

hr,
.os-rule {
	border: 0;
	block-size: 1px;
	background: var(--os-rule);
	margin-block: var(--os-space-l);
}

/* Data/metadata — prices, ISBN, stock. Plex, tabular figures. */
.os-data {
	font-family: var(--os-font-ui);
	font-variant-numeric: tabular-nums;
	font-size: var(--os-step--1);
	letter-spacing: 0.01em;
}