/* ── Satoshi ─────────────────────────────────────────────── */
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Variable.woff2') format('woff2'),url('fonts/Satoshi-Variable.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap;}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
img,video{display:block;max-width:100%;}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;}
::selection{background:rgba(196,201,181,.4);}

:root{
  --font:'Satoshi','Inter',system-ui,sans-serif;
  --screen-bg:#13140F;                /* Ink — NEVER pure black */
  --stext:#FAF7F1; --smut:rgba(250,247,241,.5); --sfaint:rgba(250,247,241,.32); --sline:rgba(250,247,241,.12);
  --page-bg:#E6E3D8; --accent:#C4C9B5;
}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;background:radial-gradient(120% 90% at 50% 6%,rgba(255,255,255,.45),transparent 55%),var(--page-bg);transition:background .55s ease;}

/* ── Icons (mask = recolorable) ──────────────────────────── */
.ic{display:inline-block;width:18px;height:18px;background:currentColor;-webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain;}
.ic--feed{--m:url(public/icons/UI_Feed_Icon.svg)} .ic--reels{--m:url(public/icons/UI_Reels_Icon.svg)}
.ic--repost{--m:url(public/icons/UI_Repost_Icon.svg)} .ic--tagged{--m:url(public/icons/UI_Tagged_Icon.svg)}
.ic--carousel{--m:url(public/icons/Feed_Carousel_Icon.svg)} .ic--reel{--m:url(public/icons/Feed_Reel_Icon.svg)} .ic--pin{--m:url(public/icons/Feed_Pin_Icon.svg)}
.ic--like{--m:url(public/icons/Post_Like_Icon.svg)} .ic--comment{--m:url(public/icons/Post_Comment_Icon.svg)}
.ic--share{--m:url(public/icons/Post_Share_Icon.svg)} .ic--save{--m:url(public/icons/Post_Save_Icon.svg)} .ic--options{--m:url(public/icons/Post_Options_Icon.svg)}
.ic--back{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.ic--fwd{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.ic--soundoff{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4z'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E")}
.ic--soundon{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 010 13'/%3E%3C/svg%3E")}

/* ── Grain ───────────────────────────────────────────────── */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");}

/* ═══ STAGE / PHONE ════════════════════════════════════════ */
.stage{height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;}
.phone-scene{position:relative;display:flex;align-items:center;justify-content:center;transform-origin:center center;will-change:transform;}
.phone-ambient{position:absolute;width:540px;height:540px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 55%,transparent) 0%,transparent 62%);
  filter:blur(44px);opacity:.5;pointer-events:none;transition:background .55s ease;}
.phone-wrapper{position:relative;transform-style:preserve-3d;will-change:transform;}

/* EXACT phone frame = the user's border PNG (1766×3556, ratio 0.4966).
   Screen content sits in the transparent inner window; the PNG (border+notch
   +TYMELINE wordmark+sheen) overlays on top. */
.phone-frame{position:relative;width:330px;height:664px;   /* 330 / 0.4966 */
  filter:drop-shadow(0 48px 80px rgba(0,0,0,.4)) drop-shadow(0 18px 34px rgba(0,0,0,.26));}
.phone-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;}

/* inner window measured from PNG: left5.66% top3.21% w88.79% h93.45% (tucked slightly under border) */
.phone-screen{position:absolute;left:5.1%;top:2.7%;width:89.8%;height:94.4%;
  border-radius:32px;background:var(--screen-bg);overflow:hidden;padding-top:30px;color:var(--stext);transform:translateZ(0);}
.screen-views{position:relative;width:100%;height:100%;overflow:hidden;transition:opacity .26s ease;}
.screen-views.switching{opacity:0;}

.view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--screen-bg);}
.view--profile{transition:transform .4s cubic-bezier(.4,0,.2,1);}
.view--profile.is-behind{transform:scale(.94);}
.view--profile::after{content:'';position:absolute;inset:0;background:#000;opacity:0;transition:opacity .4s;pointer-events:none;}
.view--profile.is-behind::after{opacity:.45;}
.view--post{transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:3;}
.view--post.is-open{transform:translateX(0);}

/* ═══ PROFILE ══════════════════════════════════════════════ */
.p-head{display:flex;align-items:center;gap:12px;padding:6px 16px 0;}
.p-avatar-ring{flex-shrink:0;width:58px;height:58px;border-radius:50%;padding:2px;background:var(--accent);}
.p-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--screen-bg);background:#0F100B;}
.p-id{min-width:0;}
.p-name{font-size:17px;font-weight:600;letter-spacing:.01em;display:block;line-height:1.1;}
.p-sphere{font-size:10px;color:var(--smut);margin-top:2px;display:block;}
.p-bio{padding:9px 16px 0;}
.p-tagline{font-size:11px;font-weight:700;line-height:1.3;}
.p-services{font-size:10px;color:rgba(250,247,241,.7);margin-top:3px;}
.p-cta{font-size:10px;font-weight:600;margin-top:3px;}
.p-cta::after{content:' ▾';font-size:8px;opacity:.8;}

/* Stories — exactly 5, centered, fully visible (never cut) */
.stories{display:flex;justify-content:center;gap:7px;padding:18px 14px 4px;}
.story{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex:0 0 auto;width:46px;}
.story-ring{width:46px;height:46px;border-radius:50%;padding:1.5px;
  background:repeating-conic-gradient(var(--accent) 0deg 5deg, color-mix(in srgb,var(--accent) 35%, transparent) 5deg 10deg);
  transition:transform .15s;}
.story:active .story-ring{transform:scale(.93);}
.story:hover .story-ring{transform:scale(1.05);}
.story-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--screen-bg);background:rgba(250,247,241,.06);}
.story-mono{width:100%;height:100%;border-radius:50%;border:2px solid var(--screen-bg);display:flex;align-items:center;justify-content:center;background:#1A1C13;color:var(--stext);font-size:17px;font-weight:700;}
.story-label{font-size:8px;color:var(--smut);max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Feed tabs */
.feedbar{display:flex;margin-top:10px;border-top:1px solid var(--sline);border-bottom:1px solid var(--sline);}
.ftab{flex:1;height:36px;display:flex;align-items:center;justify-content:center;color:var(--sfaint);border-bottom:1.5px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;}
.ftab .ic{width:19px;height:19px;}
.ftab--active{color:var(--stext);border-bottom-color:var(--stext);}
.ftab:hover:not(.ftab--active){color:var(--smut);}

/* Grid + marry */
.grid-wrap{flex:1;position:relative;overflow:hidden;}
.grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1.5px;background:rgba(250,247,241,.07);}
.cell{position:relative;overflow:hidden;cursor:pointer;background:var(--screen-bg);}
.cell img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.cell:hover img{transform:scale(1.045);}
.cell:active img{transform:scale(.99);}
.cell-ic{position:absolute;top:5px;right:5px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));pointer-events:none;}
.cell-ic .ic{width:15px;height:15px;}
.grid-marry{position:absolute;inset:0;background:var(--accent);opacity:.08;mix-blend-mode:soft-light;pointer-events:none;}

/* ═══ POST (single header) ═════════════════════════════════ */
.post-head{flex-shrink:0;height:48px;display:flex;align-items:center;gap:9px;padding:0 8px 0 6px;border-bottom:1px solid var(--sline);}
.post-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--stext);border-radius:50%;transition:background .15s;flex-shrink:0;}
.post-back:hover{background:rgba(250,247,241,.08);}
.post-back .ic{width:20px;height:20px;}
.post-head-ring{width:32px;height:32px;border-radius:50%;padding:1.5px;flex-shrink:0;background:conic-gradient(from 220deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#fff),var(--accent));}
.post-head-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#0F100B;border:1.5px solid var(--screen-bg);}
.post-head-id{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0;}
.post-head-name{font-size:13px;font-weight:700;}
.post-head-loc{font-size:10px;color:var(--smut);}
.post-head-more{color:var(--stext);padding:6px;flex-shrink:0;}
.post-head-more .ic{width:18px;height:18px;}

.post-body{flex:1;position:relative;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;flex-direction:column;}
.post-body::-webkit-scrollbar{display:none;}

/* media: ALWAYS full width, letterbox = screen bg (never black) */
.post-media{position:relative;width:100%;background:var(--screen-bg);overflow:hidden;aspect-ratio:4/5;flex-shrink:0;touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.post-track{display:flex;height:100%;transition:transform .32s cubic-bezier(.4,0,.2,1);}
.post-track>img,.post-track>video{width:100%;height:100%;flex-shrink:0;object-fit:contain;object-position:top center;background:var(--screen-bg);}
/* carousels sit centered (not top) */
.view--post.is-carousel .post-track>img,.view--post.is-carousel .post-track>video{object-position:center;}
.post-counter{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:11px;}
.post-arrow{position:absolute;top:50%;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.3);border-radius:50%;transition:background .15s;}
.post-arrow .ic{width:14px;height:14px;}
.post-arrow:hover{background:rgba(0,0,0,.55);}
.post-arrow--prev{left:8px;} .post-arrow--next{right:8px;} .post-arrow.hidden{display:none;}
.post-mute{position:absolute;bottom:10px;right:10px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:13px;display:none;align-items:center;justify-content:center;}
.post-mute.show{display:flex;}

.post-foot{display:flex;flex-direction:column;}
.post-actions{display:flex;align-items:center;gap:15px;padding:10px 12px 6px;}
.post-actions-left{display:flex;gap:15px;}
.pa-btn{color:var(--stext);display:flex;}
.pa-btn .ic{width:23px;height:23px;}
.pa-btn:hover{opacity:.65;}
#paLike.liked{color:#ed4956;}
.pa-mute{display:none;}
.view--post.is-reel .pa-save{display:none;}
.view--post.is-reel .pa-mute{display:inline-flex;}
.pa-dots{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;}
.pa-dot{width:5px;height:5px;border-radius:50%;background:rgba(250,247,241,.25);}
.pa-dot--active{background:var(--accent);}
.post-likes{padding:2px 12px;font-size:12px;font-weight:700;}
.post-collab{padding:4px 12px 0;font-size:12px;}
.post-collab .lk{font-weight:700;cursor:pointer;}
.post-collab .lk:hover{text-decoration:underline;}
.post-collab .lk--static{cursor:default;}
.post-collab .lk--static:hover{text-decoration:none;}
.post-collab .amp{color:var(--smut);margin:0 3px;}
.post-caption{padding:3px 12px 0;font-size:12px;line-height:1.45;color:rgba(250,247,241,.9);}
.post-cmtlink{padding:6px 12px 0;font-size:11px;color:var(--smut);}
.post-time{padding:10px 12px 22px;font-size:9px;letter-spacing:.08em;color:var(--sfaint);text-transform:uppercase;}

/* REEL: media fills, UI overlaid on top of video, constant width */
.view--post.is-reel .post-body{overflow:hidden;}
.view--post.is-reel .post-media{flex:1;aspect-ratio:auto;height:auto;}
.view--post.is-reel .post-foot{position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding-top:30px;padding-bottom:14px;background:linear-gradient(transparent,rgba(0,0,0,.55) 55%,rgba(0,0,0,.72));}
.view--post.is-reel .post-cmtlink,.view--post.is-reel .post-time{display:none;}
.view--post.is-reel .post-caption{max-height:46px;overflow-y:auto;scrollbar-width:none;}

/* ═══ SIDE RAIL — elegant vertical scene switcher ══════════ */
.siderail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:120;
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 9px;border-radius:34px;
  background:color-mix(in srgb,var(--accent) 22%, rgba(255,255,255,.05));
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--accent) 45%, transparent);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background .55s ease,border-color .55s ease;}
.srail-item{position:relative;width:30px;height:30px;border-radius:50%;cursor:pointer;opacity:.5;transition:opacity .2s,transform .2s,box-shadow .3s;}
.srail-item img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#0F100B;display:block;}
.srail-item:hover{opacity:1;transform:scale(1.08);}
.srail-item.active{opacity:1;box-shadow:0 0 0 2px var(--page-bg),0 0 0 3.5px var(--accent);}
.srail-item::after{content:attr(data-label);position:absolute;left:42px;top:50%;transform:translateY(-50%) translateX(-5px);
  white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--stext);
  background:color-mix(in srgb,var(--accent) 26%, rgba(19,20,15,.72));backdrop-filter:blur(10px);
  padding:5px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
.srail-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0);}
.srail-sep{width:15px;height:1px;background:color-mix(in srgb,var(--accent) 55%,transparent);margin:1px 0;}
.srail-dev{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--stext);opacity:.5;font-size:19px;font-weight:300;text-decoration:none;transition:opacity .2s;}
.srail-dev:hover{opacity:1;}

/* ═══ MOBILE: top menu, bigger phone, bigger tap targets ═══ */
@media (max-width:640px){
  .stage{padding-top:64px;}
  .siderail{left:50%;top:10px;transform:translateX(-50%);flex-direction:row;gap:14px;padding:8px 14px;border-radius:26px;}
  .srail-item{width:36px;height:36px;}
  .srail-item::after{display:none;}
  .srail-sep,.srail-dev{display:none;}
  .post-head{height:54px;}
  .post-back{width:42px;height:42px;} .post-back .ic{width:24px;height:24px;}
  .post-head-more{padding:10px;} .post-head-more .ic{width:22px;height:22px;}
  .post-actions{gap:20px;padding:12px 14px 6px;} .post-actions-left{gap:20px;}
  .pa-btn .ic{width:28px;height:28px;}
  .post-arrow{width:38px;height:38px;} .post-arrow .ic{width:17px;height:17px;}
  .post-counter{font-size:12px;padding:4px 10px;}
  .ftab{height:46px;} .ftab .ic{width:23px;height:23px;}
  .pa-dot{width:6px;height:6px;}
  .post-caption,.post-collab{font-size:13px;}
}