/* ============================================================
   Mood — Profil
   Karte aus Hauptspalte und Portraetspalte. Die Sprungmarken im
   Portraet schalten die Abschnitte der Hauptspalte.
   ============================================================ */

.md-profile {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(190px, 23%, 270px);
	border: 1px solid var(--md-rule-hair);
	isolation: isolate;
}
.md-profile > .md-frame { inset: 22px; z-index: 3; }
/* Der Abspielknopf sitzt in der Auskehlung selbst, also im Zwickel
   zwischen Kartenecke und Bogen, und deckt den Bogen dabei ab. */
.md-note {
	position: absolute;
	top: calc(22px + var(--md-r) * .15);
	right: calc(22px + var(--md-r) * .15);
	z-index: 4;
	line-height: 1;
	transform: translate(50%, -50%);
}
.md-note:empty { display: none; }
.md-profile__main {
	min-width: 0;
	padding: var(--md-pad);
	padding-right: clamp(1.5rem, 3vw, 2.5rem);
}

/* Das Portraet ist Flaeche, nicht Bild: es blutet in die Kartenkante.
   Bild und Verlauf liegen getrennt, damit der Filter nur das Bild trifft. */
.md-profile__aside {
	position: relative;
	display: flex;
	min-height: 24rem;
	background: var(--md-portrait-ground);
	overflow: hidden;
}
.md-profile__stick {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	min-width: 0;
	padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 2.5vw, 2.25rem);
}
.md-profile__bg,
.md-profile__veil { position: absolute; inset: 0; }
.md-profile__bg {
	background-position: 30% top;
	background-size: cover;
	background-repeat: no-repeat;
	filter: var(--md-portrait-filter);
}
.md-profile__veil { background: var(--md-portrait-x), var(--md-portrait-y); }
.md-profile__bg--window {
	background: var(--md-bg-image) center 45% / cover fixed no-repeat;
	filter: var(--md-bg-filter);
}
.md-profile__veil--window { background: var(--md-halo), var(--md-veil); }
.md-profile__stick > nav,
.md-profile__stick > section { position: relative; z-index: 2; }

/* ---- Kopf der Karte ---------------------------------------- */
.md-id { padding-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.md-id__row { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.5rem); }
.md-id__mark { flex: 0 0 auto; line-height: 0; }
.md-id__mark img {
	width: 46px; height: 46px;
	object-fit: cover;
	border-radius: 50%;
	filter: var(--md-portrait-filter);
	background: var(--md-wash);
}
.md-id__txt { flex: 1; min-width: 0; }
.md-id .md-kicker { text-indent: 0; margin: 0 0 .3rem var(--md-ls-kicker); }
.md-id .md-name { font-size: clamp(1.4rem, 3vw, 1.8rem); }
.md-id__line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .9rem;
	margin: .55rem 0 0;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
}
.md-id__line > span + span::before {
	content: "";
	display: inline-block;
	width: 3px; height: 3px;
	margin-right: .9rem;
	border-radius: 50%;
	background: var(--md-rule);
	vertical-align: middle;
}
.md-id__by b { font-weight: 400; color: var(--md-ink); }
.md-id__line img { max-height: 1.1rem; width: auto; vertical-align: middle; }
.md-id__acts {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
	margin: 0;
}
.md-id__acts:empty { display: none; }

/* Die Handlungen am Profil sind Zeichen, keine Kaesten. */
.md-act {
	display: inline-flex;
	align-items: center;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-act:hover { color: var(--md-ink-bright); }
.md-act__buddy,
.md-act__block { display: none; }
.md-act[class*="buddy"] .md-act__buddy,
.md-act[class*="ignore"] .md-act__block { display: block; }

/* ---- Steckbriefkopf: Bild links, Zeilen rechts -------------- */
.md-id__motto {
	margin: 1.1rem 0 0;
	font-family: var(--md-f-serif);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--md-ink-dim);
}

/* Steckbrief: Bild und Spielername links, Angaben rechts daneben —
   so bleibt neben dem Bild keine leere Spalte stehen. */
.md-sheettop {
	display: grid;
	grid-template-columns: calc(var(--md-av-w) + 12px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	margin-bottom: 2.1rem;
}
.md-sheettop__id { display: grid; gap: .7rem; }
.md-sheettop__id figure { margin: 0; }
/* Avatar und Bewegtbild laufen in ihrem Mass, wie im Beitrag. Das Bewegtbild
   steht hinter dem Avatar in derselben Spalte und braucht daher den
   staerkeren Selektor, sonst erbt es dessen Hochformat. */
.md-sheettop__id .md-photo img {
	width: var(--md-av-w);
	height: var(--md-av-h);
	max-width: 100%;
	object-fit: cover;
}
.md-sheettop__id .md-sheettop__gif img {
	width: var(--md-gif-w);
	height: var(--md-gif-h);
	object-fit: cover;
}
.md-sheettop__facts { min-width: 0; }

/* Zeilenliste: Beschriftung links, Wert rechts, Haarlinie dazwischen. */
.md-flist { margin: 0; }
.md-flist__r {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	border-top: 1px solid var(--md-rule-hair);
}
.md-flist__r:first-child { border-top: 0; }
.md-flist dt {
	flex: 0 0 auto;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-flist dd {
	margin: 0;
	min-width: 0;
	text-align: right;
	font-size: var(--md-t-body);
	color: var(--md-ink);
}
.md-flist dd a { color: var(--md-ink-dim); }
.md-flist dd a:hover { color: var(--md-ink); }
.md-more { margin-left: .6rem; font-size: var(--md-t-micro); letter-spacing: var(--md-ls-nav); text-transform: uppercase; color: var(--md-ink-faint); }
.md-more:hover { color: var(--md-ink); }

/* ---- Sprungmarken im Portraet ------------------------------- */
.md-pnav { display: grid; margin: 0; padding: 0; list-style: none; }
.md-pnav button {
	display: flex;
	align-items: center;
	gap: .85rem;
	width: 100%;
	padding: .28rem 0;
	background: none;
	border: 0;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-nav);
	font-weight: 500;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: left;
	color: var(--md-ink-faint);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.md-pnav button::before {
	content: "";
	flex: 0 0 var(--md-dash);
	height: 1px;
	background: currentColor;
	transition: flex-basis var(--md-dur) var(--md-ease);
}
.md-pnav button:hover { color: var(--md-ink-dim); }
.md-pnav button:hover::before { flex-basis: calc(var(--md-dash) + 8px); }
.md-pnav button[aria-selected="true"] { color: var(--md-ink-bright); font-weight: 600; }
.md-pnav button[aria-selected="true"]::before { flex-basis: calc(var(--md-dash) + 12px); }

/* Die weiteren Accounts: ein Aufruf im Fuss der Portraetspalte, die Liste
   selbst liegt im Dialog — bei fuenf Charakteren wird die Spalte sonst voll. */
.md-alts__open {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .28rem 0;
	background: none;
	border: 0;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-nav);
	font-weight: 500;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: left;
	color: var(--md-ink-faint);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.md-alts__open::before {
	content: "";
	flex: 0 0 var(--md-dash);
	height: 1px;
	background: currentColor;
	transition: flex-basis var(--md-dur) var(--md-ease);
}
.md-alts__open:hover { color: var(--md-ink-bright); }
.md-alts__open:hover::before { flex-basis: calc(var(--md-dash) + 8px); }

.md-alts__box {
	width: min(34rem, calc(100vw - 3rem));
	max-height: 80vh;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
	border-radius: 0;
	box-shadow: 0 30px 80px rgb(0 0 0 / .45);
	color: var(--md-ink);
	font-family: var(--md-f-sans);
	overflow: visible;
}
.md-alts__box::backdrop { background: var(--md-veil); backdrop-filter: blur(3px); }
.md-alts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.md-alts__l {
	font-size: var(--md-t-kicker);
	letter-spacing: var(--md-ls-kicker);
	text-indent: var(--md-ls-kicker);
	text-transform: lowercase;
	color: var(--md-ink-faint);
}
.md-alts__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem 1.25rem; max-height: calc(80vh - 9rem); overflow-y: auto; }
.md-alts__i {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
	color: var(--md-ink-dim);
	transition: color var(--md-dur) var(--md-ease);
}
.md-alts__i--switch:hover { color: var(--md-ink-bright); }
.md-alts__i .md-as__av {
	flex: 0 0 auto;
	width: 34px; height: 34px;
	object-fit: cover;
	border-radius: 50%;
	filter: var(--md-portrait-filter);
}
.md-alts__n {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
}

/* ---- Steckbriefkopf: Bild links, Zeilen rechts -------------- */
.md-id__motto {
	margin: 1.1rem 0 0;
	font-family: var(--md-f-serif);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--md-ink-dim);
}

/* Steckbrief: Bild und Spielername links, Angaben rechts daneben —
   so bleibt neben dem Bild keine leere Spalte stehen. */
.md-sheettop {
	display: grid;
	grid-template-columns: calc(var(--md-av-w) + 12px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2rem);
	align-items: start;
	margin-bottom: 2.1rem;
}
.md-sheettop__id { display: grid; gap: .7rem; }
.md-sheettop__id figure { margin: 0; }
/* Avatar und Bewegtbild laufen in ihrem Mass, wie im Beitrag. Das Bewegtbild
   steht hinter dem Avatar in derselben Spalte und braucht daher den
   staerkeren Selektor, sonst erbt es dessen Hochformat. */
.md-sheettop__id .md-photo img {
	width: var(--md-av-w);
	height: var(--md-av-h);
	max-width: 100%;
	object-fit: cover;
}
.md-sheettop__id .md-sheettop__gif img {
	width: var(--md-gif-w);
	height: var(--md-gif-h);
	object-fit: cover;
}
.md-sheettop__facts { min-width: 0; }

/* Zeilenliste: Beschriftung links, Wert rechts, Haarlinie dazwischen. */
.md-flist { margin: 0; }
.md-flist__r {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .5rem 0;
	border-top: 1px solid var(--md-rule-hair);
}
.md-flist__r:first-child { border-top: 0; }
.md-flist dt {
	flex: 0 0 auto;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-flist dd {
	margin: 0;
	min-width: 0;
	text-align: right;
	font-size: var(--md-t-body);
	color: var(--md-ink);
}
.md-flist dd a { color: var(--md-ink-dim); }
.md-flist dd a:hover { color: var(--md-ink); }
.md-more { margin-left: .6rem; font-size: var(--md-t-micro); letter-spacing: var(--md-ls-nav); text-transform: uppercase; color: var(--md-ink-faint); }
.md-more:hover { color: var(--md-ink); }

/* ---- Sprungmarken im Portraet ------------------------------- */
.md-pnav { display: grid; margin: 0; padding: 0; list-style: none; }
.md-pnav button {
	display: flex;
	align-items: center;
	gap: .85rem;
	width: 100%;
	padding: .28rem 0;
	background: none;
	border: 0;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-nav);
	font-weight: 500;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	text-align: left;
	color: var(--md-ink-faint);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.md-pnav button::before {
	content: "";
	flex: 0 0 var(--md-dash);
	height: 1px;
	background: currentColor;
	transition: flex-basis var(--md-dur) var(--md-ease);
}
.md-pnav button:hover { color: var(--md-ink-dim); }
.md-pnav button:hover::before { flex-basis: calc(var(--md-dash) + 8px); }
.md-pnav button[aria-selected="true"] { color: var(--md-ink-bright); font-weight: 600; }
.md-pnav button[aria-selected="true"]::before { flex-basis: calc(var(--md-dash) + 12px); }

/* Die weiteren Accounts stehen leise im Fuss der Portraetspalte. */
.md-alts__l {
	display: block;
	margin-bottom: .7rem;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-alts__row { display: grid; gap: .5rem; }
.md-alts__i {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-width: 0;
	color: var(--md-ink-faint);
	transition: color var(--md-dur) var(--md-ease);
}
.md-alts__i--switch:hover { color: var(--md-ink-bright); }
.md-alts__i .md-as__av {
	flex: 0 0 auto;
	width: 24px; height: 24px;
	object-fit: cover;
	border-radius: 50%;
	filter: var(--md-portrait-filter);
}
.md-alts__n {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
}

/* Spice Level: zehn Flammen, die bis zum Wert brennen. Die Helligkeit
   traegt den Zustand, gerechnet wird ohne Schleife im Template. */
.md-spice { display: inline-flex; align-items: center; gap: .18rem; color: var(--md-accent-soft); }
.md-spice__f {
	width: 12px; height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linejoin: round;
	opacity: clamp(.16, calc(var(--md-v) - var(--i) + 1), 1);
}

/* ---- Abschnitte der Hauptspalte ----------------------------- */
/* Ein Abschnitt waechst nur bis zu dieser Marke; was laenger ist, laeuft
   in seinem eigenen Feld weiter. So bleibt die Karte ein Rechteck. */
.md-panels { position: relative; margin-top: clamp(1.25rem, 3vw, 2rem); }

/* Blaetterzeichen an der rechten Kante des Abschnitts — nur da, wenn es
   etwas zu blaettern gibt. Gezeichnete Winkel im Akzent. */
.md-scrollcue {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.md-scrollcue[hidden] { display: none; }
.md-scrollcue__b {
	width: 16px; height: 16px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--md-accent);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease), opacity var(--md-dur) var(--md-ease);
}
.md-scrollcue__b::before {
	content: "";
	display: block;
	width: 7px; height: 7px;
	margin: 0 auto;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}
.md-scrollcue__b--up::before { transform: translateY(2px) rotate(-135deg); }
.md-scrollcue__b--down::before { transform: translateY(-2px) rotate(45deg); }
.md-scrollcue__b:hover { color: var(--md-ink-bright); }
.md-scrollcue__b:disabled { opacity: .2; cursor: default; }
.md-scrollcue__b:disabled:hover { color: var(--md-accent); }
/* Feste Hoehe: der Bogen springt beim Reiterwechsel nicht. */
.md-panel {
	height: 600px;
	overflow-y: auto;
	padding-right: 2.2rem;
}
/* Kein Rollbalken — geblaettert wird ueber die Zeichen an der rechten Kante. */
.md-panel,
.rpgrelation_profile_content,
.rpgrelation_description,
.rpgrelation_card_desc,
.rpgrelation_pending_desc,
.rpgrelation_npc_desc { scrollbar-width: none; }
.md-panel::-webkit-scrollbar,
.rpgrelation_profile_content::-webkit-scrollbar,
.rpgrelation_description::-webkit-scrollbar,
.rpgrelation_card_desc::-webkit-scrollbar,
.rpgrelation_pending_desc::-webkit-scrollbar,
.rpgrelation_npc_desc::-webkit-scrollbar { width: 0; height: 0; display: none; }
.md-panel[hidden] { display: none; }
.md-panel > .md-head { margin-bottom: 1.4rem; }
.md-block + .md-block { margin-top: 2.1rem; }
.md-block__v { color: var(--md-ink-dim); }
.md-block__v p:first-child { margin-top: 0; }
.md-block__v p:last-child { margin-bottom: 0; }
.md-block__v img { max-width: 100%; height: auto; }

.md-lock {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--md-rule-hair);
	color: var(--md-ink-dim);
}
.md-lock__k {
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-lock__t { margin: 0; }
.md-lock + .md-sheettop { display: none; }

/* ---- Anhaenge unter der Karte ------------------------------- */
.md-extra { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.md-extra__b + .md-extra__b { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--md-rule-hair); }
.md-extra__l {
	display: block;
	margin-bottom: .8rem;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-extra__links { display: flex; flex-wrap: wrap; gap: .6rem .9rem; }
.md-extra__notes { margin-top: .9rem; color: var(--md-ink-dim); }
.md-extra__ip { margin-bottom: .9rem; max-width: 32rem; }
.md-crumbs ~ .md-notice { margin-top: 1.25rem; }
.md-sig { color: var(--md-ink-dim); }
.md-sig img { max-width: 100%; height: auto; }

/* ---- Schmale Sicht ----------------------------------------- */
@media (max-width: 800px) {
	.md-profile { grid-template-columns: minmax(0, 1fr); }
	.md-profile > .md-frame { inset: 14px; }
	.md-profile__aside { order: -1; }
	.md-profile__stick { min-height: 22rem; }
	.md-profile__bg { background-position: center top; }
	.md-profile__veil { background: var(--md-portrait-y-narrow); }
	.md-profile__bg--window { background-position: center 45%; }
	.md-profile__veil--window { background: var(--md-halo), var(--md-veil); }
	.md-pnav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
	.md-pnav button { width: auto; }
	.md-sheettop { grid-template-columns: minmax(0, 1fr); }
	.md-sheettop__id { max-width: calc(var(--md-av-w) + 12px); }
}

/* ============================================================
   Memberlist — Karten aus Bild, Name und Rang
   ============================================================ */
.md-roster__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .9rem clamp(1rem, 2.5vw, 1.75rem);
	margin: 0 0 1.1rem;
}
.md-roster__field { display: grid; gap: .3rem; min-width: 0; }
.md-roster__l {
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-roster__field .md-form__i { width: 14rem; max-width: 100%; }
.md-roster__order { display: flex; align-items: center; gap: .4rem 1rem; }
.md-roster__order label {
	margin-right: .6rem;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
}

.md-az {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .2rem .7rem;
	padding-bottom: 1rem;
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
	border-bottom: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
}
.md-az a { color: var(--md-ink-faint); transition: color var(--md-dur) var(--md-ease); }
.md-az a:hover { color: var(--md-ink-bright); }
.md-az__all { margin-left: auto; }

/* Die Karten stossen aneinander und teilen sich eine Haarlinie — dieselbe
   Machart wie die Gesuchetafel auf der Startseite. */
.md-roster {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1px;
	background: none;
	border: 1px solid var(--md-rule-hair);
	overflow: hidden;
}
/* Wo keine Karte liegt, steht das Hintergrundbild — die letzte Reihe
   bleibt sonst als leere Flaeche stehen. */
.md-roster::before,
.md-roster::after { content: ""; position: absolute; inset: 0; z-index: -1; }
.md-roster::before {
	background: var(--md-bg-image) center 45% / cover fixed no-repeat;
	filter: var(--md-bg-filter);
}
.md-roster::after { background: var(--md-halo), var(--md-veil); }
.md-mcard {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--md-portrait-ground);
}
.md-mcard__img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
	filter: var(--md-stage-filter);
	transition: filter .35s var(--md-ease);
}
.md-mcard:hover .md-mcard__img { filter: var(--md-photo-filter); }
.md-mcard__t {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: grid;
	gap: .25rem;
	padding: 1rem;
	background: var(--md-portrait-y);
}
.md-mcard__n {
	font-family: var(--md-f-serif);
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: var(--md-ls-display);
	text-transform: uppercase;
	color: var(--md-ink-bright);
}
.md-mcard__r {
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.md-mcard__over {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: .4rem;
	padding: 1rem;
	background: var(--md-veil);
	opacity: 0;
	transition: opacity .3s var(--md-ease);
}
.md-mcard:hover .md-mcard__over { opacity: 1; }
.md-mcard__num {
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-faint);
}
.md-mcard__num b { font-weight: 400; color: var(--md-ink-dim); }
.md-mcard__go {
	margin-top: .5rem;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink);
}
.md-roster__pages { margin-top: clamp(1.5rem, 3vw, 2.25rem); }