/* ─────────────────────────────────────────────────────────────
   Anniversary Memories — shared scrapbook styling
   ───────────────────────────────────────────────────────────── */

:root {
  /* Warm-light palette (default) */
  --paper:        #F4EDE0;
  --paper-light:  #FAF6EE;
  --paper-deep:   #EBE0CC;
  --ink:          #2A2018;
  --ink-soft:     #5C4A3A;
  --ink-faded:    #8A7763;
  --blush:        #E8C4B8;
  --gold:         #C9A961;
  --rose:         #C97D6F;
  --sage:         #A8B098;
  --tape:         rgba(232, 196, 184, 0.55);
  --tape-yellow:  rgba(245, 222, 130, 0.55);

  /* Type */
  --serif:    'Fraunces', 'EB Garamond', Georgia, serif;
  --display:  'DM Serif Display', 'Fraunces', Georgia, serif;
  --hand:     'Caveat', 'Homemade Apple', 'Patrick Hand', cursive;
  --hand-alt: 'Homemade Apple', 'Caveat', cursive;
  --mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── Palette variants ──────────────────────────────────── */
.palette-warm-light { /* default, declared above */ }

.palette-sepia {
  --paper:        #E8DFCC;
  --paper-light:  #F0E8D6;
  --paper-deep:   #D8CBB0;
  --ink:          #3A2A1C;
  --ink-soft:     #6B5440;
  --ink-faded:    #9A856B;
  --blush:        #D8A998;
  --gold:         #B8923F;
  --rose:         #B86A5C;
  --sage:         #98A088;
  --tape:         rgba(216, 169, 152, 0.55);
  --tape-yellow:  rgba(218, 195, 110, 0.55);
}

.palette-blush {
  --paper:        #FBEEE8;
  --paper-light:  #FFF6F0;
  --paper-deep:   #F2DCD0;
  --ink:          #3D2A2A;
  --ink-soft:     #6B4A4A;
  --ink-faded:    #9A7878;
  --blush:        #F2B8AA;
  --gold:         #D4A574;
  --rose:         #D67670;
  --sage:         #B0A898;
  --tape:         rgba(242, 184, 170, 0.6);
  --tape-yellow:  rgba(245, 220, 140, 0.55);
}

.palette-cream {
  --paper:        #F8F1E0;
  --paper-light:  #FDF8EA;
  --paper-deep:   #ECDFC2;
  --ink:          #2D2418;
  --ink-soft:     #5A4830;
  --ink-faded:    #897256;
  --blush:        #E8C4B8;
  --gold:         #D4B870;
  --rose:         #C4807A;
  --sage:         #B0B098;
  --tape:         rgba(232, 196, 184, 0.55);
  --tape-yellow:  rgba(245, 222, 130, 0.6);
}

/* ── Type pair variants ───────────────────────────────── */
.type-fraunces {
  --serif:    'Fraunces', Georgia, serif;
  --display:  'Fraunces', Georgia, serif;
  --hand:     'Caveat', cursive;
}

.type-dm-serif {
  --serif:    'EB Garamond', Georgia, serif;
  --display:  'DM Serif Display', Georgia, serif;
  --hand:     'Caveat', cursive;
}

.type-cormorant {
  --serif:    'Cormorant Garamond', Georgia, serif;
  --display:  'Cormorant Garamond', Georgia, serif;
  --hand:     'Homemade Apple', cursive;
}

.type-playfair {
  --serif:    'Lora', Georgia, serif;
  --display:  'Playfair Display', Georgia, serif;
  --hand:     'Patrick Hand', cursive;
}

/* ── Paper background (used inside artboards) ─────────── */
.paper-bg {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(255,255,255,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(0,0,0,0.04) 0%, transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(120,90,60,0.012) 0px,
      rgba(120,90,60,0.012) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(120,90,60,0.012) 0px,
      rgba(120,90,60,0.012) 1px,
      transparent 1px,
      transparent 4px
    );
  color: var(--ink);
  font-family: var(--serif);
}

/* Optional grain / film overlay */
.grain-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.35;
  mix-blend-mode: multiply;
  z-index: 50;
}

/* ── Polaroid ─────────────────────────────────────────── */
.polaroid {
  position: relative;
  background: #fdfaf2;
  padding: 14px 14px 56px 14px;
  box-shadow:
    0 1px 2px rgba(60,40,20,0.18),
    0 14px 28px rgba(60,40,20,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  display: inline-block;
  break-inside: avoid;
}
.polaroid .caption {
  font-family: var(--hand);
  color: var(--ink-soft);
  font-size: 22px;
  text-align: center;
  margin-top: 10px;
  line-height: 1.1;
}
.polaroid.small  { padding: 10px 10px 40px 10px; }
.polaroid.large  { padding: 18px 18px 70px 18px; }

/* ── Masking tape ─────────────────────────────────────── */
.tape {
  position: absolute;
  width: 90px;
  height: 22px;
  background: var(--tape);
  box-shadow: 0 1px 2px rgba(60,40,20,0.12);
  z-index: 5;
  /* torn edges */
  -webkit-mask-image:
    radial-gradient(circle at 0 50%, transparent 2px, black 2px),
    radial-gradient(circle at 100% 50%, transparent 2px, black 2px);
  -webkit-mask-composite: source-in;
}
.tape::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 4px,
    rgba(255,255,255,0.18) 4px 5px
  );
}
.tape.yellow { background: var(--tape-yellow); }
.tape.thin   { height: 14px; width: 70px; }
.tape.long   { width: 130px; }

/* ── Handwritten note ─────────────────────────────────── */
.handwritten {
  font-family: var(--hand);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: 0.005em;
}
.handwritten.alt {
  font-family: var(--hand-alt);
  line-height: 1.4;
  font-size: 0.85em;
}

/* ── Photo placeholder (subtly striped) ──────────────── */
.photo-ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      #d8c8b0 0 8px,
      #cdbca0 8px 16px
    );
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
  overflow: hidden;
}
.photo-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.18), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.08), transparent 60%);
  pointer-events: none;
}
.photo-ph .ph-label {
  position: relative;
  z-index: 2;
  background: rgba(250, 246, 238, 0.78);
  padding: 5px 10px;
  border-radius: 1px;
  color: var(--ink);
  font-weight: 500;
}

/* video placeholder */
.photo-ph.video::before {
  content: "▶";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -130%);
  font-size: 22px;
  color: rgba(250,246,238,0.85);
  z-index: 2;
}

/* ── Decorative bits ──────────────────────────────────── */
.sticker {
  position: absolute;
  font-family: var(--hand);
  z-index: 6;
  user-select: none;
}

.deckle {
  position: relative;
}
.deckle::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--paper-light);
  z-index: -1;
  -webkit-mask-image:
    radial-gradient(circle at 0% 25%, transparent 3px, black 3px),
    radial-gradient(circle at 0% 75%, transparent 3px, black 3px);
}

.divider-stitch {
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink-faded) 0 6px,
    transparent 6px 12px
  );
  opacity: 0.45;
}

/* ── Audio chip ───────────────────────────────────────── */
.audio-chip {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: var(--paper-light);
  border: 1px solid rgba(60, 40, 20, 0.18);
  padding: 10px 14px 10px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(60,40,20,0.12);
  user-select: none;
  transition: transform 0.18s ease;
}
.audio-chip:hover { transform: translateY(-1px); }
.audio-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 0 rgba(201, 125, 111, 0.6);
}
.audio-chip.playing .dot {
  animation: chip-pulse 1.4s ease-out infinite;
}
@keyframes chip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,125,111,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(201,125,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,125,111,0); }
}

/* ── Reveal-on-scroll ─────────────────────────────────── */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal:not(.in-init) {
  /* baseline state when JS reveal effect hasn't run; show by default */
  opacity: 1;
}
.reveal.in-init { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ── Reading column ───────────────────────────────────── */
.read-col {
  max-width: 580px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}

/* small-caps eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

/* used inside DC artboards — fills artboard so .scroll-frame (inset:0) has size */
.memory-doc {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  color: var(--ink);
}
.memory-doc * { box-sizing: border-box; }

/* Full-viewport preview mode: doc grows naturally, page scrolls */
.preview-host {
  width: 100%;
  min-height: 100vh;
  background: var(--paper);
}
.memory-doc-full {
  height: auto;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}
body.view-preview {
  overflow-y: auto;
  background: var(--paper);
}

/* the actual scrolling viewport inside the artboard's iframe-like surface */
.scroll-frame {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.scroll-frame::-webkit-scrollbar { width: 6px; }
.scroll-frame::-webkit-scrollbar-thumb {
  background: rgba(60,40,20,0.18);
  border-radius: 3px;
}

/* ticket stub */
.ticket {
  position: relative;
  background: var(--paper-light);
  border: 1px dashed rgba(60,40,20,0.35);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  top: 50%; transform: translateY(-50%);
}
.ticket::before { left: -6px; }
.ticket::after  { right: -6px; }

/* ── Now-playing toast ───────────────────────────────── */
.np-toast {
  position: fixed;
  top: 28px;
  right: 28px;
  z-index: 110;
  background: rgba(250, 246, 238, 0.96);
  border: 1px solid rgba(60, 40, 20, 0.18);
  padding: 14px 22px 16px;
  min-width: 240px;
  max-width: 340px;
  box-shadow: 0 12px 28px rgba(60,40,20,0.22);
  font-family: var(--serif);
  color: var(--ink);
  animation: np-in 0.5s ease forwards, np-out 0.5s ease 3.6s forwards;
  transform: translateX(20px);
  opacity: 0;
}
.np-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--ink-faded);
  margin-bottom: 6px;
}
.np-title {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.05;
  font-style: italic;
  margin-bottom: 4px;
}
.np-artist {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
}
.np-missing {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  padding-top: 6px;
  border-top: 1px dashed rgba(60,40,20,0.2);
}
@keyframes np-in {
  to { transform: none; opacity: 1; }
}
@keyframes np-out {
  to { transform: translateX(20px); opacity: 0; }
}

/* ── Chapter chrome ───────────────────────────────────── */
.chapter-marker {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 16px 60px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--ink-faded);
  background: linear-gradient(to bottom, var(--paper) 70%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.chapter-marker .roman {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

/* underline ink swash */
.swash {
  display: inline-block;
  position: relative;
}
.swash::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6px;
  height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 2, 80 12, 120 6 S 190 4, 198 8' fill='none' stroke='%23C97D6F' stroke-width='2.4' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
  opacity: 0.85;
}