/* ============================================================
   Yanse Cosmetics — Website Design System (v2 · per DESIGN.md)
   Shared across all pages. Direction: refined premium beauty-OEM (warm editorial).
   Fonts: Fraunces (clean serif, headings) · Inter (body) · JetBrains Mono (labels/data) · Noto Serif SC (中文备注)
   Color: warm cream paper · navy-grey text · LOGO navy #002F6C + green #509E2F accents · lifted-navy dark sections
   ============================================================ */
:root{
  --paper:#faf8f3; --paper-2:#efece2; --paper-3:#e8e1cf;
  --ink:#001226; --ink-soft:#1f2c47;            /* deep navy-black (ref) */
  --navy:#002F6C; --navy-2:#001838; --navy-mist:#c8d2e0;
  --navy-deep-a:#0c3366; --navy-deep-b:#082244;               /* large dark sections (lifted navy) */
  --green:#509E2F; --green-deep:#3d7d24; --green-soft:#6db44d;
  --gold:#b89c70;
  --rule:rgba(40,34,16,0.22); --rule-2:rgba(40,34,16,0.10);     /* warm beige hairlines (ref) */
  --muted:rgba(0,18,38,0.66); --whisper:rgba(0,18,38,0.44);   /* navy-grey text steps (ref) */
  --white:#fff;
  --ff-display:"Fraunces","Noto Serif SC",Georgia,serif;
  --ff-body:"Inter","Helvetica Neue",Arial,sans-serif;
  --ff-mono:"JetBrains Mono","SFMono-Regular",monospace;
  --ff-cn:"Noto Serif SC","Source Han Serif SC",serif;
  --max:1320px;
  --sp:40px;
  --sh:0 24px 64px -20px rgba(0,24,56,.22);
  --sh-sm:0 8px 32px -12px rgba(0,24,56,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%;color-scheme:light}
a,button,input,textarea,select,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{background:var(--paper);color:var(--ink);font-family:var(--ff-body);font-size:16px;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* printed-paper grain overlay */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity:0;mix-blend-mode:multiply}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
ul{list-style:none}

/* type — Fraunces with SOFT axis, light weights */
h1,h2,h3,h4{font-family:var(--ff-display);color:var(--navy);font-weight:400;letter-spacing:-.02em;line-height:1;font-feature-settings:normal;text-wrap:balance}
h1{font-size:clamp(46px,7vw,110px);font-weight:300;line-height:.9;letter-spacing:-.035em;font-variation-settings:'wght' 300,'SOFT' 50}
h1 .light{font-weight:300;color:var(--ink)}
/* ── canonical hero cover headline (confirmed: BIG·tight·upright navy focus·green period) ── */
.cover-h{font-family:var(--ff-display);font-size:clamp(46px,6vw,84px);line-height:1.05;letter-spacing:-.02em;font-weight:500;color:var(--navy);font-variation-settings:'wght' 500}
.cover-h>span{display:block;opacity:0;animation:fadeUp 1s ease-out forwards}
.cover-h>span:nth-child(1){animation-delay:.30s}
.cover-h>span:nth-child(2){animation-delay:.45s}
.cover-h>span:nth-child(3){animation-delay:.60s}
.cover-h>span:nth-child(4){animation-delay:.75s}
.cover-h .light{font-weight:400;color:var(--ink)}
.cover-h em{font-style:normal;font-weight:500;color:var(--navy);font-variation-settings:'wght' 500} /* focus word = upright navy, slightly bolder */
.cover-h .dot{display:inline;color:inherit}                                                                 /* period same color as word (navy) — no green accent */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
h2.h-sec{font-size:clamp(30px,3.6vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.015em;font-variation-settings:'wght' 500}
h2.h-sec .light{font-weight:400;color:var(--ink)}
h3{font-size:21px;font-weight:500;letter-spacing:-.005em;font-variation-settings:'wght' 500}
p{color:var(--muted)}
/* emphasis word — restrained: upright navy (NO swashy italic). green only via .dot */
em,.em{font-style:normal;font-weight:500;color:var(--navy)}
.em-green{color:var(--green)}
.dot{color:var(--green)}
.soft{font-variation-settings:'SOFT' 100}.hard{font-variation-settings:'SOFT' 0}
/* emphasis word in headings — navy on light, light-green on dark sections (readable) */
.ink-mark{font-style:normal;font-weight:500;color:var(--navy)}
.proof .ink-mark,.nnn .ink-mark,.rfq .ink-mark{color:var(--green-soft)}
.ink-mark::after{display:none}

/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--sp)}
.section{padding:clamp(64px,8vw,116px) 0}
.section.p2{background:var(--paper-2)}
.eyebrow{font-family:var(--ff-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:13px;margin-bottom:26px}
.eyebrow .num{color:var(--green-deep);font-weight:500}
.eyebrow .ln{flex:1;height:1px;background:var(--rule);max-width:84px}
.eyebrow.center{justify-content:center}
.sec-head{max-width:760px;margin-bottom:54px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin-top:18px;font-size:18px;color:var(--muted)}
.lead{font-size:18.5px;color:var(--muted);line-height:1.65;max-width:60ch}
.lead b{color:var(--ink);font-weight:600}
p{max-width:66ch}

/* icons */
.ic{width:1.4em;height:1.4em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* buttons — mono, square, restrained */
.btn{font-family:var(--ff-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:11px;padding:16px 28px;border:1.5px solid transparent;cursor:pointer;transition:.25s;white-space:nowrap}
.btn .ic{width:16px;height:16px;stroke-width:2}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-green:hover{background:var(--green-deep);border-color:var(--green-deep);gap:16px}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:transparent;color:var(--ink)}
.btn-out{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-out:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(247,244,236,.4)}
.btn-ghost:hover{background:rgba(247,244,236,.12)}
.link-mono{font-family:var(--ff-mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:3px;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.link-mono:hover{color:var(--green-deep);border-color:var(--green)}
.link-mono .ic{width:14px;height:14px;stroke-width:2.2}

/* index bar */
.idxbar{border-bottom:1px solid var(--rule);background:var(--paper)}
.idxbar .wrap{display:flex;justify-content:space-between;align-items:center;height:44px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.idxbar .l span{color:var(--green-deep)}
.idxbar a:hover{color:var(--ink)}
@media(max-width:720px){.idxbar .r{display:none}}

/* header */
header{position:sticky;top:0;z-index:60;background:rgba(247,244,236,.88);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.3s}
header.scrolled{border-bottom-color:var(--rule);box-shadow:var(--sh-sm)}
.hdr{display:flex;justify-content:space-between;align-items:center;padding:22px 0;transition:padding .3s}
header.scrolled .hdr{padding:14px 0}
.brand{display:flex;align-items:center}
.brand .mark{height:46px;width:auto}
nav.main{display:none;gap:32px;font-size:14.5px;font-weight:500}
nav.main a{position:relative;padding:4px 0;color:var(--ink)}
nav.main a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--green);transition:width .3s}
nav.main a:hover::after{width:100%}
.hdr-r{display:flex;align-items:center;gap:18px}
.menu-btn{display:inline-flex;background:none;border:0;color:var(--ink);cursor:pointer;padding:6px}.menu-btn .ic{width:26px;height:26px}
.mobile{display:none;border-top:1px solid var(--rule);background:var(--paper)}
.mobile .wrap{display:flex;flex-direction:column;gap:2px;padding:14px 40px 22px}
.mobile a{padding:12px 4px;font-weight:500;border-bottom:1px solid var(--rule-2)}
@media(min-width:1040px){nav.main{display:flex}.menu-btn{display:none}}
@media(max-width:520px){.brand .mark{height:40px}}

/* reveal */
.r{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.r.in{opacity:1;transform:none}
.r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.26s}.r.d4{transition-delay:.38s}

/* footer — warm paper (belongs to the page, not a dark slab) */
footer{background:var(--paper-2);color:var(--muted);border-top:1.5px solid var(--ink)}
.foot{display:grid;gap:42px;padding:60px 0 40px}
@media(min-width:820px){.foot{grid-template-columns:2.1fr 1fr 1fr 1.5fr}}
.foot .mark{height:42px;margin-bottom:18px}
.foot .fb p{font-size:14px;line-height:1.7;max-width:300px;color:var(--muted)}
.foot h4{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot ul{display:grid;gap:10px;font-size:14px}
.foot ul a{color:var(--ink-soft)}
.foot ul a:hover{color:var(--green-deep)}
.foot .fc li{display:flex;gap:9px;margin-bottom:9px;font-size:13.5px;line-height:1.5}
.foot .fc .ic{width:15px;height:15px;color:var(--whisper);flex-shrink:0;margin-top:3px}
.foot .fc a:hover{color:var(--green-deep)}
.footbar{border-top:1px solid var(--rule)}
.footbar .wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;padding:18px 40px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;color:var(--whisper)}

.hide-mob{display:none}@media(min-width:560px){.hide-mob{display:inline-flex}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.r{opacity:1!important;transform:none!important}.ink-mark::after{transform:scaleX(1)!important}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* RFQ form states (shared) */
.form-status{margin-top:14px;font-family:var(--ff-mono);font-size:12px;line-height:1.55;padding:12px 14px;border:1px solid var(--rule);background:#fff}
.form-status[data-type="success"]{color:var(--green-deep);border-color:var(--green);background:rgba(80,158,47,.08)}
.form-status[data-type="error"]{color:#8f2a2a;border-color:#cba0a0;background:rgba(160,60,60,.07)}
.form-status[data-type="pending"]{color:var(--muted)}
[aria-invalid="true"]{border-color:#c06a6a!important;box-shadow:0 0 0 3px rgba(170,60,60,.12)!important}
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* cookie consent bar */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:760px;margin:0 auto;background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:var(--sh);padding:16px 20px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between}
.cookie-bar p{color:rgba(255,255,255,.86);font-size:13px;line-height:1.5;margin:0;max-width:46ch}
.cookie-bar a{color:var(--green-soft);border-bottom:1px solid rgba(109,180,77,.5)}
.cookie-bar .cb-act{display:flex;gap:10px;flex-shrink:0}
.cookie-bar button{font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;cursor:pointer;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;transition:.2s}
.cookie-bar .cb-yes{background:var(--green);border-color:var(--green)}
.cookie-bar .cb-yes:hover{background:var(--green-deep);border-color:var(--green-deep)}
.cookie-bar .cb-no:hover{background:rgba(255,255,255,.12)}