/* ---------- About: the love note on kiwi-green leather, with movable acrylic gems ---------- */

body.about-page{
  --cream: #f7f1de;
  --cream-soft: rgba(247,241,222,0.8);
  --gem-pink: #ff7fae;
  --gem-yellow: #e4ec2c;
  --gem-green: #96dcb0;

  background: #7a8c2e url("../images/textures/leather-green.jpg") repeat;
}

/* header + footer read in cream on the green */
body.about-page .wordmark{ color: var(--cream); }
body.about-page .site-nav a{ color: var(--cream-soft); }
body.about-page .site-nav a:hover,
body.about-page .site-nav a.active{ color: var(--cream); border-color: var(--cream); }
body.about-page .site-footer,
body.about-page .back-home{ color: var(--cream-soft); }
body.about-page .back-home:hover{ color: var(--cream); }

body.about-page .page-hero{ padding-bottom: 0; }

.about{
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 24px 30px;
  overflow-x: clip;
}

/* ---------- the note + gems ---------- */

.gem-stage{
  container-type: inline-size;
  position: relative;
  width: min(700px, 100%);
  margin: 20px auto 0;
  padding: 5% 11%;
}

.love-card{
  position: relative;
  padding: 36px 44px 30px;
  background: var(--cream);
  color: var(--ink);
  transform: rotate(-0.6deg);
  /* hard afternoon-sun shadow, like paper lying flat */
  box-shadow: 10px 13px 4px rgba(40,50,0,0.32);
}

.love-card h1{
  margin: 0 0 16px;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.25;
  color: var(--ink);
}

.love-items{
  list-style: none;
  margin: 0;
  padding: 0;
}

.love-items li{
  position: relative;
  padding: 8px 0 8px 26px;
  border-bottom: 1px solid rgba(74,36,32,0.12);
  font-size: 1.15rem;
  line-height: 1.45;
}
.love-items li:last-child{ border-bottom: 0; }

/* tiny gem bullets, cycling pink / yellow / green */
.love-items li::before{
  content: '';
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.85) 0 18%, transparent 24%),
    var(--b, var(--gem-pink));
  box-shadow: 1.5px 2px 1px rgba(40,50,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.45);
}
.love-items li:nth-child(3n+2)::before{ --b: var(--gem-yellow); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.love-items li:nth-child(3n)::before{ --b: var(--gem-green); }

.gems{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gem{
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--s) * 1cqw);
  height: calc(var(--s) * 1cqw);
  overflow: visible;
  opacity: 0.93;
  transform: rotate(calc(var(--r, 0) * 1deg));
  filter: drop-shadow(0.9cqw 1.1cqw 0.25cqw rgba(40,50,0,0.4));
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  transition: filter .2s ease, transform .2s ease;
}

.gem:hover{
  transform: rotate(calc(var(--r, 0) * 1deg)) scale(1.08);
}

.gem.is-dragging{
  cursor: grabbing;
  transform: rotate(calc(var(--r, 0) * 1deg)) scale(1.14);
  filter: drop-shadow(1.8cqw 2.4cqw 0.6cqw rgba(40,50,0,0.32));
  z-index: 5;
}

.drag-hint{
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cream-soft);
}

/* ---------- small screens ---------- */

@media (max-width: 600px){
  .about{ padding: 0 12px 20px; }
  .gem-stage{ padding: 9% 8%; }
  .love-card{ padding: 26px 22px 20px; }
  .love-card h1{ font-size: 1.45rem; }
  .gem{ width: calc(var(--s) * 1.4cqw); height: calc(var(--s) * 1.4cqw); }
}