/* ==========================================================================
   WEIRDO & CO — COMPONENTS
   One set of components. Two worlds. Nothing in here knows which one it is in.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTONS
   Shape, size and hit area never vary between collections. Only the surface.
   -------------------------------------------------------------------------- */

.weirdo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	min-height: var(--tap-min);
	padding: 0 var(--space-m);
	border: var(--border) solid transparent;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-display);
	font-size: var(--text-s);
	font-weight: 600;
	letter-spacing: var(--display-spacing);
	text-transform: var(--display-case);
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dur-fast) var(--motion),
		background-color var(--dur-fast) var(--motion),
		box-shadow var(--dur-fast) var(--motion);
}

.weirdo-btn:hover {
	color: var(--accent-ink);
	transform: translateY(var(--lift)) scale(var(--lift-scale));
	box-shadow: var(--shadow-lift);
}

.weirdo-btn:active { transform: translateY(0) scale(0.99); }

.weirdo-btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule);
}
.weirdo-btn--ghost:hover {
	color: var(--ink);
	border-color: var(--accent);
	box-shadow: none;
}

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

.weirdo-btn[disabled],
.weirdo-btn[aria-disabled="true"] {
	opacity: 0.5;
	pointer-events: none;
}


/* --------------------------------------------------------------------------
   HEADER AND NAVIGATION
   Position, structure and behaviour are identical everywhere. This is a large
   part of what stops the two skins reading as two websites.
   -------------------------------------------------------------------------- */

.weirdo-header {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: var(--border) solid var(--rule);
}

.weirdo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-m);
	min-height: 64px;
}

.weirdo-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-spacing);
	font-size: var(--text-s);
	text-transform: uppercase;
	color: var(--ink);
}
.weirdo-brand:hover { color: var(--ink); }

.weirdo-brand__mark {
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--accent);
}

/* The sub-brand never appears without the parent somewhere in view. */
.weirdo-brand__sub {
	color: var(--ink-soft);
	font-weight: 400;
	letter-spacing: 0.06em;
}
.weirdo-brand__sep { color: var(--ink-faint); }

.weirdo-nav ul {
	display: flex;
	gap: var(--space-m);
	list-style: none;
	margin: 0;
	padding: 0;
}

.weirdo-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tap-min);
	height: var(--tap-min);
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
}

/* Below 48em the menu collapses under the header. No overlay, no drawer,
   no trapped focus to get wrong — it is five links. */
@media (max-width: 47.99em) {
	.weirdo-nav__toggle { display: inline-flex; }

	.weirdo-nav ul {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		gap: 0;
		padding: var(--space-2xs) var(--container-pad) var(--space-s);
		background: var(--paper);
		border-bottom: var(--border) solid var(--rule);
	}

	.weirdo-nav ul.is-open { display: flex; }

	.weirdo-nav a {
		width: 100%;
		border-bottom: var(--border) solid var(--rule);
	}
	.weirdo-nav li:last-child a { border-bottom: 0; }
}

.weirdo-nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap-min);
	font-size: var(--text-s);
	text-decoration: none;
	color: var(--ink-soft);
	transition: color var(--dur-fast) var(--motion);
}
.weirdo-nav a:hover,
.weirdo-nav .current-menu-item > a { color: var(--ink); }


/* --------------------------------------------------------------------------
   THE CARD
   One component. A collector card in The Weirdos, a specimen tag in
   The Visitors. Same structure, same grid position, same order of information.
   When the first product lands you swap PENDING for a price. Nothing is rebuilt.
   -------------------------------------------------------------------------- */

.weirdo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper-raised);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--dur-mid) var(--motion),
		box-shadow var(--dur-mid) var(--motion),
		border-color var(--dur-mid) var(--motion);
}

.weirdo-card:hover {
	color: inherit;
	transform: translateY(var(--lift)) scale(var(--lift-scale));
	box-shadow: var(--shadow-lift);
	border-color: var(--accent);
}

.weirdo-card__media {
	position: relative;
	aspect-ratio: var(--card-ratio, 4 / 5);
	background: var(--paper-sunk);
	overflow: hidden;
	cursor: var(--cursor-media);
}


/* --------------------------------------------------------------------------
   SECTION SIGNATURES
   Each world gets exactly one signature move on the shared card. Not a
   different card — the same card, lit differently.
   -------------------------------------------------------------------------- */

/* THE KEEPERS — gallery raking light.
   A hard light enters from the left. On hover it sweeps across, which is
   the closest an interface gets to the thing that actually sells a ribbed
   vase: watching the shadow move. */
[data-collection="keepers"] .weirdo-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		rgba(255, 245, 235, .16) 0%,
		rgba(255, 245, 235, .04) 26%,
		rgba(0, 0, 0, .30) 62%,
		rgba(0, 0, 0, .55) 100%
	);
}

/* Half strength over a photograph. The sweep exists to fake raking light on a
   flat silhouette; a real photograph already has its own light in it, and
   stacking a second one on top only buries the right hand side of the vase. */
[data-collection="keepers"] .weirdo-card__media--photo::after {
	background: linear-gradient(
		105deg,
		rgba(255, 245, 235, .10) 0%,
		rgba(255, 245, 235, .02) 26%,
		rgba(0, 0, 0, .14) 62%,
		rgba(0, 0, 0, .28) 100%
	);
	transition: opacity var(--dur-slow) var(--motion),
	            transform var(--dur-slow) var(--motion);
}

[data-collection="keepers"] .weirdo-card:hover .weirdo-card__media::after {
	transform: translateX(12%);
}

/* No scale on hover here. A sculptural object should sit still and let the
   light do the moving. */
[data-collection="keepers"] .weirdo-card:hover .weirdo-card__media img {
	transform: none;
}

[data-collection="keepers"] .weirdo-card__name {
	font-size: var(--text-m);
	letter-spacing: -0.015em;
}


/* THE BEACONS — everything emits.
   There is no light in this room except the products, so the cards are lit
   from inside and the page is genuinely black behind them. */
[data-collection="beacons"] .weirdo-card {
	border-radius: var(--radius-sm);
	background:
		radial-gradient(120% 80% at 50% 0%, var(--accent-quiet) 0%, transparent 62%),
		var(--paper-raised);
}

[data-collection="beacons"] .weirdo-card:hover {
	box-shadow: var(--shadow-lift);
}

/* The halo behind the object. Sits under the image, grows on hover, and is
   one radial gradient rather than an image. */
[data-collection="beacons"] .weirdo-card__media::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	/* An upright ellipse, not a circle. It is standing behind a tall object,
	   and a circle wide enough to sit behind the shade spilled past the sides
	   of the card and read as a mask over the photograph. */
	width: 72%;
	height: 86%;
	transform: translate(-50%, -50%) scale(.86);
	border-radius: 50%;
	background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
	opacity: .18;
	pointer-events: none;
	transition: opacity var(--dur-slow) var(--motion),
	            transform var(--dur-slow) var(--motion);
}

[data-collection="beacons"] .weirdo-card:hover .weirdo-card__media::before {
	opacity: .42;
	transform: translate(-50%, -50%) scale(1);
}

[data-collection="beacons"] .weirdo-card__number {
	background: transparent;
	backdrop-filter: none;
	text-shadow: 0 0 12px var(--accent);
}


/* THE NEIGHBOURS — you are looking into a lit window.
   The signature is depth, because depth is literally what a book nook is.
   The card tilts a few degrees on hover so the frame parts company with the
   scene inside it, and the interior warms as you lean in. */
[data-collection="neighbours"] .weirdo-card {
	perspective: 900px;
	transform-style: preserve-3d;
}

[data-collection="neighbours"] .weirdo-card__media {
	/* A hard-edged spill of warm light from the opening, not a soft bloom.
	   Contained light is the whole difference from The Beacons. */
	background:
		linear-gradient(178deg, transparent 0%, var(--accent-quiet) 100%),
		var(--paper-sunk);
	transition: transform var(--dur-slow) var(--motion);
}

[data-collection="neighbours"] .weirdo-card:hover .weirdo-card__media {
	transform: rotateY(-3.5deg) rotateX(1.5deg) scale(1.015);
}

/* The window itself: one warm rectangle, hard edges, sitting in the middle
   distance. It brightens and steps back as you lean in.
 *
 * Placeholder cards only. This is scenery drawn behind a silhouette, and over
 * an actual photograph of a bookend it landed as a pale yellow rectangle
 * floating in the middle of the product. A lit window belongs in a card that
 * has no picture in it yet, not on top of one that does. */
[data-collection="neighbours"] .weirdo-card__media--empty::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 54%;
	width: 26%;
	height: 34%;
	transform: translate(-50%, -50%);
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--accent) 82%, transparent),
		color-mix(in srgb, var(--accent) 34%, transparent)
	);
	box-shadow: 0 0 30px -4px color-mix(in srgb, var(--accent) 55%, transparent);
	pointer-events: none;
	opacity: .5;
	transition: opacity var(--dur-slow) var(--motion),
	            transform var(--dur-slow) var(--motion);
}

[data-collection="neighbours"] .weirdo-card:hover .weirdo-card__media--empty::before {
	opacity: .85;
	transform: translate(-50%, -50%) scale(.94);
}

/* A vignette so the card reads as a room rather than a flat panel. */
[data-collection="neighbours"] .weirdo-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(120% 90% at 50% 55%, transparent 34%, rgba(0, 0, 0, .62) 100%);
}

[data-collection="neighbours"] .weirdo-card__number {
	background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.weirdo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--motion);
}
.weirdo-card:hover .weirdo-card__media img { transform: scale(1.04); }

/* The number sits on the image in both worlds, in the same corner. */
.weirdo-card__number {
	position: absolute;
	top: var(--space-2xs);
	left: var(--space-2xs);
	padding: 2px var(--space-2xs);
	background: color-mix(in srgb, var(--paper) 82%, transparent);
	border-radius: var(--radius-sm);
	backdrop-filter: blur(4px);
}

.weirdo-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding: var(--space-s);
	flex: 1;
}

.weirdo-card__name {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	letter-spacing: var(--display-spacing);
	text-transform: var(--display-case);
	font-size: var(--text-base);
	line-height: var(--leading-snug);
	margin: 0;
}

.weirdo-card__meta {
	font-size: var(--text-xs);
	color: var(--ink-soft);
	margin: 0;
}

.weirdo-card__price {
	margin-top: auto;
	padding-top: var(--space-2xs);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--text-s);
	font-weight: 600;
}

.weirdo-card__price del { color: var(--ink-faint); font-weight: 400; }


/* --------------------------------------------------------------------------
   THE PENDING RECORD
   Same component, empty. An empty specimen record is more interesting than
   no record. This is the honest version — not pretending to have stock,
   showing a collection in progress. That is a reason to come back.
   -------------------------------------------------------------------------- */

.weirdo-card--pending {
	background: var(--paper-sunk);
	border-style: dashed;
	box-shadow: none;
	cursor: default;
}

.weirdo-card--pending:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--rule);
}

.weirdo-card--pending .weirdo-card__media {
	display: grid;
	place-items: center;
	cursor: default;
}

.weirdo-card--pending .weirdo-card__silhouette {
	width: 55%;
	color: var(--ink-faint);
	opacity: 0.35;
}

/* The specimen sheet. Monospaced, aligned, deliberately dry. */
.weirdo-record {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.9;
	color: var(--ink-soft);
	margin: 0;
}

.weirdo-record__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--space-2xs);
}

.weirdo-record__key {
	color: var(--ink-faint);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.6875rem;
}

.weirdo-record__val { color: var(--ink); }

/* Redaction. A real block, not a grey word. */
.weirdo-redacted {
	display: inline-block;
	background: currentColor;
	color: var(--ink-faint);
	border-radius: 1px;
	vertical-align: middle;
	height: 0.75em;
	width: 5.5em;
}
.weirdo-redacted--short { width: 3em; }
.weirdo-redacted--long  { width: 8em; }

.weirdo-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.6875rem;
	color: var(--pending);
}

.weirdo-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: currentColor;
	flex: none;
}

.weirdo-status--live { color: var(--ok); }
.weirdo-status--gone { color: var(--ink-faint); }


/* --------------------------------------------------------------------------
   THE TWO DOORS
   Home page. Each door previews its own palette, so the split is obvious
   before you click.
   -------------------------------------------------------------------------- */

.weirdo-doors {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-s);
}

@media (min-width: 40em) {
	.weirdo-doors { grid-template-columns: 1fr 1fr; }
}

/*
 * Three across, not four.
 *
 * Six doors over four columns leaves a widowed row of two, which reads as
 * something missing rather than as a deliberate stop. Three divides six
 * exactly, and it buys every door a third more width, which matters because
 * the photograph is the argument on this page and a wider frame shows more
 * of it.
 *
 * If a seventh range ever appears this wants revisiting, because seven over
 * three has the same widow problem four had.
 */
@media (min-width: 68em) {
	.weirdo-doors { grid-template-columns: repeat(3, 1fr); }
}


.weirdo-door {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-2xs);
	min-height: clamp(20rem, 42vh, 30rem);
	padding: var(--space-l) var(--space-m) var(--space-m);
	background: var(--paper);
	color: var(--ink);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
	overflow: hidden;
	transition:
		transform var(--dur-mid) var(--motion),
		box-shadow var(--dur-mid) var(--motion);
}

.weirdo-door:hover {
	color: var(--ink);
	transform: translateY(var(--lift)) scale(var(--lift-scale));
	box-shadow: var(--shadow-lift);
}

/* One typeface across all six doors.
 *
 * Each skin carries its own --font-display, which is right on the range page
 * where that world is the only thing on screen. Side by side in a grid it read
 * as six unrelated sites. The doors are a set, so they get the brand face and
 * the worlds differentiate on colour and image instead.
 *
 * Titles are single words (the "The" is dropped in weirdo_doors()), so they
 * sit on one line at every width and the grid rows stay square. */
.weirdo-door__title {
	font-family: "Weirdo Display", "Poppins", ui-rounded, system-ui, sans-serif;
	font-weight: 700;
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: var(--text-l);
	line-height: 1.05;
	white-space: nowrap;
	margin: 0;
}

/* Each door carries a wash in its own accent, so the five palettes are
   legible from across the page before you read a single word. */
.weirdo-door::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		140% 70% at 50% 0%,
		color-mix(in srgb, var(--accent) 20%, transparent),
		transparent 62%
	);
}
.weirdo-door > * { position: relative; z-index: 1; }

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

.weirdo-door__go {
	color: var(--accent);
	font-size: var(--text-s);
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   EMAIL CAPTURE
   The site has one job. Every design decision is judged against:
   does this get an email address?
   -------------------------------------------------------------------------- */

.weirdo-capture {
	background: var(--paper-sunk);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius);
	padding: var(--space-l);
}

.weirdo-capture--bare {
	background: transparent;
	border: 0;
	padding: 0;
}

.weirdo-capture__title {
	font-size: var(--text-m);
	margin: 0 0 var(--space-3xs);
}

.weirdo-capture__line {
	color: var(--ink-soft);
	font-size: var(--text-s);
	margin: 0 0 var(--space-s);
}

.weirdo-capture__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

.weirdo-capture__form input[type="email"] {
	flex: 1 1 14rem;
	min-height: var(--tap-min);
	padding: 0 var(--space-s);
	background: var(--paper);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--text-base); /* 16px minimum or iOS zooms on focus */
}

.weirdo-capture__form input::placeholder { color: var(--ink-faint); }

.weirdo-capture__form input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: transparent;
}

.weirdo-capture__fine {
	font-size: var(--text-xs);
	color: var(--ink-faint);
	margin: var(--space-2xs) 0 0;
}

/* Honeypot. Off-screen, never display:none — bots skip hidden fields. */
.weirdo-capture__hp {
	position: absolute;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}

.weirdo-capture__msg {
	margin: var(--space-2xs) 0 0;
	font-size: var(--text-s);
}
.weirdo-capture__msg[data-state="ok"]  { color: var(--ok); }
.weirdo-capture__msg[data-state="err"] { color: var(--warn); }


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.weirdo-hero {
	padding-block: clamp(4rem, 13vh, 9rem) clamp(2.5rem, 7vh, 5rem);
}

.weirdo-hero__title {
	font-size: var(--text-2xl);
	letter-spacing: -0.035em;
	margin: 0 0 var(--space-m);
	max-width: 15ch;
}

.weirdo-hero__line {
	font-size: var(--text-m);
	color: var(--ink-soft);
	max-width: 48ch;
	margin: 0 0 var(--space-l);
}

/*
 * The hero wash used to be a pseudo-element here, and it was a bug.
 *
 * .weirdo-hero is the CONTAINER — max-width 1248px, centred. The pseudo-
 * element's box was only 10% wider than that, but the radial inside it was
 * 60rem across and still bright when it reached the box edge. The browser
 * clipped it mid-gradient and painted a hard vertical line down the page at
 * the container's left edge, roughly an inch in from the logo.
 *
 * Invisible while every hero was dark-on-dark. Obvious the moment there was
 * a photograph behind it.
 *
 * Removed rather than patched, because the glow is redundant. Both band
 * variants already carry an accent wash — .weirdo-band--lit::before, and the
 * first layer of the .weirdo-band--photo background stack — and both are
 * full-bleed, so they have no box to clip against and cannot produce an edge.
 *
 * The rule worth keeping: atmosphere belongs on a full-width band, never on
 * a pseudo-element attached to a max-width container.
 */

.weirdo-hero { position: relative; }


/* --------------------------------------------------------------------------
   FOOTER — never varies
   -------------------------------------------------------------------------- */

.weirdo-footer {
	margin-top: var(--space-3xl);
	padding-block: var(--space-xl);
	border-top: var(--border) solid var(--rule);
	font-size: var(--text-s);
	color: var(--ink-soft);
}

.weirdo-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--space-l);
}

.weirdo-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.weirdo-footer li + li { margin-top: var(--space-3xs); }
.weirdo-footer a { text-decoration: none; }
.weirdo-footer a:hover { text-decoration: underline; }

.weirdo-footer__legal {
	margin-top: var(--space-l);
	padding-top: var(--space-s);
	border-top: var(--border) solid var(--rule);
	font-size: var(--text-xs);
	color: var(--ink-faint);
}


/* --------------------------------------------------------------------------
   MARKETS CALENDAR — /found-us
   -------------------------------------------------------------------------- */

.weirdo-markets { list-style: none; margin: 0; padding: 0; }

.weirdo-market {
	display: grid;
	grid-template-columns: 7rem 1fr auto;
	gap: var(--space-s);
	align-items: baseline;
	padding-block: var(--space-s);
	border-bottom: var(--border) solid var(--rule);
}

@media (max-width: 40em) {
	.weirdo-market { grid-template-columns: 1fr; gap: var(--space-3xs); }
}

.weirdo-market__date {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.weirdo-market__name { font-weight: 600; }
.weirdo-market__where { color: var(--ink-soft); font-size: var(--text-s); }


/* --------------------------------------------------------------------------
   EMPTY STATES
   -------------------------------------------------------------------------- */

.weirdo-empty {
	padding: var(--space-2xl) var(--space-m);
	text-align: center;
	border: var(--border) dashed var(--rule);
	border-radius: var(--radius);
	color: var(--ink-soft);
}

.weirdo-empty p { margin-inline: auto; }


/* --------------------------------------------------------------------------
   THE GATE
   The Unlisted. Deliberately the emptiest screen on the site: no navigation
   into it, no product imagery, nothing to look at except a box. It should
   feel like a door rather than a page.
   -------------------------------------------------------------------------- */

.weirdo-gate {
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--space-2xl) var(--space-m);
	text-align: center;
}

.weirdo-gate__title {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	text-transform: var(--display-case);
	letter-spacing: -0.02em;
	font-size: var(--text-l);
	margin: 0 0 var(--space-s);
}

.weirdo-gate__line {
	color: var(--ink-soft);
	margin: 0 auto var(--space-l);
	max-width: 42ch;
}

.weirdo-gate__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
}

.weirdo-gate__form input {
	flex: 1 1 12rem;
	max-width: 16rem;
	min-height: var(--tap-min);
	padding: 0 var(--space-s);
	background: var(--paper-sunk);
	border: var(--border) solid var(--rule);
	border-radius: var(--radius);
	color: var(--ink);

	/* Monospaced and letterspaced, because this is a code being copied off a
	   card and the characters need to be distinguishable one at a time. */
	font-family: var(--font-mono);
	font-size: 1.0625rem;
	letter-spacing: 0.28em;
	text-align: center;
	text-transform: uppercase;
}

.weirdo-gate__form input::placeholder {
	color: var(--ink-faint);
	letter-spacing: 0.28em;
}

.weirdo-gate__form input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: transparent;
}

.weirdo-gate__msg {
	margin: var(--space-s) 0 0;
	font-size: var(--text-s);
	color: var(--warn);
}

.weirdo-gate__fine {
	margin: var(--space-l) 0 0;
	font-size: var(--text-xs);
	color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   CONTACT FORM
   The one page someone reaches when something has already gone wrong, so it
   is a plain POST form with no JavaScript in the path. Styling matches the
   product variation controls: a visible border, a lifted ground, and a field
   that looks pressable before it looks tidy.
   -------------------------------------------------------------------------- */

.weirdo-contact { max-width: 34rem; }

.weirdo-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs, 0.35rem);
	margin-block: var(--space-s);
}

.weirdo-field label {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-soft);
}

.weirdo-field__opt,
.weirdo-field__hint {
	text-transform: none;
	letter-spacing: 0;
	color: color-mix(in srgb, var(--ink-soft) 75%, var(--paper));
}

.weirdo-field__hint { font-size: var(--text-xs); }

.weirdo-field input,
.weirdo-field select,
.weirdo-field textarea {
	color-scheme: dark;
	width: 100%;
	min-height: var(--tap-min);
	padding: var(--space-2xs) var(--space-xs);
	background-color: color-mix(in srgb, var(--paper) 86%, var(--ink));
	color: var(--ink);
	border: var(--border) solid color-mix(in srgb, var(--ink-soft) 55%, var(--paper));
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--text-base);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.weirdo-field textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }

.weirdo-field input:hover,
.weirdo-field select:hover,
.weirdo-field textarea:hover {
	border-color: color-mix(in srgb, var(--ink-soft) 85%, var(--paper));
}

.weirdo-field input:focus-visible,
.weirdo-field select:focus-visible,
.weirdo-field textarea:focus-visible {
	border-color: var(--accent);
	outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
	outline-offset: 2px;
}

/* Feedback. Both states are bordered rather than filled, so neither shouts. */
.weirdo-contact__ok,
.weirdo-contact__err {
	padding: var(--space-s);
	border-radius: var(--radius-sm);
	border: var(--border) solid;
}

.weirdo-contact__ok {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.weirdo-contact__err {
	border-color: color-mix(in srgb, #E23E2C 70%, var(--paper));
	background: color-mix(in srgb, #E23E2C 10%, transparent);
}


/* Door cards with a photograph.
   The card's copy sits at the bottom, so the scrim is bottom-weighted rather
   than the left-weighted one the heroes use. Same principle either way: the
   picture is second, the words have to stay readable. */
.weirdo-door--photo {
	background-color: var(--paper);
	background-repeat: no-repeat;
	background-size: cover, cover;
	background-position: center, center;
	background-image:
		linear-gradient(
			180deg,
			rgba(6, 8, 12, 0.10) 0%,
			rgba(6, 8, 12, 0.55) 46%,
			rgba(6, 8, 12, 0.92) 78%,
			var(--paper) 100%
		),
		var(--door-image);
}

/* The existing radial wash would sit on top of the photograph and grey it
   out, so it steps aside where there is an image. */
.weirdo-door--photo::before { opacity: 0.35; }

/* Featured row.
 *
 * Five across on a wide screen so the row reads as a shelf rather than as a
 * second grid competing with the range pages. The cards are the same
 * component, so they inherit whatever skin the page is wearing.
 */
.weirdo-grid--featured {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48em) {
	.weirdo-grid--featured { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 72em) {
	.weirdo-grid--featured { grid-template-columns: repeat(5, 1fr); }
}