/* =========================================================================
   Rock Consignments — Design System
   Direction: pure gold-on-black. Premium, minimal, gallery-elegant (Julien's),
   with a rock'n'roll edge from condensed display type and fine gold rules.
   Gold is the single accent — seasoning, never wallpaper. No red.

   Tokens back BOTH the hand-coded templates and any Bricks elements, so they
   live here (version-controlled) as well as in Bricks global settings.
   ========================================================================= */

:root {
	/* ---- Colour — dark base, bone text, distressed gold accent ---- */
	--ink:        #0E0D0C; /* near-black page base (logo background) */
	--charcoal:   #1A1815; /* raised dark surface / alt sections */
	--paper:      #1E1B18; /* card surface on the dark body */
	--slate:      #262320; /* hover surfaces, inputs */
	--bone:       #EDE6D6; /* primary text — bone/cream lettering */
	--bone-dim:   #B8B0A0; /* secondary text, lot meta, captions */
	--gold:       #B8995A; /* THE accent — CTAs, lot #, underlines, rules */
	--gold-soft:  #D8C49A; /* hover / highlight on dark */
	--gold-deep:  #8C7239; /* pressed / deep borders */
	--hairline:   rgba(184, 153, 90, 0.22); /* faint gold rule */
	--mist:       #34302B; /* neutral border on dark */
	--header-bg:  #0B0A09; /* header bar, slightly deeper than the body */

	/* ---- Type ---- */
	--font-display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
	--font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Fluid scale (clamp) — Oswald is condensed, so it carries larger sizes */
	--fs-h1:   clamp(2.8rem, 6vw, 5rem);
	--fs-h2:   clamp(2rem, 4vw, 3.2rem);
	--fs-h3:   clamp(1.4rem, 2.5vw, 1.9rem);
	--fs-body: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);

	/* ---- Layout ---- */
	--container: 1360px;
	--gutter:    clamp(1rem, 4vw, 3rem);
	--radius:    6px;
	--rule:      1px solid var(--hairline);

	/* ---- Motion — slow, smooth, no spring/bounce ---- */
	--ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
	--dur:      0.8s;

}

/* ---- Base ---- */
/* Bricks' frontend CSS forces html{font-size:62.5%} (10px root); our scale is
   built for a 16px root, so restore it. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--bone);
	background: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

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

/* ---- Headings: condensed display ---- */
h1, h2, h3, h4, .u-display {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.005em;
	color: var(--bone);
	margin: 0 0 0.5em;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.u-upper { text-transform: uppercase; letter-spacing: 0.04em; }

p { margin: 0 0 1em; }
strong { color: var(--bone); }
hr { border: 0; border-top: var(--rule); }

/* ---- Eyebrow / label: condensed small-caps, gold ---- */
.eyebrow {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold);
}

/* ---- Links ---- */
a { color: inherit; text-decoration: none; }

/* ---- Buttons: solid gold (primary), gold outline (secondary) ---- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55em;
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	padding: 1.05em 2.1em;
	border: 1px solid var(--gold);
	border-radius: 2px;
	cursor: pointer;
	background: transparent;
	color: var(--bone);
	transition: background-color 0.4s var(--ease-lux),
	            color 0.4s var(--ease-lux),
	            border-color 0.4s var(--ease-lux),
	            transform 0.4s var(--ease-lux);
}
.btn--primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--ink); }
.btn--outline { background: transparent; color: var(--bone); border-color: var(--gold); }
.btn--outline:hover { background: var(--gold); color: var(--ink); }
.btn--ghost { border-color: var(--mist); color: var(--bone-dim); }
.btn--ghost:hover { border-color: var(--gold); color: var(--bone); }

/* ---- Layout helpers ---- */
.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}
.hairline { border: 0; border-top: var(--rule); }

/* ---- Card: dark surface, gold hairline, hover lift + image zoom ---- */
.card {
	background: var(--paper);
	border: 1px solid var(--mist);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux), border-color 0.5s var(--ease-lux);
}
.card:hover {
	transform: translateY(-4px);
	border-color: var(--hairline);
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.8);
}
.card__media { overflow: hidden; }
.card__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s var(--ease-lux);
}
.card:hover .card__media img { transform: scale(1.04); }

/* ---- Vintage grain overlay utility (apply to dark hero/CTA panels) ---- */
.has-grain { position: relative; }
.has-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--grain);
	background-size: 160px 160px;
	opacity: 0.06;
	pointer-events: none;
	z-index: 1;
}
.has-grain > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
	.btn { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
}