/* Unrote - site styles, part 1 of 3: the typeface, the tokens the booking and check components read, type,
   links, buttons, the header and its phone menu. Every page links base.css, then components.css and responsive.css,
   then its own shared/css/<page>.css if it has one: the cascade is that order. A change here: bump ?v= of this file
   in every page (nginx caches /shared/ for a year). */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/shared/fonts/inter-tight-latin-wght-normal.woff2) format('woff2');
}
:root {
  --bg: #e8e8e3;
  --bg-elev: #ffffff;
  --fg: #181715;
  --fg-muted: #55544f;
  --line: #c8c8c2;
  --line-strong: #181715;
  --accent: #2456d6;
  --accent-fg: #ffffff;
  --soft: #dcdcd6;
  --band-bg: #181715;
  --band-elev: #2b2a26;
  --band-fg: #e8e8e3;
  --band-muted: #b8bcc6;
  --band-line: #3a3936;
  --band-line-strong: #55544f;
  --band-accent: #8fb0ff;
  --band-accent-fg: #181715;
  --radius: 0;
  --font: 'Inter Tight',system-ui,sans-serif;
  --serif: 'Inter Tight',system-ui,sans-serif;
  --mono: 'Inter Tight',system-ui,sans-serif;
}
body {
  margin: 0;
  background: #dcdcd6;
  font-family: 'Inter Tight',system-ui,sans-serif;
  color: #181715;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
  text-underline-offset: .18em;
  text-decoration-thickness: 1.5px;
}
a:hover {
  color: inherit;
}
::selection {
  background: #2456d6;
  color: #ffffff;
}
:focus-visible {
  outline: 3px solid #2456d6;
  outline-offset: 3px;
}
.pg {
  background: #e8e8e3;
  color: #181715;
  font-family: 'Inter Tight',system-ui,sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.w {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
.w {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.w .w {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.08;
}
h1 {
  font-size: clamp(36px,4vw,56px);
  max-width: 17ch;
}
h2 {
  font-size: clamp(26px,2.4vw,32px);
  max-width: 20ch;
}
h3 {
  font-size: 20px;
  letter-spacing: -.01em;
}
.lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: #181715;
  max-width: 52ch;
}
p {
  margin: 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background: #2456d6;
  color: #ffffff;
  font: 600 16px/1 'Inter Tight',sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 200ms ease,transform 160ms cubic-bezier(.23,1,.32,1);
}
.btn:active {
  transform: scale(.97);
}
.btn2 {
  background: #181715;
  color: #e8e8e3;
}
.btn3, .btn-secondary {
  background: #ffffff;
  color: #181715;
}
.btn:disabled {
  opacity: .6;
  cursor: default;
}
.btn.sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 15px;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-size: 16px;
}
.nav .links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
}
.nav .links a {
  text-decoration: none;
}
.nav .links a[aria-current] {
  font-weight: 600;
}
.menu {
  display: none;
  position: relative;
}
.menu summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #181715;
  border-bottom: 2px solid #181715;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 200ms cubic-bezier(.23,1,.32,1);
}
.menu[open] summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}
.menu .mlist {
  position: absolute;
  right: 0;
  top: 100%;
  background: #ffffff;
  padding: 8px 20px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  z-index: 5;
}
.menu .mlist a {
  padding: 10px 0;
  border-top: 1px solid #dcdcd6;
  text-decoration: none;
}
.menu .mlist a:first-child {
  border-top: 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
}
.logo svg {
  width: 24px;
  height: 24px;
  color: #2456d6;
}