/* hankhayes.com — the whole site's styles.
   Sizes copy the Cargo site's model; CLAUDE.md explains it. */

/* ---- Fonts (both OFL; licences in /fonts/) ----
   Text: Newsreader (variable weight and optical size, real italic).
   Headings (h1, h2): Redaction, the plain grade, Regular (Cargo's weights 380 and 340 both land on it).
   Redaction's six degraded grades, 10 (finest halftone) to 100 (coarsest), are declared too, each as its
   own family ("Redaction 10" …), kept for effects later. A browser downloads a face only when something
   on the page uses it, so unused grades cost visitors nothing. */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: block; }

@font-face { font-family: "Redaction"; src: url("/fonts/redaction/redaction-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction"; src: url("/fonts/redaction/redaction-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction"; src: url("/fonts/redaction/redaction-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 10"; src: url("/fonts/redaction/redaction-10-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 10"; src: url("/fonts/redaction/redaction-10-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction 10"; src: url("/fonts/redaction/redaction-10-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 20"; src: url("/fonts/redaction/redaction-20-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 20"; src: url("/fonts/redaction/redaction-20-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction 20"; src: url("/fonts/redaction/redaction-20-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 35"; src: url("/fonts/redaction/redaction-35-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 35"; src: url("/fonts/redaction/redaction-35-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction 35"; src: url("/fonts/redaction/redaction-35-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 50"; src: url("/fonts/redaction/redaction-50-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 50"; src: url("/fonts/redaction/redaction-50-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction 50"; src: url("/fonts/redaction/redaction-50-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 70"; src: url("/fonts/redaction/redaction-70-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 70"; src: url("/fonts/redaction/redaction-70-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction 70"; src: url("/fonts/redaction/redaction-70-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 100"; src: url("/fonts/redaction/redaction-100-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Redaction 100"; src: url("/fonts/redaction/redaction-100-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Redaction 100"; src: url("/fonts/redaction/redaction-100-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }

/* ---- Sizing ----
   1rem is Cargo's base size: min(width, height) × 1.44% on a landscape screen,
   growing to width × 2.24% as the screen turns portrait. Phones add × 1.3.
   --k is Cargo's "mobile padding offset": page padding, card padding and column gutters
   are × 0.75 on phones. Type sizes and the card corners are not. */

:root {
	--fallback: Georgia, "Times New Roman", serif;
	--font: "Newsreader", var(--fallback);
	--heading-font: "Redaction", var(--fallback);  /* h1, h2 */
	--k: 1;

	font-size: min(1.44vh, 2.24vw, calc(0.4114vw + 1.0286vh));
	font-size: min(1.44lvh, 2.24vw, calc(0.4114vw + 1.0286lvh));
}

/* Phone held sideways (Cargo's rule: wider than 2:3 and at most 500 px tall) */
@media (min-aspect-ratio: 2/3) and (max-height: 500px) {
	:root { font-size: calc(1.3 * min(2.88lvh, 2.88vw)); --k: 0.75; }
}

/* Phone held upright, or any window narrower than 4:5 */
@media (max-aspect-ratio: 4/5) {
	:root { font-size: calc(1.3 * min(2.24vw, calc(0.4114vw + 1.0286lvh))); --k: 0.75; }
}

/* ---- Colours ---- */

:root {
	color-scheme: light;
	--bg: #fff;
	--card: #f2f1ee;
	--ink-85: rgba(0, 0, 0, 0.85);   /* h1, h2 */
	--ink-75: rgba(0, 0, 0, 0.75);   /* body text and links */
	--ink-25: rgba(0, 0, 0, 0.25);   /* rules, "Last Updated" */
	/* paper grain on the cards: dark specks, drawn here (Cargo's was an image on its CDN) */
	--grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.2 0 0 0 .227'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---- Page ---- */

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

html {
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body {
	margin: 0;
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* A card: the rounded, grainy panel every page is made of */
.card {
	position: relative;
	isolation: isolate;
	background: var(--card);
	border-radius: 1.5rem;
	padding: calc(2.5rem * var(--k));
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: var(--grain) 0 0 / 192px;
	opacity: 0.2;
}

/* ---- Text ---- */

.bodycopy {
	font-family: var(--font);
	font-size: 1.3rem;
	font-weight: 415;
	line-height: 1.2;
	color: var(--ink-75);
	font-variation-settings: "opsz" 12;
	font-feature-settings: "onum";
	text-rendering: optimizeLegibility;
}

.bodycopy a { color: var(--ink-75); text-decoration: none; }
a:active { opacity: 0.7; }

h1 {
	margin: 0;
	font-family: var(--heading-font);
	font-size: 6.2rem;
	font-weight: 380;
	line-height: 1;
	color: var(--ink-85);
	font-variation-settings: "opsz" 30;
	font-feature-settings: normal;
}

h2 {
	margin: 0;
	font-family: var(--heading-font);
	font-size: 2.8rem;
	font-weight: 340;
	line-height: 1.2;
	color: var(--ink-85);
	font-variation-settings: "opsz" 25;
	font-feature-settings: normal;
}

hr {
	display: block;
	height: 1px;
	margin: 1rem 0;
	border: 0;
	background: var(--ink-25);
}

.faint { color: var(--ink-25); }
.right { text-align: right; }

/* ---- Columns (Cargo's column-set) ----
   The first column is floor((width + gutter) × span / 12 − gutter); the last takes the rest.
   The gutter is rounded to whole pixels. Spans: --span on the set (default 6, half and half).
   Gutters: .cols is Cargo's gutter "1" (1rem), .cols.half is "0.5rem". */

.cols {
	--g: round(1rem * var(--k), 1px);
	display: flex;
	align-items: stretch;
}

.cols.half { --g: round(0.5rem * var(--k), 1px); }

.cols > * {
	min-width: 0;
	overflow-wrap: break-word;
}

.cols > :first-child {
	flex: 0 0 auto;
	width: calc((100% + var(--g)) * var(--span, 6) / 12 - var(--g));
	width: round(down, calc((100% + var(--g)) * var(--span, 6) / 12 - var(--g)), 1px);
	margin-right: var(--g);
}

.cols > :last-child { flex: 1 0 0; }

/* ---- Layout: desktop ----
   The cover is fixed on the left half. The right half is a stack of sheets
   (one card each, at least a screen tall) that scrolls. */

.cover.cover-phone { display: none; }

.cover {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	display: flex;
	width: 50%;
	height: 100vh;
	height: 100svh;
	padding: 1rem 0 1rem 1rem;
}

.cover .card {
	flex: 1;
	min-width: 0;
	padding-top: 2.2rem;
}

.stack { margin-left: 50%; }

.sheet {
	display: flex;
	min-height: 100vh;
	min-height: 100svh;
	padding: 1rem;
}

.sheet .card { flex: 1; min-width: 0; }  /* min-width: a long word can't widen the card */

.about { padding-top: calc(2.2rem * var(--k)); }

/* ---- Layout: phones ----
   Same switch as the root size above: narrower than 4:5, or a phone on its side.
   Everything stacks in one column: the phone cover (a screen tall), then the sheets. */

@media (max-aspect-ratio: 4/5), (min-aspect-ratio: 2/3) and (max-height: 500px) {
	.cover.cover-desktop { display: none; }
	.cover.cover-phone { display: flex; }

	.cover {
		position: static;
		width: auto;
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
		padding: calc(1rem * var(--k));
	}

	.cover .card { padding-top: calc(2.5rem * var(--k)); }

	.stack { margin-left: 0; }

	.sheet { padding: calc(1rem * var(--k)); }

	/* Columns stack on phones unless the set says .keep. The gap between them is
	   Cargo's "mobile gutter": --mg on the set (2rem for most, 0.5rem for Education). */
	.cols:not(.keep) { display: block; }
	.cols:not(.keep) > * { width: auto; margin: 0; }
	.cols:not(.keep) > :not(:last-child) { margin-bottom: calc(var(--mg, 2rem) * var(--k)); }
}