.booking-main { min-height: 72vh; }
.booking-main h1 {
  font: 400 clamp(3.2rem, 8vw, 6.5rem)/.98 var(--display);
  letter-spacing: -.07em;
}
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.booking-panel { padding: clamp(16px, 3vw, 32px); border: 1px solid var(--line); background: var(--paper); }
.booking-panel h2 { font-size: clamp(1.65rem, 3vw, 2.55rem); letter-spacing: -.055em; }
.booking-panel p, .booking-empty { line-height: 1.6; }
.calendar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.calendar-nav { gap: 8px; flex: none; }
.calendar-nav a { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--line); background: #fff; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, .7vw, 8px); text-align: center; }
.calendar-weekday { color: var(--muted); font-size: .69rem; font-weight: 650; padding-bottom: 8px; }
.calendar-day { position: relative; display: grid; place-items: center; min-height: clamp(35px, 5vw, 59px); border: 1px solid var(--line); background: #fff; font-size: .88rem; text-decoration: none; }
a.calendar-day:hover { border-color: var(--ink); }
.day-past { color: #666; background: #ececec; }
.day-open { font-weight: 750; border-color: #777; }
.calendar-day[aria-current] { color: #fff; background: var(--ink); border-color: var(--ink); }
.calendar-day[aria-current]:focus-visible { outline-color: var(--ink); }
.day-dot, .calendar-key i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.day-dot { position: absolute; bottom: 4px; }
.day-open .day-dot, .calendar-key .key-open { background: currentColor; }
.calendar-key { display: flex; gap: 8px 15px; flex-wrap: wrap; margin-top: 18px; font-size: .74rem; }
.calendar-key span { display: inline-flex; gap: 5px; align-items: center; }
.slot-list { display: grid; gap: 6px; padding: 0; margin: 18px 0 0; list-style: none; }
.slot-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; background: white; border: 1px solid var(--line); font-size: .85rem; }
.slot-list time { font-weight: 700; }
.booking-form { display: grid; gap: 14px; }
.booking-form label { min-width: 0; }
.booking-form button { justify-self: start; }
.booking-form > p:not(.form-note), .booking-empty { color: var(--muted); font-size: .9rem; }
.booking-form .form-note { margin: -4px 0 0; }
.day-panel .booking-form, .booking-empty { margin-top: 18px; }
.booking-notice { margin-bottom: 24px; border-left: 3px solid var(--ink); padding: 14px 17px; background: var(--paper); line-height: 1.6; }
.admin-login { max-width: 480px; }
.admin-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.admin-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-schedule { margin-top: clamp(44px, 6vw, 72px); }
.schedule-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 15px; overflow-wrap: anywhere; }
.schedule-entry h3 { margin-bottom: 7px; font: 400 1.4rem var(--display); }
.schedule-entry p:not(.eyebrow) { font-size: .88rem; }
.schedule-notes { max-width: 62ch; white-space: pre-wrap; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button-outline { border-color: var(--ink); color: var(--ink); background: #fff; }
.button-outline:hover { background: #e5e5e5; }

@media (max-width: 760px) {
  .booking-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .calendar-nav { flex: none; }
  .calendar-nav a { font-size: 1rem; }
}