:root { --ink:#0d0e14; --mist:#d9e1e6; --silver:#b9c5cd; --clay:#aa5031; --blue:#486aae; --brown:#583a36; }
body.studio-mode { background:#dfe6ea; color:var(--ink); }
body.studio-mode header { position:fixed; z-index:50; top:0; left:0; width:100%; background:transparent; border:0; }
body.studio-mode header .nav { max-width:none; width:calc(100% - 72px); height:88px; padding:0 35px; margin:20px 36px 0; }
body.studio-mode .brand { color:var(--ink); font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.04em; }
body.studio-mode .brand span { color:var(--blue); }
body.studio-mode header nav { position:absolute; left:50%; transform:translateX(-50%); gap:28px; }
body.studio-mode header nav a { color:#5f6970; font-size:11px; }
body.studio-mode header nav a:hover { color:var(--blue); }
.talk-button { margin-left:auto; border:1px solid rgba(72,106,174,.28); border-radius:11px; padding:13px 24px; background:rgba(72,106,174,.07); color:var(--blue)!important; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:.05em; }
body.immersive main > .hero, body.immersive main > .strip, body.immersive main > section, body.immersive footer { display:none!important; }

#portfolio-studio { --pointer-x:0deg; --pointer-y:0deg; --shift-x:0px; --shift-y:0px; position:fixed; z-index:10; inset:38px 34px 30px; overflow:hidden; border-radius:28px; background:rgba(249,251,252,.91); box-shadow:0 25px 65px rgba(68,88,101,.14); perspective:1100px; }
.studio-glow { position:absolute; width:52%; aspect-ratio:1; left:28%; top:4%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.98),rgba(217,225,230,.16) 54%,transparent 72%); }
.studio-glance { position:absolute; z-index:7; left:6.3%; right:5%; top:12.5%; display:grid; grid-template-columns:2fr 1.1fr 1.25fr .7fr .65fr; align-items:stretch; min-height:55px; overflow:hidden; border:1px solid rgba(185,197,205,.34); border-radius:12px; background:rgba(255,255,255,.58); box-shadow:0 10px 28px rgba(64,83,95,.055); backdrop-filter:blur(12px); }
.studio-glance > * { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; padding:10px 16px; border:0; border-right:1px solid rgba(185,197,205,.28); background:transparent; color:#4f5d66; text-align:left; }
.studio-glance > *:last-child { border-right:0; }
.studio-glance small { color:#8b979e; font:650 8px 'Space Grotesk',sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.studio-glance b { overflow:hidden; color:#344149; font:650 9px 'Space Grotesk',sans-serif; text-overflow:ellipsis; white-space:nowrap; }
.studio-glance button,.studio-glance a { cursor:pointer; transition:background .2s,color .2s; }
.studio-glance button:hover,.studio-glance a:hover { background:rgba(72,106,174,.08); }
.studio-intro { position:absolute; z-index:5; left:6.3%; top:28%; width:27%; }
.hello { margin:0 0 10px; font:600 clamp(19px,1.65vw,28px) 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.studio-intro h1 { margin:0; font:800 clamp(48px,5.1vw,83px)/.9 'Space Grotesk',sans-serif; letter-spacing:-.075em; color:var(--ink); text-shadow:0 4px 0 rgba(185,197,205,.58); }
.studio-intro h1 span { color:var(--blue); text-shadow:0 4px 0 rgba(72,106,174,.12); }
.studio-lead { max-width:410px; margin:32px 0 22px; color:#56636c; font-size:clamp(12px,1vw,15px); line-height:1.75; }
.studio-lead strong { color:var(--blue); font-weight:700; }
.mini-cloud { display:flex; flex-wrap:wrap; gap:6px; max-width:430px; margin:-8px 0 13px; perspective:420px; transform-style:preserve-3d; }
.mini-cloud button { border:1px solid rgba(72,106,174,.22); border-radius:999px; padding:6px 9px; background:rgba(255,255,255,.72); color:#56636c; font:650 8px 'Space Grotesk',sans-serif; cursor:pointer; transition:transform .18s,background .18s,color .18s,box-shadow .18s; }
.mini-cloud button:hover,.mini-cloud button:focus-visible { transform:translate3d(0,-2px,12px); outline:0; }
.mini-cloud button.is-active { transform:translate3d(0,-4px,30px) rotateX(-8deg); background:var(--blue); color:white; box-shadow:0 12px 22px rgba(72,106,174,.24); outline:0; }
.mini-cloud.is-activated button:not(.is-active) { transform:translateZ(-16px); opacity:.72; }
.mini-cloud.is-turning { animation:mini-cloud-turn .5s cubic-bezier(.2,.8,.2,1); }
.expertise-toggle { display:flex; align-items:center; gap:8px; width:max-content; margin:0 0 16px; padding:0 0 5px; border:0; border-bottom:1px solid rgba(72,106,174,.3); background:transparent; color:#465b87; font:700 9px 'Space Grotesk',sans-serif; letter-spacing:.03em; cursor:pointer; }
.expertise-toggle span { font-size:13px; transition:transform .2s; }
.expertise-toggle:hover span { transform:rotate(90deg); }
.studio-conversion { display:flex; flex-direction:column; }
.studio-actions { order:1; display:flex; align-items:center; gap:10px; }
.studio-actions .primary-action { border-radius:10px; padding:14px 20px; background:var(--ink); color:white; font:700 10px 'Space Grotesk',sans-serif; letter-spacing:.05em; box-shadow:0 10px 24px rgba(13,14,20,.13); }
.studio-actions button { border:1px solid #cfd9de; border-radius:10px; padding:13px 18px; background:rgba(255,255,255,.75); color:var(--ink); font:700 10px 'Space Grotesk',sans-serif; letter-spacing:.03em; cursor:pointer; }
.studio-contact { order:2; position:static; display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-top:18px; color:#748088; font-size:10px; letter-spacing:.04em; }
.studio-contact a { width:max-content; color:#44515a; text-decoration:underline; text-decoration-color:rgba(72,106,174,.3); text-underline-offset:4px; }

.studio-portrait { position:absolute; z-index:3; left:31%; bottom:-8%; width:40%; height:92%; margin:0; transform:translate3d(var(--shift-x),var(--shift-y),0); transition:transform .22s ease-out; }
.portrait-halo { position:absolute; left:8%; right:8%; top:4%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 45% 38%,rgba(255,255,255,.98),rgba(217,225,230,.38) 56%,transparent 72%); }
.studio-portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 100%; filter:saturate(.92) contrast(1.02) drop-shadow(0 22px 26px rgba(49,63,72,.16)); }
.studio-portrait::after { content:none; }
.studio-portrait figcaption { position:absolute; z-index:2; left:7%; right:7%; bottom:5%; color:white; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.studio-portrait figcaption b,.studio-portrait figcaption span { display:block; }
.studio-portrait figcaption b { font:700 11px 'Space Grotesk',sans-serif; text-transform:uppercase; letter-spacing:.11em; }
.studio-portrait figcaption span { margin-top:5px; font-size:10px; opacity:.82; }

.studio-showcase { position:absolute; z-index:5; right:6%; top:23%; width:22%; }
.showcase-kicker { margin:0 0 13px 5px; color:#83909a; font:650 9px 'Space Grotesk',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.showcase-list { display:flex; flex-direction:column; gap:11px; transform:rotateY(var(--pointer-x)) rotateX(var(--pointer-y)); transform-origin:right center; transition:transform .18s ease-out; }
.showcase-list { scrollbar-width:none; }
.showcase-list::-webkit-scrollbar { display:none; }
.showcase-card { display:grid; grid-template-columns:82px 1fr 20px; align-items:center; gap:11px; width:100%; min-height:84px; padding:8px 12px 8px 8px; border:1px solid rgba(185,197,205,.35); border-radius:13px; background:rgba(255,255,255,.82); box-shadow:0 10px 24px rgba(64,83,95,.08); text-align:left; cursor:pointer; transition:transform .25s,box-shadow .25s,border-color .25s; }
.showcase-card:hover { transform:translateX(-8px) scale(1.02); border-color:rgba(72,106,174,.38); box-shadow:0 18px 34px rgba(64,83,95,.14); }
.card-visual { position:relative; display:block; height:66px; overflow:hidden; border-radius:9px; background:linear-gradient(145deg,#edf3f6,#d9e1e6); }
.card-visual i,.card-visual b { position:absolute; display:block; }
.card-visual i { width:28px; height:44px; top:15px; border-radius:4px; background:white; box-shadow:0 4px 10px rgba(72,85,95,.13); }
.card-visual i:nth-child(1){left:12px;transform:rotate(-7deg)} .card-visual i:nth-child(2){left:34px;top:10px;background:#486aae} .card-visual i:nth-child(3){left:56px;transform:rotate(7deg)}
.card-visual b { left:40px; top:28px; width:17px; height:5px; border-radius:5px; background:#fff; box-shadow:0 10px 0 rgba(255,255,255,.65); }
.art-teaching { background:linear-gradient(145deg,#eee9e7,#d8c7c2); } .art-teaching i:nth-child(2){background:#aa5031}
.art-data { background:linear-gradient(145deg,#edf1f8,#cdd8ec); } .art-data i { top:auto!important; bottom:12px; width:12px; border-radius:3px 3px 0 0; background:#486aae!important; } .art-data i:nth-child(1){height:22px;left:18px}.art-data i:nth-child(2){height:46px;left:41px}.art-data i:nth-child(3){height:33px;left:64px}
.art-work { background:linear-gradient(145deg,#f1ece8,#dfccc2); } .art-writing { background:linear-gradient(145deg,#eaf0f4,#cbd8df); } .art-portrait { background:linear-gradient(145deg,#eff2f3,#d9e1e6); }
.card-copy b,.card-copy small { display:block; }
.card-copy b { color:var(--ink); font:700 12px 'Space Grotesk',sans-serif; }
.card-copy small { margin-top:5px; color:#7b8790; font-size:10px; }
.showcase-card em { color:var(--blue); font-style:normal; }
.showcase-next { position:absolute; right:-54px; top:45%; width:43px; height:43px; border:0; border-radius:50%; background:white; color:#71808a; font-size:18px; box-shadow:0 9px 22px rgba(64,83,95,.16); cursor:pointer; }

.studio-index { position:absolute; z-index:6; right:6%; bottom:5%; display:flex; gap:6px; }
.studio-index button { width:31px; height:31px; overflow:hidden; border:0; border-radius:50%; padding:0; background:#e7edf0; color:#75828b; font:700 8px 'Space Grotesk',sans-serif; cursor:pointer; transition:.2s; }
.studio-index button span { display:block; }
.studio-index button:hover { width:auto; padding:0 12px; border-radius:16px; background:var(--blue); color:white; }
.studio-index button:hover span { display:none; }
.studio-tools { position:absolute; z-index:6; left:7%; bottom:2.2%; display:flex; align-items:center; gap:15px; color:#95a0a7; font-size:9px; }
.studio-tools button { border:1px solid #d3dde2; border-radius:8px; padding:9px 12px; background:rgba(255,255,255,.8); color:#5d6971; font:650 9px 'Space Grotesk',sans-serif; cursor:pointer; }
.float-shape { position:absolute; z-index:4; pointer-events:none; transition:transform .25s ease-out; }
.float-ring { left:24%; top:17%; width:24px; height:24px; border:8px solid rgba(72,106,174,.38); border-radius:50%; transform:translate(var(--shift-x),var(--shift-y)) rotateX(65deg); box-shadow:0 7px 8px rgba(72,106,174,.13); }
.float-sphere { left:11%; top:65%; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 30% 25%,white,#b9c5cd 48%,#7f8d96); box-shadow:8px 10px 12px rgba(66,79,87,.15); transform:translate(calc(var(--shift-x) * -.7),calc(var(--shift-y) * -.7)); }
.float-cube { right:27%; top:14%; width:40px; height:40px; transform:translate(calc(var(--shift-x) * -.5),calc(var(--shift-y) * -.5)) rotate(18deg); } .float-cube i { position:absolute; inset:8px; border-radius:4px; background:rgba(170,80,49,.18); border:1px solid rgba(170,80,49,.32); } .float-cube i:nth-child(2){transform:translate(8px,-8px)}

#reading-panel { position:fixed; z-index:80; inset:105px 40px 34px auto; width:min(720px,51vw); overflow:auto; border-radius:20px; background:rgba(250,252,253,.98); box-shadow:0 25px 70px rgba(40,54,62,.24); }
#reading-panel[hidden] { display:none; }
.panel-top { position:sticky; z-index:2; top:0; display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid #dce4e8; background:rgba(250,252,253,.94); backdrop-filter:blur(15px); color:#77848c; font:650 9px 'Space Grotesk',sans-serif; letter-spacing:.11em; }
.panel-top button { border:1px solid #ccd8de; border-radius:8px; padding:9px 12px; background:white; color:#3e4d55; cursor:pointer; }
#panel-content { padding:8px 40px 45px; }
#panel-content section { padding-top:28px; }
body.panel-open #portfolio-studio { right:52%; }
body.panel-open .studio-showcase,body.panel-open .studio-index { opacity:.15; pointer-events:none; }

#expertise-panel { position:fixed; z-index:90; inset:105px 6% 38px; overflow:auto; padding:34px 42px 28px; border:1px solid rgba(185,197,205,.55); border-radius:24px; background:rgba(250,252,253,.98); box-shadow:0 30px 80px rgba(40,54,62,.25); }
#expertise-panel[hidden] { display:none; }
.expertise-head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.expertise-head span,.expertise-detail span { color:#89969e; font:700 8px 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.expertise-head h2 { margin:6px 0 0; font:750 clamp(32px,4vw,58px)/1 'Space Grotesk',sans-serif; letter-spacing:-.055em; }
.expertise-head button { border:1px solid #ccd8de; border-radius:9px; padding:10px 13px; background:white; color:#3e4d55; font:650 9px 'Space Grotesk',sans-serif; cursor:pointer; }
.expertise-tabs { display:flex; gap:8px; margin:26px 0 24px; padding-bottom:14px; border-bottom:1px solid #dce4e8; }
.expertise-tabs button { border:0; border-radius:999px; padding:9px 15px; background:#e9eef1; color:#69767e; font:700 9px 'Space Grotesk',sans-serif; text-transform:capitalize; cursor:pointer; }
.expertise-tabs button[aria-selected="true"] { background:var(--ink); color:white; }
.expertise-stage { position:relative; height:var(--cloud-height,260px); overflow:hidden; border:1px solid rgba(185,197,205,.28); border-radius:18px; background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.98),rgba(229,237,242,.72) 58%,rgba(218,227,232,.55)); perspective:1100px; isolation:isolate; transition:height .35s ease; }
.expertise-stage::before { content:''; position:absolute; z-index:-1; left:14%; right:14%; bottom:8%; height:22%; border:1px solid rgba(72,106,174,.17); border-radius:50%; background:radial-gradient(ellipse,rgba(72,106,174,.14),transparent 70%); transform:rotateX(72deg); box-shadow:0 0 55px rgba(72,106,174,.13); }
.expertise-stage::after { content:''; position:absolute; z-index:-1; width:44%; aspect-ratio:1; left:28%; top:-28%; border:1px solid rgba(72,106,174,.13); border-radius:50%; box-shadow:0 0 40px rgba(72,106,174,.07),inset 0 0 35px rgba(255,255,255,.82); }
.depth-hint { position:absolute; z-index:4; right:15px; bottom:11px; color:#98a5ad; font:700 7px 'Space Grotesk',sans-serif; letter-spacing:.13em; }
.expertise-words { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
.expertise-words::before,.expertise-words::after { content:''; position:absolute; left:50%; top:50%; width:64%; height:64%; border:1px dashed rgba(72,106,174,.13); border-radius:50%; transform:translate(-50%,-50%) rotateX(67deg); pointer-events:none; }
.expertise-words::after { width:44%; height:82%; transform:translate(-50%,-50%) rotateY(68deg); }
.expertise-words button { position:absolute; left:var(--cloud-left); top:var(--cloud-top); z-index:2; max-width:210px; border:1px solid rgba(72,106,174,.2); border-radius:999px; padding:calc(8px + var(--word-weight) * 1px) calc(13px + var(--word-weight) * 2px); background:rgba(255,255,255,.9); color:#33414a; font:650 calc(10px + var(--word-weight) * 1.15px) 'Space Grotesk',sans-serif; white-space:nowrap; cursor:pointer; transform:translate(-50%,-50%); transition:left .48s cubic-bezier(.2,.8,.2,1),top .48s cubic-bezier(.2,.8,.2,1),transform .48s cubic-bezier(.2,.8,.2,1),opacity .3s,filter .3s,background .25s,color .25s,box-shadow .25s; box-shadow:0 calc(7px + var(--word-weight) * 2px) calc(16px + var(--word-weight) * 3px) rgba(64,83,95,.09); backface-visibility:hidden; }
.expertise-words button:hover,.expertise-words button:focus-visible { transform:translate(-50%,-56%) scale(1.04); border-color:rgba(72,106,174,.48); outline:0; }
.expertise-words.has-selection button:not(.is-active) { opacity:.3; filter:blur(.45px) saturate(.65); }
.expertise-words button.is-active { left:50%; top:50%; z-index:8; transform:translate3d(-50%,-50%,180px) rotateX(-5deg) scale(1.16); border-color:rgba(72,106,174,.65); background:linear-gradient(135deg,#5879bc,#3f5f9f); color:white; box-shadow:0 24px 48px rgba(58,83,139,.28),0 0 0 8px rgba(72,106,174,.08); outline:0; }
.expertise-words.is-turning { animation:expertise-cloud-turn .68s cubic-bezier(.2,.78,.2,1); }
.expertise-detail { display:grid; grid-template-columns:155px 1fr; align-items:start; gap:18px; min-height:66px; margin-top:24px; padding:20px 22px; border-radius:14px; background:#eef3f6; }
.expertise-detail p { margin:0; color:#44525b; font-size:13px; line-height:1.65; }
.expertise-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:18px; color:#7b878f; font-size:10px; }
.expertise-footer a { border-radius:9px; padding:11px 15px; background:var(--ink); color:white; font:700 9px 'Space Grotesk',sans-serif; }
body.expertise-open #portfolio-studio { transform:scale(.985); filter:blur(5px); pointer-events:none; }

@keyframes expertise-cloud-turn { 0%{transform:rotateX(0) rotateY(0)} 46%{transform:rotateX(5deg) rotateY(-14deg) translateZ(-18px)} 100%{transform:rotateX(0) rotateY(0)} }
@keyframes mini-cloud-turn { 0%{transform:rotateY(0)} 48%{transform:rotateY(-11deg)} 100%{transform:rotateY(0)} }

@media(max-width:1050px){ body.studio-mode header nav{display:none}.studio-intro{left:5%;width:31%}.studio-portrait{left:31%;width:41%}.studio-showcase{right:4%;width:26%}.showcase-card{grid-template-columns:72px 1fr 18px}.showcase-next{display:none} }
@media(max-height:850px) and (min-width:761px){.studio-intro{top:25%}.studio-intro h1{font-size:clamp(48px,4.5vw,72px)}.studio-lead{margin:24px 0 18px;line-height:1.65}.studio-contact,.studio-tools{display:none}.mini-cloud{margin-bottom:10px}.expertise-toggle{margin-bottom:14px}}
@media(max-width:760px){ body.studio-mode header .nav{width:calc(100% - 24px);margin:6px 12px;padding:0 16px;height:64px}.talk-button{padding:11px 15px}#portfolio-studio{position:relative;inset:auto;margin:76px 10px 12px;min-height:1030px;border-radius:22px}.studio-intro{position:relative;left:auto;top:auto;width:auto;padding:52px 27px 0}.studio-intro h1{font-size:55px}.studio-lead{font-size:13px}.studio-contact{position:absolute;left:28px;bottom:23px}.studio-portrait{left:5%;top:330px;bottom:auto;width:90%;height:430px}.studio-showcase{left:22px;right:22px;top:770px;width:auto}.showcase-list{flex-direction:row;overflow-x:auto;padding-bottom:8px}.showcase-card{min-width:260px}.showcase-card:nth-child(n+3){display:none}.studio-index{right:22px;bottom:24px}.studio-tools{display:none}.float-ring{left:78%;top:23%}.float-cube{right:5%;top:34%}#reading-panel{inset:74px 10px 12px;width:auto;border-radius:18px}#panel-content{padding:5px 23px 38px}body.panel-open #portfolio-studio{right:auto} }
@media(max-width:760px){.studio-contact{position:static;left:auto;bottom:auto;margin-top:18px}}
@media(max-width:760px){
  body.studio-mode.immersive{overflow-x:hidden;overflow-y:auto}
  #portfolio-studio{min-height:1470px}
  .studio-intro{padding-top:48px}
  .studio-conversion{display:flex;flex-direction:column;margin-top:20px}
  .studio-contact{order:1;align-items:flex-start;gap:8px;margin:0 0 20px;font-size:11px}
  .studio-actions{order:2;width:100%;gap:9px}
  .studio-actions .primary-action,.studio-actions button{flex:1;text-align:center}
  .mini-cloud{gap:5px;margin:-7px 0 12px}
  .mini-cloud button{font-size:8px;padding:6px 8px}
  .mini-cloud button:nth-child(n+5){display:none}
  .expertise-toggle{margin-bottom:15px}
  .studio-glance{left:22px;right:22px;top:595px;grid-template-columns:1fr 1fr;min-height:162px;border-radius:14px}
  .studio-glance>*{padding:10px 12px;border-right:1px solid rgba(185,197,205,.28);border-bottom:1px solid rgba(185,197,205,.28)}
  .studio-glance .glance-field{grid-column:1/-1}
  .studio-glance>*:nth-last-child(-n+2){border-bottom:0}
  .studio-portrait{top:775px;height:430px}
  .studio-showcase{top:1210px}
  .studio-index{display:none}
  #expertise-panel{inset:72px 10px 12px;padding:25px 20px 20px;border-radius:18px}
  .expertise-head h2{font-size:34px}
  .expertise-tabs{overflow-x:auto;margin:20px 0 18px;padding-bottom:11px}
  .expertise-tabs button{flex:0 0 auto;padding:8px 12px}
  .expertise-stage{height:var(--mobile-cloud-height,340px)}
  .expertise-words button{left:var(--mobile-left);top:var(--mobile-top);max-width:145px;font-size:calc(9px + var(--word-weight) * .65px);line-height:1.15;white-space:normal;text-align:center;padding:calc(6px + var(--word-weight) * .5px) calc(8px + var(--word-weight) * .8px)}
  .depth-hint{right:11px;bottom:8px;font-size:6px}
  .expertise-detail{grid-template-columns:1fr;gap:8px;margin-top:18px;padding:16px}
  .expertise-footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.studio-portrait,.showcase-list,.float-shape,.expertise-words,.mini-cloud{animation:none!important}.expertise-words button,.mini-cloud button{transition:none!important}.expertise-words button.is-active{transform:translate3d(-50%,-50%,0) scale(1.06)}}