/* The reel is the focal point; branding sets the scale above it. */
.signal-hero { padding:84px 4vw 18px; min-height:100svh; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; isolation:isolate; overflow:hidden; }
.reel-eyebrow,.reel-caption,.reel-controls,.hero-enter,.reel-drag-hint { font:12px/1.5 Arial,sans-serif; letter-spacing:.025em; text-transform:uppercase; }
.reel-eyebrow { display:flex; justify-content:space-between; gap:20px; }
.reel-eyebrow i { display:inline-block; width:7px; height:7px; background:var(--signal); border-radius:50%; margin-right:8px; }
.reel-wordmark { position:relative; align-self:center; font:400 16.5vw/.9 Anton,Impact,sans-serif; letter-spacing:-.04em; margin:12px 0 0; white-space:nowrap; }
.reel-wordmark>span:first-child { color:var(--signal); }
.reel-asterisk { color:var(--signal); font:300 .16em/1 Georgia,serif; position:absolute; top:0; right:-.8em; }
.reel-stage { position:relative; z-index:2; height:clamp(300px,44vh,460px); margin:0 -4vw; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; outline-offset:-6px; }
.reel-stage.is-dragging { cursor:grabbing; }
.reel-track { position:absolute; inset:0; list-style:none; }
.reel-card { position:absolute; left:50%; top:50%; width:var(--card-w); z-index:var(--layer); transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--angle)); transition:transform .55s var(--ease); }
.reel-card a { position:relative; display:block; background:#fffdf7; border:6px solid #fffdf7; color:var(--ink); text-decoration:none; box-shadow:0 10px 22px #37271824; }
.reel-card img { display:block; width:100%; height:var(--card-h); object-fit:contain; background:#141414; }
.reel-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:2px 12px; padding:12px 4px 5px; font-size:11px; }
.reel-caption span:last-child { white-space:nowrap; }
.reel-open { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#fffdf7; opacity:0; font:16px Arial,sans-serif; transition:opacity .2s; }
.reel-card a:hover .reel-open,.reel-card a:focus-visible .reel-open { opacity:1; }
.reel-drag-hint { position:absolute; bottom:0; width:100%; text-align:center; font-size:11px; color:#655e51; pointer-events:none; }
.reel-controls { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 0; border-bottom:1px solid #14141440; }
.reel-collections,.reel-navigation { display:flex; align-items:center; gap:6px; }
.reel-controls button { min-height:44px; padding:10px 14px; border:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.reel-controls button:hover { background:#1414140d; }
.reel-collections button[aria-pressed='true'] { color:var(--paper); background:var(--ink); }
.reel-navigation>span { margin-right:16px; min-width:64px; font-variant-numeric:tabular-nums; }
.reel-navigation button { width:44px; padding:0; border:1px solid #14141466; border-radius:50%; font-size:20px; }
.reel-navigation button:last-child { font-size:14px; }
.reel-footer { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:24px; padding-top:20px; margin-top:auto; }
.reel-footer>p:first-child { font-size:clamp(20px,1.8vw,28px); line-height:1.2; }
.reel-footer em { color:#a5231a; font-weight:500; }
.reel-descriptor { font-size:20px; line-height:1.3; max-width:28ch; }
.hero-enter { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:52px; padding:16px 20px; text-decoration:none; background:var(--ink); color:var(--paper); }
.hero-enter span { font:24px Arial,sans-serif; }
.hero-enter:hover { background:#a5231a; }
@media(max-width:900px) {
 .signal-hero { padding:94px 24px 24px; }
 .reel-wordmark { font-size:16.5vw; margin-top:30px; }
 .reel-stage { margin:8px -24px 0; height:clamp(300px,42vh,460px); }
 .reel-footer { grid-template-columns:1fr auto; }
 .reel-descriptor { display:none; }
 .reel-controls { justify-content:center; }
}
@media(max-width:600px) {
 .signal-hero { padding:88px 20px 18px; }
 .reel-eyebrow { font-size:11px; gap:12px; align-items:start; }
 .reel-eyebrow>span:first-child { max-width:18ch; }
 .reel-eyebrow>span:last-child { max-width:13ch; text-align:right; }
 .reel-wordmark { font-size:16.5vw; margin-top:22px; }
 .reel-stage { height:clamp(250px,35svh,340px); margin:10px -20px 0; }
 .reel-card a { border-width:5px; }
 .reel-caption { font-size:11px; padding:9px 2px 3px; gap:6px; }
 .reel-card:not(.is-front) .reel-caption span:last-child { display:none; }
 .reel-drag-hint { font-size:11px; bottom:-4px; }
 .reel-controls { padding:12px 0; gap:10px; }
 .reel-collections { width:100%; justify-content:space-between; gap:0; }
 .reel-controls button { font-size:11px; padding:10px 8px; }
 .reel-navigation { width:100%; gap:8px; }
 .reel-navigation>span { margin-right:auto; }
 .reel-navigation button { font-size:20px; }
 .reel-navigation button:last-child { font-size:14px; }
 .reel-footer { gap:16px; padding-top:16px; }
 .reel-footer>p:first-child { font-size:19px; }
 .hero-enter { font-size:11px; padding:12px; gap:12px; max-width:170px; }
}
@media(min-width:901px) and (max-height:820px) {
 .signal-hero { padding-top:88px; }
 .reel-wordmark { font-size:14vw; margin-top:16px; }
 .reel-stage { height:300px; }
 .reel-footer { padding-top:16px; }
}
@media(prefers-reduced-motion:reduce) { .signal-hero * { transition:none!important; animation:none!important; } }