/*
Theme Name: Magic on the Air
Description: Site for Magic on the Air by Ian Fenn and Arthur Setterington.
Author: Ian Fenn
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: magicontheair
*/

/* Layout: magenta band with the pitch and cover, then the book, a sample, contents, authors and where to buy. */
:root {
	--magenta: #A3006D;
	--on-magenta: #FFFFFF;
	--bg: #FBF8FA;
	--fg: #22161D;
	--muted: #6B5763;
	--rule: #E6DCE2;
	--surface: #FFFFFF;
	--accent: #A3006D;
	--needle: #FF5BB8;
	--f-display: "Red Hat Display", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	--f-body: "Figtree", "Helvetica Neue", Arial, system-ui, sans-serif;
	--f-mono: "Red Hat Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--measure: 64ch;
	--gutter-l: max(16px, env(safe-area-inset-left, 0px));
	--gutter-r: max(16px, env(safe-area-inset-right, 0px));
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #170E13; --fg: #F3E8EE; --muted: #B79FAC; --rule: #3A2A33; --surface: #21151C;
		--accent: #FF79C6;
		color-scheme: dark;
	}
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--f-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--needle); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-display); line-height: 1.1; text-wrap: balance; margin: 0; }
h2 { font-weight: 900; font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }

/* WordPress resets: spacing below is set explicitly */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.is-layout-flow > * + *, .is-layout-constrained > * + * { margin-block-start: 0; }
.wp-block-group { margin: 0; }
figure.wp-block-image, figure.wp-block-table { margin: 0; }

.wrap {
	max-width: 68rem;
	margin-inline: auto;
	padding-left: var(--gutter-l);
	padding-right: var(--gutter-r);
}

/* ---------- header ---------- */
.bar { background: var(--magenta); color: var(--on-magenta); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; }
.bar .wordmark { font-family: var(--f-display); font-weight: 900; font-size: 1.05rem; }
.bar .wordmark a { color: inherit; text-decoration: none; }
.bar .site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.bar .site-nav a { color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .9; }
.bar .site-nav a:hover { opacity: 1; text-decoration: underline; }

/* ---------- buttons ---------- */
.wp-block-buttons.buy-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.wp-block-buttons .wp-block-button { margin: 0; }
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 999px;
	padding: .8rem 1.35rem;
	border: 2px solid currentColor;
	transition: background .15s, color .15s;
}
/* On magenta: white buttons */
.hero .btn-primary .wp-block-button__link,
.buy-band .btn-primary .wp-block-button__link { background: #fff; color: var(--magenta); border-color: #fff; }
.hero .btn-primary .wp-block-button__link:hover,
.buy-band .btn-primary .wp-block-button__link:hover { background: transparent; color: #fff; }
.hero .btn-outline .wp-block-button__link,
.buy-band .btn-outline .wp-block-button__link { background: transparent; color: #fff; border-color: #fff; }
.hero .btn-outline .wp-block-button__link:hover,
.buy-band .btn-outline .wp-block-button__link:hover { background: #fff; color: var(--magenta); }
/* On paper: magenta buttons */
.read-end .btn-primary .wp-block-button__link,
.btn-solid .wp-block-button__link { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.read-end .btn-primary .wp-block-button__link:hover,
.btn-solid .wp-block-button__link:hover { background: transparent; color: var(--accent); border-color: var(--accent); }
.read-end .btn-outline .wp-block-button__link { background: transparent; color: var(--accent); border-color: var(--magenta); }
.read-end .btn-outline .wp-block-button__link:hover { background: var(--magenta); color: #fff; }

/* ---------- hero ---------- */
.hero { background: var(--magenta); color: var(--on-magenta); position: relative; overflow: hidden; }
.hero::before {
	content: "";
	position: absolute;
	right: -12rem;
	top: 50%;
	width: 46rem;
	height: 46rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 5.9rem, rgba(255,255,255,.14) 5.9rem 6rem);
	pointer-events: none;
}
.hero > .wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem);
}
.hero-copy { min-width: 0; display: grid; gap: 1.1rem; }
.hero h1 { font-weight: 900; font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: -.02em; line-height: .95; color: #fff; }
.hero .sub { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.3; }
.hero .by { font-weight: 600; font-size: 1.05rem; opacity: .92; }
.hero .pitch { max-width: 46ch; font-size: 1.08rem; opacity: .95; }
.hero .buy-label { font-family: var(--f-mono); font-size: .85rem; opacity: .85; margin-top: .4rem; }
.hero .sample-link a { color: #fff; font-weight: 600; }
.hero .cover { justify-self: center; width: min(100%, 22rem); }
.hero .cover img {
	width: 100% !important;
	border-radius: 3px 6px 6px 3px;
	box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 30px 60px -20px rgba(40,0,25,.65);
	outline: 1.5px solid rgba(255,255,255,.35);
	outline-offset: -1.5px;
}

/* ---------- praise ---------- */
.praise { border-bottom: 1px solid var(--rule); }
.praise > .wrap { padding-block: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1rem; max-width: 56rem; }
.praise .quote-text { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.3; text-wrap: balance; }
.praise .quote-text::before { content: "\201C"; color: var(--accent); }
.praise .quote-text::after { content: "\201D"; color: var(--accent); }
.praise .quote-cite { color: var(--muted); }
.praise .quote-cite strong { color: var(--fg); font-weight: 600; }

/* ---------- sections ---------- */
section.block > .wrap { padding-block: clamp(3rem, 7vw, 5.5rem); display: grid; gap: 1.5rem; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: var(--measure); }
.prose { max-width: var(--measure); display: grid; gap: 1.1rem; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1rem; }
.fact { background: var(--bg); padding: 1.25rem 1.1rem; display: grid; gap: .25rem; align-content: start; }
.fact-n { font-family: var(--f-display); font-weight: 900; font-size: 2.4rem; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.fact-l { color: var(--muted); font-size: .95rem; line-height: 1.35; }

/* ---------- read a sample (homepage) ---------- */
.sample-promo > .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; border-bottom: 1px solid var(--rule); }
.promo-text { display: grid; gap: 1rem; }

/* ---------- contents ---------- */
.toc table { width: 100%; border-collapse: collapse; }
.toc tbody { display: block; columns: 2; column-gap: 3rem; }
.toc tr { display: flex; justify-content: space-between; gap: 1rem; break-inside: avoid; border-top: 1px solid var(--rule); padding: 1rem 0; }
.toc td { border: 0; padding: 0; vertical-align: top; }
.toc td:first-child { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.toc td:first-child strong { display: block; color: var(--fg); font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin-bottom: .2rem; }
.toc td:last-child { font-family: var(--f-mono); font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.toc td a { font-family: var(--f-mono); font-size: .85rem; }
/* In the editor: one column, so every cell is easy to edit */
.toc.block-editor-block-list__block tbody { columns: 1; }

/* ---------- authors ---------- */
.authors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.author { display: grid; gap: .9rem; align-content: start; min-width: 0; padding-top: 1.25rem; border-top: 4px solid var(--accent); }
.author h3 { font-weight: 900; font-size: 1.75rem; }
.author .role { font-family: var(--f-mono); font-size: .85rem; color: var(--muted); }
.credit { padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); max-width: var(--measure); display: grid; gap: .35rem; }
.credit strong { font-family: var(--f-display); }

/* ---------- buy band ---------- */
.buy-band { background: var(--magenta); color: #fff; }
.buy-band > .wrap { padding-block: clamp(3rem, 7vw, 5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.buy-band h2 { color: #fff; }
.buy-text { display: grid; gap: .75rem; }
.buy-text p { opacity: .92; max-width: 44ch; }
.buy-band .buy-row { justify-content: flex-end; }

/* ---------- footer ---------- */
.site-footer .wrap { padding-block: 2.5rem; color: var(--muted); font-size: .92rem; }

/* ---------- read a sample page ---------- */
.read-title { background: var(--magenta); color: #fff; }
.read-title .wrap { padding-block: clamp(2rem, 5vw, 3.5rem) .9rem; }
.read-title h1 { font-weight: 900; font-size: clamp(2.2rem, 6vw, 3.75rem); letter-spacing: -.01em; color: #fff; }
.read-head { background: var(--magenta); color: #fff; }
.read-head .wrap { padding-block: 0 clamp(2rem, 5vw, 3.5rem); }
.read-intro { max-width: 64ch; font-size: 1.1rem; opacity: .95; }
.read { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2.5rem, 6vw, 4rem); }
.read-nav { position: sticky; top: 1.5rem; align-self: start; font-size: .92rem; min-width: 0; }
.read-nav .nav-label { font-family: var(--f-mono); font-size: .8rem; color: var(--muted); margin-bottom: .6rem; }
.read-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.read-nav-list a { color: var(--muted); text-decoration: none; display: block; padding: .2rem 0; }
.read-nav-list li:nth-child(-n+2) a { color: var(--fg); font-weight: 600; }
.read-nav-list li:nth-child(n+3) a { padding-left: .9rem; border-left: 1px solid var(--rule); }
.read-nav-list a:hover { color: var(--accent); }
.read-body { min-width: 0; }
.chapter { max-width: var(--measure); min-width: 0; display: grid; gap: 1.15rem; scroll-margin-top: 1rem; }
.chapter + .chapter { margin-top: 3.5rem; padding-top: 3rem; border-top: 4px solid var(--accent); }
.chapter h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.chapter h3 { font-weight: 900; font-size: 1.4rem; margin-top: 1.25rem; scroll-margin-top: 1rem; }
.chapter .epigraph { font-style: italic; color: var(--muted); border-left: 3px solid var(--accent); padding-left: 1rem; }
.chapter .epigraph-cite { color: var(--muted); font-size: .92rem; padding-left: 1rem; margin-top: -.8rem; }
.chapter .wp-block-quote { margin: 0; padding-left: 1.25rem; border-left: 1px solid var(--rule); display: grid; gap: .8rem; }
.chapter .wp-block-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.chapter .footnote { font-size: .88rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: .75rem; }
.chapter figure.wp-block-image { display: grid; gap: .6rem; margin: .75rem 0; }
.chapter figure.wp-block-image img { border: 1px solid var(--rule); background: #fff; }
.chapter figcaption { font-size: .88rem; color: var(--muted); margin: 0; }
.script { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.25rem; overflow-x: auto; }
.script table { border-collapse: collapse; width: 100%; font-size: .98rem; }
.script td { border: 0; padding: .25rem .5rem .25rem 0; vertical-align: top; }
.script td:first-child { font-family: var(--f-mono); font-size: .82rem; color: var(--accent); white-space: nowrap; padding-right: 1.25rem; padding-top: .35rem; }
.script td em { font-style: normal; font-family: var(--f-mono); font-size: .82rem; color: var(--muted); }
.read-end { margin-top: 3.5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--rule); display: grid; gap: .75rem; max-width: var(--measure); }
.read-end h2 { font-size: 1.5rem; }

/* ---------- plain pages ---------- */
.page-body .wrap { padding-block: clamp(2.5rem, 6vw, 4rem); max-width: calc(var(--measure) + 4rem); }
.page-body h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1.5rem; }
.page-body .wp-block-post-content > * + * { margin-block-start: 1rem; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
	.read { grid-template-columns: minmax(0, 1fr); }
	.read-nav { position: static; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
}
@media (max-width: 48rem) {
	.hero > .wrap { grid-template-columns: minmax(0, 1fr); }
	.hero .cover { width: min(60%, 14rem); }
	.hero::before { right: -24rem; top: 30%; }
	.toc tbody { columns: 1; }
	.authors { grid-template-columns: minmax(0, 1fr); }
	.sample-promo > .wrap { grid-template-columns: minmax(0, 1fr); }
	.buy-band > .wrap { grid-template-columns: minmax(0, 1fr); }
	.buy-band .buy-row { justify-content: flex-start; }
	.bar .site-nav { gap: .9rem; }
}