*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--black:#0a0a0a;--white:#fafaf8;--warm:#f5f0e8;--accent:#c8a96e;--accent-light:#c8a96e1f;--gray:#888;--light-gray:#e8e4dc;--mid-gray:#ccc8c0;--text:#1a1a1a;--success:#4a8c6a}html{scroll-behavior:smooth}body{background:var(--black);color:var(--text);min-height:100vh;font-family:DM Sans,sans-serif;overflow-x:hidden}.screen{min-height:100vh;display:none}.screen.active{flex-direction:column;display:flex}#screen-art{background:var(--black);position:relative;overflow:hidden}.art-full{z-index:0;background:linear-gradient(160deg,#d4a76a 0%,#a07040 25%,#5a3820 55%,#2c1810 100%);transition:opacity .6s;position:fixed;inset:0}.art-grain{z-index:1;pointer-events:none;opacity:.6;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");position:fixed;inset:0}.art-overlay{z-index:2;background:linear-gradient(#0a0a0ab8 0%,#0a0a0a00 22%),linear-gradient(#0a0a0a00 0%,#0a0a0a26 25%,#0a0a0a8c 45%,#0a0a0ad1 70%,#0a0a0af7 100%);position:fixed;inset:0}.art-content{z-index:3;flex-direction:column;max-width:480px;min-height:100vh;margin:0 auto;padding:0 24px;display:flex;position:relative}.art-topbar{opacity:0;justify-content:space-between;align-items:center;padding:28px 0 0;animation:.6s .2s forwards fadeDown;display:flex}.framed-logo{letter-spacing:.2em;text-transform:uppercase;color:#ffffffe6;text-shadow:0 1px 8px #00000080;font-family:Cormorant Garamond,serif;font-size:16px;font-weight:300}.framed-logo span{color:var(--accent)}.venue-chip{letter-spacing:.1em;text-transform:uppercase;color:#ffffffd9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000040;border:1px solid #ffffff4d;padding:5px 12px;font-size:10px}.art-info{opacity:0;margin-top:auto;padding-bottom:32px;animation:.7s .4s forwards fadeUp}.art-eyebrow{letter-spacing:.22em;text-transform:uppercase;color:#e8c87e;text-shadow:0 1px 6px #000000e6;margin-bottom:10px;font-size:10px}.art-title{color:var(--white);margin-bottom:10px;font-family:Cormorant Garamond,serif;font-size:clamp(36px,9vw,56px);font-weight:300;line-height:1.05}.art-artist{color:#ffffffb3;letter-spacing:.03em;align-items:center;gap:10px;margin-bottom:20px;font-size:15px;font-weight:300;display:flex}.art-artist:before{content:"";background:#ffffff4d;flex-shrink:0;width:20px;height:1px}.art-meta-row{border-top:1px solid #ffffff1f;border-bottom:1px solid #ffffff1f;gap:28px;margin-bottom:28px;padding:16px 0;display:flex}.art-meta-label{letter-spacing:.16em;text-transform:uppercase;color:#fff9;text-shadow:0 1px 4px #000000e6;margin-bottom:5px;font-size:9px}.art-meta-val{color:#ffffffeb;letter-spacing:.02em;text-shadow:0 1px 4px #000c;font-size:14px}.price-preview{align-items:center;gap:20px;margin-bottom:22px;display:flex}.price-main{color:var(--white);font-family:Cormorant Garamond,serif;font-size:44px;font-weight:300;line-height:1}.price-from{color:#fffc;letter-spacing:.04em;text-shadow:0 1px 4px #000000e6;font-size:12px;line-height:1.6}.price-from strong{color:var(--accent);font-weight:400}.cta-btn{background:var(--white);width:100%;color:var(--black);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;margin-bottom:12px;padding:18px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:500;transition:background .2s,transform .15s;display:flex}.cta-btn:hover{background:var(--accent);transform:translateY(-1px)}.cta-btn:active{transform:translateY(0)}.cta-ghost{color:#ffffff73;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #ffffff1f;justify-content:center;align-items:center;gap:8px;width:100%;margin-bottom:32px;padding:14px;font-family:DM Sans,sans-serif;font-size:12px;transition:border-color .2s,color .2s;display:flex}.cta-ghost:hover{color:#ffffffb3;border-color:#ffffff4d}#screen-purchase{background:var(--white);flex-direction:column}.purchase-topbar{background:var(--white);border-bottom:1px solid var(--light-gray);z-index:10;align-items:center;gap:16px;padding:20px 24px;display:flex;position:sticky;top:0}.back-btn{background:var(--warm);cursor:pointer;width:36px;height:36px;color:var(--gray);border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;transition:background .2s;display:flex}.back-btn:hover{background:var(--light-gray)}.purchase-topbar-title{flex:1;font-family:Cormorant Garamond,serif;font-size:18px;font-weight:300}.purchase-topbar-logo{letter-spacing:.16em;text-transform:uppercase;color:var(--gray);font-family:Cormorant Garamond,serif;font-size:14px;font-weight:300}.purchase-topbar-logo span{color:var(--accent)}.purchase-topbar-close{background:var(--warm);border:1px solid var(--light-gray);width:32px;height:32px;color:var(--gray);cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-family:sans-serif;font-size:18px;line-height:1;transition:background .2s,color .2s;display:flex}.purchase-topbar-close:hover{background:var(--light-gray);color:var(--black)}.purchase-body{flex:1;width:100%;max-width:480px;margin:0 auto;padding:24px 24px 40px}.art-strip{background:linear-gradient(160deg,#d4a76a 0%,#a07040 40%,#2c1810 100%);height:120px;margin-bottom:24px;position:relative;overflow:hidden}.art-strip:after{content:"";pointer-events:none;background:linear-gradient(#0000000d 0%,#00000047 45%,#000000b8 100%);position:absolute;inset:0}.art-strip-label{color:#fff;text-shadow:0 1px 6px #0009;z-index:1;font-family:Cormorant Garamond,serif;font-size:20px;font-weight:300;position:absolute;bottom:12px;left:16px}.art-strip-sub{letter-spacing:.1em;text-transform:uppercase;color:#ffffffd9;text-shadow:0 1px 4px #0009;z-index:1;font-size:10px;position:absolute;bottom:14px;right:16px}.options-label{letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:12px;font-size:10px}.option-card{border:1.5px solid var(--light-gray);cursor:pointer;grid-template-columns:1fr auto;align-items:start;gap:12px;margin-bottom:8px;padding:18px 20px;transition:border-color .2s,background .2s;display:grid;position:relative}.option-card:hover{border-color:var(--mid-gray)}.option-card.selected{border-color:var(--black);background:#0a0a0a05}.option-card.selected .option-radio{background:var(--black);border-color:var(--black)}.option-card.selected .option-radio:after{opacity:1}.option-left{align-items:flex-start;gap:14px;display:flex}.option-radio{border:1.5px solid var(--mid-gray);border-radius:50%;flex-shrink:0;width:18px;height:18px;margin-top:2px;transition:all .2s;position:relative}.option-radio:after{content:"";opacity:0;background:#fff;border-radius:50%;transition:opacity .2s;position:absolute;inset:3px}.option-title{color:var(--black);margin-bottom:3px;font-size:14px;font-weight:500}.option-desc{color:var(--gray);font-size:12px;line-height:1.5}.option-badge{letter-spacing:.1em;text-transform:uppercase;background:var(--accent-light);color:var(--accent);margin-top:6px;padding:3px 8px;font-size:9px;display:inline-block}.option-price{text-align:right}.option-price-main{color:var(--black);font-family:Cormorant Garamond,serif;font-size:26px;font-weight:300;line-height:1}.option-price-sub{color:var(--gray);letter-spacing:.04em;margin-top:3px;font-size:10px}.size-row{gap:8px;margin-top:10px;display:flex}.size-chip{border:1px solid var(--light-gray);cursor:pointer;color:var(--gray);background:0 0;padding:5px 12px;font-family:DM Sans,sans-serif;font-size:11px;transition:all .2s}.size-chip.active{border-color:var(--black);color:var(--black);background:#0a0a0a08}.size-chip:hover:not(.active):not(.size-chip-disabled){border-color:var(--mid-gray)}.size-chip-disabled{opacity:.35;cursor:not-allowed}.option-disabled{opacity:.5;cursor:not-allowed}.shipping-note{background:var(--warm);color:#555;align-items:flex-start;gap:12px;margin:16px 0;padding:14px 18px;font-size:12px;line-height:1.6;display:flex}.shipping-icon{flex-shrink:0;margin-top:1px;font-size:16px}.order-summary{border-top:1px solid var(--light-gray);margin-top:8px;margin-bottom:20px;padding-top:20px}.summary-row{color:var(--gray);justify-content:space-between;margin-bottom:8px;font-size:13px;display:flex}.summary-total{color:var(--black);border-top:1px solid var(--light-gray);justify-content:space-between;margin-top:4px;padding-top:10px;font-size:15px;font-weight:500;display:flex}.summary-total span:last-child{font-family:Cormorant Garamond,serif;font-size:24px;font-weight:300}.pay-btn{background:var(--black);width:100%;color:var(--white);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:none;justify-content:center;align-items:center;gap:10px;margin-bottom:12px;padding:18px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:500;transition:background .2s;display:flex}.pay-btn:hover{background:var(--accent)}.pay-methods{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px;display:grid}.pay-method-btn{border:1px solid var(--light-gray);background:var(--white);letter-spacing:.06em;color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:13px;font-family:DM Sans,sans-serif;font-size:12px;transition:border-color .2s;display:flex}.pay-method-btn:hover{border-color:var(--black)}.secure-note{text-align:center;color:var(--mid-gray);letter-spacing:.04em;justify-content:center;align-items:center;gap:6px;font-size:11px;display:flex}#screen-artist{background:var(--warm)}.artist-hero{background:var(--black);padding:28px 24px 36px}.artist-hero-topbar{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.artist-avatar-lg{color:#fff;background:linear-gradient(135deg,#c8a96e,#8b6a3a);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:20px;font-family:Cormorant Garamond,serif;font-size:32px;display:flex}.artist-hero-name{color:var(--white);margin-bottom:6px;font-family:Cormorant Garamond,serif;font-size:42px;font-weight:300}.artist-hero-meta{color:#fff6;letter-spacing:.04em;font-size:13px}.artist-body{max-width:480px;margin:0 auto;padding:28px 24px 40px}.artist-section-label{letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:14px;font-size:10px}.artist-bio-text{color:#444;margin-bottom:32px;font-size:15px;font-weight:300;line-height:1.85}.artist-stats-row{grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:28px;display:grid}.artist-stat{background:var(--white);text-align:center;padding:20px}.astat-num{color:var(--black);margin-bottom:4px;font-family:Cormorant Garamond,serif;font-size:32px;font-weight:300;line-height:1}.astat-label{letter-spacing:.12em;text-transform:uppercase;color:var(--gray);font-size:10px}.artist-pieces-label{letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-bottom:14px;font-size:10px}.artist-pieces-grid{grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:28px;display:grid}.apiece{aspect-ratio:1;cursor:pointer;transition:opacity .2s}.apiece:hover{opacity:.85}.ap-1{background:linear-gradient(135deg,#d4a76a,#2c1810)}.ap-2{background:linear-gradient(160deg,#3a2a4a,#c4a0d4)}.ap-3{background:linear-gradient(120deg,#2d4a3e,#c4d4a0)}.ap-4{background:linear-gradient(200deg,#1a2a3a,#70a8d4)}.ap-5{background:linear-gradient(80deg,#4a3020,#d4a870)}.ap-6{background:linear-gradient(240deg,#3a1a1a,#d47070)}.commission-cta{background:var(--black);justify-content:space-between;align-items:center;gap:20px;padding:28px 24px;display:flex}.commission-cta-title{color:var(--white);margin-bottom:4px;font-family:Cormorant Garamond,serif;font-size:22px;font-weight:300}.commission-cta-sub{color:#fff6;letter-spacing:.04em;font-size:12px}#screen-success{background:var(--black);text-align:center;justify-content:center;align-items:center;padding:48px 32px}.success-check{background:var(--success);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 28px;font-size:28px;animation:.5s cubic-bezier(.16,1,.3,1) forwards popIn;display:flex}@keyframes popIn{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.success-title{color:var(--white);margin-bottom:12px;font-family:Cormorant Garamond,serif;font-size:42px;font-weight:300;line-height:1.1}.success-title em{color:var(--accent);font-style:italic}.success-sub{color:#ffffff73;max-width:320px;margin-bottom:40px;margin-left:auto;margin-right:auto;font-size:14px;font-weight:300;line-height:1.75}.success-order-card{text-align:left;background:#ffffff0d;border:1px solid #ffffff1a;width:100%;max-width:360px;margin-bottom:32px;padding:24px}.soc-row{justify-content:space-between;margin-bottom:10px;font-size:13px;display:flex}.soc-row:last-child{margin-bottom:0}.soc-label{color:#fff6;letter-spacing:.04em}.soc-val{color:var(--white)}.soc-val.accent{color:var(--accent)}.success-actions{flex-direction:column;gap:10px;width:100%;max-width:360px;display:flex}.success-btn-primary{background:var(--white);color:var(--black);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:none;padding:16px;font-family:DM Sans,sans-serif;font-size:13px;font-weight:500;transition:background .2s}.success-btn-primary:hover{background:var(--accent)}.success-btn-ghost{color:#fff6;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #ffffff1a;padding:14px;font-family:DM Sans,sans-serif;font-size:12px;transition:all .2s}.success-btn-ghost:hover{color:#ffffffa6;border-color:#ffffff4d}.bottom-nav{background:var(--white);border-top:1px solid var(--light-gray);z-index:10;display:flex;position:sticky;bottom:0}.bottom-nav-item{cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding:12px 8px;font-family:DM Sans,sans-serif;transition:background .2s;display:flex}.bottom-nav-item:hover{background:var(--warm)}.bottom-nav-item.active{background:#0a0a0a08}.bn-icon{font-size:18px}.bn-label{letter-spacing:.1em;text-transform:uppercase;color:var(--gray);font-size:9px}.bottom-nav-item.active .bn-label{color:var(--black)}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.art-purchase-standalone{background:#0a0a0a;min-height:100vh}@media (min-width:520px){.art-purchase-standalone{background:#0a0a0a;justify-content:center;align-items:center;display:flex}.art-purchase-standalone .screen{width:100%;max-width:420px;box-shadow:0 40px 120px #0009}.art-purchase-standalone #screen-art .art-full,.art-purchase-standalone #screen-art .art-grain,.art-purchase-standalone #screen-art .art-overlay{position:absolute}}.purchase-backdrop{z-index:1000;-webkit-backdrop-filter:blur(10px);background:#060606b8;justify-content:center;align-items:center;padding:24px;animation:.22s forwards backdrop-fade;display:flex;position:fixed;inset:0}.purchase-modal{scrollbar-width:thin;scrollbar-color:#c8a96e4d transparent;border-radius:3px;width:min(440px,100%);max-height:90vh;animation:.35s cubic-bezier(.34,1.18,.64,1) forwards purchase-expand;position:relative;overflow:hidden auto;box-shadow:0 40px 100px #000000a6,0 0 0 1px #ffffff0f}.purchase-modal::-webkit-scrollbar{width:4px}.purchase-modal::-webkit-scrollbar-thumb{background:#c8a96e4d;border-radius:2px}.purchase-modal-close{z-index:50;color:#ffffffe6;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;font-family:sans-serif;font-size:20px;line-height:1;transition:background .2s,transform .15s;display:flex;position:absolute;top:14px;right:14px}.purchase-modal-close:hover{background:#fff3;transform:scale(1.08)}.overlay-mode .screen{min-height:unset}.overlay-mode #screen-art{min-height:520px}.overlay-mode .art-content{min-height:520px;padding:0 28px}.overlay-mode #screen-art .art-full,.overlay-mode #screen-art .art-grain,.overlay-mode #screen-art .art-overlay{position:absolute}.overlay-mode #screen-purchase,.overlay-mode #screen-artist{overflow:visible}.overlay-mode .purchase-body{padding-bottom:24px}@keyframes backdrop-fade{0%{opacity:0}to{opacity:1}}@keyframes purchase-expand{0%{opacity:0;transform:scale(.88)translateY(28px)}to{opacity:1;transform:scale(1)translateY(0)}}
