/* 瓷行万里 v2 — paper, celadon, cobalt, and a voyage across the sea. */
:root{--ink:#203f52;--navy:#244e69;--blue:#507984;--muted:#6c7b7c;--paper:#faf7f0;--line:#e5e0d4;--gold:#a88954}
html,body{background:#eeece4;color-scheme:only light}
body{font-size:14px;line-height:1.75}
button,a{-webkit-tap-highlight-color:transparent}
.app-shell{background:var(--paper);box-shadow:0 12px 100px #203c4320}
main{padding-bottom:108px}
.app-header{height:72px;background:#faf7f0;gap:3px;padding:12px 20px;border-bottom:1px solid #e1dccb88}
.brand{font-size:27px;letter-spacing:3px;margin-right:auto;white-space:nowrap}
.seal{background:#a45e4d;border-radius:2px;outline:1px solid #a45e4d;outline-offset:2px;padding:5px 3px;font-weight:400}
.header-title{position:absolute;left:50%;transform:translateX(-50%);width:calc(100% - 148px);pointer-events:none}
.header-title+.icon-button{margin-left:auto}
.header-title h1{font-size:19px;letter-spacing:2px}
.header-title small{letter-spacing:1px;color:#7a837d}
.header-spacer{width:34px}
.icon-button{width:36px;height:36px}
.icon-button .icon{width:19px;height:19px}
.motion-toggle{width:30px;height:30px;margin-left:1px;border:1px solid #d9dfd6;color:#617b79}
.motion-toggle .icon{width:14px;height:14px}
.motion-play{display:none}
html[data-motion=off] .motion-play{display:block}
html[data-motion=off] .motion-pause{display:none}
.eyebrow{font-size:8px;letter-spacing:1.8px;color:#587779}
.primary{border-radius:8px;background:#244e69;box-shadow:0 5px 13px #23445517;font-weight:500;letter-spacing:.5px}
.secondary{border-radius:8px;background:#fffdf7;border-color:#d6d9d0}
.primary,.secondary,.role-card,.product,.shortcut,.icon-button,.crew-link,.feature-card,.landscape-story,.stamp,.station-symbol{transition:transform .22s ease-out,opacity .22s ease-out}
button:active{transform:scale(.975)}
.nav-item:active,.motion-toggle:active{transform:none}
.bottom-nav{border-top:1px solid #dcded3;background:#fcfaf5f5;padding-top:9px;box-shadow:0 -5px 22px #3c594306}
.nav-item{font-size:10px;letter-spacing:2px;gap:3px;width:63px}
.nav-item.active{background:#e8eeea;color:#244f5e;border-radius:10px}
.nav-item.active .icon{stroke-width:1.8}
.section-heading{margin:25px 0 13px}
.section-heading h2{font-size:19px;letter-spacing:1px}
.section-heading h2:before{content:'';display:inline-block;width:3px;height:14px;background:#9da995;margin-right:9px;vertical-align:-1px;border-radius:2px}
.text-link{color:#526f74;font-size:11px}
.sea-hero{min-height:350px;margin:0 -22px;padding:27px 25px 50px;background:#e7ede6;isolation:isolate}
.sea-hero:before{display:none}
.hero-landscape{position:absolute;inset:0;z-index:-2;background:url('assets/silk-road-sea.webp') 62% 56%/cover no-repeat}
.sea-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#fbf8eedb 0%,#fbf8ee99 39%,#fbf8ee00 75%),linear-gradient(0deg,#f6f5ea 0%,transparent 26%)}
.hero-copy{position:relative;z-index:1}
.sea-hero .eyebrow{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1px;margin-bottom:15px;color:#526e6e}
.eyebrow-line{width:16px;height:1px;background:#a58c63}
.sea-hero h1{font-size:36px;line-height:1.48;letter-spacing:3px;color:#224a5a;font-weight:600}
.sea-hero h1 span{color:#456f6d}
.sea-hero .subtitle{font-size:11px;color:#557071;margin-top:11px;letter-spacing:.3px}
.sea-hero .primary{margin:20px 0 0;width:auto;display:inline-flex;min-height:40px;padding:10px 15px;border-radius:6px;font-size:11px;background:#214b60}
.hero-coordinate{position:absolute;right:17px;top:32px;writing-mode:vertical-rl;letter-spacing:4px;font:10px/1.5 var(--serif);color:#45646b}
.hero-bottom-note{position:absolute;bottom:16px;left:25px;right:23px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1.5px;color:#607c7d}
.sea-hero .wave{width:120%;left:-10%;height:32px;bottom:35px;color:#bdd5ce;opacity:.75}
.companions{padding-top:20px}
.companions-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.companions-heading h2{font-size:18px;letter-spacing:1px;margin-top:3px}
.companions-heading .eyebrow{font-size:7px;letter-spacing:1.4px}
.crew-link{display:block;width:100%;padding:0;margin-top:10px}
.companions .hero-image{width:100%;max-width:100%;height:auto;margin:0;mix-blend-mode:multiply}
.crew-names{display:flex;justify-content:space-around;margin-top:7px;font:10px/1.5 var(--serif);color:#6b7f7a;letter-spacing:1px}
.shortcut-grid{gap:9px;margin-top:21px;padding:16px 0 0;border-top:1px solid var(--line)}
.shortcut{min-height:91px;background:#eeeade;border-color:#e6e2d5;border-radius:12px;padding-top:12px}
.shortcut:nth-child(2){background:#e6eeea}.shortcut:nth-child(3){background:#f1e9da}.shortcut:nth-child(4){background:#e8edf0}
.shortcut .icon{width:24px;height:24px;stroke-width:1.35;margin-bottom:4px;color:#426877}
.shortcut b{font-size:12px;letter-spacing:.5px}.shortcut small{color:#737e76;font-size:8px}
.feature-card{border-radius:12px;min-height:195px;padding:20px;background:linear-gradient(110deg,#e9eee5,#f3f4eb);border-color:#dbe3d7}
.feature-card:after{content:'';position:absolute;right:-30px;bottom:-70px;width:230px;height:230px;border-radius:50%;border:1px solid #98b2a433;box-shadow:0 0 0 15px #a3b9a917,0 0 0 30px #a3b9a90d;pointer-events:none}
.feature-copy{width:60%}.feature-copy h3{font-size:21px;line-height:1.55;margin-top:10px}
.feature-copy p{color:#61766e}.feature-character{right:3px;top:12px;height:215px;z-index:1}
.landscape-story{display:block;width:100%;position:relative;margin-top:21px;min-height:186px;padding:19px;text-align:left;border-radius:12px;border:1px solid #e4dfcf;overflow:hidden;background:linear-gradient(90deg,#f9f6eedd,#f9f6ee55 55%,transparent),url('assets/kiln-landscape.webp') center 54%/cover}
.landscape-story h3{margin-top:6px;font-size:21px;letter-spacing:1px;max-width:175px;line-height:1.65}
.landscape-story .text-link{margin-top:20px;font-size:10px}
.journal-card{padding:15px;background:#f1f0e7;border:1px solid #e3e3d6;border-radius:12px;align-items:center}
.journal-art{height:79px;width:66px;background:#e6eae6;flex-shrink:0}
.journal-card h3{font-size:16px}.journal-card p{font-size:10px}
.footer-note{letter-spacing:1px;color:#89948b;margin-top:30px}
.page-lead{padding:22px 0 21px}.page-lead h2{font-size:25px;letter-spacing:1px}
.page-lead p:not(.eyebrow){color:#5f776f;font-size:11px}
.catalog-lead,.shop-lead{margin:0 -22px 20px;padding:23px 22px 32px;position:relative;min-height:188px;background:linear-gradient(90deg,#faf7f0f2,#faf7f0a6 67%,#faf7f020),url('assets/kiln-landscape.webp') center 55%/cover;border-bottom:0}
.lead-index{display:block;font:10px/1.8 var(--serif);letter-spacing:2px;color:#8b7859;margin-bottom:17px}
.catalog-lead h2,.shop-lead h2{font-size:25px;letter-spacing:1px;margin-top:6px}
.catalog-lead .eyebrow,.shop-lead .eyebrow{font-size:7px;letter-spacing:1.6px}
.search-box{border-radius:9px;background:#fffdf8;border-color:#dcded3;min-height:45px}
.chip{border-radius:6px;min-height:37px;background:#edece3;color:#65766f;font-size:11px}
.chip.active{background:#315c67;border-color:#315c67}
.result-caption{color:#6e7e76;font-size:10px;letter-spacing:.3px}
.role-grid{gap:14px}.role-card{border-radius:11px;min-height:224px;border-color:#d9e2d8}
.role-card:before{width:140px;height:140px;top:23px;right:calc(50% - 70px);border-color:#ffffffa0;box-shadow:0 0 0 9px #ffffff22}
.role-number{position:absolute;left:12px;top:8px;font:italic 19px var(--serif);color:var(--role);opacity:.62;z-index:1}
.role-card .role-portrait{height:166px;position:relative;z-index:1;padding:0 14px}
.role-card .role-card-copy{z-index:2;padding:13px 13px 12px}.role-card h3{font-size:18px;letter-spacing:1px}
.role-card small{color:#5f736f;font-size:9px;letter-spacing:.5px}
.role-card.wide{min-height:150px}.role-card.wide .role-portrait{height:172px}.role-card.wide .role-number{left:16px;top:10px;font-size:13px}
.role-card.wide:before{right:9%;top:12px}.role-card.wide .role-card-copy{padding:24px 18px}
.detail-hero{min-height:350px;padding-top:30px;background:linear-gradient(115deg,var(--tone),#faf7f0 86%);isolation:isolate}
.detail-hero:before{content:'';position:absolute;width:245px;height:245px;border-radius:50%;border:1px solid #b4c2b45e;right:-40px;top:28px;box-shadow:0 0 0 13px #ffffff3b,0 0 0 14px #acbca329;z-index:-1}
.detail-hero:after{content:'瓷 · 灵';position:absolute;right:20px;top:15px;writing-mode:vertical-rl;font:11px var(--serif);letter-spacing:7px;color:var(--role)}
.detail-copy h1{font-size:35px;letter-spacing:3px}.detail-copy p{color:#60756f}.detail-hero img{height:330px;bottom:7px;right:-1px}
.detail-tabs{justify-content:space-around;gap:20px;margin-bottom:20px}.detail-tab{min-height:51px;font-size:13px;letter-spacing:3px}
.detail-tab.active:after{height:2px;background:#6e9184}
.meta-cell{background:#eef0e7;border:1px solid #e2e5d8;gap:7px;padding:11px 9px}.meta-cell b{font-size:10px}
.body-copy{color:#5b716e;line-height:2.1}.quote{font-size:17px;margin:23px 0;padding:9px 0 9px 14px;background:linear-gradient(90deg,var(--tone),transparent)}
.vessel-panel{background:#f1efe5;min-height:185px}.pattern-panel{padding:16px 12px;background:#f0eee4;border-radius:10px;gap:13px}.pattern-panel img{width:103px;height:103px}.pattern-panel h3{font-size:18px}
.journey-intro{padding-top:22px;padding-bottom:17px;background:#e6eeeb;isolation:isolate;min-height:332px}
.journey-scenery{position:absolute;inset:0;z-index:-2;background:url('assets/silk-road-sea.webp') 62% center/cover}
.journey-intro:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#faf7f0e8 0%,#faf7f0bd 26%,#e8efeb10 53%,#f2f4ecf5 77%,#f1f3eb 100%)}
.journey-intro .lead-index{margin-bottom:9px}.journey-intro h2{font-size:26px;letter-spacing:1px;margin-top:4px}
.journey-intro p{color:#597371;font-size:11px}.journey-intro p.eyebrow{font-size:7px;letter-spacing:1.5px}
.journey-horizon{height:72px;display:flex;align-items:center;justify-content:space-between;padding-right:9px}
.journey-horizon>span{font:11px var(--serif);letter-spacing:3px;color:#4f7170;padding:4px 8px;background:#f7f5e88c;border-radius:2px}
.compass{width:61px;height:61px;stroke:#536f70;fill:none;stroke-width:.8;opacity:.75}
.route-map{margin-top:17px;padding-bottom:3px}.route-line{opacity:.65;top:23px}.station-symbol{border-color:#b7c9bf;background:#faf9ef;width:42px;height:42px}
.station.selected .station-symbol{background:#355e64;border-color:#355e64;box-shadow:0 0 0 4px #ffffffa6}
.station b{font-size:10px;letter-spacing:1px}.station small{font-size:9px;color:#61766f}
.progress-block{padding:22px 0 8px}.progress-label{font-size:11px;color:#5c736c}.progress-label b{color:#294e53;font-weight:600}
.progress-track{height:5px;background:#e3e7db}.progress-fill{background:linear-gradient(90deg,#a5bba5,#577f76)}
.station-card{border-radius:12px;padding:21px 18px;background:linear-gradient(110deg,var(--tone),#f4f5ec);border-color:#d6e0d4}
.station-card h2{font-size:22px;line-height:1.65}.station-card .station-art{height:225px;top:21px;right:0;max-width:42%}.station-card-copy{width:55%}.station-card .body-copy{color:#5e736c;font-size:11px;min-height:75px}.station-card .primary{margin-top:15px}
.journey-note{color:#728078;background:#f0f0e6;border:1px solid #e6e6d8;padding:12px;border-radius:8px;font-size:10px}
.passport-top{padding-top:25px;padding-bottom:25px;gap:8px}.passport-top h2{font-size:23px;letter-spacing:1px}.passport-top .eyebrow{font-size:7px;letter-spacing:1.2px}.passport-top p{font-size:10px}.passport-mark{flex-shrink:0}
.passport{padding:16px 18px 24px;border-radius:9px;background:linear-gradient(95deg,#f2e7cf,#fcf6e8 47%,#e4d7bc 50%,#fdf8eb 53%,#f3e8d0);border-color:#c9b58d;box-shadow:0 3px 0 #e8dfcb,0 6px 0 #d6c9af,0 12px 30px #655a3510}
.passport:before{content:'';position:absolute;inset:8px;border:1px solid #c4ae834a;border-radius:5px;pointer-events:none}
.passport-coverline{display:flex;justify-content:space-between;color:#978365;font-size:6px;letter-spacing:1px;margin-bottom:20px}
.passport-title{font:12px var(--serif);color:#89714f;margin-bottom:28px;letter-spacing:1px}
.stamp-grid{row-gap:26px}.stamp-ring{width:67px;height:67px}.stamp b{font:11px var(--serif);margin-top:12px}.stamp small{font-size:9px;margin-top:4px;color:#887c66}
.passport-count{font-size:36px}.passport-count small{letter-spacing:1px}
.shop-lead{min-height:185px;background-position:center 75%}.shop-lead h2{font-size:24px}
.shop-banner{min-height:184px;padding:21px 18px;border:1px solid #dbd1bb;border-radius:12px;background:linear-gradient(100deg,#ebe2d0,#f6f0e5)}
.shop-banner h2{font-size:25px;letter-spacing:1px}.shop-banner .eyebrow{font-size:7px;letter-spacing:1px}.shop-banner img{height:195px;max-width:38%}
.shop-banner p{font-size:10px;max-width:205px}.product-grid{gap:19px 14px}.product{padding:9px;background:#f7f3e9;border:1px solid #e3ded0;border-radius:11px}
.product img{height:141px;background:#efece0;border-radius:6px;padding:5px}.product h3{font-size:13px}.product p{font-size:9px;line-height:1.7}.product-tag{font-size:7px;margin-top:9px;color:#938871}
.product-more .icon{width:13px;flex-shrink:0}.empty{background:#eeeee4;border:1px solid #e4e6d9}.collection-item{background:#edf0e6;border-color:#e0e5d5}
dialog{background:#faf7f0;border-color:#d8d8c6;border-radius:16px;box-shadow:0 22px 90px #1b3e4440}
dialog::backdrop{background:#1c39485c}.modal-top{background:#faf7f0}.modal-top h2{font-size:19px;letter-spacing:1px}.modal-body p{color:#5e746e}.modal-body .tag-label{font-size:10px;color:#8e7c59}
.stamp-reward{text-align:center;position:relative;padding:17px 0 3px;overflow:hidden}
.reward-seal{width:142px;height:142px;border:3px double var(--role);outline:1px solid var(--role);outline-offset:5px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;margin:7px auto 33px;background:var(--tone);color:var(--role);position:relative}
.reward-seal .icon{width:42px;height:42px;stroke-width:1.2}.reward-seal strong{font:21px var(--serif);letter-spacing:3px}.reward-seal small{font-size:8px;letter-spacing:1px}
.stamp-reward h3{font-size:21px;letter-spacing:1px}.stamp-reward p.eyebrow{font-size:8px;letter-spacing:2px;color:#728777}.stamp-reward p{font-size:12px}
.reward-rays{position:absolute;left:50%;top:80px;width:210px;height:210px;border:1px solid #c2b681;border-radius:50%;transform:translate(-50%,-50%);opacity:.3}
.reward-continue{margin:10px auto 0;justify-content:center}
.desktop-scenery,.desktop-footnote{display:none}
/* Motion animates only opacity and transforms. Persistent motion has a pause control. */
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes tide{0%,100%{transform:translateX(-1.4%)}50%{transform:translateX(1.4%)}}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes imprint{0%{opacity:0;transform:scale(1.3) rotate(-14deg)}65%{opacity:1;transform:scale(.96) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(-4deg)}}
@keyframes ripple{from{opacity:.7;transform:translate(-50%,-50%) scale(.55)}to{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@keyframes favorite{0%,100%{transform:scale(1)}45%{transform:scale(1.05)}}
html[data-motion=on] .hero-copy,html[data-motion=on] .page-lead,html[data-motion=on] .detail-copy,html[data-motion=on] .station-card-copy,html[data-motion=on] #detail-panel,html[data-motion=on] .passport-top{animation:arrive .32s ease-out both}
html[data-motion=on] .role-card,html[data-motion=on] .product,html[data-motion=on] .shortcut{animation:arrive .3s ease-out both;animation-delay:var(--delay,0ms)}
html[data-motion=on] .wave{animation:tide 7s ease-in-out infinite}
html[data-motion=on] .detail-hero>img{animation:breathe 6s ease-in-out infinite}
html[data-motion=on] dialog[open]{animation:arrive .24s ease-out}
html[data-motion=on] .reward-seal{animation:imprint .35s ease-out both}
html[data-motion=on] .reward-rays{animation:ripple .7s ease-out both}
html[data-motion=on] .favorite-pop{animation:favorite .3s ease-out}
html[data-motion=on] .reveal-pending{opacity:0;transform:translateY(12px)}
html[data-motion=on] .reveal-in{animation:arrive .35s ease-out both}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important}
html.motion-suspended *,html.motion-suspended *:before,html.motion-suspended *:after{animation-play-state:paused!important}
@media(hover:hover){.primary:hover,.secondary:hover,.crew-link:hover,.feature-card:hover,.landscape-story:hover{transform:translateY(-2px)}.role-card:hover .role-portrait{transform:translateY(4px)}.product:hover img{transform:scale(1.025)}.product img,.role-portrait{transition:transform .25s ease-out}.shortcut:hover{transform:translateY(-3px)}}
@media(min-width:1080px){
  body{background:#eaece3}
  .desktop-scenery{display:block;position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#f6f3e9de 0%,#f6f3e98f 38%,#f6f3e920 70%),url('assets/silk-road-sea.webp') center/cover no-repeat}
  .app-shell{margin-left:calc(50% + 40px);border-left:1px solid #ffffffe0;border-right:1px solid #ffffffe0;box-shadow:0 0 100px #294c4728;min-height:100vh}
  .bottom-nav{left:calc(50% + 270px)}.toast{left:calc(50% + 270px)}
  .desktop-intro{display:block;left:max(6vw,calc(50% - 580px));top:16vh;width:470px;color:#254c59}
  .desktop-intro>.eyebrow{font-size:10px;letter-spacing:3px;color:#355d67}
  .intro-edition{font:12px var(--serif);letter-spacing:3px;display:flex;align-items:center;gap:12px;margin-top:53px;color:#6d806f}
  .intro-edition>span{width:23px;height:1px;background:#a18a5c}
  .desktop-intro h1{font-size:65px;line-height:1.45;letter-spacing:5px;font-weight:500;margin-top:20px;color:#254c59}
  .desktop-intro .seal{font-size:15px;letter-spacing:3px;padding:8px 4px;margin-left:17px;vertical-align:9px}
  .desktop-intro p.intro-description{font:13px/2.2 var(--sans);letter-spacing:1.5px;color:#4e716f;margin-top:25px}
  .intro-chapters{display:flex;align-items:center;gap:16px;margin-top:35px;font-size:9px;color:#708575;letter-spacing:1px}
  .intro-chapters b{font:15px var(--serif);margin-left:7px;color:#345e65}.intro-chapters i{height:1px;width:35px;background:#879b824d}
  .desktop-intro .intro-swatches{margin-top:38px;gap:11px}.intro-swatches i{width:12px;height:12px;border:2px solid #ffffff88;outline:1px solid #85998622}
  .desktop-intro small{font:10px var(--serif);letter-spacing:3px;color:#647b70;margin-top:13px}
  .desktop-footnote{display:flex;position:fixed;bottom:27px;left:6vw;gap:22px;color:#3a6469;font-size:8px;letter-spacing:2px}
  dialog{margin-left:calc(50% + 61px);max-width:418px}
}
@media(min-width:1080px) and (max-width:1200px){.desktop-intro{left:5vw;width:400px}.desktop-intro h1{font-size:53px}.desktop-intro>.eyebrow{font-size:8px}.intro-edition{margin-top:36px}.desktop-intro p.intro-description{font-size:12px}.app-shell{margin-left:calc(50% + 20px)}.bottom-nav,.toast{left:calc(50% + 250px)}dialog{margin-left:calc(50% + 41px)}}
@media(max-height:760px) and (min-width:1080px){.desktop-intro{top:9vh}.intro-edition{margin-top:25px}.desktop-intro h1{font-size:54px}.desktop-intro .intro-swatches{margin-top:22px}}
@media(max-width:350px){.app-header{padding-left:15px;padding-right:13px}.brand{font-size:25px}.sea-hero{padding-left:20px;padding-right:18px;min-height:330px}.sea-hero h1{font-size:32px}.sea-hero .subtitle{font-size:10px}.hero-coordinate{right:10px}.companions-heading h2{font-size:16px}.companions-heading .text-link{font-size:10px}.crew-names{font-size:9px}.catalog-lead,.shop-lead{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.catalog-lead h2,.shop-lead h2{font-size:22px}.passport-top h2{font-size:20px}.passport-top .passport-mark{width:43px;height:43px}.passport-mark svg{width:24px}.stamp-ring{width:57px;height:57px}.detail-meta{gap:6px}.meta-cell{gap:5px;padding:10px 6px}.meta-cell b{font-size:9px}.detail-copy h1{font-size:31px}.pattern-panel{gap:10px;padding:12px 9px}.pattern-panel img{width:85px;height:85px}.pattern-panel h3{font-size:16px}.role-card .role-portrait{height:154px}.product{padding:7px}.product img{height:125px}.product h3{font-size:11px}.feature-copy h3{font-size:19px}.shop-banner p{max-width:167px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-pending{opacity:1!important;transform:none!important}}