*{box-sizing:border-box}html,body{margin:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e293b;background:#f8f9fa;-webkit-font-smoothing:antialiased}
a{color:inherit}
.snav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:rgba(248,249,250,.92);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}
.snav .home{font-weight:700;text-decoration:none;font-size:15px}
.snav .links{display:flex;gap:12px;flex-wrap:wrap;font-size:14px}
.snav .links a{text-decoration:none;color:#64748b}
.snav .links a[aria-current=page]{color:#1e293b;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.snav.dark{position:fixed;left:0;right:0;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));border:0;color:#fff}
.snav.dark .links a{color:rgba(255,255,255,.75)}.snav.dark .links a[aria-current=page]{color:#fff}
.ph-badge{position:absolute;top:8px;left:8px;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.9);color:#1e293b;border:1px dashed #64748b;padding:4px 6px;border-radius:4px;pointer-events:none}
.b-top .ph-badge,.w-card .ph-badge{position:static;margin-left:auto}
.vis{position:relative;background-size:cover;background-position:center;overflow:hidden}
.vis img,.vis video{width:100%;height:100%;object-fit:cover;display:block}
#app{min-height:60vh}
/* Grid */
.grid-page{max-width:935px;margin:0 auto;padding:20px 0 40px}
.g-head{display:flex;gap:20px;align-items:center;padding:0 16px}
.g-head .avatar{width:86px;height:86px;flex:none;border-radius:50%;border:1px solid #e5e7eb}
.g-head .avatar .ph-badge{top:auto;bottom:-2px;left:50%;transform:translateX(-50%)}
.g-who h1{font-size:20px;margin:0 0 6px;font-weight:600}.g-who p{margin:2px 0;font-size:14px;color:#334155}
.g-highlights{list-style:none;display:flex;gap:16px;overflow-x:auto;padding:22px 16px 18px;margin:0;border-bottom:1px solid #e5e7eb;scrollbar-width:none}
.g-highlights a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-size:12px}
.g-highlights .ring{width:66px;height:66px;border-radius:50%;padding:3px;border:1.5px solid #cbd5e1;display:block;background:#fff}
.g-highlights .dot{display:block;width:100%;height:100%;border-radius:50%}
.g-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:3px}
.g-tiles .sq{aspect-ratio:1/1}
/* Reels */
body[data-page=reels]{background:#000;color:#fff}
.reels-page{height:100svh;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none}
.reels-page::-webkit-scrollbar{display:none}
.reel{position:relative;height:100svh;scroll-snap-align:start;scroll-snap-stop:always;max-width:480px;margin:0 auto}
.reel .full{position:absolute;inset:0}
.reel .full .ph-badge{top:58px;left:12px}
.reel .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 16px 28px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.65))}
.reel .cap strong{font-size:15px}.reel .cap p{margin:6px 0 0;font-size:15px;line-height:1.4;max-width:34ch}
/* Work */
body[data-page=work]{background:#f1f5f9}
.work-page{max-width:720px;margin:0 auto;padding:14px 10px 40px;display:flex;flex-direction:column;gap:10px}
.w-card,.w-sec{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.w-card{position:relative;padding-bottom:16px}
.w-banner{height:90px}
.w-avatar{width:96px;height:96px;border-radius:50%;border:4px solid #fff;margin:-48px 0 0 16px}
.w-avatar .ph-badge{top:auto;bottom:4px;left:50%;transform:translateX(-50%)}
.w-card h1{font-size:22px;margin:8px 16px 4px}
.w-headline{margin:0 16px;font-size:15px;line-height:1.4}
.w-loc{margin:6px 16px 0;font-size:13px;color:#64748b}
.w-sec{padding:14px 16px}.w-sec h2{font-size:18px;margin:0 0 10px}.w-sec>p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#334155}
.w-row{display:flex;gap:12px;padding:10px 0;border-top:1px solid #f1f5f9}.w-row:first-of-type{border-top:0}
.w-ic{width:44px;height:44px;flex:none;border-radius:6px}
.w-row h3{font-size:15px;margin:0}.w-row p{margin:3px 0 0;font-size:13px;line-height:1.45;color:#334155}.w-org{color:#1e293b!important}.w-when{color:#64748b!important}
/* Film */
body[data-page=film]{background:#fff}
.film-page{max-width:1100px;margin:0 auto;padding:36px 22px 60px}
.f-title{font-weight:300;font-size:15px;letter-spacing:.32em;text-align:center;margin:0 0 40px;color:#111}
.f-gallery{columns:1;column-gap:40px}
@media (min-width:640px){.f-gallery{columns:2}}@media (min-width:1000px){.f-gallery{columns:3}}
.f-gallery figure{break-inside:avoid;margin:0 0 48px}
.f-img{width:100%;aspect-ratio:4/5}
.f-gallery figcaption{font-size:11px;letter-spacing:.18em;text-transform:lowercase;color:#9ca3af;margin-top:10px}
/* Blog */
body[data-page=blog]{background:#e7e5e4}
.blog-page{max-width:560px;margin:0 auto;padding:16px 10px 50px;display:flex;flex-direction:column;gap:16px;font-family:Georgia,"Times New Roman",serif}
.b-head{text-align:center;padding:18px 0 4px}.b-head h1{margin:0;font-size:28px}.b-head p{margin:6px 0 0;color:#57534e;font-style:italic}
.b-post{background:#fff;border-radius:6px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.b-top{display:flex;align-items:center;gap:8px;font:14px/1 ui-sans-serif,system-ui,sans-serif;margin-bottom:10px}
.b-av{width:28px;height:28px;border-radius:4px;background:linear-gradient(135deg,#d6d3d1,#78716c)}
.b-rb{color:#78716c;font-size:12px}
.b-post h2{font-size:22px;margin:4px 0 8px}
.b-post p{font-size:16px;line-height:1.6;margin:0 0 10px}
.b-quote blockquote{font-size:24px;line-height:1.35;margin:6px 0 8px}
.b-src{color:#57534e;font-style:italic}
.b-photo{margin:0 -16px 10px;aspect-ratio:4/3}
.b-cap{color:#44403c}
.b-chain{border-top:1px solid #e7e5e4;padding:10px 0 0 12px;margin-top:6px;border-left:3px solid #d6d3d1;font-family:ui-sans-serif,system-ui,sans-serif}
.b-chain strong{font-size:13px}.b-chain p{font-size:15px;margin:4px 0 6px}
.b-tags{color:#78716c;font-size:13px!important;font-family:ui-sans-serif,system-ui,sans-serif}
.avatar .ph-badge,.w-avatar .ph-badge{position:absolute!important;margin:0!important;top:50%!important;bottom:auto!important;left:50%!important;transform:translate(-50%,-50%)!important;font-size:8px;padding:3px 4px}