/* ============================================================
   LUKA KNEZIC x Secret Advisor - shared brand layer
   CURRENT canon: warm / light, one clay accent, editorial serif.
   ("private bank" mood · the gentleman advisor mark)
   Source: design_handoff_brand/tokens.css + SECRET_ADVISOR_BRAND.md
   ============================================================ */
:root {
  --paper:     #f1ede4;
  --surface:   #fbf9f4;
  --surface-2: #f6f2ea;
  --ink:       #2c2925;
  --ink-2:     #6d675e;
  --ink-3:     #9d968b;
  --line:      #e7e0d4;
  --line-2:    #ddd5c6;
  --clay:      #c25e3e;
  --clay-deep: #a84d30;
  --clay-soft: rgba(194,94,62,0.10);
  --clay-tint: #f6eae3;
  --on-clay:   #fdf7f2;
  --good:      #5f8459;
  --warn:      #b07f2c;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-pill: 100px;
  --shadow-card: 0 1px 2px rgba(44,41,37,.03), 0 1px 1px rgba(44,41,37,.02);
  --shadow-lift: 0 18px 48px -16px rgba(72,52,38,.24);
  --breathe: 2.6s;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--clay-soft); color: var(--clay-deep); }

/* ── text helpers ─────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.clay { color: var(--clay); }
em { font-style: italic; color: var(--clay); }

/* ── the gentleman mark (inherits CSS color) ──────────── */
.mk { color: var(--clay); line-height: 0; display: inline-block; }
.wm { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; white-space: nowrap; }
.wm em { font-style: italic; color: var(--clay); }

/* ── LK personal monogram (Luka's mark, distinct from the SA advisor) ── */
.lk-mark { display: inline-grid; place-items: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px; background: var(--clay); color: var(--on-clay);
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1;
  box-shadow: 0 1px 2px rgba(44,41,37,.08); }
/* the seal - thin clay ring + serif LK (editorial monogram) */
.lk-seal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--clay);
  font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: 0; line-height: 1;
  white-space: nowrap; color: var(--ink); transition: background .2s, color .2s; }
.lk-seal .k { color: var(--clay); }
a:hover > .lk-seal, .c-id:hover .lk-seal { background: var(--clay-soft); }

/* ── buttons ──────────────────────────────────────────── */
.cta {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--clay); color: var(--on-clay);
  font-family: var(--sans); font-size: 1.08rem; font-weight: 600;
  padding: 17px 30px; border-radius: 12px;
  box-shadow: 0 10px 26px -10px rgba(168,77,48,.6);
  transition: background .16s, transform .12s;
}
.cta:hover { background: var(--clay-deep); }
.cta:active { transform: translateY(1px); }
.cta .sub {
  display: block; font-family: var(--mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(253,247,242,.72); margin-top: 5px;
}
.btn-ghost {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--sans); font-size: .96rem; font-weight: 500;
  padding: 13px 22px; border-radius: 11px; transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--clay); color: var(--clay); }

/* ── motion ───────────────────────────────────────────── */
@keyframes sa-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-adv { display: inline-block; color: var(--clay); line-height: 0; animation: sa-float 5.5s ease-in-out infinite; cursor: pointer; }
@keyframes lk-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,0,0,1), transform .8s cubic-bezier(.2,0,0,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hero-adv { animation: none; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  [style*="lk-fade-up"], [class*="fade"] { animation: none !important; opacity: 1 !important; }
}

/* ── social row ───────────────────────────────────────── */
.lk-socials { display: flex; gap: 16px; align-items: center; }
.lk-socials a { color: var(--ink-3); display: inline-flex; transition: color .18s, transform .18s; }
.lk-socials a:hover { color: var(--clay); transform: translateY(-1px); }
.lk-socials svg { display: block; width: 17px; height: 17px; }

/* ── sealed line / essence ────────────────────────────── */
.sealed {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}