/* ============================================================
   Sean Kendrick — Theme CSS
   Design system: Brief v4
   Fonts: Source Serif 4, Inter (Google Fonts)
   Colours: #FFFFFF, #0A0A0A, #666666, #E5E5E5, #0A0A0A
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
	/* Colours */
	--color-bg:      #FFFFFF;
	--color-text:    #0A0A0A;
	--color-quiet:   #666666;
	--color-line:    #E5E5E5;
	--color-feature: #0A0A0A;

	/* Fonts */
	--font-serif: 'Source Serif 4', Georgia, serif;
	--font-sans:  'Inter', -apple-system, sans-serif;

	/* Desktop type sizes */
	--size-h1:         64px;
	--size-h1-hero:    96px;
	--size-h2:         56px;
	--size-h3:         40px;
	--size-body:       19px;
	--size-pitch:      24px;
	--size-pitch-hero: 28px;
	--size-small:      13px;

	/* Spacing */
	--space-section: 72px;
	--space-book:    56px;
	--space-event:   40px;
	--space-page-h:  80px;
	--space-hero-v:  60px;
}

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

/* ── Base ──────────────────────────────────────────────────── */
html {
	scroll-behavior: smooth;
	background: var(--color-bg);
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: var(--size-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
	color: var(--color-text);
}

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

input,
textarea,
button {
	font: inherit;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	text-wrap: balance;
}

h1 {
	font-size: var(--size-h1);
	margin: 0 0 64px;
	line-height: 1;
}

h2 {
	font-size: var(--size-h2);
	margin: 0 0 22px;
}

h3 {
	font-size: var(--size-h3);
	margin: var(--space-event) 0 28px;
	line-height: 1.1;
}

p, ul, ol {
	margin: 0 0 18px;
}

.pitch {
	font-style: italic;
	font-weight: 400;
	font-size: var(--size-pitch);
	line-height: 1.4;
	max-width: 720px;
	margin: 0 0 24px;
}

.prose p,
.entry-content p {
	max-width: 640px;
}

.meta, .small-caps, .meta-line, .event-date {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
	margin: 0 0 14px;
}

.hairline, hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: var(--space-book) 0;
}

/* ── Site shell ────────────────────────────────────────────── */
.site-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ── Site header ───────────────────────────────────────────── */
.site-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 24px var(--space-page-h);
	border-bottom: 1px solid var(--color-line);
	background: var(--color-bg);
	position: sticky;
	top: 0;
	z-index: 30;
}

.site-header-bar {
	display: flex;
	align-items: center;
}

.site-branding {
	display: flex;
	align-items: center;
}

.site-title {
	font-family: 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
	font-weight: bold;
	font-style: italic;
	font-size: 24px;
	letter-spacing: 0.1em;
	text-transform: none;
	text-decoration: none;
	color: var(--color-text);
	display: inline-block;
	transform-origin: left center;
	transition: opacity 200ms ease, transform 200ms ease;
}

.site-title:hover,
.site-title:focus-visible {
	opacity: 0.6;
	transform: scaleX(1.06);
}

.site-logo {
	height: 32px;
	width: auto;
	display: block;
}

/* ── Navigation ────────────────────────────────────────────── */
.site-navigation .menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.site-navigation a {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-text);
	padding: 6px 14px;
	border: 1px solid transparent;
	border-radius: 2px;
	display: inline-block;
	transition: border-color 180ms ease, opacity 180ms ease;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
	border-color: var(--color-line);
}

.site-navigation .current-menu-item > a,
.site-navigation .current_page_item > a,
.site-navigation .current-menu-ancestor > a {
	border: 1px solid var(--color-text);
	border-radius: 2px;
	padding: 6px 14px;
}

/* Mobile nav toggle */
.site-nav-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-text);
	border-radius: 2px;
	padding: 6px 12px;
	font-family: var(--font-sans);
	font-size: var(--size-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--color-text);
	box-shadow: none;
	align-items: center;
	gap: 6px;
}

.site-nav-toggle-label {
	line-height: 1;
}

.site-nav-toggle-icon {
	display: inline-grid;
	gap: 3px;
	width: 16px;
}

.site-nav-toggle-icon span {
	display: block;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 220ms ease, opacity 140ms ease;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon span:nth-child(1) {
	transform: translateY(4.5px) rotate(45deg);
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon span:nth-child(2) {
	opacity: 0;
}

.site-nav-toggle[aria-expanded="true"] .site-nav-toggle-icon span:nth-child(3) {
	transform: translateY(-4.5px) rotate(-45deg);
}

/* ── Main content ──────────────────────────────────────────── */
.site-main {
	flex: 1;
}

/* ── Site footer ───────────────────────────────────────────── */
.site-footer {
	padding: 40px var(--space-page-h);
	border-top: 1px solid var(--color-line);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: var(--font-sans);
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
}

/* ── Page hero ─────────────────────────────────────────────── */
.page-hero {
	background: var(--color-feature);
	color: #FFFFFF;
	padding: var(--space-hero-v) var(--space-page-h) calc(var(--space-hero-v) + 20px);
}

.page-hero h1 {
	font-size: var(--size-h1);
	color: #FFFFFF;
	margin-bottom: 20px;
	line-height: 1;
}

.page-hero .hero-pitch {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--size-pitch);
	color: #FFFFFF;
	max-width: 820px;
	margin: 0;
	line-height: 1.4;
}

/* ── Standard page ─────────────────────────────────────────── */
.page-entry {
	padding: var(--space-section) var(--space-page-h);
}

.page-entry .entry-content p {
	max-width: 640px;
}

/* First paragraph on prose pages is an editorial intro at pitch size. */
.page-entry-wide .entry-content:not(.contact-content) > p:first-child {
	font-size: var(--size-pitch);
	font-style: italic;
	line-height: 1.4;
	max-width: 720px;
	margin-bottom: var(--space-event);
}

/* ── Bio page ──────────────────────────────────────────────── */
.bio-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 0 var(--space-book);
	align-items: start;
}

.bio-layout-no-image {
	grid-template-columns: 1fr;
}

.bio-portrait img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

/* ── Home welcome ──────────────────────────────────────────── */
.home-welcome {
	padding: var(--space-section) var(--space-page-h);
	display: flex;
	justify-content: center;
}

.home-welcome-card {
	width: min(100%, 520px);
	border: 1.5px solid #111111;
	padding: 3rem 2.25rem;
}

.home-welcome-header {
	text-align: center;
	margin-bottom: 2rem;
}

.home-welcome-header .gate-badge {
	margin-bottom: 1.75rem;
}

.home-welcome-header .gate-divider {
	max-width: 280px;
	margin: 0 auto;
}

.home-welcome-name {
	font-family: 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
	font-size: 42px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.1;
	margin: 0 0 1.5rem;
	color: var(--color-text);
}

.home-welcome-body {
	margin-bottom: 1.75rem;
}

.home-welcome-body p {
	font-size: 15px;
	line-height: 1.8;
	color: #222222;
	margin: 0 0 1.25rem;
}

.home-welcome-body p:last-child {
	margin-bottom: 0;
}

.home-welcome-nav {
	border-top: 0.5px solid var(--color-text);
	border-bottom: 0.5px solid var(--color-text);
	padding: 1.5rem 0;
	margin: 0 0 1.75rem;
}

.home-welcome-nav-item {
	margin-bottom: 1.25rem;
}

.home-welcome-nav-item:last-child {
	margin-bottom: 0;
}

.home-welcome-nav-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 4px;
}

.home-welcome-numeral {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 13px;
	color: var(--color-quiet);
	min-width: 22px;
}

.home-welcome-nav-title {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	color: var(--color-text);
	text-decoration: none;
	border-bottom: 0.5px solid var(--color-text);
	padding-bottom: 1px;
	transition: opacity 180ms ease;
}

.home-welcome-nav-title:hover {
	opacity: 0.6;
}

.home-welcome-nav-desc {
	font-size: 14px;
	line-height: 1.6;
	color: #444444;
	margin: 0 0 0 36px;
}

.home-welcome-closing {
	font-size: 14px;
	line-height: 1.75;
	color: #444444;
	font-style: italic;
	margin: 0 0 1rem;
}

.home-welcome-signature {
	font-family: 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
	font-size: 22px;
	font-style: italic;
	font-weight: 400;
	color: var(--color-text);
	margin: 1.5rem 0 0;
}

/* ── Books index ───────────────────────────────────────────── */
.archive-page.books-index {
	padding: var(--space-section) var(--space-page-h);
}

.books-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.book-row {
	padding: var(--space-book) 0;
	border-top: 1px solid var(--color-line);
}

.book-row:first-child {
	border-top: none;
	padding-top: 0;
}

.book-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.book-row h2 {
	font-size: var(--size-h3);
	margin-bottom: 16px;
	line-height: 1.05;
}

.book-row h2 a {
	text-decoration: none;
	color: var(--color-text);
}

.book-row h2 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.1em;
}

.book-pitch {
	font-style: italic;
	font-size: var(--size-pitch);
	line-height: 1.4;
	max-width: 720px;
	margin: 0 0 14px;
}

.book-genre-line {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
	margin: 0 0 18px;
}

.book-links {
	display: flex;
	flex-direction: row;
	gap: 24px;
	flex-wrap: wrap;
}

.book-links a {
	font-family: var(--font-serif);
	font-size: var(--size-body);
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* ── Book detail ───────────────────────────────────────────── */
.manuscript-entry {
	padding: 0;
}

.manuscript-body {
	padding: var(--space-section) var(--space-page-h);
}

.manuscript-metadata {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
	margin-bottom: var(--space-book);
}

.manuscript-section {
	margin-bottom: var(--space-section);
}

.manuscript-section h2 {
	font-size: var(--size-h3);
	margin: 0 0 28px;
	line-height: 1.1;
}

.manuscript-section-body p {
	max-width: 640px;
}

/* ── Events ────────────────────────────────────────────────── */
.archive-page.events-page {
	padding: var(--space-section) var(--space-page-h);
}

.events-list {
	margin: 0;
	padding: 0;
}

.event-row {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 0 40px;
	padding: var(--space-event) 0;
	border-top: 1px solid var(--color-line);
	align-items: start;
}

.event-row:first-child {
	border-top: none;
	padding-top: 0;
}

.event-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.event-date {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
	padding-top: 6px;
	margin: 0;
}

.event-details h2 {
	font-size: var(--size-h3);
	margin-bottom: 10px;
	line-height: 1.05;
}

.event-details .meta-line {
	margin-bottom: 6px;
}

.event-details .event-role {
	font-style: italic;
	color: var(--color-quiet);
	margin: 0;
}

.past-events-panel {
	margin-top: var(--space-section);
	border-top: 1px solid var(--color-line);
	padding-top: 40px;
}

.past-events-panel summary {
	font-family: var(--font-sans);
	font-size: var(--size-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	color: var(--color-quiet);
	list-style: none;
	margin-bottom: 40px;
}

.past-events-panel summary::-webkit-details-marker {
	display: none;
}

/* ── Contact page ──────────────────────────────────────────── */
.contact-content .contact-intro {
	font-size: var(--size-pitch);
	max-width: 640px;
	margin-bottom: var(--space-book);
}

.contact-content .contact-email {
	font-family: var(--font-serif);
	font-size: var(--size-h3);
	font-weight: 400;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--color-text);
	display: block;
}

.contact-content .contact-email:hover {
	text-decoration: underline;
}

/* ── Gate page ─────────────────────────────────────────────── */
.gate-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 40px var(--space-page-h);
	background: var(--color-bg);
}

.gate-card {
	width: min(100%, 480px);
}

.gate-bordered {
	border: 1.5px solid var(--color-text);
	padding: 3.25rem 2.5rem;
	text-align: center;
}

.gate-badge {
	display: inline-block;
	background: var(--color-text);
	color: var(--color-bg);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 8px 20px 7px;
	margin: 0 0 2.5rem;
}

.gate-name {
	font-family: 'Snell Roundhand', 'Apple Chancery', 'Brush Script MT', cursive;
	font-size: 52px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.1;
	margin: 0 0 1.75rem;
	color: var(--color-text);
}

.gate-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 1.75rem;
}

.gate-divider-line {
	flex: 1;
	height: 0.5px;
	background: var(--color-text);
}

.gate-ornament {
	font-size: 14px;
	color: var(--color-text);
	line-height: 1;
}

.gate-description {
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-text);
	margin: 0 0 0.75rem;
}

.gate-tagline {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-quiet);
	font-style: italic;
	margin: 0 0 2.5rem;
}

.gate-form {
	display: grid;
	gap: 10px;
	margin: 0 0 8px;
}

.gate-form input[type="password"] {
	border: 0.5px solid var(--color-text);
	background: transparent;
	font-family: var(--font-serif);
	font-size: var(--size-body);
	letter-spacing: 0.02em;
}

.gate-form button {
	width: 100%;
	font-family: var(--font-serif);
	font-size: 12px;
	letter-spacing: 0.28em;
	border-radius: 0;
	border: none;
	transition: opacity 180ms ease;
}

.gate-form button:hover,
.gate-form button:focus-visible {
	background: var(--color-text);
	color: var(--color-bg);
	opacity: 0.75;
}

.request-access-form {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="date"],
textarea {
	width: 100%;
	border: 1px solid var(--color-line);
	border-radius: 0;
	background: var(--color-bg);
	padding: 12px 14px;
	color: var(--color-text);
	font-size: var(--size-body);
	appearance: none;
}

input:focus,
textarea:focus {
	outline: 2px solid var(--color-text);
	outline-offset: -1px;
	border-color: var(--color-text);
}

button,
.wp-element-button,
input[type="submit"] {
	appearance: none;
	border: 1px solid var(--color-text);
	border-radius: 2px;
	background: var(--color-text);
	color: var(--color-bg);
	cursor: pointer;
	padding: 12px 24px;
	font-family: var(--font-sans);
	font-size: var(--size-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: none;
}

button:hover,
button:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible {
	background: var(--color-bg);
	color: var(--color-text);
}

.gate-message {
	margin: 12px 0 0;
	font-family: var(--font-sans);
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
}

.gate-error { color: var(--color-text); }

.gate-request-panel {
	margin-top: 2rem;
}

.gate-request-panel summary {
	list-style: none;
	cursor: pointer;
	text-align: center;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-quiet);
	border-bottom: 0.5px solid var(--color-text);
	padding-bottom: 2px;
	display: inline-block;
}

.gate-request-panel summary::-webkit-details-marker {
	display: none;
}

.gate-request-panel[open] summary {
	margin-bottom: 20px;
}

.request-access-form label {
	display: block;
	text-align: left;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-quiet);
	margin-bottom: 4px;
}

.request-access-form input,
.request-access-form textarea {
	background: transparent;
	border: 0.5px solid var(--color-text);
}

.request-access-form button {
	width: 100%;
	font-family: var(--font-serif);
	font-size: 12px;
	letter-spacing: 0.28em;
	border-radius: 0;
	border: none;
	margin-top: 4px;
	transition: opacity 180ms ease;
}

.request-access-form button:hover,
.request-access-form button:focus-visible {
	background: var(--color-text);
	color: var(--color-bg);
	opacity: 0.75;
}

/* ── Archive note ──────────────────────────────────────────── */
.archive-note {
	font-family: var(--font-sans);
	font-size: var(--size-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-quiet);
	margin-top: var(--space-section);
	padding-top: 40px;
	border-top: 1px solid var(--color-line);
}

/* ── Mobile ≤ 900px ────────────────────────────────────────── */
@media (max-width: 900px) {
	:root {
		--size-h1:         48px;
		--size-h1-hero:    56px;
		--size-h2:         36px;
		--size-h3:         28px;
		--size-pitch:      20px;
		--size-pitch-hero: 22px;
		--space-page-h:    24px;
		--space-section:   48px;
		--space-book:      36px;
		--space-event:     24px;
		--space-hero-v:    36px;
	}

	.site-header {
		flex-direction: column;
		align-items: stretch;
		padding: 16px var(--space-page-h);
	}

	.site-header-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.site-nav-toggle {
		display: inline-flex;
	}

	.sk-js .site-navigation {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		transition: max-height 300ms ease, opacity 220ms ease;
		width: 100%;
	}

	.sk-js .site-navigation.is-open {
		max-height: 600px;
		opacity: 1;
		pointer-events: auto;
		border-top: 1px solid var(--color-line);
		margin-top: 12px;
		padding-top: 12px;
	}

	.site-navigation .menu {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.site-navigation .menu > li {
		width: 100%;
	}

	.site-navigation a {
		display: block;
		width: 100%;
		padding: 12px 0;
		border: none;
		border-radius: 0;
		border-bottom: 1px solid var(--color-line);
	}

	.site-navigation .current-menu-item > a,
	.site-navigation .current_page_item > a,
	.site-navigation .current-menu-ancestor > a {
		border: none;
		border-radius: 0;
		border-bottom: 1px solid var(--color-line);
		font-weight: 700;
	}

	.bio-layout {
		grid-template-columns: 1fr;
		gap: var(--space-book) 0;
	}

	h1 {
		margin-bottom: 32px;
	}

	.event-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ── Desktop > 900px ───────────────────────────────────────── */
@media (min-width: 901px) {
	.site-nav-toggle {
		display: none;
	}

	.site-navigation,
	.sk-js .site-navigation,
	.sk-js .site-navigation.is-open {
		max-height: none;
		overflow: visible;
		opacity: 1;
		pointer-events: auto;
	}
}

/* ── Back to top ───────────────────────────────────────────── */
.back-to-top {
	background: transparent;
	border: none;
	color: var(--color-quiet);
	font-family: var(--font-sans);
	font-size: var(--size-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0;
	cursor: pointer;
	margin-left: auto;
	transition: color 160ms ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
	color: var(--color-text);
	background: transparent;
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}