/* ==========================================================================
   The junk drawer (footer), options (Alex, 2026-11-10). All on black.

   Sources: Cosmos footers: giant wordmarks (Measured, Thread, Linear, and
   the board's Verden b01 by way of run 2's footer), a ghosted outline
   wordmark (Resend), and a glowing horizon.
   ========================================================================== */

.jd { position: relative; overflow: hidden; background: #000; color: #fff; }
.jd-wrap { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.jd .brand { color: #fff; }
.jd-tag { margin: 14px 0 0; max-width: 30ch; font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .66); text-wrap: pretty; }

/* the link columns */
.jd-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 3vw, 48px); }
.jd-col h3 { margin: 0 0 14px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; font-weight: 400; letter-spacing: .02em; color: rgba(255, 255, 255, .55); }
.jd-col ul { margin: 0; padding: 0; list-style: none; }
.jd-col li + li { margin-top: 9px; }
.jd-col a, .jd-col span { font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .9); transition: color .2s; }
.jd-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* the bottom line */
.jd-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; padding: 16px 0 20px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; color: rgba(255, 255, 255, .55); }

.jd-word { display: block; width: 100%; height: auto; overflow: visible; }
.jd-word text { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 500; }

/* Option 1: columns, then the giant wordmark */
.jd--giant { padding-top: clamp(56px, 6.5vw, 96px); }
.jd--giant .jd-word { margin-top: clamp(48px, 6.5vw, 104px); margin-bottom: clamp(12px, 1.6vw, 24px); fill: #fff; }

/* Option 2: the ghosted wordmark first, columns beneath */
.jd--ghost { padding-top: clamp(40px, 5vw, 76px); }
.jd--ghost .jd-word { margin-bottom: clamp(36px, 4.6vw, 72px); }
.jd--ghost .jd-cols { padding-bottom: clamp(44px, 5vw, 76px); }

/* Option 3: a glowing horizon */
.jd--glow { padding-top: clamp(64px, 7.5vw, 112px); }
.jd--glow::before { content: ""; position: absolute; left: 50%; bottom: -118%; width: 200%; aspect-ratio: 2.3; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .34) 0%, rgba(235, 235, 235, .17) 38%, rgba(150, 150, 150, .06) 68%, rgba(0, 0, 0, 0) 100%); filter: blur(24px); }   /* softened (Alex, 2026-11-10) */
.jd--glow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2)); }
.jd--glow .jd-cols { padding-bottom: clamp(120px, 17vw, 240px); }
.jd--glow .jd-base { border-top-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .7); }
.jd-line { margin: 0; max-width: 13em; font-family: var(--logo); font-weight: 400; font-size: clamp(26px, 2.8vw, 42px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.jd--glow .jd-brand { margin-bottom: 18px; }

/* the live footer: the brand, then Get started and Contact (Home is the only page, Alex, 2026-11-11) */
.jd-cols--two { grid-template-columns: minmax(0, 2.5fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .jd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jd-cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jd-intro { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .jd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jd--glow::before { width: 340%; bottom: -46%; }
}

/* ---------- Glowing Horizon without the glow: art in the open space (Alex, 2026-11-10) ---------- */
.jd--art { padding-top: clamp(64px, 7.5vw, 112px); }
.jd--art .jd-cols { padding-bottom: clamp(36px, 4vw, 60px); }
.jd--art .jd-brand { margin-bottom: 18px; }
.jd-art { display: block; width: 100%; height: auto; margin-bottom: clamp(18px, 2.4vw, 34px); overflow: visible; }

/* 4: the logo's plates, moving slowly along */
.jd-march { animation: jd-march 9s linear infinite; }
@keyframes jd-march { to { transform: translateX(-150px); } }
.jd-plate { fill: none; stroke: #fff; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.jd-plate--top { fill: #fff; }
.jd-ground { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }

/* 5: systems flowing into one platform */
.jd-base-l { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1; }
.jd-pulse { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 22 1400; animation: jd-pulse var(--t, 4s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes jd-pulse { from { stroke-dashoffset: 1422; } to { stroke-dashoffset: 0; } }
.jd-sys { fill: #000; stroke: #fff; stroke-width: 1; }
.jd-hub { fill: #fff; }
.jd-hub-ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.jd-art-t { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; fill: rgba(255, 255, 255, .6); }

/* 6: five small layer drawings */
.jd-series { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 24px); margin: 0 0 clamp(18px, 2.4vw, 34px); padding: 0; list-style: none; }
.jd-series li { display: grid; justify-items: center; gap: 10px; }
.jd-series svg { display: block; width: 100%; max-width: 230px; height: auto; overflow: visible; }
.jd-series span { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .04em; color: rgba(255, 255, 255, .6); text-align: center; }
.jd-series .d-face { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.jd-series .d-in { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: .8; }
.jd-series .d-box-t { fill: #000; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.jd-series .d-box-l { fill: #0B0B0B; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.jd-series .d-box-r { fill: #1A1A1A; stroke: #fff; stroke-width: 1; stroke-linejoin: round; }
.jd-series .d-l { fill: none; stroke: #fff; stroke-width: 1; }
.jd-series .d-dash { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; stroke-dasharray: 2 3; }
.jd-series .d-n { fill: #fff; }
.jd-series .d-dia { fill: #000; stroke: #fff; stroke-width: 1; }
.jd-series .d-p { fill: #000; stroke: #fff; stroke-width: 1; }
.jd-series li { opacity: .92; }

@media (max-width: 760px) {
  .jd-series { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .jd-march, .jd-pulse { animation: none; }
}

/* ---------- Footer art after the mood board, no text (Alex, 2026-11-10) ---------- */
.jd-canvas { display: block; width: 100vw; height: clamp(220px, 26vw, 380px); margin: 0 0 clamp(14px, 2vw, 28px) calc(50% - 50vw); }

/* ---------- The site footer (Alex, 2026-11-10): Constellation, kept short ---------- */
.jd--short { padding-top: clamp(52px, 5.8vw, 88px); }
.jd--short .jd-cols { padding-bottom: clamp(16px, 2.4vw, 36px); }
.jd--short .jd-canvas { height: clamp(160px, 16vw, 240px); margin-bottom: clamp(10px, 1.4vw, 20px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%); mask-image: linear-gradient(to bottom, transparent 0%, #000 16%); }

/* on touch screens the footer links get a taller tap area */
@media (pointer: coarse) {
  .jd-col li + li { margin-top: 0; }
  .jd-col a { display: inline-block; padding: 11px 0; }
  .jd-col h3 { margin-bottom: 4px; }
}