/* The owner's five selected accents, replacing the moving phrase strip. */
.phrase-note {
  --note-ink: #69492f;
  --note-gold: #ddc58f;
  display: block;
  position: relative;
  flex-shrink: 0;
  pointer-events: none;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--note-ink);
}
.phrase-note svg { display: block; width: 100%; height: 100%; overflow: visible; }
.about-heading, .program { position: relative; }
.about-note { width: 166px; height: 166px; margin: 0 25px 10px 0; transform: rotate(-13deg); }
.note-ring { fill: none; }
.note-ring circle { stroke: currentColor; stroke-width: 1.35; }
.note-ring .ring-inner { stroke-width: .65; }
.note-ring text { fill: currentColor; stroke: none; font-family: Manrope, Arial, sans-serif; }
.note-ring .ring-title { font-size: 15px; font-weight: 650; letter-spacing: 2px; }
.note-ring .ring-brand { font-size: 10px; font-weight: 550; letter-spacing: 3px; }
.note-ring .ring-center { font-family: Georgia, serif; font-size: 61px; }
.ink-stamp { color: #805336; filter: url('#ink-grain'); }

/* A small accent in the empty upper corner of the invitation section. */
.networking-note { position: absolute; top: 90px; right: var(--gutter); width: 256px; height: 120px; color: var(--note-gold); }
.type-thread { position: relative; display: block; width: 100%; height: 100%; transform: rotate(-8deg); }
.type-thread > svg { position: absolute; inset: 0; fill: currentColor; font: 500 26px Manrope, Arial, sans-serif; letter-spacing: -.5px; }
.type-thread .thread-path { fill: none; stroke: currentColor; stroke-width: .8; opacity: .8; }
.type-thread .thread-path circle { fill: currentColor; }

.program-note { position: absolute; right: var(--gutter); top: 106px; width: 210px; height: 140px; }
.type-stairs { display: block; color: #79573b; transform: rotate(-6deg); font: 550 25px/1.16 Manrope, Arial, sans-serif; letter-spacing: -1px; padding-top: 12px; }
.type-stairs > span { display: block; }
.type-stairs > span + span { margin-left: 37px; }
.type-dot { font-size: 27px; margin-left: 8px; color: #a57546; }
.type-stairs svg { height: 35px; width: 195px; stroke: #9b794f; stroke-width: 1; fill: none; margin-top: 7px; }

/* The record leaves with the first-frame caption when the gallery is swiped. */
.gallery-note { position: absolute; right: var(--gutter); top: 52px; width: 150px; height: 150px; }
.vinyl { display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background: repeating-radial-gradient(circle, #28231f 0px, #28231f 1px, #453b30 2px, #231f1b 3px); box-shadow: 2px 7px 13px #0007; transform: rotate(15deg); }
.vinyl::before { content: ''; position: absolute; inset: 20.67%; border-radius: 50%; background: #c7a779; border: 1px solid #877149; }
.vinyl .note-ring { position: absolute; inset: 17.33%; width: 65.34%; height: 65.34%; color: #30291f; }
.vinyl .ring-outer, .vinyl .ring-inner { stroke: none; }
.vinyl .ring-title { font-size: 19px; letter-spacing: 1.5px; }
.vinyl .ring-brand { font-size: 13px; letter-spacing: 1.4px; }
.vinyl .ring-center { display: none; }
.spindle { position: absolute; left: 47.33%; top: 47.33%; width: 5.34%; height: 5.34%; border-radius: 50%; background: #2d251c; box-shadow: 0 0 0 1px #725533; }

.venue-note { position: absolute; left: 8%; top: 35%; width: 255px; height: 170px; }
.light-projection { position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-7deg) skewY(-11deg); background: radial-gradient(ellipse, #ffd27619, transparent 67%); color: #ffe3a9; mix-blend-mode: screen; }
.light-projection > span { font: 500 42px/.92 Comfortaa, Manrope, sans-serif; letter-spacing: -2.6px; text-shadow: 0 0 1px #fff5d5, 0 0 5px #ffde9166, 0 0 16px #ecb14955; filter: blur(.25px); }

@media (max-width: 760px) {
  .about-note { position: absolute; right: 0; bottom: -105px; margin: 0; width: 112px; height: 112px; }
  .networking-note { top: 24px; width: 191px; height: 80px; }
  .program-note { top: 46px; width: 127px; height: 98px; }
  .type-stairs { font-size: 18px; padding-top: 8px; }
  .type-stairs > span + span { margin-left: 16px; }
  .type-dot { font-size: 16px; margin-left: 2px; }
  .type-stairs svg { width: 124px; margin-top: 0; }
  .gallery-note { right: 22px; top: 32px; width: 116px; height: 116px; }
  .venue-note { left: 12%; top: 35%; width: 205px; height: 135px; }
  .light-projection > span { font-size: 35px; }
}

@media (max-width: 350px) {
  .program > .label { gap: 12px; }
  .program > .label > span:last-child { max-width: 100px; }
}

/* All five accents are still; the existing hero remains the animated focus. */
@media (forced-colors: active) {
  .phrase-note, .phrase-note * { color: CanvasText; filter: none; text-shadow: none; box-shadow: none; }
  .ink-stamp { opacity: 1; }
  .vinyl, .vinyl::before, .light-projection { background: Canvas; }
}