:root {
  --ink: #2d3948;
  --paper: #fcf7f3;
  --line: #7c87936b;
  --rose: #a16d82;
}
html { scroll-padding-top: 0; }
.bar {
  position: absolute;
  inset: 0 0 auto;
  height: 66px;
  padding: 0 clamp(22px, 5vw, 78px);
  background: transparent;
  border: 0;
}
.bar .wordmark, .bar nav {
  font-size: 10px;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.bar nav { margin-left: auto; }
.bar nav a { border-bottom: 1px solid var(--line); padding: 4px 0; }
.music {
  position: fixed;
  right: 21px;
  bottom: 20px;
  background: #fcf7f3e8;
  box-shadow: 0 3px 14px #2d394817;
}
.progress { top: 0; }
.cover {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-content: stretch;
  padding: 70px 16px 34px;
  background: radial-gradient(ellipse at 51% 62%, #fff9f6 0%, #f6e8eb 56%, var(--blue) 100%);
}
.cover::after {
  content: '';
  position: absolute;
  inset: 15px;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 5;
}
.cover-stage {
  display: grid;
  place-items: center;
  position: static;
  padding: 0;
  width: 100%;
  isolation: auto;
}
.cover-paper {
  display: block;
  z-index: 4;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
}
.cover h1 {
  font-size: clamp(64px, 12.6vw, 187px);
  font-weight: 500;
  letter-spacing: -.068em;
  margin: 25px 0 23px;
}
.cover h1 i { font-size: .62em; margin: 0 .09em 0 .03em; }
.cover .date { font: 500 clamp(22px, 3vw, 32px)/1.2 var(--serif); letter-spacing: 0; margin: 0 0 27px; }
.cover .pill { background: #fcf7f3a3; }
.cover .pill:hover { background: var(--ink); }
.flower { display: block; height: auto; object-fit: contain; background: none; }
.cover-left { width: clamp(300px, 57vw, 850px); left: -11%; bottom: auto; top: -9%; --turn: 34deg; --drift: -115px; }
.cover-right { width: clamp(300px, 55vw, 820px); right: -14%; top: auto; bottom: -6%; --turn: -56deg; --flip: -1; --drift: 110px; }
.foreground { width: min(28vw, 415px); top: 13%; right: 3%; bottom: auto; --turn: 146deg; --drift: -130px; opacity: .42; }
.swatches { margin: 0; position: relative; justify-self: center; }
.swatches button { background: #fcf7f3ca; border-color: var(--line); }
.swatches [aria-pressed=true] { background: var(--ink); }
.invitation {
  background: var(--paper);
  padding: 42px clamp(20px, 11vw, 170px);
}
.arch {
  width: min(1120px, 100%);
  min-height: min(575px, 82svh);
  border: 1px solid var(--line);
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
  padding: clamp(75px, 12vh, 150px) 18px;
  text-align: center;
  display: grid;
  place-content: center;
  position: relative;
  z-index: 3;
}
.arch h2 { font-weight: 500; font-size: clamp(45px, 7.3vw, 106px); margin: 23px 0; }
.arch p:last-child { max-width: 480px; margin: auto; }
.invite-flower { left: auto; right: -14%; top: auto; bottom: -3%; width: min(47vw, 700px); --turn: -67deg; --drift: -120px; }
.details {
  display: grid;
  place-items: center;
  padding: clamp(55px, 9vw, 110px) 20px;
  background: linear-gradient(125deg, var(--blue), var(--blush));
}
.details .letter { box-shadow: none; outline-color: var(--line); }
.album .photos { grid-template-columns: 1fr 1fr; align-items: center; }
.photo.field img { object-position: 61% 50%; }
.photo.feature img { object-position: 38% 50%; }
.photo.field, .photo.exhibit { --tilt: 2deg; }
.photo.sport { margin-top: 0; }
#player {
  position: fixed;
  z-index: 20;
  right: 18px;
  bottom: 68px;
  width: min(300px, calc(100vw - 36px));
  padding: 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px #2d394829;
  font-size: 12px;
}
#player .close {
  position: absolute;
  right: 8px;
  top: 7px;
  border: 0;
  background: transparent;
  font-size: 20px;
}
#song { font-weight: 600; margin: 0 28px 8px 0; }
#player audio, #player input { width: 100%; }
#player audio { height: 34px; }
#player iframe { min-height: 200px; }
@media (max-width: 690px) {
  .bar { height: 56px; }
  .bar .wordmark, .bar nav { font-size: 8px; letter-spacing: .11em; }
  .cover { min-height: max(670px, 100svh); padding-bottom: 29px; }
  .cover::after { inset: 11px; }
  .cover h1 { font-size: clamp(54px, 14.5vw, 96px); }
  .cover-left { left: -22%; top: 6%; width: 72vw; }
  .cover-right { right: -23%; bottom: 7%; width: 73vw; }
  .arch { min-height: 475px; padding-inline: 18px; }
  .arch p:last-child { font-size: 13px; max-width: 290px; }
  .invite-flower { width: 60vw; right: -23%; bottom: -4%; opacity: .76; }
}