@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");}

/* ─── Desa Hay pre-check-in ─────────────────────────────────────────────
   Same palette, type and spacing as the guest directory (DesaHay_Brand-
   Guidelines v1.0). Light-only by choice, so every guest sees the same page
   on any device. No external dependency of any kind — fonts are self-hosted
   and inlined by build.py.                                                   */

:root {
  --brown:  #5D5348;
  --beige:  #E0D1BC;
  --gold:   #BA9262;
  --forest: #354A44;
  --sage:   #90A187;
  --black:  #1C1B1A;

  --paper:      #F2EBDF;
  --paper-2:    #E9E0D1;
  --card:       #FFFFFF;
  --pill:       #F4EEE4;
  --header:     #26362F;
  --ink:        #26221E;
  --ink-soft:   #6B6157;
  --ink-faint:  #94897C;
  --rule:       rgba(93, 83, 72, .18);
  --rule-soft:  rgba(93, 83, 72, .10);
  /* A text box has no affordance except its outline, so that outline is a
     user-interface component and owes 3:1 (WCAG 1.4.11) — the decorative
     --rule above manages 1.32:1 on white and is not enough on its own.
     Measured worst case for this value is 3.23:1, on the warm paper ground.
     Choice rows keep --rule: there the radio itself carries the state. */
  --field-line: #8A8178;
  --accent:     #9A7444;
  /* --accent measures 3.67:1 on the pill ground the note block uses, so the
     note's small uppercase heading gets a darker gold: 4.79:1. */
  --accent-deep: #856235;
  /* The passport placeholder icon sits on the pill ground, where --ink-faint
     measures 2.97:1 — just under. It is decorative and could be argued
     exempt; a shade darker is easier than the argument, and reads better. */
  --ink-mark: #8E8376;
  --danger:     #9B3B2F;
  --shadow:     0 1px 2px rgba(60, 50, 40, .05), 0 8px 28px -18px rgba(60, 50, 40, .38);

  --on-dark:      #F6F1E8;
  --on-dark-soft: rgba(246, 241, 232, .74);

  color-scheme: light;

  --shell: 720px;
  --r: 3px;

  --step--1: clamp(.72rem, .70rem + .10vw, .78rem);
  --step-0:  clamp(.94rem, .90rem + .16vw, 1.02rem);
  --step-1:  clamp(1.06rem, 1.00rem + .26vw, 1.18rem);
  --step-2:  clamp(1.5rem, 1.32rem + .82vw, 2.05rem);
  --step-3:  clamp(2.1rem, 1.62rem + 2.2vw, 3.2rem);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Montserrat", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-underline-offset: .22em; }
::selection { background: var(--beige); color: var(--black); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.display {
  font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  font-weight: 300;
  letter-spacing: .005em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
.label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
}

/* ─── the gate ─────────────────────────────────────────────────────────── */
/* A full-bleed photograph with the card floated over it, the same shape a
   guest has already seen on the booking confirmation. */

.gate {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  padding: 24px 20px;
  background: var(--header);
}
.gate__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.gate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(28,27,26,.44), rgba(28,27,26,.60));
}
@media (min-width: 900px) {
  .gate { grid-template-columns: 1fr minmax(0, 460px); padding: 40px clamp(28px, 5vw, 72px); gap: 40px; }
  .gate::after { background: linear-gradient(90deg, rgba(28,27,26,.62) 30%, rgba(28,27,26,.30)); }
}

.gate__brand { position: relative; z-index: 2; color: var(--on-dark); display: none; }
@media (min-width: 900px) { .gate__brand { display: block; max-width: 30ch; } }
.gate__brand img { width: 190px; margin-bottom: 26px; }
.gate__brand h1 { font-size: var(--step-3); color: var(--on-dark); margin: 0 0 14px; }
.gate__brand p { color: var(--on-dark-soft); margin: 0; }

.gate__card {
  position: relative; z-index: 2;
  background: var(--card);
  border-radius: 4px;
  padding: clamp(26px, 5vw, 38px);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .55);
  width: min(440px, 100%);
  margin: 0 auto;
}

/* The form holds the rows, so the form is the grid — not the card. The card
   wraps a single <form> child, so a gap set on the card spaced nothing and
   every `.gate__card > …` selector missed by one level. */
.gate__card form { display: grid; gap: 17px; }

.gate__card img.gate__logo { width: 116px; margin: 0 auto 2px; }
@media (min-width: 900px) { .gate__card img.gate__logo { display: none; } }
.gate__card h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: var(--step-2); margin: 0; }
/* the explanation under the heading — tucked up against it, since the two
   are one thought */
.gate__card h2 + p { margin: -9px 0 1px; color: var(--ink-soft); font-size: .92rem; }

/* A little more air above the button than between the fields: it is the end
   of the form, not another row of it. */
.gate__card button[type="submit"] { margin-top: 5px; }

.gate__foot {
  margin: 6px 0 0; font-size: .82rem; color: var(--ink-faint); line-height: 1.6;
  border-top: 1px solid var(--rule-soft); padding-top: 15px;
}
.gate__foot a { color: var(--accent); }

/* ─── fields ───────────────────────────────────────────────────────────── */

.field { display: grid; gap: 6px; align-content: start; }
.field > .lab {
  font-size: .95rem; font-weight: 500; line-height: 1.45; color: var(--ink);
}
.field .req { color: var(--accent); margin-left: 2px; }
.field small {
  color: var(--ink-soft); font-size: .82rem; line-height: 1.55; display: block;
}
.field small.err { color: var(--danger); font-weight: 500; }

input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=time], input[type=date], input[type=number], textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--field-line);
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;                 /* 16px minimum, or iOS zooms on focus */
  line-height: 1.45;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=time], input[type=date], input[type=number], select { height: 46px; }
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
input:hover, textarea:hover, select:hover { border-color: var(--brown); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154, 116, 68, .13);
  outline: none;
}
input.is-bad, textarea.is-bad, select.is-bad { border-color: var(--danger); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B6157' stroke-width='1.6' stroke-linecap='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}

/* ─── choices ──────────────────────────────────────────────────────────── */
/* Whole-row targets, because half of these are answered one-handed on a
   phone in an airport. */

.choices { display: grid; gap: 8px; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  background: var(--card);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.choice:hover { border-color: var(--gold); background: var(--pill); }
.choice.is-on { border-color: var(--forest); background: #F1F4F1; }
.choice input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--forest); cursor: pointer; flex: none; }
.choice__lab { font-size: .95rem; line-height: 1.5; }
.choice__sub { display: block; color: var(--ink-soft); font-size: .82rem; margin-top: 2px; }

/* ─── the note block ───────────────────────────────────────────────────── */

.note {
  background: var(--pill);
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--gold);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: .9rem; line-height: 1.65; color: var(--ink-soft);
}
.note strong { color: var(--ink); font-weight: 600; }
.note__title {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: 5px;
}

/* ─── the people repeater ──────────────────────────────────────────────── */

.people { display: grid; gap: 10px; }
.person {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); padding: 14px 15px; display: grid; gap: 11px;
}
.person__head { display: flex; align-items: center; gap: 10px; }
.person__n {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-soft); margin-right: auto;
}
.person__grid { display: grid; gap: 11px; }
@media (min-width: 560px) { .person__grid--2 { grid-template-columns: 1fr 1fr; } }

/* ─── the experiences picker ───────────────────────────────────────────── */

.exp { display: grid; gap: 8px; }
.exp__row {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 15px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.exp__row:hover { border-color: var(--gold); background: var(--pill); }
.exp__row.is-on { border-color: var(--forest); background: #F1F4F1; }
.exp__row input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--forest); cursor: pointer; }
.exp__name { font-size: .95rem; font-weight: 500; line-height: 1.4; }
.exp__meta {
  display: block; margin-top: 3px;
  font-size: .8rem; color: var(--accent); letter-spacing: .02em;
}

/* ─── shell ────────────────────────────────────────────────────────────── */

.head {
  background: var(--header);
  color: var(--on-dark);
  padding: 18px 20px 16px;
}
.head__in {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.head__logo { width: 104px; flex: none; }
.head__who { margin-left: auto; text-align: right; min-width: 0; }
.head__name {
  font-size: .88rem; font-weight: 500; color: var(--on-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head__out {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--on-dark-soft); font: inherit; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 0; text-decoration: underline;
}
.head__out:hover { color: var(--on-dark); }

/* the step rail */
.rail { background: var(--header); padding: 0 20px 4px; }
.rail__in {
  max-width: var(--shell); margin: 0 auto;
  display: flex; gap: 4px;
}
.rail__step {
  flex: 1 1 0; min-width: 0;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 6px 0 12px; text-align: left; color: var(--on-dark-soft);
  display: grid; gap: 7px;
}
.rail__step:disabled { cursor: default; }
.rail__bar { height: 2px; border-radius: 2px; background: rgba(246, 241, 232, .24); }
.rail__step.is-done .rail__bar { background: var(--sage); }
.rail__step.is-on .rail__bar { background: var(--gold); }
.rail__lab {
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__step.is-on .rail__lab { color: var(--on-dark); }
.rail__step:hover:not(:disabled) .rail__lab { color: var(--on-dark); }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 20px 48px; }

.intro { padding: 30px 0 4px; }
.intro__eyebrow { color: var(--accent); margin: 0 0 8px; }
.intro h1 { font-size: var(--step-3); margin: 0 0 14px; }
.intro p { margin: 0; color: var(--ink-soft); max-width: 56ch; }
.intro__stay {
  margin-top: 20px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: baseline;
}
.intro__stay div { display: grid; gap: 1px; }
.intro__stay dt {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint);
}
.intro__stay dd { margin: 0; font-size: .95rem; font-weight: 500; }

.step { padding: 26px 0 0; }
.step__head { margin-bottom: 20px; }
.step__title { font-size: var(--step-2); margin: 0 0 8px; }
.step__intro { margin: 0; color: var(--ink-soft); max-width: 58ch; font-size: .95rem; }

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3.6vw, 28px);
  display: grid; gap: 22px;
}

/* ─── review ───────────────────────────────────────────────────────────── */

.rev { display: grid; gap: 0; }
.rev__sec { border-top: 1px solid var(--rule-soft); padding: 16px 0 4px; }
.rev__sec:first-child { border-top: 0; padding-top: 0; }
.rev__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rev__title {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-faint); margin-right: auto;
}
.rev__edit {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); text-decoration: underline; padding: 2px 0;
}
.rev__rows { display: grid; gap: 9px; margin: 0; }
.rev__row { display: grid; gap: 2px; }
@media (min-width: 620px) {
  .rev__row { grid-template-columns: 15rem minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
}
.rev__q { color: var(--ink-soft); font-size: .88rem; }
.rev__a { font-weight: 500; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.rev__a.is-empty { font-weight: 400; color: var(--ink-faint); font-style: italic; }

/* ─── the action row ───────────────────────────────────────────────────── */
/* It sits at the end of the form, not pinned to the viewport. A sticky bar
   floated over the last question's helper text — the guest could not read
   the thing they were being asked about, which is worse than a button that
   needs a scroll to reach. */

.bar {
  margin-top: 26px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.bar__in {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* On a narrow screen the primary label ("Send to Desa Hay") is too wide to
   share a line, so it takes its own and fills it rather than wrapping to a
   stranded left-aligned button. */
@media (max-width: 479px) {
  .bar__in .btn--primary { flex: 1 1 100%; justify-content: center; }
}
.bar__note { font-size: .78rem; color: var(--ink-faint); margin-right: auto; }
.bar__note.is-saved { color: var(--forest); }

.btn {
  appearance: none; cursor: pointer; font: inherit;
  padding: 12px 22px; border-radius: 999px;
  border: 1px solid var(--brown);
  background: transparent; color: var(--ink);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--paper-2); }
.btn--primary { background: var(--gold); border-color: var(--gold); color: #22201D; }
.btn--primary:hover { background: var(--gold); filter: brightness(1.07); }
.btn--primary:disabled { opacity: .5; cursor: default; filter: none; }
.btn--ghost { border-color: transparent; color: var(--ink-soft); padding-left: 8px; padding-right: 8px; }
.btn--ghost:hover { background: transparent; color: var(--ink); text-decoration: underline; }
.btn--wide { width: 100%; justify-content: center; }
.btn--sm { padding: 9px 16px; }

.alert {
  background: #FBF3E4; border: 1px solid rgba(186, 146, 98, .5);
  border-left: 2px solid var(--gold);
  border-radius: var(--r); padding: 12px 15px;
  font-size: .88rem; line-height: 1.6; color: var(--ink); margin: 0;
}
.alert--bad { background: #FBEEEB; border-color: rgba(155, 59, 47, .38); border-left-color: var(--danger); }

/* ─── the thank-you screen ─────────────────────────────────────────────── */

.done { padding: clamp(40px, 9vw, 80px) 0 40px; text-align: center; display: grid; justify-items: center; gap: 16px; }
.done__mark {
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--forest); color: var(--on-dark);
  display: grid; place-items: center; margin-bottom: 4px;
}
.done__mark svg { width: 27px; height: 27px; }
.done h1 { font-size: var(--step-3); margin: 0; }
.done p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.done__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

.foot {
  border-top: 1px solid var(--rule);
  padding: 24px 0 34px; margin-top: 40px;
  text-align: center; color: var(--ink-faint); font-size: .82rem; line-height: 1.7;
}
.foot a { color: var(--ink-soft); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 18px);
  background: var(--black); color: var(--on-dark);
  padding: 11px 20px; border-radius: 999px; font-size: var(--step--1); letter-spacing: .06em;
  opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; z-index: 90;
  max-width: calc(100% - 40px); text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { background: var(--danger); }

.spin {
  width: 15px; height: 15px; border-radius: 999px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ─── passport photographs ─────────────────────────────────────────────── */
/* Two ways in, because half of these are filled in on a phone where the
   camera is the obvious answer, and half on a laptop where it is not. */

.person__doc { border-top: 1px dashed var(--rule); padding-top: 13px; margin-top: 2px; }

.doc { display: grid; gap: 10px; }

.doc__empty {
  display: grid; justify-items: center; gap: 12px;
  padding: 20px 16px;
  border: 1px dashed var(--field-line);
  border-radius: var(--r);
  background: var(--pill);
}
.doc__mark { color: var(--ink-mark); }
.doc__mark svg { width: 34px; height: 34px; display: block; }
.doc__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.doc__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.doc__busy {
  display: flex; align-items: center; gap: 7px;
  font-size: .84rem; color: var(--ink-soft);
}

.doc__have {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px;
  border: 1px solid var(--forest);
  border-radius: var(--r);
  background: #F1F4F1;
}
.doc__thumb {
  width: 62px; height: 46px; object-fit: cover; flex: none;
  border-radius: 2px; border: 1px solid var(--rule);
  background: var(--card);
}
.doc__pdf {
  width: 62px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 2px; border: 1px solid var(--rule); background: var(--card);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft);
}
.doc__info { display: grid; gap: 1px; min-width: 0; margin-right: auto; }
.doc__name {
  font-size: .9rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc__size { font-size: .76rem; color: var(--ink-soft); }