/* ═══════════════════════════════════════════════════════════════
   DESIGN GOLDFINGER · footer component · drop-in
   Estate-standard footer for ALL sites (forums + gbxcircle).
   Requires: goldfinger-tokens.css  ·  pairs with: goldfinger-header.js (blink)
   Hook: <footer class="gbx-footer" data-forum="DDIF"> … </footer>
   APPROVED 11 Jul 2026 · see footer.example.html for markup + per-forum tokens.
   ═══════════════════════════════════════════════════════════════ */

.gbx-footer{
  /* gold key-glyph bullet (ASGM key: arc + stem + three teeth, transparent) */
  --keybg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 300'%3E%3Ccircle cx='80' cy='80' r='30' fill='none' stroke='%23ba9933' stroke-width='11'/%3E%3Cline x1='80' y1='110' x2='80' y2='252' stroke='%23ba9933' stroke-width='11' stroke-linecap='round'/%3E%3Cline x1='80' y1='150' x2='118' y2='150' stroke='%23ba9933' stroke-width='11' stroke-linecap='round'/%3E%3Cline x1='80' y1='176' x2='104' y2='176' stroke='%23ba9933' stroke-width='11' stroke-linecap='round'/%3E%3Cline x1='80' y1='202' x2='112' y2='202' stroke='%23ba9933' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E");
  background:var(--deep); border-top:.5px solid var(--g2);
  padding:var(--sp7) clamp(28px,5vw,72px) var(--sp5);
  font-family:var(--hv); font-weight:var(--w-regular); color:var(--cashmere);
}
.gbx-footer a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.gbx-footer a:hover{color:var(--gold)}
.gbx-footer .ft-inner{max-width:1200px;margin:0 auto}
.gbx-footer hr{border:0;border-top:.5px solid var(--g2);margin:0}

/* tier 1 · brand line */
.gbx-footer .brand{display:flex;align-items:baseline;gap:var(--sp3);flex-wrap:wrap;padding-bottom:var(--sp6)}
.gbx-footer .brand .wm{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold);line-height:1}
.gbx-footer .brand .forum{font-family:var(--sans);font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--cashmere)}
.gbx-footer .brand .tl{margin-left:auto;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--dim2)}

/* tier 2 · spine (nav) + action */
.gbx-footer .spine{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp6) var(--sp5);padding:var(--sp6) 0}
.gbx-footer .spine-nav{padding-bottom:var(--sp5)}
.gbx-footer .spine-act{grid-template-columns:repeat(2,minmax(240px,1fr));justify-content:start;gap:var(--sp6);padding:var(--sp5) 0}
@media(max-width:640px){.gbx-footer .spine-act{grid-template-columns:1fr;gap:var(--sp5)}}
.gbx-footer .col h4{font-family:var(--sans);font-size:10px;font-weight:var(--w-regular);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp3)}
.gbx-footer .col nav{display:flex;flex-direction:column;gap:var(--sp2)}
.gbx-footer .col nav a{position:relative;padding-left:18px;font-family:var(--serif);font-size:17px;color:var(--dim);line-height:1.2}
.gbx-footer .col nav a::before{content:"";position:absolute;left:0;top:.30em;width:8px;height:15px;background:var(--keybg) no-repeat center/contain;opacity:.85;transition:opacity .2s var(--ease)}
.gbx-footer .col nav a:hover{color:var(--gold)}
.gbx-footer .col nav a:hover::before{opacity:1}

/* faculty / concierge people */
.gbx-footer .person{margin-bottom:var(--sp3)}
.gbx-footer .person .nm{position:relative;padding-left:18px;font-family:var(--serif);font-size:18px;color:var(--cashmere);line-height:1.15}
.gbx-footer .person .nm::before{content:"";position:absolute;left:0;top:.22em;width:8px;height:15px;background:var(--keybg) no-repeat center/contain}
.gbx-footer .person .role{padding-left:18px;font-family:var(--sans);font-size:10px;letter-spacing:var(--ls-sub);text-transform:uppercase;color:var(--dim2);margin:4px 0 5px}
.gbx-footer .person a{padding-left:18px;font-size:13px;color:var(--gold);letter-spacing:.02em}

/* the Step · CTA */
.gbx-footer .cta-lead{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--dim);line-height:1.3;margin-bottom:var(--sp3);max-width:24ch}
.gbx-footer .cta{display:inline-flex;align-items:center;gap:var(--sp2);padding:13px 21px;border:.5px solid var(--gold);color:var(--gold);font-family:var(--sans);font-size:11px;font-weight:var(--w-regular);letter-spacing:var(--ls-sub);text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease)}
.gbx-footer .cta:hover{background:var(--gold);color:var(--deep)}

/* the Signal · subscribe */
.gbx-footer .subscribe{display:grid;grid-template-columns:1fr auto;gap:var(--sp5);align-items:end;padding:var(--sp6) 0}
@media(max-width:640px){.gbx-footer .subscribe{grid-template-columns:1fr;gap:var(--sp4);align-items:start}}
.gbx-footer .subscribe .lead h4{font-family:var(--sans);font-size:10px;font-weight:var(--w-regular);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp2)}
.gbx-footer .subscribe .lead p{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--dim);line-height:1.25;max-width:34ch}
.gbx-footer .subform{display:flex;align-items:center;gap:var(--sp4);min-width:min(360px,80vw)}
.gbx-footer .subform input{flex:1;background:transparent;border:0;border-bottom:.5px solid var(--g2);color:var(--cashmere);font-family:var(--hv);font-size:14px;letter-spacing:.02em;padding:10px 0;outline:none;transition:border-color .2s var(--ease)}
.gbx-footer .subform input::placeholder{color:var(--dim3)}
.gbx-footer .subform input:focus{border-color:var(--gold)}
.gbx-footer .subform button{background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);white-space:nowrap;transition:opacity .2s var(--ease)}
.gbx-footer .subform button:hover{opacity:.6}

/* tier 3 · estate + socials */
.gbx-footer .estate{display:grid;grid-template-columns:1fr auto;gap:var(--sp5);align-items:end;padding:var(--sp6) 0 var(--sp5)}
@media(max-width:640px){.gbx-footer .estate{grid-template-columns:1fr;align-items:start;gap:var(--sp4)}}
.gbx-footer .gbxmark{width:42px;height:42px;display:block;margin-bottom:var(--sp3)}
/* positive GBX mark: #181818 centre dissolves on --deep (mysterious) · blinks on 6s */
.gbx-footer .gbxmark svg{width:42px;height:42px;display:block;transform-origin:50% 50%;animation:gbxBlink 6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.gbx-footer .gbxmark svg{animation:none}}
.gbx-footer .office{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold);line-height:1;margin-bottom:var(--sp1)}
.gbx-footer .addr p{font-size:13px;color:var(--dim);letter-spacing:.02em;line-height:2.1}
.gbx-footer .addr a{color:var(--gold)}
.gbx-footer .addr .stat{color:var(--dim2);font-size:12px}
.gbx-footer .social{display:flex;gap:var(--sp3)}
.gbx-footer .social a{color:var(--gold);display:flex}
.gbx-footer .social a:hover{opacity:.6}
.gbx-footer .social svg{width:16px;height:16px;display:block}

/* tier 4 · legal */
.gbx-footer .legal{border-top:.5px solid var(--g3);padding-top:var(--sp4);display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp5);align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.04em;color:var(--dim3);line-height:1.8}
.gbx-footer .legal .dom a{color:var(--dim2)}
.gbx-footer .legal .tl{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--dim2);display:inline-flex;align-items:center;gap:var(--sp2)}
.gbx-footer .legal .key{width:12px;height:22px;color:var(--gold)}
.gbx-footer .legal .key svg{display:block}

/* gbxBlink is also defined in goldfinger-header.css; keep here so the footer
   blinks even on pages that don't load the header component. */
@keyframes gbxBlink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}