/* BAMBAR — the long table.
   Mobile is a poster. Desktop is a magazine with a color rail. */

:root {
	--ink: #151515;
	--gold: #d9a414;
	--sand: #efe5d6;
	--indigo: #2d3559;
	--teal: #4f6b62;
	--clay: #9c5e44;
	--paper: #fffdf8;
	--font-display: "Fraunces", "Iowan Old Style", Palatino, serif;
	--font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Literata", "Iowan Old Style", Palatino, serif;
	--rail: 84px;
	--header: 76px;
	--shadow: 6px 6px 0 var(--ink);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 8 L33 28 L28 48 L23 28 Z' fill='none' stroke='%232d3559' stroke-opacity='.16' stroke-width='1'/%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--sand);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	font-optical-sizing: auto;
	overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
ul { margin-top: 0; }

::selection { background: var(--gold); color: var(--ink); }

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

.skip-link {
	position: absolute;
	left: 1rem;
	top: -8rem;
	z-index: 100;
	background: var(--gold);
	color: var(--ink);
	padding: 0.6rem 0.9rem;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wrap {
	width: min(1120px, calc(100% - 2rem));
	margin-inline: auto;
}

.kicker {
	margin: 0 0 0.45rem;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: 0.98rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--indigo);
}
.kicker--gold { color: var(--gold); }
.kicker--sand { color: var(--sand); }

.btn,
.search-form button,
.comment-form .submit,
.page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 48px;
	padding: 0.8rem 1.15rem;
	background: var(--gold);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--ink);
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
}
.btn:hover,
.search-form button:hover,
.comment-form .submit:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ink);
}
.btn--ghost {
	background: transparent;
	color: var(--sand);
	border-color: var(--sand);
	box-shadow: 4px 4px 0 var(--gold);
}
.btn--small {
	min-height: 42px;
	padding: 0.55rem 0.8rem;
	font-size: 1rem;
	box-shadow: 3px 3px 0 var(--gold);
}
.btn:focus-visible,
.band--gold:focus-visible,
.rail__link--gold:focus-visible,
.nav-screen__link--gold:focus-visible {
	outline-color: var(--ink);
}

.text-link {
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--indigo);
	text-decoration: none;
	border-bottom: 2px solid var(--gold);
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: var(--header);
	padding: 0.4rem 0.9rem;
	background: var(--ink);
	color: var(--sand);
}
.site-header__tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.site-header .btn { display: none; }
.site-header__logo,
.custom-logo-link {
	display: flex;
	align-items: center;
	line-height: 0;
}
.site-header__logo img,
.custom-logo {
	height: 42px;
	width: auto;
	max-width: min(52vw, 280px);
	object-fit: contain;
	object-position: left center;
}
.menu-toggle {
	appearance: none;
	background: transparent;
	color: var(--sand);
	border: 0;
	min-height: 48px;
	padding: 0 0.35rem;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Mobile menu */
.nav-screen {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	background: var(--ink);
	transform: translateY(-102%);
	transition: transform 0.42s var(--ease);
}
.nav-screen.is-open { transform: none; }
.nav-screen[hidden] { display: none; }
.nav-screen__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header);
	padding: 0 0.9rem;
	color: var(--sand);
	flex-shrink: 0;
}
.nav-screen__brand {
	margin: 0;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.22em;
}
.nav-screen__links {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
}
.nav-screen__link {
	flex: 1;
	min-height: 4.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.15rem;
	border-bottom: 2px solid var(--ink);
	text-decoration: none;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: clamp(2.1rem, 9vw, 3.4rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 0.9;
}
.nav-screen__index {
	font-size: 0.42em;
	letter-spacing: 0.14em;
}
.nav-screen__link.is-current span:first-child { text-decoration: underline; text-underline-offset: 0.12em; }
.nav-screen__foot {
	flex-shrink: 0;
	background: var(--sand);
	color: var(--ink);
	padding: 0.9rem 1rem 1.15rem;
}
body.menu-open { overflow: hidden; }

.nav-screen__link--gold,
.rail__link--gold,
.band--gold { background: var(--gold); color: var(--ink); }
.nav-screen__link--indigo,
.rail__link--indigo,
.band--indigo { background: var(--indigo); color: var(--sand); }
.nav-screen__link--teal,
.rail__link--teal,
.band--teal { background: var(--teal); color: var(--sand); }
.nav-screen__link--clay,
.rail__link--clay,
.band--clay { background: var(--clay); color: var(--sand); }
.nav-screen__link--sand,
.rail__link--sand { background: var(--sand); color: var(--ink); }

/* Desktop rail — hidden until the layout has room for it */
.rail { display: none; }

/* Hero */
.hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: calc(100svh - var(--header));
	background: var(--ink);
	color: var(--sand);
	overflow: hidden;
}
.hero picture,
.hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 68%;
}
.hero__edge { display: none; }
.hero__copy {
	position: relative;
	z-index: 1;
	padding: 22vh 1.15rem 1.35rem;
	background: linear-gradient(180deg, rgba(21, 21, 21, 0) 0%, rgba(21, 21, 21, 0.55) 30%, rgba(21, 21, 21, 0.9) 100%);
}
.hero .kicker { margin-bottom: 0.35rem; }
.hero h1 {
	margin: 0 0 0.7rem;
	font-family: var(--font-display);
	font-weight: 560;
	font-size: clamp(4.4rem, 20vw, 7.4rem);
	line-height: 0.8;
	letter-spacing: -0.05em;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero h1 em {
	font-style: italic;
	font-weight: 560;
	color: var(--gold);
}
.hero__dek {
	max-width: 34rem;
	margin: 0 0 1.1rem;
	font-size: 1.08rem;
}
.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
}

/* Color bands — the mobile wayfinding. The rail replaces them on large screens. */
.bands { display: grid; }
.band {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.15rem;
	border-bottom: 2px solid var(--ink);
	text-decoration: none;
	font-family: var(--font-cond);
	font-weight: 700;
	font-size: clamp(2.3rem, 10vw, 3.6rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	line-height: 0.85;
}
.band span {
	font-size: 0.4em;
	letter-spacing: 0.14em;
}
.band:hover { letter-spacing: 0.06em; }

/* Mission */
.mission {
	position: relative;
	overflow: hidden;
	padding: 4.2rem 0 3.2rem;
	background-color: var(--sand);
	background-image: var(--pattern);
}
.arch { display: none; }
.mission h2,
.still h2,
.plate-section h2,
.doors h2,
.stories h2,
.join h2,
.not-found h1,
.page-hero__title {
	font-family: var(--font-display);
	font-weight: 560;
	font-optical-sizing: auto;
	letter-spacing: -0.045em;
	line-height: 0.9;
}
.mission h2 {
	margin: 0;
	font-size: clamp(3.1rem, 12vw, 6.6rem);
}
.mission h2 em { font-style: italic; color: var(--clay); }
.mission__copy { margin-top: 1.4rem; font-size: 1.08rem; }
.mission__copy p { margin-bottom: 1rem; }
.mission__respect {
	margin-bottom: 0;
	padding-top: 0.8rem;
	border-top: 2px solid var(--ink);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.3;
}

/* Portraits */
.portraits {
	display: grid;
	gap: 0.7rem;
	padding: 0.7rem;
	background: var(--ink);
}
.portrait {
	position: relative;
	margin: 0;
	overflow: hidden;
	border: 2px solid var(--ink);
	background: var(--ink);
}
.portrait img {
	width: 100%;
	height: 78vw;
	max-height: 34rem;
	object-fit: cover;
	object-position: center 20%;
}
.portrait--night img { object-position: center 15%; }
.portrait figcaption {
	position: absolute;
	left: 0.7rem;
	right: 0.7rem;
	bottom: 0.7rem;
	padding: 0.75rem 0.9rem;
	background: var(--gold);
	color: var(--ink);
	border: 2px solid var(--ink);
}
.portrait--night figcaption {
	background: var(--indigo);
	color: var(--sand);
}
.portrait figcaption strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 560;
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
}

/* Still life */
.still {
	background: var(--ink);
	color: var(--sand);
	padding: 3.2rem 0 1.5rem;
}
.still h2 {
	margin: 0 0 0.6rem;
	font-size: clamp(3rem, 11vw, 5.5rem);
	color: var(--sand);
}
.still__intro p { max-width: 36rem; }
.still__hint {
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}
.still__row {
	display: flex;
	gap: 0.25rem;
	margin: 0;
	padding: 0.5rem 1rem 1.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.still__row::-webkit-scrollbar { display: none; }
.still__row li {
	flex: 0 0 78%;
	scroll-snap-align: center;
	text-align: center;
}
.still__row img {
	width: 100%;
	height: 64vw;
	object-fit: contain;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.45));
}
.still__row span {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
}

/* Plate */
.plate-section {
	padding: 3.5rem 0 3rem;
	background: var(--sand);
}
.plate-section h2 {
	margin: 0 0 0.7rem;
	font-size: clamp(3.4rem, 14vw, 6rem);
}
.plate-section__aside {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.3;
}
.plate-mat {
	margin-top: 1.5rem;
	padding: 1rem 0.6rem 0.8rem;
	background: var(--indigo);
	color: var(--sand);
	border: 2px solid var(--ink);
	box-shadow: var(--shadow);
}
.plate {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.plate__stack {
	display: grid;
	width: min(100%, 28rem);
	margin-inline: auto;
}
.plate__closed,
.plate__open {
	grid-area: 1 / 1;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
	transition: opacity 0.45s var(--ease);
}
.plate__open {
	opacity: 0;
}
.plate-section.is-open .plate__closed { opacity: 0; }
.plate-section.is-open .plate__open { opacity: 1; }
.plate-hint {
	margin: 0.35rem 0 0;
	text-align: center;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
}

/* Doors */
.doors {
	background-color: var(--sand);
	background-image: var(--pattern);
	padding-top: 3rem;
}
.doors__intro { margin-bottom: 1.2rem; }
.doors h2 {
	margin: 0;
	font-size: clamp(2.8rem, 9vw, 5rem);
}
.doors__grid { display: grid; }
.door {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.45rem;
	min-height: 15.5rem;
	padding: 1.2rem 1.15rem 1.3rem;
	border-top: 2px solid var(--ink);
	text-decoration: none;
}
.door h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 560;
	font-size: clamp(3.2rem, 12vw, 5.4rem);
	line-height: 0.84;
	letter-spacing: -0.045em;
}
.door p { margin: 0; max-width: 28rem; }
.door__index,
.door__go {
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.door__go::after { content: " →"; }
.door--events { background: var(--gold); color: var(--ink); }
.door--directory { background: var(--teal); color: var(--sand); }
.door--member { background: var(--clay); color: var(--sand); }
.door:hover .door__go { letter-spacing: 0.2em; }

/* Stories */
.stories {
	padding: 3.4rem 0 3rem;
	background-color: var(--sand);
	background-image: var(--pattern);
}
.stories__intro {
	display: grid;
	gap: 0.4rem;
	margin-bottom: 1.2rem;
}
.stories h2 {
	margin: 0;
	font-size: clamp(3rem, 10vw, 5.2rem);
}
.stories__grid {
	display: grid;
	gap: 1rem;
}
.stories__empty { margin: 0; }
.story-card {
	background: var(--paper);
	border: 2px solid var(--ink);
	box-shadow: var(--shadow);
}
.story-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.story-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--indigo);
	border-bottom: 2px solid var(--ink);
}
.story-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.story-card__body { padding: 0.95rem 1rem 1.1rem; }
.story-card time,
.story-card__more {
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.95rem;
	color: var(--clay);
}
.story-card h2,
.story-card h3 {
	margin: 0.3rem 0;
	font-family: var(--font-display);
	font-weight: 560;
	font-size: 1.7rem;
	line-height: 1.05;
	letter-spacing: -0.03em;
}
.story-card p { margin: 0 0 0.7rem; }
.story-card__more { color: var(--indigo); }

/* Join */
.join {
	background: var(--indigo);
	color: var(--sand);
	padding: 3.2rem 0 3.5rem;
}
.join__mark {
	width: min(16rem, 70%);
	margin-bottom: 1rem;
}
.join h2 {
	margin: 0 0 0.8rem;
	font-size: clamp(3.2rem, 12vw, 5.8rem);
}
.join__list {
	margin: 0 0 1.3rem;
	padding: 0;
	list-style: none;
}
.join__list li {
	padding: 0.65rem 0;
	border-top: 2px solid rgba(239, 229, 214, 0.35);
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 4vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
}

/* Interior pages */
.page-hero {
	padding: 2.4rem 0 0.4rem;
	background-color: var(--sand);
	background-image: var(--pattern);
}
.page-hero__title {
	margin: 0;
	font-size: clamp(3rem, 11vw, 6.4rem);
}
.sheet,
.extra-front .entry {
	width: min(1100px, calc(100% - 2rem));
	margin: 1.2rem auto 3rem;
	padding: 1.15rem 1rem 1.4rem;
	background: var(--paper);
	border: 2px solid var(--ink);
	box-shadow: 8px 8px 0 var(--ink);
}
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2,
.entry-content h3 {
	font-family: var(--font-display);
	font-weight: 560;
	letter-spacing: -0.03em;
	line-height: 1.05;
}
.entry-content h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.entry-content a { color: var(--indigo); }
.entry-content blockquote {
	margin-left: 0;
	padding-left: 1rem;
	border-left: 6px solid var(--gold);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.35;
}
.entry-content:not(:has(.em, .pmpro, .directorist-content-active, .directorist-archive-contents, .directorist-single-wrapper, .directorist-add-listing)) {
	max-width: 68ch;
}
.archive-description,
.search-page-form { margin: 0.5rem auto 0; }
.stories__grid--archive { padding-bottom: 1rem; }

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.8rem 0.85rem;
	background: var(--paper);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.4;
}
textarea { min-height: 8rem; }
input[type="checkbox"],
input[type="radio"] {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--indigo);
}
.search-form__label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.search-form__row { display: flex; gap: 0.5rem; }
.search-form__row input { flex: 1; }
.nav-screen .search-form { margin-bottom: 0.7rem; }

/* Footer */
.site-footer {
	padding: 2.2rem 0 1.4rem;
	background: var(--sand);
	border-top: 2px solid var(--ink);
}
.site-footer__logo img { width: min(15rem, 68%); }
.site-footer__line {
	margin: 0.8rem 0 0.4rem;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.35rem;
	line-height: 1.25;
}
.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 0 0 0.8rem;
	padding: 0;
	list-style: none;
}
.footer-nav__list a {
	color: var(--ink);
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}
.footer-nav__list a:hover { color: var(--clay); }
.credit {
	margin: 0.2rem 0;
	font-family: var(--font-cond);
	font-weight: 600;
	font-size: 1.02rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.credit a {
	color: inherit;
	font-weight: 700;
}
.site-footer__copy {
	margin: 0.4rem 0 0;
	font-size: 0.95rem;
}

/* Lists, comments, 404 */
.pagination,
.nav-links { margin: 0 0 3rem; }
.pagination .nav-links,
.comments-wrap .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	justify-content: center;
}
.page-numbers,
.post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.7rem;
	min-height: 2.7rem;
	padding: 0 0.55rem;
	background: var(--paper);
	color: var(--ink);
	border: 2px solid var(--ink);
	text-decoration: none;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.page-numbers.current,
.page-numbers:hover { background: var(--gold); }
.post-navigation {
	width: min(1100px, calc(100% - 2rem));
	margin: 0 auto 3rem;
	display: grid;
	gap: 0.7rem;
}
.post-navigation a {
	display: block;
	padding: 0.9rem 1rem;
	background: var(--paper);
	color: var(--ink);
	border: 2px solid var(--ink);
	text-decoration: none;
}
.nav-label {
	display: block;
	font-family: var(--font-cond);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clay);
}
.comments-wrap { margin-bottom: 3rem; }
.comment-list { padding-left: 0; list-style: none; }
.comment-list .children { list-style: none; padding-left: 1rem; }
.comment-body {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--sand);
}
.comment-meta { font-family: var(--font-cond); letter-spacing: 0.06em; text-transform: uppercase; }
.not-found {
	min-height: 60vh;
	padding: 3.5rem 0 4rem;
	background-color: var(--sand);
	background-image: var(--pattern);
}
.not-found h1 {
	margin: 0 0 0.7rem;
	font-size: clamp(3.4rem, 12vw, 6rem);
}
.not-found .search-form { margin-top: 1.4rem; max-width: 36rem; }

@media (min-width: 720px) {
	.site-header .btn { display: inline-flex; }
	.site-header__logo img,
	.custom-logo { height: 48px; }
	.stories__grid { grid-template-columns: 1fr 1fr; }
	.stories__grid--archive { grid-template-columns: 1fr 1fr; }
	.post-navigation { grid-template-columns: 1fr 1fr; }
	.sheet { padding: 2rem 2.2rem 2.4rem; }
}

@media (min-width: 900px) {
	.site-footer__grid {
		display: grid;
		grid-template-columns: 18rem 1fr;
		gap: 2.5rem;
		align-items: end;
	}
	.site-footer__line { margin-top: 0; }
}

@media (min-width: 1100px) {
	.site-header,
	.site-main,
	.site-footer { margin-right: var(--rail); }

	.has-overlay-header .site-header {
		position: absolute;
		top: 0;
		left: 0;
		right: var(--rail);
		width: auto;
		margin-right: 0;
		background: linear-gradient(180deg, rgba(21, 21, 21, 0.72), rgba(21, 21, 21, 0));
	}

	.menu-toggle { display: none; }
	.bands { display: none; }
	.still__hint { display: none; }

	.rail {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--rail);
		z-index: 50;
	}
	.rail__link {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 2px solid var(--ink);
		text-decoration: none;
	}
	.rail__link span {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-family: var(--font-cond);
		font-weight: 700;
		font-size: 1.08rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}
	.rail__link.is-current { box-shadow: inset 7px 0 0 var(--gold); }
	.rail__link--gold.is-current { box-shadow: inset 7px 0 0 var(--ink); }
	.rail__link:hover span { letter-spacing: 0.26em; }

	.hero { min-height: 100svh; }
	.hero img { object-position: 70% center; }
	.hero__edge {
		display: grid;
		place-items: center;
		position: absolute;
		z-index: 2;
		left: 0;
		top: 0;
		bottom: 0;
		width: 2.6rem;
		margin: 0;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-family: var(--font-cond);
		font-weight: 700;
		font-size: 0.86rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--gold);
	}
	.hero__copy {
		position: absolute;
		z-index: 1;
		inset: 0 auto 0 0;
		width: min(58%, 44rem);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 6rem 3rem 3.5rem 4.2rem;
		background: linear-gradient(90deg, rgba(21, 21, 21, 0.86) 0%, rgba(21, 21, 21, 0.5) 72%, rgba(21, 21, 21, 0) 100%);
	}
	.hero h1 { font-size: clamp(6.2rem, 8vw, 9rem); }

	.wrap { width: min(1180px, calc(100% - 5rem)); }
	.mission { padding: 6rem 0 5rem; }
	.mission__grid {
		display: grid;
		grid-template-columns: 1.15fr 0.85fr;
		gap: 4rem;
		align-items: end;
	}
	.mission__copy { margin-top: 0; }
	.arch {
		display: block;
		position: absolute;
		width: 24rem;
		height: auto;
		left: -3rem;
		right: auto;
		top: 2rem;
		color: var(--gold);
		opacity: 0.4;
		pointer-events: none;
	}

	.portraits {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 1.25rem;
		padding: 1.25rem 2rem 2.5rem;
		align-items: start;
	}
	.portrait img {
		height: auto;
		aspect-ratio: 4 / 5;
		max-height: 82vh;
	}
	.portrait--night { margin-top: 11vh; }

	.still { padding: 4.5rem 0 3rem; }
	.still__row {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		overflow: visible;
		align-items: end;
		gap: 0.4rem;
		padding: 1rem 2rem 2rem;
	}
	.still__row li { flex: none; }
	.still__row img { height: 280px; }
	.still__row li:nth-child(2) img { height: 440px; }
	.still__row li:nth-child(4) { transform: translateY(-1.5rem); }

	.plate-section { padding: 5rem 0; }
	.plate-section__grid {
		display: grid;
		grid-template-columns: 0.9fr 1.1fr;
		gap: 3rem;
		align-items: center;
	}
	.plate-mat {
		margin-top: 0;
		transform: rotate(-1.6deg);
		padding: 1.4rem 1rem 1rem;
	}

	.doors { padding-top: 4.5rem; }
	.doors h2 { max-width: 12ch; }
	.doors__grid {
		grid-template-columns: 1.35fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 1rem;
		padding: 0 2rem 3rem;
	}
	.door { border: 2px solid var(--ink); min-height: 18rem; }
	.door--events {
		grid-row: 1 / span 2;
		min-height: 40rem;
		background:
			linear-gradient(180deg, rgba(21, 21, 21, 0.05), rgba(21, 21, 21, 0.78)),
			url("../images/picnic-desktop.jpg") center 30% / cover no-repeat;
		color: var(--sand);
	}
	.door--events .door__go { color: var(--gold); }
	.door--directory { background: var(--paper); color: var(--ink); }
	.door--member { background: var(--indigo); color: var(--sand); }

	.stories { padding: 4rem 0 4.5rem; }
	.stories__intro {
		grid-template-columns: 1fr auto;
		align-items: end;
	}
	.stories__intro .kicker { grid-column: 1 / -1; }
	.stories__grid,
	.stories__grid--archive { grid-template-columns: repeat(3, 1fr); }

	.join { padding: 5rem 0; }
	.join__grid {
		display: grid;
		grid-template-columns: 0.8fr 1.2fr;
		gap: 3rem;
		align-items: center;
	}
	.join__mark { width: min(100%, 26rem); margin: 0; }
}

.admin-bar .site-header { top: 32px; }
.admin-bar .rail { top: 32px; }
.admin-bar .nav-screen { top: 32px; bottom: 0; }
@media (max-width: 782px) {
	.admin-bar .site-header,
	.admin-bar .nav-screen { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}