/* ================================================================
   memory-vault.css  ·  ParkieVault V2 — Memory Vault
   ================================================================ */

/* ----------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------- */
:root {
  --mv-gold:          #c9a84c;
  --mv-gold-muted:    #a07830;
  --mv-gold-glow:     rgba(201,168,76,.18);
  --mv-gold-text:     #e8c97a;
  --mv-accent:        #f0d080;
  --mv-border:        rgba(255,255,255,.07);
  --mv-border-gold:   rgba(201,168,76,.22);
  --mv-text-primary:  #f0ece4;
  --mv-text-muted:    rgba(240,236,228,.85);
  --mv-text-dim:      rgba(240,236,228,.45);
  --mv-radius-btn:    50px;
  --mv-section-gap:   88px;

  /* Paper palettes */
  --paper-warm:    #f5f0e6;
  --paper-cream:   #faf6e8;
  --paper-aged:    #ede5cc;
  --paper-ink:     #1c1408;
  --paper-mid:     #6a5830;
  --paper-faint:   #8a7244;
  --paper-rule:    rgba(160,130,60,.35);

  /* Film */
  --film-dark:     #111010;
  --film-border:   #2a2820;
}

/* ----------------------------------------------------------------
   BODY & BACKGROUND
   ---------------------------------------------------------------- */
.page-memory-vault {
  background-color: #08080b;
  color: var(--mv-text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.mv-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mv-bg-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  opacity: .55;
}

.mv-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
}

.glow-top-left {
  width: 700px; height: 700px;
  top: -260px; left: -260px;
  background: radial-gradient(circle, rgba(201,168,76,.11) 0%, transparent 70%);
}

.glow-center {
  width: 900px; height: 500px;
  top: 42%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(80,40,160,.055) 0%, transparent 70%);
}

.glow-bottom-right {
  width: 600px; height: 600px;
  bottom: -200px; right: -200px;
  background: radial-gradient(circle, rgba(70,30,140,.09) 0%, transparent 70%);
}

/* Edge-to-edge vignette for depth */
.mv-bg-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 80% at 50% 40%,
    transparent 55%,
    rgba(4,4,6,.7) 100%
  );
  pointer-events: none;
}

.pub-nav, .mobile-dropdown, .float-menu-btn,
.mv-hero, .mv-section, .mv-footer {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------
   CONTAINERS
   ---------------------------------------------------------------- */
.mv-container        { max-width: 860px;  margin: 0 auto; padding: 0 28px; }
.mv-container--wide  { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* ----------------------------------------------------------------
   BACK BUTTON
   ---------------------------------------------------------------- */
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--mv-border);
  color: var(--mv-text-muted);
  font-size: .8rem; font-weight: 500; letter-spacing: .03em;
  padding: 8px 16px; border-radius: 50px;
  text-decoration: none; margin-bottom: 32px;
  transition: background .2s, border-color .2s, color .2s;
}
.btn-back:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--mv-border-gold);
  color: var(--mv-gold-text);
}

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */
.mv-hero {
  padding: 36px 0 72px;
  text-align: center;
}

.mv-hero-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}

.mv-hero-emblem {
  position: relative; width: 82px; height: 82px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}

.mv-emblem-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--mv-gold);
  animation: ring-pulse 3.5s ease-in-out infinite;
}
.mv-ring-1 { width: 82px; height: 82px; opacity: .2; }
.mv-ring-2 { width: 60px; height: 60px; opacity: .4; animation-delay: .6s; }
.mv-ring-3 { width: 42px; height: 42px; opacity: .65; animation-delay: 1.2s; }

@keyframes ring-pulse {
  0%,100% { transform: scale(1);    opacity: .2; }
  50%      { transform: scale(1.07); opacity: .55; }
}

.mv-emblem-icon {
  font-size: 1.75rem; z-index: 1;
  filter: drop-shadow(0 0 14px rgba(201,168,76,.35));
}

.mv-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--mv-gold); margin: 0;
}

.mv-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  font-weight: 700; font-style: italic;
  letter-spacing: -.01em;
  color: var(--mv-text-primary); margin: 0; line-height: 1.08;
  text-shadow: 0 0 80px rgba(201,168,76,.12);
}

.mv-hero-subtitle {
  font-size: .98rem; color: var(--mv-text-muted);
  max-width: 480px; line-height: 1.72; margin: 0;
}

.mv-hero-badges {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin-top: 6px;
}

.mv-badge {
  font-family: 'DM Mono', monospace;
  font-size: .65rem; font-weight: 600;
  letter-spacing: .09em; padding: 4px 13px;
  border-radius: 50px; text-transform: uppercase;
}
.badge-archive {
  background: rgba(201,168,76,.1); border: 1px solid var(--mv-border-gold);
  color: var(--mv-gold-text);
}
.badge-global {
  background: rgba(255,255,255,.05); border: 1px solid var(--mv-border);
  color: var(--mv-text-muted);
}

/* ----------------------------------------------------------------
   STATS RIBBON
   ---------------------------------------------------------------- */
.mv-stats-section { padding: 0 0 68px; }

.mv-stats-ribbon {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  background: rgba(201,168,76,.032);
  border: 1px solid var(--mv-border-gold);
  border-radius: 18px;
  padding: 28px 36px;
  gap: 0;
}

.mv-stat-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 0 36px;
}

.mv-stat-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem; color: var(--mv-gold-text);
  line-height: 1; letter-spacing: .03em;
}
.mv-stat-song {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem; font-style: italic;
  color: var(--mv-gold-text); line-height: 1;
}
.mv-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--mv-text-dim);
}
.mv-stat-divider {
  color: var(--mv-gold-muted); font-size: .65rem;
  opacity: .35; user-select: none;
}

/* ----------------------------------------------------------------
   WALL HEADER
   ---------------------------------------------------------------- */
.mv-wall-section { padding-top: 16px; }

.mv-wall-header {
  display: flex; align-items: flex-end;
  justify-content: space-between;
  gap: 20px; margin-bottom: 52px; flex-wrap: wrap;
}

.mv-wall-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; font-style: italic;
  color: var(--mv-text-primary); margin: 0 0 6px;
}
.mv-wall-sub {
  font-family: 'DM Mono', monospace;
  font-size: .75rem; color: var(--mv-text-dim); margin: 0;
  letter-spacing: .04em;
}

.mv-wall-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.mv-filter-btn {
  font-family: 'DM Mono', monospace;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .07em;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--mv-border);
  color: var(--mv-text-muted);
  padding: 7px 16px; border-radius: 50px;
  cursor: pointer; transition: all .2s;
}
.mv-filter-btn:hover,
.mv-filter-btn.active {
  background: rgba(201,168,76,.08);
  border-color: var(--mv-border-gold);
  color: var(--mv-gold-text);
}

/* ----------------------------------------------------------------
   MASONRY WALL
   ---------------------------------------------------------------- */
.mv-wall {
  columns: 4; column-gap: 22px;
}
@media (max-width: 1100px) { .mv-wall { columns: 3; } }
@media (max-width: 720px)  { .mv-wall { columns: 2; } }
@media (max-width: 460px)  { .mv-wall { columns: 1; } }

/* ----------------------------------------------------------------
   BASE CARD
   ---------------------------------------------------------------- */
.mv-card {
  break-inside: avoid;
  margin-bottom: 22px;
  cursor: pointer;
  display: block;
  position: relative;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s ease,
    filter .35s ease;
  will-change: transform;
}

.mv-card:focus-visible {
  outline: 2px solid var(--mv-gold);
  outline-offset: 5px;
  border-radius: 4px;
}

/* Rotation helpers — hover snaps to flat and lifts */
.mv-rotate-neg-2 { transform: rotate(-2deg); }
.mv-rotate-neg-1 { transform: rotate(-1deg); }
.mv-rotate-pos-1 { transform: rotate(1deg); }
.mv-rotate-pos-2 { transform: rotate(2deg); }

.mv-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.02) !important;
  z-index: 20;
  filter: brightness(1.04);
}

/* ----------------------------------------------------------------
   WASHI TAPE
   ---------------------------------------------------------------- */
.mv-tape {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  border-radius: 2px;
}
.mv-tape::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0, transparent 3px,
    rgba(255,255,255,.08) 3px, rgba(255,255,255,.08) 4px
  );
}

.mv-tape--top {
  width: 56px; height: 18px;
  top: -10px; left: 50%; transform: translateX(-50%) rotate(-1deg);
  background: rgba(201,168,76,.22);
  border: 1px solid rgba(201,168,76,.18);
}
.mv-tape--amber {
  background: rgba(180,120,40,.28);
  border-color: rgba(180,120,40,.2);
}
.mv-tape--tilted { transform: translateX(-50%) rotate(3deg); }

.mv-tape--corner-tl {
  width: 44px; height: 16px;
  top: -9px; left: 12px; transform: rotate(-8deg);
  background: rgba(201,168,76,.2); border: 1px solid rgba(201,168,76,.15);
}
.mv-tape--corner-br {
  width: 36px; height: 16px;
  bottom: 8px; right: 10px; transform: rotate(-5deg);
  background: rgba(180,100,60,.2); border: 1px solid rgba(180,100,60,.15);
}

/* ================================================================
   1. POLAROID
   ================================================================ */
.mv-card--polaroid {
  background: var(--paper-warm);
  border-radius: 3px;
  padding: 11px 11px 22px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.25),
    0 8px 28px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.mv-card--polaroid:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.2),
    0 20px 50px rgba(0,0,0,.65),
    0 0 0 1px rgba(201,168,76,.12),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.mv-polaroid-photo {
  background: #131015;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
}
.mv-polaroid-photo--tall { aspect-ratio: 3 / 4; }

.mv-polaroid-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg,
    rgba(201,168,76,.07) 0%,
    rgba(60,30,100,.1) 100%);
}
.mv-polaroid-inner--rose {
  background: linear-gradient(140deg,
    rgba(180,80,100,.1) 0%, rgba(201,168,76,.06) 100%);
}
.mv-polaroid-inner--indigo {
  background: linear-gradient(140deg,
    rgba(60,80,200,.1) 0%, rgba(201,168,76,.05) 100%);
}
.mv-polaroid-inner--teal {
  background: linear-gradient(140deg,
    rgba(40,140,140,.1) 0%, rgba(201,168,76,.05) 100%);
}

.mv-card-flag {
  position: absolute; top: 8px; left: 8px;
  font-size: 1.1rem; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.mv-photo-glyph {
  font-size: 2rem; opacity: .38;
  text-shadow: 0 0 20px rgba(201,168,76,.4);
}

.mv-polaroid-caption { padding: 10px 4px 0; }

.mv-pol-user {
  font-family: 'Caveat', cursive;
  font-size: 1rem; font-weight: 600;
  color: #2a1e08; margin: 0 0 2px;
}
.mv-pol-song {
  font-family: 'Caveat', cursive;
  font-size: .82rem; color: #7a6020;
  margin: 0 0 5px;
}
.mv-pol-preview {
  font-family: 'Caveat', cursive;
  font-size: .82rem; color: #3a2c10;
  line-height: 1.5; margin: 0;
}

/* ================================================================
   2. JOURNAL PAGE
   ================================================================ */
.mv-card--journal {
  background: var(--paper-cream);
  border-radius: 2px 8px 8px 2px;
  overflow: hidden;
  display: flex;
  box-shadow:
    0 3px 8px rgba(0,0,0,.3),
    0 12px 36px rgba(0,0,0,.5);
}

.mv-card--journal:hover {
  box-shadow:
    0 3px 8px rgba(0,0,0,.25),
    0 24px 56px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,168,76,.1);
}

/* Left spine */
.mv-journal-binding {
  width: 24px; min-width: 24px;
  background: linear-gradient(180deg, #b8860b 0%, #8b6914 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly;
  padding: 12px 0;
  flex-shrink: 0;
}
.mv-journal-binding span {
  display: block; width: 10px; height: 10px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}

.mv-journal-body {
  flex: 1;
  padding: 18px 18px 16px;
  background: var(--paper-cream);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 25px,
      var(--paper-rule) 25px,
      var(--paper-rule) 26px
    );
  position: relative;
}

.mv-journal-date {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .1em;
  color: var(--paper-faint); margin: 0 0 4px;
  text-align: right;
}
.mv-journal-from {
  font-family: 'Caveat', cursive;
  font-size: .88rem; font-weight: 600;
  color: #3a2a08; margin: 0 0 8px;
}
.mv-journal-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--mv-gold-muted), transparent);
  margin: 0 0 10px; opacity: .4;
}
.mv-journal-text {
  font-family: 'Caveat', cursive;
  font-size: .9rem; line-height: 1.65;
  color: var(--paper-ink); margin: 0 0 10px;
}
.mv-journal-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.mv-journal-song {
  font-family: 'Caveat', cursive;
  font-size: .8rem; color: var(--paper-mid);
  font-style: italic;
}
.mv-journal-loves {
  font-family: 'DM Mono', monospace;
  font-size: .62rem; color: var(--paper-faint);
  letter-spacing: .05em;
}

/* ================================================================
   3. PINNED NOTE
   ================================================================ */
.mv-card--pinned {
  background: var(--paper-aged);
  border-radius: 2px;
  padding: 32px 18px 20px;
  position: relative;
  box-shadow:
    0 2px 6px rgba(0,0,0,.3),
    0 10px 30px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.mv-card--pinned-lg { padding: 36px 20px 24px; }

.mv-card--pinned:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,.25),
    0 22px 52px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Corkboard shadow beneath */
.mv-card--pinned::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 80% 40% at 50% 100%,
    rgba(0,0,0,.12) 0%, transparent 100%
  );
  pointer-events: none;
}

/* Push pin */
.mv-pin {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 5;
}
.mv-pin-head {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e44 0%, #a00 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.2);
}
.mv-pin-head--gold {
  background: radial-gradient(circle at 35% 35%, var(--mv-gold-text) 0%, var(--mv-gold-muted) 100%);
}
.mv-pin-shaft {
  width: 2px; height: 14px;
  background: linear-gradient(180deg, #888 0%, #444 100%);
  margin-top: -2px;
}

.mv-pinned-user {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem; font-weight: 700;
  color: var(--paper-ink); margin: 0 0 2px;
}
.mv-pinned-country {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; color: var(--paper-faint);
  letter-spacing: .08em; margin: 0 0 10px;
}
.mv-pinned-text {
  font-family: 'Caveat', cursive;
  font-size: .9rem; line-height: 1.6;
  color: var(--paper-ink); margin: 0 0 10px;
}
.mv-pinned-song {
  font-family: 'Caveat', cursive;
  font-size: .78rem; font-style: italic;
  color: var(--paper-mid); margin: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(160,130,60,.3);
}

/* ================================================================
   4. ENVELOPE LETTER
   ================================================================ */
.mv-card--envelope {
  background: var(--paper-warm);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 4px 12px rgba(0,0,0,.35),
    0 14px 40px rgba(0,0,0,.5);
}

.mv-card--envelope:hover {
  box-shadow:
    0 4px 12px rgba(0,0,0,.28),
    0 26px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,168,76,.12);
}

/* V-flap at top */
.mv-envelope-flap {
  position: relative;
  height: 52px;
  background: linear-gradient(160deg, #e0d4b4 0%, #c8b870 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  display: flex; align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
}
.mv-envelope-seal {
  width: 24px; height: 24px;
  background: radial-gradient(circle at 40% 35%, #e8c97a 0%, #a07830 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: #1a1208;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  position: relative; z-index: 2;
  margin-top: 4px;
}

.mv-envelope-body { padding: 14px 18px 18px; }

.mv-envelope-to, .mv-envelope-from {
  display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 4px;
}
.mv-env-label {
  font-family: 'DM Mono', monospace;
  font-size: .58rem; letter-spacing: .1em;
  color: var(--paper-faint); text-transform: uppercase;
  flex-shrink: 0;
}
.mv-env-name {
  font-family: 'Playfair Display', serif;
  font-size: .92rem; font-style: italic;
  color: var(--paper-ink);
}
.mv-envelope-from span:last-child {
  font-family: 'Caveat', cursive;
  font-size: .82rem; color: var(--paper-mid);
}

.mv-envelope-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(160,130,60,.5), transparent);
  margin: 10px 0;
}
.mv-envelope-text {
  font-family: 'Caveat', cursive;
  font-size: .9rem; line-height: 1.6;
  color: var(--paper-ink); margin: 0 0 10px;
}
.mv-envelope-song {
  font-family: 'Caveat', cursive;
  font-size: .78rem; font-style: italic;
  color: var(--paper-mid); margin: 0;
}

/* ================================================================
   5. FILM STRIP
   ================================================================ */
.mv-card--film {
  background: var(--film-dark);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--film-border);
  box-shadow:
    0 4px 12px rgba(0,0,0,.5),
    0 12px 36px rgba(0,0,0,.6);
}

.mv-card--film:hover {
  box-shadow:
    0 4px 12px rgba(0,0,0,.45),
    0 24px 56px rgba(0,0,0,.7),
    0 0 0 1px rgba(201,168,76,.15);
}

.mv-film-holes {
  display: flex; gap: 0; align-items: center;
  background: #1a1818; padding: 5px 8px;
  justify-content: space-around;
}
.mv-film-holes--bottom { }
.mv-film-holes span {
  display: block; width: 12px; height: 9px;
  background: #08080b;
  border-radius: 2px;
  border: 1px solid #2e2c28;
}

.mv-film-frame {
  aspect-ratio: 4/3;
  background: linear-gradient(140deg, #1a0f24 0%, #0d141e 100%);
  position: relative;
  overflow: hidden;
}
.mv-film-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    rgba(201,168,76,.06) 0%,
    rgba(60,30,100,.1) 100%);
}
.mv-film-flag {
  position: absolute; top: 10px; left: 10px;
  font-size: 1rem;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}
.mv-film-glyph {
  font-size: 2.4rem; opacity: .25;
}

.mv-film-caption {
  padding: 12px 14px 14px;
  background: #0e0d0c;
}
.mv-film-user {
  font-family: 'DM Mono', monospace;
  font-size: .65rem; letter-spacing: .1em;
  color: rgba(201,168,76,.7); margin: 0 0 2px;
}
.mv-film-song {
  font-family: 'Playfair Display', serif;
  font-size: .82rem; font-style: italic;
  color: var(--mv-text-muted); margin: 0 0 7px;
}
.mv-film-text {
  font-size: .75rem; line-height: 1.55;
  color: var(--mv-text-dim); margin: 0;
}

/* ================================================================
   6. INK STAMP
   ================================================================ */
.mv-card--stamp {
  background: var(--paper-cream);
  border-radius: 3px;
  padding: 18px 18px 18px;
  position: relative;
  box-shadow:
    0 2px 6px rgba(0,0,0,.3),
    0 10px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.mv-card--stamp:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,.25),
    0 22px 54px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.mv-stamp-mark {
  position: absolute; top: 14px; right: 14px;
  opacity: .18;
}
.mv-stamp-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid #1a1208;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transform: rotate(-12deg);
}
.mv-stamp-inner-text {
  font-family: 'DM Mono', monospace;
  font-size: .45rem; font-weight: 700;
  letter-spacing: .1em; line-height: 1.6;
  color: #1a1208;
}

.mv-stamp-user {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem; font-weight: 700;
  color: var(--paper-ink); margin: 0 0 2px;
}
.mv-stamp-country {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; color: var(--paper-faint);
  letter-spacing: .08em; margin: 0 0 12px;
}
.mv-stamp-text {
  font-family: 'Caveat', cursive;
  font-size: .9rem; line-height: 1.6;
  color: var(--paper-ink); margin: 0 0 10px;
}
.mv-stamp-song {
  font-family: 'Caveat', cursive;
  font-size: .78rem; font-style: italic;
  color: var(--paper-mid); margin: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(160,130,60,.3);
}

/* ================================================================
   7. WAX SEALED LETTER
   ================================================================ */
.mv-card--wax {
  background: linear-gradient(160deg, #f8f2e0 0%, #f0e8cc 100%);
  border-radius: 3px;
  overflow: hidden;
  box-shadow:
    0 3px 8px rgba(0,0,0,.3),
    0 12px 36px rgba(0,0,0,.48);
  position: relative;
}

.mv-card--wax:hover {
  box-shadow:
    0 3px 8px rgba(0,0,0,.25),
    0 24px 56px rgba(0,0,0,.58),
    0 0 0 1px rgba(201,168,76,.12);
}

.mv-wax-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(160,130,60,.2);
}
.mv-wax-seal {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    #c93030 0%, #7a1010 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,120,120,.2);
}
.mv-wax-glyph {
  font-size: .9rem; color: rgba(255,255,255,.7);
}
.mv-wax-lines {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.mv-wax-lines span {
  display: block; height: 1px;
  background: linear-gradient(90deg, rgba(160,130,60,.4), transparent);
}
.mv-wax-lines span:last-child { width: 60%; }

.mv-wax-body { padding: 12px 16px 18px; }

.mv-wax-user {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic;
  color: var(--paper-ink); margin: 0 0 2px;
}
.mv-wax-country {
  font-family: 'DM Mono', monospace;
  font-size: .58rem; color: var(--paper-faint);
  letter-spacing: .08em; margin: 0 0 10px;
}
.mv-wax-text {
  font-family: 'Caveat', cursive;
  font-size: .9rem; line-height: 1.6;
  color: var(--paper-ink); margin: 0 0 10px;
}
.mv-wax-song {
  font-family: 'Caveat', cursive;
  font-size: .78rem; font-style: italic;
  color: var(--paper-mid); margin: 0;
}

/* ----------------------------------------------------------------
   LOAD MORE
   ---------------------------------------------------------------- */
.mv-load-more-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  padding-top: 48px;
}

.mv-load-more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(201,168,76,.06);
  border: 1px solid var(--mv-border-gold);
  color: var(--mv-gold-text);
  font-family: 'DM Mono', monospace;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em;
  padding: 13px 30px; border-radius: 50px;
  cursor: pointer;
  transition: background .25s, box-shadow .25s, transform .2s;
}
.mv-load-more-btn:hover {
  background: rgba(201,168,76,.13);
  box-shadow: 0 0 28px rgba(201,168,76,.1);
  transform: translateY(-2px);
}

.mv-load-icon {
  display: inline-block;
  animation: load-spin 4s linear infinite;
}
@keyframes load-spin {
  to { transform: rotate(360deg); }
}

.mv-load-note {
  font-family: 'DM Mono', monospace;
  font-size: .62rem; color: var(--mv-text-dim);
  margin: 0; letter-spacing: .1em;
}

/* ----------------------------------------------------------------
   CTA SECTION
   ---------------------------------------------------------------- */
.mv-cta-section { padding-top: 16px; }

.mv-cta-card {
  background: linear-gradient(135deg,
    rgba(201,168,76,.055) 0%,
    rgba(80,40,160,.055) 100%);
  border: 1px solid var(--mv-border-gold);
  border-radius: 22px;
  padding: 60px 40px;
  text-align: center;
  position: relative; overflow: hidden;
}
.mv-cta-card::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid rgba(201,168,76,.07);
  border-radius: 14px; pointer-events: none;
}

.mv-cta-tape {
  position: absolute;
  width: 66px; height: 20px;
  border-radius: 2px;
}
.mv-cta-tape::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent 0, transparent 3px,
    rgba(255,255,255,.07) 3px, rgba(255,255,255,.07) 4px
  );
}
.mv-cta-tape-l {
  top: 22px; left: 32px; transform: rotate(-18deg);
  background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.12);
}
.mv-cta-tape-r {
  top: 22px; right: 32px; transform: rotate(18deg);
  background: rgba(201,168,76,.15); border: 1px solid rgba(201,168,76,.12);
}

.mv-cta-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: .65rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--mv-gold-muted);
  margin: 0 0 12px;
}
.mv-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem,4vw,2.4rem);
  font-style: italic;
  color: var(--mv-text-primary); margin: 0 0 12px;
}
.mv-cta-sub {
  font-size: .9rem; color: var(--mv-text-muted);
  line-height: 1.72; margin: 0 auto 30px;
  max-width: 460px;
}
.mv-cta-actions {
  display: flex; gap: 12px;
  justify-content: center; flex-wrap: wrap;
}

.mv-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e8d8a0 0%, #c9a84c 100%);
  color: #1a1208;
  font-size: .88rem; font-weight: 700; letter-spacing: .04em;
  padding: 14px 32px; border-radius: var(--mv-radius-btn);
  text-decoration: none;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(201,168,76,.25);
}
.mv-btn-primary:hover {
  opacity: .9; transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(201,168,76,.4);
}

.mv-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--mv-border);
  color: var(--mv-text-primary);
  font-size: .88rem; font-weight: 600; letter-spacing: .04em;
  padding: 14px 32px; border-radius: var(--mv-radius-btn);
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.mv-btn-ghost:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--mv-border-gold);
  color: var(--mv-gold-text);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.mv-footer {
  padding: 38px 0 42px;
  border-top: 1px solid var(--mv-border);
  margin-top: 16px;
  position: relative; z-index: 1;
}
.mv-footer .mv-container {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.mv-footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: .74rem; color: var(--mv-text-dim); margin: 0;
}
.mv-footer-link {
  font-family: 'DM Mono', monospace;
  font-size: .74rem; color: var(--mv-text-dim);
  text-decoration: none; transition: color .2s;
}
.mv-footer-link:hover { color: var(--mv-gold-text); }

/* ================================================================
   MODAL
   ================================================================ */
/* ================================================================
   MODAL — Keepsake / Preserved Memory
   ================================================================ */

.mv-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(4,3,8,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: modal-fade .28s ease;
}
.mv-modal-overlay[hidden] { display: none; }

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- The envelope / wrapper that holds the keepsake ---- */
.mv-modal {
  position: relative;
  max-width: 580px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  animation: modal-unfold .42s cubic-bezier(.22,1,.36,1);
  /* Hide scrollbar but keep function */
  scrollbar-width: none;
}
.mv-modal::-webkit-scrollbar { display: none; }

@keyframes modal-unfold {
  from { transform: translateY(28px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}

/* ---- Close button floats above the keepsake ---- */
.mv-modal-close {
  position: fixed;
  top: 18px; right: 18px;
  background: rgba(12,11,16,.82);
  border: 1px solid rgba(201,168,76,.22);
  color: rgba(240,236,228,.55);
  width: 34px; height: 34px; border-radius: 50%;
  font-size: .72rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s; z-index: 1100;
  backdrop-filter: blur(8px);
}
.mv-modal-close:hover {
  background: rgba(201,168,76,.12);
  border-color: var(--mv-border-gold);
  color: var(--mv-gold-text);
  transform: scale(1.08);
}

/* ================================================================
   JOURNAL-STYLE MODAL  (default — used by journal + stamp cards)
   ================================================================ */
.mv-modal-journal {
  background: var(--paper-cream);
  border-radius: 2px 8px 8px 2px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    0 24px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.6);
  display: flex;
  overflow: hidden;
}

/* Spine */
.mv-modal-spine {
  width: 26px; min-width: 26px;
  background: linear-gradient(180deg, #b8860b 0%, #8b6914 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-evenly;
  padding: 12px 0;
}
.mv-modal-spine span {
  display: block;
  width: 10px; height: 10px;
  background: radial-gradient(circle at 40% 38%, #fff3 60%, #0002);
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.3);
}

/* Journal body */
.mv-modal-journal-body {
  flex: 1; padding: 32px 30px 28px;
}

/* Date header */
.mv-modal-journal-date {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .14em;
  color: var(--paper-faint); text-transform: uppercase;
  margin: 0 0 4px;
}

/* Author */
.mv-modal-journal-from {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem; font-weight: 600;
  color: var(--paper-ink); margin: 0 0 14px;
}

/* Ruled line */
.mv-modal-journal-rule {
  border: none; border-top: 1px solid var(--paper-rule);
  margin: 0 0 20px;
}

/* Song tag on journal */
.mv-modal-journal-song {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: .9rem; color: var(--paper-mid);
  background: rgba(160,120,40,.08);
  border: 1px solid rgba(160,120,40,.22);
  padding: 3px 12px; border-radius: 3px;
  margin-bottom: 18px;
}

/* Main quote/love line */
.mv-modal-love-line {
  font-family: 'Playfair Display', serif;
  font-size: .95rem; font-style: italic;
  color: #5a3e10;
  border-left: 2px solid rgba(160,120,40,.4);
  padding-left: 14px;
  margin: 0 0 22px;
  line-height: 1.7;
}

/* Story paragraphs — journal context */
.mv-modal-para {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; color: #3a2c10;
  line-height: 1.88; margin: 0 0 14px;
}
.mv-modal-para:last-of-type { margin-bottom: 0; }

/* Ruled lines decoration behind journal text */
.mv-modal-journal-lined {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 27px,
    rgba(160,130,60,.18) 27px,
    rgba(160,130,60,.18) 28px
  );
  background-position: 0 30px;
  padding-top: 2px;
}

/* Footer — journal */
.mv-modal-journal-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(160,130,60,.25);
}
.mv-modal-archive-stamp {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .15em;
  color: rgba(100,80,30,.5); text-transform: uppercase;
}


/* ================================================================
   POLAROID-STYLE MODAL
   ================================================================ */
.mv-modal-polaroid {
  background: var(--paper-warm);
  border-radius: 3px;
  box-shadow:
    0 3px 8px rgba(0,0,0,.35),
    0 24px 80px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.7);
  padding: 14px 14px 28px;
}

/* Big photo area */
.mv-modal-polaroid-photo {
  background: #131015;
  border-radius: 2px;
  width: 100%; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  margin-bottom: 18px;
}
.mv-modal-polaroid-photo-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: linear-gradient(140deg,
    rgba(201,168,76,.07) 0%, rgba(60,30,100,.1) 100%);
}
.mv-modal-polaroid-photo-inner.tint-rose {
  background: linear-gradient(140deg, rgba(180,80,100,.1) 0%, rgba(201,168,76,.06) 100%);
}
.mv-modal-polaroid-photo-inner.tint-indigo {
  background: linear-gradient(140deg, rgba(60,80,200,.1) 0%, rgba(201,168,76,.05) 100%);
}
.mv-modal-polaroid-photo-inner.tint-teal {
  background: linear-gradient(140deg, rgba(40,140,140,.1) 0%, rgba(201,168,76,.05) 100%);
}
.mv-modal-polaroid-flag {
  font-size: 2.2rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.mv-modal-polaroid-glyph {
  font-size: 1.3rem; opacity: .38;
  color: var(--mv-gold-text);
  text-shadow: 0 0 20px rgba(201,168,76,.4);
}
.mv-modal-polaroid-country-badge {
  position: absolute; bottom: 10px; right: 10px;
  font-family: 'DM Mono', monospace;
  font-size: .58rem; letter-spacing: .1em;
  color: rgba(240,236,228,.5); text-transform: uppercase;
}

/* Polaroid caption area */
.mv-modal-polaroid-caption { padding: 0 6px; }

.mv-modal-pol-user {
  font-family: 'Caveat', cursive;
  font-size: 1.25rem; font-weight: 700;
  color: #2a1e08; margin: 0 0 4px;
}
.mv-modal-pol-song {
  font-family: 'Caveat', cursive;
  font-size: .9rem; color: #7a6020; margin: 0 0 16px;
}

/* Love line on polaroid */
.mv-modal-pol-love {
  font-family: 'Caveat', cursive;
  font-size: 1rem; color: #5a3e10;
  font-style: italic; line-height: 1.6;
  border-left: 2px solid rgba(160,120,40,.35);
  padding-left: 12px; margin: 0 0 18px;
}

.mv-modal-pol-para {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .83rem; color: #3a2c10;
  line-height: 1.85; margin: 0 0 12px;
}

/* Polaroid footer */
.mv-modal-pol-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px dashed rgba(160,130,60,.3);
}
.mv-modal-pol-stamp {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .12em;
  color: rgba(120,95,40,.45); text-transform: uppercase;
}

/* ================================================================
   WAX SEALED LETTER MODAL
   ================================================================ */
.mv-modal-letter {
  background: var(--paper-aged);
  border-radius: 4px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.4),
    0 28px 88px rgba(0,0,0,.88),
    inset 0 1px 0 rgba(255,255,255,.45);
  padding: 0;
  overflow: hidden;
}

/* Letter header with wax seal */
.mv-modal-letter-header {
  background: linear-gradient(160deg, #2a1e08 0%, #1a1206 100%);
  padding: 28px 28px 22px;
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(201,168,76,.15);
}

.mv-modal-letter-to {
  flex: 1;
}
.mv-modal-letter-label {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .2em;
  color: rgba(201,168,76,.5); text-transform: uppercase;
  display: block; margin-bottom: 5px;
}
.mv-modal-letter-user {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-style: italic;
  color: #f0ece4; margin: 0 0 3px;
  line-height: 1.2;
}
.mv-modal-letter-origin {
  font-family: 'DM Mono', monospace;
  font-size: .62rem; color: rgba(240,236,228,.42);
}

/* Big wax seal */
.mv-modal-wax-seal {
  width: 56px; height: 56px; flex-shrink: 0;
  background: radial-gradient(circle at 38% 34%, #c0341a, #8b1f0e);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 3px 12px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.15);
  position: relative;
}
.mv-modal-wax-seal::before {
  content: '';
  position: absolute; inset: 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.mv-modal-wax-glyph {
  font-size: 1.4rem; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* Letter song badge */
.mv-modal-letter-song {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .1em;
  color: var(--mv-gold-text);
  background: rgba(201,168,76,.1);
  border: 1px solid rgba(201,168,76,.2);
  padding: 4px 12px; border-radius: 3px;
  margin-top: 10px; display: inline-block;
}

/* Letter body */
.mv-modal-letter-body {
  padding: 26px 28px 26px;
  background: var(--paper-aged);
  background-image: repeating-linear-gradient(
    transparent,
    transparent 27px,
    rgba(100,80,30,.12) 27px,
    rgba(100,80,30,.12) 28px
  );
  background-position: 0 30px;
}

/* Love line on letter */
.mv-modal-letter-love {
  font-family: 'Playfair Display', serif;
  font-size: .92rem; font-style: italic;
  color: #4a3210;
  border-left: 2px solid rgba(140,100,30,.4);
  padding-left: 14px; margin: 0 0 20px;
  line-height: 1.7;
}

.mv-modal-letter-para {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; color: #352508;
  line-height: 1.88; margin: 0 0 14px;
}

/* Letter footer */
.mv-modal-letter-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 18px 28px 22px;
  border-top: 1px solid rgba(120,90,30,.2);
  background: rgba(180,150,80,.04);
}
.mv-modal-letter-stamp {
  font-family: 'Special Elite', cursive;
  font-size: .7rem; color: rgba(80,55,15,.45);
  letter-spacing: .04em;
}


/* ================================================================
   FILM STRIP MODAL
   ================================================================ */
.mv-modal-film {
  background: var(--film-dark);
  border: 1px solid var(--film-border);
  border-radius: 4px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.5),
    0 28px 88px rgba(0,0,0,.9);
  overflow: hidden;
}

/* Film holes strip (top) */
.mv-modal-film-holes {
  height: 22px; background: #1a1818;
  display: flex; align-items: center;
  gap: 0; padding: 0 8px;
  border-bottom: 1px solid #2a2820;
}
.mv-modal-film-holes span {
  display: block; width: 14px; height: 11px;
  background: #08080b; border-radius: 2px;
  margin: 0 5px; flex-shrink: 0;
}
.mv-modal-film-holes--bottom {
  border-top: 1px solid #2a2820; border-bottom: none;
}

/* Film scene frame */
.mv-modal-film-scene {
  background: #0e0c0f;
  height: 190px;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  background-image: linear-gradient(140deg,
    rgba(201,168,76,.05) 0%, rgba(60,30,100,.07) 100%);
  position: relative;
}
.mv-modal-film-scene-flag {
  font-size: 2.6rem;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.mv-modal-film-scene-glyph {
  font-size: 1.5rem; opacity: .3;
  color: var(--mv-gold-text);
}
.mv-modal-film-scene-user {
  position: absolute; bottom: 10px; left: 14px;
  font-family: 'DM Mono', monospace;
  font-size: .58rem; letter-spacing: .1em;
  color: rgba(240,236,228,.32); text-transform: uppercase;
}

/* Film body */
.mv-modal-film-body {
  padding: 22px 24px 24px;
}
.mv-modal-film-song {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .16em;
  color: var(--mv-gold-muted); text-transform: uppercase;
  margin: 0 0 14px; display: block;
}
.mv-modal-film-love {
  font-family: 'Playfair Display', serif;
  font-size: .92rem; font-style: italic;
  color: var(--mv-gold-text);
  border-left: 2px solid rgba(201,168,76,.25);
  padding-left: 14px; margin: 0 0 20px;
  line-height: 1.7;
}
.mv-modal-film-para {
  font-size: .84rem; color: var(--mv-text-muted);
  line-height: 1.88; margin: 0 0 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.mv-modal-film-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.mv-modal-film-tc {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .12em;
  color: rgba(240,236,228,.2); text-transform: uppercase;
}


/* ================================================================
   PINNED NOTE MODAL
   ================================================================ */
.mv-modal-note {
  position: relative;
  background: #f5f0b8;
  border-radius: 3px;
  box-shadow:
    0 4px 12px rgba(0,0,0,.35),
    0 24px 80px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.55);
  padding: 40px 28px 28px;
}

/* Big pin at top */
.mv-modal-note-pin {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; z-index: 5;
}
.mv-modal-note-pin-head {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #e8c050, #c09020);
  box-shadow: 0 2px 6px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.mv-modal-note-pin-shaft {
  width: 2px; height: 18px;
  background: linear-gradient(180deg, #c09020, #8a6810);
}

/* Note header */
.mv-modal-note-user {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem; font-weight: 700;
  color: #2a2000; margin: 0 0 3px;
}
.mv-modal-note-country {
  font-family: 'Caveat', cursive;
  font-size: .95rem; color: #7a6020; margin: 0 0 16px;
}
.mv-modal-note-song {
  font-family: 'Caveat', cursive;
  font-size: .95rem; color: #5a4010;
  background: rgba(120,90,0,.1);
  border: 1px dashed rgba(120,90,0,.3);
  padding: 3px 12px; border-radius: 3px;
  display: inline-block; margin-bottom: 18px;
}
.mv-modal-note-rule {
  border: none; border-top: 1px solid rgba(120,90,0,.2);
  margin: 0 0 18px;
}
.mv-modal-note-love {
  font-family: 'Caveat', cursive;
  font-size: 1rem; color: #4a3008;
  font-style: italic; line-height: 1.65;
  margin: 0 0 18px;
}
.mv-modal-note-para {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .83rem; color: #2e2005;
  line-height: 1.88; margin: 0 0 12px;
  /* ruled lines */
  background-image: repeating-linear-gradient(
    transparent, transparent 27px,
    rgba(120,90,0,.12) 27px, rgba(120,90,0,.12) 28px
  );
  background-position: 0 30px;
}
.mv-modal-note-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-top: 20px; padding-top: 14px;
  border-top: 1px dashed rgba(120,90,0,.2);
}
.mv-modal-note-tag {
  font-family: 'Caveat', cursive;
  font-size: .8rem; color: rgba(100,75,10,.4);
}

/* ================================================================
   SHARED: Love button + count  (all modal types)
   ================================================================ */
.mv-modal-love-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: 1px solid currentColor;
  font-family: 'DM Mono', monospace;
  font-size: .65rem; letter-spacing: .06em;
  padding: 6px 14px; border-radius: 50px;
  cursor: pointer; transition: all .22s;
}

/* Dark context (film, letter header) */
.mv-modal-film .mv-modal-love-btn,
.mv-modal-letter-footer .mv-modal-love-btn {
  color: var(--mv-gold-text);
  border-color: rgba(201,168,76,.3);
}
.mv-modal-film .mv-modal-love-btn:hover,
.mv-modal-letter-footer .mv-modal-love-btn:hover {
  background: rgba(201,168,76,.12);
  border-color: var(--mv-gold-text);
}

/* Paper context (journal, polaroid, note) */
.mv-modal-journal-footer .mv-modal-love-btn,
.mv-modal-pol-footer .mv-modal-love-btn,
.mv-modal-note-footer .mv-modal-love-btn {
  color: #6a4c10;
  border-color: rgba(120,90,30,.35);
}
.mv-modal-journal-footer .mv-modal-love-btn:hover,
.mv-modal-pol-footer .mv-modal-love-btn:hover,
.mv-modal-note-footer .mv-modal-love-btn:hover {
  background: rgba(120,90,30,.1);
  border-color: rgba(120,90,30,.6);
}

.mv-modal-love-btn.loved {
  background: rgba(201,68,30,.12) !important;
  border-color: rgba(201,68,30,.45) !important;
  color: #d4573a !important;
}

/* Loves count */
.mv-modal-loves-count {
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
}
/* Dark variant */
.mv-modal-film .mv-modal-loves-count,
.mv-modal-letter-footer .mv-modal-loves-count {
  color: rgba(240,236,228,.28);
}
/* Paper variant */
.mv-modal-journal-footer .mv-modal-loves-count,
.mv-modal-pol-footer .mv-modal-loves-count,
.mv-modal-note-footer .mv-modal-loves-count {
  color: rgba(100,75,30,.45);
}

/* ================================================================
   PHOTO MEMORY CARD — wall
   ================================================================ */
.mv-card--photo {
  background: var(--paper-warm);
  border-radius: 2px;
  padding: 10px 10px 18px;
  box-shadow:
    0 2px 8px rgba(0,0,0,.4),
    0 12px 48px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.6);
  cursor: pointer;
  position: relative;
  transition: transform .25s cubic-bezier(.34,1.3,.64,1), box-shadow .25s ease;
}
.mv-card--photo:hover,
.mv-card--photo:focus-visible {
  transform: scale(1.035) translateY(-3px) rotate(0deg) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.5),
    0 24px 80px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.6);
  outline: none;
  z-index: 10;
}

/* Tape strip at top */
.mv-photo-tape {
  position: absolute;
  background: rgba(201,168,76,.28);
  border: 1px solid rgba(201,168,76,.15);
  height: 20px;
  z-index: 3;
}
.mv-photo-tape--top {
  width: 50px; top: -10px; left: 50%;
  transform: translateX(-50%);
  border-radius: 1px;
}

/* Photo frame */
.mv-photo-frame {
  display: flex; flex-direction: column;
}
.mv-photo-img-wrap {
  position: relative; overflow: hidden;
  border-radius: 1px;
  background: #0f0d13;
  aspect-ratio: 4/3;
}
.mv-photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.18) contrast(1.04) brightness(0.97);
  transition: filter .3s ease;
}
.mv-card--photo:hover .mv-photo-img { filter: sepia(0.08) contrast(1.06) brightness(1.01); }

/* Aged-photo overlay */
.mv-photo-developed-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(8,6,2,.22) 100%),
    linear-gradient(160deg, rgba(255,240,200,.04) 0%, transparent 60%);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Caption strip below photo */
.mv-photo-caption-strip {
  padding: 10px 4px 0;
}
.mv-photo-user {
  font-family: 'Caveat', cursive;
  font-size: .95rem; font-weight: 700;
  color: var(--paper-ink); margin: 0 0 2px;
}
.mv-photo-meta {
  font-family: 'DM Mono', monospace;
  font-size: .58rem; letter-spacing: .08em;
  color: var(--paper-faint); margin: 0 0 6px;
  text-transform: uppercase;
}
.mv-photo-preview {
  font-family: 'Caveat', cursive;
  font-size: .88rem; color: #4a3810;
  line-height: 1.55; margin: 0;
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
   PHOTO MEMORY MODAL
   ================================================================ */
.mv-modal-photo {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Top: polaroid frame */
.mv-modal-photo-frame {
  background: var(--paper-warm);
  padding: 12px 12px 0;
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

.mv-modal-photo-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
  background: #0f0d13;
  aspect-ratio: 4/3;
  max-height: 340px;
}
.mv-modal-photo-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: sepia(0.15) contrast(1.05) brightness(0.98);
}

/* Photo edges — aged print effect */
.mv-modal-photo-edge-top,
.mv-modal-photo-edge-bottom {
  position: absolute; left: 0; right: 0;
  height: 28px; pointer-events: none; z-index: 2;
}
.mv-modal-photo-edge-top {
  top: 0;
  background: linear-gradient(180deg, rgba(245,240,230,.12) 0%, transparent 100%);
}
.mv-modal-photo-edge-bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(245,240,230,.15) 0%, transparent 100%);
}
.mv-modal-photo-developed {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 85% at 50% 50%, transparent 38%, rgba(8,6,2,.28) 100%);
  pointer-events: none; mix-blend-mode: multiply;
}

/* ID strip below photo inside frame */
.mv-modal-photo-id-strip {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding: 9px 4px 10px;
}
.mv-modal-photo-user {
  font-family: 'Caveat', cursive;
  font-size: 1.05rem; font-weight: 700;
  color: var(--paper-ink);
}
.mv-modal-photo-date {
  font-family: 'DM Mono', monospace;
  font-size: .55rem; letter-spacing: .1em;
  color: var(--paper-faint); text-transform: uppercase;
}

/* Bottom: story body */
.mv-modal-photo-body {
  background: #f9f5ea;
  padding: 22px 24px 24px;
  border-radius: 0 0 2px 2px;
  border-top: 1px solid rgba(160,130,60,.14);
}

.mv-modal-photo-meta {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap; margin-bottom: 18px;
}
.mv-modal-photo-country {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-mid);
  background: rgba(160,130,60,.08);
  border: 1px solid rgba(160,130,60,.22);
  padding: 3px 10px; border-radius: 50px;
}
.mv-modal-photo-song {
  font-family: 'DM Mono', monospace;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper-mid);
}

/* What I love most section */
.mv-modal-photo-love-section {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: rgba(201,168,76,.07);
  border-left: 3px solid rgba(201,168,76,.4);
  border-radius: 0 4px 4px 0;
}
.mv-modal-photo-love-label {
  font-family: 'DM Mono', monospace;
  font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-faint);
  display: block; margin-bottom: 7px;
}
.mv-modal-photo-love {
  font-family: 'Playfair Display', serif;
  font-size: .93rem; font-style: italic;
  color: #3a2a08; line-height: 1.65; margin: 0;
}

/* Story section */
.mv-modal-photo-story-section { margin-bottom: 20px; }
.mv-modal-photo-story-label {
  font-family: 'DM Mono', monospace;
  font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper-faint);
  display: block; margin-bottom: 12px;
}
.mv-modal-photo-para {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .84rem; color: #2e2005;
  line-height: 1.9; margin: 0 0 12px;
}

/* Footer */
.mv-modal-photo-footer {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(120,90,0,.2);
}
.mv-modal-photo-footer .mv-modal-loves-count {
  color: rgba(100,75,30,.45);
  font-family: 'DM Mono', monospace;
  font-size: .62rem;
}
.mv-modal-photo-footer .mv-modal-love-btn {
  color: #6a4c10;
  border-color: rgba(120,90,30,.35);
}
.mv-modal-photo-footer .mv-modal-love-btn:hover {
  background: rgba(120,90,30,.1);
  border-color: rgba(120,90,30,.6);
}

/* ----------------------------------------------------------------
   CARD ENTRANCE
   ---------------------------------------------------------------- */
.mv-card {
  animation: card-in .55s cubic-bezier(.34,1.3,.64,1) both;
  animation-play-state: paused;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; }
}

.mv-card:nth-child(1)  { animation-delay: .04s; }
.mv-card:nth-child(2)  { animation-delay: .09s; }
.mv-card:nth-child(3)  { animation-delay: .14s; }
.mv-card:nth-child(4)  { animation-delay: .19s; }
.mv-card:nth-child(5)  { animation-delay: .24s; }
.mv-card:nth-child(6)  { animation-delay: .29s; }
.mv-card:nth-child(7)  { animation-delay: .34s; }
.mv-card:nth-child(8)  { animation-delay: .39s; }
.mv-card:nth-child(9)  { animation-delay: .44s; }
.mv-card:nth-child(10) { animation-delay: .49s; }
.mv-card:nth-child(11) { animation-delay: .54s; }
.mv-card:nth-child(12) { animation-delay: .59s; }
.mv-card:nth-child(13) { animation-delay: .64s; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 860px) {
  :root { --mv-section-gap: 60px; }

  .mv-stats-ribbon { gap: 12px 0; padding: 22px 20px; }
  .mv-stat-item { padding: 6px 20px; }
  .mv-stat-divider { display: none; }

  .mv-wall-header { flex-direction: column; align-items: flex-start; }
  .mv-cta-card { padding: 44px 28px; }
}

@media (max-width: 560px) {
  .mv-container, .mv-container--wide { padding: 0 16px; }
  .mv-hero { padding: 24px 0 52px; }

  .mv-stats-ribbon {
    flex-direction: column; align-items: center; gap: 14px;
  }
  .mv-stat-item { width: 100%; text-align: center; padding: 0 12px; }

  .mv-modal-inner { padding: 30px 20px 24px; }
  .mv-footer .mv-container { flex-direction: column; align-items: flex-start; }
  .mv-cta-tape-l, .mv-cta-tape-r { display: none; }
}