.phone-hero{isolation:isolate;padding:112px 20px 48px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 25% 42%,#7b5cff24,transparent 48%),radial-gradient(ellipse at 78% 55%,#00e5ff18,transparent 42%),radial-gradient(ellipse at 50% 95%,#ff2d9514,transparent 50%)}
.phone-hero::before{content:"";position:absolute;width:680px;height:680px;left:50%;top:190px;transform:translateX(-50%);border:1px solid #7b5cff26;border-radius:50%;box-shadow:0 0 0 75px #7b5cff06,0 0 0 150px #7b5cff04;z-index:-1;pointer-events:none}
.showcase-eyebrow{color:#b7b5cf;font-size:10px;letter-spacing:.38em;text-transform:uppercase}
.phone-hero h1{font-size:clamp(48px,10vw,104px);font-weight:500;letter-spacing:-.065em;line-height:1.12;margin:12px 0 28px;color:#f2efff}
.phone-hero h1 span{background:var(--grad-logo);background-clip:text;-webkit-background-clip:text;color:transparent}
.phone-stage{position:relative;width:250px;margin:0 auto 25px}
.phone-stage::after{content:"";position:absolute;bottom:-15px;left:-40px;right:-40px;height:30px;background:linear-gradient(90deg,#00e5ff50,#7b5cff90,#ff2d9550);filter:blur(24px);z-index:-1}
.showcase-phone{position:relative;padding:7px;border-radius:39px;background:linear-gradient(120deg,#a0b8c9,#323948 24%,#10131c 50%,#687d8e 80%,#d0e8ec);box-shadow:0 0 0 1px #ffffff38,0 24px 70px #0009,15px 0 55px #7b5cff20,-15px 0 55px #00e5ff12}
.showcase-phone::before{content:"";position:absolute;right:-3px;top:112px;height:49px;width:3px;background:#687484;border-radius:0 3px 3px 0}
.phone-screen{position:relative;display:block;width:100%;height:468px;overflow:hidden;border:3px solid #080a10;border-radius:32px;background:#101321;padding:0;cursor:pointer;text-align:left;color:white}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100px;height:20px;background:#080a10;border-radius:0 0 14px 14px;z-index:2;pointer-events:none}
.phone-notch::after{content:"";position:absolute;right:15px;top:6px;width:6px;height:6px;border-radius:50%;background:#152339;box-shadow:inset 0 0 2px #567198}
.phone-reel{width:100%;will-change:transform}
.phone-slide{margin:0;background:#101321}
.phone-slide img{display:block;width:100%;height:auto;min-height:420px;object-fit:cover;object-position:top}
.phone-slide-label{display:block;padding:14px 12px;font:500 11px/1.5 'Noto Sans',sans-serif;color:#dcd7ee;background:#0a0f1c;border-top:1px solid #7b5cff44}
.phone-controls{display:flex;gap:10px;justify-content:center;align-items:center;margin:14px 0}
.phone-controls button{height:38px;min-width:38px;border:1px solid #7b5cff50;border-radius:50px;background:#101427;color:#eaeafa;cursor:pointer;font:500 12px 'Noto Sans',sans-serif}
.phone-controls #reel-toggle{min-width:125px;padding:0 16px}
.phone-controls button:hover{border-color:var(--c-cyan);background:#17243a}
.phone-hero :focus-visible{outline:2px solid var(--c-cyan);outline-offset:5px}
.reel-caption{min-height:46px}.reel-caption small{display:block;color:var(--c-cyan);font-size:9px;letter-spacing:.2em;margin-bottom:7px}.reel-caption a{color:#eeeafa;font-size:13px;text-decoration:none}.reel-caption a:hover{text-decoration:underline}
.reel-hint{font-size:11px;color:#aaa6bd;margin:12px 0 26px}
.showcase-footer{font-size:10px;letter-spacing:.24em;line-height:1.9;text-transform:uppercase;color:#c6c0d6;max-width:440px;margin:auto}
.showcase-browse{display:inline-block;color:var(--c-cyan);font-size:11px;text-decoration:none;margin-top:18px;padding:8px}
@media(max-width:480px){.phone-hero{padding-top:100px}.phone-hero h1{font-size:clamp(44px,13vw,62px);margin-bottom:24px}.showcase-eyebrow{font-size:8px;letter-spacing:.3em}.phone-stage{width:224px}.phone-screen{height:416px}.showcase-footer{font-size:9px;max-width:310px}}
/* Editorial exhibition: a single canvas, real projects and restrained light. */
.phone-hero{padding:108px max(5.5vw,24px) 0;text-align:left;background:#090b10;color:#ecece8}
.phone-hero::before{inset:0;width:auto;height:auto;transform:none;border:0;border-radius:0;box-shadow:none;background:radial-gradient(ellipse at 58% 63%,#6528b51c,transparent 46%);z-index:-1}
.folio-topline,.folio-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.13em;color:#a4a4ad}
.folio-topline{border-bottom:1px solid #ffffff24;padding-bottom:17px}
.folio-heading{display:flex;justify-content:space-between;align-items:center;max-width:1500px;margin:0 auto}
.phone-hero h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(100px,14.8vw,222px);font-weight:400;letter-spacing:-.085em;line-height:1;margin:20px 0 30px;color:#ecece8}
.phone-hero h1 span{font-family:Georgia,'Times New Roman',serif;font-style:italic;letter-spacing:-.085em;background:none;color:var(--c-purple)}
.folio-heading>p{font-size:12px;color:#b0afb6;line-height:1.8;margin-right:3%;padding-top:26px}
.folio-exhibition{display:grid;grid-template-columns:minmax(0,1fr) 300px minmax(0,1fr);column-gap:clamp(45px,6vw,110px);align-items:start;max-width:1360px;margin:0 auto;padding:8px 0 45px;position:relative}
.folio-info{padding-top:50px;max-width:350px}
.folio-label{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.12em;color:#b9b5bf}
.folio-label>span:last-child{margin-left:auto;color:#8c849b}
.folio-live{width:5px;height:5px;border-radius:50%;background:#b7a4d5;box-shadow:0 0 10px #b7a4d544}
.folio-project-copy{min-height:210px;padding-top:32px}
.folio-category{font-size:10px;color:#9f97ae;line-height:1.7;margin-bottom:14px}
.folio-info h2{font-size:clamp(28px,2.9vw,44px);line-height:1.12;font-weight:400;letter-spacing:-.055em;text-wrap:balance}
.folio-visit{display:flex;justify-content:space-between;align-items:center;max-width:220px;padding:13px 0;border-bottom:1px solid #ffffff45;font-size:12px;color:#ecece8;text-decoration:none;transition:color .25s,border-color .25s}
.folio-visit span{font-size:23px;color:#baa4dc;transition:transform .25s}.folio-visit:hover{color:#c8b1ef;border-color:#c8b1ef}.folio-visit:hover span{transform:translate(3px,-3px)}
.folio-navigation{margin-top:45px}.phone-controls{justify-content:flex-start;gap:7px;margin:0}
.phone-controls button{border:1px solid #ffffff26;background:transparent;border-radius:0;height:36px;color:#c4bdce;transition:background .2s,border-color .2s}.phone-controls #reel-toggle{min-width:100px;font-size:10px}.phone-controls button:hover{background:#b7a4d519;border-color:#b7a4d5}
.reel-hint{font-size:10px;line-height:1.7;margin:15px 0 0;color:#8e8798}
.phone-stage{width:280px;margin:0 auto;position:relative;z-index:1}
.phone-stage::after{bottom:60px;height:80px;left:-50px;right:-50px;background:#795bad33;filter:blur(40px)}
.showcase-phone{border-radius:42px;padding:7px;background:linear-gradient(120deg,#626470,#171820 20%,#9b97a4 48%,#22212a 60%,#595765);box-shadow:0 0 0 1px #ffffff20,15px 22px 45px #0008}
.phone-screen{height:520px;border-radius:35px}.phone-slide img{min-height:0}
.phone-orbit{position:absolute;z-index:-1;pointer-events:none;width:630px;height:250px;border:1px solid #8b6baa35;border-radius:50%;left:50%;top:200px;transform:translateX(-50%) rotate(-48deg)}
.phone-orbit::before{content:"";position:absolute;inset:-9px;border-radius:50%;border-top:1px solid #c4a2e0aa;filter:drop-shadow(0 0 6px #a682cd);animation:orbit-light 18s linear infinite}
.phone-side-note{position:absolute;writing-mode:vertical-rl;left:-29px;top:100px;font-size:7px;letter-spacing:.23em;color:#83748f}
.reel-caption{text-align:center;margin-top:19px;min-height:40px}.reel-caption small{color:#a599b5;font-size:8px;letter-spacing:.15em}.reel-caption a{font-size:10px;color:#c0b8cb}
.folio-upnext{max-width:260px;width:100%;justify-self:end;padding-top:105px}
.folio-upnext>.folio-label{margin-bottom:14px}.folio-preview{position:relative;display:block;width:100%;height:270px;padding:0;border:0;overflow:hidden;background:#16121c;cursor:pointer;text-align:left}
.folio-preview img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.65) brightness(.85)}
.folio-preview:hover img{transform:translateY(-24px);filter:saturate(1) brightness(1)}
.folio-preview::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff12;pointer-events:none}
.folio-preview-open{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:43px;height:43px;background:#b7a4d5;color:#17111f;font-size:22px}
.folio-next-caption{display:flex;justify-content:space-between;gap:15px;padding-top:14px;font-size:12px;color:#d4cedd}.folio-next-caption>span:last-child{color:#877d95;font-size:10px}.folio-preview-hint{color:#8e8798;font-size:9px;margin-top:8px}
.folio-bottom{border-top:1px solid #ffffff24;padding:24px 0;gap:20px;font-size:8px}.folio-bottom a{color:#eee9f4;font-size:12px;letter-spacing:0;text-decoration:none}.folio-bottom a span{margin-left:24px;color:#b7a4d5}
@keyframes orbit-light{to{transform:rotate(360deg)}}
@keyframes project-arrive{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.folio-project-copy.is-changing{animation:project-arrive .65s ease both}
@media(min-width:1600px){.folio-exhibition{padding-top:20px;padding-bottom:65px}.folio-info{padding-top:75px}.folio-upnext{max-width:290px}.folio-preview{height:300px}}
@media(min-width:901px) and (max-width:1150px){.folio-exhibition{grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);column-gap:35px}.phone-stage{width:250px}.phone-screen{height:468px}.folio-upnext{padding-top:95px}.folio-preview{height:235px}.folio-info h2{font-size:31px}.folio-project-copy{min-height:200px}}
@media(max-width:900px){.phone-hero{padding-top:100px}.folio-topline{font-size:7px;letter-spacing:.08em}.folio-heading>p{font-size:10px}.phone-hero h1{font-size:16vw}.folio-exhibition{grid-template-columns:1fr 280px;gap:35px;padding-top:20px}.folio-upnext{display:none}.folio-info{padding-top:40px}.folio-project-copy{min-height:180px}.folio-info h2{font-size:34px}.folio-bottom>span:last-child{display:none}.phone-orbit{width:500px}}
@media(max-width:600px){.phone-hero{padding:91px 22px 0}.folio-topline{font-size:6px;letter-spacing:.05em;padding-bottom:12px}.folio-topline>span:last-child{max-width:105px;text-align:right}.folio-heading{display:block}.phone-hero h1{font-size:23vw;margin:23px 0 13px}.folio-heading>p{font-size:10px;line-height:1.6;padding:0;margin:0 0 22px;max-width:200px}.folio-heading>p br{display:none}.folio-heading>p br::after{content:' '}.folio-exhibition{display:flex;flex-direction:column;gap:24px;padding:0 0 28px}.phone-stage{order:0;width:244px}.phone-screen{height:452px}.phone-side-note{font-size:6px;left:-23px}.folio-info{order:1;padding:0;max-width:none;width:100%}.folio-project-copy{min-height:0;padding-top:16px}.folio-info h2{font-size:30px;max-width:300px}.folio-category{margin-bottom:8px}.folio-visit{max-width:none;padding:10px 0;margin-top:8px}.folio-navigation{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}.reel-hint{margin:0;font-size:8px}.phone-controls{gap:4px}.phone-controls button{min-width:30px;height:34px}.phone-controls #reel-toggle{min-width:84px;padding:0 8px}.reel-caption{display:none}.folio-label{font-size:8px}.folio-bottom{padding:20px 0;font-size:6px;gap:10px}.folio-bottom a{font-size:10px;white-space:nowrap}.folio-bottom a span{margin-left:6px}.phone-orbit{top:150px;width:440px;height:200px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phone-hero *,.phone-hero *::before{animation:none!important;transition:none!important}}
.tablet-stage{display:none}
@media(min-width:901px){
  .folio-exhibition{grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(35px,5vw,80px);align-items:center;padding:18px 0 55px}
  .folio-exhibition>.phone-stage,.folio-upnext{display:none}
  .folio-info{padding-top:0;max-width:none}
  .folio-project-copy{min-height:175px;padding-top:26px}
  .folio-info h2{font-size:clamp(29px,2.6vw,39px)}
  .folio-navigation{margin-top:34px}
  .tablet-stage{display:block;min-width:0;position:relative;padding-top:8px}
  .tablet-stage::before{content:"";position:absolute;inset:12% 5% -4%;z-index:-1;background:radial-gradient(ellipse,#8260b32b,transparent 68%);filter:blur(25px);pointer-events:none}
  .tablet-device{position:relative;padding:17px 23px;border-radius:30px;background:linear-gradient(130deg,#797582,#222129 19%,#141419 48%,#6c6674 80%,#29272e);box-shadow:0 0 0 1px #ffffff25,0 24px 50px #0007,inset 0 0 0 3px #ffffff06}
  .tablet-camera{position:absolute;left:8px;top:50%;width:5px;height:5px;border-radius:50%;background:#1b2537;box-shadow:0 0 0 2px #0008}
  .tablet-screen{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;overflow:hidden;background:#090b10;padding:0;cursor:pointer}
  .tablet-screen img{display:block;width:100%;height:100%;object-fit:contain;background:#090b10}
  .tablet-screen img.tablet-image-cover{object-fit:cover;object-position:center top}
  .tablet-screen.is-changing img{animation:tablet-arrive .65s cubic-bezier(.2,.7,.2,1) both}
  .tablet-caption{display:flex;justify-content:space-between;margin-top:20px;font-size:8px;letter-spacing:.17em;color:#a498b4}
  .tablet-progress{height:1px;background:#ffffff16;margin-top:12px;overflow:hidden}.tablet-progress span{display:block;width:100%;height:100%;background:#b7a4d5;transform-origin:left;transform:scaleX(0)}
}
@keyframes tablet-arrive{from{opacity:.25;transform:scale(1.018)}to{opacity:1;transform:scale(1)}}
@media(min-width:901px) and (max-width:1150px){.tablet-device{padding:13px 18px;border-radius:23px}.tablet-camera{left:6px;width:4px;height:4px}.tablet-screen{border-radius:9px}.folio-project-copy{min-height:190px}.folio-info h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.tablet-screen.is-changing img{animation:none}}