/* THE GATE'S GROUNDS (Josh, 2026-10-10 02:31; unicorn-factory
   docs/art/GATE_GROUNDS_RULING_2026-10-10.md). Three of the built places
   feathered into the night behind the gate, fixed to the viewport, washed to
   the night's violet, feathered on every edge. Nothing in the hero, the
   tickets or the card moves.

   The bottom row, on every screen: the hall at night (academy-a1, the
   Academy) at the foot of the left edge; the ring's machinery (works-c1, the
   Works) on the same row at the right edge, darker and quieter so it keeps
   the row without competing.

   The sky, on a computer only (a screen at least 720px wide with a mouse, the width at which the gate puts on its desktop lintel):
   booth six's front (booth-6, the Midway, cropped below its sign so no
   second lettering sits near the wordmark) scaled to cover the whole upper
   canvas, fading out above the bottom row. A phone or a tablet, held either
   way, gets the bottom row alone; the title has the top to itself.

   Renamed in the build (design answers f9a02bb, 1): the ruling's
   .g-plate.works is .g-plate.ring here, because uf.css already styles
   .works (the Midway's sound box); the file name is unchanged.

   Markup: three empty divs before the header,
   <div class="g-plate hall" aria-hidden="true"></div>
   <div class="g-plate ring" aria-hidden="true"></div>
   <div class="g-plate booth" aria-hidden="true"></div> */
.g-plate{position:fixed;inset:0;z-index:-1;pointer-events:none;background-repeat:no-repeat;background-blend-mode:multiply,normal}
.g-plate.hall{background-image:linear-gradient(rgba(36,21,72,.5),rgba(36,21,72,.5)),url(/assets/plates/gate/gate-grounds-hall-1600.webp);opacity:.55;
  background-position:0% 100%;background-size:auto 56%;
  -webkit-mask-image:radial-gradient(42% 80% at 18% 100%,#000 24%,rgba(0,0,0,.5) 52%,transparent 76%);mask-image:radial-gradient(42% 80% at 18% 100%,#000 24%,rgba(0,0,0,.5) 52%,transparent 76%)}
.g-plate.ring{background-image:linear-gradient(rgba(36,21,72,.6),rgba(36,21,72,.6)),url(/assets/plates/gate/gate-grounds-works-1000.webp);opacity:.4;
  background-position:100% 100%;background-size:auto 56%;
  -webkit-mask-image:radial-gradient(40% 76% at 84% 100%,#000 22%,rgba(0,0,0,.5) 50%,transparent 76%);mask-image:radial-gradient(40% 76% at 84% 100%,#000 22%,rgba(0,0,0,.5) 50%,transparent 76%)}
.g-plate.booth{display:none;background-image:linear-gradient(rgba(36,21,72,.6),rgba(36,21,72,.6)),url(/assets/plates/gate/gate-grounds-booth-1400.webp)}
/* the sky: a computer only */
@media (min-width:720px) and (hover:hover) and (pointer:fine){
  .g-plate.booth{display:block;background-position:center 0%;background-size:cover;opacity:.34;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 28%,rgba(0,0,0,.6) 46%,transparent 64%);mask-image:linear-gradient(to bottom,#000 0,#000 28%,rgba(0,0,0,.6) 46%,transparent 64%)}}
/* wide desktop: the bottom row a little larger */
@media (min-width:1400px) and (orientation:landscape){
  .g-plate.hall,.g-plate.ring{background-size:auto 62%}}
/* tablet portrait: narrower, both a step smaller */
@media (orientation:portrait){
  .g-plate.hall{background-size:auto 42%;
    -webkit-mask-image:radial-gradient(54% 58% at 16% 100%,#000 22%,rgba(0,0,0,.5) 50%,transparent 76%);mask-image:radial-gradient(54% 58% at 16% 100%,#000 22%,rgba(0,0,0,.5) 50%,transparent 76%)}
  .g-plate.ring{background-size:auto 42%;
    -webkit-mask-image:radial-gradient(52% 54% at 86% 100%,#000 20%,rgba(0,0,0,.5) 48%,transparent 76%);mask-image:radial-gradient(52% 54% at 86% 100%,#000 20%,rgba(0,0,0,.5) 48%,transparent 76%)}}
/* portrait phone: the foot only */
@media (orientation:portrait) and (max-width:560px){
  .g-plate.hall{background-size:auto 32%;opacity:.5;
    -webkit-mask-image:radial-gradient(62% 42% at 18% 100%,#000 18%,rgba(0,0,0,.5) 46%,transparent 74%);mask-image:radial-gradient(62% 42% at 18% 100%,#000 18%,rgba(0,0,0,.5) 46%,transparent 74%)}
  .g-plate.ring{background-size:auto 32%;opacity:.36;
    -webkit-mask-image:radial-gradient(60% 38% at 90% 100%,#000 16%,rgba(0,0,0,.5) 44%,transparent 72%);mask-image:radial-gradient(60% 38% at 90% 100%,#000 16%,rgba(0,0,0,.5) 44%,transparent 72%)}}
/* landscape phone: short, so both run taller and the wash is lighter */
@media (orientation:landscape) and (max-height:500px){
  .g-plate.hall{background-size:auto 70%;opacity:.42;
    -webkit-mask-image:radial-gradient(34% 84% at 14% 100%,#000 18%,rgba(0,0,0,.5) 46%,transparent 74%);mask-image:radial-gradient(34% 84% at 14% 100%,#000 18%,rgba(0,0,0,.5) 46%,transparent 74%)}
  .g-plate.ring{background-size:auto 70%;opacity:.34;
    -webkit-mask-image:radial-gradient(34% 80% at 88% 100%,#000 16%,rgba(0,0,0,.5) 44%,transparent 72%);mask-image:radial-gradient(34% 80% at 88% 100%,#000 16%,rgba(0,0,0,.5) 44%,transparent 72%)}}
/* the door overlay and the menu sit above the plates by their own z-index; nothing here changes them */
@media (forced-colors:active){.g-plate{display:none}}