*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FBF5EC;color:#2B2621;font-family:"Lexend Deca",system-ui,-apple-system,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:#A9553A}
a:hover{color:#8C4530}
:focus-visible{outline:3px solid #A9553A;outline-offset:3px;border-radius:6px}
button{font-family:inherit}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;background:#2B2621;color:#FBF5EC;padding:.75rem 1.25rem;border-radius:0 0 10px 0;z-index:100;text-decoration:none}
.skip:focus{left:0}
.sizebtn{border:1px solid rgba(251,245,236,.35);background:transparent;color:#FBF5EC}
.sizebtn:hover{border-color:#FBF5EC}
.sizebtn[aria-pressed="true"]{border-color:#E7B24D;background:#E7B24D;color:#2B2621}
.striplink:hover{color:#E7B24D}
.btn-primary:hover{background:#A9553A!important}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
input[type="radio"]{accent-color:#C56B4A;width:1.15rem;height:1.15rem}
#menu-btn{display:none}
#menu-btn:hover{border-color:#C56B4A}
@media (max-width:48rem){
  #menu-btn{display:inline-flex;align-items:center}
  #gb-navwrap{display:none}
  #gb-navwrap.open{display:block}
  #gb-nav{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.hv1:hover{background:#A9553A !important;}
.hv2:hover{border-color:#C56B4A !important;}
.hv3:hover{background:#F5ECDD !important;}
.hv4:hover{color:#E7B24D !important;}
.hv5:hover{color:#FBF5EC !important;}
.hv6:hover{border-color:#FBF5EC !important;}
.hv7:hover{text-decoration:underline !important;}

/* ---- narrow-screen header: survive the A+ text size ---- */
@media (max-width:48rem){
  header > div:nth-of-type(2){flex-wrap:wrap!important;gap:.6rem!important;padding-left:1rem!important;padding-right:1rem!important}
  header > div:nth-of-type(2) img{height:40px!important;max-width:52vw}
  #menu-btn{padding:.3rem .85rem!important;font-size:.88rem!important;min-height:44px!important}
  header .btn-primary{padding:.5rem 1.15rem!important;font-size:.92rem!important;min-height:44px!important}
  #gb-navwrap{padding-left:1rem!important;padding-right:1rem!important}
  header > div:first-child > div{padding-left:1rem!important;padding-right:1rem!important}
  /* footer: span-2 forces auto-fit to 2 tracks of 15rem, which cannot fit a phone */
  footer > div > div:first-child{grid-column:auto!important}
}
@media (max-width:30rem){
  header .striplink span{white-space:normal!important}
  header > div:nth-of-type(2) img{height:36px!important;max-width:46vw}
}

/* ---- slice 7: compact sticky header on phones; every selector starts at header, none reach main or footer ---- */
@media (max-width:30rem){
  header > div:first-child > div{row-gap:.15rem!important;padding-top:.25rem!important;padding-bottom:.25rem!important}
  header > div:first-child > div > span:first-child{font-size:.78rem!important}
  header > div:nth-of-type(2){padding-top:.5rem!important;padding-bottom:.35rem!important}
  header > div:nth-of-type(2) > div{flex:1 1 0!important;min-width:0!important;justify-content:flex-end}
  header > div:nth-of-type(2) .btn-primary{flex:0 1 auto;min-width:0;padding:.3rem .7rem!important;font-size:.84rem!important;line-height:1.2;text-align:center;white-space:normal}
  header #menu-btn{padding:.3rem .65rem!important}
  html{scroll-padding-top:3rem}
}

/* ---- one-line header: logo, nav and Join share a row on wide screens; Menu button below that; strip kept on one line on tablets ---- */
@media (min-width:48.01rem) and (max-width:77.99rem){
  #menu-btn{display:inline-flex;align-items:center}
  #gb-navwrap{display:none}
  #gb-navwrap.open{display:block}
  #gb-nav{flex-direction:column;align-items:stretch}
}
@media (min-width:40rem) and (max-width:64rem){
  header > div:first-child > div{padding-left:1rem!important;padding-right:1rem!important;gap:.5rem!important;flex-wrap:nowrap!important}
  header > div:first-child > div > span:first-child{font-size:.76rem!important}
  header .striplink{font-size:.78rem!important}
  header > div:first-child > div > div{gap:.35rem!important}
}
@media (min-width:78rem){
  header{--gx:clamp(1.25rem,5vw,4rem);--edge:calc(max(0px,(100% - 78rem)/2) + var(--gx));display:flex;flex-wrap:wrap;align-items:center}
  header > div:first-child{flex:0 0 100%}
  header > div:nth-of-type(2){display:contents!important}
  header > div:nth-of-type(2) > a{order:1;margin:.7rem 0 .6rem var(--edge)}
  #gb-navwrap{order:2;flex:1 1 0;min-width:0;padding:0!important;margin:.35rem 1rem .25rem 2rem!important;max-width:none!important}
  #gb-nav{margin-left:0!important}
  header .navlink{padding-left:.6rem!important;padding-right:.6rem!important}
  header > div:nth-of-type(2) > div{order:3;margin:.7rem var(--edge) .6rem 0}
}