/* Cinnabar Glass Images: the look of cinnabarglass.com ("light through leaded
   glass"): dark lead-came surfaces, jewel-tone glass, warm parchment type.
   Colours, type and components follow the main site's /css/site.css. */

@font-face {
	font-family: "Cinzel";
	src: url("/fonts/cinzel-latin-v26.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
		U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cinzel";
	src: url("/fonts/cinzel-latin-ext-v26.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Mulish";
	src: url("/fonts/mulish-latin-v18.woff2") format("woff2");
	font-weight: 200 1000;
	font-display: swap;
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
		U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Mulish";
	src: url("/fonts/mulish-latin-ext-v18.woff2") format("woff2");
	font-weight: 200 1000;
	font-display: swap;
	unicode-range:
		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
		U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("/fonts/cormorant-garamond-500-latin-v21.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

/* Licensed web font from the main site, used only for the company name. */
@font-face {
	font-family: "Cheddar Gothic Serif";
	src: url("/fonts/cheddar-gothic-serif-v1.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--lead: #121013;
	--lead-raised: #1a171b;
	--lead-high: #252026;
	--came: #060506;
	--came-edge: #3b3337;
	--parchment: #f3eadb;
	--parchment-dim: #c6b9a6;
	--parchment-faint: #8f8375;

	--cinnabar: #e34234;
	--cinnabar-bright: #ff6b4f;
	--cinnabar-deep: #9b2317;
	--amber: #f2a93b;
	--gold: #dcb75e;
	--cobalt: #3a6bd8;
	--emerald: #25a273;
	--amethyst: #9159cc;
	--rose: #d94a80;

	--ok: #53c891;
	--danger: #ff6b4f;

	--font-display: "Cinzel", "Trajan Pro", Georgia, serif;
	--font-serif: "Cormorant Garamond", Georgia, serif;
	--font-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-brand: "Cheddar Gothic Serif", "Cinzel", Georgia, serif;

	--radius: 5px;
	--max: 1180px;
	--frame: 0 0 0 1px var(--came-edge), 0 22px 44px -24px rgba(0, 0, 0, 0.9);
	color-scheme: dark;
}

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

[hidden] {
	display: none !important;
}

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

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--lead);
	color: var(--parchment);
	font: 400 1rem / 1.65 var(--font-body);
	-webkit-font-smoothing: antialiased;
}

/* Faint pools of coloured light, as if cast through windows. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(1100px 600px at 88% -12%, rgba(227, 66, 52, 0.13), transparent 62%),
		radial-gradient(900px 520px at -12% 18%, rgba(58, 107, 216, 0.1), transparent 62%),
		radial-gradient(900px 640px at 50% 118%, rgba(242, 169, 59, 0.08), transparent 62%);
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--amber);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

:focus-visible {
	outline: 2px solid var(--amber);
	outline-offset: 3px;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.02em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.2rem, 5.5vw, 4rem);
}

h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

h3 {
	font-size: 1.2rem;
}

p {
	margin: 0 0 1em;
}

.container {
	width: min(var(--max), 100% - 2rem);
	margin-inline: auto;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0.5rem;
	z-index: 200;
	padding: 0.6rem 1rem;
	background: var(--cinnabar);
	color: #fff;
	border-radius: var(--radius);
}

.skip-link:focus {
	left: 0.5rem;
}

.eyebrow {
	font-family: var(--font-display);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--amber);
	margin-bottom: 0.9rem;
}

.lede {
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	line-height: 1.45;
	color: var(--parchment-dim);
	max-width: 38ch;
}

.muted {
	color: var(--parchment-dim);
}

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 46px;
	padding: 0.75rem 1.35rem;
	border: 2px solid var(--came);
	border-radius: var(--radius);
	font: 700 0.82rem / 1 var(--font-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(180deg, var(--cinnabar-bright), var(--cinnabar) 48%, var(--cinnabar-deep));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.35),
		inset 0 -2px 0 rgba(0, 0, 0, 0.25),
		0 0 0 1px var(--came-edge),
		0 10px 26px -12px rgba(227, 66, 52, 0.8);
	transition:
		filter 0.2s,
		box-shadow 0.2s,
		transform 0.2s;
}

.btn:hover {
	color: #fff;
	filter: brightness(1.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		inset 0 -2px 0 rgba(0, 0, 0, 0.25),
		0 0 0 1px var(--came-edge),
		0 12px 32px -10px rgba(255, 107, 79, 0.95);
}

.btn:active {
	transform: translateY(1px);
}

.btn[disabled] {
	cursor: not-allowed;
	filter: grayscale(0.7) brightness(0.7);
}

.btn-ghost {
	color: var(--parchment);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(243, 234, 219, 0.28);
	box-shadow: none;
}

.btn-ghost:hover {
	color: var(--amber);
	border-color: var(--amber);
	box-shadow: 0 0 22px -8px rgba(242, 169, 59, 0.7);
}

/* ---------- Header and footer ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(14, 12, 15, 0.86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 3px solid var(--came);
	box-shadow: 0 1px 0 var(--came-edge);
}

.transom {
	height: 14px;
	overflow: hidden;
	border-bottom: 2px solid var(--came);
}

.transom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-footer .transom {
	border-top: 2px solid var(--came);
	border-bottom: 0;
}

.nav {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 68px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--parchment);
	text-decoration: none;
	margin-right: auto;
}

.brand:hover {
	color: var(--parchment);
}

.brand-mark {
	width: auto;
	height: 56px;
	filter: drop-shadow(0 0 10px rgba(227, 66, 52, 0.45));
}

.brand-name {
	font-family: var(--font-brand);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0.03em;
}

.brand-sub {
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--amber);
	align-self: flex-end;
	margin-bottom: 0.55rem;
}

main {
	flex: 1;
}

.section {
	padding-block: clamp(3rem, 8vw, 6rem);
}

.site-footer {
	margin-top: auto;
	background: rgba(10, 8, 11, 0.7);
}

.footer-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	padding-block: 1.4rem;
	font-size: 0.88rem;
	color: var(--parchment-faint);
}

.footer-row p {
	margin: 0;
}

.footer-row a {
	color: var(--parchment-dim);
}

/* ---------- Notices ---------- */

.notice {
	padding: 0.8rem 1rem;
	border-radius: var(--radius);
	border: 1px solid rgba(242, 169, 59, 0.5);
	background: rgba(242, 169, 59, 0.08);
	color: var(--parchment);
	font-size: 0.92rem;
}

.notice-error {
	border-color: rgba(255, 107, 79, 0.6);
	background: rgba(255, 107, 79, 0.1);
}

.notice-ok {
	border-color: rgba(83, 200, 145, 0.55);
	background: rgba(83, 200, 145, 0.08);
}

/* ---------- Landing and not-found pages ---------- */

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero-mark {
	justify-self: center;
	width: min(100%, 360px);
	filter: drop-shadow(0 0 28px rgba(227, 66, 52, 0.4));
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

@media (max-width: 760px) {
	.hero {
		grid-template-columns: 1fr;
	}

	.hero-mark {
		order: -1;
		width: min(70%, 260px);
	}

	.brand-name {
		font-size: 1.45rem;
	}

	.brand-mark {
		height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}