/* Zac & Abby wedding invite */
:root {
  --ink: #756F6B;
  --paper: #EFEEEC;
  --paper-rgb: 239, 238, 236;
  --ink-rgb: 117, 111, 107;
  --sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Newsreader, "Times New Roman", Times, serif;
  --ease: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { margin: 0; padding: 0; border: 0; outline: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
[hidden] { display: none !important; }
html { background: white; line-height: 1; -webkit-text-size-adjust: 100%; }
body {
  font-size: 20px; font-family: var(--sans); font-weight: 300; min-width: 320px; color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
b, strong { font-weight: 600; }
i, em { font-style: italic; }
a { text-decoration: none; color: inherit; cursor: pointer; transition: all 0.4s var(--ease); }
img { display: block; width: 100%; height: auto; }

p { font: 300 1em/1.4 var(--sans); letter-spacing: -0.012em; margin-bottom: 20px; }
h2 { font: 300 min(1.8em, 8.8vw)/1.2 var(--sans); letter-spacing: -0.025em; margin-bottom: 0.8em; }
h3 { font: 500 15px/1.47 var(--sans); letter-spacing: 0.01em; }
h4 { font: 600 1em/1.2 var(--sans); text-transform: uppercase; margin-bottom: 1em; letter-spacing: 1px; }
h5 { font: 300 15px/1 var(--serif); margin-bottom: 6px; }
.toGreet { font: 300 1.5em/1.13 var(--serif); margin-bottom: 26px; }

input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
input[type=radio]:checked + label { background-color: var(--ink); color: var(--paper); }
input[type=radio]:focus-visible + label, .button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

textarea {
  font: 400 15px/34px var(--sans); margin: 0 auto 10px; padding: 0; width: 100%; box-sizing: border-box;
  background-color: transparent; color: var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0;
  text-align: center; resize: none; overflow: hidden; display: block;
}
::placeholder { color: rgba(var(--ink-rgb), 0.55); opacity: 1; }

.error { color: #ff0000 !important; }

.button {
  display: inline-block; vertical-align: middle; padding: 9px 28px; margin: 0 3px 10px;
  font: 600 15px/24px var(--sans); letter-spacing: 1px; text-transform: uppercase; text-align: center;
  color: var(--ink); min-width: 150px; border: solid 1px var(--ink); border-radius: 21px;
  background-color: transparent; box-sizing: border-box; cursor: pointer; transition: all 0.4s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.button.large { min-width: 240px; }
.button.fill { background-color: var(--ink); color: var(--paper); }
.button.disabled { opacity: 0.35; pointer-events: none; }
@media (hover: hover) {
  .button:hover { background-color: var(--ink); color: var(--paper); }
  .button.fill:hover { background-color: var(--paper); color: var(--ink); }
}
.button:active { background-color: var(--ink); color: var(--paper); }
.button.fill:active { background-color: var(--paper); color: var(--ink); }

.line { display: inline-block; width: 50px; border-top: 1px solid var(--ink); margin-top: 28px; }

.buttonLink {
  display: inline-block; font: 600 0.9em/30px var(--sans); text-transform: uppercase; letter-spacing: 1px;
  margin: 0 clamp(10px, 3vw, 40px); text-align: center;
}
.buttonLink span { display: inline-block; line-height: initial; }
.buttonLink span:after { content: ""; display: block; width: 100%; height: 2px; background-color: var(--ink); margin-top: 10px; }

.animate { transition-property: opacity, transform; transition-duration: 1s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.js .fadeUp { transform: translateY(50px); opacity: 0; }

/* ---------- hero card ---------- */
#mainContent { padding-top: clamp(492px, 100vh, 900px); background-color: var(--paper); position: relative; }
.cardPreview {
  display: flex; justify-content: center; align-items: center; width: 100%;
  height: 100vh; min-height: 492px; max-height: 900px; box-sizing: border-box; padding: 0 5% 1%;
  position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; background-color: var(--paper);
  will-change: height; z-index: 1;
}
.backgroundCard {
  width: 100%; height: 100%; position: absolute; top: 0; left: 0;
  background: url(assets/venice.webp) no-repeat center / cover;
  opacity: 0; transition: opacity 1s var(--ease-out); will-change: opacity, background-position;
}
.preview {
  width: max(304px, min(100%, 502px, calc(88vh * 0.71408)));
  aspect-ratio: 1004 / 1406; flex: none; position: relative; container-type: inline-size;
  opacity: 0; transform: translateY(130%);
  transition: transform 1s var(--ease-out), opacity 1s var(--ease-out); will-change: transform, opacity;
}
.dropShadow { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.65; }
.dropShadow > div { position: absolute; width: 50%; height: 50%; background-color: black; }
.dropShadow .shadow1 { box-shadow: 0 0 clamp(6px, 0.95vmin, 9px) black; height: 99.3%; width: 99.3%; transform: translate(0.5%, 0.5%); }
.dropShadow .shadow2 { top: 0; left: 50%; height: 96%; box-shadow: clamp(1.34px, 0.21vmin, 2px) 0 clamp(8px, 1.26vmin, 12px) black; border-radius: 5%/19%; transform: translate(0, 2%); }
.dropShadow .shadow4 { top: 50%; left: 0; width: 95.5%; height: 49%; box-shadow: 0 clamp(4.7px, 0.74vmin, 7px) clamp(4.7px, 0.74vmin, 7px) black; transform: skew(-4deg, 0.6deg) rotate(-1.3deg) translate(2%, 0%); }
.card { position: absolute; inset: 0; background-color: var(--paper); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.content { position: absolute; inset: 0; }
.content .text { position: absolute; }
.content p {
  margin: 0; text-align: center; color: #fff; font-size: calc(var(--fs, 15) / 502 * 100cqw); line-height: 1.5;
  filter: drop-shadow(rgba(0, 0, 0, 0.2) -1px -1px 0);
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
}
.content .mono { font-family: "Roboto Mono", monospace; font-weight: 300; letter-spacing: 0.04167em; }
.content .script { font-family: "Pinyon Script", cursive; font-weight: 400; --fs: 34; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
.content .display { font-family: Italiana, "Work Sans", serif; font-weight: 400; --fs: 45; line-height: 1.15; letter-spacing: 0.05em; white-space: nowrap; }
.t-dear  { width: 67.86%; top: 15.658%; left: 16.9817%; }
.t-join  { width: 67.86%; top: 21.3688%; left: 16.9714%; }
.t-names { width: 90.7952%; top: 41.7987%; left: 4.38668%; }
.t-when  { width: 67.86%; top: 62.4707%; left: 16%; }
.t-venue { width: 67.86%; top: 67.4002%; left: 15.9749%; }

.cardPreview.active .backgroundCard { opacity: 1; }
.cardPreview.active .preview { opacity: 1; transform: translateY(0); }
.cardPreview.done .backgroundCard, .cardPreview.done .preview { transition-property: none !important; }
html:not(.js) .backgroundCard, html:not(.js) .preview { opacity: 1; transform: none; }

/* ---------- greeting + rsvp ---------- */
.greeting { text-align: center; padding: 36px 40px 0; background-color: var(--paper); position: relative; }
.greeting h3 { letter-spacing: 1px; text-transform: uppercase; }
.eventTitle { text-align: center; padding: 24px 40px 50px; background-color: var(--paper); position: relative; }
.eventTitle .addTotal { display: none; margin-top: clamp(20px, 4vw, 50px); margin-bottom: 16px; overflow: hidden; }
.eventTitle .addTotal h4 { margin-bottom: 0.5em; }
.eventTitle .rsvpTotalBox { overflow: hidden; }
.eventTitle .addTotal select {
  width: 42px; height: 36px; border-radius: 0; font: 600 20px var(--sans); text-align: left; color: var(--ink);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23756F6B' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat right center / 14px;
}
.eventTitle .addTotal textarea { max-width: 500px; padding: 0 0 18px; margin: 10px auto 30px; }
.eventTitle .formGuts { overflow: hidden; }
.eventTitle .button[type=submit] { display: none; }
.eventTitle .button.success { height: 44px; background-color: var(--ink); pointer-events: none; }
.eventTitle .button.success:after {
  content: ""; display: inline-block; width: 24px; height: 24px; vertical-align: middle;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23EFEEEC' stroke-width='1.6' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 24px;
}
.eventTitle .button.confirm { background-color: var(--ink); color: var(--paper); }
@media (hover: hover) { .eventTitle .button.confirm:hover { background-color: var(--paper); color: var(--ink); } }
.eventTitle .noLink { font-size: 16px; margin: 0; }

/* ---------- when / where / who ---------- */
.details, .registryWrapper, .commentsWrapper, .messageWrapper { background-color: #fff; position: relative; }
.details { display: flex; justify-content: center; align-items: stretch; }
.details .box { width: 33.33%; min-height: 320px; box-sizing: border-box; padding: 70px 5%; position: relative; border-color: var(--paper); }
.details .box h3 { letter-spacing: 1px; margin-bottom: 26px; }
.details .box.when, .details .box.who { background-color: rgba(var(--paper-rgb), 0.8); }
.details .box.where { background-color: rgba(var(--paper-rgb), 0.7); }

/* ---------- registry ---------- */
.registry {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  min-height: 440px; padding: clamp(40px, 5%, 80px) 40px; box-sizing: border-box; position: relative; overflow: hidden;
  background-color: rgba(var(--paper-rgb), 0.9);
}
.registry > * { position: relative; }
.registry .textBG {
  position: absolute; top: 50%; left: -3%; width: 106%; transform: translateY(-50%);
  font: 300 clamp(40px, 6.2vw, 92px)/1.24 var(--sans); letter-spacing: -0.02em; text-align: left;
  color: #fff; opacity: 0.38; pointer-events: none; user-select: none; max-height: 100%; overflow: hidden;
}
.registry .regTitle { text-align: center; }

/* ---------- message + links ---------- */
.message { padding: 5% 40px; background-color: rgba(var(--paper-rgb), 0.9); }
.message > div { max-width: 630px; margin: 0 auto; }
.links { padding: 5% 40px; text-align: center; background-color: var(--paper); border-top: 1px solid var(--ink); position: relative; }
.links .linksContainer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.links .linksContainer a { display: block; padding: 1.2% 0; line-height: 20px; white-space: nowrap; }

/* ---------- comments ---------- */
.comment { padding: 8% 40px; position: relative; overflow: hidden; background-color: var(--paper); }
.comment .commentBG {
  width: 100%; height: 200%; position: absolute; top: -100%; left: 0;
  background: url(assets/venice.webp) center / cover; will-change: transform;
}
.comment .commentForm {
  max-width: 635px; padding: 6.5% 5% 26px; margin: 0 auto; box-sizing: border-box;
  background-color: var(--paper); text-align: center; position: relative;
}
.comment .commentForm h2 { margin-bottom: 8%; }
.comment .commentForm textarea { margin-bottom: 15%; }
.comments { padding: 60px 30px; text-align: center; background-color: rgba(var(--paper-rgb), 0.7); }
.comments .list { display: flex; flex-wrap: wrap; align-items: flex-start; }
.comments .list > div {
  width: calc(33.33% - 60px); padding: 40px; margin: 0 30px 60px; box-sizing: border-box; background-color: var(--paper);
}
.comments .list > div p { overflow-wrap: anywhere; white-space: pre-line; }
.comments .list > div p.slash { margin-bottom: 14px; }
.comments .list > div p.slash:after {
  content: ""; display: inline-block; width: 13px; border-top: solid 1px rgba(var(--ink-rgb), 0.7);
  transform: rotate(-45deg); position: relative; top: -5px;
}

/* ---------- breakpoints ---------- */
@media (max-width: 1023px) {
  .comments { padding: 30px 15px; }
  .comments .list > div { width: calc(50% - 30px); padding: 20px; margin: 0 15px 30px; }
}
@media (max-width: 768px) {
  .buttonLink { margin: 0 20px; }
  .greeting { padding: 50px 20px 0; }
  .eventTitle { padding: 40px 20px 25px; }
  .details { display: block; }
  .details .box {
    width: auto; min-height: 200px; padding: 60px 36px 40px; text-align: center; background-clip: padding-box;
    border-style: solid; border-color: transparent; border-width: 10px 40px;
  }
  .details .box.when { border-top-width: 50px; }
  .details .box.who { border-bottom-width: 70px; }
  .registry { min-height: 380px; }
  .registry .textBG { font-size: 46px; }
  .message { padding: 40px 40px 26px; text-align: center; }
  .links { padding: 40px; }
  .comment { padding: 80px 40px; }
  .comment .commentForm { padding: 40px 30px; }
  .comments { padding: 26px 40px; }
  .comments .list { display: block; }
  .comments .list > div { width: auto; padding: 40px; margin: 0 0 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fadeUp { transform: none; }
  .animate, .preview, .backgroundCard { transition-duration: 0.01s !important; }
}