:root {
  --brown: #36241a;
  --sage: #9cb9b7;
  --paper: #f4f3f2;
  --ink: #2b2826;
  --muted-sage: #7d9492;
}

* { box-sizing: border-box; }
html { background: var(--brown); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--brown);
  color: var(--paper);
  font-family: "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a { color: inherit; }
img { display: block; }

.page {
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  background: var(--brown);
}

.canvas {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--brown);
}

.logo,
.notice,
.arm-flower,
.rose-photo,
.quote,
.contact,
.cta {
  position: absolute;
}

.logo { height: auto; }

.notice {
  margin: 0;
  color: var(--paper);
  font-family: "proxima-nova", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-align: center;
  text-transform: capitalize;
  letter-spacing: .05em;
  line-height: 1.4;
}

.arm-flower {
  opacity: .8;
  mix-blend-mode: color-dodge;
}

.rose-photo {
  display: block;
  margin: 0;
  padding: 0;
  mix-blend-mode: exclusion;
}
.rose-photo img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.quote {
  margin: 0;
  color: var(--sage);
  font-family: "orpheuspro", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
}
.quote em,
.cta__title em {
  font-family: "orpheuspro", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}

.contact {
  text-align: center;
  font-family: "proxima-nova", sans-serif;
}
.contact h2 {
  margin: 0;
  color: var(--sage);
  font-size: inherit;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .05em;
}
.contact nav {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact a {
  color: var(--paper);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .05em;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .06em;
}
.contact a:focus-visible,
.cta__link:focus-visible {
  outline: 1px solid var(--sage);
  outline-offset: 5px;
}

.cta { pointer-events: none; }
.cta__envelope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.cta__link {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  text-align: center;
  text-decoration: none;
  pointer-events: auto;
  transform: rotate(-.95deg);
}
.cta__title {
  color: var(--ink);
  font-family: "orpheuspro", Georgia, serif;
  font-weight: 400;
  line-height: .759;
  text-transform: uppercase;
  white-space: nowrap;
}
.cta__schedule {
  color: var(--muted-sage);
  font-family: "proxima-nova", sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .06em;
}
.cta__link:hover .cta__schedule,
.cta__link:focus-visible .cta__schedule {
  text-decoration-thickness: 2px;
}

/* MOBILE — Figma target: 393 × 854 */
@media (max-width: 699px) {
  .canvas { aspect-ratio: 393 / 854; }

  .logo {
    left: 31.21%;
    top: 17.798%;
    width: 35.51%;
  }

  .notice {
    left: 27.218%;
    top: 22.718%;
    width: 45.215%;
    font-size: 3.053vw;
    font-weight: 500;
  }

  .arm-flower {
    left: -0.916%;
    top: 26.113%;
    width: 26.531%;
    height: 25.996%;
  }

  .rose-photo {
    left: 78.539%;
    top: 11.677%;
    width: 21.586%;
    height: 18.033%;
  }

  .quote {
    left: 16.121%;
    top: 31.382%;
    width: 67.758%;
    font-size: 4.071vw;
    line-height: 1.2613776;
    white-space: nowrap;
  }

  .cta {
    left: 27.584%;
    top: 54.801%;
    width: 44.784%;
    height: 27.214%;
  }
  .cta__link {
    left: 10.47%;
    top: 27.82%;
    width: 79.06%;
  }
  .cta__title { font-size: 5.662vw; }
  .cta__schedule {
    margin-top: 5.12vw;
    font-size: 3.348vw;
  }

  .contact {
    left: 25.445%;
    top: 89.461%;
    width: 48.092%;
    font-size: 3.053vw;
  }
  .contact nav {
    margin-top: .763vw;
    gap: 4.326vw;
  }
  .contact a { font-size: 3.562vw; }
}

/* TABLET — Figma target: 744 × 1133 */
@media (min-width: 700px) and (max-width: 1099px) {
  .canvas { aspect-ratio: 744 / 1133; }

  .logo {
    left: 38.481%;
    top: 15.267%;
    width: 23.036%;
  }

  .notice {
    left: 32.304%;
    top: 19.417%;
    width: 35.393%;
    font-size: 1.882vw;
  }

  .arm-flower {
    left: 0;
    top: 21.359%;
    width: 14.247%;
    height: 20.118%;
  }

  .rose-photo {
    left: 86.763%;
    top: 22.856%;
    width: 13.236%;
    height: 17.125%;
  }

  .quote {
    left: 14.247%;
    top: 27.007%;
    width: 71.505%;
    font-size: 4.301vw;
    line-height: 1.21875;
    white-space: nowrap;
  }

  .contact {
    left: 37.298%;
    top: 45.72%;
    width: 25.403%;
    font-size: 1.613vw;
  }
  .contact nav {
    margin-top: .403vw;
    gap: 2.285vw;
  }
  .contact a { font-size: 1.882vw; }

  .cta {
    left: 30.845%;
    top: 57.193%;
    width: 38.385%;
    height: 33.284%;
  }
  .cta__link {
    left: 11.19%;
    top: 26.74%;
    width: 77.69%;
  }
  .cta__title { font-size: 3.312vw; }
  .cta__schedule {
    margin-top: 3.04vw;
    font-size: 1.958vw;
  }
}

/* DESKTOP — Figma target: 1512 × 832 */
@media (min-width: 1100px) {
  .canvas { aspect-ratio: 1512 / 832; }

  .logo {
    left: 43.018%;
    top: 25.962%;
    width: 13.963%;
  }

  .notice {
    left: 41.292%;
    top: 31.971%;
    width: 17.416%;
    font-size: .926vw;
  }

  .arm-flower {
    left: 0;
    top: 32.09%;
    width: 13.147%;
    height: 35.821%;
  }

  .rose-photo {
    left: 92.262%;
    top: 38.34%;
    width: 7.738%;
    height: 23.321%;
  }

  .quote {
    left: 31.097%;
    top: 40.985%;
    width: 37.806%;
    font-size: 2.116vw;
    line-height: 1.21875;
    white-space: nowrap;
  }

  .contact {
    left: 43.75%;
    top: 60.096%;
    width: 12.5%;
    font-size: .794vw;
  }
  .contact nav {
    margin-top: .198vw;
    gap: 1.124vw;
  }
  .contact a { font-size: .926vw; }

  .cta {
    left: 42.58%;
    top: 70.192%;
    width: 14.84%;
    height: 35.613%;
  }
  .cta__link {
    left: 13.2%;
    top: 27.48%;
    width: 73.6%;
  }
  .cta__title { font-size: 1.855vw; }
  .cta__schedule {
    margin-top: 1.12vw;
    font-size: 1.097vw;
  }
}

/* INTERACTIONS ------------------------------------------------------------ */
.contact a,
.cta,
.cta__envelope,
.cta__link,
.cta__schedule {
  transition-property: color, transform, filter, opacity, text-underline-offset, text-decoration-color;
  transition-duration: 280ms;
  transition-timing-function: cubic-bezier(.2,.75,.25,1);
}

.contact a {
  display: inline-block;
  text-decoration-color: rgba(244, 243, 242, .72);
}

/* The whole collage/card is the hit area. */
.cta {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  isolation: isolate;
  transform-origin: 50% 68%;
}

.cta__envelope {
  transform-origin: 50% 72%;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.cta__link {
  pointer-events: none;
  transform-origin: center;
}

.cta:focus-visible {
  outline: 1px solid var(--sage);
  outline-offset: 8px;
}

@media (hover: hover) and (pointer: fine) {
  .contact a:hover {
    color: var(--sage);
    transform: translateY(-2px);
    text-decoration-color: var(--sage);
    text-underline-offset: .16em;
  }

  .contact a:active {
    transform: translateY(0);
  }

  .cta:hover {
    transform: translateY(-4px) rotate(-.22deg) scale(1.012);
  }

  .cta:hover .cta__envelope {
    filter: drop-shadow(0 16px 18px rgba(14, 7, 3, .16));
  }

  .cta:hover .cta__link {
    transform: translateY(-3px) rotate(-.15deg);
  }

  .cta:hover .cta__schedule {
    color: #6f8987;
    text-underline-offset: .14em;
  }

  .cta:active {
    transform: translateY(-1px) rotate(-.08deg) scale(1.004);
    transition-duration: 120ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact a,
  .cta,
  .cta__envelope,
  .cta__link,
  .cta__schedule {
    transition-duration: 0.01ms !important;
  }

  .contact a:hover,
  .cta:hover,
  .cta:hover .cta__link {
    transform: none;
  }
}