:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090909;
  color: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --muted: #999;
  --border: #272727;
  --ease-smooth: cubic-bezier(.65, 0, .35, 1);
  --motion-quick: 180ms;
  --motion-ui: 300ms;
  --motion-month: 360ms;
  --motion-reveal: 480ms;
  --motion-page: 620ms;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; min-height: 100%; }
body { min-width: 320px; min-height: 100vh; margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button, summary { touch-action: manipulation; }
button, summary, a {
  transition: color var(--motion-quick) var(--ease-smooth), background-color var(--motion-quick) var(--ease-smooth), border-color var(--motion-quick) var(--ease-smooth), opacity var(--motion-ui) var(--ease-smooth), transform var(--motion-ui) var(--ease-smooth);
}
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
svg { display: block; width: 18px; height: 18px; }

.page-shell { width: min(100% - 48px, 480px); min-height: 100vh; margin: 0 auto; display: flex; flex-direction: column; overflow-anchor: none; }
.topbar { min-height: 80px; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.brand { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -6px; }
.brand-mark { width: 32px; height: 32px; }
.brand .brand-mark { transition: transform var(--motion-ui) var(--ease-smooth); }
.booking-main { width: 100%; padding: 48px 0 56px; }
.intro { margin-bottom: 36px; }
h1 { margin: 0 0 12px; font-size: 36px; line-height: 1.15; font-weight: 450; letter-spacing: -.05em; }
.intro-text { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.calendar { --day-height: 48px; padding: 0; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.calendar-header h2 { margin: 0; font-size: 14px; font-weight: 500; }
.month-navigation { display: flex; gap: 2px; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 2px; background: transparent; color: #fff; }
.icon-button svg { transition: transform var(--motion-ui) var(--ease-smooth); }
.icon-button:disabled { color: #444; }
.weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
/* Six fixed week rows keep the surrounding layout stable in every month. */
.calendar-days { grid-template-rows: repeat(6, var(--day-height)); }
.weekdays { margin-bottom: 8px; color: #888; text-align: center; font-size: 11px; }
.weekdays span { padding: 6px 0; }
.calendar-day { display: grid; place-items: center; width: 100%; height: var(--day-height); padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #ddd; font-size: 13px; font-variant-numeric: tabular-nums; }
.calendar-day[aria-current="date"] { border-color: #444; }
.calendar-day[aria-pressed="true"], .calendar-day[aria-pressed="true"]:hover { border-color: #fff; background: #fff; color: #090909; font-weight: 500; }
.calendar-day:disabled { color: #484848; }

.availability { padding: 30px 0; }
.booking-sidebar { min-width: 0; align-self: start; }
.availability-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; margin-bottom: 16px; }
.availability h2 { margin: 0; font-size: 13px; font-weight: 450; line-height: 1.5; }
.availability-badge { flex-shrink: 0; color: var(--muted); font-size: 11px; }
.time-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.time-slots button { min-height: 42px; padding: 0; border: 1px solid #242424; border-radius: 2px; background: transparent; color: #666; font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: line-through; text-decoration-color: #555; }

.personal-request { padding: 25px 0 0; border-top: 1px solid var(--border); }
.personal-request h2 { margin: 0 0 8px; font-size: 19px; font-weight: 450; letter-spacing: -.03em; line-height: 1.3; }
.personal-request > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
details { margin-top: 21px; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 0 14px; border: 1px solid #fff; border-radius: 2px; background: #fff; color: #090909; font-size: 13px; font-weight: 500; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary svg { transition: transform var(--motion-reveal) var(--ease-smooth); }
details[data-expanded="true"] summary svg, details[open]:not([data-expanded]) summary svg { transform: rotate(90deg); }
#request-details[data-expanded="false"] form { opacity: 0; transform: translateY(-4px); }
form { width: 100%; padding-top: 19px; }
.request-date { margin: 0 0 4px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.request-date span { display: block; color: #ddd; }
.field { display: grid; gap: 9px; padding: 17px 0 15px; border-bottom: 1px solid var(--border); transition: border-color var(--motion-ui) var(--ease-smooth); }
.field > span { color: #aaa; font-size: 11px; transition: color var(--motion-ui) var(--ease-smooth); }
.field:focus-within { border-color: #999; }
.field:focus-within > span { color: #fff; }
input, textarea { width: 100%; min-height: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 16px; line-height: 1.5; }
textarea { resize: vertical; min-height: 52px; }
input::placeholder, textarea::placeholder { color: #757575; opacity: 1; transition: opacity var(--motion-ui) var(--ease-smooth); }
input:focus::placeholder, textarea:focus::placeholder { opacity: .55; }
.submit-button { width: 100%; min-height: 46px; margin-top: 22px; padding: 0 14px; border: 1px solid #666; border-radius: 2px; background: transparent; color: #fff; font-size: 13px; }
.submit-button:disabled { opacity: .55; cursor: wait; }
.form-status { min-height: 3.2em; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.form-status[data-state="error"] { color: #fff; }
.form-status[data-state="error"] { padding-left: 10px; border-left: 1px solid #fff; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { outline: 1px solid #aaa; outline-offset: 4px; }
.noscript-message { color: var(--muted); font-size: 13px; line-height: 1.6; }
.noscript-message a { text-decoration: underline; }
footer { display: flex; align-items: center; justify-content: flex-end; min-height: 64px; margin-top: auto; border-top: 1px solid var(--border); color: #777; font-size: 10px; }

.confirmation { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; text-align: center; background: #090909; }
.confirmation-content { width: 100%; max-width: 440px; }
.confirmation .brand-mark { width: 30px; height: 30px; margin: 0 auto 34px; }
.confirmation h1 { margin: 0 0 14px; font-size: clamp(44px, 8vw, 64px); font-weight: 400; letter-spacing: -.06em; }
.confirmation h1:focus { outline: none; }
.confirmation p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.confirmation a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 34px; color: #888; font-size: 11px; }

.icon-button:active:not(:disabled), .calendar-day:active:not(:disabled), .submit-button:active:not(:disabled) { transform: scale(.97); }
.brand:active .brand-mark { transform: scale(.96); }
summary:active { background: #ddd; border-color: #ddd; }

@media (hover: hover) and (pointer: fine) {
  .brand:hover .brand-mark { transform: translateY(-1px) rotate(-3deg); }
  .icon-button:hover:not(:disabled), .calendar-day:hover:not(:disabled) { background: #1b1b1b; }
  .calendar-day[aria-pressed="true"]:hover { background: #fff; }
  #previous-month:hover:not(:disabled) svg { transform: translateX(-2px); }
  #next-month:hover:not(:disabled) svg { transform: translateX(2px); }
  summary:hover { background: #e6e6e6; border-color: #e6e6e6; }
  details[data-expanded="false"] summary:hover svg { transform: translateX(2px); }
  .submit-button:hover:not(:disabled) { border-color: #aaa; background: #191919; }
  footer a:hover, .confirmation a:hover { color: #fff; }
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .topbar { animation: fade-in var(--motion-page) var(--ease-smooth) backwards; }
  .intro, .calendar, .availability, .personal-request { animation: reveal-in var(--motion-page) var(--ease-smooth) backwards; }
  .intro { animation-delay: 50ms; }
  .calendar { animation-delay: 100ms; }
  .availability { animation-delay: 140ms; }
  .personal-request { animation-delay: 180ms; }
  footer { animation: fade-in var(--motion-page) var(--ease-smooth) 220ms backwards; }
}

@media (pointer: coarse) {
  :root { --motion-quick: 160ms; --motion-ui: 260ms; --motion-month: 300ms; --motion-reveal: 420ms; --motion-page: 500ms; }
}

@media (min-width: 960px) {
  .page-shell { width: min(100% - 80px, 960px); }
  .booking-main { display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 64px; padding: 54px 0 72px; }
  .intro { grid-column: 1 / -1; margin-bottom: 42px; }
  .calendar { --day-height: 50px; align-self: start; }
  .availability { padding: 0 0 25px; }
  .noscript-message { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .page-shell { width: calc(100% - 40px); }
  .topbar { min-height: 68px; }
  .booking-main { padding: 34px 0 40px; }
  h1 { font-size: 32px; }
  .intro { margin-bottom: 28px; }
  .calendar-days, .weekdays { gap: 3px; }
  .calendar { --day-height: 44px; }
  .availability { padding: 26px 0; }
  .time-slots { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}