/* Visit calendar and planning postcard. Scoped to the Visit route. */
.visit-page main {
  overflow: clip;
}

.visit-page .visit-calendar-layout {
  display: grid;
  grid-template-columns: minmax(42rem, 1fr) minmax(17rem, 22rem);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

.visit-page .visit-calendar-main {
  min-width: 0;
}

.visit-page .show-calendar {
  width: 100%;
  font-family: "Open Sans", Arial, sans-serif;
}

.visit-page .show-calendar :is(time, .calendar-status, .calendar-finale),
.visit-page .calendar-heading,
.visit-page .calendar-planner {
  font-family: "Open Sans", Arial, sans-serif;
}

.visit-page .show-calendar time {
  font-weight: 800;
}

.visit-page .show-calendar .show-night.is-selected {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px #fffdf6, 0 0 2.1rem rgba(108, 220, 255, .55);
  transform: translateY(-2px);
}

.visit-page .calendar-planner {
  margin-top: 1rem;
  border-top: 2px solid #9deaff;
}

.visit-page .night-keepsake {
  --postcard-rx: 0deg;
  --postcard-ry: 0deg;
  position: sticky;
  top: 6.25rem;
  min-width: 0;
  margin: 0;
  perspective: 70rem;
}

.visit-page .night-keepsake::before {
  content: "Your chosen night";
  display: block;
  margin-bottom: .7rem;
  color: rgba(157, 234, 255, .72);
  font: 800 .54rem/1 "Open Sans", Arial, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.visit-page .night-keepsake-card {
  position: relative;
  overflow: hidden;
  color: #08131e;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: .28rem;
  background: #f3f0e7;
  box-shadow: 0 1.8rem 4.5rem rgba(0, 0, 0, .42);
  transform: rotateX(var(--postcard-rx)) rotateY(var(--postcard-ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .35s ease;
}

.visit-page .night-keepsake-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  border: .45rem solid rgba(247, 243, 233, .68);
  pointer-events: none;
}

.visit-page .night-keepsake.has-night .night-keepsake-card {
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, .48), 0 0 3rem rgba(96, 210, 255, .12);
}

.visit-page .night-keepsake-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #02040a;
}

.visit-page .night-keepsake-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(2, 5, 10, .56));
  pointer-events: none;
}

.visit-page .night-keepsake-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform 1s cubic-bezier(.2, .75, .2, 1);
}

.visit-page .night-keepsake.has-night .night-keepsake-photo img {
  transform: scale(1.035);
}

.visit-page .night-keepsake-photo figcaption {
  position: absolute;
  z-index: 2;
  right: .85rem;
  bottom: .7rem;
  left: .85rem;
  color: rgba(255, 255, 255, .82);
  font: 700 .47rem/1.2 "Open Sans", Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.visit-page .night-keepsake-body {
  position: relative;
  min-height: 0;
  padding: 1.25rem 1.25rem 1.35rem;
  background:
    linear-gradient(rgba(35, 61, 77, .055) 1px, transparent 1px) 0 0 / 100% 1.7rem,
    #f3f0e7;
}

.visit-page .night-keepsake-heading {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .7rem;
}

.visit-page .night-keepsake-star {
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  object-fit: contain;
}

.visit-page .night-keepsake-kicker {
  margin: 0;
  color: #28627a;
  font: 800 .52rem/1.2 "Open Sans", Arial, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.visit-page .night-keepsake-body h4 {
  max-width: 16ch;
  margin: 0;
  color: #07131e;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.visit-page .night-keepsake-day {
  margin: .6rem 0 1rem;
  color: #3a4b55;
  font: 600 .72rem/1.42 "Open Sans", Arial, sans-serif;
}

.visit-page .night-keepsake-body address {
  margin: 0;
  color: #344752;
  font: normal 600 .66rem/1.48 "Open Sans", Arial, sans-serif;
}

.visit-page .night-keepsake-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .8rem;
  margin: .85rem 0 0;
  padding-top: .8rem;
  color: #314652;
  border-top: 1px solid rgba(8, 19, 30, .17);
  font: 700 .58rem/1.3 "Open Sans", Arial, sans-serif;
}

.visit-page .night-keepsake-facts strong {
  color: #07131e;
  font-size: .9rem;
  font-weight: 800;
}

.visit-page .night-keepsake-stamp {
  position: absolute;
  z-index: 6;
  top: .9rem;
  right: .9rem;
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  place-content: center;
  border: 1px dashed rgba(20, 72, 92, .52);
  border-radius: 50%;
  color: #164b61;
  text-align: center;
  background: rgba(243, 240, 231, .94);
  transform: rotate(8deg);
}

.visit-page .night-keepsake-stamp span {
  font: 800 .43rem/1 "Open Sans", Arial, sans-serif;
  letter-spacing: .14em;
}

.visit-page .night-keepsake-stamp strong {
  display: block;
  margin-top: .18rem;
  font: 800 .83rem/1 "Open Sans", Arial, sans-serif;
  letter-spacing: -.04em;
}

.visit-page .night-keepsake.has-night .night-keepsake-stamp {
  color: #123b4d;
  border-color: #256a82;
}

.visit-page .night-keepsake.is-finale .night-keepsake-stamp {
  color: #3a2705;
  border-color: #b07916;
  background: #f1d58e;
}

.visit-page .night-keepsake-note {
  margin: .8rem .15rem 0;
  color: rgba(247, 245, 239, .62);
  font-size: .64rem;
  line-height: 1.52;
}

.visit-page .night-keepsake-note strong {
  color: #fffdf6;
}

@media (max-width: 1120px) {
  .visit-page .visit-calendar-layout {
    grid-template-columns: minmax(35rem, 1fr) minmax(15rem, 18rem);
    gap: 1.5rem;
  }

  .visit-page .night-keepsake-body {
    padding-inline: 1rem;
  }

  .visit-page .night-keepsake-stamp {
    width: 3rem;
    height: 3rem;
  }
}

@media (max-width: 900px) and (min-width: 821px) {
  .visit-page .visit-calendar-layout {
    grid-template-columns: minmax(27rem, 1fr) 13.5rem;
    gap: 1rem;
  }

  .visit-page .night-keepsake-body h4 {
    font-size: 1.3rem;
  }

  .visit-page .night-keepsake-stamp {
    top: .65rem;
    right: .6rem;
    width: 2.65rem;
    height: 2.65rem;
  }

  .visit-page .night-keepsake-body address {
    max-width: 11rem;
  }
}

@media (max-width: 820px) and (min-width: 761px) {
  .visit-page .visit-calendar-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .visit-page .night-keepsake {
    position: relative;
    top: auto;
    width: min(100%, 26rem);
    margin: 1rem auto 0;
  }
}

@media (max-width: 760px) {
  .visit-page .visit-calendar-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .visit-page .night-keepsake {
    z-index: 6;
    order: -1;
    top: 4.7rem;
    width: 100%;
    padding: .55rem 0 .2rem;
    background: #050a12;
  }

  .visit-page .night-keepsake::before {
    display: none;
  }

  .visit-page .night-keepsake-card {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    min-height: 7.35rem;
    border-radius: .2rem;
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, .42);
    transform: none;
  }

  .visit-page .night-keepsake-photo {
    aspect-ratio: auto;
    min-height: 7.35rem;
  }

  .visit-page .night-keepsake-photo img {
    transform: none;
  }

  .visit-page .night-keepsake-photo figcaption,
  .visit-page .night-keepsake-body address,
  .visit-page .night-keepsake-heading,
  .visit-page .night-keepsake-facts span {
    display: none;
  }

  .visit-page .night-keepsake-body {
    display: grid;
    align-content: center;
    min-height: 0;
    padding: .85rem 3.1rem .8rem .9rem;
  }

  .visit-page .night-keepsake-body h4 {
    max-width: 17ch;
    font-size: clamp(1rem, 4.5vw, 1.35rem);
    line-height: 1.04;
  }

  .visit-page .night-keepsake-day {
    margin: .34rem 0 0;
    font-size: .61rem;
  }

  .visit-page .night-keepsake-facts {
    margin: .42rem 0 0;
    padding: 0;
    border: 0;
  }

  .visit-page .night-keepsake-facts strong {
    font-size: .72rem;
  }

  .visit-page .night-keepsake-stamp {
    top: 50%;
    right: .45rem;
    width: 2.45rem;
    height: 2.45rem;
    transform: translateY(-50%) rotate(8deg);
  }

  .visit-page .night-keepsake-stamp span {
    font-size: .37rem;
  }

  .visit-page .night-keepsake-stamp strong {
    font-size: .68rem;
  }

  .visit-page .night-keepsake-note {
    margin: .45rem 0 0;
    font-size: .56rem;
    line-height: 1.4;
  }

  .visit-page .show-calendar .show-night.is-selected {
    transform: none;
  }
}

@media (max-width: 390px) {
  .visit-page .night-keepsake-card {
    grid-template-columns: 6.25rem minmax(0, 1fr);
  }

  .visit-page .night-keepsake-body {
    padding-left: .75rem;
  }

  .visit-page .night-keepsake-day {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visit-page .night-keepsake-card,
  .visit-page .night-keepsake-photo img,
  .visit-page .show-calendar .show-night.is-selected {
    transition: none;
    transform: none;
  }
}

html.motion-paused .visit-page .night-keepsake-card,
html.motion-paused .visit-page .night-keepsake-photo img,
html.motion-paused .visit-page .show-calendar .show-night.is-selected {
  transition: none;
  transform: none;
}

@media(max-width:760px) { .visit-page .night-keepsake { box-shadow:0 9px 18px #050a1266; padding-bottom:.7rem; } }

/* The existing calendar planner lives in the calendar column, not the page width. */
.visit-page .visit-calendar-main .calendar-planner { grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.35rem; }
.visit-page .visit-calendar-main .calendar-planner h4 { font:600 1.45rem/1.2 "Open Sans",Arial,sans-serif;letter-spacing:-.045em; }
.visit-page .visit-calendar-main .calendar-planner-status { margin:0;font-size:.9rem; }
.visit-page .visit-calendar-main .calendar-planner-details { grid-column:1;justify-content:space-between;gap:1.2rem;min-width:0; }
.visit-page .visit-calendar-main .calendar-download { max-width:100%;white-space:normal;text-align:center; }
html:not(.has-js) .visit-page .night-keepsake { display:none; }
@media(min-width:821px) and (max-width:1000px) {
 .visit-page .visit-calendar-layout { grid-template-columns:minmax(0,1fr) 13.5rem;gap:1rem; }
 .visit-page .night-keepsake-body h4 { font-size:1.25rem; }
}

/* Give the chosen night useful next steps without changing the calendar. */
.visit-page .night-plan-actions { display:grid; gap:.55rem; margin-top:.8rem; }
.visit-page .night-plan-actions[hidden],
.night-invitation [hidden] { display:none !important; }
.visit-page .night-plan-actions :is(button,a),
.night-invitation-controls > :is(button,a) {
  display:flex; align-items:center; justify-content:space-between; gap:.65rem;
  min-height:44px; padding:.8rem .9rem; border:1px solid #9cbdcc48; border-radius:3px;
  background:#0b1b28; color:#f7f3e8; font:700 .75rem/1.45 "Open Sans",Arial,sans-serif;
  text-decoration:none; cursor:pointer;
}
.visit-page .night-plan-actions .night-plan-invite,
.night-invitation-controls > .night-invitation-share { background:#f0d18f; color:#102b3c; border-color:#f0d18f; }
.visit-page .night-plan-tools { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.visit-page .night-plan-actions :is(button,a):hover,
.night-invitation-controls > :is(button,a):hover { border-color:#f0d18f; box-shadow:0 0 16px #e9ce9120; }
.visit-page .night-plan-actions :is(button,a):focus-visible,
.night-invitation :is(button,a,input):focus-visible { outline:2px solid #80e2ff; outline-offset:3px; }
.visit-page .night-calendar-options { display:grid; gap:.4rem; padding:.6rem; background:#07111c; border:1px solid #9cbdcc48; }
.visit-page .night-calendar-options[hidden] { display:none; }
.visit-page .night-calendar-options p { margin:.4rem .2rem; color:#a7bfcc; font-size:.7rem; line-height:1.6; }
html.invitation-open { overflow:hidden; }
.visit-action-icon { display:inline-block; vertical-align:middle; flex:0 0 20px; width:20px; height:20px; }
.night-invitation { box-sizing:border-box; width:min(900px,calc(100vw - 2rem)); max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin:auto; padding:clamp(1rem,3vw,2rem); border:1px solid #9cbdcc50; border-radius:8px; background:#07111b; color:#f7f3e8; box-shadow:0 2rem 8rem #0009; overflow:hidden; }
.night-invitation[open] { display:flex; flex-direction:column; }
.night-invitation { max-width:none; }
.night-invitation::backdrop { background:#02050ee6; backdrop-filter:blur(7px); }
.night-invitation-heading { display:flex; flex-shrink:0; justify-content:space-between; align-items:start; gap:1rem; margin-bottom:1.5rem; }
.night-invitation-heading .section-label { margin:0 0 .65rem; color:#ebce92; font-size:.6rem; }
.night-invitation-heading h2 { margin:0; font:700 clamp(1.7rem,3vw,2.8rem)/1.06 "Open Sans",Arial,sans-serif; letter-spacing:-.05em; }
.night-invitation-close { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:1px solid #9cbdcc55; border-radius:50%; background:transparent; color:#f7f3e8; cursor:pointer; }
.night-invitation-layout { display:grid; min-height:0; overflow:auto; overscroll-behavior:contain; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:clamp(1.3rem,3vw,2.5rem); padding:4px; }
.night-invitation-preview { display:grid; place-items:center; min-width:0; aspect-ratio:4/5; background:#0c1c2b; }
.night-invitation-preview img { display:block; width:100%; height:auto; }
.night-invitation-preview > p { max-width:25ch; padding:1.3rem; color:#afc9d6; font-size:.85rem; line-height:1.6; text-align:center; }
.night-invitation-controls { min-width:0; }
.night-invitation-controls > p { color:#b6c4cc; font:400 .88rem/1.7 "Open Sans",Arial,sans-serif; }
.night-invitation-controls .night-invitation-date { margin-top:0; color:#f0d18f; font-size:1.05rem; font-weight:700; }
.night-invitation-controls > :is(button,a) { width:100%; margin-top:.65rem; }
.night-invitation-controls button:disabled { opacity:.5; cursor:wait; }
.night-invitation-controls .night-invitation-status { min-height:1.4em; margin:.9rem 0; color:#9fe8ff; font-size:.76rem; }
.night-invitation-controls .night-invitation-footnote { font-size:.7rem; color:#91a4af; }
.night-invitation-link { display:block; margin-top:1rem; color:#afc9d6; font-size:.75rem; }
.night-invitation-link input { display:block; box-sizing:border-box; width:100%; margin-top:.4rem; padding:.65rem; border:1px solid #9cbdcc55; background:#0b1b28; color:#fff; font-size:1rem; }
@media(max-width:760px) {
  .visit-page .night-keepsake { position:relative; top:auto; order:0; }
  .visit-page .night-plan-actions { gap:.45rem; }
}
@media(max-width:580px) {
  .night-invitation { width:calc(100vw - 1rem); max-height:calc(100vh - 1rem); max-height:calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:1rem; }
  .night-invitation-layout { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .night-invitation-preview { width:min(100%,18rem); justify-self:center; }
  .night-invitation-heading { margin-bottom:1.1rem; }
}
@media(min-width:761px) and (max-height:850px) {
  .visit-page .night-keepsake { position:relative; top:auto; }
}