/* GG's GameRoom Media Kit: vintage tabletop card style */
/* Fonts are bundled with the plugin (SIL Open Font License), no Google Fonts call needed */
@font-face { font-family: 'GGMK Bowlby One'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bowlby-one-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'GGMK Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/oswald-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'GGMK Oswald'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/oswald-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'GGMK Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/oswald-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'GGMK Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/nunito-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'GGMK Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/nunito-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'GGMK Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/nunito-latin-700-normal.woff2') format('woff2'); }

.ggmk {
	--ggmk-navy: #1c2b36;
	--ggmk-ink: #16222b;
	--ggmk-cream: #f5e9cf;
	--ggmk-parch: #ecd9ae;
	--ggmk-parch-dark: #d8bd86;
	--ggmk-red: #b3401f;
	--ggmk-orange: #e0701a;
	--ggmk-mustard: #e2a93b;
	--ggmk-teal: #4f9386;
	--ggmk-blue: #315e7f;
	--ggmk-brown: #5a3d26;
	--ggmk-display: 'GGMK Bowlby One', 'Arial Black', Impact, sans-serif;
	--ggmk-label: 'GGMK Oswald', 'Arial Narrow', sans-serif;
	--ggmk-body: 'GGMK Nunito', 'Helvetica Neue', Arial, sans-serif;

	box-sizing: border-box;
	container-type: inline-size;
	container-name: ggmk;
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(79, 147, 134, .18), transparent 55%),
		radial-gradient(ellipse at 90% 100%, rgba(179, 64, 31, .16), transparent 50%),
		#12202a;
	border-radius: 22px;
	color: var(--ggmk-ink);
	font-family: var(--ggmk-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
.ggmk *, .ggmk *::before, .ggmk *::after { box-sizing: border-box; }
.ggmk p { margin: 0 0 .8em; }
.ggmk img { max-width: 100%; height: auto; display: block; border: 0; box-shadow: none; }
.ggmk a { color: var(--ggmk-red); }
.ggmk ul { margin: 0; padding: 0; list-style: none; }

/* ---------- The card (parchment stock + navy rounded border) ---------- */
.ggmk-card {
	position: relative;
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .45), transparent 40%),
		radial-gradient(circle at 85% 80%, rgba(139, 94, 42, .18), transparent 45%),
		linear-gradient(135deg, var(--ggmk-cream), var(--ggmk-parch));
	border: 6px solid var(--ggmk-navy);
	border-radius: 20px;
	box-shadow: inset 0 0 0 3px var(--ggmk-parch), inset 0 0 0 5px rgba(28, 43, 54, .55), inset 0 0 40px rgba(120, 80, 30, .25), 0 10px 26px rgba(0, 0, 0, .35);
	padding: 28px 30px;
	margin: 0 0 22px;
	overflow: hidden;
	break-inside: avoid;
}

/* Retro stripe accent */
.ggmk-stripe {
	position: absolute;
	top: 26px;
	left: -78px;
	width: 300px;
	height: 40px;
	transform: rotate(-35deg);
	background: linear-gradient(180deg, var(--ggmk-red) 0 20%, var(--ggmk-orange) 20% 40%, var(--ggmk-mustard) 40% 60%, var(--ggmk-teal) 60% 80%, var(--ggmk-blue) 80% 100%);
	opacity: .95;
	pointer-events: none;
}

/* ---------- Headings ---------- */
.ggmk-h2 {
	margin: 0 0 16px !important;
	padding: 0 !important;
	font: 700 15px/1 var(--ggmk-label) !important;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: 0 !important;
}
.ggmk-h2 span {
	display: inline-block;
	background: var(--ggmk-navy);
	color: var(--ggmk-cream);
	padding: 9px 18px 8px;
	border-radius: 6px;
	position: relative;
}
.ggmk-h2 span::before { content: "\2605  "; color: var(--ggmk-mustard); }
.ggmk-h3 {
	margin: 16px 0 8px !important;
	font: 600 13px/1.2 var(--ggmk-label) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ggmk-brown) !important;
}
.ggmk-h3:first-child { margin-top: 0 !important; }

/* ---------- Hero ---------- */
.ggmk-hero { padding: 34px 34px 30px; }
.ggmk-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr minmax(180px, 280px); gap: 28px; align-items: center; }
.ggmk .ggmk-roundel { display: block; width: 150px; height: 150px; max-width: none; border-radius: 50%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.ggmk-kicker { font: 600 13px/1 var(--ggmk-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ggmk-teal); margin: 0 0 10px !important; }
.ggmk-title {
	font: 400 clamp(30px, 6.5cqi, 58px)/1 var(--ggmk-display) !important;
	color: var(--ggmk-navy) !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-shadow: 2px 2px 0 var(--ggmk-parch-dark);
}
.ggmk-banner { margin: 0 0 16px !important; }
.ggmk-banner span {
	display: inline-block;
	background: var(--ggmk-red);
	color: var(--ggmk-cream);
	font: 700 17px/1 var(--ggmk-label);
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 10px 26px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
.ggmk-intro { font-size: 18px; max-width: 34em; margin: 0 !important; }
.ggmk-cat, .ggmk-photo img { border-radius: 14px; border: 4px solid var(--ggmk-navy) !important; }
.ggmk-photo img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* ---------- Stats row ---------- */
.ggmk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0 0 8px; }
.ggmk-stat {
	background: var(--ggmk-navy);
	border: 3px solid var(--ggmk-mustard);
	border-radius: 14px;
	padding: 18px 12px 14px;
	text-align: center;
	color: var(--ggmk-cream);
	break-inside: avoid;
}
.ggmk-stat-num { display: block; font: 400 38px/1 var(--ggmk-display); color: var(--ggmk-mustard); margin-bottom: 6px; }
.ggmk-stat-label { display: block; font: 600 12px/1.2 var(--ggmk-label); letter-spacing: .14em; text-transform: uppercase; }
.ggmk-asof { color: rgba(245, 233, 207, .6); font-size: 12px; text-align: right; margin: 0 4px 18px !important; }

/* ---------- Layout ---------- */
.ggmk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ggmk-grid > .ggmk-card { margin-bottom: 22px; }

.ggmk-list li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px dashed rgba(28, 43, 54, .25); }
.ggmk-list li:last-child { border-bottom: 0; }
.ggmk-list li::before {
	content: ""; position: absolute; left: 0; top: 13px; width: 18px; height: 18px;
	background: var(--ggmk-red);
	/* little meeple */
	clip-path: polygon(50% 0, 64% 6%, 68% 22%, 62% 34%, 100% 44%, 100% 58%, 72% 58%, 86% 100%, 58% 100%, 50% 80%, 42% 100%, 14% 100%, 28% 58%, 0 58%, 0 44%, 38% 34%, 32% 22%, 36% 6%);
}
.ggmk-list strong { display: block; font: 700 15px/1.3 var(--ggmk-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ggmk-navy); }
.ggmk-list span { font-size: 15px; }

/* ---------- What GG covers ---------- */
.ggmk-categories { border-radius: 10px; margin: 0 0 20px; width: 100%; }
.ggmk-covers-grid { display: grid; grid-template-columns: 1fr 240px; gap: 24px; align-items: start; }
.ggmk-shelf { border-radius: 12px; border: 4px solid var(--ggmk-navy) !important; }
.ggmk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ggmk-chips li {
	background: var(--ggmk-teal); color: #fff;
	font: 600 13px/1 var(--ggmk-label); letter-spacing: .06em; text-transform: uppercase;
	padding: 8px 12px; border-radius: 999px;
}
.ggmk-chips-navy li { background: var(--ggmk-navy); color: var(--ggmk-cream); }
.ggmk-chips-red li { background: var(--ggmk-red); color: var(--ggmk-cream); }
.ggmk-wont { margin: 20px 0 0 !important; padding: 12px 16px; background: rgba(28, 43, 54, .08); border-left: 5px solid var(--ggmk-red); border-radius: 6px; font-size: 15px; }

/* ---------- Audience & schedule ---------- */
.ggmk-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 12px 0 0; }
.ggmk-dl dt { font: 700 13px/1.5 var(--ggmk-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ggmk-brown); }
.ggmk-dl dd { margin: 0; }
.ggmk-table { width: 100%; border-collapse: collapse; border: 0 !important; margin: 0 !important; }
.ggmk-table th, .ggmk-table td { padding: 10px 8px; border: 0 !important; border-bottom: 1px dashed rgba(28, 43, 54, .3) !important; text-align: left; background: transparent !important; }
.ggmk-table tr:last-child th, .ggmk-table tr:last-child td { border-bottom: 0 !important; }
.ggmk-table th { font: 700 15px/1.2 var(--ggmk-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ggmk-navy); }
.ggmk-table td:nth-child(2) { font-weight: 700; color: var(--ggmk-red); white-space: nowrap; }

/* Viewer age bars */
.ggmk-bars { display: grid; gap: 7px; margin: 0 0 6px; }
.ggmk-bar { display: grid; grid-template-columns: 52px 1fr 52px; gap: 10px; align-items: center; }
.ggmk-bar-label { font: 700 14px/1 var(--ggmk-label); letter-spacing: .06em; color: var(--ggmk-navy); }
.ggmk-bar-track { height: 14px; background: rgba(28, 43, 54, .12); border-radius: 999px; overflow: hidden; }
.ggmk-bar-fill { display: block; height: 100%; background: var(--ggmk-teal); border-radius: 999px; }
.ggmk-bar:first-child .ggmk-bar-fill { background: var(--ggmk-red); }
.ggmk-bar-val { font: 700 14px/1 var(--ggmk-label); color: var(--ggmk-red); text-align: right; }

/* ---------- Collabs ---------- */
.ggmk-collab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ggmk-collab {
	background: rgba(255, 255, 255, .45);
	border: 2px solid var(--ggmk-navy);
	border-radius: 12px;
	padding: 14px 16px;
	position: relative;
	break-inside: avoid;
}
.ggmk-collab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 9px 9px 0 0; background: linear-gradient(90deg, var(--ggmk-red) 0 20%, var(--ggmk-orange) 20% 40%, var(--ggmk-mustard) 40% 60%, var(--ggmk-teal) 60% 80%, var(--ggmk-blue) 80%); }
.ggmk-collab h3 { margin: 6px 0 6px !important; font: 700 16px/1.2 var(--ggmk-label) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--ggmk-navy) !important; }
.ggmk-collab p { margin: 0 !important; font-size: 14.5px; }
.ggmk-rates { margin: 18px 0 0 !important; font: 700 15px/1 var(--ggmk-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ggmk-red); text-align: right; }

/* ---------- Contact ---------- */
.ggmk-contact { background: var(--ggmk-navy); box-shadow: inset 0 0 0 3px var(--ggmk-mustard), 0 10px 26px rgba(0, 0, 0, .35); color: var(--ggmk-cream); margin-bottom: 0; }
.ggmk-contact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: center; }
.ggmk-contact-title { font: 400 34px/1.1 var(--ggmk-display) !important; color: var(--ggmk-cream) !important; text-transform: uppercase; margin: 0 0 10px !important; padding: 0 !important; }
.ggmk-contact-email { font: 700 24px/1.2 var(--ggmk-label); letter-spacing: .04em; margin: 0 0 12px !important; }
.ggmk-contact-email a { color: var(--ggmk-mustard) !important; text-decoration: none; }
.ggmk-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px !important; }
.ggmk-links a { display: inline-block; color: var(--ggmk-cream) !important; border: 2px solid var(--ggmk-teal); padding: 6px 14px; border-radius: 999px; text-decoration: none; font: 600 14px/1 var(--ggmk-label); letter-spacing: .08em; text-transform: uppercase; }
.ggmk-links a:hover { background: var(--ggmk-teal); }
.ggmk-btn { display: inline-block; background: var(--ggmk-red); color: var(--ggmk-cream) !important; text-decoration: none; padding: 12px 22px; border-radius: 10px; font: 700 15px/1 var(--ggmk-label); letter-spacing: .1em; text-transform: uppercase; border: 2px solid var(--ggmk-mustard); }
.ggmk-btn:hover { background: var(--ggmk-orange); }
.ggmk-sign { border-radius: 10px; transform: rotate(3deg); }

/* ---------- Responsive ---------- */
/* Responds to the space the kit actually has (e.g. beside a theme sidebar), not the screen size */
@container ggmk (max-width: 860px) {
	.ggmk-card { padding: 22px 18px; }
	.ggmk-hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.ggmk-hero-art { max-width: 280px; }
	.ggmk-intro { margin: 0 auto !important; }
	.ggmk-grid, .ggmk-covers-grid, .ggmk-contact-inner { grid-template-columns: 1fr; gap: 0; }
	.ggmk-covers-grid .ggmk-shelf { max-width: 260px; margin-top: 18px; }
	.ggmk-collab-grid { grid-template-columns: 1fr 1fr; }
	.ggmk-sign { max-width: 200px; margin-top: 12px; }
	.ggmk-stripe { width: 200px; height: 28px; left: -60px; top: 14px; }
}
@container ggmk (max-width: 520px) {
	.ggmk-collab-grid { grid-template-columns: 1fr; }
	.ggmk-stat-num { font-size: 30px; }
	.ggmk-table td:nth-child(2) { white-space: normal; }
}

/* Tighter outer padding on small screens */
@media (max-width: 600px) { .ggmk { padding: 12px; border-radius: 14px; } }

/* ---------- Printing straight from the browser ---------- */
@media print {
	.ggmk { max-width: none; border-radius: 0; padding: 10mm; }
	.ggmk-card, .ggmk-stat { box-shadow: none; }
	.ggmk-btn { display: none; }
}