/*
Theme Name: EPCWEB
Theme URI: https://epcweb.com
Author: Eclectic Properties Corporation
Description: Custom theme for EPCWEB. Eclectic Properties Corporation: writing, music, essays, and Digital Impressionism artwork. Navy + gold, modern and responsive.
Version: 0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: epcweb
*/

/* ===== VARIABLES ===== */
:root {
    --color-primary: #1a1a2e;
    --color-accent: #c9a84c;
    --color-accent-dark: #a88936;
    /* Sampled from Dean's home page mockups. */
    --color-gold-bright: #ffb400;
    --color-quiz-paper: #ffebae;
    --color-quiz-edge: #7a021b;
    --color-quiz-ink: #2d2418;
    --color-text: #2d2d2d;
    --color-text-muted: #777;
    --color-bg: #fff;
    --color-bg-alt: #f8f7f4;
    --color-border: #e8e4de;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    --max-width: 1140px;
    --content-width: 740px;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --radius: 4px;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --transition: 0.2s ease;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent); }

/* ===== UTILITIES ===== */
/* Progressive enhancement leans on the hidden attribute, and any component rule
   that sets display (.btn does) would otherwise win and show the element. */
[hidden] { display: none !important; }
.inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* ===== BUTTONS ===== */
.btn {
    display: inline-block; padding: 0.6rem 1.4rem; border-radius: var(--radius);
    font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; cursor: pointer;
    border: 2px solid transparent; transition: all var(--transition); text-align: center;
    line-height: 1.4; background: none;
}
.btn-primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
.btn-lg { padding: 0.8rem 2rem; font-size: 1rem; }

/* ===== HEADER ===== */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); min-height: 68px; display: flex; align-items: center; gap: var(--spacing-md); }
.site-brand { flex-shrink: 0; }
.site-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.site-name:hover { color: var(--color-accent); }
.site-tagline-mini { display: block; font-family: var(--font-serif); font-style: italic; font-size: 0.78rem; letter-spacing: 0.01em; color: var(--color-accent); margin-top: 2px; }

/* Wraps the navigation and the account links so one toggle opens both. */
.header-menu { display: flex; flex: 1; align-items: center; gap: var(--spacing-md); min-width: 0; }
.site-nav { flex: 1; min-width: 0; }
.site-nav ul { display: flex; list-style: none; gap: 0.25rem; justify-content: center; flex-wrap: wrap; }
.site-nav li a { color: rgba(255,255,255,0.75); font-size: 0.85rem; font-weight: 500; padding: 0.4rem 0.7rem; border-radius: var(--radius); letter-spacing: 0.04em; text-transform: uppercase; transition: all var(--transition); }
.site-nav li a:hover, .site-nav li.current-menu-item a, .site-nav li.current_page_item a { color: #fff; background: rgba(255,255,255,0.1); }

.header-auth { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: center; }
/* Gold at every width, so the account links read the same on a desktop as in
   the phone menu. Hover goes to white, since gold is now the resting state. */
.header-auth a { color: var(--color-accent); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.header-auth a:hover { color: #fff; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; flex-direction: column; gap: 5px; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; transition: all var(--transition); }

/* ===== HERO (home) ===== */
.site-hero { background: linear-gradient(135deg, var(--color-primary) 0%, #2d2d5a 100%); color: #fff; padding: var(--spacing-xl) 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-lg); align-items: center; }
.hero-text { }
.hero-eyebrow { font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--spacing-sm); }
.site-hero-title { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; margin-bottom: var(--spacing-sm); line-height: 1.15; }
.site-hero-desc { font-size: clamp(1rem, 2vw, 1.15rem); color: rgba(255,255,255,0.8); margin-bottom: var(--spacing-md); line-height: 1.7; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-cover { text-align: center; }
.hero-cover img { display: inline-block; max-height: 460px; width: auto; border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0,0,0,0.45); }

/* ===== ECLECTIC DEFINITION ===== */
/* Same parchment as the Fast Facts panel, so the three cream blocks on the
   home page read as one family rather than three different papers. */
.definition {
	max-width: 700px; margin: 0 auto; text-align: center;
	padding: var(--spacing-md);
	background: var(--color-quiz-paper);
	border: 1px solid #e6d4a0;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(26,26,46,0.10);
}
.def-word {
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(2.5rem, 7.5vw, 4.25rem); line-height: 1.0;
	color: var(--color-primary); letter-spacing: 0.01em;
}
.def-word::after { content: ""; display: block; width: 72px; height: 4px; background: var(--color-accent); border-radius: 2px; margin: var(--spacing-sm) auto 0.7rem; }
.def-meta { font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-accent-dark); }
.def-meta .def-pron, .def-meta .def-pos { font-style: italic; }
.def-etym { font-family: var(--font-serif); color: var(--color-text-muted); margin: 0.3rem 0 var(--spacing-sm); font-size: 0.95rem; }
.def-list { list-style: none; counter-reset: def; margin: 0 auto; padding: 0; max-width: 580px; }
.def-list li { counter-increment: def; font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-text); line-height: 1.45; margin-bottom: 0.45rem; }
.def-list li::before { content: counter(def) "."; color: var(--color-accent-dark); font-weight: 700; margin-right: 0.45rem; }

/* ===== FAST FACTS ===== */
/* A banner cut from Dean's own castle piece, then the question and answer on
   parchment inside a deep red frame. */
.ff-section {
	background: linear-gradient(135deg, var(--color-primary) 0%, #262647 60%, #2d2d5a 100%);
	color: #fff;
	padding: var(--spacing-lg) 0;
}
.fastfact {
	max-width: 780px; margin: 0 auto;
	border: 4px solid var(--color-quiz-edge);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}

/* How much of the castle shows depends entirely on the column width, so the
   gold cannot rely on landing on sky. The two scrims darken the corners it
   actually occupies, whatever the crop turns out to be. */
.ff-banner {
	display: flex; flex-direction: column;
	min-height: 200px;
	padding: var(--spacing-sm) var(--spacing-md);
	background:
		linear-gradient(180deg, rgba(40, 3, 9, 0.78) 0%, rgba(40, 3, 9, 0.08) 42%, rgba(40, 3, 9, 0.1) 58%, rgba(40, 3, 9, 0.78) 100%),
		#46060f url(assets/img/fastfacts-castle.jpg) center bottom / cover no-repeat;
}
.ff-heading {
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--color-gold-bright);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.ff-prompt {
	margin-top: auto; align-self: flex-end; max-width: 13em; text-align: right;
	font-size: 0.78rem; font-weight: 700; line-height: 1.35;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--color-gold-bright);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* A floor under the body so revealing the answer does not shunt the page. */
.ff-body {
	background: var(--color-quiz-paper);
	color: var(--color-quiz-ink);
	padding: var(--spacing-md);
	min-height: 19rem;
}
.ff-num { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-quiz-edge); opacity: 0.7; margin-bottom: var(--spacing-sm); }

/* The Q and the A hang in their own column, as in the original quiz. */
.ff-line { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.ff-line + .ff-line { margin-top: var(--spacing-md); }
.ff-label {
	font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem;
	line-height: 1.1; color: var(--color-quiz-edge);
}
.ff-q { font-size: 1rem; line-height: 1.55; color: var(--color-quiz-ink); }
.ff-a { font-size: 1rem; line-height: 1.65; color: var(--color-quiz-ink); }
/* Answers are written in the editor now, so they arrive wrapped in paragraphs. */
.ff-a p { margin: 0 0 0.75rem; }
.ff-a p:last-child { margin-bottom: 0; }
.ff-a a { color: var(--color-quiz-edge); text-decoration: underline; }
.ff-a.is-visible { animation: ff-reveal 0.45s ease both; }

/* Present but quiet: the cycle is automatic, these are for anyone who wants
   to drive it themselves. */
.ff-actions { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: var(--spacing-md); }
.ff-actions .btn,
.ff-actions .btn-primary,
.ff-actions .btn-outline {
	background: none; border: 0; padding: 0; border-radius: 0; width: auto;
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--color-quiz-edge);
	border-bottom: 1px solid rgba(122, 2, 27, 0.35);
}
.ff-actions .btn:hover { background: none; color: #b5152e; border-bottom-color: #b5152e; }
.ff-fade { animation: ff-reveal 0.4s ease both; }

@keyframes ff-reveal {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ff-a.is-visible, .ff-fade { animation: none; }
}

/* ===== HOME: SPLASH ===== */
.splash { position: relative; }
.splash-track {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-primary) 0%, #2d2d5a 100%);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
	/* Every slide is stacked in the same place, so the box does not jump as the
	   content changes height. The tallest slide sets the height. */
	display: grid;
}
.splash-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
}
.splash-slide.is-current { opacity: 1; visibility: visible; }
/* A section with no picture yet gets a single wide panel rather than an empty
   half. It should look deliberate, not broken. */
.splash-slide.no-media { grid-template-columns: 1fr; }
.splash-slide.no-media .splash-body { padding: var(--spacing-lg) var(--spacing-md); min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
.splash-media { display: block; overflow: hidden; }
.splash-media img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.splash-body { padding: var(--spacing-md); color: #fff; align-self: center; }
.splash-phrase {
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
	text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.7rem;
}
.splash-title { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin-bottom: 0.7rem; }
.splash-title a { color: #fff; }
.splash-title a:hover { color: var(--color-accent); }
.splash-excerpt { color: rgba(255, 255, 255, 0.78); line-height: 1.7; margin-bottom: var(--spacing-md); }
.splash-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.splash .btn-outline { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.4); }
.splash .btn-outline:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }

.splash-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--spacing-sm); }
.splash-dot {
	width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
	background: rgba(26, 26, 46, 0.22); border: 0;
	transition: background var(--transition), transform var(--transition);
}
.splash-dot:hover { background: rgba(26, 26, 46, 0.45); }
.splash-dot.is-current { background: #fff; box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.35); transform: scale(1.15); }

/* ===== HOME: THE HEADLINE ===== */
/* Dean's line, set as big as it will go. It is the first thing anyone reads. */
.home-tagline { margin-bottom: var(--spacing-md); }
.tagline-lead {
	font-weight: 800;
	font-size: clamp(2.4rem, 6.4vw, 4.75rem);
	line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase;
	color: var(--color-gold-bright);
}
.tagline-sub {
	margin-top: 0.35rem; max-width: 20em;
	font-weight: 600;
	font-size: clamp(1.05rem, 2.3vw, 1.55rem);
	line-height: 1.25;
	color: var(--color-gold-bright);
}

/* ===== HOME: TWO COLUMNS WITH A FAST FACTS RAIL ===== */
/* Named areas rather than source order, because two separate things depend on
   the offer and the definition sharing a grid row: grid rows stretch their
   items, which is what makes those two cards the same height, and it is what
   puts the top of Fast Facts level with the headline below them.

   The rail is deliberately allowed to stretch to the full height of its row.
   That is what gives the sticky Fast Facts panel inside it room to travel: a
   sticky element can only move within its own parent's box. */
.home-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-areas:
		"offer def"
		"main  rail";
	gap: var(--spacing-md) var(--spacing-lg);
}
.home-offer { grid-area: offer; }
.home-def { grid-area: def; }
.home-main { grid-area: main; }
.home-rail { grid-area: rail; }
/* Both top-row cards fill the row, whichever of them is the taller. The offer
   also sheds the page gutter it carries when used as a full-width banner
   elsewhere, so its edges line up with the headline and splash below it. */
.home-offer .bundle-banner,
.home-offer .bundle-banner-inner,
.home-offer .bundle-banner-card,
.home-def .definition { height: 100%; }
.home-offer .bundle-banner-inner { max-width: none; padding: 0; }
/* With the extra height comes empty space, so the words sit in the middle of
   it rather than at the top. */
.home-def .definition { display: flex; flex-direction: column; justify-content: center; }
/* The whole feature region sits on navy, so the gold headline and the splash
   read as one block rather than two cards on a pale page. */
.home-feature {
	background: linear-gradient(160deg, var(--color-primary) 0%, #242444 55%, #2b2b52 100%);
	color: #fff;
}
.home-feature .section-title { color: #fff; }
.home-feature .splash-track { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4); }
/* On navy the dots need to be light to be seen at all. */
.home-feature .splash-dot { background: rgba(255, 255, 255, 0.28); }
.home-feature .splash-dot:hover { background: rgba(255, 255, 255, 0.55); }
.home-feature .splash-dot.is-current { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); }

/* Fast Facts follows the reader down the page, and is never taller than the
   screen. The card itself does the clamping rather than the section around it,
   so a long answer scrolls inside the parchment and the timer bar stays put
   along the bottom edge instead of being pushed out of sight. */
.home-rail .ff-section { position: sticky; top: 88px; }
.home-rail .fastfact { display: flex; flex-direction: column; max-height: calc(100vh - 108px); }
.home-rail .ff-banner { flex: none; }
.home-rail .ff-body { flex: 1 1 auto; overflow: auto; }
.home-rail .ff-progress { flex: none; }

/* The definition sits in the top row, scaled down for the narrower column. */
.home-def .definition { padding: var(--spacing-sm) var(--spacing-md); }
.home-def .def-word { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
.home-def .def-word::after { width: 48px; height: 3px; margin-top: 0.6rem; }
.home-def .def-meta { font-size: 0.9rem; }
.home-def .def-etym { font-size: 0.82rem; margin-bottom: 0.6rem; }
.home-def .def-list li { font-size: 0.92rem; line-height: 1.35; }

/* The panel is a card in the rail rather than a full-width band. */
.home-rail .ff-section { padding: 0; background: none; }
.home-rail .ff-section > .inner { max-width: none; padding: 0; }
.home-rail .fastfact { max-width: none; }
.home-rail .ff-banner { min-height: 170px; }
.home-rail .ff-heading { font-size: 1.6rem; }
.home-rail .ff-body { padding: var(--spacing-sm) 1.25rem 1.25rem; min-height: 17rem; }
.home-rail .ff-q { font-size: 0.98rem; }
.home-rail .ff-a { font-size: 0.92rem; line-height: 1.6; }

/* The timer: a bar along the very bottom of the panel, filling as the current
   question or answer runs down. It sits outside the parchment body so nothing
   can scroll it away.

   Gold on the frame red, not red on parchment. The first attempt filled in the
   same deep red as the 4px frame directly beneath it, so a filling bar simply
   looked like a slightly thicker border and nobody could find it. */
.ff-progress { height: 10px; background: var(--color-quiz-edge); overflow: hidden; }
.ff-progress span {
	display: block; height: 100%; width: 0;
	background: var(--color-gold-bright);
	box-shadow: 0 0 8px rgba(255, 180, 0, 0.6);
}
/* Held still while someone reads: the bar goes quiet rather than disappearing,
   so it is clear the countdown is waiting rather than broken. */
.fastfact.is-paused .ff-progress span { background: rgba(255, 180, 0, 0.35); box-shadow: none; }

@media (max-width: 900px) {
	/* One column, in reading order: the offer, the headline and splash, the
	   definition, then Fast Facts. Nothing follows the scroll on a small screen,
	   which is only ever in the way. */
	.home-layout {
		grid-template-columns: 1fr;
		grid-template-areas: "offer" "main" "def" "rail";
		gap: var(--spacing-lg);
	}
	.home-offer .bundle-banner,
	.home-offer .bundle-banner-inner,
	.home-offer .bundle-banner-card,
	.home-def .definition { height: auto; }
	.home-rail .ff-section { position: static; }
	.home-rail .fastfact { max-height: none; }
	.home-rail .ff-body { overflow: visible; }
	.home-rail .ff-q { font-size: 1.05rem; }
	/* Picture above the words rather than beside them. */
	.splash-slide { grid-template-columns: 1fr; }
	.splash-media img { min-height: 220px; max-height: 300px; }
}
@media (max-width: 680px) {
	.splash-body { padding: var(--spacing-sm); }
	.splash-actions { flex-direction: column; }
	.splash-actions .btn { width: 100%; }
	.splash-dots { margin-top: 0.9rem; }
	/* Bigger targets for a thumb. */
	.splash-dot { width: 12px; height: 12px; }
	.ff-line { grid-template-columns: 1.7rem minmax(0, 1fr); }
	.ff-label { font-size: 1.4rem; }
}

/* ===== HOME SECTION GRID ===== */
.home-section { padding: var(--spacing-lg) 0; }
.home-section.alt { background: var(--color-bg-alt); }
.section-title { font-family: var(--font-serif); font-size: 1.75rem; margin-bottom: var(--spacing-md); color: var(--color-primary); text-align: center; }
.home-nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
.home-nav-card { display: block; padding: var(--spacing-md); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); transition: all var(--transition); border-bottom: 3px solid transparent; }
.home-nav-card:hover { border-bottom-color: var(--color-accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.home-nav-card h3 { font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-primary); margin-bottom: 0.4rem; }
.home-nav-card p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.5; }

/* ===== ART GALLERY (Digital Impressionism) ===== */
.art-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
.art-item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition); }
.art-item:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,0.14); }
.art-item img { width: 100%; height: 260px; object-fit: cover; }
.art-item figcaption { padding: var(--spacing-sm) var(--spacing-md); }
.art-item .art-title { font-family: var(--font-serif); color: var(--color-primary); font-size: 1.05rem; margin-bottom: 0.2rem; }
.art-item .art-caption { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; }

/* ===== MUSIC FEATURE ===== */
.music-feature { display: grid; grid-template-columns: 260px 1fr; gap: var(--spacing-lg); align-items: start; }
.music-feature img { border-radius: var(--radius); box-shadow: var(--shadow); }
.music-feature h2 { font-family: var(--font-serif); color: var(--color-primary); font-size: 1.6rem; margin-bottom: var(--spacing-sm); }
.music-feature audio { width: 100%; margin-top: var(--spacing-sm); }

/* ===== SHARED SMALL BITS ===== */
.catalog-empty { color: var(--color-text-muted); margin-top: var(--spacing-sm); }
.field-optional { color: var(--color-text-muted); font-weight: 400; }
.entry-media { padding-bottom: 0; }
.entry-feature { padding-bottom: 0; text-align: center; }
.entry-feature img { display: inline-block; max-height: 460px; width: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.note-muted { color: var(--color-text-muted); font-size: 0.9rem; margin-top: var(--spacing-md); }

/* ===== POST GRID / CARDS ===== */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
.post-card { background: var(--color-bg); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.post-card-image { width: 100%; height: 190px; object-fit: cover; }
.post-card-content { padding: var(--spacing-md); display: flex; flex-direction: column; flex: 1; }
.post-card-title { font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.4; margin-bottom: var(--spacing-xs); }
.post-card-title a { color: var(--color-primary); }
.post-card-title a:hover { color: var(--color-accent-dark); }
.post-card-excerpt { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; flex: 1; }
.post-card-meta { font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--spacing-sm); }

/* ===== PAGE + POST CONTENT ===== */
.page-header { padding: var(--spacing-lg) 0 var(--spacing-md); border-bottom: 1px solid var(--color-border); margin-bottom: var(--spacing-lg); }

/* Section pages (Music, Essays, Videos, Artwork, Bundles, the zine archive)
   share one header that holds the title and its intro copy together. */
.section-header {
	background: linear-gradient(180deg, #fff 0%, var(--color-bg-alt) 100%);
	border-bottom: 1px solid var(--color-border);
	box-shadow: inset 0 -3px 0 var(--color-accent);
	padding: var(--spacing-lg) 0;
	margin-bottom: var(--spacing-lg);
	text-align: center;
}
.section-header .page-eyebrow { margin-bottom: 0.4rem; }
.section-header .page-title::after {
	content: ""; display: block; width: 64px; height: 3px;
	background: var(--color-accent); border-radius: 2px;
	margin: 0.9rem auto 0;
}
.section-intro {
	max-width: 60ch; margin: var(--spacing-sm) auto 0;
	color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7;
}
.section-intro p { margin-bottom: 0.6rem; }
.section-intro p:last-child { margin-bottom: 0; }
.section-intro a { border-bottom: 1px solid var(--color-accent); }
.section-body { padding-bottom: var(--spacing-xl); }
.page-title { font-family: var(--font-serif); font-size: clamp(1.75rem, 4vw, 2.75rem); color: var(--color-primary); line-height: 1.2; }
.page-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: var(--spacing-xs); }
.entry { max-width: var(--content-width); margin: 0 auto; padding-bottom: var(--spacing-xl); }
.entry.wide { max-width: var(--max-width); }
.entry h2, .entry h3, .entry h4 { font-family: var(--font-serif); color: var(--color-primary); margin: 2rem 0 1rem; line-height: 1.3; }
.entry h2 { font-size: 1.5rem; } .entry h3 { font-size: 1.25rem; }
.entry p { margin-bottom: 1.4rem; line-height: 1.8; }
.entry ul, .entry ol { margin: 0 0 1.4rem 1.5rem; }
.entry li { margin-bottom: 0.4rem; line-height: 1.75; }
.entry img { border-radius: var(--radius); margin: 1.5rem auto; }
.entry blockquote { border-left: 4px solid var(--color-accent); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--color-bg-alt); font-style: italic; color: var(--color-text-muted); }
.aligncenter { margin-left: auto; margin-right: auto; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.wp-caption-text { font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; text-align: center; }

/* ===== CONTACT FORM ===== */
.contact-form { max-width: 600px; margin-top: var(--spacing-md); }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--color-primary); }
.form-group input, .form-group textarea { width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; color: var(--color-text); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(201,168,76,0.15); }
.form-group textarea { resize: vertical; min-height: 140px; }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { background: #e9f6ec; border: 1px solid #b6dfc0; color: #1f6b34; padding: 1rem 1.25rem; border-radius: var(--radius); margin-top: var(--spacing-md); }
.form-errors { background: #fdecea; border: 1px solid #f3c7c2; color: #a12d22; padding: 0.75rem 1.25rem; border-radius: var(--radius); margin: var(--spacing-md) 0; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }

/* ===== TRACK LISTING ===== */
.track-line { margin: 1.4rem 0 0.3rem; font-family: var(--font-serif); font-size: 1.05rem; color: var(--color-primary); }
.track-line .track-time { color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-left: 0.4rem; }
.entry .wp-block-audio { margin: 0 0 0.6rem; }
.entry .wp-block-audio audio { width: 100%; }

/* ===== VIDEO EMBEDS ===== */
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: var(--spacing-md) 0; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== BUNDLE BANNER + OFFER ===== */
/* A compact card that floats rather than a full-width band, per Dean's
   mockups: the cover breaks out of the frame top and bottom. The button lives
   inside the card, under the words it belongs to, so it shares their margins
   rather than hanging off the edge in its own space. */
.bundle-banner { padding: 0; }
.bundle-banner-card {
	display: grid; grid-template-columns: 104px minmax(0, 1fr);
	gap: var(--spacing-md); align-items: center;
	padding: 1.25rem var(--spacing-md);
	background: var(--color-quiz-paper);
	border: 1px solid #e6d4a0;
	border-radius: var(--radius);
}
.bundle-banner-imglink { display: block; }
/* The negative block margins are what let the cover overhang: they shrink what
   the image contributes to the row height without shrinking the image. */
.bundle-banner-art { width: 100%; height: auto; margin: -1.1rem 0; border-radius: var(--radius); box-shadow: 0 10px 26px rgba(26,26,46,0.35); }
.bundle-banner-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-dark); margin-bottom: 0.25rem; }
.bundle-banner-title { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.4vw, 1.65rem); line-height: 1.2; margin-bottom: 0.35rem; }
.bundle-banner-title a { color: var(--color-primary); }
.bundle-banner-title a:hover { color: var(--color-accent-dark); }
.bundle-banner-blurb { color: var(--color-quiz-ink); font-size: 0.92rem; line-height: 1.55; max-width: 52ch; }
.bundle-banner-action { margin-top: 0.85rem; }
.bundle-banner-action .btn { box-shadow: 0 6px 16px rgba(26,26,46,0.22); }

/* On the navy it needs to read as lifted off the page. */
.home-feature .bundle-banner-card { box-shadow: 0 16px 40px rgba(0,0,0,0.42); }
/* Already inside a column, so the shared .inner width and padding do not apply. */

.bundle-cover { text-align: center; margin-bottom: var(--spacing-md); }
.bundle-cover img { display: inline-block; max-height: 460px; width: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.bundle-order { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); }
.bundle-order h2 { font-family: var(--font-serif); font-size: 1.6rem; color: var(--color-primary); margin-bottom: var(--spacing-sm); }

@media (max-width: 680px) {
	/* Stacked, and the overhangs come off: they only read as deliberate when
	   there is room beside the card. */
	.bundle-banner-card { grid-template-columns: 1fr; text-align: center; padding: var(--spacing-md); }
	.bundle-banner-art { max-width: 180px; margin: 0 auto; }
	.bundle-banner-blurb { margin-left: auto; margin-right: auto; }
	.bundle-banner-action { margin-top: var(--spacing-sm); }
}

/* ===== ZINE ARCHIVE ===== */
.zine-index { list-style: none; margin: var(--spacing-md) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm); }
.zine-index-item { margin: 0; }
.zine-index-link { display: block; padding: 0.9rem 1.1rem; background: var(--color-bg-alt); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius); color: var(--color-text); transition: all var(--transition); }
.zine-index-link:hover { background: #fff; box-shadow: var(--shadow); transform: translateY(-2px); color: var(--color-text); }
.zine-index-title { display: block; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700; color: var(--color-primary); }
.zine-index-desc { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.2rem; }

/* A single issue */
.zine-meta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 700; }
.zine-toc { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: var(--spacing-md) 0 var(--spacing-lg); }
.zine-toc strong { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.5rem; }
.zine-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.zine-toc li { margin: 0; }
.zine-column { padding-top: var(--spacing-md); margin-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }
.zine-column:first-of-type { border-top: 0; margin-top: var(--spacing-md); }
.zine-column-title { font-family: var(--font-serif); font-size: 1.6rem; color: var(--color-primary); margin-bottom: var(--spacing-sm); }
.zine-column-title::after { content: ""; display: block; width: 48px; height: 3px; background: var(--color-accent); border-radius: 2px; margin-top: 0.5rem; }
.zine-column h3 { font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-primary); margin: 1.8rem 0 0.6rem; }
.zine-column img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.2rem auto; }
.zine-column a { border-bottom: 1px solid var(--color-accent); }

@media (max-width: 680px) {
	.zine-index { grid-template-columns: 1fr; }
}

/* ===== COMMENTS / GATE ===== */
.comments-area { max-width: var(--content-width); margin: var(--spacing-lg) auto 0; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); }
.comments-area h3 { font-family: var(--font-serif); font-size: 1.4rem; margin-bottom: var(--spacing-sm); color: var(--color-primary); }
.gate-box { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--spacing-lg); text-align: center; }
.gate-box h3 { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--color-primary); }
.gate-box p { color: var(--color-text-muted); margin-bottom: var(--spacing-md); }
.commentlist { list-style: none; margin: 0; }
.commentlist li { margin-bottom: var(--spacing-md); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--color-border); }

/* ===== FOOTER ===== */
.site-footer { background: var(--color-primary); color: rgba(255,255,255,0.65); padding: var(--spacing-lg) 0 var(--spacing-md); }
.footer-top { display: grid; grid-template-columns: 2fr 2fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.footer-name { font-family: var(--font-serif); font-size: 1.15rem; color: #fff; margin-bottom: 0.5rem; }
.footer-desc { font-size: 0.88rem; line-height: 1.6; max-width: 40ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.6rem; list-style: none; margin: 0; padding: 0; }
.footer-nav li { list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: rgba(255,255,255,0.6); font-size: 0.88rem; line-height: 1.4; }
.footer-nav a:hover { color: var(--color-accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--spacing-md); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.5rem var(--spacing-md); align-items: baseline; justify-content: space-between; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem var(--spacing-sm); list-style: none; margin: 0; padding: 0; }
.footer-legal li { list-style: none; margin: 0; padding: 0; }
.footer-legal li + li::before { content: "\00b7"; margin-right: var(--spacing-sm); color: rgba(255,255,255,0.35); }
.footer-legal a { color: rgba(255,255,255,0.75); }
.footer-legal a:hover { color: var(--color-accent); }
.footer-copy { color: rgba(255,255,255,0.6); }

/* ===== PAGINATION ===== */
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: var(--spacing-lg); }
.pagination a, .pagination .current { padding: 0.5rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.9rem; color: var(--color-text); }
.pagination a:hover, .pagination .current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ===== 404 ===== */
.error-page { text-align: center; padding: var(--spacing-xl) 0; }
.error-code { font-size: 5rem; font-family: var(--font-serif); color: var(--color-accent); line-height: 1; }
.error-title { font-size: 1.6rem; }
.error-text { color: var(--color-text-muted); margin: 1rem 0 2rem; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-cover { order: -1; } .hero-cover img { max-height: 340px; }
    .hero-actions { justify-content: center; }
    .home-nav-grid { grid-template-columns: repeat(2, 1fr); }
    .music-feature { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .site-nav li a { padding: 0.4rem 0.5rem; font-size: 0.78rem; }
}
@media (max-width: 680px) {
    /* The brand must be allowed to give way, otherwise the long tagline
       pushes the hamburger clean off the right-hand edge and there is no way
       into the menu at all. The tagline is decorative and repeats in the
       footer, so it steps aside on a phone. */
    .header-inner { gap: var(--spacing-sm); flex-wrap: nowrap; }
    .site-brand { flex-shrink: 1; min-width: 0; }
    .site-name { font-size: 1.15rem; }
    .site-tagline-mini { display: none; }
    .nav-toggle { display: flex; flex-shrink: 0; margin-left: auto; }
    /* The whole panel drops down, so Log In and Account are reachable on a
       phone. Previously only the navigation opened and the account links were
       hidden outright. */
    .header-menu { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--color-primary); border-top: 1px solid rgba(255,255,255,0.1); padding: var(--spacing-xs) 0; box-shadow: 0 8px 16px rgba(0,0,0,0.2); }
    .header-menu.is-open { display: block; }
    .site-nav ul { flex-direction: column; gap: 0; }
    .site-nav li a { display: block; padding: 0.75rem var(--spacing-md); border-radius: 0; font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
    .header-inner { position: relative; }
    /* Set apart from the pages above them, and given the same tap target. */
    .header-auth { display: block; border-top: 1px solid rgba(255,255,255,0.14); margin-top: var(--spacing-xs); padding-top: var(--spacing-xs); }
    .header-auth a { display: block; padding: 0.75rem var(--spacing-md); font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
    .home-nav-grid, .art-grid, .post-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: center; }
    .inner { padding: 0 var(--spacing-sm); }
}