/* The Happy Yard — Screen.
   Generated by build/build_screen.py. Edit build/data.py, not this file.

   Everything is the colour of a dark yard except the wall, which is the
   colour of a projector bulb. Anton for anything the wall shouts, JetBrains
   Mono for everything else — a listings-sheet voice, because that is what a
   reel strip is.

   The perspective is a single rotateY on .wall. Nothing here is WebGL. */

:root{
  --dark:#07090B;
  --dark-2:#0D1115;
  --beam:#F4F1E4;
  --beam-2:rgba(244,241,228,.62);
  --beam-3:rgba(244,241,228,.36);
  --gold:#FFD400;
  --amber:#F5A623;
  --line:rgba(244,241,228,.18);
  --display:"Anton",Impact,"Haettenschweiler",sans-serif;
  --body:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--dark);color:var(--beam);
  font:300 clamp(.94rem,.4vw + .84rem,1.04rem)/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--gold);outline-offset:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#111;
  padding:.7rem 1.1rem;z-index:99;font-weight:500}
.skip:focus{left:1rem;top:1rem}

.mark{display:block;background-image:url(../assets/img/menu-04.jpg);
background-size:229.15% 389.83%;background-position:42% 6.43%;
background-repeat:no-repeat;border-radius:50%}

/* --- The yard ------------------------------------------------------------ */

.yard{position:fixed;inset:0;z-index:0;overflow:hidden}
.yard img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.36) saturate(.6) blur(2px);transform:scale(1.06)}
.yard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,9,11,.72),rgba(7,9,11,.94))}

/* The light coming off the wall, thrown forward onto the seated crowd. Its
   opacity is nudged on every reel change, which is the whole projector. */
.spill{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 44% at 50% 38%,
    rgba(244,241,228,.20) 0%,transparent 68%)}

/* --- Layout -------------------------------------------------------------- */

.frame{position:relative;z-index:2;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  width:min(84rem,100% - clamp(1rem,4vw,3rem));margin-inline:auto;
  padding:clamp(1rem,3vh,1.8rem) 0}

.head{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.head .mark{width:2.9rem;aspect-ratio:1;flex:0 0 auto}
.head p{margin:0;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--beam-3)}
.head .now{color:var(--gold)}

/* --- The wall ------------------------------------------------------------ */

.wallwrap{display:grid;align-items:center;padding:clamp(1rem,3vh,2.4rem) 0}

.wall{
  position:relative;background:var(--dark-2);
  border:1px solid var(--line);
  padding:clamp(1.4rem,4vw,3rem);
}
.js .wall{
  transform:perspective(1500px) rotateY(-7deg) rotateX(1.4deg);
  transform-origin:70% 50%;
  box-shadow:0 0 90px -10px rgba(244,241,228,.16),
             0 60px 90px -60px #000;
}
/* The bulb. A soft rectangle of light behind the wall, so the wall reads as
   lit rather than as a panel with a border. */
.js .wall::before{
  content:"";position:absolute;inset:-14%;z-index:-1;
  background:radial-gradient(60% 55% at 50% 50%,
    rgba(244,241,228,.22),transparent 72%);
  filter:blur(28px)}
/* Scanline texture, at the strength of a real projector on a painted wall. */
.wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.028) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen}

.reel{position:relative}
.reel + .reel{margin-top:clamp(2rem,5vh,3.4rem);
  border-top:1px solid var(--line);padding-top:clamp(2rem,5vh,3.4rem)}

.no{font:400 .7rem/1 var(--body);letter-spacing:.3em;color:var(--amber);
  margin:0 0 .8rem}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.005em;margin:0 0 .7rem;line-height:.92}
h1{font-size:clamp(2.4rem,8.4vw,6rem)}
h2{font-size:clamp(1.7rem,4.6vw,3.2rem)}
h3{font:400 1.06rem/1.2 var(--body);letter-spacing:.06em;margin:0 0 .3rem;
  text-transform:uppercase;color:var(--gold)}
p{margin:0 0 .9rem;color:var(--beam-2);max-width:40rem}
.lede{color:var(--beam);font-size:clamp(1rem,1.3vw,1.18rem)}

.two{display:grid;gap:clamp(1.2rem,3vw,2.6rem)}
@media(min-width:54rem){.two{grid-template-columns:1.1fr .9fr}}

.cols{column-gap:2.2rem}
@media(min-width:42rem){.cols{column-count:2}}
@media(min-width:70rem){.cols{column-count:3}}
.sec{break-inside:avoid;margin:0 0 1.4rem}
.sec .note{font-size:.74rem;color:var(--beam-3);margin:0 0 .5rem}
.sec h4{margin:.6rem 0 .2rem;font:500 .64rem/1 var(--body);letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber)}
.sec ul{margin:0;padding:0;list-style:none}
.sec li{padding:.12rem 0;font-size:.88rem;color:var(--beam-2)}
.sec li i{display:block;font-style:normal;font-size:.76rem;color:var(--beam-3)}

.facts{list-style:none;margin:1rem 0 0;padding:0}
.facts li{display:flex;justify-content:space-between;gap:1.2rem;
  border-top:1px solid var(--line);padding:.55rem 0;font-size:.86rem}
.facts b{font-weight:400;color:var(--beam-3)}
.facts span{text-align:right}

.fac{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.9rem}
@media(min-width:44rem){.fac{grid-template-columns:1fr 1fr;gap:.9rem 2rem}}
.fac h3{margin:0 0 .1rem;font-size:.86rem}
.fac p{margin:0;font-size:.84rem}

.grid{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);margin-top:1rem}
@media(min-width:46rem){.grid{grid-template-columns:repeat(5,1fr)}}
.grid figure{margin:0}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  filter:saturate(.8) contrast(1.05)}
.grid figcaption{font-size:.66rem;color:var(--beam-3);padding-top:.3rem}

.calls{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:1.1rem 0 0;
  padding:0}
.calls a{display:inline-block;text-decoration:none;border:1px solid var(--line);
  padding:.6rem 1rem;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;transition:background .2s,color .2s}
.calls a:hover{background:var(--gold);color:#101010}

.colophon{font-size:.74rem;color:var(--beam-3);max-width:48rem;
  border-top:1px solid var(--line);padding-top:1rem;margin-top:1.8rem}

/* --- The strip ----------------------------------------------------------- */

.strip{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem 0 0;
  border-top:1px solid var(--line);list-style:none;margin:0}
.strip a{
  display:grid;gap:.25rem;text-decoration:none;padding:.7rem .9rem;
  border:1px solid transparent;white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s}
.strip em{font-style:normal;font-size:.64rem;letter-spacing:.24em;
  color:var(--amber)}
.strip b{font-weight:400;font-size:.84rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beam-2)}
.strip a:hover{background:rgba(244,241,228,.06)}
.strip a[aria-current="true"]{border-color:var(--gold)}
.strip a[aria-current="true"] b{color:var(--gold)}

/* --- With JS: one reel at a time ----------------------------------------- */

/* The frame is exactly one screen and the wall takes what the header and the
   strip leave. Giving the wall its own height instead pushed the strip — the
   only navigation on the site — off the bottom of short viewports. */
.js .frame{height:100svh}
.js .wallwrap{overflow:hidden;min-height:0;padding:clamp(.6rem,2vh,1.6rem) 0}
.js .wall{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);
  gap:clamp(.6rem,1.6vh,1.2rem)}
.js .wall h1{font-size:clamp(1.5rem,3.4vw,2.6rem)}
.js .strip{flex:0 0 auto}
.js .reelbox{position:relative;min-height:0;overflow:hidden}
.js .reel{
  position:absolute;inset:0;margin:0;border:0;padding:0 .4rem 0 0;
  overflow-y:auto;overscroll-behavior:contain;opacity:0;pointer-events:none;
  scrollbar-width:thin}
.js .reel[data-on]{opacity:1;pointer-events:auto}

/* --- Motion gating ------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  .js .frame{height:auto}
  .js .wall{transform:none;height:auto;box-shadow:none;display:block}
  .js .wall h1{font-size:clamp(2.4rem,8.4vw,6rem)}
  .js .wall::before{display:none}
  .js .wallwrap{overflow:visible}
  .js .reelbox{height:auto;overflow:visible}
  .js .reel{position:static;opacity:1;pointer-events:auto;overflow:visible;
    padding:0}
  .js .reel + .reel{margin-top:2.4rem;border-top:1px solid var(--line);
    padding-top:2.4rem}
  .spill{display:none}
  *,*::before,*::after{animation-duration:.01ms !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}