@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap');
:root{
  --berry:#e84a7f;
  --berry-deep:#c73666;
  --blush:#ffd6e7;
  --petal:#fff0f6;
  --cream:#fffaf7;
  --cream-deep:#fff3eb;
  --leaf:#3cb371;
  --leaf-soft:#dff7e8;
  --ink:#3a2f35;
  --muted:#8a6f7a;
  --card:#ffffff;
  --shadow:0 8px 24px rgba(232,74,127,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at top left, #ffe4ef 0%, transparent 45%),
    radial-gradient(ellipse at top right, #fff0e0 0%, transparent 40%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%);
  background-attachment:fixed;
  line-height:1.7;
  min-height:100vh;
}
header{
  background:linear-gradient(135deg, var(--berry) 0%, #ff6b9d 55%, #ff8fb3 100%);
  color:#fff;
  padding:1.6rem 1.2rem 1.4rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(232,74,127,.28);
}
header::before,header::after{
  content:'🍓';
  position:absolute;
  font-size:2.4rem;
  opacity:.22;
  pointer-events:none;
}
header::before{left:8%; top:18%; transform:rotate(-18deg)}
header::after{right:8%; bottom:12%; transform:rotate(14deg); font-size:2rem}
header a{color:#fff;text-decoration:none}
header h1{
  margin:0;
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.55rem, 5vw, 2.15rem);
  font-weight:700;
  letter-spacing:-.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.12);
}
header p{
  margin:.45rem 0 0;
  font-style:italic;
  font-weight:600;
  opacity:.95;
  font-size:1.02rem;
}
nav{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--blush);
  text-align:center;
  padding:.65rem .5rem;
  position:sticky;
  top:0;
  z-index:10;
  box-shadow:0 2px 10px rgba(232,74,127,.06);
}
nav a{
  color:var(--berry-deep);
  margin:0 .35rem;
  padding:.35rem .75rem;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  border-radius:999px;
  transition:background .15s, color .15s;
  display:inline-block;
}
nav a:hover,nav a:focus{
  background:var(--petal);
  color:var(--berry);
}
main{
  max-width:740px;
  margin:0 auto;
  padding:1.6rem 1.1rem 3.5rem;
}
main>p.lead, main>p:first-child{
  font-size:1.08rem;
  color:var(--muted);
  text-align:center;
  max-width:36em;
  margin:0 auto 1.5rem;
  line-height:1.75;
}
a{color:var(--berry-deep); font-weight:700; text-decoration-thickness:2px; text-underline-offset:3px}
a:hover{color:var(--berry)}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:1.25rem 1.35rem 1.3rem;
  margin:1.1rem 0;
  box-shadow:var(--shadow);
  border:1.5px solid var(--blush);
  transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.card::before{
  content:'🍓';
  position:absolute;
  top:-.55rem;
  right:1rem;
  font-size:1.15rem;
  filter:drop-shadow(0 2px 3px rgba(232,74,127,.2));
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(232,74,127,.18);
}
.card h3{
  margin:.15rem 0 .4rem;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.22rem;
  font-weight:700;
  line-height:1.35;
}
.card h3 a{text-decoration:none; color:var(--ink)}
.card h3 a:hover{color:var(--berry)}
.card p{margin:.4rem 0 0; color:var(--muted); font-size:.98rem}
.cat{
  display:inline-block;
  font-size:.72rem;
  text-transform:uppercase;
  color:var(--leaf);
  letter-spacing:.06em;
  font-weight:800;
  background:var(--leaf-soft);
  padding:.22rem .65rem;
  border-radius:999px;
}
.disc{
  font-size:.88rem;
  background:linear-gradient(90deg, var(--petal), #fff8fb);
  border-left:4px solid var(--berry);
  border-radius:0 14px 14px 0;
  padding:.75rem 1rem;
  margin:1.2rem 0;
  color:var(--muted);
}
main h1{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.45rem, 4.5vw, 1.9rem);
  color:var(--berry-deep);
  line-height:1.3;
  margin:0 0 .8rem;
}
main h2{
  font-family:'Fraunces',Georgia,serif;
  color:var(--berry-deep);
  font-size:1.25rem;
}
main img{max-width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow)}
main ul,main ol{padding-left:1.3rem}
main li{margin:.35rem 0}
.photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:18px;margin:.2rem 0 .9rem;
  background:radial-gradient(circle at 30% 25%,#fff 0 18%,transparent 19%),linear-gradient(135deg,var(--blush),var(--cream-deep));
  border:2px dashed #ffc2d8;font-size:clamp(3rem,12vw,4.6rem);overflow:hidden;box-shadow:inset 0 0 0 6px #fff}
.photo img{width:100%;height:100%;object-fit:contain;background:#fff}
.card .photo{aspect-ratio:16/9;font-size:3rem;margin-top:.6rem}
main .home-pack{display:block;width:100%;max-width:640px;margin:0 auto 1.2rem;border-radius:22px;box-shadow:0 6px 18px rgba(214,90,120,.18)}
.side-pic{display:none}
@media(min-width:1100px){.side-pic{display:block;position:fixed;top:230px;width:170px;border-radius:20px;border:5px solid #fff;box-shadow:0 6px 18px rgba(214,90,120,.22);z-index:1}.side-left{left:24px;transform:rotate(-4deg)}}
:root{--teal:#2ec4b6;--teal-soft:#d6f5f2;--teal-deep:#178f86;--phi:1.618}
header{border-bottom:6px solid var(--teal);padding:calc(1rem*var(--phi)) 1rem}
nav a{border:2px solid var(--teal)!important}
nav a:hover{background:var(--teal-soft)!important}
main{max-width:calc(30rem*var(--phi));line-height:var(--phi)}
main h1{font-size:calc(1.236rem*var(--phi))}
main h2{font-size:calc(1rem*var(--phi))}
main a{color:var(--teal-deep)}
.card{margin-bottom:calc(1rem*var(--phi));border-left:5px solid var(--teal)}
.card:nth-child(even){border-left-color:#ff8fb3}
.card .photo{aspect-ratio:1.618/1;border-color:var(--teal)}
.card a,.tag{color:var(--teal-deep)}
.tag{background:var(--teal-soft)!important}
.side-pic{border-color:var(--teal-soft)!important}
footer{border-top:6px solid var(--teal)}
main .hero-photo{max-width:520px;margin:1rem auto 1.4rem}
main .home-pack{max-width:260px!important;border-radius:18px}
.card .photo{float:right;width:110px;height:110px;aspect-ratio:auto!important;font-size:2.2rem!important;margin:0 0 .5rem 1rem!important}
.card::after{content:"";display:block;clear:both}
main .hero-photo{max-width:240px!important;aspect-ratio:1/1;font-size:3rem!important}
@media(min-width:1100px){.side-pic{width:120px!important}}

footer{
  text-align:center;
  font-size:.82rem;
  color:var(--muted);
  padding:2.2rem 1.2rem 2.8rem;
  border-top:2px dashed var(--blush);
  margin-top:1rem;
  background:rgba(255,240,246,.45);
}
footer a{font-weight:700}
@media (max-width:520px){
  header{padding:1.35rem 1rem 1.2rem}
  header::before,header::after{font-size:1.6rem; opacity:.18}
  nav a{margin:0 .15rem; padding:.3rem .55rem; font-size:.88rem}
  .card{padding:1.1rem 1.1rem 1.15rem; border-radius:18px}
  .card::before{right:.7rem; font-size:1rem}
  main{padding:1.25rem .9rem 3rem}
}