/* The studio's printed-paper design, composed separately for desktop and phone. */
@font-face { font-family: StudioDisplay; src: url('./fonts/oswald-bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
:root {
  --ink: #300d0c;
  --wine: #791c2b;
  --wine-dark: #5e1821;
  --paper: #f8f1e5;
  --card: #fbf2e4;
  --clay: #bc6240;
  --olive: #828363;
}
body {
  background: linear-gradient(#fffaf51f, #fffaf51f), var(--paper) url('./studio-paper.jpg') center top / 100% auto repeat-y;
  color: var(--ink);
}
.page {
  width: min(76%, 1040px);
  max-width: none;
  padding: 42px 0 48px;
}
.site-header {
  margin: 0 16px 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  backdrop-filter: none;
}
.brand-row { min-height: 56px; margin: 0; }
.brand { width: 32%; min-width: 260px; max-width: calc(100% - 64px); }
.brand img { width: 100%; height: auto; aspect-ratio: 5.5; }
.menu-button { width: 48px; height: 48px; gap: 6px; padding: 7px; border-radius: 8px; }
.menu-button span { width: 34px; height: 3px; border-radius: 3px; }
.progress-shell { margin: 0 16px; padding: 0; }
.progress-copy { font-size: 16px; font-weight: 600; line-height: 1.2; margin: 0 0 10px; padding-left: 20px; }
.progress-star { color: #92394b; top: -1px; font-size: 18px; line-height: 20px; }
.progress-track { height: 8px; background: #d3c8b6; }
.progress-value { background: var(--wine); }
.step-back { color: var(--wine); font-size: 19px; margin-bottom: 8px; }
h1 { margin: 26px 16px 22px; font-family: StudioDisplay, var(--display); font-size: clamp(42px, 4.5vw, 64px); font-weight: 700; line-height: 1.13; letter-spacing: -.025em; }
.service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.service-option {
  --surface: #f9f0df;
  --surface-ink: #581923;
  --outline: #c4a98b;
  display: block;
  align-content: start;
  isolation: isolate;
  aspect-ratio: 1.74;
  min-height: 0;
  min-width: 0;
  padding: 28px;
  color: var(--surface-ink);
  border: 2.5px solid var(--outline);
  border-radius: 21px;
  clip-path: none;
  background: var(--surface);
  box-shadow: 0 5px 9px rgba(71, 39, 22, .045);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
  overflow: hidden;
  container-type: inline-size;
}
.service-option:hover {
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(71, 39, 22, .12);
}
.service-option:active { background: var(--surface); transform: translateY(0); }
.service-option:focus-visible { outline: 3px solid var(--wine); outline-offset: 5px; }
.service-option::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: url('./studio-paper.jpg') center / 1100px auto; mix-blend-mode: multiply; opacity: .36; }
.service-option[data-service="pottery_wheel"] { --surface: #bd6442; --surface-ink: #fff6e7; --outline: #8f432c; }
.service-option[data-service="date"] { --surface: #818364; --surface-ink: #fff8e9; --outline: #5e6047; }
.service-option[data-service="celebration"] { --surface: #f4d9d1; --surface-ink: #50151b; --outline: #c88e83; }
.service-option[data-service="kids_club"] { --surface: #ecd5ad; --surface-ink: #581c24; --outline: #c09e68; }
.service-option[data-service="adults_club"] { --surface: #b8c1ac; --surface-ink: #303b2b; --outline: #7a876d; }
.service-copy { position: absolute; inset: 28px 28px auto; z-index: 2; display: flex; gap: 9px; width: auto; padding: 0; overflow: visible; }
.service-option h2 { max-width: 68%; margin: 0; font-family: StudioDisplay, var(--display); font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: normal; }
.service-details { font: 400 17px/1.45 var(--text); }
.service-price { margin-top: 6px; font: 700 31px/1.1 StudioDisplay, var(--display); letter-spacing: -.025em; white-space: nowrap; }
.price-prefix { font-size: .8em; }
.price-unit { display: block; margin-top: 4px; font-size: 13px; }
.service-option .age-label { color: inherit; font-size: .62em; }
.service-art { position: absolute; z-index: 1; display: flex; justify-content: center; align-items: center; right: 0; bottom: 3%; width: 61%; height: 91%; pointer-events: none; }
.service-art img, .service-option:nth-child(2) .service-art img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.service-art picture { display: block; width: 100%; height: 100%; }
.service-option[data-service="hand_building"] .service-art { width: 60%; right: 1%; height: 88%; bottom: 4%; }
.service-option[data-service="hand_building"] .service-art::before { content: ""; position: absolute; inset: 7% 1% 4% 0; z-index: -1; background: #e9dabc; opacity: .6; border-radius: 48% 57% 37% 46%; transform: rotate(-21deg); }
.service-option[data-service="pottery_wheel"] .service-art { width: 57%; height: 91%; right: 0; bottom: 1%; }
.service-option[data-service="date"] .service-art { width: 57%; height: 92%; right: 2%; bottom: 2%; }
.service-option[data-service="celebration"] .service-art { width: 64%; height: 94%; right: -5%; bottom: -5%; }
.service-option[data-service="kids_club"] .service-art, .service-option[data-service="adults_club"] .service-art { width: 53%; right: -1%; bottom: 0; height: 81%; }
.service-option[data-service="kids_club"] h2, .service-option[data-service="adults_club"] h2 { font-size: clamp(25px, 2.3vw, 33px); max-width: 70%; }
.service-arrow { position: absolute; z-index: 3; inset: auto auto 20px 28px; display: grid; place-items: center; width: 47px; height: 47px; color: var(--ink); background: #f8ebd8; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 4px 8px #5429190a; }
.service-arrow svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-option[data-service="pottery_wheel"] .service-arrow, .service-option[data-service="date"] .service-arrow { border-color: transparent; }
.mobile-format { display: none; }
.desktop-format { display: inline; }
.service-note { margin: 24px 16px 0; max-width: 720px; font-size: 14px; }

/* Carry the paper surfaces into the rest of the booking journey. */
.calendar-screen::before { display: none; }
.card:not(.service-option) { border-radius: 20px; clip-path: none; background: rgba(253, 246, 234, .95); box-shadow: 0 5px 15px #56332309; border: 1px solid #b9978466; }
.summary-card { border: 1.5px solid var(--wine)!important; padding: 16px 25px; }
.summary-card h2 { font-weight: 600; }
.calendar-card { padding: 30px 34px; }
.participants-card, .action-bar { background: #eee3d2!important; }
.counter { background: #dfd1bd; }
.primary-button { background: var(--wine); box-shadow: 0 6px 12px #791c2b18; }
.slot { background: #e9dece; }
.slot.active { background: var(--wine); }
.menu-sheet { background: var(--paper) url('./studio-paper.jpg') center / auto 1000px; overflow-y: auto; }
.menu-close { border-color: #79202b55; color: var(--wine); }
.menu-links a { font-family: var(--display); }
body.menu-is-open { overflow: hidden; }

@media (min-width: 901px) and (max-width: 1050px) {
  .page { width: 82%; padding-top: 30px; }
  .service-option { padding: 20px; }
  .service-copy { inset: 20px 20px auto; }
  .service-option h2 { font-size: 29px; }
  .service-details { font-size: 14px; }
  .service-price { font-size: 27px; }
  .service-arrow { left: 20px; bottom: 15px; width: 38px; height: 38px; }
  .service-arrow svg { width: 21px; }
  .service-option[data-service="kids_club"] h2, .service-option[data-service="adults_club"] h2 { font-size: 25px; }
}
@media (max-width: 900px) {
  body { background-size: auto, auto 900px; }
  .page { width: 100%; max-width: 100%; padding: 21px max(12px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .site-header { margin: 0 10px 18px; padding: 0; border: 0; border-radius: 0; }
  .brand-row { min-height: 42px; gap: 20px; margin: 0; }
  .brand { width: 72%; min-width: 0; max-width: calc(100% - 61px); }
  .brand img { aspect-ratio: 5.5; }
  .menu-button { width: 41px; height: 42px; padding: 5px; gap: 5px; }
  .menu-button span { width: 31px; height: 3.5px; }
  .progress-shell { margin: 0 10px; }
  .progress-copy { padding: 0; margin: 0 0 4px; font-size: 15px; line-height: 1.15; font-weight: 700; letter-spacing: 0; }
  .progress-star { display: none; }
  .progress-track { height: 10px; }
  .step-back { min-height: 26px; margin: 0 0 4px; padding: 0; font-size: 17px; }
  h1 { margin: 20px 8px 14px; font-size: clamp(31px, 10.3vw, 70px); font-weight: 700; line-height: 1.16; letter-spacing: -.03em; }
  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .service-option { display: block; aspect-ratio: 1.98; min-height: 0; padding: 5.5% 5.3%; border-radius: 15px; border-width: 2.5px; }
  .service-option[data-service="hand_building"], .service-option[data-service="celebration"] { border-color: var(--outline); }
  .service-copy { inset: 10% 5.3% auto; width: auto; gap: 9px; padding: 0; }
  .service-option h2 { font-size: clamp(30px, 9.35vw, 62px); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; max-width: 72%; }
  .service-details { font-size: clamp(14px, 4.05vw, 27px); line-height: 1.32; }
  .service-price { font-size: clamp(29px, 8.5vw, 56px); line-height: 1.13; margin-top: 7px; font-weight: 700; }
  .service-option .service-art { right: 2%; bottom: 2%; width: 58%; height: 94%; }
  .service-option[data-service="hand_building"] .service-art { width: 59%; height: 96%; bottom: 1%; right: 2%; }
  .service-option[data-service="hand_building"] .service-art::before { inset: 5% 0 2% 0; }
  .service-option[data-service="pottery_wheel"] .service-art { width: 51%; height: 86%; right: 2%; bottom: 3%; }
  .service-option[data-service="date"] .service-art { width: 46%; height: 88%; right: 5%; bottom: 4%; }
  .service-option[data-service="date"] .service-art::before { content: ""; position: absolute; inset: 8% -9% 3% -7%; z-index: -1; background: #a2a07c; opacity: .52; border-radius: 48% 41% 45% 52%; transform: rotate(15deg); }
  .service-option[data-service="celebration"] .service-art { width: 54%; height: 98%; right: 1%; bottom: -3%; }
  .service-art img, .service-option:nth-child(2) .service-art img { width: 100%; height: 100%; max-width: none; }
  .service-option[data-service="kids_club"] h2, .service-option[data-service="adults_club"] h2 { max-width: 68%; font-size: clamp(22px, 6.6vw, 44px); line-height: 1.1; }
  .service-option[data-service="kids_club"] .service-details, .service-option[data-service="adults_club"] .service-details { font-size: clamp(12px, 3.5vw, 21px); }
  .service-option[data-service="kids_club"] .service-art, .service-option[data-service="adults_club"] .service-art { width: 48%; height: 83%; right: 0; }
  .service-arrow { inset: auto 2.8% 6.7% auto; width: clamp(40px, 10.2vw, 68px); height: clamp(40px, 10.2vw, 68px); background: var(--wine); color: #fff5e5; border: 0; box-shadow: 0 5px 12px #52142615; }
  .service-arrow svg { width: 58%; height: 58%; stroke-width: 2.2; }
  .service-option[data-service="pottery_wheel"] .service-arrow, .service-option[data-service="date"] .service-arrow { background: #faecd7; color: #591923; }
  .mobile-format { display: inline; }
  .desktop-format { display: none; }
  .price-unit { font-size: 12px; margin-top: 2px; }
  .service-note { margin: 20px 8px 0; font-size: 13px; }
  .summary-card { padding: 8px 12px; }
  .summary-card h2 { font-size: clamp(24px, 6.9vw, 38px); }
  .summary-main { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
  .summary-art { width: 82px; height: 82px; }
  .summary-card p { font-size: 14px; }
  .card:not(.service-option) { border-radius: 15px; }
  .calendar-card { padding: 22px 10px; }
  .month-title { font-size: clamp(25px, 6.8vw, 34px); }
  .calendar-grid { gap: 8px 0; }
  .day { width: min(100%, 40px); font-size: 21px; }
  .slots .section-label { font-size: 25px; }
  .slot { min-height: 76px; font-size: 27px; border-radius: 13px; }
  .slot small { font-size: 13px; }
  .slots-help { font-size: 14px; }
  .participants-card { flex-wrap: nowrap; padding: 12px 16px; }
  .participants-card .section-label { font-size: 21px; }
  .counter { min-width: 112px; width: 112px; height: 42px; }
  .counter output { font-size: 20px; }
  .counter button { font-size: 25px; }
  .action-bar { padding: 18px 16px; }
  .form-card, .review-card { padding: 22px 16px; }
  .menu-links a { font-size: 20px; }
}
@media (max-width: 360px) {
  .service-option { aspect-ratio: 1.88; }
  .service-copy { gap: 7px; }
}