/*
 * LandmarkLouie — Art Direction: "The Deal Desk Terminal"
 * Loaded LAST. Self-contained and reversible: comment out the
 * <link> to this file (and the two font links) to fully revert.
 * Spec: awards/ART-DIRECTION.md
 * Authoritative. Tactile. Alive.
 */

:root{
  /* Type — the ownable move */
  --font-display:'Space Grotesk','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-figure:'JetBrains Mono',ui-monospace,'SF Mono',monospace;

  /* Color story — beyond gold-on-navy */
  --ad-ink:#0e1320;        /* terminal canvas */
  --ad-navy:#1a2234;       /* nav (current) */
  --ad-felt:#13261f;       /* F&I deal-mat surface */
  --ad-gold:#c9a84c;       /* bullion — the precious value highlight */
  --ad-gold-deep:#8a712a;  /* gold that passes AA on light */
  --ad-gain:#2f9e6f;       /* up / good deal — sophisticated, not stoplight */
  --ad-risk:#d4734a;       /* aged / loss — burnt amber, not alarm red */
  --ad-watch:#caa44a;      /* caution */
  --ad-paper:#f6f4ee;      /* warm ledger paper */
}

/* ---- Display type on the numbers and headings that matter ---- */
.hkpi-val,
.ad-odometer,
.cs-section-title,
.home-card-title{
  font-family:var(--font-display);
  letter-spacing:-0.01em;
}

/* ---- Tabular ledger figures: digits align like a terminal ---- */
.ad-figure,
.money,
.rate,
td.num,
.hkpi-val{
  font-family:var(--font-figure);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---- Signal helpers (use sparingly; bullion = one per view) ---- */
.ad-gain{color:var(--ad-gain)!important;}
.ad-risk{color:var(--ad-risk)!important;}
.ad-watch{color:var(--ad-watch)!important;}
.ad-bullion{color:var(--ad-gold-deep)!important;}

/* ---- Motion: "the odometer" count-up signature ---- */
@keyframes ad-roll{from{transform:translateY(0.45em);opacity:0;}to{transform:translateY(0);opacity:1;}}
.ad-odometer{display:inline-block;font-variant-numeric:tabular-nums;}
.ad-odometer.rolling{animation:ad-roll .5s cubic-bezier(.22,1,.36,1);}

/* ---- Loading choreography: a bullion sweep, not "Loading…" text ---- */
@keyframes ad-sweep{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.ad-loading{position:relative;overflow:hidden;height:2px;background:rgba(201,168,76,.12);border-radius:2px;}
.ad-loading::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--ad-gold),transparent);
  animation:ad-sweep 1.1s ease-in-out infinite;
}
.ad-skeleton{
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%;animation:ad-sweep 1.3s ease-in-out infinite;border-radius:10px;
}

/* ---- Modal/overlay: scale-and-fade instead of instant swap ---- */
@keyframes ad-modal-in{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ============================================================
   The Tower — signature Intelligence Hub canvas
   ============================================================ */
.tower{
  background:radial-gradient(120% 80% at 50% -10%,#16203a 0%,var(--ad-ink) 55%) ,var(--ad-ink);
  min-height:100%;padding:28px 24px 40px;color:#e8eaf0;font-family:var(--font-body);
}
.tower-eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7d8aa6;font-weight:600;}
.tower-hero{margin:6px 0 4px;}
.tower-hero .ad-odometer{
  font-family:var(--font-display);font-weight:700;font-size:64px;line-height:1;
  color:var(--ad-gold);text-shadow:0 0 28px rgba(201,168,76,.25);
}
.tower-hero-label{font-size:13px;color:#9aa6c0;margin-top:6px;}
.tower-strip{
  display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 8px;
  padding:14px 16px;border:1px solid rgba(255,255,255,.07);border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
}
.tower-strip-item{display:flex;flex-direction:column;gap:2px;min-width:96px;}
.tower-strip-item .v{font-family:var(--font-figure);font-variant-numeric:tabular-nums;font-size:18px;font-weight:600;}
.tower-strip-item .k{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#7d8aa6;}
.tower-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px;}
.tower-card{
  position:relative;padding:18px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);overflow:hidden;
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s;
}
.tower-card:hover{transform:translateY(-3px);border-color:rgba(201,168,76,.4);}
.tower-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ad-gold-deep);}
.tower-card.is-gain::before{background:var(--ad-gain);}
.tower-card.is-risk::before{background:var(--ad-risk);}
.tower-card.is-watch::before{background:var(--ad-watch);}
.tower-card .tc-k{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#8794b0;}
.tower-card .tc-v{font-family:var(--font-figure);font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;margin:6px 0 2px;color:#f2f3f8;}
.tower-card .tc-sub{font-size:12px;color:#9aa6c0;}
.tower-card.is-gain .tc-v{color:var(--ad-gain);}
.tower-card.is-risk .tc-v{color:var(--ad-risk);}

@media(prefers-reduced-motion:reduce){
  .ad-odometer.rolling,.ad-loading::after,.ad-skeleton,.tower-card{animation:none!important;transition:none!important;}
}