@charset "UTF-8";

:root {
  color-scheme: light;
  --ink: #604b6f;
  --muted-ink: #816c89;
  --lavender: #8d59b4;
  --pink: #d98cb9;
  --paper: #fbf7f2;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #e9d9eb; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background: #e9d9eb;
}

.opening {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  padding: clamp(30px, 5.4vw, 82px) 20px;
  overflow: hidden;
  place-items: center;
  background: #e8d9eb;
}

.backdrop,
.backdrop__wash { position: absolute; inset: 0; z-index: -2; }
.backdrop { overflow: hidden; }
.backdrop__photo { position: absolute; width: 60%; height: 74%; object-fit: cover; filter: saturate(.65); opacity: .48; }
.backdrop__photo--sunset { inset: -12% auto auto -16%; transform: rotate(-9deg); }
.backdrop__photo--together { inset: auto -19% -13% auto; transform: rotate(8deg); }
.backdrop__wash {
  z-index: 1;
  background: linear-gradient(140deg, rgb(225 202 233 / 66%), rgb(247 220 229 / 67%)),
    radial-gradient(ellipse at 16% 75%, rgb(164 112 189 / 35%), transparent 37%);
}

.cover {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(790px, 100%);
  min-height: min(1320px, calc(100svh - 88px));
  flex-direction: column;
  align-items: center;
  padding: clamp(34px, 4.5vw, 56px) clamp(24px, 7vw, 78px) 46px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 87%);
  border-radius: clamp(32px, 6vw, 58px);
  background:
    radial-gradient(ellipse at 17% 18%, rgb(147 110 139 / 4%), transparent 38%),
    radial-gradient(ellipse at 83% 81%, rgb(190 146 172 / 5%), transparent 42%),
    var(--paper);
  box-shadow: 0 22px 65px rgb(88 54 99 / 11%);
}

.cover::before {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(159 122 165 / 9%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.cover__top { display: flex; width: 100%; align-items: center; justify-content: center; }
.private-label {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 14px;
  padding: 0 21px;
  border: 1px solid #e6c8e7;
  border-radius: 999px;
  color: #7a5595;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 4px rgb(233 210 239 / 22%);
}
.private-label__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 0 6px #f0e2f2; }
.lock-icon { width: 14px; fill: none; stroke: #c87cae; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cover__seal { display: none; }

.cover__intro { display: flex; flex-direction: column; align-items: center; margin-top: clamp(48px, 7vh, 91px); text-align: center; }
.museum-mark { width: 31px; margin-bottom: 31px; fill: var(--ink); stroke: var(--ink); stroke-linecap: square; stroke-width: 1.5; }
.eyebrow { margin: 0 0 12px; color: #82688e; font-size: clamp(14px, 2vw, 19px); font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
h1 { display: grid; margin: 0; font-size: clamp(68px, 11.5vw, 124px); font-weight: 500; letter-spacing: -.075em; line-height: .86; text-transform: uppercase; }
h1 span:first-child { color: #8253a8; }
h1 span:last-child {
  margin-top: 7px;
  background: linear-gradient(100deg, #d283b4 5%, #9c64b3 85%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cover__motto { margin: 22px 0 0; color: #745a7c; font-size: clamp(22px, 4vw, 34px); font-style: italic; line-height: 1.08; transform: rotate(-3deg); }

.established {
  display: grid;
  min-width: 260px;
  margin-top: clamp(34px, 5vh, 59px);
  padding: 18px 34px 20px;
  justify-items: center;
  border: 1px solid #e7cce8;
  border-radius: 27px;
  background: #fcf2f8;
}
.established__label { font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.established__rule { width: 16px; height: 1px; margin: 11px 0 7px; background: #9877a2; }
.established__date { color: #8152a4; font-size: 28px; }

.quote-note {
  position: relative;
  display: flex;
  width: min(100%, 560px);
  min-height: 128px;
  align-items: center;
  justify-content: center;
  margin: clamp(35px, 5vh, 55px) 0 0;
  padding: 24px 34px;
  background: #f7f1eb;
  color: #76627c;
}
.quote-note::before { position: absolute; inset: 0; border: 1px solid rgb(155 129 150 / 10%); content: ""; transform: rotate(-.6deg); }
.quote-note p { position: relative; margin: 0; font-size: clamp(18px, 3vw, 27px); line-height: 1.22; }
.quote-note__mark { align-self: flex-start; margin: -5px 16px 0 0; color: #bd8ad1; font-size: 58px; font-weight: 700; line-height: .85; }
.quote-note__heart { align-self: flex-end; margin: 0 0 -2px 20px; color: #b46fa5; font-family: Georgia, serif; font-size: 34px; }

.enter-button {
  display: flex;
  width: min(100%, 560px);
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(34px, 5vh, 52px);
  border-radius: 999px;
  background: linear-gradient(105deg, #8953b1, #b36fbd 66%, #dc83b8);
  color: white;
  font-size: clamp(23px, 4vw, 34px);
  text-decoration: none;
  box-shadow: 0 13px 26px rgb(150 91 174 / 18%);
  transition: transform 180ms ease, filter 180ms ease;
}
.enter-button:hover { filter: saturate(1.08); transform: translateY(-2px); }
.enter-button:focus-visible { outline: 3px solid #634479; outline-offset: 5px; }
.enter-button svg { width: 26px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

.cover__footer { width: min(100%, 380px); margin-top: 28px; text-align: center; }
.footer-rule { display: flex; align-items: center; gap: 16px; color: #c478a6; font-family: Arial, sans-serif; font-size: 19px; }
.footer-rule::before, .footer-rule::after { height: 1px; flex: 1; background: #d9bdce; content: ""; }
.cover__footer p { margin: 11px 0 0; color: #806b87; font-size: 15px; letter-spacing: .09em; }
.scribble { position: absolute; color: #be8bad; font-family: Georgia, serif; font-weight: 400; }
.scribble--left { bottom: 5%; left: 6%; font-size: 68px; transform: rotate(-20deg); }
.scribble--right { top: 34%; right: 13%; color: #aa80be; font-size: 38px; }

.polaroid {
  position: absolute;
  z-index: 2;
  width: clamp(150px, 23vw, 245px);
  margin: 0;
  padding: 10px 10px 12px;
  background: #fbf8f1;
  box-shadow: 0 8px 25px rgb(66 43 73 / 18%);
}
.polaroid img { display: block; width: 100%; aspect-ratio: 1 / .84; object-fit: cover; }
.polaroid figcaption { padding-top: 8px; color: #725e79; font-size: clamp(10px, 1.4vw, 13px); font-style: italic; }
.polaroid--sunset { top: 16%; left: max(-48px, calc((100vw - 1200px) / 2)); transform: rotate(-10deg); }
.polaroid--together { right: max(-35px, calc((100vw - 1200px) / 2)); bottom: 18%; transform: rotate(8deg); }

@media (min-width: 900px) {
  .cover__top { justify-content: center; }
  .cover__seal { position: absolute; top: 41px; right: 47px; display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #e7cde8; border-radius: 50%; color: #b472bb; font-family: Arial, sans-serif; font-size: 28px; }
}

@media (max-width: 650px) {
  .opening { padding: 18px 12px; }
  .cover { min-height: calc(100svh - 36px); padding: 27px 21px 27px; border-radius: 31px; }
  .private-label { min-height: 42px; gap: 10px; padding: 0 14px; font-size: 10px; letter-spacing: .18em; }
  .cover__intro { margin-top: clamp(39px, 7vh, 63px); }
  .museum-mark { width: 27px; margin-bottom: 22px; }
  h1 { font-size: clamp(62px, 16vw, 96px); }
  .cover__motto { margin-top: 18px; }
  .established { min-width: 225px; margin-top: 31px; padding: 14px 25px 16px; }
  .established__date { font-size: 25px; }
  .quote-note { min-height: 105px; margin-top: 29px; padding: 18px 17px; }
  .quote-note p { font-size: clamp(16px, 4.5vw, 21px); }
  .quote-note__mark { margin-right: 9px; font-size: 43px; }
  .quote-note__heart { margin-left: 8px; font-size: 26px; }
  .enter-button { min-height: 62px; margin-top: 27px; font-size: 23px; }
  .enter-button svg { width: 22px; }
  .cover__footer { margin-top: 21px; }
  .cover__footer p { font-size: 12px; }
  .scribble--left { bottom: 3%; left: 5%; font-size: 47px; }
  .scribble--right { top: 35%; right: 5%; font-size: 29px; }
  .polaroid { width: 118px; padding: 6px 6px 8px; }
  .polaroid figcaption { padding-top: 5px; font-size: 8px; }
  .polaroid--sunset { top: 12%; left: -37px; }
  .polaroid--together { right: -32px; bottom: 10%; }
}

@media (max-width: 380px) {
  .cover { padding-right: 16px; padding-left: 16px; }
  .cover__intro { margin-top: 35px; }
  h1 { font-size: 61px; }
  .quote-note { padding-right: 11px; padding-left: 11px; }
  .desktop-break { display: none; }
  .polaroid { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}