/* ZEROFRAME / interactive editorial collection */
.atelier{--atelier-gold:#dec395;--atelier-ink:#11130f;padding-top:100px;padding-bottom:80px}.atelier-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:60px}.atelier-intro h2{font-size:clamp(38px,4.8vw,66px);line-height:1.17;letter-spacing:-2px;margin-bottom:0}.atelier-intro-copy{max-width:420px;padding-bottom:5px}.atelier-intro-copy p{font-size:15px;line-height:1.9;color:#b1b5a6}.atelier-intro-copy>span{font-size:11px;letter-spacing:.4px;color:#dbc59d;display:block;margin-top:22px}.atelier-index{display:flex;justify-content:space-between;border-bottom:1px solid #cdb89055;padding-bottom:18px;font-size:9px;letter-spacing:2px;color:#918977}.atelier-chapter{border-bottom:1px solid #cdb89040;scroll-margin-top:88px}.atelier-chapter>.chapter-heading{display:grid;grid-template-columns:40px 1fr 190px 42px;align-items:center;gap:22px;padding:33px 0;list-style:none;min-height:145px;color:#8c9083;transition:color .3s}.atelier-chapter>.chapter-heading::-webkit-details-marker{display:none}.atelier .chapter-heading>span{transform:none!important;color:inherit;font-weight:400}.chapter-heading .chapter-number{font-size:12px;letter-spacing:1px;align-self:center;color:#a89576}.chapter-heading h3{font-size:clamp(48px,6.2vw,86px);letter-spacing:-3px;font-weight:400;line-height:1;margin:0;display:flex;align-items:baseline;gap:30px}.chapter-heading h3 small{font-size:20px;font-weight:400;letter-spacing:1px;color:#a59273}.chapter-heading .chapter-motto{font-size:9px;letter-spacing:1.6px;line-height:1.7;justify-self:end}.chapter-heading .chapter-toggle{display:grid;place-items:center;border:1px solid #b6a38544;border-radius:50%;width:40px;height:40px;font-size:23px;transition:background .3s,color .3s}.atelier-chapter[open]>.chapter-heading,.atelier-chapter>.chapter-heading:hover{color:#eee9dd}.atelier-chapter[open]>.chapter-heading .chapter-toggle{transform:rotate(45deg)!important;background:#dec395;color:#171813;border-color:#dec395}.atelier-chapter>.chapter-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;padding:3px 0 44px;align-items:center;animation:chapterEnter .65s cubic-bezier(.2,.7,.2,1)}.chapter-visual{min-width:0}.atelier-art{height:430px;position:relative;overflow:hidden;border:1px solid #e1d3b62b;border-radius:3px;background:#1b2119;isolation:isolate;--mx:50%;--my:50%}.atelier-art:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(350px circle at var(--mx) var(--my),#f7d7a01a,transparent 75%);opacity:0;transition:opacity .4s}.atelier-art:hover:after{opacity:1}.art-caption,.art-footer{position:absolute;left:24px;right:24px;z-index:4;font-size:8px;letter-spacing:1.9px;color:#d1c2a5;pointer-events:none}.art-caption{top:24px}.art-footer{bottom:21px;display:flex;justify-content:space-between;gap:15px}.art-footer i{font-style:normal;letter-spacing:2px;color:#a69880}.chapter-story{padding:10px 0 40px;min-width:0}.chapter-kicker{font-size:9px;letter-spacing:2px;color:#b7a080}.chapter-story h4{font-size:clamp(27px,2.8vw,40px);line-height:1.42;letter-spacing:-1px;font-weight:500;color:#ebe6da;margin:28px 0 22px}.chapter-story>p{font-size:14px;line-height:2;color:#aab39f;max-width:430px}.atelier .atelier-facts{margin-top:25px;border-top:1px solid #b8aa8f33;border-bottom:0}.atelier-facts>summary{font-size:12px;color:#cfbd9d;padding:17px 0;min-height:48px}.atelier-facts>summary i{font-size:18px;font-style:normal;transition:transform .3s}.atelier-facts[open]>summary i{transform:rotate(45deg)}.atelier-facts dl{display:grid;gap:16px;margin:2px 0 23px}.atelier-facts dl>div{display:grid;grid-template-columns:60px minmax(0,1fr);gap:15px}.atelier-facts dt{font-size:10px;color:#c2b090;line-height:2}.atelier-facts dd{font-size:12px;color:#aeb6a3;line-height:1.9;margin:0}.atelier-link{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:50px;border-bottom:1px solid #b8aa8f55;text-decoration:none;font-size:12px;color:#e4cba0;max-width:340px;margin-top:8px}.atelier-link span{font-size:20px;transition:transform .25s}.atelier-link:hover span{transform:translate(3px,-3px)}.atelier-options{display:flex;gap:4px;padding:9px 0 0}.atelier-options button{font:inherit;font-size:12px;color:#a5aa99;background:none;border:0;border-bottom:1px solid transparent;min-height:45px;flex:1;cursor:pointer;transition:color .25s,border-color .25s,background .25s}.atelier-options button:hover{background:#d2b5800b;color:#e6d6b6}.atelier-options button[aria-pressed=true]{color:#e9ce9d;border-bottom-color:#ddbf89}.atelier-live{min-height:45px;color:#939d88;font-size:11px;line-height:1.8;margin:15px 0 0;max-width:600px}.atelier button:focus-visible,.atelier summary:focus-visible,.atelier a:focus-visible{outline:2px solid #ead3a6;outline-offset:4px}
/* Strategy: a moving sculptural centre, three deliberate points of view. */
.strategy-art{background:radial-gradient(ellipse at 45% 80%,#73604455,transparent 62%),linear-gradient(140deg,#252a20,#0d100d)}.orbit-installation{position:absolute;inset:40px 15px;display:grid;place-items:center;perspective:700px}.orbit{position:absolute;width:76%;height:76%;border:1px solid #e5cba88c;border-radius:50%;box-shadow:0 0 16px #d8b77808;animation:atelierOrbit 22s linear infinite;animation-play-state:paused}.orbit-two{width:62%;height:62%;animation-direction:reverse;animation-delay:-6s;border-color:#aeb69c77}.orbit-three{width:49%;height:88%;animation-duration:31s;animation-delay:-10s;border-color:#c7ab7b55}.strategy-core{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#f9e9bf,#ad8d58 30%,#4a4530 62%,#111810 86%);box-shadow:inset -12px -8px 30px #0008,0 20px 55px #0007;transition:background 1s,transform .9s;transform:rotate(-20deg);position:absolute}.orbit-installation>b{position:relative;z-index:1;font-size:clamp(26px,3.7vw,52px);font-weight:400;letter-spacing:-2px;color:#f8edda;text-shadow:0 2px 22px #0007;max-width:100%;white-space:nowrap}.orbit-word{position:absolute;color:#cfc4aa;font-size:8px;letter-spacing:2px;transition:color .4s,opacity .4s}.word-one{top:16%;left:12%}.word-two{right:5%;top:49%}.word-three{bottom:10%;left:18%}.strategy-art[data-focus=difference] .strategy-core{transform:rotate(30deg) scale(.85);background:radial-gradient(circle at 30% 20%,#e6edcf,#839577 30%,#3a4b36 62%,#111810 86%)}.strategy-art[data-focus=value] .strategy-core{transform:rotate(-45deg) scale(1.1)}.strategy-art[data-focus=audience] .word-one,.strategy-art[data-focus=difference] .word-three,.strategy-art[data-focus=value] .word-two{color:#fff2d1}
/* Sonic: the existing music player, expressed as a physical record. */
.sonic-art{background:radial-gradient(ellipse at center,#66553c55,transparent 70%),#141611}.sound-installation{position:absolute;inset:0;display:grid;place-items:center}.sound-halo{width:250px;height:250px;border:1px solid #dfc28b30;border-radius:50%;box-shadow:0 0 55px #dfc28b12}.sound-disc{position:absolute;width:180px;height:180px;border-radius:50%;background:repeating-radial-gradient(circle,#151812 0 2px,#34372b 3px,#11140f 4px);box-shadow:0 18px 30px #0006,inset 0 1px 1px #e4cda799;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#e2c796}.sound-disc>span{font-size:7px;letter-spacing:2px}.sound-disc>b{font-size:29px;font-weight:400;letter-spacing:4px}.sound-disc>i{font-size:6px;letter-spacing:1.8px;font-style:normal}.sound-disc:after{content:"";width:5px;height:5px;background:#b49a70;border-radius:50%;position:absolute;bottom:35px}#sonicCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.atelier-play{position:absolute;bottom:57px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;justify-content:center;gap:12px;color:#e5d3af;border:1px solid #d1b78666;border-radius:30px;padding:10px 19px;font-size:12px;background:#12170fe8;min-height:44px;white-space:nowrap;cursor:pointer}.atelier-play[aria-pressed=true]{background:#e0c593;color:#1c2117}.play-symbol{font-size:11px}.sonic-art[data-tone=bold]{background:radial-gradient(ellipse at center,#ac792a50,transparent 70%),#19190e}.sonic-art[data-tone=precise]{background:radial-gradient(ellipse at center,#82908a45,transparent 70%),#121814}
/* Visual: an editorial composition with physical depth. */
.visual-art{background:#c8bda7}.visual-art .art-caption,.visual-art .art-footer,.visual-art .art-footer i{color:#494c3d}.visual-installation{position:absolute;inset:48px 34px;perspective:900px}.fashion-sheet{position:absolute;box-shadow:0 22px 35px #111a0c44;transition:transform .75s cubic-bezier(.2,.7,.2,1),width .75s,left .75s,border-radius .75s}.sheet-back{width:58%;height:77%;top:8%;left:12%;background:#4a5543;transform:rotate(-12deg);border:1px solid #e1ddc444;padding:20px}.sheet-back>span{font-size:7px;letter-spacing:2px;color:#b9bea4}.sheet-image{width:68%;height:77%;top:11%;left:24%;transform:rotate(7deg);background:#ebe4d2;overflow:hidden}.sheet-image img{width:100%;height:80%;object-fit:cover;display:block}.sheet-image>span{display:flex;align-items:center;justify-content:space-between;height:20%;padding:0 15px;font-size:23px;letter-spacing:5px;color:#414831}.sheet-image small{font-size:6px;letter-spacing:1px}.visual-swatch{position:absolute;bottom:1%;left:3%;display:flex;align-items:center;padding:8px;background:#e9e3d3;box-shadow:0 8px 18px #0002;gap:4px;transform:rotate(-6deg);z-index:2}.visual-swatch i{width:22px;height:30px;background:#6d7962}.visual-swatch i:nth-child(2){background:#b5866b}.visual-swatch i:nth-child(3){background:#ddd1b8}.visual-swatch>span{font-size:5px;padding:0 5px;color:#545947;letter-spacing:1px}.visual-type{position:absolute;right:2%;bottom:-2%;font-size:60px;letter-spacing:-4px;color:#f5edda99;pointer-events:none}.visual-art[data-view=identity] .sheet-image{transform:rotate(-4deg);width:83%;left:10%;height:80%}.visual-art[data-view=identity] .sheet-back{transform:rotate(9deg)}.visual-art[data-view=digital] .sheet-image{width:40%;left:40%;height:92%;top:0;border:7px solid #20261e;border-radius:20px;transform:rotate(7deg)}.visual-art[data-view=digital] .sheet-image img{height:85%}.visual-art[data-view=digital] .sheet-image>span{height:15%;font-size:14px;padding:0 8px;letter-spacing:3px}.visual-art[data-view=digital] .sheet-image small{display:none}.visual-art[data-view=digital] .sheet-back{transform:rotate(-9deg);left:6%}
/* Activation: a brand changes format, while keeping its identity. */
.activation-art{background:radial-gradient(ellipse at center,#63704e33,transparent 75%),#141b14}.activation-installation{position:absolute;inset:40px 10px;display:grid;place-items:center;perspective:800px}.activation-orbit{position:absolute;width:85%;height:85%;border-radius:50%;border:1px solid #d6bd8d30;transform:rotate(-22deg);box-shadow:0 0 0 30px #d6bd8d06,0 0 0 60px #d6bd8d04}.channel-device{position:absolute;width:70%;height:66%;background:#e8e0ce;border:1px solid #e5dbbd55;border-radius:7px;overflow:hidden;box-shadow:0 25px 40px #0007;transform:rotateY(-12deg) rotateX(5deg);transition:width .7s,height .7s,transform .7s,border-radius .7s}.device-bar{height:25px;padding:0 10px;display:flex;align-items:center;gap:4px;background:#eee8d7}.device-bar i{width:4px;height:4px;border-radius:50%;background:#9c9e87}.device-bar>span{margin-left:auto;color:#4d5742;font-size:5px;letter-spacing:1px}.channel-device>img{width:100%;height:calc(100% - 25px);object-fit:cover;filter:brightness(.62)}.device-copy{position:absolute;inset:45px 16px 20px;display:flex;flex-direction:column;justify-content:center;gap:10px;color:#fff5e2}.device-copy small{font-size:6px;letter-spacing:2px}.device-copy b{font-size:27px;line-height:1;letter-spacing:-1px;font-weight:500;max-width:180px}.device-copy>span{font-size:6px;letter-spacing:1px;border-bottom:1px solid #eee4cc;align-self:flex-start;padding-bottom:5px}.channel-label{position:absolute;font-size:8px;letter-spacing:2px;color:#75846a;transition:color .4s,text-shadow .4s}.label-web{top:10%;left:12%}.label-social{top:16%;right:5%}.label-live{bottom:7%;right:18%}.activation-art[data-channel=web] .label-web,.activation-art[data-channel=social] .label-social,.activation-art[data-channel=live] .label-live{color:#f4dbab;text-shadow:0 0 16px #e0c49188}.activation-art[data-channel=social] .channel-device{width:35%;height:91%;border:6px solid #c1c3ac;border-radius:21px;transform:rotate(7deg)}.activation-art[data-channel=social] .device-bar{height:16px}.activation-art[data-channel=social] .device-bar>span{display:none}.activation-art[data-channel=social] .device-copy{inset:25px 10px 20px}.activation-art[data-channel=social] .device-copy b{font-size:22px}.activation-art[data-channel=live] .channel-device{width:83%;height:58%;border-radius:1px;transform:rotateY(10deg) rotateX(-5deg);box-shadow:0 25px 35px #0009,0 0 25px #e4c99133}.activation-art[data-channel=live] .device-bar{background:#242d21}.activation-art[data-channel=live] .device-bar>span{color:#c7c2a8}.activation-art[data-channel=live] .device-copy{align-items:center;text-align:center}.activation-art[data-channel=live] .device-copy>span{align-self:center}
.atelier-chapter[open][data-in-view=true] .orbit{animation-play-state:running}@keyframes atelierOrbit{0%{transform:rotateZ(0deg) rotateY(55deg) rotateX(20deg)}100%{transform:rotateZ(360deg) rotateY(55deg) rotateX(20deg)}}@keyframes chapterEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.atelier-chapter>.chapter-heading{grid-template-columns:30px 1fr 38px;gap:15px;min-height:118px}.chapter-heading .chapter-motto{display:none}.chapter-heading h3{font-size:62px;gap:24px}.atelier-chapter>.chapter-body{gap:36px}.atelier-art{height:370px}.chapter-story h4{font-size:28px}.chapter-story>p{font-size:13px}.strategy-core{width:145px;height:145px}.sound-disc{width:155px;height:155px}.sound-halo{width:225px;height:225px}.device-copy b{font-size:23px}.sheet-image small{display:none}}
@media(max-width:700px){.atelier.wrap{padding-top:65px;padding-bottom:50px}.atelier-intro{display:block;margin-bottom:38px}.atelier-intro h2{font-size:38px;letter-spacing:-1.5px;line-height:1.25}.atelier-intro-copy{margin-top:24px;max-width:320px}.atelier-intro-copy p{font-size:13px;line-height:1.9}.atelier-intro-copy>span{font-size:10px;margin-top:15px}.atelier-index{font-size:7px;letter-spacing:1.2px;padding-bottom:15px}.atelier-chapter{scroll-margin-top:76px}.atelier-chapter>.chapter-heading{grid-template-columns:22px minmax(0,1fr) 30px;gap:10px;padding:26px 0;min-height:100px}.chapter-heading .chapter-number{font-size:9px}.chapter-heading h3{font-size:clamp(31px,8.6vw,43px);letter-spacing:-1.6px;gap:12px;flex-wrap:wrap;row-gap:7px}.chapter-heading h3 small{font-size:13px;letter-spacing:0}.chapter-heading .chapter-toggle{width:28px;height:28px;font-size:19px}.atelier-chapter>.chapter-body{grid-template-columns:minmax(0,1fr);gap:19px;padding:0 0 28px}.atelier-art{height:320px}.art-caption,.art-footer{left:17px;right:17px;font-size:6px;letter-spacing:1.4px}.art-caption{top:18px}.art-footer{bottom:17px}.chapter-story{padding:9px 0 0}.chapter-kicker{font-size:8px;letter-spacing:1.5px}.chapter-story h4{font-size:27px;line-height:1.4;margin:18px 0 14px}.chapter-story>p{font-size:13px;line-height:1.9;margin-bottom:0}.atelier .atelier-facts{margin-top:19px}.atelier-facts>summary{font-size:12px;min-height:48px;padding:13px 0}.atelier-facts dd{font-size:12px}.atelier-facts dl>div{grid-template-columns:54px minmax(0,1fr);gap:12px}.atelier-link{font-size:12px;max-width:none;min-height:48px;margin-top:0}.atelier-options{padding-top:6px}.atelier-options button{font-size:12px;min-height:44px}.atelier-live{font-size:10px;line-height:1.9;min-height:38px;margin-top:12px}.orbit-installation{inset:40px 4px}.strategy-core{width:130px;height:130px}.orbit-installation>b{font-size:32px;letter-spacing:-1.4px}.orbit-word{font-size:6px;letter-spacing:1.5px}.word-one{top:12%;left:10%}.word-two{right:4%}.word-three{bottom:8%}.sound-disc{width:137px;height:137px;gap:9px}.sound-disc>b{font-size:23px}.sound-disc>span{font-size:6px}.sound-disc>i{font-size:5px}.sound-disc:after{bottom:24px}.sound-halo{width:205px;height:205px}.atelier-play{bottom:43px;min-height:44px;font-size:11px;padding:9px 16px}.visual-installation{inset:40px 20px}.sheet-image>span{font-size:17px;padding:0 11px}.sheet-back{padding:10px}.sheet-back>span{font-size:5px;letter-spacing:1px}.visual-type{font-size:44px;letter-spacing:-3px}.visual-swatch i{width:17px;height:24px}.visual-swatch{padding:6px}.visual-swatch>span{display:none}.visual-art[data-view=digital] .sheet-image{width:45%;left:37%;border-width:5px;border-radius:15px}.activation-installation{inset:40px 7px}.device-copy{inset:36px 12px 14px;gap:9px}.device-copy b{font-size:22px;max-width:150px}.device-copy small{font-size:5px;letter-spacing:1px}.device-copy>span{font-size:5px}.channel-label{font-size:6px;letter-spacing:1.5px}.activation-art[data-channel=social] .channel-device{width:41%;border-width:4px}.activation-art[data-channel=social] .device-copy b{font-size:20px}.activation-art[data-channel=social] .device-copy{inset:22px 8px 14px}.atelier .module-scope{margin-top:22px;font-size:10px}}
.motion-off .atelier *, .motion-off .atelier *:before,.motion-off .atelier *:after{animation:none!important;transition:none!important}.motion-off .atelier-art:after{display:none}@media(prefers-reduced-motion:reduce){.atelier *,.atelier *:before,.atelier *:after{animation:none!important;transition:none!important}.atelier-art:after{display:none}}
.atelier-chapter>.chapter-body{max-width:none}
.atelier-chapter[open]>.chapter-heading .chapter-toggle{transform:none!important;font-size:0}.atelier-chapter[open]>.chapter-heading .chapter-toggle:before{content:'×';font-size:23px}@media(max-width:700px){.atelier-chapter[open]>.chapter-heading .chapter-toggle:before{font-size:19px}}