/* /assets/light/light.css — Spark Light v3.3.1 (logo clamp + thumbnails) */
:root{
  --ux-ink:#0f172a; --ux-muted:#475569; --ux-bg:#ffffff; --ux-card:#ffffff; --ux-ring:#e2e8f0;
  --ux-brand:#2563eb; --ux-brand2:#22d3ee; --ux-grad: linear-gradient(135deg, var(--ux-brand), var(--ux-brand2));
  --logo-h:28px; --thumb-ratio: 3 / 2;
}
/* Base */
.ux-light{ color:var(--ux-ink); background:var(--ux-bg); font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; }
.ux-light img{ max-width:100%; height:auto; display:block; }
.ux-wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
a{ color:var(--ux-brand); text-decoration:none } a:hover{text-decoration:underline}

/* Nav */
.ux-nav{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); border-bottom:1px solid var(--ux-ring); backdrop-filter:saturate(180%) blur(8px); }
.ux-nav-in{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; }
.ux-logo{ display:flex; align-items:center; gap:10px; color:var(--ux-ink); font-weight:800; letter-spacing:.2px }
.ux-logo img{ height:var(--logo-h); max-height:var(--logo-h); width:auto; object-fit:contain; }
@media (max-width: 860px){ .ux-logo img{ height:24px; max-height:24px } }
.ux-menu{ display:none; gap:10px; align-items:center }
.ux-link{ color:var(--ux-ink); padding:10px 12px; border-radius:10px } .ux-link:hover{ background:#f1f5f9; text-decoration:none }
.ux-burger{ display:inline-flex; flex-direction:column; gap:4px; background:none; border:1px solid var(--ux-ring); border-radius:12px; padding:10px 12px; min-height:44px }
.ux-burger span{ width:22px; height:2px; background:var(--ux-ink); display:block }
@media (min-width: 860px){ .ux-menu{ display:flex } .ux-burger{ display:none } }
.ux-mobile{ display:none; background:#fff; border-bottom:1px solid var(--ux-ring) }
.ux-mobile-link{ display:block; padding:14px 16px; border-top:1px solid var(--ux-ring); color:var(--ux-ink) }
.ux-open .ux-mobile{ display:block }

/* Sections helpers */
.u-card{ background:var(--ux-card); border:1px solid var(--ux-ring); border-radius:16px; padding:14px }
.u-title{ color:var(--ux-ink) } .u-sub{ color:var(--ux-muted) }
.u-btn{ background:var(--ux-grad); color:#fff; border:none; border-radius:12px; padding:12px 16px; min-height:44px; display:inline-flex; align-items:center; justify-content:center }
.u-progress{ height:10px; border:1px solid var(--ux-ring); border-radius:999px; overflow:hidden }
.u-progress > i{ display:block; height:100%; background:linear-gradient(90deg,#22d3ee,#2563eb) }

/* Unified thumbnail style for projects/blog */
.ux-thumb{ position:relative; background:#f8fafc; border:1px solid var(--ux-ring); border-radius:12px; overflow:hidden;
  aspect-ratio: var(--thumb-ratio); box-shadow: 0 6px 20px rgba(2, 6, 23, .05); }
.ux-thumb > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1); transition: transform .35s ease; }
.ux-thumb:hover > img{ transform: scale(1.03); }

/* Footer */
.ux-foot{ margin-top:20px; border-top:1px solid var(--ux-ring); background:#fff }
.ux-foot-grid{ display:grid; grid-template-columns:2fr repeat(3,1fr); gap:16px; padding:24px 0 }
@media (max-width: 900px){ .ux-foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width: 560px){ .ux-foot-grid{ grid-template-columns:1fr } }