:root{--ink:#120d09;--ink2:#1b130e;--paper:#efe5d3;--gold:#c89a53;--clay:#a85b39;--rose:#8e493f;--sand:#d8c4a2;--muted:#958779;--serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",sans-serif;--max:1440px}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--ink)}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);overflow-x:hidden}a{color:inherit;text-decoration:none}.progress{position:fixed;left:0;top:0;width:0;height:2px;background:linear-gradient(90deg,var(--clay),var(--gold));z-index:300}
.art-header{height:88px;position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:var(--max);margin:auto;padding:0 38px;border-bottom:1px solid rgba(200,154,83,.16);background:rgba(18,13,9,.82);backdrop-filter:blur(18px)}
.brand{display:flex;align-items:center;gap:13px}.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover}.brand span{display:flex;flex-direction:column}.brand b{font:500 23px/1 var(--serif);letter-spacing:.18em}.brand small{font-size:7px;letter-spacing:.2em;color:var(--gold);margin-top:6px}.art-header nav{display:flex;gap:30px;font-size:8px;letter-spacing:.17em;text-transform:uppercase}.back-shop{justify-self:end;font-size:8px;letter-spacing:.16em;color:#b9ab9c}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}.art-hero-scene{height:190vh}.art-hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:var(--max);margin:auto;padding:90px 38px 50px;background:radial-gradient(circle at 73% 43%,rgba(200,154,83,.1),transparent 34%),var(--ink)}
.eyebrow{font-size:8px;letter-spacing:.25em;color:var(--gold);text-transform:uppercase;margin:0 0 22px}.hero-copy{z-index:2;transform:translateY(calc(var(--hp,0)*-36px));opacity:calc(1 - var(--hp,0)*.8)}h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}h1{font-size:clamp(72px,8vw,126px);line-height:.78;letter-spacing:-.045em}h1 em,h2 em{display:block;color:var(--gold);font-weight:500}.lede{max-width:570px;color:#a89a8b;line-height:1.9;font-size:13px;margin:32px 0}.cta{display:inline-flex;min-height:48px;align-items:center;padding:0 22px;background:var(--gold);color:#1b120b;font-size:8px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}.hero-canvas{height:70vh;position:relative;display:grid;place-items:center;transform:scale(calc(.88 + var(--hp,0)*.18)) translateY(calc(var(--hp,0)*-12px))}
.canvas-frame{width:min(430px,72%);aspect-ratio:4/5;padding:16px;background:#d6c39d;box-shadow:0 40px 100px rgba(0,0,0,.5);transform:rotate(calc(-3deg + var(--hp,0)*3deg))}.artwork{width:100%;height:100%;position:relative;overflow:hidden}.artwork-hero{background:radial-gradient(circle at 58% 26%,#efa83e 0 13%,#c86040 14% 26%,#70929c 27% 40%,#173b3d 41% 100%)}.sun{position:absolute;width:46%;height:46%;border-radius:50%;left:28%;top:8%;box-shadow:0 0 0 22px rgba(247,194,83,.22),0 0 0 45px rgba(173,76,49,.22)}.figure{position:absolute;width:15%;height:33%;border-radius:48% 48% 15% 15%;background:#4d1f25;bottom:10%;left:44%}.root{position:absolute;width:52%;height:2px;background:#deb56a;bottom:11%;left:28%;transform-origin:left}.r1{transform:rotate(22deg)}.r2{transform:rotate(-19deg)}.r3{transform:rotate(3deg)}.paint-orbit{position:absolute;border:1px solid rgba(200,154,83,.18);border-radius:50%}.o1{width:62%;aspect-ratio:1}.o2{width:78%;aspect-ratio:1}.canvas-caption{position:absolute;right:6%;bottom:3%;font-size:7px;letter-spacing:.2em;color:#7b6e62}
.bridge{height:62px;background:var(--gold);color:#1b120b;display:flex;justify-content:center;gap:28px;align-items:center;font-size:8px;letter-spacing:.2em;text-transform:uppercase;overflow:hidden}
.art-intro-scene{height:180vh}.art-intro{display:grid;grid-template-columns:.55fr 1.35fr .8fr;align-items:center;padding:0 max(38px,calc((100vw - var(--max))/2 + 38px));background:linear-gradient(135deg,#eee3d0,#d9c29e);color:#21160f}.intro-number{font:500 clamp(200px,24vw,430px)/.7 var(--serif);color:rgba(102,66,39,.08);transform:translateX(calc(-30px + var(--ip,0)*30px))}.intro-copy{transform:translateY(calc(35px - var(--ip,0)*35px));opacity:calc(.5 + var(--ip,0)*.5)}.intro-copy .eyebrow{color:#8a5d2f}.intro-copy h2{font-size:clamp(62px,7vw,110px);line-height:.82}.intro-copy p:last-child{max-width:580px;color:#6f6154;line-height:1.9;font-size:13px}.texture-disc{width:28vw;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at 35% 35%,rgba(80,45,27,.1) 0 2px,transparent 3px 10px);transform:scale(calc(.78 + var(--ip,0)*.28))}
.collection{padding:120px max(38px,calc((100vw - var(--max))/2 + 38px));background:#0d0a08}.collection-head{display:grid;grid-template-columns:1fr 420px;gap:80px;align-items:end;margin-bottom:65px}.collection-head h2{font-size:clamp(60px,6vw,92px);line-height:.86}.collection-head>p{color:#8f8378;line-height:1.9;font-size:12px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(200,154,83,.16);border:1px solid rgba(200,154,83,.16)}.work-card{background:#15100c;display:grid;grid-template-columns:1.05fr .95fr;min-height:520px}.work-frame{display:grid;place-items:center;padding:44px;background:#21160f}.work-frame .artwork{width:78%;aspect-ratio:4/5;box-shadow:0 30px 70px rgba(0,0,0,.5);transition:.5s transform}.work-card:hover .artwork{transform:scale(1.035) rotate(.5deg)}.work-meta{padding:50px 34px;display:flex;flex-direction:column;justify-content:center}.work-meta>span{font-size:7px;letter-spacing:.2em;color:var(--gold)}.work-meta h3{font-size:34px;margin-top:20px}.work-meta p{color:#81756a;font-size:11px;line-height:1.8}.work-meta button{margin-top:26px;min-height:44px;border:1px solid rgba(200,154,83,.3);background:transparent;color:#887c70;font-size:8px;letter-spacing:.16em}.a1{background:radial-gradient(circle at 58% 25%,#efaa44 0 13%,#b75a3f 14% 23%,#31585f 24% 38%,#182f2e 39% 100%)}.a2{background:linear-gradient(115deg,#e6cf9e 0 17%,#49312a 18% 31%,#c89142 32% 46%,#1c2526 47% 65%,#94564b 66%)}.a3{background:radial-gradient(ellipse at 53% 44%,#71443a 0 13%,#d19042 14% 31%,#c5af81 32% 46%,#2a2622 47% 100%)}.a4{background:linear-gradient(155deg,#efe4ce,#b98948 28%,#7d3d37 46%,#302b29 67%,#c99d50)}.a1 i,.a2 i,.a3 i,.a4 i{position:absolute;inset:10%;border:1px solid rgba(255,232,183,.32);border-radius:50%}.a1 b,.a2 b,.a3 b,.a4 b{position:absolute;width:24%;height:45%;background:rgba(34,20,17,.75);left:38%;bottom:10%;border-radius:50% 50% 12% 12%}.a1 span,.a2 span,.a3 span,.a4 span{position:absolute;left:14%;right:14%;bottom:6%;height:2px;background:rgba(229,186,99,.55)}
.collector-scene{height:165vh}.collector{display:grid;grid-template-columns:1fr 1fr}.collector-panel{padding:0 8vw;display:flex;flex-direction:column;justify-content:center;background:#100c09}.collector-panel h2{font-size:clamp(62px,7vw,106px);line-height:.82}.collector-panel>p:not(.eyebrow){max-width:580px;color:#918579;font-size:12px;line-height:1.9}.cta.dark{background:#17100c;color:#e7d9c4;border:1px solid rgba(200,154,83,.25);width:max-content;margin-top:25px}.gold-field{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(255,239,196,.25),transparent 24%),linear-gradient(145deg,#c99b55,#7e522e)}.gold-field span{font:500 clamp(100px,15vw,240px)/.7 var(--serif);letter-spacing:-.06em;color:rgba(25,14,8,.3);text-align:center}
footer{padding:70px max(38px,calc((100vw - var(--max))/2 + 38px)) 30px;background:#070503;border-top:1px solid rgba(200,154,83,.15);display:grid;grid-template-columns:1fr auto;gap:40px}footer>div img{width:74px;height:74px;border-radius:50%}footer p{font:italic 18px var(--serif);color:#9b8d80}footer nav{display:flex;gap:25px;font-size:8px;letter-spacing:.16em;text-transform:uppercase}footer small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.06);padding-top:20px;color:#5f564e;font-size:7px;letter-spacing:.12em}
@media(max-width:900px){.art-header{grid-template-columns:1fr auto;padding:0 18px}.art-header nav{display:none}.art-hero{grid-template-columns:1fr}.hero-copy{position:absolute;z-index:5;left:24px;right:24px;top:12vh}.hero-canvas{position:absolute;inset:35vh 0 0;height:65vh;opacity:.62}.canvas-frame{width:60%}.collection-head{grid-template-columns:1fr;gap:25px}.gallery{grid-template-columns:1fr}.collector{grid-template-columns:1fr}.gold-field{display:none}.art-intro{grid-template-columns:1fr;padding:0 24px}.intro-number{position:absolute}.texture-disc{display:none}.intro-copy{position:relative;z-index:2}.work-card{grid-template-columns:1fr}.work-frame{min-height:430px}.collector-panel{padding:0 24px}.bridge{justify-content:flex-start;padding:0 20px}.art-hero-scene{height:165vh}.art-intro-scene{height:155vh}.collector-scene{height:145vh}}
@media(max-width:600px){h1{font-size:64px}.intro-copy h2,.collector-panel h2{font-size:58px}.collection{padding:85px 18px}.collection-head h2{font-size:58px}.work-frame{padding:25px;min-height:380px}.work-frame .artwork{width:82%}.work-meta{padding:32px 24px}.canvas-frame{width:74%}.brand span{display:none}}
@media(prefers-reduced-motion:reduce){.art-hero-scene,.art-intro-scene,.collector-scene{height:auto}.sticky{position:relative;height:auto;min-height:90vh}.hero-copy,.hero-canvas,.intro-copy,.texture-disc{transform:none!important;opacity:1!important}}


/* --- October refinement: continuous dark gallery + legible navigation --- */
.art-header{height:94px;background:rgba(15,10,7,.9);border-bottom-color:rgba(200,154,83,.22)}
.art-header nav{font-size:10.5px;gap:36px;letter-spacing:.13em;color:#eadfce;font-weight:600}
.art-header nav a{opacity:.88;transition:opacity .25s,color .25s}
.art-header nav a:hover{opacity:1;color:var(--gold)}
.back-shop{font-size:9.5px;letter-spacing:.13em;color:#d4c4b1;font-weight:600}

/* Keep every art chapter in one dark, warm Sona universe */
.art-intro-scene{background:#0d0907}
.art-intro{
  background:
    radial-gradient(circle at 72% 46%,rgba(200,154,83,.15),transparent 32%),
    radial-gradient(circle at 26% 65%,rgba(142,73,63,.11),transparent 28%),
    linear-gradient(145deg,#18100c,#0b0806 72%);
  color:var(--paper);
  border-top:1px solid rgba(200,154,83,.12);
  border-bottom:1px solid rgba(200,154,83,.12)
}
.intro-number{color:rgba(200,154,83,.055)}
.intro-copy .eyebrow{color:var(--gold)}
.intro-copy h2{color:#eee2cf}
.intro-copy p:last-child{color:#a99a8a}
.texture-disc{
  background:
    repeating-radial-gradient(circle at 35% 35%,rgba(200,154,83,.11) 0 2px,transparent 3px 10px);
  box-shadow:0 0 100px rgba(200,154,83,.06)
}

/* Final collector chapter now expands from an inset gallery card to full-screen */
.collector-scene{height:210vh;background:#090604;position:relative}
.collector{
  --cp:var(--collector-p,0);
  width:calc(84vw + 16vw * var(--cp));
  height:calc(76vh + 24vh * var(--cp));
  top:0;
  margin:auto;
  align-self:center;
  border-radius:calc(34px * (1 - var(--cp)));
  overflow:hidden;
  box-shadow:0 45px 130px rgba(0,0,0,.48);
  transform:translateY(calc(12vh - 12vh * var(--cp))) scale(calc(.94 + .06 * var(--cp)));
  transform-origin:center center;
  border:1px solid rgba(200,154,83,calc(.20 - .10 * var(--cp)));
  will-change:width,height,transform,border-radius
}
.collector-panel{
  transform:translateX(calc(-32px + 32px * var(--cp)));
  opacity:calc(.55 + .45 * var(--cp));
  background:
    radial-gradient(circle at 78% 30%,rgba(200,154,83,.08),transparent 32%),
    #100c09
}
.gold-field{
  transform:scale(calc(.88 + .12 * var(--cp)));
  transform-origin:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,239,196,.28),transparent 24%),
    linear-gradient(145deg,#c99b55,#744726)
}
.gold-field span{
  transform:scale(calc(.86 + .16 * var(--cp)));
  opacity:calc(.55 + .3 * var(--cp))
}
.collector-panel h2{transform:scale(calc(.94 + .06 * var(--cp)));transform-origin:left center}
.collector-panel>p:not(.eyebrow){opacity:calc(.55 + .45 * var(--cp))}

@media(max-width:1100px){
  .art-header nav{font-size:9.5px;gap:22px}
}
@media(max-width:900px){
  .collector-scene{height:175svh}
  .collector{
    position:sticky;
    top:0;
    width:calc(92vw + 8vw * var(--collector-p,0));
    height:calc(76svh + 24svh * var(--collector-p,0));
    min-height:0;
    border-radius:calc(26px * (1 - var(--collector-p,0)));
    transform:translateY(calc(12svh - 12svh * var(--collector-p,0))) scale(calc(.95 + .05 * var(--collector-p,0)))
  }
  .gold-field{display:grid;position:absolute;inset:0;opacity:.28}
  .collector-panel{position:relative;z-index:2;padding:0 7vw;background:linear-gradient(90deg,rgba(16,12,9,.98),rgba(16,12,9,.86) 70%,rgba(16,12,9,.35))}
}
@media(max-width:600px){
  .collector-panel h2{font-size:54px}
  .collector-panel>p:not(.eyebrow){font-size:10px;line-height:1.75}
}


/* === Founding Collection — real artwork release === */
.art-header-actions{justify-self:end;display:flex;align-items:center;gap:12px}
.mobile-collection-link{display:none;font-size:8px;letter-spacing:.14em;color:#d7c6ae;border:1px solid rgba(200,154,83,.25);padding:9px 12px;border-radius:999px}
.real-artist-frame{padding:0;background:#1b120c;overflow:hidden;border:1px solid rgba(200,154,83,.28)}
.artist-hero-photo{width:100%;height:100%;object-fit:cover;object-position:center;display:block;filter:saturate(.88) contrast(1.03) brightness(.88);transition:transform .6s ease}
.real-artist-frame:hover .artist-hero-photo{transform:scale(1.025)}
.collection-head>p{max-width:470px}
.founding-gallery .work-card{min-height:570px}
.work-frame.art-lightbox-trigger{border:0;appearance:none;width:100%;min-height:570px;cursor:zoom-in;position:relative;overflow:hidden;padding:28px;background:linear-gradient(145deg,#261911,#15100c);font:inherit}
.work-frame.art-lightbox-trigger img{width:100%;height:100%;object-fit:contain;display:block;filter:saturate(.94) contrast(1.02);transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .35s ease;box-shadow:0 28px 70px rgba(0,0,0,.42)}
.work-card:hover .work-frame.art-lightbox-trigger img{transform:scale(1.025);filter:saturate(1) contrast(1.025)}
.view-art{position:absolute;left:42px;bottom:38px;background:rgba(15,10,7,.82);backdrop-filter:blur(10px);border:1px solid rgba(200,154,83,.28);padding:9px 12px;color:#e7d9c4;font-size:7px;letter-spacing:.15em;opacity:0;transform:translateY(8px);transition:.3s ease}
.work-card:hover .view-art{opacity:1;transform:none}
.work-meta h3{font-size:38px;line-height:.95;color:#eee2cf}
.work-meta p{min-height:58px}
.art-price{display:block;font:500 25px/1 var(--serif);color:var(--gold);margin-top:16px;letter-spacing:.02em}
.collect-work{margin-top:22px;min-height:46px;border:1px solid rgba(200,154,83,.34);display:flex;align-items:center;justify-content:center;color:#e4d4bd;font-size:8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;transition:.25s ease}
.collect-work:hover{background:var(--gold);color:#17100b;border-color:var(--gold)}

.art-lightbox{position:fixed;inset:0;z-index:500;background:rgba(7,5,3,.96);backdrop-filter:blur(18px);display:grid;place-items:center;padding:46px;opacity:0;visibility:hidden;transition:.28s ease}
.art-lightbox.open{opacity:1;visibility:visible}
.art-lightbox>img{max-width:min(82vw,1000px);max-height:82vh;object-fit:contain;box-shadow:0 40px 120px rgba(0,0,0,.72)}
.lightbox-close{position:absolute;right:30px;top:22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(200,154,83,.34);background:#120d09;color:#eadbc5;font-size:25px;cursor:pointer}
.lightbox-caption{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;color:#eadbc5;white-space:nowrap}
.lightbox-caption span{font:500 20px var(--serif)}
.lightbox-caption small{font-size:6px;letter-spacing:.18em;color:#89796a}

@media(max-width:900px){
  .art-header-actions{gap:7px}
  .mobile-collection-link{display:inline-flex;align-items:center}
  .back-shop{font-size:7px}
  .hero-canvas{opacity:.78}
  .real-artist-frame{width:70%;aspect-ratio:4/5}
  .work-frame.art-lightbox-trigger{min-height:520px;padding:20px}
  .view-art{opacity:1;transform:none;left:30px;bottom:30px}
}
@media(max-width:600px){
  .art-header{height:80px}
  .brand img{width:46px;height:46px}
  .mobile-collection-link{font-size:6.5px;padding:8px 9px}
  .back-shop{font-size:6.5px;letter-spacing:.1em}
  .real-artist-frame{width:78%}
  .founding-gallery .work-card{min-height:0}
  .work-frame.art-lightbox-trigger{min-height:460px}
  .work-meta h3{font-size:34px}
  .work-meta p{min-height:0}
  .art-lightbox{padding:18px}
  .art-lightbox>img{max-width:94vw;max-height:78vh}
  .lightbox-caption{bottom:14px;gap:8px}
  .lightbox-caption span{font-size:16px}
}