/* Footer directory, premium pass (2026-10-16): the same bronze hardware language as the hero capsule.
   Left: the sign-off as a real headline + the Reserve capsule. Right: numbered rows, bronze hairlines that light
   up on hover, and the arrow in a dark chip with a bronze inner ring. */
.closing-panel { position: relative; overflow: visible; background: none; box-shadow: none; }   /* no box: it sits on the page (Jesse, 2026-11-01) */
.closing-panel::before {                                     /* bronze light that melts into the page's own lower light (no visible edge) */
  content: ''; position: absolute; z-index: 0; left: -14%; right: -14%; bottom: -46%; height: 150%; pointer-events: none;
  background: radial-gradient(ellipse closest-side at 40% 56%,
    rgb(195 154 124 / 11%) 0%, rgb(195 154 124 / 9.5%) 14%, rgb(195 154 124 / 7%) 30%,
    rgb(195 154 124 / 4.2%) 48%, rgb(195 154 124 / 2%) 66%, rgb(195 154 124 / .7%) 82%, transparent 100%);
}
/* The glow spills 14% past the panel on purpose. Cut it at the full-width section around the footer so it can't widen
   the page: phones and touch tablets laid out 11% too wide (nav off screen), desktops scrolled sideways. Not at
   .site-footer, which stops at 1440px and would slice the glow on wide screens. */
.footer-wrap, .safety-section { overflow-x: clip; }
.closing-directory { position: relative; z-index: 1; align-items: stretch; }
.closing-connect { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.closing-statement { margin: 0; font: 500 clamp(40px, 4.4vw, 68px)/.98 var(--f-display); letter-spacing: -.035em; color: var(--ink); }
.closing-statement em { display: block; font: italic 340 1.08em/1.02 var(--f-accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1; letter-spacing: -.025em; }
.closing-connect .cta.cta-shine { align-self: flex-start; margin: 6px 0 4px 6px; }

/* rows */
.closing-directory-links { counter-reset: none; }
.closing-directory-links a {
  position: relative; margin-inline: 0; padding: 18px 0; border-radius: 0; min-height: 76px;
  background: none !important; transition: color 300ms cubic-bezier(.23, 1, .32, 1);
}
.closing-directory-links a::after {                          /* bronze hairline; a highlight sweeps across on hover */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 35%, var(--kin-bronze-hi) 50%, transparent 65% 100%) no-repeat,
              rgb(195 154 124 / 22%);
  background-size: 300% 100%, 100% 100%; background-position: 130% 0, 0 0;
}
.closing-directory-links a > i {                             /* 01 02 03 04 */
  flex: none; width: 2.4em; font: 400 11px/1 var(--f-mono); font-style: normal; letter-spacing: .12em; color: var(--kin-bronze);
}
.closing-directory-links a > span { flex: 1; transition: transform 420ms cubic-bezier(.23, 1, .32, 1); }
.closing-directory-links .dir-chip {                         /* dark chip with a bronze inner ring, like the capsule's */
  position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #f1ede6; background: radial-gradient(circle at 35% 28%, #3a3733 0%, #1a1917 62%, #121110 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 2px 6px rgb(0 0 0 / 35%);
}
.closing-directory-links .dir-chip::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--shine-b), rgb(195 154 124 / 20%) 0deg, var(--kin-bronze-hi) 30deg, rgb(195 154 124 / 20%) 80deg,
      rgb(195 154 124 / 20%) 180deg, var(--kin-bronze) 210deg, rgb(195 154 124 / 20%) 260deg, rgb(195 154 124 / 20%) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.closing-directory-links .dir-chip svg { position: relative; width: 16px; height: 16px; color: #f1ede6; transition: transform 420ms cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .closing-directory-links a:hover { color: var(--kin-bronze-hi); }
  .closing-directory-links a:hover > span { transform: translateX(10px); }
  .closing-directory-links a:hover::after { background-position: -30% 0, 0 0; transition: background-position 900ms cubic-bezier(.23, 1, .32, 1); }
  .closing-directory-links a:hover .dir-chip::before { animation: cta-shine-turn-back 2.6s linear infinite; }
  .closing-directory-links a:hover .dir-chip svg { transform: rotate(45deg); }
}
@media (max-width: 760px) {
  .closing-connect { gap: 24px; }
  .closing-directory-links a { min-height: 64px; }
  .closing-directory-links .dir-chip { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .closing-directory-links a > span, .closing-directory-links .dir-chip svg { transition: none; }
  .closing-directory-links a:hover .dir-chip::before { animation: none; }
}

/* Sign up is the quiet one: outline only, so "Reserve KIN 01" stays the footer's single bright button (Jesse, 2026-11-01). */
#closing .newsletter-field .cta.cta-shine, #closing .newsletter-field .cta.cta-shine:hover {
  background: none; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(195 154 124 / 55%);
  transition: box-shadow 300ms cubic-bezier(.23, 1, .32, 1), background-color 300ms cubic-bezier(.23, 1, .32, 1);
}
/* Hover: the outline lights up and the arrow flies through; no fill change, no label roll (Jesse, 2026-11-03: both felt like too much). */
#closing .newsletter-field .cta.cta-shine:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--kin-bronze-hi); }
#closing .newsletter-field .cta.cta-shine:hover .cta-roll, #closing .newsletter-field .cta.cta-shine:focus-visible .cta-roll { transform: none; }
#closing .newsletter-field .cta.cta-shine::before, #closing .newsletter-field .cta.cta-shine::after,
#closing .newsletter-field .cta.cta-shine .cta-arrow::before { display: none; }
#closing .newsletter-field .cta.cta-shine .cta-arrow { background: none; box-shadow: none; color: var(--kin-bronze-hi); }