:root{--paper:#F4F0E8;--paper2:#FBF8F2;--sand:#E3DBCC;--ink:#131110;--cocoa:#6B4630;
      --rule:rgba(19,17,16,.14);--muted:#6B655C;--font:'Outfit'}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font),system-ui,sans-serif;
     font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.cap{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}
.dim{opacity:.45}
/* .wrap sets horizontal gutters only. Use padding-inline so it can never
   override vertical padding on a section/main that also carries the class. */
.wrap{max-width:1360px;margin:0 auto;padding-inline:40px}
.fade{-webkit-mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,.15) 88%,transparent 100%);
      mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,.15) 88%,transparent 100%)}

nav{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:34px;
  padding:9px 9px 9px 24px;background:rgba(251,248,242,.72);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(19,17,16,.10);border-radius:999px;box-shadow:0 1px 24px rgba(19,17,16,.07);transition:background .4s}
nav.onvid{background:rgba(251,248,242,.5)}
nav .mark{font-size:13px;font-weight:600;letter-spacing:.2em;white-space:nowrap}
nav .mark:hover{color:var(--cocoa)}
nav .links{display:flex;gap:26px}
nav .links a{position:relative;padding:4px 0;font-size:12.5px;opacity:.62;transition:opacity .3s}
nav .links a:hover{opacity:1}
nav .links a.on{opacity:1;color:var(--cocoa)}
nav .links a.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--cocoa)}
nav .cta{background:var(--ink);color:var(--paper2);border-radius:999px;padding:10px 21px;font-size:12.5px}
nav .cta:hover{background:var(--cocoa)}
nav a:focus-visible{outline:2px solid var(--cocoa);outline-offset:3px;border-radius:4px}
.burger{display:none}

footer{padding:32px 40px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}


[data-r]{opacity:0;transform:translateY(16px);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
[data-r].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-r]{opacity:1;transform:none;transition:none}}

@media(max-width:900px){
  .wrap{padding-inline:18px}
  nav{left:14px;right:14px;transform:none;gap:0;justify-content:space-between;padding:9px 9px 9px 18px}
  nav .links,nav .cta{display:none}
  .burger{display:block;background:var(--ink);color:var(--paper2);border:none;border-radius:999px;
    padding:10px 18px;font:inherit;font-size:12px;cursor:pointer}
  footer{padding:24px 18px}
  }

/* ── contrast fix ────────────────────────────────────────────
   Opacity-based dimming fails WCAG on cream: ink needs >=0.83
   opacity to clear 4.5:1. Muted colours carry the same visual
   hierarchy at full strength. --muted = #6B655C = 5.05:1.     */
.dim,.cap.dim{color:var(--muted);opacity:1}
nav .links a{color:var(--muted);opacity:1}
nav .links a:hover{color:var(--ink)}
nav .links a.on{color:var(--cocoa)}
.hint,.capnote,.nowatch,.cutline{color:var(--muted);opacity:1}
.lead,.body,.bodytxt{color:var(--muted);opacity:1}
.lead b,.body b,.bodytxt b{color:var(--ink)}
.railrow .n,.irow .n,.irow .m,.irow .go,.awrow .y,.awrow .w,
.crow dt,.erow .y,.facts span,.stats span,.side .lbl,.tally span,
.film .credits,.awfilm .y,.hero .roles{color:var(--muted);opacity:1}
.awrow .w.win{color:var(--cocoa);opacity:1}
.railrow .t{-webkit-text-stroke-color:rgba(19,17,16,.78)}

/* ── mobile menu ─────────────────────────────────────────────
   Below 900px the links and CTA are hidden behind a Menu
   button that previously had no handler, leaving the nav
   unreachable on phones. Opening stacks the links into the
   pill. Colours inherit so the dark acting nav keeps its own
   palette. Tap targets held at 44px.                          */
@media(max-width:900px){
  nav{flex-wrap:wrap}
  nav .mark{order:1}
  .burger{order:2;min-height:44px;padding:12px 20px}
  nav.open{border-radius:22px;padding-bottom:12px}
  nav.open .links{order:3;display:flex;flex-direction:column;width:100%;gap:0;
    margin-top:10px;padding-top:4px;border-top:1px solid rgba(128,120,110,.28)}
  nav.open .links a{display:flex;align-items:center;min-height:44px;padding:4px 2px;
    font-size:15px;opacity:1;color:inherit}
  nav.open .cta{order:4;display:flex;align-items:center;justify-content:center;
    width:100%;min-height:44px;margin-top:8px;padding:12px;font-size:14px}
  }

/* ── touch affordances ───────────────────────────────────────
   The site had 38 :hover rules and no :active rules, so taps
   produced no feedback at all. Hover effects are also guarded
   so touch users are not left looking at an inactive control. */
.irow:active{background:rgba(107,70,48,.08)}
.railrow:active,.card:active{opacity:.9}
nav .links a:active,nav .cta:active,nav .mark:active{opacity:.7}
.burger:active{opacity:.8}
.btn:active,.watch:active,.trailer:active,.explore:active,
.f button:active,.capture button:active,.more:active,.railtrailer:active{transform:translateY(1px)}
.f button:disabled{opacity:.55;cursor:default}

/* The fade mask's stops are percentages of the element box. On desktop the
   word is small inside a wide wrap so the ramp lands past the text; on a phone
   the word fills the box and the ramp lands on the letters, taking out half of
   "Contact" and everything after "MERIV". Push it to the tail and never reach
   full transparency, so the gesture survives and the last glyph stays legible. */
@media(max-width:900px){
  .fade{-webkit-mask-image:linear-gradient(90deg,#000 86%,rgba(0,0,0,.6) 95%,rgba(0,0,0,.35) 100%);
        mask-image:linear-gradient(90deg,#000 86%,rgba(0,0,0,.6) 95%,rgba(0,0,0,.35) 100%)}
  }