.booking-page {
  min-height:100vh;
  background:var(--paper);
  color:var(--ink)
}

.booking-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:25px var(--gutter);
  border-bottom:1px solid var(--line)
}

.booking-back {
  font-size:13px;
  border-bottom:1px solid;
  padding:8px 0
}

.booking-back span {
  margin-right:12px
}

.booking-main {
  padding:70px var(--gutter) 100px
}

.booking-intro {
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:6vw;
  max-width:1550px;
  margin:auto;
  align-items:start
}

.booking-copy {
  padding-top:20px
}

.booking-copy h1 {
  font-size:clamp(44px,5vw,80px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.055em;
  margin:0 0 30px
}

.booking-lede {
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:520px
}

.booking-details {
  margin-top:40px;
  border-top:1px solid var(--line)
}

.booking-details>div {
  display:grid;
  grid-template-columns:28px 1fr;
  align-items:center;
  gap:18px;
  border-bottom:1px solid var(--line);
  padding:18px 0
}

.booking-details>div>span {
  font-size:18px
}

.booking-details p {
  margin:0
}

.booking-details small {
  display:block;
  font:9px 'DM Mono',monospace;
  color:var(--muted);
  margin-bottom:7px
}

.booking-details strong {
  font-size:15px;
  font-weight:400
}

.email-option {
  padding-top:30px;
  margin-top:15px
}

.email-option p {
  margin:0 0 15px
}

.email-option small {
  display:block;
  font:9px 'DM Mono',monospace;
  color:var(--muted);
  margin-bottom:10px
}

.email-option strong {
  font-size:16px;
  font-weight:400
}

.email-option .button {
  font-size:14px;
  gap:60px
}

.calendar-card {
  background:#fff;
  border:1px solid var(--line);
  min-width:0
}

.calendar-heading {
  padding:26px 28px;
  border-bottom:1px solid var(--line)
}

.calendar-heading>div {
  display:flex;
  align-items:baseline;
  gap:18px
}

.calendar-heading span {
  font:10px 'DM Mono',monospace;
  color:var(--muted)
}

.calendar-heading h2 {
  font-size:21px;
  font-weight:400;
  letter-spacing:-.03em;
  margin:0
}

.calendar-heading p {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 0
}

.calendar-frame,.calendar-frame iframe {
  min-height:680px;
  background:#fff
}

.calendar-frame iframe {
  display:block;
  border:0;
  width:100%
}

.calendar-note,.calendar-fallback {
  padding:20px 28px;
  margin:0;
  border-top:1px solid var(--line);
  font-size:12px;
  color:#62685c
}

.calendar-note {
  display:flex;
  gap:10px
}

.calendar-fallback a {
  display:block;
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--ink);
  margin-top:7px;
  line-height:1.6
}

.booking-footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--line);
  padding:25px var(--gutter);
  font:9px/1.6 'DM Mono',monospace;
  color:var(--muted)
}

.booking-footer a {
  color:var(--ink)
}

@media(max-width:1000px) {
  .booking-intro {
    grid-template-columns:1fr;
    gap:45px
  }
  .booking-copy {
    max-width:760px;
    padding-top:0
  }
  .booking-copy h1 {
    max-width:650px
  }
  .booking-details {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
  }
  .booking-details>div {
    gap:5px
  }
  .calendar-card {
    width:100%;
    max-width:900px;
    justify-self:center
  }
  .email-option {
    margin-top:10px
  }
  .booking-footer {
    flex-wrap:wrap
  }
  .booking-main {
    padding-top:50px
  }
}

@media(max-width:600px) {
  .booking-header {
    padding-top:20px;
    padding-bottom:20px;
    gap:10px
  }
  .booking-back {
    font-size:11px
  }
  .booking-back span {
    margin-right:4px
  }
  .booking-main {
    padding-top:45px;
    padding-bottom:60px
  }
  .booking-copy h1 {
    font-size:46px
  }
  .booking-lede {
    font-size:14px
  }
  .booking-details {
    display:block;
    margin-top:30px
  }
  .booking-details>div {
    gap:15px
  }
  .calendar-card {
    width:calc(100% + 2 * var(--gutter));
    margin-inline:calc(-1 * var(--gutter));
    border-left:0;
    border-right:0
  }
  .calendar-heading {
    padding:24px
  }
  .calendar-heading h2 {
    font-size:20px
  }
  .calendar-frame,.calendar-frame iframe {
    height:720px;
    min-height:720px
  }
  .calendar-note,.calendar-fallback {
    padding:20px 24px
  }
  .booking-footer {
    flex-direction:column;
    font-size:8px;
    gap:15px
  }
}