/* The caretakers of Madina.
   Layers, back to front: prayer-time sky, stars, sun or moon, khatam lattice, light cone,
   giant first name, rising dust, far and back cloud banks, the person, front cloud veil,
   grain, then the glass card, heading and index. Colours arrive as variables from
   caretakers.js, blended between people as the visitor scrolls. */
.ct {
	--st: 20, 33, 66; --sb: 244, 183, 150; --sun: 255, 214, 170; --glow: 255, 190, 150;
	--ink: 255, 255, 255; --ink2: 255, 226, 210; --acc: 255, 208, 40; --cloud: 255, 232, 226;
	--stars: .7; --sx: 64%; --sy: 70%; --cone: .14;
	position: relative;
	height: calc(var(--n, 4) * 125svh + 70svh);
	background: rgb(var(--st));
	color: rgb(var(--ink));
	isolation: isolate;
}
.ct__pin { position: sticky; top: var(--hdr, 0px); height: calc(100svh - var(--hdr, 0px)); overflow: hidden; contain: paint; }
.ct__pin > * { position: absolute; }

/* Sky, with a second, lower band of colour near the horizon */
.ct__sky { inset: 0; background:
	radial-gradient(120% 70% at 50% 108%, rgba(var(--sb), 1) 0%, rgba(var(--sb), .55) 38%, rgba(var(--sb), 0) 72%),
	linear-gradient(180deg, rgb(var(--st)) 0%, rgb(var(--st)) 18%, rgba(var(--sb), .85) 100%); }
.ct__stars { inset: 0 0 35% 0; opacity: var(--stars); background-image:
	radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
	radial-gradient(1.4px 1.4px at 44% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 12%, #fff 50%, transparent 51%),
	radial-gradient(1.2px 1.2px at 79% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90% 6%, #fff 50%, transparent 51%),
	radial-gradient(1px 1px at 7% 40%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 35% 44%, #fff 50%, transparent 51%),
	radial-gradient(1px 1px at 70% 38%, #fff 50%, transparent 51%), radial-gradient(1.1px 1.1px at 95% 34%, #fff 50%, transparent 51%);
	background-size: 520px 380px; animation: ctTwinkle 6s ease-in-out infinite alternate; }
@keyframes ctTwinkle { to { filter: brightness(1.6); } }
.ct__sun { left: var(--sx); top: var(--sy); width: min(78vmin, 860px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--sun), 1) 0%, rgba(var(--sun), .95) 13%, rgba(var(--glow), .42) 16%, rgba(var(--glow), .16) 42%, rgba(var(--glow), 0) 72%); }
.ct__lattice { inset: 0; opacity: .07; mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M48 20l8.2 8.2H67.8v11.6L76 48l-8.2 8.2v11.6H56.2L48 76l-8.2-8.2H28.2V56.2L20 48l8.2-8.2V28.2h11.6z'/%3E%3Cpath d='M0 0l8 8M96 0l-8 8M0 96l8-8M96 96l-8-8'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-image: radial-gradient(70% 60% at 60% 45%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 60% 45%, #000, transparent 75%); }
.ct__cone { left: var(--sx); top: -10%; width: 70vmin; height: 120%; transform: translateX(-50%); opacity: var(--cone); mix-blend-mode: screen;
	background: linear-gradient(180deg, rgba(var(--sun), .9), rgba(var(--sun), 0) 80%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(14px); }

/* Giant first name, behind the person */
.ct__words { inset: 0; pointer-events: none; }
.ct__words span { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.96); white-space: nowrap;
	font: 400 clamp(120px, 24vw, 420px)/.8 "Instrument Serif", Georgia, serif; font-style: italic; letter-spacing: -.02em;
	color: transparent; -webkit-text-stroke: 1px rgba(var(--ink), .22); opacity: 0; transition: opacity .9s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.ct__words span.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Rising dust in the light */
.ct__dust { left: var(--sx); top: 0; bottom: 0; width: 46vmin; transform: translateX(-50%); }
.ct__dust i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: rgba(var(--sun), .9); box-shadow: 0 0 8px rgba(var(--glow), .9); animation: ctRise 14s linear infinite; opacity: 0; }
.ct__dust i:nth-child(1) { left: 8%; animation-delay: -1s; } .ct__dust i:nth-child(2) { left: 22%; animation-delay: -6s; animation-duration: 17s; }
.ct__dust i:nth-child(3) { left: 35%; animation-delay: -11s; } .ct__dust i:nth-child(4) { left: 48%; animation-delay: -3s; animation-duration: 19s; }
.ct__dust i:nth-child(5) { left: 60%; animation-delay: -8s; } .ct__dust i:nth-child(6) { left: 72%; animation-delay: -13s; animation-duration: 16s; }
.ct__dust i:nth-child(7) { left: 84%; animation-delay: -5s; } .ct__dust i:nth-child(8) { left: 15%; animation-delay: -9s; animation-duration: 21s; width: 2px; height: 2px; }
.ct__dust i:nth-child(9) { left: 41%; animation-delay: -15s; animation-duration: 18s; width: 2px; height: 2px; } .ct__dust i:nth-child(10) { left: 66%; animation-delay: -2s; width: 2px; height: 2px; }
.ct__dust i:nth-child(11) { left: 91%; animation-delay: -7s; animation-duration: 22s; } .ct__dust i:nth-child(12) { left: 28%; animation-delay: -12s; animation-duration: 20s; }
@keyframes ctRise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .55; } 100% { transform: translate(24px, -95svh); opacity: 0; } }

/* Clouds: soft white masses in the sky's own tint, drifting slowly (back bank behind the person, veil in front) */
.ct__clouds { left: -10%; right: -10%; pointer-events: none; }
.ct__clouds i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--cloud), 1), rgba(var(--cloud), .78) 38%, rgba(var(--cloud), 0)); animation: ctDrift 22s ease-in-out infinite alternate; }
.ct__clouds--far { bottom: 18%; height: 34%; opacity: .5; transform: translateX(var(--par, 0)); }
.ct__clouds--far i:nth-child(1) { left: 0; top: 30%; width: 34%; height: 70%; } .ct__clouds--far i:nth-child(2) { left: 22%; top: 10%; width: 30%; height: 80%; animation-duration: 27s; }
.ct__clouds--far i:nth-child(3) { left: 46%; top: 40%; width: 28%; height: 60%; animation-duration: 25s; } .ct__clouds--far i:nth-child(4) { left: 66%; top: 18%; width: 30%; height: 82%; }
.ct__clouds--far i:nth-child(5) { left: 84%; top: 36%; width: 26%; height: 64%; animation-duration: 30s; }
.ct__clouds--back { bottom: -6%; height: 44%; transform: translateX(calc(var(--par, 0) * 1.6)); }
.ct__clouds--back i:nth-child(1) { left: 2%; top: 30%; width: 34%; height: 80%; } .ct__clouds--back i:nth-child(2) { left: 20%; top: 6%; width: 32%; height: 96%; animation-duration: 26s; animation-delay: -6s; }
.ct__clouds--back i:nth-child(3) { left: 40%; top: 18%; width: 30%; height: 84%; animation-duration: 19s; animation-delay: -3s; } .ct__clouds--back i:nth-child(4) { left: 58%; top: 0; width: 34%; height: 100%; animation-duration: 24s; }
.ct__clouds--back i:nth-child(5) { left: 78%; top: 22%; width: 30%; height: 80%; animation-duration: 28s; animation-delay: -9s; } .ct__clouds--back i:nth-child(6) { left: 30%; top: 46%; width: 44%; height: 60%; animation-duration: 21s; }
.ct__clouds--front { bottom: -6%; height: 34%; z-index: 3; transform: translateX(calc(var(--par, 0) * -2.2)); }
.ct__clouds--front i { opacity: .92; }
.ct__clouds--front i:nth-child(1) { left: 6%; top: 30%; width: 36%; height: 80%; } .ct__clouds--front i:nth-child(2) { left: 32%; top: 12%; width: 34%; height: 96%; animation-duration: 25s; animation-delay: -5s; }
.ct__clouds--front i:nth-child(3) { left: 56%; top: 26%; width: 34%; height: 84%; animation-duration: 18s; } .ct__clouds--front i:nth-child(4) { left: 74%; top: 40%; width: 32%; height: 70%; animation-duration: 29s; }
.ct__clouds--front i:nth-child(5) { left: -4%; top: 50%; width: 30%; height: 60%; animation-duration: 23s; }
@keyframes ctDrift { from { transform: translateX(-2.2%); } to { transform: translateX(2.4%); } }

/* The people */
.ct__people { inset: 0; z-index: 2; }
.ct__p { position: absolute; left: 60%; bottom: 7svh; height: 80svh; margin: 0; display: flex; align-items: flex-end; justify-content: center;
	transform: translateX(-50%) translateY(calc(var(--y, 1) * 62%)) scale(calc(.94 + var(--v, 0) * .06)); opacity: var(--v, 0); will-change: transform, opacity; }
.ct__p canvas, .ct__p img { display: block; height: 100%; width: auto; max-width: 52vw; object-fit: contain; object-position: bottom center;
	filter: drop-shadow(0 0 1px rgba(var(--sun), .7)) drop-shadow(0 0 34px rgba(var(--glow), .38)) drop-shadow(0 40px 50px rgba(0, 0, 0, .25)); }
.ct__p canvas + img { display: none; }
/* The person comes out of the clouds: the lower body dissolves (mask), a band of frosted glass softens it,
   and a veil of cloud that travels with the person wraps the base, in front. */
.ct__p canvas, .ct__p img { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .55) 74%, rgba(0, 0, 0, 0) 94%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0, 0, 0, .55) 74%, rgba(0, 0, 0, 0) 94%); }
.ct__glass { position: absolute; left: -8%; right: -8%; bottom: 0; height: 34%; pointer-events: none;
	-webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
	-webkit-mask-image: linear-gradient(0deg, #000 35%, transparent); mask-image: linear-gradient(0deg, #000 35%, transparent); }
.ct__veil { position: absolute; left: -38%; right: -38%; bottom: -10%; height: 42%; pointer-events: none; z-index: 1; }
.ct__veil i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--cloud), .98), rgba(var(--cloud), .72) 40%, rgba(var(--cloud), 0)); animation: ctDrift 20s ease-in-out infinite alternate; }
.ct__veil i:nth-child(1) { left: 4%; top: 34%; width: 40%; height: 70%; }
.ct__veil i:nth-child(2) { left: 24%; top: 12%; width: 34%; height: 80%; animation-duration: 24s; animation-delay: -7s; }
.ct__veil i:nth-child(3) { left: 44%; top: 26%; width: 36%; height: 76%; animation-duration: 17s; animation-delay: -3s; }
.ct__veil i:nth-child(4) { left: 62%; top: 38%; width: 34%; height: 64%; animation-duration: 27s; }
.ct__veil i:nth-child(5) { left: 30%; top: 52%; width: 44%; height: 56%; animation-duration: 21s; animation-delay: -11s; opacity: .9; }
.ct__p.is-still canvas { display: none; } .ct__p.is-still canvas + img { display: block; }
.ct__mono { height: 70%; aspect-ratio: 3 / 4; display: grid; place-items: center; border-radius: 999px 999px 24px 24px; border: 1.5px solid rgba(var(--acc), .8);
	font: italic 400 clamp(120px, 16vw, 240px)/1 "Instrument Serif", Georgia, serif; color: rgba(var(--acc), .9);
	background: radial-gradient(80% 60% at 50% 30%, rgba(var(--glow), .35), rgba(var(--glow), 0)); }
.ct__grain { inset: 0; z-index: 4; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Heading, cards, index */
.ct__head { z-index: 5; left: clamp(20px, 6vw, 110px); top: clamp(96px, 14svh, 170px); max-width: 560px; opacity: var(--hv, 1); transform: translateY(calc((1 - var(--hv, 1)) * -24px)); }
.ct__title { margin: 0; font: 800 clamp(40px, 5.2vw, 84px)/.98 Inter, system-ui, sans-serif; letter-spacing: -.045em; color: rgb(var(--ink)); }
.ct__title em { font: italic 400 1.1em/1 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; color: rgb(var(--acc)); }
.ct__lede { margin: 18px 0 0; max-width: 34ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; color: rgba(var(--ink2), .95); }

.ct__cards { z-index: 5; left: clamp(20px, 6vw, 110px); bottom: clamp(36px, 10svh, 120px); width: min(500px, 40vw); }
.ct__card { position: absolute; left: 0; bottom: 0; width: 100%; padding: 28px 30px 30px; border-radius: 22px;
	/* smoked glass in the sky's own dark tone, so white type reads over bright clouds and suns */
	background: linear-gradient(160deg, rgba(var(--st), .62), rgba(var(--st), .40));
	-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .10), 0 40px 80px -40px rgba(0, 0, 0, .6);
	opacity: 0; transform: translateY(26px); transition: opacity .28s ease, transform .5s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.ct.is-light .ct__card { background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 74, 67, .08), 0 40px 80px -40px rgba(11, 74, 67, .4); }
.ct__card.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s ease .32s, transform .9s cubic-bezier(.16, 1, .3, 1) .32s; }
.ct__card.is-gone { transform: translateY(-20px); }
.ct__hon { margin: 0 0 6px; font: italic 400 24px/1 "Instrument Serif", Georgia, serif; color: rgb(var(--acc)); }
.ct__name { margin: 0; font: 800 clamp(34px, 3.4vw, 58px)/1 Inter, system-ui, sans-serif; letter-spacing: -.04em; color: rgb(var(--ink)); }
.ct__role { margin: 12px 0 0; font: 600 15px/1.3 Inter, system-ui, sans-serif; color: rgb(var(--ink)); }
.ct__role::before { content: ""; display: inline-block; width: 26px; height: 2px; margin: 0 10px 4px 0; vertical-align: middle; background: rgb(var(--acc)); }
.ct__line { margin: 12px 0 0; font-size: 16.5px; line-height: 1.55; color: rgba(var(--ink2), .95); }
.ct__all { position: absolute; left: 0; bottom: -44px; font: 700 14.5px/1 Inter, system-ui, sans-serif; color: rgb(var(--ink)); text-decoration: none; border-bottom: 1.5px solid rgba(var(--acc), .9); padding-bottom: 6px; }
.ct__all:hover { color: rgb(var(--acc)); }

.ct__rail { z-index: 5; right: clamp(16px, 3vw, 54px); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ct__rail button { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border: 0; background: none; cursor: pointer; color: rgba(var(--ink), .45); font: 500 13px/1 Inter, system-ui, sans-serif; text-align: left; transition: color .4s; }
.ct__rail b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ct__rail span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .6s cubic-bezier(.16, 1, .3, 1), opacity .4s; }
.ct__rail li.is-on button { color: rgb(var(--ink)); }
.ct__rail li.is-on span, .ct__rail button:hover span, .ct__rail button:focus-visible span { max-width: 240px; opacity: 1; }
.ct__rail li.is-on b { color: rgb(var(--acc)); }
.ct__rail button:focus-visible { outline: 2px solid rgb(var(--acc)); outline-offset: 4px; border-radius: 4px; }

/* Without scripts, or for people who ask for less motion: a calm, stacked list */
.ct:not(.is-live) { height: auto; }
.ct:not(.is-live) .ct__pin { position: relative; height: auto; overflow: visible; padding: 120px clamp(20px, 6vw, 110px) 80px; }
.ct:not(.is-live) .ct__pin > *:not(.ct__sky):not(.ct__head):not(.ct__cards) { display: none; }
.ct:not(.is-live) .ct__head, .ct:not(.is-live) .ct__cards { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
.ct:not(.is-live) .ct__cards { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ct:not(.is-live) .ct__card { position: relative; opacity: 1; transform: none; }
.ct:not(.is-live) .ct__all { position: static; display: inline-block; margin-top: 8px; }

@media (max-width: 820px) {
	.ct { height: calc(var(--n, 4) * 115svh + 60svh); }
	.ct__p { left: 50%; bottom: 30svh; height: 56svh; }
	.ct__p canvas, .ct__p img { max-width: 86vw; }
	.ct__words span { top: 30%; font-size: clamp(110px, 38vw, 220px); }
	.ct__head { top: 64px; right: 20px; }
	.ct__title { font-size: clamp(34px, 9vw, 48px); }
	.ct__lede { font-size: 15px; }
	.ct__cards { left: 14px; right: 14px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; }
	.ct__card { padding: 18px 20px 20px; border-radius: 18px; }
	.ct__hon { font-size: 19px; }
	.ct__name { font-size: 30px; }
	.ct__role { font-size: 13.5px; margin-top: 8px; }
	.ct__line { font-size: 14.5px; margin-top: 8px; }
	.ct__all { bottom: auto; top: -36px; }
	.ct__rail { right: 14px; top: 18px; transform: none; display: flex; gap: 8px; }
	.ct__rail button { padding: 6px 2px; }
	.ct__rail span { display: none; }
	.ct__head + .ct__cards .ct__all { display: none; }
	.ct__clouds--front { height: 26%; bottom: 14%; }
	.ct__clouds--back { bottom: 8%; }
}
@media (prefers-reduced-motion: reduce) {
	.ct__clouds i, .ct__dust i, .ct__stars { animation: none; }
	.ct__dust { display: none; }
}

/* Leadership page: the board on an engraved plaque (deep green stone, gold lettering, the khatam pattern as a watermark) */
.plaque { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 160px) 0; color: #fff;
	background: radial-gradient(70% 60% at 50% 0%, rgba(255, 208, 40, .12), rgba(255, 208, 40, 0) 70%), radial-gradient(60% 50% at 100% 100%, rgba(120, 209, 198, .14), rgba(120, 209, 198, 0) 70%), linear-gradient(180deg, #072f2b, #0B4A43 55%, #08403a); }
.plaque::before { content: ""; position: absolute; inset: 0; opacity: .06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23FFD028' stroke-width='1'%3E%3Cpath d='M48 20l8.2 8.2H67.8v11.6L76 48l-8.2 8.2v11.6H56.2L48 76l-8.2-8.2H28.2V56.2L20 48l8.2-8.2V28.2h11.6z'/%3E%3Cpath d='M0 0l8 8M96 0l-8 8M0 96l8-8M96 96l-8-8'/%3E%3C/g%3E%3C/svg%3E"); }
.plaque::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.plaque__in { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) clamp(22px, 5vw, 80px); border-radius: 999px 999px 32px 32px / 260px 260px 32px 32px;
	box-shadow: inset 0 0 0 1px rgba(255, 208, 40, .35), inset 0 0 0 9px rgba(255, 208, 40, .0), inset 0 0 0 10px rgba(255, 208, 40, .18), 0 60px 120px -60px rgba(0, 0, 0, .6);
	background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015)); text-align: center; }
.plaque__head { max-width: 640px; margin: clamp(40px, 6vw, 90px) auto 0; }
.plaque__title { margin: 0; font: 800 clamp(38px, 5vw, 76px)/1 Inter, system-ui, sans-serif; letter-spacing: -.045em; color: #fff; }
.plaque__title em { font: italic 400 1.1em/1 "Instrument Serif", Georgia, serif; letter-spacing: 0; color: #FFD028; }
.plaque__lede { margin: 18px auto 0; color: #D3ECE8; font-size: 17px; line-height: 1.6; }
.plaque__group { margin-top: clamp(48px, 6vw, 80px); }
.plaque__label { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; font: italic 400 clamp(24px, 2.4vw, 32px)/1 "Instrument Serif", Georgia, serif; color: #FFD028; }
.plaque__label::before, .plaque__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 208, 40, 0), rgba(255, 208, 40, .5)); }
.plaque__label::after { transform: scaleX(-1); }
.plaque__names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px 32px; }
.plaque__names li { display: flex; flex-direction: column; gap: 6px; }
.plaque__name { font: 700 clamp(18px, 1.6vw, 22px)/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #fff; }
.plaque__name small { display: block; margin-bottom: 4px; font: italic 400 16px/1 "Instrument Serif", Georgia, serif; color: #78D1C6; letter-spacing: 0; }
.plaque__role { font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 208, 40, .85); }
.plaque__foot { margin: clamp(56px, 7vw, 90px) 0 0; font-size: 13px; color: rgba(211, 236, 232, .7); }
@media (max-width: 820px) { .plaque__in { border-radius: 999px 999px 24px 24px / 140px 140px 24px 24px; } .plaque__names { grid-template-columns: 1fr 1fr; gap: 20px 16px; } }
@media (max-width: 480px) { .plaque__names { grid-template-columns: 1fr; } }