/* ══════════════════════════════════════════════════════════════════════════════
   THE FLAGSHIP FOOTER · MEDIUM · JJDREAMSS
   SSOT: ~/LUCID/design/components/lucid-footer.css → mirrored to jjdreamss-code/assets/
   by design/tools/lucid-stamp.mjs. NEVER hand-edit the mirrored copy.

   OWNS: wayfinding (the COMPLETE door-map, in three named groups) + the record
   + the estate's single version chip. NOTHING else.

   Deliberately NOT here (they live one band up): email capture (.ig glow CTA) ·
   the AM I REALLY FREE? countdown · decoder cross-blade links · the reading
   (all belong to the Architect's Seal / .ig — zero element overlap by design).

   DISTINCTNESS: achromatic ground — neutral ink, neutral hairlines, a floor darker
   than --lc-bg. Accent appears ONLY on hover/focus. The Seal is the coloured object;
   the .ig is the glowing card; the footer is the floor beneath both.
   No @keyframes (Lucid Motion System rule) — transitions only, reduced-motion gated.
   ══════════════════════════════════════════════════════════════════════════════ */

.ff{
  --ink:var(--lc-txt,#eef2ee);
  --dim:rgba(238,242,238,.62);
  --meta:rgba(238,242,238,.66);      /* TEXT tier — 7.6:1 on the #08080d floor (WCAG AA) */
  --faint:rgba(238,242,238,.34);     /* DECORATION ONLY — hairlines/dots. Never carry text. */
  --line:var(--lc-line,rgba(255,255,255,.10));
  --hub:var(--lc-free,#22d3ee);--hub-rgb:34,211,238;
  --pro:var(--lc-pro,#a855f7);
  --fd:var(--lc-font-display,'Orbitron',sans-serif);
  --fm:var(--lc-font-data,'IBM Plex Mono',monospace);
  --fb:var(--lc-font-body,'Inter',sans-serif);
  position:relative;box-sizing:border-box;width:100%;
  font-family:var(--fb);color:var(--ink);
  background:#08080d;                        /* the floor: one step below --lc-bg */
  border-top:1px solid var(--line);
  box-shadow:inset 0 14px 22px -18px rgba(0,0,0,.9);
  /* THE SHARED MEASURE — the footer's content box must equal the Seal's plate.
     The Seal is .as (max-width 1180) minus its 2×clamp(12px,3vw,24px) gutter = a
     1132px plate. The footer was running a 1180px inner, so its text began 24px
     OUTSIDE the plate on each side. Both were perfectly centred, but against a
     strongly-bordered plate that overhang reads as the footer being shoved left.
     Matching the gutter here and capping .ff-in at 1132 puts both left edges on the
     same pixel at every width. Change one, change the other. */
  padding:clamp(30px,4vw,44px) clamp(16px,3vw,24px) 20px;
  text-align:left;
}
/* ── SPECIFICITY GUARD · the component must beat legacy page rules ──────────
   Two surviving page-level rules outrank a bare `.ff` (0,1,0) and were quietly
   restyling the component:
     story.html  `footer:not(.std-foot)` (0,1,1) — overrode padding + border-top,
                 rendering /story's footer 32px taller with a dimmer hairline than
                 the other 13. The :not() guard used to exclude the old footer;
                 replacing that footer made the guard match the new one instead.
     kc.html     bare `footer{display:flex}` (0,0,1) — `.ff` declared no display
                 at all, so the footer silently became a flex container.
   `footer.ff` is (0,1,1) and, because the stamped LUCID:HEAD block is the LAST
   thing before </head>, it also wins the source-order tie. Only the box properties
   a page rule could plausibly target are restated here — not the whole component. */
footer.ff{
  display:block;
  background:#08080d;
  border-top:1px solid var(--line);
  padding:clamp(30px,4vw,44px) clamp(16px,3vw,24px) 20px;
  text-align:left;
  box-shadow:inset 0 14px 22px -18px rgba(0,0,0,.9);
}
.ff *{box-sizing:border-box;}
.ff p{margin:0;}
/* 1132px = the Seal's plate width (1180 measure − 2×24 gutter). Not 1180. */
.ff-in{max-width:1132px;margin:0 auto;}

/* NOTE · Insights (Substack) carries `is-hidden-in-nav` like Press/Frequency/Vault —
   the cyan dot means "a real surface the nav doesn't show you", which is exactly what
   it is. It got an offsite ↗ marker for one round; JJ ruled it out (barely legible at
   9.5px, and it broke the uniformity of the dot column). It keeps target="_blank" —
   the new tab is the signal. Deliberately NOT given its own colour either: the footer's
   whole distinctness is zero chroma at rest, and the estate's accent grammar already
   means something (green=EXCALIBUR, gold=OVAL TABLE, purple=MATTER, cyan=hub), so
   tinting a Substack link would assert a blade relationship that isn't real. */

.ff-mark{display:inline-block;font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:3.4px;
  text-decoration:none;line-height:1;
  background:linear-gradient(92deg,var(--pro),var(--hub));-webkit-background-clip:text;background-clip:text;color:transparent;}
.ff-mark:focus-visible{outline:2px solid var(--hub);outline-offset:4px;border-radius:3px;}

/* ── TIER 1 · THE DOOR-MAP in three named groups (the footer's real, unique job) ── */
.ff-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);}
.ff-col{display:flex;flex-direction:column;min-width:0;}
.ff-lbl{display:flex;align-items:center;gap:9px;margin-bottom:6px;
  font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--meta);}
.ff-lbl s{flex:1;height:1px;border:0;text-decoration:none;
  background:linear-gradient(90deg,rgba(255,255,255,.11),transparent);}

.ff-door{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--dim);
  font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  transition:color .2s ease,padding-left .2s ease;}
.ff-door:hover{color:var(--hub);padding-left:4px;}
.ff-door:focus-visible{outline:2px solid var(--hub);outline-offset:3px;border-radius:3px;}
.ff-door.is-here{color:var(--ink);}
.ff-door.is-hidden-in-nav::before{content:"";width:3px;height:3px;border-radius:50%;flex:none;
  background:rgba(var(--hub-rgb),.55);margin-right:7px;}

/* ── TIER 2 · the baseline bar: wordmark · social · record ── */
.ff-base{margin-top:clamp(22px,3vw,32px);padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px 26px;flex-wrap:wrap;}
.ff-social{display:flex;flex-wrap:wrap;gap:2px;}
/* NOTE: deliberately NOT .fs — index.html defines .fs on the ANCHOR (33px circle,
   border, background, hover lift). Reusing .fs would collapse this row into one 33px
   circle with seven 44px anchors overflowing it. The footer owns its own .ff-social. */
.ff-social a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--meta);
  border:1px solid transparent;transition:color .2s ease,border-color .2s ease,background .2s ease;}
.ff-social a:hover{color:var(--hub);border-color:rgba(var(--hub-rgb),.32);background:rgba(var(--hub-rgb),.05);}
.ff-social a:focus-visible{outline:2px solid var(--hub);outline-offset:2px;}
.ff-social svg{width:16px;height:16px;}

.ff-record{font-family:var(--fm);font-size:10.5px;letter-spacing:1.1px;color:var(--dim);line-height:1.7;
  display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;justify-content:flex-end;text-align:right;}
.ff-record b{color:var(--meta);font-weight:400;}

/* THE VERSION CHIP · the flagship's ONE version marker, on EVERY surface (index included).
   The blades show theirs in the header; the flagship's nav is byte-locked (3t/3u), so this
   is its equivalent — and the footer is the only band present on every page. Bespoke badge:
   a struck maker's tag with notched corners (clip-path, so it can never be mistaken for the
   estate's pill chips) — engraved bevel, a rotated accent diamond echoing the Seal's
   convergence mark, dimmed mono numerals. Rewards notice, never announces.
   No-React equivalent of the DS VersionChip tone="serial" (extend that component, never fork).
   Value is injected by assets/lucid-version.js; the static text is the no-JS fallback. */
.ff-ver{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.44));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.07),
             inset 0 -2px 5px rgba(0,0,0,.5);
  font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:1.7px;
  color:var(--meta);opacity:.86;white-space:nowrap;
  transition:opacity .2s ease,color .2s ease;}
.ff-ver s{width:4px;height:4px;flex:none;text-decoration:none;transform:rotate(45deg);
  background:rgba(var(--hub-rgb),.78);box-shadow:0 0 5px rgba(var(--hub-rgb),.5);}
.ff-ver:hover{opacity:1;color:var(--dim);}

/* the one quiet contact door — ON estate-wide (JJ ruling, 25 Jul 2026).
   Uses the estate's anti-harvest data-email + href="#" pattern, so no plain address
   ever ships in markup; the existing injector rewrites it at runtime. */
.ff-contact{color:var(--dim);text-decoration:none;border-bottom:1px solid rgba(var(--hub-rgb),.28);
  transition:color .2s ease;}
.ff-contact:hover{color:var(--hub);}
.ff-contact:focus-visible{outline:2px solid var(--hub);outline-offset:3px;border-radius:3px;}

@media (max-width:719px){
  .ff{padding:26px 16px 18px;}
  .ff-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;}
  .ff-base{justify-content:flex-start;}
  .ff-record{justify-content:flex-start;text-align:left;font-size:9.6px;letter-spacing:.7px;}
  .ff-door{font-size:11.5px;letter-spacing:1.2px;}
}
@media (max-width:400px){
  .ff-map{grid-template-columns:1fr;}
  .ff-col{border-top:1px solid rgba(255,255,255,.05);padding-top:8px;}
  .ff-col:first-child{border-top:0;padding-top:0;}
}
@media (prefers-reduced-motion:reduce){
  .ff-door,.ff-social a,.ff-contact{transition:none !important;}
  .ff-door:hover{padding-left:0;}
}
@media print{
  .ff{background:none;border-top:1px solid #ccc;box-shadow:none;padding:12px 0;}
  .ff-map,.ff-social,.ff-ver{display:none !important;}
  .ff-record{color:#555;font-size:8pt;justify-content:flex-start;text-align:left;}
}