/* ============================================================
   YANYAN Porcelain — premium layer (v2)
   Loaded after celadon.css. Remove this file's <link> to roll back.
   ============================================================ */
:root{
  --bg:#F6F5EF;
  --bg-soft:#E8ECE3;
  --ink:#161D18;
  --ink-soft:#4B564E;
  --ink-faint:#8B948C;
  --line:#D3D9CD;
  --accent:#B4552F;
  --accent-deep:#8C3E22;
  --celadon:#6F8B77;
  --celadon-soft:#DDE4D8;
  --black:#0F1712;
}
body{background:var(--bg);color:var(--ink)}

/* ---------- dark editorial header ---------- */
.topbar{background:#0F1712;border-bottom:1px solid rgba(246,245,239,.08)}
.announce{color:rgba(246,245,239,.58);letter-spacing:.2em}
.announce b{color:#D98A5B}
.topbar-link,.lang-trigger{color:rgba(246,245,239,.66)}
.topbar-link:hover,.lang-trigger:hover{color:#fff}
.cart-count{background:#D98A5B;color:#0F1712}
header.nav{background:rgba(15,23,18,.94);border-bottom:1px solid rgba(246,245,239,.12);backdrop-filter:saturate(1.1) blur(12px)}
.logo{color:#F6F5EF;font-size:28px;letter-spacing:.22em}
.logo .mark{color:#D98A5B}
.nav-link{color:rgba(246,245,239,.68);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nav-link:hover{color:#fff}
.nav-link::after{background:#D98A5B}
.nav-cta{background:var(--accent);border-color:var(--accent);color:#fff}
.nav-cta:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.drop,.lang-drop{background:#fff;border-color:var(--line)}
.drop a,.lang-drop a{color:var(--ink-soft)}
.drop a:hover,.lang-drop a:hover{background:var(--bg-soft);color:var(--ink)}
.nav-burger{background:transparent;border-color:rgba(246,245,239,.25)}
.nav-burger span{background:#F6F5EF}
.m-nav{background:#F6F5EF}

/* ---------- cinematic hero ---------- */
.qz-hero{background:linear-gradient(160deg,#0F1712 0%,#1A2A20 55%,#2A3A2D 100%);color:#F6F5EF;border-bottom:0;overflow:hidden}
.qz-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 82% 0%,rgba(180,85,47,.20),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(111,139,119,.25),transparent 60%);pointer-events:none}
.qz-hero-grid{position:relative;z-index:1;min-height:min(84vh,780px)}
.qz-hero h1{color:#F6F5EF;font-size:clamp(52px,6.8vw,96px);line-height:.92;letter-spacing:-.02em}
.qz-hero h1 em{color:#D98A5B}
.qz-kicker{color:#D98A5B;letter-spacing:.3em}
.qz-hero .lede{color:rgba(246,245,239,.72);font-size:16.5px;max-width:46ch}
.qz-hero-ctas .btn-ghost{border-color:rgba(246,245,239,.38);color:#F6F5EF}
.qz-hero-ctas .btn-ghost:hover{background:#F6F5EF;color:#0F1712;border-color:#F6F5EF}
.qz-hero-ctas .btn-solid{background:var(--accent);border-color:var(--accent);color:#fff}
.qz-hero-ctas .btn-solid:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.qz-hero-stats{border-top-color:rgba(246,245,239,.16)}
.qz-hero-stats .n{color:#F6F5EF}
.qz-hero-stats .l{color:rgba(246,245,239,.5)}
.qz-hero-art{border-left:1px solid rgba(246,245,239,.16);background:#0F1712}
.qz-hero-art::after{inset:22px;border-color:rgba(217,138,91,.55)}
.qz-hero-art::before{content:"SINCE 2014";position:absolute;top:22px;left:22px;z-index:2;font-family:var(--sans);font-size:9.5px;letter-spacing:.3em;color:#F6F5EF;background:rgba(15,23,18,.55);border:1px solid rgba(246,245,239,.18);padding:8px 10px;backdrop-filter:blur(6px)}
.qz-hero-meta{color:rgba(246,245,239,.85);letter-spacing:.24em}

/* ---------- section rhythm ---------- */
.qz-sec{padding:clamp(72px,9vw,128px) 0}
.qz-sec-head h2{font-size:clamp(36px,4.8vw,64px);letter-spacing:-.015em}
.qz-sec-head h2 em{color:var(--accent);font-style:italic}
.qz-sec-head p{font-size:15.5px;line-height:1.7}
.qz-index{letter-spacing:.3em}
.qz-cat h3{font-size:clamp(22px,2.4vw,34px)}
.qz-cat::after{background:linear-gradient(180deg,rgba(15,23,18,0) 22%,rgba(15,23,18,.74) 100%)}
.prod .img{background:#fff;border-color:var(--line)}
.prod .name{font-size:21px;letter-spacing:-.01em}
.prod .price{color:var(--accent);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.prod:hover .img img{transform:scale(1.06)}
.qz-stats b{font-size:38px}
.qz-stats span{letter-spacing:.18em}

/* ---------- quote + footer ---------- */
.qz-quote{background:#0F1712}
.qz-quote blockquote{font-size:clamp(32px,4.4vw,58px)}
.qz-quote blockquote em{color:#D98A5B}
footer{background:#0F1712;position:relative;overflow:hidden}
footer::before{content:"YANYAN";position:absolute;right:-2vw;bottom:-5vw;font-family:var(--serif);font-size:clamp(160px,26vw,420px);line-height:1;color:rgba(246,245,239,.035);pointer-events:none;letter-spacing:-.02em;z-index:0}
footer .wrap{position:relative;z-index:1}
.foot-cta h3{font-size:clamp(34px,4.4vw,56px)}
.foot-cta h3 em{color:#D98A5B}

/* ---------- premium detail: subtle paper grain ---------- */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

@media (max-width:1024px){
  .qz-hero-grid{min-height:0}
  .qz-hero-copy{padding:56px 0 44px}
}
@media (max-width:767px){
  .qz-hero h1{font-size:clamp(40px,11vw,58px)}
  .qz-hero-stats{gap:22px;flex-wrap:wrap}
  footer::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  body::after{display:none}
  .prod .img img{transition:none}
}

/* ---------- script-specific Noto stacks (ar / ja / ko) ---------- */
html[lang="ar"] body,html[lang="ar"] p,html[lang="ar"] li,html[lang="ar"] .btn,html[lang="ar"] .nav-link,html[lang="ar"] input,html[lang="ar"] select,html[lang="ar"] textarea,html[lang="ar"] .announce,html[lang="ar"] .topbar-link,html[lang="ar"] .lang-trigger,html[lang="ar"] .foot-links a,html[lang="ar"] .foot-contact a,html[lang="ar"] .qz-kicker,html[lang="ar"] .qz-index,html[lang="ar"] .faq-q,html[lang="ar"] .prod .meta,html[lang="ar"] .prod .price{font-family:"Noto Naskh Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif}
html[lang="ar"] body{line-height:1.9}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] .prod .name,html[lang="ar"] blockquote{font-family:"Noto Naskh Arabic","Geeza Pro",serif;font-weight:600}
html[lang="ar"] .btn,html[lang="ar"] .nav-link,html[lang="ar"] .announce,html[lang="ar"] .qz-kicker,html[lang="ar"] .qz-index,html[lang="ar"] .foot-h,html[lang="ar"] .qz-hero-meta,html[lang="ar"] .prod .meta,html[lang="ar"] .prod .price,html[lang="ar"] .qz-hero-stats .l{letter-spacing:0}
html[lang="ar"] .qz-hero-art{border-left:0;border-right:1px solid rgba(246,245,239,.16)}
html[lang="ar"] .qz-hero-art::before{left:auto;right:22px}
html[lang="ar"] .qz-hero-copy{padding-right:0;padding-left:clamp(24px,4vw,64px)}

html[lang="ja"] body,html[lang="ja"] p,html[lang="ja"] li,html[lang="ja"] .btn,html[lang="ja"] .nav-link,html[lang="ja"] input,html[lang="ja"] select,html[lang="ja"] textarea,html[lang="ja"] .announce,html[lang="ja"] .topbar-link,html[lang="ja"] .lang-trigger,html[lang="ja"] .foot-links a,html[lang="ja"] .foot-contact a,html[lang="ja"] .qz-kicker,html[lang="ja"] .qz-index,html[lang="ja"] .faq-q{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif}
html[lang="ja"] body{line-height:1.85}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4,html[lang="ja"] .prod .name,html[lang="ja"] blockquote{font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;line-height:1.3}

html[lang="ko"] body,html[lang="ko"] p,html[lang="ko"] li,html[lang="ko"] .btn,html[lang="ko"] .nav-link,html[lang="ko"] input,html[lang="ko"] select,html[lang="ko"] textarea,html[lang="ko"] .announce,html[lang="ko"] .topbar-link,html[lang="ko"] .lang-trigger,html[lang="ko"] .foot-links a,html[lang="ko"] .foot-contact a,html[lang="ko"] .qz-kicker,html[lang="ko"] .qz-index,html[lang="ko"] .faq-q{font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html[lang="ko"] body{line-height:1.8}
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] h4,html[lang="ko"] .prod .name,html[lang="ko"] blockquote{font-family:"Noto Serif KR","Nanum Myeongjo",serif;font-weight:600;line-height:1.35}