html{scroll-behavior:smooth}
:root{color-scheme:light}

body{margin:0;background:#FFFFFF}
a{color:#B04A72}a:hover{color:#8E3459}
@keyframes sfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sfMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sfRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes sfPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:.85}}
.sf-motion .sf-float{animation:sfFloat 6s ease-in-out infinite}
.sf-motion .sf-marquee{animation:sfMarquee 38s linear infinite}
.sf-motion .sf-rise{animation:sfRise .9s cubic-bezier(.2,.7,.2,1) both}
.sf-motion .sf-rise2{animation:sfRise .9s .15s cubic-bezier(.2,.7,.2,1) both}
.sf-motion .sf-rise3{animation:sfRise .9s .3s cubic-bezier(.2,.7,.2,1) both}
.sf-motion .sf-pulse{animation:sfPulse 9s ease-in-out infinite}
.sf-btn{transition:transform .2s ease, background-color .2s ease}
.sf-btn:hover{transform:translateY(-2px)}
.sf-banner{display:block;width:100%;height:auto;aspect-ratio:1983/793;object-fit:contain}
.sf-photo{display:block;width:100%;height:auto;aspect-ratio:1448/1086;object-fit:contain}
.sf-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.sf-vet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start}
.sf-vet>img:nth-child(even){margin-top:56px}
.sf-sym{width:100%;display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px;align-items:center}
.sf-col{display:flex;flex-direction:column;gap:16px}
.sf-ph{display:block;width:100%;height:auto;border-radius:24px;background:#F5F1F2}
@media (max-width: 760px){.sf-trio{grid-template-columns:1fr}.sf-vet{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-sym{grid-template-columns:1fr 1fr}.sf-center{grid-column:1/-1;order:-1}}
@media (prefers-reduced-motion: reduce){.sf-motion *{animation:none !important}}

/* articles */



.ar h2{margin:48px 0 14px;font-size:clamp(24px,2.6vw,30px);line-height:1.35;font-weight:700;color:#332C2E}
.ar h3{margin:28px 0 8px;font-size:20px;line-height:1.45;font-weight:600;color:#332C2E}
.ar p{margin:0 0 16px;font-size:18px;line-height:1.9;color:#4A4244}
.ar ul,.ar ol{margin:0 0 16px;padding-left:24px;font-size:18px;line-height:1.9;color:#4A4244}
.ar li{margin-bottom:6px}
.ar strong{color:#332C2E}
.ar figure{margin:28px 0}
.ar figcaption{margin-top:10px;font-size:14px;color:#6B6063;text-align:center}
.sf-card{transition:transform .35s ease, box-shadow .35s ease}
.sf-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(51,44,46,.10)}