/*
Theme Name: Shitty Games
Theme URI: https://shittygames.org
Description: Standalone classic theme for Shitty Games — a toybox of hand-authored
  canvas toys plus the About page that sells the embed system. Arcade chrome
  around a neutral toy frame ("loud lobby, neutral stage"), because the flagship
  toys are perceptual instruments that a saturated surround actively breaks.
Author: SigWeaver
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: shitty-games
*/

/* ===========================================================================
   SHITTY GAMES — loud lobby, neutral stage.

   The design decision, and the one rule that governs every choice below:

     The LOBBY is the arcade. Masthead, nav, footer, gallery cards and the 404
     carry the cabinet: near-black ground, phosphor green, display type,
     scanlines, bezel geometry.

     The STAGE is neutral. The toy frame and everything within roughly a card's
     width of it is near-white, hairline-ruled, monospace-labelled. No saturated
     colour touches the frame, no texture sits behind it, nothing shifts the
     viewer's adaptation state before they start.

   That is not a compromise, it is the constraint. Both flagship toys
   (afterimage painter, isoluminant Ishihara plate) are perceptual instruments.
   Saturated colour adjacent to the frame, a patterned ground, or a bright
   surround measurably wrecks them. `meta.json` carries `background: neutral`
   for exactly this reason — see claude/canvas-apps.md.

   Sections
     0  tokens
     1  base + skip link
     2  lobby: marquee, nav
     3  stage: the sheet
     4  prose
     5  cards (cabinet + quiet variants)
     6  the toy frame and its specimen strip
     7  sigweaver-publisher markup
     8  404
     9  footer
    10  responsive
    11  plugin token aliases  <-- keep in sync with the palette
   =========================================================================== */

/* -- 0 --------------------------------------------------------------- tokens */

:root {
	color-scheme: light;

	/* Lobby — the cabinet. */
	--cab:       #0B0E0C;
	--cab-2:     #141A17;
	--cab-3:     #1E2722;
	--bezel:     #2C3630;
	--phos:      #47F0A2;
	--phos-dim:  #1C7A50;
	--mag:       #FF3E8F;
	--amber:     #FFC24B;
	--bone:      #E7EFE9;
	--bone-mut:  #8FA096;

	/* Stage — where the instruments live. Deliberately unsaturated. */
	--stage:     #F6F6F4;
	--sheet:     #FFFFFF;
	--rule:      #D9DAD5;
	--rule-2:    #ECEDE9;
	--ink:       #15181B;
	--ink-2:     #3A4046;
	--mut:       #6C7178;

	/* Type. */
	--f-display: "Silkscreen", "Courier New", ui-monospace, monospace;
	--f-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Measure and rhythm. */
	--measure:   680px;
	--wide:      1180px;

	/* The quiet zone around a running toy. Nothing loud inside this. */
	--apron:     clamp(2.5rem, 7vw, 6rem);

	--r:         3px;
}

/* -- 1 ----------------------------------------------------------------- base */

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

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

body {
	margin: 0;
	background: var(--cab);
	color: var(--ink);
	font: 400 17px/1.65 var(--f-body);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

a { color: inherit; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 99;
	background: var(--phos);
	color: var(--cab);
	font: 700 13px/1 var(--f-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 12px 16px;
	text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--mag);
	outline-offset: 2px;
}
/* On the cabinet a magenta ring is invisible; use phosphor. */
.sg-lobby :where(a, button, input):focus-visible { outline-color: var(--phos); }

.sg-sr {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sg-wrap {
	width: 100%;
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* -- 2 ---------------------------------------------------------------- lobby */

.sg-lobby {
	background: var(--cab);
	color: var(--bone);
	position: relative;
}

/* The marquee: a lit cabinet header. The scanline overlay lives HERE and
   nowhere else — it must never sit behind or beside a toy. */
.sg-marquee {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 180% at 50% -60%, rgba(71, 240, 162, .16) 0%, rgba(71, 240, 162, 0) 62%),
		linear-gradient(180deg, var(--cab-3) 0%, var(--cab-2) 46%, var(--cab) 100%);
	border-bottom: 1px solid var(--bezel);
	padding-block: clamp(1.75rem, 5vw, 3.25rem) clamp(1.25rem, 3.5vw, 2rem);
}
.sg-marquee::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		180deg,
		rgba(0, 0, 0, .28) 0 1px,
		rgba(0, 0, 0, 0) 1px 3px
	);
	opacity: .55;
	mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: no-preference) {
	.sg-marquee::after { animation: sg-roll 9s linear infinite; }
}
@keyframes sg-roll { from { background-position: 0 0; } to { background-position: 0 60px; } }

.sg-wordmark {
	margin: 0;
	font: 400 clamp(1.55rem, 6.4vw, 3.4rem)/1.08 var(--f-display);
	letter-spacing: .01em;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}
.sg-wordmark a {
	color: var(--phos);
	text-decoration: none;
	text-shadow:
		0 0 1px rgba(71, 240, 162, .9),
		0 0 14px rgba(71, 240, 162, .35),
		0 0 42px rgba(71, 240, 162, .14);
	display: inline-block;
}
.sg-wordmark a em {
	font-style: normal;
	color: var(--mag);
	text-shadow:
		0 0 1px rgba(255, 62, 143, .9),
		0 0 14px rgba(255, 62, 143, .35);
}
.sg-wordmark a:hover { filter: brightness(1.12); }

.sg-tagline {
	margin: .85rem 0 0;
	max-width: 46ch;
	color: var(--bone-mut);
	font: 400 13px/1.55 var(--f-mono);
	letter-spacing: .04em;
	position: relative;
	z-index: 1;
}

/* Coin slots. Cheap cabinet geometry, purely decorative. */
.sg-slots {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 6px;
	margin-top: 1.15rem;
}
.sg-slots i {
	display: block;
	width: 22px;
	height: 4px;
	background: var(--bezel);
	border-radius: 2px;
}
.sg-slots i:first-child { background: var(--phos-dim); width: 40px; }

/* Nav strip — the bezel below the marquee. */
.sg-nav {
	background: var(--cab-2);
	border-bottom: 1px solid var(--bezel);
}
.sg-nav .sg-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(.75rem, 2.5vw, 1.75rem);
	min-height: 46px;
}
.sg-nav a {
	color: var(--bone-mut);
	text-decoration: none;
	font: 500 12px/1 var(--f-mono);
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: 14px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.sg-nav a:hover,
.sg-nav a:focus-visible,
.sg-nav .current-menu-item > a,
.sg-nav a[aria-current="page"] {
	color: var(--phos);
	border-bottom-color: var(--phos);
}
.sg-nav ul { display: contents; margin: 0; padding: 0; list-style: none; }
.sg-nav li { display: block; }

/* -- 3 ---------------------------------------------------------------- stage */

.sg-stage {
	background: var(--stage);
	color: var(--ink);
	min-height: 50vh;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

/* The neutral sheet a toy sits on. No texture, no colour, no gradient. */
.sg-stage--neutral { background: var(--stage); }

.sg-eyebrow {
	font: 500 11px/1 var(--f-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mut);
	margin: 0 0 .75rem;
}

.sg-page-title {
	margin: 0 0 .35rem;
	font: 400 clamp(1.35rem, 3.6vw, 2.05rem)/1.15 var(--f-display);
	text-transform: uppercase;
	letter-spacing: .005em;
	color: var(--ink);
}

.sg-lede {
	margin: 0 0 2rem;
	max-width: 62ch;
	color: var(--ink-2);
	font-size: 1.06rem;
}

.sg-hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: clamp(2rem, 5vw, 3.25rem) 0;
}

/* -- 4 ---------------------------------------------------------------- prose */

.sg-article { max-width: var(--measure); }
.sg-article.is-wide { max-width: var(--wide); }

.sg-title {
	margin: 0 0 .6rem;
	font: 600 clamp(1.6rem, 4.4vw, 2.5rem)/1.18 var(--f-body);
	letter-spacing: -.015em;
	color: var(--ink);
}

.sg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1rem;
	margin: 0 0 1.75rem;
	font: 400 12px/1.4 var(--f-mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mut);
}
.sg-meta a { color: var(--mut); text-decoration-color: var(--rule); }
.sg-meta a:hover { color: var(--ink); }

.sg-prose { font-size: 1.0625rem; }
.sg-prose > * { max-width: var(--measure); }
.sg-prose > .sg-full,
.sg-prose > figure.sw-canvasapp,
.sg-prose > .alignwide,
.sg-prose > .alignfull { max-width: none; }

.sg-prose p { margin: 0 0 1.15em; }
.sg-prose h2 {
	margin: 2.2em 0 .55em;
	font: 400 clamp(1.05rem, 2.6vw, 1.3rem)/1.25 var(--f-display);
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--ink);
}
.sg-prose h3 {
	margin: 1.9em 0 .5em;
	font: 600 1.06rem/1.3 var(--f-body);
	letter-spacing: -.01em;
}
.sg-prose ul, .sg-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.sg-prose li { margin: 0 0 .4em; }
.sg-prose li::marker { color: var(--mut); }
.sg-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--phos-dim); text-underline-offset: 3px; }
.sg-prose a:hover { text-decoration-color: var(--ink); }
.sg-prose blockquote {
	margin: 1.6em 0;
	padding: .1em 0 .1em 1.15em;
	border-left: 2px solid var(--rule);
	color: var(--ink-2);
	font-style: italic;
}
.sg-prose code, .sg-prose kbd {
	font: 400 .88em/1.4 var(--f-mono);
	background: var(--rule-2);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	padding: .1em .35em;
}
.sg-prose pre {
	overflow-x: auto;
	background: var(--cab);
	color: var(--bone);
	border-radius: var(--r);
	padding: 1rem 1.15rem;
	font: 400 .86rem/1.55 var(--f-mono);
}
.sg-prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.sg-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sg-prose th, .sg-prose td { border-bottom: 1px solid var(--rule); padding: .55em .6em; text-align: left; }
.sg-prose img { border-radius: var(--r); }

.sg-tablewrap { overflow-x: auto; }

/* -- 5 ---------------------------------------------------------------- cards */

.sg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 258px), 1fr));
	gap: clamp(.9rem, 2.2vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Grid children default to min-width:auto — a fixed-width child (an ad slot, a
   wide iframe) then blows the track out and the page scrolls sideways at 375. */
.sg-cards > * { min-width: 0; }

/* Cabinet card — the lobby variant. Used on the gallery and the index. */
.sg-card {
	display: flex;
	flex-direction: column;
	background: var(--cab-2);
	color: var(--bone);
	border: 1px solid var(--bezel);
	border-radius: var(--r);
	overflow: hidden;
	position: relative;
	transition: border-color .16s ease, transform .16s ease;
}
.sg-card:hover { border-color: var(--phos-dim); transform: translateY(-2px); }
.sg-card:focus-within { border-color: var(--phos); }

.sg-card-shot {
	display: block;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(71, 240, 162, .10) 0%, rgba(71, 240, 162, 0) 70%),
		var(--cab-3);
	border-bottom: 1px solid var(--bezel);
	overflow: hidden;
}
.sg-card-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No artwork yet — which is the normal state for a toy until someone grabs a
   still. A full 16:10 void per card is a lot of dead screen (four of them stack
   to most of a phone), so an empty screen collapses to a bezel strip that still
   reads as a dark cabinet display. */
.sg-card-shot:empty {
	aspect-ratio: 16 / 3;
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, .30) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
		linear-gradient(180deg, rgba(71, 240, 162, .12) 0%, rgba(71, 240, 162, 0) 75%),
		var(--cab-3);
}

.sg-card-body { padding: .95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.sg-card-kicker {
	font: 500 10px/1 var(--f-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--phos-dim);
}
.sg-card-title {
	margin: 0;
	font: 400 .95rem/1.34 var(--f-display);
	text-transform: uppercase;
	letter-spacing: .005em;
}
.sg-card-title a { color: var(--phos); text-decoration: none; }
.sg-card-title a::after { content: ""; position: absolute; inset: 0; }
.sg-card:hover .sg-card-title a { color: #6BF7B6; }
.sg-card-blurb { margin: 0; color: var(--bone-mut); font-size: .9rem; line-height: 1.5; }
.sg-card-tags {
	margin: auto 0 0;
	padding-top: .35rem;
	font: 400 10px/1.5 var(--f-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bone-mut);
}

/* Quiet card — the stage variant. Used anywhere within an apron of a toy, so
   a "more toys" strip below a running instrument stays unsaturated. */
.sg-cards--quiet .sg-card {
	background: var(--sheet);
	color: var(--ink);
	border-color: var(--rule);
}
.sg-cards--quiet .sg-card:hover { border-color: var(--mut); transform: none; }
.sg-cards--quiet .sg-card-shot,
.sg-cards--quiet .sg-card-shot:empty { background: var(--rule-2); border-bottom-color: var(--rule); }
.sg-cards--quiet .sg-card-kicker { color: var(--mut); }
.sg-cards--quiet .sg-card-title { font-family: var(--f-body); font-weight: 600; text-transform: none; letter-spacing: -.01em; }
.sg-cards--quiet .sg-card-title a { color: var(--ink); }
.sg-cards--quiet .sg-card:hover .sg-card-title a { color: var(--ink); }
.sg-cards--quiet .sg-card-blurb,
.sg-cards--quiet .sg-card-tags { color: var(--mut); }

/* River — the plain listing used by archives and search. */
.sg-river { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.sg-river li { border-top: 1px solid var(--rule); padding: 1.1rem 0; }
.sg-river li:last-child { border-bottom: 1px solid var(--rule); }
.sg-river h2 { margin: 0 0 .3rem; font: 600 1.12rem/1.3 var(--f-body); letter-spacing: -.01em; }
.sg-river h2 a { text-decoration: none; }
.sg-river h2 a:hover { text-decoration: underline; text-decoration-color: var(--phos-dim); text-underline-offset: 3px; }
.sg-river p { margin: 0; color: var(--mut); font-size: .95rem; }
.sg-river .sg-meta { margin: .35rem 0 0; }

.sg-after-river { margin-top: clamp(2rem, 5vw, 3.25rem); }

/* Section chips — categories, read from the DB, never hardcoded. */
.sg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.sg-chip {
	display: inline-block;
	font: 500 11px/1 var(--f-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mut);
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 7px 12px;
	text-decoration: none;
}
.sg-chip:hover { color: var(--ink); border-color: var(--mut); }

/* Pagination. */
.sg-pager { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2.25rem; }
.sg-pager .page-numbers {
	font: 500 12px/1 var(--f-mono);
	letter-spacing: .08em;
	padding: 10px 13px;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	background: var(--sheet);
	color: var(--ink-2);
	text-decoration: none;
}
.sg-pager .page-numbers:hover { border-color: var(--mut); color: var(--ink); }
.sg-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--stage); }

.sg-empty {
	max-width: var(--measure);
	border: 1px dashed var(--rule);
	border-radius: var(--r);
	background: var(--sheet);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	color: var(--mut);
}
.sg-empty p:last-child { margin-bottom: 0; }

/* -- 6 ------------------------------------------------------------ toy frame */

/* Everything in here is the STAGE. Do not add colour, texture or a gradient to
   any rule below this line — the frame's surround is load-bearing for the
   perceptual toys. See claude/canvas-apps.md, `background: neutral`. */

.sg-toy { max-width: var(--wide); margin-inline: auto; }

.sg-toy-head { max-width: var(--measure); margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.sg-toy-head .sg-title { font-size: clamp(1.5rem, 4vw, 2.15rem); }
.sg-toy-head .sg-blurb { margin: .5rem 0 0; color: var(--ink-2); font-size: 1.05rem; }

/* The apron: the quiet band that must exist between the lobby and the machine. */
.sg-apron { height: var(--apron); }

.sg-frame {
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-radius: var(--r);
	padding: clamp(.75rem, 2vw, 1.25rem);
}
.sg-frame > iframe,
.sg-frame > .sw-canvasapp iframe,
.sg-frame .sg-frame-slot {
	display: block;
	width: 100%;
	border: 0;
	background: var(--sheet);
	border-radius: 2px;
}
.sg-frame .sw-canvasapp { margin: 0; }
.sg-frame .sw-canvasapp figcaption { display: none; }

/* Placeholder shown while the canvas platform does not exist yet. */
.sg-frame-slot {
	display: grid;
	place-content: center;
	gap: .5rem;
	text-align: center;
	min-height: clamp(260px, 46vw, 460px);
	border: 1px dashed var(--rule);
	color: var(--mut);
	font: 400 12px/1.6 var(--f-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 1.5rem;
}

/* Specimen strip: title / what to do / how it works. Monospace labels,
   hairline rules, no colour. */
.sg-specimen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0;
	margin-top: -1px;
	border: 1px solid var(--rule);
	border-radius: var(--r);
	background: var(--sheet);
}
.sg-specimen > * { min-width: 0; }
.sg-specimen > div {
	padding: 1rem 1.15rem 1.15rem;
	border-left: 1px solid var(--rule);
}
.sg-specimen > div:first-child { border-left: 0; }
.sg-specimen dt {
	font: 500 10px/1 var(--f-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mut);
	margin: 0 0 .55rem;
}
.sg-specimen dd { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-2); }
.sg-specimen dd:not(:last-child) { margin-bottom: .5rem; }

/* Long-form notes below the instrument, kept an apron clear of the frame. */
.sg-toy-body {
	margin-top: var(--apron);
	max-width: var(--measure);
}

.sg-toy-note {
	max-width: var(--measure);
	margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
	color: var(--mut);
	font: 400 12px/1.6 var(--f-mono);
	letter-spacing: .04em;
}

/* A "more toys" strip is never allowed closer than the apron. */
.sg-toy-more { margin-top: var(--apron); }
.sg-toy-more .sg-eyebrow { margin-bottom: 1rem; }

/* -- 7 --------------------------------------------- sigweaver-publisher markup */

/* SG has no sidecar, so most pipeline shapes never appear here. These cover the
   ones a hand-authored post can still produce, plus the canvas shortcode, which
   is the whole point of the site. */

figure.sw-canvasapp {
	margin: clamp(1.75rem, 4vw, 2.5rem) 0;
	padding: clamp(.6rem, 1.6vw, 1rem);
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-radius: var(--r);
}
figure.sw-canvasapp iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 2px;
	background: var(--sheet);
}
figure.sw-canvasapp > figcaption,
figure.sw-canvasapp .sw-cap {
	margin: .75rem .15rem 0;
	color: var(--mut);
	font: 400 12px/1.55 var(--f-mono);
	letter-spacing: .03em;
}

figure.sw-interstitial {
	margin: 1.9rem 0;
	padding: .6rem;
	background: var(--sheet);
	border: 1px solid var(--rule);
	border-radius: var(--r);
}
figure.sw-interstitial img { display: block; width: 100%; border-radius: 2px; }
.sw-imgwrap { display: contents; }
.sw-cap { display: block; margin: .6rem .15rem .1rem; color: var(--ink-2); font-size: .92rem; font-style: italic; }
.sw-credit,
figure.sw-interstitial figcaption:not(.sw-cap) {
	display: block;
	margin: .15rem;
	color: var(--mut);
	font: 400 11px/1.4 var(--f-mono);
	letter-spacing: .04em;
}

/* -- 8 ------------------------------------------------------------------ 404 */

/* The 404 is pure lobby — nothing perceptual is happening on it. */
.sg-404 {
	background: var(--cab);
	color: var(--bone);
	padding-block: clamp(3.5rem, 12vw, 8rem);
	position: relative;
	overflow: hidden;
}
.sg-404::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 1px, rgba(0,0,0,0) 1px 3px);
	opacity: .5;
}
.sg-404 .sg-wrap { position: relative; z-index: 1; max-width: 760px; }
.sg-404 h1 {
	margin: 0 0 1rem;
	font: 400 clamp(1.9rem, 8vw, 3.6rem)/1.1 var(--f-display);
	text-transform: uppercase;
	color: var(--mag);
	text-shadow: 0 0 18px rgba(255, 62, 143, .3);
}
.sg-404 p { margin: 0 0 1.15rem; color: var(--bone-mut); max-width: 52ch; }
.sg-404 .sg-insert {
	font: 400 clamp(.8rem, 2.6vw, 1rem)/1 var(--f-display);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--phos);
}
@media (prefers-reduced-motion: no-preference) {
	.sg-404 .sg-insert { animation: sg-blink 1.4s steps(1) infinite; }
}
@keyframes sg-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }

.sg-404 .sg-btn {
	display: inline-block;
	margin-top: 1.5rem;
	font: 500 12px/1 var(--f-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cab);
	background: var(--phos);
	border: 0;
	border-radius: var(--r);
	padding: 13px 18px;
	text-decoration: none;
}
.sg-404 .sg-btn:hover { background: #6BF7B6; }

.sg-404 .search-form { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.75rem; }
.sg-404 .search-form label { flex: 1 1 200px; min-width: 0; }
.sg-404 .search-field {
	width: 100%;
	background: var(--cab-2);
	border: 1px solid var(--bezel);
	border-radius: var(--r);
	color: var(--bone);
	font: 400 14px/1 var(--f-mono);
	padding: 12px 13px;
}
.sg-404 .search-submit {
	background: var(--bezel);
	color: var(--bone);
	border: 0;
	border-radius: var(--r);
	font: 500 12px/1 var(--f-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 13px 16px;
	cursor: pointer;
}

/* -- 9 --------------------------------------------------------------- footer */

.sg-foot {
	background: var(--cab);
	color: var(--bone-mut);
	border-top: 1px solid var(--bezel);
	padding-block: clamp(2rem, 5vw, 3rem);
}
.sg-foot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
}
.sg-foot-grid > * { min-width: 0; }
.sg-foot h2 {
	margin: 0 0 .75rem;
	font: 500 10px/1 var(--f-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--phos-dim);
}
.sg-foot ul { margin: 0; padding: 0; list-style: none; }
.sg-foot li { margin: 0 0 .45rem; }
.sg-foot a { color: var(--bone-mut); text-decoration: none; font: 400 13px/1.5 var(--f-mono); }
.sg-foot a:hover { color: var(--phos); }
.sg-foot-mark {
	font: 400 1.05rem/1.2 var(--f-display);
	text-transform: uppercase;
	color: var(--bone);
	margin: 0 0 .55rem;
}
.sg-foot-note { margin: 0; font: 400 12px/1.6 var(--f-mono); color: #5E6B63; }
.sg-colophon {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
	padding-top: 1.15rem;
	border-top: 1px solid var(--bezel);
	font: 400 11px/1.6 var(--f-mono);
	letter-spacing: .05em;
	color: #5E6B63;
}

/* -- 10 --------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.sg-specimen > div { border-left: 0; border-top: 1px solid var(--rule); }
	.sg-specimen > div:first-child { border-top: 0; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	:root { --apron: 2.25rem; }
	.sg-nav .sg-wrap { gap: 1rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
	.sg-nav .sg-wrap::-webkit-scrollbar { display: none; }
	.sg-cards { grid-template-columns: 1fr; }
	.sg-slots { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* -- 11 ----------------------------------------------- plugin token aliases */

/* sigweaver-publisher injects front-end CSS on wp_head that reads the retired
   child theme's token names. `article li::marker{color:var(--dw-ink,#f1f3e8)}`
   is unconditional, and that default is near-white — on this theme's white
   stage it makes every list bullet vanish. Alias, don't fight it.
   KEEP IN SYNC with section 0 if the palette moves. */
:root {
	--dw-ink: #15181B;
	--dw-red: #47F0A2;
	--dw-red-bright: #6BF7B6;
	--headFont: "Silkscreen", "Courier New", monospace;
}