@charset "UTF-8";
:root{color-scheme:light;--ink:#293263;--paper:#f8f7f3}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;background:var(--paper);color:var(--ink)}
body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.wrap{width:min(1180px,calc(100% - 100px));margin-inline:auto}
.hero{position:relative;height:calc(100svh - var(--lu-header-height));min-height:480px;overflow:hidden;overflow:clip;isolation:isolate;background:#e9e0d1}
.world{position:absolute;inset:0;overflow:hidden}
.atelier{display:block;position:absolute;max-width:none;width:100%;height:100%;object-fit:cover;object-position:29.2% 48%;filter:none;will-change:filter}
/* The room and foreground team share measured coordinates, camera and focus. */
.team-layer{position:absolute;z-index:23;pointer-events:none}
.atelier-team-image{position:relative;z-index:1;display:block;width:100%;height:auto;max-width:none;pointer-events:none}
.atelier-background{display:block;width:100%;height:100%;max-width:none}
/* Desktop sizing is fitted to the hero; JS keeps the table on its visible bottom edge. */
.atelier-team{--team-width:.6;--team-inset:0;position:absolute;display:block;left:40%;bottom:0;width:60%;height:auto;max-width:none;pointer-events:none}
/* The previous four-person face frames do not belong to the replacement image. */
.team-face{display:none!important}
@media(max-width:760px) and (orientation:portrait){.atelier-team{left:0;width:100%;bottom:0}}
.shelf-invitation{--invitation-edge:0%;position:absolute;left:24.760766%;top:calc(52.072264% + 5px);width:14.832536%;opacity:0;pointer-events:none;isolation:isolate;transform:translateY(12px);filter:blur(8px)}
.shelf-invitation::before{content:"";position:absolute;inset:-12% -5%;z-index:0;background:radial-gradient(ellipse at center,rgba(255,253,247,.74) 0%,rgba(255,253,247,.5) 48%,rgba(255,253,247,0) 74%);filter:blur(5px)}
.shelf-invitation img{position:relative;z-index:1;display:block;width:100%;height:auto;max-width:none}
.shelf-invitation::before,.shelf-invitation img{mask-image:linear-gradient(90deg,#000 calc(var(--invitation-edge) - 18%),transparent var(--invitation-edge));-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--invitation-edge) - 18%),transparent var(--invitation-edge))}
/* Light follows the lettering; the leaf cluster keeps gently twinkling. */
.shelf-invitation::after{content:"";position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;background:linear-gradient(110deg,transparent 43%,rgba(255,244,204,.38) 48%,rgba(255,255,245,.95) 50%,rgba(255,244,204,.38) 52%,transparent 57%);background-size:250% 100%;background-position:200% 0;mask:url("assets/shelf-invitation-user-20260915.png") center/contain no-repeat;-webkit-mask:url("assets/shelf-invitation-user-20260915.png") center/contain no-repeat}
.invitation-sparkles{position:absolute;inset:0;z-index:3;pointer-events:none}
.invitation-sparkles i{position:absolute;left:20%;top:13%;display:block;width:12px;height:12px;opacity:0;background:radial-gradient(circle,#fffef3 0 15%,#fff4bf 35%,#eed49a 70%);clip-path:polygon(50% 0,58% 36%,70% 30%,64% 42%,100% 50%,64% 58%,70% 70%,58% 64%,50% 100%,42% 64%,30% 70%,36% 58%,0 50%,36% 42%,30% 30%,42% 36%);transform:translate(-50%,-50%) scale(.3);filter:drop-shadow(0 0 3px #fff5c9)}
.invitation-sparkles i:nth-child(2){left:79%;top:20%;width:15px;height:15px}
.invitation-sparkles i:nth-child(3){left:67%;top:90%;width:11px;height:11px}
.invitation-sparkles i:nth-child(4){--leaf-delay:-1.2s;left:84%;top:8%;width:9px;height:9px}
.invitation-sparkles i:nth-child(5){--leaf-delay:-2.4s;left:72%;top:39%;width:8px;height:8px}
.shelf-invitation[data-phase="complete"]::after{animation:invitation-sheen 6.8s ease-in-out .15s infinite}
.shelf-invitation[data-phase="complete"] .invitation-sparkles i{animation:invitation-glint 6.8s ease-in-out .45s infinite}
.shelf-invitation[data-phase="complete"] .invitation-sparkles i:nth-child(3){animation-delay:1.95s}
.shelf-invitation[data-phase="complete"] .invitation-sparkles i.invitation-leaf-glint{animation:invitation-leaf-twinkle 3.6s ease-in-out var(--leaf-delay,0s) infinite}
.hero[data-playback="paused"] .shelf-invitation::after,.hero[data-playback="paused"] .shelf-invitation[data-phase="complete"] .invitation-sparkles i{animation-play-state:paused}
@keyframes invitation-sheen{0%{background-position:200% 0;opacity:0}8%{opacity:.9}32%{background-position:-100% 0;opacity:.9}40%,100%{background-position:-100% 0;opacity:0}}
@keyframes invitation-glint{0%,20%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}8%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(12deg)}14%{opacity:.65;transform:translate(-50%,-50%) scale(.65) rotate(24deg)}}
@keyframes invitation-leaf-twinkle{0%,100%{opacity:.16;transform:translate(-50%,-50%) scale(.45) rotate(-8deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(12deg)}70%{opacity:.35;transform:translate(-50%,-50%) scale(.65) rotate(22deg)}}
@media(prefers-reduced-motion:reduce){.shelf-invitation::after,.shelf-invitation .invitation-sparkles{display:none}}
@media(max-width:760px) and (orientation:portrait){.shelf-invitation{left:23.67531%;top:calc(55.806088% + 5px);width:65.95265%}}
.veil{position:absolute;inset:0;background:#faf9f4;opacity:0;pointer-events:none}
.product{position:absolute;z-index:2;left:0;top:0;width:1024px;height:1536px;transform-origin:512px 1438px;pointer-events:none;will-change:transform;visibility:hidden}
/* Moving lotion stays in front; settled shelf layers remain unchanged. */
.hero:is([data-phase="closeup"],[data-phase="right-float"],[data-phase="flight"],[data-phase="landing"]) #product{z-index:40}
.product img{display:block;width:100%;height:100%;filter:drop-shadow(12px 16px 18px #22243812)}
.shelf-shadow{position:absolute;width:70px;height:7px;border-radius:50%;background:#493e2e;filter:blur(4px);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.opening-copy{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.opening-copy{opacity:0}
.eyebrow{font:11px/1.6 Arial,sans-serif;letter-spacing:.26em;margin:0 0 24px}
.opening-line{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(30px,3.4vw,56px);letter-spacing:.14em;line-height:1.75;margin:0}
.scene-number{position:absolute;right:24px;bottom:20px;font:10px/1 Arial,sans-serif;letter-spacing:.18em;color:#293263a6}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fallback{padding:15px 20px}
@media(max-width:1200px){.wrap{width:calc(100% - 72px)}}
@media(max-width:760px){
 .hero{height:calc(100svh - 156px);min-height:490px}
    .opening-copy{justify-content:flex-end;padding-bottom:30px}
 .opening-copy .eyebrow{margin-bottom:10px;font-size:10px}
 .opening-line{font-size:24px;line-height:1.5}
 .scene-number{display:none}
}
@media(max-width:650px){.wrap{width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){.atelier,.product{will-change:auto}}


.sr-only{top:0;left:0;margin:0}


/* Each product has its own cropped viewport and its own position/opacity timeline. */
.companion{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity;z-index:2}
.companion-crop{width:100%;height:100%;overflow:hidden}
.companion-crop img{position:absolute;display:block;width:1536px;height:1024px;max-width:none}
.companion-crop{position:relative}
@media(prefers-reduced-motion:reduce){.companion{will-change:auto}}

/* The complete scene moves as one camera after the approved skincare motion ends. */
.scene{position:absolute;inset:0;will-change:transform}
/* Do not paint full-size cutouts before their first measured transform. */
.hero[data-scene-ready="false"] .scene{visibility:hidden}
.scene .world{overflow:visible}
.hair-product{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.hair-crop{position:relative;width:100%;height:100%;overflow:hidden}
.hair-crop img{position:absolute;display:block;max-width:none}
@media(prefers-reduced-motion:reduce){.scene,.hair-product{will-change:auto}}

.bulk-product{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.bulk-product{will-change:auto}}

/* Marble plinths fade in during the first bottle's flight. */
.makeup-plinth,.makeup-product,.lipstick{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}
.makeup-plinth,.makeup-product,.lipstick{opacity:0}
.makeup-crop{position:relative;width:100%;height:100%;overflow:hidden}
.makeup-crop img{position:absolute;display:block;max-width:none}
#makeup-stage{position:absolute;inset:0;pointer-events:none;z-index:22}
@media(prefers-reduced-motion:reduce){.makeup-plinth,.makeup-product,.lipstick{will-change:auto}}

/* Ingredients are part of the room from frame zero; only the room focus changes. */
#ingredient-shelf{position:absolute;inset:0;pointer-events:none;transform-origin:0 0;z-index:21}
.ingredient{position:absolute;left:0;top:0;pointer-events:none}
.ingredient-crop{position:relative;width:100%;height:100%;overflow:hidden}
.ingredient-crop img{position:absolute;display:block;max-width:none}

/* Rear planning boards and cartons sit behind the finished products. */
#oem-shelf{position:absolute;inset:0;pointer-events:none;z-index:21}
.oem-product{position:absolute;left:0;top:0;opacity:0;pointer-events:none;will-change:transform,opacity}
.oem-crop{position:relative;width:100%;height:100%;overflow:hidden}
.oem-crop img{position:absolute;display:block;max-width:none}
@media(prefers-reduced-motion:reduce){.oem-product{will-change:auto}}

/* A navy book on the third shelf; CSS keeps its cover and opening motion editable. */
.story-book{position:absolute;z-index:30;perspective:900px;isolation:isolate}
.book-trigger{position:absolute;top:0;padding:0;border:0;border-radius:2px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.book-trigger:disabled{cursor:default}
.book-spine-scale{position:absolute;top:0;display:block;width:32px;height:132px;transform:scale(var(--book-scale,1));transform-origin:0 0;filter:var(--book-focus,none);transition:opacity .2s}
.book-spine{position:relative;display:block;width:32px;height:132px;color:#d8c192;background:linear-gradient(90deg,#101c32,#354666 24%,#263954 63%,#12213b 88%,#d4c8a8 92%,#f5efdc 96%,#1e2e48 100%);border:1px solid #101d32;border-radius:2px 2px 1px 1px;box-shadow:2px 1px 3px #201a1638;transform-origin:50% 100%;animation:book-twitch 4.6s ease-in-out infinite}
.book-spine::before,.book-spine::after{content:"";position:absolute;left:2px;right:3px;height:2px;border-block:1px solid #d8bb7b9c}
.book-spine::before{top:10px}.book-spine::after{bottom:11px}
.spine-brand{position:absolute;top:21px;left:0;right:3px;text-align:center;font:4px/1 Georgia,serif;letter-spacing:.6px}
.spine-title{position:absolute;top:38px;left:calc(50% - 1px);transform:translateX(-50%);font:12px/1.25 "Yu Mincho",serif;letter-spacing:3px;writing-mode:vertical-rl}
.spine-mark{position:absolute;bottom:18px;left:0;right:3px;text-align:center;font:10px/1 Georgia,serif}
@keyframes book-twitch{
  0%,5%,18%,29%,44%,100%{transform:translateX(0) rotate(0)}
  7%,31%{transform:translateX(-1.5px) rotate(-5deg)}
  9%,33%{transform:translateX(1px) rotate(4deg)}
  11%,35%{transform:translateX(-1px) rotate(-4deg)}
  14%,39%{transform:translateX(.5px) rotate(3deg)}
}
.book-open{position:absolute;left:0;top:0;display:flex;width:var(--book-page-width,296px);height:190px;opacity:0;pointer-events:none;transform-origin:75% 50%;transform-style:preserve-3d;color:#29354a;border:0;box-shadow:none}
.book-leaf{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 50%;min-width:0;padding:16px 6px;border:3px solid #253850}
.book-leaf-left{background:linear-gradient(90deg,#fbf6e9 80%,#e7dcc5);border-right:1px solid #baaa8966;border-radius:8px 0 0 8px}
.book-leaf-right{background:linear-gradient(90deg,#e9dec8,#fffaf0 12%,#fbf7ed 95%,#e0d5bd);border-left:0;border-radius:0 8px 8px 0}
.book-wordmark{font:12px/1.2 Georgia,serif;letter-spacing:1.6px}
.book-monogram{font:64px/1.1 Georgia,serif;color:#b49b6c;margin-block:10px}
.book-page-note{font:7px/1.2 Arial,sans-serif;letter-spacing:2px;color:#93816c}
.book-page-heading{font:18px/1.8 "Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.04em;white-space:nowrap}
.book-page-heading>span{display:block;font-size:14px}
.book-page-rule{width:22px;border-top:1px solid #b89f72;margin:15px 0}
.book-page-link{font:10px/1.6 "Yu Gothic",sans-serif;white-space:nowrap;border-bottom:1px solid #c8bda8;padding-bottom:3px}
.book-page-number{position:absolute;bottom:9px;right:12px;font:8px/1 Georgia,serif;color:#ac9b82}
.story-book[data-open="true"] .book-open{opacity:var(--book-appearance,0);pointer-events:auto;transform:translate3d(calc(var(--book-from-x,0px) * (1 - var(--book-arrival,0)) + var(--book-page-x,0px) * var(--book-arrival,0)),calc(var(--book-from-y,0px) * (1 - var(--book-arrival,0)) + var(--book-page-y,0px) * var(--book-arrival,0)),0) scale(var(--book-pop-scale,.12))}
.story-book[data-open="true"] .book-spine-scale{opacity:0}
.story-book[data-open="true"] .book-spine{animation-play-state:paused}
.book-open:focus-visible{outline:3px solid #9b7045;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.book-spine{animation:none}.book-open,.book-spine-scale{transition:none}}

.hero[data-playback="paused"] .book-spine{animation-play-state:paused}

/* Each head displays one opaque pose frame; only crop boundaries are feathered. */
.team-faces{position:absolute;width:1672px;height:941px;transform-origin:0 0;pointer-events:none}
.team-face{position:absolute;display:none;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 8px,#000 calc(100% - 8px),transparent),linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 12px),transparent);mask-composite:intersect}
.team-face img{position:absolute;width:1672px;height:941px;max-width:none;visibility:hidden}
.team-link{position:absolute;z-index:31;display:block;cursor:pointer;border-radius:38% 28% 10% 15%;-webkit-tap-highlight-color:transparent;pointer-events:none}
.team-link[data-available="true"]{pointer-events:auto}
.team-link:focus-visible{outline:2px dashed #7b644b;outline-offset:-3px;background:#fff7df0b}
.team-hello{position:absolute;z-index:32;display:grid;place-items:center;width:112px;height:62px;border:1.5px solid #7f6b53;border-radius:48% 49% 44% 48%;background:#fffdf5;color:#65513c;font:italic 600 22px/1.1 Georgia,serif;letter-spacing:.055em;box-shadow:0 5px 14px #5c43251a;transform-origin:18% 100%;opacity:0;pointer-events:none}
.team-hello::after{content:"";position:absolute;bottom:-10px;left:22px;width:16px;height:18px;background:#fffdf5;border-right:1.5px solid #7f6b53;border-bottom:1.5px solid #7f6b53;transform:skewY(-32deg) rotate(32deg);border-radius:0 0 3px 0}

/* The autonomous book twitch begins only after all haircare items settle. */
.hero[data-book-motion="waiting"] .book-spine{animation:none}

/* The invitation unfolds behind the foreground portraits; its heart draws last. */
.team-about{position:absolute;z-index:0;left:-13.5%;top:-29.8%;width:120%;height:auto;aspect-ratio:760/230;overflow:visible;opacity:0;pointer-events:none}
.team-about-reveal{transform-origin:80px 76px;clip-path:inset(-20px 100% -30px -20px)}
.team-about-paper{fill:#fff7ed;fill-opacity:.94;stroke:#f0dfcf;stroke-width:2}
.team-about-rim{fill:none;stroke:#fffdf7;stroke-width:2;opacity:.94}
.team-about-title{fill:#665043;font-family:"UD Digi Kyokasho NK-R","Yu Mincho","Hiragino Mincho ProN",serif;font-size:65px;font-weight:500;letter-spacing:1px}
.team-about-subtitle{fill:#8f6b54;font:12px Georgia,serif;letter-spacing:7px}
.team-about-rule{fill:none;stroke:#c2a48a;stroke-width:1.4}
.team-about-sparks{fill:none;stroke:#fffaf3;stroke-width:3;stroke-linecap:round}
.team-about-heart{transform:translateX(-28px);fill:none;stroke:#d88d9b;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.team-faces{z-index:23}
.team-face-left{clip-path:polygon(0 30%,8% 20%,26% 10%,45% 8%,68% 11%,90% 24%,100% 42%,100% 100%,0 100%)}
.team-face-man{clip-path:path("M 5 85 C 4 49 21 28 39 23 C 57 9 74 9 90 16 C 115 14 143 38 148 70 L 157 112 L 157 190 L 0 190 Z")}
.team-face-lead{clip-path:path("M 6 105 C 15 76 21 43 47 26 C 75 9 106 10 130 26 C 160 45 180 77 190 108 L 196 145 L 196 211 L 0 211 Z")}
.team-face-right{clip-path:polygon(0 37%,7% 22%,27% 12%,48% 10%,69% 14%,90% 24%,100% 42%,100% 100%,0 100%)}
/* Six illuminated niches follow the same source coordinates as the room. */
.shelf-navigation{position:absolute;left:0;top:0;width:1672px;height:941px;display:block;padding:0;transform-origin:0 0;z-index:24;pointer-events:none;opacity:0;transition:opacity .65s ease}
.shelf-navigation[data-ready="true"]{opacity:1}
.shelf-link{position:absolute;display:block;padding:0;pointer-events:none;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent;isolation:isolate}
.shelf-navigation[data-ready="true"] .shelf-link{pointer-events:auto}
.shelf-light::before{content:"";position:absolute;inset:0 0 8px;z-index:-1;border:1.4px solid #fffce5;border-radius:1px;background:linear-gradient(180deg,#ffdb8738,transparent 52%,#ffc86f16);box-shadow:inset 0 0 5px 2px #fffce9,inset 0 0 18px 7px #ffd17cad,0 0 5px 2px #fff6cd,0 0 17px 7px #ffcd7899;opacity:0;transition:opacity .38s ease}
.shelf-title{position:absolute;top:10px;left:8px;right:8px;display:block;color:#695039;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:25px;font-weight:500;line-height:1.2;letter-spacing:.075em;white-space:nowrap;text-shadow:0 1px 5px #fff8df;opacity:0;transform:translateY(4px);transition:opacity .38s ease,transform .38s ease,color .38s ease,text-shadow .38s ease}
#shelf-skincare .shelf-title,#shelf-haircare .shelf-title,#shelf-salon .shelf-title{top:24px}
.shelf-title::after{content:"";display:block;width:38%;height:1px;margin:7px auto 0;background:linear-gradient(90deg,transparent,#fffbe2,transparent);box-shadow:0 0 7px #ffd081;opacity:0;transition:opacity .38s ease}
.shelf-link:is(:hover,:focus-visible,:active){opacity:1}
.shelf-link:is(:hover,:focus-visible,:active) .shelf-title::after{opacity:1}
.shelf-link:is(:hover,:focus-visible,:active) .shelf-title{opacity:1;transform:translateY(0);color:#fffef1;text-shadow:0 0 3px #fff9de,0 0 9px #ffe4a7,0 0 20px #ffce74,0 1px 2px #85623c}
.shelf-link:focus-visible{outline:2px solid #fffce5;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.shelf-navigation,.shelf-light::before,.shelf-title,.shelf-title::after{transition:none}}

/* Shelf light lives with the room, so bottles stand in front of its lower strip. */
.scene .world{isolation:isolate}
.shelf-lighting{position:absolute;z-index:1;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .65s ease}
.shelf-lighting[data-ready="true"]{opacity:1}
.shelf-light{position:absolute;display:block;pointer-events:none}
.hero:has(#shelf-skincare:is(:hover,:focus-visible,:active)) #shelf-light-skincare::before,
.hero:has(#shelf-haircare:is(:hover,:focus-visible,:active)) #shelf-light-haircare::before,
.hero:has(#shelf-salon:is(:hover,:focus-visible,:active)) #shelf-light-salon::before,
.hero:has(#shelf-makeup:is(:hover,:focus-visible,:active)) #shelf-light-makeup::before,
.hero:has(#shelf-ingredients:is(:hover,:focus-visible,:active)) #shelf-light-ingredients::before,
.hero:has(#shelf-oem:is(:hover,:focus-visible,:active)) #shelf-light-oem::before{opacity:1}
@media(prefers-reduced-motion:reduce){.shelf-lighting{transition:none}}

/* The same continuous illustration fits a phone without automatic camera movement. */
@media(max-width:760px),(max-height:500px) and (pointer:coarse){
 .hero{height:auto;min-height:0;aspect-ratio:1672/941}
 .scene{will-change:auto}
 .book-spine{animation:none}
 
}

/* The cover and one inner sheet have independent progress on the same hinge. */
.book-open{perspective:700px}
.book-cover-leaf,.book-turn-leaf{position:absolute;inset:0 0 0 auto;width:50%;z-index:3;transform-origin:0 50%;transform:none;transform-style:preserve-3d;pointer-events:none}
.book-cover-leaf{z-index:4}
.book-turn-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #cdbd9e55}
.book-turn-front{background:linear-gradient(90deg,#e9dec8,#fffaf0 12%,#fbf7ed 95%,#e0d5bd);box-shadow:3px 0 6px #6e583e18}
.book-turn-back{transform:rotateY(180deg);background:linear-gradient(90deg,#fbf6e9 80%,#e7dcc5);box-shadow:-3px 0 6px #6e583e18}
.story-book[data-book-phase="closed"] .book-turn-leaf{transition:none}

.story-book:not([data-book-phase="ready"]) .book-open{cursor:wait}
@media(prefers-reduced-motion:reduce){.book-turn-leaf{transition:none}}

/* A portrait composition keeps all six shelves and the team in one continuous room. */
.portrait-product-group{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}
@media(max-width:760px) and (orientation:portrait){
 .hero{height:max(calc(100svh - var(--lu-header-height)),200vw);min-height:0;aspect-ratio:auto}
 .team-faces,.team-about,.team-hello{display:none!important}
 .opening-copy,.scene-number{display:none}
 .portrait-product-group{z-index:2}
}

/* The hover bridge stays under the traveling book. */
.book-hover-bridge{display:none;position:absolute;z-index:0;pointer-events:none;background:transparent}
.story-book[data-open="true"] .book-hover-bridge{display:block;pointer-events:auto}
.book-trigger{z-index:1}
.book-open{z-index:2}
.hero:has(#story-book[data-open="true"]) #team-link,.hero:has(#story-book[data-open="true"]) .shelf-link{pointer-events:none!important}
@media(prefers-reduced-motion:reduce){.story-book[data-book-phase="preview"] .book-open{transition:none}}
/* End hover-book interaction override. */

/* Connected narrow surfaces follow one continuous arc, so the paper actually bends. */
.book-curl-strip{position:absolute;left:0;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d;pointer-events:none}
.book-curl-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}

.book-curl-front{background:#fbf7ed}
.book-cover-leaf .book-curl-front{background:#293a55}
.book-curl-back{transform:rotateY(180deg);background:#fbf6e9}
.book-curl-art{position:absolute;top:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:16px 6px;border:3px solid #253850;border-left:0;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#e9dec8,#fffaf0 12%,#fbf7ed 95%,#e0d5bd)}
.book-cover-leaf .book-curl-front .book-curl-art{border-left:3px solid #253850;background:transparent}
.book-curl-back .book-curl-art,.book-flat-back{border-left:3px solid #253850;border-right:1px solid #baaa8966;border-radius:8px 0 0 8px;background:linear-gradient(90deg,#fbf6e9 80%,#e7dcc5)}
.book-flat-face{left:0;width:100%;pointer-events:none}
.book-flat-back{left:-100%}
.book-cover-leaf .book-flat-front{border-left:3px solid #253850;background:#293a55}
.book-curl-shadow{position:absolute;left:50%;top:1%;width:50%;height:98%;z-index:2;background:linear-gradient(90deg,#69513766,#6951370d 65%,transparent);opacity:0;pointer-events:none;transform-origin:left center}
.story-book:not([data-book-phase="opening"]):not([data-book-phase="turning"]) .book-curl-shadow{visibility:hidden}


/* No spread-shaped decoration exists before the cover uncovers that paper. */
.book-cover-brand,.book-cover-title{position:absolute;left:8px;right:8px;text-align:center;color:#d8c192}
.book-cover-brand{top:24%;font:12px/1.4 Georgia,serif;letter-spacing:1.5px}
.book-cover-title{top:52%;font:18px/1.5 "Yu Mincho",serif;letter-spacing:.15em}
.book-leaf,.book-cover-leaf,.book-turn-leaf{visibility:hidden}
.story-book:is([data-book-phase="preview"],[data-book-phase="opening"]) .book-cover-leaf,
.story-book:is([data-book-phase="opening"],[data-book-phase="settling"],[data-book-phase="turning"]) .book-turn-leaf,
.story-book:is([data-book-phase="opening"],[data-book-phase="settling"],[data-book-phase="turning"],[data-book-phase="ready"]) .book-leaf-right,
.story-book:is([data-book-phase="settling"],[data-book-phase="turning"],[data-book-phase="ready"]) .book-leaf-left{visibility:visible}
.story-book:is([data-book-phase="settling"],[data-book-phase="turning"]) .book-leaf-left>*{visibility:hidden}
@media(prefers-reduced-motion:reduce){.book-open{transition:none}}