/* Nujo brand marks — production CSS. Copy these rules + markup into the app.
   Depends only on the existing :root tokens already in styles.css. */

/* ── j-dot logotype ──────────────────────────────────────────
   Markup: <span class="nujo-mark">Nu<span class="nujo-mark-j">j</span>o</span>
   The orange disc masks the j's own tittle, so the accent scales with
   font-size (everything is in em). */
.nujo-mark {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
  white-space: nowrap;
}
.nujo-mark-j {
  position: relative;
}
.nujo-mark-j::after {
  content: "";
  position: absolute;
  left: 0.205em;
  top: 0.085em;
  width: 0.150em;
  height: 0.150em;
  border-radius: 999px;
  background: var(--orange);
}

/* ── all-caps tracked lockup ─────────────────────────────────
   Markup:
   <div class="nujo-caps">
     <div class="nujo-caps-word">NUJO</div>
     <div class="rule"></div>
     <div class="nujo-caps-tag">Eat · Note · Know</div>
   </div> */
.nujo-caps { text-align: center; }
.nujo-caps-word {
  font-family: "Libre Caslon Display", var(--display);
  font-size: 1em;
  letter-spacing: 0.30em;
  line-height: 1;
  padding-left: 0.30em; /* optical centering for the tracking */
}
.nujo-caps .rule { margin: 0.5em auto; max-width: 6.5em; }
.nujo-caps-tag {
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.2em;
  font-style: italic;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding-left: 0.34em;
}

/* ── horizontal monogram + wordmark lockup ───────────────────
   Markup:
   <div class="nujo-lockup">
     <span class="nujo-crest">N</span>
     <span class="nujo-lockup-text">
       <span class="nujo-mark">Nu<span class="nujo-mark-j">j</span>o</span>
       <span class="nujo-lockup-tag">Nutrition Journal</span>
     </span>
   </div> */
.nujo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.nujo-crest {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border: 1.4px solid var(--forest);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
}
.nujo-lockup-text { display: grid; gap: 0.18rem; }
.nujo-lockup .nujo-mark { font-size: 1.95rem; }
.nujo-lockup-tag {
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.56rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}

/* On dark/forest grounds */
.on-dark .nujo-crest { border-color: rgba(242,235,219,0.55); color: var(--cream); }
.on-dark .nujo-lockup-tag,
.on-dark .nujo-caps-tag { color: rgba(242,235,219,0.7); }
.on-dark .rule { background: rgba(242,235,219,0.4); }