/* ===== Mohit Chopra portfolio — homepage styles ===== */
:root{
  --blue:#0178D4;
  --blue-deep:#0063b0;
  --salmon:#FFF0EE;
  --ink:#111;
  --paper:#fff;
  --line:#e2e2e2;
  --display:"Archivo", system-ui, sans-serif;
  --body:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --serif:"Newsreader", Georgia, serif;
  /* tweakable */
  --ld-msg-width:100%;
  --panel-justify:space-evenly;
  --cat-scale:1;
  --nav-h:54px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;}
.poem,.about-right p,.caption-box{max-width:100%;}

/* ============ LOADER ============ */
#loader{height:300vh;position:relative;background:var(--blue);}
.loader-sticky{position:sticky;top:0;height:100vh;overflow:hidden;color:#fff;display:flex;align-items:center;}
.loader-inner{max-width:1180px;margin:-8vh auto 0;padding:0 6vw;width:100%;}
.face{margin-bottom:30px;}
.face svg{width:clamp(110px,13vw,180px);height:auto;overflow:visible;display:block;}
.ld-msg{font-family:"Segoe UI",var(--body);font-weight:400;font-size:clamp(26px,3.3vw,52px);line-height:1.4;width:var(--ld-msg-width);max-width:100%;letter-spacing:-.01em;position:relative;cursor:default;}
.ld-msg b{font-weight:700;}
.ld-msg span{transition:opacity .45s ease;}
.ld-msg:hover span{opacity:.14;}
.ld-msg:hover span.keep{opacity:1;}
.ld-pct{font-family:"Segoe UI",var(--body);font-weight:400;font-size:clamp(28px,3.6vw,48px);margin:34px 0 0;}
.ld-foot{margin-top:42px;font-family:var(--mono);font-size:clamp(11px,.9vw,13px);line-height:2.1;color:#dcebff;letter-spacing:.02em;width:100%;max-width:100%;padding-right:clamp(0px,22vw,320px);display:flex;flex-direction:column;gap:4px;}
.ld-foot > div{display:block;width:100%;}
.ld-foot .hl{color:#fff;}
.ld-action{color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer;letter-spacing:.04em;}
.ld-action:hover{background:#fff;color:var(--blue);text-decoration:none;}

/* ============ IN_A_HURRY.TXT dialog ============ */
.hurry-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,20,60,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
.hurry-overlay[hidden]{display:none;}
.hurry-win{width:min(540px,100%);background:#fff;border:2px solid var(--blue);box-shadow:8px 8px 0 rgba(0,0,0,.35);animation:hurry-pop .22s cubic-bezier(.16,1,.3,1) both;}
@keyframes hurry-pop{0%{transform:scale(.94) translateY(8px);opacity:0;}100%{transform:none;opacity:1;}}
.hurry-titlebar{display:flex;align-items:center;justify-content:space-between;background:var(--blue);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:8px 12px;}
.hurry-x{border:1px solid #fff;background:transparent;color:#fff;width:22px;height:22px;line-height:1;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hurry-x:hover{background:#fff;color:var(--blue);}
.hurry-body{padding:20px 22px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:var(--ink);}
.hurry-body p{margin:0 0 12px;}
.hurry-body a{color:var(--blue);border-bottom:1.5px solid var(--blue);padding-bottom:1px;}
.hurry-body a:hover{background:var(--blue);color:#fff;}
.hurry-label{font-size:10px;letter-spacing:.22em;color:#8a8a8a;margin-bottom:4px !important;}
.hurry-fineprint{font-size:10.5px;font-style:italic;color:#9a9a9a;margin-bottom:0 !important;border-top:1px solid var(--line);padding-top:12px;}
@media (max-width:600px){.hurry-body{font-size:11.5px;padding:16px;}}

.popup{position:fixed;top:24px;right:24px;z-index:50;display:flex;align-items:flex-start;gap:10px;transform:translateY(-160%);transition:transform .6s cubic-bezier(.16,1,.3,1);}
.popup.show{transform:none;}
.popup .x{width:36px;height:36px;border:none;background:#fff;color:#222;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.popup .x:hover{background:#eee;}
.popup .box{background:#fff;color:#333;font-style:italic;font-size:14px;padding:9px 16px;box-shadow:0 10px 30px -12px rgba(0,0,0,.4);white-space:nowrap;}

.gif{position:fixed;right:0;bottom:0;z-index:40;width:clamp(170px,21vw,290px);opacity:0;transition:opacity .55s ease;}
.gif.show{opacity:1;}
.gif image-slot{width:100%;height:clamp(190px,23vw,300px);}
.scroll-cue{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:45;font-family:var(--mono);font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:#fff;animation:cue-materialize 1.6s cubic-bezier(.16,1,.3,1) 0.9s both,cue-drift 2.2s ease-in-out infinite 2.5s;}
@keyframes cue-materialize{0%{opacity:0;transform:translateX(-50%) translateY(22px);letter-spacing:.7em;filter:blur(5px);}100%{opacity:1;transform:translateX(-50%) translateY(0);letter-spacing:.3em;filter:blur(0);}}
@keyframes cue-drift{0%,100%{opacity:1;transform:translateX(-50%) translateY(0);}50%{opacity:.35;transform:translateX(-50%) translateY(10px);text-shadow:0 0 24px rgba(255,255,255,.9);}}

/* ============ SITE ============ */
#site{position:relative;z-index:10;background:var(--paper);min-height:100vh;}
.tabbar{position:sticky;top:0;z-index:30;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px clamp(18px,3.5vw,44px) 26px;}

/* nav marker — slides left↔right + rolling-wheel rotation driven by JS */
/* the rotating square is a button now: CH 00, back to the thesis */
.nav-marker{position:absolute;left:0;top:calc(50% - 6.5px);width:var(--nav-marker,12px);height:var(--nav-marker,12px);background:#cfcfcf;opacity:0;transform:translateY(-50%);transition:left .55s cubic-bezier(.16,1,.3,1),opacity .4s ease,background .45s ease;pointer-events:auto;cursor:pointer;z-index:2;}
.nav-marker:hover{background:var(--blue);animation:marker-glitch .5s steps(2,end) infinite;}
@keyframes marker-glitch{
  0%,100%{transform:translateY(-50%) rotate(0deg);box-shadow:none;}
  25%{transform:translateY(-58%) translateX(-2px) rotate(22deg);box-shadow:2px 0 rgba(255,50,50,.65),-2px 0 rgba(1,120,212,.65);}
  50%{transform:translateY(-44%) translateX(2px) rotate(-14deg);box-shadow:-2px 0 rgba(255,50,50,.5),2px 0 rgba(1,120,212,.5);}
  75%{transform:translateY(-52%) rotate(9deg);box-shadow:0 2px rgba(1,120,212,.5);}
}

/* channel sublabels under the nav pills — the nav is a channel guide for
   the same TV the projects play on */
.tab-sub{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#9a9a9a;pointer-events:none;white-space:nowrap;transition:color .25s ease,letter-spacing .3s ease;}
.tab:hover .tab-sub{color:var(--blue);letter-spacing:.3em;}
.tab.active .tab-sub{color:var(--blue);}
.tab.active .tab-sub::after{content:'▮';margin-left:4px;font-size:7px;animation:sub-blink 1.1s steps(2,start) infinite;}
@keyframes sub-blink{50%{opacity:0;}}
/* sliding between channels: blue + RGB-split trail + stepped tumble */
.nav-marker.moving{background:var(--blue);box-shadow:3px 0 rgba(255,50,50,.45),-3px 0 rgba(1,120,212,.45);}
.tabbar.in .nav-marker{opacity:1;}

.logo{background:var(--blue);color:#fff;font-family:var(--display);font-weight:900;font-size:clamp(16px,1.2vw,20px);letter-spacing:.01em;padding:6px 13px;cursor:pointer;opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease;}
.tabs{display:contents;}
.tab{position:relative;font-family:var(--body);font-size:calc(clamp(13px,1.05vw,16px) * var(--mono-scale,1));padding:var(--tab-pad,9px) clamp(20px,2.4vw,34px);cursor:pointer;border:1.5px solid rgba(1,120,212,.3);color:rgba(1,120,212,.45);background:#fff;white-space:nowrap;opacity:0;transform:translateY(-8px);transition:color .35s ease,background .35s ease,border-color .35s ease,opacity .55s ease,transform .55s ease;}
.tab:not(.active):not(.visited):hover{color:var(--blue);border-color:var(--blue);}
@keyframes tab-glitch{
  0%  {filter:none;transform:none;}
  10% {filter:brightness(1.7) blur(.3px);transform:translateX(-2px) skewX(-.8deg);}
  22% {filter:brightness(.7);transform:translateX(3px);}
  36% {filter:brightness(1.2);transform:translateX(-1.5px);}
  52% {filter:none;transform:translateX(1px);}
  70% {transform:translateX(-.5px);}
  100%{filter:none;transform:none;}
}
.tab.tab-glitch{animation:tab-glitch .44s cubic-bezier(.16,1,.3,1) forwards;}
.tab.visited{border-color:var(--blue);background:var(--blue);color:#fff;}
.tab.active{border-color:var(--ink);background:var(--ink);color:#fff;}
.tabbar.in .logo{opacity:1;transform:none;}
.tabbar.in .tab{opacity:1;transform:none;}
.tabbar.in .tab:nth-of-type(1){transition-delay:.05s;}
.tabbar.in .tab:nth-of-type(2){transition-delay:.13s;}
.tabbar.in .tab:nth-of-type(3){transition-delay:.21s;}

.panel{display:flex;flex-direction:column;justify-content:var(--panel-justify);padding:clamp(40px,5vw,72px) clamp(20px,5vw,72px);min-height:var(--panel-h, calc(100vh - var(--nav-h)));scroll-snap-align:start;scroll-snap-stop:always;}
html{scroll-snap-type:y proximity;}
.panel + .panel{border-top:1px solid #f0f0f0;}

/* ---- Thesis strip: the transition beat between the crash and the work.
   The statement broadcasts on CH 00 of the same plasma TV the projects
   play on; scrolling past, the TV shrinks into place as the STUFF panel's
   preview TV (morph script in index.html). ---- */
.thesis-strip{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(28px,4vh,52px) clamp(20px,5vw,72px);}
.thesis-tv{width:min(500px,84vw,64vh);}
.thesis-tv .tv-screen{aspect-ratio:1;}
/* the statement layer sits over the static (z1) and under scanlines (z10) */
.thesis-screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,4vw,44px);transition:opacity .2s linear;}
/* occasional broadcast glitch on the statement — brief RGB split + jitter */
@keyframes thesis-flicker{
  0%,93.5%,100%{opacity:1;transform:none;text-shadow:none;filter:none;}
  94%{opacity:.75;transform:translateX(2px) skewX(.6deg);text-shadow:-3px 0 rgba(255,50,50,.6),3px 0 rgba(1,120,212,.6);}
  95%{opacity:1;transform:translateX(-1.5px);text-shadow:2px 0 rgba(1,120,212,.35);filter:blur(.4px);}
  96%{opacity:.9;transform:none;text-shadow:none;filter:none;}
}
.thesis-screen{animation:thesis-flicker 6.5s linear infinite;}
.thesis-legend{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:#98a0a8;margin-bottom:22px;text-transform:uppercase;flex-wrap:wrap;}
.tl-item{display:inline-flex;align-items:center;gap:7px;opacity:.18;transition:opacity .5s ease;}
.tl-item.on{opacity:1;}
.tl-item i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.tl-life i{background:#1DB954;}
.tl-death i{background:#1a1a1a;}
/* on the TV's black screen, pure black needs a rim to stay legible */
.thesis-tv .tl-death i{box-shadow:0 0 0 1.5px rgba(255,255,255,.5);}
.tl-second i{background:var(--blue);}
.tl-sep{color:#d9d9d9;letter-spacing:0;opacity:.25;transition:opacity .5s ease;}
.tl-sep.on{opacity:1;}
.thesis-text{font-family:var(--serif);font-style:italic;font-size:clamp(17px,2vw,27px);line-height:1.45;color:#f4f3ef;max-width:22em;text-shadow:0 0 14px rgba(255,255,255,.14);animation:thesis-vibrate .22s steps(2,end) infinite;}
/* faint permanent tube-vibration — the line is part of the broadcast, not printed on it */
@keyframes thesis-vibrate{
  0%,100%{transform:translate(0,0);}
  25%{transform:translate(.4px,-.35px);}
  50%{transform:translate(-.35px,.3px);}
  75%{transform:translate(.25px,.25px);}
}
.th-w{opacity:.05;filter:blur(2.5px);transition:opacity .45s ease,filter .45s ease;}
.th-w.on{opacity:1;filter:none;animation:th-w-glitch-in .32s steps(2,end) 1;}
/* each word lands like a signal locking on — quick RGB tear, then settles */
@keyframes th-w-glitch-in{
  0%{opacity:.4;transform:translateX(-3px) skewX(-8deg);text-shadow:-3px 0 rgba(255,50,50,.85),3px 0 rgba(1,120,212,.85);}
  50%{opacity:1;transform:translateX(2px) skewX(3deg);text-shadow:2px 0 rgba(1,120,212,.5);}
  100%{transform:none;text-shadow:none;}
}
/* "keep scrolling" — appears once the broadcast is fully on air */
.thesis-cue{margin-top:26px;font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#9a9a9a;opacity:0;transition:opacity .6s ease;}
.thesis-cue.show{opacity:1;animation:cue-drift-soft 2.4s ease-in-out infinite;}
@keyframes cue-drift-soft{0%,100%{opacity:1;transform:translateY(0);}50%{opacity:.35;transform:translateY(6px);}}
/* morph mechanics — the TV detaches into fixed space while a hidden
   placeholder holds its spot in the strip (script sizes it) */
.thesis-tv.morphing{position:fixed;top:0;left:0;margin:0;z-index:75;transform-origin:top left;will-change:transform,opacity;pointer-events:none;}
@media (max-width:768px){
  .thesis-strip{min-height:85svh;padding-top:34px;}
  .thesis-tv{width:min(84vw,58svh);}
  .thesis-legend{gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  .th-w{opacity:1;filter:none;animation:none;}
  .tl-item,.tl-sep{opacity:1;}
  .thesis-screen{animation:none;}
  .thesis-text{animation:none;}
  .thesis-cue.show{animation:none;}
}

/* ---- STUFF: two-column layout, consistent padding both sides ---- */
#panel-stuff{
  flex-direction:row;
  align-items:center;
  gap:clamp(30px,4vw,60px);
}
#panel-stuff .cat-list{
  flex:1;
  min-width:0;
  align-self:stretch;
  justify-content:space-evenly;
}
.cat-list{display:flex;flex-direction:column;gap:clamp(20px,3.6vw,46px);}
.cat{display:grid;grid-template-columns:minmax(0,var(--cat-title-col,clamp(220px,26vw,380px))) 1fr;align-items:center;gap:0 clamp(18px,2.2vw,36px);cursor:pointer;}
.cat h2{font-family:var(--display);font-weight:900;font-size:calc(clamp(28px,4vw,58px) * var(--cat-scale));letter-spacing:-.005em;line-height:.95;color:var(--blue);transform-origin:left center;will-change:transform;}
.cat h2.glitch-in{animation:title-glitch-in .55s cubic-bezier(.16,1,.3,1) forwards;}
.cat h2.glitch-out{animation:title-glitch-out .42s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes title-glitch-in{
  0%{transform:scale(1);color:var(--blue);}
  12%{transform:scale(1.018) translateX(-4px) skewX(-1.2deg);filter:blur(.3px);}
  25%{transform:scale(1.026) translateX(4px);color:var(--blue);text-shadow:-3px 0 rgba(255,50,50,.55),3px 0 rgba(1,120,212,.55);}
  42%{transform:scale(1.028) translateX(-2px) skewX(.6deg);text-shadow:2px 0 rgba(1,120,212,.2);}
  62%{transform:scale(1.024) translateX(1px);text-shadow:none;filter:none;}
  80%{transform:scale(1.022);}
  100%{transform:scale(1.02);color:var(--blue);}
}
@keyframes title-glitch-out{
  0%{transform:scale(1.02);color:var(--blue);}
  18%{transform:scale(1.015) translateX(3px) skewX(.8deg);text-shadow:-2px 0 rgba(255,50,50,.3);}
  38%{transform:scale(1.007) translateX(-2px) skewX(-.6deg);color:var(--blue);text-shadow:none;}
  62%{transform:scale(1.002) translateX(1px);}
  100%{transform:scale(1);color:var(--blue);}
}
.cat .projects{display:flex;flex-direction:column;gap:clamp(4px,.45vw,8px);opacity:0;transform:translateX(14px);transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none;}
.cat:hover .projects{opacity:1;transform:none;pointer-events:auto;}
.cat .projects a{font-family:var(--mono);font-size:clamp(9px,.88vw,11px);letter-spacing:.07em;text-transform:uppercase;color:#6f6f6f;white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s ease,border-color .2s ease;}
/* lifecycle wayfinding dots beside each project title — same language as
   the thesis legend and the case-study LIFE/DEATH/SECOND LIFE widget */
.lc-dots{display:inline-flex;gap:3px;margin-left:8px;vertical-align:1px;}
.lc-dot{width:5px;height:5px;border-radius:50%;border:1px solid #d4d4d4;box-sizing:border-box;display:inline-block;transition:transform .2s ease;}
.lc-dot.on.lc-life{background:#1DB954;border-color:#1DB954;}
.lc-dot.on.lc-death{background:#1a1a1a;border-color:#1a1a1a;}
.lc-dot.on.lc-second{background:var(--blue);border-color:var(--blue);}
.cat .projects a:hover .lc-dot.on{transform:scale(1.35);}
.cat .projects a:hover{color:var(--blue);border-color:var(--blue);}

/* Always-present project preview panel — old plasma TV style */
.proj-panel{flex-shrink:0;width:clamp(200px,22vw,300px);align-self:center;}
/* TV outer casing / bezel */
.tv-bezel{
  background:linear-gradient(160deg,#1e1e1e,#0d0d0d);
  border-radius:14px;
  padding:clamp(8px,.9vw,12px) clamp(8px,.9vw,12px) clamp(14px,1.5vw,20px);
  box-shadow:0 0 0 1.5px #0a0a0a,inset 0 1px 2px rgba(255,255,255,.05),0 28px 60px -16px rgba(0,0,0,.75);
}
/* CRT screen area */
.tv-screen{
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:#000;
  border-radius:5px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.9);
}
/* Scanlines */
.tv-screen::after{content:'';position:absolute;inset:-8px 0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);pointer-events:none;z-index:10;animation:tv-scan-drift 7s linear infinite;}
@keyframes tv-scan-drift{0%{transform:translateY(0);}100%{transform:translateY(8px);}}
/* Vignette */
.tv-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6) 100%);pointer-events:none;z-index:9;}
.tv-static-canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:1;display:block;transition:opacity .5s ease;}
/* Signal layer — fades in over static */
.tv-signal{position:absolute;inset:0;opacity:0;z-index:2;transition:opacity .55s ease;}
.tv-signal.active{opacity:1;}
/* same faint CRT fringe as the case-study TV — one signal treatment everywhere */
.tv-signal img{filter:contrast(1.05) saturate(1.06) drop-shadow(1px 0 rgba(255,40,80,.13)) drop-shadow(-1px 0 rgba(0,140,255,.13));}
.tv-signal image-slot{width:100%;height:100%;}
/* TV bottom control strip */
.tv-hp-bottom{
  display:flex;align-items:center;gap:6px;
  padding:5px clamp(8px,.9vw,12px) 6px;
  flex-shrink:0;
}
@keyframes tv-hp-led-pulse{0%,100%{opacity:1;}50%{opacity:.2;}}
.tv-hp-led{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:#2ecc71;box-shadow:0 0 5px #2ecc71;
  animation:tv-hp-led-pulse 2.4s ease-in-out infinite;
}
.tv-hp-ch{
  font-family:var(--mono);font-size:7px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.2);flex:1;text-align:center;
}
.tv-hp-btns{display:flex;gap:4px;align-items:center;}
.tv-hp-btn{
  width:14px;height:14px;border-radius:50%;
  background:rgba(255,255,255,.06);border:.75px solid rgba(255,255,255,.1);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:7px;color:rgba(255,255,255,.22);line-height:1;
  transition:background .12s,color .12s;user-select:none;
}
.tv-hp-btn:hover{background:rgba(255,255,255,.15);color:rgba(255,255,255,.75);}
.tv-hp-btn--pwr{background:rgba(1,120,212,.1);border-color:rgba(1,120,212,.28);}
.tv-hp-btn--pwr:hover{background:rgba(1,120,212,.28);color:rgba(255,255,255,.85);}
/* Info strip — inside the dark bezel, fixed height so TV never grows */
.proj-panel-info{
  padding:clamp(8px,.9vw,12px) clamp(8px,.9vw,12px) clamp(10px,1.1vw,14px);
  height:clamp(118px,13vw,148px);
  overflow:hidden;
  flex-shrink:0;
}
.proj-panel-name{font-family:var(--display);font-weight:900;font-size:clamp(11px,1vw,15px);color:#fff;margin-bottom:7px;letter-spacing:-.01em;line-height:1.15;}
.proj-panel-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px;}
/* Rounded pill tags */
.ptag{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.07em;
  color:var(--blue);
  border:1px solid rgba(1,120,212,.4);
  border-radius:100px;
  padding:4px 10px;
  text-transform:uppercase;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.ptag:hover{color:#fff;background:var(--blue);border-color:var(--blue);}
/* Project link buttons inside TV panel */
.proj-panel-links{display:flex;flex-wrap:wrap;gap:5px;}
.ptv-link{
  display:inline-block;
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.28);border-radius:20px;
  color:rgba(255,255,255,.6);background:transparent;
  padding:4px 11px;white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.ptv-link:hover{border-color:rgba(255,255,255,.7);color:#fff;}
.ptv-link[target="_blank"]::after{content:' ↗';font-size:8px;}

/* ---- SOME MORE STUFF ---- */
#panel-more{position:relative;gap:clamp(10px,1.6vw,20px);}
.accordion{display:flex;gap:6px;width:100%;}
.accordion.gallery{height:var(--acc-h,clamp(150px,29vh,330px));}
.acc-panel{
  position:relative;flex:1;overflow:hidden;cursor:pointer;
  min-width:14px;max-width:2000px;background:#ededed;
  transition:flex .55s cubic-bezier(.16,1,.3,1),max-width .55s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;
}
/* .hot is set by JS from UNTRANSFORMED layout geometry (home.js) — CSS
   :hover used the scaled box for hit-testing, so the 1.35× overlap flipped
   hover on/off while crossing panels and the gallery glitched. */
.acc-panel.hot{
  flex:var(--acc-open,8);
  max-width:calc(var(--acc-h,clamp(150px,29vh,330px)) * 1.778);
  transform:scale(1.35);
  z-index:4;
  box-shadow:0 14px 40px -8px rgba(0,0,0,.28);
}
/* Glitch-freeze on hover entry — filter only, no transform (avoids edge-tear on <img>) */
@keyframes img-freeze-glitch{
  0%  {filter:brightness(1.6) blur(.5px) contrast(1.2);}
  20% {filter:brightness(.75) blur(1.2px) saturate(1.6);}
  40% {filter:brightness(1.2) blur(.3px);}
  65% {filter:brightness(1.05);}
  100%{filter:none;}
}
.acc-panel image-slot,.acc-panel img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.acc-panel[data-filled] image-slot,.acc-panel[data-filled] img{pointer-events:auto;cursor:zoom-in;}
.acc-panel.freeze image-slot,.acc-panel.freeze img{animation:img-freeze-glitch .52s ease;}
.acc-panel .acc-label{position:absolute;left:0;bottom:0;right:0;padding:12px 14px;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .4s;pointer-events:none;}
.acc-panel.hot .acc-label{opacity:1;}
/* no zoom badge — clicking anywhere on a filled panel opens lightbox */

/* Text strip between photo row and poem row */
.more-text-strip{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:clamp(28px,3.5vh,48px);height:auto;overflow:visible;
  padding:6px 0;
}
.mts-text{
  font-family:var(--mono);font-size:clamp(9px,.95vw,12px);
  letter-spacing:.22em;text-transform:uppercase;color:#c0c0c0;
  text-align:center;white-space:normal;overflow:visible;text-overflow:clip;
  max-width:85%;transition:color .22s,opacity .18s;
}
.mts-text.active{color:var(--blue);}

/* Floating stick figure */
@keyframes fs-jitter{
  0%,100%{transform:none;}
  10%{transform:translateX(-3px) rotate(-2.5deg);}
  22%{transform:translateX(4px) rotate(2deg);}
  34%{transform:translateX(-3px) rotate(-1.5deg);}
  46%{transform:translateX(3px) rotate(1deg);}
  58%{transform:translateX(-2px) rotate(-.5deg);}
  70%{transform:translateX(1px);}
}
@keyframes fs-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.floating-stick{
  position:fixed;bottom:40px;right:40px;z-index:999;  /* global — visible everywhere */
  display:flex;flex-direction:row;align-items:flex-end;
  gap:12px;cursor:grab;
  opacity:0;                                           /* JS rAF owns both opacity + transform */
  pointer-events:none;
  min-height:90px;
  touch-action:none; /* without this, touch drags get hijacked as page-scroll gestures before
                         the pointermove handler ever sees them — the #1 reason drag "doesn't
                         work" on phones even though the same Pointer Events code runs fine
                         with a mouse. */
}
.floating-stick.visible{opacity:1;pointer-events:auto;}
/* Wrapper carries jitter-on-appear then idle float — keeps transforms separate from img flip */
.fs-fig-wrap{
  order:1;
  flex-shrink:0;
}
.floating-stick.visible .fs-fig-wrap{
  animation:
    fs-jitter .55s cubic-bezier(.16,1,.3,1) .05s 2,
    fs-float 3.8s ease-in-out 1.2s infinite;
}
.fs-svg{
  width:36px;height:auto;opacity:1;display:block;
  transform:scaleX(-1);                               /* default: face LEFT toward content */
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;-webkit-user-drag:none;user-select:none;
}
/* Un-flip when explicitly facing right (mouse to the right of figure) */
.fs-svg.facing-right{transform:none;}
.floating-stick:hover .fs-svg{transform:scaleX(-1) scale(1.3) translateY(-4px);}
.floating-stick:hover .fs-svg.facing-right{transform:scale(1.3) translateY(-4px);}
.fs-bubble{
  order:0;                                            /* bubble on LEFT */
  position:relative;
  background:#fff;border:2.5px solid #111;
  color:#111;font-family:var(--mono);font-size:10px;
  font-style:normal;letter-spacing:.02em;line-height:1.55;
  padding:11px 18px;max-width:210px;border-radius:22px;
  opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .22s,transform .26s cubic-bezier(.16,1,.3,1);
  align-self:flex-start;
}
.floating-stick.open .fs-bubble{opacity:1;transform:none;pointer-events:auto;}
/* When Mojito steps aside to dodge the CV illustration/ID card he ends up
   mid-screen — flip the flex order so the bubble opens toward screen-center
   instead of running off the left edge. Also drop the bubble's normal
   top-alignment: with `align-items:flex-end` on the container, a
   top-aligned bubble extends UPWARD from the container's top edge, which
   the JS avoid-target math (based on the figure's own position) doesn't
   account for — a multi-line bubble could poke back up into whatever the
   figure just stepped down to clear. Bottom-aligning both keeps the whole
   cluster's footprint growing from a single shared baseline instead. */
.floating-stick.avoiding .fs-fig-wrap{order:0;}
.floating-stick.avoiding .fs-bubble{order:1;align-self:flex-end;}

/* ── Mojito bubble text ───────────────────────── */
.mojito-text{display:block;font-family:var(--mono);font-size:10px;line-height:1.6;color:#111;white-space:pre-wrap;}
.mj-link{color:var(--blue);text-decoration:underline;text-underline-offset:2px;}

/* ── Channel-change glitch wipe — plays on every navigation tap ── */
.glitch-wipe{position:fixed;inset:0;z-index:320;pointer-events:none;opacity:0;}
.glitch-wipe.on{animation:gw-flicker .42s steps(3,end) 1 both;}
.glitch-wipe::before{
  content:'';position:absolute;inset:-12px 0;
  background:
    repeating-linear-gradient(0deg,rgba(10,10,10,.82) 0 2px,transparent 2px 5px),
    linear-gradient(rgba(1,120,212,.16),rgba(1,120,212,.16));
}
.glitch-wipe.on::before{animation:gw-slices .42s steps(4,end) 1 both;}
.glitch-wipe::after{
  content:'';position:absolute;left:0;right:0;height:16vh;top:32%;
  background:rgba(255,255,255,.07);
  border-top:2px solid rgba(255,50,50,.55);border-bottom:2px solid rgba(1,120,212,.55);
  box-shadow:0 0 42px rgba(1,120,212,.35);
}
.glitch-wipe.on::after{animation:gw-band .42s steps(5,end) 1 both;}
@keyframes gw-flicker{0%{opacity:0;}8%{opacity:1;}45%{opacity:.65;}70%{opacity:1;}100%{opacity:0;}}
@keyframes gw-slices{0%{transform:translateY(0);}25%{transform:translateY(-7px) skewX(-2deg);}50%{transform:translateY(5px);}75%{transform:translateY(-3px) skewX(1.4deg);}100%{transform:translateY(0);}}
@keyframes gw-band{0%{top:6%;}25%{top:58%;}50%{top:28%;}75%{top:74%;}100%{top:18%;}}
@media (prefers-reduced-motion:reduce){.glitch-wipe{display:none;}}

/* Section transition buffer overlay */
.section-buffer{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .1s ease;
}
.section-buffer.show{opacity:1;}
.sb-text{
  font-family:var(--mono);font-size:clamp(11px,1.3vw,16px);
  letter-spacing:.32em;text-transform:uppercase;color:var(--blue);
}
@keyframes sb-blink{0%,100%{opacity:1;}50%{opacity:.15;}}
.section-buffer.show .sb-text{animation:sb-blink .36s steps(2,end) 4;}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,12,14,.93);display:none;align-items:center;justify-content:center;padding:5vw;cursor:zoom-out;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 40px 90px -25px #000;}
.lightbox .lb-close{position:absolute;top:22px;right:28px;color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.lightbox .lb-close:hover{color:var(--blue);}

/* ---- THE STUFF ---- */
/* Marquee pinned to panel bottom via absolute → only in-flow child is .about →
   justify-content:center gives mathematically equal space above and below it. */
#panel-about{min-height:var(--panel-h,calc(100vh - var(--nav-h)));padding:0 clamp(16px,2.5vw,36px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0;}
#panel-about > .marquee{position:absolute;bottom:0;left:0;right:0;}
/* Wider text: bigger max-width, tighter spacing, override inline paddings */
#panel-about .hola{padding-top:clamp(10px,1.5vh,20px) !important;}
#panel-about .cv-default{padding-top:clamp(8px,1vh,14px) !important;}
#panel-about .hola-row{margin-bottom:12px;}
#panel-about .about-right p{max-width:58ch;margin-bottom:.8em;}
#panel-about .cv-stage{min-height:0;}
.about{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,44px);align-items:stretch;position:relative;}

/* Mindmap fades on cv hover */
.map-wrap{position:relative;display:flex;flex-direction:column;min-height:clamp(540px,68vh,700px);transition:opacity .45s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.about.cv-hover .map-wrap{opacity:0;transform:scale(.97);pointer-events:none;}
#mindmap{width:100%;height:clamp(360px,40vw,460px);display:block;cursor:pointer;user-select:none;}
.map-hint{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:#aaa;text-transform:uppercase;margin-top:6px;}
.mm-quote{margin-top:18px;font-family:var(--mono);font-size:12px;color:#333;line-height:1.7;min-height:54px;}
.mm-quote .k{color:var(--blue);font-weight:700;}

/* ID card — drops from above left on cv-btn hover */
.id-card-wrap,.id-card-wrap *{pointer-events:none;}
.id-card-wrap{position:absolute;left:0;top:0;width:clamp(220px,22vw,340px);transform:translateY(-60px) rotate(-6deg);transform-origin:top center;opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1) .05s,opacity .5s ease .05s;z-index:8;}
.about.cv-hover .id-card-wrap,.about.cv-hover .id-card-wrap *{pointer-events:auto;}
.about.cv-hover .id-card-wrap{transform:translateY(0) rotate(12deg);opacity:1;animation:id-card-flicker 4s linear .8s infinite;}
.id-lanyard{width:3px;height:clamp(36px,4.5vw,60px);background:#1a1a1a;margin:0 auto;position:relative;}
.id-lanyard::before{content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:10px;height:6px;background:#999;border-radius:2px 2px 0 0;}
.id-card{background:#fff;border-radius:10px;box-shadow:0 18px 50px -10px rgba(0,0,0,.35),0 0 0 1px #e0e0e0,0 0 0 6px rgba(1,120,212,.08);overflow:hidden;padding:14px 14px 16px;}
.id-card-photo{width:100%;aspect-ratio:3/4;background:#f2f2f2;margin-bottom:12px;overflow:hidden;border-radius:5px;}
.id-card-photo image-slot{width:100%;height:100%;}
.id-card-name{font-family:var(--display);font-weight:700;font-size:clamp(13px,1.3vw,17px);color:#111;margin-bottom:4px;}
.id-card-studio{font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--blue);text-transform:uppercase;}

@keyframes id-card-flicker{
  0%,84%,100%{opacity:1;}
  85%{opacity:.68;}
  86%{opacity:1;}
  88%{opacity:.82;}
  89%{opacity:1;}
}

/* ID card — background-image mode (when idCardBg is uploaded) */
.id-card-wrap.id-card-bg-mode{width:clamp(1020px,95vw,1500px);left:-180px;top:-80px;}
.id-card-wrap.id-card-bg-mode .id-lanyard,.id-card-wrap.id-card-bg-mode .id-card{display:none;}
.id-card-bg-img{width:100%;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.22)) drop-shadow(0 4px 12px rgba(0,0,0,.14));}
.id-card-bg-overlay{
  position:absolute;
  left:40%;right:46%;          /* pixel-sampled: card face 40.3%–54.1% of id_3.png */
  top:var(--id-card-overlay-top,45%);
  bottom:var(--id-card-overlay-bottom,10%);  /* card face ends ~90% from top */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:var(--id-card-overlay-pb,5%);
  gap:3px;pointer-events:none;
}
.id-card-bg-photo-img{width:var(--id-card-photo-w,80%);aspect-ratio:1;object-fit:cover;border-radius:3px;display:block;margin-bottom:7%;}
.id-card-bg-gif-img{width:var(--id-card-gif-w,65%);display:block;margin-bottom:4px;}
.id-card-bg-mode .id-card-name{font-size:clamp(10px,1vw,13px);text-align:center;margin-bottom:2px;color:#111;}
.id-card-bg-mode .id-card-studio{font-size:7px;text-align:center;letter-spacing:.08em;}

/* Illustration — slides in from right edge, triggered via sibling selector */
.cv-illustration{position:absolute;right:0;bottom:clamp(65px,9vh,110px);width:calc(clamp(180px,18vw,260px) * var(--illus-scale,1));transform:translateX(100%);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1) .1s,opacity .55s ease .1s;pointer-events:none;z-index:6;}
.about.cv-hover ~ .cv-illustration{transform:translateX(0);opacity:1;}
.cv-illustration image-slot{width:100%;height:clamp(240px,26vw,360px);display:block;}

/* Hola + Download CV side by side */
.hola-row{display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px);margin-bottom:24px;}
.hola{font-family:var(--display);font-weight:900;font-size:clamp(46px,6.5vw,88px);color:var(--blue);line-height:.9;}
/* cv-btn: only this triggers the reveal */
.cv-btn{display:inline-flex;align-items:center;position:relative;font-family:var(--body);font-weight:700;font-size:clamp(13px,1.1vw,17px);border-bottom:3px solid var(--blue);padding:5px 3px 7px;margin-bottom:6px;cursor:pointer;user-select:none;white-space:nowrap;}
.cv-btn::after{content:"↓";display:inline-block;margin-left:7px;color:var(--blue);transition:transform .4s cubic-bezier(.16,1,.3,1);}
.cv-zone.cv-revealed .cv-btn::after{transform:translateY(4px);}

.cv-stage{position:relative;min-height:var(--cv-stage-h,260px);}
.cv-default{transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.cv-zone.cv-revealed .cv-default{opacity:0;transform:translateX(-18px);pointer-events:none;}

.cv-reveal{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.cv-zone.cv-revealed .cv-reveal{opacity:1;pointer-events:auto;}
.cv-reveal-text p{font-size:calc(clamp(15px,1.05vw,17px) * var(--body-scale,1));line-height:1.6;margin-bottom:1em;color:#1a1a1a;opacity:0;transform:translateX(-22px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.cv-zone.cv-revealed .cv-reveal-text p{opacity:1;transform:none;}
.cv-zone.cv-revealed .cv-reveal-text p:nth-child(2){transition-delay:.07s;}
.cv-zone.cv-revealed .cv-reveal-text p:nth-child(3){transition-delay:.13s;}
.cv-poem{font-family:var(--serif) !important;font-style:italic;line-height:1.9 !important;color:#444 !important;}
.cv-dl{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--blue);padding-bottom:2px;opacity:0;transform:translateX(-22px);transition:opacity .5s ease .16s,transform .5s cubic-bezier(.16,1,.3,1) .16s;}
.cv-zone.cv-revealed .cv-dl{opacity:1;transform:none;}

.about-right{position:relative;z-index:10;display:flex;flex-direction:column;}
.about-right p{font-size:calc(clamp(15px,1.05vw,17px) * var(--body-scale,1));line-height:1.6;margin-bottom:1.35em;max-width:44ch;color:#1a1a1a;}
.socials{display:flex;gap:26px;margin-top:auto;padding-top:22px;}
.socials a{font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--blue);border-bottom:1.5px solid var(--blue);padding-bottom:2px;text-transform:uppercase;}
.socials a:hover{color:var(--blue-deep);}

.marquee{overflow:hidden;white-space:nowrap;margin-top:0;padding:13px 0 14px;}
.marquee .track{display:inline-flex;gap:16px;animation:scroll 24s linear infinite;}
.marquee span{font-family:var(--display);font-weight:900;font-size:clamp(19px,2.3vw,30px);color:var(--blue);letter-spacing:-.01em;}
@keyframes scroll{from{transform:translateX(-50%);}to{transform:translateX(0);}}

/* ---- Section glitch reveal ---- */
.panel-pre-reveal{opacity:0;}

@keyframes section-glitch-in{
  0%  {opacity:0;transform:translateX(-5px);filter:blur(8px) brightness(2);}
  7%  {opacity:.06;transform:translateX(10px) skewX(-.7deg);filter:blur(5px) brightness(2.4);}
  14% {opacity:.28;transform:translateX(-8px) skewX(.5deg);filter:blur(3px);}
  21% {opacity:.07;transform:translateX(9px) skewX(-.3deg);filter:blur(7px) brightness(1.8);}
  31% {opacity:.52;transform:translateX(-4px);filter:blur(1.5px);}
  41% {opacity:.38;transform:translateX(5px) skewX(.3deg);filter:blur(2.5px) brightness(1.3);}
  53% {opacity:.76;transform:translateX(-2px);filter:blur(.5px);}
  66% {opacity:.89;transform:translateX(1px);filter:none;}
  80% {opacity:.95;transform:translateX(-.5px);}
  100%{opacity:1;transform:none;filter:none;}
}
@keyframes section-glitch-out{
  0%  {opacity:1;transform:none;filter:none;}
  9%  {transform:translateX(6px) skewX(.5deg);filter:blur(.4px) brightness(1.3);}
  21% {opacity:.82;transform:translateX(-5px) skewX(-.4deg);filter:blur(1px);}
  34% {opacity:.6;transform:translateX(5px);filter:blur(2px) brightness(1.4);}
  50% {opacity:.34;transform:translateX(-7px) skewX(.5deg);filter:blur(4px);}
  66% {opacity:.14;transform:translateX(5px);filter:blur(6px) brightness(1.7);}
  80% {opacity:.04;transform:translateX(-3px);filter:blur(7px);}
  100%{opacity:0;transform:translateX(0);filter:blur(9px);}
}

.panel[data-glitch="in"] {animation:section-glitch-in .85s cubic-bezier(.16,1,.3,1) both;}
.panel[data-glitch="out"]{animation:section-glitch-out .62s cubic-bezier(.55,0,1,.45) both;}

/* ---- Download CV glitch ---- */
@keyframes cv-btn-glitch{
  0%  {transform:none;}
  12% {transform:translateX(-3px) skewX(-1.5deg);filter:blur(.3px);}
  25% {transform:translateX(5px);color:var(--blue);text-shadow:-3px 0 rgba(255,50,50,.45),3px 0 rgba(1,120,212,.45);}
  42% {transform:translateX(-2px) skewX(.6deg);text-shadow:2px 0 rgba(1,120,212,.2);filter:none;}
  62% {transform:translateX(1px);text-shadow:none;}
  80% {transform:translateX(-.5px);}
  100%{transform:none;}
}
.cv-btn.cv-glitching{animation:cv-btn-glitch .55s cubic-bezier(.16,1,.3,1) forwards;}

/* ============================================================
   TABLET  ≤860px — basic stacking only
   ============================================================ */
@media(max-width:860px){
  .about,.feature{grid-template-columns:1fr;}
  .poem{column-count:1;}
  .cat{grid-template-columns:1fr;gap:4px;}
  .cat .projects{display:none;}
  #panel-stuff{flex-direction:column;align-items:stretch;}
  .proj-panel{width:100%;align-self:auto;}
  .tabs{margin-right:0;}
}

/* ============================================================
   MOBILE  ≤768px — full phone layout
   ============================================================ */
@media(max-width:768px){

  /* ── Loader ── */
  #loader{height:200vh;}
  .loader-inner{padding:0 5vw;margin:-2vh auto 0;}
  .ld-foot{padding-right:0;}

  /* ── Nav ── */
  .tabbar{
    padding:10px clamp(10px,3vw,16px) 22px;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap;
  }
  .tab-sub{top:calc(100% + 2px);font-size:7.5px;}
  .tabbar::-webkit-scrollbar{display:none;}
  .logo{font-size:13px;padding:5px 9px;flex-shrink:0;}
  .tab{padding:6px 10px;font-size:11px;flex-shrink:0;}

  /* Panels: let content drive height; disable scroll-snap (panels aren't viewport-height) */
  html{scroll-snap-type:none;}
  .panel{scroll-snap-align:none;min-height:0;}

  /* ── Stuff panel ── categories left, TV right, both sized to content */
  #panel-stuff{flex-direction:row;align-items:flex-start;gap:10px;justify-content:flex-start;}
  #panel-stuff .cat-list{flex:1;min-width:0;gap:clamp(18px,5vw,26px);justify-content:flex-start;align-self:flex-start;}
  .cat{grid-template-columns:1fr;gap:5px;}
  .cat h2{font-size:clamp(20px,5.5vw,30px) !important;}
  .cat .projects{display:flex !important;opacity:1 !important;transform:none !important;pointer-events:auto !important;}
  .cat .projects a{font-size:9px;padding-bottom:3px;}
  .proj-panel{flex-shrink:0;width:clamp(120px,30vw,155px);align-self:flex-start;margin-top:0;}
  .proj-panel-info{height:auto;min-height:0;padding:8px 10px 10px;}
  .proj-panel-name{font-size:10px;}
  .proj-panel-tags{gap:3px;margin-bottom:6px;}
  .ptag{font-size:7px;padding:3px 7px;}
  .proj-panel-links{gap:4px;}

  /* ── More panel ── two horizontal swipeable strips, packed tight */
  #panel-more{gap:4px;justify-content:flex-start;}
  .more-text-strip{height:16px;}
  .accordion.gallery{
    flex-direction:row !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    height:clamp(160px,44vw,260px) !important;
    gap:6px;
  }
  .accordion.gallery::-webkit-scrollbar{display:none;}
  .acc-panel{
    flex:0 0 clamp(130px,36vw,220px) !important;
    height:100% !important;
    max-width:none !important;
    min-width:0;
    scroll-snap-align:start;
  }
  .acc-panel:hover,.acc-panel.hot{
    flex:0 0 clamp(130px,36vw,220px) !important;
    max-width:none !important;
    transform:none !important;
    z-index:auto;
    box-shadow:none;
  }
  .acc-panel .acc-label{opacity:1;font-size:9px;}

  /* ── About panel ──
     Grid: mindmap full-width on top, ID card + bio text side-by-side below.
     cv-reveal poem section removed — replace with visible ID card. */
  .about{
    display:grid !important;
    grid-template-columns:clamp(110px,30vw,140px) 1fr !important;
    grid-template-areas:"mindmap mindmap" "card text" !important;
    gap:clamp(16px,4vw,24px) 14px !important;
  }
  /* ID card bg-mode: hide the large background overlay, show normal card in the grid cell */
  .id-card-bg-img,.id-card-bg-overlay{display:none !important;}
  .id-card-wrap.id-card-bg-mode{width:100% !important;}
  .id-card-wrap.id-card-bg-mode .id-lanyard,.id-card-wrap.id-card-bg-mode .id-card{display:block !important;}
  .map-wrap{grid-area:mindmap;}
  .about-right{grid-area:text;}

  /* ID card: pull out of absolute positioning, show as static grid cell */
  .id-card-wrap{
    grid-area:card !important;
    display:block !important;
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    animation:none !important;
    width:100% !important;
    align-self:start;
  }
  .cv-illustration{display:none !important;}

  /* Remove the hover-reveal poem+studio section on mobile */
  .cv-reveal{display:none !important;}

  /* Keep mindmap visible */
  .about.cv-hover .map-wrap{opacity:1 !important;transform:none !important;pointer-events:auto !important;}
  /* Mobile: restore normal flow — justify-content:flex-start, marquee back in flow */
  #panel-about{justify-content:flex-start;padding-top:0;}
  #panel-about > .about{margin-top:0;margin-bottom:0;}
  #panel-about > .marquee{position:static;}

  /* cv-stage: only default bio text, no reveal */
  .cv-stage{min-height:0;}
  .cv-default{opacity:1 !important;transform:none !important;pointer-events:auto !important;}
  .cv-zone.cv-revealed .cv-default{opacity:1 !important;transform:none !important;}
  .cv-zone.cv-revealed .cv-btn::after{transform:none;}

  /* Layout polish */
  .hola-row{gap:clamp(8px,2vw,14px);flex-wrap:wrap;align-items:center;}
  .hola{font-size:clamp(34px,9vw,50px) !important;padding-top:0 !important;}
  .cv-btn{padding:8px 4px 10px;font-size:15px !important;}
  .about-right p{max-width:100%;}
  .map-wrap{min-height:0;}
  .about-right{display:block;}
  .socials{flex-wrap:wrap;gap:12px;margin-top:12px;padding-top:0;}

  /* ── Mindmap: explicit height since map-wrap has no intrinsic height on mobile ── */
  #mp-wrap{min-height:clamp(200px,52vw,300px);}

  /* ── More panel: show full comment text, no truncation ── */
  .more-text-strip{height:auto;min-height:16px;}
  .mts-text{white-space:normal;text-overflow:clip;overflow:visible;}

  /* ── ID card: hide empty photo slot (GIF covers it) ── */
  .id-card-photo:not(:has(img)){display:none;}

  /* ── Mojito ── */
  .floating-stick{bottom:16px;right:12px;}
  .fs-svg{width:46px !important;pointer-events:none;-webkit-user-drag:none;user-select:none;}
  .fs-bubble{max-width:160px;font-size:9px;padding:8px 12px;}

  /* ── Marquee ── */
  .marquee span{font-size:clamp(15px,4vw,22px);}
}

/* ============================================================
   SMALL PHONES  ≤480px — tighten further
   ============================================================ */
@media(max-width:480px){
  .ld-msg{font-size:clamp(16px,4.8vw,22px);}
  .ld-pct{font-size:clamp(18px,5vw,26px);}
  .logo{font-size:12px;padding:4px 8px;}
  .tab{padding:5px 8px;font-size:10px;}
  .accordion.gallery{height:clamp(130px,38vw,200px) !important;}
  .acc-panel{flex:0 0 clamp(110px,32vw,180px) !important;}
  .acc-panel:hover,.acc-panel.hot{flex:0 0 clamp(110px,32vw,180px) !important;}
  .hola{font-size:clamp(32px,8vw,46px) !important;}
  .marquee span{font-size:clamp(13px,3.5vw,18px);}
}