/* Portrait roster (assets/roster.js) and the Ferris wheel (assets/ferris.js). */
.rs-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; height:clamp(380px, 62vh, 620px); overflow:hidden;
           -webkit-mask-image:linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.rs-col { position:relative; overflow:hidden; }
.rs-col:nth-child(3n+2) { margin-top:48px; }
.rs-strip { display:flex; flex-direction:column; animation:rs-up 40s linear infinite; }
.rs-col.is-down .rs-strip { animation-name:rs-down; }
.rs-set { display:flex; flex-direction:column; gap:12px; padding-bottom:12px; }
@keyframes rs-up { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@keyframes rs-down { from { transform:translateY(-50%); } to { transform:translateY(0); } }
.rs.is-paused .rs-strip, .rs.is-holding .rs-strip, .rs-cols:hover .rs-strip { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .rs-strip { animation:none; } .rs-set.is-copy { display:none; } .rs-cols { height:auto; -webkit-mask-image:none; mask-image:none; } }

.rs-tile { display:block; text-align:left; width:100%; border:0; padding:0; margin:0; background:none; color:inherit; cursor:pointer; text-decoration:none; }
.rs-face { position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border-radius:4px; background:#2a201a; }
.rs-face img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:filter .35s ease, transform .35s ease; }
.rs-face::after { content:""; position:absolute; inset:0; mix-blend-mode:multiply; transition:opacity .35s ease; }
.rs-tile.is-copper .rs-face::after { background:#B86D43; }
.rs-tile.is-verd .rs-face::after { background:#3c8f7c; }
.rs-face.is-letters { display:flex; align-items:center; justify-content:center; background:repeating-linear-gradient(135deg, #2b211a 0 8px, #241b15 8px 16px); }
.rs-face.is-letters::after { opacity:.35; }
.rs-init { position:relative; z-index:1; font:400 clamp(34px, 5vw, 56px)/1 'Permanent Marker', var(--display, serif); color:#F3E7D8; }
.rs-tile:hover .rs-face img, .rs-tile:focus-visible .rs-face img { filter:none; transform:scale(1.03); }
.rs-tile:hover .rs-face::after, .rs-tile:focus-visible .rs-face::after { opacity:0; }
.rs-tile:focus-visible { outline:3px solid var(--verdigris, #3FE0B0); outline-offset:3px; border-radius:4px; }
.rs-name { display:block; margin-top:8px; font:700 13px/1.2 var(--display, serif); color:var(--cream, #F3E7D8); }
.rs-role { display:block; margin-top:3px; font:700 9px var(--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--penny, #B86D43); }
.rs-bar { display:flex; gap:14px; align-items:flex-start; margin-top:14px; }
.rs-info { margin:0; font:13px/1.6 var(--body, sans-serif); color:var(--cream-dim, #c8bba8); max-width:70ch; }
.rs-info b { color:var(--cream, #F3E7D8); }
.rs-credit { font:9px var(--mono, monospace); letter-spacing:.06em; color:var(--cream-faint, #9a8e7e); }
/* the archive variant: slower, quieter, room to read */
.rs-archive .rs-cols { height:clamp(360px, 56vh, 560px); }
.rs-archive .rs-face img { filter:grayscale(1) contrast(1.05) brightness(1.05); }

/* ---- the Ferris wheel ---- */
.fw { display:grid; gap:24px; align-items:center; }
@media (min-width:880px) { .fw { grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); } }
.fw-stage { position:relative; aspect-ratio:1/1; width:100%; max-width:560px; margin:0 auto; touch-action:pan-y; user-select:none; outline:none; border-radius:50%; }
.fw-stage:focus-visible { box-shadow:0 0 0 2px var(--verdigris, #3FE0B0); }
.fw-rim { position:absolute; inset:9%; border-radius:50%; border:2px solid rgba(184,109,67,.55); }
.fw-rim::before { content:""; position:absolute; inset:46%; border-radius:50%; background:#B86D43; box-shadow:0 0 0 6px rgba(184,109,67,.25); }
.fw-spoke { position:absolute; left:50%; top:50%; width:41%; height:1px; background:rgba(243,231,216,.18); transform-origin:0 0; }
.fw-car { position:absolute; left:50%; top:50%; width:21%; margin:0; padding:0; border:0; background:none; cursor:pointer; }
.fw-car .fw-photo { display:block; aspect-ratio:1/1; overflow:hidden; border-radius:50%; border:3px solid #F1E9DA; box-shadow:0 8px 20px rgba(0,0,0,.55); background:#2a201a; }
.fw-car img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) sepia(.35) contrast(1.05); transition:filter .3s ease; }
.fw-car.is-top img { filter:none; }
.fw-car.is-top .fw-photo { border-color:#B86D43; }
.fw-car:focus-visible .fw-photo { outline:3px solid var(--verdigris, #3FE0B0); outline-offset:3px; }
.fw-panel { min-height:260px; }
.fw-panel h3 { margin:6px 0 0; font:700 clamp(22px, 3vw, 30px)/1.1 var(--display, serif); color:var(--cream, #F3E7D8); }
.fw-meta { display:block; margin-top:6px; font:700 10px var(--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--penny, #B86D43); }
.fw-panel p { margin:12px 0 0; font:14px/1.65 var(--body, sans-serif); color:var(--cream-dim, #c8bba8); }
.fw-panel .fw-op { font:700 9px var(--mono, monospace); letter-spacing:.14em; text-transform:uppercase; color:var(--cream-faint, #9a8e7e); }
.fw-credit { display:block; margin-top:12px; font:9px/1.5 var(--mono, monospace); color:var(--cream-faint, #9a8e7e); }
.fw-credit a { color:inherit; }
.fw-ctrl { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }