/* ==========================================================================
   Rysque — design tokens + base type/layout system
   ========================================================================== */

@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/unbounded-800.woff') format('woff');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-mono-700.woff2') format('woff2');
}

:root {
	/* Brand accent — sampled directly from the logo file (rysque logo.jpeg), not guessed. */
	--rq-burgundy: #961c59;
	--rq-burgundy-light: #c33d80;
	--rq-burgundy-dark: #6e1341;

	/* Light register */
	--rq-cream: #f7f2ec;
	--rq-cream-dim: #ece4d9;
	--rq-ink: #181316;

	/* Dark register */
	--rq-void: #0f0c0d;
	--rq-void-raised: #1a1517;
	--rq-bone: #f5efe8;
	--rq-bone-dim: rgba(245, 239, 232, 0.56);
	--rq-hairline-dark: rgba(245, 239, 232, 0.14);
	--rq-hairline-light: rgba(24, 19, 22, 0.12);

	--rq-display: 'Unbounded', 'Arial Narrow', sans-serif;
	--rq-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--rq-mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;

	--rq-ease-strike: cubic-bezier(0.16, 1, 0.3, 1);
	--rq-container: 1400px;
	--rq-gutter: clamp(20px, 5vw, 64px);
}

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

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

body {
	background: var(--rq-cream);
	color: var(--rq-ink);
	font-family: var(--rq-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--rq-display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

a { transition: color 0.2s var(--rq-ease-strike); }

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

.rq-container {
	width: 100%;
	max-width: var(--rq-container);
	margin-inline: auto;
	padding-inline: var(--rq-gutter);
}

.rq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--rq-mono);
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.rq-eyebrow::before {
	content: '';
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

.rq-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--rq-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 16px 30px;
	border: 1px solid currentColor;
	background: transparent;
	cursor: pointer;
	transition: transform 0.35s var(--rq-ease-strike), background 0.25s ease, color 0.25s ease;
}
.rq-btn--solid {
	background: var(--rq-burgundy);
	border-color: var(--rq-burgundy);
	color: var(--rq-bone);
}
.rq-btn:hover {
	transform: translate(3px, -3px);
}
.rq-btn--solid:hover {
	background: var(--rq-burgundy-dark);
	border-color: var(--rq-burgundy-dark);
}

/* Section registers */
.rq-section--dark {
	background: var(--rq-void);
	color: var(--rq-bone);
}
.rq-section--light {
	background: var(--rq-cream);
	color: var(--rq-ink);
}
.rq-section--dark .rq-eyebrow { color: var(--rq-burgundy-light); }
.rq-section--light .rq-eyebrow { color: var(--rq-burgundy); }

/* Scroll reveals — see assets/js/reveal.js. Hidden state only applies once JS confirms it can run. */
.js-reveal {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	transition: opacity 0.7s var(--rq-ease-strike), transform 0.7s var(--rq-ease-strike);
}
.js-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
	.js-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Diagonal "slash" wipe reveal — used on headlines/media instead of the plain
   fade+rise above, echoing the logo's bolt rather than a generic fade-up.
   Hiding is done with opacity, NOT a fully-collapsed clip-path: Chrome's
   IntersectionObserver computes intersection area from the post-clip-path
   render, so a zero-area hidden polygon can never register as "intersecting"
   in the first place — a permanent deadlock (confirmed via CDP: swapping
   clip-path to `none` on the same element flips intersectionRatio 0 -> 1
   instantly). Keeping the polygon's area non-trivial avoids that trap.  */
.js-reveal-clip {
	opacity: 0;
	clip-path: polygon(0 35%, 100% 12%, 100% 100%, 0 100%);
	transform: skewY(-2deg);
	transition: opacity 0.7s var(--rq-ease-strike), clip-path 0.85s var(--rq-ease-strike), transform 0.85s var(--rq-ease-strike);
}
.js-reveal-clip.is-visible {
	opacity: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	transform: skewY(0deg);
}
@media (prefers-reduced-motion: reduce) {
	.js-reveal-clip {
		opacity: 1;
		clip-path: none;
		transform: none;
		transition: none;
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--rq-burgundy);
	color: var(--rq-bone);
	padding: 12px 20px;
	font-family: var(--rq-mono);
	font-size: 13px;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}