/* ==========================================================================
   Direction B — "The Phoenician Scheme" (handoff id 2b)
   ========================================================================== */

:root {
  --cream:     #EFE7D6;
  --forest:    #1E2B2A;
  --khaki:     #E2D7BC;
  --mustard:   #C08A2E;
  --red:       #8A3324;
  --red-hover: #6F281C;
  --sage:      #7C7259;

  /* base.css contract */
  --surround:     #D7CCB5;
  --page-bg:      var(--cream);
  --ink:          var(--forest);
  --card-border:  var(--forest);
  --frame-border: 1px solid var(--khaki);
  --marquee-speed: 26s;

  --music-bg:     var(--forest);
  --music-fg:     var(--cream);
  --music-border: var(--mustard);

  --status-error-bg:   #F7E3DC;
  --status-error-fg:   var(--red-hover);
  --status-success-bg: #E9EFE4;
  --status-success-fg: var(--forest);
}

/* --- Film sprockets ------------------------------------------------------ */

.sprocket {
  height: 18px;
  background: var(--forest);
  background-image: repeating-linear-gradient(90deg, transparent 0 28px, var(--mustard) 28px 30px);
  background-size: 60px 18px;
  background-position: 0 0;
  animation: om-sprocket 2.2s linear infinite;
}
.sprocket--bottom { animation-direction: reverse; }

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

.hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  padding: 52px var(--gutter) 46px;
  text-align: center;
  border-bottom: 6px solid var(--forest);
}

.hero__circle {
  position: absolute;
  top: 40px;
  left: 46px;
  width: 46px;
  height: 46px;
  border: 2px solid var(--red);
  border-radius: 50%;
  animation: om-float 7s ease-in-out infinite;
}
.hero__square {
  position: absolute;
  top: 88px;
  right: 52px;
  width: 26px;
  height: 26px;
  background: var(--mustard);
  animation: om-float 9s ease-in-out .8s infinite;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--red);
  padding: 7px 16px;
  color: var(--red);
  animation: om-pop .6s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
.hero__badge-dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--red);
  border-radius: 50%;
  animation: om-blink 1.8s steps(1, end) infinite;
}
.hero__badge-dot:last-child { animation-delay: .9s; }
.hero__badge-text {
  font-family: 'Noto Sans Armenian', sans-serif;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.hero__name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(36px, 8.2vw, 74px);
  line-height: 1;
  color: var(--forest);
  letter-spacing: 0;
  animation: om-rise .7s ease both;
}
.hero__name--first { margin-top: 30px; animation-delay: .3s; }
.hero__name--second { animation-delay: .55s; }

.hero__and {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 14px 0;
  animation: om-rise .7s ease .45s both;
}
.hero__and-rule {
  height: 2px;
  width: clamp(48px, 13vw, 120px);
  background: var(--mustard);
}
.hero__and-word {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(24px, 3.6vw, 32px);
  color: var(--mustard);
}

.hero__names-hy {
  font-family: 'Noto Serif Armenian', serif;
  font-size: clamp(17px, 2.3vw, 21px);
  color: var(--sage);
  margin-top: 16px;
  animation: om-rise .7s ease .7s both;
}

.hero__chip {
  display: inline-block;
  background: var(--mustard);
  color: var(--forest);
  padding: 12px 26px;
  margin-top: 30px;
  font-size: clamp(12px, 1.7vw, 15px);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  transform: rotate(-1.5deg);
  animation: om-pop .6s cubic-bezier(.2, 1.4, .4, 1) .85s both;
}

.hero__subline {
  font-family: 'Noto Sans Armenian', sans-serif;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--sage);
  margin-top: 14px;
}

/* --- Field guide --------------------------------------------------------- */

.guide {
  padding: 50px var(--gutter);
  background: var(--khaki);
  position: relative;
}
.guide__heading {
  text-align: center;
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--forest);
  text-transform: uppercase;
  font-weight: 500;
}
.guide__list { margin-top: 30px; }

.chapter {
  display: flex;
  align-items: center;
  gap: 26px;
  background: var(--cream);
  border: 1px solid var(--forest);
  padding: 26px 30px;
  transition: transform .3s ease;
}
.chapter:hover { transform: translateX(8px); }

.chapter__time {
  width: 96px;
  height: 96px;
  flex: none;
  border: none;
  background: var(--forest);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: om-sway 6s ease-in-out infinite;
}
.chapter--second .chapter__time { animation-delay: 1.2s; }
.chapter__hour {
  font-size: 26px;
  font-weight: 500;
  color: var(--mustard);
  line-height: 1;
}
.chapter__meridiem {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--mustard);
}
.chapter__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  min-width: 0;
}
.chapter__label {
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--sage);
  text-transform: uppercase;
}
.chapter__venue {
  font-size: clamp(21px, 3.3vw, 30px);
  font-weight: 500;
  color: var(--forest);
  letter-spacing: .04em;
}
.chapter__venue-hy {
  font-family: 'Noto Serif Armenian', serif;
  font-size: 17px;
  color: var(--sage);
}

.connector {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0 8px 48px;
}
.connector__line {
  width: 4px;
  height: 44px;
  flex: none;
  background-image: linear-gradient(var(--forest) 55%, transparent 0);
  background-size: 4px 12px;
  animation: om-dash 1.1s linear infinite;
}
.connector__text {
  font-size: 11px;
  letter-spacing: .24em;
  color: var(--forest);
  text-transform: uppercase;
  opacity: .75;
}

/* --- RSVP ---------------------------------------------------------------- */

.rsvp {
  padding: 50px var(--gutter) 58px;
  background: var(--forest);
  border-top: 6px solid var(--forest);
}
.rsvp__heading {
  text-align: center;
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--red);
  text-transform: uppercase;
  font-weight: 500;
}

.label {
  font-size: 11px;
  letter-spacing: .22em;
  color: #A8B3A6;
  text-transform: uppercase;
}
.label__optional { opacity: .6; letter-spacing: .12em; }

.input {
  background: var(--cream);
  border: none;
  padding: 14px;
  font-size: 17px;
  color: var(--forest);
  outline: none;
  width: 100%;
  transition: border-color .2s ease;
}
.input::placeholder { color: var(--sage); opacity: .8; }
.input:focus { box-shadow: 0 0 0 3px var(--mustard); }

.stepper { background: var(--cream); }
.stepper__btn {
  width: 44px;
  border: none;
  background: transparent;
  font-size: 22px;
  color: var(--red);
}
.stepper__value {
  padding: 11px 0;
  font-size: 17px;
  color: var(--forest);
}

.segmented { gap: 10px; }
.segmented__btn {
  border: 1px solid var(--mustard);
  background: transparent;
  color: var(--mustard);
}
.segmented__btn.is-active {
  background: var(--mustard);
  color: var(--cream);
  transform: scale(1.04);
}

.submit {
  background: var(--red);
  color: var(--cream);
  border: none;
  padding: 17px;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 500;
  transition: transform .2s ease, background .2s ease;
}
.submit:hover:not([disabled]) { transform: scale(1.02) rotate(-.6deg); background: var(--red-hover); }

.rsvp__footer {
  text-align: center;
  font-size: 12px;
  letter-spacing: .2em;
  color: #7C8C82;
  text-transform: uppercase;
  margin-top: 30px;
}

.rsvp__done-title {
  /* Jost carries no Armenian — name the Armenian sans as the next family. */
  font-family: Jost, 'Noto Sans Armenian', sans-serif;
  font-size: clamp(26px, 4.4vw, 36px);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mustard);
  line-height: 1.15;
}
.rsvp__done-body {
  font-family: 'Noto Serif Armenian', serif;
  font-size: 17px;
  color: var(--sage);
}

.rsvp__back {
  display: inline-block;
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px solid var(--mustard);
  padding-bottom: 3px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 768px) {
  .hero { padding: 40px var(--gutter) 36px; }
  .hero__circle, .hero__square { display: none; }
  .hero__badge { gap: 8px; padding: 6px 12px; }
  .hero__badge-text { letter-spacing: .18em; }

  .guide { padding: 40px var(--gutter); }
  .chapter { flex-direction: column; align-items: flex-start; gap: 18px; }
  .chapter:hover { transform: none; }
  .connector { padding-left: 24px; }

  .rsvp { padding: 40px var(--gutter) 46px; }
  .segmented__btn.is-active { transform: none; }
}