@charset "UTF-8";
@font-face{
  font-family:"gooey";
  src:url("./fonts/gooey.woff2") format("woff2"),
      url("./fonts/gooey.woff") format("woff"),
     url("./fonts/gooey.ttf") format("truetype");
}
@font-face{
  font-family:"lineup";
  src:url("./fonts/lineup.woff2") format("woff2"),
      url("./fonts/lineup.woff") format("woff"),
     url("./fonts/lineup.ttf") format("truetype");
}
@font-face{
  font-family:"grounder";
  src:url("./fonts/grounder.woff2") format("woff2"),
      url("./fonts/grounder.woff") format("woff"),
     url("./fonts/grounder.ttf") format("truetype");
}
@font-face{
  font-family:"shade";
  src:url("./fonts/shade.woff2") format("woff2"),
      url("./fonts/shade.woff") format("woff"),
     url("./fonts/shade.ttf") format("truetype");
}
@font-face{
  font-family:"tisa";
  src:url("./fonts/tisa.woff2") format("woff2"),
      url("./fonts/tisa.woff") format("woff"),
     url("./fonts/tisa.ttf") format("truetype");
}

:root{
  --blue:#081B39;
  --paper:#f6f6f4;
  --ink:#12243b;
  --Tblue:#4d6995;
  font-size: 10px;
  font-family:'gooey', sans-serif;
  color: var(--paper);
  
  --t-shell: 1000ms;
  --t-ui: 1200ms;
  --e-shell: ease-out;
  --e-ui: ease-in;
  --t-fast: 400ms;
  --t: 800ms;
  --t-slow: 1400ms;
  
  --e: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --shadow: 0 4px 6px rgba(0,0,0,.5);
  --shadow-heavy: rgba(8,27,57,0.85);
  
  --radius-SM: 12px;
  --radius-LG: 26px;

  --gW: 5vw; 
  --ggW: 10vw;
  --gH:5vh;
  --ggH:10vh;
  --page-max: 100vw;
  --min-W: 360px;
  --min-H: 360px;
   
  --hero-W: 100vw;
  --hero-H: 60vh; 
  --logo-W: clamp(125px,24vw,250px);
  --logo-top: calc(var(--logo-W) / 4);
  --logo-right: calc(var(--logo-W) / 4);
  --copy-top: calc(var(--hero-H) / 3);
  --copy-left: var(--gW);
  --copy-right: var(--gW);
  --copy-bottom: 3vh;

  --carousel-H: 80vh;
  --carousel-top: 50vh;
  --carousel-comp-top: 20vh;
  
  --nav-W: 24vw; 
  --nav-H: 18vw; 
  --nav-top: 10vh;
  --nav-logo-W: calc(0.8 * var(--nav-W)); 
  
  --reserve-bottom: var(--gH);
  --footer-padding: 0.5rem;
  --footer-bottom: 0.5rem;
  --sX: 1; 
  --sY: 1; 
  --modal-W: 550px;
  --modal-H: 760px;
}

*{ box-sizing:border-box; }
html,body{ 
  height:100%; 
  min-width: var(--min-W);
  min-height: var(--min-H);
}

body{
  height:100%;
  background: var(--blue);
  color: var(--ink);
  font-family: "gooey", sans-serif;
  margin:0;
}

.hero{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  pointer-events: auto;
  width: var(--hero-W);
  height: var(--hero-H);
}

.shell{
  position: relative;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
  will-change: transform;
  transition: transform var(--t-shell) var(--e-shell);
}

.inner{
  max-width: var(--page-max);
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper);
  overflow: hidden;
  pointer-events: auto;
  margin-left: auto;
  margin-right: auto;
  transition:
    border-radius var(--t-ui) var(--e-ui),
    box-shadow var(--t-ui) var(--e-ui);
}

.copy{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--copy-top);
  padding-left: var(--copy-left);
  padding-right: var(--copy-right);
  padding-bottom: var(--copy-bottom); 
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform var(--t-fast) ease, opacity var(--t-fast) ease;
}

h1 {
  margin: 0 0 2.5rem;              
  font-family: 'grounder', sans-serif;
  font-size: 3.5rem;                 
  line-height: 1.25;                  
  font-weight: 500;
  color: var(--blue);
  letter-spacing: 0.25rem;
  text-shadow: 1px 1px 2px var(--Tblue);
  word-break: break-word;
  overflow-wrap: break-word;
}
h2 {
  margin: 0 0 1.8rem;
  font-family: 'lineup', sans-serif;
  font-size: 4rem;                    
  line-height: 1.3;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline dotted;
  letter-spacing: 0.35rem;
  text-shadow: 0.5px 1px 1px var(--Tblue);
  word-break: break-word;
  overflow-wrap: break-word;
}
h3 {
  margin: 0 0 0.2rem;
  font-family: 'lineup', sans-serif;
  font-size: 2.5rem;                   
  line-height: 1.1;
  font-weight: 700;
  color: var(--Tblue);
  letter-spacing: 0.25rem;
  text-shadow: 1px 1.5px 1.5px var(--blue);
  word-break: break-word;
  overflow-wrap: break-word;
}
h1{
  margin: 0 0 2.0rem;
  font-family: 'grounder', sans-serif;
  font-size: 3.2rem;
  line-height: 1.15;
  font-weight: 550;
  color: var(--blue);
  letter-spacing: 0.18rem;
  text-shadow: 1px 1px 2px rgba(77,105,149,.55);
  overflow-wrap: anywhere;
}
h2{
  margin: 0 0 1.4rem;
  font-family: 'lineup', sans-serif;
  font-size: 3.6rem;
  line-height: 1.15;
  font-weight: 650;
  color: var(--blue);
  letter-spacing: 0.28rem;
  text-shadow: 1px 1px 2px rgba(77,105,149,.55);
  text-decoration: underline dotted;
  text-underline-offset: 0.35em;
  overflow-wrap: anywhere;
}
h3{
  margin: 0 0 1.2rem;
  font-family: 'lineup', sans-serif;
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 650;
  color: var(--Tblue);
  letter-spacing: 0.18rem;
  text-shadow: 1px 1px 1px rgba(8,27,57,.55);
  overflow-wrap: anywhere;
}
p1, .p1{
  display: block;
  margin: 0 0 1.2rem;
  font-family: 'gooey', sans-serif;
  font-size: 1.9rem;
  line-height: 1.45;
  font-weight: 420;
  color: var(--blue);
  letter-spacing: 0.03rem;
  text-shadow: 0.5px 0.5px 1px rgba(77,105,149,.50);
  opacity: .92;
  overflow-wrap: anywhere;
}
p2, .p2{
  display: block;
  margin: 0 0 1.1rem;
  font-family: 'grounder', sans-serif;
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 380;
  color: var(--Tblue);
  letter-spacing: 0.04rem;
  text-shadow: 0.5px 0.5px 1px rgba(8,27,57,.45);
  overflow-wrap: anywhere;
}
p3, .p3{
  display: block;
  margin: 0 0 1.0rem;
  font-family: 'lineup', sans-serif;
  font-size: 1.8rem;
  line-height: 1.35;
  font-weight: 850;
  font-style: italic;
  color: var(--blue);
  letter-spacing: 0.04rem;
  text-shadow: 0.5px 0.5px 1px rgba(77,105,149,.55);
  overflow-wrap: anywhere;
}
p4, .p4{
  display: block;
  margin: 0 0 1.0rem;
  font-family: 'gooey', sans-serif;
  font-size: 1.55rem;
  line-height: 1.35;
  font-weight: 350;
  font-style: italic;
  color: var(--Tblue);
  letter-spacing: 0.04rem;
  text-shadow: 0.5px 0.5px 1px rgba(8,27,57,.45);
  overflow-wrap: anywhere;
}
p5, .p5{
  display: block;
  margin: 0 0 1.0rem;
  font-family: 'gooey', sans-serif;
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 350;
  font-style: italic;
  color: var(--Tblue);
  letter-spacing: 0.03rem;
  text-shadow: 0.5px 0.5px 1px rgba(8,27,57,.45);
  overflow-wrap: anywhere;
}
.p3-inline, p3.p3-inline{
  display: inline;
  margin: 0;
  font-size: 1em;    
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: 850;
  font-style: italic;
  text-transform: none;
  text-shadow: inherit;
}
p1:empty, p2:empty, p3:empty, p4:empty, p5:empty,
.p1:empty, .p2:empty, .p3:empty, .p4:empty, .p5:empty{
  display:none;
}
.indent{
  margin-left: 3rem; 
}

.texture-overlay{
  background: url("/img/soupdotstrans.png");
  background-size: 40%;
  position:absolute;
  inset:0;
  opacity:0.2;
  pointer-events:none;
  z-index: 1;
}

.threshold{
  position: absolute;
  z-index: 99;
  width: 100%;
  box-shadow: var(--shadow-heavy);
  padding: 0.5rem;
  margin-top: -0.5rem;
  opacity:0.85;
  background-color: var(--Tblue);
}
body.is-compressed .threshold{ 
opacity: 0; 
}

.logo{
  position:absolute;
  width: var(--logo-W);
  height: auto;
  top: var(--logo-top);
  right: var(--logo-right);
  z-index: 6;
  pointer-events: auto;
  cursor:pointer;
  display:inline-flex;
  transition:
    transform var(--t-ui) var(--e-ui),
    width var(--t-ui) var(--e-ui),
    top var(--t-ui) var(--e-ui),
    right var(--t-ui) var(--e-ui);
}

.logo img{
  display:block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

html.is-compressed{
  height: 100%;
  overflow: hidden;
}

body.is-compressed{
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: calc(var(--gH));
  padding-bottom: calc(var(--gH) + env(safe-area-inset-bottom, 0px));
  --sX: calc(var(--nav-W) / var(--hero-W));
  --sY: calc(var(--nav-H) / var(--hero-H));
    overscroll-behavior-y: none;
}

body.is-compressed .hero{
  position: absolute; 
  top: var(--nav-top); 
  left: 0; 
  right: 0; 
  height: var(--hero-H); 
  width: 100%;
}

body.is-compressed .shell{
  width: 100%;
  height: 100%;
  transform-origin: 50% 0%;
  transform: scale(var(--sX), var(--sY));
}

body.is-compressed .inner{
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: 100%;
  border-radius: calc(var(--radius-SM) / var(--sX)) / calc(var(--radius-SM) / var(--sY));
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 8px 16px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

body.is-compressed .logo{
  width: var(--nav-logo-W);
  height: auto;
  left: 50%;
  top: 50%;
  right: auto;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(calc(1 / var(--sX)), calc(1 / var(--sY)));
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 6;
}

body.is-compressed .copy{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  content-visibility: hidden;
  transition: opacity var(--t-fast) ease,visibility var(--t-fast) linear var(--t-fast);
}

.hero-bottom{
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
  z-index: 100;
  pointer-events: auto;
  transition: top var(--t-slow) var(--e-shell);
}

.panel{
  position:absolute;
  top: 0;
  left: var(--gW);
  transform: translate(0%, -50%);
  flex: 0 0 auto;
  min-width: fit-content;
  max-width: var(--page-max);      
  height: auto;
  display:flex;
  align-items:center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 1.2rem;
  padding: 0.6rem;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-LG);
  background: var(--shadow-heavy);
  backdrop-filter: blur(1.4rem);
  -webkit-backdrop-filter: blur(1.4rem);
  box-shadow: var(--shadow);
  pointer-events: auto;
  z-index: 10;
  transition: transform var(--t-ui) var(--e-ui), left var(--t-ui) var(--e-ui);
}

.btn{ font: inherit; }

.buttons{
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.85);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 10px;
  width: auto;
  white-space: nowrap;
  font-weight: 850;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.buttons:hover{
  transform: translateY(-2px);
  padding: 6px 10px;
  background: rgba(255,255,255,.85);
}
body.is-compressed .hero-bottom{
  top: calc(var(--hero-H) * var(--sY)); 
}
body.is-compressed .panel{
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
}

.carousel{
  position: relative;
  width: 100%;
  height: var(--carousel-H);
  overflow: hidden;
  z-index: 1;
  margin-top: var(--carousel-top);
  transition: margin-top var(--t) ease;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
}
body.is-compressed .carousel{
  margin-top: var(--carousel-comp-top);
}

.slides{ position:absolute; inset:0; }
.slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity var(--t) ease;
  background-size: cover;
  background-position: center;
}
.slide.s1{ background-image: url('/img/photo1.jpg'); }
.slide.s2{ background-image: url('/img/photo2.jpg'); }
.slide.s3{ background-image: url('/img/photo3.jpg'); }
.slide.s4{ background-image: url('/img/photo4.jpg'); }
.slide.s5{ background-image: url('/img/photo5.jpg'); }
.slide.s6{ background-image: url('/img/photo6.jpg'); }
.slide.is-active{ opacity:1; }
.slide:first-child{ opacity:1; }

.reserve{
  position: absolute;
  left: var(--ggW);
  bottom: calc(var(--footer-padding) + var(--reserve-bottom));
  bottom: calc(var(--footer-padding) + var(--reserve-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  z-index: 9999;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--shadow-heavy);
  color: var(--paper);
  font-weight: 900;
  letter-spacing: .5rem;
  font-size: 1.4rem;
  box-shadow:
    0 0 20px 4px rgba(255,255,255,.8),
    0 0 26px rgba(255,255,255,.42),
    0 16px 42px rgba(0,0,0,.30);
  cursor:pointer;
}
.reserve:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 20px 4px rgba(255,255,255,.55),
    0 0 26px rgba(255,255,255,.32),
    0 16px 42px rgba(0,0,0,.28);
}


footer{
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;
 /* z-index: 25;
  transform: translateY(100%); */
  opacity: 1;
  pointer-events: auto;
  transition: transform var(--t-ui) var(--e-ui), opacity var(--t-ui) var(--e-ui);
  background: var(--blue);
  overflow: hidden;
  padding: 0;
  display: block;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  font-weight: 600;
  line-height: 1;
}
/*
body.is-compressed footer{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
*/
.footer-inner{
  position: relative;
  z-index: 26;
  width: 100%;
  margin: 0;
  margin-left: var(--ggW);
  padding-top: var(--footer-padding);
  padding-bottom: var(--footer-bottom);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: visible;
  column-gap: 12px;
  row-gap: 0;
}
.footer-link{
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor:pointer;
}
.footer-link:last-child{
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}
.footer-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 3px;
  border-radius: 6px;
}
.footer-link:hover{
  text-decoration: underline dotted;
  overflow: visible;
}

.modal-reserve{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--shadow-heavy);
  color: var(--paper);
  font-weight: 900;
  letter-spacing: .5rem;
  text-transform: uppercase;
  font-size: var(--reserve-font-size);
  box-shadow:
    0 0 20px 4px rgba(255,255,255,.35),
    0 0 26px rgba(255,255,255,.22),
    0 16px 42px rgba(0,0,0,.20);
  cursor: pointer;
}
.modal-reserve:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 20px 4px rgba(255,255,255,.55),
    0 0 26px rgba(255,255,255,.32),
    0 16px 42px rgba(0,0,0,.28);
}


.site-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index: 2000;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: 16px;
}
.site-modal[aria-hidden="false"]{
  display:flex;
  align-items:center;
  justify-content:center;
}
.site-modal .modal-content{
  position:relative;
  background:var(--paper);
  border-radius:18px;
  padding:18px;
  width: min(var(--modal-W), calc(100vw - var(--ggW)));
  max-width: var(--modal-W);
  height: min(var(--modal-H), calc(100vh - var(--ggH)));
  max-height: var(--modal-H); 
  overflow:auto;
  box-shadow: var(--shadow);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(8,27,57,.35) rgba(8,27,57,.08);
}
.site-modal .modal-content::-webkit-scrollbar{ width: 10px; }
.site-modal .modal-content::-webkit-scrollbar-track{
  background: rgba(8,27,57,.08);
  border-radius: 999px;
}
.site-modal .modal-content::-webkit-scrollbar-thumb{
  background: rgba(8,27,57,.35);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.6);
}
.site-modal .close{
  position:absolute;
  top:10px;
  right:12px;
  border:0;
  background:transparent;
  font-size:3rem;
  cursor:pointer;
  line-height: 1;
}

@media (max-width: 720px){
 :root{
    font-size: 9px;
    --gW: 4vw;
    --ggW: 8vw;
    --gH:  5dvh;
    --ggH: 10dvh;
    --logo-W: clamp(100px, 24vw, 125px);
    --nav-W: 70vw;
    --nav-H: 45vw;
    --reserve-bottom: var(--gH);
    --nav-top: 5dvh;
    --modal-W: 400px;
    --modal-H:500px;
    --carousel-H: 80dvh;
    --carousel-top: 50dvh;
    --carousel-comp-top: 20dvh;
    --footer-bottom: calc(var(--footer-padding) + env(safe-area-inset-bottom, 0px));
  }
  p4 {  margin-left: 0; }
  .slide.s1{ background-image: url('/img/photo9.jpg'); }
  .slide.s2{ background-image: url('/img/photo10.jpg'); }
  .slide.s3{ background-image: url('/img/photo11.jpg'); }
  .slide.s4{ background-image: url('/img/photo12.jpg'); }
  .slide.s5{ background-image: url('/img/photo13.jpg'); }
  .slide.s6{ background-image: url('/img/photo14.jpg'); }
}
/*
@media (min-width: 1920px) and (min-aspect-ratio: 5/4){
  :root{
    --font-size:11px;
    --page-max: 1400px;
    --gW: 32px;
    --ggW: 64px;
    --logo-W: 300px;
    --nav-W: 560px;
    --nav-H: 240px;
    --nav-top: 70px;
    --modal-W: 760px;
  }
}
*/