/* =========================================================
   Footer — milled-metal wordmark, hairline columns, live Baltimore clock. Owned by builder D.
   ========================================================= */

.footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--gunmetal-950) url("../../assets/img/tex/brushed-dark.webp") center / 1024px repeat;
  background-blend-mode: multiply;
  color: var(--ink-on-dark);
  padding-top: clamp(88px, 9vw, 140px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 2px 0 rgba(0, 0, 0, .6);
}
.footer::before { /* orange light leak rising behind the wordmark */
  content: ""; position: absolute; left: 50%; bottom: -34%; width: 120%; height: 64%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 102, 0, .12), rgba(255, 102, 0, .04) 50%, transparent 75%);
  z-index: -1; pointer-events: none;
}
.footer::after { /* pointer-following sheen over the housing */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent calc(var(--sheen-x, .5) * 100% - 28%), rgba(255, 255, 255, .06) calc(var(--sheen-x, .5) * 100%), transparent calc(var(--sheen-x, .5) * 100% + 28%));
  mix-blend-mode: screen;
}

/* ---------- Tagline + blurb ---------- */
.footer__top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: end; padding-bottom: clamp(64px, 7vw, 104px);
}
.footer__tagline {
  grid-column: 1 / span 7;
  font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02;
}
.footer__tagline .line {
  background: linear-gradient(180deg, var(--alu-50) 10%, var(--alu-200) 50%, var(--alu-400) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em;
}
.footer__tagline em { font-style: italic; font-weight: 400; }
.footer__blurb { grid-column: 9 / span 4; font-size: 15px; line-height: 1.6; color: var(--muted-on-dark); }
.footer__blurb a { color: var(--ink-on-dark); text-decoration: underline; text-decoration-color: rgba(255, 102, 0, .65); text-underline-offset: 3px; transition: color var(--dur-hover); }
.footer__blurb a:hover { color: var(--ember-400); }

/* ---------- Hairline columns ---------- */
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); }
.footer__col {
  position: relative; padding-top: 22px; padding-bottom: 8px;
  border-top: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); /* machined groove */
}
.footer__col::before { /* orange tick on each column's groove */
  content: ""; position: absolute; left: 0; top: -1px; width: 24px; height: 1px; background: var(--ember-500); box-shadow: 0 0 6px var(--ember-glow);
}
.footer__head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-on-dark); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
.footer__idx { color: var(--ember-500); letter-spacing: .18em; }
.footer__col li + li { margin-top: 4px; }
.footer__col a, .footer__static {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 15px; line-height: 1.5; padding: 6px 0; color: var(--muted-on-dark); font-style: normal;
  transition: color var(--dur-hover) var(--ease-out);
}
.footer__col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--ember-500);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out);
}
.footer__col a:hover { color: var(--ink-on-dark); }
.footer__col a:hover::after { transform: scaleX(1); }
.footer__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--alu-400); width: 12px; }
.footer__email { overflow-wrap: anywhere; }
.footer__ext { color: var(--ember-500); font-size: 13px; transition: transform var(--dur-hover) var(--ease-out); }
.footer__col a:hover .footer__ext { transform: translate(2px, -2px); }

/* ---------- Bottom bar ---------- */
.footer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  margin-top: clamp(56px, 6vw, 88px); padding-block: 22px;
  border-top: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--alu-400);
}
.footer__copy { letter-spacing: .18em; }
.footer__clock {
  display: inline-flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums;
  padding: 9px 14px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
  border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);
}
.footer__clock-time { color: var(--ember-400); min-width: 9ch; text-shadow: 0 0 8px rgba(255, 102, 0, .45); letter-spacing: .18em; }

.footer__top-btn {
  display: inline-flex; align-items: center; gap: 16px; min-height: 48px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-on-dark);
}
.footer__top-icon {
  position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 0; overflow: hidden;
  border: 1px solid rgba(255, 102, 0, .7); color: var(--ember-500);
  background: rgba(14, 15, 17, .4);
  transition: background var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}
/* page progress: an orange strip filling along the button's bottom edge */
.footer__top-icon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember-500); box-shadow: 0 0 8px var(--ember-glow); transform-origin: left; transform: scaleX(calc(1 - var(--ring, 1))); }
.footer__top-btn:hover .footer__top-icon { background: var(--ember-500); box-shadow: 0 0 22px var(--ember-glow); }
.footer__top-btn:hover .footer__up { color: var(--graphite) !important; }
.footer__ring { display: none; position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.footer__ring circle { fill: none; stroke: var(--ember-500); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: var(--ring, 1); filter: drop-shadow(0 0 3px rgba(255, 102, 0, .8)); }
.footer__up { position: relative; transition: transform 500ms var(--ease-out); }
.footer__top-btn:hover .footer__up { transform: translateY(-4px); color: var(--ember-400); }

/* ---------- Oversized milled wordmark ---------- */
.footer__mark {
  position: relative; overflow: hidden;
  padding-inline: var(--side);
  margin-top: clamp(8px, 1.2vw, 20px);
  user-select: none; pointer-events: none;
}
.footer__mark-inner {
  --sx: 50%;
  display: flex; justify-content: center; align-items: baseline; gap: .22em; white-space: nowrap;
  font-size: var(--mark-size, 11.4vw); font-weight: 600; letter-spacing: -0.055em; line-height: 1;
  padding-top: .06em; padding-bottom: .14em; /* full glyphs incl. the y descender */
  filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 1px 0 rgba(255, 255, 255, .12)); /* engraved bevel */
}
.footer__word { display: inline-block; }
.footer__word em { font-style: italic; font-weight: 500; letter-spacing: -0.05em; padding-right: .04em; }
/* each letter samples one continuous metal plate: --W = plate width, --ox = letter's x offset */
.footer__ch, .footer__word:not(.is-split) {
  display: inline-block; will-change: transform;
  background-image:
    linear-gradient(105deg, transparent calc(var(--sx) - 22%), rgba(255, 255, 255, .38) var(--sx), transparent calc(var(--sx) + 22%)),
    linear-gradient(105deg, transparent calc(var(--sx) - 30%), rgba(255, 255, 255, .22) var(--sx), transparent calc(var(--sx) + 30%)),
    linear-gradient(180deg, #F3F4F5 0%, #C9CDD2 22%, #868B92 46%, #5E6268 54%, #A9AEB4 70%, #E4E6E8 84%, #6c7076 100%);
  background-size: var(--W, 100%) 100%;
  background-position: calc(var(--ox, 0px) * -1) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translate3d(0, var(--y, 0%), 0);
}
.footer__word:not(.is-split) { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .footer__tagline { grid-column: 1 / -1; }
  .footer__blurb { grid-column: 1 / span 9; margin-top: 32px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 640px) {
  .footer__blurb { grid-column: 1 / -1; }
  .footer__tagline { font-size: min(7.9vw, 36px); }
  .footer__cols { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .footer__col:nth-child(2) { grid-column: 1 / -1; order: 3; }
  .footer__col:nth-child(4) { grid-column: 1 / -1; order: 4; }
  .footer__col a, .footer__static { font-size: 14px; padding: 9px 0; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer__top-btn { order: -1; }
  .footer__mark-inner { flex-direction: column; align-items: flex-start; gap: 0; font-size: var(--mark-size, 21vw); line-height: .98; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__ch { transform: none !important; }
}

/* ---------- v2.2 restraint: back-to-top neutral at rest ---------- */
.footer__top-icon { border-color: rgba(236, 238, 240, .3); color: var(--ink-on-dark); background: transparent; }

/* ---------- r6 restraint: orange only on hover/focus; the clock LED stays live ---------- */
.footer__col::before { display: none; }
.footer__idx { color: var(--alu-400); }
.footer__ext { color: inherit; }
.footer__col a:hover .footer__ext, .footer__col a:focus-visible .footer__ext { color: var(--ember-500); }
.footer__top-icon::after { background: var(--alu-400); box-shadow: none; }
@media (max-width: 640px) { .footer__top-icon { width: 44px; height: 44px; } }
/* inline links in the footer intro follow the text-link spec: orange underline grows from the left */
.footer__top p a { color: var(--ink-on-dark); text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(var(--ember-500), var(--ember-500)) left bottom / 0 1px no-repeat, linear-gradient(rgba(236,238,240,.35), rgba(236,238,240,.35)) left bottom / 100% 1px no-repeat;
  transition: background-size 600ms var(--ease-out); }
.footer__top p a:hover, .footer__top p a:focus-visible { background-size: 100% 1px, 100% 1px; }

/* client fix: each letter's metal fill covers its italic overhang and descender (no clipped f / w / e / y) */
.footer__ch { padding: .04em .14em .22em 0; margin: -.04em -.14em -.22em 0; }