@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root{--silver:#B0B0B0;--bg:#0b0b0b;--panel:#121212;--muted:#9aa0a6;--text:#e8e8e8;--accent:#C5A46D;--accent-2:#7aa7ff;--border:#252525}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:var(--bg);color:var(--text);line-height:1.5}
a{color:inherit;text-decoration:none}.container{max-width:1100px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);background:rgba(10,10,10,.7);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}.brand h1{margin:0;font-size:20px;letter-spacing:.06em}.tag{color:var(--muted);font-size:12px}
.menu{display:flex;gap:10px;font-size:14px;flex-wrap:wrap}.menu a{padding:6px 9px;border-radius:999px;border:1px solid transparent}.menu a:hover{border-color:var(--border)}
main>section{padding:36px 0}.section-sub{color:var(--muted)}.cta-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--accent);color:#0a0a0a;border:0;border-radius:10px;padding:8px 12px;font-weight:600;cursor:pointer}.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}.btn.small{padding:4px 8px;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.card{grid-column:span 4;background:#141414;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:#111}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.pill{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.6);border:1px solid var(--border);color:var(--text);font-size:10px;padding:4px 6px;border-radius:999px}
.meta{padding:10px}.title{font-size:14px;margin:0 0 3px}.details{color:var(--muted);font-size:12px;margin:0}.chip-sale{font-size:10px;color:var(--accent-2);border:1px dashed var(--border);padding:3px 6px;border-radius:999px}
.artist-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.artist-card{grid-column:span 4;border:1px solid var(--border);background:#141414;border-radius:14px;padding:12px;display:grid;gap:8px;cursor:pointer}
.artist-name{font-weight:600}.artist-count{font-size:12px;color:var(--muted)}.artist-tools{display:flex;gap:8px;align-items:center;margin:0 0 10px}.artist-tools input{flex:1}
footer{border-top:1px solid var(--border);padding:14px 0 28px;color:var(--muted);font-size:12px}
/* Lightbox with commentary */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:20px;z-index:60}
.lightbox.open{display:flex}.lb-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;max-width:min(1200px,96vw);max-height:92vh}
.lb-image{background:#0f0f0f;border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:auto}
.lb-image img{max-width:100%;max-height:90vh;display:block}
.lb-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;min-height:280px}
.lb-title{margin:0;font-size:18px}.lb-meta{font-size:12px;color:var(--muted)}.lb-desc{white-space:pre-wrap;font-size:14px;line-height:1.4}
.lb-actions{display:flex;gap:8px;justify-content:flex-end}.lb-close{position:absolute;top:10px;right:10px;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
/* Admin */
.admin-wrap{max-width:760px;margin:24px auto;padding:0 16px}
table{border-collapse:collapse;width:100%}th,td{border:1px solid var(--border);padding:6px 8px;text-align:left}th{background:#181818}
@media(max-width:980px){.card{grid-column:span 6}.artist-card{grid-column:span 6}.lb-wrap{grid-template-columns:1fr}}
@media(max-width:640px){.menu{display:none}.card,.artist-card{grid-column:span 12}}

/* Physical album thumbs */
.lb-thumbs{display:flex;gap:8px;flex-wrap:wrap;max-height:120px;overflow:auto;margin-top:8px}
.lb-thumbs img{height:56px;cursor:pointer;border:1px solid var(--border);border-radius:6px;opacity:.85}
.lb-thumbs img.active{outline:2px solid var(--accent);opacity:1}
.lb-nav{position:absolute;left:10px;right:10px;top:calc(50% - 20px);display:flex;justify-content:space-between;pointer-events:none}
.lb-arrow{pointer-events:auto;background:rgba(0,0,0,.5);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer}
.album-count{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,.6);border:1px solid var(--border);color:var(--text);font-size:10px;padding:4px 6px;border-radius:999px}


/* Landing hero */
.hero-landing{position:relative;min-height:100vh;height:100vh;display:flex;align-items:center;justify-content:flex-start;border-bottom:1px solid var(--border);overflow:hidden;background:black right center no-repeat;background-size:auto 100%;}

.hero-landing .inner{position:relative;z-index:1;max-width:640px;margin-left:18.5vw;text-align:left;padding:48px 16px}
.hero-landing h2{font-size:42px;line-height:1.1;margin:0 0 10px}
.hero-landing p{color:var(--muted);font-size:18px;margin:0 auto;max-width:700px}
@media(max-width:700px){.hero-landing h2{font-size:30px}.hero-landing p{font-size:16px}}

.hero-landing .inner::before{
  content:"";position:absolute;inset:-24px -32px -24px -32px;
  background:linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
  z-index:-1;border-radius:18px;filter:saturate(1.05) contrast(1.05)
}
.hero-landing h2{font-size:42px;line-height:1.1;margin:0 0 10px}
.hero-landing p{color:var(--muted);font-size:18px;margin:0;max-width:620px}
@media(max-width:800px){.hero-landing{justify-content:center;background-position:center center}.hero-landing .inner{margin-left:0;text-align:center}.hero-landing .inner::before{background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.1))}}


/* Square artist cards for Physical page */
.physical-artists-grid .artist-card {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.physical-artists-grid .artist-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Left align landing page heading and subheading */
.landing-header h1,
.landing-header p.subheading {
    text-align: left;
    max-width: 800px;
}

/* enforce left alignment */
#landingTitle, #landingBlurb { text-align:left; margin-left:0; }

/* square artist cards on Physical index */
.artist-grid .artist-card > div:first-child{
  aspect-ratio:1/1;
  width:100%;
  background-size:cover !important;
  background-position:center !important;
  border-radius:12px;
  min-height:unset !important;
}


.hero-title, .hero-subtitle {
    text-align: left;
    margin-left: 5%; /* Match hero text block alignment */
}

/* Desktop thumbnail adjustments */
@media (min-width: 1024px) {
  /* NFT rectangular thumbnails */
  .nft-thumbnail {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
  /* Physical square but smaller */
  .physical-thumbnail {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover !important;
  }
}


/* === Desktop-only thumbnail sizing tweaks === */
@media (min-width: 1024px) {
  /* NFTs: rectangular landscape and smaller cards */
  #nft-artist-index .artist-card { grid-column: span 3 !important; }
  #nft-artist-index .artist-card > div:first-child {
    aspect-ratio: 16 / 9 !important;
    min-height: unset !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Physical: square and smaller cards */
  #physical-artist-index .artist-card { grid-column: span 2 !important; }
  #physical-artist-index .artist-card > div:first-child {
    aspect-ratio: 1 / 1 !important;
    min-height: unset !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* Hide About edit button globally (read-only) */
#lbAbout, .btn-edit, .about-edit { display: none !important; }
#nft-artist-index .artist-card > div:first-child{aspect-ratio:16/9;min-height:unset;background-size:cover;background-position:center}


/* === Desktop: slightly larger Physical thumbnails === */
@media (min-width: 1024px){
  #physical-artist-index .artist-card { grid-column: span 3 !important; }
  #physical-artist-index .artist-card > div:first-child{
    aspect-ratio: 1 / 1;
    min-height: 220px !important; /* increase from ~180px */
    background-size: cover;
    background-position: center;
  }
}

/* Contact dialog */
.contact-dialog{border:none;border-radius:12px;padding:20px;background:#111;color:#eee;max-width:520px;width:92%}
.contact-dialog form{display:flex;flex-direction:column;gap:10px}
.contact-dialog input,.contact-dialog textarea{background:#1b1b1b;border:1px solid #333;color:#eee;border-radius:8px;padding:10px}
.contact-dialog .row{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

.chip-year{position:absolute;right:10px;top:10px;background:#222;border:1px solid #444;color:#ddd;padding:3px 8px;border-radius:999px;font-size:12px}
.card .thumb{position:relative}


/* Compact right-aligned filters on Physical */
.filter-bar{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.select{appearance:none;background:#1b1b1b;border:1px solid #333;color:#eee;border-radius:8px;padding:8px 28px 8px 10px;min-width:160px}
.select:focus{outline:2px solid #555}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width: 640px){ .filter-bar{justify-content:space-between} .select{min-width:48%} }


/* NFT artist index — match Physical */
#artistList, #nft-artist-index{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:stretch;
  justify-content:flex-start;
}
#artistList .artist-card, #nft-artist-index .artist-card{
  flex:1 1 50x;
  max-width:380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
#artistList .artist-card > div:first-child,
#nft-artist-index .artist-card > div:first-child{
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 100px;
  background-size: cover;
  background-position: Left;
}
/* Force grid layout even after filtering */
#nft-artist-index,
#artistList {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 1.5rem !important;
}
#nft-artist-index .artist-card,
#artistList .artist-card {
  width: 100% !important;
}
/* NFT artist list – cards side-by-side like Physical */
#artistList, #nft-artist-index {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

/* KEY: don't let cards stretch to full width */
#artistList .artist-card, #nft-artist-index .artist-card {
  flex: 0 1 320px !important;   /* basis ~320px, no grow */
  max-width: 380px !important;  /* keeps rows tidy */
}
/* When the filter leaves a single artist, make it bigger */
#artistList .artist-card:only-child,
#nft-artist-index .artist-card:only-child {
  grid-column: 1 / -1;              /* span full row in grid */
  width: min(720px, 100%) !important;
  justify-self: start;
}

#artistList .artist-card:only-child > div:first-child,
#nft-artist-index .artist-card:only-child > div:first-child {
  min-height: 420px !important;     /* larger square thumbnail */


}


/* Typography refresh: gallery style */
body{font-family:'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}
h1,h2,h3,h4{font-family:'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: .02em;}
/* Landing hero gold treatment */
.hero-landing h2,
.hero-landing p{color:var(--accent);}
.hero-landing h2{font-weight:800;}


/* Global gold text (site UI text, not artwork titles/details) */
body, header, nav, footer, .tag, .menu a, .section-sub, .btn.secondary, .brand h1, h1, h2, h3, h4, p, span, label {
    color: var(--accent) !important;
}
/* Preserve button primary text color */
.btn{color:#0a0a0a !important;}


/* Deep silver for specific UI elements */
.tag,
.hero-landing .chip,
.menu a,
.btn.secondary {
    color: var(--silver) !important;
    border-color: var(--silver) !important;
}

/* Silver text utility */
.silver-text { color: var(--silver) !important; }

/* Gold text utility */
.gold-text { color: var(--accent) !important; }

.artist-count { color: var(--silver) !important; }

/* Force silver color for the paragraph immediately following gold intro on NFT page */
.gold-text + p,
.gold-text + span,
.gold-text + div,
.gold-text + strong {
    color: var(--silver) !important;
}

/* Larger silver text for section intros */
.silver-text {
    color: var(--silver) !important;
    font-size: 1.25rem !important; /* increase size */
    font-weight: 500;
}

/* Adjust landing page hero vertical position */
#landingHero {
    display: flex;
    align-items: flex-start;
    padding-top: 10vh; /* push down from top */
    min-height: 80vh; /* reduce height to move content up */
}
#landingHero .inner {
    margin-top: 0;
}

/* --- Visual polish: hover + reveal animations --- */
.thumb img, .card .thumb img { transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; }
.card:hover .thumb img { transform: scale(1.02); filter: brightness(1.03); }
.btn { transition: box-shadow .3s ease, transform .2s ease; }
.btn:hover { box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 18px rgba(197,164,109,.15); transform: translateY(-1px); }
.btn.secondary:hover { box-shadow: 0 0 0 1px var(--silver) inset, 0 6px 18px rgba(176,176,176,.15); }

/* Smooth reveal on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Timeline styles */
.timeline{position:relative; margin:12px 0 48px; padding-left:16px;}
.timeline:before{content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:#222;}
.tl-card{position:relative; margin:18px 0 18px 14px; padding-left:14px;}
.tl-card:before{content:''; position:absolute; left:-8px; top:10px; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #111;}
.tl-date{color:var(--silver); font-size:12px; margin-bottom:6px;}
.tl-body{display:flex; gap:12px; align-items:center; background:#121212; border:1px solid var(--border); border-radius:12px; padding:10px;}
.tl-thumb{width:120px; height:80px; background:#0f0f0f; background-size:cover; background-position:center; border-radius:10px;}
.tl-meta{display:grid; gap:4px;}
.tl-title{font-weight:600;}
.tl-line{color:var(--muted); font-size:12px;}

/* Carousel */
.carousel-wrap{position:relative; margin:16px auto 40px; max-width:1200px;}
.carousel{position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--border); background:#101010;}
.carousel-track{display:flex; transition: transform .45s ease;}
.slide{min-width:100%; display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; align-items:center; padding:16px;}
.slide .img{width:100%; aspect-ratio: 16/10; background:#0f0f0f; display:flex; align-items:center; justify-content:center; border-radius:12px; overflow:hidden;}
.slide .img img{width:100%; height:100%; object-fit:contain;}
.slide .meta{display:grid; gap:6px;}
.slide .title{font-weight:700;}
.slide .line{color:var(--muted); font-size:12px;}
.carousel-nav{position:absolute; inset:0; pointer-events:none;}
.carousel-nav .arrow{position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; border-radius:999px; background:#161616; border:1px solid var(--border); padding:8px 12px;}
.carousel-nav .arrow.left{left:8px;} .carousel-nav .arrow.right{right:8px;}
.carousel-tools{display:flex; gap:8px; align-items:center; justify-content:flex-end; margin:10px 0 0;}
.carousel-tools .btn.small{padding:4px 10px;font-size:12px;border-radius:999px}
@media (max-width: 900px){ .slide{grid-template-columns: 1fr; } }

/* Style Physical Gallery button as gold text */
a.btn[href="physical.html"], .btn.physical-btn {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--border);
}


/* === Mobile polish === */
@media (max-width: 768px){
  header .container.nav{ gap:10px; }
  header .brand h1{ font-size:18px; line-height:1.2; }
  header .menu a{ padding:6px 8px; font-size:13px; }
  .hero-landing .inner{ gap:8px; }
  .hero-landing h2{ font-size:24px; }
  .hero-landing p{ font-size:14px; max-width: 90vw; }
  .chip{ font-size:12px; padding:4px 8px; }
  .btn{ padding:10px 14px; font-size:14px; }
  .btn.full{ width:100%; text-align:center; }
  .grid{ grid-template-columns: 1fr 1fr; gap:12px; }
  .card .meta .title{ font-size:14px; }
  .card .meta .sub{ font-size:12px; }
  /* artist lists */
  #artistList, #nft-artist-index{ gap:12px; }
  #artistList .artist-card, #nft-artist-index .artist-card{ min-width: calc(50% - 6px); }
  /* lightbox */
  .lightbox .lb-wrap{ grid-template-columns: 1fr; max-height: 82vh; overflow:auto; }
  .lightbox .lb-image img{ max-height: 56vh; }
  .lb-actions .btn{ padding:8px 12px; font-size:12px; }
  /* timeline */
  .tl-body{ grid-template-columns: 1fr; }
  .tl-thumb{ width:100%; height: 44vw; max-height:220px; }
  /* carousel */
  .slide{ grid-template-columns: 1fr; gap:10px; padding:12px; }
  .slide .title{ font-size:16px; }
  .slide .line{ font-size:12px; }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  #artistList .artist-card, #nft-artist-index .artist-card{ min-width: 100%; }
  header .brand h1{ font-size:16px; }
  .hero-landing h2{ font-size:22px; }
}


/* Sticky header with blur */
header{position:sticky; top:0; z-index:50; background:rgba(10,10,10,.55); backdrop-filter:none; -webkit-backdrop-filter:none; transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease; border-bottom:1px solid transparent;}
body.scrolled header{background:rgba(10,10,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom-color:#222;}


/* Bottom quick nav (mobile-only) */
.quick-nav{position:fixed; left:50%; transform:translateX(-50%); bottom:12px; z-index:60; background:rgba(16,16,16,.9); border:1px solid var(--border); border-radius:999px; padding:6px; display:none; gap:6px; box-shadow:0 8px 24px rgba(0,0,0,.4);}
.quick-nav a{display:inline-block; padding:8px 12px; font-size:13px; border-radius:999px; text-decoration:none; border:1px solid transparent;}
.quick-nav a:hover{border-color:#333;}
.quick-nav a.nav-analog{color:var(--accent);} /* gold text for Analog */
@media (max-width: 768px){ .quick-nav{display:flex;} }


/* Progressive image loading */
img.progressive{filter: blur(10px) saturate(.9); transform:scale(1.02); transition: filter .35s ease, transform .35s ease;}
img.progressive.loaded{filter:none; transform:none;}

/* Mobile hamburger & side drawer */
.hamburger{display:none; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border);
  border-radius:10px; background:#121212;}
.hamburger .bar{display:block; width:18px; height:2px; background:#bbb; position:relative;}
.hamburger .bar:before,.hamburger .bar:after{content:''; position:absolute; width:18px; height:2px; background:#bbb; left:0;}
.hamburger .bar:before{top:-6px;} .hamburger .bar:after{top:6px;}
.mobile-drawer{position:fixed; top:0; right:-320px; width:280px; height:100vh; background:#0f0f0f; border-left:1px solid var(--border);
  box-shadow:-18px 0 40px rgba(0,0,0,.35); z-index:70; padding:18px; display:flex; flex-direction:column; gap:8px; transition:right .25s ease;}
.mobile-drawer a{padding:12px 14px; border-radius:12px; border:1px solid #222; text-decoration:none;}
.mobile-drawer a:hover{border-color:#333;}
.mobile-overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease;}
body.drawer-open .mobile-drawer{right:0;}
body.drawer-open .mobile-overlay{opacity:1; pointer-events:auto;}
@media (max-width: 768px){
  header .menu{display:none;}
  header .container.nav{justify-content:space-between;}
  .hamburger{display:inline-flex;}
  /* Tap target sizing */
  a, button, .btn{min-height:44px;}
  .btn{padding:12px 16px; font-size:16px;}
  .card .meta .title{font-size:16px;}
}

/* === Desktop polish pack === */

/* 1) Typographic finesse */
h1,h2{font-weight:600; letter-spacing:.015em;}
h1{font-size:clamp(32px,3.2vw,56px)}
h2{font-size:clamp(22px,2vw,32px)}

/* 2) Stronger layout frame */
.container{max-width:1280px; padding:0 28px;}

/* 3) Gold accents */
.section-divider{height:1px; background:linear-gradient(90deg,transparent,#C5A46D33,transparent); margin:18px 0;}
header .menu a.active{border-bottom:2px solid var(--accent); padding-bottom:4px;}

/* 4) Card refinements */
.card{border:1px solid #1b1b1b; border-radius:14px; overflow:hidden;}
.card .thumb{background:#0f0f0f; padding:8px;}
.card:hover{box-shadow:0 10px 30px rgba(0,0,0,.25);}

/* 5) Soft grain overlay (very subtle) */
body:after{content:""; position:fixed; inset:0; pointer-events:none; opacity:.07;
  background-image: url('assets/img/noise.png'); mix-blend-mode:overlay}

/* 6) Button hierarchy */
.btn.primary{border:1px solid var(--accent); color:var(--accent); background:transparent;}
.btn.secondary{color:var(--silver);}
.btn.ghost{border:none; color:var(--silver); opacity:.85;}

/* 8) Section intros */
.kicker{color:var(--silver); text-transform:uppercase; letter-spacing:.12em; font-size:12px;}

/* 9) Footer polish */
footer{border-top:1px solid #1d1d1d; color:#9a9a9a; font-size:12px}