/* ============================================================
   J PARK & ASSOCIATES — Interactive Footer card (site-wide)
   Markup lives in automation/sync-footer.py; behaviour in footer.js.
   Everything is scoped under .if so it cannot leak into page styles.
   Uses var(--serif) / var(--sans) from styles.css (self-hosted fonts).
   ============================================================ */

.if-stage { padding: 40px clamp(12px, 3vw, 32px) 32px; background: var(--cream-50, #F5F0E8); }

.if {
  /* Cream theme (saved choice) */
  --if-bg: #FBF8F2;
  --if-atmos: linear-gradient(145deg, #FBF8F2 0%, #F5F0E8 46%, #E6DCC8 100%);
  --if-spot: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.96) 0%, rgba(240,226,190,.70) 30%, rgba(230,210,160,.22) 52%, rgba(230,210,160,0) 74%);
  --if-text: #1B2A4A;
  --if-muted: #5d6677;
  --if-accent: #C9A84C;
  --if-accent-text: #8a6d1c;
  --if-line: rgba(27, 42, 74, .16);
  --if-line-strong: rgba(27, 42, 74, .28);
  --if-chip: rgba(27, 42, 74, .06);
  --dur: 1;

  position: relative;
  overflow: clip;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 48px 48px 18px;
  color: var(--if-text);
  background: var(--if-bg);
  isolation: isolate;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}
.if .atmos { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: var(--if-atmos); }
.if .spot { position: absolute; z-index: -1; width: 660px; height: 600px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: var(--if-spot); }
.if a { color: inherit; }
.if :focus-visible { outline: 2px solid var(--if-accent); outline-offset: 3px; }

/* ---------- Contact block ---------- */
.if .contact { display: grid; gap: 14px; padding-bottom: 36px; }
.if .eyebrow { display: block; margin: 0; font: 600 12px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--if-muted); }
.if .eyebrow::before { content: none; display: none; }
.if .if-h { margin: 0; font: inherit; color: inherit; }
.if .bigline {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline; width: fit-content;
  font: 600 clamp(44px, 8vw, 112px)/.98 var(--serif); letter-spacing: -0.02em; color: var(--if-text);
  text-wrap: balance;
}
.if .bigline .arrow {
  display: inline-block; margin-left: .25em; color: var(--if-accent);
  font-family: var(--sans); font-weight: 400; font-size: .7em;
  transition: transform calc(.4s * var(--dur)) cubic-bezier(.34, 1.35, .64, 1);
}
.if .bigline:hover .arrow, .if .bigline:focus-visible .arrow { transform: translateX(.18em); }
.if .bigline .u {
  background: linear-gradient(var(--if-accent), var(--if-accent)) 0 100% / 0 3px no-repeat;
  transition: background-size calc(.4s * var(--dur)) ease; padding-bottom: 4px;
}
.if .bigline:hover .u, .if .bigline:focus-visible .u { background-size: 100% 3px; }
.if .bigline:focus-visible { outline: 2px solid var(--if-accent); outline-offset: 6px; border-radius: 6px; }
.if .lede { color: var(--if-muted); max-width: 60ch; font-size: 17px; margin: 0; }
.if .cta-row { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; margin-top: 6px; }
.if .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1.2 var(--sans); letter-spacing: 0; text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.if .btn:hover { transform: none; }
.if .btn-gold { background: var(--if-accent); color: #1B2A4A; box-shadow: none; }
.if .btn-gold:hover { background: #e0c87e; color: #1B2A4A; }
.if .btn-ghost-dark { background: transparent; color: var(--if-text); border-color: var(--if-line-strong); }
.if .btn-ghost-dark:hover { border-color: var(--if-text); color: var(--if-text); }

/* ---------- Dividers ---------- */
.if .rule { height: 1px; background: var(--if-line); }

/* ---------- Directory + centerpiece ---------- */
.if .dir { position: relative; min-height: 460px; padding-top: 32px; display: flex; flex-direction: column; }
.if .cols { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 32px; }
.if .col { width: 250px; display: grid; gap: 4px; align-content: start; }
.if .col-lbl { font: 400 11px/16px var(--sans); letter-spacing: .14em; color: var(--if-muted); margin-bottom: 14px; text-transform: uppercase; }
.if .col a.lnk {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px;
  text-decoration: none; font: 500 15px/1.3 var(--sans); color: var(--if-text);
}
.if .col a.lnk .chev { color: var(--if-accent); opacity: 0; transform: translateX(-6px); flex: none; transition: opacity calc(.25s * var(--dur)) ease, transform calc(.4s * var(--dur)) cubic-bezier(.34, 1.35, .64, 1); }
.if .col a.lnk:hover .chev, .if .col a.lnk:focus-visible .chev { opacity: 1; transform: none; }
.if .col a.lnk:hover, .if .col a.lnk:focus-visible { color: var(--if-accent-text); }
.if .col a.lnk:focus-visible { outline: 2px solid var(--if-accent); outline-offset: 2px; border-radius: 4px; }
.if .col p { font-size: 14px; line-height: 1.6; color: var(--if-muted); margin: 0; }

.if .open { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); padding: 7px 12px; border-radius: 999px; background: var(--if-chip); color: var(--if-text); margin: 0 0 6px; width: fit-content; }
.if .open[hidden] { display: none; }
.if .open i { width: 8px; height: 8px; border-radius: 50%; background: #9aa3b2; flex: none; }
.if .open.is-open i { background: #4cc38a; box-shadow: 0 0 0 4px rgba(76, 195, 138, .18); }

.if .copy { border: 1px solid var(--if-line-strong); background: transparent; color: var(--if-muted); border-radius: 999px; padding: 4px 10px; font: 500 12px/1.2 var(--sans); cursor: pointer; flex: none; }
.if .copy:hover { border-color: var(--if-accent); color: var(--if-accent-text); }
.if .copy.done { border-color: #2f8f63; color: #2f8f63; }

.if .addr { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; font-size: 15px; line-height: 1.5; color: var(--if-text); min-height: 40px; padding-top: 6px; }
.if .addr a { color: var(--if-text); text-decoration: none; }
.if .addr a:hover { color: var(--if-accent-text); }
.if .addr.center { align-items: center; }
/* The email address always stays on one line; its Copy button wraps below when the column is tight. */
.if .addr.email { flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; row-gap: 2px; }
.if .addr.email a { white-space: nowrap; font-size: 14px; letter-spacing: -0.01em; }

.if .charstage { position: absolute; left: calc(50% - 170px); top: 40px; width: 340px; height: 400px; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.if .char { width: 230px; height: 230px; position: relative; will-change: transform; z-index: 1; perspective: 700px; }
.if .piece { position: absolute; inset: 0; display: none; }
.if .piece.on { display: block; }
.if .orb { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, rgba(232, 206, 130, .85) 0%, rgba(201, 168, 76, .45) 35%, rgba(201, 168, 76, 0) 70%); filter: blur(6px); }
.if .orb.core { width: 70px; height: 70px; margin: -35px 0 0 -35px;
  background: radial-gradient(circle, #fffaf0 0%, rgba(255, 240, 200, .9) 40%, rgba(232, 206, 130, 0) 75%); filter: blur(2px); }
.if .shadow { position: absolute; left: calc(50% - 130px); bottom: 18px; width: 260px; height: 36px; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform, opacity;
  background: radial-gradient(50% 50% at 50% 50%, rgba(27, 42, 74, .30) 0%, rgba(27, 42, 74, .13) 30%, rgba(27, 42, 74, 0) 72%); filter: blur(12px); }
.if.kind-orb .shadow { display: none; }

/* ---------- Bio row + legal ---------- */
.if .biorow { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 4px 0 22px; }
.if .if-logo { height: 40px; width: auto; display: block; margin: 0; flex: none; }
.if .biorow p { max-width: 62ch; font-size: 14px; line-height: 1.6; color: var(--if-muted); margin: 0; }
.if .legal2 { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 0 0; font-size: 12px; line-height: 18px; color: var(--if-muted); }

/* ---------- Tablet + phone ---------- */
@media (max-width: 1100px) {
  .if { padding: 36px 32px 18px; }
  .if .col { width: 240px; }
  .if .charstage { left: calc(50% - 130px); width: 260px; }
  .if .char { width: 190px; height: 190px; }
}
@media (max-width: 860px) {
  .if-stage { padding-top: 28px; }
  .if { padding: 26px 24px 16px; border-radius: 24px; }
  .if .dir { min-height: 0; gap: 12px; padding: 24px 0 12px; }
  .if .cols { flex-wrap: wrap; gap: 18px; }
  .if .col { width: auto; flex: 1 1 200px; }
  .if .charstage { position: relative; left: auto; top: auto; width: 100%; height: 300px; order: 2; }
  .if .shadow { bottom: auto; top: calc(100% - 64px); }
  .if .spot { width: 430px; height: 480px; }
}

/* ---------- Reduced motion + print ---------- */
@media (prefers-reduced-motion: reduce) {
  .if { --dur: 0; }
  .if .bigline .arrow, .if .col a.lnk .chev, .if .bigline .u { transition: none; }
}
@media print { .if-stage { display: none; } }