/* Hallmark · route: custom (bespoke) · structure: photo-sidebar appointment application
 * paper: oklch(95% .01 290) · accent: oklch(43% .15 290) · display: Sora · body: Manrope
 * axes: light / geometric-sans / violet · idea: the calendar is the page */
:root { color-scheme:light; --paper:oklch(95% .01 290); --panel:oklch(90% .024 290); --ink:oklch(24% .026 290); --muted:oklch(43% .03 290); --rule:oklch(79% .025 290); --accent:oklch(43% .15 290); --sidebar:oklch(23% .032 290); --sidebar-ink:oklch(94% .012 290); --surface:oklch(98% .005 290); --display:"Sora",sans-serif; --body:"Manrope",sans-serif; --weight:500; --radius:16px; }
.booking-shell { display:grid; grid-template-columns:248px minmax(0,1fr); max-width:1440px; margin:auto; min-height:920px; }
.booking-sidebar { background:var(--sidebar); color:var(--sidebar-ink); padding:var(--space-10) var(--space-6); }
.booking-brand { display:block; font:500 1.75rem/1.2 var(--display); letter-spacing:-.07em; text-decoration:none; }
.booking-brand span { display:block; font:500 .5625rem/1.6 var(--body); letter-spacing:.14em; margin-top:var(--space-3); }
.studio-photo { position:relative; margin:var(--space-10) 0 var(--space-6); border-radius:100px 100px 12px 12px; overflow:hidden; height:324px; }
.studio-photo img { width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
.studio-photo figcaption { position:absolute; inset:auto 0 0; background:oklch(18% .02 290 / .88); padding:var(--space-4); font-size:.8125rem; }
.booking-sidebar nav { display:grid; gap:var(--space-2); }
.booking-sidebar nav a { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:var(--space-2) var(--space-3); font-size:.8125rem; text-decoration:none; border-radius:8px; }
.booking-sidebar a[aria-current] { background:var(--panel); color:var(--ink); }
.studio-demo { font-size:.75rem; line-height:1.8; margin:var(--space-10) var(--space-3) 0; }
.booking-sidebar :focus-visible { outline-color:var(--sidebar-ink); }
.booking-shell main { padding:var(--space-10) clamp(24px,4vw,56px) var(--space-16); min-width:0; }
.booking-heading { margin-bottom:var(--space-8); }
.booking-heading > p:first-child { font-size:.75rem; color:var(--muted); margin:0 0 var(--space-3); }
.booking-heading h1 { font:500 clamp(1.625rem,2.4vw,2.375rem)/1.22 var(--display); letter-spacing:-.05em; }
.booking-note { font-size:.8125rem; color:var(--muted); margin:var(--space-3) 0 0; }
fieldset { margin:0; padding:0; border:0; min-width:0; }
legend { padding:0; margin-bottom:var(--space-4); font-size:.8125rem; font-weight:600; }
.service-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); }
.service-options label { display:flex; align-items:start; gap:var(--space-2); padding:var(--space-4); background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); cursor:pointer; }
.service-options label:has(input:checked) { border-color:var(--accent); outline:1px solid var(--accent); outline-offset:-2px; background:var(--panel); }
.service-options input { accent-color:var(--accent); margin:var(--space-1) 0 0; flex:none; width:16px; height:16px; }
.service-options label > span { font-size:.8125rem; font-weight:600; }
.service-options small { display:block; font-size:.6875rem; font-weight:400; color:var(--muted); margin:var(--space-1) 0 var(--space-3); }
.service-options b { font-weight:500; font-size:.6875rem; }
.booking-calendar-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,.85fr); gap:var(--space-6); align-items:start; margin-top:var(--space-8); }
.calendar-and-times { min-width:0; }
.day-picker { padding:var(--space-5); background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); }
.day-picker legend { padding:0 var(--space-2); margin:0; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin:var(--space-3) 0 var(--space-5); }
.calendar-heading h2 { font:500 .9375rem/1.5 var(--display); letter-spacing:-.03em; }
.calendar-heading span { font-size:.625rem; color:var(--muted); text-align:right; }
.weekday-head,.month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--space-1); text-align:center; }
.weekday-head { font-size:.6875rem; color:var(--muted); margin-bottom:var(--space-2); }
.month-grid button { min-width:0; min-height:44px; border-radius:50%; border:1px solid transparent; color:var(--accent); background:var(--panel); padding:0; font-size:.75rem; font-variant-numeric:tabular-nums; }
.month-grid button:disabled { color:var(--muted); background:transparent; opacity:.55; }
.month-grid button[aria-pressed=true] { background:var(--accent); color:var(--surface); border-color:var(--accent); }
.time-picker { margin-top:var(--space-5); }
.time-picker > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-2); }
.time-picker button { background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-radius:8px; padding:var(--space-2) 0; min-width:0; font-size:.75rem; }
.time-picker button[aria-pressed=true] { background:var(--accent); color:var(--surface); border-color:var(--accent); }
.time-picker > p { font-size:.625rem; color:var(--muted); }
.appointment-review { background:var(--panel); padding:var(--space-6); border-radius:var(--radius); }
.review-label { color:var(--muted); margin:0 0 var(--space-3); font-size:.75rem; }
.appointment-review h2 { font-size:1.1875rem; letter-spacing:-.035em; }
.appointment-review dl { margin:var(--space-6) 0; font-size:.75rem; }
.appointment-review dl div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); padding:var(--space-3) 0; border-bottom:1px solid var(--rule); }
.appointment-review dt { color:var(--muted); }
.appointment-review dd { margin:0; font-weight:500; }
.appointment-review button { width:100%; display:flex; justify-content:space-between; gap:var(--space-2); background:var(--accent); color:var(--surface); border:0; border-radius:9px; padding:var(--space-3); font-size:.75rem; }
#booking-status { margin-top:var(--space-4); font-size:.6875rem; color:var(--muted); line-height:1.75; }
.appointment-review > a { display:inline-flex; align-items:center; min-height:44px; font-size:.6875rem; }
.studio-details { border-top:1px solid var(--rule); margin-top:var(--space-12); padding-top:var(--space-8); }
.studio-details h2 { font-size:1.25rem; }
.studio-details p { color:var(--muted); font-size:.8125rem; max-width:64ch; }
.studio-kicker { font-size:.75rem; font-weight:600; margin:0 0 var(--space-3); color:var(--accent); }
.studio-service-guide { padding-top:var(--space-16); }
.studio-service-guide h2,.studio-visit h2,.studio-questions h2 { font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.25; max-width:26ch; }
.studio-service-list { margin-top:var(--space-8); }
.studio-service-list article { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-8); padding:var(--space-6) 0; border-top:1px solid var(--rule); }
.studio-service-list h3 { font-size:1rem; line-height:1.5; }
.studio-service-list article > div p { margin:var(--space-2) 0 0; font-size:.75rem; color:var(--accent); }
.studio-service-list article > p { margin:0; font-size:.875rem; line-height:1.8; color:var(--muted); }
.studio-details .studio-kicker { color:var(--accent); }
.studio-details > p:not(.studio-kicker) { font-size:.9375rem; line-height:1.8; }
.studio-visit { margin-top:var(--space-12); padding:var(--space-8); border-radius:var(--radius); background:var(--sidebar); color:var(--sidebar-ink); }
.studio-visit .studio-kicker { color:var(--sidebar-ink); }
.studio-visit header > p:last-child { font-size:.875rem; max-width:54ch; margin-top:var(--space-4); }
.studio-visit ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); margin:var(--space-8) 0 0; padding:0; list-style:none; counter-reset:visit; }
.studio-visit li { counter-increment:visit; border-top:1px solid var(--rule); padding-top:var(--space-4); }
.studio-visit li::before { content:"0" counter(visit); display:block; margin-bottom:var(--space-5); font-size:.75rem; }
.studio-visit h3 { font-size:.9375rem; line-height:1.5; }
.studio-visit li p { font-size:.875rem; line-height:1.8; margin-bottom:0; }
.studio-questions { margin-top:var(--space-12); }
.studio-questions > header { margin-bottom:var(--space-6); }
.studio-questions details { border-top:1px solid var(--rule); }
.studio-questions summary { padding:var(--space-5) 0; font-size:.875rem; line-height:1.6; cursor:pointer; }
.studio-questions details p { font-size:.875rem; line-height:1.8; color:var(--muted); margin:0 0 var(--space-6); }
@media(max-width:58rem) { .studio-visit ol { grid-template-columns:1fr; } .studio-visit li::before { margin-bottom:var(--space-3); } }
@media(max-width:44rem) { .studio-service-guide { padding-top:var(--space-12); } .studio-service-list article { grid-template-columns:1fr; gap:var(--space-4); } .studio-visit { padding:var(--space-6); } }
@media(max-width:68rem) { .booking-shell { grid-template-columns:208px minmax(0,1fr); } .booking-shell main { padding-inline:var(--space-6); } .booking-sidebar { padding-inline:var(--space-5); } .booking-calendar-layout { grid-template-columns:1fr; } .appointment-review dl { display:flex; gap:var(--space-6); flex-wrap:wrap; } .appointment-review dl div { flex:1; min-width:120px; } }
@media(max-width:44rem) {
 .booking-shell { display:block; } .booking-sidebar { display:grid; grid-template-columns:1fr 84px; gap:var(--space-3) var(--space-4); padding:var(--space-6); }
 .booking-brand { font-size:1.625rem; } .studio-photo { grid-column:2; grid-row:1/3; height:104px; margin:0; border-radius:48px 48px 8px 8px; } .studio-photo figcaption,.studio-demo { display:none; }
 .booking-sidebar nav { display:flex; gap:var(--space-3); grid-column:1; flex-wrap:wrap; } .booking-sidebar nav a { min-height:44px; padding:var(--space-2); font-size:.6875rem; } .booking-sidebar nav span { display:none; }
 .booking-shell main { padding:var(--space-8) var(--space-4); } .booking-heading h1 { font-size:1.75rem; }
 .service-options { grid-template-columns:1fr; gap:var(--space-2); } .service-options label { padding:var(--space-4); gap:var(--space-3); align-items:center; }
 .service-options label > span { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); width:100%; font-size:.875rem; } .service-options small { display:none; } .service-options b { font-size:.75rem; } .service-options input { margin:0; }
 .day-picker { padding:var(--space-3); } .month-grid { gap:2px; } .appointment-review dl { display:block; } .appointment-review dl div { min-width:0; }
}