:root {
  --ivory: #F7F3EC;
  --sand: #EFE8DD;
  --border: #DCD2C4;
  --ink: #2A2622;
  --taupe: #5D5548;
  --muted: #6F6455;
  --gold: #A4885E;
  --gold-deep: #7A5F32;
  --sea: #2A7388;
}

html, body { margin: 0; background: var(--ivory); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
/* Beats the inline display:grid on elements toggled via the hidden attribute */
[hidden] { display: none !important; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { color: #423C34; }

/* Rounded pill button (RSVP, copy-to-clipboard) — colors live here so :hover can flip them */
.pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  border-radius: 999px;
  background: rgba(42, 38, 34, .05);
  border: 1px solid #2A2622;
  color: #2A2622;
  font: 600 11px/1 Assistant, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pill:hover { background: var(--ink); color: var(--ivory); }

/* RSVP pill sitting over the hero photo — lighter ground, softer border */
.pill-light {
  background: rgba(247, 243, 236, .4);
  border-color: rgba(42, 38, 34, .45);
}

/* Countdown (home) */
@keyframes countFadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes goldPulse { 0%, 100% { box-shadow: 0 0 0 rgba(164, 136, 94, 0); } 50% { box-shadow: 0 0 16px rgba(164, 136, 94, .3); } }

.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 2vw, 22px);
  margin-top: 24px;
}
.count-unit { display: grid; gap: 10px; justify-items: center; }
.count-box {
  min-width: 96px;
  padding: 18px 14px;
  border-radius: 24px;
  border: 1px solid rgba(164, 136, 94, .5);
  background: linear-gradient(180deg, rgba(164, 136, 94, .1), rgba(164, 136, 94, .02));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: goldPulse 3.4s ease-in-out infinite;
}
.count-unit:nth-child(3) .count-box { animation-delay: .2s; }
.count-unit:nth-child(5) .count-box { animation-delay: .4s; }
.count-unit:nth-child(7) .count-box { animation-delay: .6s; }
.count-num {
  font: 500 clamp(32px, 5vw, 42px)/1 'EB Garamond', Georgia, serif;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 1.2ch;
  display: inline-block;
}
.count-num.tick { animation: countFadeUp 350ms ease-out; }
.count-label {
  font: 500 10px/1 Assistant, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #8A7A5E;
}
.count-sep {
  align-self: center;
  color: var(--gold);
  font: 400 22px/1 'EB Garamond', Georgia, serif;
  padding-top: 6px;
}

/* The four-across row needs ~510px to fit; phones get a 2x2 grid instead. */
@media (max-width: 559px) {
  .countdown { display: grid; grid-template-columns: repeat(2, auto); gap: 22px 28px; justify-content: center; }
  .count-sep { display: none; }
  .count-box { min-width: 88px; padding: 16px 12px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .count-box { animation: none; }
  .count-num.tick { animation: none; }
}

/* Visible focus everywhere — bronze, per the design system's focus-ring colour */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* Touch devices get comfortable hit areas on the small text links. The type
   stays exactly where it sits on a mouse-driven screen — only the box grows. */
@media (pointer: coarse) {
  header nav a,
  footer nav a,
  header a[aria-label],
  footer a[href^="https://wa.me"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  header nav,
  footer nav { row-gap: 0; }
}

/* Gallery masonry — two columns as designed, a third once there is room for it */
.gallery {
  max-width: 1080px;
  margin: 0 auto;
  column-count: 2;
  column-gap: 16px;
}
@media (min-width: 900px) {
  .gallery { column-count: 3; }
}
.gallery img {
  width: 100%;
  /* height:auto is required — without it the height attribute on each img
     wins over the CSS width and the photographs render stretched. */
  height: auto;
  display: block;
  margin-bottom: 16px;
  break-inside: avoid;
}

/* Language switch - EN | Hebrew, sits beside the RSVP pill */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  line-height: 1;
}
.lang-switch a,
.lang-switch .lang-on {
  font: 500 11px/1 Assistant, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .2s ease;
}
.lang-switch a:hover { color: var(--gold); }
.lang-switch .lang-on { color: var(--gold); }

/* A drawn hairline reads quieter than a typed pipe, and matches the rules
   used elsewhere in the header. */
.lang-switch .lang-sep {
  flex: none;
  width: 1px;
  height: 12px;
  background: var(--border);
}

/* Hebrew has no uppercase, and Latin tracking pulls its words apart. Set a
   size that matches the optical weight of the Assistant caps beside it. */
.lang-switch [lang="he"] {
  /* Hebrew has a tall x-height and no caps, so at a matched pixel size it
     reads heavier than the Latin. Lighter weight evens the two out. */
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  top: .5px;
}

/* Hotel cards. Laid out as a flex column rather than a grid: grid shares any
   spare height out across its rows, so the card with the least copy ended up
   with the tallest button. Here the button keeps its own height and margin-top
   auto pins it to the foot of every card. */
.hotel-card {
  flex: 1 1 300px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  background: var(--ivory);
  border: 1px solid var(--border);
}
.hotel-card > :first-child { flex: none; }

/* Deep gold rather than ink: warmer against the cream, and unlike the lighter
   gold it clears AA contrast for 12px uppercase (5.4:1). */
.btn-hotel {
  margin: auto 26px 26px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gold-deep);
  color: var(--ivory);
  font: 500 12px/1.3 Assistant, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .2s ease;
}
.btn-hotel:hover { background: #634C28; color: var(--ivory); }