/* Chung Ngai shared UX layer — 2026-11-09. Loaded after each page's inline styles. */
:root{--cn-gold-text:#8a6b38;--cn-focus:#8a6b38;}

/* legibility */
body{font-size:16.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
p,li,td,th,dd,figcaption,address,label,input,textarea,select,button{font-weight:400;}
.k,.crumb a,.sku{color:var(--cn-gold-text);}
.first .k,.savoir .k,.cta-dark .k,.cta .k,footer .k{color:#d8c296;}
.crumb{font-size:12px;}
header nav a{font-size:12px;opacity:1;}
header .logo span{opacity:.85;}
footer .copyright{opacity:.8;font-size:11px;}
footer .ftag{opacity:.85;}
::selection{background:#e9d7b2;color:#1c1b18;}

/* keyboard focus + skip link */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cn-focus);outline-offset:3px;}
.cn-skip{position:absolute;left:-9999px;top:0;z-index:200;background:#0e0d0b;color:#f4efe6;padding:12px 20px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;}
.cn-skip:focus{left:12px;top:12px;}
main{display:block;}
[id]{scroll-margin-top:120px;}

/* header: quote button + burger */
header nav a.cn-quote{border:1px solid var(--champagne);padding:7px 16px 6px;letter-spacing:.2em;transition:.3s;}
header nav a.cn-quote:hover{background:var(--champagne);color:#0e0d0b;border-bottom-color:var(--champagne);}
header nav{align-items:center;}
.cn-burger{display:none;background:none;border:0;color:inherit;width:44px;height:44px;cursor:pointer;position:relative;flex:none;}
.cn-burger span,.cn-burger span:before,.cn-burger span:after{content:"";position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;transition:.25s;}
.cn-burger span{top:21px;}
.cn-burger span:before{left:0;top:-7px;}
.cn-burger span:after{left:0;top:7px;}
header.cn-open .cn-burger span{background:transparent;}
header.cn-open .cn-burger span:before{top:0;transform:rotate(45deg);}
header.cn-open .cn-burger span:after{top:0;transform:rotate(-45deg);}
@media (min-width:901px) and (max-width:1180px){header nav{gap:22px;}header nav a{letter-spacing:.2em;}}

@media (max-width:900px){
  html.cn-js header .h-in{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:8px 10px 8px 18px;}
  html.cn-js header .logo b{font-size:21px;letter-spacing:.26em;padding-left:0;}
  html.cn-js header .logo span{font-size:8px;letter-spacing:.34em;padding-left:0;}
  html.cn-js .cn-burger{display:block;}
  html.cn-js header nav{display:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;row-gap:0;column-gap:0;padding:0 18px 18px;max-height:calc(100vh - 70px);overflow:auto;}
  html.cn-js header.cn-open nav{display:flex;}
  html.cn-js header nav a{font-size:13px;letter-spacing:.22em;padding:15px 2px;border-bottom:1px solid rgba(128,120,104,.25);white-space:normal;}
  html.cn-js header nav a.cn-quote{margin-top:16px;text-align:center;border:1px solid var(--champagne);padding:14px;}
  html.cn-js header.cn-open{background:rgba(253,252,250,.98);color:var(--ink,#1c1b18);backdrop-filter:blur(10px);}
  [id]{scroll-margin-top:80px;}
}

/* motion: content never stays hidden */
.fade{transition:opacity .7s ease,transform .7s ease;transform:translateY(14px);}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .fade{opacity:1!important;transform:none!important;transition:none!important;}
  .first img.bg{animation:none!important;transform:none!important;}
  *{transition-duration:.01ms!important;}
}

/* guide + product article polish */
figure.hero img{height:auto;}
article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
article table td,article table th{min-width:140px;}
article p,article li{max-width:74ch;}
.faq .q{border-bottom:1px solid var(--line);padding:22px 0;}
.faq .q:last-child{border-bottom:0;}
.faq .q h3{font-size:22px;}
.related a{border-radius:1px;}
.cta a.btn,.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;}
img{height:auto;}

/* footer extras */
footer nav{flex-wrap:wrap;row-gap:12px;}
footer nav a:hover,footer .mail a:hover{color:#e9d7b2;}

/* mobile quote bar */
.cn-bar{display:none;}
@media (max-width:760px){
  .cn-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(14,13,11,.96);backdrop-filter:blur(8px);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;transform:translateY(110%);transition:transform .35s ease;}
  .cn-bar.cn-show{transform:none;}
  .cn-bar a{flex:1;text-align:center;text-decoration:none;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:14px 8px;border:1px solid var(--champagne);color:#f4efe6;}
  .cn-bar a.fill{background:var(--champagne);color:#0e0d0b;}
  html:has(.cn-bar) footer{padding-bottom:96px;}
  body{font-size:16px;}
  .wrap{padding-left:20px;padding-right:20px;}
  .first{min-height:560px;}
}
@media print{header,.cn-bar,.cn-skip{display:none!important;}.fade{opacity:1!important;transform:none!important;}}

/* home: keyword line sits inside the H1 but keeps the small-caps label look */
.first h1 .cn-h1k{font-family:'Jost',sans-serif;font-weight:400;font-size:11px;line-height:1.85;letter-spacing:.42em;text-transform:uppercase;color:#d8c296;margin-bottom:26px;display:block;}

/* home: buyer questions */
.cn-faq{background:var(--ivory);padding:96px 0;border-top:1px solid var(--line);}
.cn-faq .wrap{max-width:1040px;}
.cn-faq .k{text-align:center;}
.cn-faq h2{text-align:center;font-size:clamp(28px,3.4vw,44px);margin-top:18px;}
.cn-faq .qs{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:48px;}
.cn-faq .q{border-top:1px solid var(--line);padding:26px 0 28px;}
.cn-faq .q h3{font-size:23px;line-height:1.3;}
.cn-faq .q p{margin-top:12px;color:#33302b;font-size:15.5px;line-height:1.8;}
.cn-faq .more{display:block;margin-top:12px;}
.cn-faq .more a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--cn-gold-text);border-bottom:1px solid var(--champagne);padding-bottom:3px;margin-right:18px;white-space:nowrap;}
.cn-faq .more a:hover{color:var(--ink);}
@media (max-width:820px){.cn-faq{padding:64px 0;}.cn-faq .qs{grid-template-columns:1fr;}}