/* Lucel Studio — Apple-inspired calm, minimal, elegant */
:root{
  --navy:#0b1322;
  --navy-2:#1e2b3c;
  --gold:#d1b97c;
  --ink:#e7e8ea;
  --muted:#9aa3ad;
  --card:#111a2a;
  --shadow: 0 8px 30px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  color: var(--ink);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

em{font-family: Georgia, 'Times New Roman', serif; font-style: italic}

a{color:inherit; text-decoration:none}
.section{padding:72px 20px; max-width:1200px; margin:0 auto}
.section-title{font-size:32px; margin:0 0 8px}
.section-subtitle{color:var(--muted); margin:0 0 24px}

.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(11,19,34,.75), rgba(11,19,34,.35));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:8px; letter-spacing:.2px}
.brand .mark{color:var(--gold)}
.brand .name{font-weight:600}

.nav a{opacity:.9; padding:8px 10px; border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}

.hero{
  position:relative; min-height:72vh; display:grid; place-items:center;
  padding:0; overflow:hidden;
}
.hero-media{position:absolute; inset:0}
.hero-img{
  width:100%; height:100%; object-fit:cover;
  object-position: center 22%;
  filter:saturate(.95) contrast(1.05);
}
.hero .fade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,19,34,.15) 0%, rgba(11,19,34,.85) 65%, rgba(11,19,34,1) 100%)}
.hero-copy{
  position:relative; z-index:1; max-width:1100px; padding:0 20px; text-align:center;
}
.hero-copy h1{font-size:48px; line-height:1.1; margin:0 0 12px; color:var(--ink); text-shadow:0 10px 40px rgba(0,0,0,.35)}
.hero-copy p{color:#cfd5dd; margin:0 0 18px}

.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:600; letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.1)}
.btn.primary{background: linear-gradient(90deg, rgba(209,185,124,.18), rgba(255,255,255,.06)); border-color:rgba(209,185,124,.35)}
.btn.ghost{background:transparent}

.collections .grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:18px;
}
@media (max-width:1100px){ .collections .grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width:700px){ .collections .grid{ grid-template-columns: repeat(1, 1fr);} }

.card{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:22px; overflow:hidden;
  box-shadow: var(--shadow); transform:translateZ(0);
}
.card img{display:block; width:100%; aspect-ratio: 4/3; object-fit:cover}
.card-body{padding:14px}
.card h3{margin:2px 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}

.product{border-top:1px solid rgba(255,255,255,.06)}
.product.alt{background:rgba(255,255,255,.02)}
.product-head h2{margin:0 0 6px; font-size:28px}
.product-head p{margin:0 0 10px; color:#cfd5dd}
.bullets{margin:8px 0 14px; padding-left:18px}
.bullets li{margin:6px 0}
.bullets.small li{margin:4px 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.actions{display:flex; gap:10px; flex-wrap:wrap}

.compare .table-wrap{overflow:auto; border:1px solid rgba(255,255,255,.06); border-radius:16px}
.compare-table{width:100%; border-collapse:collapse; min-width:720px}
.compare-table th, .compare-table td{padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06)}
.compare-table th{color:var(--gold); font-weight:600; background:rgba(255,255,255,.03)}

.license-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:12px
}
@media (max-width:900px){ .license-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width:560px){ .license-grid{ grid-template-columns: 1fr;} }

.site-footer{
  padding:28px 20px; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)
}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(12px); will-change:opacity, transform; transition: opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform: translateY(0)}

/* === MICROINTERACTIONS & GOLD SHIMMER === */
@keyframes shimmer {
  0% { transform: translateX(-120%); opacity: 0; }
  45% { opacity: .9; }
  100% { transform: translateX(120%); opacity: 0; }
}
.btn {
  position: relative;
  overflow: hidden;
}
.btn.primary::before {
  content: "";
  position: absolute;
  top: 0; left: 0; height: 100%; width: 30%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%);
  filter: blur(2px);
}
.btn.primary:hover::before { animation: shimmer 1.2s ease forwards; }

/* Button hover lift already exists; add a soft glow */
.btn:hover { box-shadow: 0 6px 20px rgba(209,185,124,.18); }

/* Product cards: a subtle parallax lift and border glow on hover */
.product-card{transition:transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease}
.product-card:hover{
  transform: translateY(-6px);
  border-color: rgba(224,207,166,.45);
  box-shadow: 0 14px 38px rgba(0,0,0,.35);
}

/* Live badge pulse */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,207,166,.0); }
  50% { box-shadow: 0 0 0 8px rgba(224,207,166,.12); }
}
.badge.live{
  position: relative;
  background: rgba(224,207,166,.12);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Thumbnail strip under product sections */
.thumbs{
  display:flex; gap:10px; margin:12px 0 14px; flex-wrap:wrap;
}
.thumbs img{
  width:120px; height:76px; object-fit:cover;
  border-radius:10px; border:1px solid rgba(224,207,166,.25);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.thumbs img:hover{ transform: translateY(-2px); border-color:#e0cfa6; box-shadow:0 6px 18px rgba(0,0,0,.28) }

/* Product layout refinement */
.product .intro-wrap{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:start;
}
.product .intro-media{
  border-radius:16px; overflow:hidden; border:1px solid rgba(224,207,166,.22);
}
.product .intro-media img{ width:100%; height:100%; object-fit:cover; display:block }
@media(max-width:900px){
  .product .intro-wrap{ grid-template-columns: 1fr; }
}

/* === THUMBNAIL PACK (400px optimized) & LIGHTBOX === */
.thumbs { display:flex; gap:12px; margin:14px 0 18px; flex-wrap:wrap; }
.thumbs button.thumb {
  border:0; padding:0; background:transparent; cursor:pointer;
  border-radius:10px; overflow:hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.thumbs button.thumb:hover { transform: translateY(-3px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,.34); filter:saturate(1.06) }
.thumbs img { display:block; width:400px; height:auto }

/* Lightbox */
.lb-backdrop{
  position: fixed; inset:0; background: rgba(6,12,20,.82);
  display:none; align-items:center; justify-content:center; z-index: 9999;
}
.lb-backdrop.active{ display:flex }
.lb-frame{
  max-width:min(92vw,1200px); max-height:86vh; border-radius:14px; overflow:hidden;
  background: #0c1623; border:1px solid rgba(224,207,166,.25);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.lb-frame img{ display:block; width:100%; height:auto }
.lb-close{
  position:absolute; top:14px; right:18px; font-size:22px; color:#e0cfa6; cursor:pointer;
  background: rgba(224,207,166,.1); padding:6px 10px; border-radius:10px;
  border:1px solid rgba(224,207,166,.25);
}

/* === COMPARE PAGE & LICENSE TABLE === */
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.page { padding: 80px 0 60px; }
.page h1 { font-family: Georgia, serif; font-style: italic; font-weight: 500; letter-spacing:.2px; font-size: clamp(28px, 4.2vw, 48px); color: #e0cfa6; margin: 0 0 12px; }
.page p.lede { color: #d7d1c3; opacity:.9; margin: 0 0 28px; }

.table-wrap { overflow-x:auto; border-radius:14px; border:1px solid rgba(224,207,166,.22); }
table.compare { width:100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; }
.compare thead th { background: linear-gradient(180deg, rgba(224,207,166,.08), rgba(224,207,166,.04)); color:#e7dcc2; font-weight:600; }
.compare tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }
.compare tbody tr:hover td { background: rgba(224,207,166,.05); }
.compare td.center { text-align: center; }

.badge.tag { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(224,207,166,.28); background: rgba(224,207,166,.09); color:#e0cfa6; font-size:12px; }

/* Teaser cards (Light on the way) */
.teasers { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin: 8px 0 0; }
.teaser { border:1px solid rgba(224,207,166,.18); border-radius:14px; padding:12px 14px; background:linear-gradient(180deg, rgba(224,207,166,.06), rgba(11,19,34,.0)); color:#e8e0cd;
  box-shadow: 0 6px 22px rgba(0,0,0,.28); transition: transform .2s ease, box-shadow .2s ease; }
.teaser:hover { transform: translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.38); }
.teaser small { display:block; opacity:.8; color:#d1c6ad; }


/* ===== LUCEL: Non-breaking enhancements (do NOT require HTML edits) ===== */

/* Bigger collection tiles + taller ratio so product images shine */
.section.collections .grid,
.collections .grid{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.collections .grid .card{
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(224,207,166,.22);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
.collections .grid .card img{
  width:100%;
  aspect-ratio: 4 / 3; /* Taller than before, adjust if needed */
  object-fit: cover;
  display:block;
}

/* Shimmer hover without HTML edits */
@keyframes lucelCardShimmer { 0%{ transform:translateX(-140%); opacity:0;} 40%{opacity:.85;} 100%{ transform:translateX(140%); opacity:0;} }
.collections .grid .card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 45%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%); filter: blur(3px); opacity:0;
}
.collections .grid .card:hover{ transform: translateY(-6px); border-color: rgba(224,207,166,.45); box-shadow: 0 14px 38px rgba(0,0,0,.35); filter: saturate(1.06); }
.collections .grid .card:hover::before{ animation: lucelCardShimmer 1.15s ease forwards; }

/* Move existing .label to a slim footer strip so it doesn't cover the main image */
.collections .grid .card .label{
  position:absolute; left:auto; right:14px; bottom:33%; top:auto;
  transform: translateY(50%);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500; /* slightly thinner/premium */
  letter-spacing: .2px;
  color:#0b1322;
  background: linear-gradient(180deg, rgba(224,207,166,.95), rgba(224,207,166,.78));
  border:1px solid rgba(224,207,166,.6);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 2;
}
.collections .grid .card .label .dot{
  width:7px; height:7px; border-radius:999px; background:#bfa368;
  box-shadow: 0 0 0 5px rgba(224,207,166,.28);
}
/* Optional soft gradient footer background so label reads well without masking image */
.collections .grid .card::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background: linear-gradient(180deg, rgba(6,12,20,0) 0%, rgba(6,12,20,.6) 55%, rgba(6,12,20,.88) 100%);
  pointer-events:none;
}

/* Gentle pulse when card marked as .live (if used in your HTML) */
@keyframes lucelPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
.collections .grid .card.live .label{ animation: lucelPulse 2.6s ease-in-out infinite; }

/* CTA shimmer: applies to your existing .btn.primary (no new class needed) */
@keyframes lucelBtnShimmer { 0%{transform:translateX(-140%);}100%{transform:translateX(140%);} }
.btn.primary{ position:relative; overflow:hidden; }
.btn.primary::before{
  content:""; position:absolute; top:0; left:0; height:100%; width:32%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%);
  transform: translateX(-140%); filter: blur(2px); opacity:0;
}
.btn.primary:hover::before{ animation: lucelBtnShimmer 1.15s ease forwards; opacity:1; }

/* Mobile safety */
@media (max-width: 520px){
  .collections .grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .collections .grid .card .label{ font-size: 12px; }
}



/* Mobile tweak for volume pill positioning */
@media (max-width:520px){
  .collections .grid .card .label{ bottom:35%; font-size:12px; }
}


/* ==========================================================================
   Lucel — Apple-style refinements (v10)
   ========================================================================== */

/* Subtle divider with champagne-gold fade */
.section-divider.subtle{
  height: 1px;
  width: 100%;
  margin: 56px 0 24px;
  background: linear-gradient(90deg, rgba(209,185,124,0) 0%, rgba(209,185,124,.35) 25%, rgba(209,185,124,.35) 75%, rgba(209,185,124,0) 100%);
  border: 0;
}

/* About typography */
#about .lead{
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  opacity: .92;
  margin: 6px 0 16px;
}

#about .about-points{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 16px;
}

@media (min-width: 720px){
  #about .about-points{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

#about .about-points li{
  position: relative;
  padding-left: 14px;
  opacity: .9;
}
#about .about-points li::before{
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .7;
}

/* Bandcamp — champagne-gold outline button */
.btn.btn-outline-gold{
  background: transparent;
  border: 1px solid rgba(209,185,124,.8);
  color: rgba(209,185,124,1);
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.btn.btn-outline-gold:hover{
  background: rgba(209,185,124,.08);
  border-color: rgba(209,185,124,1);
}

.btn.btn-outline-gold:active{
  background: rgba(209,185,124,.12);
}

@media (prefers-reduced-motion: reduce){
  .btn.btn-outline-gold{ transition: none; }
}

/* Bottom spacing harmony */
#bandcamp.section{
  margin-top: 18px;
  margin-bottom: 8px;
}

/* ==========================================================================
   v14 — Tile subtitle readability (scoped, non-destructive)
   ========================================================================== */
.collections .card .tile-subtitle,
.collections .grid .card .tile-subtitle,
.collections .card .subtitle,
.collections .grid .card .subtitle,
.collections .card .sub,
.collections .grid .card .sub,
.collections .card .kicker,
.collections .grid .card .kicker,
.collections .card .eyebrow,
.collections .grid .card .eyebrow,
.collections .card .meta small,
.collections .grid .card .meta small {
  color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-weight: 500;
  letter-spacing: .2px;
}
/* Respect light backgrounds if a tile uses a light theme class */
.collections .card.light .tile-subtitle,
.collections .grid .card.light .tile-subtitle {
  color: rgba(11,19,34,.9);
  text-shadow: none;
}


/* ==========================================================================
   v15 — Tile subtitle readability (warm premium tone)
   ========================================================================== */
.collections .card .tile-subtitle,
.collections .grid .card .tile-subtitle {
  color: rgba(255, 240, 220, 0.95);   /* warm premium white */
  text-shadow: 0 1px 2px rgba(0,0,0,.50);
  font-weight: 500;
  letter-spacing: .2px;
}

/* Fallback for light background tiles */
.collections .card.light .tile-subtitle,
.collections .grid .card.light .tile-subtitle {
  color: rgba(11,19,34,0.92);
  text-shadow: none;
}


/* ==========================================================================
   v16 — Compare top-right breadcrumb (Apple-clean)
   ========================================================================== */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0; /* separator handled via ::before */
  white-space: nowrap;
}

.breadcrumb a{
  font-size: .95rem;
  letter-spacing: .2px;
  opacity: .85;
  text-decoration: none;
  padding: 2px 0;
}

.breadcrumb a:hover{ opacity: 1; }

/* Dot separator between anchors without altering HTML */
.breadcrumb a + a::before{
  content: "·";
  display: inline-block;
  margin: 0 .5rem;
  opacity: .6;
}

/* Slightly tighter on small screens */
@media (max-width: 520px){
  .breadcrumb a{ font-size: .9rem; }
  .breadcrumb a + a::before{ margin: 0 .35rem; }
}


/* ==========================================================================
   v16 — Tile subtitle more readable (brighter, still elegant)
   ========================================================================== */
.collections .card .tile-subtitle,
.collections .grid .card .tile-subtitle {
  color: rgba(255, 248, 240, 0.98);           /* slightly brighter warm white */
  text-shadow: 0 1px 3px rgba(0,0,0,.60);     /* a touch stronger shadow */
  -webkit-text-stroke: 0.2px rgba(0,0,0,.25); /* subtle anti-halo on busy bg */
}

/* Mobile boost for subtitles (no layout impact) */
@media (max-width: 560px){
  .collections .card .tile-subtitle,
  .collections .grid .card .tile-subtitle {
    text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.25);
  }
}

/* Respect light tiles */
.collections .card.light .tile-subtitle,
.collections .grid .card.light .tile-subtitle {
  color: rgba(11,19,34,0.94);
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
}

/* License callout (below quick table) */
.license-callout{
  margin-top: 12px;
  border-left: 2px solid rgba(209,185,124,.45);
  padding: 10px 12px;
}
.license-callout p{ margin: 4px 0; }
.license-callout .tiny{ font-size: .9em; opacity: .85; }


/* ==========================================================================
   v18 — Compare (Full) visual parity tweaks
   ========================================================================== */
#compare-full table,
table.compare,
table[data-compare="full"] {
  border-collapse: separate;
  border-spacing: 0;
}
#compare-full thead th,
table.compare thead th,
table[data-compare="full"] thead th {
  background: linear-gradient(180deg, rgba(15,25,43,.85), rgba(15,25,43,.75));
  color: rgba(255,255,255,.96);
  font-weight: 600;
  letter-spacing: .25px;
  padding: 12px 14px;
}
#compare-full tbody td, #compare-full tbody th,
table.compare tbody td, table.compare tbody th,
table[data-compare="full"] tbody td, table[data-compare="full"] tbody th {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
#compare-full tbody tr:nth-child(odd) td,
table.compare tbody tr:nth-child(odd) td,
table[data-compare="full"] tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,.02);
}
/* Blue-gold accent for first column (Package) */
#compare-full tbody th,
table.compare tbody th,
table[data-compare="full"] tbody th {
  color: rgba(255,255,255,.96);
}
/* Price cells emphasis */
#compare-full td:last-child,
table.compare td:last-child,
table[data-compare="full"] td:last-child {
  font-weight: 600;
  color: rgba(209,185,124,.95);
}


/* v22c — Safe stability & a11y */
:focus-visible { outline: 2px solid rgba(209,185,124,.9); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 420px) {
  table.compare, table.compare-table { table-layout: fixed; }
  table.compare th, table.compare td,
  table.compare-table th, table.compare-table td { word-break: break-word; white-space: normal; }
}



/* v26 — SEO blurb + Privacy block */
.seoblurb { padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.seoblurb .muted { max-width: 70ch; }

.privacy { padding: 2.5rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.privacy h2 { font-weight: 600; letter-spacing: .2px; margin: 0 0 .5rem; }
.privacy .muted { max-width: 70ch; }



/* v26b — unified bottom notes */
.site-notes { padding: 1.75rem 0 2.25rem; border-top: 1px solid rgba(255,255,255,.06); }
.site-notes .micro { font-size: .875rem; line-height: 1.5; opacity: .85; }
.site-notes .micro + .micro { margin-top: .25rem; }

/* === Lucel Extended alignment v251107j === */
/* Slight extra space above CTA and a touch more gap before price block when it's at bottom */
section#product-extended .actions{ margin-top: 0.9rem; }
section#product-extended ul.bullets > li { margin-bottom: 0.28rem; }