/* THE FILM RING — the site's styles around MWG 061 (/life/mwg-061.css stays the
   template): the ring runs the full width of the screen, as the template does,
   and the poster card wears the old "Now showing" screen's look. */

.reading-room{ overflow-x:clip; }                 /* the ring is wider than the column */
.fr-bleed{ position:relative; width:100vw; margin-left:calc(50% - 50vw); }
/* the site's own '.container' rule (max-width 1280px, styles.css) also matches the
   template's container; it shifted the ring's axis off centre on wide screens and
   swung posters across the camera. Back to the template's full width. */
.mwg_effect061 .container{ max-width:none; }
/* the ring's container is a flat plane through its middle; left alone it sits in
   front of the far half of the ring and takes the clicks meant for those posters */
.mwg_effect061 .container{ pointer-events:none; }
.mwg_effect061 img{ pointer-events:auto; cursor:pointer; }
/* focus: the site's own ring — .fr-bleed carries data-dark, so it is the poster yellow */

.frc-card{
  position:absolute; z-index:5; left:50%; top:50%;
  width:min(520px, calc(100vw - 32px));
  transform:translate(-50%, calc(-50% + 14px)); opacity:0;
  transition:opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1);
  background:var(--stk-screen,#0f0d0a); color:#f4eedb;
  border:1px solid rgba(244,238,219,.16);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  padding:clamp(24px,4vw,36px);
}
.frc-card.is-in{ opacity:1; transform:translate(-50%, -50%); }
.frc-card[hidden]{ display:none; }
.frc-now{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--stk-orange,#ff5a00); display:flex; align-items:center; gap:9px; }
.frc-now::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--stk-orange,#ff5a00); animation:blink 1.6s ease-in-out infinite; }
.frc-title{ font-family:var(--font-display); font-size:clamp(28px,4.2vw,46px); line-height:.95; text-transform:uppercase; margin:16px 0 0; overflow-wrap:break-word; }
.frc-meta{ font-family:var(--font-serif); font-style:italic; font-size:16px; color:#c8b58c; margin:10px 0 0; }
.frc-rate{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--stk-orange,#ff5a00); margin:12px 0 0; }
.frc-q{ font-family:var(--font-serif); font-style:italic; font-size:15.5px; line-height:1.55; color:#e3d8bf; margin:16px 0 0; }
.frc-q.is-date{ font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#a99b82; }
.frc-imdb{ display:inline-block; margin-top:22px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#f4eedb; text-decoration:none; border:1px solid rgba(244,238,219,.25); padding:7px 11px; }
.frc-imdb:hover, .frc-imdb:focus-visible{ border-color:#f4eedb; }
.frc-x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:0; background:none; color:#f4eedb; font-size:24px; line-height:1; cursor:pointer; opacity:.7; }
.frc-x:hover, .frc-x:focus-visible{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .frc-card{ transition:none; } .frc-now::before{ animation:none; } }