/* ==========================================================================
   GOSHOPCARA — BURGUNDY EDITORIAL DESIGN SYSTEM
   Loaded after style.css; overrides the inherited token set.
   Brief §60-63: tokens, typography scale, radius discipline, spacing.
   ========================================================================== */

:root {
	/* Burgundy ramp */
	--burgundy-950: #32050F;
	--burgundy-900: #4A0716;
	--burgundy-800: #651020;
	--burgundy-700: #7A1025;
	--burgundy-600: #9E2940;
	--burgundy-300: #C46A78;

	--gold: #C9A45C;

	--bg: #090708;
	--surface: #120B0D;
	--surface-2: #1B1013;

	--text: #F7F3F4;
	--muted: #B9AEB1;

	--border: rgba(255, 255, 255, .09);
	--border-strong: rgba(255, 255, 255, .16);

	/* Legacy aliases — the inherited stylesheet and WooCommerce templates
	   reference these names. Repointing them here converts the whole site to
	   Burgundy without touching every old rule. */
	--accent: var(--burgundy-700);
	--accent-hover: var(--burgundy-600);
	--accent-soft: var(--burgundy-300);
	--brand: var(--burgundy-700);
	--primary: var(--burgundy-700);
	--ink: var(--text);
	--paper: var(--bg);

	/* Spacing — brief §63 */
	--sp-section: clamp(60px, 9vw, 160px);
	--sp-gutter: clamp(20px, 4vw, 64px);
	--maxw: 1560px;
	--maxw-text: 68ch;

	/* Radius — three steps, softened. Inner surfaces sit one step below their
	   container so nested corners nest cleanly instead of fighting. */
	--r-sm: 6px;    /* badges, tags, small inputs */
	--r-md: 10px;   /* buttons, cards, images inside cards */
	--r-lg: 14px;   /* matrix cells, floating panels, large cards */
	--r-xl: 20px;   /* section containers, feature block */

	/* An image inside a 1px-bordered card needs a slightly tighter radius, or
	   the card's corner shows a hairline of background through the gap. */
	--r-inner: 9px;

	/* Legacy aliases — older rules in style.css still reference these. */
	--r-card: var(--r-md);
	--r-btn: var(--r-md);
	--r-float: var(--r-lg);
	--r-img: var(--r-md);

	/* Spacing scale — 4px base. Replaces the ad-hoc 9/11/17/19px values. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-12: 48px;

	/* Motion — brief §39: 150-350ms */
	--t-fast: 160ms;
	--t-base: 240ms;
	--t-slow: 340ms;
	--ease: cubic-bezier(.22, .61, .36, 1);

	--header-h: 74px;
	--ann-h: 34px;
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

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

/* The inertial scroller drives scrollTo itself; leaving the CSS smoothing on
   would have the browser ease the same movement a second time, which reads as
   drag and overshoot. */
html.has-smooth { scroll-behavior: auto; }

body.gsc-body {
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.62;
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.gsc-body.gsc-locked {
	overflow: hidden;
}

/* Without scripting nothing ever removes the lock, so scrolling is restored
   and the loader hidden rather than leaving the page frozen behind it. */
html.no-js body.gsc-body.gsc-locked { overflow: visible; }
html.no-js .gsc-loader { display: none; }

/* Scroll-reveal and the menu stagger both start hidden and are switched on
   by script. Without JS they must not stay invisible. */
html.no-js .gsc-rv,
html.no-js .gsc-rv-img img,
html.no-js .gsc-mob__list a {
	opacity: 1;
	transform: none;
}

.gsc-body h1, .gsc-body h2, .gsc-body h3, .gsc-body h4 {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 600;
	letter-spacing: -.028em;
	line-height: 1.03;
	margin: 0;
	color: var(--text);
}

.gsc-body a {
	color: inherit;
	text-decoration: none;
}

.gsc-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

.gsc-shell {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--sp-gutter);
}

/* Accessibility — brief §55 */
.gsc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gsc-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 9999;
	background: var(--burgundy-700);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--r-btn);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: top var(--t-base) var(--ease);
}

.gsc-skip:focus {
	top: 12px;
}

.gsc-body :focus-visible {
	outline: 2px solid var(--burgundy-300);
	outline-offset: 3px;
}

/* ==========================================================================
   TYPOGRAPHY SCALE — brief §61
   ========================================================================== */

.gsc-display {
	font-size: clamp(2.6rem, 8.2vw, 6.9rem);
	line-height: .96;
	letter-spacing: -.035em;
	font-weight: 600;
}

.gsc-h2 {
	font-size: clamp(1.9rem, 4.2vw, 3.5rem);
	line-height: 1.04;
	letter-spacing: -.028em;
}

.gsc-h3 {
	font-size: clamp(1.25rem, 2.1vw, 1.85rem);
	line-height: 1.16;
	letter-spacing: -.02em;
}

.gsc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--burgundy-300);
	margin: 0;
}

.gsc-lede {
	font-size: clamp(.98rem, 1.15vw, 1.12rem);
	line-height: 1.7;
	color: var(--muted);
	max-width: var(--maxw-text);
}

.gsc-num {
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BUTTON SYSTEM — brief §40
   ========================================================================== */

.gsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 15px 30px;
	border-radius: var(--r-btn);
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	transition: background var(--t-base) var(--ease),
	            border-color var(--t-base) var(--ease),
	            color var(--t-base) var(--ease),
	            transform var(--t-fast) var(--ease);
	font-family: inherit;
	line-height: 1;
	text-align: center;
}

.gsc-btn svg,
.gsc-btn .gsc-arrow {
	transition: transform var(--t-base) var(--ease);
	flex: none;
}

.gsc-btn:hover .gsc-arrow {
	transform: translateX(5px);
}

.gsc-btn--primary {
	background: var(--burgundy-700);
	color: #fff;
	border-color: var(--burgundy-700);
}

.gsc-btn--primary:hover {
	background: var(--burgundy-600);
	border-color: var(--burgundy-600);
}

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

.gsc-btn--secondary {
	background: transparent;
	color: var(--text);
	border-color: var(--border-strong);
}

.gsc-btn--secondary:hover {
	background: var(--burgundy-700);
	border-color: var(--burgundy-700);
	color: #fff;
}

.gsc-btn--ghost {
	background: none;
	border-color: transparent;
	color: var(--text);
	padding-left: 0;
	padding-right: 0;
}

.gsc-btn--ghost:hover {
	color: var(--burgundy-300);
}

.gsc-btn--block {
	width: 100%;
}

.gsc-btn[disabled],
.gsc-btn.is-disabled {
	opacity: .45;
	pointer-events: none;
}

.gsc-btn.is-loading {
	color: transparent !important;
	pointer-events: none;
}

.gsc-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 255, 255, .28);
	border-top-color: #fff;
	border-radius: 50%;
	animation: gsc-spin .62s linear infinite;
}

.gsc-btn.is-done {
	background: var(--burgundy-800);
	border-color: var(--burgundy-800);
}

@keyframes gsc-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   SECTION HEADER — brief §15 (editorial, numbered)
   ========================================================================== */

.gsc-sec {
	padding: var(--sp-section) 0;
	position: relative;
}

.gsc-sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: clamp(32px, 4.5vw, 70px);
	flex-wrap: wrap;
}

.gsc-sec-head__main {
	flex: 1 1 380px;
	min-width: 0;
}

.gsc-sec-head__main .gsc-label {
	margin-bottom: 16px;
}

.gsc-sec-head__main .gsc-lede {
	margin-top: 16px;
}

.gsc-sec-head__aside {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: none;
}

.gsc-rule {
	height: 1px;
	background: var(--border);
	width: 100%;
	margin: 0;
	border: 0;
}

/* ==========================================================================
   REVEAL — brief §17 (IntersectionObserver driven)
   ========================================================================== */

.gsc-rv {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	will-change: opacity, transform;
}

.gsc-rv.is-in {
	opacity: 1;
	transform: none;
}

.gsc-rv-img {
	overflow: hidden;
	border-radius: var(--r-img);
}

/* Descendant, not child: the image is wrapped in a link, so a `>` combinator
   matched nothing and the zoom-out never ran. */
.gsc-rv-img img {
	transform: scale(1.08);
	transition: transform 1.15s var(--ease);
	will-change: transform;
}

.gsc-rv-img.is-in img {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.gsc-rv,
	.gsc-rv-img img {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.gsc-marquee__track { animation: none !important; }

	/* The menu items start at opacity 0 and are revealed by a stagger
	   animation. With animations off that reveal never runs, so the open menu
	   would be blank — they are shown outright instead. */
	.gsc-mob__list a {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.gsc-scroll__dot,
	.gsc-loader__logo .gsc-logo__img--mark { animation: none !important; }
}