/* ============================================================
   ZAYMAR — pages/enquire.css
   The enquiry: one ivory page, the statement set, a form in the
   house's own hairline language.
   ============================================================ */
.enquire { min-height: 100svh; display: grid; align-content: center; }
/* .stmt supplies the statement rhythm (its gap variables) and the centred column */
.enquire__in { width: 100%; }
.enquire__title { max-width: 10em; }
.enquire__lede { max-width: 30em; }

.enquire__form {
  width: min(100%, 34rem);
  margin-top: var(--stmt-gap-body);
  text-align: left;
}
.enquire__field + .enquire__field { margin-top: var(--sp-l); }
.enquire__label { display: block; color: var(--fg2); margin-bottom: var(--sp-xs); }
.enquire__input {
  width: 100%;
  padding: var(--sp-s) 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: var(--hairline) solid var(--fg2);
  border-radius: 0;
  transition: border-color var(--dur-state) var(--ease-enter);
}
/* placeholders are a whisper: smaller than the entry they invite, and
   set well back from it */
.enquire__input::placeholder { color: var(--fg3); opacity: 0.6; font-size: var(--fs-body); }
.enquire__input:focus { outline: none; border-bottom-color: var(--accent); }
.enquire__input:focus-visible { outline: none; }
.enquire__select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--sp-l);
}
/* the message field starts as two lines, its rule close beneath the
   prompt, and grows as the visitor writes */
.enquire__textarea { resize: vertical; min-height: 4.25rem; line-height: 1.6; field-sizing: content; }
.enquire__submit { margin-top: var(--sp-xl); width: 100%; }
.enquire__note { margin-top: var(--sp-m); text-align: center; }
.enquire__hint { margin-top: var(--sp-xs); }
.enquire__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The sent state. It is hidden until Netlify has taken the form and
   sent the visitor back with ?sent=1; the [hidden] rule below has to
   be explicit, because a display value of our own would otherwise
   outrank the attribute and show it at all times. When it shows, the
   title, the line and the form step aside and it takes the statement's
   place under the kicker. */
.enquire__sent { display: flex; flex-direction: column; align-items: center; gap: var(--sp-l); margin-top: calc(var(--stmt-gap-lead) + var(--sp-l)); }
.enquire__sent[hidden] { display: none; }
.enquire__sent-title { margin-top: 0; }
.enquire__sent .stmt__para { margin-top: 0; max-width: 26em; }
.enquire__sent .cta { margin-top: var(--sp-s); }
.enquire.is-sent .enquire__title,
.enquire.is-sent .enquire__lede,
.enquire.is-sent .enquire__form { display: none; }

@media (min-width: 56.01em) {
  .enquire__submit { width: auto; min-width: 16rem; }
  /* the note sits with the button: left, at the button's own margin */
  .enquire__note { text-align: left; margin-top: var(--sp-s); padding-left: var(--sp-2xs); }
}

/* ==== The reservation ====
   Three quiet steps in the house's hairline language: tap a bottle,
   tap a when, leave a way to be reached. */
.rsv__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.rsv__step + .rsv__step { margin-top: var(--sp-xl); }
.rsv .enquire__label { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-s); padding: 0; }
.rsv__n {
  display: inline-grid; place-items: center;
  width: 1.4rem; height: 1.4rem;
  border: var(--hairline) solid var(--accent);
  border-radius: 50%;
  font-size: 0.625rem; letter-spacing: 0; color: var(--accent);
}

.rsv__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.rsv__tile { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rsv__tile input,
.rsv__pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rsv__photo {
  display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #F0F0F0;
  outline: var(--hairline) solid transparent; outline-offset: 0;
  transition: outline-color var(--dur-state) var(--ease-enter), outline-offset var(--dur-state) var(--ease-enter);
}
.rsv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.35); transition: transform 600ms var(--ease-enter); }
.rsv__name {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.6rem;
  font-family: var(--font-sans); font-weight: 500; font-size: 0.75rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg2);
  transition: color var(--dur-state) var(--ease-enter);
}
/* the mark: an empty ring, filled with a tick when chosen */
.rsv__name::after {
  content: ''; flex: none; width: 0.95rem; height: 0.95rem;
  border: var(--hairline) solid var(--fg2); border-radius: 50%;
  background: transparent center / 60% no-repeat;
  transition: background-color var(--dur-state) var(--ease-enter), border-color var(--dur-state) var(--ease-enter);
}
.rsv__tile input:checked + .rsv__photo { outline-color: var(--fg); outline-offset: 4px; }
.rsv__tile input:checked + .rsv__photo img { transform: scale(1.42); }
.rsv__tile input:checked ~ .rsv__name { color: var(--fg); }
.rsv__tile input:checked ~ .rsv__name::after {
  border-color: var(--fg); background-color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23FAF8F4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.rsv__tile input:focus-visible + .rsv__photo { outline-color: var(--accent); outline-offset: 4px; }

.rsv__pills { display: flex; flex-direction: column; gap: 0.6rem; }
.rsv__pill span {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.95rem 1.1rem;
  border: var(--hairline) solid var(--line, rgba(13, 11, 9, 0.16));
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-body-lg);
  color: var(--fg); cursor: pointer;
  transition: border-color var(--dur-state) var(--ease-enter), background-color var(--dur-state) var(--ease-enter), color var(--dur-state) var(--ease-enter);
}
.rsv__pill span::before {
  content: ''; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%;
  border: var(--hairline) solid var(--fg2);
  box-shadow: inset 0 0 0 3px transparent;
  transition: box-shadow var(--dur-state) var(--ease-enter), border-color var(--dur-state) var(--ease-enter);
}
.rsv__pill input:checked + span { border-color: var(--fg); background: rgba(13, 11, 9, 0.035); }
.rsv__pill input:checked + span::before { border-color: var(--fg); box-shadow: inset 0 0 0 3px var(--z-ivory), inset 0 0 0 10px var(--fg); }
.rsv__pill input:focus-visible + span { border-color: var(--accent); }

.rsv .enquire__field + .enquire__field { margin-top: var(--sp-m); }
.rsv__err { margin-top: var(--sp-s); color: #8A3B2E; letter-spacing: 0.08em; }
.rsv__err[hidden] { display: none; }
.rsv .enquire__submit { margin-top: var(--sp-xl); }

@media (min-width: 56.01em) {
  .enquire__form.rsv { width: min(100%, 46rem); }
  .rsv__tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .rsv__pills { flex-direction: row; }
  .rsv__pill { flex: 1; }
  .rsv__pill span { height: 100%; }
  .rsv__tile:hover .rsv__photo img { transform: scale(1.42); }
}

/* ==== Reservation, refined ====
   Whole photographs (2:3, never cropped), a tighter statement above,
   steps in an even rhythm, and lighter choices. */
.enquire:has(.rsv) { align-content: start; padding-top: calc(var(--header-h) + var(--sp-l)); padding-bottom: var(--sp-2xl, 4rem); }
.enquire:has(.rsv) .stmt__kicker { margin-bottom: 0; }
.enquire:has(.rsv) .enquire__title { margin-top: var(--sp-s); font-size: clamp(2.25rem, 9vw, 3.5rem); }
.enquire:has(.rsv) .enquire__lede { margin-top: var(--sp-s); font-size: 1rem; line-height: 1.65; max-width: 24em; }
.enquire__form.rsv { margin-top: var(--sp-xl); }

.rsv__step + .rsv__step { margin-top: var(--sp-l); padding-top: var(--sp-l); border-top: var(--hairline) solid var(--line, rgba(13, 11, 9, 0.1)); }
.rsv .enquire__label { margin-bottom: var(--sp-m); }

.rsv__tiles { gap: 1.25rem 0.875rem; }
.rsv__photo { aspect-ratio: 2 / 3; background: transparent; }
.rsv__photo img,
.rsv__tile input:checked + .rsv__photo img,
.rsv__tile:hover .rsv__photo img { object-fit: contain; object-position: center; transform: none; }
.rsv__tile input:checked + .rsv__photo { outline-offset: 3px; }
.rsv__name { margin-top: 0.7rem; font-size: 0.6875rem; letter-spacing: 0.14em; }

.rsv__pills { gap: 0.5rem; }
.rsv__pill span { padding: 0.8rem 1rem; font-size: 1.0625rem; }

.rsv .enquire__input { font-size: 1.0625rem; padding: 0.7rem 0; }
.rsv .enquire__submit { margin-top: var(--sp-l); min-height: 3.25rem; }

@media (min-width: 56.01em) {
  .enquire:has(.rsv) .stmt { align-items: center; }
  .rsv__tiles { gap: 1.25rem; }
  .rsv__pill span { justify-content: flex-start; }
}
/* the step titles taken out of the fieldset's border, so the hairline
   between steps runs clean and the choices follow close beneath */
.rsv__step > legend { float: left; width: 100%; }
.rsv__step > legend + * { clear: both; }
@media (min-width: 56.01em) {
  .rsv__pill span { font-size: 1rem; white-space: nowrap; padding-inline: 1rem; }
  .rsv .enquire__submit { width: 100%; }
  .rsv .enquire__note { text-align: center; padding-left: 0; }
}

/* ---- The reservation's head: no rule, a quiet label, the title, a line ---- */
.enquire:has(.rsv) .rsv__kicker {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-sans); font-style: normal; font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--z-bronze, #8A6D3B);
}
.enquire:has(.rsv) .rsv__kicker::before { display: none; }
.rsv__kicker-ar { font-family: var(--font-ar-text); font-size: 0.9375rem; letter-spacing: 0; text-transform: none; }
.rsv__dot { letter-spacing: 0; }
.enquire:has(.rsv) .enquire__title {
  margin-top: var(--sp-m);
  font-weight: 300;
  font-size: clamp(2.5rem, 11vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.enquire:has(.rsv) .enquire__lede {
  margin-top: var(--sp-m);
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 21em;
  color: var(--fg2);
}
.enquire:has(.rsv) { padding-top: calc(var(--header-h) + var(--sp-xl)); }
.enquire__form.rsv { margin-top: var(--sp-xl); }
.enquire:has(.rsv) .rsv__kicker::after { display: none; }
.enquire:has(.rsv) .rsv__kicker { border: 0; padding: 0; }
/* the title's descenders (the y) kept whole: room below the line, and
   any reveal mask given the same room */
.enquire:has(.rsv) .enquire__title { line-height: 1.12; padding-bottom: 0.08em; overflow: visible; }
.enquire:has(.rsv) .enquire__title > * { padding-bottom: 0.18em; margin-bottom: -0.18em; }
@media (min-width: 56.01em) {
  .enquire__form.rsv { width: min(100%, 60rem); }
  .rsv__tiles { gap: 1.5rem; }
  .rsv__pill span { padding: 1.05rem 1.25rem; font-size: 1.0625rem; }
  .rsv .enquire__input { font-size: 1.125rem; }
}
.enquire__form.rsv { margin-top: var(--sp-l); }
.rsv__opt { margin-left: auto; letter-spacing: 0.14em; color: var(--fg3, #8a8378); font-size: 0.625rem; }

/* the vial: a short note, then five compact choices, two to a row with
   the last ("Let the house choose") across the full width */
.rsv__hint { margin: -0.35rem 0 var(--sp-m); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 0.9375rem; color: var(--fg2); clear: both; }
.rsv__pills--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.rsv__pills--grid .rsv__pill:last-child { grid-column: 1 / -1; }
.rsv__pill--sm span { padding: 0.75rem 0.9rem; font-size: 1rem; gap: 0.65rem; }
@media (min-width: 56.01em) {
  .rsv__pills--grid { grid-template-columns: repeat(4, 1fr); }
  .rsv__pill--sm span { white-space: nowrap; }
}
@media (max-width: 56em) { .rsv__pill--sm span { white-space: nowrap; font-size: 0.9375rem; padding: 0.75rem 0.75rem; gap: 0.55rem; } }
.rsv__pills--grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 56.01em) { .rsv__pills--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* (small-phone pill size retired: the phone type scale follows the width) */

/* the note shown if a reservation could not be sent; what was typed stays */
.enquire__fail { margin-top: var(--sp-s); font-size: 0.875rem; line-height: 1.5; color: #8A3B2E; text-align: center; }
.enquire__fail[hidden] { display: none; }

/* ---- The thank-you, as a card from the house (2026-10-12) ----
   Once the reservation is sent, the page becomes one quiet card on the
   ivory, framed like the Chapter I card: a double gold keyline with
   heavier corners, a gold label, the line in the display face, the
   house lozenge between two short rules, and the way back. */
.enquire.is-sent .enquire__kicker, .enquire.is-sent .rsv__kicker { display: none; }
.enquire.is-sent { min-height: 100svh; display: grid; place-items: center; }
.enquire__sent {
  position: relative;
  width: min(100%, 34rem);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 4.5rem) clamp(1.75rem, 6vw, 3.5rem);
  gap: 0;
  text-align: center;
  background: var(--z-ivory);
  border: 1px solid rgba(169, 143, 85, 0.55);
  outline: 1px solid rgba(169, 143, 85, 0.3);
  outline-offset: -10px;
  --c: rgba(130, 102, 58, 0.85);
  background-image:
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c)),
    linear-gradient(var(--c), var(--c)), linear-gradient(var(--c), var(--c));
  background-size: 1.75rem 2px, 2px 1.75rem, 1.75rem 2px, 2px 1.75rem, 1.75rem 2px, 2px 1.75rem, 1.75rem 2px, 2px 1.75rem;
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-repeat: no-repeat;
  animation: sent-in 900ms var(--ease-enter) both;
}
@keyframes sent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .enquire__sent { animation: none; } }
html[data-motion='off'] .enquire__sent { animation: none; }
.enquire__sent-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--z-bronze);
  display: inline-flex; align-items: center; gap: 0.9em;
}
.enquire__sent-label span { font-family: var(--font-ar-text); font-size: 1.35em; letter-spacing: 0; text-transform: none; }
.enquire__sent-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--z-ink);
}
.enquire__sent-rule {
  display: block; position: relative;
  width: 7.5rem; height: 1px; margin: 1.75rem auto 0;
  background: linear-gradient(to right, transparent, rgba(169, 143, 85, 0.7) 30%, rgba(169, 143, 85, 0.7) 40%, transparent 40%, transparent 60%, rgba(169, 143, 85, 0.7) 60%, rgba(169, 143, 85, 0.7) 70%, transparent);
}
.enquire__sent-rule::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; border: 1px solid rgba(169, 143, 85, 0.9);
  transform: translate(-50%, -50%) rotate(45deg);
}
.enquire__sent-line {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--z-brown, #5A4A3A);
  max-width: 22em; margin-inline: auto;
}
.enquire__sent .enquire__sent-cta { margin-top: 2.25rem; }
/* the card stands in the middle of the screen, below the header */
.enquire.is-sent > .container { min-height: calc(100svh - var(--header-h) - 4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* the card, larger: it fills most of the screen (2026-10-12) */
.enquire__sent { width: min(100%, 52rem); min-height: min(68svh, 40rem); justify-content: center; padding: clamp(3.5rem, 10vw, 6rem) clamp(1.75rem, 7vw, 5rem); background-size: 2.75rem 2px, 2px 2.75rem, 2.75rem 2px, 2px 2.75rem, 2.75rem 2px, 2px 2.75rem, 2.75rem 2px, 2px 2.75rem; outline-offset: -12px; }
.enquire__sent-label { font-size: 0.8125rem; }
.enquire__sent-title { margin-top: 2rem; font-size: clamp(2.5rem, 9vw, 4.5rem); }
.enquire__sent-rule { width: 10rem; margin-top: 2.25rem; }
.enquire__sent-line { margin-top: 2rem; font-size: clamp(1.125rem, 4.6vw, 1.375rem); max-width: 24em; }
.enquire__sent .enquire__sent-cta { margin-top: 3rem; }
@media (max-width: 30em) { .enquire__sent { min-height: 72svh; } }
.enquire__sent-line { max-width: 30em; }
/* the card fills the screen below the header, with an even margin on
   every side, and stands exactly in its centre (2026-10-12) */
.enquire.is-sent { display: block; min-height: 0; padding: var(--header-h) 0 0; }
.enquire.is-sent > .container { height: calc(100svh - var(--header-h)); min-height: 0; padding-block: clamp(1.5rem, 4vh, 3rem); justify-content: center; }
.enquire.is-sent .enquire__sent { width: min(100%, 64rem); height: 100%; max-height: 46rem; min-height: 0; }
@media (max-width: 30em) { .enquire.is-sent .enquire__sent { max-height: none; } }
/* the reassurance sits centred under the full width of the button */
.rsv .enquire__note { display: block; width: 100%; max-width: none; margin-inline: 0; padding-left: 0; text-align: center; text-indent: 0; }