/* Proposed homepage reel module. Uses signal.css tokens (--ink, --cyan, --acid,
   --paper, --muted, --radius, --line) so it can drop into the site unchanged. */
.reel-section{padding:5.5rem 0 4.5rem}
.reel-player{position:relative}
.reel-head{max-width:760px;margin-bottom:2rem}
.reel-head p:last-child{margin:.9rem 0 0;color:var(--muted)}
.reel-frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:var(--radius);overflow:hidden;background:var(--ink);border:1px solid var(--line);box-shadow:0 12px 32px rgba(3,20,22,.08)}
.reel-frame>img,.reel-frame>video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:var(--ink)}
.reel-actions{position:absolute;right:clamp(1rem,4vw,3rem);bottom:clamp(1rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end;max-width:calc(100% - 2rem)}
.reel-play,.reel-sound,.reel-unmute{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.75rem 1.15rem;border-radius:999px;font:700 1rem/1.2 var(--font-body);cursor:pointer;border:1px solid var(--ink)}
.reel-play{background:var(--ink);color:#fff;box-shadow:0 7px 0 rgba(7,20,22,.14)}
.reel-play svg{width:1.1em;height:1.1em;fill:var(--acid)}
.reel-sound{background:var(--white);color:var(--ink)}
.reel-play:hover,.reel-sound:hover{transform:translateY(-1px)}
.reel-unmute{position:absolute;top:1rem;right:1rem;z-index:2;background:var(--acid);color:var(--ink);border-color:var(--acid)}
.reel-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;margin-top:1rem;color:var(--muted);font-size:.92rem}
.reel-meta details{flex:1 1 100%}
.reel-meta summary{cursor:pointer;font-weight:700;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.reel-transcript{margin:.5rem 0 0;padding:1rem 1.25rem;border-left:4px solid var(--cyan);background:#fff;border-radius:0 .8rem .8rem 0;color:var(--ink)}
.reel-transcript p{margin:.35rem 0}
.reel-error{position:absolute;left:1rem;right:1rem;top:1rem;margin:0;padding:.85rem 1rem;border-radius:.8rem;background:#fff;color:var(--ink);font-weight:600;z-index:3}
@media(max-width:850px){
  .reel-section{padding:3.5rem 0 3rem}
  /* On phones the buttons sit under the frame so they never cover the poster copy */
  .reel-frame{border-radius:1rem}
  .reel-actions{position:static;justify-content:flex-start;margin-top:.9rem;max-width:none}
  .reel-actions .reel-play,.reel-actions .reel-sound{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.reel-play:hover,.reel-sound:hover{transform:none}}