/* ==========================================================
   Brand mark: j with a heart dot
   Used in: nav, end of case study, password gate.
   Relies on the tokens in css/variables.css.
   Add to css/style.css:  @import url("brand-mark.css");
   ========================================================== */

.jmark {
  display: block;
  width: auto;
  height: 1em;
  overflow: visible;
}
.jmark__stem { stroke: currentColor; }
.jmark__heart {
  fill: var(--color-clay, #8F2942);
  transform-box: fill-box;
  transform-origin: 50% 70%;
  transition: transform var(--transition-bounce, 450ms cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* ---------- 1. Nav initials mark ---------- */
.brand-mark {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  color: var(--color-text-primary, #1E1B1C);
  text-decoration: none;

  /* Kept in sync with .site-logo-name / .site-logo-role's own font-size
     in navigation.css, and with .brand-mark__name's gap — the jmark's
     height below is derived from these three so its top/bottom line up
     with the cap height of "Joyti Kaur" and the baseline of the role
     label exactly, instead of a guessed fixed size. */
  --brand-name-size: clamp(1.1rem, 0.9rem + 0.94vw, 1.75rem);
  --brand-role-size: 0.6rem;
  --brand-text-gap: 7px;
  /* Plus Jakarta Sans 600's cap-height ratio, measured in-browser (a
     1cap-wide probe at font-size:1000px measured 745px -> 0.745). */
  --brand-role-cap-ratio: 0.745;
}
.brand-mark .jmark {
  /* Matches .site-logo-name's font exactly so 1cap below equals the
     name's actual cap height. */
  font-family: var(--font-family-wordmark);
  font-style: italic;
  font-size: var(--brand-name-size);
  --brand-mark-h: calc(1cap + var(--brand-text-gap) + (var(--brand-role-size) * var(--brand-role-cap-ratio)));
  height: var(--brand-mark-h);
  width: calc(var(--brand-mark-h) * 32 / 49);
}
.brand-mark:hover .jmark__heart,
.brand-mark:focus-visible .jmark__heart {
  transform: translateY(-3px) scale(1.25);
}
.brand-mark:focus-visible {
  outline: 2px solid var(--color-focus, #7C93B5);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 6px);
}
/* When the nav sits on a dark (espresso) background */
.brand-mark--inverse { color: var(--color-text-inverse, #F7F8FA); }

/* ---------- 2. End-of-case-study marker ---------- */
.case-end {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  max-width: var(--container-narrow-width, 800px);
  margin: var(--space-20, 5rem) auto var(--space-12, 3rem);
  color: var(--color-text-primary, #1E1B1C);
}
.case-end::before,
.case-end::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border, #D8DDE2);
}
.case-end .jmark { font-size: 1.75rem; }
.case-end__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .jmark__heart { transition: none; }
  .brand-mark:hover .jmark__heart,
  .brand-mark:focus-visible .jmark__heart { transform: none; }
}