/* Jc's artwork AS the header bar (approved D3, Oct 25 2026): gold star medallion + lettering with the smoke recoloured to the site palette (teal / emerald / peacock on ink) + gold.
   Phones / tablets (< 960px): logo centred, smoke flowing out to both sides, gold menu button on the right in a calm glow.
   Desktop: logo on the left, the same smoke continuing behind the nav. The art strip is the header-inner background; the brand link is an invisible hit area over the painted lettering. */
.site-header.hdr-art{--hpad:12px;--hh:112px;--bandH:510;--lx:160;--lw:655;
  background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header.hdr-art::after{height:1px;background:linear-gradient(90deg,transparent,rgba(255,120,30,.6) 15%,rgba(232,178,74,.95) 50%,rgba(255,120,30,.6) 85%,transparent);box-shadow:0 0 10px rgba(255,110,20,.35)}
.hdr-art .header-inner{position:relative;max-width:none;height:var(--hh);padding:0 var(--hpad);gap:12px;
  background-color:#000;background-repeat:no-repeat;background-size:auto 100%;
  background-position:calc(var(--hpad) - var(--hh) * var(--lx) / var(--bandH)) 0}
/* scrim layer above the art, below the controls */
.hdr-art .header-inner::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle at calc(100% - var(--hpad) - 24px) 50%,rgba(0,0,0,.82) 0,rgba(0,0,0,.6) 30px,rgba(0,0,0,0) 62px)}
.hdr-art .header-inner>*{position:relative;z-index:1}
/* brand = invisible hit area over the painted lettering */
.hdr-art .header-inner .brand{flex:none;display:block;width:calc(var(--hh) * var(--lw) / var(--bandH));height:100%;min-height:44px;padding:0;margin:0;overflow:hidden}
.hdr-art .brand .brand-gear,.hdr-art .brand .bname{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html:has(.hdr-art){scroll-padding-top:calc(112px + 14px)}
/* gold & black controls */
.hdr-art .menu-btn{background:rgba(0,0,0,.78);border:1px solid #c8922f;color:#f3c75e;box-shadow:inset 0 0 0 1px rgba(255,140,40,.15),0 0 12px rgba(0,0,0,.9),0 0 8px rgba(255,120,30,.25)}
.hdr-art .menu-btn[aria-expanded="true"]{background:linear-gradient(180deg,#1a1006,#000)}
.hdr-art .header-cta.btn{background:linear-gradient(180deg,#f3cf72,#c8902f 55%,#9a6418);color:#1a0f02;border:1px solid #6e4410;text-shadow:0 1px 0 rgba(255,230,160,.5);box-shadow:inset 0 1px 0 rgba(255,240,190,.7),0 0 14px rgba(255,140,40,.35)}
.hdr-art .header-cta.btn:hover{background:linear-gradient(180deg,#ffdc85,#d89c35 55%,#a86d1c);color:#000}
.hdr-art .nav a{color:#efc867;text-shadow:0 1px 2px #000,0 0 8px #000}.hdr-art .nav a:hover{color:#ffe7a8}
.hdr-art .nav .nav-shop{color:#ffd23f}
.hdr-art .nav a::after{background:linear-gradient(90deg,#ff7a1e,#f0c35a)}
.hdr-art .mnav{background:rgba(0,0,0,.97);border-top-color:rgba(232,160,60,.4);max-height:calc(100vh - var(--hh));max-height:calc(100dvh - var(--hh))}
@media (max-width:359px){.site-header.hdr-art{--hpad:8px}}
@media (min-width:960px){
  .site-header.hdr-art{--hpad:28px;--hh:124px}
  html:has(.hdr-art){scroll-padding-top:calc(124px + 14px)}
  /* dark scrim behind the nav + Book Now, clear over the lettering */
  .hdr-art .header-inner::before{background:linear-gradient(90deg,rgba(0,0,0,0) calc(var(--hpad) + var(--hh) * var(--lw) / var(--bandH) + 4px),rgba(0,0,0,.5) calc(var(--hpad) + var(--hh) * var(--lw) / var(--bandH) + 70px),rgba(0,0,0,.5) calc(100% - 60px),rgba(0,0,0,.35) 100%)}
}
/* ===== site palette (ink #04161a, brass / jade accents) for the header controls ===== */
.site-header.hdr-C{background:#04161a}
.site-header.hdr-C::after{background:linear-gradient(90deg,transparent,rgba(227,192,136,.85) 15%,rgba(95,174,143,.75) 50%,rgba(227,192,136,.85) 85%,transparent);box-shadow:0 0 10px rgba(43,143,138,.35)}
.hdr-C .menu-btn{background:rgba(4,22,26,.8);border-color:#d6a04a;color:#f3cf72;box-shadow:inset 0 0 0 1px rgba(95,174,143,.18),0 0 12px rgba(0,0,0,.8),0 0 8px rgba(227,192,136,.25)}
.hdr-C .menu-btn[aria-expanded="true"]{background:linear-gradient(180deg,#0a2628,#04161a)}
.hdr-C .header-cta.btn{box-shadow:inset 0 1px 0 rgba(255,240,190,.7),0 0 14px rgba(227,192,136,.35)}
.hdr-C .nav a{text-shadow:0 1px 2px #04161a,0 0 8px #04161a}
.hdr-C .nav a::after{background:linear-gradient(90deg,#5fae8f,#f0c35a)}
.hdr-C .mnav{background:rgba(4,22,26,.97);border-top-color:rgba(227,192,136,.4)}
/* C: sacred-geometry gold menu button (Jc's reference), no box; 52px tap target (48px on very small phones) */
.hdr-C .menu-btn{width:52px;height:52px;border:0;border-radius:10px;background:radial-gradient(circle at 50% 50%,rgba(4,22,26,.75) 0,rgba(4,22,26,.55) 55%,rgba(4,22,26,0) 72%);box-shadow:none;color:#f3cf72}
.hdr-C .menu-btn .mb-ico{width:52px;height:52px;stroke:none;filter:drop-shadow(0 0 1.6px rgba(255,214,120,.9)) drop-shadow(0 0 5px rgba(227,170,70,.45))}
.hdr-C .menu-btn .mb-x{display:none}
.hdr-C .menu-btn[aria-expanded="true"]{background:radial-gradient(circle at 50% 50%,rgba(10,38,40,.9) 0,rgba(4,22,26,.6) 55%,rgba(4,22,26,0) 72%)}
.hdr-C .menu-btn[aria-expanded="true"] .mb-bars,.hdr-C .menu-btn[aria-expanded="true"] .mb-flare{display:none}
.hdr-C .menu-btn[aria-expanded="true"] .mb-x{display:inline}
.hdr-C .menu-btn:hover .mb-ico{filter:drop-shadow(0 0 2px rgba(255,226,150,1)) drop-shadow(0 0 8px rgba(243,207,114,.6))}
.hdr-C .menu-btn:focus-visible{outline:2px solid #f3cf72;outline-offset:2px}
@media (max-width:359px){.hdr-C .menu-btn,.hdr-C .menu-btn .mb-ico{width:48px;height:48px}}
/* ===== D3 art ===== */
.site-header.hdr-D3{--bandH:619;--lx:240;--lw:682;--lpad:18px}
.hdr-D3 .header-inner{background-color:#04161a;background-position:50% 0;
  background-image:url(hdr-d3-phone-v1.webp);background-image:image-set(url(hdr-d3-phone-v1.avif) type("image/avif"),url(hdr-d3-phone-v1.webp) type("image/webp"))}
/* calm glow + gold sparks wrapping the menu button (centre = 100% - hpad - 26px) */
.hdr-D3 .header-inner::before{background:url(btn-halo-v1.webp) right calc(var(--hpad) - 49px) top 0/150px 112px no-repeat}
.hdr-D3 .menu-btn{margin-left:auto}
@media (max-width:959px){
  .hdr-D3 .header-inner .brand{position:absolute;left:50%;top:0;transform:translateX(-50%)}
}
@media (min-width:440px) and (max-width:959px){
  .hdr-D3 .header-inner{background-image:url(hdr-d3-tab-v1.webp);background-image:image-set(url(hdr-d3-tab-v1.avif) type("image/avif"),url(hdr-d3-tab-v1.webp) type("image/webp"))}
}
@media (min-width:960px){
  .site-header.hdr-D3{--lpad:32px}
  .hdr-D3 .header-inner{background-position:calc(var(--lpad) - var(--hh) * var(--lx) / var(--bandH)) 0;
    background-image:url(hdr-d3-desk-1x-v1.webp);background-image:image-set(url(hdr-d3-desk-1x-v1.avif) type("image/avif") 1x,url(hdr-d3-desk-2x-v1.avif) type("image/avif") 2x,url(hdr-d3-desk-1x-v1.webp) type("image/webp") 1x,url(hdr-d3-desk-2x-v1.webp) type("image/webp") 2x)}
  .hdr-D3 .header-inner .brand{margin-left:calc(var(--lpad) - var(--hpad))}
  /* dark scrim behind the nav + Book Now, clear over the lettering */
  .hdr-D3 .header-inner::before{background:linear-gradient(90deg,rgba(4,22,26,0) calc(var(--lpad) + var(--hh) * var(--lw) / var(--bandH) + 10px),rgba(4,22,26,.5) calc(var(--lpad) + var(--hh) * var(--lw) / var(--bandH) + 80px),rgba(4,22,26,.5) calc(100% - 60px),rgba(4,22,26,.3) 100%)}
}
/* footer: gold star medallion (matches the header art) instead of the old gear */
.footer-brand .footer-star{filter:drop-shadow(0 0 3px rgba(243,207,114,.55))}
/* pages without a menu button (priority): no button glow on phones / tablets */
@media (max-width:959px){.hdr-D3 .header-inner:not(:has(.menu-btn))::before{background:none}}