@layer source {
/* Melissa styles live in src/facility-premium.css (unlayered, loaded after the shared shell) so the
   premium facility template is not overridden by shared rules. See docs/DESIGN_SYSTEM.md. */

/* UF-PK05 (2026-10-07): on phones the shared framing showed sky and fields (Melissa) or sky and a roof edge
   (Medford) above the headline. As on Anna and Somersworth, the photo is fitted to the band above the copy so the
   park's buildings show; the band stops 20px above the kicker, which starts 256px down the hero. The park
   microsites (body.ufm) keep their own band rule. !important only because build.py puts page CSS in @layer source,
   which loses to the unlayered template. */
@media (max-width:760px){
  body[data-page-family=facility]:not(.ufm) .mxh-media img{top:0!important;height:min(40%,236px)!important;object-position:55% 40%!important}
  /* the hero film (Rick audit 2026-10-08, C03-69) plays in the same band; its clip is framed by the pilot, so centred */
  body[data-page-family=facility]:not(.ufm) .mxh-media video{top:0!important;height:min(40%,236px)!important}
}

/* ---------- 2026-10-19, on main for Saqib's review (Rick has not chosen the placement yet): the park film block and its hero link (Rick, Content Approvals Teams group,
   2:15 PM PT; review/2026-10-19-melissa-film-block). Light paper band between the orange features strip and the navy
   units, so it reads as its own stop. The frame is the film's own 16:9 shape (the film has words at its edges: the
   address, the phone number, the QR code), with Mart's 6px orange rule on top like the park's film bands. The "Watch
   with sound" pill is the homepage's "Watch the park film" pill (src/home.css), so a film opens the same way across the
   site. Square corners: the site-wide policy (site-consistency.css, 2026-09-23 brand reset). Motion: opacity only, ease-out, 200ms; the press confirms at once. ---------- */
body[data-page-family=facility] .mxfilm{background:var(--mx-paper);color:var(--mx-navy);padding:clamp(64px,7vw,104px) 0}
body[data-page-family=facility] .mxfilm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 56px;margin:0 0 clamp(24px,3vw,36px)}
body[data-page-family=facility] .mxfilm-head .mxh2 .o{color:#d96400}
body[data-page-family=facility] .mxfilm-intro{margin:0;max-width:30em;font:400 17px/1.55 var(--mx-body);color:var(--mx-muted)}
body[data-page-family=facility] .mxfilm-frame{position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:var(--mx-deep);border-top:6px solid var(--mx-orange);scroll-margin-top:16px}
body[data-page-family=facility] .mxfilm-frame video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;background:var(--mx-deep)}
/* the whole frame is the button until the film plays with sound; the shade only darkens the lower left, where the pill is */
body[data-page-family=facility] .mxfilm-play{position:absolute;inset:0;z-index:1;display:flex;align-items:flex-end;justify-content:flex-start;margin:0;
  padding:clamp(16px,2.6vw,36px);border:0;background:linear-gradient(20deg,rgba(0,12,19,.72) 0%,rgba(0,12,19,.28) 34%,rgba(0,12,19,0) 58%);
  color:var(--mx-white);text-align:left;opacity:1;transition:opacity .2s var(--mx-ease),visibility 0s}
body[data-page-family=facility] .mxfilm-watch{display:flex;align-items:center;gap:14px;padding:8px 24px 8px 8px;border:1px solid rgba(255,255,255,.44);
  background:rgba(0,21,35,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);white-space:nowrap;font:500 15px/1.3 var(--mx-body);
  transition:background-color .2s ease,border-color .2s ease,transform .16s var(--mx-ease)}
body[data-page-family=facility] .mxfilm-mark{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;background:var(--mx-orange);color:var(--mx-deep);transition:background-color .2s ease}
body[data-page-family=facility] .mxfilm-mark svg{width:22px;height:22px;fill:currentColor}
body[data-page-family=facility] .mxfilm-time{color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  body[data-page-family=facility] .mxfilm-play:hover .mxfilm-watch{background:rgba(0,21,35,.92);border-color:var(--mx-orange)}
  body[data-page-family=facility] .mxfilm-play:hover .mxfilm-mark{background:var(--mx-white)}
}
body[data-page-family=facility] .mxfilm-play:focus-visible .mxfilm-watch{background:rgba(0,21,35,.92);border-color:var(--mx-orange)}
body[data-page-family=facility] .mxfilm-play:focus-visible .mxfilm-mark{background:var(--mx-white)}
body[data-page-family=facility] .mxfilm-play:active .mxfilm-watch{transform:scale(.97)}
/* with sound the pill steps aside for the player's own controls; it comes back as "Watch again" at the end */
body[data-page-family=facility] .mxfilm-frame[data-mode=watching] .mxfilm-play{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--mx-ease),visibility 0s .2s}
/* the hero link: a quiet line under the two buttons (not a third button). It is outside .mxh-btns, which the microsite
   build rebuilds, so it rises on its own, timed to land just after the buttons (facility-premium.js hero timeline). */
body[data-page-family=facility] .mxh-filmlink{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;min-height:44px;
  margin-top:18px;color:var(--mx-white);text-decoration:none;font:400 13px/1.2 var(--mx-display);letter-spacing:.14em;text-transform:uppercase}
html.mx-js body[data-page-family=facility] .mxh-filmlink{animation:mxfilmlink-in .8s var(--mx-ease) 1.15s both}
@keyframes mxfilmlink-in{from{opacity:0;transform:translateY(24px)}}
body[data-page-family=facility] .mxh-filmlink-mark{display:grid;place-items:center;width:40px;height:40px;flex-shrink:0;border:1.5px solid var(--mx-orange);
  color:var(--mx-orange);transition:background-color .2s ease,color .2s ease}
body[data-page-family=facility] .mxh-filmlink-mark svg{width:15px;height:15px;fill:currentColor}
body[data-page-family=facility] .mxh-filmlink-text{white-space:nowrap}
body[data-page-family=facility] .mxh-filmlink-time{color:rgba(255,255,255,.58);letter-spacing:.08em;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  body[data-page-family=facility] .mxh-filmlink:hover .mxh-filmlink-mark{background:var(--mx-orange);color:var(--mx-deep)}
}
body[data-page-family=facility] .mxh-filmlink:focus-visible .mxh-filmlink-mark{background:var(--mx-orange);color:var(--mx-deep)}
@media (max-width:760px){
  body[data-page-family=facility] .mxfilm-head{flex-direction:column;align-items:flex-start;gap:14px}
  body[data-page-family=facility] .mxfilm-intro{font-size:16px}
  /* one line at 360 to 390: the label, then its length */
  body[data-page-family=facility] .mxh-filmlink{gap:10px;letter-spacing:.09em}
  body[data-page-family=facility] .mxh-filmlink-mark{width:36px;height:36px}
  /* edge to edge on a phone, like the park's film bands, so the film is as large as the screen allows */
  body[data-page-family=facility] .mxfilm-frame{margin-inline:calc(var(--uf-gutter,20px) * -1)}
  body[data-page-family=facility] .mxfilm-watch{gap:10px;padding:6px 16px 6px 6px;font-size:13px}
  body[data-page-family=facility] .mxfilm-mark{width:40px;height:40px}
  body[data-page-family=facility] .mxfilm-mark svg{width:17px;height:17px}
}
@media (prefers-reduced-motion:reduce){
  body[data-page-family=facility] :is(.mxfilm-play,.mxfilm-watch,.mxfilm-mark,.mxh-filmlink-mark){transition-duration:.01ms}
  html.mx-js body[data-page-family=facility] .mxh-filmlink{animation:none}
  body[data-page-family=facility] .mxfilm-play:active .mxfilm-watch{transform:none}
}

}