/* Lelune's little world shop: paper, forest ink, and a warm shop window. */
:root{--paper:#fbf8f0;--ink:#263e33;--line:#d8d9c9;--muted:#626c60;--green:#e7ecde;--accent:#b2502c}
body{background:radial-gradient(ellipse at 90% 0,#f1ecd9aa,transparent 34%),var(--paper)}
.site-header{height:96px}
.brand{font-family:var(--serif);font-size:25px;font-weight:400;gap:15px}
.brand small{font-family:'PingFang TC',-apple-system,BlinkMacSystemFont,sans-serif;font-size:10px;letter-spacing:.16em}
.brand-mark{width:43px;height:49px;border:1px solid #637359;border-radius:24px 24px 3px 3px;display:grid;place-items:center;font-size:33px;position:relative}
.brand-mark>span{position:absolute;right:5px;top:4px;font:10px sans-serif;color:var(--accent)}
.site-header nav a{display:flex;align-items:center;min-height:44px}
.hero{padding-top:46px}
.hero-heading{position:relative;padding-bottom:34px;align-items:center}
.hero-heading .eyebrow{letter-spacing:.13em;color:#637359;font-size:10px}
h1{font-size:clamp(44px,5.1vw,66px);font-weight:600;letter-spacing:-.045em;line-height:1.3;margin-top:20px}
.title-fun{position:relative;display:inline-block}
.title-fun:after{content:'';position:absolute;bottom:0;left:0;width:92%;height:8px;border-bottom:2px solid #b2502c88;border-radius:50%;transform:rotate(-3deg)}
.title-star{font-size:36px;color:#8b9877;margin-left:12px}
.hero-intro{position:relative;padding:20px 122px 10px 0;min-width:365px}
.hero-intro p{font-size:14px;margin-bottom:12px;color:#5f6c60}
.studio-postage{position:absolute;right:1px;top:4px;width:94px;min-height:125px;background:#f4ecdb;border:1px dashed #baba9f;padding:11px 7px 8px;display:flex;flex-direction:column;align-items:center;gap:7px;transform:rotate(7deg);color:#647354;outline:4px solid #f4ecdb;box-shadow:7px 10px 16px #4153390b}
.studio-postage i{width:42px;height:42px;display:block;border-radius:50%;background:#8a986e;position:relative;overflow:hidden}
.studio-postage i:before{content:'';width:39px;height:39px;background:#f4ecdb;border-radius:50%;position:absolute;left:15px;top:-6px}
.studio-postage b{font:italic 20px var(--serif)}
.studio-postage small{font-size:6px;letter-spacing:.05em;text-align:center;font-weight:650}
.jelly-exhibit{position:relative;isolation:isolate;border:1px solid #bec9ac;border-radius:100px 100px 12px 12px;background:linear-gradient(180deg,#e8edde 0,#e0e7d4 76%,#d6dfc5 100%);box-shadow:inset 0 0 0 7px #f6f7e84d,0 18px 32px -26px #40513d55}
.jelly-exhibit:before{content:'';position:absolute;inset:12px 12px 58px;border:1px solid #92a27a45;border-radius:88px 88px 3px 3px;pointer-events:none;z-index:-1}
.exhibit-top{position:relative;padding:22px 60px 5px;font-size:12px}
.exhibit-top small{font-size:8px;letter-spacing:.08em}
.shop-scenery{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.shop-sign{position:absolute;left:calc(50% - 130px);top:70px;font:italic 106px/.9 var(--serif);letter-spacing:-.08em;color:#75876429;transform:rotate(-5deg)}
.shop-sign small{display:block;font:10px/2 var(--serif);letter-spacing:.17em;text-align:center;margin-top:8px;color:#677a5466}
.shop-moon{position:absolute;right:74px;top:75px;width:132px;height:132px;border-radius:50%;background:#f9f7e3;box-shadow:0 0 0 17px #f8f8e933,0 0 0 34px #f8f8e919}
.shop-moon:after{content:'';position:absolute;inset:21px;border:1px solid #d4d8b844;border-radius:50%}
.shop-spark{position:absolute;right:238px;top:114px;font-size:21px;color:#8b98765c}
.shelf-track{padding-top:190px}
.shelf-rail:before{height:13px;border-top:4px solid #bdc6a6;background:linear-gradient(#9aaa86,#b1bd9a);box-shadow:0 8px 10px #43563819}
.shelf-name{font-size:11px}
.shelf-bottom{position:relative;padding:11px 28px 18px;font-size:11px}
.cat-bubble{border-color:#c1c9ad;background:#fffdf3;box-shadow:0 5px 10px #3443310a}
.selection-detail{margin:18px 0 0;padding:21px 25px;min-height:132px;border:1px solid #d8d9c9;background:#fffdf6;position:relative;grid-template-columns:52px 1fr auto;gap:22px;border-radius:3px}
.selection-index{font-size:22px;border-right:1px dashed #c6ccb8;align-self:stretch;display:flex;align-items:center;padding:0;position:relative}
.selection-detail h2{font-size:22px}
.selection-detail p{font-size:12px}
.selection-detail .pill-link{border-radius:5px;gap:16px}
.crew{padding-top:22px}
.crew-monogram{border-radius:50% 50% 4px 4px;background:#eee8d9;border-color:#d7d2c0}
.collection{padding-top:66px}
.section-heading h2{font-family:var(--serif);font-weight:600;letter-spacing:-.025em;font-size:34px}
.section-heading .eyebrow{letter-spacing:.15em}
.count-label{font-family:'PingFang TC',-apple-system,BlinkMacSystemFont,sans-serif}
.collection-toolbar{padding-bottom:15px}
.filter-group button{border-radius:5px}
.app-grid{gap:0 28px;counter-reset:catalog}
.app-card{padding:23px 0;gap:15px;counter-increment:catalog;transition:background .2s}
.app-card>img{width:72px;height:72px;flex-basis:72px;box-shadow:0 6px 12px #19322212;border:1px solid #263e330d}
.app-card small{font-size:10px}
.app-card h3{font-size:15px}
.app-card p{font-size:12px}
.card-arrow{font-size:16px;color:#7c866b}
/* The first shelf gives the newest work room to show its artwork. */
@media(min-width:761px){
 .app-card:nth-child(-n+3){display:grid;grid-template-columns:92px 1fr;align-items:center;padding:28px 18px 25px;margin:14px 0 9px;border:1px solid #dedfcd;border-radius:4px;background:#f0f0e2;min-height:178px}
 .app-card:nth-child(2){background:#eee9e0}
 .app-card:nth-child(3){background:#e8ede3}
 .app-card:nth-child(-n+3)>img{width:92px;height:92px;border-radius:20px}
 .app-card:nth-child(-n+3) .card-arrow{position:absolute;right:12px;top:8px}
 .app-card:nth-child(-n+3) h3{font-size:16px}
 .app-card:nth-child(-n+3) p{-webkit-line-clamp:2}
}
.transit-band{position:relative;border-block:1px solid #ced6bc;background:#e3e9d8}
.destination-art{border-radius:90px 90px 4px 4px;border:1px solid #c0ccb044;box-shadow:inset 0 0 0 7px #ffffff30;transition:transform .3s}
.destination:hover .destination-art{transform:translateY(-5px)}
.destination h3{font-family:var(--serif);font-size:23px;font-weight:600}
.destination small{letter-spacing:.1em}
.other-orbits a{min-height:44px}
.passport-intro h2{font-family:var(--serif);font-weight:600;font-size:30px}
.stamp-book{background:#f3eddd;box-shadow:5px 5px 0 #e2ddcb60;border-color:#d7d0ba}
.footer-brand{font-family:var(--serif);font-size:20px;font-weight:400}
@media(min-width:1500px){.shelf-track{padding-top:210px}.shop-sign{top:83px}}
@media(max-width:1000px){.hero-intro{min-width:295px;padding-right:100px}.studio-postage{width:78px;min-height:114px}.studio-postage b{font-size:18px}.studio-postage small{font-size:5px}.hero-heading{gap:20px}.exhibit-top{padding-inline:40px}}
@media(max-width:760px){
 .site-header{height:auto;min-height:104px}.brand{font-size:23px}.brand-mark{width:35px;height:42px;font-size:29px}
 .hero{padding-top:30px}.hero-heading{display:block;padding-bottom:27px}h1{font-size:46px;line-height:1.27;margin-top:16px}.title-star{font-size:29px}
 .hero-intro{display:block;min-width:0;padding:25px 110px 0 0;min-height:132px}.hero-intro p{font-size:14px;line-height:1.7;margin-bottom:7px}.studio-postage{top:7px;right:12px;width:82px;min-height:117px}
 .jelly-exhibit{border-radius:44px 44px 9px 9px}.jelly-exhibit:before{border-radius:34px 34px 3px 3px;inset:9px 9px 75px}
 .exhibit-top{padding:13px 20px 3px}.exhibit-top small{display:none}.shop-sign{left:36%;font-size:82px;top:96px}.shop-sign small{display:none}.shop-moon{width:90px;height:90px;right:37px;top:98px}.shop-spark{display:none}
 .shelf-track{padding-top:184px}.shelf-bottom{padding:10px 18px 16px;gap:10px}.shelf-bottom>span{max-width:230px;font-size:11px;line-height:1.6}
 .selection-detail{padding:18px;grid-template-columns:35px 1fr;gap:13px;margin-top:14px;min-height:0}.selection-index{font-size:17px}.selection-detail h2{font-size:20px}.selection-detail>.pill-link{grid-column:2;justify-self:start;margin-top:2px;min-height:44px;padding:10px 16px}
 .collection{padding-top:46px}.section-heading h2{font-size:29px}.app-grid{column-gap:20px}.app-card>img{width:64px;height:64px;flex-basis:64px}.app-card{gap:13px;padding:21px 0}.app-card h3{font-size:15px}.app-card p{font-size:12px}.destination h3{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.destination-art,.app-card{transition:none}}

@media(max-width:640px){.site-header nav{font-size:11px;gap:12px}.hero-intro .text-link{font-size:12px}}
