/* Prisonado links. The look is the key art's: thick ink outlines, the logo's
   cream face and the jumpsuit orange on prison concrete. The three faces are
   the press kit's (fonts/, licences beside them): Zero Cool for headers,
   Gluten for body text, Prime Minister of Canada for flavour. */

@font-face {
	font-family: "Zero Cool";
	src: url("/fonts/ZeroCool.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Gluten";
	src: url("/fonts/Gluten.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Prime Minister";
	src: url("/fonts/PrimeMinisterOfCanada.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	--ink: #090708;
	--ground: #3f3d40;
	--ground-deep: #2b292c;
	--cream: #efe9d7;
	--extrude: #594d51;
	--orange: #d96635;
	--yellow: #f3c03d;
	--body: #cfc8bb;
	--muted: #b8b1b4;
	--press-ink: #3a2f12;
	--display: "Zero Cool", "Gluten", system-ui, sans-serif;
	--text: "Gluten", system-ui, sans-serif;
	--flavour: "Prime Minister", "Gluten", system-ui, sans-serif;
	--fence-h: clamp(64px, 16.85vw, 180px);
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
	margin: 0;
	background: var(--ground);
	color: var(--cream);
	font-family: var(--text);
	font-synthesis: none;
	-webkit-tap-highlight-color: transparent;
	text-size-adjust: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* A phone column; from 960 px the poster and the links side by side (below). The
   fence and the credits sit outside it, so they always run edge to edge. */
.stage {
	flex: 1 0 auto;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.page {
	display: flex;
	flex-direction: column;
	padding-bottom: 44px;
}

/* ── The key art, its grey border cropped off ── */
.hero {
	position: relative;
	aspect-ratio: 390 / 480;
	overflow: hidden;
	border-bottom: 3px solid var(--ink);
}
.hero-art {
	position: absolute;
	left: -5%;
	top: -3.4%;
	width: 110%;
	height: auto;
	display: block;
}
/* On a phone the poster wrapper is invisible and the art is cropped to the column. */
.poster { display: contents; }
.tape { display: none; }

.intro {
	padding: 22px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.intro h1 {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.05;
	color: var(--cream);
}
.intro p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
	color: var(--body);
}

/* ── The plates: cream face, ink outline, ink drop like the logo's extrusion ── */
.plate {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 3px solid var(--ink);
	color: var(--ink);
	text-decoration: none;
	transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}
.plate:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.plate:active { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); }
.plate:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.cta-wrap {
	position: relative;
	padding: 26px 20px 0;
}
.cta {
	gap: 12px;
	padding: 16px 14px 16px 12px;
	background: var(--orange);
	border-radius: 8px;
	box-shadow: 0 6px 0 var(--ink);
}
.cta-icon {
	width: 46px;
	height: 46px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	border-radius: 50%;
	color: var(--cream);
}
.cta-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
	line-height: 1;
}
/* One line from a 320 px phone up: Zero Cool is wide, so the size follows the
   screen and stops at the column's 26 px. */
.cta-title {
	font-family: var(--display);
	font-size: clamp(19px, 6vw, 26px);
	white-space: nowrap;
}
.cta-sub {
	font-family: var(--flavour);
	font-size: clamp(13px, 3.9vw, 16px);
	white-space: nowrap;
}

/* The rock from the key art, idling on the button's corner */
.rock {
	position: absolute;
	top: 4px;
	right: 8px;
	width: 54px;
	height: 54px;
	pointer-events: none;
	animation: wobble 2.6s ease-in-out infinite;
}
@keyframes wobble {
	0%, 100% { transform: rotate(-10deg) translateY(0); }
	50% { transform: rotate(8deg) translateY(-4px); }
}

.group {
	padding: 36px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.group h2 {
	margin: 0;
	font-family: var(--flavour);
	font-weight: 400;
	font-size: 19px;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.link {
	min-height: 64px;
	padding: 8px 14px 8px 8px;
	background: var(--cream);
	border-radius: 6px;
	box-shadow: 0 5px 0 var(--ink);
}
.tilt-l { transform: rotate(-0.5deg); }
.tilt-r { transform: rotate(0.6deg); }
.badge {
	width: 46px;
	height: 46px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	border-radius: 4px;
	color: var(--cream);
}
.label {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	line-height: 1.1;
}
.name {
	font-family: var(--display);
	font-size: 21px;
}
.handle {
	font-size: 14px;
	color: var(--extrude);
	overflow-wrap: anywhere;
}
.go { flex: none; transition: transform 120ms ease-out; }
.link:hover .go { transform: translateX(3px); }

.press { background: var(--yellow); }
.press .badge { color: var(--yellow); }
.press .handle { color: var(--press-ink); }

/* ── The Yard fence, then the credits, both edge to edge ──
   The fence strip is 3840 x 647: shown whole up to 180 px tall, then cropped from
   the bottom so the razor wire stays. */
.fence {
	flex: none;
	height: var(--fence-h);
	background: url("/img/fence.webp") center top / cover no-repeat;
}
.foot {
	flex: none;
	background: var(--ground-deep);
	border-top: 3px solid var(--ink);
}
.foot-inner {
	max-width: 440px;
	margin: 0 auto;
	padding: 22px 20px 36px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.obey {
	width: 72px;
	height: 72px;
	flex: none;
	transform: rotate(-4deg);
}
.foot p {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--muted);
}

/* ── Tablet: the phone column standing on the Yard wall ── */
@media (min-width: 600px) and (max-width: 959px) {
	body { background: #3b3b3c url("/img/wall.webp") center top / cover no-repeat; }
	.stage {
		background: var(--ground);
		border-left: 3px solid var(--ink);
		border-right: 3px solid var(--ink);
	}
}

/* ── Desktop: the key art as a poster taped to the Yard wall, the links beside it ── */
@media (min-width: 960px) {
	:root {
		--poster-h: min(74vh, 900px);
		--poster-gap: calc((100vh - var(--poster-h)) / 2);
	}
	.stage {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.hero {
		aspect-ratio: auto;
		border-bottom: 0;
		border-right: 3px solid var(--ink);
		background: #333134 url("/img/wall.webp") center 30% / cover no-repeat;
		/* clip, not hidden: hidden would make this a scroll box and unpin the poster */
		overflow: clip;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: var(--poster-gap) 48px 48px;
	}
	/* Centred in the window, and pinned there while the links scroll on a short screen */
	.poster {
		display: block;
		position: sticky;
		top: var(--poster-gap);
		transform: rotate(-2deg);
	}
	.hero-art {
		position: static;
		width: auto;
		max-width: 100%;
		max-height: var(--poster-h);
		border: 3px solid var(--ink);
		box-shadow: 0 12px 0 rgba(9, 7, 8, 0.55);
	}
	.tape {
		display: block;
		position: absolute;
		z-index: 1;
		height: auto;
		pointer-events: none;
	}
	.tape-l { top: -30px; left: -16px; width: 46px; transform: rotate(-30deg); }
	.tape-r { top: -32px; right: -18px; width: 58px; transform: rotate(16deg); }
	.page {
		align-self: center;
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
		padding: 48px 12px 56px;
	}
	.intro h1 { font-size: 38px; }
	.intro p { font-size: 17px; }
	/* The wall runs on under the fence: the fence is pulled up over the stage's foot,
	   and both columns keep that much room clear at the bottom. */
	.fence {
		background-image: url("/img/fence-wide.webp");
		position: relative;
		z-index: 1;
		margin-top: calc(-1 * var(--fence-h));
		pointer-events: none;
	}
	.hero { padding-bottom: calc(48px + var(--fence-h)); }
	.page { padding-bottom: calc(24px + var(--fence-h)); }
	.foot-inner { max-width: 1100px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	.plate, .go { transition: none; }
	.rock { animation: none; }
}