/* block 3b0f5c1b52 */
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNJfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNIfJ7QwOk1Fig.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/publicsans/v21/ijwRs572Xtc6ZYQws9YVwnNGfJ7QwOk1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIQzD-0qpwxpaWvjeD0X88SAOeauXk-oAGIyY0Wfw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIQzD-0qpwxpaWvjeD0X88SAOeauXA-oAGIyY0Wfw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIQzD-0qpwxpaWvjeD0X88SAOeauXc-oAGIyY0Wfw.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIQzD-0qpwxpaWvjeD0X88SAOeauXs-oAGIyY0Wfw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIQzD-0qpwxpaWvjeD0X88SAOeauXo-oAGIyY0Wfw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIQzD-0qpwxpaWvjeD0X88SAOeauXQ-oAGIyY0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIXzD-0qpwxpaWvjeD0X88SAOeasasatSGqxKcsdrOPbQ.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIXzD-0qpwxpaWvjeD0X88SAOeasasatSiqxKcsdrOPbQ.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIXzD-0qpwxpaWvjeD0X88SAOeasasatS-qxKcsdrOPbQ.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIXzD-0qpwxpaWvjeD0X88SAOeasasatSOqxKcsdrOPbQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIXzD-0qpwxpaWvjeD0X88SAOeasasatSKqxKcsdrOPbQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sourceserifpro/v18/neIXzD-0qpwxpaWvjeD0X88SAOeasasatSyqxKcsdrM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




 
/* block 1d09b6478f */
 img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */ 
/* block 65fd3ed63e */
 img.wp-smiley, img.emoji {
 display: inline !important;
 border: none !important;
 box-shadow: none !important;
 height: 1em !important;
 width: 1em !important;
 margin: 0 0.07em !important;
 vertical-align: -0.1em !important;
 background: none !important;
 padding: 0 !important;
 }
/*# sourceURL=wp-emoji-styles-inline-css */ 
/* block 87fa2181a3 */
 /*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
/*# sourceURL=/wp-includes/css/classic-themes.min.css */ 
/* block 16929eb481 */
 .ai-summarization-summary{--ai-summary-border-color:#1d2327;--ai-summary-background-color:rgba(29,35,39,.04);background-color:var(--ai-summary-background-color);border-inline-start:4px solid var(--ai-summary-border-color);padding:1em 1.25em}.ai-summarization-summary>:last-child{margin-bottom:0}.ai-summarization-plugin-container .components-button.ai-summarization-plugin-button{justify-content:center;width:100%}.ai-summarization-plugin-container .description{color:#757575}.block-editor-block-popover .ai-summarization-block-controls-button{height:46px;margin-top:1px}
/*# sourceURL=https://www.masterseanchan.com/wp-content/plugins/ai/build-scripts/experiments/summarization.css */ 
/* block 7349e64496 */
 .woocommerce form .form-row .required { visibility: visible; }
/*# sourceURL=woocommerce-inline-inline-css */ 
/* block 330f304f4c */
 body .tox.tox-silver-sink.tox-tinymce-aux, body .tox.tox-tinymce-aux, body .tox-shadowhost { z-index: 10001; }
/*# sourceURL=bricks-frontend-inline-css */ 
/* block faaa0b7c62 */
 .widget_wpcategorieswidget ul.children{display:none;} .widget_wp_categories_widget{background:#fff; position:relative;}.widget_wp_categories_widget h2,.widget_wpcategorieswidget h2{color:#4a5f6d;font-size:20px;font-weight:400;margin:0 0 25px;line-height:24px;text-transform:uppercase}.widget_wp_categories_widget ul li,.widget_wpcategorieswidget ul li{font-size: 16px; margin: 0px; border-bottom: 1px dashed #f0f0f0; position: relative; list-style-type: none; line-height: 35px;}.widget_wp_categories_widget ul li:last-child,.widget_wpcategorieswidget ul li:last-child{border:none;}.widget_wp_categories_widget ul li a,.widget_wpcategorieswidget ul li a{display:inline-block;color:#007acc;transition:all .5s ease;-webkit-transition:all .5s ease;-ms-transition:all .5s ease;-moz-transition:all .5s ease;text-decoration:none;}.widget_wp_categories_widget ul li a:hover,.widget_wp_categories_widget ul li.active-cat a,.widget_wp_categories_widget ul li.active-cat span.post-count,.widget_wpcategorieswidget ul li a:hover,.widget_wpcategorieswidget ul li.active-cat a,.widget_wpcategorieswidget ul li.active-cat span.post-count{color:#ee546c}.widget_wp_categories_widget ul li span.post-count,.widget_wpcategorieswidget ul li span.post-count{height: 30px; min-width: 35px; text-align: center; background: #fff; color: #605f5f; border-radius: 5px; box-shadow: inset 2px 1px 3px rgba(0, 122, 204,.1); top: 0px; float: right; margin-top: 2px;}li.cat-item.cat-have-child > span.post-count{float:inherit;}li.cat-item.cat-item-7.cat-have-child { background: #f8f9fa; }li.cat-item.cat-have-child > span.post-count:before { content: "("; }li.cat-item.cat-have-child > span.post-count:after { content: ")"; }.cat-have-child.open-m-menu ul.children li { border-top: 1px solid #d8d8d8;border-bottom:none;}li.cat-item.cat-have-child:after{ position: absolute; right: 8px; top: 8px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QA/wD/AP+gvaeTAAAAoklEQVQ4je3PzQpBURSG4WfknztxGS6BKOIaDQwkSXJTnI7J2rXbhSND3lqTtb/19m3+NGWANVof3LTiZpAWXVxQY4t2A0k7snXcdmGMKpY1dui8kHQik/JVOMAC9+zxlFfO6GFfSDZlaI5bFjpjWEgOhWT9rHYpu2CEPo7Z/v5KklgW37zG5JLlO0liVjTLJaumkmeyj5qUTEP2lSQxiflVHtR5PTMAQTkfAAAAAElFTkSuQmCC); content: ""; width: 18px; height: 18px;transform: rotate(270deg);}ul.children li.cat-item.cat-have-child:after{content:"";background-image: none;}.cat-have-child ul.children {display: none; z-index: 9; width: auto; position: relative; margin: 0px; padding: 0px; margin-top: 0px; padding-top: 10px; padding-bottom: 10px; list-style: none; text-align: start; background:  #f8f9fa; padding-inline-start: 5px;}.widget_wp_categories_widget ul li ul.children li,.widget_wpcategorieswidget ul li ul.children li { border-bottom: 1px solid #fff; padding-inline-end: 5px; }.cat-have-child.open-m-menu ul.children{display:block;}li.cat-item.cat-have-child.open-m-menu:after{transform: rotate(0deg);}.widget_wp_categories_widget > li.product_cat,.widget_wpcategorieswidget > li.product_cat {list-style: none;}.widget_wp_categories_widget > ul,.widget_wpcategorieswidget > ul {padding: 0px;}.widget_wp_categories_widget > ul li ul ,.widget_wpcategorieswidget > ul li ul {padding-inline-start: 15px;} .wcwpro-list{padding: 0 15px;}
/*# sourceURL=wcw-inlinecss-inline-css */ 
/* block c93c9ce403 */
 html {scroll-behavior: smooth}:root {}:root {--bricks-color-grey-100: #f5f5f5;--bricks-color-grey-300: #e0e0e0;--bricks-color-grey-500: #9e9e9e;--bricks-color-grey-700: #616161;--bricks-color-grey-800: #424242;--bricks-color-grey-900: #212121;--bricks-color-yellow: #ffeb3b;--bricks-color-amber: #ffc107;--bricks-color-orange: #ff9800;--bricks-color-deep-orange: #ff5722;--bricks-color-red: #f44336;--bricks-color-purple: #9c27b0;--bricks-color-blue: #2196f3;--bricks-color-light-blue: #03a9f4;--bricks-color-sky-blue: #81D4FA;--bricks-color-green: #4caf50;--bricks-color-light-green: #8bc34a;--bricks-color-lime: #cddc39;}  :root { --msc-header-h: 80px; }  :root { --msc-deep-brown: #3B2F26; --msc-gold: #D6AD60; --msc-gold-light: #E4C580; --msc-gold-faint: rgba(214, 173, 96, 0.12); --msc-copper: #B26E3C; --msc-taupe: #A8957A; --msc-cream: #EFE4C8; --msc-cream-light: #F5EED8; --msc-cream-white: #FAF6ED; --msc-warm-white: #FDFAF3;  --msc-brown-medium: #5C4A3A; --msc-brown-light: #7D6B59; --msc-brown-faint: #9E8E7D;  --msc-shadow-soft: rgba(59, 47, 38, 0.06); --msc-shadow-medium: rgba(59, 47, 38, 0.12); --msc-border-light: rgba(168, 149, 122, 0.25);  --msc-font-heading: 'Playfair Display', Georgia, serif; --msc-font-body: 'Public Sans', sans-serif; --msc-font-accent: 'Jost', sans-serif; --msc-font-display: 'Cormorant Garamond', Georgia, serif;  --msc-dark-brown: #3B2F26; --msc-dark: #3B2F26; --msc-olive: #D6AD60; }   h1, .msc-h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) !important; line-height: 1.2 !important; } h2, .msc-h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem) !important; line-height: 1.25 !important; } h3, .msc-h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem) !important; line-height: 1.3 !important; } h4, .msc-h4 { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important; line-height: 1.3 !important; } h5, .msc-h5 { font-size: 1.1875rem !important; line-height: 1.3 !important; } h6, .msc-h6 { font-size: 1.0625rem !important; line-height: 1.3 !important; }   html { font-size: 17px !important; } body, p, li, td, th, dd, dt, label, span, div, a, .msc-body, .msc-text { line-height: 1.6 !important; }  .brxe-text p, .brxe-post-content p, .entry-content p, .sp-content p { max-width: 65ch; }   .msc-nav-container { font-size: 16px !important; line-height: normal !important; } .msc-nav-container *, #msc-mobile-menu, #msc-mobile-menu *, #msc-search-bar, #msc-search-bar * { font-size: inherit !important; line-height: inherit !important; }  .msc-label, .msc-eyebrow { font-family: var(--msc-font-accent); font-size: 0.6875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.25em; text-transform: uppercase; color: var(--msc-copper); } .msc-btn-text { font-family: var(--msc-font-body); font-size: 0.75rem; font-weight: 600; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; } .msc-caption { font-family: var(--msc-font-body); font-size: 0.75rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; color: var(--msc-brown-faint); }  .msc-text-over-image { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .msc-text-over-image-light { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }  .msc-grain { position: absolute; inset: 0; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E"); }  @keyframes mscFadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
/*# sourceURL=bricks-frontend-inline-inline-css */ 
/* block 345c990d7a */
.woocommerce-product-gallery{ opacity: 1 !important; }
/* block 842f5d1e39 */
 /* ── Shared brand tokens (fall back to global --msc-* / hex) ── */
.msc-tqc, .msc-tq-postcta {
 --tqf-deep: var(--msc-deep-brown, #3B2F26);
 --tqf-brown: #5C4A3A;
 --tqf-gold: var(--msc-gold, #D6AD60);
 --tqf-gold-light: #E4C580;
 --tqf-copper: var(--msc-copper, #B26E3C);
 --tqf-cream: var(--msc-cream, #EFE4C8);
 --tqf-warm-white: #FDFAF3;
 --tqf-border: rgba(168,149,122,0.28);
 font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 box-sizing: border-box;
}
.msc-tqc *, .msc-tq-postcta * { box-sizing: border-box; }
/* ══ End-of-post CTA ══ */
.msc-tq-postcta {
 display: block; clear: both;
 margin: 40px 0 8px;
}
.msc-tq-postcta-inner {
 position: relative; overflow: hidden;
 display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
 background: linear-gradient(150deg, var(--tqf-warm-white), var(--tqf-cream));
 border: 1px solid var(--tqf-border);
 border-radius: 14px;
 padding: 26px 28px;
 box-shadow: 0 10px 30px rgba(59,47,38,0.10);
}
.msc-tq-postcta-inner::before {
 content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
 background: linear-gradient(90deg, var(--tqf-gold) 0%, var(--tqf-gold-light) 40%, var(--tqf-copper) 80%, var(--tqf-gold) 100%);
}
.msc-tq-postcta-logo { flex: 0 0 64px; width: 64px; height: 64px; }
.msc-tq-postcta-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(59,47,38,0.24)); }
.msc-tq-postcta-copy { flex: 1 1 260px; min-width: 200px; }
.msc-tq-postcta-eyebrow {
 display: block; font-family: 'Jost', sans-serif;
 font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
 color: var(--tqf-copper); margin-bottom: 6px;
}
.msc-tq-postcta-title {
 font-family: 'Playfair Display', Georgia, serif; font-weight: 400;
 font-size: 1.5rem; color: var(--tqf-deep); margin: 0 0 8px; line-height: 1.2;
}
.msc-tq-postcta-sub { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--tqf-brown); }
.msc-tq-postcta-btn {
 flex: 0 0 auto; align-self: center; text-decoration: none; white-space: nowrap;
 background: var(--tqf-deep); color: var(--tqf-warm-white);
 font-family: 'Jost', sans-serif; font-size: 0.78rem; font-weight: 600;
 letter-spacing: 0.14em; text-transform: uppercase;
 padding: 14px 26px; border: 1px solid var(--tqf-deep); border-radius: 4px;
 transition: background .3s ease, color .3s ease, transform .22s ease, box-shadow .3s ease;
}
.msc-tq-postcta-btn:hover { background: var(--tqf-gold); color: var(--tqf-deep); border-color: var(--tqf-gold); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(214,173,96,0.34); }
@media (max-width: 600px) {
 .msc-tq-postcta-inner { padding: 22px 20px; gap: 16px; }
 .msc-tq-postcta-btn { width: 100%; text-align: center; }
} 
/* block 5155ee2adf */
div.nsl-container[data-align="left"] {
 text-align: start;
}
div.nsl-container[data-align="center"] {
 text-align: center;
}
div.nsl-container[data-align="right"] {
 text-align: end;
}  div.nsl-container div.nsl-container-buttons a[data-plugin="nsl"] {
 text-decoration: none;
 box-shadow: none;
 border: 0;
}
div.nsl-container .nsl-container-buttons {
 display: flex;
 padding: 5px 0;
}
div.nsl-container.nsl-container-block .nsl-container-buttons {
 display: inline-grid;
 grid-template-columns: minmax(145px, auto);
}
div.nsl-container-block-fullwidth .nsl-container-buttons {
 flex-flow: column;
 align-items: center;
}
div.nsl-container-block-fullwidth .nsl-container-buttons a,
div.nsl-container-block .nsl-container-buttons a {
 flex: 1 1 auto;
 display: block;
 margin: 5px 0;
 width: 100%;
}
div.nsl-container-inline {
 margin: -5px;
 text-align: start;
}
div.nsl-container-inline .nsl-container-buttons {
 justify-content: center;
 flex-wrap: wrap;
}
div.nsl-container-inline .nsl-container-buttons a {
 margin: 5px;
 display: inline-block;
}
div.nsl-container-grid .nsl-container-buttons {
 flex-flow: row;
 align-items: center;
 flex-wrap: wrap;
}
div.nsl-container-grid .nsl-container-buttons a {
 flex: 1 1 auto;
 display: block;
 margin: 5px;
 max-width: 280px;
 width: 100%;
}
@media only screen and (min-width: 650px) {
 div.nsl-container-grid .nsl-container-buttons a {
 width: auto;
 }
}
div.nsl-container .nsl-button {
 cursor: pointer;
 vertical-align: top;
 border-radius: 4px;
}
div.nsl-container .nsl-button-default {
 color: #fff;
 display: flex;
}
div.nsl-container .nsl-button-icon {
 display: inline-block;
}
div.nsl-container .nsl-button-svg-container {
 flex: 0 0 auto;
 padding: 8px;
 display: flex;
 align-items: center;
}
div.nsl-container svg {
 height: 24px;
 width: 24px;
 vertical-align: top;
}
div.nsl-container .nsl-button-default div.nsl-button-label-container {
 margin: 0 24px 0 12px;
 padding: 10px 0;
 font-family: Helvetica, Arial, sans-serif;
 font-size: 16px;
 line-height: 20px;
 letter-spacing: .25px;
 overflow: hidden;
 text-align: center;
 text-overflow: clip;
 white-space: nowrap;
 flex: 1 1 auto;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-transform: none;
 display: inline-block;
}
div.nsl-container .nsl-button-google[data-skin="light"] {
 box-shadow: inset 0 0 0 1px #747775;
 color: #1f1f1f;
}
div.nsl-container .nsl-button-google[data-skin="dark"] {
 box-shadow: inset 0 0 0 1px #8E918F;
 color: #E3E3E3;
}
div.nsl-container .nsl-button-google[data-skin="neutral"] {
 color: #1F1F1F;
}
div.nsl-container .nsl-button-google div.nsl-button-label-container {
 font-family: "Roboto Medium", Roboto, Helvetica, Arial, sans-serif;
}
div.nsl-container .nsl-button-apple .nsl-button-svg-container {
 padding: 0 6px;
}
div.nsl-container .nsl-button-apple .nsl-button-svg-container svg {
 height: 40px;
 width: auto;
}
div.nsl-container .nsl-button-apple[data-skin="light"] {
 color: #000;
 box-shadow: 0 0 0 1px #000;
}
div.nsl-container .nsl-button-facebook[data-skin="white"] {
 color: #000;
 box-shadow: inset 0 0 0 1px #000;
}
div.nsl-container .nsl-button-facebook[data-skin="light"] {
 color: #1877F2;
 box-shadow: inset 0 0 0 1px #1877F2;
}
div.nsl-container .nsl-button-spotify[data-skin="white"] {
 color: #191414;
 box-shadow: inset 0 0 0 1px #191414;
}
div.nsl-container .nsl-button-apple div.nsl-button-label-container {
 font-size: 17px;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
div.nsl-container .nsl-button-slack div.nsl-button-label-container {
 font-size: 17px;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
div.nsl-container .nsl-button-slack[data-skin="light"] {
 color: #000000;
 box-shadow: inset 0 0 0 1px #DDDDDD;
}
div.nsl-container .nsl-button-tiktok[data-skin="light"] {
 color: #161823;
 box-shadow: 0 0 0 1px rgba(22, 24, 35, 0.12);
}  div.nsl-container .nsl-button-kakao {
 color: rgba(0, 0, 0, 0.85);
}
.nsl-clear {
 clear: both;
}
.nsl-container {
 clear: both;
}
.nsl-disabled-provider .nsl-button {
 filter: grayscale(1);
 opacity: 0.8;
}
/*Button align start*/
div.nsl-container-inline[data-align="left"] .nsl-container-buttons {
 justify-content: flex-start;
}
div.nsl-container-inline[data-align="center"] .nsl-container-buttons {
 justify-content: center;
}
div.nsl-container-inline[data-align="right"] .nsl-container-buttons {
 justify-content: flex-end;
}  div.nsl-container-grid[data-align="left"] .nsl-container-buttons {
 justify-content: flex-start;
}
div.nsl-container-grid[data-align="center"] .nsl-container-buttons {
 justify-content: center;
}
div.nsl-container-grid[data-align="right"] .nsl-container-buttons {
 justify-content: flex-end;
}
div.nsl-container-grid[data-align="space-around"] .nsl-container-buttons {
 justify-content: space-around;
}
div.nsl-container-grid[data-align="space-between"] .nsl-container-buttons {
 justify-content: space-between;
}
/* Button align end*/
/* Redirect */
#nsl-redirect-overlay {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 position: fixed;
 z-index: 1000000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 backdrop-filter: blur(1px);
 background-color: RGBA(0, 0, 0, .32);;
}
#nsl-redirect-overlay-container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background-color: white;
 padding: 30px;
 border-radius: 10px;
}
#nsl-redirect-overlay-spinner {
 content: '';
 display: block;
 margin: 20px;
 border: 9px solid RGBA(0, 0, 0, .6);
 border-top: 9px solid #fff;
 border-radius: 50%;
 box-shadow: inset 0 0 0 1px RGBA(0, 0, 0, .6), 0 0 0 1px RGBA(0, 0, 0, .6);
 width: 40px;
 height: 40px;
 animation: nsl-loader-spin 2s linear infinite;
}
@keyframes nsl-loader-spin {
 0% {
 transform: rotate(0deg)
 }
 to {
 transform: rotate(360deg)
 }
}
#nsl-redirect-overlay-title {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 font-size: 18px;
 font-weight: bold;
 color: #3C434A;
}
#nsl-redirect-overlay-text {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 text-align: center;
 font-size: 14px;
 color: #3C434A;
}
/* Redirect END*/
/* block eaad2f43dc */
/* Notice fallback */
#nsl-notices-fallback {
 position: fixed;
 right: 10px;
 top: 10px;
 z-index: 10000;
}
.admin-bar #nsl-notices-fallback {
 top: 42px;
}
#nsl-notices-fallback > div {
 position: relative;
 background: #fff;
 border-inline-start: 4px solid #fff;
 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
 margin: 5px 15px 2px;
 padding: 1px 20px;
}
#nsl-notices-fallback > div.error {
 display: block;
 border-inline-start-color: #dc3232;
}
#nsl-notices-fallback > div.updated {
 display: block;
 border-inline-start-color: #46b450;
}
#nsl-notices-fallback p {
 margin: .5em 0;
 padding: 2px;
}
#nsl-notices-fallback > div:after {
 position: absolute;
 right: 5px;
 top: 5px;
 content: '\00d7';
 display: block;
 height: 16px;
 width: 16px;
 line-height: 16px;
 text-align: center;
 font-size: 20px;
 cursor: pointer;
}
/* block 33c8db994a */
 /* ── Global CSS isolation ── */
#msc-navbar,#msc-mobile-menu,#msc-panel-overlay,#msc-skip-link{
 all:initial;
 box-sizing:border-box;
}
#msc-navbar *:not(svg):not(svg *),#msc-navbar *::before,#msc-navbar *::after,
#msc-mobile-menu *:not(svg):not(svg *),#msc-mobile-menu *::before,#msc-mobile-menu *::after{
 all:unset;
 box-sizing:border-box;
}
#msc-navbar,#msc-mobile-menu,#msc-panel-overlay{
 --msc-dark-brown:#3B2F26;--msc-brown-mid:#5C4A3A;--msc-gold:#D6AD60;
 --msc-copper:#B26E3C;--msc-taupe:#A8957A;--msc-cream:#EFE4C8;
 --msc-cream-light:#FAF6EE;--msc-cream-border:#DDD0B0;
 --msc-font-heading:'Playfair Display',Georgia,serif;
 --msc-font-sub:'Source Sans Pro',sans-serif;
 --msc-font-body:'Source Serif Pro',Georgia,serif;
 --msc-nav-height:5.125rem;
 --msc-ease:0.28s cubic-bezier(0.4,0,0.2,1);
}
/* ── Body offset for fixed navbar ──
 * Pinned to var(--msc-nav-height) (default state) so the offset is
 * deterministic from the first paint. Previously this used
 * var(--msc-nav-actual-height, …) which was set by JS in the footer
 * AFTER the page had painted, causing two layout-shift events:
 *   (1) sub-pixel rem-vs-px drift on every page load
 *   (2) a ~16 px body content jump every time the .msc-scrolled class
 *       caused the navbar to shrink from 5.125rem to 4.125rem
 * Since the navbar is position:fixed, content under it is offscreen
 * once scrolled past the navbar height, so keeping the body padding at
 * the *default* navbar height is correct: no gap when at the top
 * (where the navbar is also at default height), no shift when scrolled.
 */
body{
 padding-top: var(--msc-nav-height) !important;
}
/* ── Bricks Builder Compatibility ── */
#brx-header, .brxe-header, header.bricks-header, [data-brx-component="header"] {
 display: none !important;
}
body:has(#brx-content){
 padding-top: 0 !important;
}
#brx-content {
 padding-top: var(--msc-nav-height) !important;
}
#msc-navbar{
 position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
 width:100% !important;z-index:99998 !important;
 height:var(--msc-nav-height) !important;
 background:rgba(250,246,238,0.95) !important;
 backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;
 box-shadow:0 1px 0 rgba(168,149,122,0.3),0 4px 28px rgba(59,47,38,0.06) !important;
 transition:height var(--msc-ease),background var(--msc-ease),box-shadow var(--msc-ease) !important;
 display:flex !important;align-items:center !important;
 margin:0 !important;padding:0 !important;
}
#msc-navbar::after{
 content:'' !important;position:absolute !important;
 bottom:0 !important;left:8% !important;right:8% !important;height:1px !important;
 background:linear-gradient(90deg,transparent,rgba(214,173,96,0.5),transparent) !important;
 pointer-events:none !important;
}
#msc-navbar.msc-scrolled{
 height:4.125rem !important;background:rgba(250,246,238,0.99) !important;
 box-shadow:0 1px 0 rgba(168,149,122,0.35),0 8px 36px rgba(59,47,38,0.09) !important;
}
#msc-navbar .msc-nav-container{
 width:100% !important;padding:0 clamp(1.25rem, 3vw, 3rem) !important;
 display:flex !important;align-items:center !important;
 justify-content:space-between !important;gap:clamp(0.5rem, 1.5vw, 1.5rem) !important;
}
#msc-navbar .msc-logo{
 display:flex !important;align-items:center !important;
 text-decoration:none !important;flex-shrink:1 !important;min-width:0 !important;
 cursor:pointer !important;line-height:0 !important;
}
#msc-navbar .msc-logo-img{
 display:block !important;width:auto !important;
 max-width:clamp(6rem, 9vw, 10rem) !important;height:clamp(2.25rem, 3vw, 3.25rem) !important;
 object-fit:contain !important;object-position:left center !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease) !important;
}
#msc-navbar .msc-logo:hover .msc-logo-img{opacity:0.78 !important;transform:translateY(-1px) !important;}
#msc-navbar.msc-scrolled .msc-logo-img{height:2.625rem !important;}
#msc-navbar .msc-nav-links{
 display:flex !important;align-items:center !important;
 gap:0 !important;margin:0 !important;padding:0 !important;
 flex:1 1 auto !important;justify-content:space-evenly !important;
 min-width:0 !important;
}
#msc-navbar .msc-nav-links li{
 display:block !important;margin:0 !important;padding:0 !important;
 position:relative !important;
 flex-shrink:1 !important;min-width:0 !important;
}
#msc-navbar .msc-nav-links li a{
 display:inline-flex !important;align-items:center !important;gap:5px !important;
 font-family:var(--msc-font-heading) !important;
 font-size:clamp(0.7rem, 0.9vw, 1.05rem) !important;font-weight:700 !important;font-style:italic !important;
 color:var(--msc-brown-mid) !important;
 text-decoration:none !important;letter-spacing:0.03em !important;text-transform:none !important;
 padding:0.5625rem clamp(0.375rem, 0.8vw, 1rem) !important;border-radius:3px !important;
 white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;
 max-width:100% !important;cursor:pointer !important;
 background-image:linear-gradient(var(--msc-copper),var(--msc-copper)) !important;
 background-size:0% 1px !important;background-repeat:no-repeat !important;
 background-position:center bottom 1px !important;
 transition:color var(--msc-ease),background-size var(--msc-ease),background-color var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li a:hover{
 color:var(--msc-copper) !important;
 background-size:70% 1px !important;
 background-color:rgba(178,110,60,0.05) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown>a::before{
 content:'' !important;position:absolute !important;
 bottom:-6px !important;left:0 !important;right:0 !important;
 height:8px !important;background:transparent !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown>a::after{
 content:'' !important;display:inline-block !important;
 width:4px !important;height:4px !important;
 border-inline-end:1.2px solid currentColor !important;
 border-bottom:1.2px solid currentColor !important;
 transform:rotate(45deg) translateY(-2px) !important;
 flex-shrink:0 !important;opacity:0.7 !important;
 transition:transform var(--msc-ease),opacity var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover>a::after{
 transform:rotate(-135deg) translateY(2px) !important;opacity:1 !important;
}
#msc-navbar .msc-dropdown{
 position:absolute !important;top:100% !important;
 left:50% !important;transform:translateX(-50%) translateY(4px) !important;
 background:var(--msc-cream-light) !important;
 border:1px solid var(--msc-cream-border) !important;
 border-top:2px solid var(--msc-gold) !important;
 min-width:15rem !important;
 padding:0.375rem 0 0.5rem !important;margin:0 !important;
 border-radius:0 0 8px 8px !important;
 opacity:0 !important;pointer-events:none !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease) !important;
 box-shadow:0 16px 48px rgba(59,47,38,0.1),0 4px 12px rgba(59,47,38,0.06) !important;
 z-index:99999 !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown{
 opacity:1 !important;pointer-events:all !important;
 transform:translateX(-50%) translateY(0) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open>a::after{
 transform:rotate(-135deg) translateY(2px) !important;opacity:1 !important;
}
#msc-navbar .msc-dropdown li{display:block !important;margin:0 !important;padding:0 !important;}
#msc-navbar .msc-dropdown li+li{border-top:1px solid rgba(168,149,122,0.15) !important;}
#msc-navbar .msc-dropdown li a{
 display:block !important;
 font-family:var(--msc-font-body) !important;font-size:clamp(0.75rem, 0.9vw, 0.95rem) !important;
 font-weight:700 !important;font-style:normal !important;
 color:var(--msc-dark-brown) !important;text-decoration:none !important;
 letter-spacing:0.01em !important;padding:0.625rem 1.375rem !important;
 white-space:nowrap !important;background-image:none !important;cursor:pointer !important;
 transition:background var(--msc-ease),color var(--msc-ease),padding-left var(--msc-ease) !important;
}
#msc-navbar .msc-dropdown li a:hover{
 background:rgba(214,173,96,0.14) !important;
 color:var(--msc-copper) !important;padding-inline-start:1.875rem !important;
}
#msc-navbar .msc-cta{
 display:inline-flex !important;align-items:center !important;
 font-family:var(--msc-font-sub) !important;font-size:clamp(0.65rem, 0.85vw, 0.9rem) !important;
 font-weight:700 !important;letter-spacing:0.15em !important;text-transform:uppercase !important;
 color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
 text-decoration:none !important;padding:clamp(0.5rem, 0.7vw, 0.6875rem) clamp(0.75rem, 1.2vw, 1.375rem) !important;
 border-radius:40px !important;white-space:nowrap !important;flex-shrink:1 !important;
 position:relative !important;overflow:hidden !important;cursor:pointer !important;
 box-shadow:0 2px 14px rgba(59,47,38,0.2) !important;
 transition:color var(--msc-ease),transform var(--msc-ease),box-shadow var(--msc-ease) !important;
}
#msc-navbar .msc-cta::before{
 content:'' !important;position:absolute !important;inset:0 !important;
 background:var(--msc-copper) !important;transform:translateX(-101%) !important;
 border-radius:40px !important;transition:transform var(--msc-ease) !important;
}
#msc-navbar .msc-cta span{position:relative !important;z-index:1 !important;}
#msc-navbar .msc-cta:hover{
 color:var(--msc-cream-light) !important;
 box-shadow:0 6px 28px rgba(178,110,60,0.32) !important;transform:translateY(-1px) !important;
}
#msc-navbar .msc-cta:hover::before{transform:translateX(0) !important;}
/* ── Nav actions (IG + search icons) ── */
#msc-navbar .msc-nav-actions{
 display:flex !important;align-items:center !important;gap:0.25rem !important;
 flex-shrink:0 !important;
}
#msc-navbar .msc-icon-btn{
 display:flex !important;align-items:center !important;justify-content:center !important;
 width:2.125rem !important;height:2.125rem !important;
 border-radius:50% !important;cursor:pointer !important;
 transition:background var(--msc-ease) !important;
}
#msc-navbar .msc-icon-btn:hover{
 background:rgba(178,110,60,0.08) !important;
}
#msc-navbar .msc-icon-btn svg{
 display:block !important;width:1.125rem !important;height:1.125rem !important;flex-shrink:0 !important;
}
#msc-navbar .msc-icon-btn svg,
#msc-navbar .msc-icon-btn svg *{
 stroke:#5C4A3A !important;fill:none !important;
 stroke-width:1.5 !important;stroke-linecap:round !important;stroke-linejoin:round !important;
}
#msc-navbar .msc-icon-btn svg circle[stroke="none"]{
 fill:#5C4A3A !important;stroke:none !important;stroke-width:0 !important;
}
#msc-navbar .msc-icon-btn:hover svg,
#msc-navbar .msc-icon-btn:hover svg *{
 stroke:#B26E3C !important;
}
#msc-navbar .msc-icon-btn:hover svg circle[stroke="none"]{
 fill:#B26E3C !important;stroke:none !important;stroke-width:0 !important;
}
/* ── Search bar ── */
#msc-navbar .msc-search-bar{
 position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
 background:var(--msc-cream-light) !important;
 border-top:1px solid var(--msc-cream-border) !important;
 border-bottom:2px solid var(--msc-gold) !important;
 box-shadow:0 12px 36px rgba(59,47,38,0.1) !important;
 padding:1rem 2.5rem !important;
 display:none !important;z-index:1 !important;
}
#msc-navbar .msc-search-bar.msc-open{display:block !important;}
#msc-navbar .msc-search-form{
 max-width:37.5rem !important;margin:0 auto !important;
 display:flex !important;gap:0.625rem !important;
}
#msc-navbar .msc-search-input{
 flex:1 !important;
 font-family:var(--msc-font-body) !important;font-size:1rem !important;
 color:var(--msc-dark-brown) !important;background:#fff !important;
 border:1px solid var(--msc-cream-border) !important;
 border-radius:6px !important;padding:0.625rem 1rem !important;
 outline:none !important;box-shadow:none !important;
 -webkit-appearance:none !important;
}
#msc-navbar .msc-search-input:focus{
 border-color:var(--msc-copper) !important;
 box-shadow:0 0 0 3px rgba(178,110,60,0.12) !important;
}
#msc-navbar .msc-search-submit{
 font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;
 font-weight:600 !important;letter-spacing:0.1em !important;text-transform:uppercase !important;
 color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
 border:none !important;border-radius:6px !important;
 padding:0.625rem 1.375rem !important;cursor:pointer !important;
 transition:background var(--msc-ease) !important;
}
#msc-navbar .msc-search-submit:hover{background:var(--msc-copper) !important;}
/* ── Mobile menu social ── */
#msc-mobile-menu .msc-mob-social{
 display:flex !important;align-items:center !important;gap:0.75rem !important;
 margin-top:1.25rem !important;padding-top:1rem !important;
 border-top:1px solid rgba(168,149,122,0.2) !important;
}
#msc-mobile-menu .msc-mob-social a{
 display:flex !important;align-items:center !important;gap:0.5rem !important;
 font-family:var(--msc-font-body) !important;font-size:0.9rem !important;
 color:var(--msc-brown-mid) !important;text-decoration:none !important;
 padding:0 !important;cursor:pointer !important;
}
#msc-mobile-menu .msc-mob-social a:hover{color:var(--msc-copper) !important;}
#msc-mobile-menu .msc-mob-social svg{
 display:block !important;width:1.125rem !important;height:1.125rem !important;
}
#msc-mobile-menu .msc-mob-social svg,
#msc-mobile-menu .msc-mob-social svg *{
 stroke:#5C4A3A !important;fill:none !important;
 stroke-width:1.5 !important;stroke-linecap:round !important;stroke-linejoin:round !important;
}
#msc-mobile-menu .msc-mob-social svg circle[stroke="none"]{
 fill:#5C4A3A !important;stroke:none !important;stroke-width:0 !important;
}
#msc-mobile-menu .msc-mob-social a:hover svg,
#msc-mobile-menu .msc-mob-social a:hover svg *{
 stroke:#B26E3C !important;
}
#msc-mobile-menu .msc-mob-social a:hover svg circle[stroke="none"]{
 fill:#B26E3C !important;stroke:none !important;stroke-width:0 !important;
}
#msc-navbar .msc-hamburger{
 display:none !important;flex-direction:column !important;
 justify-content:center !important;gap:5px !important;
 width:2.5rem !important;height:2.5rem !important;
 background:transparent !important;border:1px solid rgba(92,74,58,0.22) !important;
 border-radius:4px !important;cursor:pointer !important;padding:0.5rem !important;
 flex-shrink:0 !important;
 transition:border-color var(--msc-ease),background var(--msc-ease) !important;
}
#msc-navbar .msc-hamburger:hover{
 background:rgba(92,74,58,0.06) !important;border-color:var(--msc-copper) !important;
}
#msc-navbar .msc-hamburger span{
 display:block !important;width:100% !important;height:1.5px !important;
 background:var(--msc-dark-brown) !important;border-radius:2px !important;
 transition:transform var(--msc-ease),opacity var(--msc-ease) !important;
 transform-origin:center !important;
}
#msc-navbar .msc-hamburger.msc-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg) !important;}
#msc-navbar .msc-hamburger.msc-open span:nth-child(2){opacity:0 !important;transform:scaleX(0) !important;}
#msc-navbar .msc-hamburger.msc-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg) !important;}
#msc-panel-overlay{
 position:fixed !important;inset:0 !important;
 background:rgba(59,47,38,0.35) !important;z-index:99996 !important;
 opacity:0 !important;visibility:hidden !important;
 transition:opacity 0.32s cubic-bezier(0.4,0,0.2,1),visibility 0.32s !important;
}
#msc-panel-overlay.msc-panel-open{opacity:1 !important;visibility:visible !important;}
#msc-mobile-menu{
 position:fixed !important;top:0 !important;left:0 !important;
 width:18.75rem !important;max-width:85vw !important;height:100vh !important;
 background:var(--msc-cream-light) !important;
 border-inline-end:1px solid var(--msc-cream-border) !important;
 box-shadow:4px 0 32px rgba(59,47,38,0.14) !important;
 transform:translateX(-100%) !important;
 transition:transform 0.32s cubic-bezier(0.4,0,0.2,1) !important;
 z-index:99997 !important;
 box-sizing:border-box !important;overflow-y:auto !important;overflow-x:hidden !important;
}
#msc-mobile-menu.msc-panel-open{transform:translateX(0) !important;}
#msc-mobile-menu .msc-panel-header{
 display:flex !important;align-items:center !important;
 justify-content:space-between !important;padding:1.25rem 1.5rem 1rem !important;
 border-bottom:1px solid var(--msc-cream-border) !important;
 position:sticky !important;top:0 !important;
 background:var(--msc-cream-light) !important;z-index:1 !important;
}
#msc-mobile-menu .msc-panel-logo{
 font-family:var(--msc-font-heading) !important;font-size:1.05rem !important;
 font-style:italic !important;color:var(--msc-dark-brown) !important;opacity:0.7 !important;
}
#msc-mobile-menu .msc-panel-close{
 width:2rem !important;height:2rem !important;
 display:flex !important;align-items:center !important;justify-content:center !important;
 background:none !important;border:1px solid rgba(92,74,58,0.2) !important;
 border-radius:50% !important;cursor:pointer !important;
 color:var(--msc-dark-brown) !important;font-size:1rem !important;line-height:1 !important;
 flex-shrink:0 !important;
}
#msc-mobile-menu .msc-panel-close:hover{
 background:rgba(92,74,58,0.08) !important;
 border-color:var(--msc-copper) !important;color:var(--msc-copper) !important;
}
#msc-mobile-menu .msc-mobile-inner{display:block !important;padding:1rem 1.5rem 2.5rem !important;}
#msc-mobile-menu ul{display:block !important;margin:0 !important;padding:0 !important;}
#msc-mobile-menu ul li{display:block !important;margin:0 !important;padding:0 !important;}
#msc-mobile-menu ul li a,#msc-mobile-menu .msc-mob-parent{
 display:block !important;
 font-family:var(--msc-font-heading) !important;font-size:1.15rem !important;
 font-weight:400 !important;font-style:italic !important;
 color:var(--msc-dark-brown) !important;text-decoration:none !important;
 letter-spacing:0.02em !important;padding:0.875rem 0 !important;
 border-bottom:1px solid rgba(168,149,122,0.2) !important;
 width:100% !important;text-align:start !important;
 cursor:pointer !important;line-height:1.4 !important;
}
#msc-mobile-menu ul>li:first-child>a,
#msc-mobile-menu ul>li:first-child>.msc-mob-parent-row{
 border-top:1px solid rgba(168,149,122,0.2) !important;
}
#msc-mobile-menu ul li a:hover,
#msc-mobile-menu .msc-mob-parent:hover{color:var(--msc-copper) !important;}
#msc-mobile-menu .msc-mob-parent-row{
 display:flex !important;align-items:center !important;box-sizing:border-box !important;
 justify-content:space-between !important;
 border-bottom:1px solid rgba(168,149,122,0.2) !important;
}
#msc-mobile-menu .msc-mob-parent-row .msc-mob-parent{border-bottom:none !important;flex:1 !important;}
#msc-mobile-menu .msc-mob-arrow{
 width:2.75rem !important;height:2.75rem !important;
 display:flex !important;align-items:center !important;justify-content:center !important;
 flex-shrink:0 !important;cursor:pointer !important;
}
#msc-mobile-menu .msc-mob-arrow svg{
 transition:transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
}
#msc-mobile-menu .msc-mob-arrow.msc-open svg{transform:rotate(180deg);}
#msc-mobile-menu .msc-mob-sub{
 display:block !important;
 max-height:0 !important;
 overflow:hidden !important;
 visibility:hidden !important;
 transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0.35s !important;
 background:rgba(168,149,122,0.07) !important;
 border-radius:0 0 6px 6px !important;margin:0 !important;padding:0 !important;
}
#msc-mobile-menu .msc-mob-sub.msc-open{
 max-height:90rem !important;
 visibility:visible !important;
 transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0s !important;
}
#msc-mobile-menu .msc-mob-sub>li{overflow:hidden !important;}
#msc-mobile-menu .msc-mob-sub li a{
 font-family:var(--msc-font-body) !important;font-size:1rem !important;
 font-weight:400 !important;font-style:normal !important;
 color:var(--msc-brown-mid) !important;padding:0.5625rem 0 0.5625rem 1.25rem !important;
 letter-spacing:0.01em !important;border-top:none !important;
 border-bottom:1px solid rgba(168,149,122,0.12) !important;
}
#msc-mobile-menu .msc-mob-sub li a:hover{color:var(--msc-copper) !important;}
#msc-mobile-menu .msc-mob-cta{
 display:block !important;box-sizing:border-box !important;
 margin-top:1.75rem !important;text-align:center !important;cursor:pointer !important;
 font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;
 font-weight:600 !important;letter-spacing:0.15em !important;text-transform:uppercase !important;
 color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
 text-decoration:none !important;padding:0.875rem 1.25rem !important;
 border-radius:40px !important;
 box-shadow:0 2px 14px rgba(59,47,38,0.18) !important;
}
#msc-mobile-menu .msc-mob-cta:hover{
 background:var(--msc-copper) !important;
}
@media (max-width:960px){
 #msc-navbar .msc-nav-links{display:none !important;}
 #msc-navbar .msc-cta{display:none !important;}
 #msc-navbar .msc-hamburger{display:flex !important;}
}
@media (max-width:480px){
 #msc-navbar .msc-logo-img{height:2.5rem !important;max-width:8.125rem !important;}
 #msc-mobile-menu{width:17.5rem !important;}
 #msc-mobile-menu .msc-mobile-inner{padding:0.875rem 1.25rem 2.25rem !important;}
 #msc-navbar .msc-search-bar{padding:0.75rem 1.25rem !important;}
}
/* ── Skip-to-content link ── */
#msc-skip-link{
 position:fixed !important;top:-100% !important;left:16px !important;
 z-index:99999 !important;
 font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;font-weight:600 !important;
 color:var(--msc-cream-light) !important;background:var(--msc-dark-brown) !important;
 padding:0.625rem 1.25rem !important;border-radius:0 0 6px 6px !important;
 text-decoration:none !important;
 box-shadow:0 4px 16px rgba(59,47,38,0.2) !important;
}
#msc-skip-link:focus{
 top:0 !important;outline:none !important;
}
/* ── Active page indicators ── */
#msc-navbar .msc-nav-links li.msc-current>a{
 color:var(--msc-copper) !important;
 background-size:70% 1px !important;
}
#msc-navbar .msc-nav-links li.msc-current-ancestor>a{
 color:var(--msc-copper) !important;
}
#msc-navbar .msc-dropdown li.msc-current>a{
 color:var(--msc-copper) !important;
 background:rgba(214,173,96,0.14) !important;
 padding-inline-start:1.625rem !important;
}
#msc-mobile-menu li.msc-current>a{
 color:var(--msc-copper) !important;
}
#msc-mobile-menu li.msc-current-ancestor>.msc-mob-parent-row .msc-mob-parent{
 color:var(--msc-copper) !important;
}
/* ── Keyboard focus-visible ── */
#msc-navbar .msc-nav-links li a:focus-visible,
#msc-navbar .msc-cta:focus-visible,
#msc-navbar .msc-logo:focus-visible,
#msc-navbar .msc-icon-btn:focus-visible,
#msc-navbar .msc-search-input:focus-visible,
#msc-navbar .msc-search-submit:focus-visible,
#msc-navbar .msc-hamburger:focus-visible{
 outline:2px solid var(--msc-copper) !important;
 outline-offset:2px !important;
}
#msc-navbar .msc-dropdown li a:focus-visible{
 outline:2px solid var(--msc-copper) !important;
 outline-offset:-2px !important;
}
#msc-mobile-menu a:focus-visible,
#msc-mobile-menu button:focus-visible{
 outline:2px solid var(--msc-copper) !important;
 outline-offset:2px !important;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
 #msc-navbar,#msc-navbar *,#msc-navbar *::before,#msc-navbar *::after,
 #msc-mobile-menu,#msc-mobile-menu *,
 #msc-panel-overlay{
 transition:none !important;animation:none !important;
 }
}
body.admin-bar #msc-navbar{top:32px !important;}
@media screen and (max-width:782px){
 body.admin-bar #msc-navbar{top:46px !important;}
}
/* ── Mega panel ────────────────────────────────────────────────────────────
 * Services and Tools open a full-width panel instead of a narrow column. The
 * panel IS a .msc-dropdown, so the existing controller drives it unchanged:
 * hover, .msc-dropdown-open, Escape, focus-out and click-outside all already
 * bind to .msc-has-dropdown > a[aria-haspopup]. No JS shipped with this.
 *
 * Everything is declared explicitly. #msc-navbar descendants inherit
 * `all:unset`, so display, colour and spacing have no defaults to fall back on.
 * Positioned fixed rather than absolute so the panel spans the viewport
 * regardless of the <li> it hangs from, and because the controller reparents
 * the navbar to <body> on load.
 *
 * ⛔ No backdrop-filter anywhere in here. A full-viewport blur over the advert
 * stack is what hung the phone on tap (#17); the dim alone is the backdrop.
 */
#msc-navbar .msc-dropdown.msc-dropdown--mega{
 position:fixed !important;left:0 !important;right:0 !important;
 top:var(--msc-nav-height) !important;transform:translateY(4px) !important;
 width:auto !important;max-width:none !important;min-width:0 !important;
 display:block !important;
 background:var(--msc-cream-light) !important;
 border-top:1px solid var(--msc-cream-border) !important;
 border-bottom:1px solid var(--msc-cream-border) !important;
 box-shadow:0 14px 34px -18px rgba(59,47,38,0.34) !important;
 padding:2rem clamp(1.25rem,5vw,4rem) 2.25rem !important;
 opacity:0 !important;pointer-events:none !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease) !important;
 z-index:99995 !important;
}
#msc-navbar.msc-scrolled .msc-dropdown.msc-dropdown--mega{ top:4.125rem !important; }
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown--mega{
 opacity:1 !important;pointer-events:all !important;transform:translateY(0) !important;
}

/* ⛔ THE HOVER BRIDGE — without it the rule above is unreachable by a mouse.
 * The panel is pinned to the BOTTOM OF THE BAR (top:var(--msc-nav-height)),
 * while the <li> whose :hover drives it is only as tall as its own label and
 * is vertically centred in that bar. So the panel begins ~21-25px BELOW the
 * element that keeps it open. The cursor crosses that strip on its way down,
 * :hover is lost, and the rule above flips the panel to opacity:0 AND
 * pointer-events:none. Carrying on downwards does NOT recover it: the panel is
 * switched off, not merely fading, so it cannot take the pointer back.
 * Measured on the live site 2026-09-14: a 19px dead strip on the Astro pages,
 * 15.5px on the flat ones. The older bridge, li.msc-has-dropdown>a::before, is
 * 8px tall at bottom:-6px and covers 6px of it — it was sized for the narrow
 * dropdown, which has no gap at all.
 *
 * The height is DERIVED, never a magic number. The list is centred in the bar,
 * so the space beneath the <li> is half of whatever the bar has spare. That
 * lands exact on both delivery paths despite their different root font sizes
 * (25px at 17px root, 21.5px at 16px), and re-derives itself if the bar height
 * or the label font ever change.
 *
 * Matches the narrow dropdown too, deliberately: the <li> carries no class
 * separating the mega items, and :has() would be the only way to reach one.
 * Safe there because that dropdown sits at top:100% with no gap, so the strip
 * overlaps its first item and LOSES the hit test to it — .msc-dropdown carries
 * z-index:99999 against this pseudo-element's auto. Verified by hit test on
 * the live page, not by reasoning about the cascade.
 *
 * Below 960px .msc-nav-links is display:none, so none of this renders on a
 * phone; the mobile menu is a different control entirely.
 */
#msc-navbar .msc-nav-links li.msc-has-dropdown::after{
 content:'' !important;position:absolute !important;
 top:100% !important;left:0 !important;right:0 !important;
 height:calc((var(--msc-nav-height) - 100%) / 2) !important;
 background:transparent !important;
}
#msc-navbar .msc-dropdown--mega>li{
 display:block !important;border-top:0 !important;
 max-width:78rem !important;margin:0 auto !important;
}
#msc-navbar .msc-mega-grid{
 display:grid !important;
 grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
 gap:1.5rem 2rem !important;align-items:start !important;
}
#msc-navbar .msc-mega-col{ display:block !important; }
/* The discipline marker. Han only — every locale's own labels already carry these
 * terms, so the panel needs no new translated string. Decorative to a screen
 * reader (aria-hidden in the markup); the items beneath carry the real names. */
#msc-navbar .msc-mega-han{
 display:block !important;font-family:var(--msc-font-heading) !important;
 font-size:0.8125rem !important;letter-spacing:0.14em !important;
 color:var(--msc-copper) !important;margin:0 0 0.65rem !important;
 padding:0 0 0.5rem !important;
 border-bottom:1px solid rgba(214,173,96,0.38) !important;line-height:1.3 !important;
}
#msc-navbar .msc-mega-col ul{ display:block !important;margin:0 !important;padding:0 !important; }
#msc-navbar .msc-dropdown .msc-mega-col li+li{ border-top:0 !important; }
#msc-navbar .msc-mega-col li{ display:block !important;margin:0 !important;padding:0 !important;border:0 !important; }
#msc-navbar .msc-mega-col li a{
 display:block !important;font-family:var(--msc-font-body) !important;
 font-size:0.875rem !important;line-height:1.45 !important;
 color:var(--msc-dark-brown) !important;text-decoration:none !important;
 padding:0.4rem 0.5rem 0.4rem 0 !important;border-radius:2px !important;
 transition:color var(--msc-ease),padding-left var(--msc-ease) !important;
 white-space:normal !important;overflow-wrap:break-word !important;
 word-break:keep-all !important;line-break:strict !important;
 text-overflow:clip !important;overflow:visible !important;
}
#msc-navbar .msc-mega-col li a:hover{ color:var(--msc-copper) !important;padding-inline-start:0.4rem !important; }
#msc-navbar .msc-mega-col li a:focus-visible{ outline:2px solid var(--msc-copper) !important;outline-offset:2px !important; }
/* Tian Qi, promoted out of the Tools list. The funnel link 8,616 pages do not carry. */
#msc-navbar .msc-mega-feature{
 display:block !important;margin:1.75rem 0 0 !important;padding:1rem 1.25rem !important;
 background:rgba(214,173,96,0.13) !important;
 border:1px solid rgba(214,173,96,0.42) !important;border-radius:3px !important;
}
#msc-navbar .msc-mega-feature a.msc-mega-feature-link{
 display:inline-block !important;font-family:var(--msc-font-heading) !important;
 font-size:1rem !important;color:var(--msc-dark-brown) !important;
 text-decoration:none !important;padding:0 !important;letter-spacing:0.01em !important;
 white-space:normal !important;overflow-wrap:break-word !important;
 word-break:keep-all !important;line-break:strict !important;
 text-overflow:clip !important;overflow:visible !important;
}
#msc-navbar .msc-mega-feature a.msc-mega-feature-link:hover{ color:var(--msc-copper) !important; }
@media (max-width:960px){
 #msc-navbar .msc-dropdown.msc-dropdown--mega{ display:none !important; }
}
@media (prefers-reduced-motion:reduce){
 #msc-navbar .msc-dropdown.msc-dropdown--mega{ transition:none !important; }
 #msc-navbar .msc-mega-col li a{ transition:none !important; }
}
/* ── Mobile: the same discipline markers inside the accordion ───────────── */
#msc-mobile-menu .msc-mob-sub li.msc-mob-han{
 display:block !important;font-family:var(--msc-font-heading) !important;
 font-size:0.75rem !important;letter-spacing:0.14em !important;
 color:var(--msc-copper) !important;
 padding:0.9rem 1.5rem 0.3rem !important;line-height:1.3 !important;
}
#msc-mobile-menu .msc-mob-sub li.msc-mob-han+li a{ padding-top:0.3rem !important; }

/* ── Corrections the frozen capture predates ───────────────────────────────
 * ⛔ EVERYTHING BELOW MUST STAY INSIDE THIS DELIMITED BLOCK.
 * bin/rebuild-nav-flat.mjs slices this file from "── Mega panel" to
 * "block 3b60c1dde1" and appends the result to the inline <style> of all
 * 8,616 flat pages. A nav rule written ANYWHERE ELSE in this file reaches the
 * 2,227 Astro pages and none of the others — 20.5% of the site — which is
 * exactly how each of the four fixes below came to be true on one path only.
 */

/* 1 · The Tian Qi CTA. Moved here, not written here: it used to sit just above
 *     the Mega panel comment, i.e. one line outside the slice, so all 8,616
 *     flat pages carried `class="msc-nav-tianqi-animated"` and not one byte of
 *     what it means. On mobile that left the paid product's funnel link
 *     pixel-identical to "Zi Wei Dou Shu Calculator", because the accordion
 *     copy has no .msc-mega-feature tile around it to fall back on. */
/* ── Tian Qi CTA — periodic shine + resting glow (Sean 2026) ── */
#msc-navbar .msc-dropdown a.msc-nav-tianqi-animated,
#msc-mobile-menu .msc-mob-sub li a.msc-nav-tianqi-animated{
 position:relative !important;
 background-image:linear-gradient(100deg, transparent 40%, rgba(255,246,226,0.9) 50%, transparent 60%),
 linear-gradient(rgba(214,173,96,0.14), rgba(214,173,96,0.14)) !important;
 background-repeat:no-repeat, no-repeat !important;
 background-size:220% 100%, 100% 100% !important;
 background-position:-150% 0, 0 0 !important;
 box-shadow:inset 0 0 0 1px rgba(214,173,96,0.35) !important;
 animation:msc-nav-tianqi-shine 5s ease-in-out infinite !important;
}
#msc-navbar .msc-dropdown a.msc-nav-tianqi-animated::after,
#msc-mobile-menu .msc-mob-sub li a.msc-nav-tianqi-animated::after{
 content:"" !important; position:absolute !important; left:0.9rem !important; right:0.9rem !important; bottom:0.35rem !important;
 height:2px !important; border-radius:2px !important;
 background:linear-gradient(90deg, transparent, var(--msc-gold), var(--msc-copper), var(--msc-gold), transparent) !important;
 opacity:0.85 !important;
 box-shadow:0 0 6px rgba(214,173,96,0.55) !important;
}
@keyframes msc-nav-tianqi-shine{
 0%{ background-position:-150% 0, 0 0; }
 16%{ background-position:150% 0, 0 0; }
 100%{ background-position:150% 0, 0 0; }
}
@media (prefers-reduced-motion:reduce){
 #msc-navbar .msc-dropdown a.msc-nav-tianqi-animated,
 #msc-mobile-menu .msc-mob-sub li a.msc-nav-tianqi-animated{
 animation:none !important; background-image:linear-gradient(rgba(214,173,96,0.14), rgba(214,173,96,0.14)) !important;
 }
}

/* 1b · The same CTA, promoted OUT of the panel. ⚖️ Sean, 2026-09-19: "very prominent … It
 *      shouldn't be hidden in another tab". It was in the bar, but only inside the Tools mega
 *      panel (needs a hover) and inside #msc-mob-sub-2 (ships collapsed). The attribution says
 *      what that cost: 30 days to 2026-09-19, utm_content=nav produced 12 signups against the
 *      popup's 130. The panel copy STAYS as the Tools catalogue entry; these two are the
 *      visible ones, tagged apart (nav_cta / nav_mobile_cta) so the gap can be re-measured.
 *
 * ⛔ A SEPARATE CLASS, deliberately. .msc-nav-tianqi-animated is scoped to .msc-dropdown and
 *    .msc-mob-sub descendants, so it would not match out here — and overloading it would make
 *    the panel copy and the promoted copy impossible to restyle apart.
 *
 * ─── 周天 ORBIT ─────────────────────────────────────────────────────────────────────────
 * ⚖️ Sean chose this on 2026-09-20 from a proof sheet of five, over Breath, Star chart, Seal
 *    and a retimed sweep.
 *
 * 🚨 WHAT IT REPLACES, AND WHY. It shipped with msc-nav-tianqi-shine, which sweeps from 0% to
 *    16% and then holds the same background-position from 16% to 100%: the pill moved for 0.8s
 *    of every 5s and was a static object for the other 84%. Sean asked for it to "be animated"
 *    about a button that already was — he was seeing the 84%. So the fix is a CONTINUOUS
 *    animation, and test/nav-parity.test.js asserts DWELL rather than presence, because a
 *    presence check passes on the exact CSS that produced the complaint.
 *
 * HOW IT WORKS. An oversized conic-gradient disc spins behind the label and is clipped to the
 * pill by overflow:hidden; ::after masks all but a 2px rim, leaving one bright point running
 * the perimeter. 150% of the width is square, which clears the diagonal at both shipped sizes
 * (101×32 → 152 > 106; 254×55 → 381 > 260), so one rule serves both.
 *
 * 🪤 THE LABEL NEEDS ITS OWN <span>, and this is not cosmetic. Inside a stacking context a
 *    positioned pseudo-element paints ABOVE inline text, so ::after would cover a bare text
 *    node. .msc-cta already wraps its label for the same reason; bin/add-nav-tianqi-cta.mjs
 *    emits the span, and the two ::after rules would hide the label without it.
 *
 * 🪤 background-image:none and background-size:auto are restated on :hover because
 *    .msc-nav-links li a:hover sets background-size:70% 1px for the underline sweep, which
 *    would otherwise resize the pill's own fill. */
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a{
 position:relative !important;isolation:isolate !important;
 font-style:normal !important;letter-spacing:0.06em !important;
 color:var(--msc-cream-light) !important;
 border-radius:40px !important;
 padding:0.5rem clamp(0.55rem, 0.95vw, 1rem) !important;
 box-shadow:0 2px 12px rgba(178,110,60,0.28) !important;
 background-color:var(--msc-copper) !important;
 background-image:none !important;background-size:auto !important;
 animation:none !important;
}
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a::before{
 content:"" !important;position:absolute !important;inset:0 !important;
 border-radius:inherit !important;
 z-index:0 !important;pointer-events:none !important;
 background:conic-gradient(from var(--msc-tq-ang),
 rgba(214,173,96,0.34) 0 62%,
 rgba(214,173,96,0.85) 79%, #FFF6E2 88%, #FFFFFF 91%,
 rgba(214,173,96,0.80) 95%, rgba(214,173,96,0.34) 100%) !important;
 animation:msc-nav-tianqi-orbit 2.6s linear infinite !important;
}
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a::after{
 content:"" !important;position:absolute !important;inset:2px !important;
 border-radius:inherit !important;z-index:1 !important;pointer-events:none !important;
 background:var(--msc-copper) !important;
 transition:background var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a>span{
 position:relative !important;z-index:2 !important;
}
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a:hover{
 color:var(--msc-cream-light) !important;
 background-image:none !important;background-size:auto !important;
 box-shadow:0 6px 24px rgba(178,110,60,0.34) !important;
}
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a:hover::after{
 background:var(--msc-dark-brown) !important;
}

/* The mobile twin, at the very top of the panel — above Home, above every accordion. */
#msc-mobile-menu .msc-mob-tianqi{
 position:relative !important;isolation:isolate !important;
 display:block !important;box-sizing:border-box !important;
 margin:0 0 1.25rem !important;text-align:center !important;cursor:pointer !important;
 font-family:var(--msc-font-sub) !important;font-size:0.85rem !important;
 font-weight:700 !important;letter-spacing:0.14em !important;text-transform:uppercase !important;
 color:var(--msc-cream-light) !important;text-decoration:none !important;
 padding:0.9375rem 1.25rem !important;border-radius:40px !important;
 box-shadow:0 2px 14px rgba(178,110,60,0.26) !important;
 background-color:var(--msc-copper) !important;
 background-image:none !important;background-size:auto !important;
}
#msc-mobile-menu .msc-mob-tianqi::before{
 content:"" !important;position:absolute !important;inset:0 !important;
 border-radius:inherit !important;
 z-index:0 !important;pointer-events:none !important;
 background:conic-gradient(from var(--msc-tq-ang),
 rgba(214,173,96,0.34) 0 62%,
 rgba(214,173,96,0.85) 79%, #FFF6E2 88%, #FFFFFF 91%,
 rgba(214,173,96,0.80) 95%, rgba(214,173,96,0.34) 100%) !important;
 animation:msc-nav-tianqi-orbit 2.6s linear infinite !important;
}
#msc-mobile-menu .msc-mob-tianqi::after{
 content:"" !important;position:absolute !important;inset:2px !important;
 border-radius:inherit !important;z-index:1 !important;pointer-events:none !important;
 background:var(--msc-copper) !important;
 transition:background var(--msc-ease) !important;
}
#msc-mobile-menu .msc-mob-tianqi>span{
 position:relative !important;z-index:2 !important;
}
#msc-mobile-menu .msc-mob-tianqi:hover::after{
 background:var(--msc-dark-brown) !important;
}

/* ⛔ @property IS LOAD-BEARING: a custom property must be REGISTERED with a type before CSS
   will interpolate it, and the whole orbit is an interpolated angle. Where @property is not
   supported the declaration is dropped, `--msc-tq-ang` stays a plain token, the animation
   interpolates nothing — and the ring renders static at its initial angle, which is exactly
   the reduced-motion state. A gold rim with a still point of light: correct, just not moving.
   Chrome 85+, Safari 16.4+, Firefox 128+.

   🪤 THIS REPLACED AN OVERSIZED SPINNING DISC, for a reason worth keeping. That version put a
   154px square behind a 103px pill and rotated it, clipped by overflow. It looked identical
   and it broke MEASUREMENT: scrollWidth tracks the axis-aligned bounding box of a rotating
   child, which for a square oscillates up to ×1.41, so every one of the 40 locales began
   reporting the CTA as a clipped nav label — on the exact probe the 1200/1250 breakpoints
   were measured with. Neither overflow:clip nor contain:paint suppresses it (measured: 144,
   152, 154, 155, 156 px on consecutive frames). Drawing the ring at pill size removes the
   overflowing child instead of trying to hide it.

   🪤 TWO STOPS, NOT ONE. `to{…}` alone is valid CSS and animates correctly, but it gives the
   dwell assertion a single keyframe to reason about. Both ends are written out. */
@property --msc-tq-ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes msc-nav-tianqi-orbit{
 from{ --msc-tq-ang:0deg; }
 to{ --msc-tq-ang:360deg; }
}

/* ⛔ The animation is on a PSEUDO-ELEMENT, so a block naming only the link stops nothing —
   that is the failure mode of moving an effect off the element, and it is asserted. The rim
   stays: at rest the CTA keeps its gold edge and reads as the same component, just still. */
@media (prefers-reduced-motion:reduce){
 #msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a,
 #msc-mobile-menu .msc-mob-tianqi,
 #msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a::before,
 #msc-mobile-menu .msc-mob-tianqi::before{ animation:none !important; }
}

/* 1c · The bar collapses to the hamburger at 1200px, not 960 — and at 1250px in Russian.
 *
 * ⚖️ Sean, 2026-09-19, choosing this over a second CTA button beside BOOK APPOINTMENT: "add
 *    the item everywhere, and raise the width at which the bar becomes the mobile menu".
 *
 * 📏 MEASURED on the built site, all 40 locales, with the REAL pill — not a simulated <li>.
 *    That distinction is the whole reason these numbers are what they are: a plain injected
 *    link said only ru ever clipped, and the actual CTA is ~20px wider, which put NINE more
 *    locales over the edge. The simulation was measuring the wrong element.
 *      1440 / 1280 / 1250 : every locale clean
 *      1220 : ru clips 1        1200 : ru clips 5
 *      1180 : ru                1100 : fr
 *      1024 : de fr it lt ms nl pl pt-pt ro
 *    So the bar shows at 1201+ for 39 locales and 1251+ for Russian, and below that the
 *    hamburger — which has unlimited room and where Tian Qi now sits at the very top.
 *
 * ⛔ THIS HAS TO LIVE IN THE SLAB, not next to the 960px rule it supersedes. That rule sits in
 *    the frozen inline nav-styles block on ~11,100 flat pages, which nothing rewrites; the only
 *    CSS reaching both delivery paths is this appended slab. Editing the 960 in shared.css
 *    would move the Astro pages and leave the other 79.5% at 960. Same specificity, later
 *    source order, so this wins — and the 960 rule stays, subsumed.
 *
 * 🪤 AND DO NOT NAME THAT BLOCK'S OPENING TAG IN A COMMENT HERE. This slab is spliced verbatim
 *    into every flat page's own copy of it, so the literal string would become a SECOND
 *    occurrence on the page and `locate()` in bin/rebuild-nav-flat.mjs aborts the whole run on
 *    "more than one". Written the long way round for that reason, not for style. */
@media (max-width:1200px){
 #msc-navbar .msc-nav-links{display:none !important;}
 #msc-navbar .msc-cta{display:none !important;}
 #msc-navbar .msc-hamburger{display:flex !important;}
}
@media (max-width:1250px){
 html[lang="ru"] #msc-navbar .msc-nav-links{display:none !important;}
 html[lang="ru"] #msc-navbar .msc-cta{display:none !important;}
 html[lang="ru"] #msc-navbar .msc-hamburger{display:flex !important;}
}

/* 2 · A closed panel is not just invisible, it is GONE.
 *     Closing with opacity:0 + pointer-events:none removes a panel from neither
 *     the tab order nor the accessibility tree, so 23 links per page stayed
 *     focusable inside a subtree that never becomes visible — tab off
 *     "Services" and focus disappears for twenty stops, its :focus-visible ring
 *     painted at opacity 0. visibility:hidden fixes both, and is transitioned
 *     at 0s AFTER the fade so the 0.28s close still reads as a fade rather than
 *     a cut; on open it flips instantly. Both panels are declared explicitly
 *     because the mega rule's own transition would otherwise outrank a
 *     single-class selector and cut its fade. */
#msc-navbar .msc-dropdown{
 visibility:hidden !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s linear 0.28s !important;
}
#msc-navbar .msc-dropdown.msc-dropdown--mega{
 visibility:hidden !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s linear 0.28s !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown,
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown--mega{
 visibility:visible !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s !important;
}

/* 3 · The body offset — NOT ported, and the reason is the finding.
 *     shared.css:646 carries a documented layout-shift fix: `body{padding-top:
 *     var(--msc-nav-height)}`, with a comment explaining the ~16px jump it
 *     removes. 🚨 IT HAS NEVER DONE ANYTHING. `--msc-nav-height` is declared on
 *     `#msc-navbar, #msc-mobile-menu, #msc-panel-overlay` (line 623). Custom
 *     properties inherit DOWNWARDS, and `body` is those elements' ANCESTOR, so
 *     body never sees the variable, the declaration is invalid at computed-value
 *     time, and the used padding is 0px. Measured: 0px on /about/, and 0px on
 *     `#brx-content` too, for the same reason.
 *
 *     Meanwhile the 8,616 flat pages keep the mechanism that comment condemns —
 *     `var(--msc-nav-actual-height, 5.125rem)`, written by JS after first paint —
 *     and on them it RESOLVES: 82px, measured. So the frozen pages are the ones
 *     with a working offset, and re-declaring the "fixed" rule here replaced a
 *     working 82px with an unresolvable value and zeroed it. That regression was
 *     caught by measuring, having been written and believed first.
 *
 *     ⚖️ The real fix is to hoist --msc-nav-height to :root, which makes the
 *     inert rule live and moves every Astro page's content down by 82px. That is
 *     a visible change on 2,227 pages and Sean's call, not a silent port. Left
 *     alone deliberately; the jump on scroll stands until he rules. */

/* 4 · The search bar outranks the panel it sits under.
 *     #msc-navbar is itself a stacking context, so the panel's z-index:99995
 *     never competed with the bar's 99998 — it only ordered the panel against
 *     its own siblings, and the search bar sat at z-index:1. Open the search,
 *     brush "Services", and an opaque cream panel dropped over the field and
 *     the Search button. Both are absolutely positioned children of the same
 *     context, so one number settles it. */
#msc-navbar .msc-search-bar{ z-index:99996 !important; }

/* 5 · The mobile accordion's headroom. shared.css raised the open cap 62.5rem → 90rem when
 *     the panel grew the Tools accordion from 10 rows to 16; the raise never left this file,
 *     so the 8,616 pages that grew are the ones still capped at 62.5rem. Nothing is clipped
 *     at 16px root today — the worst locale computes to ~931px against a 1000px cap — but the
 *     margin is 7%, the failure mode is a silent overflow:hidden clip of the last rows, and
 *     one larger default font is all it takes. Re-declared so both paths carry the same
 *     number, which is also what test/nav-parity.test.js now grades on both. */
#msc-mobile-menu .msc-mob-sub.msc-open{ max-height:90rem !important; }

/* 6 · "Tools" answers a click, and it costs no JavaScript.
 *     Its trigger is `href="#" onclick="return false"` — there is no /tools/ page — so it
 *     opened on hover and on nothing else. A pointer that CLICKS it got nothing at all, while
 *     `cursor:pointer` promised otherwise, and a touch device ≥960px (an iPad in landscape,
 *     where the mega panel is the navigation and the hamburger is not) could not reach the
 *     nine tools from the bar at all.
 *
 *     ⚖️ The obvious fix is a click handler, and it was the wrong one: the controller is
 *     inlined 10,822 times across two drifted variants and is the one block this repo
 *     deliberately never rewrites. `:focus-within` buys the same behaviour with no script.
 *     Clicking or tapping the trigger focuses it — `onclick="return false"` stops the jump to
 *     `#` without stopping the focus — so the panel opens and stays until focus leaves, and
 *     clicking anywhere else closes it. It lands on the KEYBOARD path for free as well:
 *     focus anywhere inside a panel now holds it open, which is what the controller's
 *     `.msc-dropdown-open` was doing alone.
 *
 *     Declared for both panel shapes because each carries its own open transform — the narrow
 *     one is centred with translateX(-50%), the mega one is not — and inheriting the wrong one
 *     would slide the panel half its width off its trigger. */
#msc-navbar .msc-nav-links li.msc-has-dropdown:focus-within .msc-dropdown{
 opacity:1 !important;pointer-events:all !important;visibility:visible !important;
 transform:translateX(-50%) translateY(0) !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s !important;
}
/* 9 · The panel leads with the page its trigger points at.
 *     Clicking "Services" opens a panel that did not list /services/ — the same defect
 *     /about/ had, and the same ruling. ⚖️ No free label existed here (the footer names that
 *     page in 0 of 21 locales, against 21 of 21 for /about/), so Sean chose to reuse the
 *     trigger's own word rather than ship an untranslated one. It therefore reads as the
 *     heading repeated once, and is styled as a lead-in rather than a sixth column so it does
 *     not pretend to be a discipline. Absent on Tools, whose trigger points at "#". */
/*     🪤 Selector weight, not !important. The panel is a DESCENDANT of `.msc-nav-links li`, so
 *     `#msc-navbar .msc-nav-links li a` (0,1,2 + id) matches this link too and out-specifies a
 *     plain `.msc-mega-lead a` (0,1,1 + id) — both being !important settles nothing. Written
 *     first at the lower weight, it rendered in the top-level bar's own brown, upright, with
 *     the bar's hover underline sliding in behind it. Two classes deep is what wins here, and
 *     the inherited gradient and clipping are switched off explicitly rather than hoped away. */
#msc-navbar .msc-dropdown .msc-mega-lead{
 display:block !important;margin:0 0 1.5rem !important;padding:0 !important;
}
#msc-navbar .msc-dropdown .msc-mega-lead a{
 display:inline-block !important;font-family:var(--msc-font-heading) !important;
 font-size:0.9375rem !important;font-style:italic !important;font-weight:700 !important;
 color:var(--msc-copper) !important;text-decoration:none !important;
 letter-spacing:0.02em !important;padding:0 0 0.15rem !important;
 background-image:none !important;background-color:transparent !important;
 overflow:visible !important;text-overflow:clip !important;white-space:normal !important;
 border-radius:0 !important;
 border-bottom:1px solid rgba(178,110,60,0.35) !important;
 transition:color var(--msc-ease),border-color var(--msc-ease) !important;
}
#msc-navbar .msc-dropdown .msc-mega-lead a:hover{
 color:var(--msc-dark-brown) !important;border-bottom-color:var(--msc-dark-brown) !important;
 background-image:none !important;background-color:transparent !important;
}
#msc-navbar .msc-dropdown .msc-mega-lead a:focus-visible{
 outline:2px solid var(--msc-copper) !important;outline-offset:2px !important;
}

/* 8 · The panel's top follows the bar instead of jumping ahead of it.
 *     The bar shrinks 5.125rem → 4.125rem on scroll THROUGH A TRANSITION; the panel's `top`
 *     had no transition, so with a panel open it snapped 17px in one frame and then waited
 *     280ms for the bar to catch up — scrolling down it briefly overlapped the bar it hangs
 *     from, scrolling up it tore away from it. Same easing as the bar, so the two move as one
 *     object. (`top` is a layout property, but only on an already-composited fixed panel and
 *     only during a deliberate 280ms change — the alternative, animating a transform, would
 *     fight the open/close transform this same element already uses.) */
#msc-navbar .msc-dropdown.msc-dropdown--mega{
 transition:opacity var(--msc-ease),transform var(--msc-ease),
            visibility 0s linear 0.28s,top var(--msc-ease) !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown:hover .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown.msc-dropdown-open .msc-dropdown--mega,
#msc-navbar .msc-nav-links li.msc-has-dropdown:focus-within .msc-dropdown--mega{
 transition:opacity var(--msc-ease),transform var(--msc-ease),
            visibility 0s,top var(--msc-ease) !important;
}

/* 7 · The Tian Qi tile's shine bar was striking THROUGH its own label.
 *     `a.msc-nav-tianqi-animated::after` is the gold→copper bar, positioned `bottom:0.35rem`.
 *     That was measured for the NARROW dropdown item it used to be, whose link carries
 *     `padding:0.625rem 1.375rem` — 10px of space for a 5.6px offset to sit in. Promoted into
 *     the mega feature tile the link became `display:inline-block` with `padding:0`, so the
 *     same 5.6px lands on the baseline and the bar reads as a strikethrough. Reported by Sean
 *     as "the tian qi banner has its dash cut across it", and he is describing it exactly.
 *
 *     The tile gets room beneath the text and the bar is put under it, spanning the label
 *     rather than inset by the 0.9rem that suited a padded row. Scoped to the tile: the mobile
 *     accordion copy keeps 9px of bottom padding, so its bar already sits clear. */
#msc-navbar .msc-mega-feature a.msc-mega-feature-link{
 padding-bottom:0.5rem !important;
}
#msc-navbar .msc-mega-feature a.msc-mega-feature-link::after{
 left:0 !important;right:0 !important;bottom:0.05rem !important;
}

#msc-navbar .msc-nav-links li.msc-has-dropdown:focus-within .msc-dropdown--mega{
 opacity:1 !important;pointer-events:all !important;visibility:visible !important;
 transform:translateY(0) !important;
 transition:opacity var(--msc-ease),transform var(--msc-ease),visibility 0s !important;
}

/* 10 · The bar's own links, refined (Sean, 2026-10-10): upright, larger, darker.
 *     The frozen block styles them Playfair italic at ~13px in brown-mid, so the bar reads as
 *     three competing treatments — italic serif links, a copper pill, a dark pill. Upright at
 *     a larger size, dark brown with a full-width copper underline on hover, unifies the links
 *     with the rest of the bar. Written here, not in the frozen block, so the 8,616 flat pages
 *     get it too — their frozen inline copy is never rewritten.
 *
 *     🪤 The Tian Qi pill is a sibling with HIGHER specificity (`.msc-nav-tianqi-top>a`,
 *     (1,2,2) vs this rule's (1,1,2)), so the generic rule below does not reach its cream
 *     colour or its orbit ring — only its font size and weight inherit from here, which the
 *     explicit pill rule below then re-scopes to the pill's smaller size. */
#msc-navbar .msc-nav-links li a{
 font-style:normal !important;font-weight:600 !important;
 font-size:clamp(0.85rem, 1vw, 1.05rem) !important;
 letter-spacing:0.05em !important;color:var(--msc-dark-brown) !important;
 background-position:center bottom 2px !important;
}
#msc-navbar .msc-nav-links li a:hover{
 color:var(--msc-copper) !important;
 background-size:100% 1px !important;
}
#msc-navbar .msc-nav-links li.msc-has-dropdown>a::after{ opacity:0.55 !important; }
#msc-navbar .msc-nav-links li.msc-nav-tianqi-top>a{
 font-size:clamp(0.8rem, 0.95vw, 1rem) !important;font-weight:600 !important;
}

/* block 3b60c1dde1 */
 h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg}
/*# sourceURL=https://www.masterseanchan.com/wp-includes/blocks/heading/style.min.css */ 
/* block a32a0b0c4f */
 .is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-inline-start:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}
/*# sourceURL=https://www.masterseanchan.com/wp-includes/blocks/paragraph/style.min.css */ 
/* block bada657f51 */
 /* ══════════════════════════════════════════════════════════════
 MASTER SEAN CHAN — SINGLE POST TEMPLATE
 Design system: warm brown / gold / copper / cream
 ══════════════════════════════════════════════════════════════ */
.msc-single-post {
 --msc-deep-brown: #3B2F26;
 --msc-gold: #D6AD60;
 --msc-gold-light: #E4C580;
 --msc-gold-faint: rgba(214, 173, 96, 0.12);
 --msc-gold-glow: rgba(214, 173, 96, 0.25);
 --msc-copper: #B26E3C;
 --msc-copper-soft: rgba(178, 110, 60, 0.12);
 --msc-taupe: #A8957A;
 --msc-cream: #EFE4C8;
 --msc-cream-light: #F5EED8;
 --msc-cream-white: #FAF6ED;
 --msc-warm-white: #FDFAF3;
 --msc-brown-medium: #5C4A3A;
 --msc-brown-light: #7D6B59;
 --msc-brown-faint: #9E8E7D;
 --msc-shadow-soft: rgba(59, 47, 38, 0.06);
 --msc-shadow-medium: rgba(59, 47, 38, 0.12);
 --msc-shadow-strong: rgba(59, 47, 38, 0.18);
 --msc-border-light: rgba(168, 149, 122, 0.25);
 --msc-border-gold: rgba(214, 173, 96, 0.35);
 --msc-font-heading: 'Playfair Display', 'Georgia', serif;
 --msc-font-body: 'Public Sans', 'DM Sans', sans-serif;
 --msc-must-read-bg: linear-gradient(135deg, #3B2F26 0%, #4A3828 40%, #3B2F26 100%);
 --msc-header-h: 88px;
}
.msc-single-post { width: 100%; max-width: 100%; scroll-behavior: smooth; position: relative; background: var(--msc-warm-white); color: var(--msc-brown-medium); font-family: var(--msc-font-body); font-weight: 400; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.msc-single-post *, .msc-single-post *::before, .msc-single-post *::after { box-sizing: border-box; }
.msc-single-post a { color: inherit; }
.msc-single-post img { display: block; max-width: 100%; height: auto; }
.msc-single-post button { border: none; background: none; cursor: pointer; font-family: inherit; }
.msc-single-post .msc-grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"); }
.msc-single-post .sp-page { position: relative; z-index: 2; overflow-x: clip; }
.brxe-code, .brxe-code > div { overflow: visible !important; }
.msc-single-post .sp-hero { position: relative; min-height: 320px; display: flex; align-items: flex-end; padding: calc(var(--msc-header-h) + 20px) 2rem 3rem; overflow: hidden; }
.msc-single-post .sp-hero-bg { position: absolute; inset: 0; overflow: hidden; background-color: var(--msc-deep-brown); }
.msc-single-post .sp-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.5) brightness(0.6) contrast(1.05) blur(5px); transform: scale(1.06); transition: transform 10s ease-out; }
.msc-single-post .sp-hero:hover .sp-hero-bg img { transform: scale(1.1); }
.msc-single-post .sp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,23,18,0.96) 0%, rgba(30,23,18,0.88) 30%, rgba(37,29,23,0.62) 55%, rgba(37,29,23,0.38) 78%, rgba(37,29,23,0.2) 100%), radial-gradient(120% 90% at 20% 100%, rgba(20,15,11,0.32) 0%, transparent 62%); }
.msc-single-post .sp-hero-inner { position: relative; z-index: 3; max-width: 820px; width: 100%; margin: 0 auto; }
.msc-single-post .sp-breadcrumbs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; opacity: 0; animation: mscSpFadeUp 0.7s 0.2s forwards; }
.msc-single-post .sp-breadcrumbs a, .msc-single-post .sp-breadcrumbs span { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.msc-single-post .sp-breadcrumbs a { color: var(--msc-gold-light); transition: color 0.3s; }
.msc-single-post .sp-breadcrumbs a:hover { color: #fff; }
.msc-single-post .sp-breadcrumbs .bc-sep { color: rgba(214,173,96,0.4); font-size: 0.55rem; }
.msc-single-post .sp-breadcrumbs .bc-current { color: rgba(245,238,216,0.75); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.msc-single-post .sp-hero-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; opacity: 0; animation: mscSpFadeUp 0.7s 0.3s forwards; }
.msc-single-post .sp-hero-cat { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--msc-gold-light); padding: 0.32rem 0.75rem; background: rgba(15,11,8,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(214,173,96,0.45); border-radius: 3px; transition: all 0.3s; }
.msc-single-post .sp-hero-cat:hover { background: var(--msc-gold); color: var(--msc-deep-brown); border-color: var(--msc-gold); }
.msc-single-post .sp-hero-title { font-family: var(--msc-font-heading); font-weight: 400; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.22; color: var(--msc-cream-light); margin-bottom: 1.5rem; text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.6); opacity: 0; animation: mscSpFadeUp 0.9s 0.4s forwards; }
.msc-single-post .sp-hero-meta { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; opacity: 0; animation: mscSpFadeUp 0.7s 0.6s forwards; }
.msc-single-post .sp-hero-meta-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; color: rgba(245,238,216,0.78); letter-spacing: 0.03em; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.msc-single-post .sp-hero-meta-item svg { width: 14px; height: 14px; opacity: 0.7; }
.msc-single-post .sp-hero-meta-item a { color: var(--msc-gold-light); text-decoration: none; transition: color 0.3s; }
.msc-single-post .sp-hero-meta-item a:hover { color: #fff; }
.msc-single-post .sp-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(168,149,122,0.4); }
.msc-single-post .sp-progress { position: fixed; top: var(--msc-header-h); left: 0; right: 0; z-index: 100; height: 5px; background: rgba(168,149,122,0.12); pointer-events: none; transform: translateY(-3px); }
.msc-single-post .sp-progress-bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--msc-gold), var(--msc-copper)); transform: scaleX(0); transform-origin: left; will-change: transform; box-shadow: 0 0 6px rgba(214,173,96,0.5); }
.msc-single-post .sp-content > p:first-child { font-size: 1.25rem; color: var(--msc-deep-brown); line-height: 1.7; }
.msc-single-post .sp-content > p:first-child::first-letter { float: left; font-family: var(--msc-font-heading); font-size: 3.6rem; line-height: 0.8; font-weight: 600; color: var(--msc-gold); padding: 0.05em 0.12em 0 0; margin-top: 0.05em; }
.msc-single-post .sp-article-section { max-width: 1380px; margin: 0 auto; padding: 4rem 2rem 3rem; overflow: visible; }
.msc-single-post .sp-article-grid { display: grid; grid-template-columns: 300px 720px 250px; gap: 2rem; justify-content: center; align-items: start; }
.msc-single-post .sp-article-main { grid-column: 2; min-width: 0; }
.msc-single-post .sp-sidebar-right { grid-column: 3; position: sticky; top: calc(var(--msc-header-h) + 30px); }
.msc-single-post .sp-sidebar-cta { text-align: center; }
.msc-single-post .sp-content { font-size: 1.125rem; line-height: 1.65; color: var(--msc-brown-medium); letter-spacing: 0.005em; word-spacing: 0.03em; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; overflow-wrap: break-word; hanging-punctuation: first allow-end; }
.msc-single-post .sp-content p { margin-bottom: 1.4rem; }
.msc-single-post .sp-content h2, .msc-single-post .sp-content h3 { scroll-margin-top: calc(var(--msc-header-h) + 20px); }
.msc-single-post .sp-content h2 { font-family: var(--msc-font-heading); font-weight: 500; font-size: 1.75rem; line-height: 1.3; color: var(--msc-deep-brown); margin: 3rem 0 1.4rem; padding-top: 1rem; border-top: 1px solid var(--msc-border-light); }
.msc-single-post .sp-content h2:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.msc-single-post .sp-content h3 { font-family: var(--msc-font-heading); font-weight: 500; font-size: 1.4rem; line-height: 1.35; color: var(--msc-deep-brown); margin: 2.5rem 0 1rem; }
.msc-single-post .sp-content h4 { font-family: var(--msc-font-body); font-weight: 600; font-size: 1.125rem; letter-spacing: 0.02em; color: var(--msc-deep-brown); margin: 2rem 0 0.8rem; }
.msc-single-post .sp-content h5, .msc-single-post .sp-content h6 { font-family: var(--msc-font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--msc-copper); margin: 1.8rem 0 0.6rem; }
.msc-single-post .sp-content a { color: var(--msc-copper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(178,110,60,0.3); transition: text-decoration-color 0.3s; }
.msc-single-post .sp-content a:hover { text-decoration-color: var(--msc-copper); }
.msc-single-post .sp-content strong { font-weight: 600; color: var(--msc-deep-brown); }
.msc-single-post .sp-content em { font-style: italic; }
.msc-single-post .sp-content blockquote { position: relative; margin: 2.5rem 0; padding: 2rem 2rem 2rem 2.5rem; background: var(--msc-cream-white); border-radius: 6px; border-inline-start: 4px solid var(--msc-gold); font-family: var(--msc-font-heading); font-style: italic; font-size: 1.15rem; line-height: 1.6; letter-spacing: 0.01em; color: var(--msc-brown-light); }
.msc-single-post .sp-content blockquote p { margin-bottom: 0.5rem; }
.msc-single-post .sp-content blockquote p:last-child { margin-bottom: 0; }
.msc-single-post .sp-content blockquote cite { display: block; margin-top: 0.8rem; font-family: var(--msc-font-body); font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--msc-copper); }
.msc-single-post .sp-content ul, .msc-single-post .sp-content ol { margin: 1.4rem 0 1.4rem 1.5rem; }
.msc-single-post .sp-content li { margin-bottom: 0.55rem; padding-inline-start: 0.3rem; line-height: 1.6; }
.msc-single-post .sp-content ul li::marker { color: var(--msc-gold); }
.msc-single-post .sp-content ol li::marker { color: var(--msc-copper); font-weight: 600; }
.msc-single-post .sp-content img { border-radius: 8px; margin: 2rem 0; box-shadow: 0 8px 32px var(--msc-shadow-soft); }
.msc-single-post .sp-content figure { margin: 2rem 0; }
.msc-single-post .sp-content figure img { margin: 0 0 0.6rem; }
.msc-single-post .sp-content figcaption { font-size: 0.82rem; color: var(--msc-brown-light); text-align: center; font-style: italic; }
.msc-single-post .sp-content .alignwide { margin-inline-start: -4rem; margin-inline-end: -4rem; max-width: calc(100% + 8rem); }
.msc-single-post .sp-content .alignfull { margin-inline-start: calc(-50vw + 50%); margin-inline-end: calc(-50vw + 50%); max-width: 100vw; width: 100vw; border-radius: 0; }
.msc-single-post .sp-content code { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.88em; background: var(--msc-cream-white); padding: 0.15em 0.4em; border-radius: 4px; border: 1px solid var(--msc-border-light); color: var(--msc-copper); }
.msc-single-post .sp-content pre { margin: 2rem 0; padding: 1.5rem; background: var(--msc-deep-brown); border-radius: 8px; overflow-x: auto; }
.msc-single-post .sp-content pre code { background: none; border: none; padding: 0; color: var(--msc-cream-light); font-size: 0.82rem; line-height: 1.6; }
.msc-single-post .sp-content hr { border: none; margin: 3rem auto; width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--msc-gold), transparent); }
.msc-single-post .sp-content table { width: 100%; margin: 2rem 0; border-collapse: collapse; font-size: 0.88rem; }
.msc-single-post .sp-content th { font-weight: 600; text-align: start; padding: 0.8rem 1rem; background: var(--msc-cream-white); border-bottom: 2px solid var(--msc-border-gold); color: var(--msc-deep-brown); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.msc-single-post .sp-content td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--msc-border-light); }
.msc-single-post .sp-content figure.sp-embed { margin: 2.5rem 0; padding: 0; }
.msc-single-post .sp-embed-card { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: stretch; background: var(--msc-cream-white); border: 1px solid var(--msc-border-light); border-radius: 10px; overflow: hidden; text-decoration: none !important; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.msc-single-post .sp-embed-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--msc-shadow-soft); border-color: var(--msc-border-gold); }
.msc-single-post .sp-embed-card-img { position: relative; overflow: hidden; background: var(--msc-cream); }
.msc-single-post .sp-embed-card-img img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: transform 0.5s ease; }
.msc-single-post .sp-embed-card:hover .sp-embed-card-img img { transform: scale(1.04); }
.msc-single-post .sp-embed-card-body { padding: 1.4rem 1.6rem; display: flex; flex-direction: column; justify-content: center; }
.msc-single-post .sp-embed-card-eyebrow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--msc-copper); margin: 0 0 0.5rem; }
.msc-single-post .sp-embed-card-title { font-family: var(--msc-font-heading); font-weight: 500; font-size: 1.2rem; line-height: 1.35; color: var(--msc-deep-brown); margin: 0 0 0.55rem; }
.msc-single-post .sp-embed-card-excerpt { font-size: 0.92rem; line-height: 1.55; color: var(--msc-brown-light); margin: 0 0 0.85rem; }
.msc-single-post .sp-embed-card-cta { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: auto; }
.msc-single-post .sp-embed-card-cat { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--msc-copper); background: var(--msc-copper-soft); padding: 0.32em 0.75em; border-radius: 999px; }
.msc-single-post .sp-embed-card-arrow { color: var(--msc-copper); flex-shrink: 0; transition: transform 0.3s ease; }
.msc-single-post .sp-embed-card:hover .sp-embed-card-arrow { transform: translateX(3px); }
.msc-single-post .sp-end-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 3rem 0; }
.msc-single-post .sp-end-divider::before, .msc-single-post .sp-end-divider::after { content: ""; flex: 1; height: 1px; background: var(--msc-border-light); }
.msc-single-post .sp-end-ornament { font-size: 1.2rem; color: var(--msc-gold); opacity: 0.5; font-family: var(--msc-font-heading); }
.msc-single-post .sp-author-bio { display: flex; gap: 1.8rem; align-items: flex-start; padding: 2.5rem; background: var(--msc-cream-white); border: 1px solid var(--msc-border-light); border-radius: 10px; margin-bottom: 2rem; }
.msc-single-post .sp-author-photo { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--msc-border-gold); box-shadow: 0 4px 16px var(--msc-shadow-soft); }
.msc-single-post .sp-author-body { flex: 1; }
.msc-single-post .sp-author-label { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--msc-taupe); margin-bottom: 0.4rem; }
.msc-single-post .sp-author-name { font-family: var(--msc-font-heading); font-weight: 600; font-size: 1.2rem; color: var(--msc-deep-brown); line-height: 1.3; margin-bottom: 0.3rem; }
.msc-single-post .sp-author-tagline { font-family: var(--msc-font-heading); font-style: italic; font-size: 0.85rem; color: var(--msc-copper); margin-bottom: 0.8rem; }
.msc-single-post .sp-author-desc { font-size: 0.85rem; color: var(--msc-brown-light); line-height: 1.7; margin-bottom: 1rem; }
.msc-single-post .sp-author-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--msc-gold); transition: color 0.3s; }
.msc-single-post .sp-author-link:hover { color: var(--msc-copper); }
.msc-single-post .sp-author-link svg { width: 14px; height: 14px; }
.msc-single-post .sp-share { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--msc-border-light); border-bottom: 1px solid var(--msc-border-light); margin-bottom: 2rem; }
.msc-single-post .sp-share-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--msc-brown-faint); }
.msc-single-post .sp-share-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--msc-border-light); color: var(--msc-brown-light); transition: all 0.3s; text-decoration: none; }
.msc-single-post .sp-share-btn:hover { border-color: var(--msc-gold); color: var(--msc-gold); background: var(--msc-gold-faint); }
.msc-single-post .sp-share-btn svg { width: 16px; height: 16px; }
.msc-single-post .sp-related { background: var(--msc-cream-white); padding: 4rem 2rem 5rem; }
.msc-single-post .sp-related-inner { max-width: 1100px; margin: 0 auto; }
.msc-single-post .sp-related-header { text-align: center; margin-bottom: 2.5rem; }
.msc-single-post .sp-related-eyebrow { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--msc-copper); margin-bottom: 0.5rem; }
.msc-single-post .sp-related-title { font-family: var(--msc-font-heading); font-weight: 400; font-size: 1.6rem; color: var(--msc-deep-brown); }
.msc-single-post .sp-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.msc-single-post .post-card { position: relative; display: flex; flex-direction: column; background: var(--msc-warm-white); border: 1px solid var(--msc-border-light); border-radius: 8px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s, border-color 0.4s; text-decoration: none; }
.msc-single-post .post-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px var(--msc-shadow-soft), 0 6px 16px var(--msc-shadow-medium); border-color: var(--msc-gold); }
.msc-single-post .post-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--msc-gold), var(--msc-copper)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; border-radius: 8px 8px 0 0; z-index: 3; }
.msc-single-post .post-card:hover::before { transform: scaleX(1); }
.msc-single-post .post-card-img { position: relative; height: 195px; overflow: hidden; background: linear-gradient(135deg, var(--msc-cream) 0%, var(--msc-cream-light) 100%); }
.msc-single-post .post-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.msc-single-post .post-card:hover .post-card-img img { transform: scale(1.06); }
.msc-single-post .post-card-img .img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(59,47,38,0.25) 0%, transparent 40%); }
.msc-single-post .post-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.3rem 1.5rem 1.5rem; }
.msc-single-post .post-card-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.msc-single-post .post-cat { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 3px; background: var(--msc-copper-soft); color: var(--msc-copper); }
.msc-single-post .post-card-title { font-family: var(--msc-font-heading); font-weight: 500; font-size: 1.05rem; line-height: 1.4; color: var(--msc-deep-brown); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s; margin-bottom: 0.5rem; }
.msc-single-post .post-card:hover .post-card-title { color: var(--msc-copper); }
.msc-single-post .post-card-excerpt { font-size: 0.82rem; color: var(--msc-brown-light); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1rem; }
.msc-single-post .post-card-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.msc-single-post .post-card-date { display: flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; color: var(--msc-taupe); letter-spacing: 0.04em; }
.msc-single-post .post-card-arrow { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--msc-gold-faint); color: var(--msc-gold); transition: all 0.3s; }
.msc-single-post .post-card:hover .post-card-arrow { background: var(--msc-gold); color: #fff; transform: translateX(2px); }
.msc-single-post .post-card-link { position: absolute; inset: 0; z-index: 5; text-decoration: none; }
.msc-single-post .sp-back-link { display: block; text-align: center; margin-top: 2rem; }
.msc-single-post .sp-back-link a { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--msc-brown-light); padding: 0.6rem 1.5rem; border: 1px solid var(--msc-border-light); border-radius: 50px; transition: all 0.3s; }
.msc-single-post .sp-back-link a:hover { border-color: var(--msc-gold); color: var(--msc-copper); }
.msc-single-post .sp-back-link svg { width: 14px; height: 14px; }
.msc-single-post .sp-cta { position: relative; padding: 5rem 2rem; background: var(--msc-must-read-bg); text-align: center; overflow: hidden; }
.msc-single-post .sp-cta::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events: none; }
.msc-single-post .sp-cta-inner { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; }
.msc-single-post .sp-cta-eyebrow { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--msc-gold); margin-bottom: 1.2rem; }
.msc-single-post .sp-cta-title { font-family: var(--msc-font-heading); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--msc-cream-light); line-height: 1.25; margin-bottom: 1rem; }
.msc-single-post .sp-cta-title em { font-style: italic; color: var(--msc-gold); }
.msc-single-post .sp-cta-subtitle { font-size: 0.88rem; color: var(--msc-taupe); line-height: 1.7; margin-bottom: 2rem; }
.msc-single-post .sp-cta .cta-btn { display: inline-block; padding: 0.85rem 2.2rem; background: var(--msc-gold); color: #fff; font-family: var(--msc-font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 50px; transition: all 0.3s; text-decoration: none; }
.msc-single-post .sp-cta .cta-btn:hover { background: var(--msc-gold-light); box-shadow: 0 8px 30px rgba(214,173,96,0.4); transform: translateY(-2px); }
.msc-single-post .sp-cta-divider { display: flex; align-items: center; gap: 1rem; margin: 2rem auto 1.5rem; max-width: 300px; }
.msc-single-post .sp-cta-divider::before, .msc-single-post .sp-cta-divider::after { content: ""; flex: 1; height: 1px; background: rgba(214,173,96,0.25); }
.msc-single-post .sp-cta-divider span { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--msc-taupe); white-space: nowrap; }
.msc-single-post .email-form { display: flex; gap: 0.5rem; max-width: 420px; margin: 0 auto; }
.msc-single-post .email-form input { flex: 1; padding: 0.7rem 1.2rem; border: 1px solid rgba(214,173,96,0.3); border-radius: 50px; background: rgba(253,250,243,0.08); color: var(--msc-cream-light); font-family: var(--msc-font-body); font-size: 0.82rem; outline: none; transition: border-color 0.3s, box-shadow 0.3s; }
.msc-single-post .email-form input::placeholder { color: var(--msc-taupe); }
.msc-single-post .email-form input:focus { border-color: var(--msc-gold); box-shadow: 0 0 0 3px rgba(214,173,96,0.15); }
.msc-single-post .email-form button { padding: 0.7rem 1.5rem; background: var(--msc-gold); color: #fff; font-family: var(--msc-font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.msc-single-post .email-form button:hover { background: var(--msc-gold-light); box-shadow: 0 4px 16px rgba(214,173,96,0.35); }
.msc-single-post .email-form button:disabled { opacity: 0.6; cursor: default; }
.msc-single-post .email-form-msg { font-size: 0.72rem; margin-top: 0.8rem; min-height: 1.2em; }
.msc-single-post .email-form-msg.success { color: var(--msc-gold); }
.msc-single-post .email-form-msg.error { color: #c0392b; }
.msc-single-post .scroll-top { position: fixed; bottom: 6rem; right: 2rem; z-index: 900; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--msc-gold); color: #fff; box-shadow: 0 4px 20px rgba(214,173,96,0.4); opacity: 0; transform: translateY(20px); transition: all 0.4s; pointer-events: none; border: none; cursor: pointer; }
.msc-single-post .scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.msc-single-post .scroll-top:hover { background: var(--msc-gold-light); transform: translateY(-2px); }
.msc-single-post .scroll-top svg { width: 18px; height: 18px; }
.msc-single-post .sp-toc { max-height: calc(100vh - var(--msc-header-h) - 60px); overflow-y: auto; }
.msc-single-post .sp-toc-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--msc-taupe); margin-bottom: 0.8rem; }
.msc-single-post .sp-toc-list { list-style: none; padding: 0; margin: 0; border-inline-start: 1px solid var(--msc-border-light); }
.msc-single-post .sp-toc-item { margin: 0; }
.msc-single-post .sp-toc-link { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 0.4rem 0 0.4rem 1rem; font-size: 0.88rem; line-height: 1.5; color: var(--msc-brown-faint); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -1px; transition: color 0.3s, border-color 0.3s; word-break: break-word; }
.msc-single-post .sp-toc-link:hover { color: var(--msc-brown-medium); }
.msc-single-post .sp-toc-link.active { color: var(--msc-copper); border-inline-start-color: var(--msc-gold); font-weight: 600; }
.msc-single-post .sp-toc-link.depth-3 { padding-inline-start: 1.8rem; font-size: 0.82rem; }
.msc-single-post .sp-toc-mobile { display: none; margin-bottom: 2rem; }
.msc-single-post .sp-toc-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.7rem 1rem; background: var(--msc-cream-white); border: 1px solid var(--msc-border-light); border-radius: 8px; font-family: var(--msc-font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--msc-brown-medium); cursor: pointer; transition: all 0.3s; }
.msc-single-post .sp-toc-toggle:hover { border-color: var(--msc-gold); }
.msc-single-post .sp-toc-toggle svg { width: 14px; height: 14px; color: var(--msc-gold); transition: transform 0.3s; }
.msc-single-post .sp-toc-toggle.open svg { transform: rotate(180deg); }
.msc-single-post .sp-toc-mobile-list { list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease; border-inline-start: 2px solid var(--msc-border-light); margin-top: 0.5rem; margin-inline-start: 0.5rem; }
.msc-single-post .sp-toc-mobile-list.open { max-height: 500px; }
.msc-single-post .sp-toc-mobile-list a { display: block; padding: 0.4rem 0 0.4rem 1rem; font-size: 0.75rem; color: var(--msc-brown-light); text-decoration: none; transition: color 0.3s; }
.msc-single-post .sp-toc-mobile-list a:hover { color: var(--msc-copper); }
.msc-single-post .sp-sidebar-consult-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--msc-border-gold); margin: 0 auto 0.8rem; }
.msc-single-post .sp-sidebar-divider { width: 40px; height: 1px; background: var(--msc-border-light); margin: 1.2rem auto; }
.msc-single-post .sp-sidebar-btn-outline { background: transparent; border: 1px solid var(--msc-gold); color: var(--msc-gold); }
.msc-single-post .sp-sidebar-btn-outline:hover { background: var(--msc-gold); color: #fff; }
.msc-single-post .sp-sidebar-academy-link { display: block; margin-bottom: 0.8rem; border-radius: 6px; overflow: hidden; }
.msc-single-post .sp-sidebar-academy-img { width: 100%; height: auto; border-radius: 6px; transition: transform 0.4s, box-shadow 0.3s; }
.msc-single-post .sp-sidebar-academy-link:hover .sp-sidebar-academy-img { transform: scale(1.03); box-shadow: 0 4px 16px var(--msc-shadow-medium); }
.msc-single-post .sp-sidebar-label { font-family: var(--msc-font-heading); font-weight: 500; font-size: 0.88rem; color: var(--msc-deep-brown); margin-bottom: 0.4rem; }
.msc-single-post .sp-sidebar-text { font-size: 0.75rem; color: var(--msc-brown-faint); line-height: 1.5; margin-bottom: 1rem; }
.msc-single-post .sp-sidebar-btn { display: inline-block; padding: 0.5rem 1rem; background: var(--msc-gold); color: #fff; font-family: var(--msc-font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 50px; transition: all 0.3s; }
.msc-single-post .sp-sidebar-btn:hover { background: var(--msc-gold-light); box-shadow: 0 4px 16px rgba(214,173,96,0.35); transform: translateY(-1px); }
.msc-single-post .sp-sidebar-ig { display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none; padding: 0.45rem 0.8rem; border: 1px solid var(--msc-border-light); border-radius: 8px; transition: all 0.3s; }
.msc-single-post .sp-sidebar-ig:hover { border-color: var(--msc-copper); background: var(--msc-copper-soft); }
.msc-single-post .sp-sidebar-ig-icon { width: 16px; height: 16px; color: var(--msc-copper); flex-shrink: 0; }
.msc-single-post .sp-sidebar-ig-text { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; color: var(--msc-brown-medium); }
.msc-single-post .sp-sidebar-ig:hover .sp-sidebar-ig-text { color: var(--msc-copper); }
/* 1380px: hide ad sidebar, keep right sidebar (TOC + CTA) */
@media (max-width: 1380px) { .msc-single-post .sp-article-grid { grid-template-columns: 720px 250px; } .msc-single-post .sp-article-main { grid-column: 1; } .msc-single-post .sp-sidebar-right { grid-column: 2; } }
/* 1024px: hide right sidebar too, show mobile TOC, single column */
@media (max-width: 1024px) { .msc-single-post .sp-article-grid { grid-template-columns: minmax(0, 720px); } .msc-single-post .sp-sidebar-right { display: none; } .msc-single-post .sp-article-main { grid-column: 1; } .msc-single-post .sp-toc-mobile { display: block; } .msc-single-post .sp-article-section { padding: 4rem 2rem 3rem; } }
.msc-single-post a:focus-visible, .msc-single-post button:focus-visible { outline: 2px solid var(--msc-gold); outline-offset: 3px; border-radius: 3px; }
.msc-single-post .sp-share-btn:focus-visible, .msc-single-post .scroll-top:focus-visible { outline-offset: 2px; border-radius: 50%; }
@keyframes mscSpFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1024px) { .msc-single-post .sp-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .msc-single-post { --msc-header-h: 88px; } .msc-single-post .sp-hero { min-height: 280px; padding: calc(var(--msc-header-h) + 20px) 1.5rem 2.5rem; } .msc-single-post .sp-article-section { padding: 3rem 1.5rem 2rem; } .msc-single-post .sp-content .alignwide { margin-inline-start: -1rem; margin-inline-end: -1rem; max-width: calc(100% + 2rem); } .msc-single-post .sp-author-bio { flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem; } .msc-single-post .sp-author-photo { width: 64px; height: 64px; } .msc-single-post .sp-related { padding: 3rem 1.5rem 4rem; } .msc-single-post .sp-related-grid { grid-template-columns: 1fr; } .msc-single-post .sp-cta { padding: 3.5rem 1.5rem; } .msc-single-post .email-form { flex-direction: column; } .msc-single-post .email-form button { width: 100%; } .msc-single-post .sp-share { justify-content: center; } .msc-single-post .scroll-top { left: auto; right: 1.5rem; bottom: 25vh; } .msc-single-post .sp-content { font-size: 1.05rem; } .msc-single-post .sp-content > p:first-child { font-size: 1.15rem; } .msc-single-post .sp-content > p:first-child::first-letter { font-size: 3rem; } .msc-single-post .sp-content h2 { font-size: 1.5rem; } .msc-single-post .sp-content h3 { font-size: 1.25rem; } .msc-single-post .sp-content blockquote { font-size: 1.05rem; padding: 1.5rem 1.2rem 1.5rem 1.8rem; } .msc-single-post .sp-embed-card { grid-template-columns: 1fr; } .msc-single-post .sp-embed-card-img { aspect-ratio: 16 / 9; } .msc-single-post .sp-embed-card-body { padding: 1.2rem 1.3rem 1.3rem; } .msc-single-post .sp-embed-card-title { font-size: 1.1rem; } }
@media (max-width: 480px) { .msc-single-post .sp-hero { min-height: 240px; padding: calc(var(--msc-header-h) + 20px) 1rem 2rem; } .msc-single-post .sp-article-section { padding: 2.5rem 1rem 2rem; } .msc-single-post .sp-content { font-size: 1rem; line-height: 1.6; } .msc-single-post .sp-content > p:first-child::first-letter { font-size: 2.6rem; } .msc-single-post .sp-content p { margin-bottom: 1.2rem; } }
/* ── Mediavine Ad Compatibility ── */
.msc-single-post .sp-main { display: block; }
.msc-single-post .sp-ad-slot-top { max-width: 1200px; margin: 0 auto; padding: 0 2rem; text-align: center; overflow: visible; }
.msc-single-post .sp-ad-slot-top:empty { display: none; }
/* Reset global styles inside Mediavine ad containers */
.msc-single-post div[data-adthrive-ad] img,
.msc-single-post .adthrive-ad img,
.msc-single-post .mv-ad-box img,
.msc-single-post div[id^="adthrive"] img {
 display: initial; max-width: none; height: initial;
 border-radius: 0; margin: 0; box-shadow: none;
}
.msc-single-post div[data-adthrive-ad] a,
.msc-single-post .adthrive-ad a,
.msc-single-post .mv-ad-box a,
.msc-single-post div[id^="adthrive"] a {
 color: initial; text-decoration: initial;
 text-underline-offset: initial; text-decoration-color: initial;
}
.msc-single-post div[data-adthrive-ad] button,
.msc-single-post .adthrive-ad button,
.msc-single-post .mv-ad-box button,
.msc-single-post div[id^="adthrive"] button {
 border: initial; background: initial; cursor: initial; font-family: initial;
}
/* In-content ad spacing */
.msc-single-post .sp-content div[data-adthrive-ad],
.msc-single-post .sp-content .adthrive-ad,
.msc-single-post .sp-content .mv-ad-box,
.msc-single-post .sp-content div[id^="adthrive"] {
 margin: 1.5rem 0; border-radius: 0; box-shadow: none;
}
/* Ensure ad containers are never clipped */
.msc-single-post div[data-adthrive-ad],
.msc-single-post .adthrive-ad,
.msc-single-post .mv-ad-box,
.msc-single-post div[id^="adthrive"] {
 overflow: visible !important; max-width: none;
}
/* Push scroll-to-top above Mediavine adhesion bar */
body.adthrive-adhesion-active .msc-single-post .scroll-top { bottom: 8rem; }
@media (max-width: 768px) {
 body.adthrive-adhesion-active .msc-single-post .scroll-top { bottom: calc(25vh + 60px); }
} 
/* block af30b07990 */
 .msc-footer {
 background-color: var(--msc-deep-brown, #3B2F26);
 padding: 60px 0 0 0;
 font-family: var(--msc-font-body, 'Public Sans', sans-serif);
}
.msc-footer-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 30px;
}
.msc-footer-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 40px;
 padding-bottom: 50px;
 border-bottom: 1px solid var(--msc-taupe, #A8957A);
}
@media (max-width: 980px) {
 .msc-footer-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 600px) {
 .msc-footer-grid {
 grid-template-columns: 1fr;
 }
}
.msc-footer h4 {
 font-family: var(--msc-font-heading, 'Playfair Display', serif);
 font-size: 1.35rem;
 font-weight: 600;
 letter-spacing: 1px;
 text-transform: uppercase;
 color: var(--msc-gold, #D6AD60);
 margin-bottom: 25px;
 padding-bottom: 10px;
 border-bottom: 2px solid var(--msc-copper, #B26E3C);
 display: inline-block;
}
.msc-footer-links {
 list-style: none;
 padding: 0;
 margin: 0;
}
.msc-footer-links li {
 margin-bottom: 12px;
}
.msc-footer-links a {
 font-family: var(--msc-font-body, 'Public Sans', sans-serif);
 font-size: 1rem;
 color: var(--msc-cream, #EFE4C8);
 text-decoration: none;
 transition: color 0.3s ease, padding-left 0.3s ease;
 display: inline-block;
}
.msc-footer-links a:hover {
 color: var(--msc-gold, #D6AD60);
 padding-inline-start: 5px;
}
.msc-footer-links .chinese-text {
 font-family: 'Noto Sans SC', var(--msc-font-body, 'Public Sans', sans-serif);
 font-size: 0.75rem;
 color: var(--msc-taupe, #A8957A);
 margin-inline-start: 5px;
}
.msc-footer-search {
 margin-top: 10px;
}
.msc-footer-search input[type="search"] {
 width: 100%;
 padding: 12px 15px;
 border: 1px solid var(--msc-taupe, #A8957A);
 border-radius: 4px;
 background-color: rgba(239, 228, 200, 0.1);
 color: var(--msc-cream, #EFE4C8);
 font-family: var(--msc-font-body, 'Public Sans', sans-serif);
 font-size: 0.875rem;
 transition: border-color 0.3s ease, background-color 0.3s ease;
}
.msc-footer-search input[type="search"]::placeholder {
 color: var(--msc-taupe, #A8957A);
}
.msc-footer-search input[type="search"]:focus {
 outline: none;
 border-color: var(--msc-gold, #D6AD60);
 background-color: rgba(239, 228, 200, 0.15);
}
.msc-footer-search button {
 margin-top: 10px;
 padding: 10px 25px;
 background-color: var(--msc-copper, #B26E3C);
 color: var(--msc-cream, #EFE4C8);
 border: none;
 border-radius: 4px;
 font-family: var(--msc-font-body, 'Public Sans', sans-serif);
 font-size: 0.75rem;
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 cursor: pointer;
 transition: background-color 0.3s ease;
}
.msc-footer-search button:hover {
 background-color: var(--msc-gold, #D6AD60);
 color: var(--msc-deep-brown, #3B2F26);
}
.msc-footer-social {
 display: flex;
 gap: 15px;
 margin-top: 20px;
}
.msc-footer-social a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: rgba(214, 173, 96, 0.2);
 color: var(--msc-gold, #D6AD60);
 text-decoration: none;
 transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.msc-footer-social a:hover {
 background-color: var(--msc-gold, #D6AD60);
 color: var(--msc-deep-brown, #3B2F26);
 transform: translateY(-3px);
}
.msc-footer-social svg {
 width: 18px;
 height: 18px;
 fill: currentColor;
}
.msc-footer-bottom {
 padding: 25px 0;
 display: flex;
 justify-content: center;
 align-items: center;
}
.msc-footer-copyright {
 font-family: var(--msc-font-body, 'Public Sans', sans-serif);
 font-size: 0.875rem;
 color: var(--msc-taupe, #A8957A);
 text-align: center;
}
.msc-footer-copyright a {
 color: var(--msc-gold, #D6AD60);
 text-decoration: none;
}
.msc-footer-copyright a:hover {
 text-decoration: underline;
}
.msc-social-label {
 font-family: var(--msc-font-body, 'Public Sans', sans-serif);
 font-size: 1rem;
 font-weight: 600;
 color: var(--msc-cream, #EFE4C8);
 margin-bottom: 15px;
} 
/* The Tian Qi popup rules that used to end this file now live in
   /_msc/tq-popup.css, so that the ~11,000 pages which do not link shared.css
   can have them too. See that file's header for what went wrong. */

/* ══════════════════════════════════════════════════════════════════════════════════════
   BLOG POST LAYOUT — split rails
   ──────────────────────────────────────────────────────────────────────────────────────
   Appended as an override block rather than edited into the rules above, so the whole
   change is one contiguous, revertible hunk. Everything here is `.msc-single-post .sp-*`
   (0,2,0) exactly like the originals, so it wins on source order alone — no !important.

   ⛔ NOTHING here changes copy, and nothing here changes markup except where a comment
   below says otherwise; this mostly re-places elements that were already in the DOM. Four
   measured defects, all on /blog/how-to-read-a-bazi-chart/ at 1600x1000:

   1. `grid-template-columns: 300px 720px 250px` reserved column 1 for
      `<aside class="sp-sidebar-ads">` — which was EMPTY (innerHTML.length === 0) and which
      no Mediavine script targeted; the only "mediavine" string near it was an HTML comment.
      332px of dead space above 1381px, and it pushed the reading column off centre.
      ⚖️ Sean ruled on 2026-09-21 that the slot is not coming back — "we can't control where
      mediavine puts the ads" — so `bin/drop-sidebar-ads-slot.mjs` deleted the markup from
      all 1,097 captures that carried it, and the rules that positioned and hid it are gone
      from this file. Nothing here needs to hide it any more; there is nothing to hide.
   2. The TOC ran 951px of content inside an 852px `max-height` box, so ~100px lived in a
      nested scrollbar, and `-webkit-line-clamp: 3` truncated long headings.
   3. The academy CTA is the rail's SECOND child. With the TOC eating 852px of a 1000px
      viewport the banner started at top:1012px, the button at 1467px — i.e. the site's
      main commercial CTA was never on screen on 888 posts.
   4. `.sp-progress` was pinned at `top: var(--msc-header-h)` with the variable set once at
      load. The navbar shrinks 87px -> 70px on scroll, so a 14px band of article text ran
      between the nav and the bar for the whole scroll. Position fixed here, sync in
      /_msc/blog-enhance.js.

   The rails are now split: TOC left, academy right, article centred between them. Both
   rails carry something, so there is no dead column at any width.
   ══════════════════════════════════════════════════════════════════════════════════════ */

/* ── The grid ─────────────────────────────────────────────────────────────────────────
 * `.sp-sidebar-right` is a plain <div> wrapper with no semantics of its own, so
 * `display: contents` promotes its three children — nav.sp-toc, a divider, .sp-sidebar-cta
 * — into grid items we can place independently. That is what lets the TOC and the CTA sit
 * in DIFFERENT columns without touching a single captured file. The <nav> keeps its role
 * and aria-label; only the styling box of the wrapper disappears.
 *
 * ⚠️ `position: sticky` on the wrapper (line ~1717) dies with it, so each child that needs
 * to stick now sticks on its own. */
.msc-single-post .sp-article-section { max-width: 1460px; }
.msc-single-post .sp-article-grid {
  grid-template-columns: minmax(0, 720px);
  gap: 3rem;
  justify-content: center;
}
.msc-single-post .sp-sidebar-right { display: contents; }
/* The divider existed only to separate TOC from CTA inside one rail. They are separate
   columns now, so it has nothing left to divide. The one INSIDE .sp-sidebar-cta (above
   the Instagram link) is a descendant, not a child, and is deliberately untouched. */
.msc-single-post .sp-sidebar-right > .sp-sidebar-divider { display: none; }

.msc-single-post .sp-article-main { grid-column: 1; grid-row: 1; }
.msc-single-post .sp-toc { display: none; }
.msc-single-post .sp-sidebar-cta { grid-column: 1; grid-row: 2; }

/* ── Left rail: the table of contents ─────────────────────────────────────────────────
 * It is the only thing in its column now, so it gets the full sticky viewport instead of
 * sharing 852px with a CTA. It still scrolls internally on a 28-heading post — that is
 * correct — but the clip is masked top and bottom so it reads as a panel with more below
 * rather than as a list someone forgot to finish. blog-enhance.js keeps the active item
 * scrolled into view inside it. */
@media (min-width: 1080px) {
  .msc-single-post .sp-article-grid { grid-template-columns: 240px minmax(0, 720px); }
  .msc-single-post .sp-article-main { grid-column: 2; grid-row: 1; }
  .msc-single-post .sp-sidebar-cta  { grid-column: 2; grid-row: 2; }
  .msc-single-post .sp-toc {
    display: block;
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--msc-header-h) + 2rem);
    max-height: calc(100vh - var(--msc-header-h) - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--msc-border-light) transparent;
    /* Bottom only. A top fade also dimmed the "Contents" label, which sits at the top of
       the scrollbox and never scrolls — it read as a disabled heading. */
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent 100%);
  }
  /* A TOC short enough to fit needs no fade — the mask would just dim its first and last
     entries for no reason. blog-enhance.js sets this when scrollHeight fits clientHeight. */
  .msc-single-post .sp-toc.is-complete {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .msc-single-post .sp-toc::-webkit-scrollbar { width: 3px; }
  .msc-single-post .sp-toc::-webkit-scrollbar-thumb {
    background: var(--msc-border-light);
    border-radius: 3px;
  }
}

.msc-single-post .sp-toc-label {
  padding-bottom: 0.7rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--msc-gold-faint);
  color: var(--msc-brown-faint);
}
.msc-single-post .sp-toc-list {
  border-inline-start: 1px solid var(--msc-border-light);
  margin-top: 0.9rem;
}
/* 🪤 The clamp goes entirely. It was `-webkit-line-clamp: 3`, and -webkit-box measures its
   clamp height WITHOUT the element's vertical padding, so `overflow: hidden` then let a
   sliver of the next line show through the padding box — visible on every heading long
   enough to wrap: two clean lines, then a 4px band of chopped letterforms under them.
   Reducing it to 2 only moved the artifact. Headings wrap in full instead, at a slightly
   tighter size so the column stays scannable, and the panel scrolls as it already did. */
.msc-single-post .sp-toc-link {
  display: block;
  -webkit-line-clamp: none;
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 0.4rem 0.6rem 0.4rem 0.9rem;
  border-inline-start-width: 2px;
  border-radius: 0 3px 3px 0;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
.msc-single-post .sp-toc-link.depth-3 { font-size: 0.79rem; }
/* Read / unread. The spy already knew which heading you were on; nothing ever showed how
   far down the article that was. Passed entries darken, so the list carries the same
   progress signal as the bar at the top. */
.msc-single-post .sp-toc-link.is-read { color: var(--msc-brown-light); }
.msc-single-post .sp-toc-link.active,
.msc-single-post .sp-toc-link.is-read.active {
  color: var(--msc-copper);
  font-weight: 600;
  border-inline-start-color: var(--msc-gold);
  background: linear-gradient(90deg, var(--msc-cream-white), transparent);
}
.msc-single-post .sp-toc-link.depth-3 { padding-inline-start: 1.7rem; }

/* ── Right rail: the academy ──────────────────────────────────────────────────────────
 * Its own column from 1400px up, and an end-of-article card below that — both places
 * where it is actually on screen. The button was `.sp-sidebar-btn-outline`, a 0.68rem
 * transparent ghost; against cream at 250px wide that is the "hard to see" Sean reported.
 * It is the only call to action in its rail now, so it is solid gold and full width.
 *
 * ⛔ Zero new strings. "Go From Reader to Practitioner", the description and "Explore the
 * Academy" are the captured copy, already translated in all 20 locales. */
.msc-single-post .sp-sidebar-cta {
  margin-top: 3rem;
  padding: 1.6rem;
  background: var(--msc-cream-white);
  border: 1px solid var(--msc-border-light);
  border-radius: 12px;
  box-shadow: 0 10px 34px var(--msc-shadow-soft);
}
.msc-single-post .sp-sidebar-academy-link {
  margin-bottom: 1.1rem;
  border-radius: 8px;
}
.msc-single-post .sp-sidebar-label {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.msc-single-post .sp-sidebar-text {
  font-size: 0.8rem;
  color: var(--msc-brown-light);
  margin-bottom: 1.2rem;
}
.msc-single-post .sp-sidebar-btn,
.msc-single-post .sp-sidebar-btn-outline {
  display: block;
  padding: 0.75rem 1.2rem;
  font-size: 0.72rem;
  background: var(--msc-gold);
  border: 1px solid var(--msc-gold);
  color: #fff;
  text-align: center;
}
.msc-single-post .sp-sidebar-btn-outline:hover {
  background: var(--msc-gold-light);
  border-color: var(--msc-gold-light);
  color: #fff;
  box-shadow: 0 8px 24px rgba(214, 173, 96, 0.35);
  transform: translateY(-1px);
}
.msc-single-post .sp-sidebar-cta .sp-sidebar-divider { margin: 1.3rem auto 1.1rem; }

/* Below 1400px the card sits under the article at the full 720px, so it lays out
   horizontally — the banner is a 750px-wide JPEG and finally gets to be one. */
@media (max-width: 1399px) and (min-width: 641px) {
  .msc-single-post .sp-sidebar-cta {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.6rem;
    align-items: center;
    text-align: start;
    padding: 1.8rem;
  }
  .msc-single-post .sp-sidebar-academy-link { grid-row: 1 / span 4; margin-bottom: 0; }
  .msc-single-post .sp-sidebar-btn,
  .msc-single-post .sp-sidebar-btn-outline { justify-self: start; display: inline-block; padding: 0.75rem 2rem; }
  .msc-single-post .sp-sidebar-cta .sp-sidebar-divider { display: none; }
  .msc-single-post .sp-sidebar-ig { justify-self: start; }
}

/* ── Three columns ───────────────────────────────────────────────────────────────────
 * 240 + 720 + 280 + two 3rem gaps = 1336, inside a 1460 section less 2rem padding a side.
 * The reading column is centred between two rails that both carry something — which is
 * the whole point of the change. */
@media (min-width: 1400px) {
  .msc-single-post .sp-article-grid { grid-template-columns: 240px minmax(0, 720px) 280px; }
  .msc-single-post .sp-article-main { grid-column: 2; grid-row: 1; }
  .msc-single-post .sp-sidebar-cta {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
    position: sticky;
    top: calc(var(--msc-header-h) + 2rem);
  }
}

/* ── Under 1080px: the sticky contents bar ───────────────────────────────────────────
 * Previously `.sp-toc-mobile` was an accordion parked at the top of the article, so the
 * moment you started reading there was no TOC on phone or tablet at all — the desktop one
 * is `display:none` there. It sticks under the nav now and stays reachable for the whole
 * post, which is the thing a 5,000-word article actually needs. */
.msc-single-post .sp-toc-mobile { display: block; margin-bottom: 2rem; }
@media (min-width: 1080px) {
  .msc-single-post .sp-toc-mobile { display: none; }
}
.msc-single-post .sp-toc-mobile.is-stuck {
  position: sticky;
  /* The LIVE navbar height, not the resting one — see blog-enhance.js §1. Falls back to
     the layout constant when the script has not run, which is where it sat before. */
  top: var(--msc-header-now, var(--msc-header-h));
  z-index: 90;
  margin-inline: -0.25rem;
  padding: 0.5rem 0.25rem;
  background: linear-gradient(180deg, var(--msc-warm-white) 82%, transparent);
}
.msc-single-post .sp-toc-toggle {
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--msc-cream-white);
  box-shadow: 0 2px 10px var(--msc-shadow-soft);
  /* The captured label is a bare text node inside this flex container, so it is an
     anonymous flex item that no selector can reach. Suppressing wrapping here keeps it on
     one line at 390px; `.sp-toc-here` re-enables its own ellipsis below. */
  white-space: nowrap;
}
/* The chevron is first in the markup, so it is pulled to the end rather than re-ordered
   in the DOM. The label keeps its captured, translated text. */
.msc-single-post .sp-toc-toggle svg { order: 2; margin-inline-start: auto; }
/* Which section you are in, filled in by blog-enhance.js from the page's own headings —
   no new string to translate. */
.msc-single-post .sp-toc-here {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: end;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--msc-brown-faint);
}
.msc-single-post .sp-toc-toggle.open .sp-toc-here { opacity: 0; }
.msc-single-post .sp-toc-mobile-list {
  max-height: 0;
  background: var(--msc-cream-white);
  border: 1px solid var(--msc-border-light);
  border-top: none;
  border-radius: 0 0 8px 8px;
  margin-inline-start: 0;
  margin-top: 0;
  overflow: hidden;
}
/* Was a flat 500px cap, which silently swallowed the tail of any post with more than
   ~18 headings. This one is measured against the viewport and scrolls. */
.msc-single-post .sp-toc-mobile-list.open {
  max-height: min(58vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.msc-single-post .sp-toc-mobile-list a {
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  border-inline-start: 2px solid transparent;
}
.msc-single-post .sp-toc-mobile-list a.depth-3 { padding-inline-start: 2rem; font-size: 0.75rem; }
.msc-single-post .sp-toc-mobile-list a.active {
  color: var(--msc-copper);
  font-weight: 600;
  border-inline-start-color: var(--msc-gold);
  background: linear-gradient(90deg, var(--msc-gold-faint), transparent);
}

@media (max-width: 640px) {
  .msc-single-post .sp-sidebar-cta { padding: 1.3rem; margin-top: 2.5rem; }
  .msc-single-post .sp-sidebar-label { font-size: 1rem; }
}

/* ── The progress bar ────────────────────────────────────────────────────────────────
 * `translateY(-3px)` was an attempt to close the gap by eye. The gap is not a constant:
 * the navbar is 87px at rest and 70px scrolled, and the capture's own detectHeader() only
 * re-measures on load, at +500ms and on resize — never on scroll. So the bar floated in
 * the article text for the entire scroll, which is the only time it is doing anything.
 * The nudge goes; /_msc/blog-enhance.js keeps --msc-header-h true to the live nav. */
.msc-single-post .sp-progress {
  top: var(--msc-header-now, var(--msc-header-h));
  transform: none;
  height: 4px;
  background: rgba(168, 149, 122, 0.14);
}

/* ── The academy card inside the article ─────────────────────────────────────────────
 * Below 1400px blog-enhance.js moves `.sp-sidebar-cta` into `#spContent`, near the middle
 * of the post. Everything here exists because the article's own prose styles then apply to
 * it, and they are MORE specific than the card's: `.sp-content a` and `.sp-content img` are
 * (0,2,1) against the card's (0,2,0), so without these the banner picks up a 2rem margin
 * and a shadow, and the gold button comes out underlined in copper. Each selector below is
 * (0,3,1) or better for exactly that reason — specificity, not emphasis.
 */
.msc-single-post .sp-content .sp-sidebar-cta {
  margin: 3.5rem 0;
}
.msc-single-post .sp-content .sp-sidebar-cta a {
  color: inherit;
  text-decoration: none;
}
.msc-single-post .sp-content .sp-sidebar-cta img {
  margin: 0;
  box-shadow: none;
  border-radius: 8px;
}
.msc-single-post .sp-content .sp-sidebar-cta p {
  margin-bottom: 0;
  max-width: none;
}
.msc-single-post .sp-content .sp-sidebar-cta .sp-sidebar-label { margin-bottom: 0.5rem; }
.msc-single-post .sp-content .sp-sidebar-cta .sp-sidebar-text { margin-bottom: 1.2rem; }
.msc-single-post .sp-content .sp-sidebar-cta .sp-sidebar-btn,
.msc-single-post .sp-content .sp-sidebar-cta .sp-sidebar-btn-outline {
  color: #fff;
  background: var(--msc-gold);
}
.msc-single-post .sp-content .sp-sidebar-cta .sp-sidebar-ig-text { color: var(--msc-brown-medium); }
/* The card is inserted directly above an h2, and that h2 draws the rule that separates
   sections. Two horizontal edges 1rem apart read as a mistake; the card is the break. */
.msc-single-post .sp-content .sp-sidebar-cta + h2 {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ── The calculator card at the end of an article ─────────────────────────────────────
 * A variant of `.sp-embed-card`, which already exists for in-content links to other posts —
 * same object, same visual language, so the page gains no new vocabulary. Rendered into the
 * static HTML by BlogPost.astro; see the comment there for why it exists at all (the exact
 * -match anchor the in-prose links cannot carry without writing words into Sean's prose).
 */
.msc-single-post .sp-embed-card--tool {
  margin: 3rem 0;
  border-color: var(--msc-gold-faint);
  box-shadow: 0 8px 28px var(--msc-shadow-soft);
}
.msc-single-post .sp-embed-card--tool .sp-embed-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 🪤 The source is the 1200x630 OG card, so it is far wider than its 220px column. Without
     an explicit object-position it crops to the centre and loses the chart. */
  object-position: 50% 45%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.msc-single-post .sp-embed-card--tool .sp-embed-card-eyebrow { color: var(--msc-gold); }

/* The base card is a fixed `220px 1fr` grid at every width, which leaves ~136px for the text
   on a 390px screen. That is pre-existing and affects the post cards too, so it is NOT changed
   here — only this variant stacks, which is the one being introduced. */
@media (max-width: 560px) {
  .msc-single-post .sp-embed-card--tool { grid-template-columns: minmax(0, 1fr); }
  .msc-single-post .sp-embed-card--tool .sp-embed-card-img { aspect-ratio: 2 / 1; }
}

/* ── Archive pages: the fixed navbar, and the white band under the footer ────────────────────
 * Two measured defects on the 697 captured WordPress archive pages (category, tag, /archives/),
 * found by Sean on /case-studies/ (2026-10-05) and measured across the family:
 *
 * 1. THE HEADING SITS UNDER THE BAR. These captures predate the redesigned fixed navbar: their
 *    archive title starts at y=60 while the bar is fixed, 87px tall (measured at 1280px), so
 *    27px of every archive `<h1>` is hidden — on the category pages that DO have posts too
 *    (/blog/category/announcements/ measured the same as the empty /case-studies/).
 *    `--msc-nav-height` is the navbar's own variable; the +24px is the guard so the heading
 *    never touches the bar even on an archive capture without its own top margin (the sampled
 *    captures all carry 60px, which still separates the two).
 *
 * 2. THE BAND UNDER THE FOOTER. On a page shorter than the viewport — an empty archive, a
 *    no-result search — body ends above the fold and the area under the dark footer showed the
 *    body's white: 83px of white on /case-studies/ (footer ends at 817 of 900, measured).
 *    Painting the root the footer's own colour removes the band with zero layout change; long
 *    pages are unaffected because the body covers the viewport.
 */
#brx-content .bricks-archive-title-wrapper {
  padding-top: calc(var(--msc-nav-height, 5.125rem) + 24px);
}
html {
  background-color: var(--msc-deep-brown, #3B2F26);
}

/* ── Top-of-post academy course CTA (blog/academy-top-cta) ───────────────────────
 * A conversion block at the top of the article on the two "how to read" posts.
 * Rendered statically in BlogPost.astro, driven by src/data/academy-top-cta.json. */
.msc-single-post .msc-academy-topcta {
  margin: 1.5rem auto 2rem;
  padding: 1.5rem 1.75rem;
  border-inline-start: 4px solid var(--msc-gold);
  border-radius: 8px;
  background: var(--msc-cream);
}
.msc-single-post .msc-academy-topcta-eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--msc-font-accent);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--msc-copper);
}
.msc-single-post .msc-academy-topcta-title {
  margin: 0 0 0.5rem;
  font-family: var(--msc-font-heading);
  line-height: 1.3;
  color: var(--msc-dark-brown);
}
.msc-single-post .msc-academy-topcta-excerpt {
  margin: 0 0 1rem;
  color: var(--msc-brown-medium);
  line-height: 1.6;
}
.msc-single-post .msc-academy-topcta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.msc-single-post .msc-academy-topcta-cta {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  background: var(--msc-gold);
  color: var(--msc-dark-brown);
  font-weight: 700;
  text-decoration: none;
}
.msc-single-post .msc-academy-topcta-cta:hover {
  text-decoration: none;
  filter: brightness(0.96);
}
.msc-single-post .msc-academy-topcta-fallback {
  color: var(--msc-copper);
  font-weight: 600;
  text-decoration: underline;
}