/* gate.css: the "desktop only" card phones see (built by gate.js). Every rule is scoped to html.gated, so on a desktop
   this file is inert. It rebuilds just enough of style.css's cardboard kit (cb-*) to match the sign, without loading
   style.css: fiber + grain board, corrugated cut edges, a pressed tray, die-cut buttons, a rubber stamp.
   One image (gate-preview.jpg, a still of the quiz). The blurred backdrop is scene.jpg shrunk to 72px and inlined. */
@font-face{font-family:'Gate Ref';src:url(fonts/Homecoming-Reference.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Gate Parade';src:url(fonts/Homecoming-Parade.ttf) format('truetype');font-display:swap}
@font-face{font-family:'Gate Slab';src:url(fonts/ZillaSlab-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gate Slab';src:url(fonts/ZillaSlab-500italic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Gate Slab';src:url(fonts/ZillaSlab-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gate Gothic';src:url(fonts/BarlowCondensed-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Gate Gothic';src:url(fonts/BarlowCondensed-700.woff2) format('woff2');font-weight:700;font-display:swap}

html.gated{
  --g-ink:#22160b;--g-edge:#5a3314;--g-kraft:#cf9558;--g-kraft-lt:#e8b97c;--g-laurel:#1f5a2f;--g-laurel-dk:#0f2f17;
  --g-red:#c2361f;--g-red-dk:#62170b;--g-mustard:#efc04e;--g-mustard-dk:#86601a;--g-kick:#53fc18;--g-kick-dk:#1d5c10;
  --g-fiber:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 .02  0 0 0 -1.1 .62'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --g-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.012 .5' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .8  0 0 0 1.6 -.82'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --g-wear:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.1'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
  --g-flutes:linear-gradient(rgba(40,16,4,.42),rgba(40,16,4,.12)),repeating-linear-gradient(90deg,#6b3f1a 0 1px,#c88e52 1px 3px,#9a6431 3px 4px);
  --g-light:linear-gradient(100deg,rgba(40,16,4,.14),transparent 35%,rgba(255,226,170,.22));
  color-scheme:light;background:#3b1e0d;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* the blurred sky overhangs the window (inset:-48px): clip it at the root so the page never pans sideways */
html.gated{overflow-x:clip}
html.gated body{margin:0;min-height:100vh;min-height:100svh;background:#3b1e0d;color:var(--g-ink);font:500 17px/1.4 'Gate Slab',Georgia,serif;overflow-x:hidden}
html.gated *,html.gated *::before,html.gated *::after{box-sizing:border-box}

/* the parade, out of focus behind the card */
html.gated .g-sky{position:fixed;inset:-48px;z-index:0;pointer-events:none;
  background:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAgqCEVAAD//gAPTGF2YzYzLjEuMTAyAP/bAEMACAwMDgwOEBAQEBAQExITFBQUExMTExQUFBUVFRkZGRUVFRQUFRUYGBkZGxwbGhoZGhwcHh4eJCQiIioqKzMzPv/EAIMAAAMBAQEBAAAAAAAAAAAAAAYFBAMHAgABAAMBAQEAAAAAAAAAAAAAAAQFAwECABAAAgECAwUHAwUBAQAAAAAAAQIDABEhBBIxBUFRMhQiYZFxE4GxUqEzFaKycsFDEQACAgEDBAIDAQAAAAAAAAABAgADESFBMRIiYZGh8QRxEzL/wAARCAAoAEgDASIAAhEAAxEA/9oADAMBAAIRAxEAPwAWj3dpIv3luLjlfbTePdqBmGBRhcHlWcRkiCgAEadTY41fnpjpTRdNS20/U0j62zzG3YNp4y8YRCoN1BpgkCyoSNo4UPQv7zKiMbC/0ohijdemjBecc4xK11q+d5OIyp42rcKOOw86bogt3hiaYjKKRiK7t/KVk8/uYlRqfXURPPHAERgQOHzSP9rJDzyDVYEqtRzP7UzxyMbBsKKd3SPLHpk/zjxpY1zhQCdJ12FuIDtuud4WmOHJfCk/YZeX5rtGZi7hXAAih7skf3CsF2fqU/gDAmCU5uRzGwW+xTypzmXkaJVFtQwJ8BwoGyUyxKxsSbc7Wp92gMhOg44XvVGUhvAixWyNZdkIZEuzYXVrH4ouyZ7tnsxoI7S0KrgSGBw8LWrCPOyKboP5VIqzZ2htdq17H5nXYkjPDzr1mpnhjugua5om9s2uNh+Kzn3rPL+p/YfShTU5PI9yzXqdm9Gb52KSRzIBtxPKm8WfeD21bbqGzj4UNjNvKG2gAWr4yqLByVIN9VhjRAXZhBusZJG8O95bwkeNbRsBpGNvOhTtj/Y1QZ3eB7OqpJe2F7UJ9sl+80ZXWvT/AJnLW4MgivddmNEySC2mU6cBbChmL/z9TTvM9Q9BW28wFNI5zAR2jxBAW1/GnOVghXqTWR5eVDh2L6iirLbWoQakCMazHsKxGwGXU+oFIN5xQrfuCJr7OHlRPleoUM7+6xXiAG0hDcQeyhjHuC+DbKW5yZMQRqtgK0y3Ck+a6m9f+1ZB3xc7HEgd22XsDwqf5r2/V8VnTTEBJn//2Q==") 50% 40%/cover no-repeat,#5a2a12;
  filter:blur(14px) saturate(1.2) brightness(.86)}
html.gated .g-sky::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 70% at 50% 30%,transparent 30%,rgba(30,12,4,.55)),linear-gradient(transparent 55%,rgba(25,10,3,.6))}

html.gated .g-wrap{position:relative;z-index:1;max-width:460px;margin:0 auto;
  padding:40px max(16px,env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:flex;flex-direction:column;align-items:stretch;gap:18px}

/* ---- the card: kit board with a corrugated cut rim, hung on twine from two brass brads ---- */
html.gated .g-card{position:relative;margin:0;padding:34px 18px 18px;text-align:center;border-radius:6px;rotate:-.4deg;
  background:var(--g-fiber) padding-box,var(--g-grain) padding-box,radial-gradient(120% 90% at 50% 30%,#f8ead0,#ecd3a8) padding-box,var(--g-flutes) border-box;
  border:6px solid transparent;outline:1.5px solid rgba(150,100,45,.45);outline-offset:-13px;
  box-shadow:3px 0 0 -1px #f2bd72,-12px 18px 30px rgba(20,8,2,.55),-3px 5px 8px rgba(20,8,2,.35);
  animation:g-hang .9s cubic-bezier(.2,1.3,.4,1) both}
@keyframes g-hang{0%{transform:translateY(-34px) rotate(-3deg);opacity:0}60%{opacity:1}100%{transform:none}}
html.gated .g-brad{position:absolute;top:12px;width:13px;height:13px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 62% 36%,#fff4cc,#e3b85a 30%,#8a6220 70%,#4b3210);box-shadow:-2px 2px 1.5px rgba(40,16,4,.55)}
html.gated .g-brad.l{left:12px}
html.gated .g-brad.r{right:12px}
html.gated .g-brad::before{content:'';position:absolute;left:5px;bottom:7px;width:2.5px;height:90px;border-radius:2px;z-index:-1;
  background:repeating-linear-gradient(170deg,#c9a46a 0 3px,#8a6130 3px 5px);box-shadow:-1px 1px 0 rgba(40,18,4,.4)}

/* the laurel badge riding the card's top edge */
html.gated .g-badge{position:absolute;top:-15px;left:50%;translate:-50% 0;margin:0;white-space:nowrap;display:inline-flex;align-items:center;gap:.55em;
  font:12.5px/1 'Gate Parade','Arial Black',sans-serif;letter-spacing:.1em;color:var(--g-kick);padding:.62em 1em .52em;border-radius:3px;
  background:var(--g-fiber),var(--g-grain),linear-gradient(100deg,rgba(0,0,0,.2),transparent 40%,rgba(255,220,140,.14)),var(--g-laurel);
  outline:1.5px dashed rgba(217,164,65,.5);outline-offset:-4px;
  box-shadow:0 3px 0 var(--g-laurel-dk),-4px 6px 5px rgba(45,18,4,.35),inset -2px 0 0 rgba(255,200,120,.35)}
html.gated .g-badge i{color:#d9a441;font-style:normal;font-family:Georgia,serif}

/* "You're on your phone." stamped on in red ink */
html.gated .g-kicker{display:inline-block;margin:6px 0 10px;padding:.32em .55em .2em;border:.16em solid currentColor;border-radius:.3em;
  font:15px/1 'Gate Parade','Arial Black',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--g-red);rotate:-4deg;
  mix-blend-mode:multiply;-webkit-mask:var(--g-wear);mask:var(--g-wear)}

/* layered cut-board lettering: painted face over kraft board over a dark cut edge */
html.gated .g-title{margin:0 0 12px;font:clamp(29px,9.2vw,44px)/1.02 'Gate Ref','Arial Black',Georgia,serif;letter-spacing:.015em;text-transform:uppercase;color:var(--g-laurel);
  text-wrap:balance;text-shadow:0 1px 0 var(--g-kraft-lt),0 2px 0 var(--g-kraft),0 3px 0 var(--g-kraft),-1px 4px 0 var(--g-edge),-3px 6px 6px rgba(40,16,4,.3)}
html.gated .g-title span{color:var(--g-red);white-space:nowrap}
html.gated .g-lede{margin:0 auto 4px;max-width:24em;font-size:17px;line-height:1.4;color:var(--g-ink);mix-blend-mode:multiply;text-wrap:pretty}

/* the still, taped on like a print */
html.gated .g-shot{position:relative;margin:20px 2px 6px;padding:7px 7px 9px;rotate:1.2deg;border-radius:2px;
  background:var(--g-fiber),#fbf3e2;box-shadow:-6px 9px 14px rgba(45,18,4,.35),inset -1px 0 0 rgba(150,100,45,.3)}
html.gated .g-shot img{display:block;width:100%;height:auto;aspect-ratio:720/414;border-radius:1px;background:#8a4a22}
html.gated .g-shot::before,html.gated .g-shot::after{content:'';position:absolute;top:-9px;width:62px;height:20px;opacity:.88;
  background:var(--g-fiber),rgba(242,226,186,.92);box-shadow:-1px 1px 2px rgba(45,18,4,.25)}
html.gated .g-shot::before{left:-12px;rotate:-28deg}
html.gated .g-shot::after{right:-12px;rotate:24deg}
html.gated .g-shot figcaption{margin-top:8px;font:700 13px/1.6 'Gate Gothic','Arial Narrow',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#4a3420}
html.gated kbd{display:inline-block;min-width:1.75em;margin:0 .14em;padding:.18em .4em .08em;border-radius:3px;font:700 12px/1.2 'Gate Gothic',sans-serif;color:var(--g-ink);
  background:var(--g-fiber),var(--g-light),#f4e4c1;box-shadow:0 2px 0 #8a6234,-1px 3px 3px rgba(45,18,4,.3)}
html.gated kbd.g-wide{min-width:3.4em}

/* ---- the tray of buttons ---- */
html.gated .g-tray{position:relative;margin:18px 0 0;display:flex;flex-direction:column;gap:16px;padding:14px 14px 18px;border-radius:8px;
  background:var(--g-fiber),rgba(120,70,25,.13);
  box-shadow:inset -3px 4px 6px rgba(60,28,6,.38),inset 2px -2px 0 rgba(255,244,220,.55),0 0 0 1px rgba(110,64,24,.22),0 1px 0 1px rgba(255,244,220,.45)}
html.gated .g-btn{--face:#f6e8c8;--edge:#8a6234;--text:var(--g-ink);--score:rgba(110,70,30,.4);--e:5px;
  position:relative;width:100%;min-height:54px;border:0;border-radius:4px;padding:.72em 1em .6em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:19px/1.05 'Gate Parade','Arial Black',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance;color:var(--text);
  background:var(--g-fiber),var(--g-grain),var(--g-light),var(--face);
  outline:1.5px dashed var(--score);outline-offset:-5px;
  box-shadow:0 var(--e) 0 var(--edge),-5px calc(var(--e) + 4px) 7px rgba(45,18,4,.38),inset -2px 0 0 rgba(255,214,150,.5),inset 1px 1px 0 rgba(255,240,210,.25);
  transition:transform .12s,box-shadow .12s}
html.gated .g-btn::before{content:'';position:absolute;left:0;right:0;top:100%;height:var(--e);border-radius:0 0 4px 4px;pointer-events:none;
  background:linear-gradient(rgba(30,12,2,.38),rgba(30,12,2,.1)),
    repeating-linear-gradient(90deg,var(--edge) 0 1px,color-mix(in srgb,var(--face) 62%,var(--edge)) 1px 3px,color-mix(in srgb,var(--face) 30%,var(--edge)) 3px 4px)}
html.gated .g-go{--face:var(--g-kick);--edge:var(--g-kick-dk);--text:#0f220b;--score:rgba(15,40,10,.5);font-size:20px;text-shadow:.6px .5px 0 rgba(255,255,220,.35)}
html.gated .g-cream{font-size:17px;min-height:48px}
@media (hover:hover){html.gated .g-btn:hover{--e:7px;transform:translateY(-2px)}}
html.gated .g-btn:active{--e:0px;transform:translateY(5px);box-shadow:0 0 0 var(--edge),-1px 1px 2px rgba(45,18,4,.45),inset 0 2px 4px rgba(45,18,4,.25)}
html.gated .g-btn:focus-visible{outline:3px solid var(--g-ink);outline-offset:3px}

/* LINK COPIED: a rubber stamp slammed across the tray */
html.gated .g-stamp{position:absolute;left:50%;top:50%;z-index:3;pointer-events:none;white-space:nowrap;opacity:0;
  translate:-50% -50%;rotate:-9deg;padding:.26em .5em .14em;border:.14em solid currentColor;border-radius:.25em;
  font:34px/1 'Gate Parade','Arial Black',sans-serif;letter-spacing:.06em;color:#b22a14;background:rgba(255,236,200,.35);
  mix-blend-mode:multiply;-webkit-mask:var(--g-wear);mask:var(--g-wear);transition:opacity .6s}
html.gated .g-stamp.on{opacity:.95;transition:none;animation:g-slam .32s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes g-slam{0%{scale:1.9;rotate:-16deg;opacity:0}60%{scale:.94;rotate:-8deg;opacity:.95}100%{scale:1;rotate:-9deg}}

html.gated .g-url{margin:14px 0 0;font:600 15px/1.35 'Gate Gothic','Arial Narrow',sans-serif;letter-spacing:.04em;color:#4a3420}
html.gated .g-url b{font:700 16px/1.35 'Gate Slab',Georgia,serif;letter-spacing:0;color:var(--g-ink);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}
html.gated .g-status{margin:6px 0 0;font:italic 500 15px/1.35 'Gate Slab',Georgia,serif;color:#3e2a12}
html.gated .g-status:empty{display:none}
html.gated .g-top{margin:12px auto 0;display:table;padding:.5em .8em .38em;border-radius:2px;font:600 14px/1.2 'Gate Gothic',sans-serif;letter-spacing:.05em;text-transform:uppercase;
  background:var(--g-fiber),var(--g-light),#f4e4c1;box-shadow:0 2px 0 #8a6234,-3px 4px 4px rgba(40,16,4,.28);rotate:-1deg}
html.gated .g-top[hidden]{display:none}

/* the prize: a brass ticket stub with punched ends */
html.gated .g-prize{margin:4px 6px 0;text-wrap:balance;padding:.75em 1.4em .62em;text-align:center;border-radius:2px;rotate:.8deg;
  font:600 16px/1.3 'Gate Gothic','Arial Narrow',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#2a1806;
  background:var(--g-fiber),var(--g-grain),var(--g-light),var(--g-mustard);
  box-shadow:0 3px 0 var(--g-mustard-dk),-4px 7px 8px rgba(30,12,2,.45),inset -1.5px 0 0 rgba(255,214,150,.4);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 .45em,#000 .48em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .45em,#000 .48em) right/51% 100% no-repeat;
  mask:radial-gradient(circle at 0 50%,#0000 .45em,#000 .48em) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,#0000 .45em,#000 .48em) right/51% 100% no-repeat}
html.gated .g-prize b{display:block;font:19px/1.15 'Gate Parade','Arial Black',sans-serif;letter-spacing:.06em;color:var(--g-red-dk);margin-bottom:.15em}

html.gated .g-escape{margin:-4px 0 0;text-align:center;font:500 14px/1.3 'Gate Slab',Georgia,serif}
html.gated .g-escape a{color:#ffe8c2;text-underline-offset:3px}

html.gated .g-foot{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
html.gated .g-foot p{margin:0;max-width:30em;font:500 13px/1.4 'Gate Gothic','Arial Narrow',sans-serif;letter-spacing:.03em;color:rgba(255,238,212,.82)}
html.gated .g-kick{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 16px;border-radius:6px;text-decoration:none;
  font:600 15px/1 'Gate Gothic','Arial Narrow',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f1ead8;
  background:linear-gradient(#141a10,#0b0f08);box-shadow:inset 0 0 0 1px rgba(83,252,24,.35),-3px 5px 10px rgba(0,0,0,.4)}
html.gated .g-kick b{color:var(--g-kick)}
html.gated .g-kick img{display:block;height:20px;width:auto}
html.gated .g-escape a:focus-visible,html.gated .g-kick:focus-visible{outline:3px solid #ffe8c2;outline-offset:3px}

@media (min-width:700px){html.gated .g-wrap{max-width:520px;padding-top:64px}}
@media (prefers-reduced-motion:reduce){
  html.gated .g-card,html.gated .g-stamp.on{animation:none}
  html.gated .g-btn,html.gated .g-stamp{transition:none}
}