/* ==========================================================================
   Canary Design System — Base
   Fonts, reset, typographic hierarchy, texture, scrollbar, focus, motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, SIL OFL). Display: Cinzel. Body/UI: Cabin.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin.woff2") format("woff2");
	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";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin-ext.woff2") format("woff2");
	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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cabin";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/cabin-latin.woff2") format("woff2");
	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: "Cabin";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/cabin-latin-ext.woff2") format("woff2");
	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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Cabin";
	font-style: italic;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("../fonts/cabin-italic-latin.woff2") format("woff2");
	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;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	color-scheme: dark;
	scrollbar-color: #2a2723 var(--bg-deep);
	scrollbar-width: thin;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	letter-spacing: var(--tracking-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Grain — felt, not seen. Fixed layer, no repaint cost on scroll. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-toast);
	pointer-events: none;
	background-image: var(--texture-noise);
	background-size: 180px 180px;
	opacity: var(--texture-opacity);
	mix-blend-mode: screen;
}

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

img {
	height: auto;
}

/* The display resets above must never defeat the hidden attribute */
[hidden] {
	display: none !important;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: var(--gold-primary);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-cine);
}

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

hr {
	border: 0;
	height: 1px;
	background: var(--border-default);
	margin: var(--spacing-xl) 0;
}

::selection {
	background: rgb(var(--gold-rgb) / 0.28);
	color: var(--bone);
}

/* --------------------------------------------------------------------------
   Focus — always visible for keyboard users, never for pointer users
   -------------------------------------------------------------------------- */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--gold-primary);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Scrollbar — discreet
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
	background: #24221e;
	border: 2px solid var(--bg-deep);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   Typographic hierarchy
   Class-based so any element can take any role (semantic tag ≠ visual size).
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--weight-heading);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	color: var(--text-primary);
	text-wrap: balance;
}

p {
	margin: 0 0 var(--spacing-md);
}

p:last-child {
	margin-bottom: 0;
}

.t-display {
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: var(--weight-display);
	line-height: var(--leading-display);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	color: var(--bone);
}

.t-h1 {
	font-family: var(--font-display);
	font-size: var(--text-h1);
	font-weight: var(--weight-display);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}

.t-h2 {
	font-family: var(--font-display);
	font-size: var(--text-h2);
	font-weight: var(--weight-heading);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}

.t-h3 {
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-heading);
	line-height: var(--leading-tight);
	letter-spacing: 0.05em;
}

.t-h4 {
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-heading);
	line-height: var(--leading-tight);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.t-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	font-family: var(--font-ui);
	font-size: var(--text-eyebrow);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--gold-muted);
}

/* Eyebrow with a leading ornamental tick: "— EYEBROW" */
.t-eyebrow--tick::before {
	content: "";
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.t-body-lg {
	font-size: var(--text-body-lg);
	line-height: 1.6;
	color: var(--text-secondary);
}

.t-body {
	font-size: var(--text-body);
	line-height: var(--leading-body);
}

.t-small {
	font-size: var(--text-small);
	line-height: 1.55;
	color: var(--text-secondary);
}

.t-caption {
	font-size: var(--text-caption);
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--text-muted);
}

.t-button {
	font-family: var(--font-ui);
	font-size: var(--text-button);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
}

.t-nav {
	font-family: var(--font-ui);
	font-size: var(--text-nav);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
}

.t-label {
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.t-lead {
	max-width: 62ch;
}

.t-gold {
	color: var(--gold-primary);
}

.t-success {
	color: var(--success);
}

.t-danger {
	color: var(--blood-bright);
}

.t-muted {
	color: var(--text-muted);
}

.t-blood {
	color: var(--blood-bright);
}

.t-center {
	text-align: center;
}

/* Prose — long-form content (news bodies, rules, FAQ) */
.prose {
	color: var(--text-secondary);
	max-width: 72ch;
}

.prose h2,
.prose h3 {
	color: var(--text-primary);
	margin-top: var(--spacing-xl);
	margin-bottom: var(--spacing-md);
}

.prose a {
	text-decoration: underline;
	text-decoration-color: rgb(var(--gold-rgb) / 0.35);
	text-underline-offset: 3px;
}

.prose a:hover {
	text-decoration-color: var(--gold-bright);
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li::marker {
	color: var(--gold-muted);
}

.prose blockquote {
	margin: var(--spacing-lg) 0;
	padding-left: var(--spacing-lg);
	border-left: 1px solid var(--border-strong);
	color: var(--text-primary);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--wide {
	max-width: var(--container-wide);
}

.section {
	position: relative;
	padding-block: var(--section-gap);
}

.section--tight {
	padding-block: var(--section-gap-sm);
}

.section--flush {
	padding-block: 0;
}

.stack > * + * {
	margin-top: var(--spacing-md);
}

.stack--lg > * + * {
	margin-top: var(--spacing-lg);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-md);
	align-items: center;
}

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

.skip-link {
	position: fixed;
	top: var(--spacing-sm);
	left: var(--spacing-sm);
	z-index: var(--z-toast);
	transform: translateY(-200%);
	padding: var(--spacing-sm) var(--spacing-md);
	background: var(--gold-primary);
	color: var(--text-inverse);
	font-weight: var(--weight-ui);
}

.skip-link:focus {
	transform: none;
}

/* --------------------------------------------------------------------------
   Motion system
   Groups reveal; children stagger through --i. Disabled under reduced motion.
   Hidden states only apply once the inline head script has flagged html.js,
   so content is never lost when scripts are blocked or fail.
   -------------------------------------------------------------------------- */
.js .reveal {
	--reveal-y: 24px;
	opacity: 0;
	transform: translateY(var(--reveal-y));
	transition:
		opacity var(--duration-xslow) var(--ease-cine),
		transform var(--duration-xslow) var(--ease-cine);
	will-change: opacity, transform;
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

.js .reveal-group > [data-reveal-child] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--duration-slow) var(--ease-cine),
		transform var(--duration-slow) var(--ease-cine);
	transition-delay: calc(var(--i, 0) * var(--stagger));
}

.js .reveal-group.is-visible > [data-reveal-child] {
	opacity: 1;
	transform: none;
}

/* Image reveal: a soft clip from the bottom. */
.js .reveal-image {
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--duration-xslow) var(--ease-cine);
}

.js .reveal-image.is-visible {
	clip-path: inset(0 0 0 0);
}

/* Crossfade stacks (backgrounds, artwork) */
.xfade {
	position: relative;
}

.xfade > .xfade__layer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--duration-xslow) var(--ease-in-out);
}

.xfade > .xfade__layer.is-active {
	opacity: 1;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.reveal,
	.reveal-group > [data-reveal-child],
	.reveal-image {
		opacity: 1;
		transform: none;
		clip-path: none;
	}
}

/* Fonts not yet loaded: avoid CLS jumps by keeping metrics close. */
html:not(.fonts-loaded) .t-display,
html:not(.fonts-loaded) .t-h1 {
	letter-spacing: 0.02em;
}