@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Pirata+One&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

:root {
	--ground: #0a0908;
	--ink: #e8e2d4;
	--ink-dim: #8f887a;
	--amber: #c46a2e;
	--rule: #2a2621;
	--display: 'UnifrakturMaguntia', 'Pirata One', serif;
	--sub: 'Pirata One', 'UnifrakturMaguntia', serif;
	--body: 'EB Garamond', Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--body);
	font-size: 1.125rem;
	line-height: 1.7;
	overflow-x: hidden;
}

/* parchment grain — layered gradients, no image request */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background:
		radial-gradient(ellipse at 20% 0%, rgba(196,106,46,.07), transparent 60%),
		radial-gradient(ellipse at 85% 100%, rgba(196,106,46,.05), transparent 55%);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: .2em; }
a:hover, a:focus-visible { color: var(--amber); }

.wrap { width: 100%; max-width: 62rem; margin: 0 auto; padding-inline: 1.25rem; }

/* ── nav ───────────────────────────────────────────── */
.site-nav {
	border-bottom: 1px solid var(--rule);
	background: rgba(10,9,8,.85);
}
.site-nav .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.75rem;
	padding-block: .9rem;
}
.site-nav .mark { flex: 0 0 auto; }
/* logo PNGs have a dark matte, not alpha — screen drops it against the black ground */
.site-nav .mark img { width: 2.6rem; mix-blend-mode: screen; }
.site-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
	margin: 0;
	padding: 0;
	margin-left: auto;
}
.site-nav a {
	font-family: var(--sub);
	font-size: 1.15rem;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--ink-dim);
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current='page'] { color: var(--amber); }

/* ── headings ──────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.18; margin: 0 0 .6rem; }
main > h1:first-child { margin-top: 2.5rem; }
h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 6vw, 2.9rem); margin-top: 3rem; }
h3 { font-family: var(--sub); font-size: 1.4rem; letter-spacing: .03em; color: var(--amber); margin-top: 2rem; }

/* gothic rule under a heading */
.flourish { display: block; width: 100%; max-width: 22rem; height: 14px; margin: .2rem 0 1.6rem; color: var(--amber); }
.flourish svg { width: 100%; height: 100%; display: block; }

.lede { font-size: 1.3rem; color: var(--ink-dim); font-style: italic; }

.dropcap::first-letter {
	font-family: var(--display);
	float: left;
	font-size: 4.1rem;
	line-height: .78;
	padding: .1em .14em 0 0;
	color: var(--amber);
}

/* ── hero ──────────────────────────────────────────── */
.hero {
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: 3.5rem;
	gap: 1.4rem;
}
.hero-logo { width: min(46rem, 90vw); mix-blend-mode: screen; }
.hero .tagline {
	font-family: var(--sub);
	font-size: clamp(1.05rem, 3.6vw, 1.5rem);
	letter-spacing: .06em;
	color: var(--ink-dim);
	max-width: 34rem;
	margin: 0;
}
.hero .origin { font-family: var(--sub); letter-spacing: .3em; font-size: .9rem; color: var(--amber); margin: 0; }

.gate { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.gate a {
	font-family: var(--sub);
	font-size: 1.25rem;
	letter-spacing: .05em;
	text-decoration: none;
	padding: .45rem 1.4rem;
	border: 1px solid var(--rule);
	background: rgba(232,226,212,.03);
	color: var(--ink);
}
.gate a:hover, .gate a:focus-visible { border-color: var(--amber); color: var(--amber); }

/* ── panels: torn flyer / stapled poster ───────────── */
.panel {
	position: relative;
	margin: 2.5rem 0;
	padding: 1.8rem 1.5rem;
	background:
		linear-gradient(rgba(232,226,212,.045), rgba(232,226,212,.015)),
		repeating-linear-gradient(115deg, rgba(232,226,212,.022) 0 2px, transparent 2px 5px);
	border: 1px solid var(--rule);
	/* torn top and bottom edge */
	clip-path: polygon(0 6px, 4% 0, 11% 7px, 19% 1px, 27% 8px, 38% 2px, 50% 7px, 61% 0, 72% 6px, 83% 1px, 92% 7px, 100% 2px,
		100% calc(100% - 5px), 91% 100%, 80% calc(100% - 7px), 69% calc(100% - 1px), 57% calc(100% - 8px), 44% calc(100% - 2px), 32% calc(100% - 7px), 21% 100%, 10% calc(100% - 5px), 0 calc(100% - 1px));
}
/* staples */
.panel::before, .panel::after {
	content: '';
	position: absolute;
	top: 14px;
	width: 16px;
	height: 4px;
	background: linear-gradient(#d8d2c4, #6d675c);
	transform: rotate(-8deg);
	opacity: .55;
}
.panel::before { left: 22px; }
.panel::after { right: 22px; transform: rotate(8deg); }

/* ── figures ───────────────────────────────────────── */
figure { margin: 2.5rem 0; }
figure img { width: 100%; filter: grayscale(.25) contrast(1.08) brightness(.88); border: 1px solid var(--rule); }
figcaption {
	font-family: var(--sub);
	font-size: .95rem;
	letter-spacing: .04em;
	color: var(--ink-dim);
	margin-top: .6rem;
}

.divider { display: block; width: 100%; max-width: 30rem; margin: 3.5rem auto; color: var(--rule); }
.divider svg { width: 100%; height: auto; display: block; }

/* ── discography ───────────────────────────────────── */
.release { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
.release img { border: 1px solid var(--rule); }
.meta { list-style: none; margin: 0 0 1.5rem; padding: 0; color: var(--ink-dim); font-size: 1rem; letter-spacing: .03em; }
.meta span { color: var(--ink); }

ol.tracks { list-style: none; counter-reset: t; margin: 0; padding: 0; }
ol.tracks li {
	counter-increment: t;
	display: flex;
	align-items: baseline;
	gap: .8rem;
	padding: .5rem 0;
	border-bottom: 1px dotted var(--rule);
}
ol.tracks li::before {
	content: counter(t, upper-roman) '.';
	font-family: var(--sub);
	color: var(--amber);
	min-width: 2.4rem;
	font-size: 1.05rem;
}
ol.tracks .dur { margin-left: auto; color: var(--ink-dim); font-size: .95rem; white-space: nowrap; }

.embed { border: 0; width: 100%; }
.embed-bc { height: 320px; max-width: 42rem; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border: 1px solid var(--rule); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.75rem; }

blockquote {
	margin: 0;
	padding: 0 0 0 1.1rem;
	border-left: 2px solid var(--amber);
	font-style: italic;
}
blockquote cite { display: block; margin-top: .4rem; font-style: normal; font-family: var(--sub); font-size: .95rem; color: var(--ink-dim); }
.press { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.75rem; }

/* ── contact ───────────────────────────────────────── */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: .9rem 0; border-bottom: 1px dotted var(--rule); }
.contact-list .who { font-family: var(--sub); color: var(--amber); letter-spacing: .04em; display: block; }

/* ── footer ────────────────────────────────────────── */
.site-foot {
	border-top: 1px solid var(--rule);
	margin-top: 5rem;
	padding-block: 2rem 3rem;
	color: var(--ink-dim);
	font-size: .95rem;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; }
.site-foot a { text-decoration: none; }

@media (max-width: 640px) {
	body { font-size: 1.05rem; }
	.release { grid-template-columns: 1fr; }
	.site-nav ul { margin-left: 0; width: 100%; justify-content: space-between; }
	.panel::before, .panel::after { display: none; }
}