/* Dear Mojave — site styles */
:root {
  --sand: #F5EFE6;
  --sand-2: #EDE3D5;
  --card: #FFFDF9;
  --ink: #2A1F17;
  --ink-2: #4A3B2F;
  --muted: #6B5B4D;
  --line: #CDBFAE;
  --orange: #B44A1A;
  --orange-dark: #7A3410;
  --green: #0B4A2B;
  --green-tint: #DCE6D6;
  --green-muted: #D9E2D4;
  --gold: #F6B23A;
  --date: #FCE8BF;
  --low: #9A3412;
  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 5vw, 96px);
  --wrap-max: 1720px;
  /* Header and green bar heights, used to fit the hero on the first screen */
  --logo-h: clamp(84px, 6.4vw, 124px);
  --hdr-pt: clamp(14px, 1.3vw, 26px);
  --hdr-pb: clamp(8px, .7vw, 14px);
  --header-h: calc(var(--logo-h) + var(--hdr-pt) + var(--hdr-pb));
  --ribbon-fs: clamp(12px, 1.1vw, 16px);
  --ribbon-h: calc(36px + var(--ribbon-fs) * 1.5);
  --hero-pt: clamp(48px, 7svh, 88px);
  --hero-pb: clamp(28px, 4svh, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--sand); color: var(--ink); font: 16px/1.5 var(--sans); overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--ink); }
a:hover { color: var(--orange-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.08; margin: 0; color: var(--green); }
.lede { margin: 0; font-size: 18px; color: var(--ink-2); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; font: 600 17px/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); color: #fff; }
.btn-outline { border-color: var(--green); color: var(--green); background: transparent; }
.btn-outline:hover { background: var(--green); color: var(--sand); }
.btn-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ink:hover { background: var(--ink); color: var(--sand); }
.btn-cream { background: var(--sand); color: var(--green); }
.btn-cream:hover { background: #fff; color: var(--green); }
.btn[disabled] { opacity: .6; cursor: wait; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }

/* Header */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: var(--hdr-pt) var(--hdr-pb); }
.logo img { height: var(--logo-h); width: auto; }
.main-nav { display: flex; gap: clamp(22px, 2.2vw, 44px); align-items: center; font-size: clamp(15px, 1.1vw, 19px); font-weight: 500; }
.header-actions .btn-sm { min-height: clamp(44px, 3.1vw, 56px); padding: 0 clamp(20px, 1.6vw, 30px); font-size: clamp(15px, 1.05vw, 18px); }
.main-nav a { text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.mobile-nav { display: none; }
@media (max-width: 860px) {
  .main-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .logo img { height: 84px; }
  .mobile-nav.open { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--gutter) 16px; }
  .mobile-nav a { padding: 12px 0; font-size: 18px; font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--line); }
}
@media (max-width: 420px) { .header-actions .btn-sm { padding: 0 14px; font-size: 14px; } .logo img { height: 72px; } }

/* Notice banner (e.g. cancelled checkout) */
.notice { background: var(--gold); color: var(--ink); text-align: center; padding: 10px var(--gutter); font-weight: 600; }

/* Hero */
.hero .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 3vw, 56px); padding-block: clamp(56px, 6vw, 110px) 80px; }
.hero-text { flex: 0 1 calc(34.5vw + 124px); min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero-h1 { font-family: var(--serif); font-weight: 400; color: var(--green); line-height: 1.08; letter-spacing: -.015em; margin: 0; font-size: clamp(28px, calc(3.04vw + 9.7px), 68px); }
@media (max-width: 759px) { .hero-h1 { font-size: min(7.8vw, 54px); } .hero .hero-text, .hero .hero-art { flex: 1 1 100%; } .hero .art-frame { max-width: 560px; } }
@media (min-width: 760px) and (max-width: 1099px) { .hero-sub { font-size: clamp(15px, 1.75vw, 18px); max-width: 27em; } }
/* Wide screens: hero + green bar fill exactly one screen, text centered */
/* Tablet and up: text and image stay side by side */
@media (min-width: 760px) { .hero .wrap { flex-wrap: nowrap; } }
@media (min-width: 760px) and (min-height: 620px) {
  .hero .wrap { min-height: calc(100svh - var(--header-h) - var(--ribbon-h)); padding-block: var(--hero-pt) var(--hero-pb); flex-wrap: nowrap; }
  .hero .art-frame { max-width: min(860px, max(260px, calc((100svh - var(--header-h) - var(--ribbon-h) - var(--hero-pt) - var(--hero-pb)) * 1.25))); }
  .hero .hero-text { gap: clamp(20px, 2.6svh, 32px); margin-bottom: calc(var(--hero-pt) - var(--hero-pb) + 2svh); }
}
/* Full column width; sized so it sits on two full lines on laptops and desktops.
   On narrower screens, where it needs 3+ lines, spread them evenly so no word sits alone. */
.hero-sub { font-size: clamp(16px, 1.18vw, 20px); line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; }
@media (max-width: 1239px) { .hero-sub { text-wrap: balance; } }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
/* Hero art: journal photo + curved arrows + numbered callout cards.
   Positions come from a script on a 1375x1100 grid, so keep the aspect ratio in sync. */
.art-frame { position: relative; width: 100%; aspect-ratio: 1375 / 1100; container-type: inline-size; }
.art-journal { position: absolute; height: auto; filter: drop-shadow(0 22px 26px rgba(42, 31, 23, .2)); }
.art-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arrow, .arrow-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.arrow { stroke: var(--ink); stroke-width: 6; }
.arrow-halo { stroke: var(--card); stroke-width: 15; }
.callouts { list-style: none; margin: 0; padding: 0; }
.callout { position: absolute; display: flex; align-items: center; gap: .5em; background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: .35em .95em .35em .35em; font-size: clamp(11px, 2.3cqw, 16px); font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 16px rgba(42, 31, 23, .1); }
.callout.l { transform: translate(-100%, -50%); }
.callout.r { transform: translate(0, -50%); }
.callout .num { width: 1.8em; height: 1.8em; flex: none; border-radius: 50%; border: 2px solid var(--orange); background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: .9em; font-weight: 700; }
/* Small art (phones, narrow tablets): drop the lead-in words, e.g. "Choose your leather" becomes "Leather" */
@container (max-width: 440px) { .callout .lead { display: none; } .callout .short { display: inline-block; } .callout .short::first-letter { text-transform: uppercase; } }
/* Ribbon */
.ribbon { background: var(--green); color: var(--sand); }
.ribbon ul { list-style: none; margin: 0 auto; max-width: var(--wrap-max); padding: 18px 12px; display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(12px, 1.5vw, 40px); font-size: var(--ribbon-fs); line-height: 1.5; font-weight: 500; white-space: nowrap; }
.ribbon li { display: flex; align-items: center; gap: .55em; flex: none; }
.ribbon svg { color: var(--gold); flex: none; width: 1.25em; height: 1.25em; }
/* Tablets and phones: one row you can swipe sideways */
@media (max-width: 1023px) {
  :root { --ribbon-fs: 14px; }
  .ribbon ul { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); gap: 24px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .ribbon ul::-webkit-scrollbar { display: none; }
}

/* Stitched divider */
.stitch { display: flex; align-items: center; gap: 10px; }
.stitch::before, .stitch::after { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2.5px solid var(--orange); }
.stitch span { flex: 1; border-top: 2px dashed var(--orange); }

/* Dates */
.dates .wrap { padding-block: 88px 72px; display: flex; flex-direction: column; gap: 32px; }
/* Same idea as the workshop cards: equal widths, 4 per row on desktop, 2 on tablets, 1 on phones.
   Leftover cards in the full calendar line up on the left instead of stretching. */
.date-grid { --cols: 1; --date-gap: 20px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--date-gap); }
@media (min-width: 560px) { .date-grid { --cols: 2; } }
@media (min-width: 1100px) { .date-grid { --cols: 4; } }
.date-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--date-gap)) / var(--cols)); min-width: 0; background: var(--card); border: 1.5px solid var(--ink); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.date-card.sold { opacity: .72; }
.btn-sold { border-color: var(--line); background: var(--sand-2); color: var(--muted); cursor: default; }
.date-top { display: flex; align-items: center; gap: 16px; }
.date-block { width: 72px; flex: none; border-radius: 16px; background: var(--date); text-align: center; padding: 8px 0 10px; display: flex; flex-direction: column; }
.date-block .mon { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
/* Numbers use the sans font: the serif's 5 and 9 drop below the line */
.date-block .day { font-family: var(--sans); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.02em; }
.date-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.date-when .wk { font-size: 14px; color: var(--muted); }
.date-when .tm { font-weight: 600; font-size: 15px; }
.date-title { font-size: 20px; font-weight: 600; line-height: 1.25; }
.date-price { color: var(--orange); font-weight: 700; font-size: 15px; }
.seat-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.seat-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.seat-dots i.on { background: var(--ink); }
.seats { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.seats.low { color: var(--low); }
.date-card .btn { margin-top: auto; min-height: 46px; font-size: 16px; }
.date-empty, .date-loading { flex: 1 1 100%; background: var(--card); border-radius: 22px; padding: 28px; color: var(--ink-2); }
.skeleton { flex: 1 1 230px; height: 300px; border-radius: 22px; background: linear-gradient(90deg, var(--sand-2), var(--card), var(--sand-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Workshops */
.workshops .wrap { padding-block: 80px; display: flex; flex-direction: column; gap: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 600 16px var(--sans); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--sand); }
/* Every card is the same width: all 6 in one row on desktop, 3 + 3 on small laptops,
   2 per row on tablets, 1 on phones. A short row (e.g. when filtered) lines up on the left, never stretched. */
.ws-grid { --cols: 1; --ws-gap: 24px; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--ws-gap); }
@media (min-width: 640px) { .ws-grid { --cols: 2; } }
@media (min-width: 900px) { .ws-grid { --cols: 3; } }
.ws-card { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--ws-gap)) / var(--cols)); min-width: 0; background: var(--card); border-radius: 24px; padding: 14px 14px 24px; display: flex; flex-direction: column; gap: 14px; }
.ws-body { padding: 0 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ws-body h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; margin: 0; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); }
.ws-meta .price { font-weight: 700; color: var(--orange); }
.ws-body p { margin: 0; color: var(--ink-2); }
.ws-body .link-arrow { margin-top: auto; }
.ph { position: relative; background-color: #E6D8C5; background-image: repeating-linear-gradient(135deg, rgba(42, 31, 23, .07) 0 2px, transparent 2px 12px); border-radius: 16px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #5E4F42; font-size: 14px; }
.ph-43 { aspect-ratio: 4 / 3; }
.ws-photo { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #E6D8C5; }
.ws-photo img { width: 100%; height: 100%; object-fit: cover; }
.ph-11 { aspect-ratio: 1 / 1; border-radius: 20px; }
.tag { position: absolute; top: 12px; left: 12px; background: var(--card); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.tag.private { background: var(--green-tint); color: var(--green); }
/* Six across: narrower cards, so tighter spacing and slightly smaller type */
@media (min-width: 1340px) {
  .ws-grid { --cols: 6; --ws-gap: 16px; }
  .ws-card { padding: 10px 10px 18px; gap: 12px; border-radius: 20px; }
  .ws-photo { border-radius: 13px; }
  .ws-body { padding: 0 6px; gap: 8px; }
  .ws-body h3 { font-size: clamp(16px, 1.2vw, 22px); white-space: nowrap; }
  .ws-meta { gap: 2px 12px; font-size: 13px; }
  .ws-body p { font-size: 14.5px; line-height: 1.45; }
  .ws-card .tag { top: 9px; left: 9px; padding: 4px 10px; font-size: 12px; }
}

/* Process */
.band { background: var(--sand-2); }
.process .wrap { padding-block: 88px; display: flex; flex-direction: column; gap: 40px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.steps li { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.step-head { display: flex; align-items: center; gap: 12px; }
.step-head h3 { margin: 0; font-size: 20px; font-weight: 600; }
.num { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 3px solid var(--orange); background: var(--card); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.steps p { margin: 0; color: var(--ink-2); }
.step-photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; }
.included { background: var(--card); border-radius: 26px; padding: clamp(24px, 4vw, 40px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.included h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; margin: 0; }
/* Six items as an even grid, each on one line: 1 column on phones, 2 x 3 on laptops, 3 x 2 on wide screens.
   The list needs ~600px, so below that the price block drops underneath instead of squeezing it. */
.included-text { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.included ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px 48px; }
@media (min-width: 900px) { .included ul { grid-template-columns: repeat(2, max-content); } .included li { white-space: nowrap; } }
@media (min-width: 1500px) { .included ul { grid-template-columns: repeat(3, max-content); } }
.included li { display: flex; gap: 10px; align-items: center; }
.included li svg { color: var(--orange); flex: none; }
.from { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.from .k { font-size: 15px; color: var(--muted); }
.from .big { font-family: var(--sans); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.02em; }
.from .per { font: 16px var(--sans); color: var(--muted); }

/* Reviews */
.reviews .wrap { padding-block: 88px; display: flex; flex-direction: column; gap: 32px; }
.review-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.review-grid figure { flex: 1 1 300px; min-width: 0; margin: 0; background: var(--card); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.review-grid blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.4; }
.review-grid figcaption { font-size: 14px; color: var(--muted); }
.stars { color: var(--orange); letter-spacing: .1em; }
.rating-pill { font-weight: 600; border: 2px solid #FF385C; border-radius: 999px; padding: 8px 16px; }
.rating-pill .star { color: #FF385C; }
.guest-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.guest-strip > * { flex: 0 0 200px; width: 200px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; }
.guest-strip .ph { padding: 12px; font-size: 13px; }


/* Parties */
.parties { background: var(--green); color: var(--sand); }
.parties .wrap { padding-block: 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.parties-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.parties-text .eyebrow { color: var(--gold); }
.parties-text .h2 { color: var(--sand); }
.parties-text p { margin: 0; font-size: 18px; color: var(--green-muted); }
.party-perks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: clamp(17px, 1.2vw, 20px); font-weight: 500; }
.party-perks li { display: flex; align-items: center; gap: 14px; }
.party-perks svg { color: var(--gold); flex: none; }
.btn-whatsapp { align-self: flex-start; min-height: 48px; padding: 0 20px; font-size: 16px; border-color: var(--sand); color: var(--sand); }
.btn-whatsapp:hover { background: var(--sand); color: var(--green); }
/* Party form on a 6-column grid: Name + Email on row 1 (half each), date / group size / occasion on row 2 (a third each).
   When the form itself is narrow (phones), fields go full width and the two dropdowns share a row. */
.party-form { flex: 1 1 420px; min-width: 0; background: var(--card); color: var(--ink); border-radius: 24px; padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; container-type: inline-size; }
.party-form .half { grid-column: span 3; }
.party-form .third { grid-column: span 2; }
@container (max-width: 540px) { .party-form .half, .party-form .third { grid-column: 1 / -1; } .party-form .pair { grid-column: span 3; } }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { min-height: 46px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; font: 400 16px var(--sans); background: #fff; color: var(--ink); width: 100%; }
.field textarea { padding: 10px 12px; min-height: 80px; resize: vertical; }
/* Same height for every box. Safari draws dropdowns and date pickers with its own smaller style,
   so turn that off and draw our own arrow. */
.field input, .field select { height: 48px; min-height: 48px; line-height: normal; }
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232A1F17' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px 14px; }
/* Preferred date: our own calendar (the browser's built-in one can't be styled) */
.date-field { position: relative; }
.date-btn { height: 48px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; color: var(--ink); font: 400 16px var(--sans); text-align: left; cursor: pointer; }
.date-btn .placeholder { color: var(--muted); }
.date-btn svg { color: var(--muted); flex: none; }
.date-btn[aria-expanded="true"] { border-color: var(--ink); }
.cal { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 300px; max-width: calc(100vw - 32px); background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 20px; padding: 14px 14px 10px; box-shadow: 0 18px 40px rgba(42, 31, 23, .18); font-weight: 400; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cal-title { font-family: var(--sans); font-weight: 700; font-size: 17px; color: var(--green); } /* sans: the serif's numbers sit unevenly */
.cal-nav { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: var(--sand-2); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 0 6px; }
.cal-day { width: 100%; aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.cal-day:hover:not(:disabled) { background: var(--sand-2); }
.cal-day.today { box-shadow: inset 0 0 0 1.5px var(--green); }
.cal-day[aria-selected="true"], .cal-day[aria-selected="true"]:hover { background: var(--orange); color: #fff; box-shadow: none; }
.cal-day:disabled { color: #C9BCAB; cursor: default; }
.cal-foot { display: flex; justify-content: space-between; margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 6px; }
.cal-link { min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cal-link:hover { color: var(--orange-dark); }
.full { grid-column: 1 / -1; }
.form-msg { font-weight: 600; font-size: 15px; margin: 0; text-wrap: balance; } /* even lines: no single word left on its own */
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--green); }
.form-msg.err { color: var(--low); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Studio */
.studio .wrap { padding-block: 88px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.studio-photo { flex: 1 1 460px; min-width: 0; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 240px 240px 28px 28px; }
.studio-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.facts-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 28px; }
.facts-dl div { display: flex; flex-direction: column; gap: 4px; }
.facts-dl dt { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts-dl dd { margin: 0; }

/* FAQ */
.faq .wrap { padding-block: 88px; display: flex; flex-wrap: wrap; gap: 48px; }
.faq-head { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.faq-head p { margin: 0; color: var(--ink-2); }
.faq-list { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-list details { background: var(--card); border-radius: 16px; padding: 4px 22px; }
.faq-list summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 18px; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-size: 24px; font-weight: 400; line-height: 1; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list p { margin: 0 0 18px; color: var(--ink-2); }

/* Footer */
.site-footer { border-top: 2px dashed var(--orange); }
.site-footer .wrap { padding-block: 64px 28px; display: flex; flex-direction: column; gap: 48px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer-brand { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.footer-brand img { width: 100%; max-width: 320px; height: auto; }
.footer-col { flex: 0 1 180px; display: flex; flex-direction: column; gap: 10px; }
.footer-col .eyebrow { font-size: 13px; letter-spacing: .1em; }
.footer-col a { text-decoration: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1.5px dashed var(--line); padding-top: 22px; font-size: 14px; color: var(--muted); }
.footer-bottom a { color: var(--muted); }

/* Full calendar popup: month grid on the left, the picked day's classes on the right (stacked on phones) */
.sched-dialog { border: 0; border-radius: 24px; padding: 0; width: min(940px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(42, 31, 23, .35); }
.sched-dialog::backdrop { background: rgba(42, 31, 23, .55); }
/* Pinned near the top so it grows downward as guests are added */
.sched-dialog { margin: max(24px, 6vh) auto auto; max-height: calc(100dvh - max(24px, 6vh) - 24px); }
.sched-inner[hidden] { display: none; }
/* Step 2: checkout. Slides in from the right; Back slides the calendar in from the left */
.step-fwd { animation: stepFwd .3s ease both; }
.step-back { animation: stepBack .3s ease both; }
@keyframes stepFwd { from { opacity: 0; transform: translateX(32px); } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-32px); } }
@media (prefers-reduced-motion: reduce) { .step-fwd, .step-back { animation: none; } }
.co-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: -6px; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--green); font: 600 15px var(--sans); cursor: pointer; }
.back-btn:hover span { text-decoration: underline; text-underline-offset: 3px; }
.co-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; color: var(--green); line-height: 1.15; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.co-summary { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 18px; background: var(--sand); }
.co-summary h3 { margin: 0; font-size: 17px; font-weight: 700; }
.co-line { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.co-summary .btn { width: 100%; }
.co-summary .form-msg:empty { display: none; }
@media (max-width: 760px) { .co-grid { grid-template-columns: 1fr; gap: 24px; } .co-summary { position: static; } }
.sched-inner { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.sched-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.sched-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sched-cell { position: relative; aspect-ratio: 1; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font: 600 15px var(--sans); display: flex; align-items: center; justify-content: center; }
.sched-cell.past { color: #C9BCAB; }
.sched-cell.open { background: var(--date); color: var(--ink); cursor: pointer; }
.sched-cell.open::after, .sched-cell.soldout::after { content: ''; position: absolute; bottom: 18%; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sched-cell.soldout { background: var(--sand-2); color: var(--muted); cursor: pointer; }
.sched-cell.soldout::after { background: var(--muted); }
.sched-cell.open:hover { background: #F8D99A; }
.sched-cell.today { box-shadow: inset 0 0 0 1.5px var(--green); }
.sched-cell[aria-pressed="true"] { background: var(--orange); color: #fff; box-shadow: none; }
.sched-cell[aria-pressed="true"]::after { background: #fff; }
.sched-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.sched-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sched-legend i { width: 14px; height: 14px; border-radius: 4px; background: var(--date); }
.sched-legend i.soldout { background: var(--sand-2); }
.sched-day { border: 1.5px solid var(--sand-2); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.sched-day h3 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--green); }
.sched-day .hint { margin: 0; color: var(--muted); }
.sched-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--line); }
.sched-row .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sched-row .tm { font-weight: 700; }
.sched-row .nm { font-weight: 600; }
.sched-row .meta { font-size: 14px; color: var(--ink-2); }
.sched-row .meta .low { color: var(--low); font-weight: 600; }
.sched-row .btn { min-height: 44px; padding: 0 18px; font-size: 15px; flex: none; }
@media (max-width: 760px) {
  .sched-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .sched-inner { padding: 20px var(--gutter) 28px; }
  .sched-body { grid-template-columns: 1fr; gap: 20px; }
  .sched-cell { border-radius: 10px; }
}

/* Booking dialog */
.dialog-inner { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.dialog-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dialog-top h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--green); line-height: 1.15; }
.icon-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dialog-when { margin: 0; color: var(--ink-2); }
.qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1.5px solid var(--sand-2); border-radius: 16px; padding: 12px 16px; }
.qty-ctl { display: flex; align-items: center; gap: 12px; }
.qty-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; font: 600 22px var(--sans); color: var(--ink); cursor: pointer; }
.qty-ctl button:disabled { opacity: .35; cursor: default; }
.qty-ctl output { min-width: 28px; text-align: center; font-size: 20px; font-weight: 700; }
/* Reserve popup: one row per seat with full name + email or phone */
/* While a popup is open, the page behind it doesn't scroll */
html.modal-open, html.modal-open body { overflow: hidden; }
.guest-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.guest-fs legend { padding: 0; margin-bottom: 4px; font-weight: 700; font-size: 17px; }
.guest-rows { display: flex; flex-direction: column; }
/* Each row slides open/closed: the outer grid animates its one row from 0 to full height */
.guest-row { display: grid; grid-template-rows: 1fr; }
.guest-row-inner { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.guest-row + .guest-row .guest-row-inner { padding-top: 14px; }
.guest-row.entering { animation: rowIn .28s ease-out; }
.guest-row.leaving { animation: rowOut .22s ease-in forwards; }
.guest-row.entering .guest-row-inner, .guest-row.leaving .guest-row-inner { overflow: hidden; }
@keyframes rowIn { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
@keyframes rowOut { from { grid-template-rows: 1fr; opacity: 1; } to { grid-template-rows: 0fr; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .guest-row.entering, .guest-row.leaving { animation-duration: .01s; } }
.guest-row .g-num { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guest-row input[aria-invalid="true"] { border-color: var(--low); }
@media (max-width: 480px) { .guest-row-inner { grid-template-columns: 1fr; } }
.total-row { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; }
.fine { margin: 0; font-size: 13px; color: var(--muted); }

/* Booked page */
.booked .wrap { padding-block: clamp(28px, 6vw, 64px) 96px; max-width: calc(640px + 2 * var(--gutter)); } /* card itself up to 640px wide */
.booked-card { background: var(--card); border-radius: 26px; padding: clamp(24px, 5vw, 44px); display: flex; flex-direction: column; gap: 22px; box-shadow: 0 20px 50px rgba(42, 31, 23, .06); }
.booked-card h1 { font-family: var(--serif); font-weight: 400; color: var(--green); font-size: clamp(30px, 4.4vw, 42px); line-height: 1.1; margin: 0; text-wrap: balance; }
.booked-check { width: 56px; height: 56px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; }
.booked-head { display: flex; flex-direction: column; gap: 10px; }
.booked-head .lede { font-size: 17px; text-wrap: pretty; }
/* The booking summary: one row each for when, what and where */
.booked-list { list-style: none; margin: 0; padding: 4px 20px; background: var(--sand); border-radius: 18px; }
.booked-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; }
.booked-list li + li { border-top: 1px dashed var(--line); }
.booked-list svg { flex: none; color: var(--orange); margin-top: 1px; }
.booked-list li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.booked-list strong { font-size: 17px; font-weight: 600; }
.booked-list span { font-size: 15px; color: var(--ink-2); }
.booked-list a { align-self: flex-start; font-size: 15px; font-weight: 600; color: var(--green); text-underline-offset: 3px; }
.booked-note { margin: 0; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid var(--sand-2); border-radius: 14px; font-size: 15px; color: var(--ink-2); }
.booked-note svg { flex: none; color: var(--green); margin-top: 1px; }
.booked-card .fine a { color: inherit; }
.booked-card .ctas .btn { min-height: 48px; padding: 0 20px; font-size: 16px; }
@media (max-width: 480px) { .booked-card .ctas .btn { width: 100%; } }