@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,100..900,0..100;1,9..144,100..900,0..100&family=Karla:wght@400;500;700&display=swap');

/* If you buy Chunk Italic (Fenotype), drop the file at fonts/ChunkItalic.woff2
   and it's used automatically. Until then the site falls back to Fraunces Soft. */
@font-face {
  font-family: "Chunk Italic";
  src: url("../fonts/ChunkItalic.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* Cottagecore theme */
  --pink: #c47a72;    /* dusty rose */
  --lime: #f4d9d4;    /* soft blush (main button colour) */
  --blue: #6f8f5e;    /* sage / moss green */
  --orange: #e9cf98;  /* honey */
  --cream: #faf6ec;   /* linen page background */
  --ink: #3e4a35;     /* deep moss text & outlines */
  --paper: #fffdf7;
  --border: 1.5px solid var(--ink);
  --shadow: 4px 5px 0 rgba(62,74,53,.22);
  --radius: 22px;
  --font-display: "Chunk Italic", "Fraunces", Georgia, serif;
  --font-body: "Karla", system-ui, sans-serif;
}

/* ---- Cottagecore extras: gingham, washi tape, stitching, flowers ---- */
body {
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(0deg, rgba(111,143,94,.07) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, rgba(111,143,94,.07) 0 14px, transparent 14px 28px);
}
nav { background: rgba(250,246,236,.92); backdrop-filter: blur(8px); }
.display { letter-spacing: -.015em; line-height: .98; }
/* Chunky, rounded, Cooper-style italic for every headline-type element */
.display, .price, .stat b, .sticker, .card .photo .fallback, .card.sold .sold-stamp span {
  font-weight: 900; font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 144;
}
.logo span { font-style: italic; }
.hero h1 { font-size: clamp(3rem, 8.5vw, 6.8rem); color: var(--ink); }
.hero h1 .hl { font-style: italic; background: var(--lime); color: var(--pink); border-radius: 999px; padding: 0 .3em; transform: rotate(-2deg); }
.btn { box-shadow: 3px 3px 0 rgba(62,74,53,.25); border-width: 1.5px; }
.btn:hover { box-shadow: 5px 5px 0 rgba(62,74,53,.25); }
.btn.pink { background: var(--pink); }
.btn.blue { background: var(--blue); }
.collage .polaroid { background: var(--paper); border-radius: 6px; padding-bottom: 40px; }
.collage .polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(45deg, rgba(196,122,114,.55) 0 6px, rgba(244,217,212,.75) 6px 12px);
}
.collage .p2::before { background: repeating-linear-gradient(45deg, rgba(111,143,94,.5) 0 6px, rgba(233,207,152,.7) 6px 12px); }
.sticker { background: var(--lime); color: var(--pink); box-shadow: 0 0 0 6px var(--lime), 0 0 0 7.5px var(--pink); border: 2px dashed var(--pink); animation: sway 5s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(-4deg); } }
.marquee { background: var(--blue); color: var(--paper); transform: rotate(-.8deg); }
.marquee-track { font: 700 1rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.marquee-track span::after { content: "✿"; color: var(--lime); }
.chip { background: var(--paper); border-width: 1.5px; }
.chip[aria-pressed="true"] { background: var(--blue); color: var(--paper); }
.filters select { background: var(--paper); border-width: 1.5px; }
.count { background: var(--paper); border-width: 1.5px; }
.card { background: var(--paper); border-radius: 18px; }
.card .body { border-top: 2px dashed rgba(62,74,53,.25); margin-top: -1px; }
.card .photo { border-bottom: none; }
.card .photo .fallback { color: var(--paper); }
.price { border-radius: 999px; font-size: 1.15rem; padding: .15em .7em; }
.pill { border-width: 1.5px; }
.bundle { background: var(--blue); color: var(--paper); box-shadow: 8px 9px 0 rgba(62,74,53,.22); outline: 2px dashed rgba(255,253,247,.6); outline-offset: -14px; }
.bundle h2 span { color: var(--lime); font-style: italic; }
.about h2 span { font-style: italic; }
.stat { box-shadow: var(--shadow); }
.stat:nth-child(1) { background: var(--lime); }
.stat:nth-child(2) { background: var(--pink); color: var(--paper); }
.stat:nth-child(3) { background: var(--orange); }
.stat:nth-child(4) { background: var(--paper); }
.card.sold .sold-stamp span { font-style: italic; }
.sparkle { position: absolute; color: var(--pink); font-size: 2.2rem; animation: bloom 4s ease-in-out infinite; pointer-events: none; }
.sparkle.k2 { color: var(--blue); font-size: 1.6rem; animation-delay: 1.2s; }
.sparkle.k3 { color: #d9a441; font-size: 2rem; animation-delay: 2.2s; }
@keyframes bloom { 0%,100% { transform: rotate(-10deg) scale(.9); } 50% { transform: rotate(15deg) scale(1.08); } }
footer { background: var(--ink); }
footer .big { color: var(--lime); font-style: italic; }
.sparkle::before { content: "✿"; }
.sparkle.k2::before { content: "❀"; }
.flourish::before { content: "✿"; }