/* ==========================================================================
   NEKTR — reservations, guest side.
   Typeface, palette and rhythm follow the main site: Grotta, cream, forest
   green and gold, with Cormorant Garamond italics for display lines.
   ========================================================================== */

@font-face{font-family:"Grotta";src:url("../assets/fonts/Grotta-Trial-Light.otf") format("opentype"),url("../assets/fonts/Grotta-Trial-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Grotta";src:url("../assets/fonts/Grotta-Trial-Regular.otf") format("opentype"),url("../assets/fonts/Grotta-Trial-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Grotta";src:url("../assets/fonts/Grotta-Trial-Medium.otf") format("opentype"),url("../assets/fonts/Grotta-Trial-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Grotta";src:url("../assets/fonts/Grotta-Trial-Semibold.otf") format("opentype"),url("../assets/fonts/Grotta-Trial-Semibold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

:root{
  --cream:#F4EAD8;
  --panel:#FFFCF4;
  --panel-sunk:#F7EFE0;
  --ink:#1B1B1B;
  --ink-soft:#575248;
  --ink-faint:#8A8274;
  --forest:#233628;
  --forest-mid:#344735;
  --forest-light:#45583D;
  --gold:#D9B46B;
  --gold-soft:#E7C37A;
  --line:rgba(35,54,40,.16);
  --line-strong:rgba(35,54,40,.32);
  --danger:#9F3F32;
  --radius:14px;
  --radius-lg:20px;
  --shadow-soft:0 18px 44px rgba(31,28,22,.10);
  --shadow-lift:0 22px 50px rgba(35,54,40,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Grotta",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.01em}
dl,dd,dt,p{margin:0}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ==========================================================================
   STAGE — brand panel beside the booking panel
   ========================================================================== */

.stage{
  display:grid;
  grid-template-columns:minmax(360px,36%) minmax(0,1fr);
  min-height:100vh;
  min-height:100svh;
}

/* Grid children default to min-width:auto, which lets the horizontally
   scrolling date strip push the whole column wider than the screen. */
.stage > *{min-width:0}

.brand{
  position:relative;
  display:flex;
  overflow:hidden;
  background:var(--forest);
  color:#F5EFE2;
}

.brand-media{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(14,22,16,.62),rgba(14,22,16,.38) 42%,rgba(14,22,16,.88)),
    url("../assets/images/banner.webp") center/cover no-repeat;
  transform:scale(1.04);
  animation:slow-drift 26s var(--ease) infinite alternate;
}

@keyframes slow-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(0,-1.5%,0)}}

.brand-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  width:100%;
  padding:44px 44px 48px;
}

.brand-logo img{width:132px;height:auto}

.brand-copy{max-width:360px}

.eyebrow{
  display:block;
  margin-bottom:18px;
  color:var(--gold-soft);
  font-size:11px;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;
}

.brand-headline{
  font-size:clamp(2.6rem,4.2vw,3.9rem);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.02em;
}
.brand-headline em{
  display:block;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;
  font-weight:400;
  color:var(--gold-soft);
  letter-spacing:0;
}

.brand-tagline{
  margin-top:20px;
  max-width:34ch;
  color:rgba(245,239,226,.76);
  font-size:15px;
  font-weight:300;
  line-height:1.7;
}

.brand-foot{
  color:rgba(245,239,226,.6);
  font-size:12px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  line-height:1.9;
}
.brand-hours{color:var(--gold-soft)}

/* ==========================================================================
   BOOKING PANEL
   ========================================================================== */

.booking,.confirm{
  position:relative;
  display:flex;
  justify-content:center;
  background:
    linear-gradient(150deg,rgba(255,252,244,.97),rgba(244,234,216,.93)),
    url("../assets/images/ambience.webp") center/cover no-repeat;
}

.booking-inner,.confirm-inner{
  width:100%;
  min-width:0;
  max-width:620px;
  padding:56px 44px 40px;
}

.booking-head{margin-bottom:38px}
.booking-head h2{
  font-size:clamp(1.9rem,2.6vw,2.4rem);
  font-weight:300;
  letter-spacing:-.02em;
}
.booking-head p{
  margin-top:10px;
  color:var(--ink-soft);
  font-size:15px;
  font-weight:300;
}

.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Steps ---------------------------------------------------------- */

.step{
  padding:28px 0;
  border-top:1px solid var(--line);
}
.step:first-of-type{border-top:0;padding-top:0}

.step-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:18px;
}
.step-index{
  color:var(--gold);
  font-size:11px;
  font-weight:600;
  letter-spacing:2.5px;
}
.step-head h3{
  flex:1;
  font-size:17px;
  font-weight:500;
  letter-spacing:-.01em;
}
.step-status{
  color:var(--ink-faint);
  font-size:12px;
  letter-spacing:.4px;
}

.step-note{
  margin-top:14px;
  padding:14px 16px;
  border:1px dashed var(--line-strong);
  border-radius:var(--radius);
  background:rgba(217,180,107,.10);
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.6;
}

/* ---- Chips ----------------------------------------------------------- */

.chips{display:flex;flex-wrap:wrap;gap:10px;max-width:100%}

.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 20px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  color:var(--ink);
  font-size:15px;
  font-weight:400;
  letter-spacing:.3px;
  cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
}
.chip:hover:not(:disabled):not(.is-selected){
  border-color:var(--line-strong);
  transform:translateY(-1px);
}
.chip.is-selected{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--gold-soft);
  box-shadow:var(--shadow-lift);
}
.chip:disabled,.chip.is-out{
  color:var(--ink-faint);
  background:var(--panel-sunk);
  border-color:transparent;
  cursor:not-allowed;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(138,130,116,.6);
}

.chip-party{min-width:56px;padding:0 6px}
.chip-number{font-size:16px;font-weight:500}

.chips-time{gap:10px}
.chip-time{min-width:94px;flex:0 0 auto;padding:0 16px}
.chip-time .tables-left{
  position:absolute;
  top:-7px;right:10px;
  padding:1px 7px;
  border-radius:999px;
  background:var(--gold);
  color:#20170A;
  font-size:10px;
  font-weight:600;
  letter-spacing:.4px;
}
.chip-time.is-selected .tables-left{background:var(--gold-soft)}

.chip-skeleton{
  min-width:100px;
  min-height:52px;
  border:0;
  background:linear-gradient(100deg,var(--panel-sunk) 30%,rgba(255,252,244,.9) 50%,var(--panel-sunk) 70%);
  background-size:220% 100%;
  animation:shimmer 1.4s infinite linear;
  cursor:default;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---- Date strip ------------------------------------------------------- */

.date-strip{
  display:flex;
  max-width:100%;
  gap:10px;
  overflow-x:auto;
  padding:4px 2px 12px;
  margin:0 -2px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.date-strip::-webkit-scrollbar{height:4px}
.date-strip::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}

.date-card{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:72px;
  padding:14px 6px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease);
}
.date-card:hover:not(:disabled):not(.is-selected){border-color:var(--line-strong);transform:translateY(-2px)}
.date-card.is-selected{
  background:var(--forest);
  border-color:var(--forest);
  color:var(--gold-soft);
  box-shadow:var(--shadow-lift);
}
.date-card.is-closed{opacity:.42;cursor:not-allowed}

.date-weekday{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;opacity:.72}
.date-day{font-size:22px;font-weight:500;line-height:1.1}
.date-month{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;opacity:.72}

/* ---- Details --------------------------------------------------------- */

.fields{display:grid;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}

.field label{
  color:var(--forest-mid);
  font-size:11px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
}
.optional{color:var(--ink-faint);font-weight:400;letter-spacing:1px;text-transform:none}

.field input{
  width:100%;
  min-height:56px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  color:var(--ink);
  font-family:inherit;
  font-size:16px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field input::placeholder{color:rgba(31,31,31,.36)}
.field input:hover{border-color:var(--line-strong)}
.field input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(217,180,107,.18);
}
.field input.is-invalid{
  border-color:var(--danger);
  box-shadow:0 0 0 4px rgba(159,63,50,.12);
}

.phone-combo{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px}
.field-hint{color:var(--ink-faint);font-size:12.5px}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---- What the guest is promised in place of choosing a table --------- */

.assurance{
  display:flex;
  gap:12px;
  margin-top:18px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(217,180,107,.10),rgba(255,252,244,.6));
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.65;
}

.assurance-mark{
  position:relative;
  flex:0 0 auto;
  width:20px;height:20px;
  margin-top:1px;
  border:1.5px solid var(--gold);
  border-radius:50%;
}
.assurance-mark::after{
  content:"";
  position:absolute;
  top:5px;left:6px;
  width:7px;height:3.5px;
  border-left:1.5px solid var(--gold);
  border-bottom:1.5px solid var(--gold);
  transform:rotate(-45deg);
}

.step-head h3 .optional{margin-left:2px}

/* ---- Submit ---------------------------------------------------------- */

.form-error{
  margin-top:22px;
  padding:14px 16px;
  border-left:2px solid var(--danger);
  border-radius:6px;
  background:rgba(159,63,50,.07);
  color:#7E3125;
  font-size:14.5px;
}

.submit-bar{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:18px;
  margin:28px -44px 0;
  padding:18px 44px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:rgba(255,252,244,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.summary{
  flex:1;
  min-width:0;
  color:var(--ink-soft);
  font-size:13.5px;
  letter-spacing:.3px;
  line-height:1.4;
}
.summary .dot{margin:0 6px;color:var(--gold)}
.summary [data-role="summary-time"]{color:var(--ink);font-weight:500}

.confirm-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 34px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--forest),var(--forest-light));
  box-shadow:0 16px 32px rgba(35,54,40,.26);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),opacity .2s var(--ease);
}
.confirm-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 40px rgba(35,54,40,.3)}
.confirm-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.confirm-spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%}
.is-sending .confirm-spinner{display:block;animation:spin .7s linear infinite}
.is-sending .confirm-label{opacity:.75}
@keyframes spin{to{transform:rotate(360deg)}}

.fine-print{
  margin-top:18px;
  color:var(--ink-faint);
  font-size:12.5px;
  line-height:1.65;
}

.booking-foot{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:34px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
  font-size:12px;
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.booking-foot a{transition:color .25s var(--ease)}
.booking-foot a:hover{color:var(--forest)}

/* ==========================================================================
   CONFIRMATION
   ========================================================================== */

.confirm-inner{display:flex;flex-direction:column;padding-top:64px}

.confirm-mark{width:56px;height:56px;margin-bottom:22px;color:var(--forest)}
.confirm-mark.off{color:var(--ink-faint)}
.confirm-mark svg{width:100%;height:100%}
.confirm-mark.ok path{stroke-dasharray:44;stroke-dashoffset:44;animation:draw .7s .25s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.confirm-badge{
  align-self:flex-start;
  margin-bottom:14px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(35,54,40,.09);
  color:var(--forest);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:2.2px;
  text-transform:uppercase;
}
.confirm-badge.off{background:rgba(159,63,50,.10);color:var(--danger)}
.confirm-badge.done{background:rgba(217,180,107,.18);color:#7A5C1F}

.confirm-inner h2{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2.6rem,5vw,3.6rem);
  font-style:italic;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.01em;
}
.confirm-lead{
  margin-top:16px;
  max-width:46ch;
  color:var(--ink-soft);
  font-size:16px;
  font-weight:300;
  line-height:1.7;
}

.details{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin:34px 0 30px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--line);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.detail{padding:18px 20px;background:var(--panel)}
/* An odd number of details would otherwise leave a bare grey cell. */
.detail:last-child:nth-child(odd){grid-column:1/-1}
.detail dt{
  margin-bottom:6px;
  color:var(--ink-faint);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
}
.detail dd{font-size:16px;font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}

.confirm-actions{display:flex;flex-direction:column;gap:14px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:0 28px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.btn-whatsapp{
  background:#25D366;
  color:#08331A;
  box-shadow:0 16px 34px rgba(37,211,102,.28);
}
.btn-whatsapp:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(37,211,102,.34)}

.confirm-secondary{display:flex;flex-wrap:wrap;gap:10px}
.btn-ghost{
  flex:1 1 140px;
  min-height:50px;
  white-space:nowrap;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--forest);
  font-size:11.5px;
  letter-spacing:1.4px;
}
.btn-ghost:hover{background:var(--forest);border-color:var(--forest);color:var(--gold-soft)}

.view-note{
  display:flex;
  gap:12px;
  margin-bottom:22px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(217,180,107,.12),rgba(255,252,244,.55));
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.65;
}

.confirm-hint{
  margin-top:18px;
  color:var(--ink-faint);
  font-size:13px;
  line-height:1.65;
}

.cancel-form{margin-top:26px}
.link-button{
  padding:0;
  border:0;
  background:none;
  color:var(--ink-faint);
  font-size:13px;
  letter-spacing:.3px;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
  transition:color .25s var(--ease);
}
.link-button:hover{color:var(--danger)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width:981px){
  .brand{position:sticky;top:0;height:100vh;height:100svh}
  .booking,.confirm{align-items:flex-start}
}

@media (max-width:980px){
  .stage{grid-template-columns:1fr}

  .brand{min-height:300px}
  .brand-inner{padding:26px 24px 30px;gap:26px}
  .brand-logo img{width:108px}
  .brand-headline{font-size:clamp(2.2rem,8vw,3rem)}
  .brand-tagline{margin-top:14px;font-size:14px}
  .brand-foot{font-size:11px;line-height:1.8}

  .booking-inner,.confirm-inner{padding:40px 24px 32px;max-width:640px}
  .confirm-inner{padding-top:44px}
  .submit-bar{margin:24px -24px 0;padding:16px 24px calc(16px + env(safe-area-inset-bottom))}
}

@media (max-width:560px){
  /* Keep the first field on screen. The guest arrives here from the site,
     having already read the pitch, so the phone shows the brand and then
     gets straight to the form. */
  .brand{min-height:0}
  .brand-inner{padding:18px 20px 20px;gap:14px}
  .brand-logo img{width:92px}
  .brand-headline{font-size:clamp(1.9rem,7vw,2.3rem)}
  .brand-tagline{display:none}
  .brand-foot{font-size:10.5px;line-height:1.65}
  .eyebrow{margin-bottom:10px;font-size:10px}

  .booking-inner,.confirm-inner{padding-top:30px}
  .booking-head{margin-bottom:22px}
  .booking-head h2{font-size:1.75rem}
  .booking-head p{margin-top:6px;font-size:14px}
  .step:first-of-type{padding-top:0}

  /* The confirmation is read, not filled in, so it keeps its tagline. */
  .confirm-page .brand-tagline{display:block;margin-top:10px;font-size:13.5px;line-height:1.6}

  .booking-head{margin-bottom:28px}
  .step{padding:24px 0}
  .chip{min-height:50px;padding:0 16px;font-size:14.5px}
  .chip-party{min-width:52px}
  .chip-time{min-width:calc(33.333% - 7px);flex:1 1 calc(33.333% - 7px)}
  .chip-skeleton{min-width:calc(33.333% - 7px);flex:1 1 calc(33.333% - 7px)}
  .date-card{width:66px;padding:12px 4px}

  .details{grid-template-columns:1fr}
  .submit-bar{flex-direction:column;align-items:stretch;gap:12px}
  .summary{text-align:center;font-size:13px}
  .confirm-btn{width:100%}
  .btn-ghost{flex:1 1 100%}
}

/* A short phone — an SE, or any handset in landscape — cannot afford a hero
   and a form. The brand shrinks to a band so the first field is reachable. */
@media (max-width:640px) and (max-height:640px){
  .booking-page .brand{min-height:0}
  .booking-page .brand-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 18px;
  }
  .booking-page .brand-logo img{width:78px}
  .booking-page .brand-copy{max-width:none;text-align:right}
  .booking-page .eyebrow{margin-bottom:2px;font-size:9px;letter-spacing:2px}
  .booking-page .brand-headline{font-size:17px;line-height:1.15;letter-spacing:0}
  .booking-page .brand-headline em{display:inline;color:var(--gold-soft)}
  .booking-page .brand-foot{display:none}

  .booking-page .booking-inner{padding-top:22px}
  .booking-page .booking-head{margin-bottom:18px}
  .booking-page .booking-head h2{font-size:1.55rem}
  .booking-page .booking-head p{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .brand-media{animation:none}
}

@media print{
  .brand,.submit-bar,.confirm-actions,.cancel-form,.booking-foot{display:none}
  body{background:#fff}
}

/* ==========================================================================
   FEATURED NIGHT — the booking screen as one evening's landing page.

   A night page: dark ground and gold lettering like the posters, with the
   booking itself drawn as a ticket. Built for the phone first; nearly every
   guest arrives from an ad on one.
   ========================================================================== */

.event-page{
  --night:#0D1410;
  --night-raised:#18241C;
  --night-line:rgba(231,195,122,.24);
  --night-text:#F5EFE2;
  --night-soft:rgba(245,239,226,.7);
  background:var(--night);
  color:var(--night-text);
}

/* No double-tap zoom or grey flash on anything a thumb is meant to press. */
.chip,.date-card,.confirm-btn,.btn,.cta,.picker-toggle{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Details a phone has filled in for the guest stay in the page's own colours. */
.field input:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  box-shadow:0 0 0 1000px #FFF7E2 inset;
}
.field input:-webkit-autofill:focus{
  box-shadow:0 0 0 1000px #FFF7E2 inset,0 0 0 4px rgba(217,180,107,.18);
}

/* ---- Buttons --------------------------------------------------------- */

.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  padding:0 24px;
  border-radius:999px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.005em;
  line-height:1.2;
  text-align:center;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.cta:active{transform:scale(.98)}
.cta-gold{
  background:linear-gradient(135deg,#F2D592,var(--gold));
  box-shadow:0 16px 36px rgba(217,180,107,.3);
  color:#1D1608;
}
.cta-gold:hover{box-shadow:0 20px 44px rgba(217,180,107,.4)}
.cta-line{
  border:1px solid var(--night-line);
  color:var(--night-text);
}
.cta-line:hover{background:rgba(231,195,122,.1)}

/* ---- The poster and the evening --------------------------------------- */

.event-hero{display:block;min-height:0;background:var(--night)}

.event-hero-art{position:relative;display:block}
.event-hero-art img{
  width:100%;
  height:auto;
  max-height:64vh;
  max-height:64svh;
  object-fit:cover;
  object-position:center top;
}
/* The poster melts into the night below it instead of ending on an edge. */
.event-hero-art::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:46%;
  background:linear-gradient(180deg,rgba(13,20,16,0),var(--night) 94%);
  pointer-events:none;
}

.event-intro{
  position:relative;
  z-index:1;
  max-width:560px;
  margin:-58px auto 0;
  padding:0 20px 32px;
  text-align:center;
}

.event-date{
  display:block;
  font-size:clamp(2.05rem,10.4vw,3.3rem);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.03em;
}
.event-time{
  display:block;
  margin-top:6px;
  color:var(--gold-soft);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.6rem,7.2vw,2.2rem);
  font-style:italic;
  line-height:1.1;
}

.event-offer{
  margin-top:18px;
  font-size:16.5px;
  line-height:1.4;
}
.event-offer strong{
  margin-right:2px;
  padding:3px 11px;
  border-radius:999px;
  background:var(--gold);
  color:#1D1608;
  font-weight:600;
  white-space:nowrap;
}

.event-intro .cta{margin-top:18px}

.event-reassure{
  margin-top:14px;
  color:var(--night-soft);
  font-size:14px;
}

/* ---- The ticket ------------------------------------------------------- */

.night-col{min-width:0;padding-bottom:120px;background:var(--night)}

.ticket-wrap{padding:4px 14px 0;scroll-margin-top:14px}

.ticket{
  position:relative;
  max-width:520px;
  margin:0 auto;
  padding:0 20px;
  border-radius:26px;
  background:var(--panel);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  color:var(--ink);
}

.ticket-head{display:flex;align-items:stretch;gap:16px;padding:20px 0}

.ticket-stub{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:78px;
  padding:12px 0;
  border-radius:16px;
  background:var(--forest);
  color:var(--gold-soft);
  line-height:1;
}
.ticket-stub b{font-size:36px;font-weight:500;letter-spacing:-.02em}
.ticket-stub span{font-size:12px;font-weight:600;letter-spacing:2.2px;text-transform:uppercase}

.ticket-what{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
}
.ticket-what h2{font-size:21px;font-weight:500;line-height:1.15;letter-spacing:-.02em}
.ticket-what p{color:var(--ink-soft);font-size:14.5px;line-height:1.35}
.ticket-what .ticket-offer{
  margin-top:6px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--gold);
  color:#20170A;
  font-size:13px;
  font-weight:600;
}

/* The tear line: the evening above it is printed, what is below can change. */
.ticket-tear{
  position:relative;
  margin:0 -20px;
  border-top:2px dashed rgba(35,54,40,.3);
}
.ticket-tear::before,.ticket-tear::after{
  content:"";
  position:absolute;
  top:-12px;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--night);
}
.ticket-tear::before{left:-11px}
.ticket-tear::after{right:-11px}

/* ---- Rows that open in place ------------------------------------------ */

.picker{border-bottom:1px solid var(--line)}

.picker-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:66px;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
}
.picker-label{flex:1;color:var(--ink-soft);font-size:15.5px}
.picker-value{font-size:18px;font-weight:500;letter-spacing:-.01em}
.picker-chevron{
  flex:0 0 auto;
  width:10px;height:10px;
  margin:0 4px 5px 2px;
  border-right:2px solid var(--forest);
  border-bottom:2px solid var(--forest);
  transform:rotate(45deg);
  transition:transform .28s var(--ease),margin .28s var(--ease);
}
.picker.is-open .picker-chevron{margin-bottom:-5px;transform:rotate(-135deg)}

.picker-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s var(--ease);
}
.picker.is-open .picker-panel{grid-template-rows:1fr}
.picker-inner{min-height:0;overflow:hidden}
/* Room above for the "2 left" tags, which sit proud of their chips. */
.picker-body{padding:10px 2px 20px}

.picker-status{margin-bottom:12px;color:var(--ink-faint);font-size:13px}
.picker-status:empty{display:none}

.picker .chips-party{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.picker .chips-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
.picker .chip{min-width:0;width:100%;min-height:52px;padding:0 6px;font-size:15.5px}
.picker .chip.is-selected{box-shadow:none}
.picker .chip-skeleton{min-width:0}
.picker .field input{min-height:58px;font-size:17px}

/* ---- The guest's details ---------------------------------------------- */

.ticket-details{padding:22px 0 24px;border-bottom:1px solid var(--line)}
.ticket-details h3{margin-bottom:16px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.ticket-details .fields{gap:14px}
.ticket-details .field{gap:6px}
.ticket-details .field label{
  color:var(--ink-soft);
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
}
.ticket-details .field input{min-height:58px;font-size:17px}

.ticket .form-error{margin-top:18px}
.ticket .fine-print{margin-top:18px;font-size:12.5px}

.ticket .submit-bar{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin:18px -20px 0;
  padding:14px 20px calc(16px + env(safe-area-inset-bottom));
  border-radius:0 0 26px 26px;
  background:rgba(255,252,244,.95);
}
.ticket .summary{text-align:center;font-size:14px}
.summary-offer{
  margin-left:8px;
  padding:2px 9px;
  border-radius:999px;
  background:var(--gold);
  color:#20170A;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.ticket .confirm-btn{
  width:100%;
  min-height:60px;
  font-size:17px;
  letter-spacing:-.005em;
  text-transform:none;
}

/* ---- The night, shown ------------------------------------------------- */

.night-section{
  max-width:560px;
  margin:0 auto;
  padding:60px 20px 0;
}
.night-section h2{
  font-size:clamp(1.85rem,8.2vw,2.5rem);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.025em;
}
.night-section p{
  margin-top:12px;
  max-width:40ch;
  color:var(--night-soft);
  font-size:16.5px;
  line-height:1.6;
}
.night-section .cta{margin-top:26px}

.night-section img{background:var(--night-raised)}

/* Edge to edge on a phone, so the photograph is the section's opening. */
.night-photo{
  width:calc(100% + 40px);
  max-width:none;
  height:auto;
  margin:0 -20px 28px;
}

/* A row of photographs to swipe through. */
.rail{
  display:flex;
  gap:10px;
  margin:26px -20px 0;
  padding:0 20px 4px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail img{
  flex:0 0 auto;
  width:auto;
  height:230px;
  max-width:none;
  border-radius:16px;
  scroll-snap-align:center;
}

.night-pair,.night-trio{display:grid;gap:10px;margin-bottom:28px}
.night-pair{grid-template-columns:1fr 1fr}
.night-trio{grid-template-columns:repeat(3,1fr)}
.night-pair img,.night-trio img{width:100%;height:auto;border-radius:16px}
.night-pair img:last-child{margin-top:28px}

/* Three things that happen in order, so they are numbered. */
.night-steps{
  display:grid;
  gap:22px;
  margin:26px 0 0;
  padding:0;
  list-style:none;
  counter-reset:step;
}
.night-steps li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  column-gap:14px;
  counter-increment:step;
}
.night-steps li::before{
  content:counter(step);
  grid-row:1 / span 2;
  color:var(--gold-soft);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:46px;
  font-style:italic;
  line-height:.82;
}
.night-steps strong{font-size:18px;font-weight:500}
.night-steps span{margin-top:4px;color:var(--night-soft);font-size:15.5px;line-height:1.55}

.night-link{
  display:block;
  margin-top:18px;
  color:var(--gold-soft);
  font-size:15.5px;
  text-align:center;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
}

.night-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.night-actions .cta{min-height:54px;margin-top:0;padding:0 8px;font-size:15.5px;font-weight:500}

.night-close{text-align:center}
.night-close p{margin-left:auto;margin-right:auto}

/* ---- The bar that follows the guest down the page ---------------------- */

.event-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--night-line);
  background:rgba(13,20,16,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transform:translateY(110%);
  transition:transform .32s var(--ease);
}
.event-bar.is-visible{transform:none}
.event-bar-copy{flex:1;min-width:0;line-height:1.3}
.event-bar-copy strong{display:block;font-size:16px;font-weight:500}
.event-bar-copy span{display:block;color:var(--gold-soft);font-size:13.5px}
.event-bar .cta{flex:0 0 auto;min-height:50px;padding:0 26px;font-size:16px}

/* ---- Wider screens ---------------------------------------------------- */

/* Beside the page on a wide screen, the whole poster stands in for the panel
   and already says everything the phone layout spells out in text. */
@media (min-width:981px){
  .event-hero-art{position:absolute;inset:0}
  .event-hero-art img{height:100%;max-height:none;object-position:center}
  .event-hero-art::after{display:none}
  .event-intro{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .ticket-wrap{padding-top:48px}
  .event-bar{left:auto;width:min(64%,calc(100% - 360px))}
}

@media (max-width:359px){
  .ticket{padding:0 16px}
  .ticket-tear{margin:0 -16px}
  .ticket .submit-bar{margin:18px -16px 0;padding-left:16px;padding-right:16px}
  .ticket-stub{width:68px}
  .ticket-what h2{font-size:19px}
  .cta{font-size:16px;padding:0 16px}
  .rail img{height:200px}
}

@media (prefers-reduced-motion:reduce){
  .picker-panel,.event-bar{transition:none}
}

@media print{
  .event-bar,.night-section img,.rail{display:none}
}