/* ==========================================================================
   WEIRDO & CO — BASE
   Reset, type, layout primitives. Reads tokens only; hardcodes nothing.
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* The texture sits on a fixed pseudo-element so it never repaints on scroll
   and never enters the layout. One decorative layer, zero layout cost. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--texture);
	background-size: 320px;
	opacity: var(--texture-opacity);
	mix-blend-mode: var(--texture-blend, normal);
}

[data-collection="neutral"] body::before { display: none; }


/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-spacing);
	text-transform: var(--display-case);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-s);
	text-wrap: balance;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-l); }
h3 { font-size: var(--text-m); }
h4 { font-size: var(--text-base); }

p, li { max-width: var(--measure); text-wrap: pretty; }
p { margin: 0 0 var(--space-s); }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

strong { font-weight: 700; }

small, .u-meta {
	font-size: var(--text-xs);
	color: var(--ink-soft);
	letter-spacing: 0.02em;
}

hr {
	border: 0;
	border-top: var(--border) solid var(--rule);
	margin: var(--space-xl) 0;
}


/* --- The numbering treatment --------------------------------------------- */

.weirdo-number {
	font-family: var(--number-font);
	letter-spacing: var(--number-spacing);
	text-transform: var(--number-case);
	color: var(--number-colour);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.weirdo-number--large {
	font-size: var(--text-m);
	font-weight: var(--display-weight);
}


/* --- Media --------------------------------------------------------------- */

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

/* Every image gets width and height in the markup, so this only guards
   against a stray upload. */
img { background: var(--paper-sunk); }


/* --- Layout primitives --------------------------------------------------- */

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

.weirdo-container--narrow { max-width: 46rem; }

/* Pages that lay out their own sections opt out of the container entirely.
   Their inner sections bring their own. */
.weirdo-page--full > * { margin-block: 0; }


/* --------------------------------------------------------------------------
   BANDS
   The editorial layer. A band is a full-bleed horizontal slab that owns the
   whole viewport width and carries its own ground, so a page reads as a
   sequence of rooms rather than one long column inside a box.

   This is the difference between a page that has components on it and a page
   that has been art directed. Without it every section is the same width,
   the same colour and the same weight, and the eye has nowhere to land.
   -------------------------------------------------------------------------- */

.weirdo-band {
	position: relative;
	padding-block: clamp(3.5rem, 10vh, 7rem);
	overflow: hidden;
}

.weirdo-band > * { position: relative; z-index: 1; }

/* Atmosphere. One gradient wash per band, tinted with whatever the active
   world's accent happens to be, so it costs nothing and never needs a
   per-collection rule. */
.weirdo-band--lit::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(
		70rem 30rem at 22% -12%,
		color-mix(in srgb, var(--accent) 14%, transparent),
		transparent 62%
	);
}

/* Photographic band.
   The image comes in as --hero-image on the element, so one class serves any
   page and swapping the picture never touches the stylesheet.

   Everything is in one background stack, listed top layer first, because
   that keeps the paint order honest without a second pseudo-element:

     1. the accent wash, so the photo picks up whichever world is active
     2. a scrim, heavy on the left where the type sits and clearing to the
        right so the objects stay visible
     3. the photograph

   The scrim is the part that matters. A hero image with text on it is a
   legibility problem first and a picture second. */
.weirdo-band--photo {
	min-height: clamp(24rem, 60vh, 38rem);
	display: flex;
	align-items: center;
	background-color: var(--paper);
	background-repeat: no-repeat;
	background-size: cover, cover, cover;
	background-position: center, center, var(--hero-pos, 62% center);
	background-image:
		radial-gradient(
			70rem 30rem at 22% -12%,
			color-mix(in srgb, var(--accent) 20%, transparent),
			transparent 62%
		),
		linear-gradient(
			90deg,
			var(--paper) 2%,
			rgba(6, 8, 12, 0.82) 34%,
			rgba(6, 8, 12, 0.40) 64%,
			rgba(6, 8, 12, 0.60) 100%
		),
		var(--hero-image);
}

.weirdo-band--photo > * { width: 100%; }

/* On a phone the type sits over the whole frame, so the scrim has to run
   top to bottom instead of left to right. */
@media (max-width: 46rem) {
	.weirdo-band--photo {
		min-height: clamp(22rem, 68vh, 32rem);
		background-position: center, center, var(--hero-pos, 58% center);
		background-image:
			radial-gradient(
				40rem 20rem at 30% -10%,
				color-mix(in srgb, var(--accent) 20%, transparent),
				transparent 62%
			),
			linear-gradient(
				180deg,
				rgba(6, 8, 12, 0.62) 0%,
				rgba(6, 8, 12, 0.80) 55%,
				var(--paper) 100%
			),
			var(--hero-image);
	}
}

.weirdo-band--sunk { background: var(--paper-sunk); }

/* Sections that belong to the same object should not sit a full screen
   apart. Used down a product page, where the gallery, the story and the
   numbers are all one thing. */
.weirdo-band--tight { padding-block: clamp(2rem, 5vh, 3.5rem); }

/* The band header. Title on the left, the selling line pulled to the right
   and set small, a hairline underneath. It is the single most recognisable
   piece of the whole layout and it is identical in all five worlds. */
.weirdo-band__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-m) var(--space-xl);
	padding-bottom: var(--space-m);
	border-bottom: var(--border) solid var(--rule);
	margin-bottom: var(--space-xl);
}

.weirdo-band__head h1,
.weirdo-band__head h2 { margin: 0; }

.weirdo-band__line {
	color: var(--ink-soft);
	font-size: var(--text-s);
	max-width: 38ch;
	margin: 0;
}

/* The eyebrow. Mono, letterspaced, in the accent. Carries the range number
   and the world's one-word idea: "Range 03 · Gallery light". */
.weirdo-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 var(--space-xs);
}

/* Display scale for a band title. Deliberately larger than an h1 in body
   copy: this is the thing people see first and it should behave like a
   headline, not like a heading. */
.weirdo-band__title {
	font-size: var(--text-2xl);
	letter-spacing: -0.03em;
	max-width: 18ch;
}

/* A serif italic accent inside a display line. Used once per page at most.
   The Keepers already run serif, so it inherits and simply goes italic. */
.weirdo-accent-word {
	font-family: var(--font-serif, "Weirdo Serif", Georgia, serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--accent);
}

/* The note. Accent rule down the left, faint tint behind. For the one thing
   on a page that has to be read rather than skimmed. */
.weirdo-note {
	margin-top: var(--space-xl);
	padding: var(--space-m) var(--space-l);
	border-left: 2px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.weirdo-note p { margin: 0; color: var(--ink-soft); font-size: var(--text-s); }
.weirdo-note strong { color: var(--ink); font-weight: 600; }

.weirdo-section { padding-block: var(--space-2xl); }
.weirdo-section--tight { padding-block: var(--space-xl); }

/* The one grid. Collection pages, the home creature wall, related products —
   all the same grid. Only the cards inside it change. */
.weirdo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
	gap: var(--space-m);
}

.weirdo-grid--tight { --grid-min: 11rem; gap: var(--space-s); }
.weirdo-grid--wide  { --grid-min: 21rem; gap: var(--space-l); }

.weirdo-stack > * + * { margin-top: var(--space-s); }
.weirdo-stack--loose > * + * { margin-top: var(--space-l); }

.weirdo-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	align-items: center;
}


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

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.screen-reader-text,
.weirdo-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.weirdo-skip {
	position: absolute;
	top: -100%;
	left: var(--space-s);
	z-index: var(--z-modal);
	padding: var(--space-2xs) var(--space-s);
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius-sm);
}
.weirdo-skip:focus { top: var(--space-s); }


/* --- Utilities ----------------------------------------------------------- */

.u-center     { text-align: center; }
.u-center p   { margin-inline: auto; }
.u-muted      { color: var(--ink-soft); }
.u-nowrap     { white-space: nowrap; }
.u-hide       { display: none !important; }

@media (max-width: 47.99em) { .u-hide\@sm { display: none !important; } }
@media (min-width: 48em)    { .u-show\@sm { display: none !important; } }