/* 整站节奏：纸面与铜色不变。只补首页、系列页，并让窄屏顶栏仍可点。 */

.site-foot p{margin:0 0 10px;font-size:13.5px;max-width:46ch;color:#C9C0B4}
.n-foot .cols.site-foot{grid-template-columns:1.5fr 1fr 1fr}

/* 六个栏目完整显示。链接不收缩、不省略号。窄屏整条横滑，单词不被截成 About。 */
.n-top{position:sticky;top:0}
.n-top .in{gap:16px;min-width:0}
.n-brand{flex:0 0 auto}
.n-brand span{letter-spacing:.12em}
.n-menu{display:flex;flex:1 1 auto;justify-content:flex-end;min-width:0;gap:0;overflow-x:auto;scrollbar-width:none}
.n-menu::-webkit-scrollbar{display:none}
.n-menu a{flex:0 0 auto;white-space:nowrap;overflow:visible;text-overflow:clip;letter-spacing:0;padding:8px 11px}
.n-cta{flex:0 0 auto}
.n-basket{padding:8px 10px;gap:6px;background:transparent;cursor:pointer;line-height:1}
.n-basket svg{display:block}
.n-basket b{font-family:var(--mono);font-size:12px;line-height:1;color:var(--copper)}
.n-cta .lang{flex:0 0 auto;align-self:center}
.n-cta .lang button{padding:8px 9px;font-size:12px}
.about-banner{object-fit:cover;object-position:center 42%}

.collect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;padding-top:8px}
.collect a{display:flex;flex-direction:column;min-width:0;color:inherit}
.collect img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--paper2)}
.collect h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;line-height:1;margin:18px 0 8px}
.collect p{margin:0;font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.02em}
.collect a:hover h2{color:var(--copper-d)}

.dl-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line);max-width:760px}
.dl-list li{display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.dl-list img{width:72px;height:96px;object-fit:cover;background:var(--paper2)}
.dl-list b{display:block;font-family:var(--mono);font-weight:500;font-size:14px}
.dl-list span{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.dl-list a{font-family:var(--mono);font-size:13px;color:var(--copper-d);white-space:nowrap}
.dl-list a:hover{color:var(--ink)}

@media (max-width:1180px){
  /* brand word kept */
  .n-menu a{padding:8px 9px}
}
@media (max-width:900px){
  .n-menu{justify-content:flex-start}
}
@media (max-width:1060px){
  .n-top{position:sticky;top:0}
  .n-top .in{flex-wrap:nowrap;height:70px}
  .n-menu{display:flex}
  .v-sub,.inpage{top:70px}
}
@media (max-width:800px){
  .collect{grid-template-columns:1fr;gap:40px;max-width:480px}
}

.home-hero{position:relative;min-height:calc(100vh - 118px);min-height:calc(100dvh - 118px);background:var(--ink);color:#fff;overflow:hidden}
.home-hero .frame{position:absolute;inset:0}
.home-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%}
.home-hero .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(23,19,15,.58) 0%,rgba(23,19,15,.12) 52%,rgba(23,19,15,0) 74%),
  linear-gradient(180deg,rgba(23,19,15,.18) 0%,rgba(23,19,15,.05) 36%,rgba(23,19,15,.72) 100%)}
.home-hero .copy{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-bottom:72px;max-width:1280px}
.home-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(42px,5.6vw,76px);line-height:.98;letter-spacing:-.035em;margin:12px 0 0;max-width:12ch}
.home-hero .lead{margin:18px 0 0;max-width:42ch;font-size:17.5px;line-height:1.5;color:rgba(255,255,255,.9)}
.home-hero .ph-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.home-credit{border-bottom:1px solid var(--line);padding:14px 0;display:flex;gap:16px;align-items:baseline;color:var(--muted);font-size:12.5px}
.home-credit .mono{color:var(--copper);flex:0 0 auto}

.home main section{padding:96px 0}
.home main section.mid-band{padding:0!important;margin:0}
.home main h2.sec{font-size:clamp(32px,4vw,52px);letter-spacing:-.03em;max-width:18ch;line-height:1.05}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:42px;padding-top:28px;border-top:1px solid var(--line)}
.proof b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(44px,5vw,68px);letter-spacing:-.04em;line-height:.9}
.proof span{display:block;margin-top:10px;color:var(--ink3);font-size:14.5px;max-width:18ch;line-height:1.45}

.scene-list{display:grid;gap:22px}
.scene-list .v-appband .b-img{min-height:440px}
.scene-list .v-appband h3{font-family:var(--serif);font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:8px 0 14px}
.scene-list .v-appband .b-txt{padding:42px 40px}
.scene-note{margin:22px 0 0;max-width:70ch}

.cloth-rows{display:grid;gap:22px}
.cloth-row{display:grid;gap:22px;min-width:0}
.cloth-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cloth-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cloth-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:var(--paper);color:inherit}
.cloth-card:hover{border-color:var(--copper)}
.cloth-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper2)}
.cloth-row.two .cloth-card img{aspect-ratio:16/11}
.cloth-card .bd{padding:16px 16px 18px}
.cloth-card .fam{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cloth-card b{display:block;margin-top:6px;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--copper-d)}
.cloth-card strong{display:block;margin-top:4px;font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.02em}
.cloth-card small{display:block;margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45}

.fam-band{display:grid;grid-template-columns:1.15fr .85fr;min-height:420px;border:1px solid var(--line);background:var(--paper);color:inherit;margin:0 0 22px}
.fam-band:hover{border-color:var(--copper)}
.fam-band img{width:100%;height:100%;object-fit:cover;min-height:420px;background:var(--paper2)}
.fam-band.rev img{order:2}
.fam-band .bd{padding:40px 36px;display:flex;flex-direction:column;min-width:0}
.fam-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;line-height:1;margin:8px 0 12px}
.fam-band p{margin:0 0 12px;color:var(--ink3)}
.fam-band .arts{font-family:var(--mono);font-size:13px;color:var(--ink2)}
.fam-band .go{margin-top:auto;padding-top:20px;color:var(--copper-d);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}

.series-art{display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);background:var(--paper);margin:0 0 16px}
.series-art .pic img{width:100%;height:100%;object-fit:cover;min-height:240px;max-height:280px;background:var(--paper2)}
.series-art .bd{padding:20px 22px;min-width:0}
.series-art h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.1;margin:4px 0 6px}
.series-art .face{color:var(--ink2);margin:12px 0}
.swatches{display:flex;gap:6px;overflow-x:auto;margin-top:14px;min-width:0;padding-bottom:4px}
.swatches a{flex:0 0 52px;border:1px solid var(--line)}
.swatches a:hover{border-color:var(--copper)}
.swatches img{display:block;width:52px;height:52px;object-fit:cover}
.series-miss{padding:48px 0;max-width:62ch}
.series-miss h1{font-family:var(--serif);font-size:clamp(32px,4vw,48px);margin:8px 0}

@media (max-width:900px){
  .proof,.cloth-row.three{grid-template-columns:1fr 1fr}
  .fam-band,.fam-band.rev,.series-art{grid-template-columns:1fr}
  .fam-band.rev img,.fam-band img{order:0;min-height:280px;max-height:460px}
  .series-art .pic img{min-height:200px;max-height:240px}
}
@media (max-width:660px){
  .home main section{padding:64px 0}
  .home main section.mid-band{padding:0!important}
  .home-hero{min-height:0;background:var(--paper);color:var(--ink);overflow:visible}
  .home-hero .frame{position:relative;height:68vw;min-height:240px}
  .home-hero .veil{background:linear-gradient(180deg,rgba(23,19,15,0) 40%,rgba(23,19,15,.35))}
  .home-hero .copy{position:static;padding:28px 18px 8px;max-width:none}
  .home-hero h1,.home-hero .lead{color:var(--ink)}
  .home-hero .lead{color:var(--ink3)}
  .home-hero .btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
  .proof,.cloth-row.three,.cloth-row.two{grid-template-columns:1fr}
  .cloth-row.two .cloth-card img,.cloth-card img{aspect-ratio:4/5}
  .scene-list .v-appband .b-img{min-height:240px}
  .scene-list .v-appband .b-txt{padding:24px 20px}
  .n-foot .cols.site-foot{grid-template-columns:1fr}
  .dl-list li{grid-template-columns:64px 1fr}
  .dl-list a{grid-column:2}
}

/* ---- four-category catalogue -------------------------------------------- */
.collect.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.collect.four img{aspect-ratio:4/5}
.collect.four h2{font-size:clamp(24px,2.4vw,34px)}
.collect.four p b{color:var(--ink);font-weight:600}

/* category page: jump strip + colour preview without codes */
.art-jump{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 26px}
.art-jump a{font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:5px 8px;border:1px solid var(--line2);color:var(--ink3);background:var(--paper)}
.art-jump a:hover{border-color:var(--ink);color:var(--ink)}
.series-art h2.artonly{letter-spacing:-.02em}
.series-dot{display:block}
.series-dot img,.swatches a img{display:block}
.swatches.single img{width:100%;height:auto;border:1px solid var(--line2)}

/* cloth page: flat colour sheet, cells with no printed code */
.pd-sheet{margin-top:18px;border:1px solid var(--line2);background:var(--paper2)}
.pd-sheet img{display:block;width:100%;height:auto}
.pd-cw.nocode{cursor:default;opacity:.92}
.pd-cw.nocode b{color:var(--muted)}

/* about 页的四格品质表：原来写死在 style 里，390 宽撑破整页，改成类名好交给媒体查询 */
.glossary.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1060px){ .glossary.four{grid-template-columns:1fr 1fr} }
@media (max-width:660px){ .glossary.four{grid-template-columns:1fr} }

/* 色卡条目本来就该横滑，但系统滚动条不该压在色卡下面显眼 */
.swatches,.art-jump{scrollbar-width:none;-ms-overflow-style:none}
.swatches::-webkit-scrollbar,.art-jump::-webkit-scrollbar{display:none}
.art-jump a{white-space:nowrap}

@media (max-width:1000px){
  .collect.four{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:660px){
  .collect.four{grid-template-columns:1fr;gap:32px}
  .art-jump{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
}

/* 窄屏顶栏：六个栏目改成第二行折行显示，不再塞进百来像素的横滑条里。
   两行顶栏较高，窄屏就不吸顶，免得常驻占掉六分之一屏幕。 */
@media (max-width:700px){
  .n-top{position:static}
  .n-top .in{height:auto!important;min-height:56px;flex-wrap:wrap;align-items:center;
    padding-top:10px;padding-bottom:0;row-gap:0;overflow:visible}
  .n-brand{order:1;flex:1 1 auto;min-width:0}
  .n-cta{order:2;flex:0 0 auto;margin-left:auto;gap:8px}
  .n-menu{order:3;flex:1 0 100%;display:flex;flex-wrap:nowrap;overflow-x:auto;
    justify-content:flex-start;border-top:1px solid var(--line2);margin-top:8px;
    margin-left:0;padding:4px 0 8px;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .n-menu::-webkit-scrollbar{display:none}
  .n-menu a{padding:10px 12px;font-size:13px}
  .v-sub,.inpage{position:static!important;top:auto!important;z-index:1}
  .v-sub .in,.inpage .in{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .v-sub .in::-webkit-scrollbar,.inpage .in::-webkit-scrollbar{display:none}
}


/* ---- MaxShen UI: logo, account menu, taller hero, hide credit ---- */
.ph-credit{display:none!important}
.n-top .in{height:70px}
@media (max-width:700px){
  .n-top .in{height:auto!important;min-height:56px}
}

.n-brand{display:flex;align-items:center;gap:10px}
.n-brand img{display:block;width:40px;height:40px;object-fit:contain;flex:0 0 auto}
html[lang^="zh"] .n-brand img,
html[data-lang="zh"] .n-brand img,
html[lang^="ru"] .n-brand img,
html[data-lang="ru"] .n-brand img{width:40px;height:40px}
.n-brand b{display:none}
.n-brand .n-brand-word{display:inline-flex;align-items:center;font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.12em;line-height:1;color:var(--ink);white-space:nowrap}
.n-brand .n-brand-word .bw{display:none}
.n-brand .n-brand-word .bw-en{display:inline}
html[data-lang="zh"] .n-brand .n-brand-word .bw-en,
html[lang^="zh"] .n-brand .n-brand-word .bw-en{display:none}
html[data-lang="zh"] .n-brand .n-brand-word .bw-zh,
html[lang^="zh"] .n-brand .n-brand-word .bw-zh{display:inline;letter-spacing:.08em;font-size:17px}
/* ru keeps English wordmark */

.n-account{position:relative;flex:0 0 auto}
.n-avatar{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  padding:0;border:1px solid var(--line2);background:var(--paper);cursor:pointer;color:var(--ink3);line-height:0}
.n-avatar:hover,.n-account.is-open .n-avatar{color:var(--ink);border-color:var(--ink);background:var(--paper2)}
.n-avatar svg{display:block}
.n-account-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:168px;padding:6px 0;
  background:var(--paper);border:1px solid var(--line2);box-shadow:0 10px 28px rgba(23,19,15,.12);z-index:90}
.n-account-menu[hidden]{display:none}
.n-account-menu a{display:block;padding:10px 16px;font-size:13px;color:var(--ink3);white-space:nowrap}
.n-account-menu a:hover{background:var(--paper2);color:var(--ink)}
.n-account-menu a[aria-current=page]{color:var(--ink);font-weight:600}

/* home carousel height = same as Products / Contact Us .ph-media */
.home .v-car .v-stage img,
.ph-home .v-stage img{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  min-height:0;
  max-height:min(80vh,780px);
  object-fit:cover;
  object-position:center 55%;
}
.home .v-car .v-sizer,
.ph-home .v-sizer{min-height:0}
.home .v-car .v-sizer img,
.ph-home .v-sizer img{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  min-height:0;
  max-height:min(80vh,780px);
}

/* numeric overlay off */
.v-num{display:none !important}

/* language strip: three buttons stay compact */
.n-cta .lang button{padding:8px 8px;font-size:11.5px}

@media (max-width:700px){
  .n-brand img{width:34px;height:34px}
  html[lang^="zh"] .n-brand img,html[data-lang="zh"] .n-brand img,
  html[lang^="ru"] .n-brand img,html[data-lang="ru"] .n-brand img{width:34px;height:34px}
  .n-brand{gap:8px}
  .n-brand .n-brand-word{font-size:16px}
  html[data-lang="zh"] .n-brand .n-brand-word .bw-zh,
  html[lang^="zh"] .n-brand .n-brand-word .bw-zh{font-size:18px}
  .n-top .in{height:auto!important;flex-wrap:wrap}
  .n-cta .lang button{padding:7px 6px;font-size:11px}
  .v-sub-tag{padding-right:10px}
  .home .v-car .v-stage img,
  .ph-home .v-stage img,
  .home .v-car .v-sizer img,
  .ph-home .v-sizer img{
    aspect-ratio:16/9;
    height:auto;
    min-height:0;
    max-height:none;
    object-position:center 52%;
  }
}