/* ==========================================================================
   puzzle-book.co.uk  -  2026 responsive stylesheet
   Body text: Atkinson Hyperlegible (designed for low-vision readers, which
   suits a site selling large-print books). Headings: Bitter.
   ========================================================================== */

:root {
	--ink: #1f2a44;          /* main text, header text, footer */
	--ink-soft: #4a5571;     /* secondary text */
	--paper: #ffffff;
	--wash: #f1f4f8;         /* sidebar and quiet panels */
	--grid: #dfe4ec;         /* grid lines and borders */
	--orange: #f08a33;       /* brand orange (from the original site) */
	--orange-dark: #d06f1c;
	--link: #1b56a8;
	--radius: 6px;
	--body: "Atkinson Hyperlegible", Verdana, sans-serif;
	--head: "Bitter", Georgia, serif;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 18px/1.6 var(--body);
}

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

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--paper); padding: 8px 12px; }

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

.site-header {
	border-bottom: 1px solid var(--grid);
	/* faint squared-paper background, like a puzzle grid */
	background-color: var(--paper);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 26px 26px;
	background-position: -1px -1px;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* The wordmark is a tiny filled-in crossword: PUZZLE across, BOOK below. */
.wordmark { display: inline-grid; gap: 3px; text-decoration: none; flex: none; }
.tiles { display: flex; gap: 3px; }
.tiles b, .tiles i {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	font: 800 20px/1 var(--head);
	color: var(--ink);
	background: var(--orange);
	border: 2px solid var(--ink);
	border-radius: 3px;
}
.tiles-alt b { background: var(--paper); }
.tiles i { background: var(--ink); }

.top-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-left: auto; }
.top-nav a {
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
	padding: 6px 2px;
	background: var(--paper);
}
.top-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.menu-toggle { display: none; }

.disclosure {
	margin: 0;
	padding: 6px 24px;
	background: var(--wash);
	border-top: 1px solid var(--grid);
	color: var(--ink-soft);
	font-size: 14px;
	text-align: center;
}

/* ---------- Layout ------------------------------------------------------- */

.layout {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 48px;
	padding-top: 32px;
	padding-bottom: 56px;
	align-items: start;
}

/* ---------- Book menu ---------------------------------------------------- */

.books-nav {
	background: var(--wash);
	border-radius: var(--radius);
	padding: 16px 0 12px;
	font-size: 16px;
	line-height: 1.4;
}
.books-nav-title {
	margin: 0 18px 8px;
	font: 800 19px/1.3 var(--head);
}
.books-nav details { border-top: 1px solid var(--grid); }
.books-nav summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
}
.books-nav summary::-webkit-details-marker { display: none; }
.books-nav summary::before {
	content: "+";
	width: 20px; height: 20px; flex: none;
	display: grid; place-items: center;
	border: 2px solid var(--ink);
	border-radius: 3px;
	font-size: 15px; line-height: 1;
}
.books-nav details[open] summary::before { content: "\2212"; background: var(--orange); }
.books-nav .count { margin-left: auto; color: var(--ink-soft); font-weight: 400; font-size: 14px; }
.books-nav ul { list-style: none; margin: 0; padding: 0 18px 12px 46px; }
.books-nav li a { display: block; padding: 4px 0; color: var(--ink); text-decoration: none; }
.books-nav li a:hover { color: var(--link); text-decoration: underline; }
.books-nav li a[aria-current="page"] {
	font-weight: 700;
	box-shadow: inset 4px 0 0 var(--orange);
	margin-left: -14px; padding-left: 10px;
}

/* ---------- Page content -------------------------------------------------
   These rules restyle the existing page bodies without editing them.       */

.content { min-width: 0; }
.content h1, .content h2, .content h3 {
	font-family: var(--head);
	line-height: 1.2;
	color: var(--ink);
}
.content h1 { font-size: 40px; font-weight: 800; margin: 0 0 24px; letter-spacing: -0.01em; }
.content h2 { font-size: 28px; font-weight: 800; margin: 40px 0 12px; }
.content h3 { font-size: 22px; font-weight: 600; margin: 32px 0 8px; }
.content p { margin: 0 0 1em; }
.content hr { border: 0; border-top: 1px solid var(--grid); margin: 32px 0; }

/* The old two-column table (description left, cover images right). */
.content > table { width: 100%; border-collapse: collapse; }
.content > table > tbody > tr > td { padding: 0; vertical-align: top; }
.content > table > tbody > tr > td + td { padding-left: 40px; width: 1%; }
.content > table > tbody > tr > td + td img {
	display: block;
	max-width: 300px;
	border: 1px solid var(--grid);
	border-radius: 3px;
	margin-bottom: 16px;
}

/* Old boxes with fixed pixel widths shouldn't overflow a phone screen. */
.content [style*="width"] { max-width: 100%; }

/* Videos scale to the column. */
.content iframe[src*="youtube"] { width: 100%; max-width: 720px; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Buy box ------------------------------------------------------ */

.buybox {
	margin: 24px 0;
	padding: 20px 22px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	background: var(--paper);
	box-shadow: 5px 5px 0 var(--orange);
	max-width: 620px;
}
.buybox-name { margin: 0 0 14px; font: 800 21px/1.25 var(--head); }
.buybox-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-buy, .btn-buy-alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 10px 22px;
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	color: var(--ink);
}
.btn-buy { background: var(--orange); }
.btn-buy:hover { background: var(--orange-dark); color: var(--ink); }
.btn-buy-alt { background: var(--paper); }
.btn-buy-alt:hover { background: var(--wash); color: var(--ink); }
.buybox-note { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft); }

.videos { margin-top: 48px; }

/* ---------- Puzzle a Day range (homepage and gift ideas) --------------- */

.content .lead { font-size: 20px; max-width: 40em; margin-bottom: 28px; }
.pad-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	gap: 20px;
	margin: 0 0 48px;
}
.pad-book {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 18px;
	padding: 18px;
	border: 1px solid var(--grid);
	border-radius: var(--radius);
	align-items: start;
}
.pad-cover img { display: block; width: 100%; border: 1px solid var(--grid); border-radius: 3px; }
.pad-book h3 { margin: 0 0 6px; font-size: 20px; }
.pad-book p { font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.pad-book .btn-buy { min-height: 44px; font-size: 16px; padding: 8px 16px; }

/* ---------- Homepage: recent releases ---------------------------------- */

.releases { display: grid; gap: 0; margin: 8px 0 40px; }
.release {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 28px;
	padding: 28px 0;
	border-top: 1px solid var(--grid);
}
.release-cover img { display: block; border: 1px solid var(--grid); border-radius: 3px; }
.release h3 { margin-top: 0; }
.release-desc { margin-bottom: 16px; max-width: 42em; }
.release .btn-buy { min-height: 46px; font-size: 17px; }

/* ---------- Footer ------------------------------------------------------- */

.site-footer { background: var(--ink); color: #e6eaf2; font-size: 16px; }
.site-footer a { color: #ffffff; }
.site-footer a:hover { color: var(--orange); }
.footer-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 48px;
	padding-top: 36px;
	padding-bottom: 28px;
}
.footer-head { margin: 0 0 4px; font: 800 18px/1.3 var(--head); color: #ffffff; }
.footer-inner p { margin: 0 0 12px; }
.footer-inner .legal {
	grid-column: 1 / -1;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 14px;
	color: #b9c1d3;
}

/* ---------- Tablet and phone -------------------------------------------- */

@media (max-width: 900px) {
	.layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 20px; }

	.header-inner { flex-wrap: wrap; gap: 14px 16px; padding-top: 16px; padding-bottom: 14px; }
	.top-nav { order: 3; width: 100%; margin-left: 0; gap: 4px 18px; font-size: 16px; }

	.menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		margin-left: auto;
		min-height: 46px;
		padding: 8px 16px;
		border: 2px solid var(--ink);
		border-radius: var(--radius);
		background: var(--orange);
		color: var(--ink);
		font: 700 17px/1 var(--body);
		cursor: pointer;
	}
	.menu-toggle::before {
		content: "";
		width: 18px; height: 12px;
		border-top: 2px solid; border-bottom: 2px solid;
		background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	}
	.menu-toggle[aria-expanded="true"] { background: var(--paper); }

	/* With JavaScript the book menu is hidden until "Browse books" is tapped;
	   without it the menu simply shows above the page. */
	.js .books-nav { display: none; }
	.js .books-nav.is-open { display: block; }
	.books-nav li a { padding: 8px 0; }
}

@media (max-width: 640px) {
	body { font-size: 17px; }
	.wrap { padding-left: 16px; padding-right: 16px; }
	.disclosure { padding: 6px 16px; font-size: 13px; }
	.tiles b, .tiles i { width: 24px; height: 24px; font-size: 15px; border-radius: 2px; }
	.tiles, .wordmark { gap: 2px; }
	.menu-toggle { padding: 8px 12px; font-size: 16px; min-height: 44px; }
	.top-nav { flex-wrap: nowrap; overflow-x: auto; gap: 16px; font-size: 15px; white-space: nowrap; }
	.top-nav a:first-child { display: none; } /* the wordmark already links home */

	.content h1 { font-size: 30px; margin-bottom: 18px; }
	.content h2 { font-size: 24px; }

	/* Stack the old two-column table: cover images first, side by side. */
	.content > table, .content > table > tbody, .content > table > tbody > tr,
	.content > table > tbody > tr > td { display: block; width: auto; }
	.content > table > tbody > tr { display: flex; flex-direction: column; }
	.content > table > tbody > tr:has(> td + td img) > td + td { order: -1; }
	.content > table > tbody > tr > td + td {
		width: auto;
		padding-left: 0;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 20px;
	}
	.content > table > tbody > tr > td + td > * { flex: 0 1 auto; margin: 0; max-width: calc(50% - 6px); }
	.content > table > tbody > tr > td + td img { max-width: 100%; margin: 0; }

	.buybox { padding: 16px; box-shadow: 4px 4px 0 var(--orange); }
	.buybox-actions { flex-direction: column; }
	.btn-buy, .btn-buy-alt { width: 100%; }

	.footer-inner { grid-template-columns: 1fr; }
	.release { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
	.release h3 { font-size: 20px; }
	.pad-book { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
	.content .lead { font-size: 18px; }
}

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

@media print {
	.site-header, .books-nav, .site-footer, .videos { display: none; }
	.layout { display: block; }
}