/* ---------------------------------------------------
   Shayon & Amanda — Save the Date
   After Minted's "museo" suite: ivory card, double-rule frame, copperplate
   script for the title and closing only, spaced Baskerville capitals,
   lowercase italics, one olive ink.
   (Pinyon Script and Baskervville stand in for museo's licensed fonts.)
--------------------------------------------------- */

:root{
  --page:       #5f6a3a;   /* deep olive backdrop */
  --page-deep:  #4c5530;
  --ivory:      #fbf8f0;
  --ink:        #4a5530;   /* olive ink */
  --ink-soft:   #6b7449;
  --olive:      #7f8a4e;
  --olive-pale: #d9dcc2;
  --gold:       #b0975a;
  --line:       rgba(74,85,48,0.45);

  --serif:  "Baskervville", "Baskerville", "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;

  --frame: 14px;            /* outer rule's distance from the card edge */
  --inset: 26px;            /* inside the inner rule: sets the text margin */
  --hang: calc(var(--frame) + 6px);   /* just inside the inner rule: the curtains hang from the frame */
}
@media (max-width: 480px){
  :root{ --frame: 9px; --inset: 18px; }
}

*{ box-sizing: border-box; }
html{ background: var(--page); }
body{
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.18), transparent 60%),
    var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px 12px 32px;
}
@media (min-width: 700px){
  .page{ padding: 56px 24px 72px; }
}

/* ---------- card + museo double-rule frame ---------- */
.card{
  position: relative;
  container-type: inline-size;   /* lets the footer roses size from the card's width */
  width: 100%;
  max-width: 680px;
  background: var(--ivory);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 20px 50px -20px rgba(0,0,0,0.55),
    0 6px 14px -8px rgba(0,0,0,0.35);
}
.card::before, .card::after{
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.card::before{ inset: var(--frame); border: 2px solid var(--ink); }
.card::after{ inset: calc(var(--frame) + 5px); border: 1px solid var(--ink); }

.card-inner{
  position: relative;
  z-index: 1;
  margin: calc(var(--inset) + 6px);
  padding: 18% 22px 30px;   /* top: under the crown of the rose arch (% of the card's width) */
  text-align: center;
}
@media (min-width: 700px){
  .card-inner{ padding: 18% 56px 44px; }
}

/* ---------- hero ---------- */
.script-title{
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(44px, 9.2vw, 70px);   /* ~12% smaller, so the names lead */
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.names-caps{
  font-weight: 600;
  font-size: clamp(15px, 3.4vw, 24px);
  letter-spacing: 0.3em;
  padding-left: 0.3em;      /* optically centre tracked caps */
  text-transform: uppercase;
  margin: 0 0 10px;
}
/* full names stacked, museo-style, with a small italic ampersand between */
.names-caps .name{ display: block; line-height: 1.5; }
.names-caps .amp{
  display: block;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.15em;
  line-height: 1.3;
  margin-left: -0.3em;      /* undo the tracked caps' optical offset for the single glyph */
  color: var(--ink-soft);
}
.date-line{
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 2.8vw, 20px);
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0;
}
.hebrew{
  font-family: "Frank Ruhl Libre", "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: 0;
}
.hebrew-verse{
  font-size: clamp(18px, 3vw, 22px);
  margin: 0 0 6px;
}
.hero-note{
  font-style: italic;
  font-size: clamp(14px, 2.3vw, 16px);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

/* ---------- florals: a draping arch of ivory roses over the header (the chuppah) ----------
   assets/rose-arch.webp: a watercolour rose arch with trailing vines, roses recoloured
   ivory to suit the olive palette. It scales with the card's width. */
.rose-arch{
  position: absolute;
  top: calc(var(--hang) + 14px);          /* clear of the inner rule */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2 * var(--hang) - 40px);   /* vine tips stay inside the frame */
  height: auto;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 480px){
  /* on phones the arch is small, so fade its hanging vines before they reach the names */
  .rose-arch{ -webkit-mask-image: linear-gradient(#000 52%, transparent 74%); mask-image: linear-gradient(#000 52%, transparent 74%); }
}
@media (max-width: 480px){
  .card-inner{ padding-left: 30px; padding-right: 30px; }
  .card-inner .closing-caps{ font-size: 12px; letter-spacing: 0.22em; padding-left: 0.22em; }
  .script-title{ font-size: 36px; white-space: nowrap; }
  .names-caps{ letter-spacing: 0.22em; padding-left: 0.22em; }
  .date-line .bar{ display: none; }
  .date-line .d, .date-line .c{ display: block; }
  .card-inner .section-title{ letter-spacing: 0.22em; padding-left: 0.22em; }
}

/* ---------- engagement photo: a Roman arch, ruled like the card's frame ---------- */
.portrait{ margin: 34px auto 0; width: min(290px, 86%); }
.portrait-frame{
  display: block;
  padding: 5px;
  border: 1px solid var(--ink);
  border-radius: 400px 400px 0 0;   /* larger than half the width: browsers clamp it to a semicircle */
}
.portrait-frame img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 45%;
  filter: sepia(0.12) saturate(0.85);
  border-radius: 400px 400px 0 0;
}

/* ---------- countdown ---------- */
.countdown{
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin: 0;
}
.count-num{ font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- sections: as on museo, no ornamental dividers, just generous space ---------- */
.weekend, .address, .closing{ margin-top: 64px; }
@media (max-width: 480px){
  .weekend, .address, .closing{ margin-top: 52px; }
}

/* ---------- weekend ---------- */
.section-title{
  font-weight: 700;
  font-size: clamp(15px, 2.6vw, 18px);
  letter-spacing: 0.3em;
  padding-left: 0.3em;      /* optically centre tracked caps */
  text-transform: uppercase;
  line-height: 1.6;
  text-wrap: balance;
  margin: 0 0 28px;
  color: var(--ink);
}
/* museo's double rule under each section heading: a thick bar over a thin one */
.section-title::after{
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 14px auto 0;
  border-top: 3px solid var(--olive);
  border-bottom: 1.5px solid var(--olive);
  transform: translateX(-0.15em);   /* undo the tracked caps' optical offset */
}
.events{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
@media (min-width: 560px){
  /* subgrid: day, name, time, venue, address and button line up across both columns
     even when one event name wraps */
  .events{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, auto); gap: 0; }
  .event{ display: grid; grid-row: span 6; grid-template-rows: subgrid; padding: 0 12px; }
  .events .event-name{ white-space: nowrap; font-size: 19px; }   /* .events: outranks the base rule below */
  .event + .event{ border-left: 1px solid var(--line); }
  .event-name{ align-self: end; }
}
.event-day{
  font-size: 12.5px;
  font-weight: 500;   /* dark, but lighter than the section headings */
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}
.event-name{
  font-weight: 500;
  font-size: clamp(19px, 3.4vw, 22px);
  margin: 0 0 4px;
  color: var(--ink);
  text-wrap: balance;
}
.event-time{
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 12px;
}
.event-venue{
  font-style: italic;
  font-size: 19px;
  margin: 0;
  color: var(--ink);
}
.event-address{
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  margin: 4px 0 14px;
}
/* addresses open directions in Google Maps: a quiet dotted underline marks them as links */
.map-link{
  display: inline-block;
  padding: 4px 6px;           /* comfortable tap target */
  margin: -4px -6px;
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: rgba(74,85,48,0.28);   /* discoverable but quiet */
  text-underline-offset: 4px;
}
.map-link:hover{ text-decoration-style: solid; text-decoration-color: var(--ink); }
.preview .map-link{ text-decoration: none; }   /* share images: plain addresses */
.map-link:focus-visible{ outline: 2px solid var(--olive); outline-offset: 2px; }
.event-actions{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
/* the two calendar choices open as a small pop-over under the button, so nothing below moves */
.cal-options{
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 6px 0;
  min-width: 210px;
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px -10px rgba(74,85,48,0.28);   /* soft, to match the fine rules */
  text-align: center;
}
.cal-options[hidden]{ display: none; }
.cal-options .link-btn{ display: block; font-size: 15px; padding: 9px 16px; text-decoration: none; color: var(--ink); }
.cal-options .link-btn:hover{ background: rgba(127,138,78,0.12); }
.cal-dot{ display: none; }

.btn{
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 14px;
  min-height: 44px;            /* comfortable tap target */
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  line-height: 1;
}
.btn-solid{ background: var(--ink); color: var(--ivory); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
@media (hover: hover){   /* no sticky dark state after a tap on phones */
  .btn-solid:hover{ background: var(--page-deep); border-color: var(--page-deep); color: var(--ivory); }
  .btn-ghost:hover{ background: var(--ink); border-color: var(--ink); color: var(--ivory); }
}
.btn-ghost[aria-expanded="true"]{ background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.btn:focus-visible{ outline: 2px solid var(--olive); outline-offset: 2px; }

/* ---------- mailing address form ---------- */
.address{ text-align: center; }
.address .section-title{ margin-bottom: 18px; }
.address-sub{
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 26px;
  text-wrap: balance;
}
.addr-form{
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}
.field{ display: block; margin: 0 0 16px; position: relative; }
.field-label{
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
}
.field-optional{ letter-spacing: 0.04em; text-transform: none; font-style: italic; }
.field input{
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  background: #fdfbf5;             /* a shade lighter than the ivory card, not white */
  border: 1px solid var(--line);   /* a visible box, so the fields aren't overlooked */
  padding: 10px 12px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.field input::placeholder{ color: var(--ink-soft); font-style: italic; }
.field input:focus{ border-color: var(--ink); background: #fefdf9; }
.field input[aria-invalid="true"]{ border-color: #9a5a3a; }

.addr-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.addr-fields[hidden]{ display: none; }
.addr-fields .field-wide{ grid-column: 1 / -1; }
@media (max-width: 559px){
  .addr-fields{ grid-template-columns: 1fr; gap: 0; }
}

.link-btn{
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 14px 8px 13px 0;    /* 44px tap target, same look */
  margin-top: -8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
}
.link-btn:hover{ color: var(--ink); }
.field-search{ margin-bottom: 6px; }   /* the link's tap area already adds the space below */

.suggest{
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.35);
  z-index: 5;
  max-height: 260px;
  overflow: auto;
}
.suggest li{
  padding: 9px 14px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
}
.suggest li small{ display: block; font-size: 13px; color: var(--ink-soft); }
.suggest li:hover, .suggest li[aria-selected="true"]{ background: rgba(127,138,78,0.12); }
.suggest .suggest-note{ cursor: default; font-style: italic; color: var(--ink-soft); font-size: 14px; }

.form-error{
  font-size: 14px;
  font-style: italic;
  color: #9a5a3a;
  margin: -4px 0 12px;
}
.btn-submit{
  display: block;
  width: 100%;
  margin: 14px auto 0;
  padding: 15px 20px;
  font-size: 14px;
}
.btn-submit[disabled]{ opacity: 0.6; cursor: default; }
@media (max-width: 480px){
  .field input{ padding: 10px 9px; }
  .field input::placeholder{ font-size: 14px; }
  .btn-submit{ letter-spacing: 0.05em; font-size: 12px; padding: 14px 6px; white-space: nowrap; }
}
.addr-thanks{ padding: 8px 0 2px; }

/* ---------- preview renders (share images for email / text) ---------- */
.preview .countdown, .preview .address, .preview .event-actions{ display: none; }
.preview-email .page{ min-height: 0; padding: 0; }
.preview-email .card{ max-width: none; box-shadow: none; }
/* link preview: a complete card that ends after the date line */
.preview-og body{ overflow: hidden; }
.preview-og .page{ min-height: 100vh; padding: 0; align-items: center; }
.preview-og .card{ max-width: 980px; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.6); }
.preview-og .card-inner > :not(.hero){ display: none; }
.preview-og .card-inner{ padding: 96px 150px 40px; }
.preview-og .rose-arch{ top: calc(var(--hang) + 4px); width: 860px; -webkit-mask-image: linear-gradient(#000 44%, transparent 57%); mask-image: linear-gradient(#000 44%, transparent 57%); }
.preview-og .script-title{ font-size: 84px; margin-bottom: 14px; }
.preview-og .names-caps{ font-size: 20px; margin-bottom: 14px; white-space: nowrap; }
.preview-og .names-caps .name{ display: inline; }
.preview-og .names-caps .amp{ display: inline; margin: 0 0.3em 0 0; }   /* plus the real spaces in the markup */
.preview-og .date-line{ font-size: 25px; }
.preview-og .hebrew-verse{ font-size: 26px; }

.hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- closing ---------- */
.closing-script{
  font-family: var(--script);
  font-size: clamp(30px, 6vw, 38px);
  line-height: 1.1;
  max-width: 11em;
  margin: 0 auto 12px;
  text-wrap: balance;
  color: var(--ink);
}
.closing-caps{
  text-wrap: balance;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink);
}
.closing-note{
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 380px;
  margin: 0 auto;
}

/* ---------- footer ---------- */
.card-footer{
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* museo's monogram: initials stacked in serif capitals inside a double-ruled oval */
.footer-mark{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 50px; height: 74px;
  border: 1.25px solid var(--olive);   /* the softer olive, so the letters lead */
  border-radius: 50%;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
/* a small cluster of the same ivory roses above the monogram, to balance the arch */
/* same scale as the arch's roses: the cluster is 479px wide at the arch artwork's scale (1400px wide),
   and the arch is drawn at (card width - 2 x hang - 40px) */
.footer-roses{ display: block; width: calc((100cqw - 2 * var(--hang) - 40px) * 479 / 1400); height: auto; margin: 0 auto 18px; }   /* room above the monogram */
.footer-mark::after{          /* inner rule */
  content: "";
  position: absolute;
  inset: 3px;
  border: 0.75px solid var(--olive);
  border-radius: 50%;
}

/* extra-narrow phones (under 360px): a little more room for the names and title */
@media (max-width: 359px){
  .card-inner{ padding-left: 22px; padding-right: 22px; }
  .script-title{ font-size: 34px; }
  .names-caps{ letter-spacing: 0.15em; padding-left: 0.15em; white-space: nowrap; }   /* each name on one line */
  .hero-note{ letter-spacing: 0.08em; text-wrap: balance; }
}