/* ============================================================
   Wedshed · We Do Crew — Scrapbook Design System (v2 brand-correct)
   Editorial collage in real Wedshed colours.
   ============================================================ */

@font-face {
  font-family: 'Livorno';
  src: url('fonts/Livorno-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Wedshed brand palette (from design pack 2019) */
  --w-nude:      #FFE6D5;   /* warm cream — primary bg */
  --w-purple:    #272338;   /* deep aubergine — primary ink */
  --w-maroon:    #661735;   /* deep wine — replaced sage */
  --w-sage:      #661735;   /* alias for backwards-compat */
  --w-lavender:  #A8AED6;
  --w-cornflower:#7093FF;
  --w-mint:      #EAF7E6;

  /* Mid-tones derived for scrapbook elements */
  --w-nude-deep: #F3D2BC;
  --w-purple-soft: rgba(39, 35, 56, .65);
  --w-shell:     #FBEEDF;

  /* Tape colours — translucent overlays */
  --tape-nude:    rgba(255, 230, 213, 0.82);
  --tape-sage:    rgba(102, 23, 53, 0.7);
  --tape-lav:     rgba(168, 174, 214, 0.72);
  --tape-mint:    rgba(234, 247, 230, 0.85);
  --tape-corn:    rgba(112, 147, 255, 0.55);

  /* Type */
  --f-display: 'Livorno', 'Instrument Serif', Georgia, serif;
  --f-hand:    'Caveat', cursive;
  --f-marker:  'Permanent Marker', 'Caveat', cursive;
  --f-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;
  --f-body:    'Hanken Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ============================================================
   Paper backgrounds
   ============================================================ */

.paper {
  position: absolute; inset: 0;
  background: var(--w-nude);
}

.paper.nude     { background: var(--w-nude); }
.paper.purple   { background: var(--w-purple); }
.paper.sage     { background: var(--w-sage); }
.paper.lavender { background: var(--w-lavender); }
.paper.mint     { background: var(--w-mint); }
.paper.shell    { background: var(--w-shell); }

/* Soft warm vignette */
.paper.nude::before, .paper.shell::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 100%, rgba(168,174,214,.18), transparent 55%),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.4), transparent 50%);
}

/* Subtle paper grain */
.paper::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.14 0 0 0 0 0.22 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: .4; pointer-events: none;
}

/* ============================================================
   Photo "polaroid" — but more editorial, less crafty
   ============================================================ */

.photo {
  background: #fdfaf3;
  padding: 12px 12px 12px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 18px 32px -14px rgba(39,35,56,.35),
    0 2px 4px rgba(39,35,56,.10);
  position: relative;
  display: inline-block;
}
.photo.polaroid { padding: 12px 12px 48px; }
.photo .cap {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center;
  font-family: var(--f-hand);
  font-size: 22px; color: var(--w-purple);
  line-height: 1;
}
.photo img, .photo image-slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo .frame { overflow: hidden; }

/* ============================================================
   Tape — translucent washi strips
   ============================================================ */

.tape {
  position: absolute;
  width: 90px; height: 22px;
  background: var(--tape-nude);
  box-shadow: 0 2px 4px rgba(39,35,56,.12);
  pointer-events: none;
}
.tape::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.4) 4px 6px);
  mix-blend-mode: overlay;
}
.tape.sage    { background: var(--tape-sage); }
.tape.lav     { background: var(--tape-lav); }
.tape.mint    { background: var(--tape-mint); }
.tape.corn    { background: var(--tape-corn); }

/* ============================================================
   Stickers / pills
   ============================================================ */

.sticker {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-marker);
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--w-cornflower);
  color: var(--w-nude);
  box-shadow: 0 4px 10px -4px rgba(39,35,56,.4);
  position: relative;
}
.sticker.sage  { background: var(--w-maroon); color: var(--w-nude); }
.sticker.lav   { background: var(--w-lavender); color: var(--w-purple); }
.sticker.dark  { background: var(--w-purple); color: var(--w-nude); }
.sticker.nude  { background: var(--w-nude); color: var(--w-purple); }

/* Mono stamp */
.stamp {
  display: inline-block;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed currentColor;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase;
}

/* Scribble underline */
.scribble { position: relative; display: inline-block; }
.scribble::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: -8px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 30 1, 60 5 T 120 4 T 198 6' stroke='%237093FF' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") no-repeat;
  background-size: 100% 100%;
}
.scribble.sage::after  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 30 1, 60 5 T 120 4 T 198 6' stroke='%23661735' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>"); }
.scribble.purple::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 30 1, 60 5 T 120 4 T 198 6' stroke='%23272338' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>"); }
.scribble.nude::after  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 30 1, 60 5 T 120 4 T 198 6' stroke='%23FFE6D5' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>"); }

/* Highlight marker */
.hi {
  background: linear-gradient(180deg, transparent 55%, var(--w-cornflower) 55% 92%, transparent 92%);
  color: var(--w-nude);
  padding: 0 6px;
}
.hi.lav  { background: linear-gradient(180deg, transparent 55%, var(--w-lavender) 55% 92%, transparent 92%); color: var(--w-purple); }
.hi.sage { background: linear-gradient(180deg, transparent 55%, var(--w-maroon) 55% 92%, transparent 92%); color: var(--w-nude); }
.hi.nude { background: linear-gradient(180deg, transparent 55%, var(--w-nude) 55% 92%, transparent 92%); color: var(--w-purple); }

/* ============================================================
   Buttons / CTAs
   ============================================================ */

.cta {
  font-family: var(--f-body);
  font-weight: 700;
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 28px;
  background: var(--w-purple);
  color: var(--w-nude);
  border: none;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 0 rgba(39,35,56,.18), 0 12px 24px -10px rgba(39,35,56,.4);
  transition: transform .15s ease, box-shadow .15s ease;
  text-transform: uppercase;
}
.cta:hover { transform: translate(-1px, -2px); box-shadow: 0 8px 0 0 rgba(39,35,56,.18), 0 16px 28px -8px rgba(39,35,56,.4); }
.cta.corn { background: var(--w-cornflower); color: #fff; }
.cta.nude { background: var(--w-nude); color: var(--w-purple); }
.cta.lav  { background: var(--w-lavender); color: var(--w-purple); }
.cta.sage { background: var(--w-maroon); color: var(--w-nude); }

/* ============================================================
   Type helpers
   ============================================================ */

.display { font-family: var(--f-display); font-weight: 700; line-height: .9; letter-spacing: -0.015em; }
.hand    { font-family: var(--f-hand);    font-weight: 700; }
.marker  { font-family: var(--f-marker); }
.mono    { font-family: var(--f-mono);    text-transform: uppercase; letter-spacing: .18em; }
.body    { font-family: var(--f-body); }

/* Italic Livorno fallback to Instrument Serif italic since Livorno-Bold has no italic */
.display.it { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Image slots */
image-slot {
  --slot-bg: #efe2cd;
  --slot-fg: #8a7158;
}

* { -webkit-font-smoothing: antialiased; }

/* ============================================================
   Wedshed monogram (inline SVG mark used in headers)
   ============================================================ */
.monogram { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 18px; }