/* =========================================================
   PKO @ 50 : 50 Shades of Love
   Ivory and antique gold. Cinzel for titles, Lato for the rest.
   Mobile first.
   ========================================================= */

:root {
  --paper:      #f6f1e7;
  --paper-2:    #fffdf8;
  --paper-3:    #f1ead9;

  --line:       #e2d9c5;
  --line-soft:  #ece5d5;

  --gold:       #8f6f22;
  --gold-hi:    #b8933f;
  --gold-lo:    #6f5416;

  --ink:        #2f2718;
  --ink-soft:   #6b6150;
  --muted:      #8a7d63;

  --no:         #a35c3c;
  --danger:     #a8452a;

  --radius:     18px;
  --radius-sm:  12px;

  --serif: "Cinzel", "Times New Roman", Georgia, serif;
  --sans:  "Lato", "Helvetica Neue", Arial, sans-serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* The hidden attribute has to win, even against a display declared on a class.
   The two have the same specificity, so without this the country sheet stays in
   the layout at opacity 0 and intercepts clicks meant for the form. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  overflow-x: hidden;
}

body.no-scroll { overflow: hidden; }

/* ---- Warm paper wash ----------------------------------------------------- */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% -8%,  rgba(184,147,63,.16), transparent 55%),
    radial-gradient(circle at 8% 42%,   rgba(184,147,63,.07), transparent 45%),
    radial-gradient(circle at 96% 76%,  rgba(184,147,63,.09), transparent 48%),
    radial-gradient(circle at 50% 104%, rgba(143,111,34,.08), transparent 55%);
}

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(246, 241, 231, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold);
}
.wordmark .at { font-size: .9em; }

.lang-toggle {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.lang-toggle:active { transform: scale(.97); }
.lang-toggle:hover { background: var(--gold); border-color: var(--gold); color: #fff8e6; }

/* ---- Layout -------------------------------------------------------------- */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 18px calc(48px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 20px;
  box-shadow: 0 1px 2px rgba(88, 70, 30, .04), 0 18px 40px -32px rgba(88, 70, 30, .45);
}

/* ---- Hero ---------------------------------------------------------------- */

/* The poster is black and gold and the page is ivory, so it is framed like a
   printed card: a thin gold rule, a warm mount, and a soft drop shadow. */
.hero { padding: 6px; }

.poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(143, 111, 34, .45);
  outline: 6px solid var(--paper-2);
  outline-offset: 0;
  box-shadow:
    0 0 0 7px rgba(143, 111, 34, .16),
    0 26px 50px -26px rgba(60, 46, 18, .55);
}

/* ---- Hero slideshow ------------------------------------------------------
   The frame keeps the poster's own proportions, so the poster is never
   cropped. The photographs are covered into the same frame. */
.show-frame {
  position: relative;
  aspect-ratio: 1052 / 1331;   /* the poster's own shape, so it is never cropped */
  overflow: hidden;
  background: var(--paper-3);
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  transform: scale(1.06);
  z-index: 1;
  /* Leaving. The old picture holds still and stays lit underneath while the
     new one fades in on top of it, then drops out in one step once it is
     hidden. Fading both at once would make them see through each other. */
  transition: opacity 0s linear 1.1s, transform 0s linear 1.1s;
}
.slide.is-on {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
  /* Arriving. The fade is short, the drift is long: the picture keeps
     moving for the whole time it is on screen. */
  transition: opacity 1.1s ease, transform 7s linear;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dot::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(143, 111, 34, .3);
  transition: background .3s ease, transform .3s ease;
}
.dot.is-on::after { background: var(--gold); transform: scale(1.4); }
.dot:hover::after { background: var(--gold-lo); }
.dot:focus-visible::after { box-shadow: 0 0 0 3px rgba(184, 147, 63, .35); }

@media (prefers-reduced-motion: reduce) {
  .slide { transform: none; transition: opacity 0s linear .25s; }
  .slide.is-on { transform: none; transition: opacity .25s ease; }
}

.poster-fallback {
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 36%, rgba(184,147,63,.14), transparent 62%),
    linear-gradient(180deg, var(--paper-2), var(--paper-3));
  text-align: center;
  padding: 30px;
}
.poster-title {
  font-family: var(--serif);
  font-size: clamp(40px, 13vw, 70px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--gold);
}
.poster-rule {
  width: 58%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
}
.poster-sub {
  font-family: var(--serif);
  font-size: clamp(13px, 3.8vw, 19px);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

/* ---- Invitation ---------------------------------------------------------- */
.kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Cinzel has no lowercase, so a running sentence is set in Lato instead.
   Cinzel stays for the short lockups and values. */
.invite .kicker { text-align: center; }

.headline {
  margin: 0 0 24px;
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(24px, 6.4vw, 30px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}

.details { margin: 0 0 22px; }

.details .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 0;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.details .row:first-child { border-top: 1px solid var(--line-soft); }

.details dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.details dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

/* ---- Buttons ------------------------------------------------------------- */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn-ghost:hover { background: var(--gold); color: #fff8e6; }
.btn-ghost:active { transform: scale(.99); }

.btn-gold {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #fff8e6;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(143, 111, 34, .9);
  transition: background .2s ease, transform .12s ease;
}
.btn-gold:hover:not(:disabled) { background: var(--gold-lo); }
.btn-gold:active:not(:disabled) { transform: scale(.985); }
.btn-gold:disabled {
  background: var(--paper-3);
  color: rgba(107, 97, 80, .55);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-gold .spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 248, 230, .35);
  border-top-color: #fff8e6;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn-gold.is-loading .spinner { display: block; }
.btn-gold.is-loading { pointer-events: none; opacity: .92; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Form ---------------------------------------------------------------- */
/* The top bar is sticky, so anything scrolled to must stop below it. */
.form-card { scroll-margin-top: 78px; }

.form-title {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
}
.form-intro {
  margin: 0 0 24px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.form-intro:empty { display: none; }

.field { margin-bottom: 20px; }

.field > label,
.field > .label {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"],
input[type="tel"],
input[type="search"] {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder { color: #a99e8a; }
input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(143, 111, 34, .14);
}

.field.is-valid input { border-color: rgba(143, 111, 34, .5); }
.field.is-error input,
.field.is-error .dial-btn { border-color: var(--danger); }

.help {
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.error {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  color: var(--danger);
  opacity: 0;
  transition: max-height .22s ease, opacity .22s ease, margin .22s ease;
}
.error.show {
  max-height: 60px;
  margin-top: 8px;
  opacity: 1;
}
.form-error { text-align: center; }

/* ---- Phone group --------------------------------------------------------- */
.phone-group { display: flex; gap: 10px; }

.dial-btn {
  flex: 0 0 auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 54px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.dial-btn:hover { border-color: var(--gold); }
.dial-btn:active { transform: scale(.985); }
.dial-btn .flag { font-size: 20px; line-height: 1; }
.dial-btn .dial { font-weight: 400; white-space: nowrap; }
.dial-btn .chev { width: 11px; height: 8px; color: var(--muted); flex: 0 0 auto; }
.phone-group input { flex: 1 1 auto; min-width: 0; }

/* ---- Yes / No ------------------------------------------------------------ */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.choice {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 96px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
.choice:active { transform: scale(.98); }

.choice .mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.choice .mark svg { width: 18px; height: 18px; }

.choice-text {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: color .2s ease;
}

.choice-yes[aria-checked="true"] {
  border-color: var(--gold);
  background: #f5eed9;
}
.choice-yes[aria-checked="true"] .mark {
  color: #fff8e6;
  background: var(--gold);
  border-color: var(--gold);
}
.choice-no[aria-checked="true"] {
  border-color: var(--no);
  background: #f7e9e3;
}
.choice-no[aria-checked="true"] .mark {
  color: #fff;
  background: var(--no);
  border-color: var(--no);
}
.choice[aria-checked="true"] .choice-text { color: var(--ink); font-weight: 700; }

/* ---- Honeypot ------------------------------------------------------------ */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Success ------------------------------------------------------------- */
.form-state.success { text-align: center; padding: 12px 0 4px; }

.seal {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  color: var(--gold);
}
.seal svg { width: 84px; height: 84px; }
.seal .tick {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: draw .55s .12s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.success-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gold);
}
.success-body {
  margin: 0 auto 8px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.success-note {
  margin: 0 auto 18px;
  font-size: 13px;
  color: var(--muted);
}
.form-state.success .btn-ghost { margin-top: 14px; }

/* ---- Enquiries ----------------------------------------------------------- */
.enquiries { text-align: center; }
.enquiries .tels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.enquiries .tel {
  display: block;
  padding: 7px 0;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--gold);
  text-decoration: none;
}
.enquiries .tel:hover { color: var(--gold-lo); }

/* ---- Footer -------------------------------------------------------------- */
.foot { text-align: center; padding-top: 6px; }
.foot-rule {
  display: block;
  width: 120px;
  height: 1px;
  margin: 0 auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
}
.foot p {
  margin: 0;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Country sheet ------------------------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(47, 39, 24, .40);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .24s ease;
}
.sheet-backdrop.open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  max-height: 86vh;
  max-height: 86dvh;
  padding-bottom: var(--safe-b);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 50px -26px rgba(60, 46, 18, .5);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,.7,.3,1);
}
.sheet.open { transform: translateY(0); }

.sheet-head {
  position: relative;
  flex: 0 0 auto;
  padding: 16px 18px 12px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.grip {
  display: block;
  width: 40px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--line);
}
.sheet-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.sheet-close {
  position: absolute;
  top: 22px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.sheet-close svg { width: 15px; height: 15px; }
.sheet-close:hover { color: var(--gold); border-color: var(--gold); }

.sheet-search {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 18px;
}
.sheet-search input { padding-left: 44px; background: var(--paper); }
.search-icon {
  position: absolute;
  top: 50%;
  left: 33px;
  width: 17px;
  height: 17px;
  margin-top: -8px;
  color: var(--muted);
  pointer-events: none;
}

.country-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 10px 16px;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.country-list li { margin: 0; }
.country-list button {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 54px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.country-list button:hover { background: var(--paper-3); }
.country-list button[aria-selected="true"] { background: #f5eed9; font-weight: 700; }
.country-list .c-flag { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.country-list .c-name { flex: 1 1 auto; }
.country-list .c-dial { flex: 0 0 auto; color: var(--gold); font-size: 14px; }

.sheet-empty {
  padding: 26px 20px 34px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ---- Wider screens ------------------------------------------------------- */
@media (min-width: 600px) {
  .wrap { padding: 30px 24px 60px; gap: 24px; }
  .card { padding: 34px 30px; }
  .sheet {
    left: 50%;
    right: auto;
    bottom: 50%;
    width: 460px;
    max-height: 74vh;
    transform: translate(-50%, 50%) scale(.96);
    border-radius: 20px;
    border: 1px solid var(--line);
    opacity: 0;
    transition: transform .24s ease, opacity .24s ease;
  }
  .sheet.open { transform: translate(-50%, 50%) scale(1); opacity: 1; }
  .grip { display: none; }
  .sheet-head { padding-top: 20px; }
  .sheet-close { top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}