/*
Theme Name: Paper Aisle
Description: Wedding checklists, invitation templates, and bridal shower games for paperaisle.lol.
Version: 1.1.0
Text Domain: paperaisle
Requires at least: 6.4
Requires PHP: 8.1
*/

@font-face {
	font-family: "Anton PA";
	src: url("assets/fonts/anton-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson PA";
	src: url("assets/fonts/atkinson-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson PA";
	src: url("assets/fonts/atkinson-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--night: #12151c;
	--ink: #f6f1e6;
	--amber: #f2c14e;
	--amber-dim: #e7d3a2;
	--socket: #e24b2a;
	--pool: #7ec8c3;
	--rose: #d45d8c;
	--steel: #8d93a0;
	--copper: #b87333;
	--sign: "Anton PA", "Arial Narrow", Impact, sans-serif;
	--body: "Atkinson PA", "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--night);
	color: var(--ink);
	font: 1.0625rem/1.6 var(--body);
}
img { max-width: 100%; height: auto; }
a { color: var(--amber); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
::selection { background: var(--socket); color: var(--night); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0c0e14; }
::-webkit-scrollbar-thumb { background: var(--copper); border: 3px solid #0c0e14; border-radius: 99px; }

h1, h2, h3 {
	font-family: var(--sign);
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.05;
	text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 7vw, 5.5rem); margin: 0 0 0.35em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 2.2rem 0 0.45rem; }
h3 { font-size: 1.35rem; margin: 1.6rem 0 0.35rem; }
p { margin: 0 0 1rem; }
.narrow { width: min(100% - 2rem, 68ch); margin-inline: auto; }
.skip {
	position: absolute;
	left: 1rem;
	top: 1rem;
	transform: translateY(-160%);
	background: var(--amber);
	color: var(--night);
	padding: 0.45rem 0.8rem;
	z-index: 5;
	text-decoration: none;
}
.skip:focus { transform: none; }

.site-header {
	background: #0c0e14;
	border-bottom: 1px solid var(--steel);
}
.site-header .bar {
	width: min(100% - 1.5rem, 1100px);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 0.85rem;
}
.brand {
	font-family: var(--sign);
	font-size: 1.7rem;
	letter-spacing: 0.08em;
	color: var(--ink);
	text-decoration: none;
}
.nav { display: flex; gap: 0.5rem 1rem; flex-wrap: wrap; }
.nav a {
	color: var(--amber-dim);
	text-decoration: none;
	font-family: var(--sign);
	letter-spacing: 0.06em;
	padding: 0.35rem 0.1rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.nav a[aria-current="page"] { color: var(--amber); box-shadow: inset 0 -2px 0 var(--socket); }

.marquee {
	position: relative;
	height: 100svh;
	display: grid;
	place-items: center;
	background: var(--night);
}
.hall {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}
.sign {
	position: relative;
	z-index: 1;
	width: min(100% - 1.25rem, 920px);
	display: grid;
	gap: 0.2rem;
}
.sign h1 { margin: 0; }
.letters, .banks img, .pair img, .socket img {
	display: block;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}
.letters { max-height: 22svh; }
.banks img { max-height: 26svh; }
.socket img { max-height: 34svh; }
.pair img { max-height: 20svh; }
.banks, .pair {
	display: grid;
	gap: 0.35rem;
	align-items: end;
}
.banks > a, .pair > a { min-width: 0; }
.banks { grid-template-columns: 0.8fr 1.35fr 0.8fr; }
.pair { grid-template-columns: 1fr 1fr; width: min(100%, 640px); margin-inline: auto; }
.sign a { display: block; min-height: 44px; text-decoration: none; }
.socket img { animation: filament 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1 both; }
@keyframes filament {
	0% { filter: brightness(0.82); }
	45% { filter: brightness(1.2); }
	100% { filter: brightness(1); }
}
.sign a:hover img { filter: brightness(1.08); }

.entry { padding: 2.5rem 0 4rem; }
.entry ul { padding-left: 1.2rem; }
.entry li { margin: 0.35rem 0; }
.checklist li::marker { color: var(--amber); }
.posted { color: var(--amber-dim); font-size: 0.95rem; }

.site-footer {
	border-top: 1px solid var(--steel);
	padding: 1.5rem 0 2.5rem;
	color: var(--amber-dim);
}
.site-footer .wrap { width: min(100% - 2rem, 68ch); margin-inline: auto; }
.site-footer p { margin: 0 0 0.6rem; }

@media (max-width: 1000px) {
	.banks, .pair { grid-template-columns: 1fr; }
	.socket { order: -1; }
	.letters { max-height: 14svh; }
	.banks img, .pair img { max-height: 13svh; }
	.socket img { max-height: 18svh; }
	.pair { width: 100%; }
	.hall { object-position: center 30%; }
}
@media (prefers-reduced-motion: reduce) {
	.socket img { animation: none; filter: none; }
	.sign a:hover img { filter: none; }
}