.sitenav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--brand-ink) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--brand-ink3);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
@supports not (background:color-mix(in srgb,red 50%,transparent)){.sitenav{background:var(--brand-ink)}}
/* The drawer is absolutely positioned against whichever header hosts it. A host that is
   already fixed/sticky/relative is left alone — nav.js only promotes a static one, because
   a CSS rule here would out-specify the homepages' own header{position:fixed}. */
.sitenav-in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:20px;
  /* No flex-wrap. The bar must never become two rows — that is what the drawer is for. */
  flex-wrap:nowrap}
.sitenav-home{display:flex;align-items:center;gap:9px;margin-right:auto;text-decoration:none;
  color:var(--brand-cream);font-family:var(--brand-display-font);font-size:17px;
  line-height:1;white-space:nowrap;min-width:0}
.sitenav-home span{overflow:hidden;text-overflow:ellipsis}
.sitenav-mark{height:22px;width:auto;display:block;flex:none}
.sitenav-slot{display:inline-flex;align-items:center;gap:8px}
.sitenav-links{display:flex;gap:22px}
.sitenav-links a{text-decoration:none;color:var(--brand-muted);white-space:nowrap;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;padding:12px 0;transition:color .15s}
.sitenav-links a:hover,.sitenav-links a[aria-current]{color:var(--brand-cream)}
.sitenav-account{text-decoration:none;color:var(--brand-muted);white-space:nowrap;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;padding:12px 0;transition:color .15s}
.sitenav-account:hover,.sitenav-account[aria-current]{color:var(--brand-cream)}
.sitenav-cta{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:5px;
  background:var(--brand-pink);color:var(--brand-ink);text-decoration:none;white-space:nowrap;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;transition:filter .15s}
.sitenav-cta:hover{filter:brightness(1.08)}
.sitenav-cta-short{display:none}
.sitenav :focus-visible{outline:2px solid var(--brand-pink);outline-offset:3px;border-radius:3px}

/* The menu button. 44x44 is the touch target, the bars inside are 17px. */
.sitenav-burger{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  background:none;border:1px solid var(--brand-ink3);border-radius:7px;cursor:pointer;
  color:var(--brand-cream);padding:0}
.sitenav-burger span{display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.sitenav-burger span::before,.sitenav-burger span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;background:currentColor;transition:transform .18s ease,opacity .15s}
.sitenav-burger span::before{top:-5.5px}
.sitenav-burger span::after{top:5.5px}
.sitenav-burger[aria-expanded="true"] span{background:transparent}
.sitenav-burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.sitenav-burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

.sitenav-drawer{display:none;position:absolute;top:100%;left:0;right:0;
  border-top:1px solid var(--brand-ink3);border-bottom:1px solid var(--brand-ink3);
  background:var(--brand-ink2);max-height:calc(100vh - 60px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;text-align:left}
.sitenav-drawer[hidden]{display:none}
.sitenav-drawer.is-open{display:block}
.sitenav-drawer a{display:flex;align-items:center;min-height:44px;padding:0 20px;
  text-decoration:none;color:var(--brand-cream);border-bottom:1px solid var(--brand-ink3);
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  text-transform:uppercase}
.sitenav-drawer a[aria-current]{color:var(--brand-pink)}
.sitenav-drawer-foot{display:flex;gap:18px;padding:14px 20px}
.sitenav-drawer-foot a{display:inline-block;min-height:0;padding:10px 0;border:0;text-transform:none;
  letter-spacing:.04em;font-weight:500;color:var(--brand-muted)}

@media (max-width:880px){
  .sitenav-links,.sitenav-account{display:none}
  .sitenav-burger{display:flex}
  .sitenav-in{gap:12px}
  .sitenav-home{font-size:15px}
}
@media (max-width:1000px){
  .sitenav-cta-long{display:none}
  .sitenav-cta-short{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .sitenav *,.sitenav *::before,.sitenav *::after{transition:none!important;animation:none!important}
}

/* ---- the nav trigger ------------------------------------------------------------------ */
.sitenav-watch{display:inline-flex;align-items:center;gap:8px;appearance:none;background:none;
  border:0;cursor:pointer;color:var(--brand-muted);white-space:nowrap;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;
  text-transform:uppercase;padding:12px 0;transition:color .15s}
.sitenav-watch:hover{color:var(--brand-cream)}
/* A play triangle drawn from borders — one more glyph would be one more request. */
.sitenav-watch-dot{width:0;height:0;flex:none;border-left:6px solid var(--brand-pink);
  border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.sitenav-watch:hover .sitenav-watch-dot{transform:translateX(1px) scale(1.12)}
/* In the drawer it is a row like every other row, not a nav link. */
.sitenav-drawer .sitenav-watch{display:flex;width:100%;min-height:44px;padding:0 20px;
  border-bottom:1px solid var(--brand-ink3);color:var(--brand-cream);
  font-size:12px;letter-spacing:.12em;text-align:left}

/* ---- the modal ------------------------------------------------------------------------ */
/* z-index sits above everything the homepages draw: their headers are 50, the Front Bar
   loader is 100 and the skip-link is 200. The scrim is appended to <body>, so it is never
   inside another stacking context and 1000 is enough. */
.promo-scrim{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--brand-outline) 76%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(115%);backdrop-filter:blur(14px) saturate(115%);
  /* Closed is hidden, not merely transparent. An opacity-0 layer at inset:0 still swallows
     every click on the page underneath and still hands its buttons to the tab order, so the
     closed state has to be inert as well as invisible. visibility carries no transition of its
     own — it is delayed by exactly the fade so the exit animation is still seen, then flips. */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility 0s linear .22s}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .promo-scrim{background:rgba(0,0,0,.86)}}
.promo-scrim[data-state="open"]{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .22s ease,visibility 0s}

/* Width is driven by HEIGHT as well as width, because the card is mostly a 16:9 box: on a
   1280x800 laptop a flat 1120px card is 750px tall and all but touches both edges. The third
   term is "how wide can the video be and still leave room for the title block", so a short
   screen gets a smaller film rather than a scrollbar. The 320px floor stops a landscape phone
   shrinking it to a postage stamp — past that the scrim scrolls, which is the honest fallback.
   dvh repeats the same value for browsers that have it, so a mobile URL bar doesn't count. */
.promo-dialog{--promo-chrome:210px;
  width:min(1120px,100%,max(320px,calc((100vh - var(--promo-chrome)) * 16 / 9)));
  width:min(1120px,100%,max(320px,calc((100dvh - var(--promo-chrome)) * 16 / 9)));
  position:relative;margin:auto;
  background:var(--brand-ink);border:1px solid var(--brand-ink3);border-radius:18px;
  /* The brand glow. Two shadows: a tight brand-coloured edge, then a wide soft bloom, over a
     plain dark drop so the card still reads on a light hero. */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-pink) 26%,transparent),
             0 40px 130px -34px color-mix(in srgb,var(--brand-pink) 58%,transparent),
             0 26px 70px -22px rgba(0,0,0,.72);
  transform:translateY(16px) scale(.972);opacity:0;
  transition:transform .26s cubic-bezier(.2,.85,.25,1),opacity .2s ease}
.promo-scrim[data-state="open"] .promo-dialog{transform:none;opacity:1}
/* The gradient hairline along the top edge — the same --brand-grad the games wear. */
.promo-dialog::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  border-radius:18px 18px 0 0;background:var(--brand-grad);opacity:.9;pointer-events:none;z-index:4}

/* 16:9, reserved BEFORE the video has any metadata, so nothing below it moves when the file
   starts loading. The poster and the <video> both fill this box absolutely. */
.promo-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:17px 17px 0 0;overflow:hidden}
@supports not (aspect-ratio:16/9){.promo-frame{height:0;padding-top:56.25%}}
.promo-vid{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}

.promo-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:88px;height:88px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  color:var(--brand-cream);border:1px solid color-mix(in srgb,var(--brand-cream) 42%,transparent);
  background:color-mix(in srgb,var(--brand-ink) 52%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .18s ease,box-shadow .28s ease,background .18s ease}
.promo-play:hover{background:color-mix(in srgb,var(--brand-ink) 34%,transparent);
  transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 0 46px 8px color-mix(in srgb,var(--brand-pink) 42%,transparent)}
.promo-play svg{width:30px;height:30px;margin-left:5px;fill:currentColor}
.promo-play[hidden]{display:none}

.promo-close{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;
  color:var(--brand-cream);border:1px solid color-mix(in srgb,var(--brand-cream) 30%,transparent);
  background:color-mix(in srgb,var(--brand-outline) 62%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .15s,transform .15s}
.promo-close:hover{background:var(--brand-outline);transform:scale(1.06)}
.promo-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

.promo-meta{padding:18px 24px 22px;display:flex;flex-direction:column;gap:10px}
.promo-eyebrow{display:flex;align-items:center;gap:10px;color:var(--brand-pink);
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;
  text-transform:uppercase}
.promo-dur{color:var(--brand-muted);letter-spacing:.14em}
.promo-title{margin:0;color:var(--brand-cream);font-family:var(--brand-display-font);
  font-size:25px;line-height:1.16;font-weight:400}
.promo-blurb{margin:0;color:var(--brand-muted);font-size:15px;line-height:1.5;max-width:64ch}

/* The selector. Present only when this brand has more than one film — see films(). */
.promo-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.promo-pick button{appearance:none;cursor:pointer;display:inline-flex;align-items:center;
  min-height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--brand-ink3);
  background:var(--brand-ink2);color:var(--brand-muted);
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;
  text-transform:uppercase;transition:color .15s,background .15s,border-color .15s}
.promo-pick button:hover{color:var(--brand-cream);border-color:var(--brand-muted)}
.promo-pick button[aria-pressed="true"]{background:var(--brand-pink);border-color:var(--brand-pink);
  color:var(--brand-ink)}

/* Outline only — NO border-radius here. The bar's own focus rule sets one, and copying it
   here re-cornered the round play button into a square the moment it took focus, which is
   exactly the state a keyboard user sees it in. Outlines already follow each element's own
   radius, so there is nothing to restate. */
.promo-scrim :focus-visible{outline:2px solid var(--brand-pink);outline-offset:3px}

@media (max-width:560px){
  .promo-scrim{padding:12px 12px max(12px,env(safe-area-inset-bottom))}
  .promo-dialog{border-radius:14px}
  .promo-frame{border-radius:13px 13px 0 0}
  .promo-dialog::before{border-radius:14px 14px 0 0}
  .promo-meta{padding:15px 17px 19px}
  .promo-title{font-size:20px}
  .promo-blurb{font-size:14px}
  .promo-play{width:64px;height:64px}
  .promo-play svg{width:23px;height:23px}
  .promo-close{width:36px;height:36px;top:9px;right:9px}
}

/* Someone who asked for less motion gets the modal, not the flourish: it is simply there. */
@media (prefers-reduced-motion:reduce){
  .promo-scrim,.promo-scrim *,.promo-scrim *::before,.promo-scrim *::after{
    transition:none!important;animation:none!important}
  .promo-dialog{transform:none;opacity:1}
  .promo-play:hover{transform:translate(-50%,-50%)}
}