@font-face{font-family:Geniral;src:url('assets/Geniral.ttf');font-display:swap}@font-face{font-family:Plex;src:url('assets/IBMPlexMono-Light.ttf');font-weight:300;font-display:swap}@font-face{font-family:Plex;src:url('assets/IBMPlexMono-Bold.ttf');font-weight:700;font-display:swap}
:root{--paper:#f3f0e8;--black:#0b0b0a;--muted:#bcb9b0;--u:calc(100svh / 900)}*{box-sizing:border-box}html,body{margin:0;background:var(--black);color:var(--paper);font:300 16px/1.2 Plex,monospace}body{overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}a{color:inherit}.skip{position:fixed;top:-100px;z-index:99}.skip:focus{top:12px}.header{position:fixed;z-index:20;left:0;top:0;width:100%;display:flex;align-items:center;gap:53px;padding:48px 58px;mix-blend-mode:difference;color:white;pointer-events:none}.header>*{pointer-events:auto}.brand,.brand img{display:block;width:60px;height:60px}.header nav{display:flex;gap:28px}.header button{font-size:16px;padding:0}.story-sticky{position:sticky;top:0;height:100svh;overflow:hidden}#rail{display:flex;width:max-content;height:100%;will-change:transform}#rail > section{position:relative;flex:none;height:100%;overflow:hidden}.intro{width:calc(1448 * var(--u))}.intro-film{position:absolute;left:calc(571 * var(--u));width:calc(877 * var(--u));height:100%;overflow:hidden}.intro-film video{position:absolute;width:160%;left:-30%;height:100%;object-fit:cover;transform:translate3d(var(--pan,0px),0,0)}.intro-copy{position:absolute;left:calc(58 * var(--u));top:calc(217 * var(--u));z-index:2}.display{font:400 calc(150 * var(--u))/.87 Geniral,sans-serif;margin:0}.display>span{display:block;white-space:nowrap}.intro .display{font-size:calc(243.287 * var(--u));line-height:.78}.intro-description{width:401px;max-width:40vw;font-size:16px;line-height:1.2;margin:calc(10 * var(--u)) 0 0;position:absolute;top:calc(390 * var(--u))}.cta{border:1px solid var(--paper);height:calc(79 * var(--u));min-height:60px;width:calc(302 * var(--u));display:flex;align-items:center;justify-content:space-between;padding:0 20px;font:400 calc(45 * var(--u))/1 Geniral;white-space:nowrap;transition:background .25s,color .25s}.cta img{flex:none}.intro .cta{position:absolute;top:calc(489 * var(--u));width:calc(340 * var(--u));font-size:calc(51 * var(--u))}.character{width:calc(1120 * var(--u))}.character-copy{position:absolute;left:calc(99 * var(--u));top:calc(131 * var(--u));z-index:3}.category-label{font-size:16px;font-weight:700;color:#e20bf3;margin:0 0 calc(34 * var(--u))}.description{font-size:16px;line-height:1.2;margin:calc(6 * var(--u)) 0 calc(28 * var(--u));padding-top:calc(0 * var(--u))}.character .display{margin-bottom:calc(6 * var(--u))}.photo{position:absolute;left:calc(488 * var(--u));top:calc(26 * var(--u));width:calc(514 * var(--u));height:calc(848 * var(--u));overflow:hidden}.photo img{position:absolute;width:160%;max-width:none;left:-30%;height:100%;object-fit:cover;transform:translate3d(var(--pan,0px),0,0)}.outline{position:absolute;left:calc(540 * var(--u));top:calc(56 * var(--u));width:calc(520 * var(--u));height:calc(793 * var(--u));border:1px solid #f3f0e8;z-index:2;pointer-events:none}.detail{position:absolute;left:calc(134 * var(--u));top:calc(646 * var(--u));width:calc(307 * var(--u));height:calc(174 * var(--u));overflow:hidden}.detail img{width:125%;height:100%;object-fit:cover;position:absolute;left:-12.5%;transform:translate3d(var(--pan,0px),0,0)}.leopard{width:calc(1073 * var(--u))}.leopard .character-copy{left:calc(67 * var(--u));top:calc(310 * var(--u))}.leopard .category-label,.velvet .category-label{color:#b7f428}.leopard .photo{left:calc(452 * var(--u));width:calc(538 * var(--u))}.leopard .outline{left:calc(424 * var(--u))}.leopard .detail{left:calc(193 * var(--u));top:calc(88 * var(--u))}.velvet{width:calc(1015 * var(--u))}.velvet .photo{left:0;top:calc(-33 * var(--u));width:calc(592 * var(--u));height:calc(933 * var(--u))}.velvet .outline{left:calc(36 * var(--u));width:calc(438 * var(--u))}.velvet .character-copy{left:calc(542 * var(--u));top:calc(109 * var(--u))}.velvet .detail{left:calc(474 * var(--u));top:calc(630 * var(--u))}.progress{position:absolute;bottom:30px;left:58px;right:58px;display:flex;gap:25px;align-items:center;z-index:10;font-size:14px;mix-blend-mode:difference;color:white}.progress #previous{font-size:28px}.progress #position{min-width:90px}.track{position:relative;flex:1;display:flex;justify-content:space-between;align-items:center;height:25px}.track:before{content:'';position:absolute;top:12px;width:100%;height:1px;background:#fff8}.fill{position:absolute;top:11px;height:3px;background:white}.track button{position:relative;width:24px;height:25px}.track button:after{content:'';position:absolute;left:11px;top:8px;width:2px;height:9px;background:white}
#catalog{background:var(--paper);color:var(--black);position:relative;padding:235px 4vw 80px;min-height:2649px;flex:0 0 100vw;width:100vw;align-self:flex-start;will-change:transform}.catalog-heading{position:absolute;right:4%;top:190px;text-align:right}.catalog-heading span{opacity:.5}.catalog-heading h2{opacity:.2;margin:25px 0 0;font:400 150px/.87 Geniral}.catalog-section{scroll-margin-top:150px;margin:0 0 320px;position:relative}.catalog-section:last-of-type{margin-bottom:90px}.category-heading{display:flex;align-items:center;gap:38px;min-height:131px;margin-bottom:47px}.category-heading h2{font:400 150px/.87 Geniral;margin:0;flex:none}.category-heading p{max-width:371px;margin:0;font-size:16px;line-height:1.2}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.cards button{padding:0;text-align:left;transition:transform .3s}.card-photo{height:333px;overflow:hidden}.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.cards small{display:block;margin:14px 0 8px;font-size:14px}.card-title{height:36px;display:flex;align-items:center}.card-title img{max-width:100%;object-fit:contain;object-position:left}.cards span{display:block;font:300 17px/1.4 Arial,sans-serif;margin-top:9px}.back-top{padding:0;font-size:16px}.person{background-size:cover;background-position:center}.p0{background-image:url('assets/lavender.jpg')}.p1{background-image:url('assets/grey.jpg')}.p2{background-image:url('assets/blue.jpg')}.p3{background-image:url('assets/gold.jpg')}.p4{background-image:url('assets/figma/43-imgImage17.png')}.p5{background-image:url('assets/figma/43-imgImage18.png')}
dialog{background:var(--black);color:var(--paper);border:1px solid #6e6b63;padding:0;width:min(1150px,94vw);max-height:92dvh}dialog::backdrop{background:#000c;backdrop-filter:blur(8px)}#product[open]{display:grid;grid-template-columns:1fr 1fr}.product-photo{min-height:730px}.product-info{padding:55px 45px 35px}.product-info h2{font-size:45px;font-weight:400;line-height:1.05}.product-description{font-size:13px;line-height:1.5;color:var(--muted)}.close{position:absolute;top:15px;right:18px;z-index:5;width:35px;height:35px;background:var(--black);font-size:20px}fieldset{padding:20px 0;margin:12px 0;border:0;border-top:1px solid #ffffff40;display:flex;gap:8px;flex-wrap:wrap}legend{padding-right:15px;font-size:10px;letter-spacing:.1em}fieldset label{position:relative;cursor:pointer}fieldset input{position:absolute;opacity:0}fieldset span{display:block;padding:12px;border:1px solid #ffffff60;font-size:11px}input:checked+span{background:var(--paper);color:var(--black)}input:focus-visible+span{outline:2px solid var(--paper);outline-offset:3px}.choose{background:var(--paper);color:var(--black);padding:19px;width:100%;text-transform:uppercase;font-size:12px}.selection{font-size:13px;line-height:1.5}.demo-note{font-size:10px;line-height:1.6;color:var(--muted);margin-top:25px}#about-dialog{padding:60px;width:min(650px,92vw)}#about-dialog h2{font-size:55px;font-weight:400}#about-dialog p{line-height:1.6}#about-dialog .text-arrow{margin-top:40px}.preloader{position:fixed;inset:0;z-index:100;background:var(--black);color:var(--paper);padding:40px 4vw;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0);transition:clip-path .9s cubic-bezier(.76,0,.24,1);pointer-events:auto}
.preloader[hidden]{display:none}
.preloader-logo{width:90px;height:90px;object-fit:contain}
.preloader-copy{position:absolute;top:46px;left:50%;right:4vw;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.16em}
.preloader-count{font:400 clamp(180px,34vw,540px)/.75 Geniral,Helvetica,sans-serif;margin:auto 0 40px;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.preloader-count>span{font-size:.23em;vertical-align:top;display:inline-block;margin: .2em 0 0 .3em}
.preloader-track{height:1px;background:#ffffff30;width:100%;overflow:hidden}
.preloader-track div{height:100%;width:0;background:var(--paper);transition:width .45s ease}
.preloader-status{margin-top:20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.preloader.is-leaving{clip-path:inset(0 0 100% 0);pointer-events:none}
.preloader-copy,.preloader-status{font-size:14px}
.product-info h2,#about-dialog h2{font:400 68px/.9 Geniral}.product-description,.demo-note{font-size:16px}.product-link{display:block;text-decoration:none;margin-top:30px}.is-loading{overflow:hidden}.header{transition:opacity .2s}
@media(max-width:700px){:root{--u:calc(100svh / 900)}.header{padding:20px;gap:22px;width:100%}.brand,.brand img{width:42px;height:42px}.header nav{gap:14px;flex-wrap:wrap}.header button{font-size:11px}.intro{width:100vw}.intro-film{left:20%;width:80%}.intro-copy{left:24px;top:23vh}.intro .display{font-size:26vw}.intro-description{top:29vh;width:290px;max-width:85vw;font-size:15px;background:#0b0b0acc;padding:10px}.intro .cta{top:48vh;width:290px;font-size:40px}.character{width:110vw}.character .photo{left:25%;width:72%;top:12%;height:76%}.character .character-copy{left:24px;top:33%;text-shadow:0 2px 14px #000}.character .display{font-size:26vw}.character .category-label{margin-bottom:20px;font-size:14px}.character .description{font-size:15px;margin:20px 0}.character .cta{width:280px;font-size:38px;background:#0b0b0abf}.character .detail{display:none}.character .outline{left:29%;top:15%;width:65%;height:70%}.progress{left:20px;right:20px;bottom:20px;gap:10px;font-size:11px}.progress #position{min-width:55px}.progress button{font-size:11px}#catalog{padding:190px 22px 50px;min-height:0}.catalog-heading{top:120px;right:22px}.catalog-heading span{font-size:12px}.catalog-heading h2{font-size:52px;margin-top:10px}.category-heading{display:block;margin-bottom:30px}.category-heading h2{font-size:84px;margin-bottom:24px}.category-heading p{font-size:15px;max-width:330px}.catalog-section{margin-bottom:110px;scroll-margin-top:120px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 15px}.card-photo{height:240px}.card-title{height:30px}.card-title img{max-height:30px}.cards span{font-size:14px}#product[open]{display:block}.product-photo{min-height:0;height:50vh}.product-info{padding:30px 24px}.preloader-copy{font-size:10px;left:auto;right:20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.photo img,.detail img,.intro-film video{transform:none!important}}
/* Keep the catalogue rhythm from Frame 44. */
.cards .card-price{font-family:Plex,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:700px){.cards .card-price{font-size:16px}}
@media(min-width:701px){.catalog-section{margin-bottom:171px}.catalog-section:last-of-type{margin-bottom:90px}}
.catalog-active .header{mix-blend-mode:normal;background:transparent;color:var(--black);width:100%}.catalog-active .header .brand img{filter:invert(1)}
[hidden]{display:none!important}
@media(max-width:700px){.header{mix-blend-mode:normal;background:transparent;color:var(--paper)}.header button{font-size:12px}.header nav{gap:12px}.intro .cta{background:#0b0b0a99}}

/* Opening composition from the approved screenshot, 18 October. */
@media(min-width:701px){
 .intro{--hero-unit:min(calc(100vw / 1448),calc(100svh / 900));width:100vw}
 .intro-film{left:calc(563 * var(--hero-unit));right:0;width:auto;top:0;bottom:0;height:auto}
 .intro-copy{inset:0;width:100%;height:100%;pointer-events:none}
 .intro .display{position:absolute;left:calc(58 * var(--hero-unit));top:30svh;font-size:calc(262 * var(--hero-unit));line-height:.78}
 .intro-description{left:calc(638 * var(--hero-unit));top:65.35svh;width:calc(390 * var(--hero-unit));max-width:none;margin:0;font-size:clamp(14px,calc(16 * var(--hero-unit)),24px);line-height:1.2}
 .intro .cta{left:calc(638 * var(--hero-unit));top:77svh;width:calc(340 * var(--hero-unit));height:calc(79 * var(--hero-unit));padding:0 calc(26 * var(--hero-unit));font-size:calc(51 * var(--hero-unit));pointer-events:auto}
 .header{padding:calc(48 * var(--u)) calc(58 * var(--u));gap:calc(53 * var(--u));mix-blend-mode:normal}
 .header .brand,.header .brand img{width:calc(60 * var(--u));height:calc(60 * var(--u))}
 .header nav{gap:calc(28 * var(--u))}
 .header button{font-size:clamp(14px,calc(16 * var(--u)),24px)}
 .progress{left:calc(58 * var(--u));right:calc(58 * var(--u));bottom:calc(50 * var(--u));gap:calc(25 * var(--u));mix-blend-mode:normal;font-size:clamp(14px,calc(16 * var(--u)),24px)}
 #previous{display:none}
 #position{min-width:calc(66 * var(--u))}
}
@media(min-width:701px) and (max-height:600px){
 .intro .display{top:26svh}
 .intro-description{top:58svh}
 .intro .cta{top:75svh;min-height:48px;font-size:max(32px,calc(51 * var(--hero-unit)))}
}

/* Stable navigation geometry, including the final catalogue label. */
.progress #position{flex:0 0 7ch;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.progress #next{flex:0 0 10ch;white-space:nowrap;text-align:right;padding:0}
.progress .track{min-width:0}
/* Type is revealed without moving its reserved layout. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.type-visual,.type-char{display:inline}
.motion-ready .reveal-copy .type-char{opacity:0}
.motion-ready .reveal-copy.is-revealed .type-char{animation:type-ink 1ms steps(1,end) both;animation-delay:calc(var(--char-order) * 34ms + var(--title-delay,0ms))}
@keyframes type-ink{from{opacity:0}to{opacity:1}}
.motion-ready .reveal-copy .reveal-label,
.motion-ready .reveal-copy .reveal-description,
.motion-ready .reveal-copy .reveal-action{opacity:0;translate:0 14px;transition:opacity .45s ease,translate .65s cubic-bezier(.16,1,.3,1)}
.motion-ready .reveal-copy.is-revealed .reveal-label,
.motion-ready .reveal-copy.is-revealed .reveal-description,
.motion-ready .reveal-copy.is-revealed .reveal-action{opacity:1;translate:0 0}
.reveal-copy.is-revealed .reveal-description{transition-delay:var(--copy-delay,450ms)}
.reveal-copy.is-revealed .reveal-action{transition-delay:var(--action-delay,600ms)}
/* Reveal the complete card; nested hover animations keep their own timing. */
.cards .reveal-card:nth-child(4n+1){--card-delay:0ms}
.cards .reveal-card:nth-child(4n+2){--card-delay:180ms}
.cards .reveal-card:nth-child(4n+3){--card-delay:360ms}
.cards .reveal-card:nth-child(4n+4){--card-delay:540ms}
.motion-ready .cards .reveal-card{opacity:0;translate:0 72px;transition:opacity 600ms ease,translate 900ms cubic-bezier(.16,1,.3,1)}
.motion-ready .cards .reveal-card.is-revealed{opacity:1;translate:0 0;transition-delay:var(--card-delay,0ms)}
.motion-ready .cards .reveal-card:focus-within,.motion-ready .cards .reveal-card.reveal-card-instant{opacity:1;translate:0 0;transition:none}
@media(max-width:700px){
 .cards .reveal-card:nth-child(2n+1){--card-delay:0ms}
 .cards .reveal-card:nth-child(2n+2){--card-delay:180ms}
}
.motion-ready .reveal-copy:focus-within .type-char{animation:none;opacity:1}
.motion-ready .reveal-copy:focus-within .reveal-action{opacity:1;translate:none;transition:none}
@media(prefers-reduced-motion:reduce){
 .motion-ready .reveal-copy .type-char{opacity:1;animation:none}
 .motion-ready .reveal-copy .reveal-label,.motion-ready .reveal-copy .reveal-description,.motion-ready .reveal-copy .reveal-action,.motion-ready .cards .reveal-card{opacity:1;translate:none;transition:none}
}
/* Leave clear space above the fixed progress panel on every character slide. */
@media(min-width:701px){
 .character .outline{height:auto;bottom:calc(50 * var(--u) + 56px)}
}

/* Foreground cutaways move independently from the photographic strip. */
#rail .character{overflow:visible}
.character .detail{z-index:5;pointer-events:none;transform:translate3d(var(--detail-shift,0px),0,0);will-change:transform}
@media(min-width:701px){
 .character .outline{top:var(--scene-top,136px)}
 .character-copy{top:max(calc(131 * var(--u)),var(--scene-top,136px))}
 .leopard .character-copy{top:max(calc(310 * var(--u)),var(--scene-top,136px))}
 .velvet .character-copy{top:max(calc(109 * var(--u)),var(--scene-top,136px))}
}
@media(prefers-reduced-motion:reduce){.character .detail{transform:none!important}}

/* The white catalogue enters as the last horizontal panel, then scrolls upward. */
.catalog-entering:not(.catalog-active) .header,.catalog-entering .progress{mix-blend-mode:difference}
.progress{transition:opacity .2s}
.catalog-active .progress{opacity:0;pointer-events:none}
@media(max-width:700px){.catalog-entering:not(.catalog-active) .header{background:transparent}}

/* The vertical catalogue keeps only the filled logo until it is approached. */
.header .brand{position:relative;flex-shrink:0;z-index:2}
.header nav{align-self:stretch;align-items:center;align-content:center;clip-path:inset(0);transform:translateX(0);opacity:1;visibility:visible;transform-origin:left center;transition:clip-path .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),opacity .25s,visibility 0s}
.menu-compact .header{background:transparent;mix-blend-mode:normal;color:var(--black)}
.menu-compact .header .brand{background:var(--paper)}
.menu-compact .header .brand img{filter:invert(1)}
.menu-compact .header .brand::after{content:'';position:absolute;left:100%;top:0;width:var(--menu-gap,53px);height:100%}
.menu-compact .header nav{background:var(--paper);margin-left:calc(-1 * var(--menu-gap,53px));padding-left:var(--menu-gap,53px);padding-right:clamp(16px,calc(24 * var(--u)),32px);clip-path:inset(0 100% 0 0);transform:translateX(calc(-1 * var(--menu-gap,53px)));opacity:0;visibility:hidden;pointer-events:none;transition:clip-path .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),opacity .2s,visibility 0s .4s}
.menu-compact .header.menu-open nav{clip-path:inset(0);transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}