/* ============================================================
   LisaLatte — the café that never closes.

   Her art is ice blue on black with warm cream accents, so this is a
   late-night espresso bar lit blue rather than the usual brown coffee
   shop. Three sections named after her own tagline: grab a cup, audit
   the stream, let the games begin.

   Prefix: .ll-  |  theme hook: body.cp-theme-lisalatte
   ============================================================ */

@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url('/assets/fonts/quicksand-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/assets/fonts/caveat-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/assets/fonts/courier-prime-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Courier Prime'; src: url('/assets/fonts/courier-prime-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; }

body.cp-theme-lisalatte {
  --ll-ink: #03060A;
  --ll-ink-2: #080C13;
  --ll-card: #111925;
  --ll-line: rgba(143, 217, 242, .18);
  --ll-ice: #8FD9F2;
  --ll-hot: #00FAFA;
  --ll-cream: #FFE7CE;
  --ll-latte: #C9A27A;
  --ll-text: #E9F4F9;
  --ll-mute: #8CA3B4;

  --ll-disp: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --ll-hand: 'Caveat', 'Nunito', cursive;
  --ll-mono: 'Courier Prime', ui-monospace, monospace;

  background: var(--ll-ink);
  color: var(--ll-text);
}

/* .cp paints the site's pink gradients and its own padding; her page takes
   the shell over completely. */
.ll {
  --wrap: 1180px;
  background: transparent;
  color: var(--ll-text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 400;
  padding: 0;
  position: relative;
  z-index: 1;
}
.ll .cp-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.ll .cp-sec { padding: clamp(54px, 8vw, 104px) 0; }

.ll h1, .ll h2, .ll h3 { font-family: var(--ll-disp); font-weight: 700; letter-spacing: -.01em; }
.ll p { color: var(--ll-mute); }

/* Everything that arrives on scroll (creator.js sets .is-in). */
.ll [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }
.ll [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ll [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------------- section shell ---------------- */
.ll-sec { position: relative; padding: clamp(54px, 8vw, 104px) 0; }
.ll-sec--audit { background: linear-gradient(180deg, transparent, rgba(143, 217, 242, .05) 40%, transparent); }
.ll-sec--wall { background: rgba(10, 15, 23, .72); }

.ll-eyebrow {
  font-family: var(--ll-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ll-hot); margin: 0 0 12px;
}
.ll-h2 { font-size: clamp(30px, 5vw, 52px); line-height: 1.05; margin: 0 0 18px; color: var(--ll-text); }
.ll-h2 em { font-style: normal; color: var(--ll-ice); }
.ll-h2--center { text-align: center; }
.ll-sub { font-size: clamp(17px, 2.2vw, 21px); margin: 34px 0 16px; color: var(--ll-cream); font-weight: 600; }
.ll-lead { max-width: 60ch; margin: 0 auto 30px; text-align: center; font-size: 16px; line-height: 1.7; }

/* ---------------- floating art ---------------- */
.ll-float { position: absolute; pointer-events: none; z-index: 2; }
.ll-float img { display: block; width: 100%; height: auto; }


/* ============================================================
   THE ROOM - the animated backdrop

   Two techniques, put together.

   The ripple spreads four crests at once - bright, pale, bright, dark -
   which is what makes it read as a surface rather than one expanding hoop.
   The reference does that with animated box-shadow spread; here it is a
   radial gradient moved by transform, because box-shadow spread repaints
   the whole area every frame and this runs full-screen.

   The glitter is a still texture, tiled twice at different scales, sitting
   ON TOP in colour-dodge. A grain only lights up when something bright
   passes underneath it - a ripple crest, a lamp, the pointer. So the
   sparkle belongs to the ripple instead of being sprinkled near it, and
   the glitter itself never animates at all.

   Everything that does move is transform or opacity. No canvas, and no JS
   beyond two custom properties for the pointer.
   ============================================================ */
.ll-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  /* Keeps the blend modes inside the backdrop, off the page content. */
  isolation: isolate;
}
.ll-bg > span { position: absolute; display: block; }

/* ---------------- the glitter sheet ---------------- */
.ll-glitterfield {
  inset: -30px;
  background-image: url("/assets/img/glitter-tile.png"), url("/assets/img/glitter-tile.png");
  background-size: 224px 224px, 468px 468px;
  background-position:
    calc(30% + var(--ll-gx, 0px)) calc(30% + var(--ll-gy, 0px)),
    calc(70% - var(--ll-gx, 0px)) calc(70% - var(--ll-gy, 0px));
  mix-blend-mode: color-dodge;
  /* Low enough that a grain over plain dark is barely a sheen; it is the
     ripple crest or a lamp passing underneath that makes it flash. The
     pointer's own pool of light is a separate, brighter sheet. */
  opacity: .11;
}

/* The pointer as a second light.

   This is the reference recipe, kept intact: a coloured base, the glitter
   twice at two scales, and a radial light that runs white -> pale -> black,
   blended overlay / multiply / colour / overlay. The black beyond the pool
   is the whole point — multiplied against the glitter it leaves nothing, so
   grains exist only where the light reaches. Screen on the element itself
   means those black areas add nothing to the page underneath.

   Four background layers on one element. Nothing animates: the pointer
   writes two custom properties and the compositor does the rest. */
.ll-spot {
  inset: 0;
  background-image:
    linear-gradient(135deg, rgb(42, 32, 20), rgb(20, 38, 46)),
    url("/assets/img/glitter-tile.png"),
    url("/assets/img/glitter-tile.png"),
    radial-gradient(circle at var(--ll-px, 50%) var(--ll-py, 38%),
      rgb(206, 232, 246) 14px, rgba(168, 206, 230, .24) 120px, rgb(0, 0, 0) 42%);
  background-size: cover, 168px auto, 372px auto, cover;
  background-position:
    calc(70% + var(--ll-gx, 0px)) calc(70% + var(--ll-gy, 0px)),
    calc(30% - var(--ll-gx, 0px)) calc(30% - var(--ll-gy, 0px)),
    calc(70% + var(--ll-gx, 0px)) calc(70% + var(--ll-gy, 0px)),
    center;
  background-blend-mode: overlay, multiply, color, overlay;
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 1.1s ease;
}
.ll-bg.is-lit .ll-spot { opacity: .34; }

/* ---------------- the lamps ---------------- */
.ll-bg-glow { border-radius: 50%; filter: blur(70px); will-change: transform, opacity; }
.ll-bg-glow--warm {
  width: 46vmax; height: 46vmax; top: -14vmax; left: -10vmax;
  background: radial-gradient(circle, rgba(255, 231, 206, .085), transparent 66%);
  animation: ll-breathe 19s ease-in-out infinite;
}
.ll-bg-glow--cool {
  width: 54vmax; height: 54vmax; right: -16vmax; bottom: -20vmax;
  background: radial-gradient(circle, rgba(0, 250, 250, .07), transparent 66%);
  animation: ll-breathe 25s ease-in-out infinite reverse;
}
@keyframes ll-breathe {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .6; }
  50% { transform: scale(1.18) translate3d(2vmax, -2vmax, 0); opacity: .88; }
}

/* ---------------- the drips ----------------
   One ring each. The ring fades out at the end of its cycle and the drip
   jumps to its next place during that gap, so ripples stop queueing up in
   the same few spots - which is what gave the old version its pattern. */
.ll-drip { width: 0; height: 0; }

.ll-drip i {
  position: absolute; left: 0; top: 0;
  width: 380px; height: 380px; margin: -190px 0 0 -190px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 52%,
    rgba(160, 226, 247, .07) 58%,
    rgba(160, 226, 247, .34) 64%,
    rgba(160, 226, 247, .05) 69%,
    rgba(255, 255, 255, .22) 75%,
    rgba(255, 255, 255, .03) 80%,
    rgba(120, 214, 245, .19) 86%,
    transparent 91%,
    rgba(0, 0, 0, .15) 95%,
    transparent 100%);
  opacity: 0; will-change: transform, opacity;
  animation-name: ll-ripple; animation-timing-function: cubic-bezier(.14, .74, .3, 1);
  animation-iteration-count: infinite;
}

@keyframes ll-ripple {
  0%   { transform: scale(.05); opacity: 0; }
  7%   { opacity: .62; }
  55%  { opacity: .3; }
  100% { transform: scale(var(--ll-reach, 1)); opacity: 0; }
}

/* The drop landing, just before its ring. */
.ll-drip::before {
  content: ''; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px;
  border-radius: 50%; background: radial-gradient(circle, rgba(214, 244, 255, .8), transparent 68%);
  opacity: 0;
  animation-name: ll-drop; animation-timing-function: ease-out; animation-iteration-count: infinite;
}
@keyframes ll-drop {
  0% { opacity: 0; transform: scale(.4); }
  4% { opacity: .95; transform: scale(1.6); }
  16% { opacity: 0; transform: scale(.5); }
  100% { opacity: 0; }
}

.ll-drip--1 { left: 12%; top: 20%; animation: ll-wander-1 19.2s step-end infinite; }
.ll-drip--1 i { animation-duration: 6.4s; }
.ll-drip--1 { --ll-reach: .62; }
@keyframes ll-wander-1 {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(54vw, 32vh, 0); }
  66%  { transform: translate3d(22vw, 61vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.ll-drip--2 { left: 76%; top: 24%; animation: ll-wander-2 22.2s step-end infinite; }
.ll-drip--2 i { animation-duration: 7.4s; }
.ll-drip--2 { --ll-reach: 1.05; }
@keyframes ll-wander-2 {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-49vw, 41vh, 0); }
  66%  { transform: translate3d(-16vw, -13vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.ll-drip--3 { left: 31%; top: 74%; animation: ll-wander-3 21s step-end infinite; }
.ll-drip--3 i { animation-duration: 7s; }
.ll-drip--3 { --ll-reach: .78; }
@keyframes ll-wander-3 {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(40vw, -47vh, 0); }
  66%  { transform: translate3d(55vw, 12vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.ll-drip--4 { left: 57%; top: 51%; animation: ll-wander-4 25.8s step-end infinite; }
.ll-drip--4 i { animation-duration: 8.6s; }
.ll-drip--4 { --ll-reach: 1.2; }
@keyframes ll-wander-4 {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-37vw, -33vh, 0); }
  66%  { transform: translate3d(27vw, 31vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.ll-drip--5 { left: 85%; top: 68%; animation: ll-wander-5 20.4s step-end infinite; }
.ll-drip--5 i { animation-duration: 6.8s; }
.ll-drip--5 { --ll-reach: .66; }
@keyframes ll-wander-5 {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-63vw, -24vh, 0); }
  66%  { transform: translate3d(-28vw, 20vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.ll-drip--6 { left: 43%; top: 13%; animation: ll-wander-6 23.4s step-end infinite; }
.ll-drip--6 i { animation-duration: 7.8s; }
.ll-drip--6 { --ll-reach: .92; }
@keyframes ll-wander-6 {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(13vw, 57vh, 0); }
  66%  { transform: translate3d(-35vw, 45vh, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.ll-drip--1::before { animation-duration: 6.4s; }
.ll-drip--2::before { animation-duration: 7.4s; }
.ll-drip--3::before { animation-duration: 7s; }
.ll-drip--4::before { animation-duration: 8.6s; }
.ll-drip--5::before { animation-duration: 6.8s; }
.ll-drip--6::before { animation-duration: 7.8s; }

/* Two of them warmer, as though a lamp were nearer. */
.ll-drip--4 i, .ll-drip--6 i {
  background: radial-gradient(circle,
    transparent 0 52%,
    rgba(255, 231, 206, .06) 58%,
    rgba(255, 231, 206, .28) 64%,
    rgba(255, 231, 206, .04) 69%,
    rgba(255, 255, 255, .17) 75%,
    rgba(255, 255, 255, .03) 80%,
    rgba(240, 206, 170, .16) 86%,
    transparent 91%,
    rgba(0, 0, 0, .14) 95%,
    transparent 100%);
}

/* ---------------- a few grains with their own clock ---------------- */
.ll-glitter { inset: 0; }
.ll-glitter i {
  position: absolute; background: #fff;
  clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
  filter: drop-shadow(0 0 5px rgba(160, 226, 247, .85));
  opacity: 0;
  animation-name: ll-glint; animation-iteration-count: infinite; animation-timing-function: ease-in-out;
}
.ll-glitter i:nth-child(3n) { filter: drop-shadow(0 0 5px rgba(255, 231, 206, .8)); }
.ll-glitter i:nth-child(5n) { filter: drop-shadow(0 0 6px rgba(0, 250, 250, .8)); }
@keyframes ll-glint {
  0%, 58%   { opacity: 0; transform: scale(.2) rotate(-35deg); }
  70%       { opacity: 1; transform: scale(1.6) rotate(0deg); }
  78%       { opacity: .75; transform: scale(1.15) rotate(12deg); }
  90%, 100% { opacity: 0; transform: scale(.2) rotate(35deg); }
}

/* ---------------- steam ---------------- */
.ll-bg-steam {
  bottom: -22vh; width: 18vmax; height: 62vh; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(143, 217, 242, .09), transparent 72%);
  filter: blur(26px); will-change: transform, opacity;
  animation: ll-drift 26s ease-in-out infinite;
}
.ll-bg-steam--1 { left: 8%; animation-delay: 0s; }
.ll-bg-steam--2 { left: 44%; animation-delay: -9s; animation-duration: 32s; }
.ll-bg-steam--3 { left: 76%; animation-delay: -18s; animation-duration: 29s; }
@keyframes ll-drift {
  0% { transform: translate3d(0, 10vh, 0) scale(.85); opacity: 0; }
  22% { opacity: .85; }
  70% { opacity: .6; }
  100% { transform: translate3d(4vmax, -85vh, 0) scale(1.5); opacity: 0; }
}

/* A phone pays for every blurred pixel, so it gets a smaller room. */
@media (max-width: 760px) {
  .ll-bg-steam--2, .ll-bg-steam--3, .ll-drip--5, .ll-drip--6 { display: none; }
  .ll-bg-steam { filter: blur(16px); }
  .ll-bg-glow { filter: blur(44px); }
  .ll-spot { display: none; }
}

/* Still, but not empty: the ripples stop mid-spread and the glitter stays
   lit by the lamps, so the page keeps its texture without anything moving. */
@media (prefers-reduced-motion: reduce) {
  .ll-bg-glow, .ll-bg-steam, .ll-drip, .ll-drip i, .ll-drip::before, .ll-glitter i { animation: none; }
  .ll-bg-steam { opacity: .5; transform: translate3d(0, -30vh, 0); }
  .ll-drip::before { display: none; }
  .ll-drip i { opacity: .3; transform: scale(.72); }
  .ll-drip--2 i, .ll-drip--5 i { transform: scale(1); }
  .ll-glitter i { opacity: .3; }
  .ll-glitterfield { opacity: .5; }
}
.perf-lite .ll-bg-glow, .perf-lite .ll-bg-steam,
.perf-lite .ll-drip, .perf-lite .ll-drip i, .perf-lite .ll-drip::before, .perf-lite .ll-glitter i { animation: none; }
.perf-lite .ll-drip::before, .perf-lite .ll-spot { display: none; }
.perf-lite .ll-drip i { opacity: .3; transform: scale(.72); }
.perf-lite .ll-drip--2 i, .perf-lite .ll-drip--5 i { transform: scale(1); }
.perf-lite .ll-glitter i { opacity: .3; }

/* ============================================================
   HERO — her ID badge on its lanyard
   ============================================================ */
.ll-hero { position: relative; overflow: hidden; padding: clamp(96px, 13vw, 150px) 0 clamp(40px, 6vw, 72px); isolation: isolate; }

.ll-hero-bg { position: absolute; inset: 0; z-index: -2; }
/* Her eye banner is the backdrop: dimmed enough to read over, not so far
   that you cannot tell what it is. */
.ll-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; filter: saturate(1.05) brightness(.6); }
.ll-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(0, 250, 250, .14), transparent 62%),
    linear-gradient(100deg, rgba(5, 8, 13, .92) 0%, rgba(5, 8, 13, .62) 46%, rgba(5, 8, 13, .5) 70%, var(--ll-ink) 100%),
    linear-gradient(180deg, transparent 40%, rgba(5, 8, 13, .94) 99%);
}

.ll-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }

.ll-open {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-family: var(--ll-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ll-ice); background: rgba(143, 217, 242, .08);
  border: 1px solid var(--ll-line); border-radius: 999px; padding: 7px 14px;
}
.ll-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ll-hot); box-shadow: 0 0 10px var(--ll-hot); animation: ll-pulse 2.4s ease-in-out infinite; }
@keyframes ll-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.ll-name {
  font-size: clamp(46px, 9vw, 104px); line-height: .94; margin: 0 0 14px; color: #fff;
  text-shadow: 0 0 44px rgba(0, 250, 250, .32);
}
.ll-tag {
  font-family: var(--ll-hand); font-size: clamp(22px, 3.2vw, 33px); line-height: 1.25;
  color: var(--ll-cream); margin: 0 0 22px; max-width: 22ch;
}

.ll-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 26px; }
.ll-tags li {
  font-family: var(--ll-disp); font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ll-ice); border: 1px solid var(--ll-line); border-radius: 999px; padding: 6px 13px;
  background: rgba(143, 217, 242, .06);
}

.ll-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ll-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px;
  font-family: var(--ll-disp); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ll-btn svg { width: 18px; height: 18px; fill: currentColor; }
.ll-btn--go { background: var(--ll-hot); color: #04242A; box-shadow: 0 10px 30px rgba(0, 250, 250, .28); }
.ll-btn--live { background: rgba(143, 217, 242, .1); color: var(--ll-text); border: 1px solid var(--ll-line); }
.ll-btn:hover { transform: translateY(-2px); }
.ll-btn--go:hover { box-shadow: 0 14px 38px rgba(0, 250, 250, .42); }
.ll-btn--live:hover { background: rgba(143, 217, 242, .18); }

/* the badge itself */
.ll-badge { position: relative; justify-self: center; width: min(360px, 62vw); }
.ll-badge-swing {
  transform-origin: 50% 2%;
  animation: ll-swing 7s ease-in-out infinite;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(0, 250, 250, .16));
}
.ll-badge-swing img { display: block; width: 100%; height: auto; }
@keyframes ll-swing {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}
.ll-badge-note {
  font-family: var(--ll-hand); font-size: 20px; color: var(--ll-ice); text-align: center;
  margin: 8px 0 0; transform: rotate(-2deg);
}
@media (prefers-reduced-motion: reduce) { .ll-badge-swing { animation: none; } }

/* The button text was inheriting the site's link colour over her dark hero. */
.ll-btn--live, .ll-btn--live:visited { color: var(--ll-text); }
.ll-btn--go, .ll-btn--go:visited { color: #04242A; }

/* ---------------- her nav ---------------- */
body.cp-theme-lisalatte .cpnav { font-family: 'Quicksand', 'Nunito', system-ui, sans-serif; }
body.cp-theme-lisalatte .cpnav-in {
  background: rgba(10, 15, 23, .62); border-color: rgba(143, 217, 242, .2);
  box-shadow: 0 14px 34px -20px rgba(0, 250, 250, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.cp-theme-lisalatte .cpnav-in { background: rgba(10, 15, 23, .95); } }
.perf-lite body.cp-theme-lisalatte .cpnav-in { background: rgba(10, 15, 23, .96); }
body.cp-theme-lisalatte .cpnav-who { color: var(--ll-text); font-weight: 600; border-left-color: rgba(143, 217, 242, .18); }
body.cp-theme-lisalatte .cpnav-av { border-color: var(--ll-hot); box-shadow: 0 0 14px -4px var(--ll-hot); }
body.cp-theme-lisalatte .cpnav-links a { color: var(--ll-ice); font-weight: 600; }
body.cp-theme-lisalatte .cpnav-links a:hover { color: var(--ll-hot); }
/* The section you are in: the same cream-on-dark the cart takes when you
   hover it, so the two warm marks on the bar match each other. */
body.cp-theme-lisalatte .cpnav-links a[aria-current="true"] {
  background: var(--ll-cream); color: #2A1E12;
  box-shadow: 0 6px 16px -8px rgba(255, 231, 206, .75);
}
body.cp-theme-lisalatte .cpnav-links a[aria-current="true"]:hover { color: #2A1E12; }

/* The controls on the right of the nav, and the sheet the burger opens: all
   of these ship in the site's purple, which is the one thing on her page
   that was not hers. */
body.cp-theme-lisalatte .cpnav-account {
  background: rgba(143, 217, 242, .1); color: var(--ll-ice);
  border: 1px solid rgba(143, 217, 242, .2);
}
body.cp-theme-lisalatte .cpnav-account:hover { background: var(--ll-hot); color: #04242A; border-color: var(--ll-hot); }

body.cp-theme-lisalatte .cpnav-cart {
  background: var(--ll-hot); color: #04242A;
  box-shadow: 0 8px 18px -10px var(--ll-hot);
}
body.cp-theme-lisalatte .cpnav-cart:hover { background: var(--ll-cream); color: #2A1E12; }

body.cp-theme-lisalatte .cpnav-burger {
  background: rgba(143, 217, 242, .1);
  border: 1px solid rgba(143, 217, 242, .2);
}
body.cp-theme-lisalatte .cpnav-burger span { background: var(--ll-hot); }

/* The sheet takes its colours from the site's light theme, so on a dark
   partner page it opened as a pale panel. */
body.cp-theme-lisalatte .msheet {
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(0, 250, 250, .07), transparent 60%),
    var(--ll-ink);
}
body.cp-theme-lisalatte .msheet-close { color: var(--ll-text); }
body.cp-theme-lisalatte .msheet nav a {
  color: var(--ll-text); border-bottom-color: rgba(143, 217, 242, .16);
  font-family: var(--ll-disp);
}
body.cp-theme-lisalatte .msheet nav a:hover { color: var(--ll-hot); }
body.cp-theme-lisalatte .msheet .btn {
  border-color: rgba(143, 217, 242, .3); color: var(--ll-text) !important; background: rgba(143, 217, 242, .08);
}
body.cp-theme-lisalatte .msheet .btn-acc,
body.cp-theme-lisalatte .msheet .btn-press {
  background: var(--ll-hot); border-color: var(--ll-hot); color: #04242A !important;
}

/* ---------------- the eye band ---------------- */
.ll-eyeband { position: relative; overflow: hidden; background: var(--ll-ink); }
.ll-eyeband img { display: block; width: 100%; height: clamp(150px, 22vw, 290px); object-fit: cover; object-position: center 46%; }
.ll-eyeband::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ll-ink) 0%, transparent 26%, transparent 66%, var(--ll-ink) 100%);
}
/* A specular streak crossing the band, driven by where the band is in the
   viewport rather than by a timer: scroll down and the sheen travels across
   it, scroll back up and it returns. lisalatte.js writes one number.

   Done in JS rather than with a view() timeline because that needs the
   element laid out in a resolvable scroll container from the start, and
   Safari is still catching up on it. One custom property either way. */
.ll-eyeband-shine {
  position: absolute; inset: -40% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 36%,
    rgba(255, 255, 255, .1) 45%,
    rgba(226, 246, 255, .46) 50%,
    rgba(255, 255, 255, .1) 55%,
    transparent 64%);
  mix-blend-mode: screen;
  transform: translate3d(calc(-62% + (var(--ll-shine, 0) * 124%)), 0, 0);
  will-change: transform;
}

/* The band itself should not fade in — only its sheen moves. */
.ll [data-reveal].ll-eyeband { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .ll-eyeband-shine { display: none; } }
.perf-lite .ll-eyeband-shine { display: none; }

.ll-eyeband-line {
  position: absolute; inset: auto 0 clamp(12px, 2.5vw, 26px); z-index: 3; text-align: center;
  font-family: var(--ll-hand); font-size: clamp(19px, 3vw, 30px); color: var(--ll-cream);
  text-shadow: 0 2px 18px rgba(5, 8, 13, .9);
}

/* steam drifting up the hero */
.ll-steam {
  position: absolute; bottom: -40px; width: 130px; height: 300px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(143, 217, 242, .16), transparent 70%);
  filter: blur(14px); animation: ll-rise 12s ease-in-out infinite;
}
.ll-steam--a { left: 12%; animation-delay: 0s; }
.ll-steam--b { left: 47%; animation-delay: 3.5s; }
.ll-steam--c { left: 78%; animation-delay: 7s; }
@keyframes ll-rise {
  0% { transform: translateY(40px) scale(.8); opacity: 0; }
  40% { opacity: .9; }
  100% { transform: translateY(-260px) scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ll-steam { animation: none; opacity: .4; } }

/* ============================================================
   TICKER
   ============================================================ */
.ll-ticker {
  overflow: hidden; border-block: 1px solid var(--ll-line);
  background: linear-gradient(90deg, rgba(0, 250, 250, .08), rgba(143, 217, 242, .03));
  padding: 13px 0;
}
.ll-ticker-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: ll-marquee 38s linear infinite; }
.ll-ticker-track span {
  font-family: var(--ll-disp); font-weight: 700; font-size: clamp(15px, 2vw, 21px);
  text-transform: uppercase; letter-spacing: .06em; color: var(--ll-text); white-space: nowrap;
}
.ll-ticker-track i { color: var(--ll-hot); font-style: normal; font-size: 15px; }
@keyframes ll-marquee { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ll-ticker-track { animation: none; } }

/* ============================================================
   1 · GRAB A CUP
   ============================================================ */
.ll-about { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.ll-about-art { position: relative; }

.ll-frame {
  margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--ll-line);
  background: var(--ll-card); box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}
.ll-frame img { display: block; width: 100%; height: auto; }
.ll-frame figcaption {
  font-family: var(--ll-hand); font-size: 21px; color: var(--ll-cream);
  padding: 10px 16px 14px; text-align: center;
}

.ll-peek { width: clamp(90px, 13vw, 138px); right: -14px; bottom: -26px; z-index: 3; }

.ll-about-copy p { font-size: 16px; line-height: 1.75; margin: 0 0 14px; }

.ll-house {
  margin-top: 26px; padding: 18px 20px; border-radius: 16px;
  background: rgba(143, 217, 242, .05); border-left: 3px solid var(--ll-hot);
}
.ll-house h3 { font-size: 15px; margin: 0 0 10px; color: var(--ll-cream); letter-spacing: .04em; }
.ll-house ul { margin: 0; padding-left: 18px; }
.ll-house li { color: var(--ll-mute); font-size: 14.5px; line-height: 1.7; }

/* ---------------- the menu board ----------------
   She is a SIBLING of the card, not a child of it, and the card paints on
   top: that is what lets her slide out from behind its edge rather than
   over it. The card's own background has to stay opaque for the trick. */
.ll-menu-wrap { position: relative; margin-top: clamp(40px, 6vw, 72px); }
.ll-menu-wrap.has-star { margin-top: clamp(170px, 24vw, 280px); }

.ll-menu {
  position: relative; z-index: 1; padding: clamp(28px, 4vw, 48px);
  border-radius: 26px; border: 1px solid var(--ll-line);
  background:
    radial-gradient(70% 90% at 92% 8%, rgba(0, 250, 250, .08), transparent 58%),
    var(--ll-card);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
}

.ll-menu-head { margin-bottom: clamp(20px, 3vw, 30px); }
.ll-menu-head h3 {
  font-size: clamp(28px, 4.4vw, 46px); margin: 0 0 6px; color: var(--ll-cream);
  letter-spacing: .01em;
}
.ll-menu-head p { font-family: var(--ll-hand); font-size: clamp(20px, 2.6vw, 27px); margin: 0; color: var(--ll-ice); }

/* Bigger rows: the icons are her art, so they get room to be seen. */
.ll-menu-list { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.ll-menu-list li {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 22px);
  padding: clamp(12px, 1.8vw, 18px) 0; border-bottom: 1px dashed var(--ll-line);
}
.ll-menu-list li:last-child { border-bottom: 0; }

.ll-menu-pic {
  flex: none; width: clamp(66px, 9vw, 104px); height: clamp(66px, 9vw, 104px);
  display: grid; place-items: center; border-radius: 20px;
  background: rgba(143, 217, 242, .07); border: 1px solid var(--ll-line);
  transition: transform .2s ease, border-color .2s ease;
}
.ll-menu-list li:hover .ll-menu-pic { transform: translateY(-3px) rotate(-3deg); border-color: rgba(0, 250, 250, .45); }
.ll-menu-pic img { width: 88%; height: 88%; object-fit: contain; }

.ll-menu-text { display: flex; flex-direction: column; gap: 3px; }
.ll-menu-text b { font-family: var(--ll-disp); font-size: clamp(18px, 2.4vw, 25px); color: var(--ll-text); }
.ll-menu-text i { font-style: normal; font-size: clamp(14px, 1.7vw, 16px); color: var(--ll-mute); }
.ll-menu-dots { flex: 1; border-bottom: 2px dotted rgba(143, 217, 242, .28); margin-bottom: 7px; min-width: 24px; }
.ll-menu-price { font-family: var(--ll-mono); font-size: clamp(15px, 2vw, 19px); color: var(--ll-hot); }

.ll-menu-counter {
  position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); margin: 0;
  width: clamp(150px, 21vw, 240px); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--ll-line); box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}
.ll-menu-counter img { display: block; width: 100%; height: auto; }
.ll-menu-counter figcaption {
  font-family: var(--ll-hand); font-size: 17px; color: var(--ll-cream);
  background: rgba(5, 8, 13, .72); padding: 5px 10px 7px; text-align: center;
}

/* Her, sliding out from behind the card and settling with a tilt back. The
   slide is on the span, the idle bob on the image, so the two never fight
   over one transform. */
.ll-menu-star {
  position: absolute; z-index: 0; pointer-events: none;
  right: clamp(-6px, 2vw, 40px); bottom: calc(100% - clamp(30px, 4.5vw, 62px));
  width: clamp(250px, 38vw, 470px);
  opacity: 0; transform: translate3d(38px, 120px, 0) rotate(12deg);
  transition: transform 1.05s cubic-bezier(.19, .84, .26, 1) .18s, opacity .55s ease .18s;
}
.ll-menu-wrap.is-in .ll-menu-star { opacity: 1; transform: translate3d(0, 0, 0) rotate(-5.5deg); }

.ll-menu-star img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(0, 250, 250, .16));
  animation: ll-nibble 6s ease-in-out infinite;
}
@keyframes ll-nibble {
  0%, 100% { transform: translateY(0) rotate(-.8deg); }
  50% { transform: translateY(-8px) rotate(.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ll-menu-star { transition: none; opacity: 1; transform: rotate(-5.5deg); }
  .ll-menu-star img { animation: none; }
}
.perf-lite .ll-menu-star img { animation: none; }

/* ============================================================
   2 · THE AUDIT — a till receipt
   ============================================================ */
.ll-audit { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 60px); align-items: center; }
.ll-audit-copy p { font-size: 16px; line-height: 1.75; }
.ll-split {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: rgba(0, 250, 250, .06); border: 1px solid var(--ll-line); color: var(--ll-text);
  font-size: 15px; line-height: 1.7;
}
.ll-split b { font-family: var(--ll-disp); font-size: 22px; color: var(--ll-hot); }

.ll-receipt {
  justify-self: center; width: min(330px, 84vw); padding: 0 24px 4px;
  background: #F7F4EC; color: #1A1A1A;
  font-family: var(--ll-mono);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .55);
  transform: rotate(-1.4deg);
}
/* the torn edges, top and bottom */
.ll-receipt-top, .ll-receipt-bottom {
  height: 12px; margin-inline: -24px;
  background:
    linear-gradient(45deg, transparent 50%, #F7F4EC 51%) 0 0 / 12px 12px repeat-x,
    linear-gradient(-45deg, transparent 50%, #F7F4EC 51%) 0 0 / 12px 12px repeat-x;
}
.ll-receipt-top { transform: rotate(180deg); }

.ll-receipt-brand { font-family: var(--ll-disp); font-weight: 700; font-size: 24px; letter-spacing: .12em; text-align: center; margin: 14px 0 2px; color: #1A1A1A; }
.ll-receipt-sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; text-align: center; margin: 0 0 16px; color: #6A6A6A; }

.ll-receipt-lines { list-style: none; margin: 0; padding: 14px 0; border-block: 1px dashed #B9B4A6; }
.ll-receipt-lines li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.ll-receipt-lines span { color: #4A4A4A; }
.ll-receipt-lines b { margin-left: auto; font-weight: 700; color: #1A1A1A; text-align: right; }

.ll-receipt-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 4px; font-size: 14px; }
.ll-receipt-total span { letter-spacing: .1em; text-transform: uppercase; color: #4A4A4A; font-size: 11px; }
.ll-receipt-total b { font-size: 17px; color: #0B7A7A; }
.ll-receipt-thanks { font-family: var(--ll-hand); font-size: 20px; text-align: center; color: #6A6A6A; margin: 8px 0 12px; }

/* ============================================================
   3 · MEDIA
   ============================================================ */
.ll-media-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px;
}

/* Playing happens in the middle of the screen now — the shared .cp-player
   overlay in creator.css — so the cards keep their size and the grid never
   reflows under the pointer. */
.ll-media { min-width: 0; }

/* TikToks are shot upright, so they get a portrait frame rather than being
   letterboxed into a 16:9 one — and they slide sideways instead of wrapping,
   the way the other partner pages carry theirs. */
.ll-media-row--tall {
  display: grid; grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: minmax(225px, calc((100% - 66px) / 4));
  gap: 22px; overflow-x: auto; margin: 0 -12px; padding: 6px 12px 26px;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: rgba(0, 250, 250, .45) transparent;
}
.ll-media-row--tall > * { scroll-snap-align: start; }
.ll-media-row--tall::-webkit-scrollbar { height: 8px; }
.ll-media-row--tall::-webkit-scrollbar-track { background: rgba(143, 217, 242, .08); border-radius: 99px; }
.ll-media-row--tall::-webkit-scrollbar-thumb { background: rgba(0, 250, 250, .4); border-radius: 99px; }
.ll-media-row--tall::-webkit-scrollbar-thumb:hover { background: rgba(0, 250, 250, .62); }

.ll-media-row--tall .ll-media-thumb { aspect-ratio: 9 / 16; }


.ll-media-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: var(--ll-card); border: 1px solid var(--ll-line);
  transition: transform .2s ease, border-color .2s ease;
}
/* The link fills the frame; creator-media.js replaces the lot with the player. */
.ll-media-thumb > a { position: absolute; inset: 0; display: block; text-decoration: none; }
.ll-media-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.ll-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ll-media-thumb:hover { transform: translateY(-3px); border-color: rgba(0, 250, 250, .45); }
.ll-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; opacity: .5; }
.ll-thumb-fallback img { width: 48%; height: auto; object-fit: contain; }

.ll-media-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(5, 8, 13, .66); border: 1px solid rgba(143, 217, 242, .5);
  transition: background .2s ease, transform .2s ease;
}
.ll-media-play::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 14px solid var(--ll-hot); border-block: 9px solid transparent; transform: translateX(2px);
}
.ll-media-thumb:hover .ll-media-play { background: rgba(5, 8, 13, .84); transform: scale(1.08); }

.ll-media-chip {
  position: absolute; top: 9px; left: 9px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--ll-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
}
.ll-media-chip--clip { background: var(--ll-hot); color: #04242A; }
.ll-media-chip--tiktok { background: var(--ll-cream); color: #2A1E12; }
.ll-media-chip--stream { background: rgba(5, 8, 13, .8); color: var(--ll-ice); border: 1px solid var(--ll-line); }
.ll-media-len {
  position: absolute; right: 9px; bottom: 9px; padding: 2px 7px; border-radius: 6px;
  background: rgba(5, 8, 13, .82); color: var(--ll-text); font-family: var(--ll-mono); font-size: 11px;
}

.ll-media-title {
  font-size: 14.5px; font-weight: 600; line-height: 1.45; margin: 11px 0 3px; color: var(--ll-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ll-media-meta { font-family: var(--ll-mono); font-size: 11.5px; margin: 0; color: var(--ll-mute); }

/* her emotes, the way chat fires them */
.ll-emotes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 6px; }
.ll-emotes-label { font-family: var(--ll-hand); font-size: 21px; color: var(--ll-ice); }
.ll-emotes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.ll-emotes li {
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--ll-line); background: rgba(143, 217, 242, .07);
  transition: transform .18s ease, border-color .18s ease;
}
.ll-emotes li:hover { transform: translateY(-3px) scale(1.06); border-color: rgba(0, 250, 250, .5); }
.ll-emotes img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }

/* ============================================================
   WALL — the gallery
   ============================================================ */
.ll-wall { columns: 3 280px; column-gap: 16px; }
.ll-art {
  display: block; width: 100%; margin: 0 0 16px; padding: 0; border: 1px solid var(--ll-line);
  border-radius: 16px; overflow: hidden; background: var(--ll-card); cursor: zoom-in;
  break-inside: avoid; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ll-art img { display: block; width: 100%; height: auto; }
.ll-art:hover { transform: translateY(-4px); border-color: rgba(0, 250, 250, .45); box-shadow: 0 20px 44px rgba(0, 0, 0, .5); }
.ll-art:focus-visible { outline: 2px solid var(--ll-hot); outline-offset: 3px; }

/* ============================================================
   SHOP
   ============================================================ */
.ll-soon {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 36px);
  max-width: 760px; margin: 0 auto; padding: clamp(22px, 4vw, 36px);
  border-radius: 22px; border: 1px solid var(--ll-line); background: var(--ll-card);
}
.ll-soon img { width: clamp(120px, 18vw, 190px); height: auto; }
.ll-soon > div { flex: 1 1 280px; }
.ll-soon-big { font-family: var(--ll-disp); font-weight: 700; font-size: clamp(18px, 2.6vw, 24px); color: var(--ll-text); margin: 0 0 8px; }
.ll-soon p { font-size: 15px; line-height: 1.7; margin: 0 0 16px; }

/* ============================================================
   THE COUNTER - her products

   The shared glass cards, on the shared .gal grid. The ambient light
   behind that grid ships warm orange and violet for the homepage; here it
   is her cyan and cream, or the whole section glows the wrong colour.
   ============================================================ */
.ll .ll-gal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  background: none;
  border: 0;
  margin-top: 8px;
}
.ll .ll-gal .gl-card { min-width: 0; }
.ll .ll-gal .gl-media img { width: 100%; height: 100%; object-fit: cover; }

.ll .ll-gal::before {
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(0, 250, 250, .2), transparent 70%),
    radial-gradient(34% 28% at 82% 48%, rgba(255, 231, 206, .16), transparent 70%),
    radial-gradient(40% 30% at 42% 88%, rgba(143, 217, 242, .16), transparent 70%);
}

@media (max-width: 960px) { .ll .ll-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 560px) { .ll .ll-gal { grid-template-columns: 1fr; } }

/* ============================================================
   JOIN DRXP - the band every partner page carries

   Shared markup (.cp-join), so only the colours change: her ink and her
   cyan instead of the site's pink-to-purple, and a coffee cup where the
   card usually puts a heart.
   ============================================================ */
.ll .cp-join { margin-top: clamp(40px, 6vw, 76px); }

.ll .cp-join-card {
  background:
    radial-gradient(70% 90% at 88% 6%, rgba(0, 250, 250, .1), transparent 62%),
    linear-gradient(135deg, #0C1620, #131C26);
  border: 1px solid var(--ll-line);
  box-shadow: 0 26px 60px -28px rgba(0, 250, 250, .3);
  color: var(--ll-text);
}
.ll .cp-join-card::before {
  content: '\2615';   /* a cup, not a heart */
  right: -10px; top: -70px; font-size: 280px;
  color: rgba(143, 217, 242, .07);
}
.ll .cp-join-card .cp-kick { color: var(--ll-hot); font-family: var(--ll-mono); opacity: 1; }
.ll .cp-join-card h2 { font-family: var(--ll-disp); color: var(--ll-text); }
.ll .cp-join-card p { color: var(--ll-mute); opacity: 1; }

.ll .cp-num {
  background: rgba(143, 217, 242, .07);
  border: 1px solid var(--ll-line);
}
.ll .cp-num b { font-family: var(--ll-disp); color: var(--ll-ice); }
.ll .cp-num .l { color: var(--ll-mute); }

.ll .cp-btn { font-family: var(--ll-disp); }
.ll .cp-btn-white {
  background: var(--ll-hot); border-color: var(--ll-hot); color: #04242A !important;
  box-shadow: 0 10px 26px -12px var(--ll-hot);
}
.ll .cp-btn-white:hover { background: var(--ll-cream); border-color: var(--ll-cream); color: #2A1E12 !important; }
.ll .cp-btn-ghost { border-color: rgba(143, 217, 242, .4); color: var(--ll-text) !important; }
.ll .cp-btn-ghost:hover { background: rgba(143, 217, 242, .14); border-color: var(--ll-ice); color: var(--ll-text) !important; }

/* ============================================================
   END
   ============================================================ */
.ll-sec--end { position: relative; padding-bottom: clamp(70px, 10vw, 120px); }
.ll-end { position: relative; text-align: center; }
.ll-crouch { width: clamp(120px, 17vw, 190px); left: 2%; bottom: -30px; opacity: .9; }

.ll-socials { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0; margin: 0 0 22px; }
.ll-socials a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: 999px;
  border: 1px solid var(--ll-line); background: rgba(143, 217, 242, .05); color: var(--ll-text);
  text-decoration: none; font-family: var(--ll-disp); font-weight: 600; font-size: 14px;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.ll-socials svg { width: 17px; height: 17px; fill: currentColor; }
.ll-socials a:hover { background: rgba(0, 250, 250, .14); border-color: rgba(0, 250, 250, .4); transform: translateY(-2px); }

.ll-biz { font-family: var(--ll-mono); font-size: 13px; margin: 0 0 10px; }
.ll-biz a { color: var(--ll-ice); }
.ll-sig { font-family: var(--ll-hand); font-size: 19px; color: var(--ll-ice); margin: 0; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.ll-lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 4vmin;
  background: rgba(3, 5, 9, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .28s ease;
}
.ll-lightbox[hidden] { display: none; }
.ll-lightbox.is-open, .ll-lightbox.is-closing { opacity: 1; }
.ll-lightbox.is-closing { opacity: 0; transition-duration: .34s; }

.ll-lightbox img {
  max-width: 100%; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  transform-origin: 50% 50%; will-change: transform;
  /* The open and the close are the same move, played in opposite directions. */
  transition: transform .42s cubic-bezier(.22, .78, .24, 1);
}
.ll-lightbox.is-closing img { transition-duration: .34s; transition-timing-function: cubic-bezier(.4, 0, .7, .3); }

@media (prefers-reduced-motion: reduce) {
  .ll-lightbox, .ll-lightbox img { transition: none; }
}
.ll-lightbox-close {
  position: absolute; top: 18px; right: 20px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ll-line); background: rgba(143, 217, 242, .1); color: var(--ll-text);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.ll-lightbox-close:hover { background: rgba(0, 250, 250, .2); }

/* ============================================================
   NARROW
   ============================================================ */
@media (max-width: 900px) {
  .ll-hero-in, .ll-about, .ll-audit { grid-template-columns: 1fr; }
  .ll-badge { order: -1; width: min(280px, 58vw); }
  .ll-hero { padding-top: clamp(80px, 16vw, 110px); }
  .ll-tag { max-width: none; }
  .ll-receipt { transform: none; margin-top: 8px; }
  .ll-menu-counter { position: static; margin: 20px auto 0; width: min(240px, 60vw); }
  .ll-menu-wrap.has-star { margin-top: clamp(130px, 40vw, 240px); }
  .ll-menu-star { right: auto; left: 50%; width: min(330px, 74vw); margin-left: min(-165px, -37vw); }
  .ll-menu-star { transform: translate3d(0, 120px, 0) rotate(12deg); }
  .ll-menu-wrap.is-in .ll-menu-star { transform: translate3d(0, 0, 0) rotate(-5.5deg); }
  .ll-wall { columns: 2 200px; }
}

@media (max-width: 560px) {
  .ll-wall { columns: 1; }
  .ll-peek { width: 84px; right: -6px; bottom: -18px; }
  .ll-menu-list li { gap: 10px; }
  .ll-menu-pic { width: 44px; height: 44px; }
  .ll-crouch { display: none; }
}

/* The page's scrollbars in this palette (site.css reads --scroll-acc off
   <html>, which only the literal colour can reach from here). */
html:has(> body.cp-theme-lisalatte) { --scroll-acc: #8FD9F2; }