/* ---- page shell ---- */
html,body{margin:0;overflow-x:clip}
body{background:#120600;color:#fff3e0;font-family:'Jost',system-ui,sans-serif;margin:0}
.page{position:relative;height:420vh;background:#120600}
.scene{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:radial-gradient(120vmax 90vmax at 50% 34%,var(--sun,#ffb01f) 0%,#c9480a 18%,#6a1c03 42%,#1c0800 70%,#0b0300 100%)}
.sun{position:absolute;left:50%;top:32%;width:72vmin;height:72vmin;margin:-36vmin 0 0 -36vmin;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff6b0 0%,var(--sun,#ffb01f) 38%,#ff8a1f 70%,rgba(255,138,31,0) 72%);box-shadow:0 0 18vmin 6vmin rgba(255,170,40,.55),0 0 60vmin 20vmin rgba(220,90,10,.45);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.haze{position:absolute;inset:-10% -10% 0;background:linear-gradient(180deg,rgba(255,140,40,0) 0%,rgba(255,140,40,.18) 35%,rgba(255,120,30,.26) 55%,rgba(40,10,0,0) 80%);pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,0,0)}}
.floor{position:absolute;left:0;right:0;bottom:0;height:26vh;background:linear-gradient(180deg,rgba(20,6,0,0) 0%,#170700 55%,#0b0300 100%)}
.intro-arc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .25s}
.intro-arc text{font-family:'Jost',system-ui,sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;fill:#1b0a02}
.cue{position:absolute;left:50%;top:var(--ct,50%);transform:translate(-50%,-50%);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,243,224,.85);opacity:var(--intro,1);filter:blur(var(--blur,0px));transition:opacity .25s,filter .25s;pointer-events:none;z-index:2;white-space:nowrap}
.cue span{display:block;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(8px)}}

/* ---- phone ---- */
.device{position:absolute;left:0;top:0;width:var(--dw,390px);height:var(--dh,844px);transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--sx,.7),var(--sy,.7));transform-origin:50% 0;will-change:transform}
.bezel{position:absolute;inset:0;border-radius:56px;background:#0a0402;box-shadow:0 0 0 1.5px rgba(255,200,120,.35),0 0 0 10px #140804,0 0 0 11.5px rgba(255,180,90,.25),0 60px 120px rgba(0,0,0,.6),0 0 80px rgba(255,140,40,.25)}
.screen{position:absolute;inset:0;border-radius:56px;overflow:hidden;background:#000}
.island{position:absolute;left:50%;top:14px;width:120px;height:34px;margin-left:-60px;border-radius:20px;background:#000;pointer-events:none;z-index:30}
.glass{position:absolute;inset:0;opacity:var(--off,1);pointer-events:none;background:linear-gradient(160deg,rgba(255,160,60,.22) 0%,rgba(255,160,60,.04) 35%,rgba(0,0,0,0) 60%);transition:opacity .35s}
.boot{position:absolute;inset:0;display:grid;place-items:center;opacity:var(--boot,0);pointer-events:none;transition:opacity .35s}
.boot .m{line-height:1;font-size:96px;font-weight:700;letter-spacing:-.06em;color:#fff3e0;text-shadow:0 0 40px rgba(255,170,40,var(--glow,.4)),0 0 120px rgba(255,120,20,var(--glow,.4))}
.boot .track{width:140px;height:2px;background:rgba(255,243,224,.18);border-radius:2px;overflow:hidden;margin-top:28px}
.boot .bar{height:100%;width:var(--bar,0%);background:#ffb547;box-shadow:0 0 12px #ffb547}
.home{position:absolute;inset:0;opacity:var(--home,0);pointer-events:var(--homeev,none);transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .35s;background:radial-gradient(60% 34% at 50% 22%,#ffd36a 0%,#ff9a24 30%,#b8420a 62%,#2a0c02 100%)}
.home-head{position:absolute;left:0;right:0;top:64px;text-align:center;display:flex;flex-direction:column;gap:4px}
.home-head .hi{font-size:15px;font-weight:500;color:#1b0a02}
.home-head .big{font-size:38px;font-weight:600;letter-spacing:-.035em;line-height:1.05;color:#fff3e0;white-space:nowrap}
.home-head .sub{font-size:13px;color:#1b0a02;font-weight:500}
.grid{position:absolute;left:24px;right:24px;top:236px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 14px}
.tile{background:none;border:0;padding:0;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff3e0;text-decoration:none}
.tile:active .ico{transform:scale(.92)}
.ico{width:64px;height:64px;border-radius:16px;overflow:hidden;display:grid;place-items:center;transition:transform .15s;background:none}
.ico img{display:block}
.ico img.set{width:84px;height:84px;margin:-10px}
.ico img.flush{width:64px;height:64px}
.ico.dark{background:#000}
.ico img.cover{width:64px;height:64px;object-fit:cover}
.tl{font-size:11px;color:#fff3e0}
.tile.pulse .ico{position:relative;animation:tileglow 1.8s ease-in-out infinite;overflow:visible}
.tile.pulse .ico::after{content:"";position:absolute;inset:-6px;border-radius:22px;border:2px solid #ffb547;animation:tilering 1.8s ease-out infinite;pointer-events:none}
@keyframes tileglow{0%,100%{box-shadow:0 0 0 0 rgba(255,181,71,0)}50%{box-shadow:0 0 28px 6px rgba(255,181,71,.55)}}
@keyframes tilering{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.tile.pulse .ico img{border-radius:16px}
.dock{position:absolute;left:24px;right:24px;bottom:28px;height:84px;border-radius:28px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:space-around;padding:0 10px}
.dock button{background:none;border:0;padding:0;width:58px;height:58px;border-radius:14px;overflow:hidden;cursor:pointer;display:grid;place-items:center}
.dock img{width:76px;height:76px;margin:-9px;display:block}
.home.settled .home-head{animation:settle .5s cubic-bezier(.2,.8,.2,1)}
@keyframes settle{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
.hbar{position:absolute;left:50%;bottom:10px;width:120px;height:4px;margin-left:-60px;border-radius:2px;background:rgba(255,243,224,.7)}

/* ---- apps ---- */
.app{position:absolute;inset:0;display:none;overflow:hidden;border-radius:var(--sr,56px);flex-direction:column;overflow:hidden;transform-origin:var(--ox,50%) var(--oy,50%);z-index:20}
.app.on{display:flex;animation:appin .42s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes appin{from{transform:scale(.18);opacity:0;border-radius:40px}to{transform:scale(1);opacity:1;border-radius:var(--sr,56px)}}
.app .top{height:58px;flex:none}
.app .nav{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 10px;flex:none}
.app .back{background:none;border:0;padding:0 10px 0 4px;min-height:44px;min-width:44px;font:inherit;font-size:17px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:2px;color:inherit;border-radius:10px}
.app .back:active{opacity:.5}
.app .nav{min-height:48px}
.app .back .chev{font-size:30px;line-height:1;font-weight:300;margin-top:-3px}
.app .ttl{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.app .body>*{max-width:100%;box-sizing:border-box;flex:none}
.app .body img,.app .body video{max-width:100%}
.app .body{flex:1;min-height:0;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;overflow-wrap:anywhere;padding:8px 20px 110px;display:flex;flex-direction:column;gap:14px;-webkit-overflow-scrolling:touch}
.app .homebtn{position:absolute;left:50%;bottom:0;width:160px;height:28px;margin-left:-80px;background:none;border:0;cursor:pointer;display:grid;place-items:center;z-index:5}
.app .homebtn span{width:120px;height:4px;border-radius:2px;display:block;background:currentColor;opacity:.6}
/* themed apps reuse the site's section styles, scaled for the phone */
.themed{--bg:#1E1A17;--bg2:#2A2420;--ink:#F1E6D6;--muted:#A89A88;--line:rgba(241,230,214,.10);--line2:rgba(241,230,214,.18);--accent:#D9682B;--accent-soft:rgba(217,104,43,.16);--orange:#D9682B;--card:#2A2420;background:var(--bg);color:var(--ink);font-family:'Jost',system-ui,sans-serif}
/* Eames leather palette: warm near-black, cream text, burnt orange accent; white surfaces become raised cards */
.themed .card,.themed .close,.themed .pipe-node,.themed .node .orb{background:var(--card);box-shadow:none}
.themed .chip.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.themed .shaped,.themed .skill{background:var(--card)}
.themed .ph{background:repeating-linear-gradient(135deg,rgba(241,230,214,.04) 0 8px,transparent 8px 16px),var(--card)}
.themed .era-photo,.themed .about-photo{box-shadow:0 12px 32px rgba(0,0,0,.35)}
.themed .phone{border-color:#0d0b0a;box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 0 1px rgba(241,230,214,.12)}
.themed .body{gap:0}
.themed .eyebrow{font-size:11px;color:var(--accent)}
.themed h2{font-size:34px;line-height:1.02;margin:0 0 12px}
.themed h3{font-size:22px}
.themed .sub{font-size:15px;margin-bottom:18px}
.themed p,.themed li{font-size:14px}
.themed .era{margin:0 0 28px;padding-top:18px}
.themed .artifact{grid-template-columns:96px 1fr;gap:12px;padding:12px}
.themed .artifact-text p{font-size:12px}
.themed .artifact-text h4{font-size:14px}
.themed .thumb{max-height:none;cursor:zoom-in;display:block;text-decoration:none}
.themed .pipeline{min-height:0}
.themed .shaped{padding:12px 14px}
.themed .shaped b{font-size:13px}.themed .shaped span{font-size:12px}
.themed .project-card{grid-template-columns:110px 1fr;gap:14px;padding:14px}
.themed .project-card h3{font-size:18px}
.themed .project-card p{font-size:13px}
.themed .phone.sm{position:relative;width:96px;height:auto;margin:0;transform:none;aspect-ratio:1206/2472;border-radius:16px;border-width:3px}
.themed .nfc-scene{aspect-ratio:1}
.themed .phone-hero .phone{position:relative;width:220px;height:auto;margin:0;transform:none;aspect-ratio:1206/2622;border-radius:32px;border-width:5px}
.themed .phone-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.themed .role-line{font-size:12px;margin-bottom:20px}
.themed .stats{grid-template-columns:repeat(3,1fr);gap:8px}
.themed .stat{padding:12px 10px}.themed .stat b{font-size:20px;color:var(--accent)}.themed .stat span{font-size:10px}
.themed .tools{grid-template-columns:1fr;gap:4px 0}
.themed .btn{background:var(--accent);color:#1E1A17;box-shadow:none}
.themed .link{color:var(--accent);font-weight:600}
/* button warms up like a filament on hover/press: deeper orange to bright amber with a growing glow */
.themed .btn{transition:transform .2s}
.themed .btn:hover,.themed .btn:focus-visible,.themed .btn:active{transform:translateY(-1px);animation:bulb .7s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes bulb{0%{background:#D9682B;box-shadow:0 0 0 rgba(255,150,60,0)}35%{background:#E8792F;box-shadow:0 0 10px rgba(255,140,50,.35)}70%{background:#F59338;box-shadow:0 0 20px rgba(255,160,70,.5)}100%{background:#FFAA4C;box-shadow:0 0 28px rgba(255,175,90,.6),0 0 6px rgba(255,210,150,.6) inset}}
.themed .using{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.themed .using li{font-size:15px;color:var(--muted)}
.themed .using b{color:var(--ink);font-weight:600}
.shotrow{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:12px;align-items:center;margin:0 0 14px}
.shotrow.rev{grid-template-columns:140px minmax(0,1fr)}
.shotcap{font-size:12px!important;color:#6b6760;line-height:1.55;margin:0!important}
.shot{aspect-ratio:1206/2622;border-radius:20px;border:3px solid #1c1c22;background:#000;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;display:block}

/* native-looking apps */
.ios-dark{background:#000;color:#fff;font-family:-apple-system,'Inter',system-ui,sans-serif}
.white{background:#fff;color:#202124;font-family:-apple-system,'Inter',system-ui,sans-serif}
.seg{display:flex;background:rgba(118,118,128,.24);border-radius:9px;padding:2px}
.seg span{padding:4px 16px;border-radius:7px;font-size:13px;color:rgba(255,255,255,.8)}
.seg span.on{background:#636366;color:#fff;font-weight:600}
.recent{display:grid;grid-template-columns:24px minmax(0,1fr) auto 28px;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.recent svg{width:18px;height:18px;stroke:rgba(255,255,255,.6);fill:none;stroke-width:2;stroke-linecap:round}
.recent .n{font-size:17px;font-weight:500}.recent .s{font-size:13px;color:rgba(255,255,255,.6)}
.recent .w{font-size:15px;color:rgba(255,255,255,.6)}
.recent .i{width:22px;height:22px;border-radius:50%;border:1.5px solid #ff9f0a;color:#ff9f0a;display:grid;place-items:center;font-size:12px;font-family:Georgia,serif}
.recent.missed .n,.recent.missed svg{color:#ff453a;stroke:#ff453a}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:92px;background:rgba(28,28,30,.96);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-around;align-items:flex-start;padding-top:10px}
.tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:rgba(255,255,255,.55)}
.tabbar span.on{color:#ff9f0a}
.tabbar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
.tabbar svg.f{fill:currentColor;stroke:none}
.ig-post{border-top:1px solid #efefef}
.ig-head{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px}
.ig-head img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.ig-head b{font-weight:600}.ig-head small{font-size:12px;color:#8e8e8e}
.ig-media{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;max-width:100%}
.ig-post{min-width:0}
.ig-media.sq{aspect-ratio:1}
.ig-cap{padding:10px 14px 16px;font-size:13px;line-height:1.5}
.mail{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid #f1f3f4}
.mail .av{width:40px;height:40px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700}
.mail .c{display:flex;flex-direction:column;gap:2px;min-width:0}
.mail .c span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.mail .c .f{font-size:15px;font-weight:600}.mail .c .sj{font-weight:600}.mail .c .sn{color:#5f6368}
.mail .t{font-size:12px;color:#5f6368}
.compose{display:none;flex-direction:column;flex:1;min-height:0}
.gmail.composing .compose{display:flex}.gmail.composing .inbox{display:none!important}
.compose label{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #e0e0e0;font-size:14px}
.compose label span{color:#5f6368;width:52px;flex:none}
.compose input,.compose textarea{flex:1;border:0;font:inherit;font-size:14px;color:#202124;background:none;outline:none}
.compose textarea{min-height:220px;resize:none;line-height:1.5;width:100%}
.static{position:absolute;inset:0;background:repeating-radial-gradient(circle at 17% 29%,rgba(255,255,255,.9) 0 1px,transparent 1px 3px),repeating-radial-gradient(circle at 63% 71%,rgba(255,255,255,.7) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 2px),linear-gradient(#777,#222);background-size:7px 7px,11px 11px,100% 2px,100% 100%;animation:noise .12s steps(2) infinite;filter:contrast(1.6) brightness(1.1)}
@keyframes noise{0%{background-position:0 0,0 0,0 0,0 0}50%{background-position:3px -2px,-4px 5px,0 1px,0 0}100%{background-position:-2px 4px,5px -3px,0 0,0 0}}
.scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 50%,transparent 100%);background-size:100% 18px;animation:scan 1.2s linear infinite;mix-blend-mode:multiply}
@keyframes scan{from{background-position:0 0}to{background-position:0 18px}}
.yt-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden;flex:none}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:none}
.yt.ready .yt-frame iframe{display:block}
.yt.ready .static,.yt.ready .scan,.yt.ready .tuning{display:none}
.tuning{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:'Courier New',monospace;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.8)}
.chip{display:inline-flex;align-items:center;justify-content:center;height:34px;line-height:1;background:#272727;border-radius:999px;padding:0 14px;font-size:13px;white-space:nowrap;flex:none}
@media (max-width:480px){
  .bezel,.screen{border-radius:40px}
  .home-head{top:58px}.home-head .big{font-size:34px}
  .grid{top:200px;left:20px;right:20px;gap:18px 10px}
  .dock{left:16px;right:16px;bottom:22px;height:80px}
  .app .top{height:52px}
  .intro-arc text{font-size:11px;letter-spacing:.18em}
  .sun{width:96vw;height:96vw;margin:-48vw 0 0 -48vw;top:30%}
  .scene{background:radial-gradient(140vw 90vh at 50% 32%,var(--sun,#ffb01f) 0%,#c9480a 20%,#6a1c03 46%,#1c0800 74%,#0b0300 100%)}
}
body.native .island{opacity:0}
body.native .bezel{opacity:0}
body.native .screen,body.native .bezel{border-radius:0;transition:border-radius .25s}
body.native{--sr:0px}
body.native .home-head{top:calc(env(safe-area-inset-top,0px) + 44px)}
body.native .app .top{height:calc(env(safe-area-inset-top,0px) + 54px)}
body.native .dock{bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
body.native .hbar{display:none}
.island,.bezel{transition:opacity .25s}
@media (prefers-reduced-motion:reduce){.sun,.haze,.cue,.static,.scan{animation:none}}