/* RinjinCLAB lockup — camera-watermark style.
   Markup:
   <span class="lockup">
     <span class="lk-thin">neighbor</span><span class="lk-x">X</span>
     <span class="lk-bold">rinjin CLAB</span>
     <span class="lk-badge"><b>隣</b></span>
   </span>
   Size the whole thing with font-size on .lockup. */
.lockup {
  --lk-ink: currentColor;
  --lk-blue: #1f33d6;
  --lk-pink: #ff3fa4;
  display: inline-flex;
  align-items: center;
  gap: .18em;
  line-height: 1;
  color: var(--lk-ink);
  white-space: nowrap;
}
.lk-thin {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 200;
  letter-spacing: .02em;
  font-size: .92em;
  transform: translateY(.03em);
}
.lk-x {
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 300;
  font-size: .9em;
  margin: 0 .12em 0 .08em;
}
.lk-bold {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.025em;
}
.lk-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.05em;
  height: 1.05em;
  margin-left: .1em;
  background: var(--lk-blue);
  border-radius: .06em;
  overflow: hidden;
  transform: translateY(-.04em);
}
/* CMYK halftone, slightly mis-registered like a cheap print */
.lk-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255,225,0,.85) 30%, transparent 34%) .02em .03em / .1em .1em,
    radial-gradient(circle, rgba(255,42,26,.8) 28%, transparent 33%) .05em 0 / .1em .1em,
    radial-gradient(circle, rgba(255,255,255,.25) 26%, transparent 30%) 0 0 / .07em .07em;
  -webkit-mask: radial-gradient(circle at 70% 30%, #000 20%, transparent 75%);
          mask: radial-gradient(circle at 70% 30%, #000 20%, transparent 75%);
}
.lk-badge b {
  position: relative;
  font-family: "Murecho", sans-serif;
  font-weight: 900;
  font-size: .74em;
  color: var(--lk-pink);
  text-shadow: .03em .03em 0 #fff;
}
.lk-keep { display: inline-flex; align-items: center; gap: .18em; white-space: nowrap; }
.lk-zeiss { width: 1.12em; height: 1.12em; margin-left: .12em; object-fit: cover; border-radius: .05em; transform: translateY(-.04em); }
