/* Pavan Nadimpalli portfolio: all styles.
   1) base rules shared by every section  2) the page design, section by section  3) responsive rules (touch, tablet, phone) */

/* Base rules for every section. Designed for 1440 x 900. */
:root{--u:1vh}
@supports (height:1svh){:root{--u:1svh}}
*{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;overflow-x:hidden}
a{color:inherit}
.sec{position:relative;height:100vh;height:calc(100*var(--u));overflow:hidden}
.abs{position:absolute}
.me{position:absolute;object-fit:contain;object-position:bottom;user-select:none;pointer-events:none}
.ln{display:block;overflow:hidden;padding:.06em 0}
.in{display:block;will-change:transform}

:root{--bg:#0e0e0f;--fg:#f4f4f1;--muted:#9b9b95;--line:#2a2a2d;--acc:#ff4b3a;--disp:'Anton',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;--body:'Inter',system-ui,sans-serif}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--body)}
.disp{font-family:var(--disp);text-transform:uppercase;font-weight:400;margin:0;line-height:.95;letter-spacing:.005em}
.meta{position:absolute;left:3vw;right:3vw;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);z-index:20}
.meta.t{top:22px}.meta.b{bottom:22px}
.meta a{color:inherit;text-decoration:none}.meta a:hover{color:var(--fg)}
a.tag{text-decoration:none;color:inherit}a.tag:hover{border-color:var(--acc)}
.txt{font-size:20px;line-height:1.5;color:var(--muted);margin:0}
.btn{display:inline-block;background:var(--acc);color:#111;font-weight:700;font-size:15px;padding:12px 28px;text-decoration:none;margin-right:10px;will-change:transform}
.btn.o{background:none;color:var(--fg);border:2px solid var(--fg);padding:10px 26px}
.tag{display:inline-block;border:2px solid var(--fg);padding:calc(.9*var(--u)) 2.4vw;font:400 calc(6.2*var(--u))/1 var(--disp);text-transform:uppercase;margin-right:1.4vw;white-space:nowrap}
.tag.f{background:var(--fg);color:#111}
.tag.r{background:var(--acc);border-color:var(--acc);color:#111}

/* 1 Home */
#home{background:radial-gradient(ellipse 48vw calc(62*var(--u)) at 50% 36%,rgba(255,255,255,.115) 0,rgba(255,255,255,.045) 45%,rgba(255,255,255,0) 100%),#0e0e0f}
#home .grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;will-change:auto;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
#home .vline{position:absolute;width:2px;background:#e8dfc8;opacity:.3;z-index:1;transform-origin:top}
#home .wrap{position:absolute;inset:0;pointer-events:none;margin:0}
#home .wrap.back{z-index:3}
#home .wrap.front{z-index:5}
#home .nm{position:absolute;left:50%;top:50%;margin:0;white-space:nowrap;font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.95;will-change:transform}
#home .nm .lm{display:inline-block;overflow:hidden;vertical-align:top;padding:.05em .02em}
#home .nm .lt{position:relative;display:block;transition:color .25s}
#home .nm .s{display:none;position:absolute;left:0;right:0;top:0;text-align:center;font-size:.8em;line-height:inherit}
#home .nm .lm.sc .r{visibility:hidden}
#home .nm .lm.sc .s{display:block}
#home .wrap.back .nm{color:#e8dfc8}
#home .wrap.front .nm{color:transparent;-webkit-text-stroke:1.5px #e8dfc8}
#home .wipe{position:absolute;inset:0;overflow:hidden;transform:translateX(-100%)}
#home .wipe-in{position:absolute;inset:0;transform:translateX(100%)}
#home .wrap.front .lt{transition:-webkit-text-stroke-color .25s}
#home .me{left:50%;bottom:0;height:calc(90*var(--u));z-index:4;will-change:transform;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 80%,transparent 100%)}
#home .htag{position:absolute;z-index:6;will-change:transform;background:var(--acc);color:#111;font:600 17px/1 var(--body);padding:11px 18px;border-radius:3px;white-space:nowrap}
#home .corner{position:absolute;z-index:7;font-size:13px;letter-spacing:.02em;color:#e8dfc8}
#home .c-tl{left:3vw;top:30px}#home .c-bl{left:3vw;bottom:28px}#home .c-br{right:3vw;bottom:28px}
#home .c-tr{right:3vw;top:26px}#home .c-tr svg{width:84px;height:14px;display:block}
#home .dim{position:absolute;inset:0;background:#0e0e0f;opacity:0;z-index:9;pointer-events:none}
/* 2 About: "The Story Deck". Pinned; scrub: true; only transform, opacity and text colour change on scroll. */
#about.moving .w,#about.moving .sent,#about.moving .ringS,#about.moving .card,#about.moving .ico{will-change:transform}
#about .ringS{position:absolute;left:50%;top:50%;width:calc(70*var(--u));height:calc(70*var(--u));margin:calc(-35*var(--u)) 0 0 calc(-35*var(--u));pointer-events:none}
#about .ringI{width:100%;height:100%;animation:idle 140s linear infinite}
#about .ringI svg{width:100%;height:100%;display:block;overflow:visible}
#about .ringI text{font:400 33px var(--disp);fill:none;stroke:#e8dfc8;stroke-width:1;opacity:.15;letter-spacing:.04em}
@keyframes idle{to{transform:rotate(360deg)}}
#about .sent{position:absolute;left:5vw;right:5vw;top:50%;margin:0;text-align:center;font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:min(9vw,calc(19*var(--u)));line-height:1;color:#e8dfc8;z-index:3}
#about .sent .w{display:inline-block;margin:0 .12em;transform-origin:50% 60%}
#about .deck{position:absolute;left:50%;top:56%;width:0;height:0;z-index:4}
#about .card{--mx:50%;--my:50%;position:absolute;left:-17vw;top:calc(-31*var(--u));width:34vw;height:calc(62*var(--u));isolation:isolate;overflow:hidden;background:#161617;border:1px solid #2c2c2e;border-radius:22px;padding:26px 28px;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.55)}
#about .card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx) var(--my),rgba(255,255,255,.08),rgba(255,255,255,0) 70%)}
#about .card.lit::before{opacity:1}
#about .card .edge{position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);transform-origin:left;transform:scaleX(0)}
#about .card .no{font-size:12px;letter-spacing:.14em;color:#8a8a85}
#about .card h3{font:400 min(calc(4.4*var(--u)),40px)/1 var(--disp);text-transform:uppercase;margin:8px 0 14px;color:#e8dfc8}
#about .c1 .ph{position:relative;flex:none;height:50%;border-radius:14px;overflow:hidden;background:#1c1c1e}
#about .c1 .glow{position:absolute;left:50%;bottom:-30%;width:120%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,75,58,.6),rgba(255,75,58,0) 65%);transform:translateX(-50%);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.1)}}
#about .c1 .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}
#about .c1 p{margin:14px 0 0;font-size:min(14px,calc(1.75*var(--u)));line-height:1.5;color:#a9a9a3}
#about .c2 .st{display:flex;align-items:center;gap:20px;flex:1;border-top:1px solid #2c2c2e}
#about .c2 .num{flex:none;min-width:42%;font:400 min(calc(14*var(--u)),118px)/.9 var(--disp);color:var(--acc)}
#about .c2 .lbl{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a85;line-height:1.4}
#about .c3 .now{display:flex;align-items:center;gap:14px;font:600 min(24px,calc(2.9*var(--u))) var(--body);margin:calc(3*var(--u)) 0 calc(4*var(--u))}
#about .pulse{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:#2fd36b}
#about .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2fd36b;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
#about .c3 .loc{display:flex;align-items:center;gap:12px;font:400 min(calc(5.4*var(--u)),48px)/1 var(--disp);text-transform:uppercase;color:#e8dfc8}
#about .c3 .loc svg{flex:none;width:30px;height:30px;color:var(--acc)}
#about .c3 .icos{margin-top:auto;display:flex;justify-content:space-between;border-top:1px solid #2c2c2e;padding-top:calc(3*var(--u))}
#about .ico{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}
#about .ico svg{width:min(46px,calc(5.4*var(--u)));height:min(46px,calc(5.4*var(--u)));color:var(--fg)}
#about .ico span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a9a9a3}
/* 3 Skills */
#skills h2{left:4vw;top:calc(13*var(--u));font-size:calc(15*var(--u))}
#skills .row{position:absolute;left:0;white-space:nowrap;display:flex;will-change:transform}
#skills .row.r1{top:calc(50*var(--u))}#skills .row.r2{top:calc(70*var(--u))}
/* 4 Experience */
#exp h2{right:4vw;top:calc(12*var(--u));font-size:calc(15*var(--u));text-align:right}
#exp .line{position:absolute;left:7vw;top:calc(12*var(--u));height:calc(78*var(--u));width:3px;background:var(--acc);transform-origin:top;z-index:2}
#exp .track{position:absolute;left:7vw;top:calc(12*var(--u));height:calc(78*var(--u));width:3px;background:var(--line)}
#exp .item{position:absolute;left:10vw;width:36vw;opacity:.28}
#exp .item .date{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#exp .item h3{font-size:calc(3.7*var(--u));margin:2px 0 2px}
#exp .item .role{margin:0 0 6px;color:var(--fg);font-size:14px;font-weight:600}
#exp .item ul{margin:0;padding-left:16px;color:var(--muted);font-size:12.5px;line-height:1.4}
#exp .item li{margin:0 0 2px}
#exp .dot{position:absolute;left:calc(7vw - 6px);width:15px;height:15px;border-radius:50%;background:var(--line);z-index:3}
#exp .dot b{position:absolute;inset:0;border-radius:50%;background:#ff4b3a;opacity:0}
#exp .h3w{position:relative;display:flow-root}
#exp .h3w .red{position:absolute;left:0;top:0;width:100%;color:#ff4b3a;opacity:0}
/* 5 Projects */
#proj h2{left:4vw;top:calc(12*var(--u));font-size:calc(11*var(--u))}
#proj .stage{position:absolute;inset:0;perspective:1800px}
#proj .ring{position:absolute;left:50%;top:57%;width:0;height:0;transform-style:preserve-3d}
#proj .scr{position:absolute;width:520px;height:500px;margin:-250px 0 0 -260px;transform-style:preserve-3d;backface-visibility:hidden;cursor:pointer;outline:none}
#proj .face{position:absolute;inset:0;display:flex;flex-direction:column;will-change:transform}
#proj .dimv{position:absolute;inset:0;background:#0e0e0f;opacity:0;pointer-events:none}
#proj .win{background:#161617;border:2px solid #3a3a3e;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5);transition:border-color .25s}
#proj .scr.front .win{border-color:#6a6a64}
#proj .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#1d1d1f;border-bottom:1px solid #2c2c2e}
#proj .bar i{flex:none;width:9px;height:9px;border-radius:50%;background:#4a4a4e}
#proj .bar i:first-child{background:var(--acc)}
#proj .addr{margin-left:10px;max-width:64%;height:20px;line-height:20px;padding:0 14px;border-radius:99px;background:#0e0e0f;color:#a9a9a3;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#proj .vp{position:relative;aspect-ratio:1440/900;overflow:hidden;background:#222225}
#proj .vp img{position:absolute;left:0;top:0;width:100%;display:block;transition:opacity .4s}
#proj .vp .h{height:100%;object-fit:cover}
#proj .vp .f{height:auto;opacity:0}
#proj .vp.full .f{opacity:1}
#proj .vp.full .h{opacity:0}
#proj .info{position:relative;padding:18px 2px 0}
#proj .info h3{font:400 30px/1 var(--disp);text-transform:uppercase;margin:0 0 7px;color:var(--fg)}
#proj .info .d{margin:0 0 10px;font-size:13px;line-height:1.4;color:#a9a9a3}
#proj .tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:370px}
#proj .tags span{font-size:11px;line-height:1.2;border:1px solid #6a6a64;color:#e8dfc8;border-radius:99px;padding:4px 10px}
#proj .tags .prog{background:var(--acc);border-color:var(--acc);color:#111;font-weight:700}
#proj .visit{display:none;position:absolute;right:0;bottom:0;background:var(--acc);color:#111;font:600 13px/1 var(--body);padding:10px 16px;border-radius:3px;text-decoration:none;white-space:nowrap}
#proj .scr.front .visit{display:inline-block}
/* 5b More builds: three wide cards after the ring; flip up one by one while scrolling (transform and opacity only) */
#more.moving .mb{will-change:transform}
#more .lab{position:absolute;left:4vw;top:calc(12*var(--u));font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
#more .mrow{position:absolute;left:4vw;right:4vw;top:50%;margin-top:calc(-26*var(--u));display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;perspective:1400px}
#more .mb{--k:1;position:relative;display:flex;flex-direction:column;min-height:calc(52*var(--u));padding:28px 30px;background:#161617;border:1px solid #2c2c2e;border-radius:22px;transform-origin:50% 100%;translate:0 0;transition:translate .25s ease,border-color .25s ease,box-shadow .25s ease;cursor:default}
#more .mb:hover{--k:2.4;translate:0 -6px;border-color:#4a4a4e;box-shadow:0 22px 44px rgba(0,0,0,.45)}
#more .mb .ico2{position:relative;width:120px;height:80px;margin-bottom:auto}
#more .mb h3{font:400 min(calc(5.4*var(--u)),46px)/1 var(--disp);text-transform:uppercase;margin:26px 0 10px;color:var(--fg)}
#more .mb .d{margin:0 0 16px;font-size:15px;line-height:1.45;color:#a9a9a3}
#more .mb .pills{display:flex;flex-wrap:wrap;gap:6px}
#more .mb .pills span{font-size:11.5px;line-height:1.2;border:1px solid #6a6a64;color:#e8dfc8;border-radius:99px;padding:5px 11px}
#more .mb .soon{margin-top:18px;padding-top:14px;border-top:1px solid #2c2c2e;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a85}
#more .mb .soon::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--acc);vertical-align:1px}
/* icon 1: a dot travels along a curved map route */
#more .route{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#more .route path{fill:none;stroke:#4a4a4e;stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round}
#more .route .pin{fill:var(--acc);stroke:none}
#more .rdot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(255,75,58,.25);offset-path:path("M8 62 C 30 8, 52 74, 76 34 S 104 22, 112 14");offset-rotate:0deg;animation:travel calc(3.2s / var(--k)) ease-in-out infinite}
@keyframes travel{0%{offset-distance:0%}100%{offset-distance:100%}}
/* icon 2: play button with a pulsing ring */
#more .play{position:absolute;left:20px;top:0;width:80px;height:80px;border-radius:50%;background:var(--acc)}
#more .play::before{content:"";position:absolute;left:32px;top:25px;border-left:22px solid #111;border-top:15px solid transparent;border-bottom:15px solid transparent}
#more .ring2{position:absolute;left:20px;top:0;width:80px;height:80px;border-radius:50%;border:2px solid var(--acc);animation:ringp calc(1.8s / var(--k)) ease-out infinite}
#more .ring2.b{animation-delay:calc(.9s / var(--k))}
@keyframes ringp{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
/* icon 3: chat bubble with three typing dots */
#more .bub{position:absolute;left:10px;top:4px;width:100px;height:58px;border-radius:16px;background:#26262a;border:1px solid #3a3a3e;display:flex;align-items:center;justify-content:center;gap:8px}
#more .bub::after{content:"";position:absolute;left:18px;bottom:-9px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:10px solid #26262a}
#more .bub i{width:9px;height:9px;border-radius:50%;background:var(--acc);animation:typing calc(1.2s / var(--k)) ease-in-out infinite}
#more .bub i:nth-child(2){animation-delay:calc(.15s / var(--k))}#more .bub i:nth-child(3){animation-delay:calc(.3s / var(--k))}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-7px);opacity:1}}
/* 8b Reach me: email, copy email, contact form (the form fades and rises in on scroll) */
#reach .lab{position:absolute;left:4vw;top:calc(12*var(--u));font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
#reach .left{position:absolute;left:4vw;top:calc(22*var(--u));width:38vw}
#reach h2{font-size:min(calc(15*var(--u)),150px)}
#reach .p{margin:calc(3*var(--u)) 0 calc(4*var(--u));font-size:19px;line-height:1.5;color:var(--muted)}
#reach .acts{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#reach button.btn{font:700 15px var(--body);cursor:pointer;margin-right:0}
#reach .btn.o{background:none}
#reach .copied{font-size:13px;color:#2fd36b;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
#reach .copied.on{opacity:1;transform:none}
#reach .addr{margin-top:calc(3*var(--u));font-size:14px;letter-spacing:.04em;color:#8a8a85}
#reach .form{position:absolute;right:4vw;top:calc(15*var(--u));width:46vw;background:#0e0e0f;border:1px solid #2c2c2e;border-radius:22px;padding:30px 32px;display:flex;flex-direction:column;gap:16px}
#reach .form h3{font:400 min(calc(4.4*var(--u)),40px)/1 var(--disp);text-transform:uppercase;margin:0;color:#e8dfc8}
#reach .f{position:relative;display:block}
#reach .f span{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a85}
#reach .f input,#reach .f textarea{display:block;width:100%;background:#161617;border:1px solid #2c2c2e;border-radius:12px;padding:13px 14px;color:var(--fg);font:400 16px var(--body);outline:none;resize:none}
#reach .f textarea{height:calc(15*var(--u));min-height:90px}
#reach .f .bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
#reach .f:focus-within .bar{transform:scaleX(1)}
#reach .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#reach .msg{min-height:18px;font-size:13px;color:var(--acc)}
#reach .msg.ok{color:#2fd36b}
#reach .send{align-self:flex-start;margin:0;border:0}
/* 6 Education */
#edu h2{right:4vw;top:calc(7*var(--u));font-size:calc(11*var(--u));text-align:right}
#edu .school{position:absolute;left:5vw;right:5vw;display:flex;align-items:center;gap:4vw;border-top:1px solid var(--line);padding-top:calc(2*var(--u))}
#edu .yr{font:400 calc(20*var(--u))/1 var(--disp);color:var(--acc);min-width:40vw}
#edu .school h3{font-size:calc(4.6*var(--u));margin:0 0 6px}
#edu .school p{margin:0;color:var(--muted);font-size:16px}
/* 7 Resume */
#resume h2{left:0;right:0;top:calc(19*var(--u));text-align:center;font-size:calc(30*var(--u))}
#resume .btns{position:absolute;left:0;right:0;top:calc(68*var(--u));text-align:center}
#resume .btn{font-size:20px;padding:16px 38px}#resume .btn.o{padding:14px 36px}
#resume .txt{position:absolute;left:0;right:0;top:calc(80*var(--u));text-align:center;font-size:15px}
/* 8 Contact */
#contact h2{left:50%;top:calc(18*var(--u));white-space:nowrap;transform-origin:50% 50%}
#contact .mail{position:absolute;left:0;right:0;top:calc(64*var(--u));text-align:center}
#contact .mail .big{font:400 calc(6.6*var(--u)) var(--disp);text-transform:none;letter-spacing:.01em}
#contact .mail .tags{margin-top:calc(2.5*var(--u))}
#contact .mail .tag{font-size:calc(3.2*var(--u));padding:calc(.8*var(--u)) 1.6vw;text-transform:none;margin-bottom:calc(1*var(--u))}
/* ===================== Responsive: touch, tablet, phone (desktop above is unchanged) ===================== */
/* ring cards read their size from variables so the tablet ring can be smaller */
#proj .scr{width:var(--cw,520px);height:var(--ch,500px);margin:calc(var(--ch,500px)/-2) 0 0 calc(var(--cw,520px)/-2)}
/* project carousel (phone only) */
#proj .pcar{display:none}
#proj .prev{display:none;font:600 13px/1 var(--body);color:#e8dfc8;background:none;border:1px solid #6a6a64;border-radius:3px;padding:10px 14px;cursor:pointer}
#proj .scr .prev{position:absolute;right:112px;bottom:0}
html.touch #proj .scr.front .prev{display:inline-block}
/* touch: no grain, no mouse spotlight, and a slow idle float instead of the mouse effects */
html.touch #home .grain{display:none}
@keyframes idle-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
html.touch #home .me{animation:idle-float 7s ease-in-out infinite}
html.touch #home .htag{animation:idle-float 6s ease-in-out -2s infinite}
html.touch #more .mb:hover{translate:0 0}
.btn,#reach button.btn,#proj .prev,#proj .visit{touch-action:manipulation}

/* ---- 3D scroll motion helpers: hidden everywhere except phones up to 640px wide (see the rules at the very end) ---- */
.yrbg,.ghost,.sheet,.sayp,.shine,.jdate,.etop,.eedge,.espine{display:none}
.mbi,.mbf,.mbk,.edi{display:contents}

/* ===================== PHONE + TABLET (only when data-bp is not "desk"; desktop above is unchanged) =====================
   Spacing uses only the 8px-grid tokens below. Side gutters: phone 20px, tablet 32px (plus safe areas).
   Sections are min-height 100svh (never a fixed 100vh) with 72px (phone) / 96px (tablet) top and bottom padding. */
html:not([data-bp="desk"]){--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;--g:20px;--gl:max(var(--g),env(safe-area-inset-left,0px));--gr:max(var(--g),env(safe-area-inset-right,0px));--py:72px;--bar:64px;--card-r:20px;--t-body:16px;--t-display:clamp(44px,13vw,96px);--t-title:clamp(32px,9vw,64px)}
html[data-bp^="tab"]{--g:32px;--py:96px;--card-r:22px;--t-body:17px}
html.menu-open,html.menu-open body{overflow:hidden}
/* ---- top bar, full-screen menu, floating "Let's talk" ---- */
.tb,.mnav,.lets{display:none}
html:not([data-bp="desk"]) .tb{display:flex;position:fixed;top:0;left:0;right:0;z-index:960;height:calc(var(--bar) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gr) 0 var(--gl);align-items:center;justify-content:space-between;background:#0e0e0f;border-bottom:1px solid #2c2c2e;transition:transform .3s ease}
html:not([data-bp="desk"]) .tb.hide{transform:translateY(-100%)}
html:not([data-bp="desk"]) .tb .brand{display:flex;align-items:center;min-height:48px;font:400 22px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--fg);text-decoration:none}
html:not([data-bp="desk"]) .tb .mbtn{min-width:48px;min-height:48px;padding:0 var(--s4);border:1px solid #3a3a3e;border-radius:99px;background:none;color:var(--fg);font:600 14px/1 var(--body);cursor:pointer}
html:not([data-bp="desk"]) .mnav{display:flex;flex-direction:column;justify-content:center;gap:var(--s2);position:fixed;inset:0;z-index:950;padding:calc(var(--bar) + var(--s6)) var(--gr) var(--s16) var(--gl);background:#0e0e0f;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
html:not([data-bp="desk"]) .mnav.open{opacity:1;visibility:visible;transition:opacity .3s ease}
html:not([data-bp="desk"]) .mnav a{display:block;min-height:48px;font:400 clamp(34px,10vw,64px)/1.15 var(--disp);text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:0;transform:translateY(40px);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
html:not([data-bp="desk"]) .mnav.open a{opacity:1;transform:none;transition-delay:calc(var(--i)*.06s + .1s)}
html:not([data-bp="desk"]) .lets{display:flex;align-items:center;position:fixed;right:var(--gr);bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));z-index:880;min-height:48px;padding:0 var(--s6);border-radius:99px;background:var(--acc);color:#111;font:700 15px/1 var(--body);text-decoration:none;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
html:not([data-bp="desk"]) .lets.show{opacity:1;transform:none;pointer-events:auto}
/* ---- every section: flow layout ---- */
html:not([data-bp="desk"]) body{font-size:var(--t-body);line-height:1.6}
html:not([data-bp="desk"]) .sec{display:flex;flex-direction:column;height:auto;min-height:calc(100*var(--u));padding:var(--py) var(--gr) var(--py) var(--gl);overflow:hidden;overflow:clip}
html:not([data-bp="desk"]) .meta{position:static;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);font-size:12px;letter-spacing:.1em;line-height:1.6}
html:not([data-bp="desk"]) .meta.t{margin-bottom:var(--s8)}
html:not([data-bp="desk"]) .meta.t span:last-child{display:none}
html:not([data-bp="desk"]) .meta.b{margin-top:auto;padding-top:var(--s12)}
html:not([data-bp="desk"]) .meta a{display:inline-block;min-height:24px}
html:not([data-bp="desk"]) .h3w .red{display:none}
/* ---- Home: a full-screen stage ---- */
html:not([data-bp="desk"]) #home{display:block;height:calc(100*var(--u));min-height:0;padding:0}
html:not([data-bp="desk"]) #home .me{width:100vw;height:calc(68*var(--u));bottom:var(--s24);object-fit:cover;object-position:34% 100%}
html:not([data-bp="desk"]) #home .corner{font-size:12px;letter-spacing:.1em;line-height:1.4}
html:not([data-bp="desk"]) #home .c-tl{left:var(--gl);top:calc(var(--bar) + var(--s4) + env(safe-area-inset-top,0px))}
html:not([data-bp="desk"]) #home .c-tr{display:none}
html:not([data-bp="desk"]) #home .c-bl{left:var(--gl);bottom:calc(var(--s8) + var(--s6))}
html:not([data-bp="desk"]) #home .c-br{left:var(--gl);right:auto;bottom:var(--s8)}
html:not([data-bp="desk"]) #home .htag{white-space:normal;max-width:min(62vw,360px);padding:var(--s2) var(--s3);font-size:14px;line-height:1.35;text-align:left}
/* ---- About: sentence, then three sticky stacking cards ---- */
html:not([data-bp="desk"]) #about{overflow:hidden;overflow:clip}
html:not([data-bp="desk"]) #about .astage{position:relative;display:flex;align-items:center;justify-content:center;min-height:calc(86*var(--u));margin-bottom:var(--s12)}
html:not([data-bp="desk"]) #about .ringS{--rs:min(88vw,60svh);left:50%;top:50%;width:var(--rs);height:var(--rs);margin:calc(var(--rs)/-2) 0 0 calc(var(--rs)/-2)}
html[data-bp="tabp"] #about .ringS{--rs:min(70vw,56svh)}
html:not([data-bp="desk"]) #about .ringI text{font-size:30px}
html:not([data-bp="desk"]) #about .sent{position:relative;left:auto;right:auto;top:auto;margin:0;font-size:clamp(40px,12vw,76px)}
html[data-bp^="tab"] #about .sent{font-size:clamp(56px,10vw,96px)}
html:not([data-bp="desk"]) #about .deck{position:relative;left:auto;top:auto;width:100%;height:auto;display:flex;flex-direction:column}
html:not([data-bp="desk"]) #about .card{position:sticky;left:auto;top:calc(72px + var(--i,0)*14px);width:100%;height:auto;min-height:var(--ch,0px);margin:0 0 var(--s24);padding:var(--s6);border-radius:var(--card-r);transform-origin:50% 0}
html[data-bp^="tab"] #about .card{width:70vw;margin-left:auto;margin-right:auto;margin-bottom:var(--s24)}
html:not([data-bp="desk"]) #about .card:last-child{margin-bottom:0}
html:not([data-bp="desk"]) #about .card h3{font-size:clamp(28px,8vw,44px);margin:var(--s2) 0 var(--s4)}
html:not([data-bp="desk"]) #about .card .no{font-size:12px;letter-spacing:.1em}
html:not([data-bp="desk"]) #about .c1 .ph{height:clamp(176px,48vw,264px);flex:none}
html:not([data-bp="desk"]) #about .c1 p{margin:var(--s4) 0 0;font-size:var(--t-body);line-height:1.6;max-width:60ch}
html:not([data-bp="desk"]) #about .c2 .st{gap:var(--s4);padding:var(--s3) 0}
html:not([data-bp="desk"]) #about .c2 .num{font-size:clamp(56px,17vw,96px);min-width:40%}
html:not([data-bp="desk"]) #about .c2 .lbl{font-size:12px;letter-spacing:.1em}
html:not([data-bp="desk"]) #about .c3 .now{margin:var(--s2) 0 var(--s4);font-size:clamp(17px,4.6vw,22px)}
html:not([data-bp="desk"]) #about .c3 .loc{font-size:clamp(28px,8vw,40px)}
html:not([data-bp="desk"]) #about .c3 .icos{padding-top:var(--s6);flex-wrap:wrap;gap:var(--s4) 0}
html[data-bp="phone"] #about .ico{flex:0 0 33.33%}
html:not([data-bp="desk"]) #about .ico svg{width:36px;height:36px}
html:not([data-bp="desk"]) #about .ico span{font-size:12px;letter-spacing:.08em}
html:not([data-bp="desk"]) #about.moving .card{will-change:transform}
/* ---- Skills: two marquees, then the skill groups as tappable pills ---- */
.sgroups{display:none}
html:not([data-bp="desk"]) #skills h2{position:static;font-size:var(--t-title);line-height:1;margin:0 0 var(--s8)}
html:not([data-bp="desk"]) #skills .row{position:relative;left:auto;top:auto;margin:0 0 var(--s4) calc(-1*var(--gl))}
html:not([data-bp="desk"]) .tag{padding:var(--s2) var(--s4);margin-right:var(--s2);border-width:1.5px;font-size:20px;line-height:1.2}
html:not([data-bp="desk"]) #skills .sgroups{display:grid;grid-template-columns:1fr;gap:var(--s8);margin-top:var(--s12)}
html[data-bp^="tab"] #skills .sgroups{grid-template-columns:1fr 1fr}
html:not([data-bp="desk"]) #skills .sgroups h4{margin:0 0 var(--s3);font:500 12px/1.6 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html:not([data-bp="desk"]) #skills .sgroups .pl{display:flex;flex-wrap:wrap;gap:var(--s2)}
html:not([data-bp="desk"]) #skills .pill2{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s4);border:1px solid #3a3a3e;border-radius:99px;background:none;color:var(--fg);font:500 15px/1 var(--body);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
html:not([data-bp="desk"]) #skills .pill2.sel{background:var(--acc);border-color:var(--acc);color:#111}
/* ---- Experience: a line on the left, job cards (tablet: dates left, card right) ---- */
html:not([data-bp="desk"]) #exp h2{position:static;font-size:var(--t-title);line-height:1;text-align:left;margin:0 0 var(--s8)}
html:not([data-bp="desk"]) #exp .track,html:not([data-bp="desk"]) #exp .line,html:not([data-bp="desk"]) #exp .dot{display:none}
html:not([data-bp="desk"]) #exp .jobs{position:relative;display:flex;flex-direction:column;gap:var(--s6);padding-left:var(--s8)}
html:not([data-bp="desk"]) #exp .cline{display:block;position:absolute;left:7px;top:var(--s2);bottom:var(--s2);width:2px;background:#2a2a2d}
html:not([data-bp="desk"]) #exp .cline i{position:absolute;inset:0;background:var(--acc);transform-origin:top;transform:scaleY(0)}
html:not([data-bp="desk"]) #exp .item{position:relative;left:auto;top:auto!important;width:auto;opacity:1}
html:not([data-bp="desk"]) #exp .item .jc{background:#161617;border:1px solid #2c2c2e;border-radius:var(--card-r);padding:var(--s6)}
html:not([data-bp="desk"]) #exp .item .date{margin:0 0 var(--s2);font-size:12px;letter-spacing:.1em}
html:not([data-bp="desk"]) #exp .item h3{margin:0 0 var(--s2);font-size:clamp(24px,7vw,32px);line-height:1.1}
html:not([data-bp="desk"]) #exp .item .role{margin:0 0 var(--s3);font-size:var(--t-body)}
html:not([data-bp="desk"]) #exp .item ul{margin:0;padding-left:var(--s4);font-size:15px;line-height:1.6}
html:not([data-bp="desk"]) #exp .item li{margin:0 0 var(--s2)}
html:not([data-bp="desk"]) #exp .cdot{display:block;position:absolute;left:calc(-1*var(--s8) + 1px);top:var(--s6);width:16px;height:16px;border-radius:50%;background:#2a2a2d;z-index:2;transition:background .3s ease}
html:not([data-bp="desk"]) #exp .cdot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--acc);opacity:0}
html:not([data-bp="desk"]) #exp .cdot.on{background:var(--acc)}
html:not([data-bp="desk"]) #exp .cdot.on::after{animation:dotp 1.6s ease-out infinite}
@keyframes dotp{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
html[data-bp^="tab"] #exp .jobs{padding-left:0}
html[data-bp^="tab"] #exp .cline{left:143px}
html[data-bp^="tab"] #exp .item{display:grid;grid-template-columns:120px 1fr;column-gap:var(--s12)}
html[data-bp^="tab"] #exp .item .date{padding-top:var(--s6)}
html[data-bp^="tab"] #exp .cdot{left:136px}
/* ---- Projects: swipe carousel on phone and tablet portrait; the smaller flatter ring on tablet landscape ---- */
.pdots i{display:block}
html:not([data-bp="desk"]) #proj h2{position:static;font-size:var(--t-title);line-height:1;margin:0 0 var(--s8)}
html[data-bp="phone"] #proj .meta.b,html[data-bp="tabp"] #proj .meta.b{display:none}
html[data-bp="phone"] #proj .stage,html[data-bp="tabp"] #proj .stage{display:none}
html[data-bp="phone"] #proj .pcar,html[data-bp="tabp"] #proj .pcar{--sw:80vw;--pad:calc((100vw - var(--sw))/2);display:block;margin:0 calc(-1*var(--gr)) 0 calc(-1*var(--gl))}
html[data-bp="tabp"] #proj .pcar{--sw:72vw}
html[data-bp="phone"] #proj .ptrack,html[data-bp="tabp"] #proj .ptrack{display:flex;gap:var(--s4);padding:var(--s2) var(--pad) var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
html[data-bp="phone"] #proj .slide,html[data-bp="tabp"] #proj .slide{flex:0 0 var(--sw);scroll-snap-align:center;scroll-snap-stop:always;transform-origin:50% 50%}
html[data-bp="phone"] #proj .slide .win,html[data-bp="tabp"] #proj .slide .win{background:#161617;border:2px solid #3a3a3e;border-radius:10px;overflow:hidden}
html[data-bp="phone"] #proj .slide .info,html[data-bp="tabp"] #proj .slide .info{padding:var(--s4) 0 0}
html[data-bp="phone"] #proj .slide .info h3,html[data-bp="tabp"] #proj .slide .info h3{margin:0 0 var(--s2);font:400 clamp(24px,7vw,32px)/1.1 var(--disp);text-transform:uppercase}
html[data-bp="phone"] #proj .slide .info .d,html[data-bp="tabp"] #proj .slide .info .d{margin:0 0 var(--s3);font-size:15px;line-height:1.6;color:#a9a9a3}
html[data-bp="phone"] #proj .tags,html[data-bp="tabp"] #proj .tags{max-width:none;gap:var(--s2)}
html[data-bp="phone"] #proj .tags span,html[data-bp="tabp"] #proj .tags span{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);font-size:13px}
html[data-bp="phone"] #proj .slide .acts,html[data-bp="tabp"] #proj .slide .acts{display:flex;gap:var(--s3);margin-top:var(--s4)}
html[data-bp="phone"] #proj .slide .visit,html[data-bp="tabp"] #proj .slide .visit,html[data-bp="phone"] #proj .slide .prev,html[data-bp="tabp"] #proj .slide .prev{position:static;display:inline-flex;flex:1;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s4);font-size:15px;border-radius:4px;text-align:center}
html[data-bp="phone"] #proj .pdots,html[data-bp="tabp"] #proj .pdots{display:flex;justify-content:center;gap:var(--s1);margin-top:var(--s4)}
html[data-bp="phone"] #proj .pdots i,html[data-bp="tabp"] #proj .pdots i{box-sizing:content-box;width:8px;height:8px;padding:var(--s2);border-radius:50%;background:#3a3a3e;background-clip:content-box;transition:background .2s ease;cursor:pointer}
html[data-bp="phone"] #proj .pdots i.on,html[data-bp="tabp"] #proj .pdots i.on{background:var(--acc);background-clip:content-box}
html[data-bp="tabl"] #proj{display:block;height:calc(100*var(--u));min-height:0;padding:0}
html[data-bp="tabl"] #proj .meta{display:none}
html[data-bp="tabl"] #proj h2{position:absolute;top:calc(var(--bar) + var(--s6));left:var(--gl);margin:0}
html[data-bp="tabl"] #proj .stage{perspective:2600px}
html[data-bp="tabl"] #proj .ring{top:57%}
html[data-bp="tabl"] #proj .scr{--cw:400px;--ch:440px}
html[data-bp="tabl"] #proj .scr .info{padding-bottom:var(--s12)}
html[data-bp="tabl"] #proj .scr .tags{max-width:100%}
html[data-bp="tabl"] #proj .visit,html[data-bp="tabl"] #proj .scr .prev{min-height:48px;padding:0 var(--s6);align-items:center;justify-content:center}
html[data-bp="tabl"] #proj .scr.front .visit{display:inline-flex}
html[data-bp="tabl"] #proj .scr .prev{right:136px}
html.touch[data-bp="tabl"] #proj .scr.front .prev{display:inline-flex}
/* ---- More builds: stacked on phone, 2 + 1 on tablet ---- */
html:not([data-bp="desk"]) #more .lab{position:static;margin:0 0 var(--s6);font-size:12px;letter-spacing:.1em}
html:not([data-bp="desk"]) #more .mrow{position:static;margin:0;grid-template-columns:1fr;gap:var(--s6)}
html[data-bp^="tab"] #more .mrow{grid-template-columns:1fr 1fr}
html[data-bp^="tab"] #more .mb:nth-child(3){grid-column:1/-1}
html:not([data-bp="desk"]) #more .mb{min-height:0;padding:var(--s6);border-radius:var(--card-r)}
html:not([data-bp="desk"]) #more .mb .ico2{margin-bottom:var(--s6)}
html:not([data-bp="desk"]) #more .mb h3{margin:0 0 var(--s2);font-size:clamp(28px,8vw,40px)}
html:not([data-bp="desk"]) #more .mb .d{margin:0 0 var(--s4);font-size:var(--t-body);line-height:1.6}
html:not([data-bp="desk"]) #more .mb .pills span{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);font-size:13px}
html:not([data-bp="desk"]) #more .mb .soon{margin-top:var(--s4);padding-top:var(--s3);font-size:12px}
/* ---- Education ---- */
html:not([data-bp="desk"]) #edu h2{position:static;font-size:var(--t-title);line-height:1;text-align:left;margin:0 0 var(--s8)}
html:not([data-bp="desk"]) #edu .school{position:relative;left:auto;right:auto;top:auto!important;flex-direction:column;align-items:flex-start;gap:var(--s2);margin:0 0 var(--s6);padding:var(--s6);background:#161617;border:1px solid #2c2c2e;border-radius:var(--card-r)}
html:not([data-bp="desk"]) #edu .yr{min-width:0;font-size:clamp(56px,16vw,96px);line-height:1}
html:not([data-bp="desk"]) #edu .school h3{margin:0 0 var(--s2);font-size:clamp(24px,7vw,32px);line-height:1.1}
html:not([data-bp="desk"]) #edu .school p{max-width:60ch;font-size:var(--t-body);line-height:1.6}
/* ---- Resume ---- */
html:not([data-bp="desk"]) #resume h2{position:static;margin:auto 0 var(--s8);font-size:var(--t-display);line-height:1;text-align:left}
html:not([data-bp="desk"]) #resume .mask{display:block;overflow:hidden;padding:.06em 0}
html:not([data-bp="desk"]) #resume .m-in{display:block}
html:not([data-bp="desk"]) #resume .btns{position:static;display:flex;flex-direction:column;gap:var(--s3);text-align:left}
html[data-bp^="tab"] #resume .btns{flex-direction:row;flex-wrap:wrap}
html:not([data-bp="desk"]) #resume .btn{margin:0;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s6);font-size:16px}
html:not([data-bp="desk"]) #resume .btn.o{padding:0 var(--s6)}
html:not([data-bp="desk"]) #resume .txt{position:static;margin:var(--s6) 0 auto;text-align:left;font-size:14px}
/* ---- Contact ---- */
html:not([data-bp="desk"]) #contact h2{position:static;left:auto;margin:auto 0 var(--s8);font-size:var(--t-display);line-height:1;text-align:center;white-space:normal;transform-origin:50% 50%}
html:not([data-bp="desk"]) #contact .mail{position:static;margin-bottom:auto;text-align:center}
html:not([data-bp="desk"]) #contact .mail .big{margin-bottom:var(--s6);font-size:clamp(20px,5.6vw,32px);word-break:break-word}
html:not([data-bp="desk"]) #contact .mail .tags{display:flex;flex-direction:column;gap:var(--s3);margin:0}
html[data-bp^="tab"] #contact .mail .tags{flex-direction:row;justify-content:center}
html:not([data-bp="desk"]) #contact .mail .tag{display:flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:0 var(--s4);font-size:clamp(16px,4.2vw,20px);text-transform:none;white-space:normal;word-break:break-all}
html:not([data-bp="desk"]) #contact .mail .txt{margin-top:var(--s6);font-size:var(--t-body)}
html:not([data-bp="desk"]) #reach .lab{position:static;margin:0 0 var(--s4);font-size:12px;letter-spacing:.1em}
html:not([data-bp="desk"]) #reach .left{position:static;width:auto}
html:not([data-bp="desk"]) #reach h2{margin:0 0 var(--s4);font-size:var(--t-title);line-height:1}
html:not([data-bp="desk"]) #reach .p{max-width:60ch;margin:0 0 var(--s6);font-size:var(--t-body)}
html:not([data-bp="desk"]) #reach .acts{flex-direction:column;align-items:stretch;gap:var(--s3)}
html:not([data-bp="desk"]) #reach .btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px}
html:not([data-bp="desk"]) #reach .addr{margin-top:var(--s6);font-size:14px}
html:not([data-bp="desk"]) #reach .form{position:static;width:100%;margin-top:var(--s8);padding:var(--s6);border-radius:var(--card-r)}
html:not([data-bp="desk"]) #reach .f input,html:not([data-bp="desk"]) #reach .f textarea{min-height:48px;font-size:16px}
html:not([data-bp="desk"]) #reach .send{align-self:stretch;width:100%;min-height:48px}
html[data-bp^="tab"] #reach{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s12);align-content:start}
html[data-bp^="tab"] #reach .meta,html[data-bp^="tab"] #reach .lab{grid-column:1/-1}
html[data-bp^="tab"] #reach .form{margin-top:0}
/* ---- short screens (a phone held sideways): Home corners need the room ---- */
@media (max-height:500px){
html[data-bp="phone"] #home .c-bl{display:none}
html[data-bp="phone"] #home .me{height:calc(60*var(--u));bottom:var(--s8)}
html[data-bp="phone"] #home .c-br{bottom:var(--s4)}
}

/* ===================== PHONES UP TO 640px WIDE: 3D scroll motion (Experience to Contact) =====================
   CSS transforms only (perspective, rotateX/rotateY, translateZ, scale, opacity). Shadows are static. Desktop and tablet are untouched. */
@media (max-width:640px){
html[data-bp="phone"] #exp .jobs{gap:var(--s16);padding-top:var(--s12)}
html[data-bp="phone"] #exp .item .jc{position:relative;z-index:1;backface-visibility:hidden;box-shadow:0 24px 40px rgba(0,0,0,.45)}
html[data-bp="phone"] #exp .item .date{display:none}
html[data-bp="phone"] #exp .jdate{display:block;margin:0 0 var(--s2);font:500 12px/1.6 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html[data-bp="phone"] #exp .yrbg{display:block;position:absolute;z-index:0;left:var(--s2);top:calc(-1*var(--s12));font:400 clamp(56px,17vw,88px)/1 var(--disp);white-space:nowrap;color:#4a1612;text-shadow:1px 1px 0 #3f1310,2px 2px 0 #38110e,3px 3px 0 #31100c,4px 4px 0 #2a0e0a,5px 5px 0 #240c09,6px 6px 0 #1e0a07;pointer-events:none}
html[data-bp="phone"] #proj .shine{display:block;position:absolute;top:0;bottom:0;left:0;width:40%;z-index:3;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.22),rgba(255,255,255,0));transform:translateX(-130%) skewX(-18deg)}
html[data-bp="phone"] #proj .slide{backface-visibility:hidden}
html[data-bp="phone"] #more .mb{padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-bp="phone"] #more .mbi{display:grid;position:relative;transform-style:preserve-3d}
html[data-bp="phone"] #more .mbf,html[data-bp="phone"] #more .mbk{display:flex;flex-direction:column;grid-area:1/1;padding:var(--s6);background:#161617;border:1px solid #2c2c2e;border-radius:var(--card-r);backface-visibility:hidden;-webkit-backface-visibility:hidden}
html[data-bp="phone"] #more .mbf{justify-content:space-between}
html[data-bp="phone"] #more .mbk{justify-content:center;transform:rotateY(180deg)}
html[data-bp="phone"] #more .mbf h3{margin:0}
html[data-bp="phone"] #edu h2{margin-bottom:var(--s24)}
html[data-bp="phone"] #edu .edi{display:block;position:relative;margin-bottom:var(--s12);padding-top:clamp(88px,28vw,140px)}
html[data-bp="phone"] #edu .school{position:relative;z-index:1;margin:0;transform-origin:50% 0;backface-visibility:hidden}
html[data-bp="phone"] #edu .yr{display:none}
html[data-bp="phone"] #edu .ghost{display:block;position:absolute;z-index:0;left:0;top:0;font:400 clamp(88px,28vw,140px)/1 var(--disp);color:transparent;-webkit-text-stroke:1.5px #e8dfc8;pointer-events:none}
html[data-bp="phone"] #resume .sheet{display:block;position:relative;margin:0 0 var(--s8);overflow:hidden;border-radius:4px;background:#fff;box-shadow:0 24px 48px rgba(0,0,0,.6);transform-origin:50% 100%;backface-visibility:hidden}
html[data-bp="phone"] #resume .sheet img{display:block;width:100%;height:auto}
html[data-bp="phone"] #contact h2:not(.sayp){display:none}
html[data-bp="phone"] #contact .sayp{display:block;margin:auto 0 var(--s8);font-size:clamp(56px,20vw,96px);line-height:1;text-align:center;color:var(--fg)}
html[data-bp="phone"] #contact .sayp .wd{display:inline-block;white-space:nowrap;margin:0 .12em}
html[data-bp="phone"] #contact .sayp .lt3{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
html[data-bp="phone"] #contact .mail .big{padding:var(--s6);background:#161617;border:1px solid #2c2c2e;border-radius:var(--card-r);box-shadow:0 24px 40px rgba(0,0,0,.45);font-size:clamp(18px,5vw,26px);animation:float3 6s ease-in-out infinite}
html[data-bp="phone"] #reach .f{transform-origin:50% 0;backface-visibility:hidden}
}
@keyframes float3{0%,100%{translate:0 0}50%{translate:0 -8px}}

@media (max-width:640px){
html[data-bp="phone"] #edu .school{background:linear-gradient(160deg,#1c1c1f 0%,#141415 60%,#1d1210 100%);box-shadow:0 28px 48px rgba(0,0,0,.55);overflow:hidden}
html[data-bp="phone"] #edu .eedge{display:block;position:absolute;left:0;right:0;top:0;height:2px;background:var(--acc);transform-origin:left;transform:scaleX(0)}
html[data-bp="phone"] #edu .etop{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin:0 0 var(--s4)}
html[data-bp="phone"] #edu .lvl{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s4);border:1px solid #6a6a64;border-radius:99px;font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--cream,#e8dfc8)}
html[data-bp="phone"] #edu .gpa{display:inline-flex;align-items:baseline;gap:var(--s2);font:500 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html[data-bp="phone"] #edu .gpa b{font:400 40px/1 var(--disp);letter-spacing:0;color:var(--acc)}
html[data-bp="phone"] #edu .ghost.lit{color:var(--acc);-webkit-text-stroke:0;opacity:0}
html[data-bp="phone"] #edu .espine{display:block;position:absolute;left:var(--s6);top:calc(100% + var(--s2));height:calc(var(--s12) - var(--s4));width:2px;background:linear-gradient(var(--acc),rgba(255,75,58,0));transform-origin:top;transform:scaleY(0)}
html[data-bp="phone"] #edu .edi:last-of-type .espine{display:none}
}
/* contact form: the hidden spam trap field (humans never see or fill it) */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}