/* ============================================================================
   GKBC v6 — "brass & bone"
   Loaded LAST on every page, after site.a18ee660.css / v52-body.css / home.css.
   It re-points the palette, adds the mono label language, and supplies the new
   home-page components. It does not restructure existing markup.

   Why: the old skin was cyan-on-black with lime and purple. It read as a tech
   demo. Brass + bone on the same dark lagoon ground reads as commerce, keeps
   the night-lit photography working, and gives the site one accent, not three.
   ========================================================================== */

/* ---------- 1. palette ---------------------------------------------------- */
.v52body,
body {
  --v6-ground: #071A1F;
  --v6-deep: #08141A;
  --v6-brass: #C89B3C;
  --v6-brass-hi: #DDB35C;
  --v6-brass-dim: rgba(200, 155, 60, .16);
  --v6-bone: #EFE7D6;
  --v6-slate: #1B3A40;
  --v6-paper: #FAF8F1;

  /* re-point legacy tokens so every existing rule follows */
  --cyan: #C89B3C;
  --acid: #EFE7D6;
  --lime: #EFE7D6;
  --purple: #1B3A40;
  --ink: #071A1F;
  --mid: #08141A;
  --deep: #08141A;
}

.v52body { background: var(--v6-ground); }
.v52body .topline { background: var(--v6-slate); color: var(--v6-bone); }
.v52body .topline span { color: var(--v6-brass); }

/* ---------- 2. buttons ---------------------------------------------------- */
.v52body .btn-cyan,
.v52body .button,
.v52body .nav-join,
.v52body .hdr-cta {
  background: var(--v6-brass);
  background-image: linear-gradient(180deg, #D6A947, #BC8F32);
  color: #14100A;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(200, 155, 60, .20);
  font-weight: 800;
}
.v52body .btn-cyan:hover,
.v52body .button:hover,
.v52body .hdr-cta:hover {
  background-image: linear-gradient(180deg, #E2BA62, #C99A38);
  box-shadow: 0 16px 40px rgba(200, 155, 60, .34);
  transform: translateY(-2px);
}
.v52body .btn-ghost {
  border: 1px solid rgba(239, 231, 214, .30);
  color: var(--v6-bone);
  background: rgba(239, 231, 214, .04);
}
.v52body .btn-ghost:hover { border-color: var(--v6-brass); color: var(--v6-brass-hi); }

/* ---------- 3. mono label language --------------------------------------- */
.v52body .eyebrow,
.v52body .cine-kicker,
.v52body .rc-cat,
.v52body .lk-num,
.v52body .v6-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.v52body .eyebrow,
.v52body .cine-kicker { color: var(--v6-brass); }
.v52body .section-head .eyebrow,
.v52body .home-head .eyebrow { color: var(--v6-brass); }

/* display face keeps its italic signature */
.v52body .cine-title,
.v52body .disp,
.v52body .home-h2 { font-family: "Fraunces", Georgia, serif; font-weight: 400; }

/* ---------- 4. hero ------------------------------------------------------- */
.v52body .cine-veil {
  background: linear-gradient(180deg, rgba(7, 26, 31, .68) 0%, rgba(7, 26, 31, .42) 34%,
                                      rgba(7, 26, 31, .92) 82%, var(--v6-ground) 100%);
}
.v52body .cine-title em,
.v52body .v6-em {
  font-style: italic;
  color: var(--v6-brass-hi);
}
.v52body .cine-lede { color: rgba(239, 231, 214, .86); }

/* ---------- 5. the four-answer band ------------------------------------- */
.v6-ask {
  position: relative;
  background: var(--v6-deep);
  border-top: 1px solid rgba(239, 231, 214, .10);
  border-bottom: 1px solid rgba(239, 231, 214, .10);
  padding: clamp(44px, 5.5vw, 72px) 0 clamp(34px, 4vw, 48px);
}
.v6-ask h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 20ch;
  margin: 14px 0 8px;
}
.v6-ask p.v6-asksub {
  color: rgba(239, 231, 214, .62);
  font-size: 15px;
  max-width: 52ch;
  margin: 0 0 34px;
}
.v6-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.v6-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(239, 231, 214, .16);
  border-radius: 4px;
  background: rgba(239, 231, 214, .03);
  color: var(--v6-bone);
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.v6-choice:hover,
.v6-choice:focus-visible {
  border-color: var(--v6-brass);
  background: var(--v6-brass-dim);
  transform: translateY(-2px);
}
.v6-choice .v6-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--v6-brass);
}
.v6-choice strong {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.15;
  color: #fff;
}
.v6-choice span.v6-say {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(239, 231, 214, .64);
}
.v6-choice .v6-go {
  margin-top: auto;
  padding-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--v6-brass-hi);
}

/* ---------- 6. the four benefits ---------------------------------------- */
.v6-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(15, 43, 46, .14);
  border: 1px solid rgba(15, 43, 46, .14);
  border-radius: 4px;
  overflow: hidden;
}
.v6-benefit {
  background: var(--v6-paper);
  padding: 30px 28px 32px;
}
.v6-benefit .v6-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: #8A6A1E;
}
.v6-benefit h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #0F2B2E;
  margin: 12px 0 8px;
}
.v6-benefit p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #3A5457;
  margin: 0;
  max-width: 46ch;
}

/* ---------- 7. stat strip ------------------------------------------------- */
/* Sits on the same 1220px measure as .container so its side edges never run
   under the floating concierge bubble at the bottom-right. */
.v6-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: min(1220px, calc(100% - 44px));
  margin-inline: auto;
  background: rgba(239, 231, 214, .12);
  border: 1px solid rgba(239, 231, 214, .12);
}
.v6-stat {
  padding: 22px 20px;
  background: var(--v6-ground);
  text-align: center;
}
.v6-stat b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  color: var(--v6-bone);
  letter-spacing: -.02em;
}
.v6-stat span {
  display: block;
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(239, 231, 214, .52);
}

/* ---------- 8. directory cards ------------------------------------------- */
.v52body .rc-badge.member { background: var(--v6-brass); color: #14100A; }
.v52body .rc-badge.free { background: rgba(15, 43, 46, .07); color: #4A6F6C; }
.v52body .rc-badge.unclaimed { background: rgba(15, 43, 46, .05); color: #6B8582; }
.v52body .result-card { border-radius: 4px; }
.v52body .result-card:hover { border-color: rgba(200, 155, 60, .55); }
.v52body .rc-go { color: #8A6A1E; }

/* ---------- 9. accessibility & motion ------------------------------------ */
.v52body a:focus-visible,
.v52body button:focus-visible,
.v52body input:focus-visible,
.v52body select:focus-visible,
.v52body textarea:focus-visible {
  outline: 3px solid var(--v6-brass-hi);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .v6-choice, .v52body .btn-cyan, .v52body .button { transition: none; }
  .v6-choice:hover, .v52body .btn-cyan:hover, .v52body .button:hover { transform: none; }
}

/* ---------- 10. responsive ------------------------------------------------ */
@media (max-width: 1000px) {
  .v6-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v6-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v6-choices { grid-template-columns: 1fr; }
  .v6-benefits { grid-template-columns: 1fr; }
  .v6-stat b { font-size: 30px; }
  .v6-ask h2 { font-size: 27px; }
  .v6-benefit { padding: 24px 20px 26px; }
}

/* ---------- legacy accent sweep -------------------------------------------
   The base sheets hard-code a teal→cyan→purple gradient in a handful of
   places that the token flip above cannot reach. These are those places. */

.v52body .hdr-nav a.is-active::after,
.hdr-nav a.is-active::after {
  background: linear-gradient(90deg, var(--v6-brass), var(--v6-brass-hi)) !important;
}

.v52body .tabs button[aria-selected="true"]::after,
.tabs button[aria-selected="true"]::after {
  background: linear-gradient(90deg, var(--v6-brass), var(--v6-brass-hi)) !important;
}

/* Floating "Ask the Chamber" pill: was teal + violet glow. */
.ask-btn {
  background: linear-gradient(120deg, #10262C, #173A3F) !important;
  border-color: rgba(200, 155, 60, .38) !important;
  color: #F3EADA !important;
  box-shadow: 0 16px 38px rgba(3, 12, 16, .55), 0 0 22px rgba(200, 155, 60, .18) !important;
}
.ask-btn:hover {
  border-color: rgba(200, 155, 60, .66) !important;
  box-shadow: 0 20px 46px rgba(3, 12, 16, .6), 0 0 28px rgba(200, 155, 60, .3) !important;
}
.ask-orb {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .22), transparent 62%),
    conic-gradient(from 140deg, #C89B3C, #8A6A24 42%, #E3B25C 72%, #C89B3C) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 24px rgba(200, 155, 60, .32) !important;
}
.ask-nudge { border-color: rgba(200, 155, 60, .4) !important; }
.ask-head small { color: #E3B25C !important; }
.ask-msg a, .ask-msg.me a { color: #E3B25C !important; }
.ask-form button, .search-btn, .ask-form button:hover {
  background: linear-gradient(100deg, var(--v6-brass), var(--v6-brass-hi)) !important;
  color: #08171B !important;
}
.ask-sug button:hover { border-color: rgba(200, 155, 60, .5) !important; }

/* Directory/result accents that were violet. */
.res-kind.biz, .chip-teal { color: #E3B25C !important; }
.chip-teal { border-color: rgba(200, 155, 60, .28) !important; background: rgba(200, 155, 60, .09) !important; }

/* Photo-led page components (economy / news / hub / membership). */
.h54-btn-lime, .h54-btn-primary {
  background: linear-gradient(100deg, var(--v6-brass), var(--v6-brass-hi)) !important;
  color: #08171B !important;
  box-shadow: 0 14px 34px rgba(200, 155, 60, .26) !important;
}
.h54-btn-ghost:hover { border-color: var(--v6-brass) !important; color: var(--v6-brass-hi) !important; }
.h54-hero-glow {
  background:
    radial-gradient(52% 60% at 78% 34%, rgba(200, 155, 60, .16), transparent 62%),
    radial-gradient(46% 58% at 12% 18%, rgba(200, 155, 60, .09), transparent 66%),
    radial-gradient(60% 50% at 50% 108%, rgba(23, 58, 63, .45), transparent 70%) !important;
}
.h54-try a:hover, .h54-link-more:hover { color: var(--v6-brass-hi) !important; border-color: var(--v6-brass) !important; }
.h54-section--photo .h54-link-more, .h54-cta p, .h54-lead-copy span, .h54-lead-copy time { color: var(--v6-brass-hi) !important; }


/* ---------- header + form controls (these sit outside .v52body) ---------- */
.hdr-cta,
.nav-join {
  background: var(--v6-brass) !important;
  color: #071A1F !important;
  border-color: var(--v6-brass) !important;
}
.hdr-cta:hover,
.nav-join:hover {
  background: var(--v6-brass-hi) !important;
  color: #071A1F !important;
}
#dirForm button[type="submit"] {
  background: var(--v6-brass);
  color: #071A1F;
  border-color: var(--v6-brass);
}
#dirForm button[type="submit"]:hover { background: var(--v6-brass-hi); }
.h54-dir-kicker,
.h54-kicker {
  color: var(--v6-brass) !important;
  border-color: var(--v6-brass-dim) !important;
  background: rgba(200, 155, 60, .10) !important;
}

/* ---------- lighter hero: membership + chamber -----------------------------
   These two heroes stacked TWO veils — the left one at .94 alpha — over a
   photograph that only covered the bottom 58% of the section, so the top of
   the hero was a flat black block and the picture was doing nothing.
   Now the photo covers the whole hero and the scrim is only as heavy as white
   type needs. Measured, not eyeballed: tools/measure_veil.py samples the real
   background behind each block of type (text hidden) and reports contrast
   against #fff. Targets: headline 3.0, body/buttons 4.5.
   ------------------------------------------------------------------------- */
body[data-page="membership"] .page-hero .band,
body[data-page="chamber"] .page-hero .band {
  inset: 0;
  height: auto;
  opacity: 1;
  background-position: center 38%;
  filter: brightness(1.12) saturate(1.04);
}

body[data-page="membership"] .page-hero .veil,
body[data-page="chamber"] .page-hero .veil {
  background:
    /* vertical: enough under the header, then let the scene through,
       then settle back into the page ground at the seam */
    linear-gradient(180deg,
      rgba(7, 26, 31, .52) 0%,
      rgba(7, 26, 31, .22) 22%,
      rgba(7, 26, 31, .10) 52%,
      rgba(7, 26, 31, .26) 78%,
      rgba(7, 26, 31, .90) 100%),
    /* horizontal: a soft scrim under the copy on the left, open on the right */
    linear-gradient(90deg,
      rgba(7, 26, 31, .38) 0%,
      rgba(7, 26, 31, .20) 38%,
      rgba(7, 26, 31, .03) 68%,
      rgba(7, 26, 31, 0) 100%);
}

/* the replacement membership photo is sunset-bright at the top, so on a phone the
   small label needs a heavier top scrim; desktop keeps the light one above */
@media (max-width: 640px) {
  body[data-page="membership"] .page-hero .band { background-position: 72% 40%; }
  body[data-page="membership"] .page-hero .veil {
    background:
      linear-gradient(180deg,
        rgba(7, 26, 31, .76) 0%,
        rgba(7, 26, 31, .46) 26%,
        rgba(7, 26, 31, .18) 54%,
        rgba(7, 26, 31, .30) 80%,
        rgba(7, 26, 31, .90) 100%),
      linear-gradient(90deg,
        rgba(7, 26, 31, .38) 0%,
        rgba(7, 26, 31, .20) 38%,
        rgba(7, 26, 31, .03) 68%,
        rgba(7, 26, 31, 0) 100%);
  }
}

/* ---------- hero accent + primary button -----------------------------------
   The hero's italic clause was still a teal→cyan→purple text gradient, and
   .btn-primary was still teal→cyan with near-black type on the dark end.
   Both now use the single brass accent. .btn-primary's colour carries
   !important in the base sheet, so the override must too.
   ------------------------------------------------------------------------- */
.page-hero h1 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--v6-brass);
  color: var(--v6-brass);
}

.btn-primary {
  background: linear-gradient(100deg, var(--v6-brass), var(--v6-brass-hi));
  box-shadow: 0 12px 30px rgba(200, 155, 60, .22);
}
.btn-primary { color: #071A1F !important; }
.btn-primary:hover {
  background: linear-gradient(100deg, var(--v6-brass-hi), #E9C77A);
  box-shadow: 0 14px 34px rgba(200, 155, 60, .3);
}

/* ---------- one header tone ------------------------------------------------
   The landing page (and directory) sit a violet topline bar behind the
   translucent header, which tints the top of the menu bar. Every other page
   has nothing behind it and went flat charcoal. This paints the same faint
   violet into the bar itself so the chrome matches on every page and holds
   when the page scrolls. hub.html keeps its own darker bar on purpose. */
body:not([data-page="hub"]) .hdr {
  background:
    linear-gradient(180deg,
      rgba(46, 38, 112, .92) 0%,
      rgba(40, 34, 92, .88) 26%,
      rgba(17, 20, 42, .90) 58%,
      rgba(8, 13, 24, .90) 100%) !important;
}
body:not([data-page="hub"]) .hdr.is-scrolled {
  background:
    linear-gradient(180deg,
      rgba(36, 30, 88, .97) 0%,
      rgba(28, 25, 68, .97) 30%,
      rgba(12, 15, 32, .97) 66%,
      rgba(7, 11, 20, .97) 100%) !important;
}

/* ---------- hub: warm brass glow in the bar -------------------------------
   The Intelligence page keeps its own bar, lit warm instead of violet, so it
   still reads as a different room in the same house. Bloom sits at the top of
   the bar and dies before the nav row, keeping the link text readable. */
body[data-page="hub"] .hdr {
  background:
    radial-gradient(115% 155% at 50% -22%, rgba(255, 152, 62, .55) 0%, rgba(242, 132, 46, .24) 46%, rgba(206, 112, 32, 0) 80%),
    linear-gradient(180deg, rgba(10, 16, 24, .94) 0%, rgba(6, 11, 18, .92) 100%) !important;
  border-bottom-color: rgba(210, 150, 60, .24) !important;
}
body[data-page="hub"] .hdr.is-scrolled {
  background:
    radial-gradient(115% 165% at 50% -26%, rgba(255, 152, 62, .52) 0%, rgba(242, 132, 46, .22) 46%, rgba(206, 112, 32, 0) 80%),
    linear-gradient(180deg, rgba(10, 16, 24, .97) 0%, rgba(6, 11, 18, .97) 100%) !important;
  border-bottom-color: rgba(210, 150, 60, .28) !important;
}

/* ---------- no coloured edges on the bar ----------------------------------
   Lee: drop the violet/orange hairline framing the menu. A transparent border
   is not enough — the background paints into the border strip and shows a
   brighter 1px line, so the edge is removed outright and the box height kept
   with padding. The row divider is thinned to a whisper so it reads as one band. */
.hdr,
body[data-page="hub"] .hdr {
  border-bottom-width: 0 !important;
  padding-bottom: 1px !important;
}
.hdr-nav {
  border-top-color: rgba(233, 240, 244, .045) !important;
  border-bottom-color: rgba(233, 240, 244, .045) !important;
}

/* ---------- footer credit: shield + link ----------------------------------
   The credit is a link to zuluworksai.com with the shield mark. `.foot a` is
   display:block at 12.5px and `.foot img` is 120px wide, so both need vetoing
   or the credit breaks onto its own line with a giant shield. */
.footerbar .zw-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 11px;
  color: rgba(233, 240, 244, .72);
  transition: color .2s;
}
.footerbar .zw-credit img {
  width: auto;
  height: 22px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}
.footerbar .zw-credit:hover { color: #fff; }
.footerbar .zw-credit:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

/* ---------- 12. form-only view (/register) --------------------------------
   The Chamber hands out one link at events and on printed cards. /register
   serves register.html with this class on <body>, so the shared link is the
   form and nothing else: no menu to wander into the rest of the platform, no
   sign-in, no footer, and no chat bubble sitting over the submit button.
   The markup stays single-source — this is a view, not a second page. */
body.join-only .hdr-nav,
body.join-only .hdr-cta,
body.join-only .hdr-burger,
body.join-only .skip,
body.join-only .foot,
body.join-only #gkbc-concierge-root,
body.join-only .page-hero .band,
body.join-only .page-hero .veil { display: none !important; }

body.join-only { --hdr-h: 96px; }
@media (max-width: 980px) { body.join-only { --hdr-h: 76px; } }

body.join-only .hdr-inner {
  grid-template-columns: 1fr;
  grid-template-areas: "brand";
  justify-items: center;
  padding-bottom: 18px;
}

body.join-only .hdr-inner .hdr-brand { justify-content: center; }

body.join-only .page-hero {
  padding-top: calc(var(--hdr-h) + 18px);
  padding-bottom: 8px;
  text-align: center;
}

body.join-only .page-hero .wrap { max-width: 760px; }
body.join-only .page-hero h1 { font-size: clamp(27px, 5vw, 40px); }
body.join-only .sec:first-of-type { padding-top: 26px; }

/* Registration wizard: register.js toggles .hidden on .reg-step. This rule IS the mechanism —
   without it every step renders at once and the four screens stack on one page (fixed 2026-11-10). */
.reg-step.hidden { display: none; }