:root{
  --bg:#0b0b0a;--bg-raise:#121210;--ink:#ece6da;--muted:#8d877b;--gold:#c8a96a;
  --line:rgba(236,230,218,.12);--gutter:clamp(16px,5vw,80px);--max:1360px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Inter,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg);color-scheme:dark;scrollbar-color:#3a352c var(--bg)}
::selection{background:rgba(200,169,106,.35);color:#fff}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:lining-nums}
a{color:inherit;text-decoration:none}
em{font-style:italic;font-weight:300}
:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

.eyebrow{margin:0 0 24px;font:500 10px/1.6 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.link{display:inline-block;padding:6px 0;border-bottom:1px solid rgba(200,169,106,.45);font:500 10px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);transition:color .3s,border-color .3s}
.link:hover{color:var(--ink);border-color:var(--ink)}

.site-header{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px var(--gutter);font:500 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(11,11,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-crown{width:16px;height:auto;transform:translateY(-1px)}
.crowned{position:relative;display:inline-block}
.crowned::before{content:"";position:absolute;left:58%;bottom:84%;width:.46em;aspect-ratio:32/22;transform:translateX(-50%) rotate(-8deg);background:url(/crown.svg) center/contain no-repeat}
.site-header nav{display:flex;gap:clamp(16px,3vw,40px)}
.site-header nav a{color:var(--muted);transition:color .3s}
.site-header nav a:hover{color:var(--ink)}

.hero{min-height:100svh;display:grid;grid-template-rows:1fr auto;gap:clamp(28px,5vh,56px);padding:96px var(--gutter) 40px;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 55% at 50% 38%,#1a1814 0%,transparent 70%),linear-gradient(#0d0d0b,#0b0b0a 70%)}
.hero h1{margin:0;font-weight:300;font-size:clamp(52px,8vw,128px);line-height:.88;letter-spacing:-.035em}
.hero h1 em{color:var(--gold)}
.hero .eyebrow{margin-bottom:16px}
.hero-foot{display:flex;justify-content:space-between;align-items:end;gap:32px;padding-top:24px;border-top:1px solid var(--line)}
.hero-side{display:grid;justify-items:end;gap:18px;text-align:right}
.hero-side p{margin:0;max-width:30ch;font-size:clamp(17px,1.4vw,21px);color:var(--muted);font-style:italic}
.cue{font:500 10px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

/* The shelf: each work stands in a clear acrylic block under its own downlight. */
.shelf{position:relative;align-self:center;margin-bottom:56px;padding-top:clamp(20px,4vh,48px)}
.row{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,4vw,64px);perspective:1400px}
.ledge{position:absolute;z-index:1;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:-40px;height:40px;
  background:linear-gradient(#3a2d20 0,#2a2017 5px,#16110c 6px,#0f0c09);border-top:1px solid rgba(255,220,170,.3);box-shadow:0 40px 60px rgba(0,0,0,.85)}
.ledge::before{content:"";position:absolute;inset:-26px 0 auto;height:26px;background:linear-gradient(to top,rgba(255,225,170,.07),transparent)}
.stand{position:relative;display:grid;justify-items:center;color:inherit}
.stand::after{content:"";position:absolute;z-index:-1;bottom:-4px;left:12%;right:12%;height:10px;background:radial-gradient(ellipse at center,rgba(0,0,0,.75),transparent 70%)}
.glow{position:absolute;left:50%;bottom:10%;width:240%;height:190%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 36% 55% at 50% 30%,rgba(255,228,175,.17),rgba(255,228,175,.04) 60%,transparent 78%);opacity:0;animation:light-on 1.6s var(--d,0s) ease-out forwards}
.stand--off .glow{animation:none;opacity:.3}

.acrylic{--ry:0deg;--tx:0deg;--ty:0deg;--gx:50%;position:relative;display:block;width:clamp(128px,19vw,290px);aspect-ratio:4/5;padding:7%;border-radius:4px;
  background:linear-gradient(140deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 38%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.14));
  border:1px solid rgba(235,245,255,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 3px 3px 0 rgba(255,255,255,.35),inset -2px -2px 0 rgba(160,190,210,.25),
    7px 4px 0 -1px rgba(190,215,230,.16),8px 5px 0 -1px rgba(255,255,255,.12),0 40px 60px -20px rgba(0,0,0,.9);
  transform:rotateX(calc(5deg + var(--tx))) rotateY(calc(var(--ry) + var(--ty)));transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lean-l{--ry:14deg}.lean-r{--ry:-14deg}
.stand--off .acrylic{width:clamp(92px,13vw,190px);opacity:.75}
.mat{display:grid;align-content:center;height:100%;padding:9%;background:#f3f1ec;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.screen{position:relative;display:block;aspect-ratio:1;margin-bottom:4%;overflow:hidden;background:#000;box-shadow:0 0 0 2px #111,0 0 18px rgba(255,255,255,.08)}
.screen video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;animation:screen-on 1.4s calc(var(--d,0s) + .5s) linear forwards}
.stand--off .mat{background:#151513}
.stand--off .screen{background:linear-gradient(150deg,#141414,#050505)}
.led{position:absolute;right:8%;bottom:6%;width:4px;height:4px;border-radius:50%;background:#e3a948;box-shadow:0 0 6px #e3a948;animation:pulse 3s ease-in-out infinite}
.glare{position:absolute;inset:0;border-radius:4px;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent calc(var(--gx) - 20%),rgba(255,255,255,.22) calc(var(--gx) - 8%),transparent var(--gx),transparent calc(var(--gx) + 18%),rgba(255,255,255,.08) calc(var(--gx) + 24%),transparent calc(var(--gx) + 30%))}
.bolt{position:absolute;width:5.5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#b9bec4 35%,#6c7177 70%,#2b2e31);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.bolt:nth-of-type(1){top:3%;left:4%}.bolt:nth-of-type(2){top:3%;right:4%}.bolt:nth-of-type(3){bottom:3%;left:4%}.bolt:nth-of-type(4){bottom:3%;right:4%}
.plaque{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:max-content;max-width:150%;font:500 9px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);text-align:center}
.plaque b{color:var(--gold);font-weight:500;margin-right:.8em}
a.stand:hover .plaque,a.stand:focus-visible .plaque{color:var(--ink)}

.ticker{position:absolute;left:var(--gutter);top:76px;margin:0;display:flex;align-items:center;gap:10px;font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;color:var(--muted)}
.ticker-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 2.4s ease-in-out infinite}
.ticker-text{transition:opacity .5s}
.ticker-text.out{opacity:0}

@keyframes light-on{to{opacity:1}}
@keyframes screen-on{0%{opacity:0}8%{opacity:.7}14%{opacity:.1}22%{opacity:.85}30%{opacity:.35}45%{opacity:.9}100%{opacity:1}}
@keyframes pulse{50%{opacity:.3}}

.collection{max-width:var(--max);margin:0 auto;padding:clamp(110px,14vw,200px) var(--gutter);scroll-margin-top:40px}
.collection-head{max-width:820px;margin:0 auto clamp(90px,12vw,170px);text-align:center}
.collection h2,.artist h2{margin:0;font-weight:300;font-size:clamp(56px,9vw,140px);line-height:.95;letter-spacing:-.03em}
.collection-meta{display:flex;justify-content:center;gap:clamp(18px,4vw,48px);margin:40px 0 30px;padding:18px 0;border-block:1px solid var(--line);font:500 10px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.collection-line{margin:0 0 30px;font-size:clamp(20px,2vw,26px);color:var(--muted)}

.work{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,7vw,120px);align-items:center;scroll-margin-top:80px}
.work + .work{margin-top:clamp(110px,14vw,220px)}
.work--flip .frame{order:2}
.frame{margin:0;padding:clamp(10px,1.4vw,18px);background:var(--bg-raise);border:1px solid rgba(200,169,106,.22);box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4) inset}
.frame video{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#000}
.work-copy h3{margin:0 0 30px;font-weight:300;font-size:clamp(38px,4.2vw,64px);line-height:1.02;letter-spacing:-.02em}
.work-copy>p:not(.eyebrow){margin:0 0 18px;font-size:clamp(18px,1.35vw,21px);color:#cfc8ba}
.work-copy .closing{margin-top:32px!important;padding-top:24px;border-top:1px solid var(--line);font-style:italic;color:var(--ink)!important}
.work-copy .edition{font:500 10px/1.6 var(--sans)!important;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)!important}

.artist{max-width:var(--max);margin:0 auto;padding:clamp(110px,14vw,200px) var(--gutter);border-top:1px solid var(--line);scroll-margin-top:40px;
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,8vw,130px);align-items:center}
.artist h2{font-size:clamp(52px,7vw,112px)}
.artist h2 em{color:var(--gold)}
.portrait{position:relative;margin:0;display:grid;justify-items:center;perspective:1400px}
.portrait .acrylic{--ry:10deg;width:min(100%,420px)}
.portrait .screen img{display:block;width:100%;height:100%;object-fit:cover}
.portrait .glow{animation:none;opacity:.8}
.artist-lede{margin:28px 0 34px;font-size:clamp(28px,3vw,44px);line-height:1.15;font-style:italic;font-weight:300;color:var(--gold)}
.artist-text>p:not(.eyebrow):not(.artist-lede):not(.artist-links){margin:0 0 20px;max-width:56ch;font-size:clamp(18px,1.4vw,21px);color:#cfc8ba}
.artist-links{display:flex;flex-wrap:wrap;gap:16px 36px;margin:40px 0 0}

.site-footer{display:flex;justify-content:space-between;gap:20px;padding:26px var(--gutter) 32px;border-top:1px solid var(--line);font:500 10px/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width:860px){
  .work{grid-template-columns:1fr;gap:36px}
  .artist{grid-template-columns:1fr}
  .portrait .acrylic{width:min(80vw,360px)}
  .work--flip .frame{order:0}
  .hero-foot{flex-direction:column;align-items:start}
  .hero-side{justify-items:start;text-align:left}
  .stand--off{display:none}
  .acrylic{width:min(40vw,300px)}
  .plaque{max-width:100%;width:100%;letter-spacing:.16em}
}
@media (max-width:520px){
  .site-header{padding-block:18px}
  .site-header .brand{letter-spacing:.18em}
  .site-header nav a[href="#artist"]{display:none}
  .collection-meta{gap:14px;letter-spacing:.16em}
  .site-footer{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .glow,.screen video{animation:none;opacity:1}
  .led{animation:none}
  .acrylic{transition:none}
  .ticker-dot{animation:none}
}
