/* HRTips.lk — brand layer on top of Bootstrap 5.
   Bootstrap utilities handle layout/spacing; this file only carries brand
   tokens, type and the few things utilities can't express. */

:root {
  --hr-navy: #0e1b33;
  --hr-teal: #21b0a6;
  --hr-teal-ink: #12867e;
  --hr-page: #f7f9fb;
  --hr-line: #dfe6ee;
  --hr-muted: #5a6474;
  --hr-faint: #7c8798;
  --hr-chip: #eaeff5;

  /* Bootstrap theme overrides */
  --bs-body-bg: var(--hr-page);
  --bs-body-color: var(--hr-navy);
  --bs-body-font-family: Manrope, system-ui, -apple-system, sans-serif;
  --bs-link-color: var(--hr-navy);
  --bs-link-hover-color: var(--hr-teal-ink);
  --bs-border-color: var(--hr-line);
}

body { -webkit-font-smoothing: antialiased; }

a { text-decoration: none; }

.bg-navy { background-color: var(--hr-navy) !important; }
.text-teal { color: var(--hr-teal) !important; }
.text-teal-ink { color: var(--hr-teal-ink) !important; }
.text-muted-ink { color: var(--hr-muted) !important; }
.text-faint { color: var(--hr-faint) !important; }
.mono {
  font-family: "IBM Plex Mono", monospace;
}
.display-brand {
  font-family: Sora, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* ---------- header ---------- */

/* one row at every desktop size: the brand keeps the left, the channels and the
   CVX pill sit right and progressively shed their labels as space runs out.
   Below sm the nav and pill each take their own full-width row. */
.masthead { border-radius: 0 0 26px 26px; min-height: 96px; row-gap: 8px; }

.brand { flex: 0 1 auto; min-width: 0; }
.channels, .cvx-pill { flex: none; }

.brand__mark {
  font-family: Sora, sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}
.brand__mark em { color: var(--hr-teal); font-style: normal; }
.brand__mark span { color: rgba(255, 255, 255, 0.35); font-weight: 600; }

.brand__line {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
  max-width: 290px;
  text-wrap: pretty;
}

.channel { border-radius: 14px; transition: background-color 0.15s ease; }
.channel:hover { background: rgba(255, 255, 255, 0.07); }

.channel__icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.channel__icon svg { width: 17px; height: 17px; fill: currentColor; display: block; }

.channel__name { font-size: 15px; font-weight: 700; color: #fff; line-height: 1; }
.channel__meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1;
}

.vrule { width: 1px; height: 42px; background: rgba(255, 255, 255, 0.14); }

.cvx-pill { background: var(--hr-teal); border-radius: 16px; white-space: nowrap; transition: background-color 0.15s ease; }
.cvx-pill:hover { background: #1c9b92; }
.cvx-pill img { height: 26px; width: auto; display: block; }
.cvx-pill__rule { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.35); }
.cvx-pill__label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #fff;
  line-height: 1;
}
.cvx-pill__arrow { font-family: Sora, sans-serif; font-weight: 800; font-size: 17px; color: #fff; line-height: 1; }

/* ---------- hero ---------- */

.hero { display: flow-root; } /* contains the floated portrait */

/* Outlined rather than filled: a solid mass of near-background colour behind
   the headline reads as a rendering smudge, while a hairline outline reads as
   a deliberate mark and leaves the headline legible on top of it. z-index -1
   keeps it behind both the headline and the figure — it relies on no ancestor
   painting a background between it and the page.

   Sized and raised so it tucks under the masthead and reaches no further down
   than the headline's first line: crossing the small lede text below reads as
   interference, not as texture. */
.hero__ghost {
  position: absolute;
  z-index: -1;
  top: -16px;
  left: 24px;
  font-family: Sora, sans-serif;
  font-weight: 800;
  font-size: clamp(160px, 13.5vw, 190px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(14, 27, 51, 0.10);
  pointer-events: none;
  user-select: none;
}


/* The figure is sized from one number (--pw) and pulled up with a negative top
   margin, which moves the float's reserved space with it — so there is no dead
   gap under the figure and nothing to keep in sync by hand.

   nilmani.webp carries 110px of transparent space above the head (9.45% of its
   1169px height, i.e. 14.16% of its width). The pull-up is that band, plus the
   hero's 24px top padding (pt-4), less the 16px gap we want under the masthead.
   --pw is capped at the largest figure that still leaves the footer above the
   fold on a ~980px-tall window; every 10px of width adds ~14px of page height. */
.portrait {
  --pw: min(365px, 30vw);
  width: var(--pw);
  margin: calc(-8px - 0.1416 * var(--pw)) 0 0 52px;
}
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 780 / 1169;
  display: block;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 9%);
  mask-image: linear-gradient(to top, transparent 0%, #000 9%);
}

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--hr-faint);
}

.hero h1 {
  font-family: Sora, sans-serif;
  font-weight: 800;
  font-size: 58px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.hero h1 em { color: var(--hr-teal-ink); font-style: normal; }

.lede { max-width: 820px; font-size: 18px; line-height: 1.75; color: var(--hr-muted); text-wrap: pretty; }

.topic {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--hr-muted);
  background: var(--hr-chip);
  border-radius: 999px;
  padding: 8px 15px;
}

/* buttons — Bootstrap .btn with brand skins */

.btn-navy { background: var(--hr-navy); color: #fff; font-weight: 700; font-size: 16px; padding: 17px 28px; border-radius: 12px; }
.btn-navy:hover, .btn-navy:focus { background: var(--hr-teal-ink); color: #fff; }

.btn-teal { background: var(--hr-teal); color: #fff; font-weight: 700; font-size: 17px; padding: 18px 30px; border-radius: 12px; }
.btn-teal:hover, .btn-teal:focus { background: #1c9b92; color: #fff; }

/* ---------- CVX feature ---------- */

.cvx { background: var(--hr-navy); border-radius: 24px; box-shadow: 0 26px 60px rgba(14, 27, 51, 0.16); }
.cvx__logo { height: 34px; width: auto; display: block; }

.tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--hr-teal);
  border: 1px solid rgba(33, 176, 166, 0.5);
  border-radius: 999px;
  padding: 5px 10px;
  line-height: 1;
}

.cvx__title {
  font-family: Sora, sans-serif;
  font-weight: 800;
  font-size: 38px;
  line-height: 1.08;
  color: #fff;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.cvx__copy { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); max-width: 480px; }

.step { font-size: 19px; color: rgba(255, 255, 255, 0.86); }
.step b {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: rgba(33, 176, 166, 0.18);
  color: var(--hr-teal);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--hr-line); font-size: 14px; }
.foot a { font-weight: 600; color: var(--hr-muted); }

/* ---------- responsive ---------- */

@media (max-width: 575.98px) {
  .masthead { border-radius: 0 0 20px 20px; }
  .channels { width: 100%; justify-content: space-between; }
  .cvx-pill { width: 100%; }
}

@media (max-width: 991.98px) {
  .hero h1 { font-size: 40px; }
  .portrait { float: none !important; width: 100%; margin: 0 0 8px; text-align: center; }
  .portrait img { width: 260px; height: auto; margin: 0 auto; }
  .cvx__title { font-size: 30px; }
}