/* YOU ARE THE LEVEL: the game's riso sketchbook look, for the web.
   Cream paper, blue-black ink, three spot inks printed slightly off register,
   hard offset shadows instead of blur, no gradients. */

:root {
	--paper: #efe7d6;
	--card: #f7f2e7;
	--line: #d3c9b4;
	--ink: #24233a;
	--ink-dim: #625e6e;
	--ink-faint: #8f887b;
	--blue: #0078bf;   /* what you can move */
	--pink: #ff48b0;   /* Gerald */
	--green: #00a95c;  /* progress */
	--red: #f15060;    /* danger */
	--sans: "Barlow", "Bahnschrift", "DIN Alternate", "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
	color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
	margin: 0;
	background-color: var(--paper);
	/* paper grain: a tiny noise tile, multiplied */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.13 0 0 0 0 0.2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	color: var(--ink);
	font: 18px/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

/* --- The drawing sheet: double rule, zone markers --------------------------------- */
.sheet {
	position: relative;
	max-width: 1200px;
	margin: 18px auto;
	padding: 56px 64px 40px;
	border: 1.5px solid var(--ink);
	outline: 3px solid var(--ink);
	outline-offset: -9px;
}
.zones { position: absolute; inset: 0; pointer-events: none; font: 600 10px var(--mono); color: var(--ink-dim); }
.zones span { position: absolute; }
.zones .t { top: 2px; } .zones .b { bottom: 2px; }
.zones .l { left: 3px; } .zones .r { right: 3px; }

/* --- Type -------------------------------------------------------------------------- */
.caption { font: 600 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.caption.blue { color: var(--blue); }
.wordmark { margin: 10px 0 0; font: 700 clamp(44px, 6.2vw, 96px)/.86 var(--sans); letter-spacing: .01em; }
.wordmark span { display: block; white-space: nowrap; text-shadow: 5px 4px 0 rgba(255, 72, 176, .85); }
.wordmark .b { color: var(--blue); }
h2 { font: 700 40px/1.05 var(--sans); margin: 6px 0 18px; text-shadow: 3px 2px 0 rgba(255, 72, 176, .75); }
h3 { font: 600 22px/1.2 var(--sans); margin: 0 0 6px; }
.lede { font-size: 22px; color: var(--ink-dim); max-width: 34ch; }
p { max-width: 64ch; }

/* --- Keynote callouts (the menu, like on the title screen) -------------------------- */
.keynotes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 28px 0 0; padding: 0; list-style: none; }
.keynotes a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; color: var(--ink);
	text-decoration: none; font-weight: 600; font-size: 19px;
	background: linear-gradient(var(--ink), var(--ink)) no-repeat left / 0 100%; transition: background-size .16s ease-out, color .16s; }
.keynotes a:hover, .keynotes a:focus-visible { background-size: 100% 100%; color: var(--paper); outline: none; }
.keynotes b { font: 600 12px var(--mono); border: 1px solid currentColor; padding: 1px 6px; opacity: .7; }

/* --- Buttons: ink rule, hard shadow, fill sweeps in ---------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 2px solid var(--ink);
	box-shadow: 4px 4px 0 var(--ink); color: var(--ink); background: var(--card); text-decoration: none;
	font: 700 20px var(--sans); cursor: pointer; transition: transform .08s, box-shadow .08s, background .16s, color .16s; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--ink); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn small { font: 600 12px var(--mono); letter-spacing: .08em; opacity: .8; }

/* --- Hero ----------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.figure { margin: 0; }
.figure .plate { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--card); }
.figure figcaption { margin-top: 10px; font: 600 11px var(--mono); letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }
.price-tag { display: inline-block; margin-left: 4px; padding: 2px 8px; background: var(--green); color: #fff; font: 700 14px var(--mono); }

/* --- Sections as numbered sheets -------------------------------------------------- */
section { padding: 72px 0 0; }
section > .caption { border-top: 1.5px solid var(--ink); padding-top: 10px; }

.schedule { width: 100%; border-collapse: collapse; margin-top: 10px; }
.schedule td, .schedule th { border-bottom: 1px solid var(--line); padding: 14px 10px; vertical-align: top; text-align: left; }
.schedule th { font: 600 12px var(--mono); letter-spacing: .1em; color: var(--ink-dim); width: 3.5em; }
.schedule td:first-of-type { font-weight: 700; width: 30%; }
.swatch { display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: 1px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; margin-top: 18px; }

/* --- Buy box: a title block ----------------------------------------------------------- */
.titleblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 2px solid var(--ink);
	box-shadow: 6px 6px 0 var(--ink); background: var(--card); }
.titleblock > div { padding: 26px 28px; }
.titleblock > div + div { border-left: 1.5px solid var(--ink); }
.titleblock .big { font: 700 64px/1 var(--sans); }
.titleblock ul { padding-left: 20px; margin: 12px 0 22px; }
.titleblock li { margin: 4px 0; }
.titleblock .note { font-size: 14px; color: var(--ink-dim); margin-top: 14px; }
.itch-embed { margin-top: 18px; max-width: 100%; }
.itch-embed iframe { max-width: 100%; display: block; }

/* --- Footer title block ------------------------------------------------------------- */
footer { margin-top: 80px; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.tb { border: 2px solid var(--ink); background: var(--card); font-size: 15px; min-width: 300px; }
.tb div { display: grid; grid-template-columns: 96px 1fr; border-top: 1px solid var(--ink); }
.tb div:first-child { border-top: 0; }
.tb span { padding: 5px 10px; }
.tb span:first-child { font: 600 10px/2.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); border-right: 1px solid var(--ink); }
.foot-links { font-size: 15px; display: flex; gap: 18px; flex-wrap: wrap; }

/* --- Legal pages ------------------------------------------------------------------------ */
.doc h2 { margin-top: 48px; font-size: 30px; }
.doc p, .doc li { max-width: 72ch; }

/* --- Small screens -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.sheet { margin: 8px; padding: 40px 22px 28px; }
	.hero, .titleblock { grid-template-columns: 1fr; }
	.titleblock > div + div { border-left: 0; border-top: 1.5px solid var(--ink); }
	h2 { font-size: 32px; }
	.schedule td:first-of-type { width: auto; }
}