#babel-gate *{box-sizing:border-box}
#babel-gate #stage{position:fixed;inset:0;background:var(--navy)}
#babel-gate .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
#babel-gate canvas{display:block;width:100%;height:100%}


#babel-gate #fallback{position:fixed;inset:0;display:none;background:
  radial-gradient(120% 80% at 50% 62%, #16365e 0%, var(--navy) 55%, #07172e 100%)}
#babel-gate #fallback.on{display:block}
#babel-gate #fallback svg{position:absolute;inset:0;width:100%;height:100%}



#babel-gate #fallback.on ~ #vignette{opacity:.5}
#babel-gate #vignette{position:fixed;inset:0;pointer-events:none;z-index:1;transition:opacity .3s;
  background:radial-gradient(ellipse 66% 54% at 50% 46%,
    rgba(4,13,28,0) 0%, rgba(4,13,28,.30) 52%, rgba(3,10,22,.88) 100%)}


#babel-gate #overlay{position:fixed;inset:0;z-index:4;display:grid;grid-template-rows:auto 1fr auto;
  padding-block:0;padding-inline:20px;pointer-events:none}
#babel-gate .fret{height:3px;background:repeating-linear-gradient(90deg,
  var(--gold) 0 10px, transparent 10px 14px, var(--gold) 14px 17px, transparent 17px 28px);
  opacity:.85;margin-inline:-20px}
#babel-gate .utility{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-block:14px;pointer-events:auto;flex-wrap:wrap}
#babel-gate .util-btn{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--champagne);background:none;border:1px solid rgba(198,163,74,.38);
  padding:9px 14px;cursor:pointer;transition:border-color .2s,color .2s}
#babel-gate .util-btn:hover, #babel-gate .util-btn:focus-visible{border-color:var(--gold);color:var(--gold-light)}
#babel-gate .lang{display:flex;gap:2px}
#babel-gate .lang .util-btn[aria-pressed="true"]{color:var(--navy);background:var(--gold);border-color:var(--gold)}


#babel-gate .centre{display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:start;
  text-align:center;padding-block:0.6vh 0;transition:opacity .45s ease,transform .45s ease}
#babel-gate .callout{display:flex;flex-direction:column;align-items:center;gap:24px;
  align-self:end;padding-bottom:11vh}
#babel-gate .centre.gone{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}



#babel-gate .plaque{background:var(--navy);border:1px solid rgba(198,163,74,.55);
  padding:7px 13px;box-shadow:0 12px 34px rgba(0,0,0,.6);
  display:block;line-height:0}
#babel-gate #mark{width:min(268px,44vw);height:auto;display:block}

#babel-gate .instruction{font-family:var(--serif);font-weight:300;font-size:clamp(15px,2.1vw,20px);
  line-height:1.55;color:var(--champagne);max-width:34ch;margin:0;text-wrap:balance}
#babel-gate .instruction[lang="ar"]{font-family:var(--sans);direction:rtl}

#babel-gate #enter{pointer-events:auto;font:500 13px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--navy);background:var(--gold);border:2px solid var(--gold);
  padding:16px 34px;cursor:pointer;min-height:48px;
  transition:background .22s,color .22s,box-shadow .22s,transform .22s}
#babel-gate #enter:hover{background:var(--gold-light);border-color:var(--gold-light);
  box-shadow:0 0 0 1px rgba(226,200,127,.4),0 12px 40px rgba(198,163,74,.24);transform:translateY(-1px)}
#babel-gate #enter:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

#babel-gate .foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding-block:14px;flex-wrap:wrap;pointer-events:auto}
#babel-gate .declaration{font:300 11.5px/1.5 var(--sans);color:rgba(216,211,198,.62);max-width:46ch;margin:0}
#babel-gate .foot{padding-bottom:26px}
#babel-gate .meter{font:400 11px/1.5 var(--mono);color:rgba(216,211,198,.5);text-align:end;white-space:nowrap}
#babel-gate .meter b{color:var(--champagne);font-weight:400}

#babel-gate.entered .foot{justify-content:flex-end}
#babel-gate.entered .meter{color:rgba(78,74,66,.62)}
#babel-gate.entered .meter b{color:#4E4A42}


#babel-gate #loading{position:fixed;inset-inline:0;bottom:0;height:2px;background:rgba(198,163,74,.14)}
#babel-gate #loading i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
#babel-gate #loadlabel{position:fixed;inset-inline-start:20px;bottom:14px;
  font:400 11px/1 var(--mono);color:rgba(216,211,198,.55)}


#babel-gate #banner{position:fixed;inset-inline:0;top:0;z-index:5;background:var(--alert);color:#fff;
  font:500 10.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding:7px 14px}
#babel-gate #overlay{padding-top:6px}


#babel-gate.entered #overlay .centre, #babel-gate.entered #loading, #babel-gate.entered #loadlabel, #babel-gate.entered #vignette, #babel-gate.entered .utility, #babel-gate.entered #overlay .fret, #babel-gate.entered .declaration{display:none}
#babel-gate #site{position:fixed;inset:0;z-index:3;display:none;place-items:center;background:var(--ivory);
  color:var(--navy);padding:28px;text-align:center;opacity:0;transition:opacity .5s}
#babel-gate #site.on{display:grid}
#babel-gate #site.show{opacity:1}
#babel-gate #site h2{font-family:var(--serif);font-weight:400;font-size:clamp(20px,3.4vw,30px);margin:0 0 10px;text-wrap:balance}
#babel-gate #site p{font-size:14px;line-height:1.6;color:#4E4A42;max-width:52ch;margin:0 auto 18px}@media (prefers-reduced-motion:reduce){#babel-gate *{animation-duration:.01ms !important;transition-duration:.12s !important}}
@media (max-width:520px){#babel-gate .declaration{display:none}#babel-gate .utility{padding-block:10px}}


.gate-lock{overflow:hidden !important}
#babel-gate [data-gate-seen] #babel-gate{display:none !important}
#babel-gate #stage{z-index:60;color:var(--cream);font-family:var(--sans)}
#babel-gate #fallback{z-index:61}
#babel-gate #vignette{z-index:62}
#babel-gate #overlay{z-index:64}
#loading,#loadlabel{z-index:65}


/* ─────────────────────────────────────────────────────────────────────────────────────────
   THE 2D GATE OPENS TOO.

   Everything above this line animates the WebGL gate. The 2D path — no WebGL, fewer than four
   cores, Save-Data, a slow connection, a CDN that did not answer inside 3.5 s, or a frame
   probe below 24 fps — was given a still picture of an ALREADY-OPEN gate and a click that cut
   straight to the homepage. On every one of those machines the gate did not open; it was
   simply not there, and then the site was. That is what "the gate does not open the way it
   used to" meant, and no amount of work on the 3D scene was ever going to fix it, because
   those visitors never reached the 3D scene.

   So the doors swing here as well, with no WebGL, no three.js and no CDN. The leaves are
   scaled toward their own hinges, which is what the projection of a swinging door actually
   looks like from in front of it, and the light behind them comes up as they go. It costs one
   transition on two SVG groups and it runs on anything. */
#babel-gate #fallback .fb-leaf{
  transform-box: fill-box;
  transition: transform 1500ms cubic-bezier(.45,.02,.2,1), opacity 1500ms linear;
}
#babel-gate #fallback .fb-leaf-l{ transform-origin: left center; }
#babel-gate #fallback .fb-leaf-r{ transform-origin: right center; }
#babel-gate #fallback #fb-aperture{ opacity:.22; transition: opacity 1400ms ease-out; }
#babel-gate #fallback svg{ transition: transform 1900ms cubic-bezier(.4,0,.2,1); }

#babel-gate.fb-opening #fallback .fb-leaf-l,
#babel-gate.fb-opening #fallback .fb-leaf-r{ transform: scaleX(.055); opacity:.72; }
#babel-gate.fb-opening #fallback #fb-aperture{ opacity:1; }
/* and the frame grows past the viewport, so the visitor goes THROUGH the opening */
#babel-gate.fb-opening #fallback svg{ transform: scale(1.16); }

@media (prefers-reduced-motion: reduce){
  #babel-gate #fallback .fb-leaf,
  #babel-gate #fallback #fb-aperture,
  #babel-gate #fallback svg{ transition: none; }
}