/* Only the homepage portrait: retain the original grid, photo and caption. */
.hero-personal .creator-profile--reel { position:relative; }
.hero-personal .creator-profile--reel>picture>img {
 border:2px solid #bfda80;
 box-shadow:0 0 30px #c7e68b20,0 0 65px #c7e68b0a;
}
.creator-reel-trigger {
 position:absolute; top:0; left:0; width:100%; aspect-ratio:1; padding:0;
 display:block; overflow:hidden;
 border:0; border-radius:50%; background:transparent; cursor:pointer;
 color:var(--color-accent); font:inherit; -webkit-tap-highlight-color:transparent;
}
.creator-reel-trigger::before {
 content:""; position:absolute; inset:2px; border-radius:50%; pointer-events:none;
 background:linear-gradient(180deg,transparent 40%,#090e1420 56%,#090e14d9 100%);
}
.creator-reel-controls {
 position:absolute; bottom:18%; left:0; width:100%;
 display:flex; flex-direction:column; align-items:center; gap:11px;
}
.hero-personal .creator-profile .creator-reel-play {
 display:grid; place-items:center; width:62px; height:62px; border-radius:50%;
 color:#0b141a; background:var(--color-accent,#d8f59c);
 box-shadow:0 0 25px #d8f59c50; transition:transform 180ms ease,box-shadow 180ms ease;
}
.creator-reel-play svg { margin-left:3px; }
.hero-personal .creator-reel-cue {
 display:inline-flex; align-items:center; justify-content:center; gap:7px;
 padding:9px 12px; border:1px solid #ffffff0d; border-radius:999px;
 background:#0b141ae8; color:var(--color-text,#f3f6f2); box-shadow:0 3px 14px #0003;
 font-size:13px; font-weight:650; line-height:1.2; white-space:nowrap;
}
.hero-personal .creator-reel-cue span { color:inherit; font:inherit; }
.creator-reel-cue svg { flex:none; }
.hero-personal .creator-reel-cue>svg { color:var(--color-accent); }
.hero-personal .creator-reel-cue .creator-reel-label-short { display:none; }
.creator-reel-trigger:is(:hover,:focus-visible) .creator-reel-play { transform:scale(1.06); box-shadow:0 0 32px #d8f59c70; }
.creator-reel-trigger:focus-visible { outline:3px solid var(--color-accent); outline-offset:5px; }
.creator-reel-dialog:not([open]) { display:none; }
.creator-reel-dialog {
 margin:auto; padding:0; width:min(420px,calc(100vw - 24px),calc((100dvh - 92px)*.5625));
 max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px);
 border:1px solid var(--color-border); border-radius:var(--radius-md,12px);
 background:var(--color-bg,#090e14); color:var(--color-text,#f3f6f2);
 box-shadow:0 24px 80px #0009; overflow:hidden; overscroll-behavior:contain;
}
.creator-reel-dialog::backdrop { background:#03080ed9; }
.creator-reel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 8px 6px 16px; }
.creator-reel-toolbar strong { font-size:14px; font-weight:600; }
.creator-reel-close { display:grid; place-items:center; width:44px; height:44px; padding:0; flex:none; border:0; border-radius:8px; color:inherit; background:transparent; cursor:pointer; }
.creator-reel-close:hover { background:var(--color-surface,#15212a); }
.creator-reel-close:focus-visible { outline:2px solid var(--color-accent); outline-offset:-3px; }
.creator-reel-player { aspect-ratio:9/16; background:#000; }
.creator-reel-player iframe { display:block; width:100%; height:100%; border:0; }
/* The portrait becomes 235px before the mobile layout. Fit both controls inside
   its circular chord instead of letting their fixed height run past the edge. */
@media(min-width:761px) and (max-width:1000px) {
 .creator-reel-controls { bottom:22%; gap:8px; }
 .hero-personal .creator-profile .creator-reel-play { width:44px; height:44px; }
 .creator-reel-play svg { width:22px; height:22px; margin-left:2px; }
 .hero-personal .creator-reel-cue { gap:5px; padding:7px 10px; font-size:11px; }
 .creator-reel-cue>svg { width:13px; height:13px; }
}
@media(max-width:760px) {
 .creator-reel-trigger { width:88px; height:88px; }
 .creator-reel-controls { bottom:10%; gap:4px; }
 .hero-personal .creator-profile .creator-reel-play { width:26px; height:26px; box-shadow:0 0 12px #d8f59c45; }
 .creator-reel-play svg { width:14px; height:14px; margin-left:1px; }
 .hero-personal .creator-reel-cue { gap:0; padding:3px 7px; font-size:9px; line-height:1; }
 .hero-personal .creator-reel-cue>svg,.hero-personal .creator-reel-cue .creator-reel-label { display:none; }
 .hero-personal .creator-reel-cue .creator-reel-label-short { display:inline; }
}
@media(max-width:480px) { .creator-reel-trigger { width:84px; height:84px; } }
@media(prefers-reduced-motion:reduce) { .hero-personal .creator-profile .creator-reel-play { transition:none; } }