/* =========================================================================
   Eden Rose — design tokens
   ========================================================================= */
:root {
	--color-bg: #0b0906;
	--color-bg-alt: #100c08;
	--color-gold: #d9b878;
	--color-gold-bright: #f0d9a0;
	--color-text: #f5efe4;
	--color-text-muted: #9c9182;
	--color-text-faint: #7d7466;
	--color-text-footer: #6b6155;
	--color-border: #2b2116;

	--font-display: 'Bodoni Moda', serif;
	--font-body: 'Jost', sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, monospace;

	--cursor-x: 50%;
	--cursor-y: 50%;
}

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

html {
	scroll-behavior: smooth;
}

html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	max-width: 100%;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
}

a {
	color: var(--color-gold);
	text-decoration: none;
}
a:hover {
	color: var(--color-gold-bright);
}

button {
	font-family: inherit;
}

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

.eden-rose-page {
	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
}

/* Cursor-follow glow. --cursor-x/--cursor-y are set by assets/js/main.js. */
.eden-rose-page::before {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	pointer-events: none;
	transform: translate(var(--cursor-x), var(--cursor-y)) translate(-50%, -50%);
	background: radial-gradient(circle, rgba(217, 184, 120, .55), transparent 70%);
	filter: blur(4px);
	z-index: 50;
	mix-blend-mode: screen;
}

.badge {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-bg);
	background: var(--color-gold);
	padding: 7px 14px;
	border-radius: 2px;
}

/* =========================================================================
   Animations
   ========================================================================= */
@keyframes glowPulse {
	0%, 100% { opacity: .6; }
	50% { opacity: 1; }
}
@keyframes floatY {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-18px); }
}
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@keyframes shimmerGold {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@keyframes ctaPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(217, 184, 120, .55); }
	50% { box-shadow: 0 0 0 8px rgba(217, 184, 120, 0); }
}
@keyframes playPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes scrollCueBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================================
   Fold (nav + hero + scroll cue + marquee)
   ========================================================================= */
.fold-wrap {
	position: relative;
	min-height: 100vh;
}

/* ---- Nav ---- */
.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 56px;
	border-bottom: 1px solid var(--color-border);
	position: relative;
	z-index: 2;
	gap: 16px;
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex-shrink: 1;
}

.nav-logo {
	flex-shrink: 0;
}

.nav-brand-text {
	min-width: 0;
}

.nav-brand-word {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 22px;
	color: var(--color-text);
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nav-brand-dot {
	color: var(--color-gold);
}

.nav-brand-sub {
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 34px;
	flex-shrink: 0;
}

.nav-links {
	display: flex;
	gap: 30px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.nav-link {
	color: var(--color-text-muted);
	cursor: pointer;
}
.nav-link:hover {
	color: var(--color-gold);
}

.nav-cta {
	background: var(--color-gold);
	color: var(--color-bg);
	border: none;
	font-weight: 700;
	font-size: 13px;
	padding: 12px 24px;
	border-radius: 2px;
	cursor: pointer;
	letter-spacing: .04em;
	animation: ctaPulse 2.6s ease-in-out infinite;
	white-space: nowrap;
	flex-shrink: 0;
}
.nav-cta:hover {
	background: var(--color-gold-bright);
	color: var(--color-bg); /* see .btn-gold:hover — same a:hover specificity collision */
}

/* ---- Member navigation (dashboard/library/magazine/account) ----
   Persistent side nav on desktop (requirements doc §8.1). Mobile — where
   ~90% of this site's traffic is — gets a fixed bottom tab bar instead
   of a hamburger dropdown: always visible, thumb-reachable, no extra tap
   to discover navigation. See inc/member-ui.php for the reasoning. ---- */
.member-shell {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
}
.member-sidebar {
	width: 230px;
	flex-shrink: 0;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	overflow-y: auto;
	border-right: 1px solid var(--color-border);
	padding: 28px 18px 24px;
	display: flex;
	flex-direction: column;
}
.member-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin-bottom: 32px;
}
.member-sidebar-brand-text .nav-brand-word {
	font-size: 17px;
}
.member-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}
.member-sidebar-link {
	padding: 11px 12px;
	border-radius: 2px;
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.member-sidebar-link:hover {
	color: var(--color-text);
	background: rgba(217, 184, 120, .06);
}
.member-sidebar-link.is-active {
	color: var(--color-gold);
	background: rgba(217, 184, 120, .1);
}
.member-sidebar-signout {
	display: block;
	padding: 20px 12px 4px;
	margin-top: 12px;
	border-top: 1px solid var(--color-border);
	font-size: 12px;
	color: var(--color-text-faint);
}
.member-sidebar-signout:hover {
	color: var(--color-gold);
}
.member-main {
	flex: 1;
	min-width: 0;
}

/* Mobile top bar (logo + sign out) and bottom tab bar — hidden on
   desktop, shown only under the 900px breakpoint below. */
.member-mobile-header,
.member-tabbar {
	display: none;
}

/* ---- Minimal header (login/checkout/welcome/mock-payment) ---- */
.minimal-header {
	padding: 24px 56px 0;
}
.minimal-header-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
}
.minimal-header-brand:hover {
	color: var(--color-gold);
}

/* ---- Hero ---- */
.hero-wrap {
	position: relative;
	padding: 36px 56px 76px;
	overflow: hidden;
}

.hero-glow-orb {
	position: absolute;
	top: -180px;
	right: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 184, 120, .16), transparent 70%);
	animation: glowPulse 6s ease-in-out infinite;
	pointer-events: none;
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr .7fr;
	column-gap: 48px;
	row-gap: 0;
	align-items: start;
	grid-template-areas: 'left video';
}

/* One grid item for the whole left column (eyebrow through the perks
   list), not four separate grid rows each paired with `video`. With
   four rows, a `video` column taller than the left column's own
   content (now two videos + pitch + buttons) forced CSS Grid to
   distribute that extra height equally across all four rows — which
   showed up as large, uniform gaps between every left-column element
   even though none of them had that much margin. A single row means
   the row's height is just the max of the two columns, and any excess
   height only ever appears once, after the shorter column's content
   ends — not interleaved between every element. */
.hero-left-col {
	grid-area: left;
}

.hero-eyebrow {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-bg);
	background: var(--color-gold);
	padding: 7px 14px;
	border-radius: 2px;
	margin-bottom: 14px;
	width: fit-content;
}

.hero-h1 {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 60px;
	line-height: 1.08;
	color: var(--color-text);
	/* 24px, not the original 8px — the subheading paragraph that used to
	   sit here carried real vertical rhythm (25px margin + its own line
	   height) between the headline and "What's Behind the Door?"; with
	   that paragraph removed, the headline's own margin needs to make up
	   some of that breathing room instead of the two butting up tight. */
	margin: 0 0 24px;
}
.hero-h1-accent {
	color: var(--color-gold);
}

/* Lives inside .hero-video-col now (between the pitch box and the second
   video), not in the left column — .hero-pitch's own bottom margin and
   .hero-video-card--secondary's own top margin supply the surrounding
   gap, so this doesn't need one of its own beyond the small trailing
   margin-bottom below. */
.bullet-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 26px;
	margin-bottom: 16px;
}

.bullet-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

/* Bullet 5 (the "ask me about personalized content" callout) spans both
   grid columns instead of sharing a row with a lone neighbor — the grid
   stays a fixed 2-column layout at every breakpoint (see the 640px rule
   below), so a 5th item left un-spanned would leave a half-empty row on
   every screen size, not just desktop. */
.bullet-item--wide {
	grid-column: 1 / -1;
}

.bullet-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(217, 184, 120, .18);
	border: 1.5px solid rgba(217, 184, 120, .55);
	flex-shrink: 0;
	box-shadow: 0 0 12px rgba(217, 184, 120, .15);
	color: var(--color-gold);
}

.bullet-title {
	color: var(--color-text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}
.bullet-body {
	color: var(--color-text-faint);
	font-size: 13px;
	margin-top: 4px;
	line-height: 1.45;
}

.hero-video-col {
	grid-area: video;
	position: relative;
	width: 100%;
	max-width: 600px;
	margin-left: auto;
}

.hero-video-card {
	aspect-ratio: 16 / 9;
	border-radius: 2px;
	border: 1px solid var(--color-gold);
	position: relative;
	overflow: hidden;
	animation: floatY 7s ease-in-out infinite;
	background:
		radial-gradient(ellipse 70% 60% at 25% 100%, rgba(217, 184, 120, .18), transparent 60%),
		radial-gradient(ellipse 80% 70% at 90% 0%, rgba(217, 184, 120, .12), transparent 60%),
		linear-gradient(150deg, #221b12 0%, #16120d 55%, #0b0906 100%);
	box-shadow: 0 0 60px rgba(217, 184, 120, .14);
}

.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-video-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-bg);
	background: var(--color-gold);
	padding: 6px 11px;
	border-radius: 2px;
	z-index: 2;
}

.hero-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: var(--color-gold);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	animation: playPulse 2.4s ease-in-out infinite;
	box-shadow: 0 0 40px rgba(217, 184, 120, .5);
	z-index: 2;
	color: var(--color-bg);
}
.hero-video-play:hover {
	background: var(--color-gold-bright);
}
.hero-video-play polygon {
	fill: currentColor;
}

.hero-video-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 18px 16px;
	background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
	z-index: 2;
}
.hero-video-caption-title {
	color: var(--color-text);
	font-family: var(--font-display);
	font-style: italic;
	font-size: 16px;
}
.hero-video-caption-meta {
	color: var(--color-text-muted);
	font-size: 11px;
	letter-spacing: .06em;
	margin-top: 4px;
}

.hero-video-soon {
	position: absolute;
	top: -16px;
	right: -16px;
	background: var(--color-bg);
	border: 1px solid var(--color-gold);
	color: var(--color-gold);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 8px 14px;
	transform: rotate(3deg);
	z-index: 3;
}

.hero-pitch {
	margin: 22px 0;
	padding: 18px 22px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: rgba(217, 184, 120, .05);
}
.hero-pitch-lead {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	color: var(--color-text);
	line-height: 1.5;
	margin: 0 0 8px;
}
.hero-pitch-body {
	font-size: 13.5px;
	color: var(--color-text-muted);
	line-height: 1.6;
	margin: 0;
}

.hero-video-card--secondary {
	margin-top: 22px;
	animation-delay: -3.5s;
}

.hero-cta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 'primary secondary';
	gap: 16px;
	margin-top: 24px;
}
.hero-cta-primary { grid-area: primary; }
.hero-cta-secondary { grid-area: secondary; }

/* Desktop-only duplicate of the CTA buttons, rendered under "What's
   Behind the Door?" in the left column instead of after the second video
   — client wanted the buttons there on desktop specifically, mobile left
   exactly as it was. Hidden by default (mobile/tablet) so the mobile
   layout's own CTA row — the one still inside .hero-video-col, completely
   untouched — is the only one that ever renders below 901px; the
   min-width query below is the only place this one turns on, and it's
   the only place the video-column original turns off. Two copies in the
   DOM (not one repositioned via grid-area) deliberately, so nothing about
   the mobile grid/flow needs to change to make this work. */
.hero-cta-row--desktop {
	display: none;
}
@media (min-width: 901px) {
	.hero-cta-row--desktop {
		display: grid;
	}
	.hero-video-col > .hero-cta-row {
		display: none;
	}
}

/* Lives on its own in the left column, right under the headline (the
   subheading paragraph that used to separate them was removed outright —
   see hero.php) — the trust-bullet grid moved out to sit between the two
   hero videos instead (see .bullet-grid's own comment), so this no
   longer shares a wrapper with it. Top border/margin gives it a clean
   break from .hero-h1 above. */
.hero-perks {
	margin-top: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
}
.hero-perks-heading {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 17px;
	color: var(--color-gold);
	margin-bottom: 10px;
}
.hero-perks-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.hero-perks-list li {
	position: relative;
	padding-left: 22px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--color-text-muted);
}
.hero-perks-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 12px;
	height: 2px;
	background: var(--color-gold);
}
.hero-perks-list strong {
	color: var(--color-text);
	font-weight: 600;
}

.btn {
	font-size: 14px;
	padding: 16px 30px;
	border-radius: 2px;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
}
.btn-gold {
	background: var(--color-gold);
	color: var(--color-bg);
	border: none;
}
.btn-gold:hover {
	background: var(--color-gold-bright);
	/* Explicit, not inherited — on an <a class="btn-gold">, the generic
	   `a:hover { color }` rule elsewhere beats .btn-gold's base color by
	   specificity (element+pseudo-class > class alone), so without this
	   the hover text color and hover background silently converge on the
	   same gold-bright value and the label disappears. Confirmed bug, not
	   hypothetical — reported from the /account/ renew button. */
	color: var(--color-bg);
}
.btn-gold:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.btn-outline {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-border);
	font-weight: 500;
}
.btn-outline:hover {
	border-color: var(--color-gold);
}

/* ---- Scroll cue ---- */
.scroll-cue {
	position: absolute;
	right: 56px;
	bottom: 79px;
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(217, 184, 120, .5);
	background: rgba(217, 184, 120, .08);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	animation: scrollCueBounce 2.2s ease-in-out infinite;
	color: var(--color-gold);
}
.scroll-cue:hover {
	border-color: var(--color-gold);
	background: rgba(217, 184, 120, .16);
}

/* ---- Marquee ---- */
.marquee-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 47px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
	white-space: nowrap;
	background: #16120d;
}
.marquee-row {
	display: inline-flex;
	animation: marqueeScroll 24s linear infinite;
	padding: 14px 0;
}
.marquee-item {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 14px;
	color: var(--color-gold);
	padding: 0 26px;
}
.marquee-item--muted {
	color: var(--color-text-muted);
}

/* =========================================================================
   Archive
   ========================================================================= */
.archive-wrap {
	padding: 80px 56px;
}
.archive-intro {
	max-width: 520px;
	margin-bottom: 44px;
}
.archive-intro .badge {
	margin-bottom: 16px;
}
.archive-h2 {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 32px;
	color: var(--color-text);
	margin: 0 0 12px;
}
.archive-sub {
	color: var(--color-text-faint);
	font-size: 13.5px;
	margin: 0;
}

/* Editorial/lookbook grid: portrait-ratio tiles (3:4, the standard fashion
   portfolio crop) rather than the previous mixed-height bento layout — one
   wider "cover" tile plus four uniform portrait tiles reads like an actual
   fashion portfolio grid instead of an abstract collage. Sized via
   aspect-ratio so real photos (set from Homepage Content in wp-admin) crop
   predictably instead of the height being whatever a bento span produced. */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.archive-tile {
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	border: 1px solid var(--color-border);
	transition: transform .3s, border-color .3s;
	cursor: pointer;
	display: block;
	background-size: cover;
	background-position: center;
}
.archive-tile:hover {
	transform: translateY(-4px);
	border-color: var(--color-gold);
}
.archive-tile-1 {
	grid-column: span 2;
	aspect-ratio: 8 / 5;
	background:
		radial-gradient(ellipse 60% 60% at 80% 90%, rgba(217, 184, 120, .13), transparent 60%),
		linear-gradient(150deg, #221b12, #120c14 55%, #0b0906);
}
.archive-tile-2 {
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(ellipse 60% 60% at 20% 10%, rgba(217, 184, 120, .12), transparent 60%),
		linear-gradient(150deg, #1c1610, #120c14 55%, #0b0906);
}
.archive-tile-3 {
	aspect-ratio: 3 / 4;
	background: linear-gradient(150deg, #1c1610, #0b0906);
}
.archive-tile-4 {
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(ellipse 50% 50% at 90% 90%, rgba(217, 184, 120, .1), transparent 60%),
		linear-gradient(150deg, #221b12, #0b0906);
}
.archive-tile-5 {
	aspect-ratio: 3 / 4;
	background: linear-gradient(150deg, #1c1610, #0b0906);
}

.archive-tile-number {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--color-gold);
	letter-spacing: .08em;
}

/* =========================================================================
   Membership
   ========================================================================= */
.membership-wrap {
	position: relative;
	text-align: center;
	padding: 90px 56px;
	background: linear-gradient(180deg, var(--color-bg), var(--color-bg-alt));
	overflow: hidden;
}
.membership-glow-orb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 640px;
	height: 640px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 184, 120, .18), transparent 65%);
	animation: glowPulse 5s ease-in-out infinite;
	pointer-events: none;
}
.membership-inner {
	position: relative;
	z-index: 1;
}
.membership-inner .badge {
	margin-bottom: 22px;
}
.membership-price {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 600;
	font-size: 76px;
	line-height: 1;
	background: linear-gradient(90deg, var(--color-gold), var(--color-gold-bright), var(--color-gold));
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmerGold 4s linear infinite;
	margin-bottom: 8px;
}
.membership-sub {
	color: var(--color-text-muted);
	font-size: 14.5px;
	max-width: 380px;
	margin: 0 auto 32px;
}

/* =========================================================================
   Scroll to top
   ========================================================================= */
.scroll-top-row {
	text-align: center;
	padding-top: 56px;
}
.scroll-top {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(217, 184, 120, .5);
	background: rgba(217, 184, 120, .08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--color-gold);
}
.scroll-top:hover {
	border-color: var(--color-gold);
	background: rgba(217, 184, 120, .16);
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer-legal {
	padding: 34px 56px;
	text-align: center;
	color: var(--color-text-footer);
	font-size: 11.5px;
	border-top: 1px solid var(--color-border);
}
.footer-legal a {
	color: var(--color-text-footer);
}
.footer-legal a:hover {
	color: var(--color-gold);
}
.footer-legal-sep {
	margin: 0 8px;
}
/* Real Appearance > Menus output (template-parts/site-footer.php) —
   a <ul> instead of the hardcoded <a>/<span> placeholder markup, styled
   to read identically: inline, centered, "·"-separated. */
.footer-legal-list {
	display: inline;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-legal-list li {
	display: inline;
}
.footer-legal-list li:not(:last-child)::after {
	content: "·";
	margin: 0 8px;
}

/* =========================================================================
   Age-verification modal
   ========================================================================= */
.age-gate[hidden] {
	display: none;
}
.age-gate {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.age-gate-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 9, 6, .85);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .25s ease;
}
.age-gate-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 40px 32px 32px;
	box-shadow: 0 20px 80px rgba(0, 0, 0, .6);
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.age-gate.is-open .age-gate-backdrop {
	opacity: 1;
}
.age-gate.is-open .age-gate-dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.age-gate-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: none;
	border: none;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 6px;
	line-height: 0;
}
.age-gate-close:hover {
	color: var(--color-gold);
}
.age-gate-eyebrow {
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 12px;
}
.age-gate-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 26px;
	color: var(--color-text);
	margin: 0 0 14px;
}
.age-gate-copy {
	color: var(--color-text-muted);
	font-size: 13.5px;
	line-height: 1.6;
	margin: 0 0 24px;
}
.age-gate-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.age-gate-dob {
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.age-gate-dob legend {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	padding: 0;
	margin-bottom: 8px;
}
.age-gate-dob-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 10px;
}
.age-gate-select-wrap {
	position: relative;
	min-width: 0;
}
.age-gate-select-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.age-gate-select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-width: 0;
	background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d9b878' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
	background-size: 15px;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 12px 30px 12px 14px;
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 16px; /* iOS auto-zoom threshold — see .checkout-email */
	cursor: pointer;
}
.age-gate-select:focus {
	outline: none;
	border-color: var(--color-gold);
}
.age-gate-select option {
	background: var(--color-bg-alt);
	color: var(--color-text);
}
.age-gate-dob.has-error .age-gate-select {
	border-color: #e07a6b;
}

.age-gate-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--color-text-muted);
	cursor: pointer;
}
.age-gate-checkbox input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.age-gate-checkbox-box {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 1.5px solid var(--color-border);
	border-radius: 3px;
	background: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-bg);
	transition: background .15s ease, border-color .15s ease;
}
.age-gate-checkbox input:checked + .age-gate-checkbox-box {
	background: var(--color-gold);
	border-color: var(--color-gold);
}
.age-gate-checkbox input:checked + .age-gate-checkbox-box svg {
	opacity: 1;
	transform: scale(1);
}
.age-gate-checkbox-box svg {
	opacity: 0;
	transform: scale(.5);
	transition: opacity .1s ease, transform .1s ease;
}
.age-gate-checkbox input:focus-visible + .age-gate-checkbox-box {
	outline: 2px solid var(--color-gold);
	outline-offset: 2px;
}
.age-gate-error {
	color: #e07a6b;
	font-size: 12.5px;
	margin: 0;
}
.age-gate-error[hidden] {
	display: none;
}
.age-gate-submit {
	width: 100%;
}
.age-gate-leave {
	display: block;
	text-align: center;
	margin-top: 20px;
	font-size: 12px;
	color: var(--color-text-faint);
	text-decoration: underline;
}
.age-gate-leave:hover {
	color: var(--color-text-muted);
}

/* =========================================================================
   Checkout placeholder page
   ========================================================================= */
.checkout-page {
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}
.checkout-card {
	width: 100%;
	max-width: 440px;
}
.checkout-card .badge {
	margin-bottom: 18px;
}
.checkout-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 34px;
	margin: 0 0 12px;
}
.checkout-note {
	color: var(--color-text-faint);
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 28px;
}
.checkout-summary {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
}
.checkout-summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--color-text-muted);
	padding: 6px 0;
}
.checkout-summary-total {
	color: var(--color-text);
	font-weight: 600;
	border-top: 1px solid var(--color-border);
	margin-top: 8px;
	padding-top: 14px;
}
.checkout-terms {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	color: var(--color-text-faint);
	font-size: 12.5px;
	line-height: 1.8;
}
.checkout-terms li::before {
	content: '— ';
	color: var(--color-gold);
}
.checkout-back {
	display: block;
	text-align: center;
	margin-top: 18px;
	font-size: 13px;
	color: var(--color-text-muted);
}
.checkout-note--test {
	color: var(--color-gold);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 12px 14px;
}

/* =========================================================================
   Checkout / login form fields (shared)
   ========================================================================= */
.checkout-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 8px;
}
.checkout-field-label {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin-top: 8px;
}
.checkout-field-label:first-child {
	margin-top: 0;
}
.checkout-field-optional {
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text-faint);
}
.checkout-field-hint {
	font-size: 12px;
	color: var(--color-text-faint);
	margin: 2px 0 0;
}
.checkout-email {
	width: 100%;
	min-width: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 12px 14px;
	border-radius: 2px;
	font-family: var(--font-body);
	/* 16px, not 14px — iOS Safari auto-zooms on focus for any input
	   under 16px, which on a mostly-mobile audience means every tap into
	   a form field jars the whole page. */
	font-size: 16px;
}
.checkout-email:focus {
	outline: none;
	border-color: var(--color-gold);
}
.checkout-email.has-error {
	border-color: #e07a6b;
}
.checkout-error {
	color: #e07a6b;
	font-size: 12.5px;
	margin: 4px 0 0;
}
.checkout-error[hidden] {
	display: none;
}

/* ---- Password field: show/hide toggle, strength meter, generator ---- */
.password-field-wrap {
	position: relative;
}
.password-field-wrap .checkout-email {
	padding-right: 44px;
}
.password-toggle-btn {
	/* Reset browser default <button> chrome — without this it renders
	   with a native grey/3D box, border, and padding sitting on top of
	   the dark input instead of a plain icon. */
	appearance: none;
	background: none;
	border: none;
	margin: 0;
	font: inherit;
	cursor: pointer;

	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-faint);
	border-radius: 2px;
}
.password-toggle-btn:hover {
	color: var(--color-gold);
}
/* Explicit class-based show/hide rather than the bare `hidden`
   attribute — inside a flex button (.password-toggle-btn is
   display:flex) both icons were rendering at once instead of one
   replacing the other, cramming two 18px glyphs into a 34px box. This
   removes any ambiguity about attribute-vs-flex-child interaction:
   .password-toggle-icon-hide is off by default, on only once the
   button carries .is-showing-password (set by
   assets/js/password-strength.js), and the show icon does the exact
   reverse. */
.password-toggle-icon-hide {
	display: none;
}
.password-toggle-btn.is-showing-password .password-toggle-icon-show {
	display: none;
}
.password-toggle-btn.is-showing-password .password-toggle-icon-hide {
	display: block;
}
.password-strength-meter {
	margin-top: 2px;
}
.password-strength-meter[hidden] {
	display: none;
}
.password-strength-bar {
	height: 4px;
	background: var(--color-border);
	border-radius: 2px;
	overflow: hidden;
}
.password-strength-bar-fill {
	height: 100%;
	width: 0;
	background: #e07a6b;
	transition: width .25s ease, background-color .25s ease;
}
.password-strength-bar-fill.is-weak {
	background: #e07a6b;
}
.password-strength-bar-fill.is-medium {
	background: var(--color-gold);
}
.password-strength-bar-fill.is-strong {
	background: #6fae7f;
}
.password-strength-label {
	display: block;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--color-text-faint);
	margin-top: 4px;
}
.password-generate-btn {
	/* Same browser-default-<button> reset as .password-toggle-btn above —
	   this is meant to read as a plain text link, not a boxed button. */
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;

	align-self: flex-start;
	font-size: 11.5px;
	color: var(--color-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: -2px;
}
.password-generate-btn:hover {
	color: var(--color-gold-bright);
}
.account-success {
	color: #8fb88a;
	font-size: 12.5px;
	margin: 4px 0 0;
}
.checkout-submit {
	width: 100%;
	margin-top: 10px;
}
.login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--color-text-muted);
	cursor: pointer;
	margin-top: 2px;
	padding: 8px 0; /* comfortable tap target on mobile, not just the checkbox square */
}
.login-remember input {
	accent-color: var(--color-gold);
}

/* =========================================================================
   Mock payment page (test mode)
   ========================================================================= */
.mock-payment-page {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 20px 40px;
}
.mock-payment-banner {
	width: 100%;
	text-align: center;
	background: #3a2a12;
	color: #f0d9a0;
	font-size: 12px;
	letter-spacing: .04em;
	padding: 10px 16px;
	margin: 0 0 40px;
}
.mock-payment-card {
	width: 100%;
	max-width: 440px;
	margin-top: 20px;
}
.mock-payment-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 30px;
	margin: 0 0 20px;
}
.mock-payment-note {
	color: var(--color-text-faint);
	font-size: 12.5px;
	margin: -8px 0 20px;
}
.mock-payment-fields {
	border: 1px dashed var(--color-border);
	border-radius: 4px;
	padding: 16px;
	margin-bottom: 20px;
}
.mock-payment-field {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--color-text-muted);
	padding: 6px 0;
}
.mock-payment-field span {
	color: var(--color-text-faint);
	font-family: var(--font-mono);
}
.mock-payment-field-row {
	display: flex;
	gap: 20px;
}
.mock-payment-field-row .mock-payment-field {
	flex: 1;
}
.mock-payment-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* =========================================================================
   Welcome page
   ========================================================================= */
.welcome-credentials {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 18px;
	margin-bottom: 24px;
	font-size: 13px;
	color: var(--color-text-muted);
	line-height: 1.6;
}
.welcome-password {
	display: block;
	font-family: var(--font-mono);
	font-size: 16px;
	color: var(--color-gold);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	padding: 10px 14px;
	margin: 10px 0;
	letter-spacing: .04em;
}
.welcome-credentials-note {
	font-size: 11.5px;
	color: var(--color-text-faint);
	margin: 0;
}
.welcome-dashboard-link {
	display: block;
	text-align: center;
	width: 100%;
}

/* =========================================================================
   Dashboard
   ========================================================================= */
/* Single shared outer container for every member-area page (dashboard,
   library, magazine, account) — previously each page defined its own
   max-width (880/1080/900px) and padding, which made the content column
   visibly shift width when navigating between sections. One class, one
   set of numbers, added alongside each page's own class in the markup
   (e.g. class="member-page dashboard-page"). */
.member-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: 56px 32px 100px;
}
.dashboard-header {
	margin-bottom: 28px;
}
.dashboard-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 28px;
	margin: 10px 0 0;
}
.dashboard-status {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 18px 20px;
	font-size: 14px;
	color: var(--color-text-muted);
	margin-bottom: 32px;
}
.dashboard-status--active strong {
	color: var(--color-gold);
}
.dashboard-status--expired {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	border-color: #5a3a2a;
}
.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.dashboard-card {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 22px;
}
.dashboard-card--soon {
	background: var(--color-bg-alt);
}
.dashboard-card--locked {
	background: var(--color-bg-alt);
	opacity: .55;
	cursor: not-allowed;
	-webkit-user-select: none;
	user-select: none;
}
.dashboard-card--locked .dashboard-card-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-style: normal;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.dashboard-card-lock-icon {
	flex-shrink: 0;
	color: var(--color-text-muted);
}
.dashboard-card-label {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 10px;
}
.dashboard-card-title {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 20px;
	color: var(--color-text);
	margin-bottom: 8px;
}
.dashboard-card p {
	color: var(--color-text-faint);
	font-size: 13px;
	margin: 0;
}

/* =========================================================================
   Account & billing — bounded cards, not text floating in open space.
   The grid puts membership status and password side by side on desktop
   (good use of the shared 1080px .member-page width without stretching
   a form uncomfortably wide) and stacks to one column on mobile, where
   most of this site's traffic actually is.
   ========================================================================= */
/* Ties the Account section's three separate pages (Overview/Security/
   Delete — real WP pages, not tabs-in-one-template) back together
   visually, since they're no longer one long scroll a user could
   otherwise lose their place in. */
.account-subnav {
	display: flex;
	gap: 4px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--color-border);
}
.account-subnav-link {
	padding: 10px 4px;
	margin-right: 20px;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.account-subnav-link:hover {
	color: var(--color-text);
}
.account-subnav-link.is-active {
	color: var(--color-gold);
	border-bottom-color: var(--color-gold);
}
.account-settings-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
}

.account-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
	margin-bottom: 24px;
}
.account-card {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-bg-alt);
	padding: 28px;
}
.account-card-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	color: var(--color-text);
	margin: 0 0 20px;
}
.account-card--danger {
	border-color: #5a3a2a;
}
.account-card--danger .account-card-title {
	color: #e07a6b;
}
.account-info {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 16px 18px;
	margin-bottom: 18px;
}
.account-info-row {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	padding: 6px 0;
}
.account-info-row span:first-child {
	color: var(--color-text-muted);
}
.account-info-row span:last-child {
	color: var(--color-text);
}
.account-card .dashboard-status {
	margin-bottom: 0;
}
.account-renew-btn {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
}
.account-renew-note {
	text-align: center;
	font-size: 12px;
	color: var(--color-text-faint);
	margin: 10px 0 0;
}
.account-danger-copy {
	color: var(--color-text-faint);
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 20px;
	max-width: 480px;
}
.account-delete-form {
	max-width: 380px;
}

/* ---- Messages ---- */
.messages-intro {
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.6;
	max-width: 520px;
	margin: 10px 0 0;
}
.messages-notif-btn {
	margin-top: 16px;
	padding: 10px 20px;
	font-size: 12.5px;
}
.messages-notif-status {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--color-text-faint);
}
.messages-thread-card {
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-bg-alt);
	padding: 28px;
	width: 100%;
}
.messages-empty {
	color: var(--color-text-faint);
	font-size: 13.5px;
	padding: 18px 0;
	text-align: center;
}
.messages-thread {
	/* No inner max-height/overflow-y scrollbox on purpose (removed — this
	   used to cap at 60vh with its own scrollbar). On mobile that trapped
	   touch-scroll gestures inside this box: once you'd scrolled to the
	   end of it, continuing to scroll (e.g. to reach the top nav) only
	   worked if your finger happened to be positioned outside the box's
	   bounds, which reads as "scrolling is broken." Pagination (25
	   messages/page, see .eden-rose-message-pager below) now bounds how
	   much content ever renders here, so a second nested scroll surface
	   isn't needed to keep this from growing unbounded either — the whole
	   page just scrolls as one surface, on every screen size. */
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 22px;
}
.message-bubble {
	/* Capped in px, not % — on a fluid full-width thread card, a
	   percentage-based cap would let message text stretch to
	   uncomfortably long line lengths on wide screens. */
	max-width: min(80%, 640px);
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid var(--color-border);
}
.message-bubble--member {
	align-self: flex-end;
	background: rgba(217, 184, 120, .08);
	border-color: rgba(217, 184, 120, .3);
}
.message-bubble--eden {
	align-self: flex-start;
	background: var(--color-bg);
}
.message-bubble-author {
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 5px;
}
.message-bubble-body {
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-text);
	white-space: pre-wrap;
	overflow-wrap: break-word;
}
.message-bubble-time {
	font-size: 10.5px;
	color: var(--color-text-faint);
	margin-top: 6px;
}
.messages-form {
	/* Reply form sits above the thread (client request — replying to a
	   long thread shouldn't require scrolling all the way to the bottom
	   first), so the divider is now below it, not above. */
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 20px;
}
.messages-textarea {
	resize: vertical;
	min-height: 70px;
}
.messages-send-btn {
	margin-top: 12px;
}

.message-bubble--deleted {
	opacity: .6;
}
.message-bubble-body--deleted {
	color: var(--color-text-faint);
	font-style: italic;
}
.message-bubble-actions {
	display: flex;
	gap: 14px;
	margin-top: 8px;
}
.message-delete-form {
	display: inline;
}
.message-action-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	font-size: 11px;
	letter-spacing: .02em;
	color: var(--color-text-faint);
	text-decoration: underline;
	cursor: pointer;
}
.message-action-link:hover {
	color: var(--color-gold);
}
.message-action-link--danger:hover {
	color: #c65b5b;
}

.eden-rose-message-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	font-size: 12.5px;
}
.eden-rose-message-pager a {
	color: var(--color-gold);
	text-decoration: none;
}
.eden-rose-message-pager a:hover {
	text-decoration: underline;
}
.eden-rose-message-pager-status {
	color: var(--color-text-faint);
}

/* ---- Member nav unread badge (sidebar / mobile pill / tab bar) ---- */
.member-nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--color-gold);
	color: var(--color-bg);
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	margin-left: 6px;
	vertical-align: middle;
}
.member-tab-icon-wrap {
	position: relative;
	display: inline-flex;
}
.member-nav-badge--tab {
	position: absolute;
	top: -6px;
	right: -8px;
	margin-left: 0;
}

/* ---- Notification bell + toast (assets/js/notifications.js) ---- */
.member-sidebar-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 32px;
}
.member-sidebar-top-row .member-sidebar-brand {
	margin-bottom: 0;
}
.member-mobile-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}
.eden-rose-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-text-muted);
	flex-shrink: 0;
}
.eden-rose-bell:hover {
	color: var(--color-gold);
}
.eden-rose-bell-badge {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--color-gold);
	color: var(--color-bg);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 15px;
}

.eden-rose-toast {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 320px;
	padding: 14px 16px;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-gold);
	border-radius: 4px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
	color: var(--color-text);
	text-decoration: none;
	opacity: 0;
	transform: translateX(16px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.eden-rose-toast.is-visible {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}
.eden-rose-toast-icon {
	flex-shrink: 0;
	color: var(--color-gold);
	margin-top: 1px;
}
.eden-rose-toast-body {
	font-size: 13.5px;
	line-height: 1.5;
}
@media (max-width: 460px) {
	.eden-rose-toast { left: 16px; right: 16px; top: 16px; max-width: none; }
}
.account-username-form {
	max-width: 380px;
}
.btn-danger {
	background: transparent;
	color: #e07a6b;
	border: 1px solid #5a3a2a;
}
.btn-danger:hover {
	background: rgba(224, 122, 107, .1);
	border-color: #e07a6b;
}
.account-delete-btn {
	margin-top: 4px;
}

/* =========================================================================
   Nav: login link, member-aware CTA
   ========================================================================= */
.nav-login-link {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--color-text-muted);
	white-space: nowrap;
}
.nav-login-link:hover {
	color: var(--color-gold);
}
.age-gate-login-link {
	display: block;
	text-align: center;
	margin-top: 12px;
	font-size: 12px;
	color: var(--color-text-faint);
}

/* =========================================================================
   Content library
   ========================================================================= */
.library-header {
	max-width: 520px;
	margin-bottom: 40px;
}
.library-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 34px;
	color: var(--color-text);
	margin: 12px 0 10px;
}
.library-sub {
	color: var(--color-text-faint);
	font-size: 13.5px;
	margin: 0;
}
.library-empty {
	color: var(--color-text-faint);
	font-size: 14px;
}

.library-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.library-card {
	display: block;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	overflow: hidden;
	transition: transform .3s, border-color .3s;
}
.library-card:hover {
	transform: translateY(-4px);
	border-color: var(--color-gold);
}
.library-card-cover {
	position: relative;
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, #221b12, #120c14 55%, #0b0906);
	overflow: hidden;
}
.library-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.library-card-type {
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-bg);
	background: var(--color-gold);
	padding: 4px 8px;
	border-radius: 2px;
}
.library-card-duration {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--color-text);
	background: rgba(11, 9, 6, .75);
	padding: 3px 7px;
	border-radius: 2px;
}
.library-card-title {
	padding: 12px 14px;
	font-size: 13.5px;
	color: var(--color-text);
	font-weight: 500;
}
.library-card-caption {
	padding: 0 14px 12px;
	margin-top: -8px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 13px;
	color: var(--color-text-faint);
}

.library-back {
	display: inline-block;
	font-size: 12.5px;
	color: var(--color-text-muted);
	margin-bottom: 24px;
}
.library-back:hover {
	color: var(--color-gold);
}
.library-detail-header {
	max-width: 560px;
	margin-bottom: 28px;
}
.library-detail-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 30px;
	color: var(--color-text);
	margin: 12px 0 10px;
}
.library-detail-excerpt {
	color: var(--color-text-faint);
	font-size: 13.5px;
	margin: 0;
}

.library-video-wrap {
	position: relative;
	border: 1px solid var(--color-gold);
	border-radius: 2px;
	overflow: hidden;
	background: #000;
}
.library-video {
	width: 100%;
	display: block;
	max-height: 70vh;
}
.library-video-duration {
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--color-text-faint);
}
/* Same caption "moment" as Magazine's baked-in bottom credit line — a
   short gold rule announcing the caption, same gold as the visible
   watermark and every heading elsewhere. Real HTML here rather than
   baked into the image (Library doesn't have Magazine's canvas-flip
   constraint, see inc/watermark.php), but the typographic language
   (italic Bodoni Moda caption, gold accent rule, muted sans-serif
   description underneath) is deliberately the same across both, and
   across every place Library shows a caption+description together —
   this film detail page and the photo lightbox below. */
.library-media-caption::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--color-gold);
	margin-bottom: 12px;
}
.library-media-caption {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	color: var(--color-text);
	margin: 20px 0 6px;
}
.library-media-description {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--color-text-faint);
	max-width: 640px;
	margin: 0;
}

/* Display-time-only watermark for video — see page-library.php's comment
   for why this can't be baked into the .mp4 the way image watermarks are.
   pointer-events: none so it never blocks the native <video controls>
   sitting underneath it. */
.library-video-watermark {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	padding: 10px;
}
.library-video-watermark-trace {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .04em;
	color: rgba(245, 239, 228, .16);
}

.library-gallery {
	display: grid;
	/* auto-fit, not auto-fill — reads as roughly 3-4 smaller thumbnails
	   per row on a typical desktop width and reflows on its own at any
	   viewport, but the real reason it's auto-fit specifically: auto-fill
	   reserves empty grid tracks even when there's no content for them
	   (a 3-photo set would leave two dangling empty columns' worth of gap
	   on the right instead of the 3 photos filling the row), confirmed by
	   testing both against this exact "First Light" 3-photo test set —
	   auto-fit collapses those empty tracks so a short gallery still
	   fills its row, with no difference for a full gallery that already
	   wraps multiple rows either way. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.library-gallery-item {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	appearance: none;
}
.library-gallery-image {
	width: 100%;
	display: block;
	border-radius: 2px;
	border: 1px solid var(--color-border);
}
/* Same italic Bodoni Moda as every other caption in Library/Magazine —
   family consistency even at this small, compact size. No gold accent
   rule here on purpose: that's reserved for the single-focus "individual
   photo/film displayed" moment (the lightbox and the film detail page
   below), not repeated on every thumbnail in a dense grid, which would
   just read as visual noise at this scale. */
.library-gallery-item-caption {
	display: block;
	margin-top: 6px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 12.5px;
	color: var(--color-text-faint);
}

/* ---- Lightbox: opens on a gallery thumbnail click (assets/js/main.js) ---- */
.library-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(6, 5, 3, .94);
	display: flex;
	align-items: center;
	justify-content: center;
}
.library-lightbox[hidden] {
	display: none;
}
.library-lightbox-body {
	max-width: min(90vw, 900px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 16px;
}
.library-lightbox-image {
	max-width: 100%;
	max-height: 70vh;
	border-radius: 2px;
	border: 1px solid var(--color-border);
	object-fit: contain;
}
.library-lightbox-caption::before {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	background: var(--color-gold);
	margin: 0 auto 12px;
}
.library-lightbox-caption {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	color: var(--color-text);
	margin-top: 18px;
	text-align: center;
}
.library-lightbox-caption:empty,
.library-lightbox-description:empty {
	display: none;
}
.library-lightbox-description {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-faint);
	margin-top: 6px;
	text-align: center;
	max-width: 560px;
}
.library-lightbox-close {
	position: absolute;
	top: 18px;
	right: 22px;
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: var(--color-text);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
}
.library-lightbox-close:hover {
	color: var(--color-gold);
}
.library-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: rgba(11, 9, 6, .6);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.library-lightbox-nav:hover {
	border-color: var(--color-gold);
	background: rgba(217, 184, 120, .16);
}
.library-lightbox-nav:disabled {
	opacity: .3;
	cursor: default;
	pointer-events: none;
}
.library-lightbox-prev {
	left: 16px;
}
.library-lightbox-next {
	right: 16px;
}
@media (max-width: 640px) {
	.library-lightbox-nav {
		width: 38px;
		height: 38px;
	}
	.library-lightbox-prev { left: 4px; }
	.library-lightbox-next { right: 4px; }
}

/* =========================================================================
   Magazine reader
   ========================================================================= */
.magazine-reader {
	text-align: center;
}
.magazine-reader-header {
	text-align: left;
	margin-bottom: 24px;
}
.magazine-page-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.magazine-page-image {
	max-width: 100%;
	max-height: 78vh;
	border: 1px solid var(--color-border);
	background: var(--color-bg-alt);
	opacity: 0;
	transition: opacity .35s ease;
	-webkit-user-select: none;
	user-select: none;
}
.magazine-page-image.is-loaded {
	opacity: 1;
}
.magazine-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(217, 184, 120, .5);
	background: rgba(11, 9, 6, .7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gold);
	backdrop-filter: blur(2px);
	cursor: pointer;
	padding: 0;
	z-index: 5;
}
.magazine-nav:hover {
	border-color: var(--color-gold);
	background: rgba(217, 184, 120, .16);
}
.magazine-nav:disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}
.magazine-nav-prev {
	left: -16px;
}
.magazine-nav-next {
	right: -16px;
}
.magazine-page-indicator {
	margin-top: 18px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--color-text-faint);
}

/* Mobile long-press deterrent for every protected media element (Library
   gallery/cover images, Magazine cover/single-page images, Library film).
   oncontextmenu="return false" and the dragstart guard in main.js only
   cover desktop right-click/drag — neither one touches a mobile long-press,
   which is how iOS/Android surface their own native "Save Image"/"Copy
   Image" menu regardless of any JS on the page. Given this site's traffic
   is overwhelmingly mobile (see the bottom-tab-bar/16px-input-size work
   elsewhere in this stylesheet), leaving that path unaddressed left the
   single most common real-world "save this" gesture untouched. Still just
   a deterrent, not real prevention — see docs/ARCHITECTURE.md for why
   nothing client-side can be — but it closes the one gap that mattered
   most given who's actually browsing this. */
.library-gallery-image,
.library-card-cover img,
.magazine-page-image,
.library-lightbox-image,
.library-video {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ---- Page-flip reader (real page-turn animation, StPageFlip) ---- */
.magazine-flipbook-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	transform-origin: center;
	transition: transform .55s cubic-bezier(.6, 0, .15, 1), opacity .5s ease;
}
#magazine-flipbook {
	/* Static fallback for the instant before JS runs (the div has no
	   content yet either way, so this is only a placeholder box, not
	   something a user actually sees at the wrong size). Once
	   magazine-flipbook.js runs, its inline `width`/`aspect-ratio`
	   take over — see the long comment there for why plain
	   `aspect-ratio` + `max-height` alone isn't enough: on a wide
	   screen, height (not width) ends up being the binding constraint,
	   and CSS aspect-ratio doesn't reciprocally shrink width to match
	   once max-height clamps it, leaving the exact white-margin bug
	   this is fixing. Kept in the same `min(100%, calc(78vh * ratio))`
	   form here for consistency, even though it's rarely the value
	   actually rendered. */
	aspect-ratio: 1100 / 733;
	width: min(100%, calc(78vh * 1100 / 733));
	max-width: 100%;
	max-height: 78vh;
	margin: 0 auto;
	-webkit-user-select: none;
	user-select: none;
}
/* StPageFlip renders its own page surfaces as plain <img>-filled divs —
   this keeps the same protective right-click/drag deterrent the old
   single-image view had (see assets/js/main.js's generic img/video
   dragstart guard, which doesn't reach inside the library's own DOM). */
#magazine-flipbook img {
	pointer-events: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
.magazine-flipbook-wrap .magazine-nav-prev {
	left: -16px;
}
.magazine-flipbook-wrap .magazine-nav-next {
	right: -16px;
}
/* Hidden until the book is actually open — while the cover is up these
   sit behind it (z-index), so they were never clickable, but they were
   still visible/reachable at the flipbook-wrap's edges, which stick out
   slightly wider than the cover card in some layouts. */
.magazine-flipbook-wrap .magazine-nav {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.magazine-reader-stage.is-open .magazine-flipbook-wrap .magazine-nav {
	opacity: 1;
	pointer-events: auto;
}
.magazine-reader-stage.is-open .magazine-flipbook-wrap .magazine-nav:disabled {
	opacity: .35;
	pointer-events: none;
}
/* Tap zones over the book's own edges, positioned/sized in JS to match
   its actual rendered rect (magazine-flipbook.js: syncHotzones() — the
   book's width is itself JS-driven, so a fixed CSS left/right can't track
   it). Only switched on at the first/last page. Sits above the book's own
   canvas (z-index) so the tap never reaches — and risks the vendored
   library's silent no-op — in the first place. */
.magazine-flip-hotzone {
	position: absolute;
	z-index: 6;
	cursor: pointer;
	display: none;
}
.magazine-flip-hotzone.is-active {
	display: block;
}

/* ---- Closed-cover start state ----
   Sits absolutely over the already-initialized flipbook (which keeps its
   real layout size the whole time — see magazine-flipbook.js) so opening
   it is just a crossfade/scale-out, not a re-init. */
.magazine-reader-stage {
	position: relative;
}
/* .magazine-cover is a full-bleed, opaque backdrop — it always fills the
   whole stage (inset:0) regardless of the flipbook's own shape, which is
   the point: the flipbook switches to a wide landscape aspect-ratio for
   the two-page spread once opened (syncAspectRatio(), magazine-
   flipbook.js), but a CLOSED magazine cover has to stay portrait-shaped
   no matter what the book underneath is about to become. The backdrop
   both masks that (possibly wider) book completely and fills any space
   beside the portrait card below on a wide viewport, while
   .magazine-cover-card is the actual portrait-proportioned (4:5), visibly
   "closed book" element centered within it. */
.magazine-cover {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	cursor: pointer;
	opacity: 1;
	transition: opacity .6s ease;
}
.magazine-cover-card {
	/* Text inside is sized in cqw (container-query width), not vw —
	   the card's rendered width varies a lot across real device sizes
	   (portrait, capped at 78vh tall), and vw sizes text off the
	   *viewport*, not the card, so the same design reads at wildly
	   different relative scale on a phone vs. a wide desktop window.
	   cqw ties every size to this element's own box, matching the
	   reference design (fixed px at a fixed 340px reference width)
	   proportionally at any real card size. */
	container-type: inline-size;
	container-name: magazine-cover;
	position: relative;
	height: 100%;
	aspect-ratio: 4 / 5;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.magazine-cover-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.magazine-cover-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 9, 6, .55) 0%, rgba(11, 9, 6, .15) 34%, rgba(11, 9, 6, .2) 58%, rgba(11, 9, 6, .88) 100%);
}
/* "The Glossy" — the finalized cover direction, one of three pitched
   (see docs/ARCHITECTURE.md). Full-bleed photo, masthead cropped tight to
   the top edge, a huge low-opacity ghost numeral behind the headline row
   for depth. All text sourced from the Issue's "Cover text" admin fields
   (inc/magazine.php) — everything's optional and just doesn't print when
   empty, except the date, which falls back to the issue's publish date. */
.magazine-cover-frame {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 5.5% 7% 7%;
	pointer-events: none;
}
.magazine-cover-kicker {
	text-align: center;
	font-family: var(--font-mono);
	font-size: clamp(9px, 2.8cqw, 12px);
	font-weight: 500;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin: 0 0 10px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.magazine-cover-masthead {
	text-align: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(24px, 9.7cqw, 46px);
	line-height: .96;
	letter-spacing: -.03em;
	color: var(--color-gold-bright);
	margin: 0 0 22px;
	text-shadow: 0 4px 24px rgba(0, 0, 0, .6);
}
/* "Eden Rose After Dark", or just "Eden Rose" if the full name doesn't
   fit — swapped by container width rather than JS truncation/measuring. */
.magazine-cover-masthead-short {
	display: none;
}
@container magazine-cover (max-width: 260px) {
	.magazine-cover-masthead-full {
		display: none;
	}
	.magazine-cover-masthead-short {
		display: inline;
	}
}
.magazine-cover-meta {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: clamp(9px, 2.8cqw, 12px);
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: .88;
	padding-top: 14px;
	border-top: 1px solid rgba(217, 184, 120, .3);
}
.magazine-cover-bottom {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
}
/* Deliberately empty — the ghost numeral above and the masthead already
   carry the issue's identity; a redundant "Issue No. 01" caption here
   just repeated what /magazine/?issue=…'s own page header already says.
   Kept as an element (not removed outright) purely so this row's
   flex layout has a left-hand anchor if a future issue wants one. */
.magazine-cover-headline {
	margin: 0;
}
.magazine-cover-contents {
	text-align: right;
	max-width: 44%;
	pointer-events: auto;
}
/* "In this Magazine" teaser list — DESIGN.md's List component spec
   (hairline-separated rows, metadata above title) adapted for the cover:
   a mono eyebrow label, then items in the site's real body font (Jost —
   Literata from the Stitch mockup was never actually loaded by this
   theme, see assets/css/fonts.css, so this reuses what's already there
   instead of adding a new webfont for one element). */
.magazine-cover-contents-label {
	font-family: var(--font-mono);
	font-size: clamp(8px, 2.65cqw, 10.5px);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-gold);
	opacity: .9;
	margin: 0 0 8px;
}
.magazine-cover-contents ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.magazine-cover-contents li {
	font-family: var(--font-body);
	font-size: clamp(9.5px, 3.24cqw, 13px);
	line-height: 1.5;
	color: var(--color-text);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
	padding: 5px 0;
	border-top: .5px solid rgba(217, 184, 120, .3);
}
.magazine-cover-contents li:first-child {
	border-top: none;
	padding-top: 0;
}
.magazine-cover-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-gold);
	opacity: .85;
	margin-bottom: 10px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.magazine-cover-open-btn {
	pointer-events: auto;
	display: block;
	width: 100%;
	margin-top: 20px;
	border: none;
	padding: 13px;
	background: var(--color-gold-bright);
	/* Not var(--color-bg) — a deliberate warm dark brown distinct from
	   the page's own near-black, matching the reference design exactly. */
	color: #241a0c;
	font-family: var(--font-mono);
	font-size: clamp(9.5px, 3.1cqw, 12px);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: box-shadow .3s, transform .3s;
}
.magazine-cover-open-btn:hover {
	box-shadow: 0 0 26px rgba(240, 217, 160, .35);
	transform: translateY(-2px);
}
.magazine-reader-stage.is-open .magazine-cover {
	opacity: 0;
	pointer-events: none;
}
.magazine-reader-stage.is-open .magazine-cover-card {
	transform: scale(1.04);
}

/* ---- Closing state: last page → book snaps shut → "thank you" → cover ----
   Same absolute-over-the-flipbook approach as the opening cover, toggled
   independently (magazine-flipbook.js adds/removes .is-closing on the
   stage) so it can be shown while .is-open is still set, then both get
   cleared together once the auto-reset timer fires. The flipbook itself
   visually collapses shut first (below) — the "thank you" screen fades in
   right behind it (delayed), not simultaneously, so it reads as the book
   closing and *then* a message appearing, not just a hard cut. */
.magazine-reader-stage.is-closing .magazine-flipbook-wrap {
	transform: scaleX(.05) scaleY(.97);
	opacity: 0;
}
/* Same "opaque full-bleed backdrop + portrait card" split as the front
   cover, and for the same reason — the backdrop always fills the stage
   regardless of the (possibly landscape) flipbook underneath. */
.magazine-closing {
	position: absolute;
	inset: 0;
	z-index: 21;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease .35s;
}
.magazine-reader-stage.is-closing .magazine-closing {
	opacity: 1;
	pointer-events: auto;
}
.magazine-closing-card {
	position: relative;
	height: 100%;
	aspect-ratio: 4 / 5;
	max-width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	border: 1px solid var(--color-border);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6);
}
/* Same cover image as the front (page-magazine.php: $cover_url), so this
   genuinely reads as "the last page is the cover again" — a vignette
   scrim instead of the front cover's top/bottom gradient, since text here
   is dead-centered rather than pinned to the top/bottom edges. */
.magazine-closing-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.magazine-closing-scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(11, 9, 6, .55) 0%, rgba(11, 9, 6, .9) 78%);
}
.magazine-closing-content {
	position: relative;
	z-index: 2;
	max-width: 360px;
}
.magazine-closing-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 28px;
	color: var(--color-text);
	margin: 0 0 10px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.magazine-closing-sub {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--color-text-faint);
	margin: 0;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* No mobile-specific override needed for the cover text anymore — every
   size above is in cqw (relative to .magazine-cover-card's own rendered
   width, see its container-type declaration), so it scales correctly at
   any real card size on its own instead of needing hand-tuned viewport
   breakpoints. */

/* =========================================================================
   Legal pages (Terms, Privacy, DMCA) — shared prose styling for
   page-legal.php. Long-form text, so this optimizes for readability
   (narrower measure, generous line-height) rather than reusing a
   card-shaped container like checkout/account.
   ========================================================================= */
.legal-page {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 32px 120px;
}
.legal-page-title {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 40px;
	margin: 0 0 8px;
}
.legal-page-updated {
	color: var(--color-text-faint);
	font-size: 13px;
	margin: 0 0 40px;
}
.legal-content {
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text-muted);
}
.legal-content h2 {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 500;
	color: var(--color-text);
	font-size: 24px;
	margin: 44px 0 16px;
}
.legal-content h2:first-child {
	margin-top: 0;
}
.legal-content h3 {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--color-gold);
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 28px 0 12px;
}
.legal-content p {
	margin: 0 0 16px;
}
.legal-content ul,
.legal-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}
.legal-content li {
	margin: 0 0 8px;
}
.legal-content li::marker {
	color: var(--color-gold);
}
.legal-content a {
	color: var(--color-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.legal-content a:hover {
	color: var(--color-gold-bright);
}
.legal-content strong {
	color: var(--color-text);
}
.legal-content hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 40px 0;
}
.legal-back {
	display: inline-block;
	margin-top: 48px;
	font-size: 13px;
	color: var(--color-text-muted);
}

/* =========================================================================
   Responsive breakpoints (match the approved design exactly)
   ========================================================================= */
@media (max-width: 1024px) {
	.nav-links { display: none; }
	.archive-grid { grid-template-columns: repeat(2, 1fr); }
	.archive-tile-1 { grid-column: span 2; aspect-ratio: 16 / 9; }
	.archive-tile-2 { grid-column: span 1; }
	.archive-tile-3 { grid-column: span 1; }
	.archive-tile-4 { grid-column: span 1; }
	.archive-tile-5 { grid-column: span 1; }
}

@media (max-width: 900px) {
	.hero-wrap { padding: 44px 32px 84px; }
	.hero-grid {
		grid-template-columns: 1fr;
		row-gap: 0;
		column-gap: 0;
		grid-template-areas: 'eyebrow' 'h1' 'video' 'perks';
	}
	/* Single column here has no second grid track for `video` to share
	   a row with, so the desktop bug this wrapper exists to avoid
	   (a multi-row-spanning item forcing equal extra-height distribution
	   across those rows) doesn't apply at this breakpoint — safe to
	   unwrap back to individually-placed items so the video can render
	   in its original spot, right after the headline and ahead of the
	   perks list (no subheading row anymore — that paragraph was removed
	   outright, not just hidden here). The trust-bullet grid is *not* a
	   grid-area here — it now lives inside .hero-video-col itself (between
	   the pitch box and the second video), so it just follows normal
	   document flow within that one 'video' area; only the "What's Behind
	   the Door?" perks list stayed behind in the left column and still
	   needs its own named area. */
	.hero-left-col { display: contents; }
	.hero-eyebrow { grid-area: eyebrow; }
	.hero-h1 { grid-area: h1; }
	.hero-perks { grid-area: perks; }
	.hero-video-col { max-width: 380px; margin: 0 auto 24px; }
	.hero-h1 { font-size: 44px; text-align: center; }
	.scroll-cue { right: 32px; bottom: 79px; }
	.hero-cta-row {
		grid-template-columns: 1fr;
		grid-template-areas: 'primary' 'secondary';
	}

	/* Member nav on mobile: sidebar off, sticky top bar + a fixed bottom
	   tab bar on — the "equivalent mobile navigation pattern" alongside
	   desktop's persistent side nav (§8.1), chosen as a bottom tab bar
	   rather than a hamburger given ~90% mobile traffic and only 4 items.
	   `position: fixed`, deliberately: the bar must stay docked to the
	   bottom of the screen at all times regardless of scroll position or
	   page length, not scroll away with tall content — briefly tried the
	   absolute/"sticky footer" variant (scrolls with the page, only
	   reachable at the true bottom) and reverted back to this on request.
	   The top bar also carries its own compact nav row, duplicating the
	   same 4 links, so a member always has a second, independent way to
	   move around even if anything ever keeps the fixed bar from being
	   tappable. */
	.member-shell { display: block; min-height: 0; }
	.member-sidebar { display: none; }
	.member-mobile-header {
		display: block;
		position: sticky;
		top: 0;
		z-index: 60;
		border-bottom: 1px solid var(--color-border);
		background: var(--color-bg);
	}
	.member-mobile-header-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 20px;
	}
	.member-mobile-brand {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.member-mobile-brand .nav-brand-word { font-size: 16px; }
	.member-mobile-signout {
		font-size: 12px;
		color: var(--color-text-faint);
	}
	.member-mobile-signout:hover { color: var(--color-gold); }
	.member-mobile-nav {
		display: flex;
		gap: 4px;
		overflow-x: auto;
		padding: 0 14px 10px;
	}
	.member-mobile-nav-link {
		flex-shrink: 0;
		padding: 6px 12px;
		border-radius: 20px;
		font-size: 12px;
		letter-spacing: .03em;
		color: var(--color-text-muted);
		border: 1px solid var(--color-border);
	}
	.member-mobile-nav-link.is-active {
		color: var(--color-gold);
		border-color: var(--color-gold);
		background: rgba(217, 184, 120, .08);
	}
	.member-main { padding-bottom: 70px; }
	.member-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 60;
		border-top: 1px solid var(--color-border);
		background: var(--color-bg);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	.member-tab {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		padding: 9px 4px 8px;
		min-height: 54px;
		color: var(--color-text-faint);
		font-size: 10px;
		letter-spacing: .02em;
	}
	.member-tab.is-active { color: var(--color-gold); }
	.account-grid { grid-template-columns: 1fr; }
	.account-card { padding: 22px; }
}

@media (max-width: 640px) {
	.site-nav { padding: 14px 20px; gap: 10px; }
	.nav-logo { width: 36px; height: 36px; }
	.nav-right { gap: 12px; }
	.nav-brand-word { font-size: 18px; }
	.nav-brand-sub { font-size: 8.5px; letter-spacing: .16em; }
	.nav-cta { font-size: 11px; padding: 10px 14px; }
	.hero-wrap { padding: 36px 20px 76px; }
	.hero-eyebrow { font-size: 10px; padding: 6px 12px; }
	.hero-h1 { font-size: 30px; }
	.bullet-grid { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
	.bullet-icon { width: 28px; height: 28px; }
	.bullet-icon svg { width: 13px; height: 13px; }
	.bullet-title { font-size: 12.5px; }
	.hero-video-col { max-width: 320px; }
	.hero-pitch { padding: 14px 16px; margin: 16px 0; }
	.hero-pitch-lead { font-size: 15px; }
	.hero-pitch-body { font-size: 12.5px; }
	.hero-perks-heading { font-size: 15px; }
	.hero-perks-list li { font-size: 13px; }
	.scroll-cue { right: 20px; bottom: 63px; width: 38px; height: 38px; }
	.marquee-item { font-size: 12px; padding: 0 18px; }
	.archive-wrap { padding: 56px 20px; }
	.archive-h2 { font-size: 24px; }
	.archive-grid { grid-template-columns: 1fr; gap: 14px; }
	.archive-tile-1 { grid-column: span 1; aspect-ratio: 4 / 5; }
	.archive-tile-2,
	.archive-tile-3,
	.archive-tile-4,
	.archive-tile-5 { grid-column: span 1; aspect-ratio: 4 / 5; }
	.membership-wrap { padding: 64px 20px; }
	.membership-price { font-size: 48px; }
	.membership-sub { font-size: 13px; }
	.footer-legal { padding: 24px 20px; font-size: 10.5px; }
	.age-gate-dialog { padding: 32px 22px 24px; }
	.member-page { padding: 36px 20px 90px; }
	.dashboard-grid { grid-template-columns: 1fr; }
	.dashboard-status--expired { flex-direction: column; align-items: flex-start; }
	.dashboard-status--expired .btn { width: 100%; text-align: center; }
	.library-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.library-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.minimal-header { padding: 18px 20px 0; }
	.magazine-nav { width: 38px; height: 38px; }
	.magazine-nav-prev { left: 4px; }
	.magazine-nav-next { right: 4px; }
	/* Messages — the fixed 28px card padding plus an 80% bubble cap
	   (both fine on desktop) compound into cramped, narrow-looking chat
	   bubbles on a phone-width screen with barely any content per line.
	   Less padding, wider bubbles, so mobile is the "full width chat"
	   feel it should be, not a scaled-down desktop layout. */
	.messages-thread-card { padding: 16px; }
	.message-bubble { max-width: 92%; padding: 10px 12px; }
	.messages-form { padding-bottom: 16px; }
	.legal-page { padding: 36px 20px 90px; }
	.legal-page-title { font-size: 30px; }
	.legal-content h2 { font-size: 20px; margin: 36px 0 14px; }
}

@media (max-width: 460px) {
	.site-nav { padding: 12px 16px; gap: 8px; }
	.nav-logo { width: 32px; height: 32px; }
	.nav-brand-word { font-size: 16px; }
	.nav-brand-sub { font-size: 7.5px; letter-spacing: .12em; }
	.nav-cta { font-size: 10.5px; padding: 9px 12px; }
	.nav-cta-price { display: none; }
	.messages-thread-card { padding: 12px; }
	.message-bubble { max-width: 96%; }
	.message-bubble-body { font-size: 13.5px; }
}

@media (max-width: 400px) {
	.bullet-title { font-size: 12.5px; }
	.hero-h1 { font-size: 23px; }
	.membership-price { font-size: 38px; }
}