/* =========================================================================
   BASE — tokens, reset, typography primitives
   Every colour, ratio and easing curve in the original design is recorded
   here as a token. Nothing downstream hard-codes a hex value.
   ====================================================================== */

:root {
	/* Surfaces --------------------------------------------------------- */
	--sk-black: #07070A;
	--sk-black-deep: #050507;
	--sk-black-glass: rgba(7, 7, 10, .72);
	--sk-black-glass-strong: rgba(7, 7, 10, .92);
	--sk-charcoal: #101014;
	--sk-charcoal-2: #0C0C10;
	--sk-charcoal-3: #0D0D11;
	--sk-elevated: #0E0E12;
	--sk-elevated-2: #16161A;
	--sk-track: #0A0A0D;
	--sk-thumb: #26262B;
	--sk-thumb-hover: #3B3B42;

	/* Ink -------------------------------------------------------------- */
	--sk-white: #EFEAE1;
	--sk-paper: #F1ECE3;
	--sk-paper-2: #E4DED2;
	--sk-ink: #14140F;

	/* Accents ---------------------------------------------------------- */
	--sk-gold: #C8A45C;
	--sk-gold-hi: #E6D3A3;
	--sk-gold-deep: #8A6B22;
	--sk-gold-deeper: #7A5C18;
	--sk-red: #C4262B;

	/* Hairlines and dimmed text ---------------------------------------- */
	--sk-line: rgba(239, 234, 225, .08);
	--sk-line-2: rgba(239, 234, 225, .09);
	--sk-line-3: rgba(239, 234, 225, .10);
	--sk-line-4: rgba(239, 234, 225, .12);
	--sk-line-5: rgba(239, 234, 225, .16);
	--sk-line-6: rgba(239, 234, 225, .18);
	--sk-line-7: rgba(239, 234, 225, .20);
	--sk-line-8: rgba(239, 234, 225, .28);
	--sk-line-gold: rgba(200, 164, 92, .28);

	--sk-dim: rgba(239, 234, 225, .62);
	--sk-dim-60: rgba(239, 234, 225, .60);
	--sk-dim-58: rgba(239, 234, 225, .58);
	--sk-dim-56: rgba(239, 234, 225, .56);
	--sk-dim-55: rgba(239, 234, 225, .55);
	--sk-dim-50: rgba(239, 234, 225, .50);
	--sk-dim-44: rgba(239, 234, 225, .44);
	--sk-dim-72: rgba(239, 234, 225, .72);
	--sk-dim-75: rgba(239, 234, 225, .75);

	--sk-ink-78: rgba(20, 20, 15, .78);
	--sk-ink-62: rgba(20, 20, 15, .62);
	--sk-ink-42: rgba(20, 20, 15, .42);
	--sk-ink-25: rgba(20, 20, 15, .25);
	--sk-ink-12: rgba(20, 20, 15, .12);

	/* Type ------------------------------------------------------------- */
	--sk-serif: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
	--sk-sans: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Rhythm ----------------------------------------------------------- */
	--sk-nav-h: 82px;
	--sk-gut: clamp(20px, 5vw, 88px);
	--sk-gut-tight: clamp(18px, 4vw, 48px);
	--sk-max: 1440px;
	--sk-section-y: clamp(64px, 8vw, 140px);

	/* Motion ----------------------------------------------------------- */
	--sk-ease: cubic-bezier(.22, 1, .36, 1);
	--sk-ease-soft: cubic-bezier(.16, 1, .3, 1);
	--sk-reveal-distance: 26px;
}

/* The header shrinks on scroll; every offset in the layout reads this token
   rather than repeating the number. */
body.is-scrolled {
	--sk-nav-h: 62px;
}

/* -------------------------------------------------------------------------
   Reset
   ---------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--sk-black);
	color: var(--sk-white);
	font-family: var(--sk-sans);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ol,
ul {
	margin: 0;
}

ol,
ul {
	padding: 0;
	list-style: none;
}

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

::selection {
	background: var(--sk-gold);
	color: var(--sk-black);
}

a {
	color: var(--sk-gold);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--sk-gold-hi);
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	text-align: left;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 1px solid var(--sk-gold);
	outline-offset: 4px;
}

/* -------------------------------------------------------------------------
   Scrollbars
   ---------------------------------------------------------------------- */

::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

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

::-webkit-scrollbar-thumb {
	background: var(--sk-thumb);
}

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

/* -------------------------------------------------------------------------
   Accessibility
   ---------------------------------------------------------------------- */

.sk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--sk-white);
	color: var(--sk-black);
	padding: 14px 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
}

.sk-skip:focus {
	left: 12px;
	top: 12px;
	color: var(--sk-black);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--sk-white);
	clip: auto !important;
	clip-path: none;
	color: var(--sk-black);
	display: block;
	font-size: 12px;
	height: auto;
	left: 12px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 12px;
	width: auto;
	z-index: 200;
}

/* -------------------------------------------------------------------------
   Typography primitives
   ---------------------------------------------------------------------- */

.sk-display {
	font-family: var(--sk-serif);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 92px);
	line-height: .95;
	letter-spacing: -.02em;
}

.sk-display--tight {
	font-size: clamp(32px, 5vw, 74px);
	line-height: .98;
}

.sk-display--wide {
	font-size: clamp(34px, 5.6vw, 84px);
	line-height: .98;
}

.sk-display--sm {
	font-size: clamp(28px, 4vw, 52px);
	line-height: 1;
	letter-spacing: -.02em;
}

.sk-serif {
	font-family: var(--sk-serif);
	font-weight: 400;
}

.sk-italic {
	font-style: italic;
}

.sk-eyebrow {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .3em;
	color: var(--sk-gold);
	text-transform: uppercase;
}

.sk-eyebrow--ink {
	color: var(--sk-gold-deep);
}

.sk-kicker {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--sk-gold);
	text-transform: uppercase;
}

.sk-meta {
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--sk-dim-60);
	text-transform: uppercase;
}

.sk-meta--tight {
	font-size: 9.5px;
	letter-spacing: .2em;
}

.sk-body {
	font-size: clamp(13.5px, 1.05vw, 15.5px);
	line-height: 1.85;
	color: var(--sk-dim);
	text-wrap: pretty;
}

.sk-body--sm {
	font-size: 13px;
	line-height: 1.8;
	color: var(--sk-dim-50);
}

.sk-arrow {
	display: inline-block;
	color: var(--sk-gold);
	transition: transform .35s ease;
}

/* Utility: the shared max-width shell. */
.sk-shell {
	max-width: var(--sk-max);
	margin-inline: auto;
}

.sk-pad {
	padding-inline: var(--sk-gut);
}

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

/* Aspect-ratio boxes, one class per shape the design uses. */
.sk-ratio--2-3 { aspect-ratio: 2 / 3; }
.sk-ratio--3-2 { aspect-ratio: 3 / 2; }
.sk-ratio--4-3 { aspect-ratio: 4 / 3; }
.sk-ratio--3-4 { aspect-ratio: 3 / 4; }
.sk-ratio--4-5 { aspect-ratio: 4 / 5; }
.sk-ratio--1-1 { aspect-ratio: 1 / 1; }
.sk-ratio--16-9 { aspect-ratio: 16 / 9; }