/* =====================================================================
   HFC.GLOBAL - shared site chrome for every page except the homepage
   (nav + mobile sheet + footer). Mirrors the homepage nav and footer
   in index.html. Markup lives in the snippet each page pastes in;
   behaviour lives in /chrome.js.

   Everything is namespaced (.gnav, .gsheet, .gfoot) and carries its own
   tokens, so it never depends on a page's :root variables and never
   collides with a page's own .nav / .foot / .cta classes.

   Layout: the nav is position:fixed like the homepage. The
   .gnav-spacer that follows it in the markup holds its height in the
   page flow, so nothing hides under it. No body padding is needed.

   Fonts (load on the page): Anton; Titillium Web 400/600/700;
   Chivo Mono 400/500/700.
   ===================================================================== */

/* ---------- tokens ---------- */
.gnav,.gsheet,.gfoot{
  --g-void:#0A0A0B; --g-edge:#242A34;
  --g-bone:#EDEAE3; --g-steel:#8A93A0; --g-ignite:#E4B94F; --g-pale:#F2DFA6;
  --g-display:'Anton','Impact',sans-serif;
  --g-body:'Titillium Web','Inter',system-ui,sans-serif;
  --g-mono:'Chivo Mono',ui-monospace,monospace;
  box-sizing:border-box;
  font-family:var(--g-body);font-size:16px;font-weight:400;font-style:normal;
  letter-spacing:normal;text-transform:none;text-align:left;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;text-size-adjust:100%}
.gnav *,.gnav *::before,.gnav *::after,
.gsheet *,.gsheet *::before,.gsheet *::after,
.gfoot *,.gfoot *::before,.gfoot *::after{box-sizing:border-box}
/* neutralise page-level a / button / img rules (some pages style bare <a>) */
/* (own elements only - controls a page puts in .gnav-slot keep their own styles) */
.gnav :where(.gnav-logo,.gnav-links a,.gnav-contact,.gnav-cta,.gnav-burger),
.gsheet :where(a,button),.gfoot :where(a,button){
  font:inherit;color:inherit;background:none;border:0;border-radius:0;box-shadow:none;
  margin:0;padding:0;text-decoration:none;text-transform:none;letter-spacing:inherit;
  text-shadow:none;width:auto;height:auto;min-width:0;min-height:0;max-width:none;
  display:inline;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gnav .gnav-logo img,.gsheet :where(img,svg),.gfoot :where(img,svg){max-width:none}
.gnav :focus-visible,.gsheet :focus-visible,.gfoot :focus-visible{outline:2px solid var(--g-ignite);outline-offset:3px}
/* clip-path cuts off a ring drawn outside the box: the chamfered controls draw theirs inside (the gold CTAs get a dark one) */
.gnav .gnav-burger:focus-visible,.gsheet .gsheet-socials a:focus-visible{outline-offset:-5px}
.gnav .gnav-cta:focus-visible,.gsheet .gsheet-cta:focus-visible{outline:2px solid #0A0C10;outline-offset:-5px}

/* keep in-page anchors clear of the fixed nav */
html:has(.gnav){scroll-padding-top:72px}
/* the shop's cart and product layers lock scroll with body.locked; with html{overflow-x:hidden} the root has to be locked too */
html:has(body.locked){overflow:hidden}

/* ======================= NAV ======================= */
.gnav{position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:54px;margin:0;padding:0 22px;
  color:#E5E7EB;line-height:normal;
  background:rgba(9,12,16,0);border:0;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease}
/* scrolled state (chrome.js adds .is-solid; a page may also hard-code it) */
.gnav.is-solid{background:rgba(9,12,16,.86);border-bottom-color:rgba(228,185,79,.22);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gnav-spacer{display:block;height:54px;margin:0;padding:0;border:0;pointer-events:none}

.gnav-left{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-width:0}
.gnav .gnav-logo{display:block;flex:0 0 auto;line-height:0}
.gnav-logo img{display:block;height:30px;width:auto;margin:0;border:0}

/* desktop links */
.gnav-links{display:flex;align-items:center;gap:26px;flex:0 1 auto;min-width:0;overflow:hidden;margin:-6px;padding:6px}   /* padding gives the focus ring room inside the clip */
.gnav-links a{display:inline-block;position:relative;padding:6px 0;
  font-family:var(--g-mono);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g-steel);white-space:nowrap;transition:color .2s ease}
.gnav-links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--g-ignite);transition:right .25s ease}
.gnav-links a:hover{color:var(--g-bone)}
.gnav-links a:hover::after,.gnav-links a[aria-current="page"]::after{right:0}
.gnav-links a[aria-current="page"]{color:var(--g-bone)}

/* right cluster (also carries .nav-right so i18n.js can mount its language switcher here) */
.gnav .gnav-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin:0;padding:0}
.gnav-slot{display:flex;align-items:center;gap:10px}
.gnav-slot:empty{display:none}

/* CONTACT US - the homepage's neon-tube secondary */
.gnav .gnav-contact{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--g-mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;line-height:normal;
  color:#FFF7DF;background:rgba(6,16,22,.55);border:1px solid #E4B94F;border-radius:0;
  padding:9px 16px;white-space:nowrap;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  text-shadow:0 0 6px rgba(228,185,79,.95),0 0 16px rgba(228,185,79,.55);
  box-shadow:0 0 0 1px rgba(228,185,79,.25),0 0 14px rgba(228,185,79,.45),0 0 34px rgba(228,185,79,.20),inset 0 0 12px rgba(228,185,79,.22);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  animation:gnavNeon 2.6s ease-in-out infinite}
@keyframes gnavNeon{
  0%,100%{box-shadow:0 0 0 1px rgba(228,185,79,.25),0 0 14px rgba(228,185,79,.45),0 0 34px rgba(228,185,79,.20),inset 0 0 12px rgba(228,185,79,.22);border-color:#E4B94F}
  50%    {box-shadow:0 0 0 1px rgba(228,185,79,.45),0 0 26px rgba(228,185,79,.85),0 0 66px rgba(228,185,79,.45),inset 0 0 20px rgba(228,185,79,.40);border-color:#F2DFA6}}
.gnav .gnav-contact:hover,.gnav .gnav-contact:focus-visible{animation:none;color:#241A05;background:#F6DF95;
  border-color:#F2DFA6;text-shadow:none;
  box-shadow:0 0 26px rgba(228,185,79,.9),0 0 70px rgba(228,185,79,.5)}

/* gold primary - Priority access */
.gnav .gnav-cta{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--g-mono);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;line-height:normal;
  color:#241A05;background:linear-gradient(180deg,#F6DF95,#D9AE45 55%,#9C7118);
  border:1px solid rgba(246,227,164,.6);border-radius:0;padding:9px 16px;white-space:nowrap;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:0 0 16px rgba(228,185,79,.35);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,filter .18s ease}
.gnav .gnav-cta:hover,.gnav .gnav-cta:focus-visible{transform:translateY(-2px);
  filter:brightness(1.07) saturate(1.05);
  box-shadow:0 0 22px rgba(228,185,79,.70),0 0 58px rgba(228,185,79,.38),0 10px 34px rgba(228,185,79,.42),
    0 2px 0 rgba(255,255,255,.34) inset,0 0 0 1px rgba(255,246,216,.5) inset}
.gnav .gnav-cta:active{transform:translateY(0) scale(.995);
  box-shadow:0 0 16px rgba(228,185,79,.55),0 4px 14px rgba(228,185,79,.35),0 0 0 1px rgba(255,246,216,.4) inset}

/* burger (phones) */
.gnav .gnav-burger{display:none;flex:0 0 auto;flex-direction:column;justify-content:center;gap:5px;
  width:40px;min-width:40px;height:36px;min-height:36px;padding:0;margin:0;
  background:rgba(18,21,28,.6);border:1px solid rgba(228,185,79,.4);border-radius:0;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.gnav-burger span{display:block;height:2px;width:18px;margin:0 auto;background:var(--g-pale);
  transition:transform .25s ease,opacity .2s ease}
@media (forced-colors:active){.gnav-burger span{background:CanvasText}}
.gnav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.gnav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.gnav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* i18n.js language switcher (appears only once a second language is switched on) */
.gnav .lang-switch{display:inline-flex;align-items:center;gap:1px;margin:0 10px 0 0;border:1px solid rgba(228,185,79,.35)}
.gnav .lang-btn{display:inline-block;background:transparent;border:0;cursor:pointer;padding:8px 9px;
  font-family:var(--g-mono);font-weight:700;font-size:10px;letter-spacing:.14em;color:var(--g-steel);
  transition:color .18s ease,background .18s ease}
.gnav .lang-btn:hover{color:var(--g-ignite)}
.gnav .lang-btn[aria-current="true"]{color:#241A05;background:linear-gradient(180deg,#F6DF95,#E4B94F)}
@media(max-width:760px){.gnav .lang-switch{margin-right:6px}.gnav .lang-btn{padding:7px 7px;font-size:9px}}

/* compact desktop: the homepage's link row at a slightly smaller size so it never overflows */
@media (max-width:1199px){
  .gnav{gap:14px;padding:0 18px}
  .gnav-links{gap:18px}
  .gnav-links a{font-size:10px;letter-spacing:.12em}
}
@media (max-width:1329px){                 /* same, when the page slot holds a control (e.g. the shop cart) */
  .gnav:has(.gnav-slot > *){gap:14px;padding:0 18px}
  .gnav:has(.gnav-slot > *) .gnav-links{gap:16px}
  .gnav:has(.gnav-slot > *) .gnav-links a{font-size:10px;letter-spacing:.12em}
}
/* tight desktop (iPad landscape, small laptops): a smaller row so every link AND the gold CTA still fit */
@media (max-width:1099px){
  .gnav{gap:12px;padding:0 14px}
  .gnav-links{gap:12px}
  .gnav-links a{font-size:9.5px;letter-spacing:.08em}
}
@media (max-width:1199px){
  .gnav:has(.gnav-slot > *){gap:12px;padding:0 14px}
  .gnav:has(.gnav-slot > *) .gnav-links{gap:12px}
  .gnav:has(.gnav-slot > *) .gnav-links a{font-size:9.5px;letter-spacing:.08em}
}
/* phones + tablets: logo, page slot, burger */
@media (max-width:999px){
  .gnav{height:57px;padding:0 16px}
  .gnav-spacer{height:57px}
  .gnav-links,.gnav .gnav-contact,.gnav .gnav-cta{display:none}
  .gnav .gnav-burger{display:flex}
}
@media (max-width:1099px){
  .gnav:has(.gnav-slot > *){height:57px;padding:0 16px}
  .gnav:has(.gnav-slot > *) + .gnav-spacer{height:57px}
  .gnav:has(.gnav-slot > *) .gnav-links,
  .gnav:has(.gnav-slot > *) .gnav-contact,
  .gnav:has(.gnav-slot > *) .gnav-cta{display:none}
  .gnav:has(.gnav-slot > *) .gnav-burger{display:flex}
}

/* ======================= NAV PRESENCE (desktop) =======================
   The header holds its own under the ticket strip: a solid carbon plate with a gold hairline, a larger
   logo, links in the site's italic display face and buttons at heading weight. Sizes scale with the
   width so the full row fits down to the burger breakpoint; phones keep the compact burger bar. */
@media (min-width:1000px){
  .gnav,.gnav.is-solid{height:72px;padding:0 28px;gap:22px;
    background:
      repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),
      repeating-linear-gradient(-45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),
      linear-gradient(180deg,rgba(15,17,22,.96),rgba(8,9,12,.96));
    border-bottom:1px solid rgba(228,185,79,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 32px rgba(0,0,0,.38);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .gnav-spacer{height:72px}
  html:has(.gnav){scroll-padding-top:90px}   /* clears the taller desktop nav */
  .gnav-logo img{height:40px}
  .gnav-links{gap:clamp(12px,1.75vw,30px)}
  .gnav-links a{padding:8px .14em 8px 0;font-family:var(--g-display);font-style:italic;font-size:clamp(13px,1.1vw,17px);
    letter-spacing:.05em;color:#B6BEC9}
  .gnav-links a::after{height:2px;background:linear-gradient(90deg,#F6DF95,#E4B94F 55%,#A97C22)}
  .gnav-links a:hover,.gnav-links a[aria-current="page"]{color:#F4F1EA}
  .gnav .gnav-contact,.gnav .gnav-cta{font-family:var(--g-display);font-style:italic;font-weight:400;
    font-size:clamp(13px,1.02vw,16px);letter-spacing:.06em;padding:11px 20px 10px;
    clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px)}
}
@media (min-width:1000px) and (max-width:1199px){
  .gnav,.gnav.is-solid{padding:0 20px;gap:16px}
  .gnav-logo img{height:36px}
  .gnav .gnav-contact,.gnav .gnav-cta{padding:10px 15px 9px}
}

/* pages whose slot holds a control (the shop cart) switch to the burger below 1100px; above it the
   links keep the display face at a size that leaves room for the control */
@media (min-width:1100px){
  .gnav:has(.gnav-slot > *) .gnav-links{gap:clamp(10px,1.4vw,26px)}
  .gnav:has(.gnav-slot > *) .gnav-links a{font-size:clamp(12.5px,1.02vw,16px);letter-spacing:.04em}
}
@media (min-width:1100px) and (max-width:1329px){
  .gnav:has(.gnav-slot > *),.gnav.is-solid:has(.gnav-slot > *){padding:0 18px;gap:14px}
  .gnav:has(.gnav-slot > *) .gnav-logo img{height:34px}
}

/* ======================= MOBILE SHEET ======================= */
.gsheet{position:fixed;inset:0;z-index:69;margin:0;
  display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
  padding:76px 26px 20px;
  padding:calc(env(safe-area-inset-top, 0px) + 76px) 26px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background:rgba(7,10,14,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--g-bone);line-height:normal;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.gsheet[hidden]{display:none}
.gsheet .gsheet-link{display:block;flex:none;padding:6px 0;
  font-family:var(--g-display);font-style:italic;font-weight:400;font-size:19px;letter-spacing:.02em;
  color:var(--g-bone);border-bottom:1px solid rgba(255,255,255,.06)}
.gsheet .gsheet-link:active{color:var(--g-ignite)}
.gsheet .gsheet-contact{color:var(--g-ignite);border-bottom-color:rgba(228,185,79,.35)}
.gsheet .gsheet-link[aria-current="page"]{padding-left:12px;border-left:2px solid var(--g-ignite)}
@media (min-height:760px){.gsheet .gsheet-link{font-size:22px;padding:8px 0}}

/* CTA - the homepage .cta.navsheet-cta */
.gsheet .gsheet-cta{position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:center;gap:10px;flex:none;
  width:100%;max-width:420px;margin:12px 0 0;padding:12px 20px;
  font-family:var(--g-display);font-style:normal;font-weight:400;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  color:#241A05;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(180deg,#F6DF95 0%,#D9AE45 55%,#9C7118 100%);
  border:1px solid rgba(246,227,164,.55);border-radius:0;
  box-shadow:0 6px 26px rgba(228,185,79,.28),0 1px 0 rgba(255,255,255,.25) inset;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,filter .18s ease}
.gsheet .gsheet-cta::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#F6DF95 0%,#D9AE45 55%,#9C7118 100%)}
.gsheet .gsheet-cta::after{content:'';position:absolute;top:-60%;left:-30%;width:22%;height:220%;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg);animation:gsheetSheen 3.6s ease-in-out infinite}
@keyframes gsheetSheen{0%{left:-30%}55%{left:118%}100%{left:118%}}
.gsheet .gsheet-cta:active{transform:translateY(0) scale(.995);
  box-shadow:0 0 16px rgba(228,185,79,.55),0 4px 14px rgba(228,185,79,.35),0 0 0 1px rgba(255,246,216,.4) inset}

/* social chips: platform icon, handle, verified tick (mobile sheet, press, "follow for updates") */
.gsocs{display:flex;flex-wrap:wrap;gap:8px}
a.gsoc{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;
  color:var(--g-bone);text-decoration:none;white-space:nowrap;
  border:1px solid rgba(228,185,79,.4);border-bottom-color:rgba(255,255,255,.06);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:border-color .2s ease,color .2s ease}
a.gsoc svg{display:inline-block;width:16px;height:16px;min-width:16px;flex:0 0 16px;vertical-align:middle}
a.gsoc svg.gsoc-v{width:14px;height:14px;min-width:14px;flex-basis:14px}
.gsoc-h{font-family:var(--g-body);font-weight:700;font-size:12.5px;letter-spacing:.01em;line-height:1;text-transform:uppercase}
a.gsoc:hover{color:var(--g-ignite);border-color:var(--g-ignite)}
a.gsoc:active{background:rgba(228,185,79,.15)}
/* the sheet: two chips a row where they fit, one where they don't; an odd last chip keeps its own width */
.gsheet .gsheet-socials{justify-content:center;flex:none;margin:12px 0 0}
.gsheet-socials a.gsoc{flex:1 1 40%;justify-content:center}
.gsheet-socials a.gsoc:last-child:nth-child(odd){flex-grow:0}

/* short phones (the sheet has one more item than the homepage's) */
@media (max-height:720px){
  .gsheet{gap:2px;padding-top:calc(env(safe-area-inset-top, 0px) + 70px)}
  .gsheet .gsheet-link{font-size:18px;padding:5px 0}
}
/* very short webviews: maximum compression (as the homepage) */
@media (max-height:640px){
  .gsheet{gap:1px;padding-top:calc(env(safe-area-inset-top, 0px) + 64px)}
  .gsheet .gsheet-link{font-size:16px;padding:4.5px 0}
  .gsheet .gsheet-cta{margin-top:9px;padding:10px 18px;font-size:14px}
  .gsheet .gsheet-socials{margin-top:9px;gap:6px}
  .gsheet-socials a.gsoc{min-height:34px;padding:0 10px}
}

/* ======================= TICKET RELEASE: callout =======================
   Markup is in each page. /onsale.js shows it only while the sale dates are public and before the
   public on-sale (data-tix-when="waitlist presale" data-tix-dates). */
@keyframes tixDot{0%,100%{opacity:1}50%{opacity:.35}}

/* the callout: a chamfered plate with the gold metal edge of the site's cards */
.tixrel{position:relative;isolation:isolate;display:block;box-sizing:border-box;width:100%;max-width:760px;margin:0 auto;padding:24px 26px 22px;
  text-align:center;text-decoration:none;color:#EDEAE3;font-style:normal;border:0;
  clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  background:linear-gradient(115deg,#6E4E12 0%,#A97C22 8%,#D9AE45 18%,#F6DF95 27%,#FFF6D8 33%,#F6DF95 39%,#D9AE45 50%,#A97C22 62%,#7A5714 74%,#A97C22 84%,#D9AE45 93%,#F6DF95 100%)}
.tixrel[hidden]{display:none}
button.tixrel{-webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;border-radius:0}
/* the panel, inset by the edge width */
.tixrel::before{content:"";position:absolute;inset:2px;z-index:-1;
  clip-path:polygon(0 17px,17px 0,100% 0,100% calc(100% - 17px),calc(100% - 17px) 100%,0 100%);
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(228,185,79,.16),transparent 55%),
    radial-gradient(120% 90% at 100% 100%,rgba(228,185,79,.09),transparent 58%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,#121319,#0A0B0F)}
/* hatch ticks in the top-right corner, as on the entries card */
.tixrel::after{content:"";position:absolute;top:10px;right:24px;width:clamp(56px,16%,120px);height:5px;z-index:-1;
  background:repeating-linear-gradient(115deg,rgba(228,185,79,.62) 0 2px,transparent 2px 7px)}
.tixrel-k{display:inline-flex;align-items:center;gap:9px;font-family:'Chivo Mono',ui-monospace,monospace;font-weight:700;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#E4B94F;text-shadow:0 0 12px rgba(228,185,79,.35)}
.tixrel-k::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#E4B94F;
  box-shadow:0 0 0 3px rgba(228,185,79,.18),0 0 10px rgba(228,185,79,.7);animation:tixDot 1.8s ease-in-out infinite}
.tixrel-h{display:block;margin:10px 0 0;font-family:'Anton','Impact',sans-serif;font-weight:400;font-style:italic;font-size:clamp(28px,6vw,46px);
  line-height:1.06;letter-spacing:.015em;text-transform:uppercase;filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.tixrel > .tixrel-h:first-child{margin-top:0}   /* no label above it */
/* each half carries its own gradient, so a wrapped heading keeps the full metal on both lines */
.tixrel-h > span{padding-right:.2em;margin-right:-.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone;   /* room for the italic overhang, on every wrapped line */
  background:linear-gradient(180deg,#FAFCFE 0%,#D6DEE6 30%,#93A3B1 48%,#EDF2F7 55%,#7C8B99 78%,#B7C2CC 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tixrel-h > [data-tix-date]{white-space:nowrap;
  background:linear-gradient(180deg,#F2DFA6 0%,#E4B94F 45%,#8F6A14 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* the two times as labelled cells */
.tixrel-times{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;margin-top:16px}
.tixrel-times > span{display:flex;flex-direction:column;gap:5px;padding:0 24px}
.tixrel-times > span + span{border-inline-start:1px solid rgba(228,185,79,.32)}
.tixrel-times > span > span{font-family:'Chivo Mono',ui-monospace,monospace;font-weight:500;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8A93A0}
.tixrel-times b{font-family:'Anton','Impact',sans-serif;font-weight:400;font-style:italic;font-size:clamp(19px,2.6vw,24px);line-height:1;letter-spacing:.03em;
  text-transform:uppercase;color:#EDEAE3}
/* the site's gold button, at chip size */
.tixrel-go{display:inline-block;margin-top:18px;padding:10px 16px 9px;font-family:'Chivo Mono',ui-monospace,monospace;font-weight:700;font-size:11px;line-height:1.35;
  letter-spacing:.16em;text-transform:uppercase;color:#241A05;text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:linear-gradient(180deg,#F6DF95 0%,#D9AE45 55%,#9C7118 100%);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);text-wrap:balance;transition:filter .2s ease}
.tixrel:hover .tixrel-go{filter:brightness(1.12)}
.tixrel:focus-visible{outline:2px solid #F6DF95;outline-offset:-11px}   /* inside, clear of the chamfer: clip-path would cut an outside ring */
.tixrel.is-left{text-align:left;margin:0;padding:20px 24px 19px}
.tixrel.is-left .tixrel-h{margin-top:8px;font-size:clamp(26px,3vw,36px)}
.tixrel.is-left .tixrel-times{justify-content:flex-start;margin-top:13px}
.tixrel.is-left .tixrel-times > span:first-child{padding-inline-start:0}
.tixrel.is-left .tixrel-go{margin-top:15px}
/* in a photo hero the panel lets the artwork read through */
.tixrel.is-left::before{background:
    radial-gradient(120% 90% at 0% 0%,rgba(228,185,79,.16),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,rgba(18,19,25,.84),rgba(10,11,15,.9))}
/* wide screens: the times and the button share one row, so the plate stays low and the page's main button stays in view */
@media (min-width:761px){
  .tixrel.is-left{display:grid;grid-template-columns:auto 1fr;column-gap:24px;align-items:end;padding:16px 22px 15px}
  .tixrel.is-left .tixrel-k,.tixrel.is-left .tixrel-h{grid-column:1 / -1}
  .tixrel.is-left .tixrel-k{justify-self:start}
  .tixrel.is-left .tixrel-h{margin-top:6px}
  .tixrel.is-left .tixrel-times{margin-top:10px}
  .tixrel.is-left .tixrel-go{margin-top:0;justify-self:start;padding:9px 14px 8px;white-space:nowrap}
}
@media (max-width:480px){
  .tixrel{padding:22px 16px 20px}
  .tixrel.is-left{padding:20px 18px 18px}
  .tixrel-times > span{padding:0 14px}
  .tixrel-times > span > span{font-size:9.5px;letter-spacing:.12em}
}
/* very small phones: the two times stack, without the divider */
@media (max-width:370px){
  .tixrel-times{flex-direction:column;align-items:center;gap:10px}
  .tixrel.is-left .tixrel-times{align-items:flex-start}
  .tixrel-times > span,.tixrel.is-left .tixrel-times > span:first-child{padding:0}
  .tixrel-times > span + span{border-inline-start:0}
}
@media (prefers-reduced-motion:reduce){.tixrel-k::before{animation:none}}
/* forced colours drop background images: give the clipped text a real colour back */
@media (forced-colors:active){
  .tixrel-h > span,.tixrel-h > [data-tix-date]{-webkit-text-fill-color:currentColor;background:none}
  .tixrel{border:2px solid ButtonBorder}
  .tixrel-go{border:1px solid ButtonBorder}
}

/* ======================= FOOTER ======================= */
.gfoot{display:block;margin:0;
  padding:40px 18px var(--gfoot-pb, calc(env(safe-area-inset-bottom, 0px) + 48px));
  background:var(--g-void);border-top:1px solid var(--g-edge);
  color:var(--g-steel);font-size:12px;line-height:1.7;text-align:center}
.gfoot-nav{display:grid;grid-template-columns:1fr;gap:26px;max-width:1100px;margin:0 auto;padding:0 4px 26px;text-align:left}
@media (min-width:820px){.gfoot-nav{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}}
.gfoot-col{min-width:0}
.gfoot .gfoot-h{display:block;margin:0 0 12px;padding:0;
  font-family:var(--g-mono);font-size:10px;font-weight:700;font-style:normal;letter-spacing:.18em;line-height:1.7;
  text-transform:uppercase;color:var(--g-ignite);
  background:none;-webkit-text-fill-color:currentColor;filter:none;text-shadow:none}
.gfoot .gfoot-col a{display:block;padding:5px 0;
  font-family:var(--g-body);font-size:14px;font-weight:500;line-height:1.7;
  color:var(--g-steel);transition:color .2s ease}
.gfoot .gfoot-col a:hover{color:var(--g-bone)}
.gfoot .gfoot-col a[aria-current="page"]{color:var(--g-bone)}
.gfoot .gfoot-logo{display:block;height:34px;width:auto;margin:0 0 12px}
.gfoot .gfoot-tag{margin:0 0 10px;padding:0;
  font-family:var(--g-body);font-size:13.5px;font-weight:500;line-height:1.6;color:var(--g-steel)}

/* socials - the homepage footer's .soc rows */
.gfoot-socials{display:grid;grid-template-columns:repeat(2,max-content);gap:4px 22px;margin:6px 0 0;align-items:center}   /* each account's Instagram and TikTok side by side */
.gfoot .gfoot-col a.gfoot-soc{font-family:var(--g-mono);font-weight:500;letter-spacing:.02em;white-space:nowrap}
.gfoot-soc svg{display:inline-block;width:18px;height:18px;min-width:18px;flex:0 0 18px;vertical-align:middle}   /* the verified badge too, as rendered on the homepage */
.gfoot-handle{font-family:var(--g-body);font-weight:700;font-size:13px;letter-spacing:.01em;line-height:1;
  text-transform:uppercase;color:inherit;margin-right:2px}
.gfoot .gfoot-col a.gfoot-soc:hover,.gfoot .gfoot-col a.gfoot-soc:hover .gfoot-handle{color:var(--g-ignite)}
@media (max-width:560px){.gfoot-handle{font-size:12px}}

.gfoot-base{margin:6px 0 0;padding:20px 0 0;border-top:1px solid var(--g-edge);
  font-family:var(--g-body);font-size:12.5px;font-weight:500;line-height:1.7;color:#7A8593;text-align:center}
.gfoot .gfoot-base a{color:inherit;transition:color .2s ease}
.gfoot .gfoot-base a:hover{color:var(--g-bone)}
/* support inboxes line */
.gfoot .gfoot-base .gfoot-mail a{color:#C9CFD8;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(228,185,79,.5);text-underline-offset:3px}
.gfoot .gfoot-base .gfoot-mail a:hover{color:var(--g-ignite)}

/* touch screens: every footer link at least ~44px tall (as the homepage) */
@media (pointer:coarse){
  .gfoot .gfoot-col a{padding:11px 0}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .gnav .gnav-contact,.gsheet .gsheet-cta::after{animation:none}
  .gnav .gnav-cta,.gsheet .gsheet-cta{transition:none}
  .gnav .gnav-cta:hover,.gnav .gnav-cta:focus-visible{transform:none}
}
@media (hover:none){
  .gnav .gnav-cta:hover{transform:none}
}