/* Smiling Iguana BBQ. One screen, no page scroll. Every edge is a straight cut: no radius, no blur, no gradient. */
@font-face{font-family:'Iguana Cut';src:url('fonts/iguana-cut.woff2') format('woff2');font-display:block}
@font-face{font-family:'Libre Franklin';font-weight:500;src:url('fonts/libre-franklin-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Libre Franklin';font-weight:700;src:url('fonts/libre-franklin-700.woff2') format('woff2');font-display:swap}

:root{
  /* inks: the first eleven are fills sampled from the logo, the last four are the sunset Nash asked for */
  --ink:#2D120D;--shell:#F3F2ED;--orange:#F7763D;--sun:#F4EB60;--gold:#FDC363;--amber:#FDA20F;--coral:#EB6360;
  --sea:#2696BE;--deep:#26779A;--aqua:#94D8E2;--pink:#E8437A;--plum:#A2327A;--violet:#5A3187;--night:#1A1440;
  --tab:86px;--top:86px;--pad:16px;--e:cubic-bezier(.2,.9,.25,1);--cast:rgba(30,12,44,.24);
}
*{box-sizing:border-box;border-radius:0}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#2696BE;color:var(--ink);
  font-family:'Libre Franklin',Arial,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit;border-radius:0;-webkit-appearance:none;appearance:none;margin:0}
a{color:inherit}
.app{position:fixed;inset:0;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}

/* paper tags */
.tag{position:absolute;background:var(--shell);color:var(--ink);pointer-events:none;box-shadow:3px 4px 0 var(--cast);z-index:25}
.tag.logo{left:14px;top:calc(12px + env(safe-area-inset-top));width:98px;padding:8px 9px 7px;transform:rotate(-2.2deg)}
.tag.logo img{display:block;width:100%;height:auto}
.tag.what{right:12px;top:calc(20px + env(safe-area-inset-top));padding:8px 10px 7px;transform:rotate(1.4deg);
  font-family:'Iguana Cut';font-size:21px;line-height:1;text-transform:uppercase}
.tag.what small{display:block;margin-top:5px;font-family:'Libre Franklin',Arial,sans-serif;font-weight:700;font-size:13px;line-height:1.2;text-transform:none}
.tag.what small.todo{padding:3px 6px;border:2px dashed var(--ink);font-weight:500;font-size:12px}
.tag.what small:not(.todo){margin-top:3px;font-family:'Iguana Cut';font-weight:400;font-size:19px;line-height:1;text-transform:uppercase;color:#C2491B}

/* headline: two versions, swapped when the sun goes down */
h1{position:absolute;left:var(--pad);right:var(--pad);top:calc(102px + env(safe-area-inset-top));margin:0;
  font-family:'Iguana Cut';font-weight:400;font-size:var(--fs,22.4vw);line-height:.93;text-transform:uppercase;pointer-events:none}
h1 .v{display:block}
h1 .v span{display:block;width:max-content;transform-origin:0 60%;transform:rotate(var(--r,0deg));animation:paste .26s steps(3) both}
h1 .v span:nth-child(1){--r:-.9deg}
h1 .v span:nth-child(2){--r:.6deg;animation-delay:.07s}
h1 .v span:nth-child(3){--r:-.4deg;animation-delay:.14s}
h1 .v.n{display:none;color:var(--shell)}
.night h1 .v.d{display:none}
.night h1 .v.n{display:block}
@keyframes paste{from{transform:translateY(12px) rotate(calc(var(--r,0deg) - 2.4deg))}to{transform:rotate(var(--r,0deg))}}

.hint{position:absolute;left:0;top:0;background:var(--ink);color:var(--shell);font-family:'Iguana Cut';font-size:18px;line-height:1;
  padding:8px 10px 6px;text-transform:uppercase;pointer-events:none;white-space:nowrap;transform:rotate(-3deg);box-shadow:3px 4px 0 var(--cast)}
.hint i{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--sun);margin-left:8px;vertical-align:0}
.hint .pull{display:block}
.hint small{display:block;margin-top:0;font-family:'Libre Franklin',Arial,sans-serif;font-weight:700;font-size:12px;line-height:1.1;text-transform:none}
.hint.off .pull,.night .hint .pull{display:none}
.hint.off small,.night .hint small{margin-top:0}

/* tabs */
.tabs{position:absolute;left:0;right:0;bottom:0;height:calc(var(--tab) + env(safe-area-inset-bottom));
  padding:18px 10px calc(12px + env(safe-area-inset-bottom));background:var(--ink);display:flex;gap:8px;
  clip-path:polygon(0 7px,100% 0,100% 100%,0 100%);z-index:30}
.tabs a{flex:1 1 0;height:54px;display:grid;place-items:center;font-family:'Iguana Cut';font-size:24px;line-height:1;text-transform:uppercase;
  padding:5px 4px 0;text-decoration:none;color:var(--ink);background:var(--shell);white-space:nowrap;transition:translate .12s steps(2)}
.tabs a:nth-child(1){transform:rotate(-1deg)}
.tabs a:nth-child(2){background:var(--aqua);transform:rotate(.8deg)}
.tabs a:nth-child(3){background:var(--gold);transform:rotate(-.6deg)}
.tabs a:nth-child(4){background:var(--orange);flex:2.1 1 0;transform:rotate(.7deg)}
.night .tabs a:nth-child(4){background:var(--sun)}
.tabs a[aria-current=page]{translate:0 -7px}
.tabs a:focus-visible,.send:focus-visible,.say input:focus-visible,.step button:focus-visible,.sheet a:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
#sheet-menu a:focus-visible{outline-color:var(--ink)}

/* sheets: one per tab. They slide over the scene and leave the top strip of sky and the two tags in view. */
.sheet{position:absolute;left:0;right:0;top:var(--sheet-top,calc(var(--top) + env(safe-area-inset-top)));
  bottom:calc(var(--tab) + env(safe-area-inset-bottom) - 8px);padding:34px var(--pad) 30px;overflow:auto;-webkit-overflow-scrolling:touch;scroll-padding-bottom:28px;
  transform:translateY(104%);visibility:hidden;transition:transform .28s var(--e),visibility 0s .28s;
  clip-path:polygon(0 13px,100% 0,100% 100%,0 100%);z-index:20}
.sheet.on{transform:none;visibility:visible;transition:transform .28s var(--e),visibility 0s 0s}
.sheet h2{margin:0 0 20px;font-family:'Iguana Cut';font-weight:400;text-transform:uppercase;line-height:.94;font-size:clamp(50px,16.4vw,84px)}
.sheet h2:focus{outline:none}
.sheet h3{margin:22px 0 8px;font-family:'Libre Franklin',Arial,sans-serif;font-weight:700;font-size:15px;line-height:1.2}
.sheet p{margin:0 0 16px;font-size:16px;line-height:1.45;font-weight:500}
.todo-box{border:2px dashed currentColor;padding:12px 14px;font-size:15px;line-height:1.38;font-weight:500;margin:0 0 12px}
.todo-box b{font-weight:700}
.sheet .line{font-family:'Iguana Cut';font-weight:400;font-size:clamp(34px,10.4vw,46px);line-height:1.04;text-transform:uppercase;margin:26px 0 0}
.eats{list-style:none;margin:0 0 6px;padding:0;font-family:'Iguana Cut';font-size:clamp(30px,9.4vw,42px);line-height:1.06;text-transform:uppercase}
.eats li{padding:5px 0 3px;border-bottom:3px solid var(--ink)}
.eats li:first-child{border-top:3px solid var(--ink)}

#sheet-film{background:var(--plum);color:var(--shell)}
.slot{aspect-ratio:16/9;border:3px dashed var(--shell);background:#7F245F;display:grid;place-items:center;text-align:center;padding:14px}
.slot div{font-size:15px;line-height:1.35;font-weight:500;max-width:15em}
.slot i{display:block;width:0;height:0;margin:0 auto 12px;border-top:19px solid transparent;border-bottom:19px solid transparent;border-left:31px solid var(--sun)}
.reel{display:block;width:100%;aspect-ratio:16/9;background:#1A0B14;border:3px solid var(--shell)}
#sheet-menu{background:var(--gold);color:var(--ink)}
#sheet-book{background:var(--night);color:var(--shell)}

/* the booking sentence */
.say{font-family:'Iguana Cut';font-size:31px;line-height:1.78;text-transform:uppercase;margin:0 0 22px}
.say input,.step{display:inline-flex;vertical-align:middle;height:46px;background:var(--sun);color:var(--ink);border:0;
  font-family:'Iguana Cut';font-size:26px;text-transform:uppercase;padding:3px 10px 0;margin:0 2px}
.say input[type=text]{width:7.6em}
.say input::placeholder{color:rgba(45,18,13,.55);opacity:1}
.when{position:relative;display:inline-block;vertical-align:middle;margin:0 2px}
.when input{margin:0;min-width:7.2em;text-align:left}
.when input::-webkit-date-and-time-value{text-align:left}
.when em{position:absolute;left:10px;top:0;height:46px;display:none;align-items:center;padding-top:3px;font-style:normal;font-size:26px;line-height:1;color:rgba(45,18,13,.55);pointer-events:none}
.when.empty em{display:flex}
.when.empty input{color:transparent}
.when.empty input:focus{color:var(--ink)}
.when.empty:focus-within em{display:none}
.step{padding:0;align-items:stretch}
.step button{width:46px;border:0;background:var(--orange);color:var(--ink);font-family:'Iguana Cut';font-size:30px;line-height:1;cursor:pointer;padding:3px 0 0}
.step button:disabled{background:#B9A27A;cursor:default}
.step output{min-width:2.5em;display:grid;place-items:center;padding:3px 6px 0}
.send{display:block;height:68px;background:var(--orange);color:var(--ink);font-family:'Iguana Cut';font-size:37px;line-height:74px;
  text-transform:uppercase;text-align:center;text-decoration:none;box-shadow:6px 6px 0 var(--shell);margin:0 6px 26px 0}
.send:active{translate:3px 3px;box-shadow:3px 3px 0 var(--shell)}
/* two ways to send: a text, or the form that emails it */
.ways{display:flex;gap:14px;align-items:stretch;margin:0 6px 26px 0}
.ways .send{flex:1 1 0;margin:0;padding:0;border:0;cursor:pointer;font-size:clamp(23px,6.9vw,31px)}
.ways .send:only-child{font-size:37px}
#mail{background:var(--sun)}
.send[disabled]{background:#B9A27A;box-shadow:6px 6px 0 #8C8478;cursor:default}
.back{flex:0 0 auto;background:none;border:3px solid var(--shell);color:var(--shell);font-family:'Iguana Cut';font-size:24px;line-height:1;
  text-transform:uppercase;padding:4px 16px 0;min-height:48px;cursor:pointer}
.back:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.sign .say{margin-bottom:18px}
.sign .say input[type=text]{width:7.4em}
.nb{white-space:nowrap}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0}
.done:focus{outline:none}
.sheet .done .line{margin:0 0 10px;font-size:clamp(50px,16.4vw,84px)}
.done .ways{margin-top:18px}
.sheet .oops{background:var(--coral);color:var(--ink);font-weight:700;font-size:15px;line-height:1.35;padding:10px 12px;margin:0 6px 18px 0}
[hidden]{display:none !important}
.alt{font-size:16px;line-height:1.5;font-weight:500;margin:0 0 16px}
.alt a{font-weight:700;white-space:nowrap}

/* wide screens, and a phone held sideways: the scene fills the window and the sheets come in from the right */
@media (min-width:900px) and (min-aspect-ratio:1/1), (orientation:landscape) and (max-height:540px){
  :root{--pad:clamp(16px,3.3vw,48px)}
  .tag.logo{left:var(--pad);top:clamp(8px,3.3vh,30px);width:clamp(62px,16.6vh,150px);padding:clamp(5px,1.2vh,11px) clamp(6px,1.3vh,12px)}
  .tag.what{right:var(--pad);top:clamp(12px,3.8vh,34px)}
  h1{right:auto;top:clamp(78px,17.4vh,156px)}
  .tabs{left:var(--pad);right:auto;bottom:clamp(8px,3.8vh,34px);width:min(42vw,580px);height:auto;padding:16px 12px 12px}
  .tabs a{height:clamp(40px,6.4vh,58px)}
  .sheet{left:auto;right:0;top:0;bottom:0;width:min(540px,42vw);padding:clamp(70px,13.4vh,120px) clamp(20px,3vw,44px) 40px;transform:translateX(104%);
    clip-path:polygon(16px 0,100% 0,100% 100%,0 100%)}
  .sheet h2{font-size:clamp(46px,9.4vh,84px)}
}
/* the narrowest phones */
@media (max-width:350px){
  .tag.logo{left:10px;width:84px;padding:7px 8px 6px}
  .tag.what{right:8px;font-size:17px;padding:7px 8px 6px}
  .tag.what small.todo{font-size:11px;padding:2px 4px}
  .tabs{gap:6px;padding-left:8px;padding-right:8px}
  .tabs a{font-size:20px}
}
/* a phone browser with its bars up: the booking button has to show without scrolling the sheet */
@media (orientation:portrait) and (max-height:720px){
  .sheet{padding-top:28px}
  .sheet h2{font-size:clamp(38px,11.6vw,48px);margin-bottom:14px}
  .say{font-size:28px;line-height:1.62;margin-bottom:16px}
  .say input,.step{height:42px;font-size:24px}
  .when em{height:42px;font-size:24px}
  .send{height:60px;line-height:66px;font-size:33px;margin-bottom:20px}
  .ways{margin-bottom:20px}
  .ways .send:only-child{font-size:33px}
  .sign .say{margin-bottom:14px}
}
@media (orientation:portrait) and (max-height:600px){
  .sheet{padding-top:24px}
  .sheet h2{font-size:36px;margin-bottom:10px}
  .say{font-size:25px;line-height:1.66;margin-bottom:14px}
  .say input,.step{height:40px;font-size:22px}
  .when em{height:40px;font-size:22px}
  .send{height:56px;line-height:62px;font-size:31px}
}
@media (orientation:landscape) and (max-height:540px){
  .sheet{padding-top:92px}
  .tabs a{font-size:19px}
  .tabs a[aria-current=page]{translate:0 -5px}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  h1 .v span{animation:none}
  .sheet,.sheet.on{transition:none}
}