/*
Theme Name: Etherzine
Theme URI: https://etherealmaterials.net/
Author: Ethereal Materials
Description: An issue-based journal theme for long-form writing on theatre in extended reality. Pinned chrome inside a proscenium frame, a numbered running order per issue, and sequential prev/next reading through an issue taxonomy. Auditorium palette: warm bone type in a dark house.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: etherzine
Tags: editorial, journal, magazine, dark, custom-menu
*/



/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

:root {
	--ink:        #e9e3d7;
	--paper:      #0e0d0c;
	--veil:       #8a8175;
	--rule:       #2e2a25;
	--rule-soft:  #221f1b;
	--gel:        #f2c879;

	--display: "Bodoni Moda", Didot, "Times New Roman", serif;
	--body:    "Spectral", Georgia, serif;
	--mono:    "JetBrains Mono", ui-monospace, monospace;

	--inset: 14px;
	--gutter: 20px;
	--measure: 33rem;

	--step--1: clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);
	--step-0:  clamp(1.04rem, 1rem + 0.2vw, 1.16rem);
	--step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.62rem);
	--step-2:  clamp(1.8rem, 1.4rem + 1.6vw, 2.9rem);
	--step-3:  clamp(2.5rem, 1.6rem + 3.8vw, 5.6rem);
	--step-4:  clamp(3rem, 1.5rem + 6.6vw, 8.6rem);
}

@media (min-width: 48rem) {
	:root {
		--inset: 24px;
		--gutter: 40px;
	}
}

/* ------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------ */

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--step-0);
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	overflow: hidden; /* the stage scrolls, not the document */
}

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

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

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--inset);
	z-index: 300;
	background: var(--ink);
	color: var(--paper);
	padding: 0.6em 1em;
	font-family: var(--mono);
	font-size: var(--step--1);
}

.skip-link:focus { top: var(--inset); }

/* ------------------------------------------------------------------
   3. The boundary — signature element
   Reads as print crop marks and as a VR guardian boundary at once.
   ------------------------------------------------------------------ */

.boundary {
	position: fixed;
	inset: var(--inset);
	border: 1px solid var(--rule);
	pointer-events: none;
	z-index: 90;
}

.boundary__tick {
	position: absolute;
	width: 11px;
	height: 11px;
	border: 0 solid var(--ink);
}

.boundary__tick--tl { top: -1px; left: -1px;   border-top-width: 2px; border-left-width: 2px; }
.boundary__tick--tr { top: -1px; right: -1px;  border-top-width: 2px; border-right-width: 2px; }
.boundary__tick--bl { bottom: -1px; left: -1px;  border-bottom-width: 2px; border-left-width: 2px; }
.boundary__tick--br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Scroll progress rides the bottom edge of the boundary. */
.boundary__progress {
	position: absolute;
	left: -1px;
	bottom: -1px;
	height: 2px;
	width: 0;
	background: var(--ink);
	transform-origin: left center;
}

/* ------------------------------------------------------------------
   4. Shell — pinned chrome, scrolling stage
   ------------------------------------------------------------------ */

.shell {
	display: flex;
	flex-direction: column;
	height: 100svh;
	padding: calc(var(--inset) + 1px);
}

.masthead,
.footbar {
	flex: 0 0 auto;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem var(--gutter);
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.masthead { border-bottom: 1px solid var(--rule-soft); }
.footbar  { border-top: 1px solid var(--rule-soft); }

.stage {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
}

.stage::-webkit-scrollbar { width: 6px; }
.stage::-webkit-scrollbar-thumb { background: var(--rule); }

/* ------------------------------------------------------------------
   5. Masthead
   ------------------------------------------------------------------ */

.masthead__title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--step--1);
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.masthead__title a { text-decoration: none; }

.masthead__nav ul {
	display: flex;
	gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.masthead__nav a {
	text-decoration: none;
	color: var(--veil);
	transition: color 0.15s;
}

.masthead__nav a:hover,
.masthead__nav .current-menu-item > a,
.masthead__nav .current-menu-parent > a {
	color: var(--ink);
}

.nav-toggle { display: none; font-family: var(--mono); letter-spacing: 0.08em; }

@media (max-width: 47.99rem) {
	.nav-toggle { display: block; }

	.masthead__nav {
		position: fixed;
		inset: var(--inset);
		z-index: 120;
		background: var(--paper);
		display: none;
		place-content: center;
	}

	.masthead__nav[data-open="true"] { display: grid; }

	.masthead__nav ul {
		flex-direction: column;
		gap: 1.1rem;
		text-align: center;
	}

	.masthead__nav a {
		font-family: var(--display);
		font-size: var(--step-1);
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: none;
		color: var(--ink);
	}
}

/* ------------------------------------------------------------------
   6. Cover — the front page
   ------------------------------------------------------------------ */

.cover {
	min-height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
	padding: clamp(1.5rem, 4vh, 4rem) var(--gutter) 1.5rem;
}

.cover__body { align-self: center; max-width: 52rem; }

.cover__eyebrow {
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--veil);
	margin: 0 0 1.4rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.cover__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.cover__title {
	font-family: var(--display);
	font-size: var(--step-4);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.03em;
	margin: 0;
	max-width: 14ch;
	text-wrap: balance;
}

.cover__standfirst {
	max-width: var(--measure);
	margin: 1.8rem 0 0;
	font-size: var(--step-1);
	line-height: 1.4;
	color: var(--ink);
	font-style: italic;
}

.cover__enter {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2.4rem;
	padding: 0.7em 1.3em;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.18s ease;
}

.cover__enter:hover { transform: translateX(4px); }

.cover__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--veil);
	padding-top: 1.2rem;
	border-top: 1px solid var(--rule-soft);
}

/* ------------------------------------------------------------------
   7. Running order — the issue contents
   ------------------------------------------------------------------ */

.order {
	max-width: 62rem;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vh, 3.5rem) var(--gutter) 4rem;
}

.order__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-bottom: 1.2rem;
	border-bottom: 2px solid var(--ink);
}

.order__title {
	font-family: var(--display);
	font-size: var(--step-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}

.order__label {
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--veil);
}

.order__name {
	font-family: var(--display);
	font-size: var(--step-2);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 1.6rem 0 0;
	max-width: 20ch;
}

.order__intro {
	max-width: var(--measure);
	margin: 1.2rem 0 0;
	color: var(--ink);
	font-style: italic;
}

.order__list {
	list-style: none;
	margin: 2.2rem 0 0;
	padding: 0;
}

.order__item { border-bottom: 1px solid var(--rule-soft); }

.order__link {
	display: grid;
	grid-template-columns: 3.2rem 1fr auto;
	gap: 0.3rem 1.2rem;
	padding: 1.1rem 0;
	text-decoration: none;
	align-items: baseline;
}

@media (max-width: 40rem) {
	.order__link {
		grid-template-columns: 2.6rem 1fr;
	}

	.order__meta { grid-column: 2; }
}

.order__num {
	font-family: var(--mono);
	font-size: var(--step--1);
	color: var(--veil);
	padding-top: 0.45em;
	font-variant-numeric: tabular-nums;
}

.order__piece-title {
	display: block;
	font-family: var(--display);
	font-size: var(--step-1);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: pretty;
}

.order__byline {
	display: block;
	margin: 0.35rem 0 0;
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--veil);
}

.order__meta {
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--veil);
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.order__meta span + span::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--rule);
}

.order__link:hover .order__num,
.order__link:focus-visible .order__num {
	background: var(--ink);
	color: var(--paper);
	padding-left: 0.4em;
	padding-right: 0.4em;
}

.order__link:hover .order__piece-title { text-decoration: underline; }

/* ------------------------------------------------------------------
   8. Article
   ------------------------------------------------------------------ */

.article {
	padding: clamp(1.5rem, 5vh, 4.5rem) var(--gutter) 5rem;
}

.article__inner { max-width: var(--measure); margin: 0 auto; }

.article__standing {
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--veil);
	margin: 0 0 1.2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
}

.article__title {
	font-family: var(--display);
	font-size: var(--step-3);
	font-weight: 800;
	line-height: 0.94;
	letter-spacing: -0.03em;
	margin: 0 0 1.4rem;
	text-wrap: balance;
}

.article__byline {
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-bottom: 1.6rem;
	margin-bottom: 2.4rem;
	border-bottom: 2px solid var(--ink);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
}

.article__figure { margin: 2.4rem 0; }

.article__figure img { width: 100%; }

.article__figure figcaption,
.entry-content figcaption {
	font-family: var(--mono);
	font-size: var(--step--1);
	line-height: 1.5;
	color: var(--veil);
	margin-top: 0.7rem;
}

/* Long-form content */

.entry-content > * + * { margin-top: 1.15em; }

.entry-content p { margin: 0; }

.entry-content h2,
.entry-content h3 {
	font-family: var(--display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-top: 2.4em;
}

.entry-content h2 { font-size: var(--step-1); }
.entry-content h3 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: 0.08em; }

.entry-content a { text-decoration-color: var(--veil); }
.entry-content a:hover { text-decoration-color: var(--ink); }

.entry-content blockquote {
	margin: 2em 0;
	padding-left: 1.4em;
	border-left: 2px solid var(--ink);
	font-style: italic;
}

.entry-content blockquote p + p { margin-top: 1em; }

.entry-content img,
.entry-content .wp-block-image { margin-block: 2em; }

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 2.6em 0;
}

.entry-content ul,
.entry-content ol { padding-left: 1.3em; }

.entry-content li + li { margin-top: 0.4em; }

.entry-content code,
.entry-content pre {
	font-family: var(--mono);
	font-size: 0.88em;
}

.entry-content pre {
	overflow-x: auto;
	padding: 1.2em;
	border: 1px solid var(--rule);
}

.entry-content .wp-caption-text { font-family: var(--mono); font-size: var(--step--1); color: var(--veil); }

.article__end {
	margin-top: 3rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: var(--step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--veil);
}

/* ------------------------------------------------------------------
   9. Footbar — sequential navigation
   ------------------------------------------------------------------ */

.footbar { position: relative; }

.seq {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
}

.seq--next { margin-left: auto; text-align: right; justify-content: flex-end; }

.seq a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--veil);
	min-width: 0;
	transition: color 0.15s;
}

.seq a:hover { color: var(--ink); }

.seq__label {
	max-width: 26ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-transform: none;
	letter-spacing: 0.02em;
}

.seq__arrow { flex: 0 0 auto; }

.seq__position {
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	letter-spacing: 0.1em;
}

.seq--disabled { color: var(--rule); }

@media (max-width: 47.99rem) {
	.seq__label { display: none; }
	.masthead__nav-list-desktop { display: none; }
}

.footbar__social {
	display: flex;
	gap: 1rem;
}

.footbar__social a { text-decoration: none; color: var(--veil); }
.footbar__social a:hover { color: var(--ink); }

/* ------------------------------------------------------------------
   10. Pages, archive fallback, 404
   ------------------------------------------------------------------ */

.page-wrap {
	padding: clamp(1.5rem, 5vh, 4.5rem) var(--gutter) 5rem;
}

.page-wrap__inner { max-width: var(--measure); margin: 0 auto; }

.page-title {
	font-family: var(--display);
	font-size: var(--step-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 1.6rem;
	padding-bottom: 1.2rem;
	border-bottom: 2px solid var(--ink);
}

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

.plain-list li { border-bottom: 1px solid var(--rule-soft); padding: 1rem 0; }

.plain-list a { text-decoration: none; font-family: var(--display); font-weight: 700; }

.plain-list a:hover { text-decoration: underline; }

.plain-list .meta {
	display: block;
	font-family: var(--mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--veil);
	margin-top: 0.3rem;
}

.pagination {
	margin-top: 2.5rem;
	font-family: var(--mono);
	font-size: var(--step--1);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pagination .page-numbers { padding: 0.3em 0.6em; text-decoration: none; }
.pagination .current { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------
   11. Motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.cover__enter:hover { transform: none; }
}

/* Print: drop the chrome, let the text out of the box. */
@media print {
	body { overflow: visible; }
	.boundary, .masthead, .footbar { display: none; }
	.shell { height: auto; padding: 0; }
	.stage { overflow: visible; }
}

/* --- Auditorium overrides ------------------------------------------------ */

@media (min-width: 48rem) {
	:root { --inset: 24px; --gutter: 40px; }
}

body {
	font-weight: 400;
	/* Antialiased smoothing thins light-on-dark type. Let it stay solid. */
	-webkit-font-smoothing: auto;
}

/* Large text can afford the lighter cut. */
.cover__standfirst, .order__intro { font-weight: 300; }

/* The frame reads as a proscenium edge: warmer, and lit at the corners. */
.boundary { border-color: var(--rule); }
.boundary__tick { border-color: var(--gel); opacity: 0.55; }
.boundary__progress { background: var(--gel); opacity: 0.75; }

/* A pool of houselight behind the title. */
.cover { position: relative; }

.cover::before {
	content: "";
	position: absolute;
	left: -10%;
	top: 8%;
	width: 78%;
	height: 70%;
	background: radial-gradient( ellipse at 30% 45%, rgba(242, 200, 121, 0.13), rgba(242, 200, 121, 0) 62% );
	pointer-events: none;
	z-index: 0;
}

.cover__body, .cover__meta { position: relative; z-index: 1; }

.cover__title {
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 0.92;
}

.cover__eyebrow { color: var(--gel); opacity: 0.8; }
.cover__eyebrow::after { background: var(--rule); }

.cover__standfirst { color: var(--ink); opacity: 0.88; }

.cover__enter {
	background: transparent;
	color: var(--gel);
	border: 1px solid var(--gel);
}

.cover__enter:hover { background: var(--gel); color: var(--paper); }

/* Running order as a cast list, with real dot leaders. */
.order__head { border-bottom-color: var(--gel); }
.order__title, .order__name { font-weight: 600; }

.order__piece-title {
	display: flex;
	align-items: baseline;
	font-weight: 400;
}

.order__piece-title::after {
	content: "";
	flex: 1;
	margin-left: 0.7em;
	border-bottom: 1px dotted var(--rule);
	transform: translateY(-0.28em);
}

.order__item { border-bottom-color: transparent; }

.order__link:hover .order__num {
	background: var(--gel);
	color: var(--paper);
}

.order__link:hover .order__piece-title { text-decoration: none; color: var(--gel); }

.article__byline { border-bottom-color: var(--gel); }
.article__title { font-weight: 600; letter-spacing: -0.01em; }

.entry-content blockquote { border-left-color: var(--gel); }
.entry-content h2, .entry-content h3 { font-weight: 600; }

.seq a:hover, .footbar__social a:hover { color: var(--gel); }
.seq__position { color: var(--gel); }

::selection { background: var(--gel); color: var(--paper); }