/*
Theme Name: Baby Shower Games
Description: A porch clothesline of shower games for babyshowergames.lol.
Version: 1.0.0
Text Domain: babyshower
Requires at least: 6.4
Requires PHP: 8.1
*/

@font-face {
	font-family: "Bowlby BS";
	src: url("assets/fonts/bowlby-one-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Literata BS";
	src: url("assets/fonts/literata-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--porch: #2a5648;
	--seam: #1e4036;
	--cotton: #f6f1e6;
	--ink: #241c16;
	--pin: #c8963e;
	--cord: #efe6d4;
	--tape: #d4532b;
	--sign: "Bowlby BS", "Arial Narrow", sans-serif;
	--body: "Literata BS", "Palatino Linotype", serif;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--pin) var(--seam); }
body {
	margin: 0;
	background-color: var(--porch);
	background-image: repeating-linear-gradient(to bottom, var(--porch) 0 52px, var(--seam) 52px 54px);
	color: var(--cotton);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.6;
}
::selection { background: var(--porch); color: var(--cotton); }
:focus-visible { outline: 2px solid var(--tape); outline-offset: 3px; }
a { color: var(--ink); text-underline-offset: 0.18em; }
.beam a { color: var(--cotton); }

.skip {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--cotton);
	color: var(--ink);
	padding: 0.45rem 0.8rem;
	z-index: 5;
}
.skip:focus { left: 1rem; top: 1rem; }

.beam {
	width: min(100% - 1.25rem, 1100px);
	margin: 0 auto;
	padding: 1.15rem 0 0.15rem;
}
.beam h1, .beam .brand {
	margin: 0;
	font-family: var(--sign);
	font-weight: 400;
	font-size: clamp(2rem, 5vw, 4.4rem);
	letter-spacing: 0.02em;
	line-height: 1.05;
	color: var(--cotton);
	text-decoration: none;
}

.line {
	width: min(100% - 1.25rem, 1100px);
	margin: 0.4rem auto 1.5rem;
	display: grid;
	column-gap: 0.45rem;
	row-gap: 0.8rem;
	align-items: start;
	position: relative;
}
.line.lead { grid-template-columns: 0.78fr 0.78fr 1.5fr 0.78fr 0.78fr; }
.line.shelf { grid-template-columns: repeat(5, 1fr); }
.cord {
	position: absolute;
	left: 0;
	right: 0;
	top: 1.7rem;
	height: 6px;
	background: var(--cord);
	z-index: 0;
}
.garment {
	position: relative;
	z-index: 1;
	display: block;
	min-height: 44px;
	padding-top: 1.7rem;
	color: var(--ink);
	text-decoration: none;
}
.line.lead .open { grid-column: 3; grid-row: 1; z-index: 2; }
.line.lead .slot-1 { grid-column: 1; grid-row: 1; }
.line.lead .slot-2 { grid-column: 2; grid-row: 1; }
.line.lead .slot-4 { grid-column: 4; grid-row: 1; }
.line.lead .slot-5 { grid-column: 5; grid-row: 1; }
.cut {
	display: block;
	width: 100%;
	height: auto;
	margin-top: calc(100% * -48 / 220);
}
.cloth-shape { fill: var(--cotton); }
.neck, .cuff, .leg { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.cut.tape .neck, .cut.tape .cuff { stroke: var(--tape); stroke-width: 5; }
.snap { fill: var(--ink); }
.pin {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 0;
	width: 1.35rem;
	margin-left: -0.67rem;
	color: var(--pin);
	transform-origin: 50% 15%;
}
.pin svg { display: block; width: 100%; height: auto; }
.open .pin {
	color: var(--pin);
	animation: unpin 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1 both;
}
@keyframes unpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-16deg); }
}
.garment:hover { transform: translateY(-6px); }
.chest, .rule { color: var(--ink); }
.chest {
	font-family: var(--sign);
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.05;
	text-align: center;
}
.peg .chest {
	position: absolute;
	left: 31%;
	right: 31%;
	top: 48%;
	font-size: clamp(0.62rem, 0.85vw, 0.82rem);
}
.writing {
	position: absolute;
	left: 33%;
	right: 33%;
	top: 38%;
	bottom: 34%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
}
.open .chest { font-size: clamp(0.95rem, 1.35vw, 1.35rem); }
.rule { font-size: 0.98rem; line-height: 1.35; }
a[aria-current="page"] .pin { color: var(--tape); }

.sheet {
	width: min(100% - 1.5rem, 68ch);
	margin: 0 auto 2.5rem;
	padding: 0 1.15rem 2rem;
	background: var(--cotton);
	color: var(--ink);
}
.sheet .cut { width: min(100%, 180px); margin: 0 auto; }
.sheet h1 {
	margin: 0.2rem 0 0.6rem;
	font-family: var(--sign);
	font-weight: 400;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
}
.sheet h2 {
	margin: 1.6rem 0 0.35rem;
	font-family: var(--sign);
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.05;
	letter-spacing: 0.02em;
}
.sheet p { margin: 0 0 1rem; }
.sheet ul, .sheet ol { margin: 0 0 1rem; padding-left: 1.2rem; }
.sheet li { margin: 0.35rem 0; }
.sheet a { color: var(--ink); }
.miss { font-family: var(--sign); font-size: 1.6rem; line-height: 1.15; letter-spacing: 0.02em; }

.card {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.35rem;
	margin: 0;
	padding: 0;
}
.card li {
	min-height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px solid var(--ink);
	font-family: var(--sign);
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	line-height: 1.1;
	padding: 0.15rem;
}
.card li:nth-child(13) { border-width: 4px; }
.scrambles { font-family: var(--sign); letter-spacing: 0.08em; }

.site-footer {
	width: min(100% - 1.5rem, 68ch);
	margin: 0 auto;
	padding: 1.25rem 0 2.4rem;
	color: var(--cotton);
}
.site-footer p { margin: 0 0 0.7rem; }

@media (max-width: 980px) {
	.line.lead {
		grid-template-columns: 1fr 1fr;
		justify-items: center;
		row-gap: 1.35rem;
	}
	.line.lead .cord { display: none; }
	.line.lead .garment::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 1.7rem;
		left: -50vw;
		right: -50vw;
		height: 6px;
		background: var(--cord);
	}
	.line.lead .open {
		grid-column: 1 / -1;
		grid-row: 1;
		width: min(17.5rem, 88%);
	}
	.line.lead .slot-1 { grid-column: 1; grid-row: 2; }
	.line.lead .slot-2 { grid-column: 2; grid-row: 2; }
	.line.lead .slot-4 { grid-column: 1; grid-row: 3; }
	.line.lead .slot-5 { grid-column: 2; grid-row: 3; }
	.line.lead .slot-1,
	.line.lead .slot-2,
	.line.lead .slot-4,
	.line.lead .slot-5 { width: min(11.5rem, 96%); }
	.peg .chest {
		left: 22%;
		right: 22%;
		top: 42%;
		bottom: 28%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.78rem;
	}
	.writing {
		left: 22%;
		right: 22%;
		top: 34%;
		bottom: 26%;
		gap: 0.25rem;
	}
	.open .chest { font-size: 1.15rem; }
	.rule { font-size: 0.86rem; line-height: 1.25; }
	.beam h1, .beam .brand { font-size: clamp(1.8rem, 7vw, 3rem); }
}
@media (prefers-reduced-motion: reduce) {
	.open .pin { animation: none; transform: rotate(-16deg); }
	.garment:hover { transform: none; }
}