@charset "utf-8";

body.pfPage main,
body.logsPage main,
body.gamesPage main,
body.contactPage main {
	background: #efefef;
	display: block;
	padding-bottom: calc(var(--mg) + var(--mg-gap));
}

.pfSection.pdTop,
.logsSection.pdTop,
.gamesSection.pdTop,
.contactSection.pdTop {
	padding-top: var(--mg-gap);
}

body.pfPage footer {
	margin-top: 0;
}

.pfSection {
	padding-bottom: 0;
}

.pfSection h2 {
	font-family: "Silkscreen", monospace;
	text-transform: lowercase;
}

.pfGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mg-gap);
}

.pfCard {
	background: #fff;
	border: var(--stack-border-w) solid var(--br-col);
	padding: clamp(16px, 2vw, 24px);
}

.pfTitle {
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	margin: 0 0 0.4rem;
	font-family: "Silkscreen", monospace;
}

.pfMeta {
	margin: 0 0 1rem;
	color: var(--txt-col-bk2);
	font-size: 0.8rem;
}

.pfBtn {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 2px solid var(--br-col);
	color: var(--br-col);
	background: #fff;
	font-size: 0.85rem;
}

.pfBtn:hover {
	background: var(--br-col);
	color: #fff;
}

@media (max-width: 800px) {
	.pfGrid {
		grid-template-columns: 1fr;
	}
}

body.logsPage footer {
	margin-top: 0;
}

.logsSection {
	padding-bottom: 0;
}

.logsSection h2 {
	font-family: "Silkscreen", monospace;
}

.logsArchive {
	display: grid;
	gap: var(--mg-gap);
}

.logEntry {
	background: #fff;
	border: var(--stack-border-w) solid var(--br-col);
	padding: clamp(14px, 2vw, 22px);
}

.logEntryDate {
	font-family: "Silkscreen", monospace;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	color: var(--txt-col-bk2);
	margin-bottom: 0.35rem;
}

.logEntryTitle {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.8;
	color: var(--txt-col-bk1);
	margin-bottom: 0.35rem;
}

.logEntryBody p,
.logEntryBody li {
	font-size: 0.78rem;
	line-height: 1.9;
	color: var(--txt-col-bk1);
	font-weight: 700;
}

.logEntryBody p {
	margin-top: 0.5rem;
}

body.gamesPage footer {
	margin-top: 0;
}

body.pfPage footer ul li,
body.logsPage footer ul li,
body.gamesPage footer ul li,
body.contactPage footer ul li {
	letter-spacing: 0.1em;
}

body.pfPage footer ul li a,
body.logsPage footer ul li a,
body.gamesPage footer ul li a,
body.contactPage footer ul li a {
	font-size: clamp(0.62rem, 3.1vw, 0.76rem);
}

body.contactPage footer {
	margin-top: 0;
}

.contactSection {
	padding-bottom: 0;
}

.contactSection h2 {
	font-family: "Silkscreen", monospace;
}

.contactLead {
	margin: 0 0 var(--mg-gap);
	font-size: 0.8rem;
	line-height: 1.9;
	font-weight: 700;
	color: var(--txt-col-bk1);
}

.contactPanel {
	background: #fff;
	border: var(--stack-border-w) solid var(--br-col);
	padding: clamp(14px, 2vw, 22px);
}

.contactForm {
	display: grid;
	gap: 14px;
}

.contactField {
	display: grid;
	gap: 6px;
}

.contactField label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.contactField input,
.contactField textarea {
	width: 100%;
	box-sizing: border-box;
	border: var(--stack-border-w) solid var(--br-col);
	border-radius: 0;
	background: #fff;
	color: var(--txt-col-bk1);
	padding: 10px 12px;
	font: inherit;
	font-size: 0.85rem;
	line-height: 1.7;
}

.contactField textarea {
	min-height: 180px;
	resize: vertical;
}

.contactField input:focus,
.contactField textarea:focus {
	outline: 2px solid #ff4f00;
	outline-offset: 1px;
}

.contactSubmit {
	display: inline-block;
	width: fit-content;
	border: 2px solid var(--br-col);
	border-radius: 0;
	background: #fff;
	color: var(--br-col);
	padding: 0.55rem 1.4rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.contactSubmit:hover {
	background: var(--br-col);
	color: #fff;
}

.contactSubmit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.contactStatus {
	min-height: 1.7em;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.8;
}

.contactStatus[data-state="success"] {
	color: #0a7a28;
}

.contactStatus[data-state="error"] {
	color: #aa1c12;
}

.contactStatus[data-state="loading"] {
	color: var(--txt-col-bk2);
}

.contactNote {
	margin-top: 0.8rem;
	font-size: 0.72rem;
	line-height: 1.8;
	color: var(--txt-col-bk2);
}

.contactHoneypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}