:root {
  --ink: #faf7f4;
  --panel: #fffdfb;
  --line: #e7ddd5;
  --line2: #d8c9bd;
  --white: #2e2326;
  --muted: #6b5e5a;
  --muted2: #94877f;
  --teal: #a33f1f;
  --tdim: rgba(163, 63, 31, .065);
  --tline: rgba(163, 63, 31, .4);
  --amber: #8a5a00;
  --red: #a32136;
  --display: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", -apple-system, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

body { background: var(--ink); }
.nav { background: rgba(250, 247, 244, .94); }
.navin { min-height: 76px; }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-icon { display: block; height: 32px; width: auto; }
.nav-name { color: var(--white); font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .04em; }
.back { font-size: .75rem; }
main { padding-top: 64px; padding-bottom: 48px; }
.kicker { font-family: var(--mono); font-size: .7rem; font-weight: 400; letter-spacing: .12em; }
.kicker:before { width: 40px; }
h1 { font-size: clamp(2.7rem, 5vw, 4rem); font-weight: 500; line-height: 1.12; letter-spacing: -.025em; }
h1 em { color: var(--teal); font-weight: 400; }
.intro p { max-width: 620px; font-size: .95rem; line-height: 1.85; }
.booker { margin-top: 36px; }
.panel { border-radius: 4px; box-shadow: 0 12px 40px rgba(46, 35, 38, .025); }
.picker-settings { padding-top: 22px; padding-bottom: 22px; }
.segmented legend { font-family: var(--mono); font-size: .65rem; font-weight: 400; letter-spacing: .1em; }
.segmented span { border-radius: 2px; padding: 0 18px; font-size: .8rem; }
.segmented input:checked+span { border-color: var(--teal); color: var(--teal); }
.meeting-type { font-size: .75rem; }
.section-label { font-family: var(--sans); font-size: .9rem; font-weight: 700; }
.step { border-color: var(--line2); font-family: var(--mono); }
.section-help { font-size: .75rem; }
.calendar-toolbar h3 { font-size: 1.55rem; font-weight: 500; }
.month-arrow, .today { border-radius: 2px; }
.today { font-family: var(--mono); font-size: .65rem; }
.weekdays { font-family: var(--mono); font-size: .65rem; }
.day { border-radius: 3px; font-size: .85rem; }
.day[aria-pressed=true], .day[aria-pressed=true]:hover { color: #fffaf5; }
.times-pane { background: #f7f1eb; }
.selected-date { font-size: 1.6rem; font-weight: 500; line-height: 1.25; }
.time-meta { margin-top: 8px; font-size: .75rem; }
.time { border-radius: 3px; background: var(--panel); font-size: .8rem; }
.time[aria-pressed=true] { color: #fffaf5; }
.timezone-label { font-size: .7rem; }
.timezone .tzline { font-size: .75rem; }
.linkish { text-underline-offset: 3px; }
.formpanel h2.section-label { font-family: var(--sans); font-size: 1rem; }
.summary { font-size: .9rem; font-weight: 500; }
.field label { font-size: .8rem; }
input, select, textarea { background: #fffdfb; border-radius: 3px; }
.button { border-radius: 0; color: #fffaf5; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.button:hover { background: #873318; }
.confirm h2 { font-size: 2rem; font-weight: 500; }
.booking-footer { padding-bottom: 36px; color: var(--muted); font-family: var(--mono); font-size: .6rem; letter-spacing: .04em; }

@media (max-width: 620px) {
  main { padding-top: 40px; }
  .navin { min-height: 66px; gap: 12px; }
  .nav-brand { gap: 8px; }
  .nav-icon { height: 28px; }
  .nav-name { font-size: .65rem; }
  .back { font-size: .65rem; }
  .intro p { font-size: .85rem; }
  .calendar-toolbar h3 { font-size: 1.4rem; }
  .segmented span { padding: 0 16px; }
  .booking-footer { font-size: .55rem; }
}

@media (max-width: 360px) {
  .back { max-width: 135px; text-align: right; }
  .nav-name { font-size: .6rem; }
  .timezone .tzline { font-size: .7rem; }
}