:root{--red:#ff2d55;--red2:#d4143a;--text:#1d1b26;--muted:#6c6880;--glass:rgba(255,255,255,.55);--line:rgba(255,255,255,.85);--radius:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f6f1f4;color:var(--text);line-height:1.65;overflow-x:hidden}
a{color:var(--text)}
.wrap{max-width:960px;margin:0 auto;padding:0 1.2rem}

/* ambient background */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(circle at 50% 0,#fff,#f3edf2 65%)}
.bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:float 18s ease-in-out infinite}
.bg i:nth-child(1){width:46vmax;height:46vmax;background:#ff7a93;top:-14vmax;left:-10vmax}
.bg i:nth-child(2){width:38vmax;height:38vmax;background:#9db4ff;bottom:-12vmax;right:-8vmax;animation-delay:-6s;opacity:.45}
.bg i:nth-child(3){width:26vmax;height:26vmax;background:var(--red);top:40%;left:55%;animation-delay:-12s;opacity:.3}
.bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#b0406a 1px,transparent 1px),linear-gradient(90deg,#b0406a 1px,transparent 1px);background-size:64px 64px;opacity:.08;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%);-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%)}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.15)}}

/* floating glass header */
.site-header{position:sticky;top:12px;z-index:20;padding:0 .8rem}
.header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem .5rem .6rem;background:var(--glass);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);box-shadow:0 8px 32px rgba(120,50,80,.14),inset 0 1px 0 #fff}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand span{display:flex;align-items:baseline;gap:.7rem;white-space:nowrap}
.brand small{display:block;color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.logo{height:42px;width:auto;filter:drop-shadow(0 2px 8px rgba(212,20,58,.3))}
nav a{margin-left:.4rem;padding:.4rem .9rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.9rem;color:var(--muted);transition:.25s}
nav a:hover{color:var(--text);background:rgba(255,255,255,.8)}

/* hero */
.hero{text-align:center;padding:5rem 0 3rem}
.hero .badge{display:inline-block;padding:.35rem 1rem;border:1px solid var(--line);background:var(--glass);border-radius:999px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero h1{margin:1.2rem 0 .6rem;font-size:clamp(2.4rem,8vw,5rem);line-height:1.02;letter-spacing:-.03em;background:linear-gradient(120deg,#1d1b26 15%,var(--red2) 60%,var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0 auto;max-width:34rem;color:var(--muted);font-size:1.1rem}

/* glass cards */
main{padding-bottom:4rem;min-height:40vh}
.card,.post{position:relative;margin-bottom:1.4rem;background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:0 10px 40px rgba(120,50,80,.12),inset 0 1px 0 #fff;overflow:hidden;animation:rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*90ms);transition:transform .35s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,45,85,.5);box-shadow:0 18px 50px rgba(255,45,85,.2),inset 0 1px 0 #fff}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.card img.cover{width:100%;max-height:340px;object-fit:cover;display:block}
.card-body{padding:1.3rem 1.5rem 1.5rem}
.card h2{margin:.3rem 0 .5rem;font-size:1.6rem;letter-spacing:-.02em}
.card h2 a{text-decoration:none}
.card p{color:#3a3846;margin:.3rem 0}
.meta{display:inline-block;color:var(--muted);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.more{display:inline-block;margin-top:.6rem;padding:.5rem 1.1rem;border-radius:999px;text-decoration:none;color:#fff;font-weight:600;font-size:.9rem;background:linear-gradient(120deg,var(--red2),var(--red));box-shadow:0 6px 20px rgba(255,45,85,.35);transition:.25s}
.more:hover{transform:translateX(4px);box-shadow:0 8px 28px rgba(255,45,85,.5)}

/* post */
.post{padding:1.8rem}
.post h1{margin:.4rem 0 .6rem;font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:-.03em;line-height:1.1}
.post p{color:#3a3846;font-size:1.05rem;white-space:pre-line}
.post>a{color:var(--muted);text-decoration:none;font-size:.9rem}
.post>a:hover{color:var(--text)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;margin:1.4rem 0 .2rem}
.gallery img{width:100%;height:180px;object-fit:cover;border-radius:16px;border:1px solid var(--line);cursor:zoom-in;transition:.3s}
.gallery img:hover{transform:scale(1.03);box-shadow:0 0 28px rgba(255,45,85,.35)}
.lightbox{position:fixed;inset:0;background:rgba(246,241,244,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;z-index:50;cursor:zoom-out;animation:rise .3s both}
.lightbox img{max-width:94vw;max-height:90vh;border-radius:18px;box-shadow:0 20px 80px rgba(120,50,80,.35)}
.site-footer{text-align:center;padding:2rem 0;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);background:rgba(255,255,255,.4)}
@media(max-width:560px){.brand small{display:none}.hero{padding:3rem 0 2rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}