/* SALO & Friends. Black, gold and the flyer's pixel grid. */

@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(../fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(../fonts/barlow-latin-500-normal.woff2) format("woff2")}

:root{
  --black:#000;
  --gold:#FEAF0E;
  --gold-deep:#B97F0A;
  --ink:#BDB4A2;            /* body text: warm grey */
  --display:"Fredoka","Arial Rounded MT Bold","Nunito",sans-serif;
  --cond:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --cell:clamp(22px,3.4vw,48px);      /* one pixel size for the whole site: the hero grid; tiles use half of it, the curtain 60% */
  --gutter:clamp(20px,5vw,72px);
  --pixel-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='14' height='14' fill='%23000'/%3E%3Crect x='2' y='2' width='10' height='10' fill='%23FEAF0E'/%3E%3C/svg%3E") 7 7, auto;
  /* stepped corners: the grid, applied to buttons */
  --pixel-corners:polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px));
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--black);color:var(--ink);font:400 17px/1.5 var(--text);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scrollbar-color:var(--gold) #000}
body{margin:0;overflow-x:hidden;background:var(--black)}
.skip{position:absolute;left:-999px;top:12px;z-index:60;padding:10px 14px;background:var(--gold);color:#000;font:700 .9rem/1 var(--cond);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.skip:focus{left:var(--gutter)}
::selection{background:var(--gold);color:#000}
img{display:block;max-width:100%}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
h1{margin:0}
h2{font:600 clamp(2.3rem,5vw,4.3rem)/.98 var(--display);color:var(--gold);margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1em;max-width:60ch}
figure{margin:0}
.wrap{max-width:1240px;margin:0 auto}
section{padding:clamp(64px,8.5vw,124px) var(--gutter);scroll-margin-top:60px}
#cellprobe{position:absolute;visibility:hidden;width:var(--cell);height:0;pointer-events:none}

/* ---------- buttons and links: colour changes in steps, like a screen redrawing ---------- */
.btn{display:inline-block;font:700 1rem/1 var(--cond);text-transform:uppercase;letter-spacing:.09em;
     padding:15px 22px 14px;background:var(--gold);color:var(--black);text-decoration:none;border:2px solid var(--gold);
     clip-path:var(--pixel-corners);transition:background .16s steps(3,end),color .16s steps(3,end)}
.btn:hover,.btn:focus-visible{background:var(--black);color:var(--gold)}
.btn:active,.ico:active,.powered:active{transform:translate(2px,2px)}

/* pixel underline for the caps links; it marches on hover */
.pxl{text-decoration:none;padding-bottom:6px;
     background:linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 7px) repeat-x 0 100%/7px 2px}
.pxl:hover{background-image:linear-gradient(90deg,#fff 0 4px,transparent 4px 7px);animation:march .42s steps(3,end) infinite}
@keyframes march{to{background-position-x:7px}}

/* section marker: two stepped pixels in the brand's two golds */
.pip{display:block;width:calc(var(--cell)*.7);height:calc(var(--cell)*.7);margin-bottom:22px;
     background:
       linear-gradient(var(--gold),var(--gold)) 0 0/45% 45% no-repeat,
       linear-gradient(var(--gold-deep),var(--gold-deep)) 55% 55%/45% 45% no-repeat}
.pip.in{animation:pipstep .6s steps(1,end) both}
@keyframes pipstep{0%{background-size:0 0,0 0}33%{background-size:45% 45%,0 0}66%,100%{background-size:45% 45%,45% 45%}}

/* ---------- top bar ---------- */
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:22px;padding:16px var(--gutter)}
.top::before{content:"";position:absolute;inset:0;background:linear-gradient(#000 0%,rgba(0,0,0,.6) 55%,transparent);z-index:-1;pointer-events:none;height:150%}
.top-mark{font:700 1.1rem/1 var(--cond);letter-spacing:.06em;color:var(--gold);text-decoration:none;margin-right:auto;display:flex;align-items:center;min-height:38px}
.top-mark img{display:none;height:38px;width:auto}
body.past .top-mark span{display:none}
body.past .top-mark img{display:block;animation:markpop .3s steps(3,end) both}
@keyframes markpop{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.top-nav{display:flex;gap:22px}
.top-nav a{font:600 .95rem/1 var(--cond);text-transform:uppercase;letter-spacing:.08em;color:var(--gold);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.top-nav a:hover{border-color:var(--gold)}
/* the ticket: notched like a stub, with a perforation and two pixels on the tear-off end */
.ticket{display:inline-flex;align-items:center;gap:0;position:relative;padding:12px 44px 11px 18px;font:700 .95rem/1 var(--cond);
        text-transform:uppercase;letter-spacing:.1em;color:#000;text-decoration:none;
        background:repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 6px) calc(100% - 30px) 0/2px 100% no-repeat,var(--gold);
        clip-path:polygon(0 0,100% 0,100% calc(50% - 8px),calc(100% - 4px) calc(50% - 8px),calc(100% - 4px) calc(50% - 4px),calc(100% - 8px) calc(50% - 4px),calc(100% - 8px) calc(50% + 4px),calc(100% - 4px) calc(50% + 4px),calc(100% - 4px) calc(50% + 8px),100% calc(50% + 8px),100% 100%,0 100%,0 calc(50% + 8px),4px calc(50% + 8px),4px calc(50% + 4px),8px calc(50% + 4px),8px calc(50% - 4px),4px calc(50% - 4px),4px calc(50% - 8px),0 calc(50% - 8px));
        transition:background-color .16s steps(3,end)}
.ticket::after{content:"";position:absolute;right:20px;top:50%;width:5px;height:5px;margin-top:-5px;background:#000;box-shadow:4px 5px #000;transition:transform .2s steps(2,end)}
.ticket:hover,.ticket:focus-visible{color:#000;background-color:#FFD26B}
.ticket:hover::after,.ticket:focus-visible::after{transform:translate(-1px,-3px)}
.ticket:active{transform:translate(2px,2px)}
.ticket.big{font-size:1.15rem;padding:18px 58px 17px 26px;background-position:calc(100% - 40px) 0,0 0}
.ticket.big::after{right:25px;width:6px;height:6px;box-shadow:5px 6px #000}
@media(max-width:820px){.top-nav{display:none}}

/* ---------- hero: the room full-bleed, the logo and the line as one centred lockup, the photo fraying into pixels at every edge ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;cursor:var(--pixel-cursor);
      display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3.6vh,40px);
      padding:calc(80px + 2vh) var(--gutter) calc(80px + 3vh)}
.hero-photo{position:absolute;inset:0;background:url(../assets/photos/hero.webp) 50% 45%/cover no-repeat;filter:brightness(1.02)}
/* a pool of shadow behind the lockup so the gold line reads on the gold room, and a fall to black into the page */
.hero-photo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 44% 46% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,.22) 64%,rgba(0,0,0,0) 82%),
             linear-gradient(180deg,rgba(0,0,0,.65) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 70%,#000 100%)}
.hero-mark{position:relative;z-index:2;width:min(54vw,640px,58vh);max-width:100%;display:grid}
.hero-mark img,.hero-mark canvas{grid-area:1/1;display:block;width:100%;height:auto}
.hero-mark canvas{image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;opacity:0}
.hero-mark.resolving img{opacity:0}
.hero-mark.resolving canvas{opacity:1}
.hero-info{position:relative;z-index:2;text-align:center}
.hero-info .state{font:600 clamp(1.35rem,2.1vw,1.9rem)/1.1 var(--display);color:var(--gold);max-width:22ch;margin:0 auto;text-wrap:balance}
/* a chevron of five pixels, stepping down */
.cue{position:absolute;z-index:2;left:50%;bottom:clamp(22px,4vh,40px);width:44px;height:44px;margin-left:-22px;display:grid;place-items:center}
.cue i{display:block;width:6px;height:6px;background:var(--gold);margin-top:12px;
       box-shadow:-6px -6px var(--gold),6px -6px var(--gold),-12px -12px var(--gold),12px -12px var(--gold);animation:cue 1.4s steps(1,end) infinite}
.cue:hover i{background:#fff;box-shadow:-6px -6px #fff,6px -6px #fff,-12px -12px #fff,12px -12px #fff}
@keyframes cue{50%{transform:translateY(6px)}}
@media(max-width:820px){
  .hero{padding:calc(76px + 2vh) var(--gutter) calc(84px + 2vh)}
  .hero-photo{background-position:50% 35%}
  .hero-photo::after{background:radial-gradient(ellipse 80% 34% at 50% 50%,rgba(0,0,0,.62),rgba(0,0,0,0) 80%),
             linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 72%,#000 100%)}
  .hero-mark{width:100%}
  .hero-info .state{max-width:17ch;font-size:1.45rem}
}

/* ---------- mosaic: the photo broken into its own pixels ----------
   pix:   a block filled with the average colour of the photo under it, lifted a little
   shift: a block of the photo itself, nudged a cell out of place
   blur:  a block of frosted photo
   black: a hole */
.mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols),var(--px));grid-auto-rows:var(--px);
        pointer-events:none;overflow:hidden;z-index:1}
.mosaic i{display:block;position:relative;animation:pop .02s steps(1,end) backwards;animation-delay:var(--d,0ms)}
.mosaic i.black{background:#000}
.mosaic i.shift{background-image:var(--photo);background-repeat:no-repeat}
.mosaic i.blur{-webkit-backdrop-filter:blur(9px) brightness(1.12) saturate(1.1);backdrop-filter:blur(9px) brightness(1.12) saturate(1.1)}
.mosaic i.off{visibility:hidden}
/* the picture wakes up under the pointer */
.mosaic i.hot:not(.shift){visibility:hidden}
.mosaic i.shift.hot{filter:brightness(1.9)!important}
.mosaic i.spark{animation:none;opacity:0}
.mosaic i.decay{animation:none;visibility:hidden}
.mosaic i.decay.on{visibility:visible}
.mosaic i.spark.on{opacity:1}
@keyframes pop{from,to{opacity:0}}   /* hidden until its moment, then the base style (visible) takes over */

/* ---------- tiles: photos that arrive as pixels and resolve ---------- */
.tile{position:relative;overflow:hidden;aspect-ratio:4/3;cursor:var(--pixel-cursor);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.tile img{width:100%;height:100%;object-fit:cover}
.tile canvas.res{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}
.tile .mosaic i{animation-play-state:paused}
.tile.in .mosaic i{animation-play-state:running}
@media(hover:hover){
  .tile .mosaic i{transition:opacity .01s step-end;transition-delay:calc(var(--d,0ms) * .45)}
  .tile:hover .mosaic i{opacity:0}
}

/* ---------- lines ---------- */
.what{display:grid;gap:clamp(64px,10vw,140px)}
.what > .line{width:100%}   /* auto margins on a grid item would otherwise shrink the row to its content */
.line{display:grid;grid-template-columns:repeat(12,1fr);column-gap:22px;align-items:center}
.line > p{grid-column:1/8;grid-row:1;position:relative;z-index:2;margin:0;max-width:15ch;
        font:600 clamp(2.1rem,4.9vw,4.5rem)/1.02 var(--display);color:var(--gold);text-wrap:balance}
.line .tile{grid-column:7/13;grid-row:1}
.line-2 > p{grid-column:6/13;text-align:right;justify-self:end}
.line-2 .tile{grid-column:1/7;aspect-ratio:1}
.line-3{align-items:start}
.line-3 > p{grid-column:1/6}
.events{grid-column:6/13;grid-row:1;position:relative;z-index:2;min-height:240px}
.events iframe{display:block;width:100%;max-width:640px;border:0;background:transparent;color-scheme:dark}
@media(max-width:820px){
  .line{grid-template-columns:1fr;row-gap:0}
  .line > p{grid-column:1;grid-row:1;max-width:14ch}
  .line .tile{grid-column:1;grid-row:2;width:78%;justify-self:end;margin-top:-1.2em}
  .line-2 > p{grid-column:1;justify-self:end}
  .line-2 .tile{justify-self:start;width:70%}
  .line-3 .events{grid-column:1;grid-row:2;margin-top:28px;min-height:0}
}

/* ---------- salo ---------- */
.salo .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,6vw,90px);align-items:center}
.diptych{position:relative;padding-bottom:20%}
.diptych .a{width:62%;aspect-ratio:4/5}
.diptych .b{position:absolute;right:0;bottom:0;width:54%;aspect-ratio:4/3}
.lede{font:500 1.45rem/1.3 var(--text);color:#E6DCC6;max-width:24ch}
.links{display:flex;flex-wrap:wrap;gap:18px 28px;margin:26px 0 0}
.links a{font:700 1.05rem/1 var(--cond);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:820px){.salo .wrap{grid-template-columns:1fr}}

/* ---------- join ---------- */
/* the friends photo is the section's backdrop: it runs off the right edge and dissolves into the black behind the form */
.join{position:relative;overflow:hidden;min-height:clamp(640px,58vw,900px);display:flex;align-items:center}
.join .wrap{width:100%}
.join .wrap > div{position:relative;z-index:2;max-width:560px}
.join .tile.bleed{position:absolute;z-index:0;top:50%;right:0;width:min(66vw,1200px);aspect-ratio:4/3;margin:0;transform:translateY(-50%)}
.join .tile.bleed img{object-position:50% 40%}
.signup{display:block;width:100%;max-width:420px;min-height:420px;border:0;margin-top:14px;background:transparent;color-scheme:dark}   /* min-height holds the space until Entry reports the real height */
.btn.big{font-size:1.2rem;padding:20px 30px 19px;margin-top:10px}
@media(max-width:820px){
  .join{display:block;min-height:0;padding-top:0}
  .join .wrap{display:flex;flex-direction:column}
  .join .tile.bleed{order:-1}
  .join .tile.bleed{position:relative;top:auto;transform:none;width:auto;margin:0 calc(-1 * var(--gutter)) -18vw;aspect-ratio:4/3}
  .join .tile.bleed img{object-position:50% 40%}
}

/* ---------- bookings ---------- */
.biglinks{list-style:none;margin:0;padding:0}
.biglinks li{margin:0 0 22px}
.biglinks a{font:700 clamp(1.5rem,3.2vw,2.4rem)/1.1 var(--cond);text-transform:uppercase;letter-spacing:.05em;padding-bottom:8px;overflow-wrap:anywhere;
            background-size:9px 3px;background-image:linear-gradient(90deg,var(--gold) 0 5px,transparent 5px 9px)}
.biglinks a:hover{background-image:linear-gradient(90deg,#fff 0 5px,transparent 5px 9px);animation:march9 .42s steps(3,end) infinite}
@keyframes march9{to{background-position-x:9px}}

/* ---------- footer ---------- */
.foot{padding:44px var(--gutter) 40px;border-top:1px solid #1c1a15;display:flex;flex-wrap:wrap;gap:20px 44px;align-items:center;font-size:.95rem}
.foot-mark{margin-right:auto;display:block}
.foot-mark img{width:150px;height:auto}
.foot a{text-decoration:none}
.foot p{margin:0}
.icons{display:flex;gap:10px}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--gold);clip-path:var(--pixel-corners);transition:background .16s steps(3,end),color .16s steps(3,end)}
.ico:hover,.ico:focus-visible{background:var(--gold);color:#000}
.ico svg{width:24px;height:24px;display:block}
/* Powered by Entry: the Entry lock-up in white, flipping to black on the gold hover */
.powered{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border:2px solid #3a3426;clip-path:var(--pixel-corners);
         text-decoration:none;font:600 .74rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:background .16s steps(3,end),color .16s steps(3,end),border-color .16s steps(3,end)}
.powered svg{display:block;height:17px;width:auto;color:#fff;transition:color .16s steps(3,end)}
.powered:hover,.powered:focus-visible{background:var(--gold);border-color:var(--gold);color:#000}
.powered:hover svg,.powered:focus-visible svg{color:#000}
@media(max-width:820px){.foot{gap:18px 28px}}

/* ---------- the curtain: a screen of pixels for arriving and moving between sections ----------
   Covers the page from first paint when JavaScript is on; the script dissolves it. If the script never runs, it gets out of the way by itself. */
.curtain{position:fixed;inset:0;width:100vw;height:100vh;z-index:50;pointer-events:none;image-rendering:pixelated;display:none}
.js .curtain{display:block;background:#000;animation:curtain-safety 0s 3.5s forwards}
.js .curtain.live{background:transparent;animation:none}
@keyframes curtain-safety{to{visibility:hidden}}

/* ---------- type arrives in stepped wipes, as if drawn a block at a time ---------- */
.px-ready [data-px]{clip-path:inset(-20% 100% -20% -4%)}
.px-ready [data-px].in{animation:pxwipe .48s steps(6,end) forwards}
.px-ready .line-2 [data-px].in{animation-name:pxwipe-r}
@keyframes pxwipe{from{clip-path:inset(-20% 100% -20% -4%)}to{clip-path:inset(-20% -4% -20% -4%)}}
@keyframes pxwipe-r{from{clip-path:inset(-20% -4% -20% 100%)}to{clip-path:inset(-20% -4% -20% -4%)}}

/* the photocopy grit on display type, where the browser can do it (Chrome, Firefox); Safari gets clean type */
@supports (filter:url(#grit)){ .line > p, h2, .hero-info .state{filter:url(#grit)} }

/* motion discipline */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .curtain{display:none}
  .mosaic i{animation:none!important;transition:none!important}
  .px-ready [data-px]{clip-path:none!important;animation:none!important}
  .pxl:hover,.biglinks a:hover,.pip.in,body.past .top-mark img{animation:none}
  .btn,.ico,.powered,.powered svg,.ticket,.ticket::after{transition:none}
  .cue i{animation:none}
}

/* sections take focus after a jump so keyboard and screen reader users land in the right place; no ring for that */
section[tabindex="-1"]:focus{outline:none}