@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--gold:#d4a45e;--cream:#f1eadc;--muted:#a49b8b;--p:0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#0e0d0a;color:var(--cream);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}header{height:100px;position:absolute;top:0;left:0;width:100%;padding:0 5%;display:flex;align-items:center;justify-content:space-between;z-index:10;border-bottom:1px solid #ffffff17}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:4px;color:var(--gold);margin-top:6px}.logo{width:50px;height:54px;background:url('assets/reference.png') -38px -4px/272px 153px no-repeat;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}nav{display:flex;align-items:center;gap:35px;font-size:12px}.nav-cta{padding:14px 21px;border:1px solid #d4a45e80}.nav-cta span{margin-left:30px;color:var(--gold)}.experience{height:245vh;min-height:1500px}.stage{height:100svh;min-height:680px;position:sticky;top:0;overflow:hidden;background:radial-gradient(ellipse at 75% 50%,#342419 0%,#17130e 35%,#0e0d0a 75%)}.orb{position:absolute;width:48vw;height:48vw;right:0;top:7%;border:1px solid #d4a45e14;border-radius:50%;box-shadow:0 0 100px #d4a45e08,inset 0 0 90px #d4a45e08}.giant{position:absolute;font-family:'Barlow Condensed',Impact,sans-serif;font-size:39vw;font-weight:800;line-height:1;color:#d4a45e06;right:-1%;top:13%;letter-spacing:-1vw}.hero-copy{position:absolute;left:8%;top:24%;z-index:3;opacity:calc(1 - var(--p)*3);transform:translateY(calc(var(--p)*-80px));pointer-events:var(--hero-events,auto)}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.3px;color:var(--gold);line-height:1.8}.eyebrow i{display:inline-block;height:5px;width:5px;background:var(--gold);margin-right:8px;border-radius:50%}h1,h2{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-weight:600;line-height:.98;letter-spacing:-1.5px}h1{font-size:clamp(54px,5.3vw,94px);margin:25px 0}em{font-style:normal;color:var(--gold)}.intro{font-size:14px;color:#b8afa0;line-height:1.85}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;background:var(--gold);color:#17120b;border:0;padding:21px 27px;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}.button:hover{background:#edc888;transform:translateY(-3px)}.hero-copy .button{margin-top:20px}.micro{font-size:9px;letter-spacing:1.8px;color:var(--muted);margin-top:20px}.food-scene{position:absolute;left:44%;top:10%;width:55%;height:82%;perspective:1100px;transform:translateX(calc(var(--p)*-4vw))}.sandwich{position:absolute;left:0;top:0;width:100%;height:100%;transform:rotate(calc(-6deg + var(--p)*9deg));filter:drop-shadow(0 18px 25px #0006)}.layer{position:absolute;left:0;top:50%;width:100%;height:23%;background-image:url('assets/xis.png');background-repeat:no-repeat;background-size:100% 600%;transform:translateY(calc(var(--closed) * 1px + (var(--open) - var(--closed))*var(--p)*1px));will-change:transform}.l0{background-position:center 0%;--closed:-132;--open:-265;z-index:6}.l1{background-position:center 20%;--closed:-79;--open:-170;z-index:5}.l2{background-position:center 40%;--closed:-43;--open:-70;z-index:4}.l3{background-position:center 60%;--closed:-12;--open:30;z-index:3}.l4{background-position:center 80%;--closed:17;--open:130;z-index:2}.l5{background-position:center 100%;--closed:50;--open:230;z-index:1}.food-shadow{position:absolute;bottom:5%;left:18%;width:67%;height:8%;border-radius:100%;background:#0009;filter:blur(20px);opacity:calc(1 - var(--p)*.6)}.chapter-copy{position:absolute;left:8%;top:31%;width:32%;opacity:clamp(0,calc(var(--p)*3 - 1),1);transform:translateY(calc((1 - var(--p))*40px));pointer-events:none}.chapter-copy h2{font-size:clamp(44px,4.5vw,76px)}.chapter-copy p:not(.eyebrow){max-width:330px;color:var(--muted);line-height:1.9;font-size:14px}.ingredient-tags{position:absolute;right:3%;top:24%;height:54%;display:flex;flex-direction:column;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:var(--gold);opacity:clamp(0,calc(var(--p)*4 - 2),1)}.ingredient-tags span{border-bottom:1px solid #d4a45e4a;padding:15px 0}.stage-footer{position:absolute;bottom:35px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:var(--muted)}.stage-footer b{color:var(--gold);font-size:18px;margin-left:16px}.progress{position:absolute;bottom:0;height:2px;width:100%;background:#ffffff08}.progress span{display:block;width:calc(var(--p)*100%);height:100%;background:var(--gold)}.manifesto{padding:120px 9%;background:#15120e}.manifesto h2{font-size:clamp(45px,5.5vw,88px);margin:28px 0 65px}.manifesto h2 span{color:#7d7568}.journey{display:grid;grid-template-columns:1fr 1.3fr;gap:80px}.aside{color:var(--muted);font-size:15px;line-height:1.9}.steps details,.faq details{border-top:1px solid #ffffff20;padding:24px 0}summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:26px;font-size:20px}summary::-webkit-details-marker{display:none}summary span{color:var(--gold);font-size:12px}summary b{margin-left:auto;color:var(--gold);font-size:24px;font-weight:400}details[open] summary b{transform:rotate(45deg)}details p{color:var(--muted);font-size:14px;line-height:1.9;max-width:500px}.steps details p{margin-left:43px}.mentor{display:grid;grid-template-columns:1fr 1fr;min-height:700px}.portrait{position:relative;min-height:600px;overflow:hidden;background:#1d130b}.portrait-image{position:absolute;inset:0;background-image:linear-gradient(0deg,#0d0b08,transparent 48%),url('assets/reference.png');background-repeat:no-repeat;background-size:auto 130%;background-position:75% 0;animation:breathe 8s ease-in-out infinite}.portrait-caption{position:absolute;bottom:50px;left:14%;font-size:10px;letter-spacing:3px;color:var(--gold);line-height:2.2}.portrait-caption strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:40px;letter-spacing:0;color:var(--cream)}.mentor-copy{padding:95px 15%;align-self:center}.mentor h2{font-size:clamp(55px,5.3vw,84px);margin:30px 0}.mentor-copy>p:not(.eyebrow){font-size:14px;line-height:1.9;color:var(--muted)}.text-link{display:inline-block;margin-top:28px;font-size:12px;padding-bottom:12px;border-bottom:1px solid var(--gold)}.text-link span{margin-left:30px;color:var(--gold)}.access{text-align:center;padding:130px 6%;background:radial-gradient(ellipse at 50% 100%,#422b18,#16120e 65%);border-top:1px solid #d4a45e25}.access h2{font-size:clamp(44px,5.8vw,90px);margin:30px 0}.access>p:not(.eyebrow):not(.micro){color:var(--muted);font-size:14px;line-height:1.9}.access .button{margin-top:22px}.faq{padding:65px 15% 95px}.faq>.eyebrow{margin-bottom:30px}.faq summary{font-size:17px}footer{padding:35px 6%;border-top:1px solid #ffffff15;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:10px}footer .brand{display:block;color:var(--cream);font-size:15px}dialog{max-width:500px;width:90%;background:#1d1710;color:var(--cream);border:1px solid #d4a45e66;padding:45px}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog h2{font-size:45px}dialog p:not(.eyebrow){color:var(--muted);line-height:1.8}dialog .close{position:absolute;right:15px;top:10px;color:var(--cream);background:transparent;border:0;font-size:30px;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #e3b975;outline-offset:6px}@keyframes breathe{50%{transform:scale(1.035) translateY(-4px)}}
@media(min-width:1600px){.layer{height:25%}.food-scene{width:50%;left:47%}}
@media(max-width:700px){header{height:80px;padding:0 6%}.brand{font-size:15px}.logo{display:none}nav>a:not(.nav-cta){display:none}nav .nav-cta{font-size:10px;padding:11px}.nav-cta span{margin-left:12px}.stage{min-height:720px}.hero-copy{left:7%;top:15%}h1{font-size:56px;margin:17px 0}.eyebrow{font-size:8px}.intro{font-size:12px}.hero-copy .button{padding:15px 20px;margin-top:5px}.micro{font-size:7px}.food-scene{left:19%;width:85%;top:48%;height:45%;transform:translateX(calc(var(--p)*-9vw)) translateY(calc(var(--p)*-15vh))}.layer{height:29%;transform:translateY(calc(var(--closed)*.67px + (var(--open) - var(--closed))*var(--p)*.68px))}.chapter-copy{left:7%;top:13%;width:85%}.chapter-copy h2{font-size:43px;margin:18px 0}.chapter-copy p:not(.eyebrow){font-size:12px;max-width:290px}.ingredient-tags{display:none}.giant{font-size:80vw;top:53%}.stage-footer{font-size:6px;bottom:25px}.stage-footer>span:first-child{display:none}.stage-footer .counter{font-size:8px}.manifesto{padding:80px 7%}.manifesto h2{font-size:48px;margin-bottom:35px}.journey{grid-template-columns:1fr;gap:25px}.aside{font-size:13px}.steps summary{font-size:18px}.mentor{grid-template-columns:1fr}.portrait{min-height:470px}.portrait-image{background-size:auto 120%;background-position:76% 0}.mentor-copy{padding:65px 8%}.mentor h2{font-size:60px}.access{padding:80px 7%}.access h2{font-size:47px}.access p br{display:none}.faq{padding:55px 7%}.faq summary{font-size:15px}footer{flex-wrap:wrap}footer>span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portrait-image{animation:none}.layer{will-change:auto}.button{transition:none}}
/* The photographic layers retain their individual proportions. */
.layer{height:auto;width:calc(100% - var(--p)*22%);left:calc(var(--p)*11%)}
.l0{aspect-ratio:1024/300;background-size:100% 512%;background-position:center 0%}
.l1{aspect-ratio:1024/270;background-size:100% 568.889%;background-position:center 23.697%}
.l2{aspect-ratio:1024/280;background-size:100% 548.571%;background-position:center 45.382%}
.l3{aspect-ratio:1024/220;background-size:100% 698.182%;background-position:center 64.59%}
.l4{aspect-ratio:1024/220;background-size:100% 698.182%;background-position:center 81.307%}
.l5{aspect-ratio:1024/246;background-size:100% 624.39%;background-position:center 100%}
/* Isolated avatar and sandwiches, without reference artwork lettering. */
.portrait{background:radial-gradient(ellipse at 50% 55%,#3b2919 0%,#19130d 58%,#0e0d0a 100%);min-height:650px}
.portrait-image{inset:20px 12px 100px;background-image:url('assets/avatar-xis-gaucho.png');background-size:contain;background-position:center center;background-repeat:no-repeat;transform-origin:center bottom}
.portrait-caption{bottom:25px;left:10%;pointer-events:none}
@media(max-width:700px){.portrait{min-height:560px}.portrait-image{inset:15px 8px 95px;background-size:contain;background-position:center center}.portrait-caption{left:8%;bottom:20px}}
