Massive refactor courtesy of 5 dollars of AI tokens

1 files changed, 466 insertions, 0 deletions

diff --git a/src/app.css b/src/app.css
index cd98343..8edf450 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,473 @@
+@import '@fontsource/cormorant/400.css';
+@import '@fontsource/cormorant/500.css';
+@import '@fontsource/cormorant/600.css';
+@import 'bootstrap-icons/font/bootstrap-icons.css';
+
+:root {
+	--font-serif: 'Cormorant', ui-serif, Georgia, 'Times New Roman', serif;
+	--font-sans:
+		ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
+		'Apple Color Emoji', 'Segoe UI Emoji';
+
+	--color-bg: #e8e8e8;
+	--color-surface: #f7f7f3;
+	--color-ink: #1d1d1b;
+	--color-muted: #555555;
+	--color-border: #cfcfc8;
+
+	--color-accent: #2b6cb0;
+	--color-accent-strong: #2c5282;
+	--color-accent-soft: #63b3ed;
+
+	--color-warn: #b7791f;
+	--color-warn-soft: #f6ad55;
+
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.05);
+	--radius-sm: 12px;
+	--radius-pill: 999px;
+
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 0.75rem;
+	--space-4: 1rem;
+	--space-5: 1.5rem;
+	--space-6: 2rem;
+	--space-7: 3rem;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	color-scheme: light;
+	-webkit-text-size-adjust: 100%;
+}
+
+body {
+	margin: 0;
+	overflow-x: hidden;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: var(--color-bg);
+	color: var(--color-ink);
+	font-family: var(--font-sans);
+	line-height: 1.5;
+	text-rendering: optimizeLegibility;
+}
+
+main {
+	flex: 1;
+}
+
+h1,
+h2,
+h3 {
+	font-family: var(--font-serif);
+	line-height: 1.1;
+	letter-spacing: 0.01em;
+	margin: 0 0 var(--space-4);
+}
+
+h1 {
+	font-size: clamp(2.2rem, 4.2vw, 3.1rem);
+}
+
+h2 {
+	font-size: clamp(1.6rem, 3vw, 2.25rem);
+}
+
+h3 {
+	font-size: 1.4rem;
+}
+
+p {
+	margin: 0 0 var(--space-4);
+	max-width: 70ch;
+}
+
+img {
+	max-width: 100%;
+	height: auto;
+}
+
+.img-fluid {
+	max-width: 100%;
+	height: auto;
+	display: block;
+}
+
 a {
+	color: inherit;
+	text-decoration-thickness: 1px;
+	text-underline-offset: 0.18em;
+	transition: text-decoration-thickness 100ms ease;
+}
+
+a:hover {
+	text-decoration-thickness: 2px;
+}
+
+img {
+	transition: transform 200ms ease;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+	outline: 3px solid var(--color-accent);
+	outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+		scroll-behavior: auto !important;
+	}
+}
+
+.container {
+	width: min(1120px, calc(100% - 2rem));
+	margin-inline: auto;
+}
+
+.page {
+	padding-block: var(--space-5) var(--space-7);
+}
+
+.skip-link {
+	position: absolute;
+	left: var(--space-3);
+	top: var(--space-3);
+	padding: var(--space-2) var(--space-3);
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-sm);
+	transform: translateY(-200%);
+	transition: transform 120ms ease;
+	z-index: 1000;
+}
+
+.skip-link:focus {
+	transform: translateY(0);
+}
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.button,
+.btn {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	padding: 0.65rem 1rem;
+	border-radius: var(--radius-pill);
+	border: 1px solid var(--color-border);
+	background: transparent;
+	color: var(--color-ink);
+	font: inherit;
+	font-weight: 650;
 	text-decoration: none;
+	box-shadow: none;
+	cursor: pointer;
+	transition:
+		background 150ms ease,
+		border-color 150ms ease,
+		transform 100ms ease;
+}
+
+.button:hover,
+.btn:hover {
+	transform: translateY(-1px);
+}
+
+.button:hover,
+.btn:hover {
+	border-color: var(--color-accent);
+}
+
+.button--primary,
+.btn-primary {
+	background: var(--color-accent);
+	border-color: var(--color-accent);
+	color: white;
+}
+
+.button--primary:hover,
+.btn-primary:hover {
+	background: var(--color-accent-strong);
+	border-color: var(--color-accent-strong);
+}
+
+.btn-success {
+	background: var(--color-accent-soft);
+	border-color: var(--color-accent-soft);
+	color: #0b1a12;
+}
+
+.btn-success:hover {
+	filter: brightness(0.95);
+}
+
+.notice {
+	margin: var(--space-4) auto;
+	padding: var(--space-3) var(--space-4);
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--color-border);
+	background: var(--color-surface);
+	max-width: 70ch;
+}
+
+.notice--info {
+	border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
+}
+
+.notice--success {
+	border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
+	background: color-mix(in srgb, var(--color-accent-soft) 22%, transparent);
+}
+
+.notice--warn {
+	border-color: color-mix(in srgb, var(--color-warn) 55%, transparent);
+	background: color-mix(in srgb, var(--color-warn-soft) 18%, transparent);
+}
+
+.notice--error {
+	border-color: rgba(197, 48, 48, 0.65);
+	background: rgba(245, 101, 101, 0.15);
+}
+
+.contact-card__icon {
+	font-size: 2.25rem;
+	line-height: 1;
+	margin-bottom: var(--space-2);
+}
+
+.form-control {
+	width: 100%;
+	padding: 0.65rem 0.8rem;
+	border-radius: var(--radius-sm);
+	border: 1px solid var(--color-border);
+	background: #ffffff;
+	font: inherit;
+}
+
+.form-control:focus {
+	border-color: var(--color-accent);
+}
+
+.text-muted {
+	color: var(--color-muted);
+}
+
+.bg-light {
+	background: var(--color-surface);
+}
+
+.bg-dark {
+	background: #101413;
+}
+
+.text-white {
+	color: white;
+}
+
+.border {
+	border: 1px solid var(--color-border);
+}
+
+.border-bottom {
+	border-bottom: 1px solid var(--color-border);
+}
+
+.rounded {
+	border-radius: var(--radius-sm);
+}
+
+.shadow {
+	box-shadow: var(--shadow-sm);
+}
+
+.card {
+	background: var(--color-surface);
+	border: 1px solid var(--color-border);
+	border-radius: var(--radius-sm);
+	box-shadow: var(--shadow-sm);
+	padding: var(--space-4);
+}
+
+.card--warn {
+	border-color: color-mix(in srgb, var(--color-warn) 60%, var(--color-border));
+	background: color-mix(in srgb, var(--color-warn-soft) 10%, var(--color-surface));
+}
+
+@media (min-width: 768px) {
+	.card {
+		padding: var(--space-5);
+	}
+}
+
+/* Minimal legacy layout helpers (for iterative migration) */
+.row {
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	gap: var(--space-4);
+}
+
+.row > * {
+	grid-column: 1 / -1;
+	min-width: 0;
+}
+
+@media (min-width: 768px) {
+	.col-md-4 {
+		grid-column: span 4;
+	}
+	.col-md-5 {
+		grid-column: span 5;
+	}
+	.col-md-6 {
+		grid-column: span 6;
+	}
+	.col-md-7 {
+		grid-column: span 7;
+	}
+	.col-md-8 {
+		grid-column: span 8;
+	}
+}
+
+@media (min-width: 576px) {
+	.col-sm-10 {
+		grid-column: 2 / span 10;
+	}
+}
+
+@media (min-width: 992px) {
+	.col-lg-3 {
+		grid-column: span 3;
+	}
+}
+
+.d-flex {
+	display: flex;
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.flex-row {
+	flex-direction: row;
+}
+
+.align-items-center {
+	align-items: center;
+}
+
+.justify-content-center {
+	justify-content: center;
+}
+
+.justify-content-end {
+	justify-content: flex-end;
+}
+
+.ms-auto {
+	margin-left: auto;
+}
+
+.mt-auto {
+	margin-top: auto;
+}
+
+.min-vh-100 {
+	min-height: 100vh;
+}
+
+.my-2 {
+	margin-top: var(--space-4);
+	margin-bottom: var(--space-4);
+}
+
+.mt-2 {
+	margin-top: var(--space-4);
+}
+
+.mb-2 {
+	margin-bottom: var(--space-4);
+}
+
+.p-1 {
+	padding: var(--space-2);
+}
+
+.p-3 {
+	padding: var(--space-4);
+}
+
+.p-4 {
+	padding: var(--space-6);
+}
+
+.py-2 {
+	padding-top: var(--space-4);
+	padding-bottom: var(--space-4);
+}
+
+.px-4 {
+	padding-left: var(--space-6);
+	padding-right: var(--space-6);
+}
+
+.m-2 {
+	margin: var(--space-4);
+}
+
+.text-center {
+	text-align: center;
 }
 
 .border-darkish {
 	border-bottom: 1px dashed #666666;
 }
+
+blockquote {
+	margin: 0 0 var(--space-5);
+	padding-left: var(--space-5);
+	border-left: 4px solid var(--color-accent);
+	font-family: var(--font-serif);
+	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
+	font-style: italic;
+	line-height: 1.4;
+	color: var(--color-ink);
+}
+
+blockquote footer {
+	margin-top: var(--space-3);
+	font-size: 1rem;
+	font-style: normal;
+	color: var(--color-muted);
+	text-align: right;
+}
+
+blockquote footer::before {
+	content: '\2014\00A0';
+}