/* ============================================================
   LinkedIn Templates — Animation Fuel
   Strictly using AF design tokens from colors_and_type.css.
   Layout DNA from white-themed reference: magazine-grid,
   named-author footer, swipe affordance, big editorial numerals.
   1080×1350 portrait artboards.
   ============================================================ */

.lk {
  position: relative;
  width: 1080px;
  height: 1350px;
  overflow: hidden;
  font-family: var(--af-font-body);
  letter-spacing: var(--af-ls-body);
  color: var(--af-fg1);
  background: var(--af-white);
  isolation: isolate;
}

/* Color schemes — strict AF tokens only */
.lk-A { background: var(--af-grey-deep); color: var(--af-white); }   /* Dark */
.lk-B { background: var(--af-white-2); color: var(--af-grey); }      /* Light premium */
.lk-C { background: var(--af-orange); color: var(--af-white); }      /* Orange */
.lk-D { background: var(--af-silver); color: var(--af-grey); }       /* Silver */

.lk h1, .lk h2, .lk h3, .lk h4, .lk p { margin: 0; }

/* Display headings — AF Inter Display Medium */
.lk-display {
  font-family: var(--af-font-display);
  font-weight: var(--af-fw-med);
  letter-spacing: var(--af-ls-display);
  line-height: var(--af-lh-display);
}
.lk-h2 {
  font-family: var(--af-font-display);
  font-weight: var(--af-fw-med);
  letter-spacing: var(--af-ls-display);
  line-height: var(--af-lh-heading);
}
.lk-body {
  font-family: var(--af-font-body);
  font-weight: var(--af-fw-reg);
  letter-spacing: var(--af-ls-body);
  line-height: var(--af-lh-body);
}
.lk-mono {
  font-family: var(--af-font-mono);
  font-weight: var(--af-fw-med);
  text-transform: uppercase;
  letter-spacing: var(--af-ls-eyebrow);
}

/* Italic accent — Inter italic at 200, used sparingly for emphasis word */
.lk-em {
  font-family: var(--af-font-body);
  font-weight: 200;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Hero BG image — actual asset */
.lk-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-bg.png');
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Subtle grain — adds premium texture without changing palette */
.lk-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Faint grid pattern (used on dark/orange to add reference structure) */
.lk-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Author footer block — named-author DNA from reference */
.lk-author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lk-author-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--af-orange);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--af-font-display);
  font-weight: var(--af-fw-semi);
  font-size: 22px;
  color: var(--af-white);
  letter-spacing: -0.02em;
}
.lk-author-avatar--dark { background: var(--af-grey); color: var(--af-white); }
.lk-author-avatar--white { background: var(--af-white); color: var(--af-orange); }

.lk-author-name {
  font-family: var(--af-font-display);
  font-weight: var(--af-fw-med);
  font-size: 20px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.lk-author-handle {
  font-family: var(--af-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: var(--af-fw-reg);
  margin-top: 4px;
  opacity: 0.7;
}

/* CTA — uses canonical af-btn primitives but bigger for posts */
.lk-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  border-radius: var(--af-radius-xs);
  font-family: var(--af-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--af-fw-reg);
  font-size: 16px;
  text-decoration: none;
}
.lk-cta--primary { background: var(--af-orange); color: var(--af-white); box-shadow: var(--af-shadow-orange); }
.lk-cta--dark    { background: var(--af-grey-deep); color: var(--af-white); box-shadow: var(--af-shadow-md); }
.lk-cta--white   { background: var(--af-white); color: var(--af-grey-deep); box-shadow: var(--af-shadow-md); }

.lk-cta-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.lk-cta--primary .lk-cta-arrow { background: var(--af-white); color: var(--af-orange); }
.lk-cta--dark    .lk-cta-arrow { background: var(--af-orange); color: var(--af-white); }
.lk-cta--white   .lk-cta-arrow { background: var(--af-orange); color: var(--af-white); }

/* Eyebrow chip */
.lk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--af-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: var(--af-fw-med);
}
.lk-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--af-orange);
}

.lk-pageno {
  font-family: var(--af-font-mono);
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: var(--af-fw-med);
  opacity: 0.55;
}

.lk-rule-orange { display: block; height: 3px; background: var(--af-orange); width: 80px; }

.lk-numtick {
  font-family: var(--af-font-display);
  font-weight: var(--af-fw-med);
  letter-spacing: -0.06em;
  line-height: 0.85;
}

/* ---- Experimental / fancy layout helpers ---- */
.lk-photo {
  background: repeating-linear-gradient(135deg, #e8e8e8 0 14px, #f3f3f3 14px 28px);
  border: 12px solid #ffffff;
  box-shadow: 0 34px 70px rgba(26,29,34,0.22);
  display: flex; align-items: center; justify-content: center;
}
.lk-photo--dark {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 14px, rgba(255,255,255,0.02) 14px 28px);
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 34px 70px rgba(0,0,0,0.45);
}
.lk-photo-label { font-family: var(--af-font-mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; color: #a6a6a6; }
.lk-photo--dark .lk-photo-label { color: rgba(255,255,255,0.5); }
.lk-tape { font-family: var(--af-font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 14px; }