/* ==========================================================================
   ROYEE STUDIO — 极简高级风样式表
   设计原则：留白 > 细线 > 字重对比；无圆角、无阴影、无多余色块。
   配色/字体/圆角等变量由 config.js 的 theme 覆盖。
   ========================================================================== */

:root{
  /* 千金风暖调色板：奶油白底 + 香槟金强调 + 暖墨黑文字 */
  --ink:#2b2119;          /* 正文 / 主文字（暖墨黑，比纯黑柔和） */
  --muted:#8d8375;        /* 次要文字（暖灰） */
  --line:#e9e1d6;         /* 分隔线（暖灰） */
  --soft:#faf6f1;         /* 浅区块背景（奶油白） */
  --accent:#b08d57;       /* 强调色：香槟金 */
  --accent-soft:#f4ece0;  /* 香槟金浅底 */
  --radius:0px;
  --cols:4;

  --font-sans:'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
              'Source Han Sans SC', 'Noto Sans CJK SC', 'Microsoft YaHei', Arial, sans-serif;
  --font-serif:'Times New Roman', 'Songti SC', 'STSong', 'Source Han Serif SC',
               'Noto Serif CJK SC', Georgia, serif;
  --font:var(--font-sans);

  --nav-h:76px;
  --pad:clamp(24px, 5vw, 72px);          /* 页面左右安全边距 */
  --gap-sec:clamp(88px, 12vw, 184px);    /* 板块上下留白 */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:#fff;
  font-size:14px;line-height:1.9;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
h1,h2,h3,h4{margin:0;font-weight:300;letter-spacing:-.01em;line-height:1.2;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:var(--accent);color:#fff;}

.wrap{width:100%;max-width:1560px;margin:0 auto;padding:0 var(--pad);}
.wrap--narrow{max-width:940px;}

/* ---------- 通用排版件 ---------- */
.eyebrow{
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:22px;font-weight:400;
}
.sec-head{max-width:640px;margin-bottom:clamp(48px,6vw,88px);}
.sec-head h2{
  font-size:clamp(26px,3.2vw,44px);font-weight:300;letter-spacing:.01em;margin-bottom:18px;
}
.sec-head p{color:var(--muted);font-size:14px;line-height:2;max-width:520px;}
.sec-head--light h2{color:#fff;}
.sec-head--light .eyebrow{color:#d8bd8b;}
.sec-head--light p{color:rgba(255,255,255,.55);}

.section{padding:var(--gap-sec) 0;}
.section--soft{background:var(--soft);}
.section--dark{background:var(--ink);color:#fff;}

/* 文字链接（带下划线动效，高级感核心细节） */
.link{
  display:inline-block;position:relative;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;padding-bottom:6px;
}
.link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform-origin:right;transition:transform .5s var(--ease);
}
.link:hover::after{transform:scaleX(0);}

.btn{
  display:inline-block;border:1px solid var(--ink);background:var(--ink);color:#fff;
  padding:16px 38px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  border-radius:var(--radius);transition:background .45s var(--ease),color .45s var(--ease);
}
.btn:hover{background:transparent;color:var(--ink);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:#fff;}
.btn--sm{padding:12px 24px;}
.btn--light{border-color:var(--accent);background:var(--accent);color:#fff;}
.btn--light:hover{background:transparent;color:var(--accent);}
.btn--outline-light{border-color:rgba(255,255,255,.6);background:transparent;color:#fff;}
.btn--outline-light:hover{background:#fff;color:var(--ink);border-color:#fff;}

/* ==========================================================================
   顶部导航 —— 首屏透明叠图，滚动后转白底
   ========================================================================== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.header.is-solid{
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);color:var(--ink);border-bottom-color:var(--line);
}
.header__inner{
  max-width:1560px;margin:0 auto;padding:0 var(--pad);
  height:var(--nav-h);display:flex;align-items:center;gap:48px;
}
/* 品牌徽标：深色首屏用浅色版，吸顶转白底后切成深墨色版 */
.logo{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;flex:none;}
.logo__mark{height:30px;width:auto;display:block;flex:none;}
.logo__mark--dark{display:none;}
.header.is-solid .logo__mark--dark{display:block;}
.header.is-solid .logo__mark--light{display:none;}
.logo__word{font-size:11.5px;letter-spacing:.26em;font-weight:500;line-height:1;}
.logo__sub{font-size:9px;letter-spacing:.24em;opacity:.6;font-weight:400;}
.nav{display:flex;gap:36px;margin-right:auto;}
.nav a{
  font-size:11.5px;letter-spacing:.16em;position:relative;padding:6px 0;opacity:.82;
  transition:opacity .3s;
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;
  transition:width .45s var(--ease);
}
.nav a:hover{opacity:1;}
.nav a:hover::after,.nav a.is-active::after{width:100%;}
/* 首屏是满画面豹纹这类高对比底图时，白色小字需要一点阴影才压得住 */
.header:not(.is-solid) .nav a,
.header:not(.is-solid) .logo__word,
.header:not(.is-solid) .logo__sub{text-shadow:0 1px 12px rgba(0,0,0,.6);}
.header__actions{display:flex;align-items:center;gap:16px;margin-left:auto;}
.burger{display:none;padding:10px;}
.burger span{display:block;width:22px;height:1px;background:currentColor;margin:5px 0;transition:transform .35s var(--ease);}
.header.is-open .burger span:first-child{transform:translateY(3px) rotate(45deg);}
.header.is-open .burger span:last-child{transform:translateY(-3px) rotate(-45deg);}

.mobile-nav{
  display:grid;grid-template-rows:0fr;background:rgba(255,255,255,.98);
  backdrop-filter:blur(14px);color:var(--ink);transition:grid-template-rows .5s var(--ease);
}
.header.is-open .mobile-nav{grid-template-rows:1fr;border-bottom:1px solid var(--line);}
.mobile-nav>div{overflow:hidden;}
.mobile-nav a{
  display:block;padding:16px var(--pad);font-size:12px;letter-spacing:.14em;
  border-bottom:1px solid var(--line);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink) center/cover no-repeat;color:#fff;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 32%,rgba(0,0,0,.62) 100%);
}
/* 左对齐时补一层由左向右的压暗，让左下的标题/正文在花底图上压得住（右半依然通透） */
.hero--left::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.30) 38%,rgba(0,0,0,0) 70%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.12) 32%,rgba(0,0,0,.62) 100%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:1560px;margin:0 auto;
  padding:0 var(--pad) clamp(72px,10vh,130px);
}
.hero--center{justify-content:center;text-align:center;}
.hero .eyebrow{color:rgba(255,255,255,.78);text-shadow:0 1px 14px rgba(0,0,0,.6);}
.hero h1{
  font-size:clamp(42px,7vw,104px);font-weight:200;line-height:1.02;
  letter-spacing:-.02em;margin-bottom:28px;text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero--left h1{max-width:15ch;}
.hero p{
  font-size:15px;color:rgba(255,255,255,.86);max-width:460px;line-height:2;margin-bottom:44px;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero--center p{margin-inline:auto;}
.hero__btns{display:flex;gap:18px;flex-wrap:wrap;align-items:center;}
.hero--center .hero__btns{justify-content:center;}
.scroll-hint{
  position:absolute;left:var(--pad);bottom:26px;z-index:3;
  font-size:9.5px;letter-spacing:.28em;color:rgba(255,255,255,.5);text-transform:uppercase;
}

/* ==========================================================================
   数据条 —— 无边框，纯留白 + 巨大细体数字
   ========================================================================== */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,4vw,64px);
  padding:clamp(56px,7vw,96px) 0;border-bottom:1px solid var(--line);
}
.stats__item{text-align:left;}
.stats__num{
  font-size:clamp(40px,4.6vw,68px);font-weight:200;line-height:1;
  letter-spacing:-.03em;
}
.stats__num i{font-style:normal;font-size:.42em;margin-left:.14em;color:var(--accent);font-weight:300;}
.stats__label{
  margin-top:16px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}

/* ==========================================================================
   品类标签 —— 细线下划线
   ========================================================================== */
.cats{display:flex;gap:clamp(24px,3.4vw,52px);flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:clamp(40px,5vw,72px);}
.cats button{
  padding:0 0 16px;font-size:12px;letter-spacing:.16em;color:var(--muted);
  position:relative;transition:color .35s;
}
.cats button span{font-size:9px;letter-spacing:.2em;opacity:.55;margin-left:7px;}
.cats button::after{
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--accent);
  transition:width .5s var(--ease);
}
.cats button:hover{color:var(--ink);}
.cats button:hover::after{width:100%;}
.cats button.is-active{color:var(--ink);}
.cats button.is-active::after{width:100%;}

/* ==========================================================================
   产品网格
   ========================================================================== */
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:clamp(48px,5vw,80px) clamp(18px,2vw,32px);}
.card{cursor:pointer;}
.card__media{position:relative;overflow:hidden;background:var(--soft);aspect-ratio:3/4;}
.card__media img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);
}
.card__media img.card__img--alt{position:absolute;inset:0;opacity:0;}
.card:hover .card__img--alt{opacity:1;}
.card:hover .card__media img{transform:scale(1.035);}
.card__tag{
  position:absolute;top:16px;left:16px;z-index:2;background:#fff;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:6px 11px;
}
.card__body{padding-top:20px;}
.card__sku{font-size:9.5px;letter-spacing:.22em;color:var(--accent);}
.card__name{margin-top:9px;font-size:14px;letter-spacing:.02em;position:relative;display:inline-block;}
.card__name::after{
  content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--ink);
  transition:width .55s var(--ease);
}
.card:hover .card__name::after{width:100%;}
.card__en{margin-top:5px;font-size:11.5px;color:var(--muted);letter-spacing:.06em;}
.card__price{margin-top:10px;font-size:13px;font-weight:300;}
.card__meta{margin-top:8px;font-size:11.5px;color:var(--muted);letter-spacing:.06em;}
.grid-empty{padding:80px 0;text-align:center;color:var(--muted);font-size:13px;letter-spacing:.1em;}

/* ==========================================================================
   Editorial 编辑式图文区
   ========================================================================== */
.editorial{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,5vw,90px);align-items:center;}
.editorial--reverse .editorial__media{order:2;}
.editorial__media{overflow:hidden;background:var(--soft);aspect-ratio:4/5;}
.editorial__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease);}
.editorial:hover .editorial__media img{transform:scale(1.04);}
.editorial__text{max-width:420px;}
.editorial__text h3{font-size:clamp(22px,2.6vw,34px);font-weight:300;margin-bottom:20px;line-height:1.35;}
.editorial__text p{color:var(--muted);font-size:14px;line-height:2.1;margin-bottom:32px;}

/* 引言 */
.quote{max-width:900px;margin:0 auto;text-align:center;}
.quote blockquote{
  margin:0;font-size:clamp(20px,2.6vw,34px);font-weight:300;line-height:1.6;letter-spacing:.01em;
}
.quote figcaption{margin-top:28px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);}

/* ==========================================================================
   产地优势 —— 编号 + 细线，无卡片
   ========================================================================== */
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3.5vw,56px);}
.point{padding-top:26px;border-top:1px solid var(--accent);}
.point__no{font-size:9.5px;letter-spacing:.24em;color:var(--accent);}
.point__icon{font-size:20px;margin:16px 0 14px;}
.point h3{font-size:17px;font-weight:400;margin-bottom:12px;letter-spacing:.01em;}
.point p{font-size:13px;color:var(--muted);line-height:2;}

/* ==========================================================================
   工艺能力 —— 极简双列清单
   ========================================================================== */
.craft{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,5vw,90px);}
.craft__item{
  display:grid;grid-template-columns:44px 1fr;gap:20px;padding:26px 0;
  border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease);
}
.craft__item:hover{padding-left:10px;}
.craft__no{font-size:10px;letter-spacing:.18em;color:var(--accent);padding-top:5px;}
.craft__item h3{font-size:16px;font-weight:400;margin-bottom:7px;}
.craft__item p{font-size:13px;color:var(--muted);line-height:1.95;}

.marquee{
  margin-top:clamp(56px,6vw,96px);overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;
}
.marquee__track{display:inline-block;animation:marquee var(--mq-speed,40s) linear infinite;}
.marquee__track span{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;padding:0 30px;color:var(--ink);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   流程时间轴 —— 深色区，细线 + 大留白
   ========================================================================== */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(24px,3vw,48px);}
.step{padding-top:24px;border-top:1px solid rgba(255,255,255,.2);}
.step__no{font-size:9.5px;letter-spacing:.26em;color:#d8bd8b;}
.step h3{margin:20px 0 14px;font-size:17px;font-weight:400;color:#fff;}
.step__time{
  display:inline-block;font-size:10.5px;letter-spacing:.16em;color:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.22);padding:5px 11px;
}
.step p{margin-top:18px;font-size:13px;color:rgba(255,255,255,.5);line-height:2;}

/* ==========================================================================
   FAQ —— 极简细线手风琴
   ========================================================================== */
.faq{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%;text-align:left;padding:28px 0;font-size:15px;font-weight:300;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.faq__q i{
  font-style:normal;position:relative;width:12px;height:12px;flex:none;
}
.faq__q i::before,.faq__q i::after{
  content:'';position:absolute;background:var(--accent);transition:transform .45s var(--ease),opacity .45s;
}
.faq__q i::before{left:0;top:5.5px;width:12px;height:1px;}
.faq__q i::after{top:0;left:5.5px;width:1px;height:12px;}
.faq__item.is-open .faq__q i::after{transform:rotate(90deg);opacity:0;}
.faq__a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease);}
.faq__item.is-open .faq__a{max-height:420px;}
.faq__a p{padding-bottom:30px;max-width:740px;font-size:13.5px;color:var(--muted);line-height:2.1;}

/* ==========================================================================
   联系
   ========================================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:start;}
.contact__left h2{font-size:clamp(26px,3vw,40px);font-weight:300;margin-bottom:20px;}
.contact__left p{color:var(--muted);margin-bottom:40px;max-width:420px;line-height:2;}
.contact__list{border-top:1px solid var(--line);}
.contact__item{
  display:flex;align-items:baseline;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
a.contact__item:hover{padding-left:10px;}
.contact__item em{font-style:normal;color:var(--muted);font-size:10px;letter-spacing:.22em;text-transform:uppercase;width:92px;flex:none;}
.contact__item b{font-weight:300;font-size:16px;letter-spacing:.02em;}

/* ==========================================================================
   页脚
   ========================================================================== */
.footer{background:var(--ink);color:#fff;padding:clamp(64px,8vw,110px) 0 44px;}
.footer__brand{margin-bottom:clamp(40px,5vw,72px);}
.footer__logo{display:block;width:clamp(180px,23vw,290px);height:auto;}
.footer__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,60px);
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid rgba(255,255,255,.14);
}
.footer h4{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:20px;color:#c9ab77;font-weight:400;}
.footer__desc{font-size:13px;color:rgba(255,255,255,.5);line-height:2;max-width:330px;}
.footer li{margin-bottom:12px;}
.footer li a{font-size:13px;color:rgba(255,255,255,.72);transition:color .3s;}
.footer li a:hover{color:#d8bd8b;}
.footer__bottom{
  padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.35);text-transform:uppercase;
}

/* ==========================================================================
   产品详情弹窗
   ========================================================================== */
.lightbox{position:fixed;inset:0;z-index:200;display:none;}
.lightbox.is-open{display:block;}
.lightbox__mask{position:absolute;inset:0;background:rgba(10,10,10,.86);opacity:0;transition:opacity .5s var(--ease);}
.lightbox.is-open .lightbox__mask{opacity:1;}
.lightbox__panel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);}
.lightbox__close{position:absolute;top:22px;right:26px;z-index:6;color:#fff;font-size:20px;line-height:1;opacity:.7;transition:opacity .3s;}
.lightbox__close:hover{opacity:1;}
.lightbox__body{
  position:relative;z-index:2;background:#fff;width:min(1180px,100%);
  max-height:calc(100vh - clamp(32px,8vw,112px));overflow:auto;
  display:grid;grid-template-columns:1.15fr 1fr;
  transform:translateY(18px);opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease);
}
.lightbox.is-open .lightbox__body{transform:none;opacity:1;}
.lb__media{display:flex;flex-direction:column;gap:2px;background:var(--soft);}
.lb__media img{width:100%;height:auto;object-fit:cover;}
.lb__info{padding:clamp(32px,4vw,60px) clamp(28px,3.4vw,48px);}
.lb__sku{font-size:9.5px;letter-spacing:.24em;color:var(--accent);}
.lb__info h3{font-size:clamp(22px,2.4vw,30px);font-weight:300;margin:14px 0 8px;}
.lb__en{font-size:11.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.lb__price{font-size:19px;font-weight:300;margin:24px 0 28px;}
.lb__desc{font-size:13.5px;color:var(--muted);line-height:2.1;margin-bottom:32px;}
.lb__spec{border-top:1px solid var(--line);}
.lb__row{display:flex;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;}
.lb__row>span{color:var(--muted);width:78px;flex:none;font-size:11px;letter-spacing:.14em;}
.lb__row>div{flex:1;}
.lb__swatches,.lb__sizes{display:flex;gap:8px;flex-wrap:wrap;}
.lb__swatches i,.lb__sizes i{font-style:normal;border:1px solid var(--line);padding:4px 11px;font-size:12px;}
.lb__cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}

/* ==========================================================================
   滚动淡入
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1280px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .points{grid-template-columns:repeat(2,1fr);}
  .timeline{grid-template-columns:repeat(3,1fr);row-gap:52px;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  :root{--nav-h:64px;}
  .nav,.header__actions .btn{display:none;}
  .burger{display:block;}
  .header:not(.is-solid){background:rgba(10,10,10,.18);}
  .hero{min-height:88svh;}
  .hero p{font-size:14px;}
  .grid{grid-template-columns:repeat(2,1fr);gap:44px 16px;}
  .stats{grid-template-columns:repeat(2,1fr);gap:36px 24px;}
  .editorial{grid-template-columns:1fr;gap:36px;}
  .editorial--reverse .editorial__media{order:0;}
  .craft{grid-template-columns:1fr;}
  .contact{grid-template-columns:1fr;gap:48px;}
  .lightbox__body{grid-template-columns:1fr;}
  .lb__media{flex-direction:row;overflow-x:auto;}
  .lb__media img{height:320px;flex:none;width:auto;}
  .scroll-hint{display:none;}
}
@media (max-width:600px){
  .points,.timeline{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;gap:34px;}
  .hero__btns .btn{padding:14px 26px;font-size:10px;}
  .faq__q{font-size:14px;padding:22px 0;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  .reveal{opacity:1;transform:none;}
}