/* ============================================================
   Lex Carousel Engine — styles
   Ports the "Lex Carousel Kit" design system (claude.ai/design handoff)
   into scoped, dependency-free CSS. Everything lives under `.lexc` so it
   never collides with the host page's tokens.

   Slides are authored in a fixed 540×675 (4:5) coordinate space and scaled
   to fit their container via the `--s` variable (set by engine.js). That
   keeps every slide pixel-proportional at any width — same as a PNG export.
   ============================================================ */

.lexc{
  /* marketing accent palette (gold). Swap these six on .lexc to recolor
     every slide at once — the engine reads them through the kit primitives. */
  --k-accent:#E0A33B;
  --k-accent-soft:#F3E3C1;
  --k-accent-ink:#946312;
  --k-on-accent:#2C2A26;
  --k-on-accent-mut:rgba(44,42,38,.66);
  --k-on-accent-line:rgba(44,42,38,.22);
  --k-radius:26px;
  --kit-serif:"Fraunces","Newsreader",Georgia,serif;
  --kit-sans:"Inter",-apple-system,"SF Pro Text",system-ui,sans-serif;
}
.lexc *{box-sizing:border-box}

/* ---------- accent recolor variants (data-accent on .lexc) ---------- */
.lexc[data-accent="sage"]{
  --k-accent:#5E6B45; --k-accent-soft:#E4E7D7; --k-accent-ink:#46522F;
  --k-on-accent:#F6F2E8; --k-on-accent-mut:rgba(246,242,232,.74); --k-on-accent-line:rgba(246,242,232,.22);
}
.lexc[data-accent="clay"]{
  --k-accent:#C2714F; --k-accent-soft:#F2DDCF; --k-accent-ink:#9C4E2E;
  --k-on-accent:#FBF3EC; --k-on-accent-mut:rgba(251,243,236,.76); --k-on-accent-line:rgba(251,243,236,.24);
}

/* ============ gallery layout ============ */
.lexc-gallery{display:flex; flex-direction:column; gap:clamp(56px,9vw,104px)}
.lexc-post{
  display:grid; grid-template-columns:1fr minmax(300px,380px);
  gap:clamp(28px,5vw,64px); align-items:center;
}
.lexc-post:nth-child(even){grid-template-columns:minmax(300px,380px) 1fr}
.lexc-post:nth-child(even) .lexc-info{order:2}
.lexc-info .lexc-format{
  font-family:var(--kit-sans); font-weight:800; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--k-accent-ink, #8B5A1C);
  display:inline-flex; align-items:center; gap:.55em;
}
.lexc-info .lexc-format::before{content:""; width:22px; height:2px; background:#E59A3C; border-radius:2px}
.lexc-title{font-family:var(--kit-serif); font-weight:600; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.08; letter-spacing:-.015em; margin:.7rem 0 0; color:#1B1A18}
.lexc-caption{margin:1.1rem 0 0; color:#6E6B65; white-space:pre-line; font-size:1rem; line-height:1.55; max-width:46ch}
.lexc-tags{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.2rem}
.lexc-tags span{font-size:.82rem; font-weight:700; color:var(--k-accent-ink); background:var(--k-accent-soft); padding:.32em .7em; border-radius:8px}

/* ---------- mobile: collapse the 2-up post into a single column ----------
   Without this the post stays grid 1fr/minmax(300px,380px) on phones, so the
   carousel column alone demands ~300px+ and overflows/squishes a 375px screen.
   Stack info above the carousel and cancel the even-row reorder. */
@media(max-width:720px){
  .lexc-post,
  .lexc-post:nth-child(even){grid-template-columns:1fr; gap:clamp(20px,6vw,34px)}
  .lexc-post:nth-child(even) .lexc-info{order:0}
  .lexc-stage{max-width:440px; margin:0 auto; width:100%}
}

/* ============ carousel chrome ============ */
.lexc-carousel{position:relative; width:100%; --i:0; --s:1}
.lexc-vp{
  position:relative; overflow:hidden; border-radius:24px;
  aspect-ratio:540/675; background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.06), 0 26px 60px rgba(27,26,24,.14);
  border:1px solid #E8E5DE; touch-action:pan-y;
}
.lexc-track{
  display:flex; height:100%; will-change:transform;
  transform:translateX(calc(var(--i) * -100%));
  transition:transform .44s cubic-bezier(.2,.72,.18,1);
}
.lexc-track.drag{transition:none; cursor:grabbing}
.lexc-slide{flex:0 0 100%; height:100%; position:relative; overflow:hidden}

/* nav arrows */
.lexc-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid #E8E5DE;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  display:grid; place-items:center; cursor:pointer; color:#1B1A18;
  box-shadow:0 6px 18px rgba(27,26,24,.14); transition:transform .18s, opacity .2s, background .2s;
}
.lexc-nav:hover{transform:translateY(-50%) scale(1.07); background:#fff}
.lexc-nav:disabled{opacity:0; pointer-events:none}
.lexc-nav svg{width:20px; height:20px}
.lexc-prev{left:-14px} .lexc-next{right:-14px}
@media(max-width:520px){ .lexc-prev{left:6px} .lexc-next{right:6px} }

/* dots */
.lexc-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:5;
  display:flex; justify-content:center; gap:7px; pointer-events:auto;
}
.lexc-dot{
  width:7px; height:7px; border-radius:7px; border:0; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:width .22s, background .22s;
}
.lexc-dot.on{width:22px; background:#fff}

/* counter chip */
.lexc-count{
  position:absolute; top:14px; right:14px; z-index:5;
  font-family:var(--kit-sans); font-size:12px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:rgba(28,26,22,.42); padding:4px 10px; border-radius:999px;
  backdrop-filter:blur(4px);
}

/* ============ the slide (kit) ============ */
.kit-slide{
  position:absolute; top:0; left:0; width:540px; height:675px;
  transform:scale(var(--s)); transform-origin:top left;
  font-family:var(--kit-sans); -webkit-font-smoothing:antialiased;
  color:var(--c-ink); display:flex; flex-direction:column; padding:54px;
}
.kit-grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* surfaces */
.surf-cream   {--c-ink:#2C2A26; --c-muted:#8A857B; --c-line:#E4DDCD; --c-field:#EBE4D5; background:#F4F1EA; color:#2C2A26}
.surf-card    {--c-ink:#2C2A26; --c-muted:#8A857B; --c-line:#E4DDCD; --c-field:#F3EEE3; background:#FFFDF8; color:#2C2A26}
.surf-sage    {--c-ink:#F6F2E8; --c-muted:rgba(246,242,232,.72); --c-line:rgba(246,242,232,.20); --c-field:rgba(255,255,255,.10); background:#5E6B45; color:#F6F2E8}
.surf-sageDeep{--c-ink:#F4F0E6; --c-muted:rgba(244,240,230,.70); --c-line:rgba(244,240,230,.18); --c-field:rgba(255,255,255,.08); background:#3F4A37; color:#F4F0E6}
.surf-accent  {--c-ink:var(--k-on-accent); --c-muted:var(--k-on-accent-mut); --c-line:var(--k-on-accent-line); --c-field:rgba(255,255,255,.16); background:var(--k-accent); color:var(--k-on-accent)}

/* primitives */
.kit-serif{font-family:var(--kit-serif); font-weight:600; letter-spacing:-.022em; line-height:1.02; text-wrap:balance; margin:0}
.kit-body{font-family:var(--kit-sans); margin:0; text-wrap:pretty}
.kit-kicker{
  font-family:var(--kit-sans); font-weight:600; font-size:16px; letter-spacing:.16em;
  text-transform:uppercase; margin:0; display:inline-flex; align-items:center; gap:8px;
}
.kdot{width:7px; height:7px; border-radius:9px; background:currentColor}
.grow{flex:1; min-height:12px}
.kit-row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.kit-visual{flex:1; display:flex; margin-top:28px}
.kit-swipe{display:flex; align-items:center; gap:10px; color:var(--c-muted); font-size:17px; font-weight:600; letter-spacing:.04em}
.em-it{color:var(--k-accent); font-style:italic}
.em-un{box-shadow:inset 0 -.14em 0 var(--k-accent)}

/* mascot bubble + signature */
.kit-bubble{border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.kit-sig{display:flex; align-items:center; gap:14px}
.kit-sig-mark{width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.kit-sig-name{font-family:var(--kit-serif); font-weight:600; font-size:24px; letter-spacing:-.02em}
.kit-sig-sub{font-size:16px; font-weight:500; letter-spacing:.01em}

/* pill */
.kit-pill{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px; border-radius:999px;
  font-size:17px; font-weight:600; background:var(--c-field); color:var(--c-ink); border:1px solid var(--c-line);
}
.kit-pill.accent{background:var(--k-accent-soft); color:var(--k-accent-ink); border-color:transparent}

/* mock visual cards share a paper-card look */
.kit-card{
  background:#FFFDF8; border-radius:var(--k-radius); border:1px solid #E4DDCD;
  box-shadow:0 16px 40px rgba(40,38,32,.12);
}
.kit-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}