/* The main CastMe menu, for pages that only allow files served from castme.ie.
   Measured from the homepage header (9 Oct 2026): 81px tall, #f7f7ef, a soft
   shadow, pinned on scroll; Manrope 30/800 logo with a 28px mark; menu items
   14/600 about 22px apart. The homepage loads Manrope and DM Sans from Google,
   which the films security policy refuses, so Manrope is served from here and
   DM Sans falls back to it. Search is not reproduced: it needs the main site's
   script, which these pages cannot load. */
@font-face { font-family: "Manrope"; src: url("/film-feature-assets/films-hub/manrope-latin.woff2?v=a30ddcd34970") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
.fh-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; min-height: 81px; padding: 12px max(32px, calc((100% - 1360px) / 2 + 32px)); background: #f7f7ef; border-bottom: 1px solid #d7e1d7; box-shadow: 0 8px 24px rgba(23, 63, 53, .06); font-family: "DM Sans", Manrope, system-ui, sans-serif; }
.fh-brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; color: #123c35; font: 800 30px/1 Manrope, system-ui, sans-serif; letter-spacing: -1.3px; text-decoration: none; }
.fh-brand img { width: 28px; height: 28px; margin-right: 8px; object-fit: contain; }
.fh-brand strong { color: #087a50; font-weight: 800; }
.fh-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
.fh-nav > a, .fh-drop > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; color: #23483f; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.fh-nav > a:hover, .fh-drop > summary:hover, .fh-drop[open] > summary { color: #087a50; }
.fh-drop { position: relative; }
.fh-drop > summary { list-style: none; }
.fh-drop > summary::-webkit-details-marker { display: none; }
.fh-drop > summary svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.fh-drop[open] > summary svg { transform: rotate(180deg); }
.fh-drop-more { margin-left: -22px; }
.fh-drop-more > summary { justify-content: center; width: 32px; padding: 0; }
.fh-more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fh-drop ul { position: absolute; top: calc(100% + 10px); right: 0; width: 310px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid #d7e1d7; border-radius: 14px; box-shadow: 0 18px 40px rgba(23, 63, 53, .14); }
.fh-drop-more ul { left: -100px; right: auto; }
.fh-drop li a { display: block; padding: 10px 12px; border-radius: 9px; color: #123c35; text-decoration: none; }
.fh-drop li a:hover { background: #f7f7ef; }
.fh-drop li strong { display: block; font-size: 14px; font-weight: 700; }
.fh-drop li span { display: block; margin-top: 2px; color: #58665f; font-size: 12px; line-height: 1.5; }
.fh-account { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 41px; padding: 11px 18px; border: 1px solid #b7cabc; border-radius: 30px; background: transparent; color: #123c35; font-size: 13px; font-weight: 650; line-height: 1; text-decoration: none; }
.fh-account:hover { border-color: #123c35; }
.fh-menu-toggle { display: none; }
.fh-header :is(a, summary, button):focus-visible { outline: 3px solid #087a50; outline-offset: 2px; }

/* The page itself: JIMMY on its own card, then the Beginnings films as a pair. */
.film-hub-card h3 { margin-bottom: .83em; font-size: 30px; line-height: 1.2; }
.fh-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.fh-feature figure { margin: 0; min-width: 0; }
.film-hub-card.fh-feature img { aspect-ratio: 16 / 9; margin-bottom: 0; }
.fh-feature figcaption { margin-top: 10px; font-size: 11px; }
.fh-feature h2 { font-size: clamp(34px, 4vw, 46px); letter-spacing: .04em; }
.fh-group { margin-top: clamp(44px, 6vw, 72px); }
.fh-group-heading { margin-bottom: 24px; }
.fh-group-heading h2 { margin: 0; font: 550 clamp(1.6rem, 2.6vw, 2.2rem)/1.15 Arial, sans-serif; letter-spacing: -.03em; }

@media (max-width: 900px) {
  .fh-header { flex-wrap: wrap; gap: 8px; min-height: 64px; padding: 10px 16px; }
  .fh-brand { font-size: 24px; letter-spacing: -1px; }
  .fh-brand img { width: 24px; height: 24px; margin-right: 7px; }
  .fh-account { order: 1; margin-left: auto; min-height: 40px; padding: 10px 14px; font-size: 12px; }
  .fh-menu-toggle { order: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px 0 6px; border: 0; background: transparent; color: #123c35; font: 650 14px/1 "DM Sans", Manrope, system-ui, sans-serif; cursor: pointer; }
  .fh-menu-toggle i { position: relative; display: block; width: 16px; height: 11px; border-top: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
  .fh-menu-toggle i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.6px solid currentColor; transform: translateY(-50%); }
  .fh-menu-toggle[aria-expanded="true"] i { border-color: transparent; }
  .fh-menu-toggle[aria-expanded="true"] i::after { transform: translateY(-50%) rotate(45deg); }
  .fh-menu-toggle[aria-expanded="true"] i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.6px solid currentColor; transform: translateY(-50%) rotate(-45deg); }
  .fh-nav { order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 2px 0 0; padding-top: 6px; border-top: 1px solid #d7e1d7; }
  .fh-nav:not(.is-open) { display: none; }
  .fh-nav > a, .fh-drop > summary { display: flex; justify-content: space-between; padding: 0 4px; font-size: 15px; }
  .fh-drop-more { margin-left: 0; }
  .fh-drop-more > summary { width: auto; padding: 0 4px; }
  .fh-more-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin-right: auto; color: #58665f; font-size: 13px; font-weight: 600; }
  .fh-drop ul, .fh-drop-more ul { position: static; width: auto; padding: 0 0 6px 10px; border: 0; background: transparent; box-shadow: none; }
  .fh-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media print { .fh-header { display: none !important; } }