/* lightlux-brand.css — Light Lux brand tokens & logo lockup
   Drop into your site and import the fonts (see README). */

:root {
  /* Core palette */
  --ll-black:        #0E0E10;  /* primary ground            */
  --ll-charcoal:     #26262A;  /* text · lines              */
  --ll-platinum:     #F4F1EA;  /* light ground              */
  --ll-offwhite:     #ECE8E0;  /* text on dark              */
  --ll-gold:         #A8824A;  /* the marked point (on light) */
  --ll-gold-dark:    #C9A258;  /* the marked point (on dark)  */
  --ll-navy:         #1B2A3A;  /* optional secondary ground */

  /* Type */
  --ll-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ll-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ── Wordmark lockup ───────────────────────────────────────────────
   <a class="ll-lockup" href="/">
     <img class="ll-lockup__mark" src="/brand-assets/symbol.svg" alt="">
     <span class="ll-lockup__rule" aria-hidden="true"></span>
     <span class="ll-lockup__text">
       <span class="ll-wordmark">Light<i class="ll-dot">·</i>Lux</span>
       <span class="ll-descriptor">Strategic Business Intelligence</span>
     </span>
   </a>
*/
.ll-lockup { display: inline-flex; align-items: center; gap: 1.8rem; text-decoration: none; }
.ll-lockup__mark { width: 3rem; height: 3rem; display: block; }
.ll-lockup__rule { width: 1px; align-self: stretch; background: rgba(38,38,42,0.16); }
.ll-lockup__text { display: flex; flex-direction: column; gap: 0.55rem; }

.ll-wordmark {
  font-family: var(--ll-serif); font-weight: 500; font-size: 2rem;
  line-height: 1; letter-spacing: -0.012em; color: var(--ll-charcoal);
  white-space: nowrap;
}
.ll-dot { color: var(--ll-gold); font-style: normal; padding: 0 0.16em; position: relative; top: -0.06em; }
.ll-descriptor {
  font-family: var(--ll-mono); font-weight: 400; font-size: 0.7rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: rgba(38,38,42,0.55);
  white-space: nowrap;
}

/* Dark-ground variant — add class .ll-lockup--dark */
.ll-lockup--dark .ll-lockup__rule { background: rgba(236,232,224,0.18); }
.ll-lockup--dark .ll-wordmark    { color: var(--ll-offwhite); }
.ll-lockup--dark .ll-dot         { color: var(--ll-gold-dark); }
.ll-lockup--dark .ll-descriptor  { color: rgba(236,232,224,0.62); }

/* Responsive: drop the descriptor + rule under 30rem if you like */
@media (max-width: 30rem) {
  .ll-lockup { gap: 1rem; }
  .ll-lockup__rule, .ll-descriptor { display: none; }
  .ll-wordmark { font-size: 1.5rem; }
}