/* ============================================================
   CARSON ART — gallery stylesheet
   Palette pulled from the work itself: ink black, raw cream
   canvas, burnt-orange sun, brass and walnut.
   ============================================================ */

:root{
  --ink:        #16130f;
  --ink-soft:   #211d18;
  --paper:      #e9e2d3;
  --paper-dim:  #cfc6b0;
  --rust:       #cf5d1e;
  --rust-deep:  #a8481a;
  --brass:      #b08d4f;
  --brass-dim:  #7e6536;
  --smoke:      #8a8378;
  --wall-dark:  #221e19;
  --wall-parlor:#39342b;
  --wall-front: #46311f;
  --serif: "Playfair Display", Georgia, serif;
  --west:  "Rye", serif;
  --type:  "Special Elite", monospace;
  --wu: 1vw; /* wall width unit for hanging sizes */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  overflow-x:hidden;
}
/* the native cursor is only hidden once JS has the custom one running,
   so the mouse can never vanish — and never hides over popups */
body.cursor-on, body.cursor-on *{ cursor:none !important; }

::selection{ background:var(--rust); color:var(--paper); }

/* film grain over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:500; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- entrance curtain ---------- */
.loader{
  position:fixed; inset:0; z-index:600;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:radial-gradient(ellipse at 50% 40%, #241f18, #0c0a08 80%);
  transition:opacity .9s ease, visibility .9s;
}
.loader.done{ opacity:0; visibility:hidden; }
.loader h1{
  font-family:var(--west); font-size:clamp(2.4rem, 7vw, 5rem);
  letter-spacing:.1em; color:var(--paper);
}
.loader h1 span{ color:var(--rust); padding:0 .2em; }
.loader-kicker, .loader-line{
  font-family:var(--type); font-size:.7rem; letter-spacing:.5em;
  text-transform:uppercase; color:var(--brass);
}
.loader-kicker{ margin-bottom:1.2rem; }
.loader-line{ margin-top:1.6rem; color:rgba(233,226,211,.4); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.35; } }

/* ---------- damask wallpaper ---------- */
.wallpaper{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2'%3E%3Cpath d='M70 14 q22 22 0 44 q-22 -22 0 -44 Z'/%3E%3Cpath d='M70 82 q22 22 0 44 q-22 -22 0 -44 Z'/%3E%3Cpath d='M82 70 q22 -22 44 0 q-22 22 -44 0 Z'/%3E%3Cpath d='M-2 70 q12 -12 24 0 q-12 12 -24 0'/%3E%3Ccircle cx='70' cy='70' r='5'/%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='140' cy='0' r='8'/%3E%3Ccircle cx='0' cy='140' r='8'/%3E%3Ccircle cx='140' cy='140' r='8'/%3E%3Cpath d='M52 34 q18 10 36 0 M52 106 q18 10 36 0' /%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
}
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:8;
  background:radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(5,4,3,.5) 100%);
}

/* ---------- progress bar ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:200;
  background:rgba(233,226,211,.06);
}
.progress span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--rust-deep), var(--rust));
  transform-origin:left; transform:scaleX(0);
}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.1rem 2.2rem;
  background:linear-gradient(180deg, rgba(13,11,9,.85), rgba(13,11,9,0));
}
.brand{
  font-family:var(--west); font-size:1.25rem; letter-spacing:.12em;
  color:var(--paper); text-decoration:none;
}
.brand span{ color:var(--rust); padding:0 .25em; }
.topbar nav{ display:flex; gap:1.8rem; align-items:center; }
.topbar nav a{
  color:var(--paper-dim); text-decoration:none; font-size:.8rem;
  letter-spacing:.22em; text-transform:uppercase; font-family:var(--serif);
  transition:color .25s;
}
.topbar nav a:hover{ color:var(--rust); }
.nav-cta{
  border:1px solid var(--brass-dim); padding:.45em 1.1em;
  color:var(--brass) !important;
}
.nav-cta:hover{ background:var(--rust); border-color:var(--rust); color:var(--paper) !important; }

/* ---------- admin bar ---------- */
.admin-bar[hidden]{ display:none; }
.admin-bar{
  position:fixed; top:4.4rem; right:2.2rem; z-index:170;
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .9rem;
  background:rgba(13,11,9,.9); backdrop-filter:blur(8px);
  border:1px solid rgba(207,93,30,.5); border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.admin-dot{ width:8px; height:8px; border-radius:50%; background:var(--rust);
  box-shadow:0 0 10px var(--rust); animation:pulse 2s infinite; }
.admin-label{
  font-family:var(--type); font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--rust);
}
.admin-bar button{
  background:none; border:1px solid rgba(176,141,79,.4); border-radius:4px;
  color:var(--paper-dim); font-family:var(--serif); font-size:.74rem;
  padding:.35em .8em; cursor:pointer; transition:all .25s;
}
.admin-bar button:hover{ border-color:var(--brass); color:var(--paper); }
@media (pointer:coarse), (max-width:820px){ .admin-bar button{ cursor:pointer; } }

/* ---------- custom cursor ---------- */
.cursor, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:1000;
  border-radius:50%; transform:translate(-50%,-50%);
  transition:opacity .2s;
}
body:not(.cursor-on) .cursor, body:not(.cursor-on) .cursor-ring{ display:none; }
.cursor{ width:7px; height:7px; background:var(--rust); }
.cursor-ring{
  width:34px; height:34px; border:1px solid rgba(207,93,30,.55);
  transition:width .25s, height .25s, border-color .25s, background .25s;
}
.cursor-ring.hot{
  width:62px; height:62px; border-color:var(--brass);
  background:rgba(176,141,79,.08);
}
@media (pointer:coarse), (max-width:820px){ .cursor,.cursor-ring{ display:none; } }

/* ---------- dust motes ---------- */
#dust{ position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.5; }

/* ============================================================
   ROOMS
   ============================================================ */
.room{ position:relative; background:#0d0b09; }
.room[data-room]{ height:230vh; }
.hero{ height:200vh; }

.stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  background:var(--wall-dark);
  will-change:transform, clip-path;
}
#room-2 .stage{ background:var(--wall-parlor); }
#room-3 .stage{ background:var(--wall-front); }

/* architecture */
.crown{
  position:absolute; top:0; left:0; right:0; height:3.2vh; z-index:3;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 14px, rgba(0,0,0,.25) 14px 22px) bottom/100% 28% no-repeat,
    linear-gradient(180deg, #0c0a08, #322b22 45%, #1a1510 78%, #0e0b08);
  box-shadow:0 5px 18px rgba(0,0,0,.55);
}
.wainscot{
  position:absolute; left:0; right:0; bottom:0; height:23vh; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.15)),
    repeating-linear-gradient(90deg,
      #1c1813 0 4px, #26201a 4px 24vw, #1c1813 24vw calc(24vw + 4px));
  border-top:6px solid #0c0a08;
  box-shadow:inset 0 10px 24px rgba(0,0,0,.55);
}
.floor{
  position:absolute; left:-10%; right:-10%; bottom:0; height:14vh; z-index:2;
  transform-origin:bottom; transform:perspective(620px) rotateX(48deg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.18) 60%),
    repeating-linear-gradient(90deg,
      #2a1f14 0 7vw, #33271a 7vw 7.2vw, #241a10 7.2vw 14vw, #2e2316 14vw 14.2vw);
  box-shadow:inset 0 12px 30px rgba(0,0,0,.7);
  pointer-events:none;
}
.room-tag{
  position:absolute; bottom:3.2vh; left:2.2rem; z-index:9;
  font-family:var(--type); font-size:.72rem; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(233,226,211,.45);
}

/* threshold (door plaque shown while the arch opens) */
.threshold{
  position:absolute; top:0; left:0; width:100%; height:100vh; z-index:20;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; pointer-events:none; padding:0 8vw;
}
.th-roman{
  font-family:var(--west); color:var(--rust); font-size:.95rem;
  letter-spacing:.5em; text-transform:uppercase; margin-bottom:1rem;
}
.th-name{
  font-size:clamp(2.4rem, 6vw, 5rem); font-weight:900; letter-spacing:.04em;
  color:var(--paper); text-shadow:0 6px 30px rgba(0,0,0,.8);
}
.th-line{
  margin-top:1.1rem; font-style:italic; color:var(--paper-dim);
  font-size:clamp(.95rem, 1.4vw, 1.2rem);
}

/* ============================================================
   HERO
   ============================================================ */
.hero-stage{ background:var(--wall-dark); display:flex; flex-direction:column; }
.hero-inner{
  position:relative; width:100%; text-align:center; z-index:8;
  padding-top:max(11vh, 4.6rem); flex:0 0 auto;
}
.hero-kicker{
  font-family:var(--type); letter-spacing:.45em; text-transform:uppercase;
  font-size:.78rem; color:var(--brass); margin-bottom:1.2rem;
}
.hero-title{
  font-family:var(--west); font-size:clamp(4rem, 13vw, 11rem);
  line-height:.95; color:var(--paper); letter-spacing:.06em;
  text-shadow:0 10px 50px rgba(0,0,0,.9), 0 0 90px rgba(207,93,30,.18);
}
.hero-sub{
  margin-top:1.2rem; font-style:italic; color:var(--paper-dim);
  font-size:clamp(.95rem, 1.5vw, 1.25rem);
}
#heroMount{
  position:relative; flex:1 1 auto; min-height:0; width:100%;
  pointer-events:none; z-index:9;
}
#heroMount .piece{ pointer-events:auto; }
.hero-piece.hang{
  position:absolute; left:50%; top:46%; bottom:auto;
  transform:translate(-50%,-50%);
  width:var(--heroW, min(24vw, 36vh)); margin:0;
}
.scroll-hint{
  position:absolute; bottom:4vh; width:100%; text-align:center; z-index:10;
  font-family:var(--type); font-size:.7rem; letter-spacing:.35em;
  text-transform:uppercase; color:rgba(233,226,211,.5);
}
.scroll-hint span{
  display:block; width:1px; height:40px; margin:0 auto 10px;
  background:linear-gradient(180deg, transparent, var(--rust));
  animation:drop 1.8s ease-in-out infinite;
}
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:top; }
  100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============================================================
   CONVEYOR (auto-scrolling wall)
   ============================================================ */
.conveyor{
  position:absolute; left:0; top:4vh; bottom:18vh; z-index:5;
  display:flex; align-items:center; gap:7vw;
  padding:0 3.5vw;
  will-change:transform;
  width:max-content;
}

/* ============================================================
   PAINTINGS
   ============================================================ */
.hang{
  position:relative; flex:0 0 auto;
  width:calc(var(--w) * var(--wu));
  transform:translateY(var(--dy, 0vh));
}
.piece{ -webkit-tap-highlight-color:transparent; }

/* spotlight cone above each piece */
.hang::before{
  content:""; position:absolute; left:50%; bottom:96%;
  width:130%; height:46vh; transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,228,180,0) 0%, rgba(255,228,180,.12) 80%);
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  pointer-events:none;
}
/* warm pool of light behind the frame */
.hang::after{
  content:""; position:absolute; inset:-18% -22%; z-index:-1;
  background:radial-gradient(ellipse at 50% 38%, rgba(255,220,170,.16), transparent 65%);
  pointer-events:none;
}

/* brass picture lamp */
.lamp{
  position:absolute; left:50%; bottom:calc(100% + .4vh); z-index:6;
  width:34%; height:.9vh; transform:translateX(-50%);
  background:linear-gradient(180deg, #d9b86a, #8a6d3a 55%, #5d4a22);
  border-radius:20px;
  box-shadow:0 2px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.lamp::before{
  content:""; position:absolute; left:50%; bottom:100%; width:3px; height:2.6vh;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #6e5526, #9c7c42);
}
.lamp::after{
  content:""; position:absolute; top:100%; left:-12%; right:-12%; height:5vh;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,224,170,.35), transparent 70%);
  filter:blur(2px); pointer-events:none;
}

.frame{
  --bw:clamp(10px, 1.15vw, 24px);
  position:relative; padding:var(--bw);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            rotateZ(var(--sway,0deg)) translateZ(var(--lift,0px));
  transition:transform .18s ease-out, box-shadow .3s ease;
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 4px 10px rgba(0,0,0,.4);
}
.piece:hover .frame{
  --lift:22px;
  box-shadow:
    0 34px 70px rgba(0,0,0,.65),
    0 10px 22px rgba(0,0,0,.45),
    0 0 60px rgba(255,214,160,.12);
}

/* nail + wire */
.hang .frame::before{
  content:""; position:absolute; left:50%; top:-7vh; width:2px; height:7vh;
  transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
  pointer-events:none;
}

/* ----- frame finishes ----- */
.frame[data-frame="gold"]{
  background:
    repeating-linear-gradient(45deg, rgba(80,55,12,.25) 0 3px, transparent 3px 7px),
    linear-gradient(135deg, #8a6a2f 0%, #e3c479 22%, #7a5a26 47%, #d3b066 72%, #6e521f 100%);
  border:2px solid #4a3a16;
}
.frame[data-frame="walnut"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.25)),
    repeating-linear-gradient(94deg, #4a2f1c 0 7px, #3a2414 7px 12px, #533722 12px 21px);
  border:2px solid #241408;
}
.frame[data-frame="black"]{
  background:linear-gradient(160deg, #24211c, #131110 60%, #1d1a16);
  border:2px solid #060505;
}
.frame[data-frame="cream"]{
  background:linear-gradient(160deg, #e6decb, #cfc5ac 55%, #ded4be);
  border:2px solid #a89c80;
}
/* inner fillet line per finish */
.frame::after{
  content:""; position:absolute; inset:calc(var(--bw)*.45);
  pointer-events:none; z-index:3;
}
.frame[data-frame="gold"]::after{   border:2px solid rgba(58,40,8,.6);
  box-shadow:0 0 0 2px rgba(255,235,180,.25); }
.frame[data-frame="walnut"]::after{ border:2px solid rgba(176,141,79,.75); }
.frame[data-frame="black"]::after{  border:1px solid rgba(233,226,211,.22); }
.frame[data-frame="cream"]::after{  border:1px solid rgba(122,108,80,.5); }

/* matte + art */
.matte{ background:#efe8d6; padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.frame[data-matte="on"] .matte{
  padding:clamp(8px, 1vw, 22px);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.15);
}
.art{
  aspect-ratio:var(--ar); overflow:hidden; background:#111;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35);
}
.art img{ display:block; width:100%; height:100%; object-fit:cover; }

/* glass sheen that slides with tilt */
.sheen{
  position:absolute; inset:var(--bw); pointer-events:none; z-index:4;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.10) 47%,
    rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 64%);
  background-size:240% 240%;
  background-position:calc(50% + var(--shx,0%)) calc(50% + var(--shy,0%));
  mix-blend-mode:screen;
}

/* ----- status tags ----- */
.swing-tags{
  position:absolute; top:calc(var(--bw) * -0.4); right:8%; z-index:7;
  display:flex; gap:.5rem;
}
.swing-tag{
  position:relative;
  font-family:var(--type); font-size:clamp(.5rem,.62vw,.68rem);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.45em .8em; border-radius:2px;
  transform-origin:top center;
  animation:tag-sway 3.4s ease-in-out infinite;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.swing-tag::before{
  content:""; position:absolute; bottom:100%; left:50%; width:1px; height:1.6vh;
  background:rgba(233,226,211,.5); transform:translateX(-50%);
}
.swing-tag::after{
  content:""; position:absolute; top:-2px; left:50%; width:4px; height:4px;
  border-radius:50%; background:#9c7c42; transform:translateX(-50%);
}
@keyframes tag-sway{ 0%,100%{ rotate:-3deg; } 50%{ rotate:3.5deg; } }
.swing-tag.t-new{  background:var(--rust); color:var(--paper); animation-delay:-.7s; }
.swing-tag.t-sale{ background:#8e2f23; color:var(--paper); animation-delay:-1.6s; }
.swing-tag.t-fav{  background:linear-gradient(170deg,#c2a061,#8a6d3a); color:#241c0c; }

/* SOLD corner ribbon */
.ribbon, .m-ribbon{
  position:absolute; top:0; left:0; z-index:7; overflow:hidden;
  width:31%; aspect-ratio:1; pointer-events:none;
}
.ribbon::before, .m-ribbon::before{
  content:"SOLD"; position:absolute; top:18%; left:-42%;
  width:130%; transform:rotate(-45deg); text-align:center;
  font-family:var(--type); font-size:clamp(.5rem,.7vw,.78rem);
  letter-spacing:.3em; text-indent:.3em;
  background:linear-gradient(180deg,#9c2f20,#741f14); color:var(--paper);
  padding:.4em 0; box-shadow:0 3px 8px rgba(0,0,0,.5);
}
.m-ribbon{ width:120px; }
.m-ribbon::before{ font-size:.75rem; }

/* ----- brass plaque ----- */
.plaque{
  position:absolute; top:calc(100% + 1.6vh); left:50%; transform:translateX(-50%);
  min-width:10rem; max-width:118%;
  padding:.55rem 1rem .6rem; text-align:center;
  background:linear-gradient(170deg, #c2a061, #8a6d3a 60%, #a88a4e);
  border:1px solid #5d4a22; border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
}
.plaque span{ display:block; }
.p-title{
  font-family:var(--serif); font-weight:700; font-size:clamp(.7rem, .95vw, 1rem);
  color:#241c0c; letter-spacing:.04em;
}
.p-meta{
  font-family:var(--type); font-size:clamp(.52rem, .62vw, .68rem);
  color:#3d3014; margin-top:.15rem;
}
.p-price{
  font-family:var(--type); font-size:clamp(.6rem, .75vw, .8rem);
  color:#52200e; margin-top:.2rem; letter-spacing:.08em;
}
.p-price s{ opacity:.55; margin-right:.5em; }
.p-price .sold-dot{
  display:inline-block; width:.6em; height:.6em; border-radius:50%;
  background:#9c2f20; margin-right:.45em; vertical-align:baseline;
}

/* admin edit button on each piece */
.edit-btn{
  position:absolute; top:-1.2rem; right:-1.2rem; z-index:30;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--rust); color:var(--paper); border:2px solid #7c3614;
  font-size:1rem; cursor:pointer; display:none;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
  transition:transform .2s;
}
.edit-btn:hover{ transform:scale(1.12); }
body.is-admin .edit-btn{ display:block; }
@media (pointer:coarse), (max-width:820px){ .edit-btn{ cursor:pointer; } }

/* ============================================================
   FRAME DOCK
   ============================================================ */
.frame-dock{
  position:fixed; bottom:1.4rem; left:50%; transform:translateX(-50%);
  z-index:160; display:flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
  background:rgba(13,11,9,.82); backdrop-filter:blur(8px);
  border:1px solid rgba(176,141,79,.35); border-radius:50px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.dock-label{
  font-family:var(--type); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--brass); margin-right:.2rem;
}
.swatch{
  display:flex; align-items:center; gap:.45em;
  background:none; border:1px solid transparent; border-radius:40px;
  padding:.32em .8em; color:var(--paper-dim);
  font-family:var(--serif); font-size:.78rem; cursor:pointer;
  transition:border-color .25s, color .25s, background .25s;
}
@media (pointer:coarse), (max-width:820px){ .swatch{ cursor:pointer; } }
.swatch:hover{ color:var(--paper); border-color:rgba(176,141,79,.4); }
.swatch[data-active="true"]{
  border-color:var(--brass); color:var(--paper); background:rgba(176,141,79,.12);
}
.swatch i{
  width:16px; height:16px; border-radius:3px; display:inline-block;
  border:1px solid rgba(0,0,0,.5);
}
.swatch i[data-frame="gold"]{   background:linear-gradient(135deg,#e3c479,#7a5a26); }
.swatch i[data-frame="walnut"]{ background:repeating-linear-gradient(94deg,#4a2f1c 0 3px,#3a2414 3px 5px); }
.swatch i[data-frame="black"]{  background:#1b1916; }
.swatch i[data-frame="cream"]{  background:#ded5c2; }

/* ============================================================
   FINALE
   ============================================================ */
.finale{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  background:radial-gradient(ellipse at 50% 30%, #2a241c, #0d0b09 75%);
  padding:18vh 8vw 12vh; overflow:hidden;
}
.finale-inner{ position:relative; z-index:2; max-width:46rem; }
.finale h2{
  font-size:clamp(2.6rem, 7vw, 5.5rem); font-weight:900; margin:.6rem 0 1.4rem;
  color:var(--paper);
}
.finale-copy{ color:var(--paper-dim); line-height:1.8; font-size:1.05rem; }
.finale-actions{ display:flex; gap:1rem; justify-content:center; margin-top:2.4rem; flex-wrap:wrap; }
.acquire-btn, .ghost-btn{
  display:inline-block; text-decoration:none; letter-spacing:.18em;
  text-transform:uppercase; font-size:.78rem; padding:1em 2.2em;
  font-family:var(--serif); transition:all .3s;
  background:none; cursor:pointer;
}
@media (pointer:coarse), (max-width:820px){ .acquire-btn,.ghost-btn{ cursor:pointer; } }
.acquire-btn{
  background:var(--rust); color:var(--paper); border:1px solid var(--rust);
  box-shadow:0 8px 26px rgba(207,93,30,.3);
}
.acquire-btn:hover{ background:var(--rust-deep); transform:translateY(-2px); }
.acquire-btn[aria-disabled="true"]{
  background:#3a332b; border-color:#3a332b; color:rgba(233,226,211,.5);
  box-shadow:none; pointer-events:none;
}
.ghost-btn{ border:1px solid var(--brass-dim); color:var(--brass); }
.ghost-btn:hover{ border-color:var(--brass); color:var(--paper); }
.ghost-btn.danger{ border-color:#8e2f23; color:#c4604f; }
.ghost-btn.danger:hover{ background:#8e2f23; color:var(--paper); }
.finale-note{
  margin-top:2.2rem; font-family:var(--type); font-size:.72rem;
  letter-spacing:.12em; color:rgba(233,226,211,.45);
}
.finale footer{
  position:absolute; bottom:1.6rem; width:100%; text-align:center;
  font-family:var(--type); font-size:.68rem; letter-spacing:.25em;
  color:rgba(233,226,211,.3);
}
.stockroom-link{
  background:none; border:none; color:rgba(233,226,211,.3);
  font-family:var(--type); font-size:.68rem; letter-spacing:.25em;
  text-transform:inherit; cursor:pointer; text-decoration:underline dotted;
}
.stockroom-link:hover{ color:var(--brass); }
@media (pointer:coarse), (max-width:820px){ .stockroom-link{ cursor:pointer; } }

/* ============================================================
   MODALS
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; }
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(8,6,5,.86); backdrop-filter:blur(6px);
}
.modal-card{
  position:relative; z-index:2; display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:3rem; align-items:center;
  width:min(1060px, 92vw); max-height:90vh; padding:3rem;
  background:linear-gradient(165deg, #262019, #15110d);
  border:1px solid rgba(176,141,79,.3);
  box-shadow:0 40px 120px rgba(0,0,0,.8);
  animation:modalIn .45s cubic-bezier(.2,.9,.3,1);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(34px) scale(.96); } }
.modal-card.slim{ grid-template-columns:1fr; width:min(420px, 92vw); }
.modal-close{
  position:absolute; top:.7rem; right:1rem; background:none; border:none;
  color:var(--paper-dim); font-size:2rem; cursor:pointer; line-height:1; z-index:5;
  transition:color .25s, transform .25s;
}
.modal-close:hover{ color:var(--rust); transform:rotate(90deg); }
@media (pointer:coarse), (max-width:820px){ .modal-close{ cursor:pointer; } }
.modal-art-wrap{ display:grid; place-items:center; min-width:0; }
#mFrame{ width:100%; max-width:30rem; }
#mFrame .art{ max-height:62vh; }
#mFrame .art img{ max-height:62vh; }
.modal-info h3{ font-size:clamp(1.6rem, 3vw, 2.6rem); font-weight:900; margin:.4rem 0; }
.m-meta{ font-family:var(--type); font-size:.78rem; color:var(--brass); letter-spacing:.1em; }
.m-tags{ display:flex; gap:.5rem; margin-top:.8rem; flex-wrap:wrap; }
.m-tags:empty{ display:none; }
.m-tag{
  font-family:var(--type); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; padding:.4em .9em; border-radius:2px;
}
.m-tag.t-new{ background:var(--rust); color:var(--paper); }
.m-tag.t-sale{ background:#8e2f23; color:var(--paper); }
.m-tag.t-fav{ background:linear-gradient(170deg,#c2a061,#8a6d3a); color:#241c0c; }
.m-tag.t-sold{ background:#3a332b; color:#c4604f; border:1px solid #8e2f23; }
.m-desc{ margin:1.1rem 0 1.4rem; color:var(--paper-dim); line-height:1.7; font-style:italic; }
.frame-picker > span{
  display:block; font-family:var(--type); font-size:.66rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--brass);
  margin-bottom:.6rem;
}
.picker-row{ display:flex; gap:.5rem; flex-wrap:wrap; }
.m-price{
  font-family:var(--type); font-size:1.5rem; color:var(--paper);
  margin:1.4rem 0 1.2rem; letter-spacing:.06em;
}
.m-price s{ opacity:.5; font-size:.75em; margin-right:.5em; }
.m-price .was{ color:#c4604f; }

/* ----- login ----- */
.login-box{ text-align:center; padding:1rem .5rem; }
.login-box h3{ font-size:2rem; font-weight:900; margin:.4rem 0 .6rem; }
.login-box form{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.4rem; }
.login-box input{
  background:#0f0c09; border:1px solid rgba(176,141,79,.4); border-radius:4px;
  color:var(--paper); font-family:var(--type); letter-spacing:.2em;
  padding:.9em 1em; text-align:center; font-size:.9rem;
}
.login-box input:focus{ outline:none; border-color:var(--rust); }
.login-box .check.stay{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--serif); font-size:.82rem; color:var(--paper-dim);
}
.login-box .check.stay input{ accent-color:var(--rust); width:1rem; height:1rem; }
.login-err{ margin-top:1rem; color:#c4604f; font-style:italic; font-size:.9rem; }
.modal-card.shake{ animation:shake .4s; }
@keyframes shake{ 25%{ transform:translateX(-10px); } 75%{ transform:translateX(10px); } }

/* ----- editor ----- */
.modal-card.editor{ grid-template-columns:1fr; width:min(880px, 94vw); padding:2.2rem; overflow-y:auto; }
.editor-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2.2rem; }
.editor-preview{ text-align:center; }
.editor-preview .frame{ margin:1rem auto; max-width:15rem; }
.editor-preview .art{ aspect-ratio:var(--ar, 3/4); }
.editor-preview .art img{ width:100%; height:100%; object-fit:cover; min-height:8rem; background:#0f0c09; }
.file-btn{
  display:inline-block; border:1px solid var(--brass-dim); color:var(--brass);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.8em 1.6em; cursor:pointer; transition:all .25s;
}
.file-btn:hover{ border-color:var(--brass); color:var(--paper); }
@media (pointer:coarse), (max-width:820px){ .file-btn{ cursor:pointer; } }
.editor-hint{
  margin-top:.8rem; font-family:var(--type); font-size:.62rem;
  color:rgba(233,226,211,.4); letter-spacing:.08em;
}
.editor-form{ display:flex; flex-direction:column; gap:.95rem; }
.editor-form label{
  display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--type); font-size:.64rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass);
}
.editor-form input[type="text"], .editor-form input[type="number"],
.editor-form select, .editor-form textarea{
  background:#0f0c09; border:1px solid rgba(176,141,79,.35); border-radius:4px;
  color:var(--paper); font-family:var(--serif); font-size:.95rem;
  padding:.6em .8em;
}
.editor-form input:focus, .editor-form select:focus, .editor-form textarea:focus{
  outline:none; border-color:var(--rust);
}
.editor-form textarea{ resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.range-val{ font-family:var(--type); color:var(--paper-dim); letter-spacing:.1em; }
.editor-form input[type="range"]{ accent-color:var(--rust); }
.check-row{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:.2rem; }
.check{ flex-direction:row !important; align-items:center; gap:.5rem !important; }
.check input{ accent-color:var(--rust); width:1rem; height:1rem; }
.sold-check{ color:#c4604f; }
.editor-actions{ display:flex; gap:1rem; margin-top:.6rem; flex-wrap:wrap; }
.editor-actions .acquire-btn{ border:none; font-size:.78rem; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  :root{ --wu:2.6vw; }
  .topbar{ padding:.9rem 1.1rem; }
  .topbar nav a:not(.nav-cta){ display:none; }
  .admin-bar{ right:.8rem; top:3.8rem; flex-wrap:wrap; }

  .room[data-room]{ height:190vh; }
  .hero{ height:170vh; }
  .conveyor{ gap:10vw; top:8vh; bottom:16vh; }
  .hang{ transform:translateY(calc(var(--dy, 0vh) * .5)); }

  .hero-inner{ padding-top:max(9vh, 4rem); }

  .modal-card{ grid-template-columns:1fr; gap:1.4rem; padding:1.6rem; overflow-y:auto; }
  #mFrame{ max-width:16rem; margin:0 auto; }
  #mFrame .art, #mFrame .art img{ max-height:36vh; }
  .editor-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .frame-dock{ bottom:.8rem; flex-wrap:wrap; justify-content:center;
               border-radius:16px; width:min(94vw, 30rem); }
  .swatch{ font-size:.7rem; }
}

@media (prefers-reduced-motion:reduce){
  .scroll-hint span, .swing-tag{ animation:none; }
  .frame{ transition:none; }
  html{ scroll-behavior:auto; }
}