/* ================= Valkyria brand system =================
   Primary   soft black #0F1115 · light graphite #969A9E · classic white #FFFFFF
   Accent    orange #F5A623
   Gradients Valkyria grey   #FFFFFF → #414346
             Valkyria orange #F5A623 → #B87333
             Burning steel   #B7BBBF #4F5155 #969A9E #CBCDCF #656B70 #414346 #9A5A1F
   Type      Zalando Sans Expanded (headings) · Bai Jamjuree (body)

   Runs offline from the table (LAN, no wi-fi) — fonts are local, never a CDN.
   Drop the .woff2 files into /fonts and they pick up automatically.
   ========================================================= */
/* Only the .ttf files were supplied. Listing a .woff2 first made the browser ask
   for it, take a 404 and only then fall back — five wasted 404s on every page
   load. If woff2 builds are ever added, put them back ahead of the truetype url
   in each rule. */
@font-face{font-family:'Zalando Sans Expanded';font-weight:600;font-display:swap;
  src:url('../../fonts/ZalandoSansExpanded-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Zalando Sans Expanded';font-weight:700;font-display:swap;
  src:url('../../fonts/ZalandoSansExpanded-Bold.ttf') format('truetype')}
@font-face{font-family:'Bai Jamjuree';font-weight:400;font-display:swap;
  src:url('../../fonts/BaiJamjuree-Regular.ttf') format('truetype')}
@font-face{font-family:'Bai Jamjuree';font-weight:500;font-display:swap;
  src:url('../../fonts/BaiJamjuree-Medium.ttf') format('truetype')}
@font-face{font-family:'Bai Jamjuree';font-weight:600;font-display:swap;
  src:url('../../fonts/BaiJamjuree-SemiBold.ttf') format('truetype')}

:root{
  --black:#0f1115; --graphite:#969a9e; --white:#fff; --accent:#f5a623; --copper:#b87333;
  --g-grey:linear-gradient(180deg,#fff,#414346);
  --g-orange:linear-gradient(180deg,#f5a623,#b87333);
  --g-steel:linear-gradient(135deg,#b7bbbf,#4f5155 18%,#969a9e 36%,#cbcdcf 54%,#656b70 72%,#414346 88%,#9a5a1f);
  --head:'Zalando Sans Expanded','Zalando Sans','Segoe UI',system-ui,sans-serif;
  --body:'Bai Jamjuree','Segoe UI',system-ui,sans-serif;
  --line:#414346;
  /* 4K table (3840×2160) — everything scales from viewport width */
  --u:clamp(16px,0.52vw,26px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--black);color:var(--white);font-family:var(--body);
  font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow:hidden}
a{color:inherit;text-decoration:none}

/* ---- brand panel: chamfered corners + gradient rim.
   From the Badge/Card assets — the 45° rim reads bright orange exactly at the
   bottom-left and top-right corners, white through the middle. ---- */
.bp{position:relative;border:0;background:none;--c:.6em}
.bp::before,.bp::after{content:'';position:absolute;pointer-events:none;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),
                    calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.bp::before{inset:0;background:var(--rim,linear-gradient(45deg,var(--accent),rgba(255,255,255,.8) 50%,var(--accent)))}
.bp::after{inset:1px;background:var(--fill,linear-gradient(180deg,rgba(255,255,255,.05),rgba(15,17,21,.97)))}
.bp>*{position:relative;z-index:1}

/* ---- controls: OUTLINED = pending action, FILLED = engaged ---- */
.btn{font-family:var(--head);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--white);cursor:pointer;transition:.18s;font-size:calc(var(--u)*1.05);
  padding:calc(var(--u)*.8) calc(var(--u)*1.6);
  --rim:linear-gradient(45deg,#656b70,#cbcdcf 50%,#656b70)}
.btn:not(:disabled):hover{--rim:linear-gradient(45deg,var(--accent),#fff 50%,var(--accent))}
.btn:disabled{color:#656b70;cursor:not-allowed;--rim:linear-gradient(#414346,#414346);--fill:linear-gradient(#0f1115,#0f1115)}
.btn.armed{color:var(--accent);--rim:linear-gradient(45deg,var(--accent),#fff 50%,var(--accent));
  --fill:linear-gradient(180deg,#0f1115,#0f1115);animation:pulseArm 1.15s ease-in-out infinite}
.btn.strike{color:var(--black);font-weight:700;--rim:linear-gradient(45deg,#fff,#fff 50%,#fff);
  --fill:var(--g-orange);animation:none}
@keyframes pulseArm{50%{filter:drop-shadow(0 0 calc(var(--u)*.9) rgba(245,166,35,.5))}}

/* ---- type scale ---- */
.h1{font-family:var(--head);font-weight:700;font-size:calc(var(--u)*3.6);letter-spacing:.06em;line-height:1.04}
.h2{font-family:var(--head);font-weight:700;font-size:calc(var(--u)*2.1);letter-spacing:.06em;line-height:1.1}
.eyebrow{font-family:var(--head);font-weight:600;font-size:calc(var(--u)*1.05);letter-spacing:.34em;color:var(--accent)}
.lede{font-size:calc(var(--u)*1.25);line-height:1.55;color:#d6d8da;max-width:60ch}
.muted{color:var(--graphite)}

/* ---- chevron divider (arrow-divider asset) ---- */
.divider{display:block;height:calc(var(--u)*1.1);opacity:.9}
.divider path{fill:url(#dvg)}

/* ---- stage placeholder for a clip that has not been supplied yet ---- */
.pending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:calc(var(--u)*.9);text-align:center;padding:calc(var(--u)*2);
  background:linear-gradient(180deg,#14171b,var(--black));z-index:2}
.pending .t{font-family:var(--head);font-weight:700;letter-spacing:.24em;
  font-size:max(1rem,calc(var(--u)*1.3));color:var(--white)}
.pending .s{font-size:max(1rem,calc(var(--u)*.95));color:var(--graphite);max-width:44ch;line-height:1.5}
.pending .f{font-family:var(--body);font-size:max(1rem,calc(var(--u)*.9));color:var(--accent);letter-spacing:.1em}
.pending .bars{display:flex;gap:calc(var(--u)*.4);margin-top:calc(var(--u)*.4)}
.pending .bars i{width:calc(var(--u)*1.6);height:calc(var(--u)*.22);background:var(--line);
  animation:pend 1.4s ease-in-out infinite}
.pending .bars i:nth-child(2){animation-delay:.18s}
.pending .bars i:nth-child(3){animation-delay:.36s}
.pending .bars i:nth-child(4){animation-delay:.54s}
@keyframes pend{50%{background:var(--accent)}}

/* ---- site header ---- */
.brandbar{display:flex;align-items:center;gap:calc(var(--u)*.9)}
.brandbar img{height:calc(var(--u)*2.2);width:auto}
.brandbar .sym{height:calc(var(--u)*2);width:auto}