/* ============================================================
   members.css — Member features (Pageant Pro Network)
   Components unique to the membership wing. Loads AFTER
   editorial.css on member pages and the new homepage.

   editorial.css stays byte-parallel with bombyhead's copy;
   everything member-specific lives here instead so the shared
   file never drifts. Same tokens, same rules: hairlines, square
   corners, Fraunces italic, the gold ✦ as the only mark.
   ============================================================ */

/* ---- Specimen notice (play phase only — remove at launch) ---- */
.specimenNote {
	display: flex; align-items: center; gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--gold); font-weight: 700;
}
.specimenNote::before { content: "✦"; font-size: 0.8em; }

/* ---- Draft preview bar (tokened preview links only, never public) ---- */
.previewBar {
	margin: 14px 0 0;
	padding: 12px 18px;
	background: var(--cream-2);
	border: 1px solid var(--gold-soft);
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--ink);
}
.previewBar a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Entry header: cover text beside the portrait ---- */
.entryHead {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 3.5rem;
	align-items: center;
	padding: 4.2rem 0 3.4rem;
	border-bottom: 1px solid var(--rule);
}
@media (max-width: 820px) {
	.entryHead { grid-template-columns: 1fr; gap: 2.4rem; padding: 3rem 0 2.6rem; }
	.entryHead__portrait { order: -1; max-width: 340px; }
}

/* The credential line is the honor, set quietly in gold. */
.credential {
	margin: 1.8rem 0 0;
	padding-top: 1.3rem;
	border-top: 1px solid var(--rule);
	font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--gold); font-weight: 700;
	line-height: 2;
}

/* Member's own site, set quietly under the credential */
.entrySite {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
}
.entrySite a {
	color: var(--ink-soft);
	text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.entrySite a:hover { color: var(--wine); }

/* ---- Portrait ---- */
.portraitFrame {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--cream-2);
	border: 1px solid var(--rule);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.portraitFrame img {
	display: block;
	width: 100%; height: 100%;
	object-fit: cover;
	filter: saturate(0.92);
}
/* Typographic placeholder until a member's editorial portrait is set. */
.portraitFrame--placeholder {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 0.6rem;
}
.portraitFrame--placeholder .initials {
	font-family: 'Fraunces', Georgia, serif;
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
	font-style: italic; font-weight: 350;
	font-size: clamp(4rem, 9vw, 6.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wine);
}
.portraitFrame--placeholder::after {
	content: "✦";
	color: var(--gold);
	font-size: 1.1rem;
}
.portraitCaption {
	margin: 0.8rem 0 0;
	font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-faint); font-weight: 600;
	text-align: center;
}

/* ---- Titleholder provenance ---- */
.provenance {
	margin: 2.4rem 0 0;
	padding: 16px 22px;
	background: var(--cream-2);
	border-left: 3px solid var(--gold);
	font-size: 0.95rem;
	line-height: 1.65;
	max-width: 58ch;
}
.provenance b, .provenance strong { font-weight: 600; }

/* ---- The colophon that closes every entry ---- */
.entryColophon {
	margin: 3.6rem 0 0;
	padding: 2.2rem 0 0;
	border-top: 1px solid var(--ink);
	text-align: center;
}
.entryColophon p {
	margin: 0 auto;
	max-width: 52ch;
	font-family: 'Fraunces', Georgia, serif;
	font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
	font-style: italic; font-weight: 380;
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--ink-soft);
}
.entryColophon p::before { content: "✦"; display: block; color: var(--gold); font-style: normal; margin-bottom: 0.9rem; }

/* ---- Magazine pull quote (feature-style, centered) ---- */
.pullQuote {
	margin: 2.8rem 0;
	padding: 2rem 1rem;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-family: 'Fraunces', Georgia, serif;
	font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
	font-style: italic; font-weight: 380;
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.38;
	letter-spacing: -0.01em;
	color: var(--wine);
	text-align: center;
}

/* ---- The member's tip, set apart ---- */
.tipBox {
	margin: 2.6rem 0;
	padding: 1.5rem 1.7rem;
	background: var(--cream-2);
	border-left: 3px solid var(--gold);
}
.tipBox__eyebrow {
	font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--gold); font-weight: 700;
	margin: 0 0 0.6rem;
}
.tipBox p:not(.tipBox__eyebrow) {
	margin: 0;
	font-family: 'Fraunces', Georgia, serif;
	font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
	font-style: italic; font-weight: 420;
	font-size: 1.18rem;
	line-height: 1.5;
	color: var(--ink);
}

/* ---- Plates: a curated set of the member's work, never a gallery dump ---- */
.plates { margin: 3.2rem 0 0; padding-top: 2.4rem; border-top: 1px solid var(--rule); }
.plates__eyebrow {
	font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
	color: var(--ink-soft); font-weight: 700; margin: 0 0 1.4rem;
}
.plateGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .plateGrid { grid-template-columns: repeat(2, 1fr); } }
.plate {
	aspect-ratio: 4 / 5;
	background: var(--cream-2);
	border: 1px solid var(--rule);
	overflow: hidden;
	position: relative;
}
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate--placeholder { display: flex; align-items: center; justify-content: center; }
.plate--placeholder::after { content: "✦"; color: var(--gold); font-size: 1rem; }
.plateCaption {
	margin: 0.9rem 0 0;
	font-size: 0.78rem; line-height: 1.6;
	color: var(--ink-soft);
	max-width: 60ch;
}

/* ---- Film: one short piece per entry, quiet chrome, no platform branding ---- */
.filmFrame {
	margin: 3.2rem 0 0;
	aspect-ratio: 16 / 9;
	background: var(--ink);
	border: 1px solid var(--rule);
	position: relative;
	overflow: hidden;
}
.filmFrame video, .filmFrame iframe { display: block; width: 100%; height: 100%; border: 0; }
.filmFrame--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; }
.filmFrame--placeholder span {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic; font-weight: 380;
	font-size: 1.05rem;
	color: rgba(251, 249, 243, 0.62);
}
.filmFrame--placeholder::before { content: "✦"; color: var(--gold-soft); font-size: 1rem; }

/* ---- Media page (tokened upload — portrait / plates / film) ---- */
.mediaSlot {
	padding: 2rem 0 2.2rem;
	border-bottom: 1px solid var(--rule-soft);
}
.mediaSlot h3 {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic; font-weight: 500;
	font-size: 1.3rem;
	margin: 0 0 0.4rem;
}
.mediaSlot p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1.1rem; max-width: 58ch; }
.mediaSlot input[type="file"] {
	display: block;
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 0.92rem;
	margin: 0 0 0.9rem;
	max-width: 100%;
}
.mediaSlot .formNote { margin-top: 0.8rem; }
.leadForm input[type="url"] {
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 1.02rem;
	padding: 14px 16px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: 0;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.leadForm input[type="url"]::placeholder { color: var(--ink-faint); }
.leadForm input[type="url"]:focus {
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(93, 30, 58, 0.10);
}

.mediaSlot textarea {
	font-family: 'Instrument Sans', system-ui, sans-serif;
	font-size: 1.02rem;
	padding: 14px 16px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: 0;
	outline: none;
	resize: vertical;
	width: 100%;
}
.mediaSlot textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(93, 30, 58, 0.10); }
.mediaSlot .formNote--ok { color: var(--wine); }

/* Staged-media list on the media page */
.stagedList { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.stagedList li {
	display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: 0.95rem;
}
.stagedList .count {
	font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--ink-soft); font-weight: 700;
}
.stagedList a {
	margin-left: auto;
	color: var(--wine);
	text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
	font-size: 0.85rem;
}

/* ---- Homepage member-benefits cards (non-link articleCard cells) ---- */
.benefitCard { cursor: default; }
.benefitCard:hover { background: transparent; }
.benefitCard p { margin: 0 0 0.6rem; }
.benefitCard p:last-child { margin-bottom: 0; }

/* ---- Underwriting line (public-radio model, never "sponsored by") ---- */
.foot__underwrite {
	flex-basis: 100%;
	font-size: 0.78rem;
	color: var(--ink-faint);
	margin: 0;
}
.foot__underwrite a {
	color: var(--ink-soft);
	text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px;
}
.foot__underwrite a:hover { color: var(--wine); }

/* ---- The roll ---- */
.rollList { border-top: 1px solid var(--rule); margin: 0; padding: 0; list-style: none; }
.rollRow {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 24px;
	align-items: baseline;
	padding: 1.25rem 0 1.35rem;
	border-bottom: 1px solid var(--rule-soft);
	color: var(--ink);
	transition: background 0.2s;
}
a.rollRow:hover { background: var(--cream-2); color: var(--ink); }
.rollRow__name {
	font-family: 'Fraunces', Georgia, serif;
	font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
	font-style: italic; font-weight: 400;
	font-size: 1.45rem;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
}
a.rollRow:hover .rollRow__name { color: var(--wine); }
.rollRow__role {
	display: block;
	margin: 0.35rem 0 0;
	font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--ink-soft); font-weight: 600;
}
.rollRow__credential {
	font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--gold); font-weight: 700;
	text-align: right;
	line-height: 1.9;
	max-width: 34ch;
}
@media (max-width: 620px) {
	.rollRow { grid-template-columns: 1fr; row-gap: 6px; }
	.rollRow__credential { text-align: left; }
}