
:root{
  --bg:#0a0909;
  --panel:rgba(17,14,14,.82);
  --line:rgba(255,244,229,.12);
  --text:#f7f3ef;
  --muted:#a9a09a;
  --accent:#f3d6b8;
  --accent2:#bf8f64;
  --shadow:0 28px 90px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(1100px 600px at 10% -10%,rgba(163,112,74,.18),transparent 55%),
 radial-gradient(1000px 700px at 100% 30%,rgba(255,220,192,.08),transparent 60%),
 #0a0909;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh}
body.no-scroll{overflow:hidden}
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.ambient{position:fixed;border-radius:999px;filter:blur(80px);pointer-events:none;opacity:.18}
.ambient.a{width:380px;height:380px;left:-120px;top:160px;background:#a56b4a}
.ambient.b{width:360px;height:360px;right:-140px;bottom:120px;background:#7d5142}
.page{width:min(100%,720px);margin:0 auto;padding:18px 16px 28px}
.hero-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:32px;background:var(--panel);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:var(--shadow);animation:rise .7s cubic-bezier(.2,.75,.2,1) both}
.hero{position:relative;height:62svh;min-height:430px;max-height:680px;background:center 24%/cover no-repeat;transform:scale(1.015)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,8,8,.05) 0%,rgba(9,8,8,.08) 34%,rgba(9,8,8,.84) 100%)}
.topbar{position:absolute;left:20px;right:20px;top:18px;display:flex;justify-content:flex-end;align-items:center;gap:8px}
.eyebrow{letter-spacing:.18em;font-size:10px;color:#eee4dd;font-weight:800}
.live-dot{width:7px;height:7px;border-radius:50%;background:#d9a978;box-shadow:0 0 15px rgba(217,169,120,.8)}
.profile{position:relative;padding:0 28px 30px;text-align:center;margin-top:-84px}
.avatar-wrap{position:relative;display:inline-block}
.avatar{width:112px;height:112px;object-fit:cover;object-position:50% 30%;border-radius:50%;border:4px solid #0b0909;box-shadow:0 16px 40px rgba(0,0,0,.38);display:block;background:#1c1715}
.status{position:absolute;right:6px;bottom:7px;width:14px;height:14px;border-radius:50%;background:#e2b589;border:3px solid #0b0909}
h1{font-size:34px;line-height:1.04;letter-spacing:-.045em;margin:14px 0 5px;font-weight:790}
.handle{font-size:14px;color:#968b84}
.bio{max-width:430px;margin:12px auto 22px;color:#d7cdc6;font-size:15px;line-height:1.5}
.cta{width:100%;border:0;border-radius:18px;padding:17px 18px;background:linear-gradient(135deg,#f9eee4,#ead7c7);color:#191411;font-weight:820;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 36px rgba(234,213,195,.15);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;cursor:pointer}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(234,213,195,.22);filter:brightness(1.02)}
.cta:active{transform:translateY(0) scale(.995)}
.cta-arrow{font-size:19px}
.micro{margin:12px 0 0;color:#8b817b;font-size:11px}
.moments{margin-top:22px;animation:rise .8s .08s cubic-bezier(.2,.75,.2,1) both}
.section-head{display:flex;justify-content:space-between;align-items:end;padding:4px 4px 11px}
.section-head h2{margin:4px 0 0;font-size:25px;letter-spacing:-.035em}
.view-btn{border:1px solid var(--line);background:rgba(255,255,255,.035);color:#e8e0da;padding:9px 12px;border-radius:999px;font-weight:700;cursor:pointer}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.photo{appearance:none;border:0;padding:0;background:#151211;border-radius:20px;overflow:hidden;cursor:pointer;position:relative;min-height:260px}
.photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.photo:hover img{transform:scale(1.035);filter:saturate(1.03)}
.photo.p1{height:360px}.photo.p2{height:360px}.photo.p3{height:290px}.photo.p4{height:290px}.photo.p5{height:290px}
.photo:after{content:"";position:absolute;inset:auto 0 0;height:35%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));pointer-events:none}
.footer{display:flex;justify-content:center;gap:9px;padding:17px 0 4px;color:#736a65;font-size:12px}
.footer a{color:#9b918b;text-decoration:none}
.modal,.lightbox{position:fixed;inset:0;background:rgba(5,4,4,.78);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:100;display:grid;place-items:center;padding:18px}
.hidden{display:none!important}
.modal-card{width:min(100%,430px);background:#171311;border:1px solid var(--line);border-radius:24px;padding:25px;box-shadow:0 35px 120px rgba(0,0,0,.7)}
.modal-chip{display:inline-flex;padding:6px 10px;border-radius:999px;background:#271f1a;color:#f1d6bf;font-size:12px;font-weight:850}
.modal-card h2{margin:14px 0 8px;font-size:24px;letter-spacing:-.03em}
.modal-card p{margin:0;color:#bdb3ac;line-height:1.56;font-size:14px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.secondary{border:1px solid var(--line);border-radius:15px;background:transparent;color:#f5efe9;padding:15px;font-weight:750;cursor:pointer}
.compact{padding:15px}
.lightbox{padding:30px}
.lightbox img{max-width:min(92vw,1050px);max-height:86vh;width:auto;height:auto;border-radius:18px;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.close{position:fixed;right:18px;top:14px;border:0;background:rgba(255,255,255,.10);color:#fff;width:42px;height:42px;border-radius:50%;font-size:28px;line-height:1;cursor:pointer}
.counter{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);color:#d7cec7;font-size:12px;background:rgba(0,0,0,.35);padding:7px 10px;border-radius:999px}
.nav{position:fixed;top:50%;transform:translateY(-50%);border:1px solid var(--line);background:rgba(255,255,255,.08);color:#fff;width:46px;height:46px;border-radius:50%;font-size:32px;cursor:pointer}
.nav.prev{left:16px}.nav.next{right:16px}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:700px){
  .page{padding-top:36px}
  .hero-card{border-radius:36px}
  .hero{height:640px}
  .profile{margin-top:-96px;padding-left:54px;padding-right:54px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .photo.p1,.photo.p2{height:360px}
  .photo.p3,.photo.p4,.photo.p5{height:270px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}
