/* QiuXu — the supplied identity, living materials, and a quiet gold rhythm. */
:root{--paper:#faf7f0;--ink:#303b34;--gold:#d4af37;--muted:#7f8276}
body{background:var(--paper);color:var(--ink)}
.site-header{background:#faf7f0e8;border-bottom:1px solid #b79c6126;padding-inline:clamp(24px,4vw,72px);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-header .brand{width:44px;height:44px;justify-content:center;align-items:center;flex:none;border-radius:50%}
.brand-emblem{display:block;width:38px;height:38px}
.site-header .header-actions{display:none}
.signature{display:block;width:100%;height:auto;mix-blend-mode:multiply;overflow:hidden}
.site-header .signature{width:139px;height:38px}
.brand-chinese{padding-left:17px;border-left:1px solid #b99b5540;font:17px "Songti SC","STSong",serif;letter-spacing:.15em;color:#555c4b;white-space:nowrap}
.main-nav{gap:36px}
.main-nav a,.main-nav button{font-size:12px;letter-spacing:.2em;color:#53594d}
.main-nav a:hover,.main-nav button:hover{color:#9b7527}
.main-nav a:after,.main-nav button:after{background:#c4a45b;bottom:6px}
.header-secondary{border-color:#bda66e5c;border-radius:4px;padding:10px 17px;font-size:10px;color:#7c693e;transition:background .2s,border-color .2s}
.header-secondary:hover{background:#eee5d0;border-color:#bda66e}
.intro{gap:0;background:radial-gradient(ellipse at 50% 46%,#fffdf8 0,transparent 62%);isolation:isolate}
.intro:before{inset:8% 15%;background:radial-gradient(ellipse,#e8d19b23,transparent 68%);animation:heroGlow 14s ease-in-out infinite;z-index:-2}
.intro:after{display:none}
.hero-signature{width:clamp(285px,38vw,500px);margin:0 0 36px;z-index:1;animation:signature-arrive 1.5s cubic-bezier(.16,1,.3,1) both}
.intro h1{font-family:"Songti SC","STSong","SimSun",serif;font-size:clamp(56px,6.8vw,104px);font-weight:400;line-height:1.3;letter-spacing:.18em;padding-left:.18em;margin:0;color:#3d4436;animation:purpose-arrive 1.6s cubic-bezier(.16,1,.3,1) .25s both,heroBreathe 12s ease-in-out 1.85s infinite;z-index:1}
.intro .purpose-translation{margin:22px 0 0;font:10px/1.5 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:.5em;padding-left:.5em;color:#9a7b3b;animation:purpose-arrive 1.5s ease .6s both;z-index:1}
.gold-streams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible;opacity:.7}
.upper-stream{opacity:.8}
.stream-lines{fill:none;stroke:url(#stream-gold);stroke-width:.65;transform-origin:50% 60%;animation:stream-breathe 18s ease-in-out infinite}
.stream-light{fill:none;stroke:#cfa74b;stroke-width:1.1;stroke-dasharray:9 91;stroke-linecap:round;opacity:0;animation:stream-travel 12s ease-in-out 1s infinite}
.explore-link{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:20px;min-height:48px;padding:6px 7px 6px 22px;font-size:11px;letter-spacing:.14em;color:#735a2c;white-space:nowrap;border:1px solid #bca16c80;border-radius:30px;background:linear-gradient(135deg,#fffdf8e6,#f5eddfb3);box-shadow:inset 0 1px 0 #fffdf8,0 3px 12px #9d7d3410;transition:color .25s,border-color .25s,box-shadow .25s;animation:link-arrive 1s ease 1s both}
.explore-link svg{box-sizing:content-box;width:18px;height:18px;padding:8px;border:1px solid #bea16750;border-radius:50%;background:#bda16b12;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:background .25s,border-color .25s}
.explore-link svg path{transition:transform .25s}
.explore-link:hover{color:#59411c;border-color:#ab8547;box-shadow:inset 0 1px 0 #fffdf8,0 5px 18px #9d7d3420}.explore-link:hover svg{background:#bda16b26;border-color:#bda16b80}.explore-link:hover svg path{transform:translateY(2px)}
.intro.is-offscreen .stream-lines,.intro.is-offscreen .stream-light{animation-play-state:paused}
.atlas{padding-top:24px;padding-bottom:24px}
.atlas .scroll{border-radius:28px}
.atlas .scroll:before{box-shadow:inset 0 0 26px 8px var(--paper);opacity:.85}
.table .cell{border-radius:2px}
.table .cell:not(.product){background:#fbf8efd9;border:1px solid #e9ddbf9c;color:#35402f;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.table .cell:not(.product):hover,.table .cell:not(.product):focus-visible{background:#fffdf2;border-color:#c5a557;color:#6c551f}
.table .cell.product{border-radius:3px;border-color:#d8bd76;box-shadow:0 0 0 1px #e8d5a455,0 4px 14px #13231726!important}
.table .cell.cook{border-color:#b9c398}
.table.linking .cell.related,.table.linking .cell.link-source{box-shadow:0 0 0 1px #edcf88,0 0 18px #f0ce762e!important;border-color:#f5dc9b}
.table .cell.product .symbol{color:#fffdf3;text-shadow:0 1px 3px #101c15,0 0 2px #101c15,1px 0 1px #101c15,-1px 0 1px #101c15}
.table .brand-region,.table .brand-region[data-brand="cook"]{border-radius:5px;background:#faf7f0;box-shadow:0 0 0 1px #b9a46a3b,0 6px 24px #18271619}
.table .brand-copy{background:#faf7f0}
.table .brand-copy h2{color:#8d6d29;font-family:Georgia,"Songti SC",serif;font-weight:400}
.table .brand-region[data-brand="cook"] h2{color:#536541}
.table .brand-copy p{color:#606858}
.table .brand-copy .status{color:#8f7951}.table .brand-copy .status .dot{background:#8d9c73}
.table .region-close{color:#907a48;opacity:.7;transition:opacity .2s}.table .region-close:hover{opacity:1}
.series-disclosure summary{color:#8d7134}.brand-options button{border-radius:3px}
.mobile-navigation{background:#fcf9f1;border:1px solid #cfba8a40;box-shadow:0 12px 35px #303b3414;border-radius:10px}
.mobile-navigation button,.mobile-navigation a{color:#55604b;font-size:13px;letter-spacing:.04em}
.mobile-navigation button:hover,.mobile-navigation a:hover{background:#efe7d6}
a:focus-visible,button:focus-visible{outline:2px solid #ac8c42;outline-offset:4px}
@keyframes signature-arrive{from{opacity:0;transform:translateY(18px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes purpose-arrive{from{opacity:0;transform:translateY(18px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes link-arrive{from{opacity:0}to{opacity:1}}
@keyframes stream-breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-18px) scaleY(1.06)}}
@keyframes stream-travel{0%{stroke-dashoffset:18;opacity:0}20%,70%{opacity:.65}95%,100%{stroke-dashoffset:-100;opacity:0}}
@media(min-width:701px) and (max-width:1000px){.site-header{gap:24px}.main-nav{gap:28px}.site-header .signature{width:120px}.brand-chinese{font-size:15px;padding-left:13px}.hero-signature{width:360px}}
@media(max-width:700px){.site-header{padding-inline:20px}.site-header .header-actions{display:flex}.brand-emblem{width:34px;height:34px}.site-header .signature{width:112px;height:32px}.brand-chinese{font-size:14px;padding-left:12px}.site-header .brand{gap:12px}.hero-signature{width:min(76vw,340px);margin-bottom:28px}.intro h1{font-size:clamp(38px,10.8vw,64px);letter-spacing:.14em;padding-left:.14em}.intro .purpose-translation{font-size:8px;letter-spacing:.35em;margin-top:18px}.gold-streams{width:180%;left:-40%}.explore-link{bottom:40px;font-size:11px}.atlas{padding-top:16px;padding-bottom:16px}.atlas .scroll{border-radius:22px}.atlas .scroll:before{box-shadow:inset 0 0 16px 5px var(--paper)}}
@media(max-height:600px) and (min-width:701px){.hero-signature{width:260px;margin-bottom:20px}.intro h1{font-size:56px}.intro .purpose-translation{margin-top:12px}.explore-link{bottom:18px}}
@media(prefers-reduced-motion:reduce){.hero-signature,.intro h1,.purpose-translation,.gold-streams *,.explore-link{animation:none!important;filter:none!important}.stream-light{display:none}.explore-link,.explore-link svg,.explore-link svg path,.header-secondary{transition:none}}
/* The assembly lands at the exact independently computed tile positions. */
@keyframes assemble{0%{opacity:0;transform:translate3d(calc(var(--packed-x,0px) + var(--sx)),calc(var(--packed-y,0px) + var(--sy)),var(--sz)) rotateX(var(--rot)) rotateY(var(--rot)) scale(.4)}35%{opacity:.55}100%{opacity:1;transform:translate3d(var(--packed-x,0px),var(--packed-y,0px),0) rotateX(0deg) rotateY(0deg) scale(var(--packed-scale,1))}}
.signature,.hero-signature{mix-blend-mode:normal}
/* Each screen accounts for the sticky navigation, including the last table row. */
main{grid-template-rows:minmax(540px,calc(100svh - 68px)) minmax(540px,calc(100svh - 68px))}
.atlas .scroll{padding-top:90px}
.table{--tile:min(calc((94vw - 83px)/18),calc((100svh - 230px)/10))}
@media(max-width:700px){main{grid-template-rows:minmax(520px,calc(100svh - 60px)) minmax(520px,calc(100svh - 60px))}.table{--tile:calc((94vw - 34px)/18)}.atlas .scroll{padding-top:90px}}

/* The atlas never becomes a scroll anchor when an inline description changes. */
.atlas,.table,.brand-region{overflow-anchor:none}
.table .brand-region{transition:opacity .2s,visibility .2s;overflow:visible}
.table .brand-copy,.table .brand-region[data-brand="cook"] .brand-copy{border-radius:inherit;padding:10px 26px 10px 10px}
.table .brand-copy h2{font-size:22px;overflow-wrap:normal}
.table .brand-copy p{font-size:11px;line-height:1.6}
.table .brand-copy .status{font-size:9px;margin-bottom:6px}
.table .region-close{min-width:30px;min-height:30px;padding:4px}
.table .brand-copy .series-disclosure{font-size:10px;margin-top:8px}
.table .brand-copy .series-disclosure button{font-size:9px;min-height:28px;padding:4px 6px}
.brand-options button[aria-pressed="true"]{background:#e5d3a5;border-color:#9b7d35}
.table .cell:not(.product){cursor:default}
@media(max-width:700px){.table .brand-copy h2{font-size:19px}.table .brand-copy .series-disclosure button{min-height:32px}.table .region-close{min-width:32px;min-height:32px}}
/* Reserve the enlarged sodium edge and the complete last row inside the garden. */
.atlas .scroll{padding-bottom:24px}
.table{left:calc(var(--tile)*.25);--tile:min(calc((94vw - 115px)/18.5),max(26px,calc((100svh - 257px)/10)))}
@media(max-width:700px){.table{--tile:calc((94vw - 34px)/18.5)}}

/* Phones keep readable squares and native horizontal exploration. */
.table-viewport{display:contents}
@media(max-width:700px){
 .atlas .scroll{padding:0}
 .table-viewport{display:flex;align-items:center;width:100%;height:100%;padding:200px 18px 24px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b8a16b transparent;border-radius:inherit}
 .table{--tile:max(clamp(24px,calc((94vw - 47px)/12.5),28px),calc((94vw - 70px)/18.5));left:0;max-width:none;flex:none;margin:auto 0 auto calc(var(--tile)*.5)}
 .table .cell .number{font-size:6px;top:2px;left:2px}
 .table .cell.product .number{font-size:6px}
}

/* Original spatial motion, composed over the current packed positions. */
#table{transform:perspective(1500px) rotateX(var(--motion-rx,0deg)) rotateY(var(--motion-ry,0deg))!important;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1)}
#table .cell{translate:0 0 0;transition:transform .65s cubic-bezier(.22,1,.36,1),translate .65s cubic-bezier(.22,1,.36,1),opacity .4s,background .4s}
#table.linking .cell.related{translate:0 0 16px}
#table.linking .cell.related:after{display:block;opacity:0;animation:metal-response 1.1s cubic-bezier(.22,1,.36,1) both}
@keyframes metal-response{0%{opacity:0;background-position:100% 0}35%{opacity:.4}100%{opacity:0;background-position:-100% 0}}
#table.linking .cell.related:after{background:linear-gradient(115deg,transparent 30%,#fff7 49%,transparent 68%) 100% 0/250% 100%}
@media(hover:hover) and (pointer:fine){#table:not(.assembling) .cell:not(.product):hover{translate:0 0 5px}}
@media(max-width:700px){#table{transform:perspective(1500px)!important}#table .cell{translate:none!important}}
@media(prefers-reduced-motion:reduce){#table{transform:none!important}#table .cell{translate:none!important}#table .cell:after{animation:none!important}}