/* WYRD cream suede palette. Brand pigments stay literal; surfaces and ink
   use semantic tokens so artwork, film and 3D materials keep their colours. */
:root {
  --blue:#002fa7;
  --cream:#f2f0e7;
  --surface:var(--cream);
  --text:#292f3c;
  --text-muted:#51596a;
  --heading:var(--blue);
  --ground:var(--surface);
  --bg:var(--surface);
  --fg:var(--text);
  --hero-ground:var(--surface);
  --hair:rgba(0,47,167,.22);
  --suede:640px;
  --blue-suede:url('/assets/suede/suede-tile-860.webp');
  color-scheme:light;
}
html { background:var(--surface) }
body { background:none; color:var(--text) }
::selection { background:var(--blue); color:var(--cream) }
:focus-visible { outline-color:var(--blue) }

/* Reuse the same suede grain as a neutral material. Only this fixed texture
   layer is filtered, never the content or the blue sculptures above it. */
.suede,.pg-case::before,.wg-atmosphere,.cinema-bg {
  background:var(--surface);
  isolation:isolate;
}
.pg-case::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
}
.suede::before,.pg-case::before,.wg-atmosphere::before,.cinema-bg::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--blue-suede) 0 0/var(--suede) var(--suede) repeat;
  filter:grayscale(1) contrast(.65) brightness(2.4);
  mix-blend-mode:multiply; opacity:.24;
}
.pg-case::before { position:fixed }
.suede__light {
  background:radial-gradient(42% 22% at 28% 14%,#fffaf04d,transparent),
    radial-gradient(46% 24% at 76% 46%,#fffaf033,transparent),
    radial-gradient(40% 20% at 34% 80%,#fffaf03d,transparent);
}

/* Blue display type, softer dark ink for reading. */
.hero,.brk,.svc,.work,.say,.services,.foot { color:var(--heading) }
.hero__logo { color:var(--blue); filter:drop-shadow(0 0 2px var(--cream)) drop-shadow(0 3px 10px #f2f0e7b3) }
.say__sub,.services__description,.foot__loc,.foot__thanks,
.cs__txt,.cs__meta,.cs__list,.cs__fig figcaption,.cs__cover figcaption {
  color:var(--text);
}
.cs__h1,.cs__h2,.cs__lede,.cs__back,.cs__nb,.wk__h1 { color:var(--heading) }
.foot__mark { color:var(--blue) }
.foot__form input { color:var(--text); border-bottom-color:rgba(0,47,167,.4) }
.foot__form input::placeholder { color:var(--text-muted); opacity:1 }
.foot__form input:focus { border-bottom-color:var(--blue) }
.hdr__nav { background:#f2f0e7f5; box-shadow:0 5px 24px rgba(29,34,45,.09) }
.hdr__nav a.is-on,.hdr__nav a:hover { background:rgba(0,47,167,.07) }
.skip,.wg-skip:focus,.cinema-skip:focus { background:var(--blue); color:var(--cream) }

/* The sculpted blue suede buttons keep their existing nine-slice geometry. */
.btn,.btn--blue {
  border-image-source:url('/assets/v3/btn/suede-blue.webp');
  color:var(--cream);
  filter:drop-shadow(0 4px 5px rgba(0,25,87,.18));
}
.hdr__cta,.hdr__inv .hdr__cta { border-image-source:url('/assets/v5/btn/suede-blue-plain.webp'); color:var(--cream) }
.btn:focus-visible,.btn--blue:focus-visible,.hdr__inv .btn.is-fv,.cs__nb:focus-visible { outline-color:var(--blue) }
.btn:hover { filter:drop-shadow(0 6px 8px rgba(0,25,87,.24)) }
.btn:active { filter:drop-shadow(0 2px 3px rgba(0,25,87,.18)) }
.services__link,
.wg-mode,.wg-index .wg-mode,
.cinema-pause,.cinema-step,.cinema-player__close {
  color:var(--cream);
  background:var(--blue) var(--blue-suede) 50% 50%/320px 320px;
  border:1px solid rgba(0,26,104,.22);
  box-shadow:0 3px 8px rgba(0,25,87,.12),inset 0 1px rgba(255,255,255,.16);
}
.services__link:hover,.services__link:focus-visible,.cinema-step:hover {
  background:var(--blue) var(--blue-suede) 50% 50%/320px 320px;
  color:var(--cream);
  box-shadow:0 5px 12px rgba(0,25,87,.22),inset 0 1px rgba(255,255,255,.22);
}
.wg-mode,.wg-index .wg-mode { padding:10px 16px; border-radius:30px }
.cinema-pause { padding:9px 14px; border-radius:24px; opacity:1 }
.cinema-step { width:36px; height:36px }

/* Keep the navy lighting theatre previously requested for the satellite.
   Its shared shade dissolves back into cream before the blue statement. */
.orbit__copy { color:var(--heading) }
.orbit__copy .say__sub { color:var(--text) }
.orbit:not(.is-animated) .orbit__heading { color:var(--heading) }
.services__panel:not(.services__panel--branding) {
  background:linear-gradient(120deg,rgba(250,248,241,.90),rgba(242,240,231,.78));
}
.services__tags li { border-color:rgba(0,47,167,.3) }
.services__sculpture { filter:drop-shadow(0 18px 24px #14204220) }
.services__sculptures { opacity:.3 }

/* Original cobalt at 40%; sculpture.js supplies local deformation and a
   travelling contour light. The responsive picture is a no-WebGL fallback. */
.brk--two .relief {
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(transparent 3%,#000 25%,#000 70%,transparent 97%);
  mask-image:linear-gradient(transparent 3%,#000 25%,#000 70%,transparent 97%);
}
.brk--two .relief > picture { display:block;filter:none;opacity:.4 }
.brk--two .relief > .relief__blue { display:none }
.brk--two .relief img { filter:url('/assets/suede/relief-material.svg?v=2#material') }
.brk--two .relief.is-live > picture { visibility:hidden }
.brk--two .relief > .relief__surface {
  position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;
}
@media (max-width:767px) {
  .brk--two .brk__stage { height:132vw!important;min-height:470px }
  .brk--two .relief { top:0;bottom:auto;left:0;right:auto }
  .brk--two .brk__motto {
    position:absolute;top:auto;bottom:5%;left:0;right:0;margin:0;
    font-size:clamp(38px,11.5vw,48px);line-height:1.02;text-align:right;
  }
  .brk--two .relief > .relief__blue {
    -webkit-mask-image:url('/assets/suede/relief-contours-phone.svg');
    mask-image:url('/assets/suede/relief-contours-phone.svg');
  }
}
.brk--two .brk__motto,.say--two .say__body { text-shadow:none }

/* Work and Films retain their moving atmospheric images over the suede.
   Cream washes protect the blue navigation and logos from dark frames. */
.wg-atmosphere { inset:0 }
.wg-atmosphere img.is-on { opacity:.12 }
.wg-header,.wg-logo,.wg-footer,.cinema-header,.cinema-logo,.cinema-footer { color:var(--blue) }
.wg-logo,.cinema-logo { filter:drop-shadow(0 0 1px var(--cream)) drop-shadow(0 2px 10px #f2f0e7cc) }
.wg-footer p,.cinema-description { text-shadow:0 1px 10px var(--cream); color:var(--text) }
.wg-footer::before,.cinema-footer::before {
  content:""; position:absolute; z-index:-1; inset:-24px -20px -24px -16px;
  background:linear-gradient(transparent,#f2f0e7ed 55%); pointer-events:none;
}
.wg-header::before {
  content:""; position:absolute; z-index:-1; inset:-18px -18px -10px -16px;
  background:linear-gradient(#f2f0e7f2 60%,#f2f0e700); pointer-events:none;
}
.wg-hint,.cinema-count { opacity:1; color:var(--text-muted) }
.wg-header a[aria-current],.cinema-header a[aria-current] { opacity:1; text-decoration:underline; text-underline-offset:5px }
.wg-card__caption,.cinema-card__play,.cinema-card__fallback { color:var(--cream) }
.wg-card:focus-visible,.cinema-card:focus-visible { outline-color:var(--blue) }
.wg-cursor,.cinema-cursor { background:#002fa7ba; border:1px solid #f2f0e76b; color:var(--cream) }
.cinema-cursor span { color:var(--cream) }
.cinema-bg__layer.is-on { opacity:.25 }
.cinema-bg::after {
  background:linear-gradient(90deg,#f2f0e7b8,transparent 36%,transparent 64%,#f2f0e7b8),
    linear-gradient(#f2f0e7a6,transparent 35%,#f2f0e7b8);
}
.cinema-live .cinema-titles {
  background:linear-gradient(145deg,#f8f6ee85,#f2f0e74d);
  border-color:#002fa726; box-shadow:0 12px 48px #2a30450a;
}
.cinema-title { color:#002fa74d }
.cinema-title__ink::after { color:var(--blue) }
.cinema-title:hover .cinema-title__ink { color:#002fa780 }
.cinema-meta { color:var(--text); opacity:1 }
.cinema-player :focus-visible { outline-color:var(--cream) }
.cinema-player__close { border-color:#f2f0e740 }

@media(max-width:767px) {
  :root { --suede:480px }
  .cinema-pause { padding:8px 10px }
  .cinema-step { width:32px; height:32px }
}