/* =====================================================================
   The site bar and the large foot, on their own.

   For the pages that keep their own look underneath - the store, the
   account pages, the legal pages, a blog post - so they wear the same
   chrome as the rest of the site without assets/product.css restyling
   everything inside them. Every value is scoped to these elements, so
   nothing here can leak into a page's own variables.
   ===================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.gnav,.gnav-rooms,.sfoot{--gut:clamp(16px,4vw,48px);--t:#f5f5f7;--m:#a1a1a6;--d:#6e6e73;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:border-box}
.gnav *,.gnav-rooms *,.sfoot *{box-sizing:border-box}

.gnav{position:relative;z-index:60;display:flex;align-items:center;gap:22px;height:48px;padding:0 var(--gut);
  background:#000;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px;line-height:1}
.gnav .logo{display:flex;align-items:center;text-decoration:none}
.gnav .logo img{height:30px;width:auto;display:block}
.gnav nav{display:flex;gap:22px;margin-left:12px}
.gnav nav a{text-decoration:none;color:#bdbdc2}
.gnav nav a:hover,.gnav nav a[aria-current]{color:#fff}
.gnav .social{display:flex;gap:12px;margin-left:16px}
.gnav .social a{color:#bdbdc2;display:inline-flex}
.gnav .social svg{width:16px;height:16px;fill:currentColor}
.gnav .sa-slot{margin-left:auto}
.gnav .sa-in{color:#bdbdc2;text-decoration:none}
.gnav .sa{--sa-fg:var(--t);--sa-bg:#141416;--sa-line:rgba(255,255,255,.12);--sa-muted:var(--m)}
@media (max-width:980px){ .gnav .social{display:none} }
@media (max-width:760px){ .gnav nav{display:none} }
.gnav-rooms{display:none}
@media (max-width:760px){
  .gnav-rooms{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;padding:10px var(--gut);
    background:#000;border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px}
  .gnav-rooms::-webkit-scrollbar{display:none}
  .gnav-rooms a{color:#bdbdc2;text-decoration:none;white-space:nowrap}
  .gnav-rooms a[aria-current]{color:#fff}
}

.sfoot{background:#0b0b0c;border-top:1px solid rgba(255,255,255,.08);padding:clamp(48px,8vh,80px) var(--gut) 36px;font-size:14px;color:var(--m);line-height:1.5}
.sfoot .cols{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.sfoot h4{font-size:13px;font-weight:600;color:var(--t);margin:0 0 14px;font-family:inherit;letter-spacing:0;text-transform:none}
.sfoot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sfoot a{color:var(--m);text-decoration:none}
.sfoot a:hover{color:#fff}
.sfoot .sf-brand img{height:40px;width:auto;margin:0 0 14px;display:block}
.sfoot .sf-brand p{margin:0 0 6px;max-width:30ch}
.sfoot .social{display:flex;gap:14px;margin-top:14px}
.sfoot .social svg{width:18px;height:18px;fill:currentColor}
.sfoot .base{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12.5px;color:var(--d)}
.sfoot .base span:last-child{margin-left:auto}
@media (max-width:900px){ .sfoot .cols{grid-template-columns:1fr 1fr} .sfoot .sf-brand{grid-column:1/-1} }
/* the foot keeps its own type whatever the page underneath does */
.sfoot,.sfoot *{text-transform:none;letter-spacing:normal;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.sfoot .sf-brand{display:block;white-space:normal}
.sfoot p{font-size:14px;line-height:1.55}