/* ============ 导航 ============ */
.announce{background:var(--accent);color:var(--paper);padding:9px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em}
.announce .marquee-track{animation-duration:36s}
.announce .marquee-track span{color:var(--paper);opacity:.85;padding:0 26px;white-space:nowrap}
.announce b{color:var(--paper);font-weight:500}

.nav{position:sticky;top:0;z-index:900;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.scrolled{box-shadow:none}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:baseline;gap:10px;font-family:var(--serif);font-size:25px;font-weight:900;line-height:1}
.logo small{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--muted);font-weight:400}
.nav-links{display:flex;gap:2px}
.nav-links a,.nav-links button{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding:9px 13px;border-radius:0;transition:.25s;color:var(--ink2)}
.nav-links a:hover,.nav-links button:hover{background:var(--accent);color:var(--paper)}
.nav-actions{display:flex;align-items:center;gap:10px}
.cart-btn{position:relative;display:flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--ink);border-radius:0;font-family:var(--mono);font-size:13px;transition:.25s;background:transparent}
.cart-btn:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.cart-count{display:grid;place-items:center;min-width:20px;height:20px;border-radius:0;background:var(--accent);color:var(--paper);font-size:11px;padding:0 5px}
.cart-btn.bump .cart-count{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}

.mobile-menu{position:fixed;inset:0;background:var(--paper);z-index:940;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu nav{display:grid;gap:6px;text-align:center}
.mobile-menu a,.mobile-menu button{font-family:var(--serif);font-size:36px;padding:10px 30px;transition:.2s}
.mobile-menu a:hover,.mobile-menu button:hover{color:var(--accent);text-decoration:underline}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-height:calc(100vh - 165px);padding:56px 0 90px}
.hero-title{font-size:clamp(46px,6.2vw,92px);font-weight:600;letter-spacing:-.01em;margin:26px 0 24px}
.hero-title em{font-style:italic;color:var(--ink);font-weight:400}
.hero-sub{max-width:46ch;color:var(--ink2);font-size:clamp(15px,1.25vw,18px)}
.hero-cta{display:flex;gap:14px;margin:34px 0 46px;flex-wrap:wrap}
.hero-meta{display:flex;gap:44px;border-top:1px solid var(--line);padding-top:26px;flex-wrap:wrap}
.hero-meta strong{display:block;font-family:var(--serif);font-size:32px}
.hero-meta span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.hero-art{position:relative;transition:transform .2s ease-out}
.hero-svg{width:100%;height:auto;filter:none}
.float-a{animation:floatA 5s ease-in-out infinite}
.float-b{animation:floatB 6.5s ease-in-out infinite}
.float-slow{animation:floatA 9s ease-in-out infinite}
.sticker{animation:floatB 4.5s ease-in-out infinite}
@keyframes floatA{50%{transform:translateY(-12px)}}
@keyframes floatB{50%{transform:translateY(9px)}}
.scroll-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint span{width:1.5px;height:34px;background:var(--muted);animation:hint 1.8s ease-in-out infinite;transform-origin:top}
@keyframes hint{50%{transform:scaleY(.3)}}

/* 大字跑马灯 */
.big-marquee{border-block:1px solid var(--line);padding:20px 0}
.big-marquee .marquee-track span{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,30px);white-space:nowrap;display:flex;align-items:center;gap:52px;padding-right:52px}
.big-marquee i{font-style:normal;color:var(--ink)}

/* ============ 商品集合 ============ */
.collection{padding:96px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:46px;flex-wrap:wrap}
.section-head h2{font-size:clamp(32px,4vw,54px);margin-top:16px}
.section-head p{color:var(--ink2);max-width:38ch;font-size:14.5px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:9px 18px;border:1px solid var(--line);border-radius:0;font-family:var(--mono);font-size:13px;display:flex;gap:9px;align-items:center;transition:.25s;background:transparent}
.chip span{font-size:11px;opacity:.55}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.tools{display:flex;gap:10px;align-items:center}
.search{position:relative;display:flex;align-items:center;flex:1;max-width:250px}
.search svg{position:absolute;left:14px;color:var(--ink2);pointer-events:none}
.search input{padding:11px 16px 11px 38px;border:1px solid var(--line);border-radius:0;background:transparent;width:100%;outline:none;transition:.25s}
.search input:focus{border-color:var(--accent)}
select{padding:11px 38px 11px 16px;border:1px solid var(--line);border-radius:0;background:transparent;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.result-count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--muted);margin-bottom:28px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

/* 商品卡 */
.card{border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--paper);transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform}
.card:hover{box-shadow:none;border-bottom:1px solid var(--accent)}
.card-media{position:relative;aspect-ratio:4/3.1;background:var(--tone,#F5F6F7);border-bottom:1px solid var(--line);display:grid;place-items:center;overflow:hidden;cursor:pointer}
.card-art{width:64%;transition:transform .5s var(--ease)}
.card:hover .card-art{transform:scale(1.07)}
.badge{position:absolute;top:14px;left:14px;background:var(--accent);color:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;padding:5px 11px;border-radius:0}
.badge.hot{background:var(--accent2)}
.quick-add{position:absolute;left:12px;right:12px;bottom:12px;background:var(--accent);color:var(--paper);border-radius:0;padding:12px;font-family:var(--mono);font-size:13px;letter-spacing:.05em;display:flex;justify-content:center;gap:8px;transform:translateY(150%);transition:transform .4s var(--ease)}
.card:hover .quick-add{transform:none}
.quick-add:hover{background:var(--accent2)}
.quick-add b{font-family:var(--serif);font-weight:600}
.card-info{padding:18px 20px 20px}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-row h3{font-size:19px}
.card-info .price{font-size:16px}
.card-sub{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);margin-top:5px;text-transform:uppercase}

/* ============ 工作室 ============ */
.craft{padding:104px 0;background:var(--accent);color:var(--paper);border-block:1px solid var(--accent)}
.craft-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.craft h2{font-size:clamp(30px,3.6vw,50px);margin:22px 0 20px}
.craft .eyebrow{color:var(--muted)}
.craft-copy>p{color:#9A9A9A;max-width:44ch}
.craft-steps{display:grid}
.step{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:26px 0;border-top:1px solid rgba(255,255,255,.14)}
.step:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.step b{font-family:var(--serif);font-style:italic;font-size:36px;color:var(--paper);font-weight:400}
.step h3{font-size:20px;margin-bottom:6px;color:var(--paper)}
.step p{font-size:14px;color:#9A9A9A}
.craft-pattern{grid-column:1/-1;margin-top:26px;opacity:.85}
.craft-pattern svg{width:100%;height:auto}

/* ============ 数据 ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:56px 30px;border-left:1px solid var(--line);text-align:center}
.stat:first-child{border-left:0}
.stat b{font-family:var(--serif);font-size:clamp(38px,3.6vw,56px);display:block;line-height:1}
.stat span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}

/* ============ 陈列 ============ */
.lookbook{padding:96px 0}
.scenes{display:grid;grid-auto-flow:column;grid-auto-columns:min(440px,82vw);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:22px;scrollbar-width:thin}
.scene{scroll-snap-align:start;border:1px solid var(--line);border-radius:0;overflow:hidden;background:var(--paper);transition:transform .35s var(--ease)}
.scene:hover{transform:none;border-color:var(--accent)}
.scene-art{aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.scene-art svg{width:100%;height:100%}
.scene figcaption{padding:18px 20px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.scene h3{font-size:19px}
.scene figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;white-space:nowrap}

/* ============ 用户声音 ============ */
.voices{padding:20px 0 104px}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:10px}
.voice{border:1px solid var(--line);border-radius:0;padding:30px;transition:.3s var(--ease);background:var(--paper)}
.voice:hover{border-color:var(--accent);transform:none}
.voice q{font-family:var(--serif);font-size:19px;line-height:1.55;quotes:"“" "”"}
.voice q::before{font-size:1.5em;color:var(--ink);line-height:0;vertical-align:-.28em;margin-right:5px}
.voice footer{margin-top:22px;display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;border-radius:0;display:grid;place-items:center;font-family:var(--serif);font-weight:700;color:var(--paper);font-size:16px;flex:none;background:var(--accent)}
.voice footer b{font-size:14px}
.voice footer span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em}

/* ============ 订阅 & 页脚 ============ */
.newsletter{background:var(--paper);color:var(--ink);padding:96px 0;text-align:center;border-top:1px solid var(--line)}
.newsletter .eyebrow{justify-content:center;color:var(--muted)}
.newsletter h2{font-size:clamp(30px,4vw,52px);margin:18px 0 14px}
.newsletter p{color:var(--ink2);max-width:48ch;margin:0 auto 36px}
.nl-form{display:flex;gap:10px;max-width:520px;margin:0 auto}
.nl-form input{flex:1;padding:16px 22px;border-radius:0;border:1px solid var(--line);background:transparent;color:var(--ink);outline:none;transition:.25s;min-width:0}
.nl-form input::placeholder{color:var(--muted)}
.nl-form input:focus{border-color:var(--accent)}
footer.site{background:var(--paper);color:var(--ink);border-top:1px solid var(--line);padding:72px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--muted);margin-bottom:16px;text-transform:uppercase;font-weight:500}
.foot-grid a{display:block;padding:5px 0;color:var(--ink2);font-size:14px;transition:.2s}
.foot-grid a:hover{color:var(--accent);text-decoration:underline}
.foot-brand p{color:var(--muted);font-size:13px;max-width:30ch;margin-top:16px}
.foot-bottom{margin-top:58px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);flex-wrap:wrap;gap:10px}