/* Dark site frame (menu, phone menu, footer) for the blog and legal pages.
   These pages keep their own article styles; this file loads after them and
   overrides their catch-all nav/footer rules. Article text stays on a light
   reading card, the rest of the page goes dark like the main site. */

body{background:#121010!important;-webkit-font-smoothing:antialiased}

/* menu */
nav.site-nav{position:sticky;top:env(safe-area-inset-top,0px);left:auto;right:auto;z-index:200;display:block;width:auto;height:auto;margin:0;padding:0;
  background:rgba(18,16,16,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0;border-bottom:1px solid rgba(56,50,47,.6);box-shadow:none;
  font-family:"Manrope","Segoe UI",system-ui,sans-serif;transition:none}
nav.site-nav .fwrap{max-width:1180px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
nav.site-nav a{text-decoration:none;background:none;border:0;box-shadow:none;padding:0;margin:0;height:auto;line-height:normal}
nav.site-nav .brand{display:flex;align-items:center;gap:10px;font:800 15px "Manrope",sans-serif;letter-spacing:.14em;color:#F4EFE7}
nav.site-nav .brand img{width:40px;height:auto;display:block}
nav.site-nav .navr{display:flex;align-items:center;gap:18px}
nav.site-nav .ghost{color:#ADA39A;font:600 15px "Manrope",sans-serif}
nav.site-nav .ghost:hover,nav.site-nav .ghost[aria-current]{color:#F4EFE7}
nav.site-nav .btn{display:inline-flex;align-items:center;background:#B8252A;color:#fff;font:700 14px/1 "Manrope",sans-serif;padding:12px 16px;border-radius:12px;white-space:nowrap}
nav.site-nav .btn:hover{background:#D2353B}
nav.site-nav .drop{position:relative}
nav.site-nav .drop>button{background:none;border:0;color:#ADA39A;font:600 15px "Manrope",sans-serif;cursor:pointer;padding:8px 0}
nav.site-nav .drop>button:hover,nav.site-nav .drop:focus-within>button{color:#F4EFE7}
nav.site-nav .menu{position:absolute;top:100%;left:-14px;min-width:230px;background:#1D1A19;border:1px solid #38322F;border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none}
nav.site-nav .drop:hover .menu,nav.site-nav .drop:focus-within .menu{display:block}
nav.site-nav .menu a{display:block;padding:10px 12px;border-radius:8px;font:600 14px "Manrope",sans-serif;color:#F4EFE7}
nav.site-nav .menu a:hover{background:#272322}
.burger{display:none;position:relative;width:42px;height:42px;flex:none;border:0;border-radius:50%;background:rgba(244,239,231,.08);cursor:pointer;padding:0}
.burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:#F4EFE7;transition:transform .25s ease,top .25s ease}
.burger span:first-child{top:16px}
.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.sheet{display:none}
.site-nav a:focus-visible,.site-nav button:focus-visible,.site-foot a:focus-visible{outline:2px solid #F2D9AE;outline-offset:3px}

/* footer */
footer.site-foot{display:block;margin:0;background:#121010;border:0;border-top:1px solid #38322F;padding:56px 0 30px;color:#ADA39A;font:400 14px/1.6 "Manrope",sans-serif;text-align:left}
footer.site-foot .fwrap{max-width:1180px;margin:0 auto;padding:0 20px}
footer.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:28px}
footer.site-foot h4{margin:0 0 12px;font:700 12px "Manrope",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#F4EFE7}
footer.site-foot a{display:block;text-decoration:none;color:#ADA39A;padding:4px 0;font-size:14px;background:none}
footer.site-foot a:hover{color:#F4EFE7}
footer.site-foot .brand{display:inline-flex;align-items:center;gap:10px;font:800 15px "Manrope",sans-serif;letter-spacing:.14em;color:#F4EFE7}
footer.site-foot .brand img{width:40px;height:auto}
footer.site-foot p{margin:12px 0 18px;max-width:22em;color:#ADA39A}
footer.site-foot .stores{display:flex;flex-wrap:wrap;gap:10px}
footer.site-foot .store{display:inline-flex;align-items:center;border:1px solid #38322F;border-radius:10px;padding:9px 13px;font:600 13px "Manrope",sans-serif;color:#F4EFE7}
footer.site-foot .socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
footer.site-foot .socials a{display:inline;padding:0}
footer.site-foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid #38322F;font-size:12.5px}

@media (max-width:860px){
  nav.site-nav .drop,nav.site-nav .ghost{display:none}
  .burger{display:inline-block}
  .sheet.open{display:block;position:fixed;inset:64px 0 0;z-index:199;background:#121010;padding:20px;overflow:auto}
  .sheet a{display:block;padding:14px 4px;border-bottom:1px solid #38322F;text-decoration:none;font:600 18px "Manrope",sans-serif;color:#F4EFE7}
  .sheet a[aria-current]{color:#F2D9AE}
  footer.site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.site-foot .about{grid-column:1 / -1}
}
@media (max-width:480px){
  nav.site-nav .navr{gap:10px}
  nav.site-nav .btn{padding:10px 12px;font-size:13px}
  nav.site-nav .brand{font-size:13px;letter-spacing:.1em;gap:8px}
  nav.site-nav .brand img{width:32px}
  .burger{width:40px;height:40px}
  .burger span{left:12px;right:12px}
  .burger span:first-child{top:15px}
  .burger span:last-child{top:23px}
  .burger[aria-expanded="true"] span{top:19px}
}

/* ---------- blog posts: dark around a light reading card ---------- */
.hero h1,.blog-header h1,.page-header h1{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:600!important;letter-spacing:0!important;line-height:1.08!important}
.hero h1{font-size:clamp(36px,6vw,60px)!important}
.hero-eyebrow{background:rgba(242,217,174,.14)!important;color:#F2D9AE!important}
nav.breadcrumb{background:transparent!important;border-bottom:1px solid #38322F!important}
nav.breadcrumb li{color:#ADA39A!important}
nav.breadcrumb li::after{color:#5a524d!important}
nav.breadcrumb li:last-child{color:#F4EFE7!important}
nav.breadcrumb a{color:#F2D9AE!important}
.article-body{background:#FBF8F3!important;box-shadow:0 30px 80px rgba(0,0,0,.45)!important}
.article-body h2,.article-body h3{color:#1A1412}
.article-body h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:30px;letter-spacing:0}
.cta-banner{background:linear-gradient(180deg,#2A2420,#1D1A19)!important;border:1px solid rgba(242,217,174,.45)}
.cta-banner::before{display:none}
.cta-banner h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:32px!important;color:#F4EFE7!important}
.cta-banner p{color:#ADA39A!important}
.cta-btn{background:#B8252A!important;color:#fff!important}
.related-section h3{color:#F4EFE7!important}
.related-card{background:#1D1A19!important;border:1px solid #38322F;box-shadow:none!important}
.related-card .tag{color:#F2D9AE!important}
.related-card .title{color:#F4EFE7!important}

/* ---------- blog index ---------- */
.blog-header h1{font-size:clamp(40px,6vw,64px)!important}
.filter-bar{display:none!important}

/* ---------- legal pages ---------- */
.page-header{background:transparent!important}
.page-header h1{color:#F4EFE7!important;font-size:clamp(36px,5vw,52px)!important}
.page-header p{color:#ADA39A!important}
.termly-wrap{background:#FBF8F3;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}

/* blog index header: dark with a soft gold glow instead of the old red banner */
.blog-header{background:radial-gradient(60% 80% at 50% 0%,rgba(242,217,174,.12),transparent 70%),#121010!important;padding:72px 24px 48px!important}
.blog-header::before{display:none!important}
.blog-header h1{color:#F4EFE7!important}
.blog-header p{color:#ADA39A!important}
/* legal pages: the old menu was fixed, so the old header left room for it */
.page-header{padding-top:56px!important}
@media (max-width:768px){.page-header{padding-top:40px!important}}
/* CSAE policy: its text sits on the page, so give it the same reading card */
.policy-wrap{background:#FBF8F3;color:#030A19;border-radius:20px;padding:40px 44px!important;margin:0 auto 80px!important;box-shadow:0 30px 80px rgba(0,0,0,.45)}
@media (max-width:768px){.policy-wrap{padding:28px 20px!important;margin:0 16px 60px!important}}

/* Refinement, 2 Oct: calm buttons and the Events menu group, matching home.css */
nav.site-nav .btn{background:transparent;color:#F4EFE7;border:1px solid rgba(244,239,231,.28);border-radius:999px;padding:10px 16px;font-size:13.5px}
nav.site-nav .btn:hover{background:rgba(244,239,231,.06);border-color:#F4EFE7}
nav.site-nav .menu hr{border:0;border-top:1px solid #38322F;margin:6px 4px}
.sheet .sgroup{border-bottom:1px solid #38322F}
.sheet .sgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font:600 18px "Manrope",sans-serif;color:#F4EFE7}
.sheet .sgroup summary::-webkit-details-marker{display:none}
.sheet .sgroup summary::after{content:"+";font:400 24px/1 "Manrope",sans-serif;color:#F2D9AE;transition:transform .2s}
.sheet .sgroup[open] summary::after{transform:rotate(45deg)}
.sheet .sgroup a{border-bottom:0!important;padding:10px 4px 10px 16px!important;font-size:16px!important;color:#ADA39A!important}
.sheet .sgroup a:last-child{padding-bottom:16px!important}
.sheet .sheet-cta{display:flex!important;justify-content:center;margin-top:24px;border-bottom:0!important;background:#F4EFE7;color:#141212!important;border-radius:999px;padding:16px 26px!important;font:700 16px "Manrope",sans-serif!important}
.cta-btn{background:#F4EFE7!important;color:#141212!important;border-radius:999px!important}
@media (max-width:860px){nav.site-nav .btn{display:none}}
/* wide comparison tables in articles scroll inside the reading card on phones */
.article-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* desktop menu: logo left, links centred, sign in + button right */
nav.site-nav .fwrap{display:grid;grid-template-columns:1fr auto 1fr}
nav.site-nav .navc{display:flex;align-items:center;gap:30px}
nav.site-nav .navr{justify-self:end}
nav.site-nav .brand{justify-self:start}
@media (max-width:860px){nav.site-nav .fwrap{display:flex}nav.site-nav .navc{display:none}}
