*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100svh;display:flex;flex-direction:column;margin:0;position:relative;isolation:isolate;background:#080807;color:#e8e0d1;font-family:'LULUKA Songti TC','Noto Serif CJK TC',serif;line-height:1.8}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:#080807 url('/brands/assets/bg.jpg') center/cover no-repeat}
a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}
header,main,footer{width:100%;margin:0 auto}main{flex:1}
/* The compact transparent header stays in document flow and scrolls out of view. */
header{position:relative;z-index:30;padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px;display:flex;align-items:center;justify-content:center;background:transparent;pointer-events:none}
.logo{position:relative;isolation:isolate;display:block;width:min(140px,44vw);line-height:0;pointer-events:auto}
.logo img{display:block;width:100%;height:auto}
/* A folded warm highlight travels across the PNG alpha, never across a rectangle. */
@supports (mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000)){
.logo::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(108deg,transparent 39%,#b5712426 43%,#ffc9637a 46%,#fff8dcf2 48.5%,#fffff8 49.5%,#ffdc92b3 51%,#fff4d2cc 53%,transparent 57%);background-size:300% 100%;background-repeat:no-repeat;background-position:110% 0;-webkit-mask-image:url('/brands/assets/luluka-classic-wordmark-20261017.png');mask-image:url('/brands/assets/luluka-classic-wordmark-20261017.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen;animation:wordmark-refraction 5.6s cubic-bezier(.4,0,.2,1) infinite}
}
@keyframes wordmark-refraction{0%,6%{background-position:110% 0;opacity:0}12%{opacity:.9}36%{background-position:-10% 0;opacity:.9}42%,100%{background-position:-10% 0;opacity:0}}
footer{padding:12px 0;border-top:.5px solid #b8995c30;display:flex;align-items:center;justify-content:center}
.footer-logo{color:#c4b38c;letter-spacing:.22em;font-size:14px;line-height:1.3}
.skip{position:absolute;left:20px;top:-100px;background:#e3c98c;color:#080807;padding:10px;z-index:10}.skip:focus{top:10px}
:focus-visible{outline:2px solid #e3c98c;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Five columns occupy the middle three-fifths of the desktop viewport. */
.brands{position:relative;width:60%;margin-inline:auto;padding:24px 0 20px}
.brands+.brands{padding-top:8px}
.brand-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.brand-card{container-type:inline-size;min-width:0;aspect-ratio:53.98 / 85.6;position:relative;display:block;overflow:hidden;isolation:isolate;background:#160f0b;color:#e5dcc9;border:2px solid #e2c186;border-radius:5.891% / 3.715%;box-shadow:0 10px 30px #0006,0 0 5px #f5d69b9c,0 0 15px #d5b67655,inset 0 0 4px #f3cd8526;transition:border-color .18s ease,box-shadow .18s ease;cursor:pointer;touch-action:pan-x pan-y}
.card-art{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.86}
.card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;pointer-events:none}
.art-active{visibility:hidden;filter:brightness(1.2)}
.brand-card::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url('/brands/assets/vendor/luluka-public-media/0abcd3ebeaf34e04165d05ff1b9f8dd23f9ff2458c7eaaab094484984daea025/card-dark-geometric-totem.svg'),radial-gradient(ellipse at 70% 75%,#59351f38,transparent 75%),linear-gradient(#39261924,#39261924),linear-gradient(90deg,#080807b8 0%,#0808075c 23%,transparent 58%);background-size:100% 100%,auto,auto,auto;background-repeat:no-repeat}
/* Text sits directly on the scene; a continuous edge shade supports readability. */
.ukiyo-card::before,.glass-card::before{background:linear-gradient(90deg,#0e0908b8,transparent 48%),linear-gradient(0deg,#110d0b22,transparent 45%)}
.ukiyo-card .card-art,.glass-card .card-art{opacity:.96}
.brand-content{position:absolute;inset:10.4cqw auto auto 8.2cqw;z-index:4;display:flex;gap:.74cqw;align-items:flex-start;pointer-events:none;background:none}
.brand-card h2{font-family:'LULUKA Songti TC',serif;writing-mode:vertical-rl;text-orientation:upright;font-size:calc(12.6cqw + .504px);font-weight:400;font-synthesis:none;font-optical-sizing:none;line-height:1.05;letter-spacing:.18em;inline-size:4.72em;block-size:1.05em;flex-shrink:0;margin:0;white-space:nowrap;transform:scaleX(.88);transform-origin:left top;text-shadow:0 1px 3px #080807,0 0 8px #080807;transition:color .14s ease,text-shadow .14s ease}
.brand-card p{writing-mode:vertical-rl;text-orientation:mixed;font-size:calc(4.82cqw + .1928px);font-weight:400;font-synthesis:none;line-height:1.25;margin:.9cqw 0 0;color:#c5b494;letter-spacing:.02em;text-shadow:0 1px 4px #000,0 0 5px #000;transition:color .14s ease,text-shadow .14s ease}
.brand-card:focus-visible,.brand-cards:focus-visible{outline:none}
.brand-card:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible){border-color:#fff0c2;box-shadow:0 10px 30px #0008,0 0 6px #ffe8bdee,0 0 16px #eac477b3,0 0 28px #e5b56773,inset 0 0 10px #f3cd8540}
.brand-card:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible) .card-art{opacity:1;animation:none}
.brand-card.has-active-art:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible) .art-active{visibility:visible}
.brand-card.has-active-art:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible) .art-idle{visibility:hidden}
.brand-card:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible) h2{color:#fff8e6;text-shadow:0 0 2px #fff6df,0 0 7px #ffe5ac,0 0 18px #edc57dcc,0 0 30px #c89d5099}
.brand-card:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible) p{color:#ffe6ae;text-shadow:0 0 5px #ffe5acb3,0 0 14px #edc57d99}
@media(hover:hover) and (pointer:fine){
.brand-card:hover{border-color:#fff0c2;box-shadow:0 10px 30px #0008,0 0 6px #ffe8bdee,0 0 16px #eac477b3,0 0 28px #e5b56773,inset 0 0 10px #f3cd8540}
.brand-card:hover .card-art{opacity:1;animation:none}
.brand-card.has-active-art:hover .art-active{visibility:visible}.brand-card.has-active-art:hover .art-idle{visibility:hidden}
.brand-card:hover h2{color:#fff8e6;text-shadow:0 0 2px #fff6df,0 0 7px #ffe5ac,0 0 18px #edc57dcc,0 0 30px #c89d5099}.brand-card:hover p{color:#ffe6ae;text-shadow:0 0 5px #ffe5acb3,0 0 14px #edc57d99}
}
.brand-card::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#e9bd6920 44%,#fff0c273 49%,#fff9e6a6 50%,#ffe3a74d 52%,transparent 60%);mix-blend-mode:screen;opacity:0;transform:translateX(-130%)}
.brand-card.is-brushing::after{animation:card-sheen-touch .46s ease-out 1}
@keyframes card-sheen-touch{0%{opacity:0;transform:translateX(-130%)}15%,75%{opacity:.9}100%{opacity:0;transform:translateX(130%)}}
.brand-card.is-idle-breathing:not(:is(.is-revealed,.is-swipe-feedback,.is-pressed,:focus-visible)){animation:card-idle-breathe 3s ease-in-out 1}
@keyframes card-idle-breathe{0%,100%{border-color:#e2c186;box-shadow:0 10px 30px #0006,0 0 5px #f5d69b9c,0 0 15px #d5b67655,0 0 36px #bd914300,inset 0 0 4px #f3cd8526}50%{border-color:#fff6da;box-shadow:0 10px 30px #0006,0 0 14px #fff1caff,0 0 32px #ffd481eb,0 0 48px #e7af5599,inset 0 0 16px #ffe3a3b3}}
.carousel-controls,.carousel-pagination{display:none}
@media(max-width:900px),(hover:none) and (pointer:coarse){
.logo{width:min(110px,36vw)}.footer-logo{font-size:16px}
.brands{--carousel-card-width:min(72vw,360px);width:100%;padding:16px 0 8px;display:flex;flex-direction:column;gap:12px}.brands+.brands{padding-top:16px}
.brand-cards{width:100%;display:flex;flex-wrap:nowrap;gap:20px;padding:14px calc((100vw - var(--carousel-card-width))/2);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:calc((100vw - var(--carousel-card-width))/2);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.brand-cards::-webkit-scrollbar{display:none}
.brand-card{flex:0 0 var(--carousel-card-width);width:var(--carousel-card-width);max-width:none;scroll-snap-align:center;scroll-snap-stop:always}
.carousel-controls{position:absolute;inset:30px 5px auto;height:calc(var(--carousel-card-width)*1.5857725083);z-index:6;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.carousel-arrow{width:56px;height:88px;display:flex;align-items:center;justify-content:center;padding:0;background:radial-gradient(ellipse,#080807d9,transparent 75%);border:0;color:#d2be96;pointer-events:auto;cursor:pointer;transition:transform .12s ease,background .12s ease}
.carousel-arrow svg{width:52px;height:76px;stroke-width:1;filter:drop-shadow(0 3px 2px #000e) drop-shadow(0 0 7px #d5b67655);transition:filter .12s ease}.next-card svg{transform:scaleX(-1)}
.carousel-arrow:focus-visible{outline:1px solid #c1ab7f;outline-offset:-2px}
.carousel-arrow:is(:active,.is-activated){transform:scale(.93);background:radial-gradient(ellipse,#e9c77c38,transparent 72%)}
.carousel-arrow:is(:active,.is-activated) svg{filter:brightness(1.3) drop-shadow(0 3px 2px #000e) drop-shadow(0 0 12px #ffe0a4d9)}
.carousel-pagination{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px}
.carousel-dot{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#c1ab7f;cursor:pointer}
.carousel-dot::before{content:'';width:11px;height:11px;border:1px solid #b49d7166;border-radius:50%;background:#b49d7122;transition:background .2s,border-color .2s}
.carousel-dot[aria-current=true]::before{background:#c1ab7f;border-color:#c1ab7f;box-shadow:0 0 8px #c1ab7f22}
.brand-cards.is-swipe-feedback .brand-card{animation:none}.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback){border-color:#e2c186;box-shadow:0 10px 30px #0006,0 0 5px #f5d69b9c,0 0 15px #d5b67655,inset 0 0 4px #f3cd8526;transition:none}
.brand-cards.is-swipe-feedback .brand-card.is-swipe-feedback{border-color:#fff1c2;box-shadow:0 10px 30px #0008,0 0 8px #ffe8bdb3,0 0 20px #eac47780,inset 0 0 8px #f3cd8540;animation:card-idle-breathe 3s ease-in-out infinite}
.brand-cards.is-swipe-feedback .brand-card:is(.is-swipe-feedback,.is-revealed,.is-pressed) .card-art{opacity:.86}
.brand-cards.is-swipe-feedback .brand-card:is(.is-swipe-feedback,.is-revealed,.is-pressed) .art-active{visibility:hidden}
.brand-cards.is-swipe-feedback .brand-card:is(.is-swipe-feedback,.is-revealed,.is-pressed) .art-idle{visibility:visible}
.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback) .card-art{opacity:.86}
.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback) .art-active{visibility:hidden}.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback) .art-idle{visibility:visible}
.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback) h2{color:#e5dcc9;text-shadow:0 1px 3px #080807,0 0 8px #080807;transition:none}.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback) p{color:#c5b494;text-shadow:0 1px 4px #000,0 0 5px #000;transition:none}
.brand-cards.is-swipe-feedback .brand-card:not(.is-swipe-feedback)::after{animation:none;opacity:0}
/* On touch carousels, the centered card keeps its original art while it breathes. */
.brand-cards.is-tap-feedback .brand-card .art-active,.brand-cards.is-swipe-feedback .brand-card .art-active{visibility:hidden!important}
.brand-cards.is-tap-feedback .brand-card .art-idle,.brand-cards.is-swipe-feedback .brand-card .art-idle{visibility:visible!important}
.brand-cards.is-tap-feedback .brand-card .card-art,.brand-cards.is-swipe-feedback .brand-card .card-art{opacity:.86!important;animation:none!important}
.brand-cards.is-tap-feedback .brand-card.is-revealed,.brand-cards.is-swipe-feedback .brand-card.is-swipe-feedback,.brand-cards .brand-card.is-carousel-current{animation:card-idle-breathe 3s ease-in-out infinite!important}
.brand-cards.is-tap-feedback .brand-card.is-revealed,.brand-cards.is-swipe-feedback .brand-card.is-swipe-feedback,.brand-cards .brand-card.is-carousel-current{border-color:#e2c186;box-shadow:0 10px 30px #0006,0 0 5px #f5d69b9c,0 0 15px #d5b67655,0 0 36px #bd914300,inset 0 0 4px #f3cd8526}
.brand-cards.is-tap-feedback .brand-card.is-revealed h2,.brand-cards.is-swipe-feedback .brand-card.is-swipe-feedback h2{color:#e5dcc9;text-shadow:0 1px 3px #080807,0 0 8px #080807}
.brand-cards.is-tap-feedback .brand-card.is-revealed p,.brand-cards.is-swipe-feedback .brand-card.is-swipe-feedback p{color:#c5b494;text-shadow:0 1px 4px #000,0 0 5px #000}
}
/* Bronze pixel scenes share the dark card palette and direct gold typography. */
.pixel-card::before{background:linear-gradient(90deg,#100c09d9,#100c0960 22%,transparent 48%)}
.pixel-card .card-art{opacity:.96}
.pixel-card .card-art img{image-rendering:pixelated}
.pixel-card .art-active{filter:none}
@media(prefers-reduced-motion:reduce){.logo::after{animation:none;display:none}.brand-card,.brand-card h2,.brand-card p,.carousel-arrow,.carousel-arrow svg{transition:none}.brand-card,.brand-card::after,.brand-card .card-art{animation:none!important}.brand-card .card-art{filter:none}.brand-card::after{opacity:0}}