<div class="pc-stage">
<div class="pc-roster">
<div class="pc-head">
<span>Editorial Team · Vol XII</span>
<span>3 active</span>
</div>
<div class="pc-row">
<div class="pc-avatar-trigger">
<svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
<defs><linearGradient id="pc-av1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#c1422c"/><stop offset="1" stop-color="#7a2415"/></linearGradient></defs>
<rect width="100" height="100" fill="url(#pc-av1)"/>
<text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">M</text>
</svg>
</div>
<div class="pc-id">
<div class="pc-name-row">Mira <em>Vance</em></div>
<div class="pc-handle">@miravance</div>
</div>
<div class="pc-role">Editor-in-Chief</div>
<div class="pc-status"></div>
<div class="pc-card">
<div class="pc-stagger">
<div class="pc-hero"></div>
<div class="pc-body">
<div class="pc-photo">
<svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av1)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">M</text></svg>
</div>
<div class="pc-display-name">Mira <em>Vance</em></div>
<div class="pc-tagline">"Words first; everything else negotiated after."</div>
<div class="pc-stats">
<div><div class="pc-stat-num">142</div><div class="pc-stat-label">essays</div></div>
<div><div class="pc-stat-num">8.4k</div><div class="pc-stat-label">readers</div></div>
<div><div class="pc-stat-num">VII</div><div class="pc-stat-label">volumes</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="pc-row">
<div class="pc-avatar-trigger">
<svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
<defs><linearGradient id="pc-av2" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2d4a3e"/><stop offset="1" stop-color="#0d1f17"/></linearGradient></defs>
<rect width="100" height="100" fill="url(#pc-av2)"/>
<text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">A</text>
</svg>
</div>
<div class="pc-id">
<div class="pc-name-row">Adesh <em>Kothari</em></div>
<div class="pc-handle">@adesh.k</div>
</div>
<div class="pc-role">Design Director</div>
<div class="pc-status pc-status-away"></div>
<div class="pc-card">
<div class="pc-stagger">
<div class="pc-hero pc-hero-green"></div>
<div class="pc-body">
<div class="pc-photo">
<svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av2)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">A</text></svg>
</div>
<div class="pc-display-name">Adesh <em>Kothari</em></div>
<div class="pc-tagline">"Restraint is also a flourish, if you commit to it."</div>
<div class="pc-stats">
<div><div class="pc-stat-num">96</div><div class="pc-stat-label">covers</div></div>
<div><div class="pc-stat-num">12</div><div class="pc-stat-label">awards</div></div>
<div><div class="pc-stat-num">04</div><div class="pc-stat-label">books</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="pc-row">
<div class="pc-avatar-trigger">
<svg class="pc-avatar-svg" viewBox="0 0 100 100" aria-hidden="true">
<defs><linearGradient id="pc-av3" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6b4226"/><stop offset="1" stop-color="#2a1810"/></linearGradient></defs>
<rect width="100" height="100" fill="url(#pc-av3)"/>
<text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="38" font-style="italic" fill="#f7d18e">J</text>
</svg>
</div>
<div class="pc-id">
<div class="pc-name-row">June <em>Lacroix</em></div>
<div class="pc-handle">@junelacroix</div>
</div>
<div class="pc-role">Photo Editor</div>
<div class="pc-status"></div>
<div class="pc-card">
<div class="pc-stagger">
<div class="pc-hero pc-hero-amber"></div>
<div class="pc-body">
<div class="pc-photo">
<svg viewBox="0 0 100 100" width="100%" height="100%"><rect width="100" height="100" fill="url(#pc-av3)"/><text x="50" y="62" text-anchor="middle" font-family="Fraunces" font-size="40" font-style="italic" fill="#f7d18e">J</text></svg>
</div>
<div class="pc-display-name">June <em>Lacroix</em></div>
<div class="pc-tagline">"A photograph is the slowest sentence a magazine can run."</div>
<div class="pc-stats">
<div><div class="pc-stat-num">311</div><div class="pc-stat-label">shoots</div></div>
<div><div class="pc-stat-num">28</div><div class="pc-stat-label">cities</div></div>
<div><div class="pc-stat-num">VI</div><div class="pc-stat-label">years</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> .pc-stage {
background: #14110d;
/* Generous bottom room — profile cards drop down from roster rows
and are ~360px tall, so the gallery card needs room below the
visible roster for them to render in full. */
padding: 36px 28px 400px;
display: flex;
align-items: flex-start;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
}
.pc-roster {
width: 100%;
max-width: 560px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 2px;
}
.pc-head {
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.5);
}
.pc-row {
padding: 14px 20px;
display: grid;
grid-template-columns: 40px 1fr auto auto;
align-items: center;
gap: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
position: relative;
color: #efece6;
}
.pc-row:last-child { border-bottom: none; }
.pc-row:hover { background: rgba(255, 255, 255, 0.025); }
.pc-avatar-trigger {
width: 36px; height: 36px;
border-radius: 50%;
position: relative;
cursor: pointer;
flex-shrink: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-avatar-trigger:hover { transform: scale(1.08); }
.pc-avatar-svg {
width: 100%; height: 100%;
border-radius: 50%;
display: block;
}
.pc-name-row {
font-family: Georgia, serif;
font-size: 17px;
font-weight: 400;
}
.pc-name-row em { font-style: italic; color: #f7d18e; font-weight: 300; }
.pc-handle {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10.5px;
color: rgba(239, 236, 230, 0.4);
margin-top: 2px;
}
.pc-role {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.5);
}
.pc-status {
width: 6px; height: 6px;
border-radius: 50%;
background: #6fcf97;
box-shadow: 0 0 8px rgba(111, 207, 151, 0.6);
}
.pc-status-away { background: #f7d18e; box-shadow: 0 0 8px rgba(247, 209, 142, 0.6); }
.pc-card {
position: absolute;
top: calc(100% + 12px);
left: 20px;
width: 320px;
background: linear-gradient(180deg, #1f1a14 0%, #14110d 100%);
border: 1px solid rgba(247, 209, 142, 0.15);
border-radius: 2px;
box-shadow:
0 25px 60px -16px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(247, 209, 142, 0.05),
inset 0 1px 0 rgba(247, 209, 142, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.3s,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.3s;
z-index: 30;
pointer-events: none;
overflow: hidden;
}
.pc-row:hover .pc-card,
.pc-avatar-trigger:hover .pc-card {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.pc-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, #f7d18e, transparent);
opacity: 0.5;
}
.pc-hero {
height: 76px;
background:
radial-gradient(circle at 30% 60%, rgba(193, 66, 44, 0.4), transparent 50%),
radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.3), transparent 50%),
linear-gradient(135deg, #2a201a 0%, #14110d 100%);
position: relative;
overflow: hidden;
}
.pc-hero-green {
background:
radial-gradient(circle at 30% 60%, rgba(45, 74, 62, 0.5), transparent 50%),
radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.3), transparent 50%),
linear-gradient(135deg, #1a2a23 0%, #14110d 100%);
}
.pc-hero-amber {
background:
radial-gradient(circle at 30% 60%, rgba(107, 66, 38, 0.5), transparent 50%),
radial-gradient(circle at 80% 40%, rgba(247, 209, 142, 0.25), transparent 50%),
linear-gradient(135deg, #2a201a 0%, #14110d 100%);
}
.pc-hero::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(45deg, transparent 0, transparent 6px, rgba(247, 209, 142, 0.04) 6px, rgba(247, 209, 142, 0.04) 7px);
}
.pc-body { padding: 0 18px 16px; position: relative; }
.pc-photo {
width: 56px; height: 56px;
border-radius: 50%;
margin-top: -28px;
border: 2px solid #14110d;
box-shadow: 0 0 0 1px rgba(247, 209, 142, 0.3);
position: relative;
overflow: hidden;
background: #2a201a;
}
.pc-display-name {
margin-top: 12px;
font-family: Georgia, serif;
font-size: 22px;
font-weight: 400;
line-height: 1.15;
color: #efece6;
}
.pc-display-name em { font-style: italic; color: #f7d18e; font-weight: 300; }
.pc-tagline {
margin-top: 6px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color: rgba(239, 236, 230, 0.65);
line-height: 1.4;
}
.pc-stats {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.pc-stat-num {
font-family: Georgia, serif;
font-size: 18px;
font-weight: 500;
color: #f7d18e;
}
.pc-stat-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 8.5px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(239, 236, 230, 0.4);
margin-top: 2px;
}
.pc-stagger > * {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-row:hover .pc-stagger > *,
.pc-avatar-trigger:hover .pc-stagger > * {
opacity: 1;
transform: translateY(0);
}
.pc-row:hover .pc-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.pc-row:hover .pc-stagger > *:nth-child(2) { transition-delay: 0.18s; }