/* Maiya Xiaolv marketing: paper, charcoal and stone. */
:root {
  --paper:#fbfaf8; --white:#fff; --ink:#252320; --muted:#6f6a63;
  --action:#252320; --action-hover:#080807; --surface:#f0eeea; --surface-strong:#e4ded6;
  --accent:#8c603d; --line:#dedad4; --soft:#f4f2ee;
  --serif:"Iowan Old Style","Songti SC","STSong",Georgia,serif;
  --sans:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--paper); font-family:var(--sans); font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; opacity:.6; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
h1,h2,h3,p,figure,ul,ol { margin:0; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
[hidden] { display:none!important; }
::selection { color:var(--ink); background:var(--surface-strong); }
.container { width:min(1320px,calc(100% - 96px)); margin-inline:auto; }
.section { padding-block:112px; }
.eyebrow { color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.1em; }
.section-heading { max-width:680px; margin-bottom:36px; }
.section-heading h2 { margin-top:18px; font-family:var(--serif); font-size:clamp(32px,3.3vw,46px); font-weight:600; line-height:1.45; letter-spacing:-.035em; text-wrap:balance; }
.section-heading>p:not(.eyebrow) { margin-top:22px; color:var(--muted); max-width:550px; font-size:15px; line-height:1.95; }
.button,.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; max-width:100%; padding:12px 22px; border:1px solid transparent; border-radius:4px; font-size:14px; font-weight:600; line-height:1.5; transition:background .2s,color .2s,border-color .2s; text-align:center; }
.button svg,.btn svg { width:17px; height:17px; flex-shrink:0; }
.button-primary,.btn-download { color:#fff; background:var(--action); border-color:var(--action); }
.button-primary:hover,.btn-download:hover { background:var(--action-hover); border-color:var(--action-hover); }
.button-secondary,.btn-download-alt { color:var(--ink); border-color:var(--line); background:transparent; }
.button-secondary:hover,.btn-download-alt:hover { border-color:#aaa299; background:var(--surface); }
.text-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); font-size:14px; font-weight:600; }
.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.text-link svg { width:17px; height:17px; flex-shrink:0; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; z-index:100; top:10px; left:10px; padding:10px 20px; background:#fff; }
.site-header { position:sticky; top:0; z-index:30; min-height:80px; border-bottom:1px solid var(--line); background:#fbfaf8f7; }
.header-inner { min-height:79px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img { width:36px; height:36px; border-radius:6px; }
.brand strong { display:block; font-size:17px; line-height:1.3; font-weight:650; letter-spacing:.035em; }
.brand small { display:block; margin-top:4px; font-size:9px; line-height:1.2; color:var(--accent); letter-spacing:1.8px; font-weight:600; }
.site-nav { display:flex; align-items:center; justify-content:center; gap:36px; margin-left:auto; }
.site-nav>a { display:flex; align-items:center; min-height:44px; color:var(--muted); font-size:14px; }
.site-nav>a:hover,.site-nav>a[aria-current=page] { color:var(--ink); }
.site-nav>a[aria-current=page] { text-decoration:underline; text-underline-offset:8px; }
.header-actions { display:flex; align-items:center; gap:20px; }
.language-link { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--muted); font-size:12px; }
.header-actions .button { min-height:44px; padding:9px 18px; font-size:13px; }
.mobile-toggle { display:none; width:44px; height:44px; flex-shrink:0; background:transparent; border:1px solid var(--line); border-radius:4px; place-items:center; }
.mobile-toggle svg { width:20px; height:20px; }
.hero { padding:64px 0 0; }
.hero-intro { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:end; gap:6vw; margin-bottom:48px; }
.hero h1 { margin-top:20px; font-family:var(--serif); font-size:clamp(52px,5.6vw,82px); line-height:1.3; font-weight:600; letter-spacing:-.055em; }
.hero-deck { padding-bottom:6px; }
.hero-deck>p:first-child { color:var(--muted); font-size:17px; line-height:1.9; max-width:450px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; margin-top:24px; }
.hero-footnote { margin-top:15px; color:var(--muted); font-size:12px; }
.media-zoom { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:5px 8px; border:0; background:none; color:var(--ink); font-size:12px; }
.media-zoom svg { width:15px; height:15px; }
.site-footer { padding:52px 0 28px; color:#f3f0eb; background:#252320; }
.footer-top { display:flex; align-items:flex-start; justify-content:space-between; gap:36px; }
.footer-brand .brand small { color:#d9b694; }
.footer-brand p { font-size:13px; color:#c2bbb2; margin-top:18px; }
.footer-links { display:flex; gap:8px 26px; align-items:center; flex-wrap:wrap; font-size:13px; }
.footer-links a,.footer-links button { min-height:44px; display:flex; align-items:center; }
.footer-links button { border:0; padding:0; background:transparent; }
.footer-links a:hover,.footer-links button:hover { text-decoration:underline; text-underline-offset:5px; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; border-top:1px solid #514b44; margin-top:32px; padding-top:22px; color:#c2bbb2; font-size:11px; }
dialog { color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:0; max-width:calc(100vw - 32px); box-shadow:0 30px 90px #251e1a30; }
dialog::backdrop { background:#211b1699; backdrop-filter:blur(3px); }
.dialog-top { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 20px; border-bottom:1px solid var(--line); font-size:13px; }
.dialog-top button { width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:4px; background:transparent; display:grid; place-items:center; }
.dialog-top button svg { width:17px; height:17px; }
.product-lightbox { width:min(1440px,calc(100vw - 32px)); }
.product-lightbox img { width:100%; max-height:calc(100dvh - 100px); object-fit:contain; }
.about-dialog { width:560px; }
.about-copy { padding:30px; }.about-copy h2 { font-family:var(--serif); font-size:28px; line-height:1.5; margin-bottom:20px; }
.about-copy p+p { margin-top:16px; }.about-copy p { color:var(--muted); font-size:14px; }
[data-reveal].reveal-ready { transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1); }
[data-reveal].reveal-ready:not(.is-revealed):not(:focus-within) { opacity:0; transform:translateY(20px); }
@media(min-width:1800px) { .container { width:min(1480px,calc(100% - 144px)); }.hero h1 { font-size:88px; }.hero { padding-top:78px; } }
@media(max-width:1100px) { .container { width:calc(100% - 64px); }.header-inner { gap:20px; }.site-nav { gap:24px; }.header-actions { gap:12px; }.hero-intro { gap:36px; }.hero-deck>p:first-child { font-size:15px; }.hero-actions { gap:8px 16px; }.section { padding-block:88px; } }
@media(max-width:860px) { .hero-intro { grid-template-columns:1fr; gap:28px; }.hero h1 { font-size:62px; }.hero-deck>p:first-child { max-width:600px; font-size:16px; }.hero { padding-top:48px; }.hero-intro { margin-bottom:36px; }.site-nav { gap:18px; }.site-nav>a { font-size:13px; }.header-actions .button { padding-inline:12px; } }
@media(min-width:701px) and (max-width:1000px) {
  .mobile-toggle { display:grid; }.site-nav { display:none; }
  .menu-open .site-nav { display:flex; position:absolute; left:0; right:0; top:100%; padding:18px 32px; gap:8px; flex-direction:column; align-items:stretch; background:var(--paper); border-bottom:1px solid var(--line); }
}
@media(max-width:700px) {
  html { scroll-padding-top:84px; }.container { width:calc(100% - 40px); }.section { padding-block:64px; }
  .site-header { min-height:68px; }.header-inner { min-height:67px; gap:10px; }.header-actions { margin-left:auto; gap:8px; }.header-actions .button { min-height:44px; padding:8px 12px; font-size:12px; }
  .mobile-toggle { display:grid; }.site-nav { display:none; }.menu-open .site-nav { display:flex; position:absolute; left:0; right:0; top:100%; padding:18px 20px; gap:8px; align-items:stretch; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); box-shadow:0 15px 25px #251e1610; }.site-nav>a { min-height:44px; font-size:14px; }
  .hero { padding-top:36px; }.hero h1 { font-size:clamp(30px,9vw,44px); margin-top:18px; }.hero-intro { gap:22px; margin-bottom:28px; }.hero-deck>p:first-child { font-size:15px; }.hero-actions { margin-top:20px; }.hero-footnote { font-size:11px; }.eyebrow { font-size:11px; }
  .section-heading { margin-bottom:28px; }.section-heading h2 { font-size:31px; }.section-heading>p:not(.eyebrow) { font-size:14px; }.footer-top { flex-direction:column; gap:24px; }.footer-links { gap:6px 24px; }.footer-bottom { flex-direction:column; }.about-copy { padding:24px; }.about-copy h2 { font-size:25px; }
}
@media(max-width:450px) { .header-inner { gap:6px; }.header-actions { gap:6px; }.header-actions .button { padding-inline:10px; }.header-actions .button svg { display:none; }.site-header .brand small { display:none; }.site-header .brand { gap:8px; }.site-header .brand strong { font-size:14px; }.site-header .brand img { width:32px; height:32px; } }
@media(max-width:360px) { .site-header .container { width:calc(100% - 24px); }.header-actions .button { padding-inline:8px; font-size:11px; }.site-header .brand strong { font-size:13px; }.site-header .brand img { width:28px; height:28px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }[data-reveal].reveal-ready { opacity:1!important; transform:none!important; } }
