/* ============ Prasad Bambarkar — The Desk ============ */
:root{
  --desk:#25170F;
  /* shadows lit from a lamp above: a tight contact shadow plus a soft warm one */
  --shadow:0 1px 1px rgba(10,5,2,.3),0 6px 12px -4px rgba(10,5,2,.35),0 26px 40px -14px rgba(10,5,2,.6);
  --shadow-lift:0 2px 3px rgba(10,5,2,.25),0 50px 60px -22px rgba(10,5,2,.7);
  --on-wood:#F3E6D4;
  --on-wood-mut:rgba(243,230,212,.62);
  --ink:#2C2A33;
  --mut:#7c7889;
  --butter:#FFF6D9;
  --peach:#F6D3C6;
  --peach-2:#F2C7B8;
  --peach-3:#EDB9A8;
  --sky:#CFE0F2;
  --mint:#D9ECDD;
  --rose:#C98E99;
  --paper:#FFFDF8;
  --serif:'Young Serif',Georgia,serif;
  --sans:Figtree,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.3,1.3,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--desk);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
/* the wooden desk (dark wenge veneer, tiled at half size so the fine grain stays crisp),
   a soft desk-lamp glow near the top, and gently darker edges */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 60% 45% at 50% 18%,rgba(255,222,180,.075),transparent 75%),radial-gradient(ellipse 120% 100% at 50% 40%,transparent 55%,rgba(8,4,2,.42) 100%),var(--wood-bg,url(assets/wood.jpg) 0 0/800px repeat)}
img,video{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}
em{font-style:italic}
::selection{background:var(--butter)}

/* nav */
.nav{display:flex;justify-content:space-between;align-items:center;padding:24px 34px;position:relative;z-index:50;gap:20px;color:var(--on-wood)}
.logo{font-family:var(--serif);font-size:20px;text-decoration:none}
.nav nav{display:flex;gap:6px}
.nav nav a{text-decoration:none;font-size:14px;padding:7px 12px;border-radius:99px;transition:background .3s}
.nav nav a:hover{background:rgba(255,255,255,.12)}
.hint{font-family:var(--mono);font-size:11px;color:var(--on-wood-mut);display:flex;gap:14px;align-items:center}
.tidy{border:1px solid rgba(243,230,212,.3);background:rgba(255,255,255,.08);color:var(--on-wood);border-radius:99px;padding:6px 12px;cursor:pointer;font-family:var(--mono);font-size:11px;transition:background .3s}
.tidy:hover{background:rgba(255,255,255,.18)}

/* stage + scaled desk canvas */
.stage{position:relative;z-index:1;width:100%}
.desk{position:absolute;left:50%;top:0;width:1280px;height:1660px;transform-origin:top center}

/* desk objects */
.obj{position:absolute;transform:rotate(var(--r,0deg));box-shadow:var(--shadow);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;
  transition:transform .4s var(--ease),box-shadow .4s,opacity .7s var(--ease),left .8s var(--ease),top .8s var(--ease)}
.obj.pre{opacity:0;transform:translateY(-40px) rotate(calc(var(--r,0deg) + 8deg))}
.obj.drag{transition:transform .25s,box-shadow .25s;transform:rotate(calc(var(--r,0deg) * .3)) scale(1.035);box-shadow:var(--shadow-lift);cursor:grabbing}
.obj img{pointer-events:none;-webkit-user-drag:none}
.obj.ping{animation:ping 1.3s var(--ease)}
@keyframes ping{0%,100%{box-shadow:var(--shadow)}35%{box-shadow:0 0 0 8px rgba(255,236,200,.55),var(--shadow)}}
.bare{box-shadow:none}
.bare.drag{box-shadow:none}
.lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}

/* headline card */
.o-title{width:600px;background:var(--butter);padding:44px 46px 42px;border-radius:6px}
.o-title h1{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.03;letter-spacing:-.01em;margin-top:14px}

/* polaroid */
.o-photo{width:250px;background:#fff;padding:12px 12px 46px}
.o-photo img{aspect-ratio:4/5;object-fit:cover;width:100%}
.o-photo span{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:11px;color:var(--mut)}

/* about letter */
.o-letter{width:380px;background:var(--paper);padding:34px 34px 30px;background-image:repeating-linear-gradient(transparent 0 25px,rgba(120,140,190,.14) 25px 26px);background-position:0 30px}
.o-letter p{font-size:14.2px;line-height:26px}
.o-letter p+p{margin-top:13px}
.o-letter p:first-child{font-family:var(--serif);font-size:22px}

/* tweet stack */
.o-stack{width:320px}
.o-stack .head{position:absolute;top:-36px;left:0;white-space:nowrap}
.o-stack h2{display:inline;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--on-wood)}
.o-stack .head small{font-family:var(--mono);font-size:10.5px;color:var(--on-wood-mut);margin-left:8px}
.cards{position:relative;width:320px;height:420px}
/* a white mat around each tweet, with a thin inner border, so the whole post is always visible */
.card{position:absolute;inset:0;border-radius:10px;background:#FDFCFA;padding:18px;box-shadow:0 1px 1px rgba(10,5,2,.25),0 10px 18px -8px rgba(10,5,2,.5);transition:transform .6s var(--spring)}
.card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(60,40,20,.12);border-radius:6px;pointer-events:none}
.card img{width:100%;height:100%;object-fit:contain;object-position:center}
.stack-ctl{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:22px}
.chip{border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.75);border-radius:99px;padding:7px 13px;cursor:pointer;font-family:var(--mono);font-size:11px;transition:background .3s,transform .3s}
.chip:hover{background:#fff;transform:translateY(-1px)}
.count{font-family:var(--mono);font-size:11px;color:var(--on-wood-mut);min-width:44px;text-align:center}

/* timeline receipt */
.o-receipt{width:300px;background:#fff;padding:28px 24px 38px;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px))}
.o-receipt h2{font-family:var(--serif);font-weight:400;font-size:27px;text-align:center}
.o-receipt .c{text-align:center;color:var(--mut);margin:6px 0 14px}
.o-receipt hr{border:0;border-top:1px dashed #bbb;margin:14px 0}
.o-receipt .ln{display:flex;justify-content:space-between;font-weight:500;font-size:12.5px}
.o-receipt h3{font-family:var(--sans);font-weight:600;font-size:13px;margin:4px 0 6px}
.o-receipt p{color:#4d4a55;font-family:var(--sans);font-size:12.5px;line-height:1.6}
.o-receipt .t{color:var(--mut);margin-top:8px;font-size:10.5px}
.o-receipt .end{text-align:center;color:var(--mut);letter-spacing:.3em}

/* envelope */
.o-env{width:380px;height:262px}
.env{position:absolute;inset:0;background:var(--peach);border-radius:6px;box-shadow:var(--shadow)}
.env-card{position:absolute;left:16px;right:16px;top:14px;bottom:14px;background:var(--paper);border-radius:4px;padding:20px 22px;z-index:1;box-shadow:0 10px 24px -14px rgba(40,30,70,.4);
  transition:transform .8s var(--spring) .15s,z-index 0s .15s}
.o-env.open .env-card{transform:translateY(-52%) rotate(-1deg);z-index:5;transition:transform .8s var(--spring) .15s,z-index 0s .55s}
.env-card h2{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;margin:8px 0}
.env-card p{font-size:12.5px;color:var(--mut);margin-bottom:12px;line-height:1.45}
.env-front{position:absolute;inset:0;z-index:2;border-radius:6px;background:var(--peach-2);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);pointer-events:none}
.env-flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:3;background:var(--peach-3);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .6s cubic-bezier(.4,0,.2,1),z-index 0s .3s;border-radius:6px 6px 0 0}
.o-env.open .env-flap{transform:rotateX(180deg);z-index:0;transition:transform .6s cubic-bezier(.4,0,.2,1),z-index 0s .25s}
.env-seal{position:absolute;left:50%;top:52%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--rose);z-index:4;display:grid;place-items:center;color:#fff;font-family:var(--serif);font-size:15px;transition:opacity .3s,transform .4s}
.o-env:not(.open):hover .env-seal{transform:scale(1.1)}
.o-env.open .env-seal{opacity:0}
.env-tip{position:absolute;bottom:-28px;left:0;font-family:var(--mono);font-size:10.5px;color:var(--on-wood-mut);white-space:nowrap}
.env-card form{display:flex;gap:6px}
.env-card input{flex:1;border:1px solid #e5ddd6;border-radius:8px;padding:9px 10px;font-size:13px;outline:0;min-width:0;background:#fff;transition:border-color .3s}
.env-card input:focus{border-color:var(--rose)}
.env-card button{border:0;background:var(--ink);color:#fff;border-radius:8px;padding:9px 12px;font-size:12px;cursor:pointer;white-space:nowrap;transition:background .3s}
.env-card button:hover{background:#4a4655}
.ok{font-size:12px;color:#5b8a62;margin-top:6px;min-height:14px}

/* video playlist card */
.o-playlist{width:300px;background:#fff;padding:20px 18px 16px;border-radius:4px}
.o-playlist h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1}
.o-playlist>p{font-size:12px;color:var(--mut);line-height:1.5;margin:8px 0 12px}
.o-playlist ol{list-style:none;border-top:1px dashed #ccc}
.o-playlist li{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px dashed #ccc;cursor:pointer;border-radius:4px;transition:background .25s}
.o-playlist li:hover{background:#f6f3fa}
.o-playlist li.on{background:var(--sky)}
.o-playlist li i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--mut);padding-top:2px;min-width:16px}
.o-playlist li b{display:block;font-weight:500;font-size:12px;line-height:1.3}
.o-playlist li small{font-family:var(--mono);font-size:10px;color:var(--mut)}

/* video frame (4:3 landscape, the shape of the reels) */
.o-phone{width:450px;background:var(--sky);border-radius:16px;padding:10px}
.scr{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#1d1a17;position:relative}
.scr video{width:100%;height:100%;object-fit:contain}
.scr .cap{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;font-size:12.5px;line-height:1.3;text-shadow:0 1px 8px rgba(0,0,0,.55);pointer-events:none}
.scr .cap small{display:block;opacity:.85;font-size:11px;margin-top:2px}
.scr .snd{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:13px;cursor:pointer;backdrop-filter:blur(4px)}
.scr .prog{position:absolute;left:0;bottom:0;height:3px;background:rgba(255,255,255,.85);width:0}
.ph-ctl{display:flex;justify-content:space-between;align-items:center;padding:10px 6px 2px}
.ph-ctl button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.7);cursor:pointer;font-size:14px;transition:background .3s}
.ph-ctl button:hover{background:#fff}
.dots{display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.2);cursor:pointer;transition:background .3s,transform .3s}
.dots i.on{background:var(--ink);transform:scale(1.2)}

/* business card */
.o-biz{width:310px;background:var(--mint);padding:22px 24px;border-radius:6px}
.o-biz b{font-family:var(--serif);font-weight:400;font-size:19px;display:block}
.o-biz .links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:13px}
.o-biz .links a{text-decoration:none;border-bottom:1px solid currentColor;transition:opacity .3s}
.o-biz .links a:hover{opacity:.6}
.o-biz small{display:block;margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--mut)}

/* decor */
.pencil{width:180px;height:14px;background:linear-gradient(90deg,#F2E3A6 0 80%,#E9C9A8 80% 92%,#555 92%);clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%);border-radius:3px 0 0 3px}
.clip{width:22px;height:60px;border:3px solid #B9C8DE;border-radius:12px}
.cup{width:118px;height:118px;border-radius:50%;background:#FBF8F3;display:grid;place-items:center;box-shadow:var(--shadow)}
.cup::before{content:"";width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#E6CDB4,#C9A27F 70%);box-shadow:inset 0 0 0 6px #fff,inset 0 0 0 7px #eee}
.cup::after{content:"";position:absolute;right:-20px;top:44px;width:26px;height:30px;border:7px solid #fff;border-left:0;border-radius:0 16px 16px 0}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(28,16,8,.9);backdrop-filter:blur(8px);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;pointer-events:none;transition:opacity .35s;padding:24px}
.lightbox.on{opacity:1;pointer-events:auto}
.lightbox img{max-height:80vh;max-width:min(560px,92vw);border-radius:14px;box-shadow:0 30px 70px -30px rgba(40,30,70,.5);transform:scale(.96) rotate(-1deg);transition:transform .5s var(--spring)}
.lightbox.on img{transform:none}
.lb-close{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;font-size:22px;cursor:pointer}
.lb-link{font-family:var(--mono);font-size:12px;text-decoration:none;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px}
.lb-link[hidden]{display:none}

/* ---------- small screens: the desk becomes a tidy pile ---------- */
@media (max-width:860px){
  .nav{padding:20px}
  .hint span,.nav nav{display:none}
  .desk{position:relative;left:auto;width:auto;height:auto!important;transform:none!important;display:flex;flex-direction:column;align-items:center;gap:52px;padding:20px 16px 90px}
  .obj{position:relative!important;left:auto!important;top:auto!important;max-width:100%;cursor:default;touch-action:auto}
  .o-title{width:100%;padding:30px 26px;order:1}
  .o-title h1{font-size:clamp(34px,10vw,48px)}
  .o-photo{order:2}
  .o-letter{order:3;width:100%}
  .o-stack{order:4;margin-top:30px}
  .o-receipt{order:5}
  .o-env{order:6;width:100%;max-width:380px;margin-top:170px}
  .o-playlist{order:7;width:100%;max-width:340px}
  .o-phone{order:8;width:100%;max-width:450px}
  .o-biz{order:9}
  .pencil,.clip,.cup{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}