/* THUG2 port notes. World Destruction Tour: the in-game menus' navy boxes and light-blue rules, the red/yellow "2"
   sticker, the Wheel of Looogie's purple/yellow/orange, spray paint, stickers and tape.
   Readability first: body text and code sit on flat dark navy, the decoration stays at the edges.
   Art in /assets/thug2/ comes from THUG2's own data (loading screens, menu sprites, tags). */

:root {
	--bg: #0b1122;
	--bg-2: #0f1830;
	--panel: #131e38;
	--panel-2: #1a2848;
	--line: #2b3d63;
	--edge: #6cb4e4;          /* the menus' light-blue rules and box borders */
	--text: #edf1f7;
	--muted: #a9b5cb;
	--dim: #7f8dab;
	--red: #e8322b;           /* the "2" sticker */
	--red-deep: #9e1b1b;
	--orange: #ff7a1a;        /* menu titles: GAME OPTIONS */
	--yellow: #ffd23a;        /* the "2", the highlight bar */
	--yellow-deep: #e2ac0c;
	--purple: #7a3fb0;        /* the Wheel of Looogie */
	--purple-deep: #43206b;
	--sky: #7cc4f2;
	--teal: var(--sky);
	--tape: #ece3cb;          /* masking tape */
	--ink: #111111;
	--add-bg: rgba(91, 196, 104, 0.13);
	--add-mark: #6fd27c;
	--del-bg: rgba(232, 50, 43, 0.16);
	--del-mark: #ff6b5e;
	--hunk-bg: rgba(124, 196, 242, 0.08);
	--outline: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000;
	--font-title: "Anton", "Oswald", Impact, sans-serif;
	--font-ui: "Oswald", "Arial Narrow", sans-serif;
	--font-body: "Barlow", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
	--font-marker: "Permanent Marker", "Comic Sans MS", cursive;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background-color: var(--bg); }

body {
	margin: 0;
	background-color: var(--bg);
	/* a painted wall at night: noise, a purple and a blue spray bloom */
	background-image:
		radial-gradient(1100px 520px at 88% -8%, rgba(122, 63, 176, 0.24), transparent 62%),
		radial-gradient(900px 620px at -12% 108%, rgba(47, 107, 216, 0.16), transparent 62%),
		url("/assets/thug2/noise.svg");
	background-attachment: fixed;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
}

/* a throw-up from the main menu, very faint, in the corner */
body::before {
	content: "";
	position: fixed;
	right: -60px;
	bottom: -20px;
	z-index: -1;
	width: 620px;
	height: 310px;
	background: url("/assets/thug2/graf-piece.png") center / contain no-repeat;
	opacity: 0.045;
	transform: rotate(-8deg);
	pointer-events: none;
}

a { color: #ff9a4d; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--yellow); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

::selection { background: rgba(122, 63, 176, 0.65); color: #fff; }

code {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: #16223f;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 0.05em 0.35em;
	color: #ffd9a8;
	overflow-wrap: anywhere;
	font-variant-ligatures: none;
}

/* ---------- hazard tape: education purposes only (the stripe off the Game Options ramp) ---------- */

.edu-tape {
	position: sticky;
	top: 0;
	z-index: 20;
	overflow: hidden;
	background:
		url("/assets/thug2/noise.svg"),
		repeating-linear-gradient(-45deg, var(--yellow-deep) 0 16px, #121212 16px 32px);
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.edu-tape span {
	display: block;
	width: max-content;
	max-width: calc(100% - 32px);
	margin: 6px auto;
	padding: 1px 14px 2px;
	background: #121212;
	color: var(--yellow);
	font-family: var(--font-title);
	font-size: 15px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	transform: rotate(-0.6deg);
}

/* ---------- layout ---------- */

.layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	max-width: 1280px;
	margin: 0 auto;
	min-height: 100vh;
}

/* ---------- sidebar: a THUG2 menu box (navy, light-blue rule) ---------- */

.side {
	position: sticky;
	top: 40px;
	align-self: start;
	height: calc(100vh - 40px);
	overflow-y: auto;
	padding: 26px 18px 28px 22px;
	border-right: 2px solid var(--edge);
	box-shadow: 2px 0 0 #000, 14px 0 30px -18px rgba(0, 0, 0, 0.9);
	background:
		linear-gradient(180deg, rgba(19, 30, 56, 0.92), rgba(11, 17, 34, 0.88));
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.brand {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-decoration: none;
	color: var(--text);
	margin: 6px 0 26px;
}
.brand:hover { color: var(--text); }

/* the logo: a poster taped to the menu */
.brand img {
	display: block;
	width: 100%;
	max-width: 236px;
	height: auto;
	border: 2px solid #000;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
	transform: rotate(-2deg);
	transition: transform 0.18s ease-out;
}
.brand:hover img { transform: rotate(-0.5deg) scale(1.02); }
.brand:has(img)::before,
.brand:has(img)::after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 54px;
	height: 18px;
	background: var(--tape);
	opacity: 0.82;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 100% 0, 96% 30%, 100% 55%, 95% 80%, 100% 100%, 8% 96%, 3% 100%, 0 70%, 4% 45%);
}
.brand:has(img)::before { top: -8px; left: -14px; transform: rotate(-32deg); }
.brand:has(img)::after { top: -4px; right: 10px; transform: rotate(24deg); }

.brand svg { flex: none; filter: drop-shadow(0 0 8px rgba(232, 50, 43, 0.6)); }

/* the text-only brand: "THUG2" like the sticker, yellow on red */
.brand > span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand b {
	display: block;
	font-family: var(--font-marker);
	font-weight: 400;
	font-size: 40px;
	line-height: 1;
	color: var(--yellow);
	text-shadow: var(--outline), 4px 4px 0 var(--red), 5px 5px 0 #000;
	transform: rotate(-4deg);
}

/* "port notes": a strip of masking tape with marker on it */
.brand small {
	display: inline-block;
	margin-left: 18px;
	padding: 1px 14px 2px;
	background: var(--tape);
	color: var(--ink);
	font-family: var(--font-marker);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	transform: rotate(-3deg);
	clip-path: polygon(0 10%, 3% 0, 97% 4%, 100% 25%, 97% 50%, 100% 78%, 96% 100%, 4% 94%, 0 100%, 2% 60%);
}
.brand:has(img) small { margin: -14px 0 0 auto; position: relative; z-index: 2; }

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

.nav a {
	position: relative;
	isolation: isolate;
	display: block;
	padding: 6px 12px 6px 14px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 16.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #c9d3e6;
	text-decoration: none;
	transition: color 0.15s;
}

/* the yellow highlight pill of THUG2's menus */
.nav a::before {
	content: "";
	position: absolute;
	inset: 2px -4px 2px -2px;
	z-index: -1;
	border: 3px solid #000;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe46a, var(--yellow) 45%, var(--yellow-deep));
	box-shadow: 0 0 0 1px rgba(255, 210, 58, 0.35), 3px 3px 0 rgba(0, 0, 0, 0.55);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: transform 0.18s ease-out, opacity 0.18s;
}

.nav a:hover { color: #fff; }
.nav a:hover::before { transform: scaleX(1); opacity: 0.16; }

.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::before { transform: scaleX(1); opacity: 1; }

.nav .num { color: var(--dim); font-size: 13px; margin-right: 8px; }
.nav a[aria-current="page"] .num { color: #6b4b00; }

/* the story chapters: the wheel's purple */
.nav-head {
	margin: 24px 0 6px 6px;
	font-family: var(--font-marker);
	font-size: 19px;
	line-height: 1.2;
	color: var(--orange);
	text-shadow: 2px 2px 0 #000;
	transform: rotate(-3deg);
	transform-origin: left;
}
.nav-head::after {
	content: "";
	display: block;
	width: 74px;
	height: 4px;
	margin-top: 2px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--purple), var(--yellow));
}
.nav-story .num { color: #b48ae0; }
.nav-story a::before { background: linear-gradient(180deg, #9a5fd2, var(--purple) 50%, var(--purple-deep)); box-shadow: 0 0 0 1px rgba(154, 95, 210, 0.35), 3px 3px 0 rgba(0, 0, 0, 0.55); }
.nav-story a:hover::before { opacity: 0.3; }
.nav-story a[aria-current="page"] { color: #fff; }
.nav-story a[aria-current="page"] .num { color: var(--yellow); }

.side .legal {
	margin-top: 28px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--dim);
}

/* ---------- main ---------- */

main { padding: 36px 48px 80px; min-width: 0; }

.hero {
	position: relative;
	padding: 18px 0 30px;
	margin-bottom: 26px;
}

/* a sprayed rule under the hero: red into orange into yellow */
.hero::after {
	content: "";
	position: absolute;
	left: -6px;
	right: 0;
	bottom: 0;
	height: 7px;
	border-radius: 50% 40% 60% 30%;
	background: linear-gradient(90deg, var(--red), var(--orange) 35%, var(--yellow) 70%, rgba(255, 210, 58, 0));
	box-shadow: 0 0 14px rgba(255, 122, 26, 0.35);
	filter: blur(0.6px);
	transform: rotate(-0.4deg);
}

/* the kicker: a red sticker */
.hero .kicker {
	display: inline-block;
	padding: 2px 12px 1px;
	background: var(--red);
	color: #fff;
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 13px;
	box-shadow: 3px 3px 0 #000;
	transform: rotate(-2deg);
}

h1 {
	margin: 12px 0 14px;
	font-family: var(--font-marker);
	font-weight: 400;
	font-size: clamp(38px, 6vw, 68px);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--orange);
	text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 6px 6px 0 #000, 0 0 34px rgba(255, 122, 26, 0.25);
	transform: rotate(-1.2deg);
	transform-origin: left;
	overflow-wrap: break-word;
}

.hero .lede { max-width: 760px; font-size: 19px; color: #dbe3f0; margin: 0; }

h2 {
	margin: 56px 0 14px;
	font-family: var(--font-marker);
	font-weight: 400;
	font-size: 29px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #f6f8fc;
	text-shadow: 3px 3px 0 #000;
}

/* step numbers: little red/yellow "2" stickers with a white die-cut edge */
h2 .step {
	display: inline-block;
	min-width: 1.5em;
	margin-right: 12px;
	padding: 0 0.28em;
	background: var(--red);
	border: 3px solid #fff;
	color: var(--yellow);
	font-family: var(--font-title);
	font-style: italic;
	text-align: center;
	text-shadow: 2px 2px 0 var(--red-deep), 3px 3px 0 #000;
	box-shadow: 3px 3px 0 #000;
	transform: rotate(-4deg);
}

h3 {
	margin: 30px 0 8px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sky);
}

p, ul, ol { max-width: 820px; }
li { margin: 4px 0; }
li::marker { color: var(--yellow); }
strong, b { font-weight: 600; }
hr { max-width: 820px; height: 6px; margin: 40px 0; border: 0; background: url("/assets/thug2/noise.svg"), repeating-linear-gradient(-45deg, var(--yellow-deep) 0 10px, #121212 10px 20px); opacity: 0.7; }

/* goal / tl;dr: a THUG2 menu box, navy with the light-blue rule and a yellow tab */
.goal {
	position: relative;
	max-width: 820px;
	margin: 24px 0;
	padding: 16px 20px 16px 20px;
	background: linear-gradient(180deg, rgba(26, 40, 72, 0.95), rgba(19, 30, 56, 0.95));
	border: 2px solid var(--edge);
	border-radius: 8px;
	box-shadow: 0 0 0 2px #000, 6px 6px 0 2px rgba(0, 0, 0, 0.55);
}

.goal b {
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 0 12px;
	border: 2px solid #000;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe46a, var(--yellow) 50%, var(--yellow-deep));
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	vertical-align: 1px;
}

/* marker-pen asides: the fun comments */
.aside {
	max-width: 760px;
	margin: 18px 0 10px 6px;
	font-family: var(--font-marker);
	font-size: 17px;
	line-height: 1.5;
	color: var(--yellow);
	transform: rotate(-0.6deg);
}

.aside::before { content: "// "; color: var(--orange); }
.aside code { font-size: 0.8em; }
.aside a { color: #ffb36b; }

/* guide cards: notes taped to the wall */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px 18px;
	margin: 28px 0;
}

.card {
	position: relative;
	display: block;
	padding: 20px 18px 16px;
	background: linear-gradient(170deg, var(--panel-2), var(--panel));
	border: 2px solid var(--line);
	border-radius: 6px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	text-decoration: none;
	color: var(--text);
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.card::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 70px;
	height: 18px;
	margin-left: -35px;
	background: var(--tape);
	opacity: 0.7;
	transform: rotate(var(--tape-tilt, -4deg));
	clip-path: polygon(0 10%, 4% 0, 96% 6%, 100% 30%, 97% 60%, 100% 100%, 5% 92%, 0 100%, 3% 55%);
}
.cards .card:nth-child(3n + 2) { --tape-tilt: 3deg; }
.cards .card:nth-child(3n) { --tape-tilt: -1deg; }

.card:hover { transform: rotate(-1deg) translateY(-2px); border-color: var(--yellow); color: var(--text); }

.card .n {
	font-family: var(--font-title);
	font-style: italic;
	font-size: 40px;
	line-height: 1;
	color: var(--yellow);
	text-shadow: 3px 3px 0 var(--red), 4px 4px 0 #000;
}

.card h4 {
	margin: 8px 0 6px;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- code blocks ---------- */

.code {
	position: relative;
	max-width: 980px;
	margin: 14px 0 24px;
	background: #070b16;
	border: 1px solid var(--line);
	border-top: 3px solid var(--edge);
	border-radius: 4px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
	overflow: hidden;
}

.code .file {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 7px 12px;
	background: #111b33;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: #a3b1cb;
	overflow-wrap: anywhere;
}

.code .file .tag {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0 7px;
	background: var(--red);
	color: #fff;
	box-shadow: 2px 2px 0 #000;
	transform: rotate(-2deg);
}

.code .file .tag.excerpt { background: var(--sky); color: #06121c; }
.code .file .tag.cfg { background: var(--yellow); color: #1a1500; }

.code textarea { display: block; width: 100%; min-height: 80px; background: #070b16; color: var(--text); border: 0; font-family: var(--font-mono); }

/* CodeMirror, re-skinned */
.CodeMirror {
	height: auto;
	background: #070b16;
	color: #e7ebf2;
	font-family: var(--font-mono);
	font-size: 13.5px;
	line-height: 1.55;
	font-variant-ligatures: none;
}

.CodeMirror-scroll { max-height: 640px; }
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { font-variant-ligatures: none; }
.CodeMirror-gutters { background: #070b16; border-right: 1px solid #1b2742; }
.CodeMirror-linenumber { color: #4f5f82; }
.CodeMirror-cursor { display: none !important; }
.CodeMirror-selected { background: rgba(122, 63, 176, 0.4) !important; }

.diff-gutter { width: 22px; }
.diff-mark { font-weight: 700; text-align: center; width: 22px; }
.diff-mark.add { color: var(--add-mark); }
.diff-mark.del { color: var(--del-mark); }

.cm-add-line { background: var(--add-bg); }
.cm-del-line { background: var(--del-bg); }
.cm-del-line .CodeMirror-line span { opacity: 0.8; }
.cm-hunk-line { background: var(--hunk-bg); }
.cm-hunk-line .CodeMirror-line span { color: var(--sky) !important; font-style: italic; }

.cm-s-default .cm-keyword { color: #ff7d66; }
.cm-s-default .cm-def { color: #ffd66e; }
.cm-s-default .cm-variable { color: #e7ebf2; }
.cm-s-default .cm-variable-2 { color: #8fd3f0; }
.cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #7fc8ff; }
.cm-s-default .cm-property { color: #c9b4ff; }
.cm-s-default .cm-operator { color: #e7ebf2; }
.cm-s-default .cm-number { color: #f5a85c; }
.cm-s-default .cm-string { color: #a8dc82; }
.cm-s-default .cm-string-2 { color: #a8dc82; }
.cm-s-default .cm-comment { color: #8290ae; font-style: italic; }
.cm-s-default .cm-meta { color: #ff9fcf; }
.cm-s-default .cm-builtin { color: #7fc8ff; }
.cm-s-default .cm-atom { color: #f5a85c; }
.cm-s-default .cm-attribute { color: #c9b4ff; }
.cm-s-default .cm-header { color: #ff7d66; }
.cm-s-default .cm-tag { color: #ff7d66; }
.cm-s-default .cm-bracket { color: #9aa6bf; }

/* tables */
table {
	border-collapse: collapse;
	margin: 16px 0 24px;
	max-width: 900px;
	width: 100%;
	font-size: 15px;
}

th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
	font-family: var(--font-ui);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	color: var(--yellow);
	background: rgba(19, 30, 56, 0.85);
	border-bottom: 2px solid var(--edge);
}
tr:nth-child(even) td { background: rgba(124, 196, 242, 0.025); }
tr:hover td { background: rgba(255, 210, 58, 0.05); }
.table-wrap { overflow-x: auto; }

figure { margin: 18px 0 26px; max-width: 520px; }
figure img { width: 100%; border: 1px solid var(--line); background: #1a2032; image-rendering: auto; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5); }
figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* prev / next: two menu items */
.pager {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 64px;
	padding-top: 22px;
	border-top: 2px solid var(--edge);
	box-shadow: 0 -2px 0 #000;
}

.pager a {
	position: relative;
	isolation: isolate;
	padding: 6px 18px 7px;
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	font-size: 17px;
	color: var(--text);
}
.pager a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 3px solid #000;
	border-radius: 999px;
	background: var(--panel-2);
	box-shadow: 0 0 0 1px var(--line), 3px 3px 0 rgba(0, 0, 0, 0.55);
	transition: background 0.15s;
}
.pager a:hover { color: var(--ink); }
.pager a:hover::before { background: linear-gradient(180deg, #ffe46a, var(--yellow) 45%, var(--yellow-deep)); }

.pager a span { display: block; font-size: 11.5px; color: var(--dim); letter-spacing: 0.2em; }
.pager a:hover span { color: #6b4b00; }
.pager .next { text-align: right; margin-left: auto; }

footer.legal-foot {
	margin-top: 40px;
	font-size: 13px;
	color: var(--dim);
	max-width: 820px;
}

/* ---------- small screens: the menu goes on top ---------- */

@media (max-width: 900px) {
	.layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.side {
		position: static;
		height: auto;
		padding: 18px 16px 8px;
		border-right: 0;
		border-bottom: 2px solid var(--edge);
		box-shadow: 0 2px 0 #000;
		background: linear-gradient(180deg, rgba(19, 30, 56, 0.92), rgba(11, 17, 34, 0.88));
	}
	.brand { flex-direction: row; align-items: center; width: max-content; max-width: 100%; margin: 4px 0 14px; }
	.brand > span { flex-direction: row; align-items: center; gap: 12px; }
	.brand img { width: 170px; }
	.brand:has(img) small { margin: 0 0 0 4px; }
	.brand:has(img)::after { right: auto; left: 140px; }
	.brand b { font-size: 34px; }
	.brand small { margin-left: 0; }
	.nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 2px 4px 8px; scrollbar-width: thin; }
	.nav a { white-space: nowrap; font-size: 15px; }
	.nav .num { display: none; }
	.nav-story .num { display: inline; margin-right: 4px; }
	.nav-head { margin: 8px 0 2px 4px; font-size: 16px; }
	.nav-head::after { display: none; }
	.side .legal { display: none; }
	main { padding: 24px 16px 60px; }
	h2 { font-size: 24px; }
	.edu-tape span { font-size: 12px; letter-spacing: 0.08em; }
	body::before { width: 360px; height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* paths and hashes in tables stay on one line */
td code { white-space: nowrap; overflow-wrap: normal; }

/* ---------- screenshots: photos taped to the wall ---------- */

figure.shot { position: relative; max-width: 760px; margin: 22px 0 28px; }
figure.shot.wide { max-width: 980px; }
figure.shot a { display: block; line-height: 0; }
figure.shot img {
	width: 100%;
	height: auto;
	border: 2px solid #000;
	border-bottom: 4px solid var(--yellow);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
	transition: transform 0.15s ease;
}
figure.shot a:hover img { transform: rotate(-0.6deg) scale(1.01); }
figure.shot::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: -10px;
	left: 22px;
	width: 84px;
	height: 22px;
	background: var(--tape);
	opacity: 0.75;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transform: rotate(-5deg);
	clip-path: polygon(0 12%, 5% 0, 95% 5%, 100% 30%, 96% 55%, 100% 100%, 4% 92%, 0 100%, 3% 55%);
	pointer-events: none;
}
.gallery figure.shot:nth-child(even)::before { left: auto; right: 22px; transform: rotate(4deg); }
figure.shot.pixel::before { display: none; }

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px 18px;
	max-width: 980px;
	margin: 22px 0 28px;
}
.gallery figure.shot { margin: 0; }

/* ---------- hot spots: numbered pins on a screenshot, explained in the list under it ---------- */

figure.shot.spots .spots-frame { position: relative; }
figure.shot.spots a:hover img { transform: none; }	/* the pins don't tilt with the picture */

.spot {
	position: absolute;
	z-index: 2;
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 3px solid #000;
	border-radius: 50%;
	background: var(--yellow);
	box-shadow: 0 0 0 2px var(--yellow-deep), 3px 3px 0 2px #000;
	color: var(--ink);
	font-family: var(--font-title);
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	cursor: help;
}
.spot::before {
	content: "";
	position: absolute;
	inset: -9px;
	border: 2px solid var(--yellow);
	border-radius: 50%;
	opacity: 0;
	animation: spot-ping 2.2s ease-out infinite;
}
.spot .tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	width: max-content;
	max-width: 240px;
	padding: 6px 10px;
	background: var(--panel);
	border: 2px solid var(--edge);
	border-radius: 6px;
	box-shadow: 0 0 0 2px #000, 4px 4px 0 2px rgba(0, 0, 0, 0.5);
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: left;
	transform: translateX(-50%) rotate(-1.5deg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
/* pins near an edge open their tag inwards */
.spot.l .tip { left: -6px; transform: rotate(-1.5deg); }
.spot.r .tip { left: auto; right: -6px; transform: rotate(-1.5deg); }
.spot:hover .tip, .spot:focus .tip { opacity: 1; }
.spot:focus { outline: 2px solid var(--sky); outline-offset: 4px; }

@keyframes spot-ping {
	0% { transform: scale(0.7); opacity: 0.9; }
	80%, 100% { transform: scale(1.5); opacity: 0; }
}

ol.spot-list {
	max-width: 980px;
	margin: -8px 0 26px;
	padding: 0;
	list-style: none;
	counter-reset: spot;
}
ol.spot-list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 40px;
	counter-increment: spot;
}
ol.spot-list li::before {
	content: counter(spot);
	position: absolute;
	left: 0;
	top: 1px;
	width: 26px;
	height: 26px;
	border: 2px solid #000;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink);
	font-family: var(--font-title);
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}

@media (max-width: 600px) {
	.spot { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-width: 2px; font-size: 11px; line-height: 16px; box-shadow: 2px 2px 0 #000; }
	.spot::before { inset: -5px; }
	figure.shot::before { width: 60px; height: 18px; top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
	.spot::before { animation: none; }
}

/* ---------- videos (YouTube embeds, and clips from /assets/video) ---------- */

figure.video { max-width: 760px; margin: 18px 0 26px; }
figure.video.wide { max-width: 980px; }
figure.video iframe,
figure.video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
	border: 2px solid #000;
	border-bottom: 4px solid var(--red);
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.55);
}

/* ---------- the bail: a trick that didn't land (404, and the stories) ---------- */

.bail {
	position: relative;
	max-width: 760px;
	margin: 10px 0 30px;
	padding: 24px 28px 22px;
	background:
		radial-gradient(500px 220px at 85% 0%, rgba(122, 63, 176, 0.35), transparent 70%),
		linear-gradient(180deg, rgba(26, 40, 72, 0.96), rgba(13, 20, 40, 0.96));
	border: 2px solid var(--edge);
	border-radius: 8px;
	box-shadow: 0 0 0 2px #000, 6px 6px 0 2px rgba(0, 0, 0, 0.55);
	overflow: hidden;
}

.bail-score {
	font-family: var(--font-title);
	font-style: italic;
	font-size: 22px;
	letter-spacing: 0.08em;
	color: var(--sky);
}
.bail-score b { color: #fff; font-weight: 400; }

.bail-code {
	font-family: var(--font-title);
	font-style: italic;
	font-size: clamp(100px, 22vw, 200px);
	line-height: 0.95;
	color: var(--yellow);
	transform: rotate(-4deg);
	text-shadow: 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000, 4px 4px 0 #000, -4px 4px 0 #000, 4px -4px 0 #000, -4px -4px 0 #000, 10px 10px 0 var(--red), 13px 13px 0 #000;
	margin: 6px 0 22px;
	animation: bail-wobble 2.4s ease-in-out infinite;
}

.bail-trick {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text);
}
.bail-trick span {
	display: inline-block;
	padding: 0 10px;
	background: var(--red);
	border: 2px solid #fff;
	color: #fff;
	transform: rotate(-3deg);
	box-shadow: 3px 3px 0 #000;
}

@keyframes bail-wobble {
	0%, 100% { transform: rotate(-4deg); }
	50% { transform: rotate(-1.5deg) translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
	.bail-code { animation: none; }
}

/* ---------- screenshot viewer (site.js) ---------- */

figure.shot a { cursor: zoom-in; }
figure.shot img.lb-lifted { visibility: hidden; }
html.lb-lock { overflow: hidden; }

.lb { position: fixed; inset: 0; z-index: 1000; }
.lb[hidden] { display: none; }

.lb-backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 500px at 80% 0%, rgba(122, 63, 176, 0.25), transparent 60%),
		rgba(6, 10, 22, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.lb.open .lb-backdrop { opacity: 1; }

.lb-img {
	position: fixed;
	transform-origin: 0 0;
	border: 2px solid #000;
	border-bottom: 5px solid var(--yellow);
	box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.6);
	background: var(--bg-2);
	cursor: zoom-out;
	/* a slight overshoot, like landing a trick */
	transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.08), opacity 0.25s ease;
}
.lb.fading .lb-img { opacity: 0; }

.lb-btn,
.lb-caption {
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease;
}
.lb.open .lb-btn,
.lb.open .lb-caption { opacity: 1; transition-delay: 0.15s, 0s, 0s; }

.lb-btn {
	position: fixed;
	border: 3px solid #000;
	border-radius: 999px;
	color: var(--ink);
	background: linear-gradient(180deg, #ffe46a, var(--yellow) 45%, var(--yellow-deep));
	box-shadow: 3px 3px 0 #000;
	font-family: var(--font-title);
	cursor: pointer;
	line-height: 1;
}
.lb-btn:hover { background: linear-gradient(180deg, #ffb06a, var(--orange)); }
.lb-btn:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.lb-close {
	top: 16px;
	right: 18px;
	padding: 7px 16px 8px;
	font-size: 21px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: rotate(-3deg);
}
.lb-close span { font-size: 16px; vertical-align: 2px; margin-right: 4px; }
.lb-close:hover { transform: rotate(2deg) scale(1.06); }

.lb-prev,
.lb-next {
	top: 50%;
	width: 50px;
	height: 50px;
	margin-top: -25px;
	padding: 0 0 4px;
	font-size: 38px;
}
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-prev:hover { transform: translateX(-3px); }
.lb-next:hover { transform: translateX(3px); }

.lb-caption {
	position: fixed;
	left: 50%;
	bottom: 22px;
	max-width: min(900px, calc(100vw - 32px));
	transform: translateX(-50%);
	text-align: center;
	font-family: var(--font-ui);
	font-size: 17px;
	letter-spacing: 0.04em;
	color: var(--text);
	text-shadow: 2px 2px 0 #000;
	pointer-events: none;
}
.lb-count {
	display: inline-block;
	margin-right: 10px;
	padding: 1px 8px;
	background: var(--red);
	border: 2px solid #fff;
	color: #fff;
	box-shadow: 3px 3px 0 #000;
	transform: rotate(-3deg);
	text-shadow: none;
}

@media (max-width: 700px) {
	.lb-close { top: 12px; right: 12px; font-size: 18px; }
	.lb-prev, .lb-next { top: auto; bottom: 16px; margin-top: 0; width: 44px; height: 44px; font-size: 32px; }
	.lb-prev { left: 12px; }
	.lb-next { right: 12px; }
	.lb-caption { bottom: 74px; font-size: 15px; }
}

/* pixel-art sheets (the font palette): shown at their own size, never smoothed */
figure.shot.pixel { max-width: 980px; }
figure.shot.pixel img { width: auto; max-width: 100%; image-rendering: pixelated; }

/* ---------- flow: a file's trip through the tools (scripts.html) ---------- */

.flow-lane {
	margin: 26px 0 8px;
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.flow-lane b { color: var(--yellow); font-weight: 600; }
.flow-lane code { text-transform: none; letter-spacing: 0; }

.flow {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	max-width: 1000px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.flow > li {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin: 0 24px 14px 0;
	padding: 10px 10px 12px;
	background: linear-gradient(160deg, var(--panel-2), var(--panel));
	border: 1px solid var(--line);
	border-top: 4px solid var(--red);
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	transform: skewX(-4deg);
}
.flow > li > * { display: block; transform: skewX(4deg); }
.flow > li:last-child { margin-right: 0; }
.flow > li.edit { border-top-color: var(--yellow); }
.flow > li.file { border-top-color: var(--sky); background: #0a1122; }

/* the arrow to the next stage */
.flow > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -20px;
	width: 14px;
	height: 14px;
	border-top: 4px solid var(--orange);
	border-right: 4px solid var(--orange);
	transform: translateY(-50%) skewX(4deg) rotate(45deg);
}

.flow .n {
	font-family: var(--font-title);
	font-style: italic;
	font-size: 13px;
	color: var(--orange);
	letter-spacing: 0.08em;
}
.flow .verb {
	font-family: var(--font-title);
	font-style: italic;
	font-size: 19px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--text);
}
.flow li.file .verb { font-family: var(--font-mono); font-style: normal; font-size: 14px; color: #ffd9a8; text-transform: none; }
.flow .io { margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; color: #ffd9a8; overflow-wrap: anywhere; }
.flow .what { margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.flow .ms {
	display: inline-block;
	width: max-content;
	margin-top: 8px;
	padding: 0 6px;
	font-family: var(--font-ui);
	font-size: 12px;
	letter-spacing: 0.1em;
	background: var(--red);
	color: #fff;
	box-shadow: 2px 2px 0 #000;
}
.flow li.edit .ms { background: var(--yellow); color: #1a1500; }

@media (max-width: 700px) {
	.flow { flex-direction: column; }
	.flow > li { margin: 0 0 26px; transform: none; }
	.flow > li > * { transform: none; }
	.flow > li:not(:last-child)::after { top: auto; right: auto; bottom: -22px; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

/* ---------- THUG2 title card (index hero): a World Destruction Tour poster on a painted wall ---------- */
/* The wall is a THUG2 loading screen's concrete and yellow spray stripe; the poster is the main menu logo;
   the green tag is the World Destruction Tour logo; the sticker is the menu's "2". */

.wdt-banner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: 22px clamp(20px, 3vw, 36px);
	margin: 24px 0 28px;
	padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px) clamp(26px, 3.5vw, 38px);
	background: #1d3f8f url("/assets/thug2/wall.jpg") center bottom / cover no-repeat;
	border: 2px solid #000;
	border-radius: 6px;
	box-shadow: 0 0 0 2px var(--edge), 0 0 0 4px #000, 0 24px 50px rgba(0, 0, 0, 0.55);
	isolation: isolate;
	overflow: hidden;
	overflow: clip;
}
.wdt-banner::before {
	/* night on the wall, so the copy reads */
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(70% 90% at 30% 40%, transparent 30%, rgba(6, 10, 26, 0.55)),
		linear-gradient(180deg, rgba(6, 10, 26, 0.15), rgba(6, 10, 26, 0.45));
}
.wdt-banner img { display: block; max-width: 100%; height: auto; }

/* the logo, pasted up with two strips of tape */
.wdt-poster {
	position: relative;
	z-index: 1;
	transform: rotate(-2.5deg);
}
.wdt-poster img {
	width: 100%;
	border: 3px solid #000;
	box-shadow: 9px 9px 0 rgba(0, 0, 0, 0.55);
}
.wdt-poster::before,
.wdt-poster::after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 96px;
	height: 26px;
	background: var(--tape);
	opacity: 0.85;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	clip-path: polygon(0 12%, 5% 0, 95% 5%, 100% 30%, 96% 55%, 100% 100%, 4% 92%, 0 100%, 3% 55%);
}
.wdt-poster::before { top: -10px; left: -26px; transform: rotate(-30deg); }
.wdt-poster::after { bottom: -8px; right: -24px; transform: rotate(-28deg); }

.wdt-stamp {
	position: absolute;
	z-index: 3;
	left: 6%;
	bottom: -16px;
	padding: 2px 12px 1px;
	border: 3px solid var(--red);
	border-radius: 4px;
	background: rgba(10, 10, 10, 0.8);
	color: #ff5148;
	font-family: var(--font-title);
	font-size: clamp(14px, 1.6vw, 19px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transform: rotate(-6deg);
	box-shadow: 3px 3px 0 #000;
}

.wdt-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }

.wdt-graf {
	width: min(100%, 230px);
	margin: -18px 0 -10px;
	transform: rotate(5deg);
	filter: drop-shadow(0 0 1px #000) drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.55));
	animation: wdt-bob 6s ease-in-out infinite;
}

/* the copy: a THUG2 menu box */
.wdt-copy {
	width: 100%;
	padding: 12px 16px 14px;
	background: rgba(11, 17, 34, 0.9);
	border: 2px solid var(--edge);
	border-radius: 8px;
	box-shadow: 0 0 0 2px #000, 5px 5px 0 2px rgba(0, 0, 0, 0.5);
	font-size: 15.5px;
	line-height: 1.5;
	color: #e3e9f3;
}
.wdt-copy p { margin: 0 0 12px; max-width: none; }
.wdt-copy b { color: var(--yellow); font-weight: 600; }

/* the call to action: the menu's yellow highlight bar */
.wdt-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 18px 5px 16px;
	border: 3px solid #000;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe46a, var(--yellow) 45%, var(--yellow-deep));
	box-shadow: 3px 3px 0 #000;
	color: var(--ink);
	font-family: var(--font-title);
	font-size: 19px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.15s ease-out;
}
.wdt-cta:hover { color: var(--ink); transform: rotate(-2deg) scale(1.04); }
.wdt-cta svg { flex: none; }

.wdt-sticker {
	position: absolute;
	z-index: 2;
	right: clamp(10px, 2vw, 22px);
	bottom: clamp(10px, 2vw, 18px);
	width: 40px;
	transform: rotate(12deg);
	filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.6));
}

@keyframes wdt-bob { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(2deg) translateY(-4px); } }

@media (max-width: 760px) {
	.wdt-banner { grid-template-columns: minmax(0, 1fr); padding: 26px 18px 22px; }
	.wdt-poster { margin-right: 25%; }
	.wdt-graf { position: absolute; top: calc(-28vw - 30px); right: -12px; width: 29%; max-width: 150px; margin: 0; }
	.wdt-side { margin-top: 18px; }
	.wdt-stamp { bottom: -14px; }
	.wdt-sticker { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.wdt-graf { animation: none; }
}

/* ---------- stories: the "how THUG became THUG2" series (<main class="story">) ---------- */

.story > p:not([class]) { font-size: 18px; line-height: 1.72; max-width: 740px; }
.story > p:not([class]):first-of-type::first-letter {
	float: left;
	margin: 8px 12px 0 -2px;
	font-family: var(--font-marker);
	font-size: 4em;
	line-height: 0.82;
	color: var(--yellow);
	text-shadow: 3px 3px 0 var(--purple), 5px 5px 0 #000;
}
.story > ul, .story > ol { max-width: 740px; }

.story .hero .kicker { background: var(--purple); }
.story h1 {
	color: var(--yellow);
	text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000, 6px 6px 0 var(--purple), 9px 9px 0 #000;
}
.story .hero::after { background: linear-gradient(90deg, var(--purple), var(--red) 30%, var(--orange) 55%, var(--yellow) 78%, rgba(255, 210, 58, 0)); box-shadow: 0 0 14px rgba(122, 63, 176, 0.45); }

/* the chapter: masking tape with marker on it */
.chapter {
	display: inline-block;
	position: relative;
	margin: 4px 14px 6px 0;
	padding: 3px 20px 4px;
	background: url("/assets/thug2/noise.svg"), var(--tape);
	color: var(--ink);
	font-family: var(--font-marker);
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.03em;
	vertical-align: middle;
	transform: rotate(-3deg);
	clip-path: polygon(0 10%, 3% 0, 8% 7%, 14% 0, 97% 4%, 100% 25%, 97% 50%, 100% 78%, 96% 100%, 60% 95%, 4% 100%, 0 82%, 2% 55%);
}
.chapter b, .chapter strong { color: var(--red); font-weight: 400; }

/* the commit stamp: a die-cut sticker with the hash on it */
.commit {
	display: inline-block;
	padding: 1px 9px 1px 4px;
	background: var(--yellow);
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 3px 3px 0 1px #000;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.03em;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	transform: rotate(3deg);
}
.commit::before {
	content: "commit";
	display: inline-block;
	margin-right: 7px;
	padding: 0 5px;
	border-radius: 2px;
	background: var(--red);
	color: #fff;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 10px;
	line-height: 1.6;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: 1px;
}
a.commit:hover { background: #fff; color: var(--ink); }
p .commit, li .commit, td .commit { font-size: 12px; transform: rotate(-2deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 2px 2px 0 1px #000; }
.commit.red { background: var(--red); color: #fff; }
.commit.red::before { background: var(--yellow); color: var(--ink); }
.commit.purple { background: var(--purple); color: #fff; }
.kicker .commit { margin: -2px 0 0 4px; font-size: 12px; letter-spacing: 0.03em; text-transform: none; transform: rotate(4deg); }
.kicker code { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.25); color: #fff; letter-spacing: 0.02em; text-transform: none; }

/* pull quotes: spray-painted purple card with a yellow quote mark */
.quote {
	position: relative;
	max-width: 720px;
	margin: 40px 0 38px 8px;
	padding: 26px 30px 22px 36px;
	background:
		url("/assets/thug2/noise.svg"),
		radial-gradient(420px 200px at 90% 0%, rgba(232, 50, 43, 0.35), transparent 70%),
		linear-gradient(160deg, #6c37a3, var(--purple-deep));
	border: 3px solid #000;
	box-shadow: 7px 7px 0 #000;
	color: #fff;
	font-family: var(--font-marker);
	font-size: clamp(20px, 2.3vw, 25px);
	line-height: 1.38;
	transform: rotate(-1deg);
}
.quote::before {
	content: "\201C";
	position: absolute;
	top: -30px;
	left: -14px;
	font-family: var(--font-title);
	font-size: 104px;
	line-height: 1;
	color: var(--yellow);
	text-shadow: 4px 4px 0 #000;
}
.quote::after {
	content: "";
	position: absolute;
	top: -11px;
	right: 34px;
	width: 80px;
	height: 22px;
	background: var(--tape);
	opacity: 0.8;
	transform: rotate(6deg);
	clip-path: polygon(0 12%, 5% 0, 95% 5%, 100% 30%, 96% 55%, 100% 100%, 4% 92%, 0 100%, 3% 55%);
}
.quote p { max-width: none; margin: 0 0 12px; }
.quote > :last-child { margin-bottom: 0; }
.quote cite {
	display: block;
	margin-top: 12px;
	font-style: normal;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yellow);
}
.quote cite::before { content: "\2014\00a0"; }
blockquote.quote { margin-right: 0; }

@media (max-width: 600px) {
	.quote { margin: 40px 4px 34px 6px; padding: 24px 18px 18px 24px; transform: rotate(-0.6deg); }
	.quote::before { font-size: 84px; top: -24px; left: -8px; }
	.story > p:not([class]) { font-size: 17px; }
}

/* ---------- 404: the Wheel of Looogie, a bail, and the menu back ---------- */

.wheel-404 {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 26px 40px;
	max-width: 980px;
	margin: 18px 0 34px;
}
.wheel-404 .bail { margin: 0; }

.looogie {
	position: relative;
	width: 270px;
	aspect-ratio: 1;
	margin: 12px 150px 12px 12px;
}
.looogie .wheel {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.7) 0 0.8deg, transparent 0.8deg 22.5deg),
		repeating-conic-gradient(from 0deg, #7a3fb0 0 22.5deg, #f0c21c 22.5deg 45deg, #c9302a 45deg 67.5deg, #e9741c 67.5deg 90deg);
	border: 16px solid #6b3027;
	box-shadow: inset 0 0 0 3px #000, inset 0 0 30px rgba(0, 0, 0, 0.5), 0 0 0 3px #000, 8px 8px 0 3px rgba(0, 0, 0, 0.5);
	animation: looogie 16s linear infinite;
}
.looogie .wheel::before {
	/* the bulbs on the rim */
	content: "";
	position: absolute;
	inset: -13px;
	border-radius: 50%;
	border: 9px dotted #ffe9a0;
	filter: drop-shadow(0 0 4px rgba(255, 220, 120, 0.9));
	animation: looogie-bulbs 1.2s steps(2) infinite;
}
.looogie .hub {
	position: absolute;
	z-index: 1;
	inset: 33%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #8fa6b8, #4b5f73 70%);
	border: 4px solid #000;
	box-shadow: 0 0 0 4px #2b3540;
	font-family: var(--font-marker);
	font-size: 15px;
	line-height: 0.95;
	text-align: center;
	color: #8be04e;
	text-shadow: 2px 2px 0 #000;
	transform: rotate(-8deg);
}
.looogie .pick {
	position: absolute;
	top: 50%;
	left: 60%;
	right: -140px;
	padding: 3px 14px 2px 18px;
	border: 3px solid #000;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe46a, var(--yellow) 45%, var(--yellow-deep));
	box-shadow: 4px 4px 0 #000;
	color: var(--ink);
	font-family: var(--font-title);
	font-size: 22px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateY(-50%);
}

@keyframes looogie { to { transform: rotate(360deg); } }
@keyframes looogie-bulbs { 50% { border-color: #ff9a3c; } }

/* a THUG2 menu: orange marker title, light-blue rule, items that light up in the yellow pill */
.game-menu { max-width: 560px; margin: 34px 0 30px; }
.game-menu .gm-title {
	padding: 0 6px 4px;
	font-family: var(--font-marker);
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.1;
	text-align: right;
	text-transform: uppercase;
	color: var(--orange);
	text-shadow: var(--outline), 4px 4px 0 #000;
	border-bottom: 3px solid var(--edge);
	box-shadow: 0 3px 0 #000;
}
.game-menu ul { list-style: none; margin: 14px 0 0; padding: 0; max-width: none; }
.game-menu li { margin: 0; }
.game-menu a {
	position: relative;
	isolation: isolate;
	display: block;
	padding: 3px 20px 2px;
	font-family: var(--font-title);
	font-size: 21px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #eef2f8;
	text-decoration: none;
	text-shadow: var(--outline);
}
.game-menu a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 3px solid #000;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffe46a, var(--yellow) 45%, var(--yellow-deep));
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.15s ease-out;
}
.game-menu a:hover, .game-menu a:focus-visible { color: var(--ink); text-shadow: none; outline: none; }
.game-menu a:hover::before, .game-menu a:focus-visible::before { transform: scaleX(1); }

.helpbar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 26px;
	margin-top: 18px;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.6);
	border-top: 2px solid var(--edge);
	border-bottom: 2px solid var(--edge);
	font-family: var(--font-title);
	font-size: 15px;
	letter-spacing: 0.1em;
	color: #d6dde9;
	text-shadow: 2px 2px 0 #000;
}
.helpbar b { font-weight: 400; color: var(--yellow); }

.tag-slap {
	position: absolute;
	pointer-events: none;
	filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.55));
}

@media (max-width: 760px) {
	.wheel-404 { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.looogie { width: 190px; margin: 18px 120px 6px 12px; }
	.looogie .hub { font-size: 12px; }
	.looogie .pick { font-size: 17px; right: -116px; }
}

@media (prefers-reduced-motion: reduce) {
	.looogie .wheel, .looogie .wheel::before { animation: none; }
}
.bail .bail-tag { right: -12px; top: -10px; width: 112px; height: auto; transform: rotate(10deg); opacity: 0.92; }
@media (max-width: 600px) { .bail .bail-tag { width: 76px; } }