/* Chows Header — front-end
   Every colour, size and font comes from CSS variables printed by PHP. */

:root{
  --chows-pad-x: clamp(22px, 4.5vw, 74px);
  --chows-ease: cubic-bezier(.16,.84,.36,1);
  --chows-ease-soft: cubic-bezier(.22,1,.36,1);
}

/* ---------- grain ---------- */
.chows-grain{
  position:fixed; inset:-120%; z-index:99998; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:chows-grain 6s steps(6) infinite;
}
@keyframes chows-grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)}
  40%{transform:translate(4%,-6%)} 60%{transform:translate(-4%,-4%)}
  80%{transform:translate(6%,5%)}
}

/* ---------- header bar ---------- */
.chows-header{
  position:fixed; top:0; left:0; right:0; z-index:99990;
  height:var(--chows-h);
  padding:0 var(--chows-pad-x);
  display:flex; align-items:center; justify-content:space-between;
  background:transparent;
  transition:background .6s var(--chows-ease-soft), backdrop-filter .6s var(--chows-ease-soft), transform .5s var(--chows-ease-soft);
}
.chows-header::after{
  content:""; position:absolute; left:var(--chows-pad-x); right:var(--chows-pad-x); bottom:0;
  height:1px; background:var(--chows-hairline);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s var(--chows-ease-soft);
}
.chows-header.is-scrolled{
  background:linear-gradient(to bottom, var(--chows-scroll-bg), transparent);
  -webkit-backdrop-filter:blur(var(--chows-scroll-blur)) saturate(120%);
  backdrop-filter:blur(var(--chows-scroll-blur)) saturate(120%);
}
.chows-header.is-scrolled::after{transform:scaleX(1)}
.chows-header.is-hidden{transform:translateY(-102%)}
.chows-header.nav-is-open{transform:none !important; background:transparent; backdrop-filter:none}
.chows-header.nav-is-open::after{transform:scaleX(0)}

.admin-bar .chows-header{top:32px}
@media screen and (max-width:782px){ .admin-bar .chows-header{top:46px} }

/* ---------- logo ---------- */
.chows-logo{
  font-family:var(--chows-display);
  font-weight:300;
  font-size:var(--chows-logo-size);
  letter-spacing:var(--chows-logo-spacing);
  color:var(--chows-logo-color);
  line-height:1; text-decoration:none;
  padding-left:var(--chows-logo-spacing);
  transition:color .4s var(--chows-ease), letter-spacing .6s var(--chows-ease-soft);
}
.chows-logo:hover,.chows-logo:focus{
  color:var(--chows-logo-hover);
  letter-spacing:calc(var(--chows-logo-spacing) + .06em);
}
.chows-stem{position:relative}
.chows-stem::after{
  content:""; position:absolute; left:.30em; top:-.55em; bottom:-.30em;
  width:1px; background:currentColor; opacity:.85;
}
.chows-logo-img{padding-left:0}
.chows-logo-img img{display:block; height:var(--chows-logo-h); width:auto}

/* ---------- burger ---------- */
/* the !important run is deliberate: themes style every <button> on the page */
.chows-header .chows-burger{
  position:relative; z-index:99995;
  display:flex !important; align-items:center; gap:16px;
  width:auto !important; min-width:0 !important; height:auto !important;
  padding:10px 0 10px 10px !important; margin:0 -4px 0 0 !important;
  background:none !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  outline:none; text-transform:none !important; line-height:1 !important;
  font-size:inherit !important; color:inherit !important; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.chows-header .chows-burger:hover,
.chows-header .chows-burger:focus,
.chows-header .chows-burger:active{
  background:none !important; border:0 !important; box-shadow:none !important; color:inherit !important;
}
.chows-header .chows-burger:focus-visible{outline:1px solid var(--chows-gold); outline-offset:8px}
.chows-burger-label{
  height:12px; overflow:hidden; line-height:12px;
  font-family:var(--chows-ui);
  font-size:10px; letter-spacing:.32em; text-transform:uppercase; font-weight:300;
  color:var(--chows-cream-soft);
  transition:color .4s var(--chows-ease);
}
.chows-burger-label i{display:block; font-style:normal; transition:transform .55s var(--chows-ease-soft)}
.chows-burger-lines{display:block; width:30px}
.chows-burger-lines span{
  display:block; width:30px; height:1px; background:var(--chows-burger);
  transition:transform .55s var(--chows-ease-soft), width .4s var(--chows-ease-soft), background .4s;
}
.chows-burger-lines span + span{margin-top:8px}
.chows-burger-lines span:nth-child(2){width:20px; margin-left:auto}
.chows-burger:hover .chows-burger-label{color:var(--chows-gold)}
.chows-burger:hover .chows-burger-lines span:nth-child(2){width:30px}
.chows-burger[aria-expanded="true"] .chows-burger-label i{transform:translateY(-12px)}
.chows-burger[aria-expanded="true"] .chows-burger-lines span{background:var(--chows-gold)}
.chows-burger[aria-expanded="true"] .chows-burger-lines span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.chows-burger[aria-expanded="true"] .chows-burger-lines span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg); width:30px; margin-left:0}

/* ---------- overlay ---------- */
.chows-overlay{
  position:fixed; inset:0; z-index:99985;
  background:linear-gradient(115deg, var(--chows-overlay) 38%, var(--chows-overlay-2) 100%);
  -webkit-clip-path:inset(0 0 100% 0);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--chows-ease-soft);
  visibility:hidden;
  display:flex; align-items:center;
  padding:var(--chows-h) var(--chows-pad-x) clamp(24px,5vh,60px);
  overflow-y:auto;
}
.chows-overlay.is-open{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
  visibility:visible;
}
.chows-overlay.has-light::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--chows-mx,72%) var(--chows-my,26%), var(--chows-glow), transparent 70%);
}
.chows-overlay.has-grid::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, var(--chows-hairline) 118px 119px),
    repeating-linear-gradient(0deg, transparent 0 118px, var(--chows-hairline) 118px 119px);
  -webkit-mask-image:linear-gradient(100deg, transparent 30%, #000 120%);
  mask-image:linear-gradient(100deg, transparent 30%, #000 120%);
}
.chows-overlay-inner{
  position:relative; z-index:2;
  width:100%; max-width:1400px; margin:0 auto;
  min-height:100%;
  display:flex; flex-direction:column;
}

/* ---------- nav ---------- */
.chows-nav{
  position:relative;
  list-style:none; margin:auto 0; padding:0;   /* vertically centred, meta stays at the bottom */
  width:-moz-fit-content; width:fit-content; max-width:100%;
}
.chows-nav li{list-style:none; margin:0; padding:0}
.chows-nav > li{
  opacity:0; transform:translateY(26px); filter:blur(6px);
  transition:opacity .7s var(--chows-ease-soft), transform .8s var(--chows-ease-soft), filter .7s var(--chows-ease-soft);
}
.chows-overlay.is-open .chows-nav > li{opacity:1; transform:none; filter:blur(0)}
.chows-overlay.is-open .chows-nav > li:nth-child(1){transition-delay:.22s}
.chows-overlay.is-open .chows-nav > li:nth-child(2){transition-delay:.29s}
.chows-overlay.is-open .chows-nav > li:nth-child(3){transition-delay:.36s}
.chows-overlay.is-open .chows-nav > li:nth-child(4){transition-delay:.43s}
.chows-overlay.is-open .chows-nav > li:nth-child(5){transition-delay:.50s}
.chows-overlay.is-open .chows-nav > li:nth-child(6){transition-delay:.57s}
.chows-overlay.is-open .chows-nav > li:nth-child(7){transition-delay:.64s}

.chows-nav-link{
  display:inline-block; text-decoration:none;
  font-family:var(--chows-display);
  font-weight:var(--chows-nav-weight);
  font-size:clamp(28px, 5.2vw, var(--chows-nav-size));
  line-height:1.42;
  color:var(--chows-gold);
  transition:color .35s var(--chows-ease);
}
/* hover = colour only; the rest of the list steps back */
.chows-nav:hover .chows-nav-link{color:var(--chows-gold-faint)}
.chows-nav .chows-nav-link:hover,
.chows-nav .chows-nav-link:focus,
.chows-nav > li.is-current > .chows-nav-link{color:var(--chows-cream)}

.chows-arrow{
  position:relative; display:inline-block; vertical-align:middle;
  width:0; height:1px; margin-left:0; background:currentColor; opacity:0;
  transition:width .55s var(--chows-ease-soft), margin .55s var(--chows-ease-soft), opacity .35s linear;
}
.chows-arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:7px; height:7px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.chows-has-sub:hover .chows-arrow,
.chows-nav-link:focus .chows-arrow{width:78px; margin-left:26px; opacity:1}

/* ---------- submenu (inline accordion, all screen sizes) ---------- */
.chows-submenu{
  width:min(460px,100%);
  margin:0 0 0 6px;
  padding:0 0 0 clamp(18px,2vw,30px);
  border-left:1px solid var(--chows-hairline);
  max-height:0; overflow:hidden;
  transition:max-height .6s var(--chows-ease-soft), padding .45s var(--chows-ease-soft);
}
/* ---------- always-visible dropdown (no toggling at all) ---------- */
.chows-subs-always .chows-submenu{
  max-height:none; overflow:visible;
  padding-top:clamp(10px,1.4vh,16px);
  padding-bottom:clamp(14px,2vh,22px);
}
.chows-subs-always .chows-arrow{display:none}
.chows-subs-always .chows-sub-label{margin-bottom:10px}
.chows-subs-always .chows-sub-link{
  padding:7px 0; border-bottom:0;
  color:var(--chows-cream-faint);
}
.chows-subs-always .chows-sub-link:hover,
.chows-subs-always .chows-sub-link:focus{
  color:var(--chows-gold-lite); padding-left:12px;
}
/* the parent label keeps its own colour while its children are hovered */
.chows-subs-always .chows-nav:hover .chows-sub-link{color:var(--chows-cream-faint)}

/* ---------- expandable dropdown, driven purely by CSS ---------- */
.chows-sub-toggle{
  position:absolute; width:1px; height:1px;
  opacity:0; margin:0; padding:0; border:0; clip:rect(0 0 0 0);
}
/* the parent is a <label>, so themes tend to style it as a form label — override hard */
.chows-nav label.chows-nav-link,
.chows-nav .chows-parent{
  display:inline-block !important;
  margin:0 !important; padding:0 !important;
  font-family:var(--chows-display) !important;
  font-size:clamp(28px, 5.2vw, var(--chows-nav-size)) !important;
  font-weight:var(--chows-nav-weight) !important;
  line-height:1.42 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  width:auto !important; max-width:none !important; float:none !important;
  cursor:pointer; user-select:none; -webkit-user-select:none;
}
.chows-sub-toggle:checked ~ .chows-submenu{
  max-height:900px;
  padding-top:clamp(12px,1.6vh,20px);
  padding-bottom:clamp(16px,2.4vh,28px);
}
.chows-sub-toggle:checked ~ .chows-parent{color:var(--chows-cream)}
.chows-sub-toggle:checked ~ .chows-parent .chows-arrow{
  width:78px; margin-left:26px; opacity:1;
}
.chows-sub-toggle:focus-visible ~ .chows-parent{outline:1px solid var(--chows-gold); outline-offset:8px}

/* hover previews the dropdown; a click locks it open */
@media (hover:hover) and (min-width:901px){
  .chows-subs-toggle .chows-has-sub:hover > .chows-submenu{
    max-height:900px;
    padding-top:clamp(12px,1.6vh,20px);
    padding-bottom:clamp(16px,2.4vh,28px);
  }
}
.chows-submenu ul{list-style:none; margin:0; padding:0}
.chows-submenu li{opacity:1; transform:none}
.chows-sub-label{
  font-family:var(--chows-ui);
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--chows-gold-dim); margin:0 0 14px;
}
.chows-sub-link{
  display:block; padding:10px 0; text-decoration:none;
  font-family:var(--chows-ui); font-weight:300;
  font-size:var(--chows-sub-size);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--chows-cream-soft);
  border-bottom:1px solid var(--chows-hairline);
  transition:color .35s, padding-left .45s var(--chows-ease-soft), border-color .35s;
}
.chows-sub-link:hover,.chows-sub-link:focus{
  color:var(--chows-gold-lite); padding-left:14px; border-color:var(--chows-gold-dim);
}

/* ---------- meta row (pinned to the bottom of the overlay) ---------- */
.chows-meta{
  margin-top:auto; padding-top:clamp(30px,6vh,60px);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,4vw,54px); flex-wrap:wrap;
  font-family:var(--chows-ui);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:300;
  color:var(--chows-cream-faint);
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--chows-ease-soft) .55s, transform .7s var(--chows-ease-soft) .55s;
}
.chows-meta-left,
.chows-meta-right{
  display:flex; align-items:center; gap:clamp(16px,3vw,40px); flex-wrap:wrap;
}
.chows-meta-right{margin-left:auto; justify-content:flex-end}
.chows-overlay.is-open .chows-meta{opacity:1; transform:none}
.chows-meta a{color:inherit; text-decoration:none; transition:color .35s}
.chows-meta a:hover{color:var(--chows-gold)}
.chows-meta span{color:var(--chows-gold-dim)}
.chows-cta{
  position:relative; overflow:hidden;
  padding:14px 30px;
  border:1px solid var(--chows-gold-dim);
  color:var(--chows-gold) !important;
  font-size:11px; letter-spacing:.3em;
  transition:color .45s var(--chows-ease-soft), border-color .45s;
}
.chows-cta span{position:relative; z-index:2}
.chows-cta::before{
  content:""; position:absolute; inset:0; z-index:1; background:var(--chows-gold);
  transform:translateY(101%); transition:transform .55s var(--chows-ease-soft);
}
.chows-cta:hover{color:var(--chows-overlay) !important; border-color:var(--chows-gold)}
.chows-cta:hover::before{transform:translateY(0)}

body.chows-nav-open{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .chows-burger-label{display:none}
  .chows-overlay{align-items:flex-start; padding-top:calc(var(--chows-h) + 10px)}
  .chows-nav{width:100%}
  .chows-nav:hover .chows-nav-link{color:var(--chows-gold)}
  .chows-has-sub:hover .chows-arrow{width:44px; margin-left:16px}
  .chows-nav{margin:32px 0 0}
  .chows-meta{
    flex-direction:column; align-items:flex-start; gap:16px;
    margin-top:44px; padding-bottom:24px;
  }
  .chows-meta-right{margin-left:0; justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .chows-grain{animation:none}
  .chows-header,.chows-overlay,.chows-nav > li,.chows-submenu,.chows-submenu li,
  .chows-meta,.chows-nav-link,.chows-arrow,.chows-burger-lines span,.chows-burger-label i{
    transition-duration:.01ms !important;
  }
}