/* Styles for Paris Maine Coons - playful + mature aesthetic */
:root{
  --bg1:#fff9ff;
  --accent:#ff7fb6;
  --muted:#6b6b6b;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 8px 24px rgba(16,24,40,0.08);
  --radius:14px;
  --max:1100px;
}

*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;font-size:16px;line-height:1.4;margin:0;background:linear-gradient(135deg,var(--bg1) 0%, #f4f7ff 100%);color:#222;}

.site-header{background:linear-gradient(90deg,var(--accent),#ffd1e8);color:white;padding:28px 16px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.logo{font-weight:700;font-size:1.6rem;letter-spacing:0.6px}
.sub{margin:6px 0 0;opacity:0.95}

.hero{padding:36px 16px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-inner{max-width:var(--max);text-align:center;padding:8px}
.hero h1{font-size:2rem;margin:0 0 8px;color:#3b2a3b}
.lead{margin:0 0 16px;color:var(--muted)}
.cta{background:linear-gradient(90deg,#ffd1e8,#ffecf8);border:0;padding:10px 18px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow)}

.sparkles{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 20% 10%, rgba(255,255,255,0.6) 0, transparent 30%),
  radial-gradient(circle at 80% 80%, rgba(255,240,255,0.5) 0, transparent 25%);
mix-blend-mode:screen;opacity:0.9;}

/* gallery */
.gallery{display:grid;gap:18px;padding:24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:var(--max);margin:0 auto}

.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(16,24,40,0.12)}
.media{position:relative}
.media img{display:block;width:100%;height:260px;object-fit:cover}
.badge{position:absolute;left:10px;top:10px;background:linear-gradient(90deg,#fff2fb,#ffd6e9);color:#b30057;padding:6px 10px;border-radius:999px;font-weight:600;box-shadow:0 6px 12px rgba(203,80,141,0.08)}

.meta{padding:12px;text-align:center}
.meta h3{margin:0;font-size:1.15rem;color:#3b2a3b}
.small{color:var(--muted);font-size:0.92rem;margin-top:6px}

/* modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(12,16,30,0.45);opacity:0;visibility:hidden;transition:opacity .2s ease}
.modal.open{opacity:1;visibility:visible}
.modal-content{background:linear-gradient(180deg,rgba(255,255,255,0.98),#fff);padding:18px;border-radius:16px;max-width:720px;width:94%;box-shadow:0 14px 50px rgba(10,10,10,0.3);position:relative;text-align:center}
.modal-content img{max-width:320px;width:100%;height:320px;object-fit:cover;border-radius:12px;margin:0 auto;display:block}
.modal-content h2{margin:12px 0 6px;font-size:1.5rem;color:#3b2a3b}
.modal-content p.desc{color:var(--muted);margin:8px 0 12px}

/* buttons */
.close{position:absolute;right:12px;top:12px;background:transparent;border:0;font-size:18px;cursor:pointer}
.primary{background:linear-gradient(90deg,#ff95c0,#ff7fb6);border:0;padding:10px 14px;border-radius:10px;color:white;cursor:pointer}

/* footer */
.site-footer{padding:18px;text-align:center;color:#444;background:linear-gradient(90deg,#fff,#fff);margin-top:28px}

/* responsive tweaks */
@media (max-width:600px){
  .media img{height:200px}
  .modal-content img{height:240px}
}